/* ============================================================
   Le Membre Fantôme : feuille de style du site.

   Identité propre au spectacle, indépendante de Monsieur Patate
   (ip-styles.css) et de l'accueil (accueil.css) : rien n'est partagé
   entre les trois, sauf les polices, servies depuis _shared/fonts/.

   Les valeurs (couleurs, polices, rythme) sont relevées sur le site
   WordPress d'origine, dont les captures de référence sont archivées
   hors dépôt (bancale-medias/membre-fantome-backup/reference-visuelle/).
   ============================================================ */

/* Les polices sont chargées par un <link> dans chaque page, pas par un @import :
   un @import ne part qu'une fois cette feuille analysée, ce qui retarde d'autant
   l'affichage du texte. Voir _shared/fonts/fonts.css. */

/* ============================================================
   1. Jetons
   ============================================================ */
:root {
    /* Fonds, du plus sombre au plus clair */
    --black:        #000000;
    --near-black:   #111111;
    --grey-deep:    #434343;   /* section « la compagnie » */
    --light:        #E4E4E4;   /* fonds clairs dégradés */
    --light-2:      #F2F2F2;
    --white:        #FFFFFF;

    /* Texte */
    --title-light:  #EEEEEE;   /* titres sur fond sombre */
    --title-dark:   #303030;   /* titres sur fond clair */
    --body-light:   #B9B9B9;   /* texte courant sur fond sombre */
    --body-dark:    #303030;   /* texte courant sur fond clair */
    --muted:        #7F7F7F;

    /* Accent */
    --accent:       #3AA362;   /* boutons, liens de contenu */
    --accent-nav:   #5EDF8F;   /* vert plus clair du bandeau, relevé sur l'original */
    --accent-soft:  rgba(58, 163, 98, .16);

    /* Polices */
    --font-display: 'Gravitas One', Georgia, serif;
    --font-ui:      'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-hand:    'Rock Salt', 'Segoe Script', cursive;

    /* Rythme */
    /* Relevé sur la référence : à 1280 px, le contenu va de x=94 à x=1195.
       1200 de page et 52 de gouttière retombent sur ces bornes. */
    --gutter:       clamp(20px, 4vw, 52px);
    --page:         1200px;
    --section-y:    clamp(56px, 8vw, 110px);
    --header-h:     64px;

    --line:         rgba(255, 255, 255, .14);
    --line-dark:    rgba(0, 0, 0, .12);
}

/* ============================================================
   2. Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
    margin: 0;
    background: var(--black);
    color: var(--body-light);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* Une règle d'auteur (.btn { display: inline-flex }) l'emporte sur le [hidden]
   de la feuille du navigateur : on le réaffirme ici une fois pour toutes, le JS
   masquant avec .hidden = true (bouton « Itinéraire » d'une date sans lieu…). */
[hidden] { display: none !important; }

/* Les contrôles ne tiennent pas la police du document d'eux-mêmes : sans cette
   ligne, le nom des artistes, porté par un <button>, retombe sur l'Arial du
   navigateur au lieu de Roboto. */
button, input, select, textarea { font-family: inherit; }

a { color: var(--accent); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

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

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--accent); color: #fff; padding: 12px 18px;
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap {
    width: 100%; max-width: var(--page); margin: 0 auto;
    padding-left: var(--gutter); padding-right: var(--gutter);
}

/* Grand titre de section (« Les artistes ») : Roboto 64 px, graisse 200,
   interlettrage NÉGATIF de 2 px, capitales. Valeurs relevées sur l'original. */
.sec-title {
    font-family: var(--font-ui);
    font-weight: 200;
    font-size: clamp(32px, 5vw, 64px);
    line-height: 1.1;
    letter-spacing: -.031em;        /* -2 px à 64 px */
    text-transform: uppercase;
    text-align: center;
    color: var(--title-dark);
}
.sec-title.on-dark { color: var(--title-light); }

/* Titre de niveau 3 : Roboto 24,4 px gras, interlettrage 2 px, capitales,
   centré au-dessus de sa colonne de texte. */
.sub-title {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: clamp(18px, 1.9vw, 24.4px);
    letter-spacing: .082em;         /* 2 px à 24,4 px */
    text-transform: uppercase;
    text-align: center;
    color: var(--title-dark);
    margin-bottom: 28px;
}
.sub-title.on-dark { color: var(--title-light); }

/* ============================================================
   3. En-tête
   ============================================================ */
/* Le bandeau a DEUX états, comme sur l'original : haut et à peine voilé en tête
   de page (109 px, logo de 200 px), puis compact et plus sombre dès qu'on
   défile (71 px, logo de 150 px). Il reste translucide dans les deux cas : la
   photo du hero passe au travers. */
.header {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    background: rgba(15, 15, 15, .65);
    transition: background .3s ease;
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; max-width: var(--page); margin: 0 auto;
    padding: 20px var(--gutter);
    transition: padding .3s ease;
}
.logo { display: flex; align-items: center; text-decoration: none; }
.logo img { width: 200px; height: auto; transition: width .3s ease; }

.header.is-compact { background: rgba(0, 0, 0, .65); }
.header.is-compact .header-inner { padding: 10px var(--gutter); }
.header.is-compact .logo img { width: 150px; }

.nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 22px); }
/* Tous les liens sont des boîtes flex de même hauteur : c'est ce qui aligne
   l'icône maison sur la ligne de base des intitulés. */
.navlink {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px; height: 22px;
    font-size: 13px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase;
    color: #CFCFCF; text-decoration: none;
    transition: color .2s ease;
}
.navlink:hover { color: var(--accent-nav); }
/* Le soulignement se déploie depuis le centre, il n'apparaît pas d'un bloc. */
.navlink::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 2px; background: var(--accent-nav);
    transform: scaleX(0); transform-origin: center;
    transition: transform .28s ease;
}
.navlink:hover::after,
.navlink:focus-visible::after,
.navlink.is-current::after { transform: scaleX(1); }
.navlink.is-current { color: var(--accent-nav); }
.navlink.home { color: var(--accent-nav); }
.navlink svg { width: 15px; height: 15px; flex: none; }

.burger {
    display: none; width: 40px; height: 40px; padding: 0;
    background: none; border: 0; cursor: pointer;
}
.burger span {
    display: block; height: 2px; width: 22px; margin: 4px auto;
    background: #DDD; transition: transform .25s ease, opacity .25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
    display: none; position: fixed; z-index: 99;
    inset: var(--header-h) 0 auto 0;
    background: var(--black); border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 22px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
    display: block; padding: 13px 0; text-decoration: none;
    color: #DDD; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.mobile-nav a:last-child { border-bottom: 0; }

/* ============================================================
   4. Hero
   ============================================================ */
/* Le hero n'est pas centré : le bloc de texte est calé à gauche, dans la même
   colonne que le reste du site, et le bouton de lecture se pose à sa droite.
   La gouttière est portée par .hero-content, pas par la section, sans quoi
   elle compterait deux fois. */
/* Le contenu est centré dans la hauteur PLEINE du hero, sans décalage pour le
   bandeau : celui-ci est translucide et passe par-dessus, comme sur l'original
   où le titre tombe à 340 px du haut d'un hero de 900 px. */
.hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center;
    padding: 0;
    background: var(--black) center/cover no-repeat;
    overflow: hidden;
}
/* Image de repli de la vidéo de fond. Deux déclarations : la seconde ne
   s'applique que là où image-set() est compris, la première sert de repli. */
.hero { background-image: url("../img/hero-1860.jpg"); }
.hero {
    background-image: image-set(url("../img/hero-1860.webp") type("image/webp"),
                                url("../img/hero-1860.jpg")  type("image/jpeg"));
}
/* La vidéo de fond est muette, en boucle, et purement décorative.
   Elle reste transparente tant qu'elle n'a pas commencé : la photo ci-dessus
   occupe la place, et la vidéo se fond par-dessus quand elle démarre. Si elle
   ne démarre jamais (autoplay refusé, fichier absent), rien ne se voit. */
.hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
    opacity: 0; transition: opacity .9s ease;
}
.hero-video.is-playing { opacity: 1; }
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: rgba(0, 0, 0, .25);   /* voile repris de la maquette */
}
.hero-content {
    position: relative; z-index: 2;
    width: 100%; max-width: var(--page); margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex; align-items: center;
}
.hero-text { text-align: center; flex: 0 1 auto; }

/* 33 px à 1280 : le titre fait alors 521 px de large, la mesure relevée sur la
   référence. Gravitas One est une grasse très large, au-delà il passe à la
   ligne alors qu'il tient sur une seule sur le site d'origine. */
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(17px, 2.6vw, 33px);
    line-height: 1.15;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--title-light);
    text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}
.hero-title span {
    display: inline-block;
    border-bottom: 3px solid var(--title-light);
    padding-bottom: 6px;
}

/* Titre à effet machine à écrire : « Un spectacle sur » reste fixe, le mot
   du dessous s'écrit puis s'efface. Voir mf-script.js pour la mécanique. */
/* 30 px, interlettrage 2 px : la mesure de l'original, pas une estimation. */
.hero-typed {
    margin-top: 30px;
    font-family: var(--font-ui); font-weight: 400;
    font-size: clamp(17px, 2.4vw, 30px);
    letter-spacing: 2px; text-transform: uppercase;
    color: #FFF; text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.hero-typed b { display: block; font-weight: 400; }
.typed-line { display: block; min-height: 1.6em; margin-top: .35em; }
.typed-caret {
    display: inline-block; width: 1px; margin-left: 3px;
    background: currentColor; animation: caret 1s step-end infinite;
    vertical-align: -2px; height: 1em;
}
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Les marges automatiques centrent le bouton dans l'espace laissé à droite du
   texte, là où il se trouve sur le site d'origine. */
.hero-play {
    flex: none; margin: 0 auto; width: 74px; height: 74px; border-radius: 50%;
    display: inline-grid; place-items: center; cursor: pointer;
    background: rgba(0, 0, 0, .25); border: 2px solid rgba(255, 255, 255, .85);
    color: #FFF; transition: transform .25s ease, background .25s ease;
}
.hero-play:hover { transform: scale(1.06); background: rgba(0, 0, 0, .45); }
.hero-play svg { width: 24px; height: 24px; margin-left: 4px; }

/* Dans le hero, à 36 px du bas : visible dès le premier écran. */
.scroll-down {
    position: absolute; z-index: 3;
    left: 50%; bottom: 36px; transform: translateX(-50%);
    display: grid; place-items: center; width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14); color: #FFF; text-decoration: none;
    animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(7px); }
}

/* ============================================================
   5. Accroche
   ============================================================ */
.accroche { padding: 25px 0; }
.accroche-grid {
    display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(24px, 5vw, 60px);
    align-items: center;
}
.accroche-quote { position: relative; padding: 40px 30px; }
.accroche-quote p {
    font-weight: 700; font-size: clamp(18px, 1.9vw, 24.4px);
    letter-spacing: .082em; text-transform: uppercase; text-align: center;
    color: var(--title-dark); line-height: 1.45;
}
/* Les deux guillemets de la maquette, purement décoratifs. */
.accroche-quote::before,
.accroche-quote::after {
    content: "\201C"; position: absolute;
    font-family: Georgia, serif; font-size: 90px; line-height: 1;
    color: #3A3A3A;
}
.accroche-quote::before { top: 0; left: 0; }
.accroche-quote::after  { content: "\201D"; bottom: -18px; right: 10px; }
/* Calée à droite de sa colonne tant que la grille a deux colonnes. Une fois
   la grille en pile (bloc 14), le margin-left: auto la collerait au bord
   droit : elle se recentre. */
.accroche-photo { background: var(--black); max-width: 350px; margin-left: auto; }

/* ============================================================
   6. Portfolio
   ============================================================ */
.portfolio { padding: clamp(48px, 12vw, 160px) 0; }
/* Grille relevée sur l'original : 6 colonnes dans un conteneur de 1260 px,
   vignettes CARRÉES de 150 px centrées dans des cellules de 210 px, 8 px entre
   les rangées. Les vignettes ne remplissent donc pas leur cellule : l'air
   entre les photos fait partie du dessin. */
/* La section est « étirée » sur l'original : la galerie occupe toute la
   largeur de la fenêtre, elle n'est pas ramenée à la colonne du site. */
.portfolio .wrap { max-width: none; padding-left: 10px; padding-right: 10px; }
.gallery {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 8px 0;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
}
.gallery li { margin: 0; }
.gallery button {
    display: block; width: 150px; max-width: 100%; padding: 0; border: 0;
    cursor: pointer; background: #000; overflow: hidden; line-height: 0;
}
.gallery img {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    opacity: .88; transition: opacity .3s ease, transform .5s ease;
}
.gallery button:hover img,
.gallery button:focus-visible img { opacity: 1; transform: scale(1.05); }

/* ---- Visionneuse ---- */
.lightbox {
    position: fixed; inset: 0; z-index: 150;
    background: rgba(0, 0, 0, .94);
    display: grid; place-items: center; padding: 4vh 4vw;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 100%; max-height: 100%; }
.lightbox img {
    max-width: 100%; max-height: 82vh; width: auto; margin: 0 auto;
    object-fit: contain;
    transition: opacity .3s ease;
}
.lightbox img.is-loading { opacity: 0; }
.lightbox figcaption {
    margin-top: 14px; text-align: center; color: var(--muted);
    font-size: 13px; letter-spacing: .08em;
}
.lb-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .1); border: 0; color: #FFF;
    display: grid; place-items: center;
}
.lb-btn:hover { background: rgba(255, 255, 255, .2); }
.lb-prev { left: 2vw; }
.lb-next { right: 2vw; }
.lb-close {
    position: absolute; top: 18px; right: 18px; transform: none;
    width: 46px; height: 46px; font-size: 20px; line-height: 1;
}

/* ============================================================
   7. Texte + visuel (histoire, compagnie)
   ============================================================ */
.duo { padding: 20px 0; }
.duo-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
.duo-grid.reverse .duo-media { order: 2; }
.histoire .duo-media { max-width: 344px; margin: 0 auto; }
.compagnie .duo-media { max-width: 608px; margin: 0 auto; }
.duo-text p { color: inherit; }

.histoire { color: var(--body-dark); }
.compagnie { color: #D6D6D6; padding: 25px 0 2px; }
.compagnie .sub-title { color: var(--title-light); }

/* ============================================================
   8. Artistes
   ============================================================ */
.artistes { padding: clamp(44px, 6vw, 80px) 0 clamp(52px, 8vw, 100px); }
.artistes .sec-title { margin-bottom: clamp(36px, 6vw, 64px); }
.artistes-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 32px);
}
.artiste { text-align: center; }
.artiste-open {
    display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
    background: none;
}
/* Les portraits sont CARRÉS : ils ont été recadrés ainsi dans WordPress, et
   les resservir en 3/4 changeait le cadrage voulu. */
.artiste-open img {
    width: 100%; max-width: 260px; margin: 0 auto; aspect-ratio: 1; object-fit: cover;
    border-radius: 3px; transition: transform .4s ease, filter .4s ease;
}
.artiste-open:hover img,
.artiste-open:focus-visible img { transform: translateY(-4px); filter: brightness(1.06); }
.artiste-nom {
    margin-top: 16px; font-size: clamp(19px, 2.3vw, 30px); font-weight: 300;
    letter-spacing: -.033em; color: var(--title-dark);
}
.artiste-disciplines {
    display: flex; justify-content: center; gap: 10px; margin-top: 14px;
    list-style: none; padding: 0;
}
.artiste-disciplines img { width: 30px; height: 30px; object-fit: contain; opacity: .75; }

/* ---- Fiche d'un artiste ---- */
.scrim {
    position: fixed; inset: 0; z-index: 160;
    background: rgba(0, 0, 0, .82);
    display: grid; place-items: center; padding: 4vh var(--gutter);
}
.scrim[hidden] { display: none; }
.sheet {
    position: relative; width: 100%; max-width: 720px; max-height: 88vh;
    overflow-y: auto; background: var(--white); color: var(--body-dark);
    padding: clamp(26px, 4vw, 46px);
}
.sheet-close {
    position: absolute; top: 12px; right: 12px;
    width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
    font-size: 19px; color: var(--muted);
}
.sheet-close:hover { color: var(--title-dark); }
.sheet h2 {
    font-size: clamp(22px, 3vw, 30px); letter-spacing: .1em; text-transform: uppercase;
    color: var(--title-dark); margin-bottom: 6px;
}
.sheet-role {
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 22px;
}
.sheet-bio p { margin-bottom: 1em; }

/* Fiche d'un artiste : le titre porte la petite photo, comme sur l'original,
   et la biographie habille une ou deux photos. */
.sheet-artiste h2 {
    display: flex; align-items: center; gap: 16px;
    font-family: var(--font-ui); font-weight: 700; text-transform: none;
    letter-spacing: normal; font-size: clamp(20px, 2.6vw, 26px);
    padding-right: 40px; margin-bottom: 20px;
    border-bottom: 1px solid var(--line-dark); padding-bottom: 16px;
}
.sheet-avatar {
    width: 56px; height: 56px; flex: none; border-radius: 4px; object-fit: cover;
}
.sheet-bio::after { content: ""; display: block; clear: both; }
.bio-photo { border-radius: 3px; }
.bio-photo.align-right { float: right; width: 40%; margin: 4px 0 14px 20px; }
.bio-photo.align-left  { float: left;  width: 40%; margin: 4px 20px 14px 0; }
.bio-photo.align-center { width: 100%; margin: 6px auto 14px; }
@media (max-width: 560px) {
    .bio-photo.align-right, .bio-photo.align-left { float: none; width: 100%; margin: 6px 0 14px; }
}

/* ============================================================
   9. Contact
   ============================================================ */
.contact { padding: clamp(48px, 12vw, 160px) 0; min-height: 100vh; display: flex; align-items: center; }
.contact-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px);
    align-items: start;
}
/* Seul titre du site qui échappe aux capitales : 55 px, graisse 200,
   interlettrage négatif, aligné à gauche. Relevé sur l'original. */
.contact .sub-title {
    font-weight: 200;
    font-size: clamp(28px, 4.3vw, 55px);
    line-height: 1.1;
    letter-spacing: -.036em;
    text-transform: none;
    text-align: left;
    color: #FFFFFF;
}
.contact-intro p { color: var(--body-light); max-width: 34em; }
.coord { list-style: none; margin: 26px 0 0; padding: 0; }
.coord li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.coord a { color: #DDD; text-decoration: none; }
.coord a:hover { color: var(--accent); }
.coord svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.socials { display: flex; gap: 12px; margin-top: 24px; }
.socials a {
    width: 34px; height: 34px; border-radius: 3px; display: grid; place-items: center;
    color: #FFF;
}
.socials .s-fb { background: #1877F2; }
.socials .s-yt { background: #FF0000; }

.form {
    background: var(--white); border-radius: 6px;
    padding: clamp(22px, 3vw, 34px);
}
.form-req { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.field { display: block; margin-bottom: 16px; }
.field > span {
    display: block; font-size: 13px; font-weight: 500; color: #555; margin-bottom: 6px;
}
.field input, .field textarea {
    width: 100%; padding: 11px 13px;
    font-family: var(--font-ui); font-size: 15px; color: #222;
    background: #FAFAFA; border: 1px solid #DDD; border-radius: 3px;
}
.field textarea { resize: vertical; min-height: 130px; }
.field.is-error input, .field.is-error textarea { border-color: #B3261E; background: #FFF6F5; }

/* Piège à robots : invisible à l'écran, hors du parcours clavier. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 12.5px; line-height: 1.55; color: #666; margin: 6px 0 18px;
}
.consent input { margin-top: 3px; flex: none; }

.form button[type="submit"] {
    border: 0; border-radius: 3px; cursor: pointer;
    background: var(--accent); color: #FFF;
    font-family: var(--font-ui); font-size: 14px; letter-spacing: .06em;
    padding: 12px 30px;
    transition: background .2s ease;
}
.form button[type="submit"]:hover { background: #2F8B52; }
.form button.is-busy { opacity: .7; cursor: progress; }
.form-status { margin: 14px 0 0; font-size: 13.5px; color: #2F8B52; }
.form-status.is-error { color: #B3261E; }

/* ============================================================
   10. Agenda
   ============================================================ */
.agenda { padding: clamp(44px, 6vw, 80px) 0 clamp(48px, 7vw, 90px); }
.cal { margin-top: 34px; }
.cal-empty { text-align: center; color: #5A5A5A; }
.cal-items { list-style: none; margin: 0; padding: 0; }
/* La section agenda est CLAIRE sur le site d'origine : la liste se lit donc
   en texte sombre, contrairement à celle de Monsieur Patate. */
.cal-row {
    display: grid; grid-template-columns: 190px 1fr 1.2fr; gap: 18px;
    padding: 18px 0; border-top: 1px solid var(--line-dark);
}
.cal-row:last-child { border-bottom: 1px solid var(--line-dark); }
.cal-row.is-clickable { cursor: pointer; }
.cal-row.is-clickable:hover { background: rgba(0, 0, 0, .035); }
.cal-date { color: var(--title-dark); font-weight: 500; letter-spacing: .04em; }
.cal-time { display: block; font-size: 12.5px; color: #6B6B6B; font-weight: 400; }
.cal-place a { color: #333333; text-decoration: none; }
.cal-place a:hover { color: var(--accent); }
.cal-desc { font-size: 14px; color: #4A4A4A; }
/* Valeur que l'agenda ne donne pas encore (lieu, horaire) : annoncée plutôt
   que laissée en blanc. Roboto n'est hébergée en italique qu'en 400. */
.is-tbd { font-weight: 400; font-style: italic; color: #6B6B6B; letter-spacing: 0; }
.cal-desc.is-clamped {
    max-height: 4.6em; overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 62%, transparent);
            mask-image: linear-gradient(#000 62%, transparent);
}
.cal-more {
    margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--accent); font-family: var(--font-ui); font-size: 13px;
    letter-spacing: .08em; text-transform: uppercase;
}
.sheet-when { color: var(--muted); margin-bottom: 20px; }
.sheet-block { margin-top: 22px; }
.sheet-block h3 {
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 8px;
}
.sheet-map { display: inline-block; margin-top: 8px; text-decoration: none; }

/* ============================================================
   11. Partenaires et crédits
   ============================================================ */
.partenaires { padding: clamp(56px, 8vw, 100px) 0 clamp(72px, 11vw, 150px); }
.partenaires .sec-title {
    font-weight: 700; font-size: clamp(19px, 2.3vw, 30px); letter-spacing: .066em;
    margin-bottom: clamp(32px, 5vw, 54px);
}
.carousel { position: relative; padding: 0 54px; }
/* Deux logos à la fois, comme le carrousel d'origine (slides_to_show: 2). */
.carousel-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% / 2 - 15px);
    gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: 6px;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* Accroche au DÉBUT, et non au centre : le carrousel avance d'un logo vers la
   gauche, et un alignement centré ramenait la piste sur un autre point
   d'ancrage que celui visé, jusqu'à la bloquer à certaines largeurs. */
/* margin: 0 est indispensable : un <figure> porte par défaut `1em 40px`, qui
   amputait chaque logo de 80 px de large, décalait la piste de 40 px et faisait
   tomber le scrollTo programmé 40 px avant son point d'ancrage. */
.carousel-item { margin: 0; scroll-snap-align: start; text-align: center; }
.carousel-item .frame {
    background: var(--white); height: 150px;
    display: grid; place-items: center; padding: 16px;
}
.carousel-item img { max-height: 110px; width: auto; object-fit: contain; }
.carousel-item figcaption {
    margin-top: 12px; font-size: 12.5px; line-height: 1.5;
    color: rgba(238, 238, 238, .64);   /* #EEEEEEA3 sur l'original */
}
/* 55 px = le centre du cadre de 150 px, moins la demi-hauteur du bouton. */
.car-btn {
    position: absolute; top: 55px; width: 40px; height: 40px;
    background: none; border: 0; color: #CCC; cursor: pointer; font-size: 22px;
}
.car-btn:hover { color: var(--accent); }
.car-prev { left: 0; }
.car-next { right: 0; }
.carousel-dots {
    display: flex; justify-content: center; gap: 8px; margin-top: 22px;
    list-style: none; padding: 0;
}
.carousel-dots button {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
    background: #555; cursor: pointer;
}
.carousel-dots button[aria-current="true"] { background: var(--accent); }

.credits {
    margin-top: clamp(38px, 6vw, 66px);
    font-size: 13px; line-height: 2; color: #9A9A9A;
}
.credits b { color: #E4E4E4; font-weight: 500; }
.credits p { margin-bottom: .35em; }
.merci {
    margin-top: clamp(30px, 5vw, 52px); text-align: center;
    font-family: var(--font-hand); font-weight: 300;
    font-size: clamp(12px, 1.5vw, 19px); letter-spacing: .105em;
    line-height: 1.9; color: var(--title-light);
}

.footer {
    background: var(--black); border-top: 1px solid rgba(255, 255, 255, .07);
    padding: 26px 0 34px;
    font-size: 12.5px; color: var(--muted);
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px 24px; justify-content: space-between; align-items: center; }
.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* Signature compagnie, même dessin qu'au pied de Monsieur Patate : la chaise en
   masque hérite de la couleur du texte, elle passe au vert avec lui au survol. */
.cie-sign { display: inline-flex; align-items: center; gap: 12px; }
.cie-sign .chair {
    width: 22px; height: 32px; flex: none; background: var(--muted);
    -webkit-mask: url(../../../_shared/img/logo-chaise.png) center / contain no-repeat;
            mask: url(../../../_shared/img/logo-chaise.png) center / contain no-repeat;
    transition: background .25s ease;
}
.cie-sign-text { display: flex; flex-direction: column; line-height: 1.2; }
.cie-sign .cie-name { font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; letter-spacing: .04em; color: var(--body-light); transition: color .25s ease; }
.cie-sign .cie-sub { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.footer a.cie-sign:hover .chair, .cie-sign:focus-visible .chair { background: var(--accent); }
.footer a.cie-sign:hover .cie-name, .cie-sign:focus-visible .cie-name { color: var(--accent); }
.cie-sign:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* ============================================================
   12. Fonds de section
   Relevés un à un sur le site d'origine. Quatre sections claires portent la
   même texture de brume ; quatre sections sombres portent une photo en
   `background-attachment: fixed` : l'image reste immobile pendant le
   défilement et la section s'y déplace comme une fenêtre. C'est ce qui donne
   au site son relief, une capture à l'arrêt ne le montre pas.
   Les photos sont sombres : elles affleurent plus qu'elles ne s'affichent.
   ============================================================ */

/* Sections claires : blanc + brume. Deux déclarations, la seconde ne
   s'appliquant que là où image-set() est compris. */
.accroche, .histoire, .artistes, .agenda {
    background-color: var(--white);
    background-image: url("../img/fond-brume-1200.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.accroche, .histoire, .artistes, .agenda {
    background-image: image-set(url("../img/fond-brume-1200.webp") type("image/webp"),
                                url("../img/fond-brume-1200.jpg")  type("image/jpeg"));
}

.portfolio {
    background: var(--near-black) url("../img/bg-portfolio-1920.jpg")
                top center / cover no-repeat fixed;
}
.compagnie {
    background: var(--grey-deep) url("../img/bg-compagnie-1920.jpg")
                left top / cover no-repeat fixed;
}
.contact {
    background: var(--black) url("../img/bg-contact-832.jpg")
                left center / contain no-repeat fixed;
}
.partenaires {
    background: var(--black) url("../img/bg-partenaires-1600.jpg")
                center center / contain no-repeat fixed;
}

/* Sous 900 px les photos défilent avec leur section, comme le faisait le site
   d'origine en version mobile. */
@media (max-width: 900px) {
    .portfolio, .compagnie, .contact, .partenaires { background-attachment: scroll; }
}
/* ---- Voiles ----
   Chaque photo de fond est couverte d'un voile, sans quoi elle mange le texte.
   Les valeurs sont celles de l'original : 87 % sur le portfolio, 75 % sur la
   compagnie, un dégradé de 58 % sur le contact, 50 % sur les partenaires.
   Le voile est un ::before à z-index négatif : il passe au-dessus du fond de
   la section et sous son contenu, grâce au contexte d'empilement créé ici. */
.portfolio, .compagnie, .contact, .partenaires { position: relative; isolation: isolate; }
.portfolio::before, .compagnie::before,
.contact::before, .partenaires::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.portfolio::before   { background: #000000; opacity: .87; }
.compagnie::before   { background: #000000; opacity: .75; }
.contact::before     { background: linear-gradient(90deg, transparent 0%, #000000 63%); opacity: .58; }
.partenaires::before { background: #000000; opacity: .50; }

/* iOS simule très mal `fixed` (saccades, image mal dimensionnée) : on l'y
   désactive quelle que soit la largeur. `-webkit-touch-callout` ne vaut que
   sur Safari iOS, ce qui en fait un test fiable et sans effet ailleurs. */
@supports (-webkit-touch-callout: none) {
    .portfolio, .compagnie, .contact, .partenaires { background-attachment: scroll; }
}

/* ============================================================
   13. Apparitions au défilement
   L'original anime l'entrée de plusieurs blocs (zoomIn sur la photo de
   l'accroche, slideInUp sur la galerie, fadeIn sur les visuels de l'histoire
   et sur la section compagnie, slideInLeft décalé sur les quatre artistes et
   sur les colonnes du contact). mf-script.js pose .is-in quand le bloc entre
   dans l'écran ; sans JavaScript, tout reste visible.
   ============================================================ */
/* Tout est préfixé par .js, que le script pose au démarrage : s'il ne tourne
   pas, aucune de ces règles ne s'applique et rien n'est masqué. */
/* Pas de `will-change` ici : il crée un bloc conteneur, ce qui ferait retomber
   en `scroll` tout `background-attachment: fixed` posé sur le même élément ou
   sur l'un de ses descendants. La transition est fluide sans lui. */
.js [data-reveal] {
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
    transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="zoom"] { transform: scale(.88); }
.js [data-reveal="up"]   { transform: translateY(46px); }
.js [data-reveal="left"] { transform: translateX(-46px); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].is-in  { opacity: 1; transform: none; }

/* ============================================================
   14. Adaptations
   ============================================================ */
@media (max-width: 1080px) {
    .gallery { grid-template-columns: repeat(5, 1fr); }
    .cal-row { grid-template-columns: 160px 1fr; }
    .cal-row > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .nav { display: none; }
    .burger { display: block; }
    .accroche-grid,
    .duo-grid,
    .contact-grid { grid-template-columns: 1fr; }
    .accroche-photo { margin-inline: auto; }
    .duo-grid.reverse .duo-media { order: 0; }
    .artistes-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery { grid-template-columns: repeat(4, 1fr); }
    .hero-content { flex-direction: column; gap: 34px; }
    .hero-text { flex: none; }
    .hero-play { margin: 0; }
}

@media (max-width: 600px) {
    .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .carousel { padding: 0 40px; }
    .carousel-track { grid-auto-columns: 100%; }
    .cal-row { grid-template-columns: 1fr; gap: 6px; }
    .hero { min-height: 92vh; }
}

/* ============================================================
   15. Mouvement réduit
   Le titre animé se fige sur les trois mots, la vidéo de fond cède la
   place à son image de repli, et rien ne bouge plus de soi-même.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .hero-video { display: none; }
    .typed-caret { display: none; }
    .scroll-down { animation: none; transform: translateX(-50%); }
    /* Les apparitions n'ont plus lieu d'être : tout est là d'emblée. */
    .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}