/* ==========================================================================
   LuisFilm — Design éditorial, chaleureux et élégant
   ========================================================================== */

:root{
  --noir: #2b241d;
  --noir-doux: #362b20;
  --blanc-casse: #faf3e8;
  --blanc: #fffdf9;
  --gris: #9c8d78;
  --gris-clair: #e7d9c4;
  --accent: #b5622c;
  --accent-doux: #dba86a;
  --texte: var(--noir);
  --texte-secondaire: #4a4034;
  --fond-accent: #f2e6d5;
  --entete-fond: rgba(250,243,232,0.85);
  --clair-fixe: #fffdf9;
  --casse-fixe: #faf3e8;
  --gris-clair-fixe: #e7d9c4;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --transition-lente: 900ms cubic-bezier(.22,.61,.36,1);
  --transition-rapide: 300ms ease;
}

[data-theme="dark"]{
  --blanc-casse: #1a1512;
  --blanc: #221c17;
  --gris-clair: #443a2f;
  --gris: #a89a84;
  --texte: #f2ebdf;
  --texte-secondaire: #cdc0ac;
  --fond-accent: #2a2119;
  --entete-fond: rgba(26,21,18,0.85);
}

[data-theme="colorful"]{
  --noir: #2a0a5e;
  --noir-doux: #3a1373;
  --blanc-casse: #fdf0fa;
  --blanc: #ffffff;
  --gris: #8a5ea8;
  --gris-clair: #f4c6ea;
  --accent: #ff2f7e;
  --accent-doux: #ffd23f;
  --texte: #2a0a5e;
  --texte-secondaire: #6a3a9e;
  --fond-accent: #cdf3ff;
  --entete-fond: rgba(253,240,250,0.85);
}

/* ---------- Thème "cinéma" : le site s'affiche sur le grand écran d'une
   salle de cinéma (rideaux, fauteuils). La salle reste fixe, seul le
   contenu à l'intérieur de l'écran défile. Désactivé sur petits écrans. */
.camera-scene, .camera-frame, .camera-ecran, .camera-avant-scene{ display:contents; }

@media (min-width: 760px){
  [data-theme="cinema"] html, [data-theme="cinema"] body{ height:100%; overflow:hidden; }
  [data-theme="cinema"] .camera-scene{
    display:flex; align-items:center; justify-content:center;
    position:fixed; inset:0; z-index:500;
    background:#0a0304;
    padding:5vh 3vw;
  }
  [data-theme="cinema"] .camera-frame{
    display:block; position:relative;
    width:min(97vw, 1900px);
    height:auto;
    max-height:92vh;
    aspect-ratio:1619 / 972;
    background-image:url('../pictures/cinema-reelle2.webp');
    background-size:100% 100%;
    background-repeat:no-repeat;
    box-shadow:0 30px 70px rgba(0,0,0,0.55);
  }
  [data-theme="cinema"] .camera-ecran{
    display:block; position:absolute;
    left:9.7%; top:7.3%; width:81.28%; height:55.45%;
    overflow-y:auto; overflow-x:hidden;
    background:var(--blanc-casse);
    scrollbar-width:thin;
  }
  [data-theme="cinema"] .camera-ecran header.site-header{ position:sticky; top:0; padding:1rem 5%; }
  [data-theme="cinema"] .camera-ecran section{ padding:3rem 0; }
  [data-theme="cinema"] .camera-ecran .hero, [data-theme="cinema"] .camera-ecran .hero-texte-pleine-largeur{ min-height:auto; padding-top:4rem; }
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--blanc-casse);
  color:var(--texte);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  cursor:url('camera-cursor.png') 16 16, auto;
  transition:background var(--transition-rapide), color var(--transition-rapide);
  animation:apparition-page 700ms ease both;
}

/* ---------- Animations légères au chargement ---------- */
@keyframes apparition-page{ from{ opacity:0; } to{ opacity:1; } }
@keyframes apparition-monte{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

header.site-header{ animation:apparition-page 500ms ease both; }
.hero-texte > *, .hero-texte-pleine-largeur .container > *{
  animation:apparition-monte 800ms cubic-bezier(.22,.61,.36,1) both;
}
.hero-texte > *:nth-child(1), .hero-texte-pleine-largeur .container > *:nth-child(1){ animation-delay:80ms; }
.hero-texte > *:nth-child(2), .hero-texte-pleine-largeur .container > *:nth-child(2){ animation-delay:160ms; }
.hero-texte > *:nth-child(3), .hero-texte-pleine-largeur .container > *:nth-child(3){ animation-delay:240ms; }
.hero-texte > *:nth-child(4), .hero-texte-pleine-largeur .container > *:nth-child(4){ animation-delay:320ms; }

@media (prefers-reduced-motion: reduce){
  body, header.site-header, .hero-texte > *, .hero-texte-pleine-largeur .container > *{ animation:none; }
}

a, button, .btn, .nav-toggle, [data-youtube-id], .film-entry-media, .film-teaser-media, .a-sous-menu > a{
  cursor:url('camera-cursor.png') 16 16, pointer;
}

input, textarea, select{ cursor:text; }

img, video{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:0.01em;
  line-height:1.1;
}

h1{ font-size:clamp(2.6rem, 6vw, 5rem); font-weight:400; }
h2{ font-size:clamp(1.8rem, 4vw, 2.8rem); }
h3{ font-size:clamp(1.2rem, 2.4vw, 1.6rem); }

p{ font-size:1rem; color:var(--texte-secondaire); }

.eyebrow{
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.72rem;
  color:var(--accent);
  font-weight:500;
}

.container{
  max-width:1240px;
  margin:0 auto;
  padding:0 6vw;
}

/* ---------- Header ---------- */
header.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.6rem 6vw;
  background:var(--blanc-casse);
  transition:background var(--transition-rapide);
}
@media (min-width: 881px){
  header.site-header{
    background:var(--entete-fond);
    backdrop-filter:blur(10px);
  }
}

.entete-actions{ display:flex; align-items:center; gap:2rem; }
.theme-switch{ position:relative; }
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border:1px solid var(--texte);
  border-radius:50%;
  background:none;
  padding:0;
  color:var(--texte);
  transition:all var(--transition-rapide);
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }
.theme-toggle .icone-lune,
.theme-toggle .icone-palette,
.theme-toggle .icone-cinema{ display:none; }
[data-theme="dark"] .theme-toggle .icone-soleil{ display:none; }
[data-theme="dark"] .theme-toggle .icone-lune{ display:block; }
[data-theme="colorful"] .theme-toggle .icone-soleil{ display:none; }
[data-theme="colorful"] .theme-toggle .icone-palette{ display:block; }
[data-theme="cinema"] .theme-toggle .icone-soleil{ display:none; }
[data-theme="cinema"] .theme-toggle .icone-cinema{ display:block; }

.theme-menu{
  display:none;
  position:absolute;
  top:100%; right:0;
  margin-top:0.8rem;
  min-width:150px;
  background:var(--blanc);
  border:1px solid var(--gris-clair);
  box-shadow:0 12px 30px rgba(43,36,29,0.14);
  padding:0.5rem 0;
  z-index:150;
}
.theme-menu.ouvert{ display:block; }
.theme-menu button{
  display:flex; align-items:center; gap:0.7rem;
  width:100%; padding:0.65rem 1.2rem;
  font-family:var(--sans); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--texte); background:none; border:none; text-align:left;
}
.theme-menu button:hover{ background:var(--blanc-casse); color:var(--accent); }
.theme-menu button.actif{ color:var(--accent); }
.theme-menu button svg{ flex:none; }

.logo{
  font-family:var(--serif);
  font-size:1.5rem;
  letter-spacing:0.06em;
  display:inline-flex;
  align-items:center;
}
.logo img{
  display:block;
  height:66px;
  width:auto;
  transition:opacity 0.4s ease, transform 0.15s ease-out;
}
.logo:hover img{ opacity:0.75; }

/* Vue colorée : le logo vibre légèrement au scroll (le décalage exact est
   calculé en JS, voir initVibrationLogoColore dans script.js). */
[data-theme="colorful"] .logo img{ will-change:transform; }
@keyframes vibrationLogo{
  0%, 100%{ transform:translateX(0) rotate(0deg); }
  20%{ transform:translateX(-3px) rotate(-4deg); }
  40%{ transform:translateX(3px) rotate(4deg); }
  60%{ transform:translateX(-2px) rotate(-2.5deg); }
  80%{ transform:translateX(2px) rotate(2.5deg); }
}
[data-theme="colorful"] .logo.vibre img{ animation:vibrationLogo 0.4s ease; }
@media (prefers-reduced-motion: reduce){
  [data-theme="colorful"] .logo img{ transform:none !important; animation:none !important; }
}

nav.main-nav{ display:flex; gap:2.4rem; align-items:center; }

nav.main-nav a{
  font-size:0.82rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  position:relative;
  padding-bottom:4px;
}
nav.main-nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--accent);
  transition:width var(--transition-rapide);
}
nav.main-nav a:hover::after, nav.main-nav a.actif::after{ width:100%; }

.lang-switch{ display:flex; gap:0.6rem; font-size:0.72rem; }
.lang-switch a{ opacity:0.55; text-transform:uppercase; }
.lang-switch a.actif, .lang-switch a:hover{ opacity:1; }

/* ---------- Sous-menu Portfolio ---------- */
.a-sous-menu{ position:relative; display:flex; align-items:center; }
.sous-menu{
  display:none;
  position:absolute;
  top:100%; left:0;
  margin-top:0.8rem;
  min-width:220px;
  background:var(--blanc);
  border:1px solid var(--gris-clair);
  box-shadow:0 12px 30px rgba(43,36,29,0.12);
  padding:0.6rem 0;
}
.a-sous-menu:hover .sous-menu,
.a-sous-menu:focus-within .sous-menu{ display:block; }
.sous-menu a{
  display:block;
  padding:0.65rem 1.4rem;
  font-size:0.78rem;
  text-transform:none;
  letter-spacing:0.02em;
  white-space:nowrap;
}
.sous-menu a::after{ display:none; }
.sous-menu a:hover{ background:var(--blanc-casse); color:var(--accent); }

.nav-toggle{ display:none; }

/* ---------- Hero asymétrique ---------- */
.hero{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  align-items:center;
  min-height:100vh;
  padding:9.5rem 6vw 4rem;
  gap:3rem;
}

.hero-texte .eyebrow{ margin-bottom:1.4rem; display:block; }

.hero h1{ margin-bottom:1.6rem; }
.hero h1 em{ font-style:italic; color:var(--accent); }

.hero-texte p{ max-width:34ch; margin-bottom:2.2rem; font-size:1.05rem; }

.tagline{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  color:var(--accent);
  margin-bottom:0.6rem;
  display:block;
}
.lieu-badge{
  font-size:0.82rem;
  color:var(--gris);
  letter-spacing:0.04em;
  margin-bottom:1.8rem;
  display:block;
}

.btn{
  display:inline-block;
  padding:1rem 2.4rem;
  border:1px solid var(--texte);
  border-radius:999px;
  font-size:0.76rem;
  text-transform:uppercase;
  letter-spacing:0.16em;
  transition:all var(--transition-rapide);
  color:var(--texte);
}
.btn:hover{ background:var(--accent); color:var(--clair-fixe); border-color:var(--accent); transform:translateY(-1px); }
.btn-clair{ border-color:var(--clair-fixe); color:var(--clair-fixe); }
.btn-clair:hover{ background:var(--accent-doux); color:var(--noir); border-color:var(--accent-doux); }
.btn-plein{ background:var(--accent); color:var(--clair-fixe); border-color:var(--accent); }
.btn-plein:hover{ background:var(--noir); border-color:var(--noir); }

.hero-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--noir);
}
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 6s ease;
}
.hero-media:hover video, .hero-media:hover img{ transform:scale(1.06); }
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(43,36,29,0) 55%, rgba(43,36,29,0.45) 100%);
}

/* ---------- Hero duo — duo de portraits asymétrique (style éditorial) ---------- */
.hero-duo{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.2rem;
  height:100%;
}
.hero-duo .figure-editoriale:first-child{ margin-top:3rem; }
.hero-duo .figure-editoriale{ aspect-ratio:3/4; }

/* ---------- Alternance de fond entre sections ---------- */
.fond-blanc{ background:var(--blanc); }
.fond-creme{ background:var(--blanc-casse); }
.fond-accent{ background:var(--fond-accent); }

/* ---------- Thème coloré : fonds structurés (motifs très légers, pas de fond uni) ---------- */
[data-theme="colorful"] body{
  background-image:radial-gradient(circle at 12% 8%, rgba(255,47,126,0.05) 0, transparent 40%),
                    radial-gradient(circle at 88% 4%, rgba(255,210,63,0.06) 0, transparent 36%),
                    radial-gradient(circle at 50% 100%, rgba(205,243,255,0.35) 0, transparent 45%);
  background-attachment:fixed;
}
[data-theme="colorful"] .fond-blanc{
  background-image:radial-gradient(rgba(255,47,126,0.07) 1px, transparent 1px);
  background-size:20px 20px;
  animation:derive-motif-diag 24s linear infinite;
}
[data-theme="colorful"] .fond-creme{
  background-image:linear-gradient(135deg, rgba(255,210,63,0.09) 25%, transparent 25%, transparent 50%, rgba(255,210,63,0.09) 50%, rgba(255,210,63,0.09) 75%, transparent 75%, transparent);
  background-size:24px 24px;
  animation:derive-motif-diag 20s linear infinite reverse;
}
[data-theme="colorful"] .fond-accent{
  background-image:radial-gradient(rgba(42,10,94,0.06) 1.5px, transparent 1.5px);
  background-size:16px 16px;
  animation:derive-motif-diag 28s linear infinite;
}
[data-theme="colorful"] .bande-sombre,
[data-theme="colorful"] footer{
  background-image:linear-gradient(135deg, rgba(255,255,255,0.035) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.035) 50%, rgba(255,255,255,0.035) 75%, transparent 75%, transparent);
  background-size:28px 28px;
  animation:derive-motif-diag 32s linear infinite;
}
[data-theme="colorful"] body{
  animation:apparition-page 700ms ease both, derive-fond-corps 40s ease-in-out infinite alternate;
}

@keyframes derive-motif-diag{ from{ background-position:0 0; } to{ background-position:200px 200px; } }
@keyframes derive-fond-corps{
  from{ background-position:0% 0%, 100% 0%, 50% 100%; }
  to{ background-position:6% 10%, 94% 6%, 54% 94%; }
}

@media (prefers-reduced-motion: reduce){
  [data-theme="colorful"] .fond-blanc, [data-theme="colorful"] .fond-creme, [data-theme="colorful"] .fond-accent,
  [data-theme="colorful"] .bande-sombre, [data-theme="colorful"] footer, [data-theme="colorful"] body{
    animation:none;
  }
}

/* ---------- Thème coloré : petites icônes décoratives qui réagissent au scroll ----------
   Une seule couche générée en JS (voir script.js), injectée une fois par page.
   Invisible dans tous les autres thèmes ; ne capte jamais le clic (pointer-events:none). */
.confettis-colores{ display:none; }
[data-theme="colorful"] .confettis-colores{
  display:block;
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:2;
}
[data-theme="colorful"] .confettis-colores .confetti{
  position:absolute;
  will-change:transform;
}
[data-theme="colorful"] .confettis-colores .confetti svg{
  display:block;
  animation:flottement-confetti 6s ease-in-out infinite;
  animation-delay:var(--decalage, 0s);
}
[data-theme="colorful"] .confettis-colores .confetti.lent svg{ animation-duration:9s; }
[data-theme="colorful"] .confettis-colores .confetti.rapide svg{ animation-duration:4.2s; }

@keyframes flottement-confetti{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-9px) rotate(8deg); }
}

@media (max-width: 640px){
  [data-theme="colorful"] .confettis-colores .confetti.masque-mobile{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  [data-theme="colorful"] .confettis-colores .confetti svg{ animation:none; }
  [data-theme="colorful"] .confettis-colores .confetti{ transform:none !important; }
}

/* ---------- Thème coloré : silhouette qui « pointe » depuis le bord de l'écran au scroll ----------
   Cachée hors champ en permanence ; glisse dans l'écran (effet porte de grange) quand on
   scrolle (haut ou bas), puis se retire d'elle-même une fois le scroll arrêté.
   Générée en JS (voir script.js), invisible dans tous les autres thèmes. */
.silhouette-scroll{ display:none; }
[data-theme="colorful"] .silhouette-scroll{
  display:block;
  position:fixed;
  top:34%;
  right:0;
  z-index:60;
  width:132px;
  height:283px;
  pointer-events:none;
  /* Pas de transition CSS : la position est recalculée à chaque frame en JS,
     proportionnellement à la quantité de scroll, pour un mouvement purement
     horizontal et progressif (pas un fondu d'opacité). */
  transform:translateX(100%);
  will-change:transform;
}
[data-theme="colorful"] .silhouette-scroll img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(-4px 6px 10px rgba(0,0,0,0.14));
}

@media (max-width: 640px){
  [data-theme="colorful"] .silhouette-scroll{
    width:92px;
    height:198px;
    top:32%;
  }
}

@media (prefers-reduced-motion: reduce){
  [data-theme="colorful"] .silhouette-scroll{ display:none; }
}

/* ---------- Thème coloré : stickers pop-art qui apparaissent dans les marges ----------
   Uniquement sur grand écran (marges gauche/droite libres autour du .container
   1240px) pour ne jamais recouvrir de texte. Générés et positionnés en JS
   (voir script.js), un ou deux à la fois, apparition/disparition en fondu +
   léger mouvement, jamais dans le thème normal ni sur mobile/tablette. */
.stickers-colores{ display:none; }
@media (min-width: 1024px){
  [data-theme="colorful"] .stickers-colores{
    display:block;
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:5;
  }
}
[data-theme="colorful"] .stickers-colores .sticker{
  position:absolute;
  width:var(--taille, 112px);
  opacity:0;
  transform:translateY(16px) scale(0.88) rotate(var(--angle, 0deg));
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.22,.61,.36,1);
  filter:drop-shadow(0 10px 18px rgba(43,36,29,0.18));
}
[data-theme="colorful"] .stickers-colores .sticker img{
  display:block;
  width:100%;
  height:auto;
}
[data-theme="colorful"] .stickers-colores .sticker.visible{
  opacity:0.96;
  transform:translateY(0) scale(1) rotate(var(--angle, 0deg));
}

@media (prefers-reduced-motion: reduce){
  .stickers-colores{ display:none !important; }
}

/* ---------- Teasers portfolio (2 colonnes, légende visible) ---------- */
.grille-teasers{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2.8rem;
}
.film-teaser-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  background:var(--noir);
  cursor:pointer;
  margin-bottom:1.2rem;
}
.film-teaser-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s ease, filter 1.2s ease;
  filter:grayscale(10%);
}
.film-teaser-media:hover img{ transform:scale(1.05); filter:grayscale(0%); }
.film-teaser-texte h3{ margin-bottom:0.5rem; }
.film-teaser-texte p{ margin:0; }

/* ---------- Sections génériques ---------- */
section{ padding:7rem 0; }
.section-intro{ max-width:70ch; margin-bottom:3.5rem; }
.section-intro .eyebrow{ margin-bottom:1rem; display:block; }

.grille-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.4rem;
}
.grille-2{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2.4rem;
}

.carte{
  border-top:1px solid var(--gris-clair);
  padding-top:1.6rem;
}
.carte h3{ margin-bottom:0.8rem; }

/* ---------- Films détaillés (portfolio avec descriptif) ---------- */
.film-entry{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3.2rem;
  align-items:start;
}
.film-entry.inverse .film-entry-media{ order:2; }
.film-entry.inverse .film-entry-texte{ order:1; }
.film-entry-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  background:var(--noir);
  cursor:pointer;
}
.film-entry-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s ease, filter 1.2s ease;
  filter:grayscale(10%);
}
.film-entry-media:hover img{ transform:scale(1.05); filter:grayscale(0%); }
.film-entry-media .play-icone{ opacity:1; background:rgba(43,36,29,0.25); }
.film-entry-texte .eyebrow{
  display:inline-block;
  padding:0.4rem 1rem;
  border:1px solid var(--accent-doux);
  border-radius:999px;
  margin-bottom:1.1rem;
}
.film-entry-texte h3{
  margin-bottom:0.6rem;
  padding-bottom:0.9rem;
  position:relative;
}
.film-entry-texte h3::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:52px; height:2px;
  background:var(--accent);
}
.film-entry-texte p{ margin-top:1.4rem; margin-bottom:1rem; }
.film-entry-texte p:first-of-type{ margin-top:1.4rem; }
.film-entry-texte p:last-child{ margin-bottom:0; }

/* Photos extraites du film, sous chaque récit de mariage : 3 visibles
   d'emblée, 3 autres qui apparaissent en fondu quand on les atteint au
   scroll (voir initRevealGaleriesFilms dans script.js). */
.film-galerie{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1rem;
  margin-top:2.4rem;
}
.film-galerie img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  filter:grayscale(8%);
  transition:transform 1.2s ease, filter 1.2s ease;
}
.film-galerie img:hover{ transform:scale(1.05); filter:grayscale(0%); }
.film-galerie .reveal-scroll{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.film-galerie .reveal-scroll.visible{ opacity:1; transform:translateY(0); }
.film-galerie .reveal-scroll:nth-of-type(2){ transition-delay:0.12s; }
.film-galerie .reveal-scroll:nth-of-type(3){ transition-delay:0.24s; }
@media (max-width: 640px){
  .film-galerie{ grid-template-columns:repeat(3, 1fr); gap:0.5rem; }
}
@media (prefers-reduced-motion: reduce){
  .film-galerie .reveal-scroll{ opacity:1; transform:none; transition:none; }
}

/* ---------- Bandeau plein écran pour chaque film (séparation visuelle) ---------- */
.film-section{ padding:5rem 0; }

/* ---------- Portfolio / grille vidéos ---------- */
.film-item{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/10;
  background:var(--noir);
  cursor:pointer;
}
.film-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s ease, filter 1.2s ease;
  filter:grayscale(15%);
}
.film-item:hover img{ transform:scale(1.05); filter:grayscale(0%); }
.film-item .legende{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4rem;
  background:linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  color:var(--clair-fixe);
  opacity:0;
  transform:translateY(8px);
  transition:all var(--transition-rapide);
}
.film-item:hover .legende{ opacity:1; transform:translateY(0); }
.legende .eyebrow{ color:var(--accent-doux); }
.legende h3{ color:var(--clair-fixe); margin:0 0 0.3rem; }
.legende p{ color:var(--gris-clair-fixe); font-size:0.82rem; margin:0; max-width:36ch; }

.play-icone{
  position:absolute; top:50%; left:50%;
  width:56px; height:56px;
  transform:translate(-50%,-50%) scale(0.8);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:all var(--transition-rapide);
}
.film-item:hover .play-icone{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.play-icone::before{
  content:"";
  border-left:9px solid var(--clair-fixe);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  margin-left:3px;
}

/* Lecteur vidéo modal (lazy) */
.video-modal{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,10,10,0.94);
  display:none; align-items:center; justify-content:center;
  padding:4vw;
}
.video-modal.ouvert{ display:flex; }
.video-modal .cadre{ width:100%; max-width:1100px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; }
.video-modal .fermer{
  position:absolute; top:2rem; right:3rem;
  color:var(--clair-fixe); font-size:0.85rem;
  text-transform:uppercase; letter-spacing:0.14em;
  cursor:pointer;
}

/* ---------- Vidéo de fond en boucle (Vimeo) ----------
   Le fichier source a des bandes noires intégrées dans l'image (le
   contenu réel n'occupe qu'environ le tiers central de la hauteur).
   La vidéo est affichée à sa taille naturelle (100vw × 9/16, sans zoom),
   et c'est le cadre .hero-plein-ecran, volontairement plus bas, qui
   masque le tiers du haut et le tiers du bas via overflow:hidden. */
.video-boucle{ pointer-events:none; }
/* Image statique affichée immédiatement (c'est elle qui sert de LCP,
   rapide) pendant que l'iframe Vimeo est chargée en différé par le JS
   (voir initChargementDifferHero dans script.js) puis apparaît en fondu. */
.video-boucle .hero-poster{
  position:absolute;
  top:50%; left:50%;
  width:100vw;
  height:56.25vw;
  transform:translate(-50%, -50%);
  object-fit:cover;
}
.video-boucle iframe{
  position:absolute;
  top:50%; left:50%;
  width:100vw;
  height:56.25vw;      /* 100vw × 9/16, taille naturelle de la vidéo */
  transform:translate(-50%, -50%);
  border:0;
  opacity:0;
  transition:opacity 1s ease;
}
.video-boucle iframe.charge{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .video-boucle iframe{ transition:none; }
}

/* ---------- Bandeau vidéo plein écran (page d'accueil) ---------- */
.hero-plein-ecran{
  position:relative;
  overflow:hidden;
  width:100%;
  height:18.75vw;   /* ≈ le tiers central de 56.25vw : masque haut/bas */
  min-height:150px;
  max-height:300px;
  margin-top:5.4rem;
  background:var(--noir);
}
.hero-plein-ecran::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(43,36,29,0.1) 0%, rgba(43,36,29,0.28) 100%);
  pointer-events:none;
}
.hero-texte-pleine-largeur{
  padding:6rem 0 3rem;
  text-align:center;
}
.hero-texte-pleine-largeur .tagline,
.hero-texte-pleine-largeur .lieu-badge{ display:block; }
.hero-texte-pleine-largeur h1{ margin:0.8rem auto 1.4rem; max-width:20ch; }
.hero-texte-pleine-largeur p{ max-width:56ch; margin:0 auto 2.2rem; }

/* ---------- Citation / réassurance ---------- */
.citation{
  text-align:center;
  padding:6rem 0;
}
.citation p{
  font-family:var(--serif);
  font-size:clamp(1.4rem, 3vw, 2.2rem);
  font-style:italic;
  color:var(--texte);
  max-width:50ch;
  margin:0 auto 1.4rem;
}

/* ---------- Bande sombre ---------- */
.bande-sombre{
  background:var(--noir);
  color:var(--casse-fixe);
}
.bande-sombre p{ color:var(--gris-clair-fixe); }
.bande-sombre .eyebrow{ color:var(--accent-doux); }

/* ---------- Footer ---------- */
footer{
  background:var(--noir);
  color:var(--gris-clair-fixe);
  padding:5rem 6vw 2.5rem;
}
.footer-grille{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2.5rem;
  margin-bottom:3rem;
}
footer h3{ color:var(--clair-fixe); font-size:1.3rem; margin-bottom:1rem; }
footer .eyebrow{ color:var(--accent-doux); margin-bottom:1rem; display:block; }
footer a{ display:block; font-size:0.88rem; margin-bottom:0.6rem; opacity:0.75; transition:opacity var(--transition-rapide); }
footer a:hover{ opacity:1; }
.footer-bas{
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:1.6rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:0.75rem; opacity:0.6;
}

/* ---------- Formulaire contact ---------- */
form.contact-form{ max-width:640px; }
.champ{ margin-bottom:1.6rem; }
.champ label{
  display:block; font-size:0.75rem; text-transform:uppercase;
  letter-spacing:0.1em; margin-bottom:0.5rem; color:var(--gris);
}
.champ input, .champ textarea, .champ select{
  width:100%; padding:0.9rem 0; border:none; border-bottom:1px solid var(--gris-clair);
  background:transparent; font-family:var(--sans); font-size:1rem; color:var(--texte);
  transition:border-color var(--transition-rapide);
}
.champ input:focus, .champ textarea:focus, .champ select:focus{
  outline:none; border-bottom-color:var(--accent);
}
.champ textarea{ resize:vertical; min-height:120px; }

/* ---------- Portrait / images éditoriales ---------- */
.figure-editoriale{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--noir);
}
.figure-editoriale img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 5s ease;
}
.figure-editoriale:hover img{ transform:scale(1.05); }
.figure-editoriale.large{ aspect-ratio:16/9; }
.grille-galerie{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.2rem;
}
.temoignage-carte{
  border-top:1px solid var(--gris-clair);
  padding-top:1.6rem;
  position:relative;
}
.temoignage-carte::before{
  content:"“";
  font-family:var(--serif);
  font-size:4.5rem;
  color:var(--accent-doux);
  line-height:1;
  display:block;
  margin-bottom:0.4rem;
}
.temoignage-carte p{ font-family:var(--serif); font-style:italic; font-size:1.15rem; margin-bottom:1.2rem; color:var(--texte); }
.temoignage-carte .eyebrow{ text-transform:none; letter-spacing:0.02em; font-size:0.85rem; color:var(--accent); font-weight:500; }

/* ---------- Liste de caractéristiques (icônes + légende) ---------- */
.liste-atouts{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem 2.4rem;
}
.atout{
  display:flex;
  align-items:flex-start;
  gap:0.9rem;
}
.atout .puce{
  flex:none;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--accent-doux);
  color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; font-size:1.1rem;
}
.atout p{ font-size:0.92rem; margin:0; padding-top:0.3rem; }

/* ---------- Bande de badges / partenaires ---------- */
.bande-badges{
  display:flex; flex-wrap:wrap; gap:2.5rem;
  align-items:center; justify-content:center;
  padding:3rem 0;
  opacity:0.75;
}
.bande-badges span{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--gris); }

/* ---------- Sélecteur de langue (racine) ---------- */
.selecteur-langue{
  min-height:100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  gap:2.5rem;
  padding:6vw;
}
.langues-liste{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:center;
}
.langues-liste a{
  border:1px solid var(--gris-clair);
  padding:0.9rem 2rem;
  font-size:0.85rem; text-transform:uppercase; letter-spacing:0.12em;
  transition:all var(--transition-rapide);
}
.langues-liste a:hover{ background:var(--noir); color:var(--casse-fixe); border-color:var(--noir); }

/* ---------- Responsive / mobile-first overrides ---------- */
@media (max-width: 880px){
  .hero{ grid-template-columns:1fr !important; padding-top:8.5rem; }
  .grille-3, .grille-2, .footer-grille, .grille-galerie, .liste-atouts, .grille-teasers{ grid-template-columns:1fr; }
  .hero-duo{ grid-template-columns:1fr; }
  .intro .container{ grid-template-columns:1fr !important; gap:2rem !important; }
  .intro .figure-editoriale{ max-width:220px !important; margin:0 auto !important; }
  .hero-duo .figure-editoriale:first-child{ margin-top:0; }
  .film-entry, .film-entry.inverse{ grid-template-columns:1fr; padding:3rem 0; }
  .film-entry.inverse .film-entry-media, .film-entry.inverse .film-entry-texte{ order:initial; }
  nav.main-nav{
    position:fixed; top:0; right:0; bottom:0;
    width:78vw; max-width:340px;
    background:var(--blanc-casse);
    flex-direction:column; align-items:flex-start;
    padding:7rem 2rem 2rem;
    transform:translateX(100%);
    transition:transform var(--transition-rapide);
    gap:1.6rem;
  }
  nav.main-nav.ouvert{ transform:translateX(0); }
  .nav-toggle{
    display:block; z-index:200;
    width:44px; height:44px;
    border:1px solid var(--texte);
    color:var(--texte);
    background:none; cursor:pointer;
  }
  .video-modal .fermer{ top:1.2rem; right:1.2rem; }
  .sous-menu{
    display:block;
    position:static;
    margin-top:0.6rem;
    border:none;
    box-shadow:none;
    background:transparent;
    padding:0 0 0 1rem;
  }
  .sous-menu a{ padding:0.5rem 0; opacity:0.75; }
}

/* Le thème "cinéma" n'a aucun effet visuel en dessous de 760px (voir plus
   haut : la salle de cinéma est désactivée sur petit écran). On retire donc
   l'option du menu pour ne pas laisser choisir un mode qui ne fait rien. */
@media (max-width: 759px){
  .theme-menu button[data-theme-choix="cinema"]{ display:none; }
  .theme-toggle .icone-cinema{ display:none !important; }
}

@media (max-width: 480px){
  section{ padding:4.5rem 0; }
  .btn{ width:100%; text-align:center; }
}

/* ==========================================================================
   RGPD — bandeau de consentement cookies, lecture vidéo conditionnelle
   ========================================================================== */
.bandeau-cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  background:var(--noir); color:var(--clair-fixe);
  padding:1.2rem 1.5rem;
  display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap;
  box-shadow:0 -4px 24px rgba(0,0,0,0.18);
  transform:translateY(110%);
  transition:transform var(--transition-lente);
}
.bandeau-cookies.visible{ transform:translateY(0); }
.bandeau-cookies p{
  color:var(--clair-fixe); opacity:0.85; margin:0; font-size:0.86rem; max-width:56ch; flex:1 1 320px;
}
.bandeau-cookies a{ color:var(--accent-doux); text-decoration:underline; }
.bandeau-cookies .bandeau-cookies-actions{ display:flex; gap:0.7rem; flex-wrap:wrap; }
.bandeau-cookies .btn{ padding:0.6rem 1.4rem; font-size:0.78rem; border-color:var(--clair-fixe); color:var(--clair-fixe); }
.bandeau-cookies .btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--clair-fixe); }
.bandeau-cookies .btn-plein{ background:var(--accent-doux); border-color:var(--accent-doux); color:var(--noir); }
.bandeau-cookies .btn-plein:hover{ background:var(--accent); border-color:var(--accent); color:var(--clair-fixe); }
@media (max-width:600px){
  .bandeau-cookies{ flex-direction:column; align-items:stretch; text-align:center; padding:1.2rem 1rem; }
  .bandeau-cookies .bandeau-cookies-actions{ justify-content:center; }
}

.bouton-activer-video{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  background:rgba(43,36,29,0.72); color:var(--clair-fixe);
  border:1px solid rgba(255,255,255,0.4); border-radius:14px;
  padding:1.1rem 1.6rem; font-family:var(--sans); font-size:0.78rem; letter-spacing:0.04em;
  cursor:pointer; backdrop-filter:blur(3px);
  transition:background var(--transition-rapide), border-color var(--transition-rapide);
}
.bouton-activer-video:hover{ background:rgba(181,98,44,0.85); border-color:var(--accent-doux); }
.bouton-activer-video svg{ width:26px; height:26px; }

.consentement-inline{
  color:var(--clair-fixe); text-align:center; max-width:36ch; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:0.9rem; font-family:var(--sans);
}
.consentement-inline p{ color:var(--clair-fixe); opacity:0.85; font-size:0.86rem; }
.consentement-inline .btn{ border-color:var(--clair-fixe); color:var(--clair-fixe); }
.consentement-inline .btn:hover{ background:var(--accent); border-color:var(--accent); }