/* ==========================================
   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);   /* identique aux autres pages */
    --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; }

html.fiche-ouverte { overflow: hidden; }

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

/* ==========================================
   4. DESSINS DES MÉTIERS (symboles réutilisés)
   ========================================== */
.symboles { position: absolute; width: 0; height: 0; overflow: hidden; }

.symboles * {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

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

.motif {
    display: block;
    overflow: visible;
    fill: none;
    stroke: var(--argile);
    stroke-width: 1.5;
}

/* ==========================================
   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(6.4vw, 14vh);
    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; }

/* ==========================================
   8. FILTRES : les trois métiers, fixés en haut quand on défile
   ========================================== */
.page > .filtres {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0 var(--marge);
    background: linear-gradient(to bottom, rgba(21, 16, 12, 0.92), rgba(21, 16, 12, 0.82));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--trait-fort);
    border-bottom: 1px solid var(--trait-fort);
}

.filtres-in {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-right: 1px solid var(--trait);
}

.filtre {
    appearance: none;
    background: none;
    border: 0;
    border-left: 1px solid var(--trait);
    margin: 0;
    padding: clamp(0.7rem, 1.8vh, 1.1rem) 0.75rem;
    color: var(--encre);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.filtre .motif {
    width: 50%;
    max-width: 11rem;
    height: clamp(18px, 3.2vh, 30px);
    margin: 0 auto clamp(0.3rem, 0.8vh, 0.5rem);
    transition: stroke 0.3s ease;
}

.role {
    display: block;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.85rem, 1.5vw, 1.35rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--encre);
    transition: color 0.3s ease;
}

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

.filtre.actif { background: rgba(239, 123, 69, 0.08); }
.filtre.actif .role { color: var(--braise); }
.filtre.actif .motif { stroke: var(--braise); }

.filtres.en-cours .filtre:not(.actif) { opacity: 0.45; }
.filtres.en-cours .filtre:not(.actif):hover { opacity: 0.85; }

/* Bouton « Tous les projets » : une ligne qui se déplie sous les métiers quand un filtre est actif */
.tous-zone {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.filtres.en-cours .tous-zone { grid-template-rows: 1fr; }

.tous-in {
    overflow: hidden;
    min-height: 0;
    border-right: 1px solid var(--trait);
    border-left: 1px solid var(--trait);
    text-align: center;
}

.filtres:not(.en-cours) .tous-in { visibility: hidden; }

.tous {
    appearance: none;
    margin: 0.55rem 0;
    padding: 0 0 5px;
    border: 0;
    background: linear-gradient(var(--braise), var(--braise)) no-repeat 0 100% / 0 1.5px;
    font: inherit;
    font-size: clamp(0.72rem, 1vw, 0.85rem);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--braise);
    cursor: pointer;
    transition: background-size 0.3s ease, color 0.3s ease;
}

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

.tous-n { color: var(--encre-douce); }

/* ==========================================
   9. GALERIE : un film par rangée, alternant colonnes 1-2 / 2-3
   Le cadre du film occupe 2 colonnes de la trame, la légende la 3e.
   La légende prend toute la hauteur de l'image : numéro, titre et réalisation
   s'alignent sur le haut du cadre ; rôles, description et lien sur le bas.
   ========================================== */
.galerie {
    flex: 1;
    margin: 0 var(--marge);
}

.film {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    padding: clamp(2rem, 7vh, 4.5rem) 0;
    border-bottom: 1px solid var(--trait);
}

.film[hidden] { display: none; }

.film .cadre   { grid-column: 1 / span 2; grid-row: 1; align-self: start; }
.film .legende { grid-column: 3; grid-row: 1; }

.film.inverse .cadre   { grid-column: 2 / span 2; }
.film.inverse .legende { grid-column: 1; }

/* Apparition douce au défilement */
.film.a-reveler { opacity: 0; transform: translateY(2rem); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.film.a-reveler.vu { opacity: 1; transform: none; }

/* ----- Cadre 16:9 : image, vidéo ou forme d'onde ----- */
.cadre {
    position: relative;
    display: block;
    margin: 0 var(--respiration);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background:
        radial-gradient(70% 90% at 15% 0%, rgba(239, 123, 69, 0.20), transparent 70%),
        rgba(241, 231, 218, 0.03);
    border: 1px solid var(--trait-fort);
    transition: border-color 0.4s ease, box-shadow 0.5s ease;
}

.cadre .media,
.fiche-cadre .media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
    filter: saturate(0.85) brightness(0.9);
}

.cadre:hover,
.cadre:focus-visible {
    border-color: var(--braise);
    box-shadow: 0 0 5rem -1.5rem rgba(239, 123, 69, 0.55);
    outline-offset: 4px;
}

.cadre:hover .media { transform: scale(1.04); filter: none; }

/* Forme d'onde de remplacement */
.visuel { position: absolute; inset: 0; }

.visuel svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.visuel .axe { stroke: var(--trait-fort); stroke-width: 1; vector-effect: non-scaling-stroke; }

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

.visuel .t1 { stroke: var(--braise); }
.visuel .t2 { stroke: var(--argile); opacity: 0.55; }

.visuel .flux { transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
.cadre:hover .visuel .flux { transform: translateX(-9%); }

.grand-num {
    position: absolute;
    left: 5%;
    bottom: 2%;
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(3.5rem, 10vw, 9rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(241, 231, 218, 0.10);
    pointer-events: none;
}

.voir {
    position: absolute;
    right: 1rem;
    bottom: 0.9rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fond);
    background: var(--braise);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.cadre:hover .voir,
.cadre:focus-visible .voir { opacity: 1; transform: none; }

/* ----- Légende : même hauteur que l'image ----- */
.legende {
    display: flex;
    flex-direction: column;
    padding: 0 var(--respiration);
}

.legende > * { margin: 0; }

.film-num {
    margin-bottom: 0.7rem !important;
    font-size: 0.8rem;
    color: var(--encre-douce);
}

.film-num b { font-weight: 400; color: var(--braise); }

.film h2 {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.film h2 a {
    color: var(--encre);
    text-decoration: none;
    transition: color 0.3s ease;
}

.film:hover h2 a,
.film h2 a:focus-visible { color: var(--braise); }

.film-meta {
    margin-top: 0.7rem !important;
    font-size: 0.8rem;
    color: var(--encre-douce);
}

/* Réalisation : occupe tout l'espace entre le titre et la barre des rôles,
   et se centre verticalement dedans (pile à mi-distance). */
.film .film-meta {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0.7rem 0;
    /* une mention par ligne (Réalisation, Scénario…) */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.25rem;
}

.film-meta span { display: block; }

/* tout ce qui suit la réalisation est poussé vers le bas de l'image */
.film .film-roles {
    list-style: none;
    margin: 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--trait-fort);
}

.film-roles li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.7rem;
}

.film-roles .motif { flex: none; width: 4.5rem; height: 1.4rem; }

.film-roles span {
    font-size: clamp(0.68rem, 0.85vw, 0.78rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--encre);
}

.film-desc {
    margin-top: 0.4rem !important;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.6;
    color: var(--encre-douce);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* texte justifié, avec coupure des mots en fin de ligne pour éviter les gros blancs */
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: pretty;
}

/* Lien vers la fiche : donne une suite à la description tronquée */
.lire {
    align-self: flex-start;
    margin-top: 1rem !important;
    padding-bottom: 5px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--braise);
    text-decoration: none;
    background: linear-gradient(var(--braise), var(--braise)) no-repeat 0 100% / 0 1.5px;
    transition: background-size 0.3s ease, color 0.3s ease;
}

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

/* Pour que le texte des films « inversés » regarde l'image, décommente :
.film.inverse .legende { text-align: right; }
.film.inverse .legende .lire { align-self: flex-end; }
.film.inverse .film-roles li { flex-direction: row-reverse; }
*/

.vide {
    margin: 4rem var(--marge);
    padding: 0 var(--respiration);
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--encre-douce);
}

.vide[hidden] { display: none; }

/* Colonne de légende étroite : description plus courte, icône plus petite */
@media (max-width: 1100px) {
    .film-desc { -webkit-line-clamp: 3; }
    .film-roles .motif { width: 3rem; }
}

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

/* ==========================================
   11. FICHE DÉTAILLÉE (plein écran)
   ========================================== */
.fiche {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow-y: auto;
    scrollbar-width: none;
    color: var(--encre);
    background:
        radial-gradient(60vw 60vw at 6% 0%, rgba(239, 123, 69, 0.18), transparent 70%),
        radial-gradient(55vw 55vw at 100% 100%, rgba(232, 163, 142, 0.12), transparent 70%),
        var(--fond);
}

.fiche::-webkit-scrollbar { display: none; }
.fiche::backdrop { background: var(--fond); }

.fiche[open] { animation: fiche-entree 0.55s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes fiche-entree {
    from { opacity: 0; transform: translateY(2.5rem); }
    to   { opacity: 1; transform: none; }
}

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

.fiche-barre {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    padding: clamp(0.9rem, 3vh, 1.5rem) var(--marge);
    background: linear-gradient(to bottom, rgba(21, 16, 12, 0.95), rgba(21, 16, 12, 0.6));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.fiche-barre > :first-child { justify-self: start; }

.fiche-compteur {
    justify-self: center;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    color: var(--encre-douce);
}

.fiche-nav { justify-self: center; display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); }

.fiche-btn {
    appearance: none;
    background: linear-gradient(var(--argile), var(--argile)) no-repeat 0 100% / 0 1.5px;
    border: 0;
    margin: 0;
    padding: 0 0 6px;
    font: inherit;
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--encre-douce);
    cursor: pointer;
    transition: color 0.3s ease, background-size 0.3s ease;
}

.fiche-barre > :first-child { padding-left: var(--respiration); }

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

.fiche-corps {
    position: relative;
    padding: clamp(0.5rem, 2vh, 1.25rem) var(--marge) clamp(2rem, 6vh, 4rem);
}

.fiche-cadre {
    position: relative;
    margin: 0 var(--respiration);
    height: min(56vh, 40rem);
    overflow: hidden;
    border: 1px solid var(--trait-fort);
    background:
        radial-gradient(70% 90% at 15% 0%, rgba(239, 123, 69, 0.20), transparent 70%),
        rgba(241, 231, 218, 0.03);
}

.fiche-cadre .visuel .flux { transition: none; }
.fiche-cadre .grand-num { font-size: clamp(5rem, 16vw, 14rem); }

.fiche-texte {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: clamp(1.5rem, 5vh, 3rem);
}

.fiche-texte > * { padding: 0 var(--respiration); min-width: 0; }

.fiche-id .film-num { margin: 0 0 0.7rem; font-size: 0.8rem; color: var(--encre-douce); }
.fiche-id .film-num b { font-weight: 400; color: var(--braise); }

.fiche-id h2 {
    margin: 0;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 3.6vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--braise);
}

.fiche-id .film-meta { margin: 0.8rem 0 0; font-size: 0.8rem; color: var(--encre-douce); }

.etiquette {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--encre-douce);
}

/* dans la fiche, la liste des rôles garde sa mise en page d'origine */
.fiche-roles .film-roles { margin: 0; padding: 0; border-top: 0; list-style: none; }

.fiche-desc p:not(.etiquette) {
    margin: 0 0 1.1rem;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.65;
    color: var(--encre);
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: pretty;
}

/* ==========================================
   12. MOBILE : les colonnes s'empilent (le cadre passe au-dessus de sa légende)
   ========================================== */
@media (max-width: 760px) {
    :root { --respiration: 0.75rem; }

    .reperes, .fiche-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); }

    .filtres-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filtre .motif { display: none; }
    .role { font-size: 0.8rem; }

    .film { grid-template-columns: 1fr; gap: 1.25rem; }
    .film .cadre,
    .film.inverse .cadre { grid-column: 1; grid-row: 1; }
    .film .legende,
    .film.inverse .legende { grid-column: 1; grid-row: 2; display: block; }

    /* sous l'image : on annule l'étirement et le calage en bas */
    .film .film-roles { margin-top: 1.1rem; }
    .film .film-meta { display: block; flex: none; padding: 0; margin-top: 0.7rem !important; }
    .film-desc { margin-top: 1.1rem !important; -webkit-line-clamp: 4; }
    .film-roles .motif { width: 4.5rem; }
    .lire { display: inline-block; }

    .fiche-barre { display: flex; justify-content: space-between; gap: 0.75rem; }
    .fiche-compteur { display: none; }
    .fiche-nav { gap: 1rem; }
    .fiche-texte { grid-template-columns: 1fr; gap: 1.75rem; }
    .fiche-cadre { height: 34vh; }
}

/* ==========================================================
   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"] .lire { color: var(--encre); background-image: linear-gradient(var(--encre), 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; }
}