/* Page d'offre et liste d'attente. Couleurs, typographie et espacements : jetons du design system (tokens.css). */

/* Mise en page propre à ce site. */
:root {
  --page-h1: clamp(2.25rem, 1.5rem + 3vw, 3.7rem);
  --page-h2: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  --container: 76rem;
  --container-narrow: 42rem;
}

/* Police Inter Tight (Rasmus Andersson, licence OFL, fichiers de Fontsource 5.2.5), choisie le 28 octobre 2026 pour
   toute la page d'offre : titres en 800, serrés ; servie par le site lui-même. La page de l'enquête garde les polices
   du design system (elle n'a pas data-theme). */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-tight-latin-400-normal.08fe63686389.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-tight-latin-700-normal.4e5abb7536ed.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-tight-latin-800-normal.c3e6962f1b45.woff2") format("woff2"); }

/* Maquette du 28 octobre 2026 dans l'esprit de mollie.com (docs/02) : blanc, texte presque noir, panneaux gris
   clair à coins arrondis, un seul bouton foncé, un seul bloc sombre (« Européen, de bout en bout »). Le bleu du logo
   ne sert qu'au point de l'étiquette du haut de page. Titres en graisse normale, serrés ; petites étiquettes en
   capitales à chasse fixe. Page d'offre seulement, toujours en clair (base.html : data-theme="light" écarte les
   jetons sombres de tokens.css). Contrastes : secondaire #56616b, 6,3:1 sur blanc et 5,8:1 sur le gris des panneaux. */
:root[data-theme="light"] {
  --encre: #0e1419;
  --panneau: #f2f4f5;
  --bleu-logo: #0a6a94;
  --rayon: 1rem;
  --mz-font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mz-font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --mz-font-weight-display: 400;
  --mz-letter-spacing-display: -0.04em;
  --mz-color-bg: #ffffff;
  --mz-color-surface: var(--panneau);
  --mz-color-surface-alt: var(--panneau);
  --mz-color-fg: var(--encre);
  --mz-color-fg-muted: #56616b;
  --mz-color-border: #e1e5e8;
  --mz-color-border-strong: #6b7680;
  --mz-color-accent: var(--encre);
  --mz-color-accent-hover: #000000;
  --mz-color-on-accent: #ffffff;
  --mz-color-accent-soft: var(--panneau);
  --mz-color-on-accent-soft: var(--encre);
  --mz-color-focus: var(--encre);
  --mz-shadow-card: none;
  color-scheme: light;
}

/* Le bloc sombre : jetons redéfinis pour tout ce qu'il contient. Secondaire #aab4bc, 9,1:1 sur l'encre. */
.sombre {
  --mz-color-bg: var(--encre);
  --mz-color-surface: #1a232b;
  --mz-color-surface-alt: #1a232b;
  --mz-color-fg: #ffffff;
  --mz-color-fg-muted: #aab4bc;
  --mz-color-border: rgb(255 255 255 / 0.14);
  --mz-color-border-strong: #aab4bc;
  --mz-color-accent: #ffffff;
  --mz-color-accent-hover: #ffffff;
  --mz-color-on-accent: var(--encre);
  --mz-color-accent-soft: #1a232b;
  --mz-color-on-accent-soft: #ffffff;
  --mz-color-focus: #ffffff;
  background: var(--mz-color-bg);
  color: var(--mz-color-fg);
  color-scheme: dark;
  border-radius: var(--rayon);
  padding: clamp(2rem, 1rem + 4vw, 5rem);
}

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

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

body {
  margin: 0;
  background: var(--mz-color-bg);
  color: var(--mz-color-fg);
  font-family: var(--mz-font-body);
  font-size: var(--mz-font-size-md);
  line-height: var(--mz-line-height-normal);
}

h1,
h2,
h3 {
  font-family: var(--mz-font-display);
  font-weight: var(--mz-font-weight-display);
  letter-spacing: var(--mz-letter-spacing-display);
  line-height: var(--mz-line-height-tight);
  margin: 0 0 var(--mz-space-4);
  text-wrap: balance;
}

h1 { font-size: var(--page-h1); }
h2 { font-size: var(--page-h2); line-height: 1.05; margin-bottom: var(--mz-space-6); }
h3 { font-size: 1.375rem; letter-spacing: -0.02em; }

p { margin: 0 0 var(--mz-space-4); }

a {
  color: var(--mz-color-accent);
  text-underline-offset: 0.15em;
}

a:hover { color: var(--mz-color-accent-hover); }

:focus-visible {
  outline: 3px solid var(--mz-color-focus);
  outline-offset: 3px;
}

main:focus,
.section[tabindex="-1"]:focus { outline: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--mz-space-4);
  top: -10rem;
  padding: var(--mz-space-2) var(--mz-space-4);
  background: var(--mz-color-surface);
  color: var(--mz-color-fg);
  border-radius: var(--mz-radius-sm);
  z-index: 10;
}

.skip-link:focus { top: var(--mz-space-4); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--mz-space-4);
}

/* Colonne de lecture alignée à gauche sur les autres sections. */
.container--narrow > * { max-width: var(--container-narrow); }

@media (min-width: 48rem) {
  .container { padding: 0 var(--mz-space-8); }
}

.muted {
  color: var(--mz-color-fg-muted);
  font-size: var(--mz-font-size-sm);
}

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

.site-header__inner,
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mz-space-4);
  padding-top: var(--mz-space-4);
  padding-bottom: var(--mz-space-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.wordmark img { display: block; height: 1.75rem; width: auto; }

.lang-switch,
.footer-links {
  display: flex;
  gap: var(--mz-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links { flex-wrap: wrap; gap: var(--mz-space-2) var(--mz-space-4); }

.lang-switch a {
  display: inline-block;
  padding: var(--mz-space-1) var(--mz-space-2);
  font-size: var(--mz-font-size-sm);
  font-weight: 600;
}

.lang-switch a[aria-current] {
  color: var(--mz-color-fg);
  text-decoration: none;
}

.site-footer {
  border-top: 1px solid var(--mz-color-border);
  color: var(--mz-color-fg-muted);
  font-size: var(--mz-font-size-sm);
}

.site-footer p { margin: 0; }

/* Sections */

/* Haut de page centré : étiquette, titre au mot rotatif (js/titre.js), deux boutons, puis la vidéo en grand dans
   un panneau gris. */
.hero {
  padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0 0;
  text-align: center;
  overflow-x: clip;
}

.hero h1 {
  max-width: 20ch;
  margin: var(--mz-space-6) auto 0;
  font-size: clamp(2.25rem, 1rem + 4.5vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}
/* Accueil : titre plus grand, sur deux lignes imposées ; le mot le plus long (« alternative à Workspace ») tient sur
   une ligne de 320 px à 1440 px de large. */
.hero--accueil h1 { max-width: none; font-size: clamp(1.75rem, 0.4rem + 7vw, 5.6rem); line-height: 1.02; }

.hero__ligne { display: block; }

/* Mot rotatif : chaque mot glisse de bas en haut ; la case prend la largeur du mot affiché pour que la ligne reste
   centrée, et ne coupe qu'en hauteur. */
.tourne {
  position: relative;
  display: inline-block;
  height: 1.1em;
  vertical-align: bottom;
  clip-path: inset(0 -100vw);
  transition: width 0.6s cubic-bezier(0.7, 0, 0.2, 1);
}
.tourne > span {
  position: absolute;
  left: 50%;
  top: 0;
  white-space: nowrap;
  transform: translate(-50%, 0);
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.6s;
}
.tourne > span.avant { transform: translate(-50%, -100%); opacity: 0; }
.tourne > span.apres { transform: translate(-50%, 100%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .tourne, .tourne > span { transition: none; }
}

.hero .lead { max-width: 50ch; margin: var(--mz-space-6) auto 0; }
.hero__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; margin: var(--mz-space-8) 0 0; }
.hero .muted { margin: var(--mz-space-4) 0 0; font-size: var(--mz-font-size-sm); }
.hero .demo { margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 0; }
.hero .demo__cadre { padding: clamp(0.875rem, 4vw, 3.5rem) clamp(0.875rem, 5vw, 4.5rem) 0; }
.hero .demo__video { border-radius: 0.625rem 0.625rem 0 0; }
.hero .demo__legende { margin-inline: auto; }

/* Petites étiquettes au-dessus des titres, en capitales à chasse fixe ; un point bleu dans le haut de page. */
.etiquette {
  margin: 0 0 var(--mz-space-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mz-color-fg-muted);
}
.etiquette--point::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.625rem;
  border-radius: 50%;
  background: var(--bleu-logo);
  vertical-align: 0.1em;
}
.etiquette + h2 { margin-top: 0; }

.intro {
  max-width: 54ch;
  font-size: 1.125rem;
  color: var(--mz-color-fg-muted);
  margin-bottom: var(--mz-space-8);
}

.subhead {
  margin-top: var(--mz-space-24);
  margin-bottom: var(--mz-space-4);
}

.lead {
  max-width: 40rem;
  font-size: 1.125rem;
  color: var(--mz-color-fg-muted);
  margin-bottom: var(--mz-space-8);
}

/* Lien « Guides » au-dessus du titre d'un guide : même étiquette que les sections. */
.eyebrow {
  margin: 0 0 var(--mz-space-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Sections toutes blanches : la moitié de l'espace en haut, l'autre en bas, de 5 rem sur téléphone à 8,5 rem sur
   grand écran entre deux titres. */
.section {
  padding: clamp(2.5rem, 1.5rem + 3vw, 4.25rem) 0;
  scroll-margin-top: var(--mz-space-4);
}

.section > .container > :last-child { margin-bottom: 0; }

.steps,
.features {
  display: grid;
  gap: var(--mz-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
}

/* Accueil : les trois points de départ (termes de référence, 11.11), lien en pied de carte. */
.paths {
  display: grid;
  gap: var(--mz-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .paths { grid-template-columns: repeat(3, 1fr); }
}

.paths li {
  display: flex;
  flex-direction: column;
  gap: var(--mz-space-3);
  background: var(--mz-color-surface);
  border-radius: var(--rayon);
  padding: var(--mz-space-8);
}

.paths h3,
.paths p { margin: 0; }
.paths p { color: var(--mz-color-fg-muted); }
.paths p:last-child { margin-top: auto; padding-top: var(--mz-space-4); }
.paths p:last-child a { color: var(--mz-color-fg); font-weight: 500; text-decoration: none; }
.paths p:last-child a::after { content: " →"; }
.paths p:last-child a:hover { text-decoration: underline; }

.steps { counter-reset: step; }

.steps li,
.features li {
  background: var(--mz-color-surface);
  border-radius: var(--rayon);
  padding: var(--mz-space-8);
}

/* Points de repère : une liste entre de fines lignes, à côté de la vidéo. */
.points { margin: var(--mz-space-8) 0 0; padding: 0; list-style: none; }
.points li { padding: var(--mz-space-5, 1.25rem) 0; border-top: 1px solid var(--mz-color-border); }
.points h3 { margin: 0 0 var(--mz-space-1); font-size: 1.125rem; letter-spacing: -0.01em; }
.points p { margin: 0; color: var(--mz-color-fg-muted); }

.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--mz-space-4);
  border-radius: 50%;
  background: var(--mz-color-fg);
  color: var(--mz-color-bg);
  font-family: var(--font-mono);
  font-size: var(--mz-font-size-sm);
}

.steps p,
.features p { margin: 0; color: var(--mz-color-fg-muted); }

/* Tableaux : de fines lignes, aucun cadre, comme les listes de fournisseurs. */

.table-wrap { overflow-x: auto; }
/* Laisser respirer (retour du 28 octobre 2026) : un vrai blanc avant et après chaque tableau et chaque liste. */
.table-wrap, :not(.table-wrap) > table, .acteurs, .features, .steps, .paths, .faq { margin-block: var(--mz-space-12); }
:is(.table-wrap, table, .acteurs, .features, .steps, .paths, .faq) + :not(.subhead) { margin-top: var(--mz-space-12); }
.subhead + .muted, h2 + .intro { margin-bottom: var(--mz-space-8); }

table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  text-align: left;
  color: var(--mz-color-fg-muted);
  font-size: var(--mz-font-size-sm);
  padding-bottom: var(--mz-space-3);
}
/* Comparatifs et équivalences : la légende sert de sous-titre au tableau, loin du titre de la section (« ça devrait
   pas être un titre ? », 28 octobre 2026). Même allure qu'un h3, sans en être un : elle nomme le tableau. */
:is(.compare, .equivalences) caption {
  font-family: var(--mz-font-display);
  font-weight: var(--mz-font-weight-display);
  font-size: 1.375rem;
  line-height: var(--mz-line-height-tight);
  letter-spacing: -0.02em;
  color: var(--mz-color-fg);
  text-wrap: balance;
  padding-bottom: var(--mz-space-6);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--mz-space-6) var(--mz-space-6) var(--mz-space-6) 0;
  border-bottom: 1px solid var(--mz-color-border);
}

thead th {
  vertical-align: bottom;
  padding-top: 0;
  padding-bottom: var(--mz-space-3);
  font-size: var(--mz-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mz-color-fg-muted);
}

tbody th {
  font-family: var(--mz-font-display);
  font-weight: 500;
}

/* Équivalences : l'outil de Google en chasse fixe, gris ; son équivalent dans Mezigo. Filet foncé en tête. */
.equivalences { border-top: 1px solid var(--mz-color-fg); }
.equivalences thead th { padding-top: var(--mz-space-4); }
.equivalences tbody th {
  width: 32%;
  font-family: var(--font-mono);
  font-size: var(--mz-font-size-sm);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--mz-color-fg-muted);
}

/* Accueil (equivalences--mezigo) : l'outil de Mezigo en tête de ligne, en texte courant ; Google et Microsoft en
   chasse fixe, gris. Sur téléphone, l'outil sur sa ligne, puis Google et Microsoft côte à côte. */
.equivalences--mezigo tbody th {
  width: 44%;
  font-family: var(--mz-font-body);
  font-size: var(--mz-font-size-md);
  letter-spacing: 0;
  color: var(--mz-color-fg);
}
.equivalences--mezigo tbody td {
  width: 28%;
  font-family: var(--font-mono);
  font-size: var(--mz-font-size-sm);
  color: var(--mz-color-fg-muted);
}
.equivalences--mezigo tbody > tr > * { vertical-align: baseline; }

/* Comparatifs (« ça mérite d'être plus clair », 28 octobre 2026) : le point comparé en petites capitales à chasse
   fixe, la colonne de Google en gris, la colonne Mezigo en encre pleine, texte blanc et coche devant chaque réponse. */
.compare tbody th {
  width: 22%;
  font-family: var(--font-mono);
  font-size: var(--mz-font-size-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mz-color-fg-muted);
}
.compare tbody > tr > * { vertical-align: baseline; }
.compare td { width: 39%; color: var(--mz-color-fg-muted); }
.compare th:last-child,
.compare td:last-child {
  padding-left: var(--mz-space-6);
  background: var(--encre);
  color: #ffffff;
  border-bottom-color: rgb(255 255 255 / 0.14);
}
.compare td:last-child { font-weight: 500; }
.compare td:last-child::before { content: "✓  " / ""; white-space: pre; }
.compare thead th:last-child {
  padding-top: var(--mz-space-4);
  border-radius: var(--rayon) var(--rayon) 0 0;
  color: #ffffff;
}
.compare tbody tr:last-child td:last-child { border-radius: 0 0 var(--rayon) var(--rayon); }
.compare tbody tr:last-child > * { border-bottom: 0; }

/* Téléphone : chaque point sur sa propre ligne, puis les deux réponses côte à côte. */
@media (max-width: 47.99rem) {
  .compare,
  .compare thead,
  .compare tbody { display: block; }
  .compare tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--mz-space-3);
    border-bottom: 1px solid var(--mz-color-border);
  }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare thead th:first-child { display: none; }
  .compare th,
  .compare td { width: auto; border-bottom: 0; font-size: var(--mz-font-size-sm); }
  .compare caption { display: block; }
  .compare tbody th { grid-column: 1 / -1; width: auto; padding-top: var(--mz-space-6); padding-bottom: 0; font-size: var(--mz-font-size-xs); }
  .compare td { padding-top: var(--mz-space-3); padding-bottom: var(--mz-space-3); margin-block: var(--mz-space-3) var(--mz-space-6); }
  .compare th:last-child,
  .compare td:last-child { padding-left: var(--mz-space-3); padding-right: var(--mz-space-3); border-radius: var(--mz-radius-sm); }
  .compare tbody tr:last-child td:last-child { border-radius: var(--mz-radius-sm); }
  .equivalences tbody th { width: 38%; font-size: var(--mz-font-size-xs); }
  .equivalences th, .equivalences td { padding-right: var(--mz-space-3); }
  .equivalences--mezigo,
  .equivalences--mezigo thead,
  .equivalences--mezigo tbody { display: block; }
  .equivalences--mezigo caption { display: block; }
  .equivalences--mezigo tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--mz-space-3);
    border-bottom: 1px solid var(--mz-color-border);
  }
  .equivalences--mezigo thead th:first-child { display: none; }
  .equivalences--mezigo th,
  .equivalences--mezigo td { width: auto; border-bottom: 0; }
  .equivalences--mezigo tbody th { grid-column: 1 / -1; width: auto; padding-top: var(--mz-space-4); padding-bottom: var(--mz-space-2); font-size: var(--mz-font-size-md); }
  .equivalences--mezigo tbody td { width: auto; padding-top: 0; padding-bottom: var(--mz-space-4); font-size: var(--mz-font-size-xs); }
}

/* Prix et liste d'attente dans un même panneau gris (_offre.html) ; le formulaire sur fond blanc. */

.offre {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  padding: clamp(1.5rem, 0.5rem + 5vw, 4.5rem);
  border-radius: var(--rayon);
  background: var(--panneau);
}
@media (min-width: 56rem) {
  /* Le prix ne prend que sa place, le formulaire tout le reste (« élargis le formulaire », 28 octobre 2026). */
  .offre { grid-template-columns: max-content minmax(0, 1fr); align-items: start; }
}

.price__amount { margin: var(--mz-space-4) 0 0; font-size: 1.125rem; color: var(--mz-color-fg-muted); }
.price__amount strong {
  display: block;
  margin-bottom: var(--mz-space-3);
  font-family: var(--mz-font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 2rem + 5vw, 6rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--mz-color-fg);
}

.coches { margin: var(--mz-space-8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--mz-space-3); }
.coches li { display: flex; gap: var(--mz-space-3); }
.coches li::before { content: "✓" / ""; font-weight: 700; }

.offre__formulaire {
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: 0.75rem;
  background: #ffffff;
}
.offre__formulaire h2 { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); margin-bottom: var(--mz-space-3); }
.offre__formulaire > p { color: var(--mz-color-fg-muted); }

/* Boutons */

.button {
  display: inline-block;
  padding: 0.75rem 1.375rem;
  border: 0;
  border-radius: 999px;
  background: var(--mz-color-accent);
  color: var(--mz-color-on-accent);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.button--clair { background: var(--panneau); color: var(--mz-color-fg); }
.button--clair:hover { background: #e3e8eb; color: var(--mz-color-fg); }
.button--petit { padding: 0.5rem 1rem; font-size: var(--mz-font-size-sm); }

.button:hover {
  background: var(--mz-color-accent-hover);
  color: var(--mz-color-on-accent);
}

/* Formulaire */

.form { margin-top: var(--mz-space-8); }
/* Le bouton se détache des cases à cocher (retour du 27 octobre 2026 : collé au lien de confidentialité). */
.form > button[type="submit"] { margin-top: var(--mz-space-6); }

.field {
  margin: 0 0 var(--mz-space-6);
}

fieldset.field {
  border: 0;
  padding: 0;
}

label,
legend {
  display: block;
  font-weight: 600;
  margin-bottom: var(--mz-space-2);
}

legend { padding: 0; }

.hint {
  margin: 0 0 var(--mz-space-2);
  color: var(--mz-color-fg-muted);
  font-size: var(--mz-font-size-sm);
}

input[type="email"],
input[type="text"] {
  width: 100%;
  padding: var(--mz-space-3);
  border: 1px solid var(--mz-color-border-strong);
  border-radius: var(--mz-radius-sm);
  background: var(--mz-color-surface);
  color: var(--mz-color-fg);
  font: inherit;
}

.field--error input[type="email"],
.field--error input[type="text"] {
  border: 2px solid var(--mz-color-danger);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--mz-space-3);
  margin-bottom: var(--mz-space-2);
}

.choice input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  accent-color: var(--mz-color-accent);
}

.choice label {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 400;
  margin: 0;
}

.field.choice { flex-wrap: wrap; }
.field.choice .error { flex-basis: 100%; }

.error {
  margin: 0 0 var(--mz-space-2);
  color: var(--mz-color-danger);
  font-weight: 600;
}

.error-summary {
  margin-bottom: var(--mz-space-8);
  padding: var(--mz-space-4) var(--mz-space-6);
  border-left: 4px solid var(--mz-color-danger);
  background: var(--mz-color-danger-soft);
}

.error-summary h3 { color: var(--mz-color-danger); }
.error-summary ul { margin: 0; padding-left: var(--mz-space-6); }
.error-summary a { color: var(--mz-color-danger); }

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Questions et pages de texte */

/* Questions fréquentes en accordéons (<details>) : au clavier et sans JavaScript. */
.faq { border-bottom: 1px solid var(--mz-color-border); }
.faq__item { border-top: 1px solid var(--mz-color-border); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mz-space-4);
  min-height: 3rem;
  padding: var(--mz-space-6) 0;
  font-family: var(--mz-font-display);
  font-weight: 500;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  line-height: var(--mz-line-height-tight);
  list-style: none;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker { display: none; }

/* « + » fermé, « − » ouvert. */
.faq__item summary::after {
  content: "+" / "";
  flex: none;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
}

.faq__item[open] summary::after { content: "−" / ""; }
.faq__item summary:hover { color: #000000; }
.faq__item summary:focus-visible { outline: 2px solid var(--mz-color-focus); outline-offset: 2px; border-radius: var(--mz-radius-sm); }
.faq__item p { margin: 0; padding: 0 var(--mz-space-8) var(--mz-space-8) 0; color: var(--mz-color-fg-muted); }


/* Fournisseurs et logiciels : une ligne chacun, logo, nom et rôle, pays à droite ; de fines lignes, aucun cadre. */
.acteurs {
  margin: var(--mz-space-8) 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--mz-color-border);
}

.acteur {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--mz-space-4) var(--mz-space-6);
  padding: var(--mz-space-5, 1.25rem) 0;
  border-top: 1px solid var(--mz-color-border);
}

.acteur p { margin: 0; }
.acteur__texte { display: grid; gap: var(--mz-space-1); }

/* Marque d'une couleur dans un carré teinté ; initiale quand aucune marque libre n'existe. */
.acteur__logo {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: #ffffff;
  color: var(--encre);
}

.acteur__logo svg { width: 1.25rem; height: 1.25rem; }
.acteur__logo .acteur__mot { width: 1.875rem; height: auto; }
.acteur__paire { display: flex; align-items: center; gap: 0.1875rem; }
.acteur__paire svg { width: 0.9375rem; height: 0.9375rem; }

.acteur__initiale {
  font-family: var(--mz-font-display);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1;
}

.acteur__nom {
  font-family: var(--mz-font-display);
  font-weight: 500;
  font-size: var(--mz-font-size-md);
  line-height: var(--mz-line-height-tight);
}

.acteur__role { color: var(--mz-color-fg-muted); }
.acteur__detail { color: var(--mz-color-fg-muted); font-size: var(--mz-font-size-sm); }

.acteur__pays {
  display: flex;
  align-items: center;
  gap: var(--mz-space-2);
  font-size: var(--mz-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

.acteur__code {
  padding: 0.125rem 0.625rem;
  border-radius: var(--mz-radius-pill);
  border: 1px solid var(--mz-color-border);
  font-family: var(--font-mono);
  font-size: var(--mz-font-size-xs);
  letter-spacing: 0.06em;
}

/* Téléphone : le pays passe sous le rôle. */
@media (max-width: 35.99rem) {
  .acteur { grid-template-columns: 2.5rem minmax(0, 1fr); align-items: start; }
  .acteur__pays { grid-column: 2; }
}

.prose h2 {
  font-size: 1.375rem;
  margin: var(--mz-space-8) 0 var(--mz-space-3);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Vidéos de démonstration (waitlist/_demo.html, js/demos.js) */

.demo { margin: var(--mz-space-8) 0; }

.demo__cadre {
  position: relative;
  overflow: hidden;
  padding: clamp(0.875rem, 3vw, 2.5rem);
  border-radius: var(--rayon);
  background: var(--mz-color-surface);
}

.demo__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--mz-color-border), 0 1.875rem 3.75rem -1.25rem rgb(14 20 25 / 0.25);
}

.demo__bouton {
  position: absolute;
  right: var(--mz-space-4);
  bottom: var(--mz-space-4);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mz-color-fg);
  color: var(--mz-color-surface);
  opacity: 0.85;
  cursor: pointer;
}

.demo__bouton:hover { opacity: 1; }

/* Lecture : triangle ; pause : deux barres. */
.demo__bouton::before {
  content: "";
  margin-left: 0.2rem;
  border-style: solid;
  border-width: 0.45rem 0 0.45rem 0.75rem;
  border-color: transparent transparent transparent currentColor;
}

.demo__bouton--pause::before {
  width: 0.25rem;
  height: 0.875rem;
  margin: 0 0.45rem 0 0;
  border: 0;
  background: currentColor;
  box-shadow: 0.45rem 0 0 currentColor;
}

.demo__legende {
  max-width: 40rem;
  margin-top: var(--mz-space-3);
  color: var(--mz-color-fg-muted);
  font-size: var(--mz-font-size-sm);
}



/* Texte et vidéo côte à côte sur grand écran : vidéo à droite dans le hero, puis à gauche et à droite en alternance
   (split--inverse) ; l'un sous l'autre sur téléphone et tablette, le texte d'abord. */
@media (min-width: 64rem) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--mz-space-12);
    align-items: center;
  }
  .split--inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--inverse > .demo { order: -1; }
  .split > .demo { margin-block: 0; }
  .split__texte > :last-child { margin-bottom: 0; }
  .section .split { margin-bottom: var(--mz-space-12); }
}

/* Navigation principale */

.site-header__inner { justify-content: flex-start; }
.site-header__inner .wordmark { margin-right: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--mz-space-4);
  font-size: var(--mz-font-size-sm);
  font-weight: 500;
}
.site-nav a:not(.button) { color: var(--mz-color-fg); text-decoration: none; }
.site-nav a:not(.button):hover { text-decoration: underline; }

.site-nav a[aria-current] {
  color: var(--mz-color-fg);
}

/* Guides */

.guide-list {
  display: grid;
  gap: var(--mz-space-6);
  margin: var(--mz-space-8) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .guide-list { grid-template-columns: repeat(2, 1fr); }
}

.guide-list li {
  background: var(--mz-color-surface);
  border: 1px solid var(--mz-color-border);
  border-radius: var(--mz-radius-md);
  box-shadow: var(--mz-shadow-card);
  padding: var(--mz-space-6);
}

.guide-list h2,
.guide-list h3 {
  font-size: 1.375rem;
  margin-bottom: var(--mz-space-3);
}

.guide-list p { margin: 0; color: var(--mz-color-fg-muted); }

.guide > .container > * { max-width: var(--container-narrow); }
.guide > .container > .table-wrap,
.guide section .table-wrap { max-width: none; }

.guide__header h1 { font-size: var(--page-h2); }
.guide__header .lead { font-size: 1.125rem; }

.guide section h2 {
  font-size: 1.5rem;
  margin: var(--mz-space-12) 0 var(--mz-space-4);
}

.guide section h3 { margin-top: var(--mz-space-6); }

.guide li { margin-bottom: var(--mz-space-2); }

.guide table { margin-bottom: var(--mz-space-4); }

.toc {
  background: var(--mz-color-surface-alt);
  border-radius: var(--mz-radius-md);
  padding: var(--mz-space-4) var(--mz-space-6);
  margin: var(--mz-space-8) 0;
}

.toc h2 {
  font-size: var(--mz-font-size-md);
  margin: 0 0 var(--mz-space-2);
}

.toc ol { margin: 0; padding-left: var(--mz-space-6); }
.toc li { margin: 0; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--mz-color-surface-alt);
  border-radius: 4px;
  padding: 0.1em 0.3em;
}

pre {
  overflow-x: auto;
  margin: 0 0 var(--mz-space-4);
  padding: var(--mz-space-4);
  background: var(--mz-color-surface-alt);
  border: 1px solid var(--mz-color-border);
  border-radius: var(--mz-radius-sm);
  line-height: 1.5;
}

pre code { background: none; padding: 0; font-size: var(--mz-font-size-sm); }

.checklist { list-style: none; padding: 0; }

.checklist li {
  position: relative;
  padding-left: var(--mz-space-8);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.1em;
  height: 1.1em;
  border: 2px solid var(--mz-color-border-strong);
  border-radius: 4px;
}

.cta {
  margin: var(--mz-space-12) 0 var(--mz-space-6);
  padding: var(--mz-space-8);
  background: var(--mz-color-surface-alt);
  border-radius: var(--mz-radius-md);
}

.cta h2 { margin-bottom: var(--mz-space-3); font-size: 1.5rem; }

/* Invitation à l'enquête (docs/02, section 4.1) et section de l'accueil : le bloc sombre de la page (encre, coins
   arrondis, sans liseré), en blanc sur encre comme lui : aucune couleur d'appel sur la page (retour du 28 octobre 2026). */
.invite,
.survey-band {
  --invite-bg: var(--encre, #0e1419);
  --invite-raise: #1a232b;
  --invite-line: #3a4650;
  --invite-fg: #ffffff;
  --invite-muted: #aab4bc;
  --invite-accent: #ffffff;
  --invite-accent-ink: var(--encre, #0e1419);
  background: var(--invite-bg);
  color: var(--invite-fg);
  border: 0;
  border-radius: var(--rayon, 1rem);
  color-scheme: dark;
}
/* Fenêtre modale centrée sur l'écran, horizontalement et verticalement (retour du 27 octobre 2026). */
.invite {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(26rem, calc(100vw - 32px));
  max-width: none;
  height: fit-content;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px 24px 20px;
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.45);
  transform: translateY(16px) scale(.97);
  opacity: 0;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.invite[open] { display: grid; gap: 12px; }
.invite--in { transform: none; opacity: 1; }
.invite::backdrop { background: rgb(4 9 13 / 0.62); }
.invite__eyebrow {
  margin: 0;
  padding-right: 32px;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--invite-muted);
}
.invite__title {
  margin: 0;
  font-family: var(--mz-font-display);
  font-size: 2.4rem;
  font-weight: var(--mz-font-weight-display);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--invite-fg);
}
.invite__title em { font-style: normal; color: var(--invite-accent); }
.invite__text { margin: 0; color: var(--invite-muted); font-size: var(--mz-font-size-sm); }
.invite__arc { display: block; width: 100%; height: auto; margin-block: -4px; }
.invite__arc text { font-family: var(--mz-font-body); font-size: 17px; fill: var(--invite-muted); }
.invite__arc .invite__you { fill: var(--invite-fg); font-weight: var(--mz-font-weight-strong); }
.invite__arc .invite__q { font-family: var(--mz-font-display); font-size: 36px; font-weight: var(--mz-font-weight-display); fill: var(--invite-accent); }
.invite__track { fill: none; stroke: var(--invite-line); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; }
.invite__trail { fill: none; stroke: var(--invite-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 60 600; animation: invite-travel 3.2s cubic-bezier(.5, 0, .5, 1) infinite; }
.invite__home { fill: var(--invite-accent); }
.invite__halo { fill: none; stroke: var(--invite-accent); opacity: .35; transform-origin: 46px 110px; animation: invite-pulse 2.4s ease-out infinite; }
@keyframes invite-travel { from { stroke-dashoffset: 60; } to { stroke-dashoffset: -480; } }
@keyframes invite-pulse { from { transform: scale(.6); opacity: .5; } to { transform: scale(2.2); opacity: 0; } }
.invite__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 2px 0 0; }
.invite__start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--mz-radius-pill);
  background: var(--invite-accent);
  color: var(--invite-accent-ink);
  font-weight: 500;
  text-decoration: none;
  transition: transform .15s;
}
.invite__start:hover { transform: translateY(-1px); color: var(--invite-accent-ink); }
.invite__start:focus-visible { outline: 2px solid var(--invite-fg); outline-offset: 3px; }
.invite__later {
  font: inherit;
  font-size: var(--mz-font-size-sm);
  color: var(--invite-muted);
  background: none;
  border: 0;
  min-height: 44px;
  padding: 4px 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.invite__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--invite-muted);
  cursor: pointer;
}
.invite__close:hover { color: var(--invite-fg); background: var(--invite-raise); }
@media (max-width: 560px) {
  .invite { padding: 22px 18px 18px; }
  .invite__title { font-size: 2.1rem; }
  .invite__start { flex: 1 1 auto; }
}
/* Section de l'accueil : le texte à gauche, l'arc à droite ; l'un sous l'autre sur téléphone. */
.survey-band {
  display: grid;
  gap: var(--mz-space-6);
  align-items: center;
  padding: clamp(24px, 5vw, 48px);
}
.survey-band__body { display: grid; gap: 14px; }
.survey-band .invite__title { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.survey-band .invite__text { font-size: var(--mz-font-size-md); max-width: 34rem; }
@media (min-width: 48rem) {
  .survey-band { grid-template-columns: 1.1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .invite { transition: none; transform: none; }
  .invite__trail, .invite__halo { animation: none; }
}