/* ═══════════════════════════════════════════════════════════════════════════
   OUTREMER — design system de la marque « Alexandre Cooreman »
   ═══════════════════════════════════════════════════════════════════════════
   COPIE CANONIQUE (registre design-system/outremer/). Source des RÈGLES :
   DESIGN.md à côté. Ce fichier est LA source des VALEURS (tokens) et des
   composants de l'idiome « site » : aucune valeur visuelle en dur ailleurs.
   Les apps embarquent une COPIE CONFORME (jamais modifiée localement) ; la
   couche projet vit dans <app>-ext.css, écrite dans le langage des tokens.
   Charger outremer-fonts.css AVANT ce fichier. Fontes servies en /fonts/.

   Validée le 28 septembre 2026 (tour 9 du canevas d'identité) : carré
   « ac » outremer, Archivo + JetBrains Mono, outremer / blanc cassé / bleu
   pâle / encre, trois formes en détail. Remplace la direction Veille.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — Couleurs de marque (DESIGN.md §2) — */
  --outremer: #1E2BD0;
  --outremer-vif: #2F3DDC;      /* survol des aplats outremer */
  --outremer-clair: #8C95FF;    /* accent sur encre : coches, pictos */
  --blanc-casse: #F7F7F4;
  --blanc: #FFFFFF;
  --bleu-pale: #DCE0F5;
  --encre: #0D0E14;             /* le fond du site */
  --ardoise: #5B5F73;           /* texte secondaire, AA sur blanc et bleu pâle */

  /* — Le sombre, thème principal du site depuis le 29 septembre 2026 (« le
     site surtout en noir et bleu ») : des tons d'encre légèrement bleutés,
     du plus profond au plus haut. — */
  --nuit: #08090E;              /* pied de page, bandes « encre » */
  --encre-2: #13162A;           /* bandes alternées */
  --surface: #1A1D33;           /* cartes posées sur le sombre */
  --surface-haute: #232845;     /* survol, carte mise en avant, champs */

  /* — Filets et textes dérivés — */
  --filet: #E2E3EA;
  --filet-fort: #CDD0DA;
  --filet-outremer: rgba(247, 247, 244, 0.24);
  --filet-encre: #2A2E47;
  --filet-encre-fort: #3B4163;
  --encre-texte: #A7ABBD;       /* texte courant sur encre */
  --encre-sourd: #8A90A6;       /* légendes sur encre */

  /* — État fonctionnel : erreurs de formulaire et d'application, jamais un
     ornement. Pas de vert, pas d'orange dans la marque (DESIGN.md §2.3). — */
  --erreur: #B42318;

  /* — Typographie (DESIGN.md §4) — */
  --texte: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — Mesures — */
  --l: 1120px;
  --lecture: 760px;
  --gouttiere: 20px;
  --section: clamp(56px, 3rem + 2.4vw, 80px);
  --rayon: 18px;
  --rayon-s: 10px;
  --rayon-xs: 6px;
  --ombre: 0 24px 60px rgba(4, 5, 10, 0.45);
  --ombre-douce: 0 14px 34px rgba(4, 5, 10, 0.3);
  --dur: 380ms;
  --ease: cubic-bezier(0.22, 0.9, 0.3, 1);

  /* — La trame de plan (fond outremer quadrillé, usage rare) — */
  --trame:
    linear-gradient(rgba(247, 247, 244, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(247, 247, 244, 0.07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(247, 247, 244, 0.12) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(247, 247, 244, 0.12) 1px, transparent 1px) 0 0 / 120px 120px,
    #1E2BD0;
}
@media (min-width: 768px) { :root { --gouttiere: 32px; } }

/* ─── Contextes de couleur ───────────────────────────────────────────────
   Chaque fond pose ses variables ; les composants ne lisent que celles-ci.
   Le sombre est le contexte par défaut (29 septembre 2026) : fond encre,
   cartes en surface bleutée, texte blanc cassé, accents lavande (l'outremer
   clair : l'outremer n'est jamais du texte sur le noir, 2,1:1), aplats et
   formes outremer. Le clair ne vit plus que dans les formulaires, les
   notifications et quelques bandes (bleu pâle). */
:root,
.bande, .carte, .statut, .sommaire, .pli, .flux, .menu__panneau, .etapes--schema .etape, .fiche-carte,
.exemple, .fait, .real-carte, .maille__item {
  --forme-encre: var(--blanc-casse);
  --forme-accent: var(--outremer);
  --fond-forme: var(--surface);
  --fond-carte: var(--surface);
  --fond-carte-haute: var(--surface-haute);
  --fg: var(--blanc-casse);
  --fg-doux: var(--encre-texte);
  --accent: var(--outremer-clair);
  --etiq: var(--outremer-clair);
  --ligne: var(--filet-encre);
  --ligne-forte: var(--filet-encre-fort);
  --puce: var(--outremer-clair);
  --btn-fond: var(--outremer);
  --btn-texte: var(--blanc);
  --btn-survol: var(--outremer-vif);
  --contour: rgba(247, 247, 244, 0.3);
  --focus: var(--outremer-clair);
}
/* L'ouverture des pages intérieures est outremer par défaut (29 sept. 2026 :
   « trop de blanc »). */
.bande--outremer, .bande--trame, .hero, .hero-page, .cta-bande {
  /* Sur l'outremer, les quatre formes sont blanc cassé : des formes encre sur
     le bleu ont été jugées bizarres (29 septembre 2026). */
  --forme-encre: var(--blanc-casse);
  --forme-accent: var(--blanc-casse);
  --fond-forme: var(--outremer-vif);
  --fond-carte: var(--surface);
  --fond-carte-haute: var(--surface-haute);
  --ligne-forte: rgba(247, 247, 244, 0.4);
  --focus: var(--blanc-casse);
  --fg: var(--blanc-casse);
  --fg-doux: var(--bleu-pale);
  --accent: var(--blanc-casse);
  --etiq: var(--bleu-pale);
  --ligne: var(--filet-outremer);
  --puce: var(--blanc-casse);
  --btn-fond: var(--blanc-casse);
  --btn-texte: var(--outremer);
  --btn-survol: var(--blanc);
  --contour: rgba(247, 247, 244, 0.5);
}
.bande--encre, .hero-page--encre, .pied, .encart {
  /* Sur l'encre, la forme « encre » (le quart) passerait inaperçue. Les formes
     « accent » gardent l'outremer du logo : l'outremer clair, un second bleu,
     ne sert qu'au texte et aux coches (29 septembre 2026). */
  --forme-encre: var(--blanc-casse);
  --forme-accent: var(--outremer);
  --fond-forme: var(--encre-2);
  --fond-carte: var(--surface);
  --fond-carte-haute: var(--surface-haute);
  --ligne-forte: var(--filet-encre-fort);
  --focus: var(--outremer-clair);
  --fg: var(--blanc-casse);
  --fg-doux: var(--encre-texte);
  --accent: var(--outremer-clair);
  --etiq: var(--outremer-clair);
  --ligne: var(--filet-encre);
  --puce: var(--outremer-clair);
  --btn-fond: var(--outremer);
  --btn-texte: var(--blanc);
  --btn-survol: var(--outremer-vif);
  --contour: rgba(247, 247, 244, 0.35);
}
/* Le clair, en minorité : le formulaire, les notifications, les bandes bleu
   pâle, une ouverture claire au cas par cas. */
.bande--pale, .bande--clair, .hero-page--blanc, .hero-page--casse, .form, .toast,
:is(.bande--pale, .bande--clair, .hero-page--blanc, .hero-page--casse) :is(.carte, .statut, .sommaire, .pli, .flux, .etapes--schema .etape, .fiche-carte, .exemple, .fait, .real-carte, .maille__item) {
  color-scheme: light;
  --forme-encre: var(--encre);
  --forme-accent: var(--outremer);
  --fond-forme: var(--bleu-pale);
  --fond-carte: var(--blanc);
  --fond-carte-haute: var(--bleu-pale);
  --ligne-forte: var(--filet-fort);
  --focus: var(--outremer);
  --fg: var(--encre);
  --fg-doux: var(--ardoise);
  --accent: var(--outremer);
  --etiq: var(--outremer);
  --ligne: var(--filet);
  --puce: var(--outremer);
  --btn-fond: var(--outremer);
  --btn-texte: var(--blanc);
  --btn-survol: var(--outremer-vif);
  --contour: var(--filet-fort);
}

/* ─── Base ─── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; }
body {
  background: var(--encre); color: var(--blanc-casse);
  font-family: var(--texte); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* height:auto : les attributs width/height (anti-CLS) gardent le ratio mais
   n'imposent jamais la hauteur rendue. */
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: var(--accent); text-decoration: none; }
h1, h2 { font-stretch: 125%; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; color: var(--fg); }
h3, h4 { font-stretch: 110%; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg); }
strong, b { font-weight: 700; }
:focus-visible { outline: 2px solid var(--focus, var(--outremer-clair)); outline-offset: 3px; }
::selection { background: var(--outremer); color: var(--blanc-casse); }
[id] { scroll-margin-top: 104px; }
.shell { width: min(100% - 2 * var(--gouttiere), var(--l)); margin-inline: auto; }
.shell--lecture { width: min(100% - 2 * var(--gouttiere), var(--lecture)); }
.skiplink { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--outremer); color: var(--blanc); font-weight: 700; padding: 10px 18px; border-radius: var(--rayon-s); }
.skiplink:focus { left: 12px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ─── Typographie de composition ─── */
/* L'étiquette : JetBrains Mono en capitales espacées, au-dessus des titres.
   La mono ne sert QU'AUX capitales, aux numéros (01, 02) et au code : jamais
   à des mots en minuscules, des prix ou des états (l'effet « terminal » a été
   refusé le 29 septembre 2026). */
.etiquette { display: inline-block; font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--etiq); }
.display { font-stretch: 125%; font-weight: 800; letter-spacing: -0.035em; }
.titre { font-stretch: 110%; font-weight: 800; letter-spacing: -0.02em; }
.chapo { font-size: clamp(17px, 1rem + 0.3vw, 19px); line-height: 1.6; color: var(--fg-doux); max-width: 60ch; }
.mono { font-family: var(--mono); }
/* Un mot mis en avant dans un titre : la couleur d'accent du contexte. */
h1 .accent, h2 .accent { color: var(--accent); }
.lien { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent); }
/* Un lien dans du texte courant se souligne : outremer contre ardoise ne
   fait que 1,4:1, la couleur seule ne suffit pas (WCAG 1.4.1). Les .lien
   (gras + flèche) et les boutons ont déjà leur repère. */
:where(.tete p, .chapo, .guide-lien, .note, .rep, .carte p, .exemple p, .fait p, .encart, .form__note, .tarif-note, .resume p, .flux__note) a:not(.lien):not(.btn) {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.lien::after { content: "→"; transition: transform 180ms var(--ease); }
.lien:hover::after { transform: translateX(3px); }

/* ─── Boutons : un seul rayon, cinq variantes ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--rayon-s);
  background: var(--btn-fond, var(--outremer)); color: var(--btn-texte, var(--blanc));
  font-family: var(--texte); font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap;
  cursor: pointer; transition: background-color 150ms var(--ease), box-shadow 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
}
.btn:hover { background: var(--btn-survol, var(--outremer-vif)); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn--clair { background: var(--blanc-casse); color: var(--outremer); }
.btn--clair:hover { background: var(--blanc); }
.btn--contour { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--contour); }
.btn--contour:hover { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn--contour-clair { background: transparent; color: var(--blanc-casse); box-shadow: inset 0 0 0 1.5px rgba(247, 247, 244, 0.5); }
.btn--contour-clair:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--blanc-casse); }
.btn--encre { background: var(--nuit); color: var(--blanc-casse); box-shadow: inset 0 0 0 1px var(--filet-encre-fort); }
.btn--encre:hover { background: var(--surface); }
.btn--petit { min-height: 44px; padding: 0 18px; font-size: 14px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ─── En-tête ─── */
.entete { position: sticky; top: 0; z-index: 60; background: var(--nuit); border-bottom: 1px solid var(--filet-encre); transition: box-shadow 240ms var(--ease); }
.entete--defile { box-shadow: 0 10px 30px rgba(4, 5, 10, 0.55); }
.entete__in { height: 76px; display: flex; align-items: center; gap: 24px; }
.marque { display: inline-flex; align-items: center; gap: 12px; flex: none; color: var(--fg); font-stretch: 125%; font-weight: 800; font-size: 20px; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; }
.marque .monogramme { width: 36px; height: 36px; }
/* Le nom à côté du logo se clôt sur un point carré (tour 10, E3) : 0,36 em,
   posé sur la ligne de base, de la couleur du carré du monogramme. */
.marque__point { display: inline-block; width: 0.36em; height: 0.36em; margin-left: 0.1em; background: var(--outremer); }
.entete__nav { display: flex; gap: 24px; margin-left: auto; list-style: none; white-space: nowrap; }
.entete__nav a { position: relative; display: block; padding: 10px 0; color: var(--fg-doux); font-size: 15px; font-weight: 500; transition: color 150ms var(--ease); }
.entete__nav a:hover, .entete__nav a[aria-current="page"] { color: var(--fg); }
/* La page courante : un trait net sous le libellé, dans l'accent. */
.entete__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--accent); }
.entete__cta { flex: none; }
.langues { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; flex: none; }
.langues a { color: var(--fg-doux); }
.langues a:hover { color: var(--accent); }
.langues .actif { color: var(--fg); font-weight: 700; }
.langues i { width: 1px; height: 12px; background: var(--ligne-forte); }

/* — Menu mobile (sous 1100 px) — */
.menu { display: none; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--rayon-s); box-shadow: inset 0 0 0 1.5px var(--ligne-forte); transition: box-shadow 200ms var(--ease); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { box-shadow: inset 0 0 0 1.5px var(--accent); }
.burger { position: relative; display: block; width: 18px; height: 14px; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; background: var(--fg); transition: transform 280ms var(--ease), opacity 180ms var(--ease), top 280ms var(--ease); }
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 6px; }
.burger i:nth-child(3) { top: 12px; }
.menu[open] .burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu[open] .burger i:nth-child(2) { opacity: 0; }
.menu[open] .burger i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.menu__voile { position: fixed; inset: 0; z-index: 55; background: rgba(4, 5, 10, 0.6); animation: apparait 200ms var(--ease); }
.menu__panneau { position: fixed; z-index: 56; top: 76px; left: 12px; right: 12px; display: grid; gap: 8px; padding: 14px; background: var(--fond-carte); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); animation: panneau 260ms var(--ease); }
.menu__panneau ul { list-style: none; display: grid; }
.menu__panneau a:not(.btn) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: var(--rayon-s); color: var(--fg); font-weight: 600; font-size: 17px; }
.menu__panneau a:not(.btn):hover { background: var(--fond-carte-haute); }
/* La page courante dans le menu : un petit carré, celui du logo. */
.menu__panneau a[aria-current="page"]::after { content: ""; flex: none; width: 8px; height: 8px; background: var(--accent); }
.menu__pied { display: flex; align-items: center; gap: 16px; padding: 6px 4px 2px; }
.menu__pied .btn { flex: 1; }
@keyframes apparait { from { opacity: 0; } }
@keyframes panneau { from { opacity: 0; transform: translateY(-8px); } }

/* ─── Bandes : sections pleine largeur ─── */
.bande { padding-block: var(--section); background: var(--encre); color: var(--fg); }
/* « casse » garde son nom d'origine : c'est la bande d'alternance, marine. */
.bande--casse { background: var(--encre-2); }
.bande--pale { background: var(--bleu-pale); }
.bande--clair { background: var(--blanc-casse); }
.bande--outremer { background: var(--outremer); }
.bande--encre { background: var(--nuit); }
.bande--trame { background: var(--trame); }
.bande--serree { padding-block: calc(var(--section) * 0.6); }
.bande--filet { border-top: 1px solid var(--ligne); }

/* Tête de section : étiquette, titre, chapô. Le plafond de largeur vit sur
   le paragraphe, jamais sur le bloc : un titre se replie au bord du shell. */
.tete { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(32px, 2rem + 1vw, 44px); }
.tete h2 { font-size: clamp(26px, 1rem + 1.9vw, 40px); }
.tete p { color: var(--fg-doux); font-size: 17px; max-width: 62ch; }
/* Variante documentation : numéro de section, titre, sous-titre en ligne. */
.tete--num { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 18px; }
.tete--num .num { font-family: var(--mono); font-size: 14px; color: var(--etiq); }
.tete--num p { flex-basis: 100%; }
/* La forme du domaine d'une section, portée une fois pour toutes ses offres. */
.tete--num > .forme { --forme: 44px; margin-left: auto; align-self: center; }
/* Le chiffre fantôme (DESIGN.md §5.1) : le numéro de la section, repris en
   très grand dans la teinte des formes de fond, derrière le titre. Posé par
   le script du site (data-fantome) ; texte décoratif, masqué aux lecteurs
   d'écran par nature (pseudo-élément sans contenu accessible utile). */
.tete--num[data-fantome] { position: relative; isolation: isolate; }
.tete--num[data-fantome]::before { content: attr(data-fantome); position: absolute; z-index: -1; left: -0.06em; top: 0; transform: translateY(-46%);
  font-stretch: 125%; font-weight: 800; font-size: clamp(96px, 12vw, 176px); line-height: 1; letter-spacing: -0.05em; color: var(--fond-forme); pointer-events: none; }

/* ─── Ouverture de l'accueil (outremer) ─── */
.hero { background: var(--outremer); color: var(--fg); padding-block: clamp(48px, 3rem + 3vw, 96px); overflow: hidden; }
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(40px, 5vw, 72px); align-items: center; }
.hero__texte { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero h1 { font-size: clamp(34px, 1.2rem + 3.3vw, 60px); line-height: 1.04; }
.hero .chapo { max-width: 560px; }
/* Garanties : une coche par engagement, pas de puce décorative (les petits
   points d'ornement ont été jugés « vibecodés », 21 août 2026). La coche dit
   quelque chose : c'est une garantie tenue. */
.hero__garanties { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; font-weight: 500; color: var(--fg-doux); }
.hero__garanties span { display: inline-flex; align-items: center; gap: 8px; }
.hero__garanties span::before {
  content: ""; flex: none; width: 13px; height: 13px; background: var(--puce);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5 L7 13.5 L15 5' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5 L7 13.5 L15 5' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-page .hero__garanties { margin-top: 24px; }

/* ─── Ouverture des pages intérieures (documentation) ─── */
.hero-page { background: var(--outremer); color: var(--fg); padding-block: clamp(40px, 2.5rem + 2vw, 76px) clamp(48px, 3rem + 2vw, 80px); }
.hero-page--encre { background: var(--encre); border-bottom: 1px solid var(--ligne); }
.hero-page--blanc { background: var(--blanc); border-bottom: 1px solid var(--filet); }
.hero-page--casse { background: var(--blanc-casse); }
.hero-page__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.hero-page__in--aside { grid-template-columns: minmax(0, 1fr) 360px; }
.hero-page h1 { font-size: clamp(32px, 1.1rem + 2.6vw, 54px); max-width: 22ch; }
.hero-page .etiquette + h1 { margin-top: 16px; }
.hero-page .chapo { margin-top: 22px; }
.hero-page .actions { margin-top: 30px; }
.fil { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; margin-bottom: 26px; font-size: 13px; font-weight: 500; color: var(--fg-doux); }
.fil a { color: var(--fg-doux); }
.fil a:hover { color: var(--accent); }
.fil li:not(:last-child)::after { content: "/"; margin-left: 10px; opacity: 0.5; }
.fil b { color: var(--fg); font-weight: 600; }
.maj { margin-top: 22px; font-size: 13px; color: var(--fg-doux); }

/* ─── Formes : une par métier (DESIGN.md §5) ───
   Quatre échelles, jamais au-delà : repère (14-26 px), icône (40-56),
   bloc (72-96, cartes de métier), composition (100-200, UNE par page,
   dans l'ouverture, toujours en partie cachée sous une carte). */
.forme { width: var(--forme, 48px); height: var(--forme, 48px); flex: none; overflow: visible; }
.formes { display: inline-flex; align-items: center; gap: 6px; --forme: 16px; }
/* Logique partout : une prestation porte toujours la forme de son domaine
   (les trois métiers, et le carré du socle), en repère devant son nom. */
.etiquette--forme { display: inline-flex; align-items: center; gap: 10px; --forme: 14px; }
.tarif-ligne b .forme { display: inline-block; width: 12px; height: 12px; margin-right: 9px; vertical-align: -1px; }
.domaines { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; font-size: 13px; font-weight: 600; color: var(--fg-doux); }
.domaines li { display: inline-flex; align-items: center; gap: 7px; --forme: 12px; }

/* La composition d'ouverture : trois formes et une carte, en collage. Les
   formes passent SOUS la carte et n'en dépassent que par un bord : on les
   devine, elles ne décorent pas. */
.compo { position: relative; width: 100%; max-width: 460px; padding: 15% 10% 12% 7%; justify-self: end; }
.compo > .forme { position: absolute; height: auto; }
.compo__carte { position: relative; z-index: 2; }
.compo__carte .statut { max-width: none; }
.compo > .compo__trame { left: 0; top: 0; width: 27%; }
.compo > .compo__cercle { right: 0; top: 0; width: 26%; }
.compo > .compo__quart { right: 0; bottom: 0; width: 44%; }
.compo > .compo__carre { left: 0; bottom: 0; width: 22%; }

/* L'offre en quatre formes, « la planche » (ouverture de l'accueil ; revue
   le 29 septembre 2026 : des formes pleines de 150 px écrasaient leurs
   légendes) : un carré partagé en quatre par une croix fine qui déborde un
   peu, comme les lignes de construction d'une planche de dessin. Chaque case
   est un lien : la forme du domaine, son nom, trois mots. Au chargement le
   plan se trace ; au survol, chaque forme fait son geste (DESIGN.md §9). */
.offre-formes { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 440px; justify-self: end; list-style: none; }
.offre-formes::before, .offre-formes::after { content: ""; position: absolute; z-index: 1; background: var(--ligne-forte); pointer-events: none; }
.offre-formes::before { top: -14px; bottom: -14px; left: calc(50% - 0.5px); width: 1px; }
.offre-formes::after { left: -14px; right: -14px; top: calc(50% - 0.5px); height: 1px; }
.offre-formes li { display: flex; }
.offre-formes a { flex: 1; display: flex; flex-direction: column; gap: 20px; min-height: 212px; padding: 26px 24px 24px; color: var(--fg); transition: background-color 220ms var(--ease); }
.offre-formes a:hover { background: var(--fond-forme); }
.offre-formes a:focus-visible { outline-offset: -8px; }
.offre-formes .forme { width: 60px; height: 60px; }
.offre-formes__texte { display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.offre-formes__nom { font-stretch: 110%; font-weight: 800; letter-spacing: -0.02em; font-size: 18px; line-height: 1.2; }
.offre-formes__mots { font-size: 13.5px; line-height: 1.45; color: var(--fg-doux); }

/* Les calques d'une forme animée (composant Forme, prop anime). Au repos,
   c'est la forme pleine : le trait intérieur la recouvre exactement, le
   balayage, l'onde et le témoin sont éteints. */
.forme__trait { stroke-dasharray: 1; }
.forme__balayage { stroke-dasharray: 0.25 1; opacity: 0; }
.forme__onde { opacity: 0; stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.forme__temoin { opacity: 0; fill: var(--outremer); }
.forme__point, .forme__point circle, .forme--cercle .forme__plein { transform-box: fill-box; transform-origin: center; }
.forme--carre .forme__plein { transform-box: fill-box; transform-origin: 50% 100%; }
.forme__point--1 { --k: 1; } .forme__point--2 { --k: 2; } .forme__point--3 { --k: 3; }
.forme__point--4 { --k: 4; } .forme__point--5 { --k: 5; } .forme__point--6 { --k: 6; }
.forme__point--0 { --k: 0; }

/* Le plan se trace, une fois au chargement (ni après une navigation
   interne, html.sans-intro, ni en mouvement réduit) : la croix part du
   centre, puis case après case chaque forme se construit par son geste. Le
   cercle se trace au compas et se remplit depuis son centre, le quart se
   balaie comme une aiguille, les points de la trame arrivent en vague, le
   carré se trace côté par côté et se remplit par le bas, comme une jauge.
   Jamais de fondu sur une forme : blanc cassé à demi sur l'outremer, ce
   serait un second bleu. */
.offre-formes li:nth-child(1) { --t: 320ms; }
.offre-formes li:nth-child(2) { --t: 480ms; }
.offre-formes li:nth-child(3) { --t: 640ms; }
.offre-formes li:nth-child(4) { --t: 800ms; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.sans-intro) .offre-formes::before { animation: planche-v 600ms var(--ease) 60ms backwards; }
  html:not(.sans-intro) .offre-formes::after { animation: planche-h 600ms var(--ease) 60ms backwards; }
  html:not(.sans-intro) .offre-formes .forme__trait { animation: forme-trace 640ms var(--ease) var(--t) backwards; }
  html:not(.sans-intro) .offre-formes .forme--cercle .forme__plein { animation: forme-remplit-centre 340ms var(--ease) calc(var(--t) + 520ms) backwards; }
  html:not(.sans-intro) .offre-formes .forme--carre .forme__plein { animation: forme-remplit-bas 380ms var(--ease) calc(var(--t) + 540ms) backwards; }
  html:not(.sans-intro) .offre-formes .forme__balayage { animation: forme-balaye 640ms var(--ease) var(--t) backwards; }
  html:not(.sans-intro) .offre-formes .forme--quart .forme__plein { animation: forme-remplit 1ms linear calc(var(--t) + 620ms) backwards; }
  html:not(.sans-intro) .offre-formes .forme__point circle { animation: forme-point 380ms var(--ease) calc(var(--t) + var(--k) * 60ms) backwards; }
  html:not(.sans-intro) .offre-formes__texte { animation: planche-legende 460ms var(--ease) calc(var(--t) + 380ms) backwards; }
}
@keyframes planche-v { from { transform: scaleY(0); } }
@keyframes planche-h { from { transform: scaleX(0); } }
@keyframes forme-trace { from { stroke-dashoffset: 1; } }
@keyframes forme-remplit { from { opacity: 0; } }
@keyframes forme-remplit-centre { from { transform: scale(0); } }
@keyframes forme-remplit-bas { from { transform: scaleY(0); } }
@keyframes forme-balaye { from { opacity: 1; stroke-dasharray: 0 1; } to { opacity: 1; stroke-dasharray: 0.25 1; } }
@keyframes forme-point { from { transform: scale(0); } }
@keyframes planche-legende { from { opacity: 0; transform: translateY(8px); } }

/* Le geste de chaque forme, au survol et au focus clavier : le site émet
   (une onde part du cercle), l'outil tourne (le quart pivote d'un quart de
   tour), la chaîne s'enclenche (une vague traverse la trame), le serveur
   veille (le témoin du carré clignote, à la place du petit carré du logo). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .offre-formes .forme--quart { transition: transform 480ms var(--ease); }
  .offre-formes a:is(:hover, :focus-visible) .forme--quart { transform: rotate(90deg); }
  .offre-formes a:is(:hover, :focus-visible) .forme__onde { animation: forme-onde 1200ms var(--ease) infinite; }
  .offre-formes a:is(:hover, :focus-visible) .forme__point { animation: forme-vague 1500ms var(--ease) calc(var(--k) * 70ms) infinite; }
  .offre-formes a:is(:hover, :focus-visible) .forme__temoin { animation: forme-temoin 1600ms ease-in-out infinite; }
}
@keyframes forme-onde { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
@keyframes forme-vague { 0%, 36%, 100% { transform: scale(1); } 18% { transform: scale(1.35); } }
@keyframes forme-temoin { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* La boussole de la planche (1er octobre 2026 : la croix devient une
   boussole). La planche est orientée comme un plan : au bout du trait
   vertical, le nord (.nord : un N en capitales mono sur une pointe) ; au
   croisement, l'aiguille (.aiguille, composant Aiguille), qui indique le nord
   au repos et pointe la case survolée ou atteinte au clavier : le cap du
   visiteur, juste avant que la forme voyage. Un trait et une pointe, jamais
   une cinquième forme : la pointe nord pleine, le sud évidé, de la couleur du
   texte. Elle ne vit que sur l'outremer (la planche, la 404) : le sud et le
   pivot prennent l'outremer, qui masque la croix. Au chargement, elle tourne
   puis se cale au début du tracé ; en mouvement réduit, elle reste au nord
   (DESIGN.md §5.1 et §9). */
.aiguille { display: block; width: 64px; height: 64px; overflow: visible; rotate: var(--cap, 0deg); }
.aiguille__nord { fill: var(--fg); }
.aiguille__sud, .aiguille__pivot { fill: var(--outremer); stroke: var(--fg); stroke-width: 1.4; }
.nord { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; line-height: 1; color: var(--fg); }
.nord::after { content: ""; width: 12px; height: 11px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%); }
.offre-formes .offre-formes__boussole { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; }
.offre-formes .nord { position: absolute; left: 50%; bottom: calc(100% + 14px); translate: -50% 0; }
.offre-formes .aiguille { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
@media (prefers-reduced-motion: no-preference) {
  .offre-formes .aiguille { transition: rotate 760ms cubic-bezier(0.34, 1.56, 0.64, 1); }
  .offre-formes:has(li:nth-child(1) a:is(:hover, :focus-visible)) .aiguille { --cap: -45deg; }
  .offre-formes:has(li:nth-child(2) a:is(:hover, :focus-visible)) .aiguille { --cap: 45deg; }
  .offre-formes:has(li:nth-child(3) a:is(:hover, :focus-visible)) .aiguille { --cap: -135deg; }
  .offre-formes:has(li:nth-child(4) a:is(:hover, :focus-visible)) .aiguille { --cap: 135deg; }
  html:not(.sans-intro) .offre-formes .aiguille { animation: aiguille-cale 1150ms cubic-bezier(0.3, 0.7, 0.35, 1) 120ms backwards; }
  html:not(.sans-intro) .offre-formes .nord { animation: planche-legende 460ms var(--ease) 420ms backwards; }
}
@keyframes aiguille-cale { 0% { rotate: -250deg; } 62% { rotate: 16deg; } 80% { rotate: -7deg; } 92% { rotate: 3deg; } 100% { rotate: 0deg; } }

/* L'ancre : une seule forme, rognée par le coin d'une bande et glissée sous
   une carte (le formulaire de contact) : même principe que la composition,
   jamais sous du texte. */
.ancre { position: absolute; z-index: 0; pointer-events: none; }
.ancre.forme { width: var(--ancre, clamp(120px, 15vw, 200px)); height: auto; }
.ancre--bas-droite { right: 0; bottom: 0; }

/* Le semis : un champ de points ton sur ton, dérivé de la trame. Une fois
   par page au plus, dans un coin sans texte. */
.semis { position: absolute; z-index: 0; pointer-events: none; width: min(34%, 400px); height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--forme-accent, var(--accent)) 30%, transparent) 2.6px, transparent 3px) 0 0 / 24px 24px; }
.semis--haut-droite { top: 0; right: 0; }
.avec-decor { position: relative; overflow: hidden; }

/* Les formes de fond (DESIGN.md §5.1) : derrière le contenu de chaque bande,
   une à quatre grandes formes ton sur ton, rognées au bord, qui dérivent
   doucement au défilement : la page gagne un plan de plus, de la profondeur.
   Couleurs de la palette (--fond-forme) : bleu pâle sur le clair, blanc sur
   le bleu pâle, outremer vif sur l'outremer, filet encre sur l'encre. Course
   de 40 px au plus (20 sur mobile), verticale, jamais sur du texte ;
   immobiles en mouvement réduit et là où le navigateur n'a pas les
   animations liées au défilement (pas de repli en JS). */
.a-fond { position: relative; overflow: clip; }
.a-fond > .shell { position: relative; z-index: 1; }
.bande--pale { --fond-forme: var(--blanc); }
.fond__forme { position: absolute; z-index: 0; width: var(--taille); height: var(--taille); fill: var(--fond-forme); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .fond__forme { animation: fond-derive 1ms linear both; animation-timeline: view(); animation-range: cover; }
  }
}
@keyframes fond-derive {
  from { transform: translate3d(0, var(--derive), 0); }
  to { transform: translate3d(0, calc(-1 * var(--derive)), 0); }
}
@media print { .fond__forme { display: none; } }

/* La forme qui voyage (DESIGN.md §9) : la forme d'un domaine porte le même
   nom de transition sur l'accueil, la page des services, les liens entre
   services et le sommaire de la page du domaine ; en changeant de page, elle
   glisse et grandit jusqu'à sa place. Un seul élément de ce nom par page.
   L'en-tête garde le sien : il ne clignote pas. */
.forme--voyage-cercle { view-transition-name: forme-cercle; }
.forme--voyage-quart { view-transition-name: forme-quart; }
.forme--voyage-trame { view-transition-name: forme-trame; }
.forme--voyage-carre { view-transition-name: forme-carre; }
.entete { view-transition-name: entete; }
::view-transition-group(forme-cercle), ::view-transition-group(forme-quart),
::view-transition-group(forme-trame), ::view-transition-group(forme-carre) { animation-duration: 440ms; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
.avec-decor > .shell { position: relative; z-index: 1; }

/* ─── Cartes ─── */
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartes--1 { grid-template-columns: minmax(0, 760px); }
.carte { display: flex; flex-direction: column; gap: 10px; padding: 28px 30px; background: var(--fond-carte); color: var(--fg); border: 1.5px solid var(--ligne); border-radius: var(--rayon); }
.carte h3 { font-size: 21px; }
.carte p { color: var(--fg-doux); font-size: 16px; line-height: 1.5; }
a.carte { transition: border-color 160ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease); }
a.carte:hover { border-color: var(--accent); }
.carte__pied { margin-top: auto; padding-top: 14px; font-size: 15px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
/* La carte de métier : la forme en tête, puis le titre, le texte, les
   techniques et le prix (tours 8 et 9). 52 px : présente sans envahir. */
.carte-service { gap: 20px; --forme: 52px; }
.carte-service__corps { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-service h3 { font-size: 23px; }
.carte-service .carte__pied { padding-top: 12px; }
/* La carte mise en avant (la « formule choisie » de la référence du 29
   septembre 2026) : surface plus haute, bord d'accent, halo. Une par
   groupe au plus. */
.carte--vedette { background: var(--fond-carte-haute); border: 2px solid var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); }
/* Grille qui mêle métiers et autres prestations (hub des services) : la
   forme passe dans le coin de la carte, les titres restent alignés, et une
   prestation hors métier n'a simplement pas de forme. */
.carte-service--coin { position: relative; --forme: 40px; }
.carte-service--coin > .forme { position: absolute; top: 26px; right: 26px; }
.carte-service--coin > .forme ~ .carte-service__corps h3 { padding-right: 52px; }
/* Doublé (a.carte.carte--vedette) : garde le halo sous l'ombre du survol. */
a.carte.carte--vedette:hover { border-color: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 26%, transparent), var(--ombre-douce); }
/* Les techniques : puces au trait, en mono (touche « plan d'ingénieur »). */
.techs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.techs li { padding: 3px 9px; box-shadow: inset 0 0 0 1px var(--accent); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--accent); }

/* ─── Inclus dans chaque projet : quatre pictos au trait ─── */
.inclus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; list-style: none; }
.inclus li { display: flex; flex-direction: column; gap: 10px; }
.inclus .picto { width: 28px; height: 28px; color: var(--accent); }
/* Variante boîtes : des cartouches blancs sous un trait outremer, sans picto
   (les pictos au trait jurent à côté des formes pleines, 29 sept. 2026). */
.inclus--boites li { padding: 18px 20px 20px; background: var(--fond-carte); border-top: 3px solid var(--accent); }
.inclus b { font-stretch: 110%; font-weight: 800; letter-spacing: -0.02em; font-size: 18px; line-height: 1.25; color: var(--fg); }
.inclus span { font-size: 15px; line-height: 1.5; color: var(--fg-doux); }
.picto { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ─── Méthode : cinq étapes, le trait s'allume de gauche à droite ─── */
.etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; }
.etape { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 0 0; border-top: 2px solid var(--ligne-forte); transition: border-color 320ms var(--ease); }
.etape:first-child, .etape.on { border-top-color: var(--accent); }
.etape b { font-stretch: 110%; font-weight: 800; letter-spacing: -0.02em; font-size: 19px; line-height: 1.2; }
.etape span { font-size: 14.5px; line-height: 1.45; color: var(--fg-doux); }
/* Doublé (.etape .x) : doit battre `.etape span` (0,1,1). */
.etape .etape__num { font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--accent); }
.etape .gratuit { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
/* Variante schéma (direction Plan) : des boîtes nettes reliées par des
   flèches ; la boîte s'allume quand l'étape passe (data-sequence). */
.etapes--schema { gap: 30px; --fleche: var(--ligne-forte); --fleche-on: var(--accent); }
.etapes--schema .etape { position: relative; padding: 16px 18px 18px; border: 1.5px solid var(--ligne-forte); background: var(--fond-carte); color: var(--fg); }
.etapes--schema .etape:first-child, .etapes--schema .etape.on { border-color: var(--accent); }
.etapes--schema .etape:not(:last-child)::after {
  content: ""; position: absolute; top: calc(50% - 6px); right: -30px; width: 30px; height: 12px; background: var(--fleche); transition: background-color 320ms var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M3 6 H26 M21 1.5 L26.5 6 L21 10.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / 30px 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12'%3E%3Cpath d='M3 6 H26 M21 1.5 L26.5 6 L21 10.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / 30px 12px no-repeat;
}
.etapes--schema .etape.on:not(:last-child)::after { background: var(--fleche-on); }

/* ─── Réalisations ─── */
.reals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.real-carte { display: flex; flex-direction: column; background: var(--fond-carte); color: var(--fg); border: 1.5px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; transition: border-color 160ms var(--ease); }
a.real-carte:hover { border-color: var(--accent); }
.real-carte__media { border-bottom: 1.5px solid var(--ligne); background: var(--fond-carte-haute); overflow: hidden; }
.real-carte__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 700ms var(--ease); }
a.real-carte:hover .real-carte__media img { transform: scale(1.02); }
.real-carte__corps { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.real-carte h3 { font-size: 20px; }
.real-carte h3 small { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; letter-spacing: 0; font-stretch: 100%; color: var(--fg-doux); }
.real-carte p { font-size: 15px; line-height: 1.5; color: var(--fg-doux); }
.real-carte .lien { margin-top: auto; padding-top: 6px; font-size: 15px; }
.capture { border: 1.5px solid var(--ligne); border-radius: 14px; overflow: hidden; background: var(--fond-carte); }
.capture img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

/* ─── États : un point, toujours un libellé ─── */
/* Le libellé peut passer à la ligne (un état long sur mobile) : le point
   reste calé sur la première ligne. */
.etat { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--accent); }
.etat::before { content: ""; width: 7px; height: 7px; margin-top: calc(0.75em - 3.5px); border-radius: 50%; background: currentColor; flex: none; }
.etat--vivant::before { animation: pouls 2.8s ease-in-out infinite; }
@keyframes pouls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); } 60% { box-shadow: 0 0 0 5px transparent; } }

/* ─── La carte d'état : ce qu'un client voit de son site (exemple) ─── */
.statut { width: 100%; max-width: 420px; background: var(--fond-carte); color: var(--fg); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.statut__tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; }
.statut__tete b { font-stretch: 110%; font-weight: 800; letter-spacing: -0.02em; font-size: 17px; }
.statut__badge { padding: 3px 9px; border-radius: var(--rayon-xs); background: var(--fond-carte-haute); font-size: 12px; font-weight: 600; color: var(--fg-doux); }
.statut ul { list-style: none; }
.statut li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--ligne); font-size: 15px; }
.statut__pied { padding: 13px 22px; border-top: 1px solid var(--ligne); font-size: 13px; color: var(--fg-doux); }

/* ─── Sommaire (pages longues) ─── */
.sommaire { width: 100%; max-width: 360px; padding: 26px 28px; background: var(--fond-carte); color: var(--fg); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.sommaire__titre { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--etiq); }
.sommaire ol { list-style: none; }
.sommaire a { display: flex; align-items: baseline; gap: 14px; padding: 10px 0 10px 14px; border-left: 2px solid var(--ligne); color: var(--fg-doux); font-size: 16px; font-weight: 600; line-height: 1.3; transition: color 160ms var(--ease), border-color 160ms var(--ease); }
.sommaire a:hover, .sommaire a.actif { color: var(--fg); border-left-color: var(--accent); }
.sommaire a span { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--accent); }

/* ─── Fiche technique : clé en mono, valeur en clair ─── */
.fiche { border: 1.5px solid var(--ligne); border-radius: var(--rayon-s); overflow: hidden; }
.fiche > div { display: grid; grid-template-columns: minmax(110px, 220px) minmax(0, 1fr); }
.fiche > div + div { border-top: 1px solid var(--ligne); }
.fiche dt { padding: 13px 18px; border-right: 1px solid var(--ligne); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-doux); }
.fiche dd { padding: 13px 18px; font-size: 16px; color: var(--fg); }
.fiche dd a { color: var(--accent); font-weight: 600; }
/* La fiche en carte (touche « bureau d'études ») : un bandeau encre, puis les
   caractéristiques. Le « ac » du bandeau signe la fiche, en mono. */
.fiche-carte { background: var(--fond-carte); color: var(--fg); border: 1.5px solid var(--ligne-forte); }
.fiche-carte .fiche { border: 0; border-radius: 0; }
.fiche__tete { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 16px; background: var(--outremer); color: var(--blanc-casse); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.fiche__tete span:last-child { text-transform: none; letter-spacing: 0; font-weight: 700; }

/* ─── Engagements : une coche par ligne ─── */
.engagements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 48px; list-style: none; }
.engagements li { display: flex; align-items: baseline; gap: 12px; font-size: 17px; line-height: 1.4; color: var(--fg); }
.engagements li::before {
  content: ""; flex: none; width: 18px; height: 18px; transform: translateY(3px); background: var(--puce);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5 L7 13.5 L15 5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 9.5 L7 13.5 L15 5' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.engagements--1 { grid-template-columns: 1fr; gap: 12px; }
.engagements--1 li { font-size: 16px; }

/* ─── Chiffres ─── */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.chiffre b { display: block; font-stretch: 125%; font-weight: 800; letter-spacing: -0.035em; font-size: clamp(34px, 1.4rem + 1.8vw, 46px); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.chiffre span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--fg-doux); }

/* ─── Citation (avis client réel, jamais traduit) ─── */
.citation { max-width: 900px; }
.citation p { font-stretch: 110%; font-weight: 800; letter-spacing: -0.02em; font-size: clamp(24px, 1rem + 1.9vw, 38px); line-height: 1.2; color: var(--fg); text-wrap: balance; }
.citation footer { margin-top: 20px; font-size: 15px; color: var(--fg-doux); }
.citation footer b { color: var(--fg); font-weight: 700; }

/* ─── Encart : une note sur la surface, un trait outremer, picto lavande ─── */
.encart { display: flex; gap: 16px; align-items: flex-start; padding: 20px 24px; border-radius: 14px; background: var(--surface); border-left: 3px solid var(--accent); color: var(--fg); font-size: 15px; line-height: 1.55; }
.encart .picto { color: var(--accent); width: 28px; height: 28px; }

/* ─── Contact : bande outremer, formulaire sur carte blanche ─── */
.contact__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(40px, 6vw, 80px); align-items: start; }
.contact__texte { display: flex; flex-direction: column; gap: 18px; }
.contact__texte .tete { margin-bottom: 0; }
.contact h2 { font-size: clamp(30px, 1.2rem + 2.4vw, 48px); }
.coordonnees { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px 12px; margin-top: 8px; font-size: 15px; }
.coordonnees dt { color: var(--fg-doux); font-weight: 600; }
.coordonnees dd { color: var(--fg); }
.coordonnees a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ligne); }

/* ─── Formulaires ─── */
.form { display: grid; gap: 16px; padding: clamp(22px, 3vw, 30px); background: var(--blanc); color: var(--encre); border-radius: 20px; }
.bande--pale .form, .bande--clair .form { border: 1.5px solid var(--filet); }
.form__titre { font-stretch: 110%; font-weight: 800; letter-spacing: -0.02em; font-size: 20px; }
.champ { display: grid; gap: 6px; }
.champ label { font-size: 13px; font-weight: 600; color: var(--ardoise); }
.champ label small { font-size: 13px; font-weight: 400; }
.req { color: var(--outremer); font-weight: 700; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 46px; padding: 11px 14px;
  font-family: inherit; font-size: 16px; color: var(--encre);
  background: var(--blanc); border: 1px solid var(--filet-fort); border-radius: var(--rayon-s);
  transition: border-color 130ms var(--ease), box-shadow 130ms var(--ease);
}
.champ textarea { resize: vertical; min-height: 110px; }
.champ select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230D0E14' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 15px center / 12px 8px;
}
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: color-mix(in srgb, var(--filet-fort), var(--encre) 18%); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2px solid var(--outremer); outline-offset: 0; border-color: var(--outremer); }
.champ ::placeholder { color: color-mix(in srgb, var(--ardoise) 70%, var(--blanc)); }
.champ--invalide input, .champ--invalide select, .champ--invalide textarea { border-color: var(--erreur); box-shadow: 0 0 0 3px color-mix(in srgb, var(--erreur) 14%, transparent); }
/* align-items: end : un libellé sur deux lignes ne décale pas son champ. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.form__envoi { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.form__note { font-size: 13px; color: var(--ardoise); }
.turnstile-slot:not(:empty) { margin: 2px 0; }

/* ─── Questions fréquentes ─── */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq details:first-of-type { border-top: 1px solid var(--ligne); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 2px; font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--fg); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: 20px; font-weight: 400; line-height: 1; color: var(--accent); transition: transform 160ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .rep { padding: 0 2px 22px; color: var(--fg-doux); font-size: 16px; max-width: 70ch; }

/* ─── Fin de page : l'appel à agir sur outremer ─── */
.cta-bande { background: var(--outremer); color: var(--fg); padding-block: var(--section); }
.cta-bande__in { display: flex; align-items: center; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; }
.cta-bande .etiquette { display: block; margin-bottom: 12px; }
.cta-bande h2 { font-size: clamp(28px, 1.1rem + 2vw, 44px); max-width: 20ch; }
.cta-bande p { margin-top: 12px; color: var(--fg-doux); max-width: 52ch; }

/* ─── Pied de page (encre) ─── */
.pied { background: var(--nuit); color: var(--fg-doux); padding-top: 64px; font-size: 14.5px; }
.pied__in { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
.pied .marque { color: var(--blanc-casse); font-size: 18px; }
.pied .marque .monogramme { width: 30px; height: 30px; }
.pied__desc { margin-top: 16px; max-width: 36ch; }
/* Le descripteur en colonne, un morceau par ligne, sans « · » (comme au verso
   de la carte : un point en fin de ligne ressemble à une coupure ratée). */
.pied__role { margin-top: 16px; color: var(--fg); font-weight: 600; line-height: 1.5; }
.pied__role span { display: block; }
.pied__role + .pied__desc { margin-top: 10px; }
.pied .formes { margin-top: 22px; --forme: 16px; gap: 8px; }
.pied__titre { margin-bottom: 16px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; font-stretch: 100%; color: var(--encre-sourd); }
.pied ul { list-style: none; display: grid; gap: 9px; }
.pied a { color: var(--fg-doux); }
.pied a:hover { color: var(--blanc-casse); }
/* Le filet traverse toute la largeur : il vit sur le conteneur pleine
   largeur, le texte garde la gouttière. */
.pied__bas { border-top: 1px solid var(--filet-encre); }
.pied__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0 26px; font-size: 13px; color: var(--encre-sourd); }

/* ─── Contenu long (MDX : records, notes, guides) ─── */
.prose { max-width: 72ch; font-size: 17px; color: var(--fg); }
.prose p, .prose li { line-height: 1.7; }
.prose p { margin: 14px 0; }
.prose h2 { font-size: clamp(24px, 1rem + 1vw, 30px); margin: 52px 0 14px; padding-top: 26px; border-top: 1px solid var(--ligne); }
.prose > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.prose h3 { font-size: 20px; margin: 30px 0 10px; }
.prose ul, .prose ol { margin: 14px 0; padding-left: 22px; }
.prose ul { list-style-type: square; }
.prose li { margin: 7px 0; }
.prose li::marker { color: var(--accent); }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }
.prose code { font-family: var(--mono); font-size: 0.85em; background: var(--fond-carte); border: 1px solid var(--ligne); border-radius: 5px; padding: 1px 6px; }
.prose pre { margin: 20px 0; padding: 18px 20px; border: 1px solid var(--ligne); border-radius: 14px; overflow-x: auto; background: var(--nuit) !important; color: var(--blanc-casse); }
.prose pre code { background: transparent; border: 0; padding: 0; font-size: 13.5px; line-height: 1.65; color: inherit; }
.prose blockquote { margin: 20px 0; padding-left: 18px; border-left: 3px solid var(--accent); color: var(--fg-doux); }
.prose table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.prose th { background: var(--fond-carte); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-doux); }
.prose img { border: 1.5px solid var(--ligne); border-radius: 14px; }
.prose hr { border: 0; border-top: 1px solid var(--ligne); margin: 36px 0; }
.prose strong { font-weight: 700; }

/* En bref : le résumé d'une note, avant le contenu. */
.resume { margin-top: 28px; padding: 18px 22px; max-width: 680px; border-left: 3px solid var(--accent); background: var(--fond-carte); }
.resume b { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--etiq); }
.resume p { font-size: 16px; line-height: 1.6; color: var(--fg); }

/* ─── Accordéon de contenu (pli) ─── */
.pli { margin: 18px 0; background: var(--fond-carte); color: var(--fg); border: 1.5px solid var(--ligne); border-radius: 14px; }
.pli summary { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 15px 20px; font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; }
.pli summary::-webkit-details-marker { display: none; }
.pli summary::after { content: "+"; flex: none; font-family: var(--mono); font-size: 19px; font-weight: 400; line-height: 1; color: var(--accent); transition: transform 160ms var(--ease); }
.pli[open] summary::after { transform: rotate(45deg); }
.pli summary .pli__titre { flex: 1; }
.pli summary time { flex: none; font-size: 13px; font-weight: 500; color: var(--fg-doux); font-variant-numeric: tabular-nums; }
.pli__body { padding: 0 20px 18px; }
.pli__body > :first-child { margin-top: 0; }
.pli[open] .pli__body { animation: pli 260ms var(--ease); }
@keyframes pli { from { opacity: 0; transform: translateY(-4px); } }

/* ─── Petits composants partagés ─── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 4px 10px; border-radius: var(--rayon-xs); background: transparent; box-shadow: inset 0 0 0 1px var(--ligne-forte); font-size: 13px; font-weight: 600; color: var(--fg-doux); }
.retour { margin-top: 56px; }
.guide-lien { margin-top: 22px; font-size: 15.5px; color: var(--fg-doux); max-width: 68ch; }
.note { font-size: 13.5px; color: var(--fg-doux); }

/* Exemples, gains, faits : grilles de cartes sobres des pages de service. */
.exemples, .faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.exemple, .fait { padding: 26px 28px; background: var(--fond-carte); color: var(--fg); border: 1.5px solid var(--ligne); border-radius: var(--rayon); }
.exemple h3, .fait h3 { font-size: 20px; }
.exemple p, .fait p { margin-top: 8px; color: var(--fg-doux); font-size: 15.5px; line-height: 1.55; }
.gains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gain b { display: block; font-stretch: 125%; font-weight: 800; letter-spacing: -0.035em; font-size: clamp(32px, 1.3rem + 1.4vw, 40px); line-height: 1.05; color: var(--fg); }
.gain span { display: block; margin-top: 8px; color: var(--fg-doux); font-size: 15px; }

/* Lignes de tarif : double filet d'ouverture, prix en chiffres alignés. */
.tarifs-bloc { max-width: 680px; }
.tarif-ligne { position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 2px; border-bottom: 1px solid var(--ligne); font-size: 16px; }
.tarif-ligne:first-of-type { border-top: 2px solid var(--fg); }
.tarif-ligne b { font-weight: 700; }
.tarif-ligne small { display: block; font-size: 14px; font-weight: 400; color: var(--fg-doux); }
.tarif-ligne .prix { flex: none; font-size: 16px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tarif-note { margin-top: 12px; font-size: 13.5px; color: var(--fg-doux); }

/* Maillage interne : les services en rangée de liens. */
.maille { margin-top: 36px; }
.maille__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.maille__item { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; color: var(--fg); background: var(--fond-carte); border: 1.5px solid var(--ligne); border-radius: 14px; transition: border-color 150ms var(--ease); }
.maille__item:hover { border-color: var(--accent); }
.maille__item b { display: flex; align-items: center; gap: 9px; font-stretch: 110%; font-weight: 800; letter-spacing: -0.02em; font-size: 17px; color: var(--fg); --forme: 14px; }
.maille__item span { font-size: 14px; line-height: 1.45; color: var(--fg-doux); }

/* ─── Le flux : un enchaînement allumé pas à pas (data-sequence) ─── */
.fluxs { display: grid; gap: 22px; margin-top: 30px; }
.flux { padding: 24px 26px 26px; background: var(--fond-carte); color: var(--fg); border: 1.5px solid var(--ligne); border-radius: var(--rayon); }
.flux__tete { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.flux__tete h3 { font-size: 21px; }
.flux__tete p { font-size: 14.5px; color: var(--fg-doux); }
/* Colonnes automatiques : le nombre d'étapes dépend du flux décrit. */
.flux__pas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; list-style: none; position: relative; }
.pas { position: relative; padding-right: 20px; }
.pas::before { content: ""; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--ligne-forte); }
.pas:last-child::before { right: calc(100% - 18px); }
.pas::after { content: ""; position: absolute; top: 8px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 320ms var(--ease); }
.pas.on::after { width: 100%; }
.pas:last-child.on::after { width: 18px; }
.pas__marque { position: relative; z-index: 1; display: block; width: 18px; height: 18px; margin-bottom: 16px; border: 2.5px solid var(--ligne-forte); background: var(--fond-carte); transition: border-color 220ms var(--ease), background 220ms var(--ease); }
.pas.on .pas__marque { border-color: var(--accent); background: var(--accent); }
/* Le déclencheur reste creux : c'est un événement extérieur, pas une action. */
.pas--declencheur.on .pas__marque { background: var(--fond-carte); }
/* Le résultat : le carré plein, comme le logo. */
.pas--resultat.on .pas__marque { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.pas__corps { display: block; padding-right: 12px; opacity: 0.45; transition: opacity 260ms var(--ease); }
.pas.on .pas__corps { opacity: 1; }
.pas__corps b { display: block; font-stretch: 110%; font-weight: 800; letter-spacing: -0.02em; font-size: 16px; line-height: 1.2; }
.pas__corps span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.45; color: var(--fg-doux); }
.flux__note { margin-top: 24px; font-size: 14.5px; color: var(--fg-doux); max-width: 78ch; }

/* ─── Toast (retour des formulaires) ─── */
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 80; display: flex; align-items: flex-start; gap: 12px; max-width: 380px; padding: 14px 16px; background: var(--blanc); color: var(--ardoise); border: 1.5px solid var(--filet); border-radius: 14px; box-shadow: var(--ombre); opacity: 0; transform: translateY(10px); transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
/* Caché, il ne prend plus de place (2 octobre 2026) : `display: flex`
   l'emportait sur l'attribut hidden, et la notification invisible captait les
   clics en bas à droite de chaque page (la bulle de l'assistant, un lien du
   pied). Le script retire hidden, force un recalcul, puis ajoute --visible :
   la transition reste. */
.toast[hidden] { display: none; }
.toast--visible { opacity: 1; transform: none; }
.toast__pt { flex: none; width: 9px; height: 9px; margin-top: 6px; background: var(--outremer); }
.toast--erreur .toast__pt { background: var(--erreur); }
.toast--info .toast__pt { background: var(--ardoise); }
.toast__corps b { display: block; margin-bottom: 2px; color: var(--encre); font-size: 14.5px; }
.toast__corps span { font-size: 13.5px; }
.toast__fermer { flex: none; margin-left: 4px; padding: 0 2px; background: none; border: 0; color: var(--ardoise); font-size: 18px; line-height: 1; cursor: pointer; }
.toast__fermer:hover { color: var(--encre); }

/* ─── Révélations au scroll (une fois par entrée, cascade ≤ 3) ─── */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv-2 { transition-delay: 90ms; }
.js .rv-3 { transition-delay: 180ms; }

/* ─── Survols : discrets, jamais plus de 3 px ─── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.carte:hover, .exemple:hover, .fait:hover { transform: translateY(-3px); box-shadow: var(--ombre-douce); }
  .exemple, .fait { transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
  .tarif-ligne::before { content: ""; position: absolute; inset: 1px -12px; z-index: -1; border-radius: var(--rayon-xs); background: var(--fond-carte); opacity: 0; transition: opacity 160ms var(--ease); }
  .tarif-ligne:hover::before { opacity: 1; }
}

/* ─── Réactif ─── */
@media (max-width: 1100px) {
  .entete__nav, .entete__in > .langues { display: none; }
  .menu { display: block; }
  .entete__cta { margin-left: auto; }
}
@media (max-width: 960px) {
  .hero__in, .hero-page__in--aside, .contact__in { grid-template-columns: minmax(0, 1fr); }
  .cartes, .cartes--4, .reals { grid-template-columns: minmax(0, 1fr); }
  .inclus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .etapes { grid-template-columns: minmax(0, 1fr); }
  .etape { padding: 0 0 22px 20px; border-top: 0; border-left: 2px solid var(--ligne-forte); }
  .etape:first-child, .etape.on { border-left-color: var(--accent); }
  .etapes--schema .etape { padding: 14px 16px 16px; border: 1.5px solid var(--ligne-forte); }
  .etapes--schema .etape:first-child, .etapes--schema .etape.on { border-color: var(--accent); }
  .etapes--schema .etape:not(:last-child)::after { top: auto; bottom: -30px; right: auto; left: 22px; width: 12px; height: 30px; -webkit-mask-size: 12px 30px; mask-size: 12px 30px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 30'%3E%3Cpath d='M6 3 V26 M1.5 21 L6 26.5 L10.5 21' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 30'%3E%3Cpath d='M6 3 V26 M1.5 21 L6 26.5 L10.5 21' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
  .compo { justify-self: start; max-width: 420px; padding: 13% 7% 10% 5%; }
  .offre-formes { justify-self: start; max-width: 480px; margin-top: 24px; }
  .offre-formes a { min-height: 188px; padding: 22px 20px 20px; }
  .offre-formes .forme { width: 50px; height: 50px; }
  .offre-formes .aiguille { width: 56px; height: 56px; }
  .pied__in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .maille__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exemples, .faits, .gains { grid-template-columns: minmax(0, 1fr); }
  .sommaire, .statut { max-width: none; }
}
@media (max-width: 560px) {
  .offre-formes { max-width: none; }
  .offre-formes::before { top: -10px; bottom: -10px; }
  .offre-formes::after { left: -10px; right: -10px; }
  .offre-formes a { gap: 16px; min-height: 172px; padding: 18px 14px 16px; }
  .offre-formes .forme { width: 44px; height: 44px; }
  .offre-formes .aiguille { width: 48px; height: 48px; }
  .offre-formes .nord { bottom: calc(100% + 10px); }
  .offre-formes__nom { font-size: 15.5px; }
  .offre-formes__mots { font-size: 12.5px; }
}
@media (max-width: 860px) {
  /* En colonne, le rail du flux devient vertical : même lecture, autre axe. */
  .flux__pas { grid-auto-flow: row; grid-auto-columns: auto; gap: 20px; }
  .pas { padding-right: 0; padding-left: 34px; }
  .pas::before { top: 0; bottom: -20px; left: 8px; right: auto; width: 2px; height: auto; }
  .pas:last-child::before { display: none; }
  .pas::after { top: 0; left: 8px; width: 2px; height: 0; right: auto; transition: height 320ms var(--ease); }
  .pas.on::after { width: 2px; height: calc(100% + 20px); }
  .pas:last-child.on::after { width: 2px; height: 18px; }
  .pas__marque { position: absolute; left: 0; top: 0; margin-bottom: 0; }
  .pas__corps { padding-right: 0; }
}
@media (max-width: 720px) {
  .entete__in { height: 64px; gap: 12px; }
  .menu__panneau { top: 70px; }
  .marque { font-size: 17px; gap: 10px; }
  .marque .monogramme { width: 32px; height: 32px; }
  .engagements, .cartes--2, .duo { grid-template-columns: minmax(0, 1fr); }
  .carte, .carte-service { padding: 22px; }
  .carte-service { gap: 16px; --forme: 44px; }
  .carte-service h3 { font-size: 20px; }
  .semis { width: 46%; height: 140px; }
  .ancre.forme { --ancre: 110px; }
  .statut li { padding: 12px 18px; font-size: 14px; }
  .statut__tete, .statut__pied { padding-inline: 18px; }
  .fiche > div { grid-template-columns: minmax(0, 1fr); }
  .fiche dt { border-right: 0; padding-bottom: 0; }
  .fiche dd { padding-top: 6px; }
  .toast { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}
@media (max-width: 560px) {
  .entete__cta { display: none; }
  .menu { margin-left: auto; }
  /* Le prix passe sous l'intitulé : en mono, il ne laisse plus de place au titre. */
  .tarif-ligne { flex-direction: column; gap: 4px; }
  .maille__liste, .inclus { grid-template-columns: minmax(0, 1fr); }
  .hero .actions .btn, .cta-bande .actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .etape { border-top-color: var(--accent); }
  .pas__corps { opacity: 1; }
  .pas::before { background: var(--accent); }
  .pas::after { display: none; }
  .pas__marque { border-color: var(--accent); background: var(--accent); }
  .pas--declencheur .pas__marque { background: var(--fond-carte); }
  .etapes--schema .etape { border-color: var(--accent); }
  .etapes--schema .etape:not(:last-child)::after { background: var(--fleche-on); }
}