/* ==========================================
   1. VARIABLES
   ========================================== */
: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);
}

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

/* ==========================================
   2. BASE & FOND : la page occupe exactement l'écran, sans défilement
   ========================================== */
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");
}

/* ==========================================
   3. TRAME : 3 colonnes de repères
   Les 3 rangées : haut (flexible) · onde · bas (métiers)
   ========================================== */
.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; }

/* ==========================================
   4a. EN-TÊTE : onglets alignés à droite
   Police : Plex Serif 500, capitales espacées
   ========================================== */
.entete {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: clamp(0.9rem, 3vh, 1.5rem) var(--marge);
}

/* Les deux onglets sont centrés dans la 3e colonne de la trame */
.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-family: "Space Mono", monospace;
    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 { color: var(--argile); background-size: 100% 1.5px; }

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

/* ==========================================
   4b. HAUT : nom | logo + halo
   (3 colonnes égales, alignées sur la trame)
   ========================================== */
.hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    padding: 0 var(--marge);
    min-height: 0;
}

/* Colonne 1 : le nom, cadré dans sa colonne */
h1 {
    grid-column: 1;
    margin: 0;
    padding-left: 1.4vw;
    font-family: "Fraunces", Georgia, serif;
    font-size: min(8.6vw, 17vh);
    line-height: 0.95;
    letter-spacing: -0.03em;
}

h1 span { display: block; }

/* « Thomas » : Fraunces fin, italique, ton crème */
h1 span:first-child { font-weight: 300; font-style: italic; }

/* « Trédemy » : Fraunces droit, un cran plus dense, en braise */
h1 span:last-child { font-weight: 400; font-style: normal; color: var(--braise); }

/* Transition entre les pages : le personnage (halo compris) glisse et rétrécit
   jusqu'à sa place dans l'en-tête d'Archives, et inversement au retour. */
@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; }
}

/* Colonne 2 : le personnage, debout au centre, entouré du halo.
   Sa hauteur occupe la zone entre le haut de page et l'onde (même logique que le nom :
   tout se règle sur la hauteur de la fenêtre, donc la composition garde ses proportions). */
.embleme {
    grid-column: 2;
    justify-self: center;
    position: relative;
    height: clamp(11rem, 40vh, 34rem);
    aspect-ratio: 474 / 1174;            /* proportions de petit_faust_stylise.png */
    display: block;
    view-transition-name: faust;         /* même nom que le petit personnage d'Archives */
}

/* Halo : un grand disque de lueur centré sur le personnage (≈ sa hauteur de diamètre) */
.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);
}

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

/* ==========================================
   5. SIGNAL SONORE (seul élément animé)
   La ligne horizontale de la trame passe par son axe central.
   ========================================== */
.onde {
    width: 100%;
    height: clamp(60px, 15vh, 130px);
}

.page > .onde { 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; }

/* ==========================================
   6. BAS : les trois métiers, centrés dans leur colonne, collés en bas
   ========================================== */
.bas {
    position: relative;
    margin: 0 var(--marge);
    padding: clamp(0.6rem, 2vh, 1.25rem) 0 clamp(1.75rem, 4.5vh, 2.5rem);
}

.roles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.roles li {
    padding: 0 0.75rem;
    text-align: center;
}

.motif {
    display: block;
    width: 70%;
    max-width: 16rem;
    height: clamp(28px, 5.5vh, 48px);
    margin: 0 auto clamp(0.5rem, 1.6vh, 1.1rem);
    overflow: visible;
}

.motif * {
    fill: none;
    stroke: var(--argile);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.motif .repere { stroke: var(--braise); }

.role {
    display: block;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.85rem, min(2.4vw, 4.2vh), 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--encre);
}

.pied {
    position: absolute;
    left: 0;
    bottom: 0.55rem;
    margin: 0;
    color: var(--encre-douce);
    font-size: 0.75rem;
}

/* ==========================================================
   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 { display: flex; justify-content: flex-end; align-items: flex-start; gap: 0.6rem; }
    .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; }
}


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