/* ==========================================
   1. VARIABLES (les mêmes que style.css)
   ========================================== */
:root {
    --fond: #15100c;
    --encre: #f1e7da;
    --encre-douce: #a99b8c;
    --braise: #ef7b45;
    --argile: #e8a38e;
    --trait: rgba(241, 231, 218, 0.12);
    --trait-fort: rgba(241, 231, 218, 0.28);
    --marge: clamp(1.25rem, 4vw, 3.5rem);
    --respiration: 1.4vw;   /* retrait du texte par rapport aux lignes de la trame */
}

*, *::before, *::after { box-sizing: border-box; }

/* ==========================================
   2. BASE & FOND
   La barre de défilement est masquée : sinon elle réduit la largeur de la page
   et décale les colonnes (donc Archives / Contact) par rapport à l'accueil.
   ========================================== */
html {
    background: var(--fond);
    scrollbar-width: none;
}

html::-webkit-scrollbar { display: none; }


body {
    margin: 0;
    background-color: var(--fond);
    color: var(--encre);
    font-family: "Space Mono", monospace;
    -webkit-font-smoothing: antialiased;
}

.contexte-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60vw 60vw at 6% 0%, rgba(239, 123, 69, 0.20), transparent 70%),
        radial-gradient(55vw 55vw at 100% 100%, rgba(232, 163, 142, 0.14), transparent 70%);
}

.contexte-background::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.3;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Transition depuis / vers l'accueil : le personnage glisse et rétrécit (ou grandit) */
@view-transition { navigation: auto; }

/* Le petit faust glisse en une seule courbe longue (départ vif, arrivée très douce) ;
   le reste de la page se fond lentement, sans à-coup. */
::view-transition-group(faust) {
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(faust),
::view-transition-new(faust) {
    animation-duration: 1.2s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) { animation: vt-sortie 0.4s cubic-bezier(0.4, 0, 0.6, 1) both; }
::view-transition-new(root) { animation: vt-entree 0.5s cubic-bezier(0.4, 0, 0.6, 1) both; }
@keyframes vt-sortie { to { opacity: 0; filter: blur(5px); } }
@keyframes vt-entree { from { opacity: 0; } }

/* L'en-tête est identique d'une page à l'autre : onglets, rond de thème et flèche de retour
   restent en place (ils ne se rechargent pas) ; seul le soulignement de l'onglet actif se fond. */
.nav-bar      { view-transition-name: onglets; }
.theme-toggle { view-transition-name: bascule; }
.retour       { view-transition-name: retour; }

::view-transition-group(onglets),
::view-transition-group(bascule),
::view-transition-group(retour) { animation-duration: 0.5s; animation-timing-function: ease; }

/* Entre deux catégories, le petit faust ne bouge pas de place : il s'estompe puis réapparaît en douceur
   (la classe faust-fixe est posée par le script de l'en-tête quand il garde la même position). */
html.faust-fixe::view-transition-old(faust) { animation: faust-sortie 0.35s ease both; }
html.faust-fixe::view-transition-new(faust) { animation: faust-entree 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
@keyframes faust-sortie { to { opacity: 0; } }
@keyframes faust-entree { from { opacity: 0; transform: scale(0.86); filter: blur(4px); } }

/* Quand l'en-tête est déjà là, il n'a pas à « arriver » une seconde fois */
html.vt .nav-bar,
html.vt .theme-toggle,
html.vt .retour { animation: none; }


@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ==========================================
   3. TRAME : 3 colonnes de repères, sur toute la hauteur de la page
   ========================================== */
.page {
    overflow-x: clip;
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.reperes {
    position: absolute;
    inset: 0 var(--marge);
    z-index: 0;
    pointer-events: none;
    border-right: 1px solid var(--trait);
    background: linear-gradient(to right, var(--trait) 1px, transparent 1px) 0 0 / 33.3333% 100%;
}

.page > *:not(.reperes) { position: relative; z-index: 1; }

a:focus-visible,
button:focus-visible { outline: 2px solid var(--argile); outline-offset: 6px; border-radius: 2px; }


/* ==========================================
   5. EN-TÊTE : retour | personnage | onglets
   Même grille et même alignement que l'accueil : les onglets restent
   exactement à la même place quand on change de page.
   ========================================== */
.entete {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    padding: clamp(0.9rem, 3vh, 1.5rem) var(--marge);
}

.retour {
    grid-column: 1;
    justify-self: start;
    padding: 0 0 6px var(--respiration);
    color: var(--encre-douce);
    text-decoration: none;
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    transition: color 0.3s ease;
}

.retour:hover,
.retour:focus-visible { color: var(--argile); }

/* Petit personnage au centre, avec son halo.
   Il porte le même view-transition-name que celui de l'accueil : c'est lui qui rétrécit. */
.mini-embleme {
    grid-column: 2;
    justify-self: center;
    position: relative;
    display: block;
    height: clamp(4.25rem, 11vh, 7rem);
    aspect-ratio: 474 / 1174;
    view-transition-name: faust;
}

.mini-embleme::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 375%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side,
        rgba(239, 123, 69, 0.36),
        rgba(239, 123, 69, 0.14) 55%,
        transparent);
}

.mini-embleme img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-bar {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 2.25rem);
}

.nav-bar a {
    color: var(--encre-douce);
    text-decoration: none;
    font-weight: 400;
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding-bottom: 6px;
    background: linear-gradient(var(--argile), var(--argile)) no-repeat 0 100% / 0 1.5px;
    transition: color 0.3s ease, background-size 0.3s ease;
}

.nav-bar a:hover,
.nav-bar a:focus-visible,
.nav-bar a[aria-current="page"] { color: var(--argile); background-size: 100% 1.5px; }

/* ==========================================
   6. TITRE : « Archives sonores » (col. 1) · présentation (col. 3)
   ========================================== */
.titre {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    padding: clamp(1rem, 4vh, 2.5rem) var(--marge) clamp(0.5rem, 2vh, 1.25rem);
}

h1 {
    grid-column: 1 / span 2;
    margin: 0;
    padding-left: var(--respiration);
    font-family: "Fraunces", Georgia, serif;
    font-size: min(6vw, 13vh);
    line-height: 0.95;
    letter-spacing: -0.03em;
}

h1 span { display: block; }
h1 span:first-child { font-weight: 300; font-style: italic; }
h1 span:last-child { font-weight: 400; font-style: normal; color: var(--braise); }

.total {
    font-family: "Space Mono", monospace;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    vertical-align: top;
    color: var(--encre-douce);
    position: relative;
    top: 0.6em;
}

.intro {
    grid-column: 3;
    margin: 0;
    padding: 0 var(--respiration);
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.25vw, 1.2rem);
    line-height: 1.5;
    color: var(--encre-douce);
}

/* ==========================================
   7. SIGNAL SONORE : la ligne de la trame passe par son axe
   ========================================== */
.onde {
    width: 100%;
    height: clamp(60px, 10vh, 110px);
    pointer-events: none;
}

.onde::before {
    content: "";
    position: absolute;
    left: var(--marge);
    right: var(--marge);
    top: 50%;
    height: 1px;
    background: var(--trait-fort);
}

.onde svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.onde path {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.trait-braise { stroke: var(--braise); }
.trait-argile { stroke: var(--argile); opacity: 0.6; }


/* ==========================================
   10. PIED
   ========================================== */
.pied {
    margin: 0;
    padding: 1.25rem calc(var(--marge) + var(--respiration)) 1.5rem;
    color: var(--encre-douce);
    font-size: 0.75rem;
}


/* ==========================================
   CAHIER : un feuillet par projet, posés sur la trame
   ========================================== */
.feuillets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: clamp(1.5rem, 5vh, 3rem) var(--marge) clamp(2rem, 6vh, 4rem);
    flex: 1;
}

.feuillet {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0 var(--respiration) clamp(1.5rem, 4vh, 2.75rem);
    padding: 1.25rem 1.25rem 1.1rem 2.1rem;
    border: 1px solid var(--trait-fort);
    /* lignes de cahier + marge */
    background:
        linear-gradient(to right, transparent 1.45rem, rgba(239, 123, 69, 0.45) 1.45rem, rgba(239, 123, 69, 0.45) calc(1.45rem + 1px), transparent calc(1.45rem + 1px)),
        repeating-linear-gradient(to bottom, transparent 0, transparent 1.6rem, var(--trait) 1.6rem, var(--trait) calc(1.6rem + 1px)),
        rgba(241, 231, 218, 0.025);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}

.feuillet:nth-child(3n+1) { transform: rotate(-0.5deg); }
.feuillet:nth-child(3n+2) { transform: rotate(0.35deg); }
.feuillet:nth-child(3n)   { transform: rotate(-0.2deg); }

.feuillet:hover { transform: rotate(0deg) translateY(-4px); border-color: var(--argile); }

.feuillet-tete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--encre-douce);
}

.feuillet-tete b { color: var(--braise); font-weight: 400; }

.feuillet h2 {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.4rem, 2.1vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.feuillet p {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.92rem, 1.1vw, 1.05rem);
    line-height: 1.6rem;
    color: var(--encre-douce);
}

.lecteur {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: auto;
    padding-top: 0.4rem;
}

.lire {
    appearance: none;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 1px solid var(--argile);
    border-radius: 50%;
    background: none;
    color: var(--argile);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.lire svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }
.lire .pause { display: none; }
.lire[aria-pressed="true"] .play { display: none; }
.lire[aria-pressed="true"] .pause { display: block; }
.lire:hover:not(:disabled) { background: var(--argile); color: var(--fond); }
.lire:disabled { opacity: 0.4; cursor: default; }

.forme {
    flex: 1;
    min-width: 0;
    height: 2.4rem;
    display: flex;
    align-items: center;
    gap: 2px;
}

.forme i {
    flex: 1;
    min-width: 1px;
    background: var(--trait-fort);
    border-radius: 1px;
    transition: background-color 0.2s ease;
}

.forme i.joue { background: var(--braise); }

.duree {
    flex: none;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--encre-douce);
}

@media (prefers-reduced-motion: reduce) {
    .feuillet { transition: none; }
}

@media (max-width: 760px) {
    :root { --respiration: 0.75rem; }

    .reperes { background-size: 50% 100%; }

    .entete { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
    .retour { padding-left: 0; white-space: nowrap; }

    .titre { grid-template-columns: 1fr; gap: 1.25rem; }
    h1, .intro { grid-column: 1; }
    h1 { font-size: clamp(3rem, 15vw, 5rem); }
    .intro { padding: 0 var(--respiration); }

    .feuillets { grid-template-columns: 1fr; }
}


/* ==========================================================
   BASCULE DE THÈME : orange (par défaut) <-> minimaliste
   Le bouton .theme-toggle pose  <html data-theme="minimal">  et mémorise le choix.
   Pendant le changement, <html> reçoit la classe .theme-anim (fondu de 0,5 s).
   ========================================================== */

html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
    transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease,
                fill 0.5s ease, stroke 0.5s ease, opacity 0.5s ease, filter 0.5s ease !important;
}

/* ----- Le bouton : un disque à moitié plein, qui tourne à chaque clic ----- */
.theme-toggle {
    appearance: none;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    position: relative;
    z-index: 2;
    width: 26px;
    height: 26px;
    margin: -3px var(--respiration, 1.4vw) 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--argile);
    cursor: pointer;
    transition: color 0.3s ease;
}

.theme-toggle svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.theme-toggle:hover,
.theme-toggle:focus-visible { color: var(--encre); }

.theme-toggle:focus-visible { outline: 2px solid var(--argile); outline-offset: 6px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
    .theme-toggle svg { transition: none; }
}

@media (max-width: 760px) {
    .entete { justify-content: flex-start; align-items: flex-start; gap: 0.6rem; }
    .mini-embleme { grid-column: auto; margin-left: auto; justify-self: auto; }
    .nav-bar { grid-column: auto; grid-row: auto; margin-left: auto; gap: 0.9rem; }
    .theme-toggle { grid-column: auto; grid-row: auto; margin: -4.5px 0 0; flex: none; align-self: flex-start; }
}

/* ----- Thème minimaliste : sombre, monochrome, sans décor ----- */
html[data-theme="minimal"] {
    --fond: #0b0b0c;
    --encre: #ecebe8;
    --encre-douce: #76736f;
    --braise: #ecebe8;          /* l'orange devient blanc cassé */
    --argile: #bdbab4;          /* le rose argile devient gris clair */
    --trait: rgba(236, 235, 232, 0.07);
    --trait-fort: rgba(236, 235, 232, 0.16);
}

html[data-theme="minimal"],
html[data-theme="minimal"] body { background: var(--fond); }

html[data-theme="minimal"] ::selection { background: var(--encre); color: var(--fond); }

html[data-theme="minimal"] .contexte-background { opacity: 0; }

html[data-theme="minimal"] .embleme::after,
html[data-theme="minimal"] .mini-embleme::after { opacity: 0; }

html[data-theme="minimal"] .embleme img,
html[data-theme="minimal"] .mini-embleme img { filter: grayscale(1) brightness(1.08) contrast(0.95); }

html[data-theme="minimal"] .trait-argile { opacity: 0; }
html[data-theme="minimal"] .onde path { stroke-width: 1; }
html[data-theme="minimal"] .trait-braise { stroke: var(--encre); opacity: 0.85; }

html[data-theme="minimal"] h1 span:last-child  { color: var(--encre); }


html[data-theme="minimal"] .motif,
html[data-theme="minimal"] .motif * { stroke-width: 1; }


html[data-theme="minimal"] .kicker,
html[data-theme="minimal"] .intro-kicker,
html[data-theme="minimal"] .film-num b { color: var(--encre-douce); }

/* Archives */
html[data-theme="minimal"] .page > .filtres { background: rgba(11, 11, 12, 0.9); }
html[data-theme="minimal"] .filtre.actif { background: rgba(236, 235, 232, 0.05); }

html[data-theme="minimal"] .cadre,
html[data-theme="minimal"] .fiche-cadre {
    background: #101011;
    border-color: var(--trait-fort);
    box-shadow: none;
}

html[data-theme="minimal"] .cadre:hover,
html[data-theme="minimal"] .cadre:focus-visible { border-color: var(--encre-douce); box-shadow: none; }

html[data-theme="minimal"] .visuel .t2 { opacity: 0; }
html[data-theme="minimal"] .visuel .t1 { stroke: var(--encre); stroke-width: 1; }

html[data-theme="minimal"] .grand-num {
    color: rgba(236, 235, 232, 0.05);
}

html[data-theme="minimal"] .voir { background: var(--encre); color: var(--fond); }
html[data-theme="minimal"] .film:hover { background: none; }
html[data-theme="minimal"] .tous { color: var(--encre); }

html[data-theme="minimal"] .fiche { background: var(--fond); }
html[data-theme="minimal"] .fiche-barre { background: linear-gradient(to bottom, rgba(11, 11, 12, 0.96), rgba(11, 11, 12, 0.7)); }
html[data-theme="minimal"] .fiche-id h2 { color: var(--encre); }

/* ==========================================================
   ONGLETS : Archives · Cahier de Brouillon · Contact
   Les trois sont centrés dans la 3e colonne de la trame ; le rond de thème
   est sorti de la colonne, dans la marge de droite, bien à part.
   ========================================================== */
.nav-bar {
    grid-column: 3;
    justify-self: center;
    justify-content: center;
    width: max-content;
    margin: 0;
    gap: clamp(0.7rem, 1.4vw, 1.5rem);
}

.nav-bar a {
    white-space: nowrap;
    font-size: clamp(0.6rem, 0.95vw, 0.95rem);
}

@media (min-width: 761px) {
    .theme-toggle {
        position: absolute;
        top: calc(clamp(0.6rem, 0.95vw, 0.95rem) * 0.65 - 10px);
        right: calc(var(--marge) / 2 - 12px);
        width: 24px;
        height: 24px;
        margin: 0;
    }
}

@media (max-width: 1000px) {
    .nav-bar .suite { display: none; }   /* « Cahier de Brouillon » devient « Cahier » quand la colonne est étroite */
}

@media (max-width: 760px) {
    .theme-toggle { position: static; }
    .nav-bar { width: auto; margin-left: auto; }
    .nav-bar .suite,
    .retour .txt { display: none; }
}

/* ==========================================================
   ARRIVÉE EN DOUCEUR : après le glissement du petit faust, chaque élément apparaît
   à son tour (titre, onglets, puis le reste). Le petit faust, lui, n'est jamais animé ici :
   c'est la transition de page qui le déplace.
   ========================================================== */
@keyframes arrivee    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }

h1                { animation: arrivee 1s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both; }
.intro,
.coordonnees      { animation: arrivee 1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
.retour,
.nav-bar          { animation: arrivee 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both; }
.theme-toggle     { animation: apparition 0.9s ease 0.75s both; }
.onde             { animation: apparition 1.2s ease 0.40s both; }
.bas,
.filtres,
.galerie,
.feuillets,
.pied             { animation: apparition 1s ease 0.70s both; }

@media (prefers-reduced-motion: reduce) {
    h1, .intro, .coordonnees, .retour, .nav-bar, .theme-toggle,
    .onde, .bas, .filtres, .galerie, .feuillets, .pied { animation: none; }
}


/* ==========================================================
   CAHIER : petites touches « papier »
   – un morceau de scotch en haut de chaque feuillet
   – un trait de crayon orange qui se dessine sous le titre au survol
   ========================================================== */
.feuillet::before {
    content: "";
    position: absolute;
    top: -0.8rem;
    left: 50%;
    width: 4.8rem;
    height: 1.5rem;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(232, 163, 142, 0.26);
    box-shadow: inset 0 0 0 1px rgba(232, 163, 142, 0.18);
    /* bords dentelés du scotch */
    pointer-events: none;
}

.feuillet:nth-child(3n+2)::before { transform: translateX(-50%) rotate(2.5deg); left: 38%; }
.feuillet:nth-child(3n)::before   { transform: translateX(-50%) rotate(-1.5deg); left: 62%; }

.feuillet h2 { position: relative; align-self: flex-start; }

.feuillet h2::after {
    content: "";
    position: absolute;
    left: -2%;
    bottom: -0.35em;
    width: 104%;
    height: 0.5em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 30 1, 50 9, 80 5 S 130 2, 160 6 S 190 8, 198 4' fill='none' stroke='%23ef7b45' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}

.feuillet:hover h2::after,
.feuillet:focus-within h2::after { clip-path: inset(0 0 0 0); }

@media (hover: none) {
    .feuillet h2::after { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
    .feuillet h2::after { transition: none; }
}

html[data-theme="minimal"] .feuillet {
    background:
        linear-gradient(to right, transparent 1.45rem, rgba(236, 235, 232, 0.3) 1.45rem, rgba(236, 235, 232, 0.3) calc(1.45rem + 1px), transparent calc(1.45rem + 1px)),
        repeating-linear-gradient(to bottom, transparent 0, transparent 1.6rem, var(--trait) 1.6rem, var(--trait) calc(1.6rem + 1px)),
        rgba(236, 235, 232, 0.02);
}
html[data-theme="minimal"] .feuillet:hover { border-color: var(--encre-douce); }
html[data-theme="minimal"] .feuillet::before { background: rgba(236, 235, 232, 0.1); box-shadow: inset 0 0 0 1px rgba(236, 235, 232, 0.12); }
html[data-theme="minimal"] .feuillet h2::after { filter: grayscale(1) brightness(1.6); }
html[data-theme="minimal"] .feuillet-tete b,
html[data-theme="minimal"] .forme i.joue { color: var(--encre-douce); }
html[data-theme="minimal"] .forme i.joue { background: var(--encre); }


/* ==========================================================
   ONDES AU SOL : des anneaux aplatis (vus en perspective) naissent aux pieds du petit faust,
   s'élargissent en ralentissant et s'effacent au loin. Une lueur et une ombre posées sous ses pieds
   l'ancrent dans ce sol. Le dessin est un SVG (aria-hidden) placé au début de l'en-tête.
   ========================================================== */
.entete {
    --pieds: calc(clamp(0.9rem, 3vh, 1.5rem) + clamp(4.25rem, 11vh, 7rem) - 0.45rem);   /* hauteur des pieds du petit faust */
}

.ondes {
    --h: clamp(20rem, 50vh, 30rem);
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--h);
    top: calc(var(--pieds) - var(--h) / 2);
    z-index: -1;
    overflow: visible;
    pointer-events: none;
    /* plus loin = plus pâle : le haut (derrière) s'efface, le bas (devant) reste net */
    -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0, #000 50%, #000 78%, transparent 100%);
            mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0, #000 50%, #000 78%, transparent 100%);
}

.ondes ellipse {
    fill: none;
    stroke: var(--braise);
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: onde-sol 50s cubic-bezier(0.2, 0.55, 0.3, 1) infinite;
    animation-delay: calc(var(--i) * -20s);
}

/* naissance rapide près des pieds, expansion qui ralentit, disparition au loin */
@keyframes onde-sol {
    0%   { transform: scale(0.05); opacity: 0; }
    8%   { opacity: 0.35; }
    55%  { opacity: 0.05; }
    100% { transform: scale(1); opacity: 0; }
}

/* lueur et ombre posées sur le sol, sous les pieds */
.entete::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: clamp(10rem, 30vh, 16rem);
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 3.6rem 0.55rem at 50% var(--pieds), rgba(0, 0, 0, 0.5), transparent 100%),
        radial-gradient(ellipse 13rem 2.4rem at 50% var(--pieds), rgba(239, 123, 69, 0.3), transparent 100%),
        radial-gradient(ellipse 26rem 5rem at 50% var(--pieds), rgba(239, 123, 69, 0.1), transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
    .ondes ellipse { animation: none; opacity: 0.3; transform: scale(calc(0.2 + var(--i) * 0.2)); }
}

@media (max-width: 760px) {
    .ondes, .entete::before { display: none; }
}

/* thème minimaliste : mêmes anneaux, en gris, sans lueur */
html[data-theme="minimal"] .ondes ellipse { stroke: var(--encre); }
html[data-theme="minimal"] .entete::before { opacity: 0; }


/* ==========================================================
   MOBILE : l'en-tête passe sur deux rangées (4 onglets en haut, puis flèche · petit faust · rond)
   Identique sur toutes les pages.
   ========================================================== */
@media (max-width: 760px) {
    .entete {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start;
        row-gap: 0.9rem;
        column-gap: 0.6rem;
    }
    .nav-bar {
        grid-column: 1 / -1;
        grid-row: 1;
        justify-self: stretch;
        width: auto;
        margin: 0;
        padding: 0 var(--respiration, 0.75rem);
        justify-content: space-between;
        gap: 0;
    }
    .nav-bar a { font-size: 0.68rem; letter-spacing: 0.1em; }
    .retour { grid-column: 1; grid-row: 2; justify-self: start; }
    .mini-embleme { grid-column: 2; grid-row: 2; justify-self: center; margin: 0; }
    .theme-toggle { position: static; grid-column: 3; grid-row: 2; justify-self: end; margin: 0; align-self: start; }
}