/* ============================================================
   CALCULATEUR ROI — la feuille propre aux pages du calculateur au gabarit V10
   ------------------------------------------------------------
   Chargée APRÈS css/v10.css, sur /fr/calculateur-roi-migration-dpi et /ehr-migration-roi-calculator
   (aperçus : /preview/campagnes-v10/…). Elle ne fait que de la PRÉSENTATION : le calcul est le
   script en ligne de la page, recopié tel quel de la version Webflow, et l'envoi du formulaire est
   celui de js/galeon-forms.js (même nom « ROI Calculator », même /api/roi).

   Trois contrats avec galeon-forms.js, qui ne se voient pas dans cette feuille :
   - le calculateur (.roi-calc, parent de #groiroot) est en display:none au chargement :
     galeon-forms.js ne le pose en appât flouté (.galeon-teaser) QUE s'il le trouve masqué ;
   - le formulaire est un frère qui SUIT .roi-calc (sélecteur `.galeon-teaser ~ form`), et il est
     posé PAR-DESSUS le calculateur flouté tant que celui-ci n'est pas révélé ;
   - le lien « Télécharger le détail (PDF) » arrive dans `#groiroot .rcard` après l'envoi.
   Les classes lues par le script de calcul ou par galeon-forms.js (.cb, .rcard, .td, .src-row,
   .src-tag, data-g, data-lbl) gardent leur nom ; les autres ont été renommées parce qu'elles
   heurtaient v10.css (.sr y est la classe « lecteur d'écran seulement », .wrap et .mi y sont la
   colonne de page et l'entrée de menu).
   ============================================================ */

/* ─── EN-TÊTE ─────────────────────────────────────── */
.roi-hero .v-hero__visuel{aspect-ratio:16/11}
.roi-hero .v-hero__visuel img{object-position:30% 50%}
.roi-hero h1{max-width:15ch}
.roi-hero__note{margin:18px 0 0;font-size:12.5px;color:var(--dim-2)}
/* le calculateur dès le premier écran (Simon, 13/10) : un en-tête centré et court, l'outil juste dessous,
   dans la même section sombre, comme sur la page Webflow d'origine */
.roi-hero--outil{padding-top:calc(var(--nav-h) + clamp(32px,6vh,72px));padding-bottom:0;
  /* les halos de .v-hero (v10.css) débordaient du bas de la section et s'y coupaient net, à la jonction avec
     « La méthode » : les mêmes, ramenés dans le haut, s'éteignent avant le bord (Simon, 14/10) */
  background:radial-gradient(60% 45% at 78% 28%,rgba(71,154,243,.14),transparent 70%),radial-gradient(40% 35% at 10% 40%,rgba(90,209,230,.05),transparent 70%),var(--fond)}
/* même fond des deux côtés : la méthode suit l'en-tête sans bande vide */
.roi-hero--outil + .v-sec{padding-top:clamp(48px,6vw,88px)}
.roi-hero__tete{max-width:860px;margin:0 auto clamp(28px,4vw,44px);text-align:center}
.roi-hero--outil .eyebrow{justify-content:center}
.roi-hero--outil h1{max-width:20ch;margin:0 auto;font-size:clamp(34px,4.4vw,60px);line-height:1.02}
.roi-hero--outil .lead{max-width:62ch;margin:20px auto 0}

/* ─── L'OUTIL ─────────────────────────────────────── */
.roi-outil{position:relative;max-width:1080px;margin:0 auto}
/* masqué au chargement : c'est la condition pour que galeon-forms.js en fasse l'appât flouté */
.roi-calc{display:none}

/* intégré à la page (Simon, 13/10) : plus de carte autour de l'outil, il est posé dans l'en-tête sombre */
.groi{position:relative;padding:0;color:var(--tx);background:none;border:0;box-shadow:none}
.groi__in{width:100%}
.groi .cta-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:clamp(24px,3vw,36px)}
.groi .cta-label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-l)}
.groi .cs{display:flex;flex-wrap:wrap;gap:8px}
.groi .cb{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;
  color:rgba(var(--tx-rgb),.72);background:rgba(255,255,255,.05);border:1px solid var(--line-d);transition:background .2s,color .2s,border-color .2s}
.groi .cb:hover{color:var(--tx);border-color:rgba(255,255,255,.3)}
.groi .cb.active{background:#fff;border-color:#fff;color:#0a0c18}
.groi .cb .flag{font-size:16px;line-height:1}

.groi .rc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(28px,4vw,48px);align-items:stretch}
.groi .lc{min-width:0;display:flex;flex-direction:column}
.groi .num{font-size:clamp(34px,3.6vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--tx);font-variant-numeric:tabular-nums}
.groi .sb{position:relative;padding:22px 0 4px}
.groi__piste{position:relative;width:100%;height:8px;display:flex;align-items:center}
.groi input[type=range]{width:100%;height:30px;margin:0;padding:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;position:relative;z-index:5;outline:none;touch-action:pan-y}
.groi input[type=range]:focus-visible{outline:2px solid var(--blue-l);outline-offset:6px;border-radius:8px}
.groi input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:6px solid var(--blue);box-shadow:0 0 0 6px rgba(71,154,243,.18),0 6px 18px rgba(0,0,0,.35);cursor:pointer;transition:transform .15s}
.groi input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:6px solid var(--blue);box-shadow:0 0 0 6px rgba(71,154,243,.18);cursor:pointer}
.groi input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.groi .tbg{position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;border-radius:999px;background:rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;padding:0 5px;z-index:1;pointer-events:none}
.groi .td{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.32)}
.groi .tp{position:absolute;left:0;top:50%;height:8px;margin-top:-4px;border-radius:999px;background:var(--grad);z-index:2;pointer-events:none;box-shadow:0 4px 16px rgba(71,154,243,.35)}
.groi .mm{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;color:var(--dim-2);font-variant-numeric:tabular-nums}

/* le détail des quatre leviers, et leur part du gain en une barre */
.groi .bkd{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:6px}
.groi .bkt{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);margin-bottom:6px}
.roi-barre{display:flex;height:10px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.06);margin:0 0 10px}
.roi-barre i{display:block;height:100%;width:25%;transition:width .45s cubic-bezier(.2,.8,.2,1)}
.roi-barre i+i{border-left:2px solid var(--fond)}
.groi .br{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.groi .bl{display:flex;align-items:center;gap:10px;flex:1;min-width:0;font-size:13.5px;line-height:1.35;color:var(--dim)}
.groi .bd{width:9px;height:9px;border-radius:3px;flex:none}
.groi .bv{font-size:15px;font-weight:700;color:var(--tx);white-space:nowrap;font-variant-numeric:tabular-nums}
/* les quatre teintes de la charte, à la place des quatre couleurs vives de la version Webflow
   (posées en style en ligne : d'où !important) ; la barre reprend les mêmes, dans le même ordre */
.groi .bd[style*="55b5f3"],.roi-barre i:nth-child(1){background:#2f7fdc !important}
.groi .bd[style*="f472b6"],.roi-barre i:nth-child(2){background:#479af3 !important}
.groi .bd[style*="fbbf24"],.roi-barre i:nth-child(3){background:#8cc2ff !important}
.groi .bd[style*="34d399"],.roi-barre i:nth-child(4){background:#5ad1e6 !important}

/* la carte du résultat : ce qui se lit d'un coup d'œil */
.groi .rcard{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,3vw,32px);border-radius:22px;color:#fff;
  background:radial-gradient(90% 70% at 100% 0%,rgba(255,255,255,.28),transparent 60%),var(--grad);box-shadow:0 24px 60px -18px rgba(47,127,220,.6)}
.groi .tl{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.groi .tv{display:inline-block;margin:12px 0 4px;font-size:clamp(48px,5vw,64px);font-weight:700;letter-spacing:-.045em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;transition:transform .16s}
.groi .ts{font-size:14px;color:rgba(255,255,255,.82)}
.groi .pr{display:inline-flex;align-items:baseline;gap:7px;margin:18px 0 22px;padding:8px 14px;border-radius:999px;background:rgba(10,16,32,.22)}
.groi .pv{font-size:15px;font-weight:700;transition:transform .16s}
.groi .pl{font-size:13px;color:rgba(255,255,255,.82)}
.groi .dv{width:100%;height:1px;background:rgba(255,255,255,.28);margin:0 0 18px}
.groi .mg{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:auto}
.groi__ind{display:flex;flex-direction:column;gap:3px;padding:14px;border-radius:14px;background:rgba(10,16,32,.18)}
.groi .mv{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1}
.groi .mu{font-size:10.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.86);margin-top:4px}
.groi .ml{font-size:12px;line-height:1.35;color:rgba(255,255,255,.72)}
/* le lien du rapport PDF, posé par galeon-forms.js après l'envoi */
.groi .rcard .galeon-report{color:#fff;border-color:rgba(255,255,255,.55);font-size:13px;margin-top:18px}

/* méthodologie et sources : toujours lisibles, plus une bulle au survol (instable au toucher) */
.groi .src-wrap{margin-top:clamp(24px,3vw,32px);padding-top:22px;border-top:1px solid var(--line-d)}
.groi .src-btn,.groi .src-popup-caret{display:none}
.groi .src-popup-title{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);margin-bottom:12px}
.groi .src-row{display:flex;align-items:baseline;gap:10px;font-size:12.5px;line-height:1.6;color:var(--dim)}
.groi .src-row+.src-row{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.05)}
.groi .src-tag{flex:none;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--blue-l);background:rgba(71,154,243,.1);border:1px solid rgba(71,154,243,.22);border-radius:6px;padding:1px 7px}
.groi .src-row a{color:var(--blue-l);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(140,194,255,.35)}
.groi .src-row a:hover{color:var(--tx)}

@media (max-width:860px){
  .groi .rc{grid-template-columns:1fr}
  .groi .cta-header{flex-direction:column;align-items:flex-start}
  .groi .bkd{padding-top:24px}
}
@media (max-width:440px){
  .groi .cb{height:38px;padding:0 13px;font-size:13px}
  .groi .br{padding:10px 12px}
  .groi .bl{font-size:12.5px}
  .groi .src-row{flex-direction:column;gap:4px}
}

/* ─── LE FORMULAIRE D'ACCÈS ───────────────────────── */
/* Sans script, il est simplement dans le flux. Avec galeon-forms.js, il se pose au milieu du
   calculateur flouté (en haut sur téléphone, où le calculateur empilé dépasse 1 000 px), puis
   disparaît à l'envoi : le calculateur révélé est sa propre confirmation. */
/* en verre (Simon, 13/10) : la page se voit à travers, plus de carte blanche posée dessus */
.roi-gate{position:relative;max-width:460px;margin:0 auto;padding:clamp(24px,3vw,34px);border-radius:22px;color:var(--tx);
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12);display:grid;gap:2px}
/* posé dans le HAUT du calculateur flouté : centré, il tombait sous la ligne de flottaison à 1280 × 800 */
.roi-calc.galeon-teaser:not(.is-revealed) ~ form.roi-gate{position:absolute;z-index:3;left:50%;top:clamp(24px,5vw,64px);transform:translateX(-50%);width:min(460px,calc(100% - 32px));margin:0}
.roi-calc.galeon-teaser,.roi-calc.galeon-teaser::after{border-radius:0}
/* sans cadre, le voile de galeon-forms.js dessinait un rectangle aux bords nets : l'appât se fond dans
   la page par un masque, et le voile s'éclaircit au centre. Le flou (galeon-forms.js) ne change pas :
   c'est lui qui rend le montant illisible. */
.roi-calc.galeon-teaser:not(.is-revealed){
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-composite:intersect}
.roi-calc.galeon-teaser::after{background:linear-gradient(180deg,transparent 55%,rgba(11,16,32,.9)),radial-gradient(ellipse 80% 70% at 50% 40%,rgba(11,16,32,.18),rgba(11,16,32,.55) 80%)}
/* plus visible (Simon, 14/10) : un flou et un assombrissement plus légers que ceux de galeon-forms.js (6px, .42),
   pour que le calculateur se lise derrière le formulaire. À ce flou, le gros montant se devine :
   c'est accepté, l'outil donne envie, le détail et le PDF restent derrière le formulaire */
.roi-calc.galeon-teaser:not(.is-revealed)>*{filter:blur(4px) brightness(.6)}
/* l'appât s'arrête peu après le formulaire : le calculateur entier (sources comprises) laissait ~700 px de
   flou vide sous lui. js/v10-roi.js mesure le formulaire et pose --roi-appat-h (son bas + 70 px) ; sur téléphone,
   la carte du gain floutée dépassait sinon en grand bloc bleu sous le formulaire. Révélé, il reprend toute
   sa hauteur. Le masque ci-dessus et le voile (assombri vers le bas) fondent la fin. */
.roi-calc.galeon-teaser:not(.is-revealed){max-height:var(--roi-appat-h,620px)}
/* l'arrivée (Simon, 14/10) : à l'ouverture de la page, le calculateur est net. Au PREMIER CLIC dedans (ou première
   touche), le flou monte doucement et le formulaire arrive par-dessus : js/v10-roi.js pose .roi-mur, qui relance
   les mêmes animations sous un autre nom (changer de nom les redémarre ; changer le délai les ferait sauter
   à leur fin). Sans clic, le mur arrive seul après 6 s : ce minutage-là est en CSS (remplissage « both » :
   avant le départ l'état net, après l'appât), pour qu'il arrive même si le script ne tourne pas. Le script
   rend aussi le calculateur cliquable pendant l'intro (.roi-intro), galeon-forms.js le bloquant en
   !important. Mouvement réduit : le mur est là d'emblée. */
.roi-calc.galeon-teaser:not(.is-revealed)>*{animation:roiFlou 1.4s cubic-bezier(.4,0,.2,1) 6s both}
.roi-calc.galeon-teaser:not(.is-revealed)::after{animation:roiVoile 1.4s cubic-bezier(.4,0,.2,1) 6s both}
.roi-calc.galeon-teaser:not(.is-revealed) ~ form.roi-gate{animation:roiMur .9s cubic-bezier(.2,.7,.2,1) 6.5s both}
/* le masque des bords (plus haut) ne doit pas rogner le calculateur NET : il part hors du cadre et s'y resserre */
.roi-calc.galeon-teaser:not(.is-revealed){-webkit-mask-position:center;mask-position:center;animation:roiCadre 1.4s cubic-bezier(.4,0,.2,1) 6s both}
@keyframes roiCadre{from{-webkit-mask-size:100% 165%,135% 100%;mask-size:100% 165%,135% 100%}to{-webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%}}
@keyframes roiFlou{from{filter:blur(0) brightness(1)}to{filter:blur(4px) brightness(.6)}}
@keyframes roiVoile{from{opacity:0}to{opacity:1}}
@keyframes roiMur{from{opacity:0;visibility:hidden;translate:0 28px;scale:.98}to{opacity:1;visibility:visible;translate:0 0;scale:1}}
.roi-outil.roi-mur .roi-calc.galeon-teaser:not(.is-revealed){animation:roiCadre2 1.2s cubic-bezier(.4,0,.2,1) both}
.roi-outil.roi-mur .roi-calc.galeon-teaser:not(.is-revealed)>*{animation:roiFlou2 1.2s cubic-bezier(.4,0,.2,1) both}
.roi-outil.roi-mur .roi-calc.galeon-teaser:not(.is-revealed)::after{animation:roiVoile2 1.2s cubic-bezier(.4,0,.2,1) both}
.roi-outil.roi-mur .roi-calc.galeon-teaser:not(.is-revealed) ~ form.roi-gate{animation:roiMur2 .9s cubic-bezier(.2,.7,.2,1) .3s both}
@keyframes roiCadre2{from{-webkit-mask-size:100% 165%,135% 100%;mask-size:100% 165%,135% 100%}to{-webkit-mask-size:100% 100%,100% 100%;mask-size:100% 100%,100% 100%}}
@keyframes roiFlou2{from{filter:blur(0) brightness(1)}to{filter:blur(4px) brightness(.6)}}
@keyframes roiVoile2{from{opacity:0}to{opacity:1}}
@keyframes roiMur2{from{opacity:0;visibility:hidden;translate:0 28px;scale:.98}to{opacity:1;visibility:visible;translate:0 0;scale:1}}
.roi-outil.roi-intro .roi-calc.galeon-teaser:not(.is-revealed),.roi-outil.roi-intro .roi-calc.galeon-teaser:not(.is-revealed)>*{pointer-events:auto!important;user-select:auto}
@media (prefers-reduced-motion:reduce){
  .roi-calc.galeon-teaser:not(.is-revealed),.roi-calc.galeon-teaser:not(.is-revealed)>*,.roi-calc.galeon-teaser:not(.is-revealed)::after,
  .roi-calc.galeon-teaser:not(.is-revealed) ~ form.roi-gate{animation:none}
}
.roi-gate__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(71,154,243,.18);border:1px solid rgba(140,194,255,.25);color:var(--blue-l);margin-bottom:14px}
.roi-gate__ic svg{width:22px;height:22px}
.roi-gate h3{margin:0 0 6px;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.02em;line-height:1.2;color:var(--tx)}
.roi-gate .hint{margin:0 0 16px;font-size:13.5px;line-height:1.5;color:var(--dim)}
.roi-gate .field label{color:rgba(var(--tx-rgb),.62)}
.roi-gate .field input{background:rgba(10,16,32,.45);border-color:rgba(255,255,255,.16);color:var(--tx)}
.roi-gate .field input::placeholder{color:rgba(var(--tx-rgb),.38)}
.roi-gate .field input:focus{border-color:var(--blue-l);box-shadow:0 0 0 3px rgba(71,154,243,.22)}
.roi-gate .field input{height:46px;font-size:15px}
.roi-gate input[type=submit]{height:50px;margin-top:6px;border:0;border-radius:999px;background:var(--blue);color:#06101f;font-weight:600;font-size:15px;cursor:pointer;transition:background .2s}
.roi-gate input[type=submit]:hover{background:var(--blue-l)}
.roi-gate .w-form-fail{margin:10px 0 0;font-size:13px}


/* ─── LA MÉTHODE : le schéma des quatre leviers ───── */
/* Des boîtes en HTML (le texte reste net et se lit sans script) reliées par des traits SVG fins.
   Bureau : un éventail de gauche à droite. Téléphone : une colonne, reliée par un trait vertical. */
.roi-schema{display:grid;grid-template-columns:minmax(0,.9fr) 72px minmax(0,1.25fr) 72px minmax(0,.95fr);align-items:center}
.roi-schema__noeud{position:relative;padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line-d)}
.roi-schema__noeud b{display:block;font-size:16px;letter-spacing:-.01em;line-height:1.3;color:var(--tx)}
.roi-schema__noeud span{display:block;margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--dim)}
.roi-schema__noeud small{display:block;margin-bottom:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-l)}
.roi-schema__leviers{display:grid;gap:12px}
.roi-schema__leviers .roi-schema__noeud{padding:14px 18px;display:flex;gap:14px;align-items:center}
.roi-schema__leviers i{flex:none;width:10px;height:10px;border-radius:3px}
.roi-schema__leviers > :nth-child(1) i{background:#2f7fdc}.roi-schema__leviers > :nth-child(2) i{background:#479af3}
.roi-schema__leviers > :nth-child(3) i{background:#8cc2ff}.roi-schema__leviers > :nth-child(4) i{background:#5ad1e6}
.roi-schema__resultat{background:radial-gradient(90% 90% at 100% 0%,rgba(90,209,230,.22),transparent 60%),rgba(71,154,243,.12);border-color:rgba(140,194,255,.35)}
.roi-schema__resultat em{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-d);font-style:normal;font-size:13.5px;color:var(--dim)}
.roi-schema__trait{width:100%;height:100%;min-height:260px;overflow:visible}
.roi-schema__trait path{fill:none;stroke:url(#roiTrait);stroke-width:1.4;vector-effect:non-scaling-stroke}
.roi-schema__trait circle{fill:var(--cyan)}
.roi-schema__mult{grid-column:1/-1;margin:22px 0 0;font-size:13.5px;color:var(--dim-2);text-align:center}
@media (max-width:860px){
  .roi-schema{grid-template-columns:1fr;gap:0}
  .roi-schema__trait{display:none}
  .roi-schema > .roi-schema__noeud,.roi-schema > .roi-schema__leviers{position:relative;margin-bottom:36px}
  .roi-schema > .roi-schema__noeud:not(:last-of-type)::after,.roi-schema > .roi-schema__leviers::after{content:"";position:absolute;left:28px;bottom:-37px;width:1.4px;height:36px;background:linear-gradient(180deg,var(--blue),var(--cyan))}
  .roi-schema > .roi-schema__resultat{margin-bottom:0}
}

/* ─── LE TEMPS SOIGNANT ───────────────────────────── */
/* une vidéo muette à la place de la photo (Simon, 14/10) : le troisième montage des entretiens (Chalon, Toulon-Hyères),
   jouée seulement à l'écran (js/v10-roi.js) ; sans script ou en mouvement réduit, l'affiche reste */
.roi-temps .roi-temps__video{justify-self:center;width:min(100%,420px);aspect-ratio:4/5;border-radius:22px;background:#05070f;box-shadow:0 40px 70px -40px rgba(16,40,96,.55)}
.roi-temps__video video{width:100%;height:100%;object-fit:cover;display:block}
.roi-temps .v-chiffres{margin-top:28px;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.roi-temps .v-chiffre b{font-size:clamp(30px,3vw,40px)}
.roi-temps .v-chiffre span{font-size:13px}
.roi-temps__source{margin:22px 0 0;font-size:12.5px;color:var(--ink-dim)}
@media (max-width:520px){.roi-temps .v-chiffres{grid-template-columns:1fr 1fr}}


/* ─── LE PRODUIT ──────────────────────────────────── */
.roi-produit .v-hero__row{margin-top:28px}
/* l'ordinateur 3D déborde de sa figure (perspective, ombre) : .v-duo figure le coupait */
.roi-produit .ordi{overflow:visible;border-radius:0}
.roi-produit p.lead a{color:var(--blue-l);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(140,194,255,.4)}

/* ─── LE SCHÉMA, ANIMÉ (Simon, 14/10) ───────────────── */
/* Une impulsion part de l'établissement vers chaque levier, le levier s'allume, puis l'impulsion repart
   vers le résultat, qui s'allume à son tour : la lecture du schéma, en 5,2 s, en boucle. Les impulsions
   sont des copies des traits (.roi-flux) dont seul un tiret court se déplace (unités du viewBox : chaque trait
   mesure de 72 à 141 ; pas de pathLength, que vector-effect:non-scaling-stroke fausse dans Chrome).
   js/v10-roi.js pose .is-anime tant que le schéma est à l'écran ; sans lui, et en mouvement réduit, le
   schéma reste immobile, tel qu'avant. */
.roi-schema__trait .roi-flux{stroke:#e6f5ff;stroke-width:3;stroke-linecap:round;stroke-dasharray:26 400;stroke-dashoffset:29;opacity:0;vector-effect:none;
  filter:drop-shadow(0 0 4px #5ad1e6) drop-shadow(0 0 10px rgba(71,154,243,.8))}
.roi-schema.is-anime .roi-flux{opacity:1}
.roi-schema.is-anime .roi-schema__trait--entree .roi-flux{animation:roiFluxEntree 5.2s linear infinite;animation-delay:calc(var(--i) * .14s)}
.roi-schema.is-anime .roi-schema__trait--sortie .roi-flux{animation:roiFluxSortie 5.2s linear infinite;animation-delay:calc(var(--i) * .14s)}
.roi-schema.is-anime > .roi-schema__noeud:first-child{animation:roiDepart 5.2s ease-out infinite}
.roi-schema.is-anime .roi-schema__leviers .roi-schema__noeud{animation:roiLevier 5.2s ease-out infinite}
.roi-schema.is-anime .roi-schema__leviers i{animation:roiPastille 5.2s ease-out infinite}
.roi-schema.is-anime .roi-schema__leviers > :nth-child(2),.roi-schema.is-anime .roi-schema__leviers > :nth-child(2) i{animation-delay:.14s}
.roi-schema.is-anime .roi-schema__leviers > :nth-child(3),.roi-schema.is-anime .roi-schema__leviers > :nth-child(3) i{animation-delay:.28s}
.roi-schema.is-anime .roi-schema__leviers > :nth-child(4),.roi-schema.is-anime .roi-schema__leviers > :nth-child(4) i{animation-delay:.42s}
.roi-schema.is-anime .roi-schema__resultat{animation:roiResultat 5.2s ease-out infinite}
@keyframes roiFluxEntree{0%{stroke-dashoffset:29}24%,100%{stroke-dashoffset:-150}}
@keyframes roiFluxSortie{0%,36%{stroke-dashoffset:29}60%,100%{stroke-dashoffset:-150}}
@keyframes roiDepart{0%{border-color:rgba(140,194,255,.55);box-shadow:0 0 0 4px rgba(71,154,243,.1)}18%,100%{border-color:var(--line-d);box-shadow:0 0 0 0 rgba(71,154,243,0)}}
@keyframes roiLevier{0%,20%{border-color:var(--line-d);background-color:rgba(255,255,255,.04);box-shadow:0 0 0 0 rgba(71,154,243,0)}
  27%{border-color:rgba(140,194,255,.6);background-color:rgba(71,154,243,.13);box-shadow:0 0 0 4px rgba(71,154,243,.08),0 12px 30px -12px rgba(71,154,243,.6)}
  46%,100%{border-color:var(--line-d);background-color:rgba(255,255,255,.04);box-shadow:0 0 0 0 rgba(71,154,243,0)}}
@keyframes roiPastille{0%,20%{transform:none}27%{transform:scale(1.5);box-shadow:0 0 12px currentColor}46%,100%{transform:none}}
@keyframes roiResultat{0%,58%{border-color:rgba(140,194,255,.35);box-shadow:0 0 0 0 rgba(90,209,230,0)}
  66%{border-color:rgba(140,194,255,.8);box-shadow:0 0 0 6px rgba(90,209,230,.1),0 24px 60px -16px rgba(90,209,230,.55)}
  88%,100%{border-color:rgba(140,194,255,.35);box-shadow:0 0 0 0 rgba(90,209,230,0)}}
/* téléphone : les traits sont verticaux (::after) ; une lueur y descend */
@media (max-width:860px){
  .roi-schema.is-anime > .roi-schema__noeud:not(:last-of-type)::after,.roi-schema.is-anime > .roi-schema__leviers::after{
    background:linear-gradient(180deg,transparent,#cdeaff 50%,transparent) 0 -36px/100% 36px no-repeat,linear-gradient(180deg,var(--blue),var(--cyan));
    animation:roiDescente 1.6s linear infinite}
}
@keyframes roiDescente{to{background-position:0 36px,0 0}}
@media (prefers-reduced-motion:reduce){
  .roi-schema.is-anime .roi-flux{opacity:0;animation:none}
  .roi-schema.is-anime *,.roi-schema.is-anime > *,.roi-schema.is-anime > *::after{animation:none !important}
}

/* ─── TÉMOIGNAGES ET ÉTABLISSEMENTS ──────────────── */
/* Repris tels quels de la page DPI (Simon, 14/10) : copie des règles de css/v10-dpi.css (« Les soignants »,
   « Les entretiens », « Logos »), qu'on ne charge pas ici (elle porte toute la page DPI). Le comportement est
   dans js/v10-roi.js, copié de js/v10-dpi.js (sections 5 et 10). Retoucher l'un, c'est retoucher l'autre. */
.verb{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.verb__video{margin:0}
.vframe{position:relative;border-radius:22px;overflow:hidden;background:#05070f;aspect-ratio:4/5;box-shadow:0 40px 70px -40px rgba(16,40,96,.55)}
.vframe video{width:100%;height:100%;object-fit:cover;display:block}
.vframe::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,7,15,.45),transparent 45%);pointer-events:none}
.verb__droite h2{margin-bottom:clamp(20px,3vw,32px)}
.verb__cits{display:grid}
.verb__cit{grid-area:1/1;margin:0;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.verb__cit.is-on{opacity:1;transform:none;pointer-events:auto}
.verb__cit blockquote{margin:0;font-size:clamp(19px,1.8vw,26px);line-height:1.34;letter-spacing:-.02em;color:#0a0c18;max-width:38ch}
.verb__cit figcaption{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.verb__author{display:flex;align-items:center;gap:12px}
.verb__author img{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 25%;border:2px solid #fff;box-shadow:0 8px 20px rgba(16,40,96,.2)}
.verb__mono{width:48px;height:48px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:700;color:var(--blue-d);background:#fff;border:2px solid rgba(71,154,243,.25)}
.verb__author b{display:block;font-size:14.5px;font-weight:600;color:#0a0c18}
.verb__author span{font-size:13px;color:var(--ink-dim)}
.verb__voir{height:40px;padding:0 16px;font-size:13.5px;gap:8px}
/* la progression : le minuteur du composant IA (.ia__minuteur), un trait par verbatim ; js/v10-dpi.js pose --p */
.verb__pts{display:flex;gap:6px;margin-top:28px;max-width:300px}
.verb__pt{position:relative;flex:1;height:16px;padding:0;border:0;background:none;cursor:pointer}
.verb__pt::before,.verb__pt::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px}
.verb__pt::before{background:rgba(10,12,24,.12)}
.verb__pt::after{transform-origin:left;transform:scaleX(var(--p,0));background:linear-gradient(90deg,rgba(47,127,220,.15),var(--blue-d) 30%,var(--blue));transition:opacity .3s}
.verb__pt.is-lu::after{opacity:.4}
.verb.is-pause .verb__pt.is-on::after{opacity:.5}
.verb__pt:focus-visible{outline:2px solid var(--blue-d);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.verb__pt.is-on::after{--p:1}}
@media (max-width:860px){.verb{grid-template-columns:1fr}.verb__video{max-width:260px}.vframe{aspect-ratio:4/4.6}}
@media (prefers-reduced-motion:reduce){.verb__cit{transition:none}}
.yt{display:flex;align-items:center;gap:14px;margin:14px 0 0;padding:0;border:0;background:none;font:inherit;color:#0a0c18;cursor:pointer;text-align:left}
.yt__pile{position:relative;flex:none;width:76px;height:44px}
.yt__pile img{position:absolute;left:0;top:2px;width:32px;height:40px;border-radius:8px;object-fit:cover;object-position:50% 25%;border:2px solid #fff;
  box-shadow:0 4px 10px rgba(16,40,96,.18);transform:translateX(calc(var(--i) * 10px)) rotate(calc((var(--i) - 2) * 3deg));transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.yt:hover .yt__pile img,.yt:focus-visible .yt__pile img{transform:translateX(calc(var(--i) * 22px)) translateY(-3px) rotate(calc((var(--i) - 2) * 7deg))}
.yt__txt{font-size:13.5px;font-weight:600;line-height:1.35;transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.yt:hover .yt__txt,.yt:focus-visible .yt__txt{transform:translateX(48px);color:var(--blue-d)}
.yt__ic{flex:none;width:22px;height:16px;border-radius:5px;background:#e52d27;position:relative;transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.yt__ic::after{content:"";position:absolute;left:8.5px;top:4.5px;border:3.5px solid transparent;border-left:5.5px solid #fff;border-right:0}
.yt:hover .yt__ic,.yt:focus-visible .yt__ic{transform:translateX(48px)}
.yt:focus-visible{outline:2px solid var(--blue-d);outline-offset:4px;border-radius:8px}
.yt__liste{border:0;padding:28px 26px 22px;margin:auto;width:min(560px,92vw);max-height:86vh;border-radius:20px;background:#fff;color:#0a0c18;overflow:visible;box-shadow:0 40px 90px rgba(0,0,0,.4)}
.yt__liste::backdrop{background:rgba(6,9,20,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.yt__titre{display:block;font-size:20px;font-weight:650;letter-spacing:-.02em;margin-bottom:14px}
.yt__liste ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:60vh;overflow:auto}
.yt__liste li a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;transition:background .2s}
.yt__liste li a:hover,.yt__liste li a:focus-visible{background:var(--paper)}
.yt__liste li img,.yt__mono{flex:none;width:44px;height:55px;border-radius:9px;object-fit:cover;object-position:50% 25%}
.yt__mono{display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--blue-d);background:var(--paper)}
.yt__liste li span{font-size:12px;line-height:1.35;color:var(--ink-dim)}
.yt__liste li b{display:block;font-size:13.5px;font-weight:600;color:#0a0c18}
.yt__chaine{display:inline-flex;margin-top:16px;font-size:13.5px;font-weight:600;color:var(--blue-d)}
.yt__chaine:hover{text-decoration:underline;text-underline-offset:3px}
.yt__liste .zoom__fermer{top:-16px;right:-16px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
@media (max-width:560px){.yt__liste ul{grid-template-columns:1fr}.yt__liste .zoom__fermer{top:10px;right:10px}}
@media (prefers-reduced-motion:reduce){.yt__pile img,.yt__txt,.yt__ic{transition:none}}
.zoom__fermer{position:absolute;top:-18px;right:-18px;width:40px;height:40px;border-radius:50%;background:#fff;color:#0a0c18;font-size:24px;line-height:1;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.zoom__fermer{display:grid;place-items:center;padding:0;line-height:0;border:0;cursor:pointer}
.zoom__fermer svg{width:18px;height:18px}
.roi-logos{padding-top:clamp(24px,3vw,40px)}
.roi-temoins{padding-bottom:clamp(40px,5vw,64px)}
.roi-logos .defiles{margin-top:8px}