/* ==========================================================================
   Église Baptiste Béraca Boston — page « expérience »

   Page autonome, volontairement sombre. Elle ne touche pas style.css :
   si vous la supprimez un jour, le site principal ne bouge pas.

   TYPOGRAPHIE. Le brief demandait un display condensé très contrasté.
   Un condensé industriel sonne automobile, pas église. On garde donc
   Cormorant Garamond, déjà hébergé par le site : forte modulation du
   trait, même famille que la page d'accueil, registre calme. Inter reste
   le sans, uniquement pour les petites capitales et les légendes.
   ========================================================================== */

@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-latin.woff2") format("woff2");
  font-weight:300 700; font-display:swap;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonts/cormorant-latin-italic.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
}

:root{
  --nuit:#07090F;
  --nuit-2:#0C111C;
  --marin:#0B2149;
  --or:#C9A961;
  --or-clair:#E6D2A0;
  --blanc:#F2F0EA;
  --gris:#8C93A3;
  --display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --large:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--nuit);
  color:var(--blanc);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

/* Bilingue : même mécanique que le site principal. */
.lang-fr [lang="ht"],
.lang-ht [lang="fr"]{display:none}

/* ---------- Jauge de lecture ---------- */
.jauge{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:rgba(255,255,255,.06)}
.jauge span{display:block;height:100%;width:0;background:var(--or);transition:width .1s linear}

/* ---------- Barre du haut ---------- */
.barre{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(18px,4vw,40px);
  background:linear-gradient(180deg, rgba(7,9,15,.92) 0%, rgba(7,9,15,0) 100%);
}
.barre-marque{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--display);font-size:1.18rem;letter-spacing:.02em;
}
.barre-marque img{border-radius:50%}
.barre-droite{display:flex;align-items:center;gap:14px}
.langues{display:flex;border:1px solid rgba(242,240,234,.22);border-radius:999px;overflow:hidden}
.langues button{
  appearance:none;background:transparent;color:var(--gris);border:0;cursor:pointer;
  font:600 .68rem/1 var(--sans);letter-spacing:.14em;padding:7px 11px;
}
.langues button[aria-pressed="true"]{background:var(--or);color:#1A1406}
.barre-retour{
  text-decoration:none;color:var(--gris);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}
.barre-retour:hover{color:var(--blanc)}

/* ---------- Trame commune des actes ---------- */
.acte{position:relative}
.acte--texte,
.acte--final{
  max-width:var(--large);margin:0 auto;
  padding:clamp(90px,16vh,170px) clamp(22px,5vw,40px);
}

.chapitre{
  display:flex;align-items:center;gap:14px;
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gris);font-weight:600;margin:0 0 34px;
}
.chapitre span:first-child{
  font-family:var(--display);font-size:1.5rem;letter-spacing:0;
  color:var(--or);text-transform:none;
}

/* ---------- Ouverture ---------- */
.acte--ouverture{
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:110px clamp(22px,5vw,40px) 80px;overflow:hidden;
}
.fond{position:absolute;inset:0;z-index:0}
.fond img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transform:scale(1.16);will-change:transform,filter;
  filter:brightness(.34) saturate(.72) contrast(1.05);
}
.voile{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 50% 45%, rgba(7,9,15,.18) 0%, rgba(7,9,15,.86) 62%, var(--nuit) 100%),
    linear-gradient(180deg, rgba(7,9,15,.72) 0%, rgba(7,9,15,.2) 34%, var(--nuit) 100%);
}
/* Grain très fin : il masque la faible définition des photos d'origine. */
.grain{
  position:absolute;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23b)' opacity='.5'/></svg>");
}
.ouverture-centre{position:relative;z-index:1;max-width:760px}
.embleme{
  width:clamp(74px,10vw,96px);height:auto;margin:0 auto 26px;
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.6));
}
.sur-titre{
  margin:0 0 18px;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--or);font-weight:600;
}
.titre-geant{
  font-family:var(--display);font-weight:600;
  font-size:clamp(2.7rem,8.4vw,6.1rem);line-height:1.02;
  margin:0 0 30px;letter-spacing:.14em;opacity:0;
  transition:letter-spacing 1.5s cubic-bezier(.16,1,.3,1), opacity 1.5s ease;
}
.titre-geant em{font-style:italic;color:var(--or-clair)}
body.pret .titre-geant{letter-spacing:.012em;opacity:1}
.verset{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.06rem,2.3vw,1.42rem);line-height:1.6;
  color:rgba(242,240,234,.74);margin:0;
}
.indice{
  position:absolute;bottom:30px;left:0;right:0;z-index:1;
  font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gris);margin:0;animation:respire 2.6s ease-in-out infinite;
}
@keyframes respire{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.9;transform:translateY(5px)}}

/* ---------- Blocs de texte ---------- */
.phrase-forte{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,4.3vw,3.05rem);line-height:1.22;
  margin:0 0 34px;max-width:19ch;
}
.paragraphe{
  font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.78;
  color:rgba(242,240,234,.7);max-width:56ch;margin:0 0 42px;
}

.portrait{margin:0;max-width:420px}
.portrait img{border-radius:3px;filter:brightness(.94) contrast(1.03)}
.portrait figcaption{
  margin-top:16px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gris);
}
.portrait .nom{display:block;color:var(--or);font-weight:600;margin-bottom:5px}

/* ---------- Pistes qui se figent ---------- */
.piste{height:var(--duree)}
.colle{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:flex-start;
  max-width:var(--large);margin:0 auto;
  padding:96px clamp(22px,5vw,40px) 60px;
}
.piste-intro{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.2rem,2.6vw,1.7rem);color:rgba(242,240,234,.6);
  margin:0 0 40px;
}

.detail{
  position:absolute;left:clamp(22px,5vw,40px);right:clamp(22px,5vw,40px);
  top:56%;transform:translateY(-46%);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,5vw,60px);align-items:center;
  opacity:0;pointer-events:none;
  max-width:calc(var(--large) - clamp(44px,10vw,80px));
}
.detail img{
  /* On ne dépasse jamais la taille réelle du fichier : au-delà,
     l'image devient molle et le grain de la photo se voit. */
  width:100%;max-width:620px;border-radius:3px;
  filter:brightness(.92) contrast(1.06) saturate(.94);
}
.detail-txt{min-width:0}
.detail-nom{
  font-family:var(--display);font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.1;margin:0 0 14px;
}
.detail-mot{
  font-size:clamp(.98rem,1.5vw,1.1rem);color:rgba(242,240,234,.62);
  margin:0;max-width:34ch;
}
.puces{
  position:absolute;bottom:52px;left:clamp(22px,5vw,40px);
  display:flex;gap:9px;list-style:none;margin:0;padding:0;
}
.puces li{width:26px;height:2px;background:rgba(242,240,234,.2);transition:background .3s}
.puces li.actif{background:var(--or)}

/* ---------- Convergence ---------- */
.colle--assemblage{align-items:center;justify-content:center;text-align:center}
.convergence{
  position:relative;width:100%;max-width:640px;height:min(52vh,360px);
  margin:6px auto 62px;
  /* Les quatre mots partent d'au-delà du cadre. Sans ce découpage ils
     élargissent la page sur téléphone et créent une barre horizontale. */
  overflow:hidden;
}
.pilier{
  position:absolute;left:50%;top:50%;
  font-family:var(--display);font-size:clamp(1.3rem,3.4vw,2.2rem);
  color:var(--or-clair);white-space:nowrap;
  transform:translate(-50%,-50%);will-change:transform,opacity;
}
.convergence-embleme{
  position:absolute;left:50%;top:50%;width:clamp(84px,13vw,120px);height:auto;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  will-change:transform,opacity;
}
.faits{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 40px;margin:0;text-align:left;width:100%;max-width:640px;
  margin-left:auto;margin-right:auto;
}
.faits div{border-top:1px solid rgba(242,240,234,.14);padding-top:12px}
.faits dt{
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris);font-weight:600;margin-bottom:5px;
}
.faits dd{margin:0;font-family:var(--display);font-size:clamp(1.05rem,2.1vw,1.4rem);color:var(--blanc)}

/* ---------- Acte large ---------- */
.acte--large{position:relative;padding:clamp(70px,12vh,120px) 0}
.pleine{margin:0;overflow:hidden;max-height:82svh}
.pleine img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.66) contrast(1.04) saturate(.9);
  will-change:transform;
}
.pleine-texte{
  max-width:var(--large);margin:-70px auto 0;position:relative;z-index:1;
  padding:0 clamp(22px,5vw,40px);
}
.pleine-texte .paragraphe{margin-bottom:0}

/* ---------- Final ---------- */
.acte--final{text-align:center}
.acte--final .chapitre{justify-content:center}
.final-ligne{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.1rem,6.6vw,4.6rem);line-height:1.1;
  margin:0 0 .12em;
}
.final-ligne--or{color:var(--or-clair);font-style:italic}
.final-note{
  margin:34px auto 46px;max-width:38ch;
  color:rgba(242,240,234,.58);font-size:clamp(.96rem,1.5vw,1.08rem);
}
.final-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:46px}
.bouton{
  display:inline-block;text-decoration:none;
  padding:14px 30px;border-radius:999px;border:1px solid transparent;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  background:transparent;color:inherit;transition:background .25s, color .25s, border-color .25s;
}
.bouton--or{background:var(--or);color:#1A1406}
.bouton--or:hover{background:var(--or-clair)}
.bouton--fil{border-color:rgba(242,240,234,.3);color:var(--blanc)}
.bouton--fil:hover{border-color:var(--blanc);background:rgba(242,240,234,.07)}
.final-adresse{
  font-family:var(--display);font-size:1.15rem;color:rgba(242,240,234,.6);margin:0;
}
.final-adresse a{color:var(--or-clair);text-decoration:none}

/* ---------- Pied ---------- */
.pied{
  border-top:1px solid rgba(242,240,234,.1);
  padding:30px clamp(22px,5vw,40px) 40px;text-align:center;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  font-size:.72rem;letter-spacing:.1em;color:var(--gris);
}
.pied a{color:var(--gris);text-decoration:none}
.pied a:hover{color:var(--blanc)}

/* ---------- Révélations ---------- */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
[data-reveal].vu{opacity:1;transform:none}

/* ---------- Téléphone ---------- */
@media (max-width:820px){
  body{font-size:16px}
  .colle{padding-top:104px}
  .detail{grid-template-columns:1fr;gap:22px;transform:translateY(-50%)}
  .detail img{max-height:34svh;object-fit:cover}
  .faits{grid-template-columns:1fr;gap:16px}
  .convergence{height:min(42vh,290px);margin-bottom:46px}
  .pleine{max-height:64svh}
  .pleine-texte{margin-top:-40px}
  .barre-retour{display:none}
}

/* ---------- Mouvement réduit ----------
   Le visiteur qui a demandé moins d'animation voit une page calme :
   tout est visible, plus rien ne bouge. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .titre-geant{opacity:1;letter-spacing:.012em}
  .indice{display:none}
  .piste{height:auto}
  .colle{position:static;height:auto;padding-bottom:40px}
  .detail{position:static;opacity:1 !important;transform:none !important;margin-bottom:48px;max-width:none}
  .puces{display:none}
  .convergence{height:auto;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:34px}
  .pilier,.convergence-embleme{position:static;transform:none !important;opacity:1 !important}
}