/* ============================================================
   SITE INVESTISSEURS AU GABARIT V10 — la roadmap Atlantis (preview/invest/roadmap/, FR et EN)
   ------------------------------------------------------------
   Chargée APRÈS css/v10.css et css/v10-invest.css, sur cette page seulement. Toutes ses classes
   commencent par inv-rm- : rien ne heurte la feuille commune.

   La frise est une liste ordonnée (<ol class="wrap inv-rm-frise">) dont chaque <li> est une étape :
   la date (un point sur l'axe et son libellé), le texte, et parfois une illustration. Sur bureau,
   l'axe est au centre et le texte du côté que lui donnait la page d'origine (--gauche / --droite),
   l'illustration en face ; sous 760 px, l'axe passe à gauche et tout s'empile. Trois traits côte à
   côte pour l'axe, comme l'origine : santé (bleu), neutre (blanc), Atlantis (or). Le ton d'une étape
   (--sante, --atlantis, --neutre) colore son point ; son titre porte .inv-bleu / .inv-or.
   La liste EST le .wrap : js/apparition.js anime donc chaque étape une à une (enfants de .v-sec .wrap).
   ============================================================ */

/* ─── HERO ───────────────────────────────────────── */
/* Titre et chapô : ceux de .v-hero (la section porte v-hero v-hero--seul). */
.inv-rm-hero{min-height:min(82svh,780px)}
.inv-rm-hero .inv-fond{object-position:50% 0}
.inv-rm-hero .eyebrow{justify-content:center;color:var(--inv-or-2)}
.inv-rm-hero .lead{margin-bottom:0}

/* ─── LA SECTION ─────────────────────────────────── */
/* Au bas de la frise, le fond de l'origine (bottom_roadmap.avif) fondu dans --fond. La frise suit le hero sans
   titre à elle : la marge haute réduite de galeon.care après un hero (.v-hero--texte + .v-sec). */
.v-sec.inv-rm{padding-top:clamp(32px,4vw,56px);overflow:hidden;isolation:isolate}
.inv-rm__fond{position:absolute;left:0;right:0;bottom:0;height:min(1400px,60%);z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,var(--fond) 0%,rgba(11,16,32,.74) 45%,rgba(11,16,32,.6) 75%,var(--fond) 100%),
    url("/cdn/68d3b3d62e1dd12ea5ee2087_bottom_roadmap.avif") 50% 100%/cover no-repeat}

/* ─── LA FRISE ───────────────────────────────────── */
.inv-rm-frise{--axe:50%;position:relative;margin:0 auto;list-style:none;display:flex;flex-direction:column;gap:clamp(44px,6vw,84px);padding-top:8px;padding-bottom:8px}
.inv-rm-frise::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--axe) - 8px);width:16px;pointer-events:none;
  background:
    linear-gradient(180deg,transparent,rgba(140,194,255,.75) 3%,rgba(140,194,255,.75) 97%,transparent) 0 0/2px 100% no-repeat,
    linear-gradient(180deg,transparent,rgba(255,255,255,.9) 3%,rgba(255,255,255,.9) 97%,transparent) 7px 0/2px 100% no-repeat,
    linear-gradient(180deg,transparent,rgba(245,210,161,.75) 3%,rgba(245,210,161,.75) 97%,transparent) 14px 0/2px 100% no-repeat}

.inv-rm-etape{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 320px minmax(0,1fr);align-items:center}
.inv-rm-date{grid-row:1;grid-column:2;position:relative;height:34px;margin:0}
.inv-rm-point{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--fond);border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 5px var(--fond),0 0 18px rgba(255,255,255,.35)}
.inv-rm-point::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#fff}
.inv-rm-etape--sante .inv-rm-point{border-color:var(--blue-l,#8cc2ff);box-shadow:0 0 0 5px var(--fond),0 0 18px rgba(71,154,243,.5)}
.inv-rm-etape--sante .inv-rm-point::after{background:var(--inv-grad-bleu)}
.inv-rm-etape--atlantis .inv-rm-point{border-color:var(--inv-or);box-shadow:0 0 0 5px var(--fond),0 0 18px rgba(227,183,116,.45)}
.inv-rm-etape--atlantis .inv-rm-point::after{background:var(--inv-grad-or)}
.inv-rm-libelle{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:600;letter-spacing:.01em;color:rgba(var(--tx-rgb),.9)}
.inv-rm-etape--atlantis .inv-rm-libelle{border-color:var(--inv-trait-or);color:var(--inv-or-2)}
.inv-rm-etape--sante .inv-rm-libelle{border-color:rgba(140,194,255,.32);color:#cfe5ff}
/* le libellé se pose du côté du texte, contre le point */
.inv-rm-etape--gauche .inv-rm-libelle{right:calc(50% + 20px)}
.inv-rm-etape--droite .inv-rm-libelle{left:calc(50% + 20px)}

.inv-rm-texte{grid-row:1;max-width:440px}
.inv-rm-texte h3{margin:0 0 10px;text-wrap:balance}
.inv-rm-texte p{margin:0;font-size:15px;line-height:1.6;color:var(--dim);text-wrap:pretty}
.inv-rm-liste{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px;font-size:15px;line-height:1.55;color:var(--dim)}
.inv-rm-liste li{position:relative;padding-left:18px}
.inv-rm-liste li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--inv-grad-or)}
.inv-rm-etape--gauche .inv-rm-texte{grid-column:1;justify-self:end;text-align:right}
.inv-rm-etape--gauche .inv-rm-liste li{padding-left:0;padding-right:18px}
.inv-rm-etape--gauche .inv-rm-liste li::before{left:auto;right:0}
.inv-rm-etape--droite .inv-rm-texte{grid-column:3;justify-self:start}

/* Les illustrations sont des croquis sur fond transparent : pas de cadre. Largeur fixée, hauteur auto (piège 8). */
.inv-rm-visuel{grid-row:1;margin:0;width:100%;max-width:260px}
.inv-rm-visuel img{width:100%;height:auto}
.inv-rm-visuel--large{max-width:300px}
.inv-rm-etape--gauche .inv-rm-visuel{grid-column:3;justify-self:start}
.inv-rm-etape--droite .inv-rm-visuel{grid-column:1;justify-self:end}

/* « Aujourd'hui | 2026 » : un trait qui coupe la frise, le libellé posé sur l'axe */
.inv-rm-maintenant{position:relative;display:flex;justify-content:center;align-items:center;padding:6px 0}
.inv-rm-maintenant::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-1px);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75) 18%,rgba(255,255,255,.75) 82%,transparent)}
.inv-rm-maintenant p{position:relative;margin:0;padding:10px 22px;border-radius:999px;background:var(--fond);border:1px solid rgba(255,255,255,.4);
  font-size:14px;color:rgba(var(--tx-rgb),.8);box-shadow:0 0 0 8px var(--fond)}
.inv-rm-maintenant strong{color:#fff;font-weight:700}

/* ─── MOBILE : l'axe à gauche, tout s'empile ─────── */
@media (max-width:760px){
  .inv-rm-frise{--axe:24px;gap:44px}
  .inv-rm-etape{grid-template-columns:minmax(0,1fr);row-gap:12px;padding-left:40px}
  .inv-rm-date,.inv-rm-texte,.inv-rm-visuel{grid-column:1!important;grid-row:auto!important;justify-self:start!important}
  .inv-rm-date{height:auto}
  .inv-rm-point{left:-32px}
  .inv-rm-libelle,.inv-rm-etape--gauche .inv-rm-libelle,.inv-rm-etape--droite .inv-rm-libelle{position:static;transform:none}
  .inv-rm-texte,.inv-rm-etape--gauche .inv-rm-texte{text-align:left;max-width:none}
  .inv-rm-etape--gauche .inv-rm-liste li{padding-left:18px;padding-right:0}
  .inv-rm-etape--gauche .inv-rm-liste li::before{left:0;right:auto}
  .inv-rm-visuel{max-width:200px}
  .inv-rm-visuel--large{max-width:260px}
  .inv-rm-maintenant{justify-content:flex-start;padding-left:40px}
  .inv-rm-maintenant::before{background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.75) 70%,transparent)}
}