/* =========================================================
   Lamine & Diarra — 08.10.2026
   ========================================================= */
:root {
  --nuit: #0f0b12;
  --nuit-2: #18121c;
  --nuit-3: #231a28;
  --ivoire: #f6efe4;
  --ivoire-doux: #d9cfc1;
  --gris: #9c9087;
  --or: #c9a45c;
  --or-clair: #e8cf98;
  --terre: #b5542f;
  --rose: #d9a5a0;
  --f-titre: "Cormorant Garamond", Georgia, serif;
  --f-script: "Pinyon Script", "Cormorant Garamond", cursive;
  --f-texte: "Jost", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --gouttiere: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--ivoire);
  font: 300 17px/1.7 var(--f-texte);
  overflow-x: hidden;
}
body.verrouille { overflow: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--or-clair); }
::selection { background: var(--or); color: var(--nuit); }

/* grain discret sur tout le site */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- typographie commune ---------- */
.sur-titre {
  font: 400 12px/1.4 var(--f-texte); letter-spacing: .32em; text-transform: uppercase;
  color: var(--or); margin: 0 0 14px;
}
.titre-section {
  font: 300 clamp(36px, 6vw, 68px)/1.05 var(--f-titre); margin: 0 0 24px; letter-spacing: -.01em;
}
.intro { max-width: 620px; margin: 0 auto 48px; color: var(--ivoire-doux); }
.noms { font-weight: 400; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1em .35em; }
.noms span { font: 400 clamp(54px, 11vw, 120px)/1.1 var(--f-script); color: var(--ivoire); }
.noms em { font: italic 300 clamp(32px, 6vw, 64px)/1 var(--f-titre); color: var(--or); }
.noms.grand span { font-size: clamp(46px, 9vw, 110px); }
.noms.petit span { font-size: 44px; }
.noms.petit em { font-size: 26px; }

section { position: relative; padding: clamp(80px, 14vh, 160px) var(--gouttiere); text-align: center; }

.bouton-or {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  border: 1px solid var(--or); background: transparent; color: var(--or-clair);
  font: 400 13px/1 var(--f-texte); letter-spacing: .2em; text-transform: uppercase;
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease), box-shadow .4s;
}
.bouton-or:hover, .bouton-or:focus-visible { background: var(--or); color: var(--nuit); box-shadow: 0 0 40px rgba(201,164,92,.35); outline: none; }
.bouton-or.grand { padding: 20px 40px; font-size: 14px; margin-top: 56px; }
.bouton-or svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- révélations au défilement ---------- */
.revele { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.revele.vu { opacity: 1; transform: none; }

/* =========================================================
   PORTAIL
   ========================================================= */
#portail {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; text-align: center;
  background: radial-gradient(ellipse at 50% 60%, #2a1b2c 0%, var(--nuit) 70%);
  transition: opacity 1.6s var(--ease), visibility 1.6s;
  padding: var(--gouttiere);
}
#portail.parti { opacity: 0; visibility: hidden; }
#etoiles { position: absolute; inset: 0; width: 100%; height: 100%; }
.portail-contenu { position: relative; }
.portail-contenu .sur-titre { font-family: var(--f-titre); font-style: italic; text-transform: none; letter-spacing: .04em; font-size: clamp(18px, 2.4vw, 24px); color: var(--ivoire-doux); }
.date-portail { font: 300 clamp(18px, 2.4vw, 24px)/1 var(--f-titre); letter-spacing: .5em; color: var(--or-clair); margin: 18px 0 44px; padding-left: .5em; }
.apparait { opacity: 0; animation: apparait 1.8s var(--ease) var(--d, 0s) forwards; }
@keyframes apparait { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* =========================================================
   NAVIGATION
   ========================================================= */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px; padding: 14px var(--gouttiere);
  transition: background .5s, transform .6s var(--ease);
  transform: translateY(-100%);
}
body.entre #nav { transform: none; }
#nav.opaque { background: rgba(15,11,18,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.monogramme { font: 400 30px/1 var(--f-script); color: var(--ivoire); text-decoration: none; }
.monogramme span { color: var(--or); font-size: .8em; margin: 0 2px; }
#nav nav { display: flex; gap: 26px; margin-left: auto; }
#nav nav a { color: var(--ivoire-doux); text-decoration: none; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; transition: color .3s; }
#nav nav a:hover { color: var(--or-clair); }
#nav .lien-secret { color: var(--or); }

@media (max-width: 760px) {
  #nav nav { gap: 14px; overflow-x: auto; scrollbar-width: none; }
  #nav nav a:not(.lien-secret):not([href="#galerie"]) { display: none; }
  #nav nav a { font-size: 11px; letter-spacing: .14em; white-space: nowrap; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero { min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.hero-fond {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(181,84,47,.18), transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(201,164,92,.16), transparent 55%),
    var(--nuit);
  background-size: cover; background-position: center 22%;
}
.hero-fond.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,11,18,.55), rgba(15,11,18,.85) 70%, var(--nuit)); }
.hero-fond.photo { filter: blur(28px) brightness(.55) saturate(1.1); }
.hero-contenu { position: relative; max-width: 1000px; }
.hero-contenu.avec-photo { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 1240px; width: 100%; padding-top: 50px; }
.hero-portrait {
  margin: 0; width: min(400px, 34vw, calc((100svh - 170px) / 1.5)); aspect-ratio: 2/3; overflow: hidden;
  border-radius: 999px 999px 6px 6px; border: 1px solid rgba(201,164,92,.55);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), 0 0 0 10px rgba(201,164,92,.07), 0 0 0 11px rgba(201,164,92,.25);
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; animation: respirePhoto 18s ease-in-out infinite alternate; }
@keyframes respirePhoto { from { transform: scale(1); } to { transform: scale(1.08); } }
.avec-photo .noms.grand span { font-size: clamp(42px, 6.2vw, 92px); }
.avec-photo .compteurs { grid-template-columns: 1fr; gap: 22px; }
@media (max-width: 860px) {
  .hero-contenu.avec-photo { grid-template-columns: 1fr; justify-items: center; padding-top: 70px; }
  .hero-portrait { width: min(240px, 62vw); }
}
.hero-date { font: italic 300 clamp(20px, 3vw, 30px)/1 var(--f-titre); color: var(--or-clair); margin: 18px 0 56px; }
.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.compteur-titre { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); margin: 0 0 12px; }
.chiffres { display: flex; justify-content: center; gap: clamp(10px, 2vw, 22px); }
.chiffres div { display: flex; flex-direction: column; align-items: center; min-width: 42px; }
.chiffres b { font: 300 clamp(30px, 4.5vw, 46px)/1 var(--f-titre); font-variant-numeric: tabular-nums; color: var(--ivoire); }
.chiffres small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--or); margin-top: 6px; }
.anniversaire { margin: 40px auto 0; padding: 14px 24px; border: 1px solid var(--or); border-radius: 999px; display: inline-block; color: var(--or-clair); font: italic 400 20px/1.3 var(--f-titre); animation: lueur 3s ease-in-out infinite; }
@keyframes lueur { 50% { box-shadow: 0 0 40px rgba(201,164,92,.4); } }
.defiler { position: absolute; bottom: 30px; left: 50%; width: 26px; height: 42px; margin-left: -13px; border: 1px solid var(--gris); border-radius: 20px; }
.defiler span { position: absolute; top: 8px; left: 50%; width: 3px; height: 8px; margin-left: -1.5px; background: var(--or); border-radius: 2px; animation: molette 2s infinite; }
@keyframes molette { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* =========================================================
   DISTANCE (scène collante)
   ========================================================= */
.distance { height: 320vh; padding: 0; }
.distance-scene { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 70px var(--gouttiere) 30px; overflow: hidden; }
.carte { width: min(800px, 100%); height: auto; max-height: 48vh; overflow: visible; }
.carte .ville { font: italic 400 18px var(--f-titre); fill: var(--ivoire-doux); transition: opacity .6s; }
.km { margin-top: 12px; }
.km b { display: block; font: 300 clamp(56px, 10vw, 110px)/1 var(--f-titre); color: var(--or-clair); font-variant-numeric: tabular-nums; }
.km span { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); }
.distance-fin { font: italic 300 clamp(22px, 3vw, 32px)/1.3 var(--f-titre); opacity: 0; transition: opacity 1s; margin: 18px 0 0; }
.distance-fin strong { color: var(--or-clair); font-weight: 400; }
.distance-fin.vu { opacity: 1; }

/* =========================================================
   FRISE
   ========================================================= */
.frise { position: relative; max-width: 980px; margin: 60px auto 0; }
.frise-ligne { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(201,164,92,.18); }
.frise-ligne span { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: linear-gradient(var(--or-clair), var(--or)); box-shadow: 0 0 12px var(--or); }
.jalon { position: relative; width: 50%; padding: 0 56px 80px; text-align: right; }
.jalon:nth-of-type(even) { margin-left: 50%; text-align: left; }
.jalon::before { content: ""; position: absolute; top: 10px; right: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--nuit); border: 1px solid var(--or); transition: background .6s, box-shadow .6s; }
.jalon:nth-of-type(even)::before { right: auto; left: -5px; }
.jalon.vu::before { background: var(--or); box-shadow: 0 0 18px var(--or); }
.jalon-date { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--or); margin: 0 0 8px; }
.jalon h3 { font: 400 clamp(26px, 3.4vw, 36px)/1.15 var(--f-titre); margin: 0 0 12px; }
.jalon p { color: var(--ivoire-doux); margin: 0 0 10px; }
.jalon .teaser { font: italic 400 18px/1.5 var(--f-titre); color: var(--rose); }
.jalon-final h3 { font: 400 72px/1 var(--f-script); color: var(--or-clair); }
.jalon-photo { margin-top: 22px; width: 100%; max-width: 420px; border-radius: 4px; border: 1px solid rgba(201,164,92,.4); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
@media (max-width: 760px) {
  .frise-ligne { left: 8px; }
  .jalon, .jalon:nth-of-type(even) { width: auto; margin-left: 0; padding: 0 0 60px 40px; text-align: left; }
  .jalon::before, .jalon:nth-of-type(even)::before { left: 3px; right: auto; }
}

/* =========================================================
   JOUR J
   ========================================================= */
.jour-j { background: linear-gradient(var(--nuit), var(--nuit-2) 30%, var(--nuit-2) 70%, var(--nuit)); }
.moments { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 1300px; margin: 0 auto; }
@media (max-width: 1050px) { .moments { grid-template-columns: repeat(2, 1fr); } }
.moment { position: relative; aspect-ratio: 3/4; border: 0; padding: 0; border-radius: 4px; overflow: hidden; background: var(--nuit-3); text-align: left; }
.moment:nth-child(2) { transition-delay: .15s; } .moment:nth-child(3) { transition-delay: .3s; } .moment:nth-child(4) { transition-delay: .45s; }
.moment-image { position: absolute; inset: 0; background-size: cover; background-position: center 20%; transition: transform 1.6s var(--ease); }
.moment:hover .moment-image { transform: scale(1.07); }
.moment::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(15,11,18,.92)); }
.moment-texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; z-index: 1; }
.moment-texte span { font: italic 400 18px var(--f-titre); color: var(--or); }
.moment-texte h3 { font: 400 clamp(30px, 3.5vw, 44px)/1.1 var(--f-titre); margin: 4px 0 6px; }
.moment-texte p { margin: 0; font-size: 14px; color: var(--ivoire-doux); }
@media (max-width: 760px) { .moments { grid-template-columns: 1fr; } .moment { aspect-ratio: 4/3; } }

/* tuiles d'attente quand il n'y a pas encore de photo */
.attente {
  background:
    radial-gradient(circle at 50% 42%, rgba(232,207,152,.16), transparent 40%),
    repeating-linear-gradient(45deg, rgba(201,164,92,.05) 0 2px, transparent 2px 22px),
    repeating-linear-gradient(-45deg, rgba(201,164,92,.05) 0 2px, transparent 2px 22px),
    linear-gradient(160deg, var(--nuit-3), var(--nuit-2));
}
.attente-label { position: absolute; inset: 0; display: grid; place-items: center; font: italic 300 18px var(--f-titre); color: var(--gris); text-align: center; padding: 20px; }

/* =========================================================
   FRANCE — dédicace aux amis
   ========================================================= */
.france { background: radial-gradient(ellipse at 50% 40%, rgba(60,70,110,.25), transparent 60%); }
.france-photo { margin: 30px auto 0; max-width: 1100px; }
.france-cadre { position: relative; padding: 12px; background: linear-gradient(135deg, #e8cf98, #9c7a3c 40%, #e8cf98 60%, #a8853f); border-radius: 4px; box-shadow: 0 40px 90px rgba(0,0,0,.6); transform: rotate(-.6deg); transition: transform 1.2s var(--ease); }
.france-photo:hover .france-cadre { transform: rotate(0deg) scale(1.01); }
.france-cadre img { width: 100%; height: auto; border-radius: 2px; }
.france-photo figcaption { margin-top: 18px; font: italic 400 18px var(--f-titre); color: var(--gris); letter-spacing: .04em; }
.dedicace { max-width: 640px; margin: 56px auto 0; }
.dedicace p { font: 400 clamp(19px, 2vw, 22px)/1.7 var(--f-titre); color: var(--ivoire-doux); margin: 0 0 1em; }
.dedicace .dedicace-titre { font: 400 clamp(44px, 7vw, 68px)/1.1 var(--f-script); color: var(--or-clair); margin-bottom: 22px; }
.dedicace .dedicace-merci { font-style: italic; color: var(--ivoire); font-size: clamp(22px, 2.6vw, 28px); }
.dedicace .dedicace-signature { font: 400 40px/1 var(--f-script); color: var(--or); margin-top: 10px; }

/* =========================================================
   GALERIE
   ========================================================= */
.filtres { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.filtre { background: none; border: 1px solid rgba(201,164,92,.3); border-radius: 999px; padding: 9px 20px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ivoire-doux); transition: all .3s; }
.filtre:hover { border-color: var(--or); }
.filtre.actif { background: var(--or); border-color: var(--or); color: var(--nuit); }
.grille { columns: 3 300px; column-gap: 14px; max-width: 1300px; margin: 0 auto; }
.tuile { position: relative; break-inside: avoid; margin: 0 0 14px; border-radius: 3px; overflow: hidden; cursor: zoom-in; background: var(--nuit-3); opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.tuile.vu { opacity: 1; transform: none; }
.tuile img { width: 100%; height: auto; transition: transform 1.2s var(--ease), filter .6s; }
.tuile:hover img { transform: scale(1.05); }
.tuile .attente { aspect-ratio: var(--r, 3/4); position: relative; }
.tuile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 12px; font: italic 400 16px var(--f-titre); background: linear-gradient(transparent, rgba(15,11,18,.85)); opacity: 0; transition: opacity .4s; text-align: left; }
.tuile:hover figcaption { opacity: 1; }
.tuile.cache { display: none; }

/* =========================================================
   FILMS
   ========================================================= */
.liste-films { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 230px), 1fr)); gap: 22px; max-width: 1200px; margin: 0 auto; }
.liste-films > div:has(.paysage) { grid-column: 1 / -1; max-width: 900px; width: 100%; justify-self: center; }
.film { position: relative; aspect-ratio: 9/16; border: 1px solid rgba(201,164,92,.25);
}
.film.paysage { aspect-ratio: 16/9; }
.film { border-radius: 4px; overflow: hidden; background: var(--nuit-3); }
.film video, .film iframe { width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; display: block; }
.film video { position: relative; z-index: 1; }
/* On masque le plein écran natif (bandes noires) : notre bouton ⛶ le remplace. */
.film video::-webkit-media-controls-fullscreen-button { display: none !important; }

/* Bouton plein écran (le nôtre, à la place de celui du navigateur) */
.film-plein { position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(15,11,18,.55); border: 1px solid rgba(232,207,152,.45); backdrop-filter: blur(6px); opacity: .75; transition: opacity .3s, background .3s, transform .3s; }
.film-plein svg { width: 18px; height: 18px; fill: none; stroke: var(--or-clair); stroke-width: 2; stroke-linecap: round; }
.film:hover .film-plein, .film-plein:focus-visible { opacity: 1; }
.film-plein:hover { background: rgba(201,164,92,.35); transform: scale(1.08); }

/* Éléments du décor plein écran, cachés en temps normal */
.film-fond, .film-ambiance, .film-deco { display: none; }

/* ----- Plein écran : vidéo centrée + fond aux couleurs de la vidéo ----- */
.film.plein-ecran { display: flex; align-items: center; justify-content: center; aspect-ratio: auto; width: 100vw; height: 100vh; height: 100svh;
  border: 0; border-radius: 0; background: var(--nuit); overflow: hidden; }
.film.plein-ecran.pseudo { position: fixed; inset: 0; z-index: 99; }
.film.plein-ecran .film-fond, .film.plein-ecran .film-ambiance {
  display: block; position: absolute; inset: -10%; width: 120%; height: 120%; background-size: cover; background-position: center;
  filter: blur(50px) saturate(1.8) brightness(1.15); transform: scale(1.05); }
.film.plein-ecran .film-ambiance { opacity: 0; transition: opacity 1.2s; }
.film.plein-ecran.ambiance-prete .film-ambiance { opacity: 1; }
/* halos dorés qui respirent + léger voile pour garder le texte lisible */
.film.plein-ecran::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(15,11,18,.32) 85%),
    radial-gradient(circle at 12% 88%, rgba(232,207,152,.38), transparent 38%),
    radial-gradient(circle at 88% 12%, rgba(232,207,152,.30), transparent 36%);
  animation: halosDores 7s ease-in-out infinite alternate; }
@keyframes halosDores { from { opacity: .75; } to { opacity: 1; } }
/* fines étincelles dorées qui montent lentement */
.film.plein-ecran::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(2px 2px at 10% 80%, #f3dca6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 30%, #f3dca6 50%, transparent 51%),
    radial-gradient(2px 2px at 35% 65%, #fff1cc 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 75%, #f3dca6 50%, transparent 51%),
    radial-gradient(2px 2px at 82% 40%, #fff1cc 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 85%, #f3dca6 50%, transparent 51%),
    radial-gradient(2px 2px at 60% 20%, #f3dca6 50%, transparent 51%);
  background-size: 100% 100%; animation: etincelles 14s linear infinite; }
@keyframes etincelles { from { transform: translateY(6%); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .55; } to { transform: translateY(-12%); opacity: 0; } }
.film.plein-ecran video { z-index: 2; }
.film.plein-ecran .film-deco { z-index: 3; }
.film.plein-ecran .film-plein { z-index: 4; }
.film.plein-ecran video { width: auto; height: 100%; max-width: 100%; background: transparent; box-shadow: 0 0 120px rgba(0,0,0,.55); }
.film.plein-ecran .film-plein { top: 18px; right: 18px; width: 46px; height: 46px; opacity: 1; }
.film.plein-ecran .film-plein svg path { d: path("M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5"); }
.film.plein-ecran .film-deco { display: block; position: absolute; left: clamp(24px, 5vw, 80px); bottom: clamp(30px, 8vh, 90px); z-index: 2; max-width: calc(50vw - 220px); text-align: left; animation: apparait 1.4s var(--ease) both .3s; }
.film-deco-noms { margin: 0; font: 400 clamp(40px, 4.4vw, 72px)/1.1 var(--f-script); color: var(--ivoire); text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.film-deco-noms em { font: italic 300 .55em var(--f-titre); color: var(--or); }
.film-deco-titre { margin: 10px 0 0; font: italic 400 clamp(20px, 2vw, 28px)/1.3 var(--f-titre); color: var(--or-clair); text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.film-deco-date { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(201,164,92,.5); display: inline-block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ivoire-doux); }
@media (max-width: 900px), (orientation: portrait) { .film.plein-ecran .film-deco { display: none; } }
.film-titre { margin: 12px 0 0; font: italic 400 20px var(--f-titre); color: var(--ivoire-doux); }

/* =========================================================
   CARNET — porte & enveloppe
   ========================================================= */
.carnet-porte { background: radial-gradient(ellipse at 50% 60%, #2a1626, var(--nuit) 65%); padding-bottom: 140px; }
.enveloppe { position: relative; width: min(380px, 86vw); aspect-ratio: 1.55; margin: 30px auto 50px; perspective: 1200px; }
.env-dos, .env-face { position: absolute; inset: 0; border-radius: 4px; }
.env-dos { background: #c9b79a; }
.env-face { background:
  linear-gradient(to top right, #e6d6bb 49.6%, transparent 50%) left / 50% 100% no-repeat,
  linear-gradient(to top left, #e2d1b4 49.6%, transparent 50%) right / 50% 100% no-repeat,
  linear-gradient(to top, #ddcaa9 0 52%, transparent 52%);
  z-index: 3; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.env-rabat { position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 4; transform-origin: top; transition: transform 1s var(--ease) .2s, z-index 0s .7s;
  background: linear-gradient(to bottom, #d6c2a0, #cfb894); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env-lettre { position: absolute; left: 7%; right: 7%; top: 8%; bottom: 8%; z-index: 2; background: var(--ivoire); border-radius: 2px; display: grid; place-items: center; transition: transform 1.2s var(--ease) .9s; }
.env-lettre p { font: 400 26px/1.3 var(--f-script); color: #5b3b2e; text-align: center; margin: 0; }
.cachet { position: absolute; left: 50%; top: 58%; z-index: 5; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c4553a, #8e2a1c 70%); box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 0 0 5px rgba(0,0,0,.12);
  display: grid; place-items: center; transition: transform .8s var(--ease), opacity .8s; }
.cachet span { font: 400 26px var(--f-script); color: #f3c9a8; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.enveloppe.erreur { animation: secoue .5s; }
@keyframes secoue { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.enveloppe.ouverte .cachet { transform: scale(1.4) rotate(25deg); opacity: 0; }
.enveloppe.ouverte .env-rabat { transform: rotateX(180deg); z-index: 1; }
.enveloppe.ouverte .env-lettre { transform: translateY(-62%); }

.form-code { max-width: 520px; margin: 0 auto; }
.form-code label { display: block; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--gris); margin-bottom: 12px; }
.champ { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.champ input { flex: 1 1 240px; min-width: 0; padding: 14px 20px; border-radius: 999px; border: 1px solid rgba(201,164,92,.4); background: rgba(255,255,255,.03); color: var(--ivoire); font: 400 16px var(--f-texte); text-align: center; letter-spacing: .1em; }
.champ input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 4px rgba(201,164,92,.12); }
.code-message { min-height: 1.7em; margin: 14px 0 0; font: italic 400 18px var(--f-titre); color: var(--rose); }

/* =========================================================
   PIED
   ========================================================= */
.pied { text-align: center; padding: 100px var(--gouttiere) 70px; border-top: 1px solid rgba(201,164,92,.15); }
.citation { font: italic 300 22px/1.5 var(--f-titre); color: var(--ivoire-doux); margin: 10px 0 24px; }
.credit { margin: 18px 0 0; font: italic 400 15px var(--f-titre); color: var(--gris); }
.prochain { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }

/* =========================================================
   CINÉMA
   ========================================================= */
.cinema { position: fixed; inset: 0; z-index: 95; background: #000; overflow: hidden; }
.cinema-scene { position: absolute; inset: 0; }
.diapo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s ease; }
.diapo.active { opacity: 1; }
.diapo .fond-flou { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(30px) brightness(.45); }
.diapo img, .diapo .attente { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.diapo.active img, .diapo.active .attente { animation: kenburns var(--duree, 6s) linear forwards; }
.diapo.kb2.active img { animation-name: kenburns2; }
@keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
@keyframes kenburns2 { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1) translate(0, 0); } }
.diapo.carton { display: grid; place-items: center; background: radial-gradient(ellipse, #2a1b2c, #000 75%); text-align: center; padding: var(--gouttiere); }
.carton span { display: block; font: italic 400 22px var(--f-titre); color: var(--or); letter-spacing: .1em; }
.carton h2 { font: 400 clamp(60px, 12vw, 140px)/1.1 var(--f-script); margin: 6px 0; color: var(--ivoire); }
.carton p { font: italic 300 clamp(18px, 2.4vw, 26px) var(--f-titre); color: var(--ivoire-doux); margin: 0; }
.diapo.carton.active > div > * { animation: apparait 1.6s var(--ease) both; }
.diapo.carton.active > div > *:nth-child(2) { animation-delay: .4s; }
.diapo.carton.active > div > *:nth-child(3) { animation-delay: .9s; }
.cinema-legende { position: absolute; left: 0; right: 0; bottom: 70px; margin: 0; text-align: center; font: italic 400 clamp(18px, 2.4vw, 26px) var(--f-titre); text-shadow: 0 2px 20px #000; transition: opacity .8s; padding: 0 var(--gouttiere); }
.cinema-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.1); }
.cinema-barre span { display: block; height: 100%; width: 0; background: var(--or); transition: width .4s linear; }
.cinema-commandes { position: absolute; top: 18px; right: 18px; display: flex; gap: 8px; opacity: .35; transition: opacity .4s; }
.cinema:hover .cinema-commandes, .cinema-commandes:focus-within { opacity: 1; }
.cinema-commandes button, .visionneuse button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.4); font-size: 18px; line-height: 1; }
.cinema-commandes button:hover, .visionneuse button:hover { border-color: var(--or); color: var(--or-clair); }

/* =========================================================
   VISIONNEUSE
   ========================================================= */
.visionneuse { position: fixed; inset: 0; z-index: 96; background: rgba(8,6,10,.96); display: flex; align-items: center; justify-content: center; padding: 60px 70px; }
.visionneuse[hidden], .cinema[hidden], .lecteur[hidden] { display: none; }
.visionneuse figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
#vMedia img, #vMedia .attente { max-width: 100%; max-height: calc(100svh - 140px); object-fit: contain; animation: apparait .6s var(--ease); }
#vMedia .attente { width: min(70vw, 600px); aspect-ratio: 3/4; position: relative; }
.visionneuse figcaption { margin-top: 14px; font: italic 400 20px var(--f-titre); color: var(--ivoire-doux); }
.v-fermer { position: absolute; top: 16px; right: 16px; }
.v-prec, .v-suiv { position: absolute; top: 50%; transform: translateY(-50%); font-size: 28px !important; }
.v-prec { left: 14px; } .v-suiv { right: 14px; }
@media (max-width: 760px) { .visionneuse { padding: 60px 8px; } .v-prec, .v-suiv { top: auto; bottom: 16px; transform: none; } }

/* =========================================================
   LECTEUR DU CARNET SECRET
   ========================================================= */
.lecteur { position: fixed; inset: 0; z-index: 97; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(ellipse at 50% 0%, #2a1a24, var(--nuit) 60%) fixed; animation: apparait 1.4s var(--ease); }
.lecteur-fermer { position: fixed; top: 16px; right: 16px; z-index: 2; background: rgba(15,11,18,.7); border: 1px solid rgba(201,164,92,.35); border-radius: 999px; padding: 10px 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--or-clair); backdrop-filter: blur(8px); }
.c-carnet { max-width: 760px; margin: 0 auto; padding: 0 var(--gouttiere) 120px; }
.c-carnet p { font: 400 clamp(19px, 2vw, 22px)/1.75 var(--f-titre); color: var(--ivoire); margin: 0 0 1.1em; }
.c-ouverture { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.c-ouverture h1 { font: 400 clamp(54px, 10vw, 100px)/1.1 var(--f-script); color: var(--or-clair); margin: 0 0 24px; }
.c-ouverture h1 em, .carton h2 em { font: italic 300 .55em var(--f-titre); color: var(--or); }
.c-ouverture p { font-style: italic; color: var(--ivoire-doux); max-width: 520px; }
.c-chap { padding: 90px 0 30px; }
.c-num { font: italic 400 22px var(--f-titre) !important; color: var(--or) !important; text-align: center; margin: 0 !important; }
.c-chap h2 { font: 300 clamp(34px, 5vw, 54px)/1.1 var(--f-titre); text-align: center; margin: 6px 0 10px; }
.c-date { text-align: center; font: 400 12px var(--f-texte) !important; letter-spacing: .26em; text-transform: uppercase; color: var(--gris) !important; margin-bottom: 44px !important; }
.c-carnet blockquote { margin: 34px 0; padding: 4px 0 4px 26px; border-left: 1px solid var(--or); }
.c-carnet blockquote p { font-style: italic; color: var(--or-clair); }
.c-carnet blockquote cite { font: 400 12px var(--f-texte); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); font-style: normal; }
.c-lettrine::first-letter { float: left; font: 400 84px/.8 var(--f-script); color: var(--or); padding: 10px 12px 0 0; }
.c-anim { opacity: 0; transform: translateY(28px); filter: blur(4px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), filter 1.3s; }
.c-anim.vu { opacity: 1; transform: none; filter: none; }
.c-grand { text-align: center; font: italic 300 clamp(26px, 3.6vw, 38px)/1.4 var(--f-titre) !important; color: var(--or-clair) !important; margin: 50px 0 !important; }

/* scène I — deux chemins qui se croisent */
.sc-chemin { position: relative; height: 170px; margin: 10px 0 40px; border-bottom: 1px solid rgba(201,164,92,.25); overflow: hidden; }
.sc-chemin .perso { position: absolute; bottom: 0; width: 34px; height: 100px; }
.sc-chemin .perso svg { width: 100%; height: 100%; }
.sc-chemin .lui { left: -40px; }
.sc-chemin .elle { right: -40px; }
.sc-chemin.vu .lui { animation: versDroite 6s ease-in-out forwards; }
.sc-chemin.vu .elle { animation: versGauche 6s ease-in-out forwards; }
@keyframes versDroite { 0% { left: -40px; } 45%, 62% { left: calc(50% - 46px); } 100% { left: calc(100% + 40px); } }
@keyframes versGauche { 0% { right: -40px; } 45%, 62% { right: calc(50% - 46px); } 100% { right: calc(100% + 40px); } }
.sc-chemin .coeur { position: absolute; left: 50%; bottom: 112px; width: 26px; margin-left: -13px; opacity: 0; fill: var(--terre); }
.sc-chemin.vu .coeur { animation: battement 6s ease-in-out forwards; }
@keyframes battement { 0%, 42% { opacity: 0; transform: scale(.4); } 48% { opacity: 1; transform: scale(1.25); } 52% { transform: scale(1); } 56% { transform: scale(1.25); } 60% { transform: scale(1); } 80% { opacity: 1; transform: translateY(-30px); } 100% { opacity: 0; transform: translateY(-60px); } }
.sc-chemin .etiquette { position: absolute; top: 12px; font: italic 400 15px var(--f-titre); color: var(--gris); }
.sc-chemin .e1 { left: 8px; } .sc-chemin .e2 { right: 8px; text-align: right; }

/* scène III — le rêve, en dialogue */
.sc-dialogue { display: flex; flex-direction: column; gap: 12px; margin: 34px 0 44px; }
.bulle { max-width: 82%; padding: 12px 18px; border-radius: 18px; font: 400 19px/1.45 var(--f-titre); opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.bulle.vu { opacity: 1; transform: none; }
.bulle.lui { align-self: flex-end; background: rgba(201,164,92,.16); border: 1px solid rgba(201,164,92,.35); border-bottom-right-radius: 4px; }
.bulle.elle { align-self: flex-start; background: rgba(217,165,160,.13); border: 1px solid rgba(217,165,160,.35); border-bottom-left-radius: 4px; }
.bulle.didascalie { align-self: center; background: none; border: 0; font-style: italic; color: var(--gris); font-size: 17px; text-align: center; }
.bulle small { display: block; font: 400 10px var(--f-texte); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); margin-bottom: 2px; }
.gouttes { display: inline-flex; gap: 6px; margin-left: 6px; vertical-align: middle; }
.gouttes i { width: 5px; height: 8px; background: #8fb7d1; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: goutte 1.2s infinite; }
.gouttes i:nth-child(2) { animation-delay: .3s; } .gouttes i:nth-child(3) { animation-delay: .6s; }
@keyframes goutte { 0% { transform: translateY(-6px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }

/* scène IV — le code */
.sc-code { margin: 34px 0 44px; padding: 22px 24px; border-radius: 8px; background: #0b0910; border: 1px solid rgba(201,164,92,.2); font: 400 15px/1.8 ui-monospace, "Cascadia Code", Consolas, monospace; color: #cfc6bb; text-align: left; overflow-x: auto; white-space: pre; }
.sc-code .k { color: #d98a6a; } .sc-code .f { color: var(--or-clair); } .sc-code .c { color: #6f6a73; font-style: italic; } .sc-code .n { color: #9ec4a8; }
.sc-code .curseur { display: inline-block; width: 8px; height: 1.1em; background: var(--or); vertical-align: text-bottom; animation: clignote 1s steps(1) infinite; }
@keyframes clignote { 50% { opacity: 0; } }

/* scène VI — la bougie */
.sc-bougie { display: flex; flex-direction: column; align-items: center; margin: 30px 0 40px; }
.bougie { position: relative; width: 26px; height: 90px; background: linear-gradient(90deg, #e9dfcc, #fffaf0 40%, #d9cdb6); border-radius: 4px 4px 2px 2px; margin-top: 70px; }
.bougie::before { content: ""; position: absolute; left: 50%; top: -10px; width: 2px; height: 12px; margin-left: -1px; background: #3a2c22; }
.flamme { position: absolute; left: 50%; top: -58px; width: 22px; height: 48px; margin-left: -11px; border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 80%, #fff 0 15%, #ffd27a 35%, #ff8a3d 70%, transparent 72%); filter: blur(.5px); transform-origin: 50% 90%; animation: vacille 2.4s ease-in-out infinite; }
.halo-bougie { position: absolute; left: 50%; top: -110px; width: 220px; height: 220px; margin-left: -110px; border-radius: 50%; background: radial-gradient(rgba(255,190,110,.22), transparent 65%); animation: respire 3s ease-in-out infinite; pointer-events: none; }
@keyframes vacille { 0%,100% { transform: rotate(-2deg) scaleY(1); } 25% { transform: rotate(2deg) scaleY(1.06); } 50% { transform: rotate(-1deg) scaleY(.94); } 75% { transform: rotate(1.5deg) scaleY(1.03); } }
@keyframes respire { 50% { transform: scale(1.12); opacity: .8; } }
.sc-bougie .nom-hommage { font: 400 44px/1.2 var(--f-script) !important; color: var(--or-clair) !important; margin: 26px 0 0 !important; text-align: center; }
.sc-bougie .sous-hommage { font-style: italic; color: var(--gris) !important; text-align: center; }

/* épilogue — la page blanche */
.sc-page { position: relative; margin: 40px auto 0; max-width: 520px; aspect-ratio: 4/3; background: var(--ivoire); border-radius: 3px; box-shadow: 0 30px 70px rgba(0,0,0,.5); display: grid; place-items: center; }
.sc-page svg { width: 70%; }
.sc-page path { fill: none; stroke: #5b3b2e; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.sc-page.vu path { animation: ecrire 5s ease forwards .4s; }
@keyframes ecrire { to { stroke-dashoffset: 0; } }
.sc-page text { font: 400 54px var(--f-script); fill: #5b3b2e; opacity: 0; }
.sc-page.vu text { animation: apparait 2s ease forwards 3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
  html { scroll-behavior: auto; }
}