/* ============================================================
   VARIABLES — thème clair (défaut)
   ============================================================ */
:root {
    --bg-html:             #98c9d5;
    --bg-body:             #ffffff;
    --bg-nav:              #f2f9fb;
    --bg-chapeau:          #569aab;
    --bg-article:          #e5f2f5;
    --bg-article-border:   #cce4ea;
    --bg-footer:           #569aab;
    --bg-une:              #e5f2f5;
    --bg-une-border:       #cce4ea;

    --color-body:          #0e2730;
    --color-h1:            #569aab;
    --color-h2:            #394C50;
    --color-h3:            #263235;
    --color-p:             #0e2730;
    --color-a:             #b85510;
    --color-chapeau:       #ffffff;
    --color-footer:        #ffffff;
    --color-footer-a:      #ffffff;

    --nav-home-color:      #394C50;
    --nav-border:          #cce4ea;
    --nav-input-bg:        #ffffff;
    --nav-input-color:     #263235;
    --nav-placeholder:     #7297a0;

    --pills-bg:            #cce4ea;
    --pills-color:         #003a70;
    --pills-span-bg:       #f2f2f2;
    --pills-span-color:    #999;

    --une-label-color:     #569aab;
    --une-label-border:    #cce4ea;
    --une-h3-color:        #263235;
    --une-type-bg:         #cce4ea;
    --une-type-color:      #003a70;
    --une-meta-color:      #569aab;
    --une-excerpt-color:   #394c50;
    --une-count-color:     #7297a0;

    --border-top-site:     #569aab;
    --border-top-footer:   #ca6112;
}

/* ============================================================
   VARIABLES — thème sombre
   ============================================================ */
body.dark {
    --bg-html:             #1a2328;
    --bg-body:             #1a2328;
    --bg-nav:              #243038;
    --bg-chapeau:          #243038;
    --bg-article:          #1e2e36;
    --bg-article-border:   #2d4557;
    --bg-footer:           #243038;
    --bg-une:              #1e2e36;
    --bg-une-border:       #2d4557;

    --color-body:          #d0e6f0;
    --color-h1:            #7eccd8;
    --color-h2:            #7eccd8;
    --color-h3:            #c8e8f0;
    --color-p:             #d0e6f0;
    --color-a:             #f0a060;
    --color-chapeau:       #d8eaf2;
    --color-footer:        #b0ccd8;
    --color-footer-a:      #7eccd8;

    --nav-home-color:      #c8e8f0;
    --nav-border:          #2d4557;
    --nav-input-bg:        #1a2328;
    --nav-input-color:     #c8e8f0;
    --nav-placeholder:     #5a7a88;

    --pills-bg:            #2d4557;
    --pills-color:         #7eccd8;
    --pills-span-bg:       #243038;
    --pills-span-color:    #5a7a88;

    --une-label-color:     #7eccd8;
    --une-label-border:    #2d4557;
    --une-h3-color:        #c8e8f0;
    --une-type-bg:         #2d4557;
    --une-type-color:      #7eccd8;
    --une-meta-color:      #7eccd8;
    --une-excerpt-color:   #b0ccd8;
    --une-count-color:     #5a7a88;

    --border-top-site:     #3a7a8a;
    --border-top-footer:   #ca6112;
}

/* ============================================================
   BASE
   ============================================================ */
html {
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--bg-html) url(/fond.gif) center top repeat;
    width: 100%;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 10px 0 0 0;
    padding: 0 0 0.5rem 0;
    border: 0;
    border-top: 3px solid var(--border-top-site);
    max-width: 820px;
    margin-inline: auto;
    line-height: 1.6;
    background-color: var(--bg-body);
    color: var(--color-body);
    transition: background-color 0.3s, color 0.3s;
}

main {
    margin: 0 1rem 0.5rem 1rem;
    padding: 0;
    border: 0;
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
h1 {
    line-height: 1;
    color: var(--color-h1);
    font-size: 3.6em;
    font-weight: bolder;
    font-family: "Trebuchet MS", system-ui, -apple-system, sans-serif;
    letter-spacing: -0.07em;
    width: 100%;
    min-height: 85px;
    vertical-align: middle;
    background:
      linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),
      url('samba-pandeiro.svg') left top / auto 90px no-repeat;
    padding: 10px 0 0 0;
    text-indent: 25px;
}

body.dark h1 {
    background:
      linear-gradient(rgba(26,35,40,0.7), rgba(26,35,40,0.7)),
      url('samba-pandeiro.svg') left top / auto 90px no-repeat;
}

h2 {
    color: var(--color-h2);
    font-size: 1.6em;
    font-family: "Trebuchet MS", system-ui, -apple-system, sans-serif;
    letter-spacing: -0.06em;
}

h3 {
    color: var(--color-h3);
    font-size: 1.4em;
    font-family: "Trebuchet MS", system-ui, -apple-system, sans-serif;
    letter-spacing: -0.05em;
}

p.full_name {
    color: var(--color-h3);
    font-size: 1.4em;
    font-family: "Trebuchet MS", system-ui, -apple-system, sans-serif;
    letter-spacing: -0.05em;
}

a {
    color: var(--color-a);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

header {
    margin-bottom: 2rem;
}

/* ============================================================
   ARTICLES
   ============================================================ */
article {
    margin: 1rem 0;
    padding: 0 1rem;
    border: 1px solid var(--bg-article-border);
    border-radius: 10px;
    background: var(--bg-article);
}

article.artart {
    padding: 0.5rem 1rem;
}

article.artart h3 {
    padding: 0;
}

article p {
    margin: 0 0 0.5rem 0;
    padding: 0;
}

/* ============================================================
   SECTION PAROLES
   ============================================================ */
section#sonlet h2 {
    line-height: 0.9;
}

section#sonlet div {
    margin: 0 0 1.5rem 0;
}

section#sonlet div p {
    margin: 1.5rem 0;
}

section#sonlet p.enredo-info {
    font-size: 1.4em;
    font-weight: bolder;
}

section#sonlet p.enredo-info span.enredo-info-year {
}

section#sonlet p.enredo-info span.enredo-info-escola {
}

p.enredo-subtitle {
    font-size: 1.4em;
    font-weight: bolder;
    color: var(--color-p);
    font-style: italic;
    margin: -2.5rem 0 1.5rem 0;
    letter-spacing: -0.04em;
}

p.subtitenr {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-h1);
    font-style: italic;
    margin: -2rem 0 0.7rem 0;
    letter-spacing: -0.04em;
    line-height: 1em;
}

/* ============================================================
   CHAPEAU
   ============================================================ */
div.chapeu {
    margin: 0;
    padding: 0.5rem 1rem;
    border: 0;
    background-color: var(--bg-chapeau);
    border-radius: 10px;
    color: var(--color-chapeau);
}

div.chapeu p {
    font-style: italic;
    font-weight: bold;
    font-size: 1.1em;
    letter-spacing: -0.02em;
}

/* ============================================================
   NAV
   ============================================================ */
nav {
    color-scheme: light;
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
    background: var(--bg-nav);
    border-bottom: 1px solid var(--nav-border);
    transition: background 0.3s;
}

body.dark nav {
    color-scheme: dark;
}

nav a.home {
    color: var(--nav-home-color);
    text-decoration: none;
    font-size: 1.85em;
    font-weight: bold;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

nav a.home span {
    color: var(--color-a);
}

nav a.home:hover {
    color: var(--color-h1);
}

.nav-search {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-search form {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-search input {
    color-scheme: light;
    appearance: none;
    -webkit-appearance: none;
    padding: 0.4rem 1rem;
    border: 1px solid var(--nav-border);
    border-radius: 10px;
    font-size: 1em;
    outline: none;
    width: 222px;
    font-family: "Trebuchet MS", system-ui, sans-serif;
    color: var(--nav-input-color);
    background: var(--nav-input-bg);
    -webkit-text-fill-color: var(--nav-input-color);
    transition: background 0.3s, color 0.3s;
}

body.dark .nav-search input {
    color-scheme: dark;
    -webkit-text-fill-color: #c8e8f0;
}

.nav-search input::placeholder {
    color: var(--nav-placeholder);
    -webkit-text-fill-color: var(--nav-placeholder);
}

.nav-search button {
    padding: 0.3rem 0.6rem;
    background: #3f7f90;
    border: 1px solid #3f7f90;
    border-radius: 10px;
    color: #ffffff;
    font-size: 1.2em;
    line-height: 1em;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.15s, border-color 0.15s;
}

.nav-search button:hover {
    background: #ca6112;
    border-color: #ca6112;
}

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    padding: 0.2rem 0.3rem;
    color: var(--nav-home-color);
    transition: color 0.15s;
}

#theme-toggle:hover {
    color: var(--color-a);
}

/* ============================================================
   PILLS
   ============================================================ */
.pills a { display: inline-block; padding: 1px 6px 2px 6px; margin: 1px 1px 5px 1px; border-radius: 6px; background: var(--pills-bg); color: var(--pills-color); text-decoration: none; font-weight: bold; }
.pills a.active { color: var(--pills-bg); background: var(--pills-color); }
.pills a:hover { color: #fff; background: #ca6112; }
.pills span { display: inline-block; padding: 4px 8px; margin: 2px; border-radius: 6px; background: var(--pills-span-bg); color: var(--pills-span-color); font-weight: bold; }

/* ============================================================
   BLOC UNE
   ============================================================ */
.une { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.une-bloc { flex: 1 1 300px; background: var(--bg-une); border: 1px solid var(--bg-une-border); border-radius: 10px; padding: 0.75rem 1rem; }
.une-label { font-size: 0.68em; font-weight: bold; text-transform: uppercase; letter-spacing: 0.08em; color: var(--une-label-color); margin-bottom: 0.4rem; border-bottom: 1px solid var(--une-label-border); padding-bottom: 0.3rem; }
.une-bloc h3 { font-size: 1.2em; letter-spacing: -0.04em; color: var(--une-h3-color); margin: 0.35rem 0 0.15rem; }
.une-bloc h3 a { color: var(--color-a); text-decoration: none; }
.une-bloc h3 a:hover { text-decoration: underline; }
.une-type { display: inline-block; font-size: 0.72em; font-weight: bold; background: var(--une-type-bg); color: var(--une-type-color); border-radius: 6px; padding: 1px 7px; margin-bottom: 0.4rem; }
.une-meta { font-size: 0.78em; color: var(--une-meta-color); margin-bottom: 0.4rem; }
.une-meta a { color: var(--une-meta-color); text-decoration: none; }
.une-meta a:hover { color: var(--color-a); }
.une-excerpt { font-size: 0.82em; color: var(--une-excerpt-color); font-style: italic; line-height: 1.5; margin-top: 0.4rem; }
.une-count { font-size: 0.85em; color: var(--une-count-color); margin-top: 0.5rem; }

/* ============================================================
   PLAYER YOUTUBE
   ============================================================ */
#youtube-player-container {
    width: 100%;
}

#play-youtube-btn {
    width: 100%;
    background-color: #9a4a0e;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 10px;
    color: #ffffff;
    padding: 10px 0;
    font-size: 1rem;
    border: none;
    cursor: pointer;
}

#play-youtube-btn:hover {
    background-color: #3f7f90;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
    margin: 0;
    padding: 0.5rem 1rem;
    border: 0;
    border-top: 3px solid var(--border-top-footer);
    background-color: var(--bg-footer);
    border-radius: 10px;
    color: var(--color-footer);
    transition: background-color 0.3s;
}

footer a {
    color: var(--color-footer-a);
    font-weight: bolder;
}

/* ============================================================
   BOUTON RETOUR EN HAUT
   ============================================================ */
#btn-top {
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    width: 42px;
    height: 42px;
    background: #569aab;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s, background 0.15s;
    z-index: 1000;
    font-family: "Trebuchet MS", system-ui, sans-serif;
}
#btn-top.visible { opacity: 1; visibility: visible; }
#btn-top:hover { background: #ca6112; }

/* ============================================================
   OVERLAY PAROLES
   ============================================================ */
#btn-overlay-paroles {
    display: inline-block;
    margin: 0;
    padding: 0.5rem 0.8rem;
    background: var(--pills-bg);
    color: var(--pills-color);
    border: none;
    border-radius: 20px;
    font-family: "Trebuchet MS", system-ui, sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s;
}
#btn-overlay-paroles:hover { background: #569aab; color: #fff; }

#overlay-paroles {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--bg-body);
    flex-direction: column;
    overflow: hidden;
}
#overlay-paroles.actif { display: flex; }

#overlay-paroles div { margin: 0 !important; }

#overlay-paroles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.75rem;
    background: var(--bg-chapeau);
    flex-shrink: 0;
    line-height: 1;
    box-sizing: border-box;
}

#overlay-paroles-left,
#overlay-paroles-right {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

#overlay-zoom-moins,
#overlay-zoom-plus,
#overlay-fermer {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.5rem;
    font-family: "Trebuchet MS", system-ui, sans-serif;
    font-size: 1.22em;
    font-weight: bold;
    margin: 0;
    cursor: pointer;
    transition: background 0.15s;
}
#overlay-zoom-moins:hover,
#overlay-zoom-plus:hover,
#overlay-fermer:hover { background: rgba(255, 255, 255, 0.4); }

#overlay-paroles-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.5rem;
    font-family: "Trebuchet MS", system-ui, sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    line-height: 1.4;
    color: var(--color-body);
    background: var(--bg-body);
    -webkit-overflow-scrolling: touch;
}
#overlay-paroles-content p:first-child { margin-top: 0; }
#overlay-paroles-content p { margin-bottom: 1.1em; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}