/* =====================================================================
   TARIFS & DEVIS — feuille de style de la page, écrite dans le langage v4.
   Se charge APRÈS v4.css, dont elle reprend les jetons et les composants.
   Le balisage et les scripts du configurateur sont ceux d'origine : seuls
   leurs styles ont été refaits ici, classe par classe.
   ===================================================================== */

/* alias : les quelques morceaux repris tels quels (terminal, maquette animée)
   utilisent encore les anciens noms de jetons. */
:root{
  --color-bg:var(--bg); --color-bg-alt:var(--bg-2); --color-text:var(--ink);
  --color-text-soft:var(--ink-soft); --color-accent:var(--accent);
  --color-accent-hover:var(--accent-ink); --color-accent-light:var(--accent-tint);
  --color-border:var(--line); --color-white:var(--card);
  --font-heading:var(--font-display); --radius:var(--r); --radius-sm:12px;
  --shadow:var(--shadow-md); --shadow-hover:var(--shadow-lg); --transition:.3s ease;
}
@keyframes dvs-blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes dvsIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ============ ossature de page ============ */
body.dvs{display:block;min-height:0}
body.dvs .fade-in{opacity:1;transform:none}
.pgw{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.psec{padding:clamp(58px,6.5vw,104px) 0}
.sec-h2{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:clamp(22px,2.6vw,34px)}
.idx2{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.sec-h .lead{max-width:60ch}
.sec-h h2{letter-spacing:-.03em}

/* ============ en-tête de page ============ */
#phero{padding:calc(var(--nav-h) + clamp(42px,6vw,78px)) 0 clamp(34px,4vw,56px)}
#phero .pgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,60px);align-items:center}
#phero h1{font-size:clamp(38px,5.2vw,70px);line-height:.98;letter-spacing:-.035em;margin:16px 0 20px}
#phero .lead{max-width:52ch}
#phero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.pcard{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:clamp(22px,2.4vw,32px)}
.pcard .prow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.pcard .prow:last-of-type{border-bottom:0}
.pcard .prow b{font-family:var(--font-display);font-size:15px;font-weight:700}
.pcard .prow small{display:block;color:var(--ink-faint);font-size:12.5px;font-weight:400;margin-top:3px;max-width:30ch;line-height:1.45}
.pcard .prow em{font-style:normal;font-family:var(--font-display);font-size:25px;font-weight:800;letter-spacing:-.04em;color:var(--accent);white-space:nowrap}
.pcard .pfoot{margin-top:14px;font-size:12.5px;color:var(--ink-soft);line-height:1.5}

/* ============ ce qui est inclus ============ */
.pincl{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pincl article{background:var(--card);border-radius:var(--r);padding:24px 24px 26px;box-shadow:var(--shadow-md)}
.pincl h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin-bottom:9px;letter-spacing:-.01em}
.pincl p{color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.pincl ul{list-style:none;margin-top:14px;display:grid;gap:9px}
.pincl li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink-soft);line-height:1.45}
.pincl li svg{flex:none;margin-top:2px;color:var(--cat-boutique)}

/* ============ configurateur : bloc de page ============ */
#devis{background:var(--bg-2);border-radius:var(--r-xl);margin:0 clamp(10px,4vw,60px);padding:clamp(46px,5.5vw,80px) 0}
.dvs__main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(28px,3.4vw,56px);align-items:start;padding:0 clamp(20px,4vw,48px);max-width:var(--maxw);margin:0 auto}
.dvs__wrap{min-width:0}

/* fil d'avancement */
.dvs__progress{display:flex;gap:8px;margin:0 0 26px}
.dvs__progress-step{height:4px;flex:1;max-width:74px;border-radius:99px;background:var(--line);transition:background .4s var(--ease)}
.dvs__progress-step.is-done,.dvs__progress-step.is-on{background:var(--accent)}

/* une étape */
.dvs__step{padding:0;animation:dvsIn .5s var(--ease) both}
.dvs__step[hidden]{display:none}
.dvs__eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:8px;margin-bottom:12px}
.dvs__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.dvs__title{font-family:var(--font-display);font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:12px}
.dvs__sub{color:var(--ink-soft);font-size:15.5px;line-height:1.6;max-width:52ch;margin-bottom:26px}

/* cartes de choix */
.dvs__opts{display:grid;gap:12px;margin-bottom:22px}
.dvs__opt{display:flex;align-items:center;gap:18px;width:100%;text-align:left;background:var(--card);border:0;border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow-md);cursor:pointer;transition:transform .45s var(--spring),box-shadow .35s,background .3s}
.dvs__opt:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.dvs__opt:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dvs__opt-body{flex:1;min-width:0}
.dvs__opt-title{display:block;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.01em}
.dvs__opt-desc{display:block;color:var(--ink-faint);font-size:13.5px;line-height:1.45;margin-top:4px}
.dvs__opt-arrow{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent);font-size:16px;transition:transform .45s var(--spring),background .3s,color .3s}
.dvs__opt:hover .dvs__opt-arrow{transform:translateX(4px);background:var(--accent);color:var(--on-accent)}

/* besoins (choix multiple) */
.dvs__needs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.dvs__need{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:0;border-radius:var(--pill);padding:11px 18px 11px 13px;font:inherit;font-size:14px;font-weight:500;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;transition:box-shadow .3s,background .3s,color .3s}
.dvs__need-check{width:19px;height:19px;border-radius:6px;display:grid;place-items:center;background:var(--bg-2);color:transparent;box-shadow:inset 0 0 0 1.5px var(--line);transition:background .3s,color .3s}
.dvs__need-check svg{width:12px;height:12px}
.dvs__need:hover{box-shadow:inset 0 0 0 1.5px var(--ink-faint)}
.dvs__need[aria-pressed="true"]{background:var(--accent-tint);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-ink)}
.dvs__need[aria-pressed="true"] .dvs__need-check{background:var(--accent);color:var(--on-accent);box-shadow:none}
.dvs__need--wide{width:100%;justify-content:flex-start}

/* navigation entre étapes */
.dvs__continue{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--pill);padding:14px 24px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 10px 24px -12px rgba(79,70,229,.7);transition:transform .4s var(--spring),box-shadow .3s}
.dvs__continue:hover{transform:translateY(-2px)}
.dvs__back,.dvs__skip{display:inline-flex;align-items:center;gap:7px;background:none;border:0;font:inherit;font-size:14px;font-weight:500;color:var(--ink-faint);cursor:pointer;padding:8px 0;transition:color .3s}
.dvs__back:hover,.dvs__skip:hover{color:var(--ink)}
.dvs__skip{margin-top:6px}

/* récapitulatif avant coordonnées */
.dvs__recap{background:var(--card);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow-md);margin-bottom:20px}
.dvs__recap-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.dvs__recap-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.dvs__recap-edit{background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--accent);cursor:pointer}
.dvs__recap-body{font-size:14px;line-height:1.7;color:var(--ink-soft)}
.dvs__recap-body b{color:var(--ink)}

/* formulaire final */
.dvs__form{display:grid;gap:14px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form__group{display:grid;gap:6px}
.form__group label{font-size:13px;font-weight:600}
.dvs__form input,.dvs__form textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--card);border:0;box-shadow:inset 0 0 0 1.5px var(--line);border-radius:12px;padding:13px 15px;width:100%;transition:box-shadow .3s}
.dvs__form input:focus,.dvs__form textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.dvs__form textarea{min-height:110px;resize:vertical}
.form__legal{font-size:12.5px;color:var(--ink-faint);line-height:1.5}
.form__hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.dvs__submit{margin-top:4px}

/* étape de confirmation */
.dvs__success-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ============ configurateur de prix (tff) ============ */
.tff{display:grid;gap:22px}
.tff-note{font-size:13px;color:var(--ink-faint)}
/* sélecteur création / abonnement */
.tff-mode{display:inline-flex;gap:4px;background:var(--card);border-radius:var(--pill);padding:5px;box-shadow:inset 0 0 0 1.5px var(--line)}
.tff-mode__btn{position:relative;display:grid;gap:2px;text-align:left;background:none;border:0;border-radius:var(--pill);padding:11px 20px;font:inherit;cursor:pointer;color:var(--ink-soft);transition:background .35s var(--ease),color .35s}
.tff-mode__btn.is-on{background:var(--ink);color:var(--bg)}
.tff-mode__t{font-weight:700;font-size:14.5px;font-family:var(--font-display)}
.tff-mode__d{font-size:12px;opacity:.75}
.tff-mode__flag{position:absolute;top:-9px;right:10px;background:var(--cat-boutique);color:var(--dark);font-size:10px;font-weight:700;padding:2px 8px;border-radius:99px}
/* parcours par commerce */
.tff-commerce{display:grid;gap:24px}
.tff-commerce__step{display:grid;gap:12px}
.tff-commerce__steplabel{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.tff-commerce__title{font-family:var(--font-display);font-size:21px;font-weight:800;letter-spacing:-.02em}
.tff-commerce__sub{color:var(--ink-soft);font-size:14.5px;line-height:1.55;max-width:56ch}
.tff-commerce__pick{display:flex;flex-wrap:wrap;gap:10px}
.tff-cbtn{display:inline-flex;align-items:center;gap:9px;background:var(--card);border:0;border-radius:var(--pill);padding:11px 18px;font:inherit;font-size:14px;font-weight:500;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;transition:box-shadow .3s,background .3s,transform .4s var(--spring)}
.tff-cbtn:hover{transform:translateY(-2px)}
.tff-cbtn.is-on{background:var(--accent-tint);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-ink)}
.tff-cbtn__ico{font-size:16px}
.tff-commerce__fine{font-size:12.5px;color:var(--ink-faint);line-height:1.5}
/* panneau de construction */
.tff-builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:20px;align-items:start}
.tff-panel{background:var(--card);border-radius:var(--r-lg);padding:clamp(20px,2.2vw,28px);box-shadow:var(--shadow-md);display:grid;gap:18px}
.tff-panel__title{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.02em}
.tff-panel__sub{color:var(--ink-soft);font-size:14px;line-height:1.55}
.tff-base{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;background:var(--bg-2);border-radius:var(--r);padding:18px 20px}
.tff-base__t{font-family:var(--font-display);font-weight:700;font-size:16px}
.tff-base__d{color:var(--ink-faint);font-size:13px;line-height:1.5;margin-top:4px;max-width:44ch}
.tff-base__pwrap{text-align:right;white-space:nowrap}
.tff-base__p{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.04em;color:var(--accent)}
.tff-base__ref{font-size:12px;color:var(--ink-faint);margin-top:2px}
.tff-blocklabel{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.tff-hint{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.tff-incl,.tff-accent{color:var(--accent-ink);font-weight:600}
/* grille d'options */
.tff-opts{display:grid;gap:22px}
.tff-opts__group{display:grid;gap:11px}
.tff-opts__group-title{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.01em}
.tff-opts__group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tff-opt{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;transition:box-shadow .3s,background .3s,transform .4s var(--spring)}
.tff-opt:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--ink-faint)}
.tff-opt:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tff-opt[data-on="true"]{background:var(--accent-tint);box-shadow:inset 0 0 0 2px var(--accent)}
.tff-opt__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tff-opt__name{font-weight:600;font-size:14px;line-height:1.3}
.tff-opt__price{font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap}
.tff-opt[data-on="true"] .tff-opt__price{color:var(--accent-ink)}
.tff-opt__desc{display:block;color:var(--ink-faint);font-size:12.5px;line-height:1.45;margin-top:5px}
.tff-fineprint{font-size:12.5px;color:var(--ink-faint);line-height:1.5}
.tff-hostnote{background:var(--accent-tint);color:var(--accent-ink);border-radius:14px;padding:14px 16px;font-size:13px;line-height:1.55}
.tff-hostnote strong{font-weight:700}
/* récapitulatif collant */
.tff-recap{position:sticky;top:calc(var(--nav-h) + 16px);background:var(--card);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-lg);display:grid;gap:14px}
.tff-recap__head{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.tff-compare{display:grid;gap:10px;background:var(--bg-2);border-radius:14px;padding:14px 16px}
.tff-compare__why,.tff-compare__head{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.tff-compare__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--ink-soft)}
.tff-compare__row s{color:var(--ink-faint)}
.tff-compare__diy{font-size:12.5px;color:var(--ink-faint)}
.tff-compare__note{font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.tff-compare__verdict{background:var(--accent);color:var(--on-accent);border-radius:12px;padding:11px 14px;font-size:13px;line-height:1.45}
.tff-compare__verdict b{font-weight:700}
.tff-recap__big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tff-recap__from{font-size:13px;color:var(--ink-faint)}
#tff-total{font-family:var(--font-display);font-size:clamp(44px,4.6vw,58px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--accent)}
.tff-cur{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--accent)}
.tff-recap__cap{font-size:12.5px;color:var(--ink-faint);line-height:1.5}
.tff-recap__lines{display:grid;gap:7px;font-size:13.5px;color:var(--ink-soft);max-height:230px;overflow:auto}
.tff-rline{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tff-rline--base{font-weight:600;color:var(--ink)}
.tff-rline__inc{color:var(--ink-faint);font-size:12.5px}
.tff-recap__sumline{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px;font-size:14px}
.tff-recap__k{font-weight:600}
.tff-recap__abo{display:grid;gap:9px;border-top:1px solid var(--line);padding-top:14px}
.tff-recap__abo-k{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.tff-recap__abo-opts{display:flex;flex-wrap:wrap;gap:8px}
.tff-recap__abo-btn{position:relative;background:var(--bg-2);border:0;border-radius:var(--pill);padding:9px 15px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .3s,background .3s,color .3s}
.tff-recap__abo-btn.is-on{background:var(--accent-tint);color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
.tff-recap__abo-flag{position:absolute;top:-8px;right:8px;background:var(--cat-boutique);color:var(--dark);font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:99px}
.tff-recap__abo-hint{font-size:12.5px;color:var(--ink-faint);line-height:1.5}
.tff-recap__actions{display:grid;gap:9px}
.tff-recap__foot{font-size:12px;color:var(--ink-faint);line-height:1.5}
.tff-pricepill{display:inline-block;background:var(--accent-tint);color:var(--accent-ink);font-weight:700;font-size:13px;padding:4px 11px;border-radius:99px}
.tff-band{background:var(--bg-2);border-radius:14px;padding:14px 16px;font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.tff-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:var(--bg);font-size:13.5px;font-weight:600;padding:12px 20px;border-radius:99px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--spring);z-index:60}
.tff-toast.is-on{opacity:1;transform:translate(-50%,0)}
.tff-plans-note,.tff-commerce__fine{font-size:12.5px;color:var(--ink-faint);line-height:1.55;margin-top:14px}

/* ============ formules d'abonnement ============ */
.pperiod{display:inline-flex;align-items:center;gap:10px;background:var(--card);border-radius:var(--pill);padding:9px 18px;box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;color:var(--ink-soft);margin-bottom:26px}
.pperiod b{color:var(--ink);font-weight:600}
.pperiod .chip{background:var(--accent-tint);color:var(--accent-ink);font-weight:700;font-size:12px;padding:3px 10px;border-radius:99px}
.prc-period{display:none}
.prc-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.prc-plan{position:relative;background:var(--card);border-radius:var(--r-lg);padding:28px 26px 26px;box-shadow:var(--shadow-md);display:grid;gap:16px;transition:transform .5s var(--spring),box-shadow .4s}
.prc-plan:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.prc-plan--featured{background:var(--ink);color:var(--on-dark)}
.prc-plan--featured .prc-plan__pitch,.prc-plan--featured .prc-plan__feats li{color:var(--on-dark-soft)}
.prc-plan--featured .prc-vs-card{background:rgba(255,255,255,.06)}
.prc-plan--featured .prc-vs-card__row span,.prc-plan--featured .prc-vs-card__row s,.prc-plan--featured .prc-vs-card__lbl{color:var(--on-dark-soft)}
.prc-plan__badge,.prc-pastille{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:700;letter-spacing:.02em;padding:5px 14px;border-radius:99px;box-shadow:var(--shadow-md)}
.prc-pastille{background:var(--card);color:var(--ink-soft);box-shadow:inset 0 0 0 1.5px var(--line);font-weight:600;max-width:92%;overflow:hidden;text-overflow:ellipsis}
.prc-plan__head{display:grid;gap:8px}
.prc-plan__tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.prc-plan--featured .prc-plan__tag{color:var(--on-dark-soft)}
.prc-plan__head h3{font-family:var(--font-display);font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1}
.prc-plan__price{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--accent)}
.prc-plan--featured .prc-plan__price{color:#A5B4FC}
.prc-plan__acompte{font-size:12.5px;color:var(--ink-faint);line-height:1.5}
.prc-plan__pitch{color:var(--ink-soft);font-size:14px;line-height:1.55}
.prc-vs-card{background:var(--bg-2);border-radius:14px;padding:13px 15px;display:grid;gap:7px}
.prc-vs-card__lbl{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.prc-vs-card__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px}
.prc-vs-card__row span{color:var(--ink-soft)}
.prc-vs-card__row s{color:var(--ink-faint);white-space:nowrap}
.prc-plan__feats{list-style:none;display:grid;gap:9px}
.prc-plan__feats li{position:relative;padding-left:24px;font-size:13.8px;line-height:1.5;color:var(--ink-soft)}
.prc-plan__feats li::before{content:"";position:absolute;left:0;top:.45em;width:13px;height:8px;border-left:2.2px solid var(--cat-boutique);border-bottom:2.2px solid var(--cat-boutique);transform:rotate(-45deg)}
.prc-plan__feats li b{color:var(--ink);font-weight:600}
.prc-plan--featured .prc-plan__feats li b{color:var(--on-dark)}
.prc-plan .btn,.prc-plan .plan-cta{width:100%;justify-content:center;margin-top:2px}
.prc-plan--featured .plan-cta{background:var(--bg);color:var(--ink)}

/* ============ comparatif ============ */
.prc-vs-global{background:var(--card);border-radius:var(--r-lg);padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-md);display:grid;gap:20px}
.prc-vs-global__head{display:grid;gap:8px;text-align:center;max-width:70ch;margin:0 auto}
.prc-vs-global__head b,.prc-vs-global__head strong{font-family:var(--font-display);font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.prc-vs-global__head span{font-size:13px;color:var(--ink-faint);line-height:1.55}
.prc-vs-global__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prc-vs-global__col{background:var(--bg-2);border-radius:var(--r);padding:20px;display:grid;gap:8px;align-content:start}
.prc-vs-global__col--us{background:var(--accent-tint);box-shadow:inset 0 0 0 1.5px var(--accent)}
.prc-vs-global__col-lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.prc-vs-global__col--us .prc-vs-global__col-lbl{color:var(--accent-ink)}
.prc-vs-global__col-pr{font-family:var(--font-display);font-size:23px;font-weight:800;letter-spacing:-.03em;color:var(--ink-faint)}
.prc-vs-global__col--us .prc-vs-global__col-pr{color:var(--accent)}
.prc-vs-global__col-sub{font-size:13px;color:var(--ink-soft);line-height:1.55}
.prc-vs-global__verdict{background:var(--ink);color:var(--on-dark);border-radius:var(--r);padding:16px 20px;font-size:14.5px;line-height:1.5}
.prc-vs-global__verdict-txt b{color:#fff;font-weight:700}

/* ============ FAQ ============ */
.prc-faq{display:grid;gap:10px;max-width:860px;margin-top:6px}
.prc-faq__item{background:var(--card);border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden}
.prc-faq__q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;background:none;border:0;padding:17px 20px;font:inherit;font-family:var(--font-display);font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);cursor:pointer}
.prc-faq__sign{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent);font-size:15px;transition:transform .35s var(--spring)}
.prc-faq__q[aria-expanded="true"] .prc-faq__sign{transform:rotate(45deg);background:var(--accent);color:var(--on-accent)}
.prc-faq__a{display:grid;grid-template-rows:0fr;padding:0 20px;opacity:0;transition:grid-template-rows .32s var(--ease),opacity .28s,padding .3s}
.prc-faq__a>*{overflow:hidden;min-height:0}
.prc-faq__a p{color:var(--ink-soft);font-size:14.5px;line-height:1.65}
.prc-faq__q[aria-expanded="true"]+.prc-faq__a{grid-template-rows:1fr;opacity:1;padding-bottom:18px}
.prc-mention{font-size:12.5px;color:var(--ink-faint);line-height:1.6;margin-top:20px;max-width:80ch}
.pengage{display:flex;flex-wrap:wrap;gap:12px 28px;list-style:none;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.pengage li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-soft)}
.pengage svg{color:var(--cat-boutique);flex:none}
#plan-note[hidden]{display:none}
#plan-note{margin-top:14px;display:inline-block;background:var(--accent-tint);color:var(--accent-ink);font-size:13.5px;font-weight:600;padding:9px 16px;border-radius:99px}

/* ============ pied de page ============ */
#pfoot{background:var(--dark);color:var(--on-dark);border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:clamp(46px,5vw,84px);padding:clamp(42px,5vw,64px) 0 32px}
#pfoot .pgw{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
#pfoot a{color:var(--on-dark-soft);font-size:14px}
#pfoot a:hover{color:var(--on-dark)}
#pfoot .fl{display:flex;flex-wrap:wrap;gap:18px}
#pfoot .fb{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em}

/* ============ boutons hérités de l'ancien balisage ============ */
.btn--full{width:100%;justify-content:center}
.btn--outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--outline::after{display:none}
.btn--outline:hover{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}

/* ============ responsive ============ */
@media (max-width:1080px){
  .dvs__main{grid-template-columns:1fr}
  .dvs__visual{display:none}
  .tff-builder{grid-template-columns:1fr}
  .tff-recap{position:static}
  .prc-plans{grid-template-columns:1fr;max-width:520px}
  .prc-vs-global__grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  #phero .pgrid{grid-template-columns:1fr}
  .pincl{grid-template-columns:1fr}
  #devis{margin:0;border-radius:var(--r-lg)}
}
@media (max-width:620px){
  .form__row{grid-template-columns:1fr}
  .tff-mode{width:100%;flex-direction:column}
  .tff-mode__btn{text-align:center}
  .prc-vs-card__row{flex-direction:column;align-items:flex-start;gap:2px}
  .pperiod{flex-wrap:wrap}
  .dvs__opt{padding:17px 18px;gap:12px}
}

/* ============ visuel décoratif repris de l'ancienne page (terminal + maquette) ============ */

@media (max-width: 640px) {
  .dvs__check {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
  }

  .dvs__check svg {
    width: 44px;
    height: 44px;
  }

  .dvs__success-actions {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .dvs__success-actions .btn {
    width: 100%;
  }
}

.dvs__check {
  width: 80px;
  height: 80px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-light);
  color: var(--color-accent);
}

.dvs__success-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  body.dvs .dvs__visual {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 200px);
    overflow: hidden;
  }
}

.dvs__visual {
  display: none;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 1024px) {
  .dvs__visual {
    display: flex;
  }
}

.dvs__terminal {
  border-radius: 14px;
  background: #14161d;
  color: #e6e6f0;
  overflow: hidden;
  border: 1px solid #2a2e3a;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Consolas, monospace;
}

.dvs__terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #1c1f29;
  border-bottom: 1px solid #2a2e3a;
}

.dvs__terminal-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.dvs__terminal-path {
  margin-left: 14px;
  font-size: 0.74rem;
  color: #888fa1;
  letter-spacing: 0.02em;
}

.dvs__terminal-body {
  padding: 16px 18px 20px;
  font-size: 0.78rem;
  line-height: 1.65;
  min-height: 140px;
  max-height: 168px;
  overflow: hidden;
}

.dvs__mockup {
  border-radius: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15,18,24,0.10);
}

.dvs__mockup-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.dvs__mockup-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.dvs__mockup-url {
  margin-left: 14px;
  font-size: 0.78rem;
  color: var(--color-text-soft);
  font-family: var(--font);
}

.dvs__mockup-page {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 400px;
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
}

.dvs__mock-block {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.dvs__mock-block.is-on {
  opacity: 1;
  transform: none;
}

.dvs__mock-block--header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  background: var(--color-white);
  border-radius: 10px;
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(15,18,24,0.04);
}

.dvs__mock-logo-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}

.dvs__mock-logo-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--color-accent);
}

.dvs__mock-logo-text {
  width: 52px;
  height: 8px;
  background: var(--color-text);
  border-radius: 3px;
  opacity: 0.8;
}

.dvs__mock-nav-wrap {
  display: flex;
  gap: 10px;
}

.dvs__mock-nav {
  width: 26px;
  height: 7px;
  background: var(--color-border);
  border-radius: 999px;
}

.dvs__mock-cta {
  width: 54px;
  height: 18px;
  background: var(--color-accent);
  border-radius: 6px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.dvs__mock-block--hero {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px 16px 16px;
  background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--color-accent) 9%, transparent) 0%, transparent 55%),
    var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15,18,24,0.06);
}

.dvs__mock-badge {
  display: block;
  width: 70px;
  height: 12px;
  background: color-mix(in srgb, var(--color-accent) 22%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 999px;
  margin-bottom: 2px;
}

.dvs__mock-h1 {
  display: block;
  height: 14px;
  width: 86%;
  background: var(--color-text);
  border-radius: 4px;
  opacity: 0.86;
}

.dvs__mock-h1--short {
  width: 58%;
}

.dvs__mock-h2 {
  display: block;
  height: 11px;
  width: 48%;
  background: var(--color-text);
  border-radius: 3px;
  opacity: 0.82;
  margin-bottom: 4px;
}

.dvs__mock-text {
  display: block;
  height: 6px;
  width: 92%;
  background: var(--color-border);
  border-radius: 999px;
}

.dvs__mock-text--short {
  width: 55%;
}

.dvs__mock-text--xs {
  height: 5px;
  width: 70%;
}

.dvs__mock-cta-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.dvs__mock-btn {
  display: block;
  height: 22px;
  border-radius: 7px;
}

.dvs__mock-btn--primary {
  width: 86px;
  background: var(--color-accent);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.dvs__mock-btn--ghost {
  width: 76px;
  background: transparent;
  border: 1px solid var(--color-border);
}

.dvs__mock-block--cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.dvs__mock-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  min-height: 92px;
}

.dvs__mock-card--featured {
  border-color: var(--color-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 10%, var(--color-white)) 0%, var(--color-white) 60%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.dvs__mock-card-tag {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 12px;
  background: var(--color-accent);
  border-radius: 999px;
}

.dvs__mock-card-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  margin-bottom: 4px;
}

.dvs__mock-card-title {
  display: block;
  height: 8px;
  width: 70%;
  background: var(--color-text);
  border-radius: 3px;
  opacity: 0.82;
}

.dvs__mock-card-desc {
  display: block;
  height: 5px;
  width: 90%;
  background: var(--color-border);
  border-radius: 999px;
}

.dvs__mock-card-price {
  display: block;
  height: 9px;
  width: 38%;
  background: var(--color-accent);
  border-radius: 3px;
  margin-top: auto;
}

.dvs__mock-block--text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.dvs__mock-block--footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 12px 14px;
  background: var(--color-text);
  border-radius: 8px;
}

.dvs__mock-footer-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dvs__mock-block--footer .dvs__mock-text {
  background: color-mix(in srgb, var(--color-white) 22%, transparent);
}

.dvs__mock-typed {
  background: none;
  width: auto;
  height: auto;
  opacity: 1;
  border-radius: 0;
  color: var(--color-text);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
}

.dvs__mock-logo-text.dvs__mock-typed {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -0.01em;
}

.dvs__mock-nav.dvs__mock-typed {
  font-size: 9.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-text) 68%, transparent);
}

.dvs__mock-h1.dvs__mock-typed {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.dvs__mock-text.dvs__mock-typed {
  font-size: 9.5px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.dvs__mock-h2.dvs__mock-typed {
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: -0.01em;
}

.dvs__mock-btn--primary.dvs__mock-typed {
  width: auto;
  min-width: 86px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--color-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .dvs__mock-block {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================================
   Habillage : on reprend les ressorts visuels de l'accueil (îlots colorés,
   halos, pastilles, note manuscrite, wordmark) pour que la page respire
   le même air que la home au lieu d'être une suite de cartes blanches.
   ===================================================================== */

/* halos du hero, comme sur l'accueil */
#phero{position:relative;overflow:hidden}
#phero .blob{width:min(46vw,620px);aspect-ratio:1}
#phero .blob.a{left:-14%;top:-32%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 55%,transparent),transparent)}
#phero .blob.b{right:-12%;top:6%;background:radial-gradient(closest-side,color-mix(in srgb,var(--cat-saas) 34%,transparent),transparent)}
#phero .pgw{position:relative;z-index:1}
#phero .pills span i{width:7px;height:7px;border-radius:50%;background:var(--cat-boutique)}
#phero .note{font-size:20px;color:var(--accent)}

/* cartes "ce qui est inclus" : une couleur par carte */
.pincl article{position:relative;overflow:hidden;padding-top:30px}
.pincl article::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--c,var(--accent))}
.pincl .pico{position:absolute;right:22px;top:24px;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--c,var(--accent)) 16%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c,var(--accent)) 45%,transparent)}
.pincl li svg{color:var(--c,var(--cat-boutique))}
.pincl article:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.pincl article{transition:transform .5s var(--spring),box-shadow .4s}

/* îlot teinté pour les abonnements */
.psec.isl{background:var(--accent-tint);border-radius:var(--r-xl);margin:0 clamp(10px,4vw,60px);padding:clamp(52px,6vw,92px) 0;position:relative;overflow:hidden}
.psec.isl .pperiod{background:var(--card)}
.psec.isl .prc-vs-card{background:color-mix(in srgb,var(--ink) 5%,transparent)}

/* bloc sombre pour le comparatif */
.psec.dark{background:var(--dark);color:var(--on-dark);border-radius:var(--r-xl);margin:clamp(18px,2.4vw,30px) clamp(10px,4vw,60px) 0;padding:clamp(52px,6vw,92px) 0;position:relative;overflow:hidden}
.psec.dark .sec-h h2{color:var(--on-dark)}
.psec.dark .lead{color:var(--on-dark-soft)}
.psec.dark .eyebrow{color:#A0A8FF}
.psec.dark .idx{color:rgba(237,237,247,.45)}
.psec.dark .prc-vs-global{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.psec.dark .prc-vs-global__head b,.psec.dark .prc-vs-global__head strong{color:var(--on-dark)}
.psec.dark .prc-vs-global__head span{color:var(--on-dark-soft)}
.psec.dark .prc-vs-global__col{background:rgba(255,255,255,.06)}
.psec.dark .prc-vs-global__col-lbl{color:var(--on-dark-soft)}
.psec.dark .prc-vs-global__col-pr{color:var(--on-dark-soft)}
.psec.dark .prc-vs-global__col-sub{color:var(--on-dark-soft)}
.psec.dark .prc-vs-global__col--us{background:var(--accent);box-shadow:none}
.psec.dark .prc-vs-global__col--us .prc-vs-global__col-lbl,.psec.dark .prc-vs-global__col--us .prc-vs-global__col-sub{color:rgba(255,255,255,.86)}
.psec.dark .prc-vs-global__col--us .prc-vs-global__col-pr{color:#fff}
.psec.dark .prc-vs-global__verdict{background:#fff;color:var(--ink)}
.psec.dark .prc-vs-global__verdict-txt b{color:var(--accent)}

/* formules : de la couleur, comme les cartes Services de l'accueil */
.prc-plan--featured{background:var(--accent);color:var(--on-accent)}
.prc-plan--featured .prc-plan__tag{color:rgba(255,255,255,.8)}
.prc-plan--featured .prc-plan__price{color:#fff}
.prc-plan--featured .prc-plan__pitch,.prc-plan--featured .prc-plan__feats li{color:rgba(255,255,255,.86)}
.prc-plan--featured .prc-plan__feats li b{color:#fff}
.prc-plan--featured .prc-plan__feats li::before{border-color:#fff}
.prc-plan--featured .prc-vs-card{background:rgba(255,255,255,.12)}
.prc-plan--featured .prc-vs-card__lbl,.prc-plan--featured .prc-vs-card__row span,.prc-plan--featured .prc-vs-card__row s{color:rgba(255,255,255,.78)}
.prc-plan--featured .prc-plan__badge{background:var(--ink);color:#fff}
.prc-plan--featured .plan-cta{background:#fff;color:var(--accent-ink);box-shadow:none}
.prc-plan--featured .plan-cta:hover{background:#fff;color:var(--accent-ink)}
.prc-plans>.prc-plan:last-child{background:var(--ink);color:var(--on-dark)}
.prc-plans>.prc-plan:last-child .prc-plan__tag{color:var(--on-dark-soft)}
.prc-plans>.prc-plan:last-child .prc-plan__price{color:#A5B4FC}
.prc-plans>.prc-plan:last-child .prc-plan__pitch,.prc-plans>.prc-plan:last-child .prc-plan__feats li{color:var(--on-dark-soft)}
.prc-plans>.prc-plan:last-child .prc-plan__feats li b{color:var(--on-dark)}
.prc-plans>.prc-plan:last-child .prc-vs-card{background:rgba(255,255,255,.07)}
.prc-plans>.prc-plan:last-child .prc-vs-card__lbl,.prc-plans>.prc-plan:last-child .prc-vs-card__row span,.prc-plans>.prc-plan:last-child .prc-vs-card__row s{color:var(--on-dark-soft)}
.prc-plans>.prc-plan:last-child .prc-pastille{background:rgba(255,255,255,.1);color:var(--on-dark);box-shadow:none}
.prc-plans>.prc-plan:last-child .plan-cta{background:#fff;color:var(--ink);box-shadow:none}

/* wordmark géant avant le pied de page */
.wm2{font-family:var(--font-display);font-size:clamp(110px,24vw,360px);font-weight:800;letter-spacing:-.07em;line-height:.8;text-align:center;color:transparent;-webkit-text-stroke:1.4px color-mix(in srgb,var(--ink) 16%,transparent);margin:clamp(30px,4vw,54px) 0 -.1em;user-select:none;overflow:hidden}
.wm2 em{font-style:italic;-webkit-text-stroke-color:color-mix(in srgb,var(--accent) 40%,transparent)}

@media (max-width:900px){
  .psec.isl,.psec.dark{margin:0;border-radius:var(--r-lg)}
  #phero .note{display:none}
}

/* les pastilles du hero ne dépendent pas du reveal de l'accueil (#hero.in) */
#phero .pills span{opacity:1;transform:none}

/* entrée du hero : les pastilles puis les lignes de la carte de prix arrivent
   les unes après les autres, comme le hero de l'accueil se construit. */
@keyframes pIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#phero .pills span{opacity:0;animation:pIn .6s var(--spring) forwards}
#phero .pills span:nth-child(1){animation-delay:.15s}
#phero .pills span:nth-child(2){animation-delay:.25s}
#phero .pills span:nth-child(3){animation-delay:.35s}
.pcard{opacity:0;animation:pIn .8s var(--ease) .35s forwards}
.pcard .prow,.pcard .pfoot{opacity:0;animation:pIn .7s var(--ease) forwards}
.pcard .prow:nth-of-type(1){animation-delay:.6s}
.pcard .prow:nth-of-type(2){animation-delay:.75s}
.pcard .prow:nth-of-type(3){animation-delay:.9s}
.pcard .pfoot{animation-delay:1.05s}
#phero .note{opacity:0;animation:pIn .7s var(--spring) 1.2s forwards}
/* le halo respire très lentement, comme les halos de l'accueil */
@keyframes floatb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,3%,0) scale(1.06)}}
#phero .blob.a{animation:floatb 18s ease-in-out infinite}
#phero .blob.b{animation:floatb 22s ease-in-out infinite reverse}

/* sans JS, les îlots ne reçoivent jamais .in : on les affiche d'emblée */
html:not(.js) .isl{opacity:1;transform:none}

/* l'îlot arrive en glissant, mais sans passer par un fondu : un texte à 60 %
   d'opacité avant d'être révélé, c'est du contraste perdu pour rien. */
.psec.isl{opacity:1}
/* sur le fond teinté de l'îlot, --ink-faint tombe à 4,42 : on passe à --ink-soft */
.psec.isl .tff-plans-note,.psec.isl .prc-mention,.psec.isl .tff-commerce__fine{color:var(--ink-soft)}

/* --- mise au point mobile (2026-08-26) : lisibilité et confort tactile --- */
@media (max-width:900px){
  .prc-vs-card__lbl{font-size:11.5px}
  .prc-pastille,.prc-plan__badge{font-size:12px}
  .prc-vs-global__col-lbl{font-size:11.5px}
  #pfoot .fl{gap:4px 18px}
  #pfoot .fl a{padding:11px 0;display:inline-flex;align-items:center;min-height:44px}
  #nav .brand{padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
  .sec-h .lead a,.scta a:not(.btn){padding:6px 0;display:inline-block}
}
@media (max-width:620px){
  /* six lignes centrées sur un téléphone, c'est pénible à lire */
  .prc-vs-global__head{text-align:left}
  .prc-vs-global{padding:22px 18px}
}

/* Vitesse : le haut de page ne doit pas attendre le JS pour être peint.
   Le paragraphe d'accroche était le plus gros élément de l'écran mais restait
   à opacity:0 jusqu'au passage de l'observateur : la mesure LCP tombait à 3,7 s.
   On garde une entrée, mais en translation seule, jamais en opacité. */
@keyframes heroUp{from{transform:translateY(14px)}to{transform:none}}
#phero .eyebrow,#phero h1,#phero .lead,#phero .cta{opacity:1;transform:none;animation:heroUp .7s var(--ease) both}
#phero .lead{animation-delay:.06s}
#phero .cta{animation-delay:.12s}
#phero h1 .w i,#phero .split .w i{opacity:1;transform:none;transition:none}


/* ============================================================
   Vue mobile (2026-08-27) — sans jamais mélanger les défilements :
   la page ne défile que verticalement, on ne déporte rien sur un
   rail horizontal. Les deux blocs de trois cartes s'ouvraient sur
   trois écrans chacun ; ils se replient maintenant, exactement
   comme la section « outils » de l'accueil sur téléphone :
   - « ce qui est compris » : accordéon, le premier volet ouvert ;
   - les abonnements : un sélecteur de formule, une carte à la fois.
   Les trois intitulés restent visibles côte à côte : on compare
   sans faire défiler quoi que ce soit.
   ============================================================ */
@media (max-width:800px){
  /* --- accordéon « ce qui est compris » --- */
  .pincl{grid-template-columns:1fr;gap:10px}
  .pincl article{padding:0;overflow:hidden;background:var(--card);
    box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s}
  .pincl article:hover{transform:none;box-shadow:inset 0 0 0 1px var(--line)}
  .pincl article:has(.pacc__q[aria-expanded="true"]){
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c,var(--accent)) 45%,transparent),var(--shadow-md)}
  .pincl article::before{height:4px}
  .pincl .pico{display:none}
  .pacc__q{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
    padding:15px 18px;background:none;border:0;text-align:left;cursor:pointer;min-height:52px;
    font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
  .pacc__q::after{content:"";flex:none;width:9px;height:9px;margin-top:-4px;
    border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
    transform:rotate(45deg);transition:transform .3s var(--ease),border-color .3s}
  .pacc__q[aria-expanded="true"]::after{transform:rotate(-135deg);margin-top:3px;border-color:var(--c,var(--accent))}
  /* ouverture animée : la ligne de grille passe de 0fr à 1fr, ce qui anime la
     hauteur réelle sans la mesurer en JS (en display:none, le volet s'ouvrait
     d'un coup). */
  .pacc__a{display:grid;grid-template-rows:0fr;visibility:hidden;
    transition:grid-template-rows .45s var(--ease),visibility 0s linear .45s}
  .pacc__i{overflow:hidden;min-height:0}
  .pacc__i>*{margin-left:18px;margin-right:18px}
  .pacc__i>*:last-child{margin-bottom:18px}
  .pacc__q[aria-expanded="true"]+.pacc__a{grid-template-rows:1fr;visibility:visible;
    transition:grid-template-rows .45s var(--ease),visibility 0s}
  /* le ul gardait le retrait de 40 px du navigateur : la liste partait bien
     plus à droite que le titre de la carte, pour rien. */
  .pincl ul{padding-left:0;margin-top:12px}
  .pincl p{font-size:14px}
  .pincl li{font-size:13.5px}

  /* --- sélecteur de formule --- */
  .pswitch{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 0 18px;padding:5px;
    background:var(--card);border-radius:99px;box-shadow:inset 0 0 0 1px var(--line)}
  .pswitch button{min-height:42px;padding:9px 4px;border-radius:99px;font-size:12.5px;font-weight:700;
    letter-spacing:-.01em;color:var(--ink-soft);transition:background .25s var(--ease),color .25s}
  .pswitch button.on{background:var(--accent);color:var(--on-accent)}
  #abonnements .prc-plans{display:block;max-width:none}
  #abonnements .prc-plan{display:none;margin-top:16px}
  #abonnements .prc-plan.pshow{display:grid}
  #abonnements .prc-plan:hover{transform:none}

  /* --- quatre engagements l'un sous l'autre en fin de page : deux par deux --- */
  .pengage{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
  .pengage li{align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.3;text-wrap:balance;
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 10px}
  .pengage svg{margin-top:2px}
}

/* ============================================================
   Retours de Liham sur la vue mobile (2026-08-27, 2e série)
   ============================================================ */
@media (max-width:800px){
  /* Pastilles du hero : trois pastilles de largeurs différentes sur deux
     lignes, alignées à gauche : ça faisait un escalier. Trois colonnes
     égales, texte centré, elles s'alignent en bloc. */
  #phero .pills{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:22px}
  #phero .pills span{justify-content:center;text-align:center;gap:5px;padding:8px 6px;
    font-size:10px;letter-spacing:.03em;line-height:1.25;text-wrap:balance}
  #phero .pills span i{width:6px;height:6px;flex:none}

  /* « Mensuel ou annuel » : la pastille arrondie à 99 px se retrouvait sur
     deux lignes, avec « précisé au devis » seul en bas d'un ovale déformé.
     On en fait un bandeau net, la mention passe en seconde ligne assumée. */
  /* Tout sur une seule ligne : à 350 px les trois morceaux au complet font
     ~370 px pour ~320 px utiles. On resserre les corps et on coupe la fin de
     la pastille (« sur l'annuel »), déjà dite par l'intitulé juste avant.
     Le texte reste entier sur ordinateur. */
  .pperiod{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
    gap:7px;width:100%;border-radius:14px;padding:10px 12px;font-size:11px;margin-bottom:20px}
  .pperiod b{font-size:12px;white-space:nowrap}
  .pperiod .pfine{font-size:11px;color:var(--ink-faint);white-space:nowrap}
  .pperiod .chip{font-size:10.5px;padding:3px 8px;white-space:nowrap;flex:none}
  .pperiod .chipx{display:none}

  /* Comparatif : trois pavés « intitulé / prix / explication » empilés sur
     toute la hauteur. L'intitulé et le prix passent sur la même ligne, la
     phrase se glisse dessous : ça se lit comme un tableau de comparaison. */
  .prc-vs-global{padding:20px 16px;gap:14px}
  .prc-vs-global__head p{font-size:13.5px;line-height:1.5}
  .prc-vs-global__head h3{font-size:20px}
  .prc-vs-global__grid{gap:8px}
  .prc-vs-global__col{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"lbl pr" "sub sub";gap:2px 12px;padding:14px 15px;align-items:baseline}
  .prc-vs-global__col-lbl{grid-area:lbl;font-size:10.5px;letter-spacing:.08em;line-height:1.35}
  .prc-vs-global__col-pr{grid-area:pr;font-size:15px;text-align:right;white-space:nowrap}
  .prc-vs-global__col--us .prc-vs-global__col-pr{font-size:19px}
  .prc-vs-global__col-sub{grid-area:sub;font-size:12px;line-height:1.45;margin-top:6px}
  .prc-vs-global__verdict{padding:14px 16px;font-size:13px}

  /* Boutons du hero : deux boutons de largeurs différentes, l'un sous
     l'autre, ça faisait un escalier. Côte à côte, à parts égales. */
  #phero .cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
  #phero .cta .btn{width:100%;justify-content:center;text-align:center;padding:14px 8px;
    font-size:13px;gap:6px;text-wrap:balance}

  /* Engagements : quatre tuiles, texte aligné en haut, coupures équilibrées. */
  .pengage{grid-template-columns:1fr 1fr;gap:8px}
  .pengage li{padding:12px 11px;font-size:12px}

  /* Signature géante : à 32vw elle flottait au milieu d'un grand vide et se
     faisait trancher par le coin arrondi du pied de page. On la fait tenir
     toute la largeur : le débord derrière le pied de page redevient un parti
     pris et non un accident. */
  .wm2{font-size:min(76vw,300px);margin:-26px 0 -.1em;-webkit-text-stroke-width:1.2px}

  /* Bas de page : la phrase à rallonge est éclatée (nom, activité, année), les
     trois liens tiennent sur une ligne et le courriel se détache en dessous.
     92 px de marge basse pour que la bulle du chatbot ne se pose sur rien. */
  #pfoot{margin-top:0;padding:26px 0 92px;border-radius:24px 24px 0 0}
  #pfoot .pgw{display:grid;gap:16px;align-items:start}
  #pfoot .fsep{display:none}
  #pfoot .fb{display:block;font-size:18px;color:var(--on-dark);margin-bottom:6px}
  #pfoot .ftag{display:block;font-size:13px;line-height:1.5;color:var(--on-dark-soft)}
  #pfoot .fcop{display:block;font-size:12px;color:var(--on-dark-soft);opacity:.7;margin-top:6px}
  #pfoot .fl{display:flex;flex-wrap:wrap;gap:0 18px;
    border-top:1px solid rgba(255,255,255,.14);padding-top:2px}
  #pfoot .fl a{min-height:42px;font-size:13.5px}
  #pfoot .fl a:last-child{flex-basis:100%;color:var(--on-dark);font-weight:600;
    border-top:1px solid rgba(255,255,255,.14);margin-top:2px}
}
@media (prefers-reduced-motion:reduce){
  .pacc__a,.pacc__q[aria-expanded="true"]+.pacc__a{transition:none}
}

/* Sous 360 px (iPhone SE), même resserrée la ligne « Mensuel ou annuel »
   déborde de 23 px : la mention passe à la trappe, elle est redite par le
   « Sur devis » de chaque formule juste en dessous. */
@media (max-width:359px){
  .pperiod .pfine{display:none}
}