/* =====================================================================
   Marylink — ROI : « Ce que vous payez sans le voir » (coûts invisibles).
   Infographie animée : 3 cartes (réinvention / onboarding / qualité)
   chacune avec un mini-motif en boucle, apparition en cascade au scroll,
   puis bandeau-phrase sur fond sombre.

   - TOUT est scopé sous .roihidden (zéro fuite globale).
   - Réutilise les variables charte globales (--ink, --v, --aqua, --night…),
     jamais redéfinies ici.
   - Les motifs sont 100% CSS (boucles) ; le JS n'ajoute que .rh-js (présence
     du script) puis .on (entrée dans le viewport) et construit la géométrie
     SVG décorative (aucun texte n'est injecté par le JS).
   - Stratégie de repli : sans .rh-js (JS absent) tout est visible à l'état
     final statique ; avec .rh-js mais sans .on, état « prêt » (masqué) ;
     .rh-js.on déclenche entrée + boucles. prefers-reduced-motion => final figé.
   ===================================================================== */

.roihidden{max-width:1120px;margin:0 auto}
.roihidden *{box-sizing:border-box}

/* ---- en-tête -------------------------------------------------------- */
.roihidden .rh-head{text-align:center;max-width:760px;margin:0 auto 30px}
.roihidden .rh-eyebrow{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--vd);
  background:var(--vl);padding:5px 13px;border-radius:999px;
}
.roihidden .rh-title{
  font-family:'Bricolage Grotesque';font-weight:800;letter-spacing:-.015em;
  font-size:clamp(24px,3.4vw,34px);line-height:1.12;color:var(--ink);margin:14px 0 0;
}
.roihidden .rh-sub{
  margin:12px auto 0;color:var(--muted);font-size:clamp(15px,1.7vw,17px);
  line-height:1.55;max-width:620px;
}

/* ---- grille des 3 cartes ------------------------------------------- */
.roihidden .rh-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;
}
@media(max-width:900px){.roihidden .rh-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}}

.roihidden .rh-card{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px 22px;
  box-shadow:0 18px 44px -34px rgba(60,70,170,.5);
  will-change:transform,opacity;
}
.roihidden .rh-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0,rgba(80,98,255,.05),transparent 55%);
}

/* tête de carte : badge numéroté + titre */
.roihidden .rh-chead{position:relative;display:flex;align-items:center;gap:12px}
.roihidden .rh-badge{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-family:'Bricolage Grotesque';font-weight:800;font-size:15px;color:#fff;
  background:linear-gradient(135deg,var(--v),var(--vd));
  box-shadow:0 6px 14px -6px rgba(80,98,255,.7);
}
.roihidden .rh-card:nth-child(3) .rh-badge{background:linear-gradient(135deg,var(--aqua),#c92d5e)}
.roihidden .rh-ctitle{
  margin:0;font-family:'Bricolage Grotesque';font-weight:800;letter-spacing:-.01em;
  font-size:clamp(17px,1.7vw,19px);line-height:1.16;color:var(--ink);
}

/* zone motif */
.roihidden .rh-motif{
  position:relative;height:148px;margin:16px 0 16px;overflow:hidden;
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,var(--soft),#fff);
  display:grid;place-items:center;
}
.roihidden .rh-motif svg{display:block}
.roihidden .rh-motif[data-motif="loop"] svg,
.roihidden .rh-motif[data-motif="stairs"] svg{width:130px;height:130px}

.roihidden .rh-expl{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55;flex:1 1 auto}

.roihidden .rh-repere{
  margin-top:15px;align-self:flex-start;display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.01em;
  color:var(--vd);background:var(--vl);border-radius:999px;padding:6px 12px;
}
.roihidden .rh-card:nth-child(3) .rh-repere{color:#b32a59;background:#ffe1ec}
.roihidden .rh-repere svg{width:13px;height:13px;flex:0 0 auto}

/* =====================================================================
   MOTIF 1 — réinvention : anneau ↺ qui tourne + prompt re-tapé en boucle
   ===================================================================== */
.roihidden .rh-loop-track{fill:none;stroke:var(--line);stroke-width:4}
.roihidden .rh-ring{transform-box:view-box;transform-origin:60px 60px}
.roihidden .rh-ring-arc{fill:none;stroke:var(--v);stroke-width:4.4;stroke-linecap:round}
.roihidden .rh-ring-head{fill:var(--v)}
.roihidden .rh-chip{fill:#fff;stroke:var(--line);stroke-width:1.4}
.roihidden .rh-tbar{fill:var(--vd);transform-box:fill-box;transform-origin:left center}
.roihidden .rh-tbar.b2{fill:var(--aqua)}

/* =====================================================================
   MOTIF 2 — onboarding : marches + grimpeur qui « repart du bas »
   ===================================================================== */
.roihidden .rh-tread{fill:var(--vl)}
.roihidden .rh-tread.top{fill:#dfe2ff}
.roihidden .rh-riser{fill:#eceaf9}
.roihidden .rh-goal{fill:var(--amber);transform-box:fill-box;transform-origin:center}
.roihidden .rh-goal-ring{fill:none;stroke:var(--amber);stroke-width:1.6;opacity:.45}
.roihidden .rh-climber-halo{fill:var(--aqua);opacity:.18}
.roihidden .rh-climber-core{fill:var(--aqua)}
.roihidden .rh-climber-core .d{fill:#fff}

/* =====================================================================
   MOTIF 3 — qualité : 2 rangées d'étoiles remplies à niveaux différents
   ===================================================================== */
.roihidden .rh-motif[data-motif="stars"]{
  display:flex;flex-direction:column;justify-content:center;gap:16px;padding:0 18px;
}
.roihidden .rh-srow{display:flex;align-items:center;gap:11px}
.roihidden .rh-slab{
  flex:0 0 52px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.roihidden .rh-srow[data-level="5"] .rh-slab{color:var(--vd)}
.roihidden .rh-sbox{flex:1 1 auto;min-width:0;line-height:0}
.roihidden .rh-sbox svg{width:100%;height:auto}
.roihidden .rh-star-out{fill:none;stroke:#cfc9ec;stroke-width:1.4;stroke-linejoin:round}
.roihidden .rh-clip-rect{transform-box:view-box;transform-origin:left center}

/* =====================================================================
   ÉTAT « PRÊT » (.rh-js, JS présent mais pas encore en vue) : masqué
   ===================================================================== */
.roihidden.rh-js .rh-card{opacity:0;transform:translateY(22px) scale(.985)}
.roihidden.rh-js .rh-banner{opacity:0;transform:translateY(18px)}
/* motifs au point de départ de leur boucle */
.roihidden.rh-js .rh-tbar{transform:scaleX(0)}
.roihidden.rh-js .rh-clip-rect{transform:scaleX(0)}
/* défaut (sans .rh-js) : étoiles déjà remplies à leur niveau */
.roihidden .rh-clip-rect{transform:scaleX(var(--lvl,1))}

/* =====================================================================
   ÉTAT JOUÉ (.rh-js.on) : entrée en cascade + boucles
   ===================================================================== */
.roihidden.rh-js.on .rh-card{
  opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.2,.8,.2,1),transform .62s cubic-bezier(.2,.8,.2,1);
}
.roihidden.rh-js.on .rh-card:nth-child(1){transition-delay:.04s}
.roihidden.rh-js.on .rh-card:nth-child(2){transition-delay:.16s}
.roihidden.rh-js.on .rh-card:nth-child(3){transition-delay:.28s}
.roihidden.rh-js.on .rh-banner{
  opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.2,.8,.2,1) .42s,transform .62s cubic-bezier(.2,.8,.2,1) .42s;
}

/* motif 1 : anneau qui tourne + barres re-tapées */
.roihidden.rh-js.on .rh-ring{animation:rh-spin 9s linear infinite}
.roihidden.rh-js.on .rh-tbar{animation:rh-type 3.4s cubic-bezier(.5,0,.2,1) infinite}
.roihidden.rh-js.on .rh-tbar.b2{animation-delay:.5s}

/* motif 2 : grimpeur + cible qui scintille */
.roihidden.rh-js.on .rh-climber{animation:rh-climb 5.6s cubic-bezier(.55,.1,.3,1) infinite}
.roihidden.rh-js.on .rh-climber-halo{animation:rh-halo 1.7s ease-in-out infinite}
.roihidden.rh-js.on .rh-goal{animation:rh-goal 5.6s ease-in-out infinite}

/* motif 3 : balayage de remplissage des étoiles */
.roihidden.rh-js.on .rh-clip-rect{
  transform:scaleX(var(--lvl,1));
  transition:transform 1.25s cubic-bezier(.2,.7,.15,1) .25s;
}
.roihidden.rh-js.on .rh-srow[data-level="5"] .rh-clip-rect{transition-delay:.25s}
.roihidden.rh-js.on .rh-srow[data-level="2"] .rh-clip-rect{transition-delay:.55s}

/* survol des cartes (une fois jouées) */
.roihidden.rh-js.on .rh-card{transition-property:opacity,transform,box-shadow}
.roihidden.rh-js.on .rh-card:hover{
  transform:translateY(-4px);box-shadow:0 26px 56px -34px rgba(60,70,170,.6);
}

/* =====================================================================
   BANDEAU-PHRASE (fond --night, mot surligné en dégradé)
   ===================================================================== */
.roihidden .rh-banner{
  position:relative;display:flex;align-items:center;gap:18px;
  margin-top:24px;padding:22px 26px;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(110deg,var(--night) 0%,#231a52 52%,#3a1c54 100%);
  border:1px solid rgba(255,255,255,.08);
}
.roihidden .rh-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 180% at 0 0,rgba(111,125,255,.18),transparent 50%);
}
.roihidden .rh-banner-ic{
  position:relative;flex:0 0 auto;width:48px;height:48px;border-radius:13px;
  display:grid;place-items:center;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.roihidden .rh-banner-ic svg{width:24px;height:24px;color:#fff}
.roihidden .rh-banner p{
  position:relative;margin:0;font-family:'Bricolage Grotesque';font-weight:700;
  font-size:clamp(16px,2.1vw,21px);line-height:1.4;color:var(--ndim);letter-spacing:-.01em;
}
.roihidden .rh-banner .rh-bright{color:#fff}
.roihidden .rh-hl{
  background:linear-gradient(90deg,var(--v2,#6f7dff),var(--aqua));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;
}

/* =====================================================================
   KEYFRAMES
   ===================================================================== */
@keyframes rh-spin{to{transform:rotate(360deg)}}
@keyframes rh-type{
  0%,8%{transform:scaleX(0)}
  48%,76%{transform:scaleX(1)}
  90%,100%{transform:scaleX(0)}
}
@keyframes rh-climb{
  0%,6%{transform:translate(0,0);opacity:1}
  22%{transform:translate(24px,-20px);opacity:1}
  42%{transform:translate(48px,-40px);opacity:1}
  60%,70%{transform:translate(72px,-60px);opacity:1}
  77%{transform:translate(72px,-60px);opacity:0}
  78%{transform:translate(0,0);opacity:0}
  90%,100%{transform:translate(0,0);opacity:1}
}
@keyframes rh-halo{0%,100%{transform:scale(1);opacity:.18}50%{transform:scale(1.5);opacity:.06}}
@keyframes rh-goal{
  0%,52%{opacity:.3;transform:scale(.78)}
  64%{opacity:1;transform:scale(1.18)}
  80%{opacity:.3;transform:scale(.78)}
  100%{opacity:.3;transform:scale(.78)}
}

/* =====================================================================
   prefers-reduced-motion : tout figé à l'état final, aucune boucle
   ===================================================================== */
@media(prefers-reduced-motion:reduce){
  .roihidden.rh-js .rh-card,
  .roihidden.rh-js .rh-banner{opacity:1;transform:none;transition:none}
  .roihidden.rh-js .rh-clip-rect{transform:scaleX(var(--lvl,1));transition:none}
  .roihidden.rh-js .rh-tbar{transform:scaleX(1)}
  .roihidden .rh-ring,
  .roihidden .rh-tbar,
  .roihidden .rh-climber,
  .roihidden .rh-climber-halo,
  .roihidden .rh-goal,
  .roihidden .rh-clip-rect{animation:none!important}
  .roihidden .rh-climber{transform:translate(0,0)}
  .roihidden .rh-goal{opacity:.85;transform:scale(1)}
  .roihidden.rh-js.on .rh-card:hover{transform:none}
}