/* ═══════════════════════════════════════════════════════════════
   DTM MEDIAS — design system
   Fraunces (H1, H2 de section, noms clients, montants) + Inter Tight
   (tout le reste). Off-white chaleureux, encre, accent vermillon.
   Mobile-first : écrit à 375px, élargi ensuite. Échelle en multiples de 4.
   ═══════════════════════════════════════════════════════════════ */

/* ── polices auto-hébergées (variables, sous-ensemble latin) ─── */
@font-face{
  font-family:'Fraunces';src:url('../fonts/fraunces-var.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Inter Tight';src:url('../fonts/inter-tight-var.woff2') format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap;
}
/* replis calibrés : évite le saut de mise en page au chargement */
@font-face{font-family:'Fraunces-fb';src:local('Georgia'),local('Times New Roman');size-adjust:96%;ascent-override:92%;descent-override:24%}
@font-face{font-family:'Inter-fb';src:local('Helvetica Neue'),local('Arial');size-adjust:103%;ascent-override:94%;descent-override:24%}

:root{
  /* ── couleurs ─────────────────────────────────────────────── */
  --bg:#ffffff;
  --surface:#f6f5f2;
  --surface-2:#efede8;
  --ink:#141312;
  --ink-2:#3a3733;
  --muted:#5d5952;
  --line:#e7e4de;
  --line-2:#d8d4cc;
  --accent:#ff5a3c;          /* identité, aplats et boutons uniquement */
  --accent-ink:#d83b1f;      /* 4,60:1 sur blanc — texte sur blanc seulement */
  --accent-deep:#b83318;     /* 6,0:1 sur blanc, 5,1:1 sur crème — texte sur fond crème */
  --accent-soft:#fff0ec;
  --field:#8a847b;           /* bordure de champ sur blanc */
  --field-cream:#7d776e;     /* bordure de champ sur crème */
  --error:#b3261e;           /* 6,6:1 — distinct de la couleur de marque */
  --error-soft:#fdecea;
  --ok:#1f7a4d;
  --ok-soft:#e8f5ee;

  /* ── typo ─────────────────────────────────────────────────── */
  --sans:'Inter Tight','Inter-fb',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --serif:'Fraunces','Fraunces-fb',Georgia,'Times New Roman',serif;

  /* échelle (mobile → desktop) */
  --t-d1:clamp(2.125rem,6.2vw,4rem);      /* 34 → 64 : H1 home */
  --t-d2:clamp(1.75rem,4.6vw,3rem);       /* 28 → 48 : H1 pages internes */
  --t-h2:clamp(1.5rem,3.4vw,2.25rem);     /* 24 → 36 */
  --t-h3:clamp(1.1875rem,1.6vw,1.375rem); /* 19 → 22 */
  --t-h4:1rem;
  --t-lead:clamp(1.0625rem,1.9vw,1.25rem);/* 17 → 20 */
  --t-body:clamp(1rem,1.2vw,1.0625rem);   /* 16 → 17 */
  --t-sm:0.9375rem;                        /* 15 */
  --t-xs:0.75rem;                          /* 12 */

  /* ── espacement (multiples de 4, rien en dehors) ──────────── */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px; --s30:120px;

  --sec-short:clamp(48px,6vw,64px);   /* bandes courtes */
  --sec:clamp(56px,7.5vw,88px);       /* sections standard */
  --sec-pivot:clamp(64px,9vw,112px);  /* réalisations, tarifs, conversion */

  /* ── formes ───────────────────────────────────────────────── */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --maxw:1240px; --measure:720px;
  --pad:20px;
  --hdr-h:60px;
  --shadow-1:0 1px 2px rgba(20,19,18,.04), 0 4px 16px rgba(20,19,18,.06);
  --shadow-2:0 8px 40px rgba(20,19,18,.12);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:900px){ :root{ --pad:24px; --hdr-h:72px } }

/* ── reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.02em;text-wrap:balance;font-weight:600}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--accent-deep);outline-offset:3px;border-radius:4px}

/* ── layout ─────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.measure{max-width:var(--measure)}
.section{padding-block:var(--sec)}
.section--short{padding-block:var(--sec-short)}
.section--pivot{padding-block:var(--sec-pivot)}
.section--surface{background:var(--surface)}
.section--surface2{background:var(--surface-2)}
.grid{display:grid;gap:var(--s4)}
@media (min-width:760px){ .grid{gap:var(--s6)} }
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:1fr}
@media (min-width:640px){ .g4{grid-template-columns:1fr 1fr} }
@media (min-width:760px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1000px){ .g4{grid-template-columns:repeat(4,1fr)} }
/* Cinq colonnes : réservé aux cartes courtes du sommaire des cas. En dessous
   de 1180 px on repasse à trois, cinq colonnes y deviennent des colonnes de
   deux mots. */
.g5{grid-template-columns:1fr}
@media (min-width:640px){ .g5{grid-template-columns:1fr 1fr} }
@media (min-width:760px){ .g5{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1180px){ .g5{grid-template-columns:repeat(5,1fr)} }
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:12px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-sm)}

/* ── typographie ────────────────────────────────────────────── */
.d1{font-family:var(--serif);font-weight:600;font-size:var(--t-d1);line-height:1.05;letter-spacing:-.025em;font-variation-settings:'SOFT' 0,'WONK' 0}
.d2{font-family:var(--serif);font-weight:600;font-size:var(--t-d2);line-height:1.08;letter-spacing:-.02em;font-variation-settings:'SOFT' 0,'WONK' 0}
.h2{font-family:var(--serif);font-weight:600;font-size:var(--t-h2);line-height:1.14;letter-spacing:-.012em;font-variation-settings:'SOFT' 0,'WONK' 0}
.h3{font-size:var(--t-h3);font-weight:600;line-height:1.3;letter-spacing:-.01em}
.h4{font-size:var(--t-h4);font-weight:600;line-height:1.4;letter-spacing:-.005em}
.lead{font-size:var(--t-lead);line-height:1.52;max-width:62ch;color:var(--ink-2)}
.sm{font-size:var(--t-sm);line-height:1.55}
.muted{color:var(--muted)}
/* sur-titre en minuscules (pas de majuscules intégrales : règle maison) */
.eyebrow{font-size:var(--t-xs);letter-spacing:.06em;color:var(--muted);font-weight:500;margin-bottom:var(--s3)}
.num{font-variant-numeric:tabular-nums}
.price{font-family:var(--serif);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* espacement interne normalisé */
.sec-head{margin-bottom:var(--s8)}
@media (min-width:760px){ .sec-head{margin-bottom:var(--s10)} }
.sec-head .h2 + .lead{margin-top:var(--s3)}

/* ── boutons ────────────────────────────────────────────────── */
.btn{
  --bg-b:var(--ink);--fg-b:#fff;--bd-b:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:52px;padding:14px 26px;
  background:var(--bg-b);color:var(--fg-b);border:1.5px solid var(--bd-b);
  border-radius:var(--r-pill);font-weight:600;font-size:1rem;cursor:pointer;text-align:center;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn:hover{--bg-b:var(--ink-2);--bd-b:var(--ink-2)}
/* fond accent-ink et non accent : #fff sur #ff5a3c ne donne que 3,10:1,
   insuffisant pour un libellé de 16 px. #d83b1f donne 4,60:1 (AA). */
.btn--accent{--bg-b:var(--accent-ink);--fg-b:#fff;--bd-b:var(--accent-ink)}
.btn--accent:hover{--bg-b:var(--accent-deep);--bd-b:var(--accent-deep)}
.btn--ghost{--bg-b:transparent;--fg-b:var(--ink);--bd-b:var(--line-2)}
.btn--ghost:hover{--bg-b:transparent;--fg-b:var(--ink);--bd-b:var(--ink)}
.btn--lg{min-height:58px;padding:16px 32px;font-size:1.0625rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
@media (max-width:519px){ .btn-row .btn{width:100%} }
/* lien souligné : action secondaire */
.link{border-bottom:1.5px solid var(--line-2);padding-bottom:2px;font-weight:500}
.link:hover{border-bottom-color:var(--ink)}
.link--accent{color:var(--accent-ink);border-bottom-color:currentColor}
.section--surface .link--accent,.section--surface2 .link--accent{color:var(--accent-deep)}

/* ── surfaces ───────────────────────────────────────────────── */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--shadow-1)}
@media (min-width:760px){ .card{padding:var(--s8)} }
.card--flat{box-shadow:none}
.card--cream{background:var(--surface)}
.pill{display:inline-flex;align-items:center;gap:var(--s2);padding:6px 14px;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-deep);font-size:var(--t-sm);font-weight:600}
.pill--neutral{background:var(--surface-2);color:var(--ink-2)}
hr.rule{height:1px;background:var(--line);border:0;margin:0}

/* liste à filets */
.ruled{list-style:none}
.ruled > li{padding-block:var(--s3);border-top:1px solid var(--line)}
.ruled > li:first-child{border-top:0}
.ruled .k{font-weight:600;display:block;margin-bottom:2px}

/* liste à puces sobres (tiret court, jamais d'emoji) */
.dashed{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.dashed li{position:relative;padding-left:22px}
.dashed li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1.5px;background:var(--accent)}

/* ── header ─────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.hdr[data-scrolled="true"]{border-bottom-color:var(--line);box-shadow:var(--shadow-1)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:var(--s3);font-weight:600;letter-spacing:-.02em;font-size:1.125rem}
.brand__mark{flex:none;width:34px;height:34px}
.brand b{align-self:center}
@media (max-width:400px){ .brand i{display:none} }   /* sous 400px, le nom seul respire mieux */
.brand b{font-weight:600}
.brand i{font-style:normal;font-size:var(--t-xs);letter-spacing:.06em;color:var(--muted);font-weight:500}
.nav{display:none}
.nav a{font-size:.9375rem;font-weight:500;color:var(--ink-2);padding:6px 0;border-bottom:1.5px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.hdr__cta{display:none}
/* sélecteur de langue : <select> natif, aucune bibliothèque, utilisable au clavier */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lang{margin:0 0 0 auto}
.lang select{
  appearance:none;-webkit-appearance:none;
  padding:8px 30px 8px 12px;min-height:44px;
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none' stroke='%235d5952' stroke-width='1.5'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E") no-repeat right 11px center;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  font-size:var(--t-sm);color:var(--ink-2);cursor:pointer;
}
.lang select:hover{border-color:var(--ink)}
.lang select:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.lang--drawer{display:none;margin:var(--s5) 0 0}
.lang--drawer select{width:100%}
@media (max-width:899px){ .lang{display:none} .lang--drawer{display:block} }
.burger{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);cursor:pointer}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media (min-width:900px){
  .nav{display:flex;gap:clamp(18px,2.2vw,30px);align-items:center}
  .hdr__cta{display:inline-flex}
  .burger{display:none}
}
/* panneau mobile plein écran */
.drawer{position:fixed;inset:0;z-index:90;background:var(--bg);padding:calc(var(--hdr-h) + 20px) var(--pad) var(--s8);display:none;flex-direction:column;overflow-y:auto}
.drawer[data-open="true"]{display:flex}
.drawer a.dl{font-family:var(--serif);font-weight:600;font-size:1.5rem;min-height:56px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.drawer .btn{margin-top:var(--s6)}
.drawer__meta{margin-top:var(--s5);color:var(--muted);font-size:var(--t-sm)}
.drawer__close{position:absolute;top:7px;right:var(--pad)}
body[data-lock="true"]{overflow:hidden}

/* ── footer ─────────────────────────────────────────────────── */
.ftr{background:var(--ink);color:#e9e6e1;padding-block:var(--sec)}
.ftr a{color:#e9e6e1}
.ftr a:hover{color:var(--accent)}
.ftr__grid{display:grid;gap:var(--s8)}
.ftr h4{font-size:var(--t-xs);letter-spacing:.06em;color:#a49e96;margin-bottom:var(--s3);font-weight:500}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.ftr__bottom{margin-top:var(--s10);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.12);color:#a49e96;font-size:var(--t-sm);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between}
@media (min-width:760px){ .ftr__grid{grid-template-columns:1.7fr 1fr 1fr 1fr} }

/* ── formulaire ─────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s5)}
.field label{font-weight:500;font-size:var(--t-sm)}
.field .hint{color:var(--muted);font-size:var(--t-sm)}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:13px 16px;
  background:var(--bg);border:1.5px solid var(--field);border-radius:var(--r-sm);
  transition:border-color .15s var(--ease);
}
.section--surface .field input,.section--surface .field select,.section--surface .field textarea,
.section--surface2 .field input,.section--surface2 .field select,.section--surface2 .field textarea{border-color:var(--field-cream)}
.field textarea{min-height:104px;resize:vertical;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.field[data-invalid="true"] input,.field[data-invalid="true"] select{border-color:var(--error)}
.field .err{color:var(--error);font-size:var(--t-sm);font-weight:500}
.form-note{color:var(--muted);font-size:var(--t-sm);margin-top:var(--s3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── FAQ (accordéon natif) ──────────────────────────────────── */
.faq{list-style:none;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);
  padding:var(--s5) 0;cursor:pointer;font-weight:600;list-style:none;min-height:56px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin-top:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .18s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding-bottom:var(--s5);color:var(--ink-2);max-width:68ch;font-size:var(--t-sm)}

/* ── tableau comparatif ─────────────────────────────────────── */
.cmp{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.cmp th,.cmp td{text-align:left;padding:var(--s4) var(--s4);border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-weight:600;font-size:var(--t-sm);color:var(--ink)}
.cmp tbody th{font-weight:600;width:26%}
.cmp .yes{color:var(--ok)}
@media (max-width:759px){ .cmp,.cmp tbody,.cmp tr,.cmp td,.cmp th{display:block;width:auto}
  .cmp thead{display:none}
  .cmp tr{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s4);background:var(--bg)}
  .cmp th,.cmp td{border:0;padding:0 0 var(--s3)}
  .cmp td::before{content:attr(data-l);display:block;font-size:var(--t-xs);color:var(--muted);margin-bottom:2px}
}

/* ═══ COMPOSANTS DE PAGE ═══════════════════════════════════ */

/* hero : pile en mobile, 55/45 en desktop */
.hero{padding-top:var(--s8)}
.hero__in{display:grid;gap:var(--s8);align-items:center}
@media (min-width:960px){
  .hero{padding-top:var(--s24)}
  .hero__in{grid-template-columns:55fr 45fr;gap:var(--s16)}
}

/* cadre navigateur : rend la capture crédible sans maquette inclinée */
.frame{margin:0;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--bg);box-shadow:var(--shadow-2)}
.frame__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.frame__bar span{width:9px;height:9px;border-radius:50%;background:var(--line-2);flex:none}
.frame__bar em{font-style:normal;margin-left:8px;font-size:var(--t-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ratio figé : sans cela, une capture source légèrement plus courte décale
   le titre de sa carte par rapport aux cartes voisines de la même rangée */
.frame img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.case .frame{align-self:start}

/* schéma de processus du hero : de l'appel à la livraison.
   Vertical dans les deux formats, la lecture reste la même en 375 px
   et en desktop, seul l'espacement respire. */
.flow{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6);box-shadow:var(--shadow-1);
}
@media (min-width:960px){ .flow{padding:var(--s8)} }
.flow__head{
  font-size:var(--t-xs);letter-spacing:.06em;color:var(--muted);
  font-weight:500;margin:0 0 var(--s5);
}
.flow__list{list-style:none;display:flex;flex-direction:column}
.flow__list > li{
  position:relative;padding-left:44px;padding-bottom:var(--s6);
}
.flow__list > li:last-child{padding-bottom:0}
/* le fil qui relie les étapes */
.flow__list > li::before{
  content:"";position:absolute;left:15px;top:32px;bottom:0;
  width:1.5px;background:var(--line-2);
}
.flow__list > li:last-child::before{display:none}
.flow__n{
  position:absolute;left:0;top:0;
  width:31px;height:31px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--ink);
  font-size:var(--t-sm);font-weight:600;
}
.flow__last .flow__n{background:var(--accent-ink);color:#fff}
.flow__t{display:block;font-weight:600;font-size:1.0625rem;line-height:1.35;padding-top:3px}
.flow__d{display:block;color:var(--muted);font-size:var(--t-sm);line-height:1.5;margin-top:4px}
.flow__big{
  display:block;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.5rem,3.4vw,1.9rem);line-height:1.1;letter-spacing:-.02em;
  color:var(--accent-ink);margin-top:6px;
  font-variation-settings:'SOFT' 0,'WONK' 0;
}

/* bandeau de preuve */
.proof{list-style:none}
.proof li .h4{display:block;margin-bottom:4px}
.proof li p{margin:0}

/* cartes de réalisation
   align-content:start est indispensable : par défaut la grille étire ses rangées
   pour remplir la hauteur de la plus haute carte de la rangée, et le texte de
   chaque carte démarre alors à une hauteur différente. */
.case{display:grid;gap:var(--s5);align-content:start}
.case__name{margin-top:var(--s1)}
.case .dashed{margin-top:var(--s4)}
@media (min-width:960px){
  .case--lead{grid-template-columns:620fr 560fr;gap:var(--s10);align-items:center}
}

/* témoignages clients : citation en Fraunces, attribution sobre, aucun
   portrait ni guillemet decoratif. Le nom et l entreprise portent la preuve. */
.says{list-style:none}
.says > li{display:flex;flex-direction:column;gap:var(--s4);padding-top:var(--s5);border-top:2px solid var(--ink)}
.says blockquote{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.0625rem,1.7vw,1.1875rem);line-height:1.45;letter-spacing:-.005em;
  font-variation-settings:'SOFT' 0,'WONK' 0;
}
.says figcaption{display:flex;flex-direction:column;gap:1px;margin-top:auto}
.says .who{font-weight:600;font-size:var(--t-sm)}
.says .org{font-size:var(--t-sm);color:var(--muted)}
.says .org a{border-bottom:1px solid var(--line-2)}
.says .org a:hover{border-bottom-color:var(--accent-deep)}

/* secteurs */
.sectors{list-style:none}
.sectors li .h4{display:block;margin-bottom:4px}
.sectors li p{margin:0}

/* étapes numérotées : la numérotation porte une vraie séquence */
.steps{list-style:none;counter-reset:none}
.steps li{display:flex;flex-direction:column;gap:4px;padding-top:var(--s4);border-top:2px solid var(--ink)}
.steps__n{font-family:var(--serif);font-weight:600;font-size:1.5rem;color:var(--accent-deep);line-height:1}
.steps li p{margin:0}

/* liste ordonnée à filets, numérotation discrète */
ol.ruled{counter-reset:r;list-style:none}
ol.ruled > li{counter-increment:r;padding-left:30px;position:relative}
ol.ruled > li::before{content:counter(r);position:absolute;left:0;top:var(--s3);font-size:var(--t-sm);color:var(--accent-deep);font-weight:600;font-variant-numeric:tabular-nums}

/* formules : les 4 cartes doivent aligner nom, prix et bouton */
.plan{display:flex;flex-direction:column;position:relative;padding-top:var(--s8)}
.plan .price{font-size:2rem;margin:var(--s2) 0 var(--s1)}
.plan .price .sm{font-family:var(--sans);font-weight:400}
.plan--featured{border-color:var(--accent);border-width:1.5px}
/* le badge sort du flux : sans cela il décale le nom et le prix de la carte mise en avant */
.plan .pill{position:absolute;top:calc(var(--s8) * -0.5);left:var(--s6);margin:0}
/* le badge ne doit pas décaler le nom qui le suit */
.plan .pill + .h4,.plan .pill + *{margin-top:0}
/* « À partir de » : les cartes qui n'en ont pas réservent la même ligne,
   sinon leur prix remonte d'un cran par rapport à la carte e-commerce */
.plan__from{display:block;font-size:var(--t-sm);line-height:1.5;min-height:1.5em}
.plan:not(:has(.plan__from)) .price::before{content:"";display:block;font-size:var(--t-sm);line-height:1.5;min-height:1.5em}
.plan .btn{margin-top:auto}
.plan .dashed{margin-bottom:var(--s6)}
.plan__acompte{margin-bottom:var(--s4)}
.sm-price{font-size:1.5rem;margin:var(--s2) 0 var(--s3)}
.sm-price .sm{font-family:var(--sans);font-weight:400}

/* formulaire rapide */
.quick{margin-top:var(--s2)}

/* ── utilitaires ────────────────────────────────────────────── */
.center{text-align:center}
.mt2{margin-top:var(--s5)}.mt3{margin-top:var(--s8)}.mt4{margin-top:var(--s10)}
.mb2{margin-bottom:var(--s5)}.mb3{margin-bottom:var(--s8)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}