/* COURO PROD — feuille de style du site public.
   Reprend l'esthétique du site actuel (couroprod.com) : fond noir, titres en police système,
   Space Grotesk pour les petits textes, VCR OSD Mono pour le bouton retour. */

/* Satoshi : police de la charte graphique (Bold titres et éléments clés, Medium sous-titres, Regular/Light textes) */
/* Exception à la charte, décidée par le client : sur les vidéos de l'accueil, mêmes polices que le site d'origine
   (titre en Carmen Sans Bold, client en Space Grotesk Medium). Partout ailleurs : Satoshi. */
@font-face { font-family: "Carmen Sans"; src: url("../../media/fonts/CarmenSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Carmen Sans"; src: url("../../media/fonts/CarmenSans-Heavy.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../../media/fonts/SpaceGrotesk-Variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
/* Anton : police de titre de la charte, proposée dans l'admin (Typographie) ; téléchargée seulement si elle est utilisée */
@font-face { font-family: "Anton"; src: url("../../media/fonts/Anton-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../../media/fonts/Satoshi-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../../media/fonts/Satoshi-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../../media/fonts/Satoshi-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../../media/fonts/Satoshi-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../../media/fonts/Satoshi-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../../media/fonts/Satoshi-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
    /* Palette de la charte (p. 28-29) et ses teintes à 70 / 50 / 20 %. Rien d'autre. */
    --black:  #000000;
    --white:  #ffffff;
    --silver: #ced0d3;   /* gris clair argenté : texte secondaire sur fond noir (13,6:1) */
    --steel:  #64696e;   /* gris acier : texte secondaire sur fond blanc (5,5:1), décors sur noir */
    --slate:  #393b40;   /* gris ardoise : décors */
    --dark:   #1e2022;   /* gris très foncé : fonds, zones vides */
    --silver-70: rgba(206, 208, 211, 0.7);   /* texte tertiaire sur noir (6,6:1) */
    --white-50:  rgba(255, 255, 255, 0.5);
    --white-20:  rgba(255, 255, 255, 0.2);

    --font: "Satoshi", "Helvetica Neue", Arial, sans-serif;
    --font-ui: var(--font);
    --font-brand: var(--font);

    /* Grille (charte p. 41-42) : mobile 38 px de marge / 15 px de gouttière ; bureau 1440 px et plus : 200 px / 30 px.
       Entre les deux, la marge grandit avec l'écran. --w5 = 5 colonnes sur 12. */
    --margin: 38px;
    --gap: 15px;
    --w5: calc(5 * (100% - 11 * var(--gap)) / 12 + 4 * var(--gap));
    /* Échelle typographique (charte p. 34-35, pages de 1920 de large) : titres proportionnels à l'écran, textes fixes */
    --fs-display: clamp(4rem, 10.9375vw, 13.125rem);   /* 210 pt, Bold, suivi -25 */
    --fs-h1:  clamp(2.25rem, 3.6458vw, 4.375rem);       /* 70 pt / 84, Bold, suivi -25 */
    --fs-h2:  clamp(1.75rem, 2.6042vw, 3.125rem);       /* 50 pt / 58, Medium, suivi -25 */
    --fs-sub: clamp(1.25rem, 1.5625vw, 1.875rem);       /* 30 pt / 36, Regular, suivi -5 */
    --fs-body: 1.125rem;                                 /* 18 pt / 28, Regular */
    --fs-body2: 0.9375rem;                               /* 15 pt, Regular */
    --fs-small: 0.75rem;                                 /* petit texte (corps 1.0, 10 pt) : menu, étiquettes, filtres */
    --fs-cta: clamp(1.125rem, 1.0417vw, 1.25rem);       /* 20 pt, Bold, suivi 0 */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);   /* GSAP Expo.easeInOut */
    --expo-out: cubic-bezier(0.16, 1, 0.3, 1);        /* GSAP Expo.easeOut */
    --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--black);
    color: var(--white);
    font-family: var(--font);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: var(--vh);
    /* page courte (ex. Music sans morceau) : le contenu prend la place libre, le pied de page reste en bas de l'écran */
    display: flex;
    flex-direction: column;
}
.main { flex: 1 0 auto; }
.footer { flex-shrink: 0; }
/* Fondu entre les pages (site.js ajoute is-loaded, et retire la classe avant de suivre un lien interne) */
html.js body { opacity: 0; transition: opacity 0.45s var(--ease); }
html.js body.is-loaded { opacity: 1; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.container { width: 100%; margin: 0 auto; padding-left: var(--margin); padding-right: var(--margin); }

/* Contour de sélection au clavier : blanc fin plutôt que le bleu du navigateur */
:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }
.followpanel :focus-visible, .menu :focus-visible { outline-color: var(--black); }
.center { text-align: center; }

/* ---------- Typographie ---------- */
.ui-text, .ui-link, .eyebrow, .card__caption, .gridbtn {
    font-family: var(--font-ui);
    font-size: var(--fs-small);
    line-height: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}
.ui-link { padding: 0.25rem 0.75rem; transition: opacity 0.2s; }
.ui-link:hover { opacity: 0.6; }
.eyebrow { color: var(--silver); margin-bottom: 0.75rem; }

.sec__heading { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 2rem; }
/* charte p. 34 : H1 en Satoshi Bold, H2 en Satoshi Medium */
h2.sec__heading { font-size: var(--fs-h2); line-height: 1.16; font-weight: 500; }
.prose { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.5556; }
.prose p + p { margin-top: 1.5rem; }
.prose--wide { max-width: 70ch; }

/* Animation lettre par lettre (helpers.php → chars()) */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.05em 0 0.16em; margin-bottom: -0.16em; }
.c { display: inline-block; transform: translateY(115%); opacity: 0; transition: transform 0.7s var(--ease), opacity 0.4s; }
.is-in .c, .is-active .c { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .c { transform: none; opacity: 1; transition: none; } }

/* Roulement des lettres au survol (site.js → roll()) : le bouton est rogné, les lettres sortent par le haut et reviennent par le bas */
.roll { clip-path: inset(0 0); }
.roll .w { overflow: visible; padding: 0; margin: 0; vertical-align: baseline; }
.roll .c { transform: none; opacity: 1; transition: none; }

/* ---------- Sections et fonds ---------- */
.sec { padding: 5rem 0; }
.bg-black  { background: transparent; color: var(--white); }
.bg-dark   { background: var(--dark); color: var(--white); }
.bg-white  { background: var(--white); color: var(--black); }
.bg-silver { background: var(--silver); color: var(--black); }
.main > .sec:first-of-type { padding-top: 10rem; }
.main > .sec:last-of-type { padding-bottom: 10rem; }


/* ---------- Boutons ---------- */
.btn {
    display: inline-block;
    padding: 0.65em 1.5em;
    font-family: var(--font-ui);
    font-size: var(--fs-cta);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;   /* charte : « En savoir plus » */
    transition: transform 0.25s var(--ease), opacity 0.2s;
}
.btn:hover { transform: translateY(-2px); opacity: 0.9; }
.btn--white { background: var(--white); color: var(--black); }
.btn--black { background: var(--black); color: var(--white); }
.btn.center { display: block; width: max-content; min-width: 15rem; margin: 0 auto 2.5rem; text-align: center; }   /* pas « table » : Chrome y supprime l'espace entre les mots découpés (« Voirplus ») */

/* ---------- Interface fixe (identique au site actuel) ---------- */
.topbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 8000; padding: 2rem 0 1rem; pointer-events: none; }
.topbar > * { pointer-events: auto; }
/* charte p. 16 : logo jamais sous 36 px de haut → 108 px de large (+ 2 × 8 px de marge) */
.topbar__logo { position: absolute; top: 2rem; left: 1.25rem; width: calc(var(--logo-top, 108px) + 1rem); padding: 0.5rem; }   /* --logo-top : admin, Typographie */
.topbar__logo img { width: 100%; height: auto; }
.topbar__logo:hover { opacity: 0.7; }
.topbar__nav { display: none; position: fixed; top: 3.5rem; right: 4rem; transform: translateY(-50%); align-items: center; gap: 0.15rem; white-space: nowrap; color: var(--white); }
.topbar__nav .ui-link { padding: 0.25rem 0.55rem; }
.topbar__nav--left { right: auto; left: 4rem; }
.topbar__follow { margin-left: 1.25rem; }

/* Sélecteur de langue « EN + » : à l'extrémité droite du menu, les autres langues se déplient dessous */
.lang { position: relative; margin-left: 1.25rem; }
.lang__toggle { display: inline-flex; align-items: center; gap: 0.6rem; }
.lang__plus { display: inline-block; font-weight: 400; font-size: 0.95rem; line-height: 1; transition: transform 0.35s var(--expo-out); }
.lang__toggle[aria-expanded="true"] .lang__plus { transform: rotate(45deg); }
.lang__list { position: absolute; top: 100%; right: 0; display: flex; flex-direction: column; align-items: flex-end; padding-top: 0.35rem; }
.lang__item { opacity: 0; transform: translateY(-6px); transition: opacity 0.35s var(--expo-out), transform 0.35s var(--expo-out); }
.lang__list.is-in .lang__item { opacity: 1; transform: none; }
.lang__list.is-in .lang__item:nth-child(2) { transition-delay: 0.06s; }
.topbar__link.is-current { opacity: 0.45; pointer-events: none; }

/* Burger 40 × 40 du site d'origine, dans une zone tactile de 44 px (traits au même endroit). Le menu ouvert le recouvre. */
.burger { position: fixed; top: calc(3rem - 2px); right: calc(2.5rem - 2px); width: 44px; height: 44px; z-index: 9100; color: var(--white); }
.burger span { position: absolute; left: 7px; right: 7px; height: 2px; background: currentColor; }
.burger span:nth-child(1) { top: 13px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 29px; }

/* Croix des angles : tournent de 180° à chaque projet, apparaissent après l'intro sur l'accueil */
/* --cs : taille, --cw : épaisseur du trait (réglables dans l'admin, Réglages ; 27 px sur le site d'origine).
   --co : décalage depuis le bord, calculé pour garder le centre de la croix au même endroit quelle que soit sa taille. */
.corners { position: fixed; inset: 0; z-index: 5000; pointer-events: none; --cs: 18px; --cw: 2px; --co: calc(2rem + (27px - var(--cs)) / 2); }
/* Croix en quatre branches avec un centre vide de la largeur du trait, comme sur le site d'origine (où les deux traits
   s'annulaient au croisement par inversion de couleurs) — sans inversion, pour respecter la charte. */
.corners i {
    --b: calc((var(--cs) - var(--cw)) / 2);   /* longueur d'une branche */
    position: absolute; width: var(--cs); height: var(--cs);
    background:
        linear-gradient(var(--white), var(--white)) center top / var(--cw) var(--b) no-repeat,
        linear-gradient(var(--white), var(--white)) center bottom / var(--cw) var(--b) no-repeat,
        linear-gradient(var(--white), var(--white)) left center / var(--b) var(--cw) no-repeat,
        linear-gradient(var(--white), var(--white)) right center / var(--b) var(--cw) no-repeat;
    transform: scale(var(--s, 1)) rotate(var(--r, 0deg)); transition: transform 1.25s var(--expo-in-out);
}
.corners i:nth-child(1) { top: var(--co); left: var(--co); }
.corners i:nth-child(2) { top: var(--co); right: var(--co); }
.corners i:nth-child(3) { bottom: var(--co); left: var(--co); }
.corners i:nth-child(4) { bottom: var(--co); right: var(--co); }
.page-home .corners i { --s: 0; }
.page-home .corners.is-in i { --s: 1; }

/* Panneau « follow us ! » : fond noir, puis panneau blanc qui se déroule, blocs qui apparaissent un à un */
.followbg { position: fixed; inset: 0; z-index: 8900; background: var(--black); opacity: 0; transition: opacity 0.85s var(--expo-in-out); }
.followbg.is-in { opacity: 1; }
.followpanel { position: fixed; top: 0; left: 0; width: 100%; height: 0; overflow: hidden; z-index: 9000; background: var(--white); color: var(--black); transition: height 0.85s var(--expo-in-out); }
.followpanel.is-in { height: 100vh; overflow-y: auto; overscroll-behavior: contain; }
.followpanel__inner { position: relative; padding: 2rem 2.5rem; }
.followpanel__close { position: absolute; top: 2rem; right: 2.5rem; }
@media (min-width: 1024px) { .followpanel__close { right: 4rem; } }
.followpanel__list { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2.5rem; font-family: var(--font-ui); font-size: var(--fs-body2); line-height: 1.5; text-transform: uppercase; }
.followpanel__item { opacity: 0; transition: opacity 0.85s var(--expo-in-out); transition-delay: calc(var(--i, 0) * 0.3s); }
.followpanel.is-in .followpanel__item { opacity: 1; }
.followpanel__item a { display: block; }
.followpanel__item a:hover { opacity: 0.6; }
.followpanel__label { color: var(--steel); }
.followpanel__logo { width: 7rem; height: auto; }   /* 37 px de haut (minimum charte : 36 px) */

/* Menu mobile : copie de celui du site d'origine (relevé sur couroprod.com en 390 × 844), exception à la charte voulue
   par le client - Space Grotesk 400, 36/40 px, capitales, trait noir de 1 px sous chaque lien, 16 px entre les liens,
   bord droit à 80 px, croix de 40 px au-dessus (48 px d'écart). Bloc centré en hauteur ; s'il dépasse l'écran, il défile.
   Animation de l'original (GSAP) : le panneau arrive de la droite en 0,5 s, chaque entrée part 0,1 s après la précédente ;
   à la fermeture, tout se rejoue à l'envers (courbe inversée). */
.menu {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; flex-direction: column; align-items: flex-end; gap: 1rem;
    padding: 2rem 5rem 2rem var(--margin); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    background: var(--white); color: var(--black);
    font-family: "Space Grotesk", var(--font); font-size: var(--fs-menu, 2.25rem); line-height: calc(var(--fs-menu, 2.25rem) * 10 / 9); font-weight: 400; letter-spacing: normal; text-transform: uppercase;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) calc((var(--n, 1) - 1) * 0.1s);
}
.menu.is-in { transform: none; transition-delay: 0s; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.menu > :first-child { margin-top: auto; }   /* centré comme l'original, mais le haut reste visible si le bloc dépasse */
.menu > :last-child { margin-bottom: auto; }
.menu__item {
    flex-shrink: 0; transform: translateX(100vw);
    transition: transform 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) calc((var(--n, 1) - 1 - var(--i, 0)) * 0.1s);
}
.menu.is-in .menu__item { transform: none; transition-delay: calc(var(--i, 0) * 0.1s); transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.menu__close { position: relative; width: 40px; height: 40px; margin-bottom: 3rem; }
.menu__close svg { width: 100%; height: 100%; }
.menu__close::after { content: ""; position: absolute; inset: -4px; }   /* zone tactile de 48 px, croix inchangée */
.menu__link { border-bottom: 1px solid var(--black); padding-top: 3px; margin-top: -3px; text-transform: inherit; letter-spacing: inherit; }   /* inherit : un bouton (« follow us ! ») ne reprend pas les capitales du menu */   /* zone tactile de 44 px, positions inchangées */
.menu__langs { display: flex; align-items: flex-start; gap: 1.25rem; }
.menu__lang.is-current { color: var(--steel); }
html.is-menu-open { overflow: hidden; }   /* page figée derrière le menu */
@media (prefers-reduced-motion: reduce) { .menu, .menu__item { transition: none; } }

.counter { position: fixed; left: 50%; bottom: 3.5rem; z-index: 4500; transform: translateX(-50%); font-family: "Carmen Sans", var(--font); font-size: 0.75rem; line-height: 1rem; font-weight: 800; transition: opacity 1.5s var(--expo-in-out); }
.counter.is-hidden { opacity: 0; }
.gridbtn { position: fixed; left: 50%; bottom: 1rem; z-index: 5000; transform: translate(-50%, -50%); font-family: "Space Grotesk", var(--font); font-weight: 600; color: var(--white); }
/* Bouton son de l'accueil : en bas à droite, à la hauteur de « grid » (à gauche de la croix d'angle sur ordinateur) */
.soundbtn { position: fixed; right: 0.5rem; bottom: 1rem; z-index: 5000; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: "Space Grotesk", var(--font); font-weight: 600; color: var(--white); transition: opacity 0.6s var(--expo-in-out); }
.soundbtn__icon { flex: 0 0 auto; }
.soundbtn[aria-pressed="false"] .soundbtn__waves, .soundbtn[aria-pressed="true"] .soundbtn__mute { display: none; }
.soundbtn.is-silent { opacity: 0.45; }          /* la vidéo affichée n'a pas de son */
.soundbtn.is-hidden { opacity: 0; pointer-events: none; }
.backbtn {
    position: fixed; left: 50%; bottom: 1.5rem; z-index: 5000; transform: translateX(-50%);
    padding: 0.5rem 1rem; display: flex; gap: 0.5rem; align-items: center;
    background: var(--black); color: var(--white);
    font-family: var(--font); text-transform: uppercase;
    transition: transform 0.2s var(--ease);
}
.backbtn svg { width: 2.5rem; height: 2.5rem; }
.backbtn:hover { transform: translateX(-50%) translateX(-4px); }

/* ---------- Intro : logo (fixe, ou lettres qui montent selon le réglage de la section), puis l'écran glisse vers le bas ---------- */
.intro {
    position: fixed; inset: 0; z-index: 10000;
    background: var(--black);
    display: flex; align-items: center; justify-content: center;
    text-transform: uppercase;
    transition: transform 1.5s var(--expo-out);
}
.intro.is-leaving { transform: translateY(100vh); }
.intro__logo { display: block; width: calc(var(--logo-intro, 284px) + 1rem); max-width: 80vw; padding: 0.5rem; transition: opacity 0.65s var(--expo-out); }   /* --logo-intro : admin, Typographie */
.intro__logo svg { width: 100%; height: auto; overflow: visible; }
.intro__logo path { transform: translateY(250px); transition: transform 0.85s var(--expo-out); transition-delay: calc(var(--i, 0) * 33ms); }
.intro.is-ready .intro__logo path { transform: none; }
.intro--static .intro__logo path { transform: none; transition: none; }   /* réglage « logo sans animation » */
/* Phrase d'accroche juste sous le logo (--tg : espace réglé dans la section, mesuré depuis le dessin du logo) ; hors du flux, le logo reste centré */
.intro__box { position: relative; }
.intro__tagline {
    position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin: calc(var(--tg, 60px) - 0.5rem) 0 0;   /* - la marge intérieure du logo */
    width: min(90vw, 40rem); text-align: center;
    font-family: var(--font-ui); font-size: var(--fs-small); line-height: 1rem;
    transition: opacity 0.65s var(--expo-out);
}
.intro.is-leaving .intro__logo, .intro.is-leaving .intro__tagline { opacity: 0; }

/* ---------- Accueil : projets empilés plein écran ---------- */
.page-home { overflow: hidden; height: var(--vh); }
.stage { position: fixed; inset: 0; z-index: 50; opacity: 0; transition: opacity 1.5s var(--expo-in-out); }
.stage.is-in { opacity: 1; }
/* Grille ouverte (ou intro) : la pile invisible ne doit rien capter. Le projet actif déclare pointer-events: auto,
   qui l'emporte sur le parent : il faut donc viser les .slide eux-mêmes, sinon il recouvre la grille
   (molette et clics bloqués — bug constaté le 17/10). */
.stage:not(.is-in), .stage:not(.is-in) .slide { pointer-events: none; }
.counter { pointer-events: none; }
.slide { position: absolute; inset: 0; isolation: isolate; opacity: 0; pointer-events: none; transition: opacity 1.25s var(--expo-in-out); }
.slide.is-active { opacity: 1; pointer-events: auto; }
.slide__video { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.slide__inner { position: relative; z-index: 2; height: 100%; padding: 0 var(--margin); display: flex; flex-direction: column; justify-content: center; }
/* titre et client : tailles exactes du site d'origine (text-3xl / lg:text-7xl, text-2xl / lg:text-3xl) */
.slide__title { font-family: "Carmen Sans", var(--font); font-size: var(--fs-slide-m, 1.875rem); line-height: 1.2; font-weight: 700; letter-spacing: normal; width: 100%; }
.slide__client { margin-top: 1rem; font-family: "Space Grotesk", var(--font); font-size: var(--fs-client-m, 1.5rem); line-height: 1.3333; font-weight: 500; letter-spacing: normal; width: 100%; }
/* mots : montent de 200 px (0,1 s de décalage par mot), ressortent vers le haut */
.slide .w { overflow: visible; padding: 0; margin: 0; clip-path: inset(-3vh 0); transform: translateY(200px); transition: transform 1.25s var(--expo-in-out); transition-delay: calc(var(--i, 0) * 0.1s); }
.slide.is-active .w { transform: none; }
.slide.is-leaving .w { transform: translateY(-200px); }
.slide.is-reset .w { transition: none; transform: translateY(200px); }
@media (hover: hover) { .slide__title a { cursor: none; } }

.cursor { position: fixed; top: 0; left: 0; z-index: 5000; pointer-events: none; display: none; margin: -33px 0 0 -33px; will-change: transform; }
.cursor.is-on { display: block; }

/* ---------- Grilles / cartes (page Work et grille de l'accueil) ---------- */
.sec--grid { padding: 10rem 0; }
.gridlayer { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--black); opacity: 0; transition: opacity 1s var(--expo-in-out); }
.gridlayer.is-in { opacity: 1; }
.gridlayer__inner { padding-top: 10rem; padding-bottom: 10rem; }
.grid { display: grid; grid-template-columns: 1fr; gap: 4rem var(--gap); }
.card { display: block; }
.card__media { position: relative; height: 10rem; overflow: hidden; background: var(--dark); }
.card__media img, .card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media video { opacity: 0; transition: opacity 0.35s; }
.card.is-playing .card__media video { opacity: 1; }
.card__caption { margin-top: 1.25rem; width: 75%; line-height: 1rem; }
.card__caption span { display: block; }
.card__plus { color: var(--white); }
.card__title { color: var(--silver-70); }
/* vignettes qui montent depuis le bas (2 s, décalage 1/15 s) */
.grid .card { transform: translateY(100vh) scaleY(1.45); transition: transform 2s var(--expo-in-out); transition-delay: calc(var(--i, 0) * 66ms); }
.grid.is-in .card { transform: none; }

/* ---------- Fiche projet ---------- */
/* Mise en page du site d'origine (relevée à 1710, 1100 et 390 px) : titre et client en capitales 36/40 px,
   trait de 80 px, film de 640 × 360 aligné à gauche (pleine largeur sur téléphone, sans déborder), trait,
   « you like it ? », bouton, trait, deux suggestions. Police et couleurs de la charte (Satoshi, argenté et blanc). */
.project__inner { font-family: var(--font-ui); padding-top: 9rem; padding-bottom: 8rem; }
.players { display: grid; gap: 2rem; }
.project .players { justify-items: start; }
.project .player { max-width: 40rem; }
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--dark); }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.project__title { font-family: var(--font-brand); font-size: var(--fs-project, 2.25rem); line-height: calc(var(--fs-project, 2.25rem) * 10 / 9); font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase; color: var(--silver); }   /* H1 de la charte (Bold), à la taille de l'original */
.project__client { font-family: var(--font-brand); font-size: var(--fs-project, 2.25rem); line-height: calc(var(--fs-project, 2.25rem) * 10 / 9); font-weight: 400; letter-spacing: -0.025em; text-transform: uppercase; color: var(--white); }
.project__desc { margin-top: 2.5rem; max-width: 70ch; font-size: var(--fs-body); line-height: 1.5556; }
.vline { width: 0.5px; height: 5rem; margin: 2.5rem auto; background: var(--silver); }
.project .eyebrow { margin-bottom: 0.75rem; font-size: var(--fs-body2); line-height: 1.5; font-weight: 400; }   /* texte 2 de la charte */
.suggest { display: grid; grid-template-columns: 1fr; gap: 1.25rem var(--gap); }
.suggest .card { transform: none; }
.suggest .card__media { height: 15rem; }
.suggest .card__caption { margin-top: 0.75rem; width: auto; font-size: var(--fs-body2); line-height: 1.5; font-weight: 400; text-transform: uppercase; }   /* texte 2 de la charte */
.suggest .card__title { color: var(--silver); }
.suggest .card__client { color: var(--white); }

/* ---------- Page About (identique au site actuel) ----------
   Fond noir ; lignes fixes plein écran très discrètes ; vidéo verticale 2:3 sur la moitié droite (desktop) ;
   texte sur 2/5 de largeur avec bouton et contacts en 2 colonnes ; flèche retour à gauche au milieu. */
.lines { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
.lines i { position: absolute; background: var(--dark); }
.lines i:nth-child(1) { left: 25%; top: 0; width: 1px; height: 100%; display: none; }
.lines i:nth-child(2) { left: 75%; top: 0; width: 1px; height: 100%; display: none; }
.lines i:nth-child(3) { left: 50%; top: 0; width: 1px; height: 100%; }
.lines i:nth-child(4) { top: 50%; left: 0; height: 1px; width: 100%; }
.about__video { display: none; position: fixed; z-index: -1; top: 6.5rem; left: 75%; height: calc(var(--vh) - 9rem); aspect-ratio: 2 / 3; object-fit: cover; filter: url(#rgbshift); }
.tpl-about .sec--text { padding-bottom: 0; }
.tpl-about .sec--contacts { padding-top: 0; }
.tpl-about .prose { width: 100%; font-size: var(--fs-sub); line-height: 1.2; letter-spacing: -0.005em; }
.tpl-about .prose p + p { margin-top: 0.75rem; }
.prose__btn { margin-top: 2.5rem; margin-bottom: 2.5rem; letter-spacing: 0; }
.backbtn--about { left: 1rem; top: 50%; bottom: auto; transform: translateY(-50%); padding: 0.25rem 0.75rem; background: transparent; }
.backbtn--about:hover svg { animation: wiggle 1s ease-in-out infinite; }
@keyframes wiggle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.tpl-about .backbtn--about { display: none; }

/* Séquence d'entrée de l'About (body.is-entered, posé par site.js) :
   à 0,25 s les mots montent (2 s, 10 ms de décalage par mot), les lignes se tracent (1,5 s),
   la vidéo monte étirée ×1,75 (2 s) ; puis (--step-b) le bouton et les contacts montent à leur tour. */
.tpl-about .prose .w { display: inline-block; overflow: visible; padding: 0; margin: 0; opacity: 0; transform: translateY(200px); transition: transform 2s var(--expo-in-out), opacity 2s var(--expo-in-out); transition-delay: calc(0.25s + var(--i, 0) * 10ms); }
.tpl-about.is-entered .prose .w { opacity: 1; transform: none; }
.tpl-about .lines i { transition: height 1.5s var(--expo-in-out) 0.25s, width 1.5s var(--expo-in-out) 0.25s; }
.tpl-about .lines i:nth-child(-n+3) { height: 0; }
.tpl-about .lines i:nth-child(4) { width: 0; }
.tpl-about.is-entered .lines i:nth-child(-n+3) { height: 100%; }
.tpl-about.is-entered .lines i:nth-child(4) { width: 100%; }
.tpl-about .about__video { transform: translate(-50%, 100vh) scaleY(1.75); transform-origin: center; transition: transform 2s var(--expo-out) 0.25s; }
.tpl-about.is-entered .about__video { transform: translate(-50%, 0) scaleY(1); }
.tpl-about .prose__btn, .tpl-about .contacts__col { opacity: 0; transform: translateY(200px); transition: transform 2s var(--expo-in-out), opacity 2s var(--expo-in-out); transition-delay: var(--step-b, 3.5s); }
.tpl-about .contacts__col { transition-delay: calc(var(--step-b, 3.5s) + var(--i, 0) * 0.1s); }
.tpl-about.is-entered .prose__btn, .tpl-about.is-entered .contacts__col { opacity: 1; transform: none; }
.tpl-about .prose__btn:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
    .tpl-about .prose .w, .tpl-about .lines i, .tpl-about .about__video, .tpl-about .prose__btn, .tpl-about .contacts__col { transition-duration: 0.01s; transition-delay: 0s; }
}

/* ---------- Contacts ---------- */
.contacts { display: grid; grid-template-columns: 1fr; gap: 1.25rem var(--gap); margin-top: 5rem; width: 70%; font-family: var(--font-ui); font-size: var(--fs-body2); line-height: 1.5; text-transform: uppercase; }
.contacts .eyebrow { color: var(--silver); font-weight: 400; font-size: var(--fs-body2); margin-bottom: 0; }
.contacts__col a { display: block; }
.contacts__col a:hover { color: var(--silver); }

/* ---------- Pôles (masqués par défaut — nouvelle charte) ---------- */
.poles { display: grid; grid-template-columns: 1fr; gap: 2rem var(--gap); }
.pole { border-top: 1px solid var(--silver-70); padding-top: 1.5rem; }
.pole__logo { width: 100%; max-width: 150px; height: auto; margin-bottom: 1.2rem; }
.pole__subtitle { font-family: var(--font-ui); font-size: var(--fs-small); text-transform: uppercase; color: var(--silver); margin-bottom: 0.8rem; }
.pole__text { font-size: var(--fs-body2); line-height: 1.5; }

/* ---------- Galerie photo (colonnes) + agrandissement ---------- */
.gallery { columns: 1; column-gap: var(--gap); }
.gallery__item { display: block; position: relative; break-inside: avoid; margin-bottom: var(--gap); overflow: hidden; background: var(--dark); cursor: zoom-in;
    opacity: 0; transform: translateY(60px); transition: opacity 1.2s var(--expo-out), transform 1.2s var(--expo-out); transition-delay: calc(mod(var(--i, 0), 3) * 90ms); }
.gallery__item.is-in { opacity: 1; transform: none; }
.gallery__item img { width: 100%; height: auto; transition: transform 0.9s var(--expo-out); }
.gallery__item:hover img, .gallery__item:focus-visible img { transform: scale(1.03); }
.gallery__caption { position: absolute; left: 0; bottom: 0; padding: 0.75rem 1rem; font-family: var(--font-ui); font-size: var(--fs-small); text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .gallery__item { opacity: 1; transform: none; transition: none; } }

.lightbox { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; background: var(--black); opacity: 0; transition: opacity 0.35s var(--expo-out); }
.lightbox.is-in { opacity: 1; }
.lightbox__img { max-width: 90vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; }
.lightbox__btn { position: absolute; color: var(--white); padding: 0.75rem; transition: opacity 0.2s; }
.lightbox__btn:hover { opacity: 0.6; }
.lightbox__btn svg { width: 2.5rem; height: 2.5rem; }
.lightbox__close { top: 1.5rem; right: 2rem; }
.lightbox__prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 1rem; top: 50%; transform: translateY(-50%) scaleX(-1); }
.lightbox__count { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; }
@media (min-width: 600px) { .gallery { columns: 2; } }
@media (min-width: 1024px) { .gallery { columns: 3; } }

/* ---------- Talents en grands noms au contour (Photography, modèle Iconoclast) ---------- */
.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; }
.main > .sec--names:first-of-type { padding: 0; }
.names { min-height: var(--vh); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 9rem var(--margin) 6rem; text-align: center; }
.names__item {
    display: block; font-family: var(--font-brand); font-size: var(--fs-h1); line-height: 1.2; font-weight: 700;
    letter-spacing: -0.025em; text-transform: uppercase;   /* charte p. 34 : Satoshi Bold, suivi -25 */
    color: var(--white); opacity: 0; transform: translateY(30px);
    transition: opacity 0.9s var(--expo-out), transform 0.9s var(--expo-out), -webkit-text-fill-color 0.25s;
    transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s;
}
@supports (-webkit-text-stroke: 1px #fff) {
    .names__item { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--white); }
    .names__item:hover, .names__item:focus-visible { -webkit-text-fill-color: var(--white); }
}
.names.is-in .names__item { opacity: 1; transform: none; }
.names__item:focus-visible { outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .names__item { opacity: 1; transform: none; transition: none; } }

/* ---------- Fiche talent : carrousel infini + bio ---------- */
.page-talent { overflow-x: hidden; }
.talent { padding-top: 7rem; }
.talent__stage { position: relative; height: calc(var(--vh) - 7rem - 9rem); min-height: 320px; }
.talent__carousel { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.talent__track { display: flex; align-items: center; gap: 8vw; height: 100%; will-change: transform; }
.talent__item { margin: 0; height: 100%; flex-shrink: 0; display: flex; align-items: center; }
.talent__item img { height: 100%; width: auto; max-width: 85vw; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.talent__half { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; }
.talent__half--prev { left: 0; cursor: w-resize; }
.talent__half--next { right: 0; cursor: e-resize; }
.talent__half:focus-visible { outline-offset: -6px; }
.talent__about { display: flex; flex-direction: column; align-items: center; padding: 3rem var(--margin) 7rem; text-align: center; }
.talent__bio { max-width: 46rem; font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.5556; }
.talent__bio p + p { margin-top: 1em; }
.talent__links { margin-top: 2.5rem; display: flex; gap: 1.25rem; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; }
.talent__links a:hover { opacity: 0.6; }
.talent__bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.5rem 2rem; padding: 2rem var(--margin) 3rem; text-align: center; }
.talent__name { font-family: var(--font-brand); font-size: var(--fs-h1); line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase; }
@media (max-width: 1023px) { .talent__stage { height: 62vh; } .talent__track { gap: 6vw; } }

/* ---------- Filtres (Talents, Presse) ---------- */
.filters { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 3rem; font-family: var(--font-ui); font-size: var(--fs-small); line-height: 1rem; font-weight: 700; text-transform: uppercase; }
.filters__group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.25rem; }
.filters__label { color: var(--silver); font-weight: 400; min-width: 7rem; }
.filters__item { color: var(--silver); padding: 0.2rem 0; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.filters__item:hover { color: var(--white); }
.filters__item.is-active { color: var(--white); border-bottom-color: var(--white); }

/* ---------- Grille des réalisateurs ---------- */
.sec--talents { padding-top: 0; }
.tgrid { display: grid; grid-template-columns: 1fr; gap: 3rem var(--gap); }
.tcard__media { height: auto; aspect-ratio: 4 / 5; }
.tcard__media .member__initials { font-family: var(--font-brand); font-size: clamp(3rem, 6vw, 5rem); font-weight: 700; letter-spacing: -0.03em; color: var(--slate); }
.tcard__body { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 1rem; }
.tcard__name { font-family: var(--font-brand); font-size: var(--fs-sub); font-weight: 700; letter-spacing: -0.005em; line-height: 1.2; text-transform: uppercase; }
.tcard__meta, .tcard__city { font-family: var(--font-ui); font-size: var(--fs-small); line-height: 1rem; font-weight: 700; text-transform: uppercase; color: var(--silver); }
.tgrid__empty, .grid__empty { font-family: var(--font-ui); color: var(--silver); margin-top: 1rem; }
.tgrid__empty a { color: var(--white); border-bottom: 1px solid currentColor; margin-left: 0.5rem; }
.sec--talents + .sec--cta { padding-top: 0; }

/* ---------- Fiche réalisateur ---------- */
.director__inner { padding-top: 8rem; padding-bottom: 9rem; }
.director__reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.director__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 3rem; margin: 2.5rem 0 3rem; }
.director__name { font-family: var(--font-brand); font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; text-transform: uppercase; }
.director__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 1rem; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; color: var(--silver); }
.director__cta { max-width: 22rem; }
.director__note { margin-top: 0.75rem; font-family: var(--font-ui); font-size: var(--fs-body2); line-height: 1.5; color: var(--silver); }
.director__cols { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--white-20); }
.director__bio { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.5556; max-width: 42rem; }
.director__bio p + p { margin-top: 1em; }
.director__facts { margin: 0; display: grid; gap: 1.25rem; font-family: var(--font-ui); font-size: var(--fs-body2); line-height: 1.5; }
.director__facts dt { font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; color: var(--silver); margin-bottom: 0.2rem; }
.director__facts dd { margin: 0; }
.director__block { margin-top: 5rem; }
.director__h2 { font-family: var(--font-brand); font-size: var(--fs-h2); line-height: 1.16; font-weight: 500; letter-spacing: -0.025em; margin-bottom: 1.75rem; }   /* titre 2 */
.players--2 { grid-template-columns: 1fr; gap: 2rem var(--gap); }
.director__video { margin: 0; }
.director__video .card__caption { text-transform: uppercase; }

/* ---------- Lauriers (récompenses) ---------- */
.laurels { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.laurel { width: 12.5rem; height: auto; color: var(--white); flex-shrink: 0; overflow: visible; }
.laurel--logo { width: auto; max-width: 12.5rem; max-height: 7.5rem; object-fit: contain; }
.laurel text { font-family: var(--font-ui); fill: currentColor; text-anchor: middle; }
.laurel__status { font-size: 6.6px; font-weight: 700; letter-spacing: 1.3px; }
.laurel__name { font-weight: 700; letter-spacing: 0.3px; }
.laurel__year { font-size: 7.5px; font-weight: 700; letter-spacing: 1.5px; }
.laurel__leaves { opacity: 0.92; }
.project__director { margin-top: 0.75rem; font-size: var(--fs-body2); text-transform: uppercase; color: var(--silver); }
.project__director a { color: var(--white); border-bottom: 1px solid var(--white-50); }
.project__director a:hover { border-bottom-color: var(--white); }
.project__laurels { margin-top: 2rem; }
.project__laurels .laurel { width: 10rem; }

/* ---------- Récompenses ---------- */
.sec--awards { padding-top: 2rem; }
.awards__year { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; border-top: 1px solid var(--white-20); }
.awards__y { font-family: var(--font-brand); font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2.5rem var(--gap); }
.award { display: flex; align-items: center; gap: 1.5rem; }
.award .laurel { width: 9.5rem; }
.award__body { font-family: var(--font-ui); font-size: var(--fs-body2); line-height: 1.5; }
.award__status { font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; color: var(--silver); }
.award__name { font-size: var(--fs-body); font-weight: 500; margin-top: 0.15rem; }   /* sous-titre : Satoshi Medium (charte p. 33-34) */
.award__cat { color: var(--silver); }
.award__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.5rem; font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; }
.award__links a { border-bottom: 1px solid var(--white-50); }
.award__links a:hover { border-bottom-color: var(--white); }

/* Chiffres clés */
.sec--figures { padding: 0 0 3rem; }
.main > .sec--text + .sec--figures { margin-top: -2rem; }
.figures { margin: 0; display: flex; flex-wrap: wrap; gap: 2rem 4rem; }
.figures__item { display: flex; flex-direction: column-reverse; }
/* charte p. 34 : chiffres en Satoshi Bold (suivi -25), libellés en Satoshi Medium, gris clair argenté de la palette */
.figures dd { margin: 0; font-family: var(--font-brand); font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.figures dt { font-family: var(--font-brand); font-size: var(--fs-body2); font-weight: 500; letter-spacing: 0; text-transform: uppercase; color: var(--silver); margin-top: 0.5rem; }

/* ---------- Presse ---------- */
.sec--press { padding-top: 1rem; }
.press { list-style: none; margin: 0; padding: 0; }
.press__item { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 2rem 0; border-top: 1px solid var(--white-20); }
.press__media { font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; }
.press__media img { max-width: 8rem; max-height: 2.5rem; object-fit: contain; filter: grayscale(1) brightness(1.6); }
.press__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; color: var(--silver); }
.press__type { color: var(--white); }
.press__title { margin-top: 0.6rem; font-family: var(--font-brand); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.025em; line-height: 1.16; }
.press__title a:hover { opacity: 0.7; }
.press__excerpt { margin-top: 0.75rem; max-width: 46rem; font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.5556; color: var(--silver); }
.press__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin-top: 1rem; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; }
.press__links a { border-bottom: 1px solid var(--white-50); }
.press__links a:hover { border-bottom-color: var(--white); }
.press__empty { font-family: var(--font-ui); color: var(--silver); }

/* Bandeau « Ils parlent de nous » */
.sec--logos { padding: 2rem 0 3rem; }
.logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; }
.logos__item { font-family: var(--font-brand); font-size: var(--fs-sub); font-weight: 700; letter-spacing: -0.005em; text-transform: uppercase; opacity: 0.6; transition: opacity 0.2s; }
.logos__item img { max-height: 2rem; max-width: 9rem; object-fit: contain; filter: grayscale(1) brightness(1.6); }
.logos:hover .logos__item { opacity: 1; }
.tpl-about .sec--logos { padding: 4rem 0 0; }

/* ---------- Formulaires (contact, demande de réalisateur) ---------- */
.sec--form { padding-top: 0; }
.main > .sec--form:first-of-type { padding-top: 9rem; }
.form-wrap .form, .form-wrap .form-alert, .form-wrap .form-done { max-width: 1024px; }
.form-intro { max-width: 40rem; margin: -1rem 0 2.5rem; font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.5556; color: var(--silver); }
.form { display: grid; grid-template-columns: 1fr; gap: 1.5rem var(--gap); }
.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.field label { font-family: var(--font-ui); font-size: var(--fs-small); line-height: 1rem; font-weight: 700; text-transform: uppercase; color: var(--silver); }
.field__req { color: var(--white); }
.field input, .field select, .field textarea {
    width: 100%; font: inherit; font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.4; color: var(--white);
    background: transparent; border: 0; border-bottom: 1px solid var(--white-50); border-radius: 0; padding: 0.6rem 0;
    transition: border-color 0.2s, background-color 0.2s; appearance: none; -webkit-appearance: none;
}
.field textarea { resize: vertical; min-height: 9rem; border: 1px solid var(--white-50); padding: 0.75rem; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.25rem center; padding-right: 1.75rem; cursor: pointer; }
.field select option { color: var(--black); background: var(--white); }
.field input::placeholder, .field textarea::placeholder { color: var(--silver-70); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.7); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--white); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }
/* erreur : bordure pleine + pictogramme et message (charte monochrome, sans couleur ajoutée) */
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--white); border-width: 0 0 2px; background: var(--dark); }
.field.has-error textarea { border-width: 2px; }
.field__error { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-ui); font-size: var(--fs-body2); font-weight: 700; color: var(--white); }
.field__error::before { content: "!"; display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; flex-shrink: 0; border-radius: 50%; background: var(--white); color: var(--black); font-size: var(--fs-small); font-weight: 700; }
.field__help { font-family: var(--font-ui); font-size: var(--fs-body2); color: var(--silver-70); }
.field--check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; }
.field--check input { width: 1.15rem; height: 1.15rem; flex-shrink: 0; margin-top: 0.1rem; padding: 0; border: 1px solid var(--white); background: transparent; cursor: pointer; }
.field--check input:checked { background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E") center / 80% no-repeat; }
.field--check label { flex: 1; font-size: var(--fs-body2); line-height: 1.5; font-weight: 400; text-transform: none; color: var(--silver); cursor: pointer; }
.field--check .field__error { flex-basis: 100%; }
.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* champ fichier : bouton + nom du fichier choisi */
.file { position: relative; display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--white-50); }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.file:focus-within { border-color: var(--white); outline: 1px solid var(--white); outline-offset: 4px; }
.file__btn { flex-shrink: 0; padding: 0.35rem 0.9rem; border: 1px solid var(--white); font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; }
.file__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: var(--fs-body2); color: var(--silver); }
.has-error .file { border-bottom: 2px solid var(--white); background: var(--dark); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 0.5rem; }
.form__actions .btn { cursor: pointer; }
.form__actions .btn[disabled] { opacity: 0.6; cursor: wait; }
.form__note { flex: 1; min-width: 14rem; font-family: var(--font-ui); font-size: var(--fs-body2); color: var(--silver); }
.form-alert { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.5rem; padding: 0.9rem 1rem; border: 1px solid var(--white); font-family: var(--font-ui); font-weight: 700; }
.form-alert::before { content: "!"; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; flex-shrink: 0; border-radius: 50%; background: var(--white); color: var(--black); font-weight: 700; }
.form-done { max-width: 40rem; padding: 2rem 0; font-family: var(--font-ui); font-size: var(--fs-sub); line-height: 1.2; letter-spacing: -0.005em; }
.form-done .btn { margin-top: 2rem; }
.form-aside { margin-top: 3rem; font-family: var(--font-ui); font-size: var(--fs-body2); color: var(--silver); }
.form-aside a { color: var(--white); border-bottom: 1px solid currentColor; margin-left: 0.4rem; }
.sec--form + .sec--contacts { padding-top: 0; }
.sec--form + .sec--contacts .contacts { margin-top: 3rem; }

@media (min-width: 600px) {
    :root { --gap: 30px; --margin: clamp(38px, calc(19.2857vw - 77.71px), 200px); }
    .tgrid { grid-template-columns: repeat(2, 1fr); }
    .form { grid-template-columns: repeat(2, 1fr); }
    .field--wide, .form__actions { grid-column: 1 / -1; }
    .press__item { grid-template-columns: 10rem 1fr; gap: 2rem; }
    .awards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .tgrid { grid-template-columns: repeat(3, 1fr); }
    .director__cols { grid-template-columns: 2fr 1fr; }
    .players--2 { grid-template-columns: repeat(2, 1fr); }
    .awards__year { grid-template-columns: 10rem 1fr; }
    .tpl-about .sec--logos .container > * { width: var(--w5); }
}

/* ---------- Pied de page ---------- */
.footer { border-top: 1px solid var(--white-20); padding: 2rem 0 5.5rem;   /* au-dessus des croix d'angle */
    font-family: var(--font-ui); font-size: var(--fs-small); line-height: 1rem; text-transform: uppercase; color: var(--silver); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.footer__link { color: var(--white); font-weight: 700; text-transform: inherit; letter-spacing: inherit; transition: opacity 0.2s; }
.footer__link:hover { opacity: 0.6; }

/* ---------- Équipe ---------- */
.member__photo { position: relative; }
.member__initials { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-ui); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.05em; color: var(--slate); }
/* sur l'About : dans la colonne de texte, 2 par ligne, mêmes codes que les contacts */
.tpl-about .sec--team { padding: 4rem 0 0; }
.tpl-about .sec--team .sec__heading { margin-bottom: 1.5rem; }   /* titre 2 de la charte */
.tpl-about .team { grid-template-columns: repeat(2, 1fr); gap: 2rem var(--gap); }
.tpl-about .member__name { font-family: var(--font-ui); font-weight: 400; text-transform: uppercase; }
.tpl-about .member__role { font-family: var(--font-ui); color: var(--silver); font-size: var(--fs-body2); line-height: 1.5; }
.tpl-about .member { opacity: 0; transform: translateY(200px); transition: transform 2s var(--expo-in-out), opacity 2s var(--expo-in-out); transition-delay: calc(var(--step-b, 3.5s) + var(--i, 0) * 0.1s); }
.tpl-about.is-entered .member { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tpl-about .member { transition-duration: 0.01s; transition-delay: 0s; } }
.team { display: grid; grid-template-columns: 1fr; gap: 2rem var(--gap); }
.member__photo { aspect-ratio: 4 / 5; background: var(--dark); overflow: hidden; margin-bottom: 1rem; filter: grayscale(1); }
.member__photo img { width: 100%; height: 100%; object-fit: cover; }
.member__name { font-weight: 700; }
.member__role { color: var(--silver); font-size: var(--fs-body2); }
.member__email { font-size: var(--fs-body2); color: var(--silver-70); }

/* ---------- CTA ---------- */
.cta__text { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.025em; line-height: 1.16; margin-bottom: 2.5rem; }

/* ---------- 404 ---------- */
.notfound { min-height: var(--vh); display: grid; place-content: center; text-align: center; padding: 0 var(--margin); gap: 1.5rem; }
.notfound__code { font-family: var(--font); font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; color: var(--slate); }
.notfound__title { font-size: var(--fs-h1); line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; }

/* ---------- Responsive (points de rupture Tailwind : lg = 1024 px) ---------- */
@media (max-width: 1023px) {
    .corners { display: none; }
}
/* Barre du haut (réglage de l'admin) : logo à gauche, aligné sur la marge du menu, et tout le menu à droite ;
   ou logo au centre comme le site d'origine (.topbar--center), les entrées de menu réparties de part et d'autre.
   Entre 1024 et 1279 px, le menu complet ne tient pas : burger, comme sur mobile. */
@media (min-width: 1024px) {
    .soundbtn { right: 3.25rem; }   /* texte aligné sur la marge du menu (4rem) */
    .topbar__logo { left: 3.5rem; }   /* + 0,5rem de marge intérieure : le logo commence à 4rem, comme le menu */
    .topbar--center .topbar__logo { left: 50%; transform: translateX(-50%); }
    .burger { right: calc(4rem - 2px); }
    .slide__title { font-size: var(--fs-slide, 4.5rem); line-height: 1; width: 75%; }
    .slide__client { font-size: var(--fs-client, 1.875rem); line-height: 1.2; width: 50%; }
    .grid { grid-template-columns: repeat(3, 1fr); }
    .suggest { grid-template-columns: repeat(2, 1fr); }
    .suggest .card__media { height: 50vh; }
    .tpl-about .prose { width: var(--w5); }
    .tpl-about .backbtn--about { display: flex; }
    .about__video { display: block; }
    .lines i:nth-child(1), .lines i:nth-child(2) { display: block; }
    .contacts { grid-template-columns: repeat(2, 1fr); width: var(--w5); }
    .tpl-about .team { width: var(--w5); }
    .poles, .team { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
    .burger { display: none; }
    .topbar__nav { display: flex; }
}

/* Écrans tactiles : zones de toucher d'au moins 44 px de haut. Les petits liens gardent leur aspect ; une zone
   invisible les agrandit, et l'espacement est porté à 44 px là où deux zones se chevaucheraient. */
@media (pointer: coarse) {
    .footer__nav { row-gap: 0; }
    .footer__link { display: inline-block; padding: 0.875rem 0; }
    .filters, .filters__group { row-gap: 1.3rem; }
    .award__links, .press__links { row-gap: 1.5rem; }
    .filters__item, .talent__links a, .award__links a, .press__links a { position: relative; }
    .filters__item::after, .talent__links a::after, .award__links a::after, .press__links a::after { content: ""; position: absolute; left: -0.5rem; right: -0.5rem; top: 50%; height: 44px; transform: translateY(-50%); }
    .contacts__col a { padding: 0.25rem 0; }   /* listes de contacts empilées : 30 px, pour garder l'aspect de la page About d'origine */
    .gridbtn::after { content: ""; position: absolute; left: -0.5rem; right: -0.5rem; top: 50%; height: 44px; transform: translateY(-50%); }
}
/* Photography : sur téléphone, un nom long passe sur deux lignes ; on resserre ses lignes et on espace les noms
   pour qu'ils ne se lisent pas à la suite (« 01 PHOTOGRAPHER 02 »). */
@media (max-width: 1023px) {
    .names__item { line-height: 1.05; }
    .names__item + .names__item { margin-top: 0.45em; }
}

/* Intertitres dans les textes (« ## Titre ») : pages légales, textes longs */
.prose .prose__h { margin: 2.5rem 0 0.75rem; font-family: var(--font-brand); font-size: var(--fs-sub); line-height: 1.2; font-weight: 500; letter-spacing: -0.005em; }
.prose .prose__h:first-child { margin-top: 0; }
.field__link { text-decoration: underline; white-space: nowrap; }

/* Bandeau cookies : sobre, en bas de l'écran, couleurs de la charte. Accepter et Refuser ont le même poids. */
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 8800; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity 0.35s var(--expo-out), transform 0.35s var(--expo-out); }
.consent.is-in { opacity: 1; transform: none; }
.consent__box { pointer-events: auto; width: 100%; max-width: 46rem; padding: 1.25rem 1.5rem; background: var(--dark); color: var(--white); border: 1px solid var(--white-20); font-family: var(--font-ui); font-size: var(--fs-body2); line-height: 1.5; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); }
.consent__title { margin-bottom: 0.4rem; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.consent__text a { color: var(--silver); text-decoration: underline; }
.consent__choices { display: grid; gap: 0.55rem; margin-top: 1rem; }
.consent__choices label { display: flex; align-items: center; gap: 0.6rem; }
.consent__choices input { width: 18px; height: 18px; accent-color: var(--white); }
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.1rem; }
.consent__link { margin-right: auto; padding: 0.6rem 0; color: var(--silver); text-decoration: underline; }
.consent__btn { min-width: 7.5rem; min-height: 44px; padding: 0.6rem 1.2rem; border: 1px solid var(--white); color: var(--white); font-weight: 700; transition: background 0.2s, color 0.2s; }
.consent__btn:hover, .consent__btn:focus-visible { background: var(--white); color: var(--black); }
.consent__actions [data-consent-custom].consent__btn { margin-right: auto; text-decoration: none; }
@media (max-width: 599px) {
    .consent { left: 0; right: 0; bottom: 0; }
    .consent__box { border-left: 0; border-right: 0; padding: 1.1rem var(--margin) 1.25rem; }
    .consent__btn { flex: 1; }
    .consent__link, .consent__actions [data-consent-custom].consent__btn { width: 100%; flex: none; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .consent { transition: none; } }

/* ---------- Audios (rubrique Music) : pochette, lecteur du site, liens d'écoute ---------- */
.sec--audio .sec__heading { margin-bottom: 1.5rem; }
.tracks { list-style: none; margin: 0; padding: 0; }
.tracks__soon { padding: 2rem 0; border-top: 1px solid var(--white-20); font-family: var(--font-ui); font-size: var(--fs-body); color: var(--silver); }
.track { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.25rem; align-items: start; padding: 1.5rem 0; border-top: 1px solid var(--white-20); }
.track__cover { position: relative; aspect-ratio: 1; background: var(--dark); overflow: hidden; }
.track__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.track__play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--black); background: rgba(0, 0, 0, 0.25); transition: background 0.2s; }
.track__play::before { content: ""; position: absolute; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--white); transition: transform 0.2s var(--expo-out); }
.track__play:hover::before, .track__play:focus-visible::before { transform: scale(1.08); }
.track__icon { position: relative; width: 1.25rem; height: 1.25rem; }
.track__icon--pause, .track.is-playing .track__icon--play { display: none; }
.track.is-playing .track__icon--pause { display: block; }
.track.is-playing .track__play { background: rgba(0, 0, 0, 0.45); }
.track__artist { font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; color: var(--silver); }
.track__title { margin-top: 0.2rem; font-size: var(--fs-sub); font-weight: 500; line-height: 1.2; letter-spacing: -0.015em; }
.track__badge { display: inline-block; vertical-align: middle; margin-left: 0.4rem; padding: 0.1rem 0.45rem; border: 1px solid var(--white-50); border-radius: 3px;
    font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--silver); }
.track__player { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; font-family: var(--font-ui); font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--silver); }
.track__time { flex: 0 0 auto; min-width: 2.6em; }
/* barre de progression : un trait blanc fin, la partie écoutée en blanc plein (--p mis à jour par site.js) */
.track__bar { flex: 1; min-width: 0; height: 1.25rem; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.track__bar::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right, var(--white) var(--p, 0%), var(--white-20) var(--p, 0%)); }
.track__bar::-moz-range-track { height: 2px; background: var(--white-20); }
.track__bar::-moz-range-progress { height: 2px; background: var(--white); }
.track__bar::-webkit-slider-thumb { -webkit-appearance: none; width: 0.75rem; height: 0.75rem; margin-top: -5px; border-radius: 50%; background: var(--white); }
.track__bar::-moz-range-thumb { width: 0.75rem; height: 0.75rem; border: 0; border-radius: 50%; background: var(--white); }
.track__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.25rem; margin-top: 1rem; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; }
.track__listen { color: var(--silver); }
.track__links a { border-bottom: 1px solid var(--white-50); }
.track__links a:hover { border-bottom-color: var(--white); }
.track__credits { margin-top: 0.75rem; font-family: var(--font-ui); font-size: var(--fs-body2); color: var(--silver); }
@media (min-width: 768px) { .track { grid-template-columns: 8rem 1fr; gap: 2rem; padding: 2rem 0; } }
[dir="rtl"] .track__badge { margin-left: 0; margin-right: 0.4rem; }
[dir="rtl"] .track__bar::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--white) var(--p, 0%), var(--white-20) var(--p, 0%)); }

/* ---------- Chinois et arabe : la charte (Satoshi, Space Grotesk, Carmen Sans) n'a pas ces écritures.
   Le latin reste en Satoshi ; les autres caractères prennent la police de l'appareil (rien à télécharger). ---------- */
:root:lang(zh) { --font: "Satoshi", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif; }
:root:lang(ar) { --font: "Satoshi", "Geeza Pro", "SF Arabic", "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif; }
:lang(zh) *, :lang(ar) * { letter-spacing: 0 !important; }   /* les approches serrées du latin cassent l'arabe (lettres liées) */
:lang(ar) .prose, :lang(ar) p { line-height: 1.75; }

/* ---------- Arabe : de droite à gauche, mise en page en miroir (logo à droite, menu à gauche…) ---------- */
[dir="rtl"] body { text-align: right; }
/* textes encore en anglais (contenus non traduits) : chaque titre ou paragraphe prend le sens de sa propre langue
   (dir="auto" posé par site.js ; « unicode-bidi: plaintext » ne convient pas : il ignore les mots découpés en <span>) */
[dir="rtl"] :is(a[href^="tel:"], a[href^="mailto:"]), [dir="rtl"] .field :is(input[type="email"], input[type="tel"]) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .field :is(input[type="email"], input[type="tel"]) { text-align: right; }
[dir="rtl"] .topbar__logo { left: auto; right: 1.25rem; }
[dir="rtl"] .topbar__nav { right: auto; left: 4rem; }
[dir="rtl"] .topbar__nav--left { left: auto; right: 4rem; }
[dir="rtl"] .topbar__follow, [dir="rtl"] .lang { margin-left: 0; margin-right: 1.25rem; }
[dir="rtl"] .lang__list { right: auto; left: 0; }
[dir="rtl"] .burger { right: auto; left: calc(2.5rem - 2px); }
[dir="rtl"] .followpanel__close { right: auto; left: 2.5rem; }
[dir="rtl"] .menu { padding: 2rem var(--margin) 2rem 5rem; transform: translateX(-100%); }
[dir="rtl"] .menu.is-in { transform: none; }
[dir="rtl"] .menu__item { transform: translateX(-100vw); }
[dir="rtl"] .menu.is-in .menu__item { transform: none; }
[dir="rtl"] .soundbtn { right: auto; left: 0.5rem; }
[dir="rtl"] .backbtn svg, [dir="rtl"] .lightbox__prev svg, [dir="rtl"] .lightbox__next svg { transform: scaleX(-1); }
[dir="rtl"] .backbtn:hover { transform: translateX(-50%) translateX(4px); }
[dir="rtl"] .backbtn--about { left: auto; right: 1rem; }
[dir="rtl"] .backbtn--about:hover { transform: translateY(-50%) translateX(4px); }
[dir="rtl"] .about__video { left: 25%; }   /* centrée sur la ligne des 25 % (translate(-50%) dans .tpl-about) */
[dir="rtl"] .gallery__caption { left: auto; right: 0; }
[dir="rtl"] .lightbox__close { right: auto; left: 2rem; }
[dir="rtl"] .lightbox__prev { left: auto; right: 1rem; }
[dir="rtl"] .lightbox__next { right: auto; left: 1rem; }
[dir="rtl"] .talent__half--prev { left: auto; right: 0; cursor: e-resize; }
[dir="rtl"] .talent__half--next { right: auto; left: 0; cursor: w-resize; }
[dir="rtl"] :is(.tgrid__empty, .form-aside) a { margin-left: 0; margin-right: 0.4rem; }
[dir="rtl"] .field select { background-position: left 0.25rem center; padding-right: 0; padding-left: 1.75rem; }
[dir="rtl"] .consent__link, [dir="rtl"] .consent__actions [data-consent-custom].consent__btn { margin-right: 0; margin-left: auto; }
.menu__langs { flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1rem; font-size: 0.6em; }   /* six langues : codes plus petits, sur une ligne */
@media (min-width: 1024px) {
    [dir="rtl"] .topbar__logo { left: auto; right: 3.5rem; }
    [dir="rtl"] .topbar--center .topbar__logo { right: auto; left: 50%; }
    [dir="rtl"] .burger { right: auto; left: calc(4rem - 2px); }
    [dir="rtl"] .followpanel__close { right: auto; left: 4rem; }
    [dir="rtl"] .soundbtn { right: auto; left: 3.25rem; }
}