/* ═══════════════════════════════════════════════════════════════════════
   ERP365 — surfaces CLIENTES : marketing, inscription, portail.
   Le Control Plane garde erp365.css : ce sont deux registres, pas deux marques.

   DIRECTION. Le Control Plane est un panneau d'instrumentation : il dit
   « voici une machine que vous opérez ». Un dirigeant de PME n'opère pas une
   machine — il confie sa gestion. Même colonne vertébrale typographique et
   même indigo, mais un fond de papier chaud, des respirations larges, et un
   champ indigo profond pour les moments d'affirmation.

   L'indigo profond est une référence au bleu de teinture ouest-africain :
   une COULEUR, jamais un motif. Aucun pastiche graphique.

   SIGNATURE : « la fiche ». Le héros n'est pas une capture d'écran dans un
   cadre de navigateur, mais un enregistrement nommé — l'objet qu'un dirigeant
   reconnaît. Son contenu est celui du vrai tableau de bord client.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #FBFAF8;   /* papier chaud, plus clair et plus net qu'un crème */
  --paper-sunk: #F3F1ED;
  --card:       #FFFFFF;

  --field:      #141A2E;   /* indigo profond : champ d'affirmation */
  --field-soft: #1E2740;
  --field-line: #2C3654;
  --on-field:   #EDEFF5;
  --on-field-dim: #9BA5C0;

  --ink:        #141A2E;
  --ink-soft:   #4A5470;
  --ink-faint:  #7E88A3;
  --line:       #E2E0DA;
  --line-soft:  #EEECE6;

  --accent:      #4B3FBB;  /* indigo ERP365, repris du Control Plane */
  --accent-deep: #372CA0;
  --accent-wash: #EFEDFB;

  --ok:        #0F7A5A;    /* vert d'inclusion */
  --ok-wash:   #E4F1EC;
  --warn:      #A9660F;
  --warn-wash: #F8EFE0;
  --bad:       #AC3226;
  --bad-wash:  #F9E7E4;

  --gold:      #E8A33D;    /* LE seul accessoire : badge d'économie */
  --gold-wash: #FDF3E2;

  --r:    10px;
  --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(20,26,46,.05), 0 2px 8px -4px rgba(20,26,46,.10);
  --shadow:    0 2px 4px rgba(20,26,46,.05), 0 12px 32px -12px rgba(20,26,46,.18);
  --shadow-lg: 0 4px 8px rgba(20,26,46,.06), 0 32px 64px -24px rgba(20,26,46,.28);

  --display: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --wrap: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 760px; }

/* ── Typographie ──────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(40px, 6vw, 68px); line-height: 1.02; }
h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }

.eyebrow {
  font-family: var(--display); font-weight: 600; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  display: block; margin-bottom: 14px;
}
.eyebrow--on-field { color: var(--on-field-dim); }
.lede { font-size: 18.5px; line-height: 1.62; color: var(--ink-soft); max-width: 56ch; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── En-tête ──────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,250,248,.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.wordmark {
  font-family: var(--display); font-weight: 700; font-size: 23px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
}
.wordmark:hover { text-decoration: none; }
.wordmark em { font-style: normal; color: var(--accent); }
.wordmark--light { color: #fff; }
.wordmark--light em { color: #A99BFF; }
.site-nav { display: flex; align-items: center; gap: 28px; font-size: 15.5px; }
/* `:not(.btn)` est indispensable : sans lui, `.site-nav a` (0,1,1) l'emporte
   sur `.btn--primary` (0,1,0) et repeint le bouton d'appel en gris. */
.site-nav a:not(.btn) { color: var(--ink-soft); font-weight: 500; }
.site-nav a:not(.btn):hover { color: var(--ink); text-decoration: none; }
.nav-toggle { display: none; }

/* ── Boutons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--r); border: 1.5px solid transparent;
  font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
  text-decoration: none; white-space: nowrap; line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn--ghost:hover { border-color: var(--ink-faint); }
.btn--on-field { background: #fff; color: var(--field); }
.btn--on-field:hover { background: var(--on-field); }
.btn--ghost-field { border-color: var(--field-line); color: var(--on-field); background: transparent; }
.btn--ghost-field:hover { background: var(--field-soft); }
.btn--lg { padding: 16px 30px; font-size: 16.5px; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Champ indigo ─────────────────────────────────────────────────── */
.field-band { background: var(--field); color: var(--on-field); }
.field-band h1, .field-band h2, .field-band h3 { color: #fff; }
.field-band .lede { color: var(--on-field-dim); }

/* ── HÉROS ────────────────────────────────────────────────────────── */
.hero { padding: 84px 0 96px; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0,1fr) 448px; gap: 64px; align-items: center; }
.hero h1 em { font-style: normal; color: #A99BFF; }
.hero .btn-row { margin-top: 34px; }
.hero__note { margin-top: 20px; font-size: 14.5px; color: var(--on-field-dim); }

/* ── SIGNATURE : la fiche ─────────────────────────────────────────── */
/* Un enregistrement nommé, pas une capture d'écran. C'est ce qu'un
   dirigeant reconnaît : un document qui porte SON nom. */
.record {
  background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; color: var(--ink);
}
.record__head {
  padding: 14px 22px; background: var(--paper-sunk);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.record__kind {
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
}
.record__ref { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }
.record__body { padding: 24px 22px 22px; }
.record__name {
  font-family: var(--display); font-size: 25px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.15;
}
.record__sub { font-size: 14px; color: var(--ink-faint); margin-top: 3px; }
.record__rows { margin-top: 20px; border-top: 1px solid var(--line-soft); }
.record__row {
  display: grid; grid-template-columns: 104px minmax(0,1fr);
  gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px; align-items: center;
}
.record__row:last-child { border-bottom: 0; }
.record__k { color: var(--ink-faint); font-size: 13px; }
.record__v { font-weight: 500; }
.record__v .num { font-size: 14px; }

/* Barre de stockage : la même métrique que le portail client. */
/* `display: block` obligatoire : la jauge est un <span> dans une ligne de
   texte, et la hauteur ne s'applique pas à un élément inline. */
.meter-bar {
  display: block; height: 7px; border-radius: 4px;
  background: var(--line); overflow: hidden; margin-top: 7px;
}
.meter-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.meter-bar--warn > span { background: var(--warn); }
.meter-bar--bad  > span { background: var(--bad); }

.dot { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.dot--ok    { color: var(--ok); }
.dot--warn  { color: var(--warn); }
.dot--bad   { color: var(--bad); }
.dot--busy  { color: var(--accent); }
.dot--muted { color: var(--ink-faint); }

/* Révélation à l'ouverture : une ligne après l'autre, comme un document
   qu'on remplit. Le seul moment orchestré de la page. */
/* La révélation ne joue QUE sur la position, jamais sur l'opacité : une
   animation qui ne se déclenche pas — capture d'écran, rendu lent, moteur
   exotique — laisserait sinon une fiche vide. Le contenu est lisible d'abord,
   animé ensuite. */
@media (prefers-reduced-motion: no-preference) {
  .record__row { animation: rowIn .45s cubic-bezier(.22,.8,.3,1) backwards; }
  .record__row:nth-child(1) { animation-delay: .06s; }
  .record__row:nth-child(2) { animation-delay: .12s; }
  .record__row:nth-child(3) { animation-delay: .18s; }
  .record__row:nth-child(4) { animation-delay: .24s; }
  .record__row:nth-child(5) { animation-delay: .30s; }
  @keyframes rowIn { from { transform: translateY(8px); } to { transform: none; } }
}

/* ── Sections ─────────────────────────────────────────────────────── */
.section { padding: 88px 0; }
.section--sunk { background: var(--paper-sunk); }
.section__head { max-width: 62ch; margin-bottom: 44px; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px,1fr)); gap: 20px; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover { border-color: #CFCCC4; box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.card h3 { margin-bottom: 9px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.card__mark {
  width: 38px; height: 38px; border-radius: 9px; margin-bottom: 16px;
  background: var(--accent-wash); color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 17px;
}

/* Étapes : une VRAIE séquence, la numérotation porte donc une information. */
.steps-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 28px; counter-reset: s; }
.step { counter-increment: s; }
.step::before {
  content: counter(s); display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--field); color: #fff;
  font-family: var(--mono); font-size: 14px; margin-bottom: 14px;
}
.step h3 { font-size: 17.5px; margin-bottom: 7px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }

/* ── TARIFS ───────────────────────────────────────────────────────── */
.cycle-switch {
  display: inline-flex; padding: 5px; gap: 4px;
  background: var(--paper-sunk); border: 1px solid var(--line); border-radius: 999px;
  flex-wrap: wrap; justify-content: center;
}
.cycle-switch button {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s ease, color .15s ease;
}
.cycle-switch button:hover { color: var(--ink); }
.cycle-switch button[aria-pressed="true"] { background: var(--field); color: #fff; }

/* LE seul accessoire de la page. */
.save-chip {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: var(--gold-wash); color: #8A5B0B; border: 1px solid #EBD3A4;
}
.cycle-switch button[aria-pressed="true"] .save-chip {
  background: var(--gold); color: #3A2603; border-color: var(--gold);
}
@media (prefers-reduced-motion: no-preference) {
  .save-chip { animation: chipIn .3s cubic-bezier(.22,.8,.3,1) both; }
  @keyframes chipIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
}

.price-card {
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); padding: 34px; box-shadow: var(--shadow);
  max-width: 560px; margin: 0 auto;
}
.price-card__amount {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(44px, 6vw, 62px); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.price-card__unit { font-size: 16px; font-weight: 500; color: var(--ink-faint); font-family: var(--body); letter-spacing: 0; }
.price-card__meta { margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); min-height: 22px; }
.price-card__meta strong { color: var(--ok); }
.included { list-style: none; margin: 26px 0 0; padding: 0; }
.included li {
  display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px;
  padding: 8px 0; font-size: 15px; align-items: start;
}
.included li::before { content: "✓"; color: var(--ok); font-weight: 700; line-height: 1.5; }
.included li strong { font-weight: 600; }

.pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; margin-top: 22px; }
.pack {
  border: 1px solid var(--line); border-radius: var(--r); padding: 18px;
  background: var(--card); text-align: center;
}
.pack__size { font-family: var(--display); font-size: 21px; font-weight: 700; }
.pack__price { font-family: var(--mono); font-size: 14px; color: var(--ink-soft); margin-top: 5px; }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 20px 0; font-weight: 600; font-size: 17px;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--ink-faint); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 20px; color: var(--ink-soft); font-size: 15.5px; max-width: 64ch; }

/* ── Pied de page ─────────────────────────────────────────────────── */
.site-foot { background: var(--field); color: var(--on-field-dim); padding: 60px 0 34px; font-size: 14.5px; }
.site-foot a:not(.btn) { color: var(--on-field-dim); }
.site-foot a:not(.btn):hover { color: #fff; }
.site-foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; }
.site-foot h4 {
  font-family: var(--display); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; margin: 0 0 14px; font-weight: 600;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { padding: 5px 0; }
.site-foot__bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--field-line);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13.5px;
}

/* ── Formulaires ──────────────────────────────────────────────────── */
.form-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px; box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 20px; }
.field > label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.field .hint { font-size: 13.5px; color: var(--ink-faint); margin: 6px 0 0; }
.field .err { font-size: 13.5px; color: var(--bad); margin: 6px 0 0; font-weight: 500; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], select, textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15.5px;
  border: 1.5px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--ink); transition: border-color .15s ease;
}
input:hover, select:hover { border-color: #CFCCC4; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline-offset: 1px; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--bad); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.check input { margin-top: 4px; width: auto; }

/* ── Fil d'étapes ─────────────────────────────────────────────────── */
.stepline { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 32px; font-size: 13px; }
.stepline span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; background: var(--paper-sunk); color: var(--ink-faint);
}
.stepline span.done { background: var(--ok-wash); color: var(--ok); }
.stepline span.now  { background: var(--field); color: #fff; font-weight: 600; }

/* ── Messages ─────────────────────────────────────────────────────── */
.note { padding: 15px 18px; border-radius: var(--r); border: 1px solid; font-size: 15px; }
.note--ok   { background: var(--ok-wash);     border-color: #C3E0D5; color: #0B5A42; }
.note--warn { background: var(--warn-wash);   border-color: #E8D3AC; color: #7A4909; }
.note--bad  { background: var(--bad-wash);    border-color: #EDC6C0; color: #8A281E; }
.note--info { background: var(--accent-wash); border-color: #D2CDF6; color: #2E2582; }
.note strong { font-weight: 700; }
.note ul { margin: 8px 0 0; padding-left: 20px; }
.note + .note { margin-top: 12px; }

/* ── Tableaux (portail) ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th {
  text-align: left; padding: 13px 16px; background: var(--paper-sunk);
  border-bottom: 1px solid var(--line);
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
table.data td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
table.data tbody tr:last-child td { border-bottom: 0; }
.empty { padding: 44px 20px; text-align: center; color: var(--ink-soft); }
.empty p { margin: 0 0 14px; }

.dl { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 10px 18px; font-size: 15px; }
.dl dt { color: var(--ink-faint); font-size: 14px; }
.dl dd { margin: 0; word-break: break-word; }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: var(--paper-sunk); color: var(--ink-soft); border: 1px solid var(--line);
}
.tag--ok   { background: var(--ok-wash);     color: var(--ok);     border-color: #C3E0D5; }
.tag--warn { background: var(--warn-wash);   color: var(--warn);   border-color: #E8D3AC; }
.tag--bad  { background: var(--bad-wash);    color: var(--bad);    border-color: #EDC6C0; }
.tag--busy { background: var(--accent-wash); color: var(--accent); border-color: #D2CDF6; }

.stack > * + * { margin-top: 22px; }
.muted { color: var(--ink-faint); }
.small { font-size: 14px; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ── PORTAIL CLIENT ───────────────────────────────────────────────── */
/* Même monde visuel que le marketing : le client ne change pas d'univers
   entre le site qui l'a convaincu et l'espace qu'il utilise. */
.portal { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }
.portal-head { background: var(--field); color: var(--on-field); }
.portal-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 66px; }
.portal-nav { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.portal-nav .wrap { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.portal-nav a:not(.btn) {
  padding: 15px 15px; font-size: 15px; font-weight: 500; color: var(--ink-soft);
  border-bottom: 2.5px solid transparent; white-space: nowrap;
}
.portal-nav a:hover { color: var(--ink); text-decoration: none; }
.portal-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.portal-main { flex: 1; padding: 36px 0 64px; }
.portal-user { font-size: 14px; color: var(--on-field-dim); text-align: right; }
.portal-user strong { display: block; color: #fff; font-weight: 600; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel__head {
  padding: 18px 24px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.panel__head h2 { font-size: 18px; letter-spacing: -.005em; }
.panel__body { padding: 24px; }
.panel__body > * + * { margin-top: 18px; }
.panel--flush .panel__body { padding: 0; }
.panel__foot { padding: 16px 24px; border-top: 1px solid var(--line-soft); background: var(--paper-sunk);
  border-radius: 0 0 var(--r-lg) var(--r-lg); font-size: 14px; color: var(--ink-soft); }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--sidebar { grid-template-columns: minmax(0,1fr) 340px; align-items: start; }

.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; }
.kpi__v { font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.kpi__k { font-size: 13.5px; color: var(--ink-faint); margin-top: 5px; }
.kpi__sub { font-size: 13.5px; color: var(--ink-soft); margin-top: 9px; }

.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: clamp(27px, 3.4vw, 34px); }
.page-head p { color: var(--ink-soft); margin: 8px 0 0; max-width: 68ch; }

/* ── Adaptatif ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero { padding: 56px 0 68px; }
  .hero__grid { grid-template-columns: minmax(0,1fr); gap: 44px; }
  .site-foot__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .grid--2, .grid--3, .grid--sidebar { grid-template-columns: minmax(0,1fr); }
  .section { padding: 64px 0; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .site-nav { display: none; }
  .site-nav--mobile { display: flex; }
  .field-row { grid-template-columns: minmax(0,1fr); }
  .site-foot__grid { grid-template-columns: minmax(0,1fr); }
  .dl { grid-template-columns: minmax(0,1fr); gap: 2px 0; }
  .dl dt { margin-top: 12px; }
  .price-card { padding: 24px; }
  .btn--lg { width: 100%; }
  .cycle-switch { width: 100%; }
  .cycle-switch button { flex: 1; justify-content: center; padding: 10px 10px; font-size: 13.5px; }
  .record__row { grid-template-columns: 92px minmax(0,1fr); gap: 10px; }
}