/* ORIÉZID — démo Novra, v2
   Palette : LEUR bleu, poussé. --blue-electric #1E3AFF et --blue-soft #EEF1FF sont
   leurs propres tokens. Le level up ne vient pas de la teinte mais du traitement :
   aplats massifs au lieu du halo radial, papier bleuté au lieu du blanc pur,
   et un environnement différent par section au lieu d'une peinture unique.
   Typo : Melodrama (display, 40px plancher) + General Sans. */

@font-face{font-family:'Melodrama';src:url('../fonts/melodrama-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Melodrama';src:url('../fonts/melodrama-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url('../fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --outremer:#1E3AFF;      /* leur --blue-electric, inchangé */
  /* leur --blue-soft #EEF1FF était trop blanc : le fondu depuis le bleu nuit
     traversait un violet gris et le contraste restait dur. Bleuté, le seuil
     reste dans la même famille chromatique du haut en bas de la page. */
  --papier:#D2DDF6;
  /* 30.08 : le fond clair et le texte clair partageaient la MÊME variable.
     Or ils n'ont pas le même travail. #D2DDF6 en texte sur la nuit est juste ;
     le même ton en aplat plein écran fait 74 % de luminance, et l'oeil qui
     sort d'un héros presque noir le prend comme un flash. --fond descend à
     60 % et desature de 67 % a 44 % : même famille, même teinte, mais du papier
     au lieu d'une lampe. Contraste avec la nuit 11,1:1, avec l'encre 9,7:1, AAA.
     >>> POUR REVENIR EXACTEMENT À AVANT : --fond:#D2DDF6 et rgb 210,221,246
         dans le voile du héros, plus bas. <<< */
  --fond:#BFCBE6;
  --fond-rgb:191,203,230;
  /* remontée de #080D24 à #131F4E le 29.08 : le presque-noir durcissait tout et
     rendait le fondu vers le papier trop brutal. Un vrai bleu nuit est plus riche,
     adoucit le seuil, et le cheval en découpe s'y détache mieux puisqu'il devient
     plus sombre que son environnement. Contraste avec le papier : 13,7:1, AAA. */
  --encre:#131F4E;
  --encre-clair:#0E1533;
  --papier-pur:#FBFCFF;
  --bleu-pale:#AFBBEE;     /* labels sur fond sombre */
  /* descendu de #5A648F le 30.08 : sur le fond abaisse il ne faisait plus que
     3,5:1, sous le seuil AA. A #4A5378 il repasse a 4,6:1. Ce gris ne sert QUE
     sur le papier, rien sur la nuit ne bouge. */
  --gris-encre:#4A5378;    /* texte secondaire sur papier */

  --display:'Melodrama',Georgia,'Times New Roman',serif;
  --sans:'General Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* Sur téléphone, un pincement pour dézoomer découvrait une bande bleue le long
   du bord : la zone hors de la fenêtre de mise en page laisse voir le fond du
   document, et ce fond était l'encre #131F4E, franchement bleue. Deux verrous :
   le fond du document prend la couleur du haut de page (invisible s'il déborde),
   et le débordement horizontal est coupé sur html ET body. `clip` plutôt que
   `hidden` : `hidden` fabrique un conteneur de défilement et casserait le
   position:sticky de la chambre. */
html{scroll-behavior:auto;background:#060919;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;width:100%;background:#060919;color:var(--papier);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.label{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--bleu-pale)}
.display{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.01em}

/* ---------- barre ---------- */
/* pas de mix-blend-mode ici : sur le papier, la barre se cognait avec le label
   du registre et les deux textes se superposaient. Fond franc dès qu'on quitte le hero. */
.bar{
  position:fixed;inset:0 0 auto 0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);
  transition:background .4s var(--ease),color .4s var(--ease),backdrop-filter .4s var(--ease);
}
/* barre collée en ENCRE et non en papier : la page alterne clair et sombre, une
   barre claire fonctionnait sur le registre et écrasait tout le reste. Une barre
   sombre translucide tient sur les deux, et reste la même du haut en bas. */
.bar.is-stuck{background:rgba(9,15,42,.74);backdrop-filter:blur(18px);color:var(--papier)}
.bar.is-stuck .bar__name{color:var(--papier)}
.bar.is-stuck .langs{color:#8C97C4}
.bar.is-stuck .langs b,.bar.is-stuck .langs .is-new{color:var(--papier)}
.bar.is-stuck .bar__cta{color:var(--papier)}
.bar__mark{display:flex;align-items:center;gap:12px}
.bar__mark img{width:34px;height:auto}
.bar__name{font-family:var(--display);font-size:19px;letter-spacing:.14em;color:var(--papier)}
.bar__right{display:flex;align-items:center;gap:26px}
.langs{display:flex;gap:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7E88B8}
.langs b{font-weight:500;color:var(--papier)}
.langs .is-new{color:var(--papier)}
.bar__cta{font-size:13px;color:var(--papier);border-bottom:1px solid currentColor;padding-bottom:3px}

/* ---------- hero : l'aube, et le cheval à contre-jour dedans ----------
   Trois choses viennent d'un constat sur leur site. Leur lumière rayonne depuis
   DERRIÈRE la marque, et c'est ça qui donne l'impression d'entrer quelque part.
   Notre v1 posait une découpe sombre sur un fond : on regardait une surface.
   Ici la lumière est une LIGNE D'HORIZON, géométrie horizontale là où la leur est
   radiale, donc rien à copier. Et le seuil vers le registre n'a plus besoin d'un
   fondu rapporté : l'horizon EST le seuil. */
.hero{position:relative;min-height:100svh;overflow:hidden;background:#060919}
.hero__sky{
  position:absolute;inset:0;z-index:0;will-change:transform;
  background:linear-gradient(to bottom,
    #060919 0%,#0A0F2C 28%,#0F1943 54%,#16256a 72%,var(--outremer) 100%);
}
.hero__band{
  position:absolute;left:-20%;width:140%;height:44vh;bottom:-15vh;z-index:1;
  border-radius:50%;filter:blur(72px);will-change:transform;
  background:radial-gradient(closest-side,rgba(102,132,255,.98),rgba(30,58,255,.6) 42%,transparent 76%);
  animation:aube 61s ease-in-out infinite;
}
/* 61 et 67 s, non harmoniques : l'aube et le cheval ne repassent jamais ensemble
   au même endroit, donc aucune boucle repérable */
@keyframes aube{0%,100%{transform:translateX(0) scaleY(1)}50%{transform:translateX(-3%) scaleY(1.06)}}

/* l'ancrage : sans lui le cheval flotte au-dessus de l'horizon au lieu d'y courir */
.hero__anchor{
  position:absolute;left:50%;bottom:12.6vh;z-index:1;width:44vw;height:9vh;
  transform:translateX(-50%);border-radius:50%;filter:blur(30px);
  background:radial-gradient(closest-side,rgba(150,175,255,.75),transparent 72%);
  transition:opacity 1s var(--ease);
}
.grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
/* le voile ne fait plus une bande : il termine sur le papier exact du registre,
   donc la page passe de la nuit au papier sans jamais traverser un gris */
.hero__veil{
  position:absolute;left:0;right:0;bottom:0;height:14%;z-index:6;pointer-events:none;
  background:linear-gradient(to top,
    var(--fond) 0%,rgba(var(--fond-rgb),.46) 44%,rgba(var(--fond-rgb),0) 100%);
}

/* --- le cheval ---------------------------------------------------------- */
.hero__horse{
  position:absolute;left:50%;bottom:15vh;transform:translateX(-50%);
  width:50vw;height:auto;z-index:2;pointer-events:none;overflow:visible;
  animation:horse-breathe 67s ease-in-out infinite;
  transition:opacity 1s var(--ease);
}
@keyframes horse-breathe{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%    {transform:translateX(-50.7%) scale(1.012)}
}
.hero__horse-halo{fill:#4E6BFF;opacity:.42}
.hero__horse-body{fill:url(#orzBody)}
.hero__horse-lift{fill:url(#orzLift);opacity:.16}
.hero__horse-rim{fill:none;stroke:#E4EBFF;stroke-width:2}
/* on demande, la scène entière cède la place à ce qu'on écrit : le cheval recule,
   l'aube baisse, et le bloc remonte. Sans ça, les derniers champs descendaient
   dans la zone claire du bas et le texte pâle y devenait illisible. */
.hero__band{transition:opacity 1s var(--ease)}

.hero__in{position:absolute;left:0;right:0;top:15vh;z-index:5;text-align:center;
  padding:0 var(--gut);transition:top .9s var(--ease)}
.hero__name{
  font-family:var(--display);font-weight:400;color:var(--creme,#F2F4FF);
  font-size:clamp(58px,8.8vw,142px);line-height:1;letter-spacing:.05em;margin:0;
}
.hero__sub{margin:24px 0 0}

/* ---------- registre : rupture franche, on passe sur papier ---------- */
.ledger{background:var(--fond);color:var(--encre);padding:clamp(80px,12vh,150px) 0 0}
.ledger__head{padding:0 var(--gut);margin-bottom:clamp(36px,6vh,72px)}
.ledger__kicker{color:var(--gris-encre)}
.ledger__title{font-size:clamp(40px,6.4vw,86px);margin:.4em 0 0;max-width:12ch;color:var(--encre)}

.ledger__list{border-top:1px solid rgba(8,13,36,.16)}

.entry{
  position:relative;display:block;overflow:hidden;
  border-bottom:1px solid rgba(8,13,36,.16);
  background:var(--outremer); /* la matière se pose dessus, jamais l'inverse */
}
/* le bouton ne porte plus que la ligne : le volet contient lui-même une action
   (« Request this »), et un bouton ne peut pas en contenir un autre. */
.entry__hit{
  display:block;width:100%;position:relative;z-index:2;
  padding:clamp(24px,3.2vw,38px) var(--gut);
  background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.entry__hit:focus-visible{outline:2px solid var(--outremer);outline-offset:-3px}
/* la matière est là dès le départ, masquée par un voile papier qui se retire.
   Aucun chargement au survol : rien ne clignote. */
.entry__matter{position:absolute;inset:0;z-index:0;overflow:hidden}
/* opacité tenue à .72 et luminosité relevée : à .92 la matière écrasait l'aplat
   et la ligne virait au noir, on perdait le bleu de marque qui est le sujet */
.entry__matter img{
  width:100%;height:100%;object-fit:cover;
  /* la correction est PAR IMAGE : mesurées, les six matières allaient de 30 à 163
     de luminance moyenne, un facteur 5. Un filtre global les laissait dépareillées. */
  filter:grayscale(1) contrast(1.05) brightness(var(--b,1.22));
  mix-blend-mode:luminosity;opacity:.72;
  transform:scale(1.08);transition:transform 1.1s var(--ease);
}
.entry__veil{
  position:absolute;inset:0;z-index:1;background:var(--fond);
  transition:opacity .55s var(--ease);
}
.entry__row{position:relative;z-index:2;display:flex;align-items:baseline;gap:clamp(16px,3vw,44px)}
.entry__name{
  font-family:var(--display);font-weight:400;color:var(--encre);
  font-size:clamp(40px,5.2vw,74px);line-height:1;flex:0 0 auto;
  transition:color .5s var(--ease),transform .6s var(--ease);
}
.entry__note{
  font-size:15px;color:var(--gris-encre);line-height:1.5;
  flex:0 0 auto;width:clamp(210px,25vw,330px);margin-left:auto;padding-bottom:.4em;
  transition:color .5s var(--ease);
}

@media (hover:hover){
  .entry:hover .entry__veil{opacity:0}
  .entry:hover .entry__matter img{transform:scale(1)}
  .entry:hover .entry__name{color:var(--papier);transform:translateX(12px)}
  .entry:hover .entry__note{color:var(--papier)}
}

/* ---------- apparition : un seul effet, posé par le script ---------- */
.js .reveal{opacity:0;transform:translateY(24px)}
.js .reveal.is-in{animation:rise .9s var(--ease) backwards;opacity:1;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .js .reveal.is-in{animation:none}
  .entry__matter img{transition:none}
}

/* ---------- mobile : pas de survol, la matière se montre en bande ---------- */
@media (max-width:820px){
  /* La bande d'image posée SOUS le texte donnait un bleu plus vif que sur
     ordinateur (opacité .78 contre .72) et, une fois la ligne ouverte, un texte
     blanc restait sur du papier blanc. La matière reprend donc exactement la
     place qu'elle a sur ordinateur : elle remplit la ligne, le voile se retire
     au clic, et le texte passe en blanc sur l'image, pas sur le papier. */
  .entry__row{flex-direction:column;gap:10px;position:relative;padding-right:34px}
  .entry__note{width:auto;max-width:min(34ch,84vw);margin-left:0;padding-bottom:0}
  /* sans survol, l'image ouverte est le seul fond du texte : elle doit être
     assez sombre pour porter du blanc sur toute la hauteur de la ligne */
  .entry.is-open .entry__matter::after{
    content:'';position:absolute;inset:0;z-index:1;
    background:linear-gradient(to bottom,rgba(6,10,30,.62),rgba(6,10,30,.78));
  }
  .bar__cta{display:none}
}

/* =========================================================================
   OUVERTURE — le tracé du cheval se dessine, puis la page se découvre.
   Tout est en CSS : si le script ne tourne pas, le rideau part quand même.
   `forwards` est OBLIGATOIRE ici (contrairement aux apparitions, en backwards) :
   sans lui, le panneau revient à son état de départ et reste collé à l'écran.
   ========================================================================= */
.curtain{
  position:fixed;inset:0;z-index:60;background:var(--encre);
  display:grid;place-items:center;
  animation:curtain-out .9s var(--ease) 1.9s forwards;
}
.curtain__horse{
  width:min(320px,42vw);height:auto;
  stroke:var(--papier);stroke-width:6;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw 1.35s cubic-bezier(.62,.03,.3,1) .25s forwards,
            horse-out .7s var(--ease) 1.7s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes horse-out{to{opacity:0;transform:translateY(-26px)}}
@keyframes curtain-out{to{opacity:0;visibility:hidden}}
/* déjà vu pendant cette visite : rien ne se rejoue */
.curtain.is-seen,.curtain.is-seen .curtain__horse{animation:none;display:none}
@media (prefers-reduced-motion:reduce){
  .curtain{animation:curtain-out .4s linear .2s forwards}
  .curtain__horse{stroke-dashoffset:0;animation:none}
}

/* =========================================================================
   LA DEMANDE — au repos un seul bouton, jamais onze champs ni même deux.
   Leur slogan promet « a life without friction ». Le hero le tient.
   ========================================================================= */
.ask{margin:clamp(30px,5.4vh,58px) auto 0;max-width:640px;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,3.4vw,38px);flex-wrap:wrap}
.ask__open{
  display:inline-flex;align-items:center;gap:12px;position:relative;
  background:none;border:0;cursor:pointer;padding:0 0 9px;
  font-family:var(--sans);font-size:14px;letter-spacing:.02em;color:var(--papier);
}
.ask__open::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(210,221,246,.34)}
.ask__open::before{content:'';position:absolute;left:0;bottom:0;height:1px;width:34%;
  background:var(--outremer);transition:width .7s var(--ease)}
.ask__open:hover::before{width:100%}
.ask__open:focus-visible{outline:2px solid var(--outremer);outline-offset:6px}

.ask__lead{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(40px,4.2vw,60px);line-height:1;color:var(--outremer);
  margin:0 0 clamp(18px,3vh,30px);text-shadow:0 0 28px rgba(30,58,255,.34);
}
.ask__field{display:block;position:relative}
.ask__hint{
  display:block;font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bleu-pale);margin-bottom:7px;
}
/* la demande s'écrit en grand : c'est elle le sujet du hero une fois ouvert.
   Melodrama ne descend jamais sous 40px, sa graisse fine se casse en dessous. */
.ask__what{
  width:100%;background:none;border:0;border-bottom:1px solid rgba(238,241,255,.34);
  padding:0 0 12px;color:var(--papier);text-align:left;
  font-family:var(--display);font-weight:400;font-size:clamp(40px,3.4vw,48px);
  line-height:1.14;letter-spacing:-.01em;
  transition:border-color .35s var(--ease);
}
.ask__what::placeholder{color:rgba(238,241,255,.36)}
.ask__what:focus{outline:none;border-bottom-color:var(--outremer)}

.ask__bottom{display:flex;align-items:flex-end;gap:clamp(18px,3vw,38px);margin-top:clamp(22px,3.4vh,34px);text-align:left}
.ask__field--small{flex:1 1 auto;min-width:0}
.ask__who{
  width:100%;background:none;border:0;border-bottom:1px solid rgba(238,241,255,.34);
  padding:0 0 10px;color:var(--papier);
  font-family:var(--sans);font-size:16px;
  transition:border-color .35s var(--ease);
}
.ask__who::placeholder{color:rgba(238,241,255,.36)}
.ask__who:focus{outline:none;border-bottom-color:var(--outremer)}

.ask__go{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;
  background:var(--outremer);color:var(--papier);border:0;cursor:pointer;
  font-family:var(--sans);font-size:14px;letter-spacing:.02em;
  padding:14px 22px;border-radius:0;   /* aplat franc, aucune pilule */
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.ask__go:hover{background:#3A52FF;transform:translateX(3px)}
.ask__note{margin:clamp(18px,2.6vh,26px) 0 0;font-size:13px;color:#8C97C4}

@media (max-width:820px){
  .ask__bottom{flex-direction:column;align-items:stretch;gap:22px}
  .ask__go{justify-content:center}
}

/* =========================================================================
   HERO VIVANT
   ========================================================================= */



/* --- la lumière qui balaie la matière -------------------------------------
   Un reflet qui passe, comme sur une carrosserie. Très diffus, très lent,
   très faible : au-delà, ça devient un effet de brillance bon marché. */
/* le balayage de lumière a été retiré avec le passage au fond A : le dégradé dérive
   déjà, deux mouvements sur la même zone se neutralisent au lieu de s'ajouter. */

/* --- le nom se compose, lettre par lettre --------------------------------- */
.hero__name{display:flex;flex-wrap:wrap;justify-content:center}
.hero__name span{display:inline-block;will-change:transform}
/* l'état de départ vit UNIQUEMENT dans la keyframe. Posé sur la règle de base,
   il redevenait l'état final une fois l'animation terminée (backwards ne conserve
   rien) et le nom disparaissait au bout d'une seconde. L'invisible n'est jamais
   un état par défaut, ici pas plus qu'ailleurs. */
.js .hero__name span{animation:letter .95s var(--ease) backwards}
/* 2,45 s : le temps que le rideau soit sorti. Sept lettres, 72 ms d'écart. */
.js .hero__name span:nth-child(1){animation-delay:2.45s}
.js .hero__name span:nth-child(2){animation-delay:2.52s}
.js .hero__name span:nth-child(3){animation-delay:2.59s}
.js .hero__name span:nth-child(4){animation-delay:2.66s}
.js .hero__name span:nth-child(5){animation-delay:2.74s}
.js .hero__name span:nth-child(6){animation-delay:2.81s}
.js .hero__name span:nth-child(7){animation-delay:2.88s}
/* déjà venu pendant cette session : pas d'attente, le nom se compose tout de suite */
.js.seen .hero__name span:nth-child(1){animation-delay:.05s}
.js.seen .hero__name span:nth-child(2){animation-delay:.12s}
.js.seen .hero__name span:nth-child(3){animation-delay:.19s}
.js.seen .hero__name span:nth-child(4){animation-delay:.26s}
.js.seen .hero__name span:nth-child(5){animation-delay:.34s}
.js.seen .hero__name span:nth-child(6){animation-delay:.41s}
.js.seen .hero__name span:nth-child(7){animation-delay:.48s}
@keyframes letter{from{opacity:0;transform:translateY(.34em)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js .hero__name span{opacity:1;transform:none;animation:none}
  .hero__band,.hero__horse{animation:none}
}

/* --- le parrainage, discret et optionnel ---------------------------------- */
.ask__field--ref{margin-top:clamp(20px,3vh,30px);max-width:440px;margin-inline:auto;text-align:left}
.req__form .ask__field--ref{max-width:none;margin-inline:0}
.ask__hint i{font-style:normal;text-transform:none;letter-spacing:.02em;color:#6C77A8;margin-left:6px}
.ask__ref{
  width:100%;background:none;border:0;border-bottom:1px solid rgba(238,241,255,.2);
  padding:0 0 9px;color:var(--papier);font-family:var(--sans);font-size:14px;
  transition:border-color .35s var(--ease);
}
.ask__ref::placeholder{color:rgba(238,241,255,.28)}
.ask__ref:focus{outline:none;border-bottom-color:var(--outremer)}

@media (max-width:820px){
  /* le cheval doit rester lisible : à 50vw il devient un détail sur téléphone */
  .hero__horse{width:96vw;bottom:11vh}
  .hero__anchor{width:82vw;bottom:8.6vh}
  .hero__horse-rim{stroke-width:3.2}
  /* le bloc descend : sur téléphone, laissé à 13vh il ouvrait 500px de ciel vide
     entre le bouton et le cheval */
  .hero__in{top:19vh}
}

/* --- le hero au repos ne porte qu'une ligne -------------------------------
   Le second temps s'ouvre au focus ou dès la première frappe. Pas de display:none :
   le parcours clavier doit rester possible, et une hauteur animée se mesure. */
.ask__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =========================================================================
   LES LIGNES SE DÉPLIENT — au clic, la matière s'ouvre et le service s'explique.
   Pas de page en plus, pas de contenu pour rien.
   ========================================================================= */
.entry__plus{
  flex:0 0 auto;width:13px;height:13px;position:relative;margin-left:22px;align-self:center;
  opacity:.4;transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.entry__plus::before,.entry__plus::after{
  content:'';position:absolute;inset:50% 0 auto 0;height:1px;background:currentColor;
}
.entry__plus::after{transform:rotate(90deg);transition:transform .5s var(--ease)}
.entry.is-open .entry__plus{opacity:1;transform:rotate(180deg)}
.entry.is-open .entry__plus::after{transform:rotate(0deg)}

.entry__panel{
  display:block;position:relative;z-index:2;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .8s var(--ease),opacity .5s var(--ease);
}
/* la marge intérieure vit sur les enfants : posée sur le volet, elle occuperait
   encore sa place à max-height:0 et ouvrirait un vide sous chaque ligne fermée */
.entry__text{
  display:block;margin:0;padding:4px var(--gut) 0;max-width:min(52ch,760px);
  font-size:17px;line-height:1.6;color:var(--gris-encre);
  transition:color .5s var(--ease);
}
.entry.is-open .entry__panel{max-height:300px;opacity:1}

/* la matière s'ouvre en même temps : le bandeau devient une hauteur d'image */
.entry.is-open .entry__veil{opacity:0}
.entry.is-open .entry__matter img{transform:scale(1)}
.entry.is-open .entry__name{color:var(--papier)}
.entry.is-open .entry__note,
.entry.is-open .entry__text{color:rgba(238,241,255,.82)}

/* =========================================================================
   LES SEUILS — la couleur ne s'arrête plus net entre deux sections
   ========================================================================= */
.ledger{position:relative}
/* plus aucune bande de transition : le hero finit sur l'outremer plein, et
   .hero__veil termine sur le papier exact du registre. Le fondu ne traverse que
   du bleu, jamais un gris. */
.hero{margin-bottom:0}

/* ligne ouverte : un voile depuis la gauche, sinon le texte du service se perd
   dans l'image qu'il vient de découvrir */
.entry__panel::before{
  content:'';position:absolute;inset:-40px -40px -20px -100vw;z-index:-1;
  background:linear-gradient(to right,rgba(8,13,36,.72) 0%,rgba(8,13,36,.58) 62%,rgba(8,13,36,0) 100%);
  opacity:0;transition:opacity .6s var(--ease);
}
.entry.is-open .entry__panel::before{opacity:1}
.entry.is-open .entry__name{text-shadow:0 2px 18px rgba(8,13,36,.5)}


/* =========================================================================
   LA NUIT QUI AVANCE
   Le hero est une aube. À partir du registre, la lumière décline et ne
   s'arrête plus : une seule matière jusqu'au noir, pas des pièces repeintes.
   Onze paliers de valeur au lieu de deux aplats, plus deux lueurs qui dérivent
   à des périodes non harmoniques, plus le grain. C'est là que se joue la
   nuance : un dégradé pur fait des bandes sur les grands sombres, le grain les
   casse et donne la matière d'un tirage.
   ========================================================================= */

/* ---------- LA PORTE : le papier s'écarte, la nuit est derrière ----------
   Ce n'est PAS un fondu. Leur phrase « The doors we open » cesse d'être
   écrite et devient le geste qui fait passer le jour à la nuit. Un seuil en
   dégradé aurait été une bande de plus ; là, il n'y a plus de seuil du tout. */
/* hauteur ramenée de 100svh à 72svh le 29.08 : plein écran, la pièce bleue
   durait trop pour ce qu'elle dit. Le déclencheur suit la hauteur (voir le
   script) pour que le bas de la porte touche le bas de l'écran au moment où
   elle s'ouvre : sinon la nuit du passage se voit dessous avant l'ouverture. */
.door{position:relative;height:clamp(400px,72svh,660px);overflow:hidden;
  background:#0B1130;isolation:isolate}
.door__behind{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  padding:0 var(--gut);text-align:center}
/* la nuit n'est jamais un aplat : une lueur qui dérive derrière, du grain devant.
   Un dégradé pur fait des bandes sur les grands sombres ; le grain les casse et
   donne la matière d'un tirage plutôt que d'un rectangle rempli. */
.door__behind::before{content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 56% at 50% 40%,rgba(48,78,205,.58),transparent 74%);
  /* la lueur respire jusqu'à scale(1.09) : sans masque, elle atteint le bord bas
     au sommet de sa dérive et la jonction avec le passage se lit comme un trait
     clair en travers de l'écran. Le masque l'éteint avant le bord, toujours. */
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 96%);
  mask-image:linear-gradient(to bottom,#000 62%,transparent 96%);
  animation:nuit-a 59s ease-in-out infinite}
.door__line{position:relative;z-index:1}
.door__line{
  /* réduite du 29.08 : à 116 px, quatre mots occupaient un écran entier et la
     phrase criait. Petite dans une grande pièce sombre, elle se murmure, ce qui
     est exactement ce qu'elle dit. */
  font-size:clamp(28px,4.2vw,64px);line-height:1.06;margin:0;color:var(--papier);
  letter-spacing:.015em;
  /* la ligne monte APRÈS l'ouverture, pas pendant : deux gestes simultanés
     s'annulent, l'un décalé donne une respiration */
  opacity:0;transform:translateY(20px);
  transition:opacity 1.3s var(--ease) .9s,transform 1.6s var(--ease) .9s;
}
.door.is-open .door__line{opacity:1;transform:none}
.door__leaf{
  position:absolute;left:0;right:0;height:50.4%;background:var(--fond);z-index:3;
  transition:transform 2.3s var(--ease);
}
.door__leaf--up{top:0}
.door__leaf--down{bottom:0}
/* 101 % et non 100 % : à 100 %, le bord du battant tombe EXACTEMENT sur la
   limite entre la porte et le passage (mesuré : 247,703 px). Le tiers de pixel
   restant s'imprime en antialiasing et donne un trait crème en travers de
   l'écran. Un pour cent de plus et le battant est franchement hors du cadre,
   donc découpé par l'overflow de la porte, quelle que soit l'arrondi. */
.door.is-open .door__leaf--up{transform:translateY(-101%)}
.door.is-open .door__leaf--down{transform:translateY(101%)}
/* le joint : le seul trait de marque de tout le passage. Il s'éteint en même
   temps que les battants partent, sinon il flotte sur la nuit */
.door__seam{position:absolute;left:0;right:0;top:50%;height:1px;z-index:4;
  background:linear-gradient(to right,transparent,var(--outremer) 22%,var(--outremer) 78%,transparent);
  transition:opacity 1s var(--ease)}
.door.is-open .door__seam{opacity:0}
/* sans script, les battants ne masquent rien : l'invisible n'est jamais l'état
   par défaut, ici pas plus qu'ailleurs */
html:not(.js) .door__leaf{display:none}
html:not(.js) .door__line{opacity:1;transform:none}

/* ---------- LA CHAMBRE : une chose à la fois, au même endroit ----------
   Chez eux, quatre fois le même gabarit, empilé. Ici les quatre affirmations
   occupent LE MÊME cadre et se remplacent. Ce qui les distingue n'est plus une
   étiquette répétée, c'est le changement de forme d'une phrase à l'autre.
   La sélection suit le défilement, mais la transition, elle, se JOUE à sa
   vitesse : ce n'est pas une animation traînée par le doigt. */
.room{position:relative;height:420vh;
  background:linear-gradient(to bottom,
    #0B1130 0%,#0A0F2B 18%,#090D26 38%,#070B1E 60%,#060918 82%,#050714 100%)}
.room__cue{position:absolute;left:0;right:0;height:80vh;pointer-events:none}
.room__cue[data-i="0"]{top:0}
.room__cue[data-i="1"]{top:80vh}
.room__cue[data-i="2"]{top:160vh}
.room__cue[data-i="3"]{top:240vh}
.room__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;
  padding:0 var(--gut);z-index:2}
/* deux lueurs, 59 et 73 s : non harmoniques, donc elles ne repassent jamais
   ensemble au même endroit et l'œil ne trouve pas la boucle */
.room__stage::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 58% at 26% 38%,rgba(42,68,180,.42),transparent 68%),
    radial-gradient(46% 52% at 78% 72%,rgba(28,46,140,.34),transparent 70%);
  animation:nuit-b 73s ease-in-out infinite}
.room__frame,.room__index{position:relative;z-index:2}
@keyframes nuit-a{0%,100%{transform:translate3d(0,0,0) scale(1)}
                  50%    {transform:translate3d(-3%,2%,0) scale(1.09)}}
@keyframes nuit-b{0%,100%{transform:translate3d(0,0,0)}
                  50%    {transform:translate3d(4%,-3%,0)}}

/* le grain, identique partout : c'est lui qui rend la nuit continue d'un moment
   à l'autre. Sans lui, chaque bloc redevient un rectangle rempli. */
.door__behind::after,.room__stage::after,.card::after,.us::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.42;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* repères de lecture : quatre traits au bord gauche, l'actif s'allonge.
   Sans eux on ne sait pas combien d'affirmations il reste. */
.room__index{position:absolute;left:calc(var(--gut) - 14px);top:50%;   /* left:0 les collait au bord de l'ecran, moitie hors champ */
  transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;gap:0}
/* ils ne font plus que signaler : on peut cliquer dessus pour aller directement
   à une affirmation. La zone cliquable est bien plus grande que le trait. */
.room__tick{display:block;background:none;border:0;cursor:pointer;padding:13px 14px;line-height:0}
.room__tick:focus-visible{outline:2px solid var(--outremer);outline-offset:-4px}
.room__index i{display:block;width:14px;height:1px;background:rgba(210,221,246,.26);
  transition:width .7s var(--ease),background .7s var(--ease)}
.room__tick:hover i{width:24px;background:rgba(210,221,246,.7)}
.room__frame[data-active="0"] ~ .room__index .room__tick:nth-child(1) i,
.room__frame[data-active="1"] ~ .room__index .room__tick:nth-child(2) i,
.room__frame[data-active="2"] ~ .room__index .room__tick:nth-child(3) i,
.room__frame[data-active="3"] ~ .room__index .room__tick:nth-child(4) i{width:34px;background:var(--outremer)}
.room__frame{position:relative;width:100%;max-width:1180px;height:56svh}
/* inset:0 se résout sur la BOÎTE DE REMPLISSAGE du cadre : une marge posée sur le
   cadre n'a aucun effet sur les affirmations. Au-dessus de 1340 px le cadre est
   centré et l'écart existe tout seul ; en dessous il faut le poser ici, sinon les
   repères de lecture passent sous le texte. */
.stmt{
  position:absolute;inset:0;margin:0;display:flex;flex-direction:column;
  justify-content:center;
  opacity:0;transform:translateY(22px);pointer-events:none;
  transition:opacity .9s var(--ease),transform 1.2s var(--ease);
}
/* l'affirmation active dérive de 22 px dans son propre palier : sans ça, le cadre
   collé donne l'impression que la page ne répond plus au défilement */
.room__frame[data-active="0"] .stmt[data-i="0"],
.room__frame[data-active="1"] .stmt[data-i="1"],
.room__frame[data-active="2"] .stmt[data-i="2"],
.room__frame[data-active="3"] .stmt[data-i="3"]{
  opacity:1;pointer-events:auto;
  transform:translateY(calc((var(--p,.5) - .5) * -22px));
}
.stmt__line{margin:0;color:var(--papier);line-height:1.02;letter-spacing:.005em}
.stmt__line em{font-style:italic;color:#93A9FF}
.stmt__tag{margin-top:clamp(24px,4vh,44px);color:var(--bleu-pale)}

/* quatre formes, tirées de ce que chaque phrase dit */
.stmt--wide .stmt__line{font-size:clamp(38px,6.6vw,116px)}
.stmt--right{align-items:flex-end;text-align:right}
.stmt--right .stmt__line{font-size:clamp(30px,4vw,64px)}
.stmt--silence{align-items:center;text-align:center}
/* le flou est parti le 29.08. L'idée était que la phrase sur la discrétion
   reste illisible tant qu'on ne s'en approche pas ; sans survol sur téléphone,
   elle restait floue cinq secondes et se lisait comme un défaut d'affichage.
   Une idée qui a besoin d'être expliquée n'en est pas une. */
.stmt--silence .stmt__line{font-size:clamp(26px,3vw,44px)}
.stmt--hour{flex-direction:row;align-items:baseline;gap:clamp(22px,4vw,64px);flex-wrap:wrap}
.stmt__num{font-size:clamp(78px,15vw,240px);line-height:.78;color:#3A55FF}
.stmt__line--small{font-size:clamp(22px,2.6vw,38px)}
.stmt--hour .stmt__tag{width:100%;margin-top:clamp(18px,3vh,32px)}

/* ---------- LA CARTE : le membership devient un objet ----------
   Posé dans le noir, on le retourne. La matière est le sujet : dégradé oblique,
   liseré d'arête, ombre portée longue, et un reflet qui suit le pointeur. Une
   carte plate se lit comme une div ; c'est le reflet qui la rend tenue en main. */
.card{position:relative;perspective:1400px;   /* sans perspective, le retournement est plat */
  background:linear-gradient(to bottom,#050714 0%,#04060F 40%,#020408 100%);
  padding:clamp(90px,16vh,190px) var(--gut) clamp(80px,14vh,170px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(30px,5vh,56px)}
.card__kicker{color:var(--bleu-pale);margin:0;position:relative;z-index:4}
.card__obj{
  position:relative;z-index:4;width:min(520px,86vw);aspect-ratio:1.586;   /* format carte réel */
  background:none;border:0;padding:0;cursor:pointer;
  transform-style:preserve-3d;
  /* l'objet ne porte QUE le tour. L'inclinaison vit sur l'enveloppe. */
  transform:rotateY(var(--flip,0deg));
  transition:transform .9s cubic-bezier(.62,.05,.28,1);
}
.card__obj.is-turned{--flip:180deg}
.card__obj:focus-visible{outline:2px solid var(--outremer);outline-offset:16px}
.card__face{
  position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(26px,4vw,44px);text-align:left;
  border:1px solid rgba(175,192,255,.2);
  box-shadow:0 46px 90px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(210,221,246,.14);
}
.card__face--front{background:linear-gradient(148deg,#1B2C68 0%,#0E1740 46%,#070D26 100%)}
.card__face--back{background:linear-gradient(148deg,#16256A 0%,#0C1338 52%,#050A1E 100%);
  transform:rotateY(180deg)}
.card__mark{width:clamp(46px,7vw,68px);height:auto;fill:var(--papier-pur);opacity:.9}
.card__name{font-family:var(--display);font-size:clamp(24px,3.4vw,38px);
  letter-spacing:.16em;color:var(--papier-pur);margin-top:auto}
.card__edge{font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--bleu-pale);margin-top:12px}
.card__lead{font-size:clamp(20px,2.6vw,32px);line-height:1.12;color:var(--papier-pur)}
.card__steps{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:18px}
.card__steps b{font-weight:400;font-size:13px;color:rgba(210,221,246,.86)}
.card__steps i{font-style:normal;color:var(--outremer);font-size:13px}
.card__go{display:inline-flex;align-items:center;gap:9px;margin-top:auto;
  font-size:13px;letter-spacing:.02em;color:var(--papier-pur);
  border-bottom:1px solid rgba(210,221,246,.4);padding-bottom:6px;align-self:flex-start}
/* le reflet : sa position vient du pointeur, donc il tourne avec l'objet */
.card__sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 34%,rgba(190,208,255,.16) 50%,transparent 64%);
  transform:translateX(calc(var(--sx,0) * 26%));transition:transform .25s linear}
.card__hint{margin:0;position:relative;z-index:4;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:#5E6A9C;transition:opacity .6s var(--ease)}
.card.is-flipped .card__hint{opacity:0}

/* ---------- la fin ---------- */
.end{background:#020408;color:var(--bleu-pale);
  padding:clamp(60px,10vh,120px) var(--gut) clamp(50px,8vh,90px);
  display:flex;justify-content:space-between;align-items:baseline;gap:26px;flex-wrap:wrap}
.end__mail{font-size:clamp(22px,2.6vw,38px);color:var(--papier)}
.end__legal{margin:0;font-size:13px;color:#8C97C4}
.end__legal a{border-bottom:1px solid currentColor}

@media (max-width:1340px){
  .stmt{padding-left:clamp(54px,6vw,80px)}
}
@media (max-width:820px){
  .room{height:400vh}
  .room__frame{height:62svh}
  .stmt--right{align-items:flex-start;text-align:left}
  .stmt--hour{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .door__leaf{transition:none}
  .card__obj{transition:transform .01ms}
  .stmt{transition:opacity .2s linear}
}

/* =========================================================================
   LE PASSAGE — leur « How it works », mais ce n'est plus une liste de trois
   Un tracé traverse l'écran et MONTE. Chaque station s'allume quand le trait
   l'atteint. Le geste dit ce que les mots répètent : ça avance, et ça monte.
   Déclenché une fois, joué en 3,4 s, jamais tiré par le défilement.
   ========================================================================= */
/* le haut de section est court exprès : l'écran de la porte et le passage doivent
   se lire comme un seul moment, pas comme deux écrans isolés */
.path{position:relative;background:#0B1130;
  padding:clamp(34px,6vh,70px) var(--gut) clamp(90px,16vh,190px);overflow:hidden}
.path::before{content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(70% 66% at 42% 62%,rgba(40,66,178,.42),transparent 72%);
  animation:nuit-b 73s ease-in-out infinite}
.path::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.42;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
.path__kicker{position:relative;z-index:2;color:var(--bleu-pale);margin:0 0 clamp(28px,5vh,62px)}
.path__wrap{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
  aspect-ratio:1240/320}
/* le tracé sort du cadre à droite (x jusqu'à 1300 pour un viewBox de 1240) :
   sans découpe, ces 60 unités débordaient la page de 28 px */
.path__svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.path__dots{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* le trait : dasharray normalisée par pathLength, donc l'animation ne dépend
   d'aucun calcul de longueur réelle */
.path__line,.path__halo{stroke-dasharray:1;stroke-dashoffset:0;stroke-linecap:round;
  transition:stroke-dashoffset 3.4s cubic-bezier(.32,.72,.28,1)}
.path__line{stroke:url(#pGrad);stroke-width:1.7;vector-effect:non-scaling-stroke}
/* la traînée : le trait laisse de la lumière derrière lui au lieu d'être un filet
   posé. C'est elle qui fait la différence entre un graphique et un passage. */
.path__halo{stroke:#3550C8;stroke-width:5;opacity:.55}
.js .path__line,.js .path__halo{stroke-dashoffset:1}
.js .path.is-in .path__line,.js .path.is-in .path__halo{stroke-dashoffset:0}

/* le cheval court le tracé, et le trait apparaît derrière lui */
.path__runner{
  offset-path:path("M -60 288 C 40 282 110 268 190 258 C 360 236 430 190 600 178 C 770 166 850 122 1010 98 C 1120 82 1200 66 1300 48");
  offset-rotate:auto;offset-distance:0%;
  fill:#EEF2FF;opacity:0;
  filter:drop-shadow(0 0 9px rgba(150,175,255,.75));
  transition:offset-distance 3.4s cubic-bezier(.32,.72,.28,1);
}
/* l'opacité est une animation et non une transition : il faut paraître, tenir,
   puis s'effacer à l'arrivée. Une transition ne sait faire qu'un des trois. */
.js .path.is-in .path__runner{offset-distance:100%;animation:runner 3.4s linear backwards}
@keyframes runner{0%{opacity:0}7%{opacity:1}80%{opacity:1}100%{opacity:0}}

.path__node{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);
  transition:opacity .7s var(--ease),transform .9s var(--ease)}
.js .path.is-in .path__node{opacity:1;transform:none}
/* chaque station s'allume au moment où le trait l'atteint, pas avant */
.js .path.is-in .path__node[data-i="0"]{transition-delay:.85s}
.js .path.is-in .path__node[data-i="1"]{transition-delay:1.85s}
.js .path.is-in .path__node[data-i="2"]{transition-delay:2.85s}
.path__dot{fill:#DCE6FF}
.path__ring{fill:none;stroke:#AFC0FF;stroke-width:1.2;opacity:.7;
  transform-box:fill-box;transform-origin:center}
.js .path.is-in .path__node[data-i="0"] .path__ring{animation:ignite 1.5s var(--ease) .85s backwards}
.js .path.is-in .path__node[data-i="1"] .path__ring{animation:ignite 1.5s var(--ease) 1.85s backwards}
.js .path.is-in .path__node[data-i="2"] .path__ring{animation:ignite 1.5s var(--ease) 2.85s backwards}
@keyframes ignite{from{transform:scale(.5);opacity:.9}to{transform:scale(3.4);opacity:0}}

.path__stop{position:absolute;max-width:min(300px,32%);z-index:2;
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js .path.is-in .path__stop{opacity:1;transform:none}
.js .path.is-in .path__stop[data-i="0"]{transition-delay:1.0s}
.js .path.is-in .path__stop[data-i="1"]{transition-delay:2.0s}
.js .path.is-in .path__stop[data-i="2"]{transition-delay:3.0s}
/* les stations se posent AU-DESSUS de leur nœud : y = 258, 178 et 98 sur 320 */
.path__stop[data-i="0"]{left:0;bottom:27%}
.path__stop[data-i="1"]{left:42%;bottom:53%}
.path__stop[data-i="2"]{right:5%;bottom:82%;text-align:right;max-width:min(320px,30%)}
.path__name{font-size:clamp(24px,3vw,42px);margin:0;color:var(--papier);line-height:1}
.path__note{margin:.7em 0 0;font-size:14px;line-height:1.55;color:#93A0CC}

/* le passage sur téléphone : ce n'est plus une liste de trois points.
   Le même tracé, la même traînée, le même cheval ; la courbe se redresse et
   grimpe dans une colonne à gauche, les stations se posent à sa droite et
   respirent enfin. Le rapport du cadre est exactement celui du viewBox
   (360/800), sinon le SVG se centre et les stations ne tombent plus en face
   de leur nœud. La courbe DESCEND ici alors qu'elle monte sur ordinateur : on
   lit un téléphone de haut en bas, une courbe qui monte ferait rencontrer
   « You arrive » en premier. */
.path__svg--m,.path__dots--m{display:none}
@media (max-width:820px){
  .path{padding-bottom:clamp(60px,10vh,110px)}
  .path__wrap{aspect-ratio:360/800}
  .path__svg{display:none}
  .path__svg--m{display:block}
  .path__dots{display:none}
  .path__dots--m{display:block}
  .path__runner--m{
    offset-path:path("M 50 -20 C 44 106 85 132 92 210 C 100 296 38 324 34 412 C 30 500 88 522 96 610 C 104 700 46 760 46 860");
    /* la montée annulée : le cheval garde l'assiette qu'il a sur ordinateur */
    offset-rotate:auto -90deg;
  }
  /* le halo à 7 noyait le trait net : c'est le trait qui doit se lire, le halo
     n'est que la traînée qu'il laisse */
  .path__svg--m .path__halo{stroke-width:5;opacity:.5}
  .path__svg--m .path__line{stroke:url(#pGradM);stroke-width:2.2}
  /* les stations se posent en face de leur nœud : 610, 412 et 210 sur 800 */
  .path__stop[data-i]{position:absolute;left:31%;right:0;
    bottom:auto!important;max-width:none;text-align:left!important;margin:0}
  .path__stop[data-i="0"]{top:calc(26.25% - 54px)}
  .path__stop[data-i="1"]{top:calc(51.5% - 54px)}
  .path__stop[data-i="2"]{top:calc(76.25% - 54px)}
  .path__name{font-size:clamp(27px,7.6vw,38px)}
  .path__note{font-size:14.5px;color:#9CA9D6}
}

/* =========================================================================
   LE HERO PLUS COMPLET, ET REFERMABLE
   ========================================================================= */
.ask__grid{display:flex;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;text-align:left;
  margin-top:clamp(18px,2.8vh,28px)}
.ask__field--s{flex:1 1 150px;min-width:0}
.ask__in{
  width:100%;background:none;border:0;border-bottom:1px solid rgba(238,241,255,.34);
  padding:0 0 10px;color:var(--papier);font-family:var(--sans);font-size:16px;
  transition:border-color .35s var(--ease);
}
.ask__in::placeholder{color:rgba(238,241,255,.36)}
.ask__in:focus{outline:none;border-bottom-color:var(--outremer)}
.ask__foot{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap}
.ask__foot .ask__note{margin-top:clamp(18px,2.6vh,26px)}
/* un formulaire ouvert qu'on ne peut plus replier laisse la page encombrée pour
   qui a changé d'avis. Le hero doit pouvoir redevenir une seule ligne. */
.ask__close{
  background:none;border:0;padding:0;cursor:pointer;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#8C97C4;transition:color .3s var(--ease);
}
.ask__close:hover{color:var(--papier)}
.ask__close:focus-visible{outline:2px solid var(--outremer);outline-offset:5px}

/* =========================================================================
   LA CARTE : elle s'ouvre en dossier
   Le retournement ne montre pas un dos décoratif, il ouvre la demande
   d'adhésion. L'objet GRANDIT en tournant : c'est ce qui le fait lire comme
   une carte qui devient un document, et non comme deux faces d'une image.
   ========================================================================= */
.card__obj{width:min(520px,86vw);height:min(328px,54vw)}
/* LE VRAI DÉFAUT, trouvé le 30.08 en mesurant au lieu de deviner : au processeur
   bridé six fois, aucune image ne dépasse 17 ms. Ce n'était donc pas une question
   de fluidité, mais de ce qu'on voit.
   Les deux faces étaient posées en inset:0, donc leur hauteur SUIVAIT celle de
   l'objet : le recto s'allongeait pendant la première moitié du tour. Une carte
   de crédit qui s'étire en tournant, c'est ça qui n'allait pas, sur ordinateur
   comme sur téléphone.
   Chaque face a maintenant sa hauteur, fixe. Celle de l'objet ne sert plus qu'à
   la mise en page, elle peut donc s'animer sur la même courbe que le tour : le
   bas de page suit le mouvement au lieu de sauter de 350 px à mi-parcours. */
.card{--h-recto:min(328px,54vw);--h-verso:min(560px,158vw)}
.card__obj{height:var(--h-recto);
  transition:transform .9s cubic-bezier(.62,.05,.28,1),
             height .9s cubic-bezier(.62,.05,.28,1)}
.card__obj.is-turned{height:var(--h-verso)}
.card__face{top:0;bottom:auto;height:var(--h-recto)}
.card__face--back{height:var(--h-verso)}
@media (max-width:820px){
  .card{--h-verso:clamp(510px,150vw,560px)}
}
.card__face--back{justify-content:flex-start}
/* backface-visibility cache la face, mais Chrome continue de la tester au clic :
   le bouton du recto captait la flèche de retour. La face cachée doit être
   explicitement sortie du pointeur ET du parcours clavier (attribut inert). */
.card__flip{
  position:absolute;inset:0;z-index:5;background:none;border:0;cursor:pointer;
}
/* backface-visibility ne tient pas sur tous les téléphones : le recto se
   voyait à travers le verso, en miroir, avec le logo en haut à droite et le nom
   à l'envers. On bascule franchement les deux faces à mi-rotation (0,58 s pour
   1,15 s de tour), ce qui ne dépend plus d'aucune propriété 3D. */
/* 0,41 s et non 0,45 : c'est l'instant EXACT où cette courbe passe les 90°,
   calculé sur la bézier et non estimé. À 0,45 s la carte s'était déjà rouverte
   de 9° et le recto se voyait en miroir sur deux images. */
.card__face{transition:opacity .01s linear .41s}
.card__obj.is-turned .card__face--front{opacity:0;pointer-events:none}
.card__obj:not(.is-turned) .card__face--back{opacity:0;pointer-events:none}
.card__flip-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.card__flip:focus-visible{outline:2px solid #6E8CFF;outline-offset:-6px}
.card__return{
  position:absolute;top:clamp(18px,2.6vw,26px);right:clamp(18px,2.6vw,26px);z-index:6;
  width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid rgba(210,221,246,.24);color:var(--papier-pur);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.card__return:hover{border-color:rgba(210,221,246,.6);background:rgba(210,221,246,.08)}
.card__title{color:var(--bleu-pale);margin:0 0 12px}
.card__lead{font-size:clamp(17px,2vw,25px);line-height:1.12;color:var(--papier-pur)}
.card__form{display:flex;flex-direction:column;gap:clamp(10px,1.5vh,15px);
  margin-top:clamp(16px,2.4vh,24px)}
.cf{display:block}
.cf i{display:block;font-style:normal;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(175,187,238,.82);margin-bottom:5px}
.cf i b{font-weight:400;text-transform:none;letter-spacing:.02em;color:#7A86BC;margin-left:6px}
.cf input{width:100%;background:none;border:0;border-bottom:1px solid rgba(210,221,246,.26);
  padding:0 0 6px;color:var(--papier-pur);font-family:var(--sans);font-size:14px;
  transition:border-color .3s var(--ease)}
.cf input:focus{outline:none;border-bottom-color:#6E8CFF}
.cf--two{display:flex;gap:14px}
.cf__h{flex:1 1 0;min-width:0;display:block}
.card__go{background:none;border:0;padding:0 0 6px;cursor:pointer;font-family:var(--sans)}
/* au dos, « Apply » suit le formulaire au lieu d'être poussé tout en bas :
   margin-top:auto ouvrait 200 px de vide sous le dernier champ */
.card__face--back .card__go{margin-top:clamp(20px,3.4vh,32px)}
.card__legal{margin-top:9px;font-size:10px;letter-spacing:.02em;color:#7A86BC}
.card__done{display:flex;flex-direction:column;justify-content:center;height:100%;gap:12px}
.card__done b{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.2vw,27px);
  color:var(--papier-pur);line-height:1.14}
.card__done span{font-size:13px;line-height:1.6;color:rgba(210,221,246,.74)}

/* la hauteur ouverte de la carte doit venir APRÈS la règle de base : même
   spécificité, c'est l'ordre qui tranche, et la règle mobile était écrite avant */

/* =========================================================================
   RÉVISION DU 29.08 (soir)
   ========================================================================= */

/* --- le volet d'un service mène à la demande ------------------------------
   La nuance qu'il manquait : ouvrir une ligne explique le service, et propose
   de le demander tout de suite, la phrase déjà écrite dans le formulaire. */
.entry__go{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  margin:22px var(--gut) clamp(26px,3.4vw,40px);
  background:none;border:0;border-bottom:1px solid currentColor;padding:0 0 5px;
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#CFDBFF;
  transition:gap .4s var(--ease),color .3s var(--ease);
}
.entry__go:hover{gap:15px;color:var(--papier-pur)}
.entry__go:focus-visible{outline:2px solid var(--papier);outline-offset:5px}

/* --- LA DEMANDE : sa propre surface ---------------------------------------
   Ni une page (pas de chargement, pas de retour arrière), ni un dépliage qui
   pousse le hero vers le bas. Une surface qui prend l'écran en 0,3 s et le
   rend intact. Le fond est le même bleu nuit que le reste de la nuit, avec la
   même lueur et le même grain : on n'a pas quitté la maison. */
.req{
  position:fixed;inset:0;z-index:50;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#070C1F;opacity:0;pointer-events:none;transition:opacity .3s linear;
}
.req.is-on{opacity:1;pointer-events:auto}
.req::before{content:'';position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(72% 44% at 50% 116%,rgba(30,58,255,.5),transparent 70%)}
.req::after{content:'';position:fixed;inset:0;pointer-events:none;opacity:.4;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
.req__scroll{position:relative;z-index:2;min-height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,6vh,64px) var(--gut)}
.req__panel{width:100%;max-width:600px;margin:0 auto;
  transform:translateY(12px);transition:transform .5s var(--ease)}
.req.is-on .req__panel{transform:none}
.req__top{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:16px;border-bottom:1px solid rgba(210,221,246,.14);
  margin-bottom:clamp(24px,5vh,44px)}
.req__id{display:flex;align-items:center;gap:11px;
  font-family:var(--display);font-size:15px;letter-spacing:.18em;color:var(--papier)}
.req__id img{width:30px;height:auto;opacity:.92}
.req__close{
  background:none;border:0;padding:0;cursor:pointer;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#8C97C4;transition:color .3s var(--ease);
}
.req__close:hover{color:var(--papier)}
.req__close:focus-visible{outline:2px solid var(--outremer);outline-offset:6px}
.req__eyebrow{margin:0 0 clamp(14px,2.4vh,22px)}
.ask__field--wide{flex:2 1 210px}
.req__send{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,32px);flex-wrap:wrap;
  margin-top:clamp(26px,5vh,44px);padding-top:clamp(20px,3vh,28px);
  border-top:1px solid rgba(210,221,246,.14)}
.req__send .ask__note{margin:0;flex:1 1 230px;max-width:330px}
/* la page derrière ne doit pas défiler pendant qu'on écrit : sur iOS, seul
   position:fixed tient, overflow:hidden y est ignoré */
body.is-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}
@media (max-width:640px){
  .req__send{flex-direction:column;align-items:stretch}
  /* en colonne, flex-basis se lit sur la HAUTEUR : la note prenait 230 px et
     poussait le bouton d'envoi hors de l'écran */
  .req__send .ask__note{flex:0 0 auto;max-width:none}
  .req__send .ask__go{justify-content:center;max-width:none}
  .ask__grid{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .req,.req__panel{transition:none}
}

/* --- LA CARTE : de la matière, et un vrai dossier au dos ------------------
   Une carte de membre n'est pas un rectangle bleu : c'est une trame gravée,
   un cadre en filet, un pied qui porte deux mentions. */
.card__guilloche{position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:
    repeating-linear-gradient(56deg,rgba(190,208,255,.05) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(-56deg,rgba(190,208,255,.028) 0 1px,transparent 1px 13px)}
.card__rule{position:absolute;inset:clamp(9px,1.4vw,15px);pointer-events:none;
  border:1px solid rgba(190,208,255,.14)}
.card__mark,.card__name,.card__foot{position:relative;z-index:2}
.card__foot{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-top:12px}
.card__foot .card__edge{margin-top:0}
.card__edge--r{color:rgba(175,187,238,.58)}
/* ce que leur formulaire ne demande pas, et qui sert vraiment : ce pour quoi
   on va nous appeler. Deux touches, aucun champ à écrire. */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  background:none;border:1px solid rgba(210,221,246,.24);color:rgba(210,221,246,.82);
  font-family:var(--sans);font-size:11px;letter-spacing:.05em;padding:6px 11px;
  cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.chip:hover{border-color:rgba(210,221,246,.5);color:var(--papier-pur)}
.chip.is-on{background:var(--outremer);border-color:var(--outremer);color:var(--papier-pur)}
.chip:focus-visible{outline:2px solid #6E8CFF;outline-offset:3px}
/* le dos porte maintenant six champs et les touches : il lui faut sa hauteur */

/* le plus, en colonne, se retrouvait centré au milieu de la ligne. La règle doit
   vivre APRÈS la définition de base : même spécificité, c'est l'ordre qui tranche,
   et une requête média n'y change rien. */
@media (max-width:820px){
  .entry__plus{position:absolute;right:0;top:15px;margin-left:0;align-self:auto}
}

/* --- révision du 30.08 : leur contenu, leurs deux portes d'entrée --------- */

/* « Speak with us » : leur second bouton de hero, qui ouvre leur WhatsApp.
   Volontairement secondaire, la demande écrite reste le geste principal. */
.ask__wa{display:inline-flex;align-items:center;gap:9px;padding:0 0 9px;
  font-size:14px;color:rgba(210,221,246,.7);transition:color .3s var(--ease)}
.ask__wa svg{opacity:.85;flex:0 0 auto}
.ask__wa:hover{color:var(--papier)}
.ask__wa:focus-visible{outline:2px solid var(--outremer);outline-offset:6px}

/* Membership dans la barre : sans lui, il faut défiler toute la page pour
   apprendre que l'adhésion existe. Leur propre menu le porte. */
.bar__link{font-size:13px;color:var(--papier);opacity:.82;transition:opacity .3s var(--ease)}
.bar__link:hover{opacity:1}

/* leur case de consentement */
.agree{position:relative;display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  margin-top:clamp(22px,3.4vh,32px)}
.agree__box{position:absolute;width:1px;height:1px;opacity:0}
.agree__mark{position:relative;flex:0 0 auto;width:16px;height:16px;margin-top:2px;
  border:1px solid rgba(238,241,255,.34);
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.agree__mark::after{content:'';position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid var(--papier-pur);border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) scale(.4);opacity:0;
  transition:opacity .2s var(--ease),transform .25s var(--ease)}
.agree__box:checked + .agree__mark{background:var(--outremer);border-color:var(--outremer)}
.agree__box:checked + .agree__mark::after{opacity:1;transform:rotate(45deg) scale(1)}
.agree__box:focus-visible + .agree__mark{outline:2px solid var(--outremer);outline-offset:4px}
.agree__txt{font-size:13px;line-height:1.5;color:#8C97C4}

/* la seconde phrase de leur membership, sous l'accroche */
.card__sub{display:block;margin-top:9px;font-size:11px;line-height:1.5;
  color:rgba(175,187,238,.74)}

/* le dos porte maintenant leurs neuf champs : il lui faut sa hauteur */
/* trois blocs dans une barre de 360 px : tout rétrécit d'un cran plutôt que de
   sacrifier le sélecteur de langue, qui est un argument de la démo */
@media (max-width:560px){
  .bar{padding:18px 16px}
  .bar__mark{gap:9px}
  .bar__mark img{width:26px}
  .bar__name{font-size:15px;letter-spacing:.12em}
  .bar__right{gap:13px}
  .bar__link{font-size:12px}
  .langs{gap:8px;font-size:10px;letter-spacing:.08em}
}

/* --- US : où, et par qui ---------------------------------------------------
   Posée entre le passage et la chambre, donc dans la même nuit : #0B1130 des
   deux côtés, la couleur ne s'interrompt pas. Une seule pièce d'affichage, la
   liste elle-même, encadrée de deux lignes calmes. */
/* la marge du bas est courte exprès : la chambre qui suit centre déjà sa
   première phrase au milieu de l'écran, ce qui ajoute près de 200 px. Les deux
   cumulés ouvraient un trou de 320 px entre la note et « Everywhere you go ». */
.us{position:relative;isolation:isolate;background:#0B1130;
  padding:clamp(10px,3vh,40px) var(--gut) clamp(8px,2.2vh,28px)}
.us__kicker{margin:0 0 clamp(16px,2.6vh,26px)}
.us__intro{margin:0;font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:#97A3D0}
/* la liste comme une maison de mode imprime ses adresses : dans sa typo, en
   grand, en texte courant. Un alignement en colonnes en aurait fait un tableau. */
/* graisse 500 et non 400 : c'est le plus petit corps d'affichage de la page et
   il est sur fond sombre. La graisse la plus fine d'une serif s'y délave. */
.us__cities{margin:clamp(18px,3vh,30px) 0 0;font-weight:500;
  font-size:clamp(23px,2.9vw,40px);line-height:1.38;letter-spacing:-.005em;
  color:var(--papier);max-width:min(1000px,94vw)}
.us__cities em{font-style:italic;color:#93A9FF}
.us__note{margin:clamp(26px,4vh,38px) 0 0;font-size:15px;line-height:1.6;
  color:#7E89B8;max-width:min(520px,92vw)}

.us__kicker,.us__intro,.us__cities,.us__note{position:relative;z-index:2}

/* le mouvement réduit doit rester le dernier mot : la règle d'origine était
   écrite avant la nouvelle transition de la carte, et une même spécificité se
   tranche à l'ordre */
@media (prefers-reduced-motion:reduce){
  .card__obj{transition:transform .01ms,height .01ms}
  .card__face{transition:none}
}


/* --- le geste de la section US --------------------------------------------
   Pas une quatrième apparition en fondu : la porte, le tracé et la chambre ont
   chacun un geste qui dit ce que les mots disent, celui-ci aussi. Les villes
   s'ajoutent l'une après l'autre, et le rythme s'accélère à mesure, comme une
   liste qu'on complète et qui n'en finit pas. Le mouvement est le même que
   partout ailleurs sur le site, seule l'amplitude change : 11 px et non 24,
   parce que les objets qui bougent sont des mots et non des blocs.
   Déclenché une fois, joué à sa vitesse, jamais tiré par le défilement. */
.js .us__kicker,.js .us__intro,.js .us__note{opacity:0}
.js .us__cities span,.js .us__cities em{display:inline-block;opacity:0}
.js .us.is-in .us__kicker{opacity:1;animation:rise .8s var(--ease) .05s backwards}
.js .us.is-in .us__intro{opacity:1;animation:rise .8s var(--ease) .16s backwards}
.js .us.is-in .us__cities span{opacity:1;animation:rise-s .7s var(--ease) backwards}
.js .us.is-in .us__cities span:nth-child(1){animation-delay:0.280s}
.js .us.is-in .us__cities span:nth-child(2){animation-delay:0.335s}
.js .us.is-in .us__cities span:nth-child(3){animation-delay:0.387s}
.js .us.is-in .us__cities span:nth-child(4){animation-delay:0.436s}
.js .us.is-in .us__cities span:nth-child(5){animation-delay:0.482s}
.js .us.is-in .us__cities span:nth-child(6){animation-delay:0.525s}
.js .us.is-in .us__cities span:nth-child(7){animation-delay:0.566s}
.js .us.is-in .us__cities span:nth-child(8){animation-delay:0.604s}
.js .us.is-in .us__cities span:nth-child(9){animation-delay:0.640s}
.js .us.is-in .us__cities span:nth-child(10){animation-delay:0.674s}
.js .us.is-in .us__cities span:nth-child(11){animation-delay:0.706s}
.js .us.is-in .us__cities span:nth-child(12){animation-delay:0.736s}
/* la chute : 0,5 s après le dernier nom, le temps qu'il se pose */
.js .us.is-in .us__cities em{opacity:1;animation:rise-s .9s var(--ease) 1.25s backwards}
.js .us.is-in .us__note{opacity:1;animation:rise .8s var(--ease) 1.62s backwards}
@keyframes rise-s{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .us__kicker,.js .us__intro,.js .us__note,
  .js .us__cities span,.js .us__cities em{opacity:1;animation:none}
}

/* --- l'inclinaison et le tour ne partagent plus rien -----------------------
   Diagnostic du 30.08, reproduit à la souris : pendant le retournement, chaque
   mouvement du pointeur réécrivait --ry sur le MÊME élément que --flip, donc
   relançait la transition de 0,9 s à partir de l'angle courant. Mesuré, la carte
   partait à -40° et oscillait au lieu d'aller à 180°. Elle ne se retournait
   jamais. Les tests ne le voyaient pas : ils ne bougent pas la souris.
   Deux éléments, deux transformations, deux transitions : plus de conflit
   possible, et l'inclinaison retrouve au passage une durée qui lui va (0,3 s au
   lieu des 0,9 s du tour, où elle traînait derrière le pointeur). */
.card__tilt{
  position:relative;z-index:4;width:min(520px,86vw);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .3s ease-out;
}
.card__obj{width:100%}
@media (prefers-reduced-motion:reduce){
  .card__tilt{transition:none;transform:none}
}

/* =========================================================================
   ESSAI DU 30.08 — L'AUBE SE LÈVE SUR LE CHEVAL
   Tout est sous .aube, posée par le script. Retirer la ligne dans app.js suffit
   à revenir exactement à l'état d'avant : ce voile n'existe même plus.

   Le cheval N'ARRIVE PAS. Il est déjà là, il arrive dans le rideau, tracé ligne
   par ligne, et c'est sa seule entrée. Ce qui arrive ici, c'est la LUMIÈRE : le
   voile éteint l'aube et l'ancrage, laissant le liseré crème du cheval seul
   visible sur le noir, exactement comme le rideau se termine sur un tracé. Puis
   le jour monte derrière lui. Un seul geste, aucune cascade de fondus.
   ========================================================================= */
.hero__night{display:none}
.aube .hero__night{
  display:block;position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(to top,
    #04060E 0%,rgba(4,6,14,.94) 44%,rgba(4,6,14,.6) 74%,rgba(4,6,14,0) 100%);
  /* PAS var(--ease) : cette courbe est faite pour poser un élément, elle expédie
     85 % du changement dans le premier quart du temps. Un jour qui se lève doit
     prendre son temps, donc une courbe symétrique, lente au départ. */
  animation:lever 1.9s cubic-bezier(.55,.05,.25,1) 2.05s backwards;
}
/* l'état de départ vit UNIQUEMENT dans la keyframe : posé sur la règle de base
   il redeviendrait l'état final et la page resterait dans le noir */
@keyframes lever{from{opacity:1}to{opacity:0}}
@keyframes paraitre{from{opacity:0}to{opacity:1}}
/* le seuil vers le registre est au-dessus de tout (z-index 6), le voile de nuit
   ne pouvait pas l'éteindre : il restait une bande claire allumée en bas d'une
   page noire. Il se lève avec le reste de la lumière. */
.aube .hero__veil{animation:paraitre 1.9s cubic-bezier(.55,.05,.25,1) 2.05s backwards}
/* déjà venu pendant cette session : le rideau ne se rejoue pas, la lumière non plus */
.aube.seen .hero__night,.aube.seen .hero__veil{animation-delay:.2s;animation-duration:1.4s}
@media (prefers-reduced-motion:reduce){
  .aube .hero__night{animation:none;opacity:0}
  .aube .hero__veil{animation:none}
}

/* la mention de démo : lisible sans être une bannière (contraste 5,7:1 sur #020408) */
.end__demo{flex:1 0 100%;margin:clamp(20px,3vh,32px) 0 0;padding-top:clamp(16px,2.4vh,24px);
  border-top:1px solid rgba(140,151,196,.18);
  font-size:12px;line-height:1.6;color:#7E89B8;max-width:min(560px,92vw)}