/* Frame AI — feuille de style unique. Direction « salle de projection » : le film occupe l'écran,
   le texte n'arrive qu'après. Charte Pleine Image : Barlow Condensed signe et titre, Barlow lit ;
   filets, angles vifs, ni ombre ni dégradé décoratif ; sur noir, le symbole est blanc.
   Entité : Pleine Image Prod, rouge #EA1813, réservé aux actes (bouton, état actif, « + »). */

/* ---------------------------------------------------------------- Polices (auto-hébergées, SIL OFL) */
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url('fonts/barlow-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url('fonts/barlow-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url('fonts/barlow-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url('fonts/barlow-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url('fonts/barlow-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url('fonts/barlow-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-weight:200;font-display:swap;src:url('fonts/barlow-condensed-200-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-weight:200;font-display:swap;src:url('fonts/barlow-condensed-200-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-weight:300;font-display:swap;src:url('fonts/barlow-condensed-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-weight:300;font-display:swap;src:url('fonts/barlow-condensed-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-weight:400;font-display:swap;src:url('fonts/barlow-condensed-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-weight:400;font-display:swap;src:url('fonts/barlow-condensed-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-weight:500;font-display:swap;src:url('fonts/barlow-condensed-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-weight:500;font-display:swap;src:url('fonts/barlow-condensed-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url('fonts/barlow-condensed-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url('fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------- Jetons */
:root{
  --rouge:#EA1813;--rouge-vif:#EE3E3A;--rouge-clair:#F68A87;--rouge-sombre:#B51310;
  --pi-prod:#EA1813;--pi-loc:#EDC527;--pi-post:#8A5CF5;--pi-live:#3E9BE8;   /* couleurs d'entité, éclaircies pour tenir sur l'encre (texte seulement) */
  --encre:#0C0E11;--encre-2:#121519;--encre-3:#1A1E24;
  --blanc:#F5F6F7;--gris:#B3B9C2;--gris-2:#8A919C;
  --filet:rgba(255,255,255,.14);--filet-fort:rgba(255,255,255,.34);--filet-plein:rgba(255,255,255,.6);
  --fd:'Barlow Condensed','Arial Narrow',Arial,sans-serif;--fb:'Barlow',Arial,Helvetica,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--vite:.25s;--lent:1.4s;
  --gx:20px;--max:1400px;--entete:72px;
  --affiche:clamp(2.75rem,8.6vw,6rem);   /* titres de films et énoncés : Barlow Condensed ExtraLight */
  --titre:clamp(2rem,4.6vw,3.5rem);
  --etiquette:.75rem;--approche:.18em;
}
@media (min-width:768px){:root{--gx:40px;--entete:80px}}
@media (min-width:1280px){:root{--gx:56px}}

/* ---------------------------------------------------------------- Socle et surfaces du navigateur */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:#2A2F36 var(--encre);background:var(--encre)}
body{margin:0;background:var(--encre);color:var(--blanc);font:400 1.0625rem/1.6 var(--fb);-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:clip}
body.is-bloque{overflow:hidden}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--encre)}
::-webkit-scrollbar-thumb{background:#2A2F36;border:2px solid var(--encre)}
::-webkit-scrollbar-thumb:hover{background:#3A4048}
::selection{background:var(--rouge);color:#fff}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
h1,h2,h3,h4{margin:0;font-family:var(--fd);font-weight:200;line-height:.96;letter-spacing:-.01em}
p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.evitement{position:absolute;left:-999px;top:8px;z-index:100;background:var(--rouge);color:#fff;padding:.5rem 1rem;font-family:var(--fd);text-transform:uppercase;letter-spacing:.1em}
.evitement:focus{left:8px}
.visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.conteneur{max-width:var(--max);margin:0 auto;padding-inline:var(--gx)}

/* Étiquettes : la seule petite typographie du site. Barlow Medium, capitales, approche large. */
.etiquette{font-family:var(--fb);font-size:var(--etiquette);font-weight:500;letter-spacing:var(--approche);text-transform:uppercase;line-height:1.3;color:var(--gris)}
.etiquette b{font-weight:600;color:var(--blanc)}
.etiquette--ligne{display:flex;flex-wrap:wrap;gap:.25rem .75rem;align-items:baseline}
.etiquette--ligne span+span::before{content:"";display:inline-block;width:3px;height:3px;background:var(--gris-2);margin-right:.75rem;vertical-align:middle}
.chiffres{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Boutons : aplat rouge ou filet blanc, angles vifs. */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:0 1.5rem;font-family:var(--fb);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1;background:var(--rouge);color:#fff;border:1px solid var(--rouge);transition:background-color var(--vite),border-color var(--vite),color var(--vite)}
.bouton:hover{background:var(--rouge-sombre);border-color:var(--rouge-sombre)}
.bouton--filet{background:transparent;border-color:var(--filet-fort);color:var(--blanc)}
.bouton--filet:hover{background:transparent;border-color:#fff}
.lien{display:inline-flex;align-items:baseline;gap:.5rem;font-family:var(--fb);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--filet-fort);padding-bottom:.35rem;transition:border-color var(--vite),gap .4s var(--ease)}
.lien:hover{border-color:#fff;gap:.9rem}
.lien::after{content:"→";font-weight:400}

/* Le « + » du repère, utilisé en puce (charte : jamais en logo). */
.plus::before{content:"+";color:var(--rouge-vif);font-family:var(--fd);font-weight:500;margin-right:.6rem}

/* ---------------------------------------------------------------- Apparition au défilement (une seule grammaire) */
@media (prefers-reduced-motion:no-preference){
  .js [data-apparition]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
  .js [data-apparition].is-visible{opacity:1;transform:none}
  .js [data-apparition="lignes"]{opacity:1;transform:none;transition:none}
  .js [data-apparition="lignes"]>*{display:inline-block;opacity:0;transform:translateY(.6em);transition:opacity .8s var(--ease),transform 1s var(--ease)}
  .js [data-apparition="lignes"].is-visible>*{opacity:1;transform:none}
  .js [data-apparition="lignes"].is-visible>*:nth-child(2){transition-delay:.08s}
  .js [data-apparition="lignes"].is-visible>*:nth-child(3){transition-delay:.16s}
}

/* ---------------------------------------------------------------- En-tête : posé sur le film, s'opacifie en défilant */
.entete{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;height:var(--entete);padding:0 var(--gx);color:var(--blanc);transition:background-color .4s}
.entete::after{content:"";position:absolute;left:var(--gx);right:var(--gx);bottom:0;height:1px;background:var(--filet);opacity:0;transition:opacity .4s}
.entete.is-plein{background:rgba(12,14,17,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.entete.is-plein::after{opacity:1}
.marque{display:inline-flex;align-items:center;gap:.8rem;white-space:nowrap}
.marque__symbole{width:38px;height:auto;color:#fff;flex:none}
.marque__nom{font-family:var(--fd);font-size:1.3rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.marque__nom b{font-weight:600;color:var(--rouge-vif)}
.marque__par{display:none;font-family:var(--fb);font-size:.6875rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);line-height:1;padding-left:.8rem;border-left:1px solid var(--filet-fort)}
@media (min-width:1024px){.marque__par{display:inline}}
.nav{display:none;align-items:baseline;gap:2rem}
.nav a{font-family:var(--fb);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);padding-bottom:.35rem;background:linear-gradient(#fff,#fff) no-repeat 0 100%/0 1px;transition:background-size .5s var(--ease),color var(--vite)}
.nav a:hover,.nav a[aria-current]{color:#fff;background-size:100% 1px}
.langues{display:none;align-items:baseline;gap:.5rem;font-family:var(--fb);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.langues a{color:var(--gris);padding-bottom:.3rem;border-bottom:1px solid transparent}
.langues a:hover{color:#fff}
.langues a[aria-current]{color:#fff;border-color:#fff}
.langues span{color:var(--filet-fort)}
.entete__droite{display:flex;align-items:center;gap:1.5rem}
.entete .bouton{min-height:42px;padding:0 1.1rem}
.burger{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-family:var(--fb);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.burger i{display:block;width:22px;height:1px;background:currentColor}
.burger i+i{margin-top:6px}
@media (min-width:1100px){.nav,.langues{display:flex}.burger{display:none}}
@media (max-width:480px){.entete .bouton{display:none}}

/* Menu plein écran */
.menu{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;padding:0 var(--gx) var(--gx);background:var(--encre);color:var(--blanc);overflow:auto}
.menu[hidden]{display:none}
.menu__tete{display:flex;align-items:center;justify-content:space-between;height:var(--entete)}
.menu__fermer{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;font-family:var(--fb);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.menu__liens{margin-top:1.5rem}
.menu__liens li{border-top:1px solid var(--filet)}
.menu__liens a{display:flex;align-items:baseline;justify-content:space-between;padding:1.1rem 0;font-family:var(--fd);font-size:2.75rem;font-weight:200;transition:transform .4s var(--ease)}
.menu__liens a:hover{transform:translateX(.5rem)}
.menu__liens a small{font-family:var(--fb);font-size:var(--etiquette);font-weight:500;letter-spacing:var(--approche);color:var(--gris-2)}
.menu .bouton{align-self:flex-start;margin-top:1.5rem}
.menu__pied{margin-top:auto;padding-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;justify-content:space-between;font-size:.9375rem;color:var(--gris)}
.menu__pied .langues{display:flex}

/* ---------------------------------------------------------------- Boucles vidéo (socle commun) */
.boucle{position:relative;overflow:hidden;background:var(--encre-2);aspect-ratio:16/9}
.boucle__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.boucle video[hidden]{display:none}

/* ---------------------------------------------------------------- Ouverture : le showreel occupe l'écran */
.reel{position:relative;height:100svh;min-height:600px;max-height:1100px;overflow:hidden;background:var(--encre)}
.reel .boucle{position:absolute;inset:0;aspect-ratio:auto}
@media (min-width:900px){.reel .boucle__media{object-position:66% 40%}}  /* le sujet à droite, le titre à gauche */
.reel__voile{position:absolute;inset:0;background:linear-gradient(rgba(12,14,17,.55) 0%,rgba(12,14,17,.06) 28%,rgba(12,14,17,.18) 52%,rgba(12,14,17,.62) 74%,rgba(12,14,17,.92) 100%)}
.reel__contenu{position:absolute;left:var(--gx);right:var(--gx);bottom:calc(var(--gx) + 28px);display:grid;gap:1.5rem;align-items:end}
@media (min-width:900px){.reel__contenu{grid-template-columns:1fr auto;gap:3rem}}
.reel h1{font-size:var(--affiche);max-width:13ch;text-wrap:balance;color:#fff;text-shadow:0 1px 28px rgba(8,10,13,.5)}
.reel h1 em{font-style:normal;color:var(--rouge-clair)}
.reel__sous{margin-top:1.25rem;max-width:46ch;color:rgba(255,255,255,.8);font-size:1.0625rem}
.reel__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.reel__etat{display:flex;flex-direction:column;gap:.75rem;align-items:flex-start}
@media (min-width:900px){.reel__etat{align-items:flex-end;text-align:right}}
.reel__lecture{display:inline-flex;align-items:center;gap:.6rem;color:#fff}
.reel__lecture::before{content:"";width:8px;height:8px;background:var(--rouge-vif);animation:rec 1.6s ease-in-out infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.35}}
.reel__defiler{display:inline-flex;align-items:center;gap:.75rem;color:var(--gris)}
.reel__defiler i{display:block;width:1px;height:36px;background:var(--filet-plein);transform-origin:top;animation:defiler 2.2s var(--ease) infinite}
@keyframes defiler{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.reel__defiler i,.reel__lecture::before{animation:none}}

/* ---------------------------------------------------------------- Films : un bandeau plein cadre par film */
.films{display:grid;gap:2px;margin-top:2px}
.bandeau{position:relative;display:block;height:clamp(420px,82vh,900px);overflow:hidden;background:var(--encre-2);color:#fff}
.bandeau .boucle{position:absolute;inset:0;aspect-ratio:auto}
.bandeau .boucle__media{transition:transform var(--lent) var(--ease)}
.bandeau:hover .boucle__media{transform:scale(1.03)}
.bandeau__voile{position:absolute;inset:0;background:linear-gradient(rgba(12,14,17,.5) 0%,rgba(12,14,17,0) 28%,rgba(12,14,17,0) 55%,rgba(12,14,17,.82) 100%);transition:opacity .6s}
.bandeau:hover .bandeau__voile{opacity:.85}
.bandeau__haut{position:absolute;left:var(--gx);right:var(--gx);top:1.5rem;display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.bandeau__bas{position:absolute;left:var(--gx);right:var(--gx);bottom:1.75rem;display:grid;gap:1rem;align-items:end}
@media (min-width:900px){.bandeau__bas{grid-template-columns:1fr auto}}
.bandeau__titre{font-size:var(--affiche);max-width:11ch;text-wrap:balance;text-shadow:0 1px 28px rgba(8,10,13,.5)}
.bandeau__accroche{margin-top:.75rem;max-width:40ch;color:rgba(255,255,255,.82);font-family:var(--fd);font-weight:300;font-size:1.375rem;line-height:1.2}
.bandeau__lire{display:inline-flex;align-items:center;gap:.75rem;font-family:var(--fb);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:.9rem 1.2rem .9rem 1rem;border:1px solid var(--filet-plein);transition:background-color var(--vite),border-color var(--vite)}
.bandeau__lire svg{width:12px;height:12px;fill:currentColor}
.bandeau:hover .bandeau__lire{background:var(--rouge);border-color:var(--rouge)}
.bandeau:focus-visible{outline-offset:-4px}
.pastille{display:inline-flex;align-items:center;padding:.4rem .6rem;font-family:var(--fb);font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1;border:1px solid var(--filet-plein);color:#fff}
.pastille--ia{background:var(--rouge);border-color:var(--rouge)}
.pastille--hybride{background:#fff;border-color:#fff;color:var(--encre)}
.pastilles{display:flex;flex-wrap:wrap;gap:.4rem}

/* Index des films : fixé à droite pendant la traversée des bandeaux (grand écran, pointeur) */
.index{position:fixed;right:var(--gx);top:50%;transform:translateY(-50%);z-index:20;display:none;flex-direction:column;align-items:flex-end;gap:.9rem;opacity:0;pointer-events:none;transition:opacity .4s}
@media (min-width:1100px) and (hover:hover){.index{display:flex}}
.index.is-visible{opacity:1;pointer-events:auto}
.index a{display:flex;align-items:center;gap:.6rem;font-family:var(--fb);font-size:var(--etiquette);font-weight:500;letter-spacing:var(--approche);text-transform:uppercase;color:rgba(255,255,255,.55);transition:color var(--vite)}
.index a em{font-style:normal;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .5s var(--ease),opacity .3s}
.index a:hover,.index a.is-courant{color:#fff}
.index a:hover em,.index a.is-courant em{max-width:14ch;opacity:1}
.index a::after{content:"";width:6px;height:6px;background:rgba(255,255,255,.3);transition:background-color var(--vite)}
.index a.is-courant::after{background:var(--rouge-vif)}

/* ---------------------------------------------------------------- Énoncé : une respiration typographique entre deux films */
.enonce{padding:clamp(5rem,12vh,9rem) 0}
.enonce h2{font-size:var(--affiche);max-width:16ch;text-wrap:balance}
.enonce h2 em{font-style:normal;color:var(--rouge-clair)}
.enonce p{max-width:58ch;color:var(--gris);font-size:1.125rem}
.enonce__grille{display:grid;gap:2rem}
@media (min-width:900px){.enonce__grille{grid-template-columns:1.2fr .8fr;align-items:end;gap:4rem}}

/* ---------------------------------------------------------------- Sections de texte (méthode, duos, groupe) */
.section{padding:clamp(4rem,10vh,8rem) 0}
.section__tete{display:grid;gap:1.25rem;padding-bottom:1.5rem;border-bottom:1px solid var(--filet-fort)}
@media (min-width:900px){.section__tete{grid-template-columns:1fr 1fr;align-items:end;gap:3rem}}
.section__tete h2{font-size:var(--titre);max-width:16ch;text-wrap:balance}
.section__tete p{color:var(--gris);max-width:52ch;font-size:1.0625rem}
.colonnes{display:grid;gap:2.5rem;margin-top:2.5rem}
@media (min-width:900px){.colonnes{grid-template-columns:1fr 1fr;gap:0}.colonnes>*{padding-right:3rem}.colonnes>*+*{padding-left:3rem;border-left:1px solid var(--filet)}}
.colonnes h3{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:300}
.colonnes .etiquette{margin-top:.75rem}
.colonnes p:not(.etiquette){margin-top:1.1rem;color:var(--gris);max-width:46ch;font-size:1rem}
.colonnes .lien{margin-top:1.5rem}

/* Le groupe : quatre entités, monogrammes blancs sur noir, couleur sur le nom seulement */
.groupe{display:grid;margin-top:2.5rem;border-top:1px solid var(--filet)}
@media (min-width:700px){.groupe{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.groupe{grid-template-columns:repeat(4,1fr)}}
.groupe__entite{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.25rem;align-content:start;padding:1.75rem 1.5rem 1.75rem 0;border-bottom:1px solid var(--filet);transition:background-color var(--vite)}
@media (min-width:700px){.groupe__entite{padding-right:2rem}.groupe__entite+.groupe__entite{padding-left:1.5rem}}
.groupe__entite:hover{background:var(--encre-2)}
.groupe__entite svg{width:56px;height:auto;color:#fff;grid-row:span 3}
.groupe__entite b{font-family:var(--fd);font-size:1.25rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1.05}
.groupe__entite b em{font-style:normal;font-weight:600}
.groupe__entite span{font-size:.9375rem;color:var(--gris)}
.groupe__entite small{font-family:var(--fb);font-size:var(--etiquette);font-weight:500;letter-spacing:var(--approche);text-transform:uppercase;color:var(--gris-2)}

/* ---------------------------------------------------------------- Lab : une pellicule qui défile à l'horizontale */
.lab{padding:clamp(4rem,10vh,8rem) 0 0}
.pellicule{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2rem var(--gx) 2.5rem;scrollbar-width:thin}
.pellicule::-webkit-scrollbar{height:6px}
.pellicule figure{flex:0 0 min(76vw,520px);scroll-snap-align:start}
.pellicule figcaption{padding-top:.75rem}
.pellicule:focus-visible{outline-offset:-3px}
.pellicule__fleches{display:none;justify-content:flex-end;gap:2px;padding-bottom:1rem}
@media (hover:hover){.pellicule__fleches{display:flex}}
.pellicule__fleche{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--filet-fort);font-family:var(--fd);font-size:1.25rem;font-weight:300;transition:border-color var(--vite),background-color var(--vite)}
.pellicule__fleche:hover{border-color:#fff;background:var(--encre-2)}
.pellicule__aide{display:none;align-items:center;gap:.75rem;color:var(--gris-2);margin-left:.5rem}
.pellicule__aide i{width:40px;height:1px;background:var(--filet-fort)}
@media (hover:hover){.pellicule__aide{display:inline-flex}}

/* ---------------------------------------------------------------- Clôture : l'adresse en très grand */
.fin{padding:clamp(5rem,14vh,10rem) 0 clamp(3rem,8vh,5rem);border-top:1px solid var(--filet)}
.fin h2{font-size:var(--titre);max-width:18ch;color:var(--gris)}
.fin__adresse{display:block;margin-top:1.25rem;font-family:var(--fd);font-weight:200;font-size:clamp(2.25rem,8vw,6rem);line-height:1;letter-spacing:-.01em;color:#fff;transition:color var(--vite)}
.fin__adresse:hover{color:var(--rouge-clair)}
.fin__ligne{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:baseline}
.fin__ligne a{color:var(--gris);border-bottom:1px solid var(--filet-fort);transition:color var(--vite),border-color var(--vite)}
.fin__ligne a:hover{color:#fff;border-color:#fff}

/* ---------------------------------------------------------------- Pied */
.pied{padding:2.5rem 0 1.5rem;border-top:1px solid var(--filet)}
.pied__grille{display:grid;gap:2rem}
@media (min-width:768px){.pied__grille{grid-template-columns:auto 1fr 1fr 1fr;gap:3rem}}
.pied__logo img{width:96px;height:auto}
.pied h4{font-family:var(--fb);font-size:var(--etiquette);font-weight:500;letter-spacing:var(--approche);text-transform:uppercase;color:var(--gris-2);margin-bottom:.9rem}
.pied ul{display:grid;gap:.45rem;font-size:.9375rem}
.pied ul a{color:var(--gris);transition:color var(--vite)}
.pied ul a:hover{color:#fff}
.pied__bas{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--filet);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem;font-size:.875rem;color:var(--gris-2)}
.pied__bas span{display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline}
.pied__bas a:hover{color:#fff}

/* ---------------------------------------------------------------- Fiche film */
main.interieur{padding-top:var(--entete)}
.lecteur{position:relative;background:#000;overflow:hidden;aspect-ratio:16/9;max-height:min(88vh,1000px);margin:0 auto}
/* Petits écrans : le lecteur-affiche prend de la hauteur pour loger titre et métadonnées ; en lecture, retour au 16/9. */
@media (max-width:899px){.lecteur--affiche:not(.is-lecture){aspect-ratio:auto;height:min(74svh,640px)}}
.lecteur.is-lecture{aspect-ratio:16/9;height:auto;max-height:none}
@media (max-width:899px){.lecteur__bas{bottom:5.5rem}.lecteur__lire,.lecteur__indispo{left:var(--gx);right:var(--gx);bottom:1.25rem;justify-content:center}}
.lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lecteur .boucle{position:absolute;inset:0;aspect-ratio:auto}
.lecteur .boucle__media{transition:transform var(--lent) var(--ease)}
.lecteur:has(.lecteur__declencheur:hover) .boucle__media{transform:scale(1.02)}
.lecteur__voile{position:absolute;inset:0;background:linear-gradient(rgba(12,14,17,.35) 0%,rgba(12,14,17,0) 30%,rgba(12,14,17,0) 55%,rgba(12,14,17,.85) 100%);pointer-events:none}
.lecteur__tete{position:absolute;left:var(--gx);right:var(--gx);top:1.5rem;display:flex;justify-content:space-between;gap:1rem;align-items:baseline;pointer-events:none}
.lecteur__bas{position:absolute;left:var(--gx);right:var(--gx);bottom:1.75rem;display:grid;gap:1.25rem;align-items:end;pointer-events:none}
@media (min-width:900px){.lecteur__bas{grid-template-columns:1fr auto}}
.lecteur__bas h1{font-size:var(--affiche);max-width:12ch;text-wrap:balance;color:#fff;text-shadow:0 1px 28px rgba(8,10,13,.5)}
.lecteur__bas h1 em{font-style:normal;color:var(--rouge-clair)}
.lecteur__declencheur{position:absolute;inset:0;width:100%;cursor:pointer}
.lecteur__declencheur:focus-visible{outline-offset:-4px}
.lecteur__lire{position:absolute;right:var(--gx);bottom:1.75rem;display:inline-flex;align-items:center;gap:.75rem;padding:.95rem 1.25rem .95rem 1rem;background:var(--rouge);color:#fff;font-family:var(--fb);font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;pointer-events:none;transition:background-color var(--vite)}
.lecteur__lire svg{width:12px;height:12px;fill:currentColor}
.lecteur:has(.lecteur__declencheur:hover) .lecteur__lire{background:var(--rouge-sombre)}
.lecteur__indispo{position:absolute;right:var(--gx);bottom:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1rem;border:1px solid var(--filet-plein);font-family:var(--fb);font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;transition:background-color var(--vite),border-color var(--vite)}
.lecteur__indispo:hover{background:var(--rouge);border-color:var(--rouge)}
.fiche__retour{padding-top:2rem}
.lien--retour::after{content:none}
.lien--retour::before{content:"←";font-weight:400}
.fiche__corps{display:grid;gap:3rem;padding:clamp(2.5rem,6vh,4.5rem) 0 clamp(3.5rem,8vh,6rem)}
@media (min-width:900px){.fiche__corps{grid-template-columns:7fr 5fr;gap:5rem}}
.fiche__accroche{font-family:var(--fd);font-weight:200;font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.05;text-wrap:balance}
.fiche__desc{margin-top:1.5rem;color:var(--gris);font-size:1.125rem;max-width:58ch}
.fiche__fait{margin-top:1.5rem}
.fiche__points h2,.fiche__credits h2{font-family:var(--fb);font-size:var(--etiquette);font-weight:500;letter-spacing:var(--approche);text-transform:uppercase;color:var(--gris-2);padding-bottom:1rem;border-bottom:1px solid var(--filet-fort)}
.fiche__points ol{margin-top:1.25rem;display:grid;gap:1.1rem;counter-reset:pt}
.fiche__points li{display:grid;grid-template-columns:2.75rem 1fr;gap:.5rem;font-size:1rem;align-items:baseline}
.fiche__points li::before{counter-increment:pt;content:counter(pt,decimal-leading-zero);font-family:var(--fd);font-weight:200;font-size:1.75rem;color:var(--rouge-clair);line-height:1;font-variant-numeric:tabular-nums}
.fiche__credits{margin-top:2.5rem}
.fiche__credits dl{margin-top:1.25rem;display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.5rem;font-size:.9375rem}
.fiche__credits dt{font-family:var(--fb);font-size:var(--etiquette);font-weight:500;letter-spacing:var(--approche);text-transform:uppercase;color:var(--gris-2);padding-top:.2rem}
.fiche__credits a{border-bottom:1px solid var(--filet-fort);transition:border-color var(--vite)}
.fiche__credits a:hover{border-color:#fff}
.fiche__second{padding-bottom:clamp(3.5rem,8vh,6rem)}
.fiche__second h2{font-size:var(--titre);font-weight:200}
.fiche__second>p{color:var(--gris);margin-top:.75rem;max-width:58ch}
.fiche__second .lecteur{margin-top:1.75rem}
.tuiles{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:1.75rem}
@media (min-width:768px){.tuiles{grid-template-columns:repeat(3,1fr)}.tuiles--4{grid-template-columns:repeat(4,1fr)}}
.tuiles figcaption{padding-top:.7rem}
.images{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:1.75rem}
@media (min-width:768px){.images{grid-template-columns:repeat(3,1fr)}}
.images button{position:relative;aspect-ratio:1.975;overflow:hidden;background:var(--encre-3);cursor:zoom-in}
.images img{width:100%;height:100%;object-fit:cover;transition:transform var(--lent) var(--ease)}
.images button:hover img{transform:scale(1.03)}
.voisins{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:2px}
.voisins .bandeau{height:clamp(240px,44vh,520px)}
.voisins .bandeau__titre{font-size:clamp(1.75rem,3.6vw,3rem)}
.voisins .bandeau__bas{grid-template-columns:1fr}
@media (max-width:600px){.voisins{grid-template-columns:1fr}}

/* Visionneuse */
.visionneuse{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(12,14,17,.96)}
.visionneuse[hidden]{display:none}
.visionneuse img{max-width:min(96vw,1600px);max-height:92vh;width:auto;height:auto}
.visionneuse button{position:absolute;color:#fff;font-family:var(--fd);font-size:1.5rem;font-weight:300;padding:.5rem 1rem;min-width:44px;min-height:44px}
.visionneuse__fermer{top:12px;right:12px}
.visionneuse__nav{top:50%;transform:translateY(-50%)}
.visionneuse__nav--prec{left:8px}
.visionneuse__nav--suiv{right:8px}
.visionneuse__compteur{position:absolute;left:16px;bottom:14px;font-family:var(--fb);font-size:var(--etiquette);font-weight:500;letter-spacing:var(--approche);color:var(--gris)}

/* ---------------------------------------------------------------- Pages de texte (contact, mentions, 404) */
.texte{padding:clamp(3rem,8vh,6rem) 0 clamp(4rem,10vh,8rem)}
.texte h1{font-size:var(--affiche);max-width:14ch;text-wrap:balance}
.texte h1 em{font-style:normal;color:var(--rouge-clair)}
.texte__chapeau{margin-top:1.75rem;max-width:60ch;color:var(--gris);font-size:1.125rem}
.texte .fin__adresse{margin-top:2.5rem}
.texte__corps{margin-top:2.5rem;max-width:66ch;display:grid;gap:1rem;color:var(--gris)}
.texte__corps a{color:#fff;border-bottom:1px solid var(--filet-fort);transition:border-color var(--vite)}
.texte__corps a:hover{border-color:#fff}
.texte__corps h2{font-family:var(--fb);font-size:var(--etiquette);font-weight:500;letter-spacing:var(--approche);text-transform:uppercase;color:var(--gris-2);margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--filet)}
.texte__corps h2:first-child{margin-top:0;padding-top:0;border-top:0}
.texte__corps dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.5rem;font-size:.9375rem}
.texte__corps dt{font-weight:500;color:#fff}
.contact__adresse{margin-top:3rem;padding-top:1.75rem;border-top:1px solid var(--filet-fort);display:grid;gap:2rem}
@media (min-width:768px){.contact__adresse{grid-template-columns:1fr 1fr}}
.contact__adresse p{margin-top:.9rem;color:var(--gris);font-size:.9375rem}
.contact__adresse ul{margin-top:.9rem;display:grid;gap:.45rem;font-size:.9375rem}
.contact__adresse a{border-bottom:1px solid var(--filet-fort);transition:border-color var(--vite)}
.contact__adresse a:hover{border-color:#fff}
.erreur{min-height:60vh;display:grid;place-content:center;text-align:center;gap:1.5rem;padding:clamp(4rem,10vh,8rem) var(--gx)}
.erreur h1{font-size:var(--affiche)}
.erreur p{display:flex;gap:2rem;justify-content:center}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto}}