/*
 * Maquette du site vitrine de MK BID.
 *
 * Parti pris : sobre et clair. L'espace et la typographie font le travail, pas
 * les cadres. Aucune ombre, aucune carte bordée — c'est la règle du produit, et
 * elle tient aussi ici.
 *
 * Une seule famille (Manrope), une seule couleur d'accent, des filets d'un
 * pixel. Tout le reste est du blanc et du vide.
 */

:root {
  color-scheme: light;

  /* Encre */
  --ink: #101828;
  --ink-soft: #525F6B;
  --ink-faint: #7A8794;

  /* Fonds */
  --bg: #FFFFFF;
  --bg-sunken: #F7F8F9;

  /* Filets */
  --rule: #E6E8EA;
  --rule-strong: #CDD2D7;

  /* Accent — le bleu EXACT du logo (#0071BC, relevé sur logo.png), et son or.
     L'or ne sert JAMAIS à du texte : sur blanc il tombe à 1,8:1, illisible. Il
     ne marque que des traits et des repères graphiques. */
  --accent: #0071BC;
  --accent-dark: #005286;
  --accent-veil: #EFF6FB;
  --gold: #FFC20E;

  /* Rythme */
  --gutter: 32px;
  --max-width: 1140px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
/* `ol` autant que `ul` : les étapes de la chaîne et celles de l'inscription sont
   des listes ORDONNÉES — c'est le bon balisage — et elles portent déjà leur
   propre numéro. Sans cette ligne, le navigateur ajoute le sien par-dessus et
   l'on lit « 1. 01 ». */
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.wrapper {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Le seul saut de lecture : on n'affiche jamais un lien d'évitement sauf au clavier. */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: static;
  display: inline-block;
  margin: 12px;
  padding: 10px 16px;
  background: var(--accent);
  color: #FFFFFF;
  border-radius: 6px;
}

/* ─────────────────────────────── En-tête ─────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.masthead__row {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  /* Sans ces deux lignes, « MK BID » se coupe en deux au téléphone dès que le
     bouton voisin réclame de la place. */
  white-space: nowrap;
  flex-shrink: 0;
}
/* Le logo réel, et non un dessin approchant. Hauteur fixée, largeur libre :
   l'image fait 815 × 279, la contraindre en largeur la déformerait. */
.brand img { height: 30px; width: auto; }
.brand:hover { color: var(--ink); text-decoration: none; }

/* La navigation suit la marque, à GAUCHE ; c'est `margin-right: auto` qui
   repousse l'action à l'autre bout de la barre, seule. Avec `margin-left: auto`
   sur le menu, les deux se retrouvaient collés dans le coin droit. */
.menu {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: 16px;
  margin-right: auto;
}
.menu a {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
}
.menu a:hover {
  color: var(--ink);
  text-decoration: none;
}

/* Menu compact du téléphone.
 *
 * Un <details> et rien d'autre : le dépliement, le focus et la navigation au
 * clavier sont déjà dans le navigateur. Masquer simplement le menu en dessous
 * de 760 px — ce que faisait la première version — laissait le téléphone SANS
 * aucune navigation. */
.menu-compact { display: none; margin-left: auto; position: relative; }

.menu-compact > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.menu-compact > summary::-webkit-details-marker { display: none; }
.menu-compact > summary .cross { display: none; }
.menu-compact[open] > summary .bars { display: none; }
.menu-compact[open] > summary .cross { display: block; }

.menu-compact__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 232px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.menu-compact__panel a {
  padding: 13px 12px;
  border-radius: 7px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
}
.menu-compact__panel a:hover {
  background: var(--bg-sunken);
  text-decoration: none;
}
.menu-compact__panel .button { margin-top: 8px; }

/* ───────────────────────────── Boutons ───────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px et pas moins : c'est le seuil en dessous duquel une cible devient
     difficile à viser au doigt. Mais 44 et pas 54 non plus — les premiers
     boutons écrasaient la page par leur seule masse. */
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 7px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.button--solid {
  background: var(--accent);
  color: #FFFFFF;
}
.button--solid:hover {
  background: var(--accent-dark);
  color: #FFFFFF;
  text-decoration: none;
}
.button--outline {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}
.button--outline:hover {
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
}

/* L'action secondaire n'a pas à peser autant que la principale. Deux blocs
   pleins côte à côte se disputent le regard et durcissent la page ; un lien
   souligné au survol suffit à la rendre disponible sans la mettre en avant. */
.action-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}
.action-link:hover { color: var(--accent-dark); }
.action-link svg { transition: transform .15s ease; }
.action-link:hover svg { transform: translateX(3px); }
.button--wide { width: 100%; }

/* ───────────────────────────── Sections ───────────────────────────── */

.section { padding: 104px 0; }
.section--plain { background: var(--bg-sunken); }
.section + .section--ruled { border-top: 1px solid var(--rule); }

.eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.section-title {
  max-width: 21ch;
  font-size: 40px;
  line-height: 1.14;
  font-weight: 300;
  letter-spacing: -0.025em;
}
.section-title strong { font-weight: 700; }

.section-intro {
  max-width: 62ch;
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: 18px;
}

/* ─────────────────────────────── Hero ─────────────────────────────── */

.hero { padding: 112px 0 96px; }

.hero__title {
  max-width: 19ch;
  font-size: 68px;
  line-height: 1.04;
  font-weight: 200;
  letter-spacing: -0.035em;
}
.hero__title strong { font-weight: 700; }

.hero__text {
  max-width: 58ch;
  margin-top: 28px;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1.58;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
}

.hero__text--more { margin-top: 16px; font-size: 18px; }

/* La liste des domaines : elle dit d'un coup d'œil l'étendue de la plateforme,
   là où le titre seul la réduirait aux appels d'offres. Discrète à dessein —
   c'est un repère, pas un argument. */
.hero__domains {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  color: var(--ink-faint);
  font-size: 14px;
  line-height: 1.8;
}

.hero__note {
  margin-top: 22px;
  color: var(--ink-faint);
  font-size: 14.5px;
}

/* ─────────────────────── La chaîne en cinq temps ─────────────────────── */

.chain {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  margin-top: 56px;
}

.timeline { padding-top: 20px; border-top: 2px solid var(--accent); }
.timeline:nth-child(n + 3) { border-top-color: var(--rule-strong); }

.timeline__rank {
  display: block;
  margin-bottom: 10px;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
.timeline__name {
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.timeline__text {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.58;
}

/* ─────────────────────────────── Modules ─────────────────────────────── */

.modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 40px;
  margin-top: 56px;
}

.module__icon {
  margin-bottom: 16px;
  color: var(--accent);
}
.module__name {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.module__text {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* ─────────────────────────────── Tarifs ─────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--rule);
}

.plan {
  padding: 40px 44px 44px 0;
  border-right: 1px solid var(--rule);
}
.plan + .plan { padding-right: 0; padding-left: 44px; border-right: 0; }

.plan__name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.plan__for {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 15.5px;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 28px 0 4px;
}
.plan__amount {
  font-size: 38px;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.plan__unit {
  color: var(--ink-soft);
  font-size: 15px;
}
.plan__basis {
  color: var(--ink-faint);
  font-size: 14px;
}

.plan__list { margin: 30px 0 34px; }
.plan__list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}
.plan__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.plan__list li strong { color: var(--ink); font-weight: 600; }

.pricing__footer {
  margin-top: 40px;
  color: var(--ink-faint);
  font-size: 14.5px;
}

/* ───────────────────────────── Appel final ───────────────────────────── */

.cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 56px;
  padding: 88px 0;
  border-top: 1px solid var(--rule);
}
.cta__title {
  max-width: 24ch;
  font-size: 36px;
  line-height: 1.16;
  font-weight: 300;
  letter-spacing: -0.025em;
}
.cta__title strong { font-weight: 700; }
.cta__text {
  max-width: 56ch;
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 17px;
}
.cta__actions { display: flex; gap: 14px; flex-shrink: 0; }

/* ─────────────────────────────── Pied ─────────────────────────────── */

.colophon {
  padding: 36px 0;
  border-top: 1px solid var(--rule);
}
.colophon__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.colophon__legal {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-faint);
  font-size: 14.5px;
}
.colophon__links { flex-wrap: wrap; }
.colophon__links { display: flex; gap: 26px; }
.colophon__links a { color: var(--ink-soft); font-size: 14.5px; }

/* ───────────────────────────── Inscription ───────────────────────────── */

.registration {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  /* `padding-block`, surtout pas `padding` : cette classe voisine `.wrapper`
     sur le même élément, et le raccourci remettrait sa gouttière horizontale à
     zéro. Le contenu se collait alors au bord de la fenêtre. */
  padding-block: 72px 104px;
  align-items: start;
}

.form { max-width: 620px; }

.form__title {
  font-size: 40px;
  line-height: 1.12;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.form__title strong { font-weight: 700; }
.form__intro {
  max-width: 54ch;
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 17.5px;
}

.group {
  margin-top: 48px;
  padding: 26px 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
}
/* `float` sur la légende, et ce n'est pas un détail : posée normalement, une
   <legend> se place DANS le bord du <fieldset> et le coupe — il reste un trait
   orphelin à sa droite. Flottée, elle redevient un bloc ordinaire et le filet
   passe entier au-dessus. D'où le `clear` sur ce qui suit. */
.group__title {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.group__hint {
  clear: both;
  margin-bottom: 26px;
  color: var(--ink-soft);
  font-size: 15px;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.field label .optional {
  font-weight: 400;
  color: var(--ink-faint);
}
.field input,
.field select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.field input:focus,
.field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.field__hint {
  color: var(--ink-faint);
  font-size: 13.5px;
  line-height: 1.5;
}

.choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.choice__option {
  display: flex;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  cursor: pointer;
}
.choice__option:hover { border-color: var(--ink-faint); }
.choice__option input { margin: 3px 0 0; accent-color: var(--accent); }
.choice__name { font-size: 16px; font-weight: 700; }
.choice__detail { margin-top: 3px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

.consent {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.55;
}
.consent input { margin: 4px 0 0; accent-color: var(--accent); }

.form__submit { margin-top: 32px; }
.form__note {
  margin-top: 16px;
  color: var(--ink-faint);
  font-size: 14.5px;
}

.sidebar { position: sticky; top: 108px; }
.sidebar__title {
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.steps { margin-top: 22px; }
.steps li {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.steps__rank {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-veil);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.steps__text { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.steps__text strong { display: block; color: var(--ink); font-weight: 600; }

/* ──────────────────── En-tête : les deux actions ──────────────────── */

/* Elles vont ensemble, à droite. « Se connecter » en contour et « Créer mon
   compte » en plein, et non l'inverse : un site vitrine s'adresse d'abord à qui
   ne connaît pas encore le produit. Un client, lui, a son marque-page. */
.masthead__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.button--quiet {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink-soft);
}
.button--quiet:hover {
  border-color: var(--ink-faint);
  color: var(--ink);
  text-decoration: none;
}

/* La page courante se signale dans le menu. `aria-current` sert aux deux : le
   lecteur d'écran l'annonce, et le style s'y accroche — pas de classe en plus. */
.menu a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ──────────────────────── Tête de page interne ──────────────────────── */

.page-head { padding: 72px 0 24px; }
.page-head__title {
  max-width: 20ch;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 200;
  letter-spacing: -0.032em;
}
.page-head__title strong { font-weight: 700; }
.page-head__intro {
  max-width: 62ch;
  margin-top: 22px;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.6;
}

/* ─────────────────────── Une étape, en détail ─────────────────────── */

.step { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 32px; }
.step__rank {
  font-size: 44px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rule-strong);
}
.step__title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.022em;
}
.step__summary {
  max-width: 62ch;
  margin-top: 14px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
}
.step__detail {
  max-width: 68ch;
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

/* ──────────────────── Les modules, en liste compacte ──────────────────── */

.module-list {
  margin-top: 48px;
  border-top: 1px solid var(--rule);
}
.module-list li {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.module-list a {
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.module-list a:hover { color: var(--accent-dark); }
.module-list span { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }

.section-more { margin-top: 32px; }

/* ──────────────────────────── Page de contact ──────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
}
.group--first { margin-top: 0; border-top: 0; padding-top: 0; }

.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  resize: vertical;
}
.field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.contact-info { margin-top: 22px; }
.contact-info li {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.contact-info__label {
  display: block;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 600;
}
.contact-info__value { display: block; margin-top: 4px; font-size: 15.5px; }

.sidebar__text {
  margin-top: 16px;
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* ───────────────────── Valeur encore à arrêter ───────────────────── */

/* Un prix qui n'est pas décidé ne doit pas ressembler à un prix cassé. On le
   marque comme une décision en attente, pas comme un défaut d'affichage. */
.fillable {
  border-bottom: 2px dotted var(--rule-strong);
  color: var(--ink-faint);
  font-weight: 300;
  white-space: nowrap;
}

/* ───────────────────────── Aperçu du produit ───────────────────────── */

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: center;
}

.preview {
  padding: 28px 30px 30px;
  background: var(--bg-sunken);
  border-radius: 14px;
}
.preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.preview__eye {
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.preview__state {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 13px;
  background: var(--accent-veil);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
}
.preview__subject {
  margin: 20px 0 22px;
  font-size: 21px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.preview__figures {
  display: flex;
  gap: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.preview__label { color: var(--ink-faint); font-size: 12.5px; }
.preview__value { margin-top: 3px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.preview__thread { margin-top: 22px; }
.preview__thread li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 13px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.preview__thread li:last-child { margin-bottom: 0; color: var(--ink-faint); }
.preview__thread svg { flex-shrink: 0; margin-top: 1px; }

/* ─────────────────────────────── Questions ─────────────────────────────── */

.questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
  margin-top: 48px;
}
.question {
  padding: 26px 0;
  border-top: 1px solid var(--rule);
}
.question__title {
  margin-bottom: 9px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.question__text {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.6;
}

/* ─────────────────────────── Pages de texte ─────────────────────────── */

.doc {
  max-width: 68ch;
  /* Même raison que `.registration` : `.wrapper` porte la gouttière, on ne
     touche qu'aux marges verticales. */
  padding-block: 72px 96px;
}
.doc h1 {
  font-size: 40px;
  line-height: 1.14;
  font-weight: 300;
  letter-spacing: -0.03em;
}
.doc h1 strong { font-weight: 700; }
.doc__date { margin-top: 14px; color: var(--ink-faint); font-size: 14.5px; }
.doc h2 {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.doc p { margin-top: 16px; color: var(--ink-soft); }
.doc ul { margin-top: 16px; }
.doc ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--ink-soft);
}
.doc ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 6px;
  height: 1px;
  background: var(--rule-strong);
}
.doc__notice {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--bg-sunken);
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* ───────────────────────────── Adaptations ───────────────────────────── */

@media (max-width: 1040px) {
  .chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .questions { gap: 0 36px; }
  .module-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* La colonne latérale tient à droite jusqu'à 860 px. En dessous, le formulaire
   n'aurait plus la place de ses deux colonnes de champs, et elle passe dessous.
   C'était 1040 px, ce qui la faisait disparaître de la droite sur la plupart des
   écrans d'ordinateur portable. */
@media (max-width: 860px) {
  .registration,
  .contact { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sidebar { position: static; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .menu { display: none; }
  .menu-compact { display: block; }
  /* Les deux actions de la barre disparaissent au profit du menu dépliable, qui
     les porte toutes les deux. */
  .masthead__actions { display: none; }
  .page-head { padding: 48px 0 16px; }
  .page-head__title { font-size: 32px; letter-spacing: -0.022em; }
  .page-head__intro { font-size: 17px; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .step__rank { font-size: 30px; }
  .step__title { font-size: 25px; }
  .step__summary { font-size: 17px; }
  .section { padding: 72px 0; }
  .hero { padding: 64px 0; }
  .hero__title { font-size: 40px; letter-spacing: -0.025em; }
  .hero__text { font-size: 18px; }
  .section-title, .form__title { font-size: 30px; }
  .cta { flex-direction: column; align-items: flex-start; gap: 32px; }
  .cta__title { font-size: 28px; }
  .chain, .modules, .plans, .fields, .choice, .questions { grid-template-columns: minmax(0, 1fr); }
  .preview { padding: 22px 20px 24px; }
  .preview__figures { flex-wrap: wrap; gap: 18px 28px; }
  .doc { padding-block: 48px 72px; }
  .doc h1 { font-size: 30px; }
  .plan { padding: 32px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .plan + .plan { padding-left: 0; }

  /* Pleine largeur pour les appels à l'action DANS le contenu, jamais pour celui
     de l'en-tête : en pleine largeur il écrasait la marque, qui se coupait alors
     en deux lignes. */
  .hero__actions .button,
  .cta__actions .button,
  .form__submit .button { width: 100%; }
  .cta__actions { width: 100%; flex-direction: column; }
  .masthead__row { gap: 16px; }
}

/* ═══════════════════ Retours des formulaires branchés ═══════════════════
 *
 * Ces trois blocs n'existaient pas dans la maquette statique : ils servent au
 * JavaScript qui poste les formulaires et affiche ce que le serveur répond.
 *
 * `field__error` et `form__status` sont les seuls noms que site.js écrit
 * lui-même, avec l'attribut `data-state`. Les renommer ici sans les suivre
 * là-bas laisserait un retour de formulaire sans aucun style — un message
 * d'erreur en texte nu, que le visiteur risque de ne pas voir.
 */

/* L'erreur d'un champ, posée SOUS lui et non dans un bloc unique en tête :
   le visiteur voit tout de suite lequel corriger. */
.field__error {
  margin-top: 6px;
  color: #B42318;
  font-size: 13.5px;
  line-height: 1.5;
}
.field__error:empty { display: none; }

/* Un champ refusé par le serveur. `aria-invalid` sert aux deux : le lecteur
   d'écran l'annonce, et le style s'y accroche — pas de classe en plus. */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #B42318;
}
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus {
  outline-color: #B42318;
}

/* Le compte rendu global. `role="status"` le fait annoncer sans voler le
   focus ; `tabindex="-1"` permet au script de l'y amener quand même après
   l'envoi, pour que la réponse soit lue. */
.form__status {
  margin-top: 24px;
  padding: 0;
  border-radius: 9px;
  font-size: 15px;
  line-height: 1.55;
}
.form__status:empty { display: none; }
.form__status[data-state] { padding: 14px 16px; }
.form__status[data-state="pending"] {
  background: var(--bg-sunken);
  color: var(--ink-soft);
}
.form__status[data-state="success"] {
  background: #ECFDF3;
  color: #05603A;
}
.form__status[data-state="error"] {
  background: #FEF3F2;
  color: #B42318;
}

/* Le bouton pendant l'envoi : il reste lisible et cesse d'être cliquable. */
.button[disabled] { opacity: .6; cursor: default; }

/* Indicatif et numéro sur une seule ligne. Le <select> garde une largeur fixe :
   sans elle, il s'étire au plus long nom de pays et écrase le numéro. */
.field__group { display: flex; gap: 8px; }
.field__group select { flex: 0 0 auto; width: 44%; min-width: 130px; }
.field__group input { flex: 1 1 auto; min-width: 0; }

/* Le pot de miel : hors de l'écran, hors du clavier, hors des lecteurs d'écran.
   `display: none` serait plus simple mais beaucoup de robots l'ignorent
   justement parce qu'ils savent que c'est un piège ; un champ déplacé reste
   présent dans la page et se fait remplir. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}