/* ==========================================================================
   Variante « relief » de la version finale B (pour Alexandre, 5 nov. 2026)
   Mêmes textes, polices et couleurs que la version de Vanessa. Seuls changent la matière et la profondeur.
   Idée directrice : l'heure bleue. Le site parle du soir et du retour à la maison :
   le bleu uni devient un ciel de crépuscule, avec un halo doré qui respire comme une lampe allumée,
   et les photos deviennent des fenêtres (bords arrondis, liseré de lumière, ombre bleutée).
   Chargé en dernier, uniquement par les pages de /relief/ (générées par scripts/build-relief.py).
   ========================================================================== */
.relief{
  --nuit:#0d1840;
  --ombre-photo:0 2px 4px -2px #0a12304d,0 18px 36px -18px #0a123099,0 46px 90px -40px #0a1230cc;
  /* Ombre longue : la photo se détache du ciel, comme posée au premier plan. */
  --ombre-longue:0 2px 6px -2px #050b2466,0 36px 64px -28px #050b24b3,0 90px 150px -50px #050b24f2;
  --ombre-carte:0 1px 2px #14245114,0 20px 44px -28px #14245173;
  --rayon-photo:22px;
  --rayon-carte:18px;
  /* Grain très fin : enlève l'effet « aplat numérique » des grands fonds. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-fond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --crepuscule:
    radial-gradient(40% 46% at 50% 4%,#dfb10047,transparent 70%),
    radial-gradient(48% 52% at 6% 62%,#2c55b366,transparent 72%),
    radial-gradient(44% 50% at 96% 92%,#203f84b3,transparent 72%),
    linear-gradient(180deg,#152657 0%,#101d49 52%,var(--nuit) 100%);
}

/* ---------- Accueil : le ciel du soir, derrière toute la page ---------- */
.relief.entree-finale{background:var(--nuit);isolation:isolate}
.relief.entree-finale::before,.relief.entree-finale::after{content:'';position:fixed;pointer-events:none}
.relief.entree-finale::before{inset:-18vmax;z-index:-2;background:var(--crepuscule);animation:heure-bleue 36s ease-in-out infinite alternate}
.relief.entree-finale::after{inset:0;z-index:-1;background:var(--grain);opacity:.06;mix-blend-mode:overlay}
@keyframes heure-bleue{
  50%{transform:translate3d(2.5vmax,-1.5vmax,0) scale(1.04)}
  to{transform:translate3d(-2vmax,1vmax,0) scale(1.07) rotate(1.5deg)}
}
/* Pas de backdrop-filter sur les en-têtes : il capturerait le bouton pause, positionné en fixe. */
.relief.entree-finale .entree-head{background:#0d18404d;border-bottom-color:#ffffff14}
.relief.entree-finale .together,.relief.entree-finale .entree-foot{border-color:#ffffff14}

/* Les deux photos : deux fenêtres droites, détachées du ciel par une ombre longue (demande d'Alexandre : pas d'inclinaison). */
.relief .duo-pair{gap:clamp(20px,3vw,40px);padding-bottom:60px}
.relief .duo-frame,.relief .cinema{border-radius:var(--rayon-photo);box-shadow:var(--ombre-longue)}
.relief .duo-frame::before,.relief.finale .cinema::before{content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff24,inset 0 1px 0 #ffffff4d}

/* Les deux portes : verre dépoli sur le ciel, liseré de lumière dorée en haut à gauche. */
.relief.entree-finale .door{border-radius:var(--rayon-photo);border:0;box-shadow:0 30px 70px -34px #000c,inset 0 1px 0 #ffffff1f;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.relief.entree-finale .door-left{background:linear-gradient(160deg,#21387acc 0%,#132252b3 100%)}
.relief.entree-finale .door-right{background:linear-gradient(150deg,#2d56b2 0%,#203f84 55%,#1a336f 100%)}
.relief.entree-finale .door::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(135deg,#dfb100b3,#dfb10000 38%,#ffffff00 70%,#ffffff40);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.relief.entree-finale .door:hover{transform:translateY(-6px);box-shadow:0 40px 80px -36px #000e,inset 0 1px 0 #ffffff26}

/* Le souffle : le point qui respire suffit, sans le mot (qui venait chevaucher le titre). */
.relief .souffle-label{display:none}

/* Le couple apaisé : la seule image qui reçoit la lumière dorée. */
.relief .projection figure{border-radius:28px;box-shadow:var(--ombre-longue),0 0 140px -40px #dfb10066;position:relative}
.relief .projection figure::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff26,inset 0 1px 0 #ffffff59}

/* ---------- Boutons : l'or prend du volume ---------- */
.relief .button{border-radius:12px;background:linear-gradient(180deg,#f2cb2e 0%,#dfb100 100%);box-shadow:inset 0 1px 0 #ffffff80,0 14px 28px -16px #b98f00}
.relief .button:hover{background:linear-gradient(180deg,#f6d548 0%,#e8bb08 100%);box-shadow:inset 0 1px 0 #ffffff99,0 20px 36px -16px #b98f00}

/* ---------- Pages intérieures ---------- */
/* Le grain sur la photo d'ouverture, comme un tirage. */
.relief .present-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain);opacity:.07;mix-blend-mode:overlay}

/* La ligne de repères flotte au-dessus de la photo : premier plan, profondeur. */
.relief.finale .trust-line{position:relative;z-index:3;margin:-58px max(4%,calc((100vw - 1240px)/2)) 0;padding:28px 4%;border:1px solid #fff;border-radius:var(--rayon-photo);background:#fffffff2;box-shadow:0 2px 6px #14245112,0 34px 70px -34px #14245180}
/* La section suivante remonte sous la carte (bordure transparente : son fond passe dessous), quel que soit son espacement. */
.relief.finale .trust-line+section{margin-top:-46px;border-top:46px solid transparent}

/* Deux halos discrets sur les fonds clairs, jamais plus. */
.relief.finale .outcomes{background:radial-gradient(55% 70% at 100% 0%,#dfb1001f,transparent 70%),var(--laiteux)}
.relief.finale .present-faq{background:radial-gradient(50% 80% at 0% 100%,#203f841a,transparent 70%),var(--laiteux)}
.relief .choices button{border-radius:14px}
.relief .choices button[aria-pressed=true]{background:linear-gradient(120deg,#2d56b2,#203f84);box-shadow:0 18px 34px -20px #203f84}

/* Vanessa : le bleu prend de la profondeur, son portrait sort du cadre. */
.relief .present-about{background:radial-gradient(70% 60% at 100% 0%,#2d56b2cc,transparent 70%),radial-gradient(60% 60% at 0% 100%,#dfb10024,transparent 70%),var(--grain-fond),var(--ink)}
.relief .vanessa-picture>span{border-radius:10px;box-shadow:0 22px 40px -18px #0a1230b3}

/* Cartes « ce que vous vivez » (essai) */
.relief .vecu-step{border-radius:var(--rayon-carte);border-top:0;box-shadow:var(--ombre-carte)}
.relief .vecu-words{background:linear-gradient(160deg,#203f84,#142451)}
.relief .vecu-calm{box-shadow:var(--ombre-carte),inset 0 3px 0 var(--gold)}

/* Témoignage : l'or n'est plus un aplat. */
.relief .present-proof{background:radial-gradient(70% 120% at 85% 0%,#f6d64f,transparent 62%),linear-gradient(135deg,#e7bd14,#d4a700)}

/* Contact : on retrouve le ciel du soir de l'accueil. */
.relief .present-contact{background:radial-gradient(50% 60% at 50% 112%,#dfb10047,transparent 70%),var(--grain-fond),var(--crepuscule)}
.relief .contact-orbit{border-color:#dfb10040;box-shadow:0 0 120px -30px #dfb10033 inset}

/* ==========================================================================
   Harmonisation (proposition du 5 nov.) : un seul site, du soir au jour.
   Chaque page s'ouvre et se ferme sur le ciel du soir de l'accueil ; la lecture se fait sur fond clair.
   Même en-tête sombre partout (logo en réserve), même photo-fenêtre à ombre longue, même pied de page.
   ========================================================================== */
.relief .review{background:#0a1433;color:#fff}
.relief.finale .nav{background:#111e4a;color:#fff;border-bottom-color:#ffffff14}
.relief.finale .nav nav{background:transparent}
.relief.finale .present-hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(32px,5vw,80px);min-height:0;padding:clamp(48px,6vw,88px) max(5%,calc((100vw - 1240px)/2)) 140px;background:var(--crepuscule)}
.relief.finale .present-hero::before{display:none}
.relief.finale .present-hero-copy{grid-column:1;grid-row:1;padding:0;max-width:600px}
.relief.finale .cinema{grid-column:2;grid-row:1;position:relative;inset:auto;z-index:0;aspect-ratio:4/3}
.relief.finale footer{background:var(--nuit);color:#fff;border-top:1px solid #ffffff14}
.relief.finale footer>p{color:var(--gold)}

/* ==========================================================================
   Accueil dans l'ordre de www (Alexandre, 5 nov. soir) : « Une vie à deux » → les deux photos → les portes.
   Dans chaque porte, le bouton passe sous le titre, en bouton or, et toute la porte est cliquable
   (lien étiré : le ::after du bouton couvre la carte ; le nom accessible reste celui du bouton).
   ========================================================================== */
.relief.entree-finale .door{cursor:pointer}
.relief.entree-finale .door-cta-haut{align-self:flex-start;margin:0 0 26px;padding:15px 22px;gap:18px;border-radius:12px;color:var(--accent-ink);background:linear-gradient(180deg,#f2cb2e 0%,#dfb100 100%);box-shadow:inset 0 1px 0 #ffffff80,0 14px 28px -16px #000;transition:background .2s,box-shadow .2s}
.relief.entree-finale .door-cta-haut span{border:0;padding:0}
.relief.entree-finale .door-cta-haut::after{content:'';position:absolute;inset:0;z-index:3;border-radius:var(--rayon-photo)}
.relief.entree-finale .door:hover .door-cta-haut{background:linear-gradient(180deg,#f6d548 0%,#e8bb08 100%);box-shadow:inset 0 1px 0 #ffffff99,0 20px 36px -16px #000}
.relief.entree-finale .door:hover .door-cta-haut b{transform:translateX(6px)}
.relief.entree-finale .door-cta-haut:focus-visible{outline:none}
.relief.entree-finale .door:has(.door-cta-haut:focus-visible){outline:3px solid var(--gold);outline-offset:4px}
.relief.entree-finale .duo-lien{position:absolute;inset:0;z-index:4;border-radius:var(--rayon-photo);cursor:pointer}
.relief.entree-finale .duo-frame{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.relief.entree-finale .duo-side:hover .duo-frame{transform:translateY(-6px);box-shadow:var(--ombre-longue),0 0 0 2px #dfb10080}
@media (max-width:980px){.relief.entree-finale .door-cta-haut{align-self:stretch;justify-content:space-between;gap:12px;padding:14px 18px}}

/* ---------- Mouvement : pause et préférences respectées ---------- */
.motion-paused.relief.entree-finale::before{animation:none}
@media (prefers-reduced-motion:reduce){
  .relief.entree-finale::before{animation:none}
  .relief.entree-finale .door{transition:none}
  .relief.entree-finale .duo-frame{transition:none}
  .relief.entree-finale .duo-side:hover .duo-frame{transform:none}
}

/* ---------- Téléphone ---------- */
@media (max-width:760px){
  .relief{--rayon-photo:16px}
  .relief .duo-pair{gap:14px;padding-bottom:10px}
  .relief .projection figure{border-radius:18px}
  .relief.finale .trust-line{margin:-28px 16px 0;padding:22px 20px}
  .relief.finale .trust-line+section{margin-top:-30px;border-top-width:30px}
  .relief.entree-finale .door:hover{transform:none}
  .relief.finale .menu,.relief.finale .nav .motion-control{color:#fff;border-color:#ffffff47}
  .relief.finale .nav nav{background:#fff;color:var(--texte)}
  .relief.finale .present-hero{grid-template-columns:minmax(0,1fr);gap:26px;padding:28px 16px 64px}
  .relief.finale .present-hero-copy{padding:0 4px}
  .relief.finale .cinema{grid-column:1;grid-row:2;height:auto}
  .relief .duo-pair{padding-bottom:36px}
  .relief.entree-finale .door-cta-haut{margin-bottom:20px}
}
.relief.finale .cinema img[src$="femme-seule.jpg"]{object-position:100% center}