/* =========================================================
   BELIEVE BALI  -  Le Portail / L'Eveil
   Ecran d'ouverture plein. HTML / CSS / JS vanilla, 100% statique.
   Palette officielle de Camille, respectee au pixel.
   Concept : on arrive face aux rizieres de Tegallalang plongees dans
   le crepuscule. Au centre, le logo respire dans une lueur bleu ciel.
   Au survol, il eclot : une lumiere chaude jaillit de son coeur et
   irradie vers le bleu signature, des rayons se deploient. L'eveil.
   ========================================================= */

:root {
  /* --- Palette Camille (non negociable) --- */
  --navy:         #040F1F;  /* nuit, voile, vignette, texte sombre */
  --bleu-ciel:    #91D8FF;  /* accent signature */
  --blanc:        #FFFFFF;  /* texte clair, coeur de l'eclosion */
  --creme:        #E6E3D9;  /* texte doux */
  --corail:       #F58754;  /* chaleur du coeur de l'eveil (a doser) */
  --corail-clair: #F2B69A;  /* pointe chaude du coeur lumineux */

  /* --- Courbes de mouvement (jamais linear ni ease-in-out par defaut) --- */
  --ease-doux:     cubic-bezier(0.22, 0.61, 0.36, 1);  /* sortie souple, calme */
  --ease-eclosion: cubic-bezier(0.16, 1, 0.30, 1);     /* expansion ample, organique */

  /* --- Diametre du logo (pilote tout le centre, ajuste en responsive) --- */
  --logo: 280px;

  /* --- Polices (pilotees par variable pour que le theme clair puisse
         basculer toute la typographie d'un seul endroit) --- */
  --police-serif: "Sentient", Georgia, serif;
  --police-corps: "General Sans", system-ui, -apple-system, sans-serif;
  --police-script: "Sentient", Georgia, serif; /* accent manuscrit, surcharge en clair */
}

/* ----------------------- Reset minimal ----------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--police-corps);
  background: var(--navy);
  color: var(--creme);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* =========================================================
   VOILE D'EVEIL
   Couvre tout au chargement (un degrade navy profond), puis se
   dissipe lentement quand la page est prete. Sequence calme.
   ========================================================= */
.eveil {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  /* Un navy un peu vivant, plus profond aux bords : on sort de la nuit */
  background: radial-gradient(120% 120% at 50% 46%,
      #08182c 0%,
      #040f1f 60%,
      #02080f 100%);
  opacity: 1;
  transition: opacity 1600ms var(--ease-doux), visibility 1600ms var(--ease-doux);
}

/* La page est prete : le voile se leve */
body.is-ready .eveil {
  opacity: 0;
  visibility: hidden;
}

/* =========================================================
   STRUCTURE DU PORTAIL
   Empilement en z-index POSITIFS pour eviter qu'un contexte
   d'empilement ne masque le fond de maniere intermittente :
   fond 0 < voile 1 < vignette 2 < contenu 3 < grain 4.
   ========================================================= */
.portail {
  position: relative;
  width: 100%;
  /* dvh pour eviter le saut de viewport sur iOS Safari */
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--navy); /* secours sous l'image */
}

/* --- Fond rizieres + ken burns tres lent --- */
.portail__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.portail__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  /* Mer turquoise de Bali : on garde l'eau vive et vraie pour que le logo
     cyan de Camille fonde dedans, avec juste assez d'ombre pour que
     l'eclosion lumineuse jaillisse (de l'ombre vers la lumiere). */
  filter: saturate(1.08) brightness(0.86) contrast(1.02);
  transform: scale(1.04);
  transform-origin: 50% 64%;
  /* Plus de ken burns ici, 26/07/2026. Cette image n'est plus une photo a part
     entiere : c'est la premiere image de la video, qui prend le relais au bout
     d'une seconde. Elle doit donc etre a l'echelle EXACTE de la video (1.04),
     sinon le fondu ferait un micro-saut de zoom. Le mouvement, c'est la video
     qui le donne maintenant. Sans JS ou en mouvement reduit, on garde ce plan
     fixe, ce qui est de toute facon ce qu'attend quelqu'un en mouvement reduit. */
}

/* --- Video d'ambiance : meme cadre que l'image, elle bouge d'elle-meme (pas de ken burns) --- */
.portail__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  filter: saturate(1.08) brightness(0.86) contrast(1.02);
  transform: scale(1.04);
  /* Meme point d'ancrage que l'image, sinon le meme zoom de 4 % ne tombe pas
     au meme endroit et le fondu glisse de 5 px a la verticale. */
  transform-origin: 50% 64%;
  will-change: opacity;
  /* Fondu doux : la premiere image se dissout dans la video une fois prete a jouer */
  opacity: 0;
  transition: opacity 1.4s ease;
}
.portail__video.est-visible { opacity: 1; }

/* --- Voile navy pour la lisibilite globale --- */
.portail__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Voile vertical : ancre la signature et l'invitation en bas,
     assombrit doucement le haut. Le bas fond jusqu'au navy plein pour
     qu'il n'y ait aucune coupure avec la section de texte qui suit :
     la photo se dissout dans la meme nuit que le seuil. */
  background: linear-gradient(to bottom,
      rgba(4, 15, 31, 0.30) 0%,
      rgba(4, 15, 31, 0.06) 24%,
      rgba(4, 15, 31, 0.04) 48%,
      rgba(4, 15, 31, 0.22) 66%,
      rgba(4, 15, 31, 0.58) 82%,
      rgba(4, 15, 31, 0.90) 92%,
      rgba(4, 15, 31, 1.00) 99%);
}

/* --- Vignette : plus sombre sur les bords, plus clair au centre ---
   C'est elle qui cree la chambre de lumiere autour du logo et qui
   permet a l'eclosion de jaillir sur une base assombrie. */
.portail__vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(125% 108% at 50% 52%,
      rgba(4, 15, 31, 0.00) 0%,
      rgba(4, 15, 31, 0.06) 38%,
      rgba(4, 15, 31, 0.28) 70%,
      rgba(4, 15, 31, 0.56) 90%,
      rgba(4, 15, 31, 0.70) 100%);
}

/* --- Grain de film, fixe, sans interaction (texture physique subtile) ---
   Composition normale, faible opacite, pas de blend-mode pour rester
   fiable sur tous les navigateurs. Pseudo-fixe + pointer-events:none. */
.portail__grain {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   SCENE : le coeur, centre exact de l'ecran
   ========================================================= */
.scene {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

/* =========================================================
   LE SCEAU : le logo qui respire puis eclot
   Le bouton est transparent : il sert de chambre d'eclosion et de
   cible accessible (focus clavier, tap mobile).
   ========================================================= */
.sceau {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--logo);
  height: var(--logo);
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Entree a la charge de page : fondu + legere montee */
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1500ms var(--ease-doux), transform 1500ms var(--ease-doux);
}

body.is-ready .sceau {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 420ms;
}

/* --- Lueur d'ambiance permanente ---
   Assise lumineuse bleu ciel sous le logo au repos. Le logo a un fond
   carre sombre (le visuel d'origine n'est pas detoure) : cette lueur,
   plus la vignette navy du centre, fondent ce carre dans la nuit pour
   qu'on ne percoive qu'un disque lumineux. Elle s'intensifie a l'eclosion. */
.sceau::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 168%;
  height: 168%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at center,
      rgba(145, 216, 255, 0.34) 0%,
      rgba(170, 224, 255, 0.18) 36%,
      rgba(145, 216, 255, 0.06) 56%,
      rgba(145, 216, 255, 0.00) 72%);
  opacity: 0.85;
  transform: scale(1);
  transition: opacity 900ms var(--ease-doux), transform 900ms var(--ease-eclosion);
  /* Respiration tres lente de la lueur */
  animation: respireLueur 6s ease-in-out infinite;
}

@keyframes respireLueur {
  0%, 100% { transform: scale(1);    opacity: 0.68; }
  50%      { transform: scale(1.05); opacity: 0.88; }
}

/* --- Les rayons : eventail conique qui tourne tres lentement ---
   Place tout au fond du sceau (z 0). Eteint au repos. */
.sceau__rayons {
  position: absolute;
  z-index: 0;
  width: 360%;
  height: 360%;
  border-radius: 50%;
  pointer-events: none;
  /* Fins rayons alternes, attenues vers l'exterieur par le masque radial. */
  background: repeating-conic-gradient(
      from 0deg,
      rgba(255, 248, 236, 0.00) 0deg,
      rgba(255, 248, 236, 0.00) 3deg,
      rgba(255, 241, 224, 0.80) 4deg,
      rgba(248, 152, 104, 0.60) 4.4deg,
      rgba(255, 248, 236, 0.00) 5deg,
      rgba(255, 248, 236, 0.00) 8deg);
  /* Fondu radial : rayons nuls au centre (sous le logo), forts juste apres,
     eteints aux bords. */
  -webkit-mask-image: radial-gradient(circle, transparent 12%, #000 22%, rgba(0,0,0,0.5) 42%, transparent 66%);
          mask-image: radial-gradient(circle, transparent 12%, #000 22%, rgba(0,0,0,0.5) 42%, transparent 66%);
  opacity: 0;
  transform: scale(0.7) rotate(0deg);
  transition: opacity 1000ms var(--ease-doux), transform 1000ms var(--ease-eclosion);
  will-change: transform, opacity;
}

/* --- Le halo radial : coeur chaud blanc -> corail -> bleu ciel -> transparent ---
   La piece maitresse. Eteint et replie au repos, il jaillit a l'eclosion. */
.sceau__halo {
  position: absolute;
  z-index: 1;
  width: 340%;
  height: 340%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at center,
      rgba(255, 253, 248, 1.00)  0%,   /* coeur blanc chaud, plein */
      rgba(255, 230, 205, 0.95)  9%,
      rgba(248, 152, 104, 0.80)  20%,  /* corail, la chaleur de l'eveil */
      rgba(150, 214, 252, 0.66)  40%,  /* bleu ciel signature */
      rgba(145, 216, 255, 0.26)  60%,
      rgba(145, 216, 255, 0.00)  78%);
  /* Decalage parallaxe (souris), pilote par le JS, neutre par defaut */
  --decalX: 0px;
  --decalY: 0px;
  opacity: 0;
  transform: translate(var(--decalX), var(--decalY)) scale(0.6);
  transition: opacity 900ms var(--ease-doux), transform 900ms var(--ease-eclosion);
  will-change: transform, opacity;
}

/* --- Le logo lui-meme --- */
.sceau__logo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  /* Glow doux au repos, assez present pour detacher le logo de la nuit
     et faire fondre son fond carre. */
  filter:
    drop-shadow(0 0 14px rgba(145, 216, 255, 0.50))
    drop-shadow(0 0 40px rgba(145, 216, 255, 0.30))
    drop-shadow(0 8px 34px rgba(4, 15, 31, 0.6));
  transform: scale(1);
  animation: respireLogo 6s ease-in-out infinite;
  transition: transform 850ms var(--ease-eclosion), filter 850ms var(--ease-doux);
}

@keyframes respireLogo {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.022); }
}

/* =========================================================
   L'ECLOSION  -  etat actif
   Declenche par le survol et le focus clavier (desktop) ou par la
   classe .is-eclos posee par le JS (tap mobile, eclosion d'arrivee).
   ========================================================= */

/* Le halo jaillit : de scale 0.6 invisible a scale 2.2 plein */
.sceau:hover .sceau__halo,
.sceau:focus-visible .sceau__halo,
.sceau.is-eclos .sceau__halo {
  opacity: 1;
  transform: translate(var(--decalX), var(--decalY)) scale(2.2);
}

/* Les rayons se deploient et tournent tres lentement */
.sceau:hover .sceau__rayons,
.sceau:focus-visible .sceau__rayons,
.sceau.is-eclos .sceau__rayons {
  opacity: 0.9;
  transform: scale(1) rotate(22deg);
  animation: tourneRayons 64s linear infinite;
}

/* Le logo s'eclaire et grandit subtilement */
.sceau:hover .sceau__logo,
.sceau:focus-visible .sceau__logo,
.sceau.is-eclos .sceau__logo {
  transform: scale(1.06);
  filter:
    drop-shadow(0 0 30px rgba(145, 216, 255, 0.70))
    drop-shadow(0 0 80px rgba(242, 182, 154, 0.50))
    brightness(1.14);
  /* On fige la respiration pour ne pas concurrencer le scale */
  animation-play-state: paused;
}

/* La lueur d'ambiance s'amplifie */
.sceau:hover::before,
.sceau:focus-visible::before,
.sceau.is-eclos::before {
  opacity: 1;
  transform: scale(1.4);
  animation-play-state: paused;
}

@keyframes tourneRayons {
  from { transform: scale(1) rotate(22deg); }
  to   { transform: scale(1) rotate(382deg); }
}

/* Focus clavier : on garde l'eclosion et on ajoute un anneau discret et net */
.sceau:focus { outline: none; }
.sceau:focus-visible { outline: none; }
.sceau:focus-visible::after {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(145, 216, 255, 0.5);
  z-index: 3;
}

/* =========================================================
   SIGNATURE sous le logo (microcopie discrete)
   ========================================================= */
.signature {
  margin-top: 36px;
  font-family: var(--police-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1rem, 1.02rem + 0.5vw, 1.45rem);
  letter-spacing: 0.16em;
  color: rgba(230, 227, 217, 0.82);
  text-shadow: 0 2px 24px rgba(4, 15, 31, 0.85);
  /* Entree decalee, apres le logo */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1300ms var(--ease-doux), transform 1300ms var(--ease-doux);
}

body.is-ready .signature {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 820ms;
}

/* =========================================================
   INVITATION A ENTRER (bas de l'ecran, style izanami)
   ========================================================= */
.invitation {
  position: absolute;
  bottom: clamp(28px, 5vh, 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  /* Entree la plus tardive */
  opacity: 0;
  transition: opacity 1500ms var(--ease-doux);
}

body.is-ready .invitation {
  opacity: 1;
  transition-delay: 1180ms;
}

.invitation:hover .invitation__mot {
  color: var(--blanc);
}

.invitation__mot {
  font-family: var(--police-corps);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  padding-left: 0.34em; /* compense le tracking a droite, recentre le mot */
  color: rgba(145, 216, 255, 0.78);
  transition: color 600ms var(--ease-doux);
}

/* Fine ligne lumineuse verticale */
.invitation__ligne {
  position: relative;
  width: 1px;
  height: 54px;
  background: linear-gradient(to bottom,
      rgba(145, 216, 255, 0.0) 0%,
      rgba(145, 216, 255, 0.5) 50%,
      rgba(145, 216, 255, 0.0) 100%);
  overflow: hidden;
}

/* Un point lumineux descend en boucle le long de la ligne */
.invitation__ligne::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 3px;
  height: 18px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--bleu-ciel);
  box-shadow: 0 0 10px 1px rgba(145, 216, 255, 0.8);
  animation: descend 2.6s var(--ease-doux) infinite;
}

@keyframes descend {
  0%   { transform: translateY(0);    opacity: 0; }
  22%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateY(300%); opacity: 0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ----- Orientation portrait (mobile et tablette verticale) -----
   L'image 16:9 est fortement zoomee par le cover : on la remonte et on
   allege un peu la vignette pour que les rizieres restent vivantes. */
@media (orientation: portrait) {
  /* En portrait, le cover ne montre qu'une bande verticale etroite de la
     photo : on l'eclaircit et on cale le cadrage sur l'eau turquoise calme
     (cote droit) pour que le logo cyan fonde dans la mer. */
  .portail__image {
    filter: saturate(1.06) brightness(0.92) contrast(1.01);
    object-position: 64% 56%;
  }
  .portail__video { object-position: 64% 56%; }

  /* Voile vertical allege : on garde juste assez de navy pour ancrer la
     signature et l'invitation, sans noyer les rizieres. */
  .portail__voile {
    background: linear-gradient(to bottom,
        rgba(4, 15, 31, 0.32) 0%,
        rgba(4, 15, 31, 0.06) 26%,
        rgba(4, 15, 31, 0.06) 50%,
        rgba(4, 15, 31, 0.42) 78%,
        rgba(4, 15, 31, 0.90) 93%,
        rgba(4, 15, 31, 1.00) 100%);
  }

  /* Vignette nettement plus douce : la chambre de lumiere reste, mais les
     bords ne tombent plus dans le noir. */
  .portail__vignette {
    background: radial-gradient(155% 100% at 50% 46%,
        rgba(4, 15, 31, 0.00) 0%,
        rgba(4, 15, 31, 0.06) 46%,
        rgba(4, 15, 31, 0.28) 78%,
        rgba(4, 15, 31, 0.52) 100%);
  }
}

/* ----- Tablette ----- */
@media (max-width: 900px) {
  :root { --logo: 232px; }
}

/* ----- Mobile ----- */
@media (max-width: 600px) {
  :root { --logo: 184px; }

  .signature {
    margin-top: 28px;
    letter-spacing: 0.12em;
    font-size: 1.02rem;
    padding: 0 8px;
  }

  .invitation__ligne { height: 44px; }
}

/* ----- Paysage mobile (peu de hauteur) : on compacte ----- */
@media (max-height: 520px) {
  :root { --logo: 140px; }
  .signature { margin-top: 18px; }
  .invitation { bottom: 16px; }
}

/* =========================================================
   ACCESSIBILITE : mouvement reduit
   On coupe les boucles, on garde l'eclosion mais en version statique.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  /* L'image du portail est deja fixe pour tout le monde depuis le 26/07/2026,
     il n'y a donc plus rien a couper ici.
     Mouvement reduit : on masque la video, la premiere image suffit. */
  .portail__video { display: none; }
  .sceau__logo,
  .sceau::before {
    animation: none;
  }
  .invitation__ligne::after {
    animation: none;
    opacity: 1;
    top: 40%;
  }

  /* L'eclosion ne tourne plus, elle s'allume simplement */
  .sceau:hover .sceau__rayons,
  .sceau:focus-visible .sceau__rayons,
  .sceau.is-eclos .sceau__rayons {
    animation: none;
    transform: scale(1) rotate(22deg);
  }

  /* Entrees quasi instantanees pour eviter tout glissement */
  .eveil,
  .sceau,
  .signature,
  .invitation {
    transition-duration: 200ms;
  }
}


/* =========================================================
   =========================================================
   LE SITE  -  Tout ce qui suit le portail
   Meme grammaire visuelle : nuit navy + lueur bleu ciel, chaleur
   corail dosee, respiration creme. Defile fluide, reveals calmes.
   ========================================================= */

:root {
  --sauge:  #CCDAD7;   /* sauge pale, bordures douces sur clair */
  --encre:  #040F1F;   /* texte sombre sur fonds clairs */
  --bord:   clamp(1.4rem, 5vw, 4rem);    /* gouttiere laterale */
  --bloc-y: clamp(5.5rem, 12vh, 10rem);  /* respiration verticale des sections */
  --mesure: 60ch;       /* longueur de ligne confortable */
  --nav-h:  76px;
}

/* Ancres : on degage la hauteur de la nav fixe */
[id] { scroll-margin-top: calc(var(--nav-h) + 1.2rem); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

a { color: inherit; }

/* ----------------------- Primitives de mise en page ----------------------- */
.enveloppe {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--bord);
}

.bloc { padding-block: var(--bloc-y); }
.bloc--navy  { background: var(--navy);  color: var(--creme); }
.bloc--creme { background: var(--creme); color: var(--encre); }

/* ----------------------- Reveal au defilement -----------------------
   Le contenu est VISIBLE par defaut : si le JavaScript ne s'execute pas
   (script en erreur, bloque par le reseau, ou non charge), rien ne
   disparait, la page reste entierement lisible.
   L'animation d'apparition n'est armee que lorsqu'un petit script pose
   la classe .reveal-anim sur <html>, avant le premier rendu. */
.reveal {
  opacity: 1;
  transform: none;
}
html.reveal-anim .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1100ms var(--ease-doux), transform 1100ms var(--ease-doux);
}
html.reveal-anim .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delai="1"] { transition-delay: 110ms; }
.reveal[data-delai="2"] { transition-delay: 220ms; }
.reveal[data-delai="3"] { transition-delay: 330ms; }
.reveal[data-delai="4"] { transition-delay: 440ms; }

/* ----------------------- Typographie editoriale ----------------------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bleu-ciel);
  margin-bottom: 1.5rem;
}
.kicker__sep { opacity: 0.5; }
.kicker--sombre { color: rgba(4, 15, 31, 0.5); }

.titre {
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.5vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--blanc);
  max-width: 22ch;
}
.titre--xl {
  font-size: clamp(2.4rem, 1.5rem + 3.8vw, 4rem);
  line-height: 1.08;
  max-width: 15ch;
}
.titre--sombre { color: var(--encre); }

.prose {
  font-size: clamp(1.02rem, 0.99rem + 0.35vw, 1.18rem);
  line-height: 1.78;
  color: rgba(230, 227, 217, 0.86);
  max-width: var(--mesure);
  margin-top: 1.6rem;
}
.prose--sombre { color: rgba(4, 15, 31, 0.78); }
.prose--grande {
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.05rem + 1.4vw, 2.1rem);
  line-height: 1.5;
  color: var(--blanc);
  max-width: 20em;
}
.prose--grande em {
  font-style: italic;
  color: var(--bleu-ciel);
}

/* ----------------------- Boutons & liens ----------------------- */
.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.3rem;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.92em 1.9em;
  border-radius: 999px;
  font-family: var(--police-corps);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 500ms var(--ease-eclosion),
              background 500ms var(--ease-doux),
              color 500ms var(--ease-doux),
              border-color 500ms var(--ease-doux),
              box-shadow 500ms var(--ease-doux);
}
.bouton:hover { transform: translateY(-2px); }

.bouton--plein {
  background: var(--bleu-ciel);
  color: var(--navy);
  box-shadow: 0 12px 32px -14px rgba(145, 216, 255, 0.7);
}
.bouton--plein:hover {
  background: #b0e4ff;
  box-shadow: 0 18px 44px -14px rgba(145, 216, 255, 0.9);
}

.bouton--ligne {
  background: transparent;
  color: var(--creme);
  border-color: rgba(230, 227, 217, 0.38);
}
.bouton--ligne:hover {
  border-color: var(--bleu-ciel);
  color: var(--bleu-ciel);
}

.bouton--chaud {
  background: linear-gradient(135deg, #f9a877 0%, var(--corail) 100%);
  color: #2a1206;
  box-shadow: 0 12px 32px -14px rgba(245, 135, 84, 0.75);
}
.bouton--chaud:hover {
  box-shadow: 0 18px 48px -14px rgba(245, 135, 84, 0.95);
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 2rem;
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  color: var(--bleu-ciel);
  text-decoration: none;
  transition: color 450ms var(--ease-doux);
}
.lien-fleche span { transition: transform 500ms var(--ease-eclosion); }
.lien-fleche:hover span { transform: translateX(7px); }
.lien-fleche--sombre { color: var(--encre); }
.lien-fleche--sombre:hover { color: var(--corail); }

/* ----------------------- En-tetes de section ----------------------- */
.entete-section { max-width: var(--mesure); }
.entete-section--centre {
  max-width: min(42rem, 100%);
  margin-inline: auto;
  text-align: center;
}
.entete-section--centre .titre {
  max-width: 100%;
  text-wrap: balance;
}

/* =========================================================
   NAVIGATION FIXE  -  masquee sur le portail, apparait au defilement
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--nav-h);
  padding-inline: clamp(1.2rem, 5vw, 3.4rem);
  background: rgba(4, 15, 31, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
          backdrop-filter: blur(16px) saturate(1.1);
  border-bottom: 1px solid rgba(145, 216, 255, 0.12);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 700ms var(--ease-doux), transform 700ms var(--ease-doux);
}
body.is-defile .nav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__marque {
  font-family: var(--police-serif);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  color: var(--blanc);
  text-decoration: none;
  white-space: nowrap;
}
.nav__marque span { color: var(--bleu-ciel); margin-left: 0.12em; }
.nav__liens {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.2rem);
}
.nav__liens a {
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  color: rgba(230, 227, 217, 0.82);
  text-decoration: none;
  transition: color 400ms var(--ease-doux);
}
.nav__liens a:hover { color: var(--bleu-ciel); }
.nav__cta {
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--navy);
  background: var(--bleu-ciel);
  padding: 0.62em 1.3em;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 400ms var(--ease-doux), transform 400ms var(--ease-eclosion);
}
.nav__cta:hover { background: #b0e4ff; transform: translateY(-1px); }

/* =========================================================
   ECRAN 2  -  LE SEUIL
   ========================================================= */
/* Le seuil partage exactement la nuit du bas du portail : le bord est
   invisible. On y fait descendre un rayon de lumiere, dans le prolongement
   du halo du logo, qui se pose sur le titre et se fond dans le texte. */
.seuil {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.seuil::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 86%;
  pointer-events: none;
  z-index: 0;
  /* Le faisceau : etroit et haut, dans le prolongement du halo du logo.
     Il descend du bord superieur, se pose sur le titre et se fond dans la
     prose. La pointe chaude corail au sommet rappelle le coeur du halo. */
  background:
    radial-gradient(42% 90% at 50% -6%,
        rgba(145, 216, 255, 0.26) 0%,
        rgba(145, 216, 255, 0.12) 28%,
        rgba(145, 216, 255, 0.04) 50%,
        rgba(145, 216, 255, 0.00) 72%),
    radial-gradient(30% 42% at 50% -8%,
        rgba(242, 182, 154, 0.12) 0%,
        rgba(242, 182, 154, 0.00) 62%);
}
.seuil__centre {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.seuil__centre .titre,
.seuil__centre .prose { margin-inline: auto; }
.seuil__centre .boutons { justify-content: center; }

.presse-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 2.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(230, 227, 217, 0.6);
  text-decoration: none;
  transition: color 400ms var(--ease-doux);
}
.presse-mini img {
  height: 17px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition: opacity 400ms var(--ease-doux);
}
.presse-mini:hover { color: var(--creme); }
.presse-mini:hover img { opacity: 1; }

/* =========================================================
   BLOCS SPLIT  -  image + texte cote a cote
   ========================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5.5rem);
}
.split--inverse .split__visuel { order: 2; }
.split--inverse .split__texte  { order: 1; }

.split__visuel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 5;
  box-shadow: 0 44px 90px -44px rgba(4, 15, 31, 0.72);
}
.split__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1700ms var(--ease-doux);
}
.split__visuel.is-visible img { transform: scale(1); }

#presse .split__visuel img { object-position: 36% 50%; }

.presse__logo {
  height: 26px;
  width: auto;
  margin-bottom: 1.6rem;
}

/* =========================================================
   TABLEAUX PLEINE LARGEUR  -  immersion
   ========================================================= */
.tableau {
  position: relative;
  min-height: clamp(440px, 84vh, 780px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--navy);
}
.tableau__fond { position: absolute; inset: 0; z-index: 0; }
.tableau__fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) brightness(0.6) contrast(1.04);
  transform: scale(1.05);
}
.tableau__fond video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.86) brightness(0.6) contrast(1.04);
  transform: scale(1.05);
}
.tableau__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(4,15,31,0.30) 0%, rgba(4,15,31,0.66) 100%),
    linear-gradient(to bottom, rgba(4,15,31,0.5) 0%, rgba(4,15,31,0.2) 40%, rgba(4,15,31,0.5) 100%);
}
.tableau__texte {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 920px;
}
.tableau__texte .prose--grande { margin-inline: auto; }

/* --- Citation pleine largeur --- */
.tableau--citation { min-height: clamp(420px, 78vh, 680px); }
.citation {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 880px;
}
.citation__texte {
  font-family: var(--police-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.9rem);
  line-height: 1.32;
  color: var(--blanc);
  text-shadow: 0 4px 40px rgba(4, 15, 31, 0.7);
}
.citation__auteur {
  margin-top: 1.8rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--bleu-ciel);
}
.citation__auteur span { opacity: 0.55; margin: 0 0.2em; }

/* =========================================================
   ECRAN 5  -  LES TROIS CARTES
   ========================================================= */
.cartes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2rem);
  margin-top: clamp(2.8rem, 5vw, 4.2rem);
}
.carte {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid rgba(204, 218, 215, 0.7);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 34px 64px -40px rgba(4, 15, 31, 0.4);
  transition: transform 600ms var(--ease-eclosion), box-shadow 600ms var(--ease-doux);
}
.carte:hover {
  transform: translateY(-7px);
  box-shadow: 0 50px 90px -44px rgba(4, 15, 31, 0.55);
}
.carte__img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.carte__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1300ms var(--ease-doux);
}
.carte:hover .carte__img img { transform: scale(1.06); }
.carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
}
.carte__meta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(4, 15, 31, 0.5);
  margin-bottom: 0.8rem;
}
.carte__titre {
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--encre);
  margin-bottom: 0.8rem;
}
.carte__texte {
  font-size: 0.98rem;
  line-height: 1.66;
  color: rgba(4, 15, 31, 0.72);
  flex: 1;
}
.carte__prix {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(204, 218, 215, 0.85);
  font-family: var(--police-serif);
  font-size: 1.08rem;
  color: var(--encre);
}
.carte__prix span { color: var(--corail); }

/* =========================================================
   ECRAN 6  -  LES BENEFICES
   ========================================================= */
.benefices {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.6rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.benefice {
  padding-top: 1.7rem;
  border-top: 1px solid rgba(145, 216, 255, 0.22);
}
.benefice__num {
  display: block;
  font-family: var(--police-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: rgba(145, 216, 255, 0.5);
  margin-bottom: 0.9rem;
}
.benefice__titre {
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--blanc);
  margin-bottom: 0.6rem;
}
.benefice__texte {
  font-size: 0.96rem;
  line-height: 1.62;
  color: rgba(230, 227, 217, 0.74);
}

/* =========================================================
   ECRAN 10  -  CONTACT
   ========================================================= */
.contact__grille {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.offre {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  margin-top: 1.9rem;
  padding: 0.75em 1.3em;
  border: 1px solid rgba(145, 216, 255, 0.3);
  border-radius: 999px;
  background: rgba(145, 216, 255, 0.05);
  font-size: 0.95rem;
  color: var(--bleu-ciel);
}
.offre__pastille { color: var(--corail); }

.coords {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.coords__ligne {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(145, 216, 255, 0.14);
}
.coords dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bleu-ciel);
}
.coords dd {
  font-size: 1.05rem;
  color: var(--creme);
}
.coords a { text-decoration: none; transition: color 400ms var(--ease-doux); }
.coords a:hover { color: var(--bleu-ciel); }

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.pied {
  background: #02080f;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  border-top: 1px solid rgba(145, 216, 255, 0.1);
}
.pied__grille {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  gap: 2.5rem;
}
.pied__logo {
  font-family: var(--police-serif);
  font-size: 1.6rem;
  color: var(--blanc);
  text-decoration: none;
}
.pied__logo span { color: var(--bleu-ciel); margin-left: 0.12em; }
.pied__slogan {
  margin-top: 0.7rem;
  font-family: var(--police-serif);
  font-style: italic;
  letter-spacing: 0.04em;
  color: rgba(230, 227, 217, 0.6);
}
/* Les liens sociaux sont le seul bloc de droite depuis que la nav de pied,
   doublon exact de la barre fixe du haut, a ete retiree. Le
   justify-content: space-between de .pied__grille les colle donc au bord
   droit tout seul, sans regle supplementaire. */
.pied__sociaux {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
}
.pied__sociaux a {
  font-size: 0.9rem;
  color: rgba(230, 227, 217, 0.7);
  text-decoration: none;
  transition: color 400ms var(--ease-doux);
}
.pied__sociaux a:hover { color: var(--bleu-ciel); }
.pied__bas {
  max-width: 1200px;
  margin-inline: auto;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.8rem;
  padding-inline: var(--bord);
  text-align: center;
  font-size: 0.82rem;
  color: rgba(230, 227, 217, 0.45);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pied__bas span { opacity: 0.6; margin: 0 0.2em; }

/* =========================================================
   FOCUS VISIBLE  -  accessibilite clavier sur tout le site
   ========================================================= */
a:focus-visible,
.bouton:focus-visible {
  outline: 2px solid var(--bleu-ciel);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================
   RESPONSIVE  -  le site (le portail garde ses propres regles)
   ========================================================= */
@media (max-width: 920px) {
  .split {
    grid-template-columns: 1fr;
    gap: clamp(1.8rem, 5vw, 2.6rem);
  }
  .split--inverse .split__visuel,
  .split--inverse .split__texte { order: 0; }
  .split__visuel { aspect-ratio: 16 / 11; }

  .cartes {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
  }
  .benefices { grid-template-columns: 1fr 1fr; }
  .contact__grille { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav__liens { display: none; }
}

@media (max-width: 560px) {
  .benefices { grid-template-columns: 1fr; }
  .boutons { width: 100%; }
  .bouton { flex: 1 1 auto; }
  .pied__grille { gap: 1.8rem; }
}

/* Mouvement reduit : les reveals s'affichent sans glissement */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .split__visuel img { transform: none; }
  .nav { transition: opacity 200ms linear; }
}


/* =========================================================
   =========================================================
   LES PAGES INTERIEURES  -  histoire, soins, retraites,
   equipe, temoignages. Memes briques que la home, prolongees.
   Le portail reste la signature de l'accueil : ici, un en-tete
   plus leger mais haut de gamme, decline d'une page a l'autre.
   ========================================================= */

/* ----- Pages sans portail : la nav est visible d'emblee -----
   On reserve la hauteur de la nav fixe et on l'affiche sans attendre
   le defilement (la home, elle, la revele apres le portail). */
body.page-interieure { padding-top: var(--nav-h); }
body.page-interieure .nav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Lien de la page courante : etat discret mais lisible (nav + pied) */
.nav__liens a[aria-current="page"] {
  color: var(--blanc);
}
.nav__liens a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 5px;
  background: var(--bleu-ciel);
  transform-origin: left;
  animation: souligneNav 600ms var(--ease-doux) both;
}
@keyframes souligneNav {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ----- Menu mobile : bouton hamburger + panneau -----
   .nav__liens est masque sous 760px sur la home (one-page).
   Sur les pages dediees, il faut pouvoir naviguer au doigt :
   on ajoute un bouton qui ouvre les liens en panneau plein-largeur. */
.nav__bascule {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: var(--creme);
}
.nav__bascule span,
.nav__bascule span::before,
.nav__bascule span::after {
  content: "";
  display: block;
  width: 22px;
  height: 1.5px;
  margin-inline: auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 450ms var(--ease-eclosion), opacity 300ms var(--ease-doux);
}
.nav__bascule span { position: relative; }
.nav__bascule span::before { position: absolute; top: -7px; left: 0; }
.nav__bascule span::after  { position: absolute; top:  7px; left: 0; }
body.menu-ouvert .nav__bascule span { transform: rotate(45deg); }
body.menu-ouvert .nav__bascule span::before { transform: translateY(7px) rotate(-90deg); }
body.menu-ouvert .nav__bascule span::after  { opacity: 0; }

/* =========================================================
   EN-TETE DE PAGE INTERIEURE
   Bandeau (navy ou creme) : kicker + grand titre Sentient + intro.
   Variante avec visuel (split editorial), variante centree.
   ========================================================= */
.entete-page {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 9vh, 7rem) clamp(3rem, 7vh, 5.5rem);
}
.entete-page--navy  { background: var(--navy);  color: var(--creme); }
.entete-page--creme { background: var(--creme); color: var(--encre); }

/* Halo bleu ciel tres diffus, signature de la maison, en fond du bandeau */
.entete-page--navy::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -40%;
  right: -10%;
  width: min(60vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at center,
      rgba(145, 216, 255, 0.16) 0%,
      rgba(145, 216, 255, 0.06) 42%,
      rgba(145, 216, 255, 0.00) 70%);
}
.entete-page .enveloppe { position: relative; z-index: 1; }

/* Disposition par defaut : pleine largeur, texte aligne a gauche */
.entete-page__texte { max-width: 38rem; }
.entete-page .titre--xl { max-width: 18ch; }
.entete-page__intro { margin-top: 1.6rem; }

/* Fil d'Ariane discret au-dessus du titre */
.fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(230, 227, 217, 0.55);
}
.fil a { text-decoration: none; transition: color 400ms var(--ease-doux); }
.fil a:hover { color: var(--bleu-ciel); }
.fil span[aria-hidden] { opacity: 0.5; }
.fil__courant { color: var(--bleu-ciel); }
.entete-page--creme .fil { color: rgba(4, 15, 31, 0.5); }
.entete-page--creme .fil__courant { color: var(--corail); }

/* Variante avec visuel : titre a gauche, image a droite (split editorial) */
.entete-page__grille {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.entete-page__visuel {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 4 / 5;
  box-shadow: 0 44px 90px -44px rgba(4, 15, 31, 0.72);
}
.entete-page__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.07);
  transition: transform 1700ms var(--ease-doux);
}
.entete-page__visuel.is-visible img { transform: scale(1); }

/* Variante centree (equipe, temoignages) */
.entete-page--centre .entete-page__texte {
  max-width: min(46rem, 100%);
  margin-inline: auto;
  text-align: center;
}
.entete-page--centre .titre,
.entete-page--centre .titre--xl { max-width: 100%; text-wrap: balance; }
.entete-page--centre .kicker { justify-content: center; }
.entete-page--centre .fil { justify-content: center; }

/* =========================================================
   CARTE DOUBLE CADRE  -  coque exterieure + coeur interieur
   Rayons concentriques, facon materiel usine. Brique reutilisee
   par la frise d'etapes, l'equipe, les inclusions, les avis.
   ========================================================= */
.coque {
  position: relative;
  border-radius: 18px;
  padding: 8px;
  background: rgba(145, 216, 255, 0.05);
  border: 1px solid rgba(145, 216, 255, 0.16);
  transition: transform 600ms var(--ease-eclosion),
              box-shadow 600ms var(--ease-doux),
              border-color 600ms var(--ease-doux);
}
.coque__coeur {
  height: 100%;
  border-radius: 12px;
  padding: clamp(1.5rem, 2.4vw, 2.2rem);
  background: rgba(4, 15, 31, 0.5);
  border: 1px solid rgba(145, 216, 255, 0.12);
}
.coque:hover {
  transform: translateY(-6px);
  border-color: rgba(145, 216, 255, 0.34);
  box-shadow: 0 44px 80px -48px rgba(4, 15, 31, 0.85);
}
/* Variante sur fond clair (creme) */
.coque--clair {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(204, 218, 215, 0.9);
}
.coque--clair .coque__coeur {
  background: var(--blanc);
  border-color: rgba(204, 218, 215, 0.8);
}
.coque--clair:hover {
  border-color: var(--sauge);
  box-shadow: 0 44px 80px -48px rgba(4, 15, 31, 0.3);
}

/* =========================================================
   FRISE D'ETAPES NUMEROTEES  (deroule d'une seance de soin)
   Cartes double cadre, grand numero serif, reliees par un fil.
   ========================================================= */
.frise {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
  margin-top: clamp(2.8rem, 5vw, 4rem);
  counter-reset: etape;
}
.frise__etape { display: flex; }
.frise__etape .coque { width: 100%; display: flex; }
.frise__etape .coque__coeur {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
}
.frise__num {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  font-family: var(--police-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--bleu-ciel);
}
.frise__num::before {
  counter-increment: etape;
  content: "0" counter(etape);
}
.frise__titre {
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.24;
  color: var(--blanc);
}

/* =========================================================
   REPERES / FAITS  (duree, tarif, dates)  -  bandeau de cartes
   ========================================================= */
.reperes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
}
.repere {
  padding: 1.7rem 1.6rem;
  border-radius: 12px;
  background: rgba(145, 216, 255, 0.05);
  border: 1px solid rgba(145, 216, 255, 0.16);
}
.repere--clair {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(204, 218, 215, 0.9);
}
.repere__label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bleu-ciel);
  margin-bottom: 0.7rem;
}
.repere--clair .repere__label { color: rgba(4, 15, 31, 0.5); }
.repere__valeur {
  font-family: var(--police-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--blanc);
}
.repere--clair .repere__valeur { color: var(--encre); }
.repere__valeur small {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--police-corps);
  font-size: 0.92rem;
  color: rgba(230, 227, 217, 0.66);
}
.repere--clair .repere__valeur small { color: rgba(4, 15, 31, 0.6); }

/* =========================================================
   INCLUSIONS  (ce qui est compris dans une retraite)
   Liste en grille, chaque element avec une pastille en losange.
   ========================================================= */
.inclusions {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem 2rem;
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
}
.inclusion {
  display: flex;
  align-items: flex-start;
  gap: 0.85em;
  padding-block: 0.85rem;
  border-bottom: 1px solid rgba(145, 216, 255, 0.14);
  font-size: 1.02rem;
  line-height: 1.5;
  color: rgba(230, 227, 217, 0.9);
}
.inclusion__puce {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 0.55em;
  transform: rotate(45deg);
  background: var(--bleu-ciel);
  box-shadow: 0 0 12px -2px rgba(145, 216, 255, 0.8);
}
/* Variante sur creme */
.inclusions--clair .inclusion {
  border-bottom-color: rgba(204, 218, 215, 0.9);
  color: rgba(4, 15, 31, 0.82);
}
.inclusions--clair .inclusion__puce {
  background: var(--corail);
  box-shadow: none;
}

/* =========================================================
   EQUIPE  -  grille de membres. Photo reelle pour Camille,
   monogramme elegant en placeholder pour les autres (pas de
   faux visage de banque d'images).
   ========================================================= */
.equipe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: clamp(2.8rem, 5vw, 4rem);
}
.membre { display: flex; }
.membre .coque { width: 100%; display: flex; }
.membre .coque__coeur {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  overflow: hidden;
}
.membre__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 11px 11px 0 0;
}
.membre__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1300ms var(--ease-doux);
}
.membre:hover .membre__media img { transform: scale(1.05); }

/* Placeholder monogramme : initiales sur fond navy nervure de lueur */
.membre__mono {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(145, 216, 255, 0.18) 0%, rgba(145, 216, 255, 0) 60%),
    linear-gradient(160deg, #08182c 0%, #040f1f 70%);
}
.membre__initiales {
  font-family: var(--police-serif);
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  letter-spacing: 0.04em;
  color: rgba(145, 216, 255, 0.85);
  text-shadow: 0 0 30px rgba(145, 216, 255, 0.4);
}
.membre__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
}
.membre__role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bleu-ciel);
  margin-bottom: 0.7rem;
}
.membre__nom {
  font-family: var(--police-serif);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.18;
  color: var(--blanc);
  margin-bottom: 0.2rem;
}
.membre__nom small {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--police-corps);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: rgba(230, 227, 217, 0.6);
}
.membre__texte {
  margin-top: 0.9rem;
  font-size: 0.96rem;
  line-height: 1.62;
  color: rgba(230, 227, 217, 0.78);
}

/* =========================================================
   AVIS  -  cartes temoignages. Pas de faux portraits :
   un grand guillemet serif et une initiale en mention.
   ========================================================= */
.avis {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2rem);
  margin-top: clamp(2.8rem, 5vw, 4.2rem);
}
.avis__carte { display: flex; }
.avis__carte .coque { width: 100%; display: flex; }
.avis__carte .coque__coeur {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.avis__marque {
  font-family: var(--police-serif);
  font-size: 3.4rem;
  line-height: 0.6;
  color: rgba(145, 216, 255, 0.5);
  margin-bottom: 0.4rem;
}
.avis__texte {
  font-family: var(--police-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.18rem, 1.02rem + 0.6vw, 1.46rem);
  line-height: 1.42;
  color: var(--blanc);
  flex: 1;
}
.avis__pied {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(145, 216, 255, 0.16);
}
.avis__pastille {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(145, 216, 255, 0.12);
  border: 1px solid rgba(145, 216, 255, 0.3);
  font-family: var(--police-serif);
  font-size: 1.1rem;
  color: var(--bleu-ciel);
}
.avis__qui {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.avis__nom {
  font-family: var(--police-corps);
  font-size: 1rem;
  font-weight: 500;
  color: var(--creme);
}
.avis__contexte {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(145, 216, 255, 0.7);
}

/* =========================================================
   PILE D'AVIS  -  empilement qui se deploie au defilement.
   Defaut (mobile, sans JS, mouvement reduit) : colonne sobre,
   centree, lisible. Le JS ajoute .is-actif sur grand ecran
   pour activer le deploiement en perspective ; les transforms
   sont alors pilotees image par image dans main.js.
   ========================================================= */
.pile { position: relative; }

.pile__liste {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: clamp(1.2rem, 2.6vw, 2rem);
  width: min(620px, 100%);
}
.pile__carte { display: flex; margin: 0; }

/* --- Mode anime : grand ecran, JS actif, mouvement normal --- */
.pile.is-actif .pile__cadre {
  position: sticky;
  top: var(--nav-h, 0px);
  height: calc(100vh - var(--nav-h, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
  overflow: hidden;
}
.pile.is-actif .pile__liste {
  position: relative;
  display: block;
  transform-style: preserve-3d;
}
.pile.is-actif .pile__carte {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;                       /* surcharge en JS : top = i * 10px */
  backface-visibility: hidden;
  will-change: transform;
  opacity: 1 !important;        /* neutralise un .reveal non declenche */
  transition: none !important;  /* le defilement pilote, pas de lissage CSS */
}
.pile.is-actif .pile__carte .coque {
  width: 100%;
  height: 100%;
  /* Opaque en mode pile : la carte de devant masque nettement celles du
     dessous (le verre translucide laissait les textes se chevaucher). */
  background: var(--navy);
  border-color: rgba(145, 216, 255, 0.22);
  box-shadow: 0 42px 70px -44px rgba(0, 0, 0, 0.92);
}
.pile.is-actif .pile__carte .coque__coeur {
  background: linear-gradient(158deg, #0b1d33 0%, #061426 100%);
  border-color: rgba(145, 216, 255, 0.16);
}
.pile.is-actif .pile__carte .coque:hover { transform: none; }

/* =========================================================
   PULL-QUOTES  (declarations de Camille, page Histoire)
   Cadre editorial neutre, sans texte de liaison dans sa voix.
   ========================================================= */
.declarations {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.declaration {
  position: relative;
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.8rem, 3vw, 3rem);
  border-left: 2px solid rgba(145, 216, 255, 0.4);
  background: rgba(145, 216, 255, 0.04);
  border-radius: 0 12px 12px 0;
}
.declaration p {
  font-family: var(--police-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
  line-height: 1.42;
  color: var(--blanc);
  max-width: 30ch;
}
.declaration--large p { max-width: 38ch; }

/* Fragments de mission : prose claire, citations rythmees */
.mission {
  display: grid;
  gap: 1.3rem;
  margin-top: clamp(2.2rem, 4vw, 3rem);
  max-width: var(--mesure);
}
.mission p {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.22rem);
  line-height: 1.7;
  color: rgba(230, 227, 217, 0.9);
  padding-left: 1.3rem;
  border-left: 1px solid rgba(145, 216, 255, 0.3);
}

/* =========================================================
   RUBAN CTA  -  rappel d'action en bas de page interieure
   Bande creme ou navy, titre + boutons centres.
   ========================================================= */
.ruban {
  text-align: center;
}
.ruban .titre { margin-inline: auto; text-wrap: balance; }
.ruban .prose { margin-inline: auto; }
.ruban .boutons { justify-content: center; }
.ruban .offre { margin-inline: auto; }

/* =========================================================
   RESPONSIVE  -  pages interieures
   ========================================================= */
@media (max-width: 920px) {
  .entete-page__grille { grid-template-columns: 1fr; }
  .entete-page__visuel {
    aspect-ratio: 16 / 11;
    order: -1;
    max-width: 520px;
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  /* La nav multi-pages passe en menu deroulant (home comprise) :
     le bouton hamburger apparait, les liens s'ouvrent en panneau. */
  .nav--multipage .nav__bascule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav--multipage .nav__liens {
    display: flex;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem clamp(1.2rem, 5vw, 3.4rem) 1.5rem;
    background: rgba(4, 15, 31, 0.96);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
            backdrop-filter: blur(16px) saturate(1.1);
    border-bottom: 1px solid rgba(145, 216, 255, 0.12);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 400ms var(--ease-doux),
                transform 400ms var(--ease-doux),
                visibility 400ms var(--ease-doux);
  }
  body.menu-ouvert .nav--multipage .nav__liens {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .nav--multipage .nav__liens a {
    padding-block: 0.95rem;
    border-bottom: 1px solid rgba(145, 216, 255, 0.1);
    font-size: 1rem;
  }
  .nav--multipage .nav__liens a[aria-current="page"]::after { display: none; }
}

@media (max-width: 560px) {
  .frise { grid-template-columns: 1fr; }
  .inclusions { grid-template-columns: 1fr; }
}

/* Mouvement reduit : on neutralise les glissements ajoutes */
@media (prefers-reduced-motion: reduce) {
  .entete-page__visuel img { transform: none; }
  .nav__liens a[aria-current="page"]::after { animation: none; }
  .coque,
  .membre__media img,
  .nav--multipage .nav__liens { transition: none; }
}