/* La Lanterne du Futur — thème « salle obscure ». Toutes les valeurs viennent de tokens.css. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--f-texte);font-size:var(--t-texte);line-height:var(--interligne);overflow-x:hidden}
img,picture,video,svg{display:block;max-width:100%;height:auto}
a{color:var(--phosphore);text-decoration-thickness:.08em;text-underline-offset:.2em}
a:hover{color:var(--encre)}
:focus-visible{outline:3px solid var(--phosphore);outline-offset:3px}
::selection{background:var(--phosphore);color:var(--sur-accent)}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0 0 var(--esp-2);text-wrap:balance}
h1{font-size:var(--t-1)}
h2{font-size:var(--t-2)}
h3{font-size:var(--t-3);letter-spacing:-.01em}
p{margin:0 0 var(--esp-2)}
.evitement{position:absolute;left:-999px;top:0;background:var(--phosphore);color:var(--sur-accent);padding:.6rem 1rem;z-index:50}
.evitement:focus{left:var(--marge)}
.conteneur{width:100%;max-width:var(--large);margin-inline:auto;padding-inline:var(--marge)}
.etroit{max-width:calc(var(--etroit) + 2 * var(--marge))}
.vide{color:var(--encre-2)}

/* ---------- En-tête : barre fine, posée sur le héros à l'accueil ---------- */
.entete{position:relative;z-index:20;background:var(--fond)}
.page-accueil .entete{position:absolute;inset:0 0 auto 0;background:transparent}
.entete-in{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);min-height:4.25rem}
.marque{display:block;flex:0 0 auto}
.marque img{width:auto;height:46px}
.entete-lien{font-family:var(--f-titre);font-size:.85rem;font-weight:500;color:var(--encre);text-decoration:none;padding:.55rem 1.1rem;border-radius:var(--rayon-bouton);background:var(--surface-2);transition:background var(--duree) var(--courbe),color var(--duree) var(--courbe)}
.entete-lien:hover{background:var(--phosphore);color:var(--sur-accent)}

/* ---------- Navigation en bande de pellicule ---------- */
.pellicule{position:relative;z-index:15;background:var(--surface);padding:12px 0}
.pellicule::before,.pellicule::after{content:"";position:absolute;left:0;right:0;height:6px;background-image:repeating-linear-gradient(90deg,var(--fond) 0 10px,transparent 10px 22px);opacity:.9}
.pellicule::before{top:3px}.pellicule::after{bottom:3px}
.pellicule ul{list-style:none;margin:0 auto;padding:0 var(--marge);max-width:var(--large);display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.pellicule ul::-webkit-scrollbar{display:none}
.pellicule li{flex:1 0 auto;scroll-snap-align:start}
.pellicule a{display:block;text-align:center;white-space:nowrap;padding:.7rem 1.1rem;background:var(--surface-2);color:var(--encre);text-decoration:none;font-weight:700;font-size:var(--t-petit);transition:background var(--duree) var(--courbe),color var(--duree) var(--courbe)}
.pellicule a:hover{background:var(--surface-3)}
.pellicule a[aria-current]{background:var(--phosphore);color:var(--sur-accent)}
.page-accueil .entete .pellicule{display:none}
.pellicule li:not(:has(a)){padding:.7rem 1.1rem;background:var(--surface-2);color:var(--encre-2);font-weight:700;font-size:var(--t-petit);text-align:center;white-space:nowrap}

/* ---------- Héros d'accueil : la salle ---------- */
.salle{position:relative;isolation:isolate;min-height:min(88vh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--surface)}
.salle-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.salle-media picture,.salle-media .media-accueil{width:100%;height:100%}
.salle-media img,.salle-media video{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.salle::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,13,18,.55) 0,rgba(14,13,18,0) 22%,rgba(14,13,18,0) 45%,rgba(14,13,18,.92) 100%)}
.poussiere{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.poussiere i{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFE9C7;opacity:0}
.faisceau{position:absolute;inset:0;z-index:-1;pointer-events:none;background:#FFDDA8;opacity:0;mix-blend-mode:soft-light}
.salle-texte{padding-block:7rem var(--esp-5);width:100%}
.salle h1{font-size:var(--t-geant);max-width:19ch;margin-bottom:var(--esp-3);line-height:.98;letter-spacing:-.035em}
.salle .chapo{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);max-width:46ch;margin-bottom:var(--esp-4)}
.bouton{display:inline-block;font-family:var(--f-titre);font-weight:600;font-size:1rem;padding:.95rem 1.6rem;border-radius:var(--rayon-bouton);background:var(--phosphore);color:var(--sur-accent);text-decoration:none;transition:transform .2s var(--courbe),background .2s var(--courbe)}
.bouton:hover{background:var(--encre);color:var(--sur-accent)}
.bouton:active{transform:scale(.97)}
.salle-actions{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-4);align-items:center}
.salle-actions .discret{color:var(--encre);font-weight:700}

/* ---------- Sections ---------- */
.section{padding-block:var(--esp-6) 0}
.section:last-child{padding-bottom:var(--esp-6)}
.section-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--esp-2);margin-bottom:var(--esp-4)}
.section-titre{font-size:var(--t-1);margin:0;max-width:20ch}
.lien-fort{font-weight:700}

/* Questions de spectateurs (accès direct) */
.affiche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--esp-5);align-items:start}
.affiche-intro p{color:var(--encre)}
.questions{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.questions a{display:flex;justify-content:space-between;gap:var(--esp-2);align-items:center;padding:1.1rem 1.25rem;background:var(--surface);color:var(--encre);text-decoration:none;font-family:var(--f-titre);font-size:clamp(1rem,.95rem + .3vw,1.2rem);font-weight:500;line-height:1.25;border-left:4px solid transparent;transition:border-color .25s var(--courbe),background .25s var(--courbe),transform .25s var(--courbe)}
.questions a::after{content:"→";color:var(--phosphore);flex:0 0 auto;transition:transform .25s var(--courbe)}
.questions a:hover{border-left-color:var(--phosphore);background:var(--surface-2)}
.questions a:hover::after{transform:translateX(4px)}

/* Programme : les six bobines, en bande */
.bobines{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.bobine{position:relative;display:flex;flex-direction:column;height:100%;background:var(--surface);color:var(--encre);text-decoration:none;transition:background .25s var(--courbe)}
.bobine-img{aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
.bobine-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--courbe)}
.bobine:hover .bobine-img img{transform:scale(1.04)}
.bobine-texte{padding:1.25rem 1.25rem 1.5rem;border-top:4px solid var(--surface-3);transition:border-color .25s var(--courbe);flex:1}
.bobine:hover .bobine-texte{border-top-color:var(--phosphore)}
.bobine-nom{display:block;font-family:var(--f-titre);font-weight:600;font-size:var(--t-3);margin-bottom:.35rem}
.bobine-acc{display:block;color:var(--encre-2);font-size:var(--t-petit)}
.bobine-nb{display:block;margin-top:.6rem;color:var(--phosphore);font-weight:700;font-size:var(--t-petit)}

/* Origines : champ de couleur velours */
.origines{background:var(--velours);color:var(--sur-accent);margin-top:var(--esp-6);padding-block:var(--esp-5)}
.origines a{color:var(--sur-accent)}
.origines-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--esp-5);align-items:start}
.origines h2{font-size:var(--t-1)}
.origines .liste-films{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--esp-4)}
.origines .liste-films li{break-inside:avoid;padding:.55rem 0;font-weight:700}
.origines .liste-films span{display:block;font-weight:400}

/* Règle + texte d'accueil */
.regle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--esp-5)}
.regle-carte{background:var(--surface);padding:var(--esp-4)}
.regle-carte h2{font-size:var(--t-2)}

/* ---------- Cartes : sans ombre, liseré vert ---------- */
.grille-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--esp-4) var(--esp-3)}
.carte{position:relative;display:flex;flex-direction:column;background:transparent}
.carte-img{aspect-ratio:16/9;background:var(--surface);overflow:hidden;margin-bottom:var(--esp-2);border-bottom:4px solid var(--surface-3);transition:border-color .25s var(--courbe)}
.carte-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--courbe)}
.carte:hover .carte-img{border-bottom-color:var(--phosphore)}
.carte:hover .carte-img img{transform:scale(1.04)}
.carte-sans-img{display:flex;align-items:flex-end;padding:1rem;color:var(--encre-2)}
.carte-meta{margin:0 0 .4rem;color:var(--encre-2);font-size:var(--t-petit)}
.carte-meta b{color:var(--velours);font-weight:700}
.carte h3{font-size:1.15rem;line-height:1.25;margin-bottom:.5rem}
.carte h3 a{color:var(--encre);text-decoration:none}
.carte h3 a::after{content:"";position:absolute;inset:0}
.carte:hover h3 a{color:var(--phosphore)}
.carte-desc{color:var(--encre-2);font-size:var(--t-petit);margin:0}
/* À l'accueil, la première séance occupe toute la largeur */
.une .carte:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--esp-4);align-items:end}
.une .carte:first-child .carte-img{margin:0}
.une .carte:first-child h3{font-size:var(--t-2)}
.une .carte:first-child .carte-desc{font-size:var(--t-texte);color:var(--encre)}

/* ---------- Héros des pages intérieures ---------- */
.ariane ol{list-style:none;margin:0 0 var(--esp-3);padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem;font-size:var(--t-petit);color:var(--encre-2)}
.ariane li+li::before{content:"/";margin-right:.5rem;color:var(--surface-3)}
.ariane a{color:var(--encre-2)}
.ariane a:hover{color:var(--phosphore)}
.hero{padding-top:var(--esp-5)}
.hero-texte{max-width:52rem}
.hero h1{margin-bottom:var(--esp-3)}
.surtitre{margin:0 0 var(--esp-2);font-weight:700;color:var(--velours)}
.surtitre a{color:var(--velours);text-decoration:none}
.surtitre a:hover{text-decoration:underline}
.chapo{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);max-width:48ch}
.hero-img{margin-top:var(--esp-4);background:var(--surface)}
.hero-img img{width:100%;aspect-ratio:21/9;object-fit:cover}
.meta-seance{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:var(--esp-3) 0 0;font-size:var(--t-petit);color:var(--encre-2)}
.meta-seance div{display:flex;gap:.4rem}
.meta-seance dt{font-weight:700;color:var(--encre)}
.meta-seance dd{margin:0}

/* Héros de rubrique : écran large, titre posé dessous en grand */
.ecran{position:relative;background:var(--surface);overflow:hidden}
.ecran img{width:100%;aspect-ratio:21/8;object-fit:cover}
.hero-rubrique{padding-top:var(--esp-4)}
.hero-rubrique .tete-rubrique{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--esp-4);align-items:end;margin-top:var(--esp-4)}
.hero-rubrique h1{font-size:var(--t-geant);margin:0;line-height:.98;letter-spacing:-.035em}
.hero-rubrique .chapo{margin:0}

/* ---------- Corps d'article ---------- */
.corps{padding-block:var(--esp-5) 0}
.article-grille{padding-block:var(--esp-5) 0}
.prose{max-width:var(--etroit);margin-inline:auto}
.prose>*{max-width:var(--mesure)}
.prose h2{font-size:var(--t-2);margin-top:var(--esp-5);scroll-margin-top:1.5rem}
.prose h3{margin-top:var(--esp-4)}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 var(--esp-3)}
.prose li{margin-bottom:.4rem}
.prose li::marker{color:var(--phosphore)}
.prose blockquote{margin:var(--esp-4) 0;padding:0 0 0 var(--esp-3);border-left:4px solid var(--velours);font-size:1.2rem}
.prose table{width:100%;border-collapse:collapse;margin:var(--esp-3) 0 var(--esp-4);font-size:var(--t-petit);display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:.7rem .8rem;vertical-align:top}
.prose thead th{background:var(--surface-2);font-weight:700}
.prose tbody tr:nth-child(odd){background:var(--surface)}
.prose strong{color:var(--encre)}
.prose hr{border:0;height:4px;background:var(--surface-2);margin:var(--esp-5) 0}
.prose code{font-size:.9em;background:var(--surface-2);padding:.1em .35em}
.fin-revelee{background:var(--velours);color:var(--sur-accent);padding:.9rem 1.2rem;font-weight:700}
.fin-revelee strong{color:var(--sur-accent)}
.prose-centre{text-align:left}

/* Résumé « En trois plans » : trois cases de pellicule */
.resume{background:var(--surface);padding:var(--esp-3) var(--esp-3) var(--esp-2);margin:0 0 var(--esp-4);max-width:none!important}
.resume-titre{font-family:var(--f-titre);font-weight:600;font-size:1.05rem;color:var(--phosphore);margin-bottom:var(--esp-2)}
.resume ul{list-style:none;margin:0;padding:0;counter-reset:plan}
.resume li{position:relative;padding:0 0 var(--esp-2) 3rem;margin:0}
.resume li::before{counter-increment:plan;content:"";position:absolute;left:0;top:.2rem;width:2rem;height:1.35rem;background:var(--surface-3);border-left:4px solid var(--phosphore)}

/* Sommaire « Séquences » */
.sommaire{margin:0 0 var(--esp-4);padding:var(--esp-3);background:var(--surface-2);max-width:none!important}
.sommaire-titre{font-family:var(--f-titre);font-weight:600;font-size:1.05rem;margin-bottom:var(--esp-2)}
.sommaire ol{margin:0;padding-left:1.4rem;columns:2;column-gap:var(--esp-4)}
.sommaire li{break-inside:avoid}
.sommaire a{color:var(--encre)}
.sommaire a:hover{color:var(--phosphore)}

/* Encadré « Hors-champ » */
.encadre{margin:var(--esp-4) 0;padding:var(--esp-3);background:var(--surface);border-left:6px solid var(--velours);max-width:none!important}
.encadre-titre{font-family:var(--f-titre);font-weight:600;font-size:1.05rem;color:var(--velours)}
.encadre>:last-child{margin-bottom:0}

/* Figures */
.figure{margin:var(--esp-4) 0;max-width:none!important}
.figure figcaption{font-size:var(--t-petit);color:var(--encre-2);margin-top:.6rem}

/* FAQ « Questions de spectateurs » */
.faq{margin-top:var(--esp-5)}
.faq h2{margin-top:0}
.faq details{background:var(--surface);margin-bottom:6px;border-left:4px solid transparent;transition:border-color .25s var(--courbe)}
.faq details[open]{border-left-color:var(--phosphore)}
.faq summary{cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.2rem;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.2rem;top:.85rem;font-family:var(--f-titre);font-size:1.3rem;color:var(--phosphore);transition:transform .25s var(--courbe)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 1.2rem 1.1rem;margin:0}

/* Bloc IA : une ligne de projection */
.bloc-ia{margin:var(--esp-5) 0 0;padding:var(--esp-3);background:var(--surface-2);max-width:none!important}
.bloc-ia-titre{font-family:var(--f-titre);font-weight:600;font-size:1.05rem}
.bloc-ia ul{list-style:none;padding:0;margin:0 0 var(--esp-2);display:flex;flex-wrap:wrap;gap:6px}
.bloc-ia li{margin:0}
.bloc-ia ul a{display:inline-block;padding:.5rem 1rem;border-radius:var(--rayon-bouton);background:var(--fond);color:var(--encre);text-decoration:none;font-weight:700;font-size:var(--t-petit);transition:background .2s var(--courbe),color .2s var(--courbe)}
.bloc-ia ul a:hover{background:var(--phosphore);color:var(--sur-accent)}
.bloc-ia-md{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;font-size:var(--t-petit);margin:0}
.bloc-ia button{font:inherit;font-weight:700;cursor:pointer;padding:.4rem .9rem;border:0;border-radius:var(--rayon-bouton);background:var(--surface-3);color:var(--encre)}
.bloc-ia button:hover{background:var(--encre);color:var(--sur-accent)}
.bloc-ia-note{font-size:var(--t-petit);color:var(--encre-2);margin:.6rem 0 0}

/* Séance suivante */
.a-lire{background:var(--surface);margin-top:var(--esp-6);padding-block:var(--esp-5)}
.a-lire .carte-img{background:var(--surface-2)}

/* ---------- Pied : le générique ---------- */
.pied{margin-top:var(--esp-6);background:var(--surface);padding-block:var(--esp-5) var(--esp-4)}
.a-lire+.pied,.origines+.pied{margin-top:0}
.pied-nom{font-family:var(--f-titre);font-weight:700;font-size:clamp(2rem,1rem + 5.4vw,6rem);line-height:.95;letter-spacing:-.04em;margin:0 0 var(--esp-3)}
.pied-nom span{color:var(--phosphore)}
.pied-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--esp-4)}
.pied-in p{color:var(--encre-2);max-width:46ch}
.pied-liens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem var(--esp-3)}
.pied-liens a{color:var(--encre);text-decoration:none;font-weight:700}
.pied-liens a:hover{color:var(--phosphore)}
.pied-bas{margin-top:var(--esp-4);font-size:var(--t-petit);color:var(--encre-2)}
.pied-bas p{margin:0 0 .4rem;max-width:80ch}

/* ---------- 404 ---------- */
.hors-champ{padding-block:var(--esp-6) 0}
.hors-champ .grand{font-family:var(--f-titre);font-weight:700;font-size:clamp(5rem,3rem + 12vw,14rem);line-height:.85;letter-spacing:-.05em;color:var(--surface-3);margin:0 0 var(--esp-3)}

/* ---------- Apparitions (le script n'ajoute .revele que si le mouvement est accepté) ---------- */
.js-mouvement [data-apparait]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--courbe),transform .7s var(--courbe)}
.js-mouvement [data-apparait].vu{opacity:1;transform:none}

@media (prefers-reduced-motion: no-preference){
  /* Ken Burns lent, du fond de salle vers l'écran : sens et durée propres à ce site */
  .media-anime img{animation:travelling 38s ease-in-out infinite alternate;transform-origin:72% 40%}
  @keyframes travelling{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
  .faisceau{animation:scintille 2.4s steps(6) infinite}
  @keyframes scintille{0%,100%{opacity:.05}30%{opacity:.11}55%{opacity:.07}80%{opacity:.12}}
  .poussiere i{animation:derive var(--d,14s) linear var(--r,0s) infinite}
  @keyframes derive{0%{opacity:0;transform:translate3d(0,0,0)}15%{opacity:var(--o,.5)}85%{opacity:var(--o,.5)}100%{opacity:0;transform:translate3d(var(--x,40px),var(--y,-60px),0)}}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js-mouvement [data-apparait]{opacity:1;transform:none}
}

/* ---------- Tablette et mobile ---------- */
@media (max-width:1000px){
  .bobines{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .affiche,.origines-grille,.regle,.pied-in,.hero-rubrique .tete-rubrique{grid-template-columns:minmax(0,1fr);gap:var(--esp-4)}
}
@media (max-width:640px){
  .marque img{height:38px}
  .entete-lien{display:none}
  .salle{min-height:auto;display:block;background:var(--fond)}
  .salle-media{position:relative;inset:auto;aspect-ratio:4/5;max-height:62vh;width:100%}
  .salle::after{display:none}
  .salle-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,13,18,.6) 0,rgba(14,13,18,0) 30%,rgba(14,13,18,0) 70%,var(--fond) 100%)}
  .salle-texte{padding-block:0 var(--esp-4);margin-top:-3.5rem;position:relative}
  .salle h1{font-size:2.15rem;letter-spacing:-.03em}
  .bobines,.grille-cartes{grid-template-columns:minmax(0,1fr)}
  .une .carte:first-child{grid-template-columns:minmax(0,1fr);gap:0}
  .une .carte:first-child .carte-img{margin-bottom:var(--esp-2)}
  .origines .liste-films{columns:1}
  .sommaire ol{columns:1}
  .pied-liens{grid-template-columns:minmax(0,1fr)}
  .hero-img img{aspect-ratio:16/9}
  .ecran img{aspect-ratio:16/9}
}

/* Rubrique : l'écran d'abord, puis le titre en très grand */
.page-rubrique .hero{display:flex;flex-direction:column;padding-top:var(--esp-4)}
.page-rubrique .hero>.conteneur:last-child{order:-1}
.page-rubrique .hero-img{margin-top:0;margin-bottom:var(--esp-4)}
.page-rubrique .hero-img img{aspect-ratio:21/8}
.page-rubrique .hero h1{font-size:var(--t-geant);line-height:.98;letter-spacing:-.035em;max-width:16ch}
.page-rubrique .hero .ariane ol{margin-bottom:var(--esp-2)}
.page-rubrique .section-tete .vide{margin:0}
@media (max-width:640px){.page-rubrique .hero-img img{aspect-ratio:16/9}}

/* Un seul bord gauche : le texte s'aligne sur le titre */
.conteneur.etroit.corps{max-width:var(--large)}
.corps .prose,.article-grille .prose{margin-inline:0}
@media (max-width:640px){.salle h1{font-size:1.8rem}}