/* ===== 00-fonts ===== */
/* Polices auto-hébergées — aucune requête vers Google.
   Généré par tools/fetch-fonts.py, ne pas éditer à la main. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/PlusJakartaSans-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/PlusJakartaSans-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/PlusJakartaSans-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/PlusJakartaSans-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/PlusJakartaSans-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Inter-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Inter-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Inter-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Inter-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/PlayfairDisplay-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/PlayfairDisplay-500-italic.woff2') format('woff2');
}

/* ===== 00-tokens ===== */
/* ============================================================
   DigitalAM — Design tokens
   Extraits mesurés sur la référence (viewport 1440, DPR 2)
   ============================================================ */

:root {
  /* ---- Couleurs ---- */
  --bg:            #FAFAFA;   /* canvas global */
  --bg-white:      #FFFFFF;   /* sections blanches */
  --bg-grey:       #F3F4F6;   /* section FAQ */
  --ink:           #0D0D0D;   /* texte principal */
  --ink-60:        rgba(13, 13, 13, .6);
  /* .4 donnait 2,35:1 sur le fond #FAFAFA — très en dessous du seuil AA de
     4,5:1, et ce token sert à ~27 endroits (légendes, surtitres, méta).
     .58 est le point où le ratio repasse au-dessus de 4,5:1. */
  --ink-40:        rgba(13, 13, 13, .58);
  /* variante réservée aux usages NON textuels (filets, séparateurs, filigranes) */
  --ink-deco:      rgba(13, 13, 13, .4);
  --ink-12:        rgba(13, 13, 13, .12);
  --ink-08:        rgba(13, 13, 13, .08);

  --dark:          #0D0D0D;   /* sections sombres */
  --dark-2:        #0A0A0A;   /* footer */
  --on-dark:       #FFFFFF;
  --on-dark-75:    rgba(255, 255, 255, .75);
  --on-dark-55:    rgba(255, 255, 255, .55);
  --on-dark-40:    rgba(255, 255, 255, .40);
  --on-dark-08:    rgba(255, 255, 255, .08);
  --on-dark-06:    rgba(255, 255, 255, .06);

  --accent:        #1E466B;   /* navy — CTA, bandeau final */
  --accent-10:     rgba(30, 70, 107, .10);
  --accent-soft:   #67BAF4;   /* bleu clair — chiffres sur fond sombre */

  /* ---- Typo ---- */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-serif:   "Playfair Display", Georgia, serif;

  /* Échelle FLUIDE, relevée sur la référence à 1440/1200/1024/860/600/390.
     La réf ne fait pas de paliers : chaque niveau suit un ratio vw constant,
     borné par un plancher et un plafond. Les plafonds reproduisent
     exactement les valeurs mesurées à 1440. */
  --fs-h1:      clamp(40px,   6vw,   86.4px);  --lh-h1: .95;  --ls-h1: -.04em;
  --fs-h2:      clamp(35.2px, 4.5vw, 64px);    --lh-h2: 1;    --ls-h2: -.04em;
  --fs-h3:      clamp(25.6px, 3vw,   43.2px);  --lh-h3: 1.1;  --ls-h3: -.025em;
  --fs-h4:      clamp(21px,   1.95vw, 28px);   --lh-h4: 1.2;  --ls-h4: -.02em;
  --fs-body:    clamp(15px,   1.4vw,  18px);   --lh-body: 1.7;
  --fs-sm:      clamp(14px,   1.11vw, 16px);   --lh-sm: 1.6;
  --fs-xs:      14px;
  --fs-eyebrow: 12px;    --ls-eyebrow: .18em;

  /* ---- Layout ---- */
  /* Colonne de lecture unique, partagée par TOUS les blocs de texte (titre de
     page, chapô de section, corps, encadrés, FAQ). C'est ce qui manquait : le
     hero faisait 46rem, les chapôs occupaient tout le conteneur et le corps
     38rem — trois largeurs, donc trois bords gauches différents en descendant
     la page. 42rem donne ~73 caractères par ligne, dans la fourchette de
     confort (60-75) que documente déjà page-base.css.
     Les grilles et les carrousels, eux, gardent toute la largeur du conteneur. */
  --reading: 42rem;

  --container:   1136px;  /* conteneur principal mesuré */
  --container-w: 1280px;  /* conteneur large */
  --gutter:      24px;
  --sec-pad-y:   120px;   /* rythme vertical des sections */
  --sec-pad-y-sm: 80px;

  /* ---- Formes ---- */
  --r-pill:  100px;
  --r-xl:    40px;
  --r-lg:    32px;
  --r-md:    16px;
  --r-sm:    12px;

  /* ---- Ombres ---- */
  --sh-card:  0 2px 12px rgba(0, 0, 0, .07);
  --sh-lift:  0 24px 60px rgba(0, 0, 0, .22), 0 4px 16px rgba(0, 0, 0, .10);
  --sh-deep:  0 30px 60px -20px rgba(0, 0, 0, .45), 0 12px 24px -8px rgba(0, 0, 0, .25);
  --sh-dark:  0 8px 24px -6px rgba(0, 0, 0, .40);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur:  .7s;
}

/* Seule exception à la fluidité : la référence tient 6vw jusqu'à 1024px puis
   bascule H1 à 40px fixes (mesuré identique à 860, 600 et 390). Les autres
   niveaux restent fluides sur toute la plage — ils n'ont pas de rupture. */
@media (max-width: 1023px) {
  :root { --fs-h1: 40px; }
}

/* Le reste des paliers ne concerne plus que la MISE EN PAGE. */
@media (max-width: 860px) {
  :root {
    --sec-pad-y-sm: 56px;
    --gutter: 20px;
  }
}

/* ===== 01-base ===== */
/* ============================================================
   DigitalAM — Base & primitives partagées
   Toutes les sections s'appuient sur ces classes.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------------- Focus visible (global) ----------------
   Aucune règle globale n'existait : le seul focus visible du site était
   posé au cas par cas sur une carte du blog. Tout élément interactif doit
   avoir un indicateur net au clavier, sur fond clair comme sur fond sombre. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.section--accent :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
footer :where(a, button, [tabindex]):focus-visible {
  outline-color: var(--accent-soft);
}
/* on ne retire jamais l'outline sans le remplacer */
:focus:not(:focus-visible) { outline: none; }

/* ---------------- Lien d'évitement ---------------- */
.skip-link {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  z-index: 300;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------------- Layout ---------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-w); }

.section {
  position: relative;
  padding-block: var(--sec-pad-y);
}
.section--dark  { background: var(--dark); color: var(--on-dark); }
.section--white { background: var(--bg-white); }
.section--grey  { background: var(--bg-grey); }
.section--accent{ background: var(--accent); color: var(--on-dark); }

/* ---------------- Typo ---------------- */

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 800; }

.h1 {
  font-size: var(--fs-h1); font-weight: 900;
  line-height: var(--lh-h1); letter-spacing: var(--ls-h1);
}
.h2 {
  font-size: var(--fs-h2); font-weight: 800;
  line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
}
.h3 {
  font-size: var(--fs-h3); font-weight: 800;
  line-height: var(--lh-h3); letter-spacing: var(--ls-h3);
}
.h4 {
  font-size: var(--fs-h4); font-weight: 800;
  line-height: var(--lh-h4); letter-spacing: var(--ls-h4);
}

/* mot d'accent en serif italique — signature typographique de la maquette */
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--accent);
}
.section--dark .serif,
.section--accent .serif { color: var(--accent-soft); }

.lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-60);
  max-width: 46ch;
  margin: 0;
}
.section--dark .lead,
.section--accent .lead { color: var(--on-dark-55); }

/* surtitre : ligne + label espacé */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--rule::before {
  content: ""; width: 28px; height: 2px; background: currentColor; border-radius: 2px;
}
.eyebrow--pill {
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--accent-10); color: var(--accent);
}
.eyebrow--pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
/* on-dark-40 = 3.8:1 sur fond sombre, sous le seuil AA 4.5:1 pour ce texte
   12px (--fs-eyebrow) — même mesure et même correctif que 40-work.css,
   50-process.css, 30-services.css et 95-footer.css, qui surchargeaient déjà
   ce cas au niveau du composant sans corriger la règle de base : la page
   « agence-web-<ville> » compose un .section--dark générique sans passer
   par .work, donc héritait encore du ratio insuffisant. */
.section--dark .eyebrow { color: var(--on-dark-55); }
.section--accent .eyebrow { color: var(--accent-soft); }

/* ---------------- Boutons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 32px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  white-space: nowrap;
  transition: transform .3s var(--ease), background-color .3s var(--ease),
              color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--sh-dark); }
.btn--primary:hover { background: #16375A; box-shadow: 0 12px 28px -6px rgba(30,70,107,.5); }

.btn--ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-12);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.btn--light { background: #fff; color: var(--accent); }
.btn--light:hover { background: #fff; box-shadow: 0 12px 28px -6px rgba(0,0,0,.25); }

.btn--soft {
  background: var(--accent-soft); color: var(--dark);
  box-shadow: 0 0 40px rgba(103,186,244,.35);
}
.btn--sm { padding: 13px 24px; font-size: var(--fs-xs); }

/* ---------------- Chips / tags ---------------- */

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: var(--ink-08);
  font-size: var(--fs-xs); font-weight: 500; line-height: 1;
  color: var(--ink);
}
.section--dark .chip,
.card--dark .chip { background: var(--on-dark-08); color: var(--on-dark-75); }

/* ---------------- Cartes ---------------- */

.card {
  position: relative;
  border-radius: var(--r-xl);
  background: #EEF3F9;
  padding: 40px;
  overflow: hidden;
}
.card--dark { background: var(--dark); color: var(--on-dark); }
.card--white { background: #fff; box-shadow: var(--sh-card); }

/* ---------------- Header ---------------- */

.site-header {
  position: fixed; inset-block-start: 16px; inset-inline: 0;
  z-index: 100;
  display: flex; justify-content: center;
  pointer-events: none;
}
.site-header__inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 40px;
  /* Calé sur --container (1136px), comme TOUTES les sections. Avec
     --container-w (1280px), la pastille de navigation dépassait de 48px
     de chaque côté des bords du contenu sur tout écran ≥ 1280px : mesuré
     à 1440px, header à 104px de marge contre 152px pour les sections. */
  width: min(var(--container) - 2 * var(--gutter), 100% - 2 * var(--gutter));
  padding: 12px 12px 12px 28px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--sh-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header__nav { display: flex; align-items: center; gap: 32px; margin-inline-start: auto; }
.site-header__nav a { font-size: var(--fs-sm); color: var(--ink); opacity: .85; transition: opacity .25s; }
.site-header__nav a:hover { opacity: 1; }

/* ---------------- Reveals ---------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------------- Utilitaires ---------------- */

.stack       { display: grid; gap: 24px; }
.stack--sm   { gap: 12px; }
.stack--lg   { gap: 40px; }
.center      { text-align: center; }
.center .lead { margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* en-tête de section réutilisable */
.sec-head {
  display: grid; gap: 20px; margin-block-end: 64px;
  max-width: var(--reading); margin-inline: auto;
}
.sec-head .h2 { max-width: 18ch; }
.sec-head--center { justify-items: center; text-align: center; }
.sec-head--center .h2 { max-width: 22ch; }

/* ===== 00-header ===== */
/* ============================================================
   DigitalAM — Header
   .site-header / .site-header__inner / .site-header__nav sont déjà
   définis (layout + comportement) dans 01-base.css et le hide-on-scroll
   vit dans js/00-core.js. Ici : wordmark, CTA, burger et panneau mobile.
   Classes propres préfixées `header-`.
   ============================================================ */

/* .skip-link (markup ajouté ici dans le header) est stylé globalement par
   01-base.css — pas de redéfinition ici pour éviter toute règle dupliquée. */

/* ---------------- Wordmark (lockup typographique) ---------------- */

.header-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  flex: none;
  /* Le bloc de marque ne fait que la hauteur de son texte : sous le seuil de
     24 px de WCAG 2.5.8 quand la baseline passe en une seule ligne. */
  min-height: 32px;
}
.header-brand__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.header-brand__accent { color: var(--accent); }
.header-brand__tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .01em;
  color: var(--ink-60);
}

/* ---------------- Nav desktop ---------------- */

.site-header__nav { flex-wrap: nowrap; }

/* ---------------- CTA desktop ---------------- */

.header-cta { flex: none; }

/* ---------------- Burger (mobile) ---------------- */

.header-burger {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  border-radius: 50%;
  flex: none;
  transition: background-color .25s var(--ease);
}
.header-burger:hover { background: var(--ink-08); }
.header-burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.header-burger__line {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.header-burger[aria-expanded="true"] .header-burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-burger[aria-expanded="true"] .header-burger__line:nth-child(2) { opacity: 0; }
.header-burger[aria-expanded="true"] .header-burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------- Panneau mobile ---------------- */

html.is-header-locked { overflow: hidden; }

.header-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.header-panel.is-open { visibility: visible; pointer-events: auto; }

.header-panel__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 13, 13, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.header-panel.is-open .header-panel__backdrop { opacity: 1; }

.header-panel__sheet {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(86vw, 380px);
  max-width: 100%;
  background: var(--bg);
  box-shadow: var(--sh-lift);
  display: flex;
  flex-direction: column;
  padding: 20px 28px 32px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .5s var(--ease);
}
.header-panel.is-open .header-panel__sheet { transform: translateX(0); }

.header-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-block-end: 48px;
}

.header-panel__close {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  transition: background-color .25s var(--ease);
}
.header-panel__close:hover { background: var(--ink-08); }
.header-panel__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.header-panel__close::before,
.header-panel__close::after {
  content: "";
  position: absolute;
  inset-inline-start: 13px;
  inset-block-start: 21px;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}
.header-panel__close::before { transform: rotate(45deg); }
.header-panel__close::after { transform: rotate(-45deg); }

.header-panel__nav {
  display: grid;
  gap: 4px;
  margin-block-end: auto;
}
.header-panel__nav a {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.01em;
  color: var(--ink);
  padding-block: 14px;
  border-block-end: 1px solid var(--ink-08);
}
.header-panel__nav a:last-child { border-block-end: 0; }

.header-panel__footer {
  display: grid;
  gap: 16px;
  padding-block-start: 32px;
}
.header-panel__cta { width: 100%; }
.header-panel__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--ink);
}

/* ---------------- Responsive ---------------- */

@media (max-width: 860px) {
  .site-header__nav,
  .header-cta { display: none; }
  .header-burger { display: flex; }
}

@media (max-width: 480px) {
  .header-brand__tag { display: none; }
  .header-panel__sheet { padding: 18px 22px 26px; }
  .header-panel__nav a { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .header-panel__sheet,
  .header-panel__backdrop,
  .header-burger__line { transition: none !important; }
}

/* ============================================================
   Menu déroulant Services — la nav pointait vers des ancres,
   donc les 6 pages services étaient inatteignables depuis l'UI.
   ============================================================ */

.header-drop { position: relative; }

.header-drop__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink);
  opacity: .85;
  transition: opacity .25s;
}
.header-drop__btn:hover,
.header-drop__btn[aria-expanded="true"] { opacity: 1; }

.header-drop__chevron {
  width: 8px; height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s var(--ease);
}
.header-drop__btn[aria-expanded="true"] .header-drop__chevron {
  transform: translateY(1px) rotate(-135deg);
}

.header-drop__menu {
  /* Sans limite, chaque entrée ajoutée allongeait le menu indéfiniment : il
     était passé de 6 à 8 entrées sans que rien ne le signale. */
  max-height: min(70vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  position: absolute;
  inset-block-start: calc(100% + 18px);
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 10;
  display: grid;
  gap: 2px;
  width: min(340px, calc(100vw - 32px));
  padding: 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .06);
  animation: dropIn .25s var(--ease);
}
.header-drop__menu[hidden] { display: none; }

@keyframes dropIn {
  from { opacity: 0; translate: -50% -8px; }
  to   { opacity: 1; translate: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .header-drop__menu { animation: none; }
}

.header-drop__menu a {
  display: grid;
  gap: 2px;
  padding: 11px 14px;
  border-radius: 13px;
  transition: background-color .2s var(--ease);
}
.header-drop__menu a:hover { background: rgba(30, 70, 107, .07); }

.header-drop__title {
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.header-drop__sub {
  font-size: 12px; color: var(--ink-60); line-height: 1.35;
}

/* ---- Sous-liste Services du panneau mobile ---- */

.header-panel__label {
  margin: 22px 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.header-panel__sub {
  display: grid;
  gap: 2px;
  margin: 0 0 8px;
  padding: 0 0 0 14px;
  border-inline-start: 2px solid var(--ink-12);
  list-style: none;
}
.header-panel__sub a {
  display: block;
  padding: 10px 0;
  font-size: 16px;
  color: var(--ink-60);
}
.header-panel__sub a:hover { color: var(--accent); }

/* ===== 95-footer ===== */
/* ============================================================
   DigitalAM — Section 95 · Footer
   Fond --dark-2, wordmark + réseaux + colonnes de liens + barre légale.
   Classes propres préfixées `footer-`.
   ============================================================ */

.footer {
  position: relative;
  overflow: hidden;
  padding-block: 48px 0;
  background: var(--dark-2);
  color: var(--on-dark);
}

.footer__inner {
  position: relative;
  z-index: 1;
}

/* ---------------- Grille principale ---------------- */

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}

.footer__col-title {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-dark-55); /* on-dark-40 échouait à 3.77:1, sous le seuil AA 4.5:1 */
}

.footer__links {
  display: grid;
  gap: 12px;
}
.footer__links a {
  display: inline-flex;
  font-size: 15px;
  line-height: 1.4;
  color: var(--on-dark-75);
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.footer__links a:hover,
.footer__links a:focus-visible { color: var(--on-dark); transform: translateX(4px); }
.footer__links a:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 2px; }

/* ---------------- Colonne marque ---------------- */

.footer__logo {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.02em;
  color: var(--on-dark);
}
.footer__logo-accent { color: var(--accent-soft); }

.footer__tagline {
  margin: 16px 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-55);
}

.footer__socials {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--on-dark-08);
  color: var(--on-dark-75);
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.footer__social svg { width: 17px; height: 17px; }
.footer__social:hover,
.footer__social:focus-visible {
  background: rgba(255, 255, 255, .16);
  color: var(--on-dark);
  transform: translateY(-2px);
}
.footer__social:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }

/* ---------------- Colonne contact ---------------- */

.footer__col--contact .footer__links { margin-bottom: 20px; }

.footer__area {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--on-dark-55); /* on-dark-40 échouait à 3.77:1, sous le seuil AA 4.5:1 */
}

.footer__cta { align-self: start; }

/* ---------------- Séparateur + barre du bas ---------------- */

.footer__divider {
  margin-block: 40px 20px;
  height: 1px;
  background: var(--on-dark-08);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block-end: 24px;
}

.footer__copy {
  margin: 0;
  font-size: 13px;
  color: var(--on-dark-55); /* on-dark-40 échouait à 3.77:1, sous le seuil AA 4.5:1 */
}
.footer__copy-sep { margin-inline: 6px; }

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}
.footer__legal a {
  font-size: 13px;
  color: var(--on-dark-55); /* on-dark-40 échouait à 3.77:1, sous le seuil AA 4.5:1 */
  transition: color .25s var(--ease);
}
.footer__legal a:hover,
.footer__legal a:focus-visible { color: var(--on-dark); }
.footer__legal a:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 2px; }
.footer__legal-accent { color: var(--accent-soft) !important; }

/* ---------------- Filigrane ---------------- */

.footer__watermark {
  position: absolute;
  z-index: 0;
  inset-inline: 0;
  bottom: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 13vw, 180px);
  line-height: .8;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .06);
  transform: translateY(28%);
  user-select: none;
  pointer-events: none;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 48px;
  }
  .footer__col--brand { grid-column: 1 / -1; }
  .footer__tagline { max-width: 44ch; }
}

@media (max-width: 860px) {
  .footer { padding-block-start: 40px; }
  .footer__divider { margin-block: 36px 20px; }
}

@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .footer__col--brand { grid-column: auto; }
  .footer__tagline { max-width: none; }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .footer__copy { display: flex; flex-direction: column; gap: 4px; }
  .footer__copy-sep { display: none; }
  .footer__legal { justify-content: center; }

  .footer__watermark { font-size: clamp(44px, 22vw, 96px); transform: translateY(20%); }
}

@media (prefers-reduced-motion: reduce) {
  .footer__links a,
  .footer__social,
  .footer__legal a { transition: none !important; }
}

/* ===== whatsapp ===== */
/* ============================================================
   DigitalAM — Bulle WhatsApp flottante
   Présente sur toutes les pages (elle vit dans le pied de page partagé).
   Objectif : un contact en un geste, sans avoir à remonter chercher le
   numéro. Le vert est celui de la marque WhatsApp — c'est ce qui la rend
   identifiable au premier coup d'œil ; la charte du site ne s'applique
   pas ici, c'est un code d'interface universel.
   ============================================================ */

.wa-float {
  position: fixed;
  inset-block-end: clamp(16px, 2.4vw, 28px);
  inset-inline-end: clamp(16px, 2.4vw, 28px);
  z-index: 90;              /* sous le header (100) et le panneau mobile */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px 13px 15px;
  border-radius: var(--r-pill);
  background: #25D366;
  color: #0B3D26;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  /* Ombre portée teintée : sur fond blanc comme sur fond sombre, la bulle
     se détache sans halo gris qui ferait sale. */
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .55),
              0 2px 8px rgba(13, 13, 13, .12);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.wa-float:hover,
.wa-float:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -8px rgba(37, 211, 102, .65),
              0 3px 10px rgba(13, 13, 13, .16);
}

.wa-float svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}

/* Sous 560px le libellé disparaît : sur un écran étroit, une pastille ronde
   prend beaucoup moins de place devant le contenu, et l'icône WhatsApp se
   suffit à elle-même. La cible tactile reste à 56px, bien au-dessus du
   minimum de 24px de WCAG 2.5.8 et du confort tactile de 44px. */
@media (max-width: 560px) {
  .wa-float {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .wa-float__label { display: none; }
}

/* Le pied de page contient déjà un CTA « Audit offert » : la bulle passe
   au-dessus sans le masquer, on l'y aide en laissant respirer le bas de page. */
@media (max-width: 860px) {
  .site-footer { padding-block-end: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
  .wa-float:hover,
  .wa-float:focus-visible { transform: none; }
}

/* Impression : une bulle de contact flottante n'a aucun sens sur papier. */
@media print {
  .wa-float { display: none; }
}

/* ===== page-base ===== */
/* ============================================================
   Primitives partagées par TOUTES les pages internes
   (services, blog, à-propos, contact, légal).
   Les agents de page s'appuient dessus et n'en redéfinissent aucune.
   ============================================================ */

/* ---------------- En-tête de page ---------------- */

.page-hero {
  position: relative;
  padding-block: clamp(140px, 13vw, 200px) clamp(48px, 5vw, 72px);
  background:
    radial-gradient(60% 80% at 85% 10%, rgba(30, 70, 107, .07), transparent 70%),
    radial-gradient(50% 70% at 10% 90%, rgba(103, 186, 244, .10), transparent 70%),
    var(--bg);
  overflow: hidden;
}
/* margin-inline:auto centre le BLOC. Sans lui, le titre et le chapô restaient
   collés à gauche avec ~500px de vide à droite à 1440px, sur 186 des 188 pages.
   `--center` reste la seule variante qui centre aussi le TEXTE lui-même. */
.page-hero__inner { display: grid; gap: 22px; max-width: var(--reading); margin-inline: auto; }
.page-hero--center .page-hero__inner { text-align: center; justify-items: center; }
.page-hero .lead { max-width: 52ch; }

/* fil d'Ariane */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--ink-40);
}
/* Cible tactile : le texte seul mesurait ~23,5 px de haut, sous le seuil
   WCAG 2.5.8 (24 px). Le padding vertical élargit la zone cliquable sans
   modifier l'aspect du fil — les séparateurs restent alignés. */
.crumbs a {
  display: inline-block;
  padding-block: 4px;
  margin-block: -4px;   /* on ne pousse pas la ligne de base */
  color: var(--ink-60);
}
.crumbs a:hover { color: var(--accent); }
.crumbs li + li::before { content: "›"; margin-inline-end: 8px; color: var(--ink-12); }
/* list-style: none est indispensable — sans lui le <ol> affiche sa numérotation
   native et le fil devient « 1. Accueil › 2. Blog » sur toutes les pages. */
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0; padding: 0; list-style: none;
}
.crumbs li { display: flex; align-items: center; }

/* Blocs de texte posés directement dans .container par le générateur : sans
   cette règle, l'encadré « En bref », la liste à puces et la FAQ occupaient
   toute la largeur pendant que le chapô juste au-dessus était centré. */
.section > .container > .answer-box,
.section > .container > .check-list,
.section > .container > .faq-item {
  max-width: var(--reading);
  margin-inline: auto;
}

/* ---------------- Corps rédactionnel ---------------- */

.prose {
  /* 44rem donnait ~78 caractères par ligne ; 38rem cale sur ~66,
     dans la fourchette de confort de lecture (60-75). */
  /* `min(…, 100%)` et pas `var(--reading)` seul : le tableau des articles porte
     un `min-width: 32rem` (plus bas) pour rester lisible et défiler dans son
     `.table-wrap`. Sans ce plafond, cette largeur minimale remontait jusqu'à
     `.prose`, qui passait à 512px dans une fenêtre de 390 — et comme `body`
     masque le débordement horizontal, le texte des 16 articles à tableau était
     coupé à droite sans aucun moyen de le lire. Le plafond rend la colonne au
     conteneur ; c'est le `.table-wrap` qui défile, comme prévu. */
  max-width: min(var(--reading), 100%);
  margin-inline: auto;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: rgba(13, 13, 13, .78);
}
.prose > * + * { margin-block-start: 1.15em; }
.prose h2 {
  margin-block-start: 2.2em;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--ink);
}
.prose h3 {
  margin-block-start: 1.8em;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:not(.btn):hover { text-decoration-thickness: 2px; }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-block-start: .5em; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
  margin-inline: 0;
  padding: 20px 28px;
  border-inline-start: 3px solid var(--accent);
  background: rgba(30, 70, 107, .04);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic;
  color: var(--ink);
}
.prose figure { margin-inline: 0; }
.prose figcaption {
  margin-block-start: 10px;
  font-size: var(--fs-xs);
  color: var(--ink-40);
}

/* .prose fixe une encre sombre : sur fond sombre, tout devient illisible.
   On rebascule l'ensemble de la prose (titres, liens, listes, citations,
   tableaux) dès qu'elle est posée dans une section sombre ou accent. */
.section--dark .prose,
.section--accent .prose,
.feat--dark .prose { color: var(--on-dark-75); }

.section--dark .prose h2, .section--dark .prose h3, .section--dark .prose strong,
.section--accent .prose h2, .section--accent .prose h3, .section--accent .prose strong {
  color: var(--on-dark);
}
.section--dark .prose a:not(.btn),
.section--accent .prose a:not(.btn) { color: var(--accent-soft); }
.section--dark .prose li::marker,
.section--accent .prose li::marker { color: var(--accent-soft); }
.section--dark .prose blockquote,
.section--accent .prose blockquote {
  border-inline-start-color: var(--accent-soft);
  background: rgba(255, 255, 255, .06);
  color: var(--on-dark);
}
.section--dark .prose th, .section--accent .prose th {
  color: var(--on-dark);
  background: rgba(255, 255, 255, .06);
}
.section--dark .prose th, .section--dark .prose td,
.section--accent .prose th, .section--accent .prose td {
  border-block-end-color: var(--on-dark-08);
}
.section--dark .answer-box,
.section--accent .answer-box {
  background: rgba(255, 255, 255, .06);
  border-inline-start-color: var(--accent-soft);
  color: var(--on-dark);
}
.section--dark .toc, .section--accent .toc { background: rgba(255, 255, 255, .06); }
.section--dark .toc a, .section--accent .toc a { color: var(--on-dark-75); }
.section--dark .toc a:hover, .section--accent .toc a:hover { color: var(--accent-soft); }
.section--dark .toc a::before, .section--accent .toc a::before { color: var(--accent-soft); }

/* réponse courte mise en avant — bloc à privilégier juste sous un H2 */
.answer-box {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-md);
  background: #EEF3F9;
  border-inline-start: 3px solid var(--accent);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--ink);
}

/* tableau lisible, scrollable sur mobile */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.prose th, .prose td {
  padding: 14px 16px;
  text-align: left;
  border-block-end: 1px solid var(--ink-12);
}
.prose th {
  font-weight: 700;
  color: var(--ink);
  background: rgba(13, 13, 13, .03);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ---------------- Mise en page 2 colonnes (contenu + aside) ---------------- */

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 72px);
  padding-block: clamp(48px, 5vw, 72px) clamp(72px, 8vw, 112px);
}
/* Le `minmax(0, 1fr)` ci-dessus protège la PISTE, pas l'ENFANT : un enfant de
   grille garde `min-width: auto`, donc sa largeur minimale reste celle de son
   contenu le plus large. Le tableau des articles (`min-width: 32rem` plus bas)
   poussait ainsi `.prose` à 512px dans une fenêtre de 390 — et comme `body`
   masque le débordement horizontal, le texte des 16 articles à tableau était
   purement coupé à droite, sans scroll possible. `.table-wrap` sait déjà
   défiler : il suffit que la colonne cesse de s'élargir pour lui. */
.page-layout > * { min-width: 0; }
@media (min-width: 1080px) {
  .page-layout--aside { grid-template-columns: minmax(0, 1fr) 320px; }
}
.page-aside { display: grid; gap: 20px; align-content: start; }
@media (min-width: 1080px) {
  .page-aside--sticky { position: sticky; top: 108px; }
}

.aside-card {
  padding: 28px;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-card);
}
.aside-card--accent { background: var(--accent); color: #fff; }
.aside-card--accent .lead { color: rgba(255, 255, 255, .72); }
.aside-card__title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; line-height: 1.25;
  letter-spacing: -.02em;
}

/* ---------------- Blocs de contenu réutilisables ---------------- */

/* grille de « cartes fonctionnalité » */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 1.6vw, 22px);
}
.feat {
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: var(--r-lg);
  background: #EEF3F9;
}
.feat--dark { background: var(--dark); color: var(--on-dark); }
.feat__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-block-end: 18px;
  border-radius: 13px;
  background: var(--ink-08);
  color: var(--accent);
}
.feat--dark .feat__icon { background: var(--on-dark-08); color: var(--accent-soft); }
.feat__icon svg { width: 22px; height: 22px; }
.feat__title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  margin-block-end: 8px;
}
.feat__text { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-60); margin: 0; }
.feat--dark .feat__text { color: var(--on-dark-55); }

/* liste « ce qui est inclus » */
.check-list { display: grid; gap: 14px; }
/* La <li> ne doit PAS être un conteneur flex/grid : chaque nœud de texte
   autour d'un lien inline deviendrait un item séparé et la phrase se
   casserait en colonnes. On garde un flux inline normal et on place la
   puce en absolu. */
.check-list li {
  position: relative;
  padding-inline-start: 32px;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.check-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .18em;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--dark .check-list li::before,
.section--accent .check-list li::before,
.page-cta .check-list li::before { background-color: var(--accent-soft); }

/* bande de rappel CTA en fin de page */
/* .page-cta pose un fond accent mais n'est PAS .section--accent : sans ces
   surcharges, tous les éléments calés sur fond clair (surtitre navy, mot
   d'accent, prose, liens) restent sombres sur sombre. Le surtitre était
   littéralement invisible en bas des 18 pages internes. */
.page-cta {
  padding-block: clamp(56px, 6vw, 88px);
  background: var(--accent);
  color: #fff;
  text-align: center;
}
.page-cta__inner { display: grid; gap: 20px; justify-items: center; max-width: 42rem; margin-inline: auto; }
.page-cta .lead { color: rgba(255, 255, 255, .72); }
.page-cta .eyebrow { color: var(--accent-soft); }
.page-cta .eyebrow--pill { background: rgba(255, 255, 255, .12); color: #fff; }
.page-cta .serif { color: var(--accent-soft); }
.page-cta h2, .page-cta .h2, .page-cta h3, .page-cta .h3 { color: #fff; }
.page-cta .prose { color: rgba(255, 255, 255, .78); }
.page-cta .prose a:not(.btn) { color: var(--accent-soft); }
.page-cta .chip { background: rgba(255, 255, 255, .12); color: #fff; }

/* cartes d'article (index blog + liens connexes) */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 2vw, 28px);
}
.post-card {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 30px);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh-card);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lift); }
.post-card__meta {
  font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--accent); font-weight: 600;
}
.post-card__title {
  margin-block: 12px 10px;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em;
  color: var(--ink);
}
.post-card__excerpt { font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-60); margin: 0; }
.post-card__more {
  margin-block-start: 18px; padding-block-start: 16px;
  border-block-start: 1px solid var(--ink-12);
  font-size: var(--fs-xs); font-weight: 600; color: var(--accent);
}

/* sommaire d'article */
.toc {
  padding: 24px 26px;
  border-radius: var(--r-md);
  background: #F3F4F6;
  font-size: var(--fs-sm);
}
.toc__title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink-40); font-weight: 600; margin-block-end: 14px;
}
.toc ol { display: grid; gap: 10px; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { color: var(--ink-60); }
.toc a::before { content: counter(toc) ". "; color: var(--accent); font-weight: 600; }
.toc a:hover { color: var(--accent); }

/* méta d'article (date, auteur, durée) */
.post-meta {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  font-size: var(--fs-xs); color: var(--ink-40);
}
.post-meta__author { display: flex; align-items: center; gap: 9px; color: var(--ink-60); font-weight: 500; }
.post-meta__avatar {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; font-family: var(--font-display);
}

/* Numéro d'ordre d'une carte .feat. Même géométrie que .feat__icon : les deux
   variantes doivent s'aligner quand elles cohabitent dans une même grille.
   Utilisé sur les pages « un levier pour un métier », dont la section annonce
   « ce qu'on installe, et dans quel ordre » — le numéro porte donc une
   information, il n'est pas décoratif. */
.feat__num {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-block-end: 18px;
  border-radius: 13px;
  background: var(--ink-08);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 20px; font-weight: 800; line-height: 1;
}
.feat--dark .feat__num { background: var(--on-dark-08); color: var(--accent-soft); }

/* Pictogramme du service en tête des pages couple : ces pages n'avaient aucun
   repère visuel avant le premier titre. */
.page-hero__badge {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  margin-block-end: 22px;
  border-radius: 15px;
  background: var(--accent-10);
  color: var(--accent);
}
.page-hero__badge svg { width: 26px; height: 26px; }

/* Les gestes d'une page couple sont toujours au nombre de quatre. Avec la piste
   par défaut de 260px, ils sortaient en 3 + 1 sur grand écran : trois colonnes
   pleines et une carte seule sur une deuxième ligne. 230px suffit à en aligner
   quatre dans le conteneur de 1088px, et la bascule à deux colonnes se fait
   naturellement sur tablette. */
.feat-grid--steps {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}