/* ==========================================
   1. VARIABLES (les mêmes que le reste du site)
   ========================================== */
: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;
}

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

/* ==========================================
   2. BASE & FOND : la page tient dans l'écran, comme l'accueil
   (pas de barre de défilement : les colonnes restent exactement alignées)
   ========================================== */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    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 entre les pages : le petit personnage reste en place, le reste s'efface en douceur */
@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
   ========================================== */
.page {
    position: relative;
    height: 100vh;
    height: 100svh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    overflow: hidden;
}

.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; }

/* ==========================================
   4. EN-TÊTE : identique à celui d'Archives
   ========================================== */
.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); }

.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; }

/* ==========================================
   5. CORPS : « Parlons son. » (col. 1) · coordonnées (cols 2-3)
   ========================================== */
.corps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    padding: 0 var(--marge);
    min-height: 0;
}

h1 {
    grid-column: 1;
    margin: 0;
    padding-left: var(--respiration);
    font-family: "Fraunces", Georgia, serif;
    font-size: min(8.6vw, 17vh);
    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); }

.coordonnees {
    grid-column: 2 / span 2;
    padding: 0 var(--respiration);
    min-width: 0;
}

.kicker {
    margin: 0 0 clamp(0.6rem, 1.6vh, 1rem);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--braise);
}

.courriel {
    display: inline-block;
    max-width: 100%;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: min(4.4vw, 8.5vh);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--encre);
    text-decoration: none;
    overflow-wrap: anywhere;
    padding-bottom: 0.15em;
    background: linear-gradient(var(--braise), var(--braise)) no-repeat 0 100% / 0 1.5px;
    transition: color 0.3s ease, background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.courriel:hover,
.courriel:focus-visible { color: var(--braise); background-size: 100% 1.5px; }

.copier {
    appearance: none;
    display: block;
    margin: clamp(0.8rem, 2vh, 1.25rem) 0 0;
    padding: 0 0 4px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--encre-douce);
    cursor: pointer;
    transition: color 0.3s ease;
}

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

.note {
    max-width: 30rem;
    margin: clamp(1.25rem, 4vh, 2.5rem) 0 0;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.25vw, 1.2rem);
    line-height: 1.55;
    color: var(--encre-douce);
}

.reseaux {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem clamp(1.25rem, 3vw, 2.25rem);
    list-style: none;
    margin: clamp(1.25rem, 4vh, 2.5rem) 0 0;
    padding: 0;
}

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

.reseaux a:hover,
.reseaux a:focus-visible { color: var(--argile); background-size: 100% 1.5px; }

/* ==========================================
   6. SIGNAL SONORE : la ligne de la trame passe par son axe
   ========================================== */
.onde {
    width: 100%;
    height: clamp(60px, 13vh, 120px);
    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; }

/* ==========================================
   7. PIED
   ========================================== */
.pied {
    margin: 0;
    padding: clamp(0.6rem, 2vh, 1rem) calc(var(--marge) + var(--respiration)) clamp(1rem, 3vh, 1.5rem);
    color: var(--encre-douce);
    font-size: 0.75rem;
}

/* ==========================================
   8. MOBILE : tout s'empile, la page peut défiler
   ========================================== */
@media (max-width: 760px) {
    :root { --respiration: 0.75rem; }

    html, body { overflow: auto; }
    .page { height: auto; min-height: 100svh; overflow: visible; }

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

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

    .corps { grid-template-columns: 1fr; gap: 2rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
    h1, .coordonnees { grid-column: 1; }
    h1 { font-size: clamp(3.5rem, 19vw, 6rem); }
    .courriel { font-size: clamp(1.4rem, 7vw, 2.2rem); }
}

/* ==========================================================
   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; }
}


/* ==========================================================
   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; }
}