/* ===========================================================
   Mecantek Studio — design system

   Même direction que le site d'usinage, et c'est délibéré : page
   blanche, structure de feuille à dessin, type navy, filets fins,
   beaucoup d'air. Une seule surface sombre, le pied de page.

   Ce que ce système transpose au logiciel : la voix mono sert de
   langage d'étiquettes — numéros d'étape, libellés de section,
   entêtes de tableau. Ici elle nomme aussi les plateformes et les
   langages, qui sont à un projet logiciel ce que la matière et la
   tolérance sont à une pièce usinée.

   Rien dans ce fichier ne dépend du site d'usinage, et rien ne le
   mentionne : c'est le même vocabulaire visuel, pas la même marque.
=========================================================== */
:root {
  /* --- couleur --- */
  --paper: #ffffff;
  --bone: #f6f7f9;        /* teinte de section, à peine là          */
  --ink: #0e1a24;         /* titres                                 */
  --navy: #113c5f;        /* marque — 11.5:1 sur blanc              */
  --navy-600: #2c5c82;    /* étiquettes mono — 6.6:1 sur blanc      */
  --navy-900: #0a2436;    /* fond du pied de page                   */
  --steel: #4a6478;       /* texte courant — 6.2:1 sur blanc        */
  --steel-200: #ccd8e0;
  --accent: #2e6fb0;      /* 5.2:1 sur blanc — marques, jamais du texte long */
  --accent-deep: #17497f;
  --rule: rgba(17, 60, 95, 0.12);
  --rule-dark: rgba(255, 255, 255, 0.14);
  --ok: #2f7a4f;
  --alerte: #b3492f;

  /* --- type --- */
  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --fs-display: clamp(2.35rem, 5vw, 4rem);
  --fs-hero: clamp(1.8rem, 2.9vw, 3rem);
  --fs-h2: clamp(2rem, 4vw, 3.25rem);
  --fs-h3: clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-lead: clamp(1.05rem, 1.3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.6875rem;

  /* --- mise en page --- */
  --max-w: 1280px;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);
  --sp-section: clamp(5.5rem, 11vw, 9.5rem);
  --sp-block: clamp(2.5rem, 5vw, 4.5rem);
  --radius: 14px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; }

/* [hidden] est la façon dont le script masque les étapes du
   questionnaire et les boutons de navigation. Le `display: none` que
   lui donne le navigateur vient de SA feuille de style, donc n'importe
   quelle règle d'auteur qui déclare un display le bat — `.btn` est en
   inline-flex, et sans cette ligne les boutons Précédent et Envoyer
   restent visibles dès la première étape. Le !important est ici la
   réponse juste : masquer est une intention, pas une suggestion. */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
}
h3 { line-height: 1.15; letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

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

/* Sort un élément de l'écran sans le sortir du flux pour un lecteur
   d'écran. Sert au piège à robots et au lien d'évitement. */
.visuallyhidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- primitives ---------- */
.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy-600);
}

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--steel); max-width: 46ch; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.btn--primary { background: var(--navy); color: var(--paper); }
.btn--primary:hover { background: var(--navy-600); transform: translateY(-1px); }
.btn--ghost { border-color: var(--rule); color: var(--navy); }
.btn--ghost:hover { border-color: var(--navy-600); background: rgba(17, 60, 95, 0.04); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* Deux libellés pour un même bouton : le long par défaut, le court
   en dessous de 560px. Deux éléments plutôt qu'un fragment masqué,
   parce qu'un libellé raccourci par troncature donne « Je suis un »,
   qui ne dit plus rien. Un seul des deux est rendu à la fois, donc
   rien n'est lu deux fois par un lecteur d'écran. */
.btn__court { display: none; }

.s-head { max-width: 54ch; }
.s-head h2 { font-size: var(--fs-h2); margin-top: 1.1rem; }
.s-head .lead { margin-top: 1.4rem; }

/* ===========================================================
   Accueil — la lecture de cinq secondes

   Même règle directrice que l'autre site : quelqu'un qui arrive ici
   et qui ne défile ni ne clique doit repartir en sachant ce qu'on
   fabrique et comment nous joindre. Donc le titre nomme le métier en
   une phrase, les trois lignes de service sont dessous, et les deux
   portes du questionnaire sont immédiatement en dessous — sur un
   portable elles sont déjà à moitié visibles, et c'est ça qui tire
   le défilement.
=========================================================== */
.hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.hero h1 {
  font-size: var(--fs-display);
  margin-top: 1.1rem;
  max-width: 22ch;
  text-wrap: balance;
}

/* Les lignes de service, posées en liste plutôt qu'en phrase : on lit
   trois noms, pas une proposition à analyser. En mono, parce que sur
   ce site le mono est la voix des étiquettes structurelles. */
.hero__lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: -0.005em;
  color: var(--steel);
}
.hero__lines li { display: flex; align-items: baseline; gap: 0.55rem; }
.hero__lines li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--accent);
  transform: translateY(-1px);
}

/* La promesse qui différencie l'offre. Elle occupe la place que le
   délai de fabrication occupe sur l'autre site : une phrase de
   positionnement, pas un argument de vente. */
.hero__promesse {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-size: var(--fs-small);
  color: var(--steel);
  max-width: 62ch;
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
}
.hero__promesse strong { color: var(--navy); font-weight: 600; }

/* ===========================================================
   Les deux portes — le cœur de l'accueil

   Tout le site converge ici. Deux carrés, pas trois : la question
   « êtes-vous une entreprise ou un particulier ? » n'a que deux
   réponses, et chacune mène à un questionnaire différent parce que
   les questions utiles ne sont pas les mêmes.

   Le carré entier est cliquable, pas seulement le lien : c'est une
   cible de 300 px de haut, et rater une cible de cette taille parce
   qu'on a cliqué à côté du texte serait absurde. Le <a> reste le
   vrai lien, pour le clavier et pour l'historique.
=========================================================== */
.choix {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--bone);
  border-bottom: 1px solid var(--rule);
}
.choix__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.porte {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(260px, 30vw, 340px);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease);
}
.porte:hover {
  border-color: rgba(17, 60, 95, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -32px rgba(10, 36, 54, 0.55);
}
.porte svg { width: clamp(64px, 8vw, 88px); height: auto; margin-bottom: auto; }
.porte h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  margin-top: 1.75rem;
  letter-spacing: -0.03em;
}
.porte p {
  margin-top: 0.7rem;
  font-size: var(--fs-small);
  color: var(--steel);
  max-width: 34ch;
}
.porte__go {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.porte__go::after { content: "→"; transition: transform 0.3s var(--ease); }
.porte:hover .porte__go::after { transform: translateX(3px); }

/* Étend la zone cliquable du lien à toute la carte. Le lien garde son
   rôle — focus clavier, clic milieu, copie d'adresse — mais sa cible
   couvre le carré. */
.porte__go::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

/* ===========================================================
   Bande « pour qui » — l'emphase travailleur autonome

   Visiblement plus légère que les deux portes : c'est un argument,
   pas une troisième porte. Un filet au-dessus et au-dessous, une
   teinte, et rien d'autre.
=========================================================== */
.pour-qui { border-block: 1px solid var(--rule); background: var(--paper); }
.pour-qui .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.pour-qui p { font-size: var(--fs-small); color: var(--steel); max-width: 68ch; }
.pour-qui strong { color: var(--navy); font-weight: 600; }
.pour-qui a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.pour-qui a::after { content: " →"; }

/* ===========================================================
   Ce qu'on fabrique — trois formats
=========================================================== */
.formats { background: var(--bone); padding-block: var(--sp-section); border-block: 1px solid var(--rule); }
.formats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.format {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.2vw, 2rem);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.format:hover { border-color: rgba(17, 60, 95, 0.28); transform: translateY(-2px); }
.format svg { width: 100%; height: auto; aspect-ratio: 3 / 2; margin-bottom: 1.2rem; }
.format h3 { font-size: var(--fs-h3); margin-bottom: 0.55rem; }
.format p { font-size: var(--fs-small); color: var(--steel); }
.format__tags { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.format__tags li {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-600);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
}

/* ===========================================================
   La démarche — axe de cotation

   Reprise du dispositif de l'autre site : une ligne d'axe et des
   stations numérotées. Ici les stations sont les quatre temps de la
   relation commerciale, et l'axe dit qu'il y a un ordre.
=========================================================== */
.demarche { background: var(--paper); padding-block: var(--sp-section); }
.demarche__axe { position: relative; margin-top: clamp(3.5rem, 7vw, 6rem); }
.demarche__axe::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
}
.demarche__stations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.station { position: relative; padding-top: 3.5rem; }
.station__idx {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  color: var(--navy-600);
}
.station__tick { position: absolute; top: 1.85rem; left: 0; width: 1px; height: 1rem; background: var(--navy-600); opacity: 0.5; }
.station__tick::after {
  content: "";
  position: absolute;
  top: -2.5px;
  left: -2.5px;
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.station h3 { font-size: var(--fs-h3); }
.station p { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--steel); max-width: 32ch; }
.station__gratuit {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ok);
  border: 1px solid rgba(47, 122, 79, 0.3);
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
}

/* ===========================================================
   Les deux suites possibles — abonnement ou achat

   Deux cartes de même poids, sans « recommandé » ni surlignage :
   le choix dépend entièrement de qui achète, et pousser l'un des
   deux serait mentir sur la nature de l'offre.
=========================================================== */
.suites { background: var(--bone); padding-block: var(--sp-section); border-top: 1px solid var(--rule); }
.suites__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.suite {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.6vw, 2.5rem);
  display: flex;
  flex-direction: column;
}
.suite h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); margin: 0.9rem 0 0.85rem; }
.suite p { color: var(--steel); max-width: 42ch; font-size: var(--fs-small); }
.suite__list { margin-top: 1.5rem; display: grid; gap: 0.55rem; }
.suite__list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: var(--fs-small);
  color: var(--steel);
}
.suite__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--accent);
}
.suite__pied {
  margin-top: auto;
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-600);
}

/* ===========================================================
   Réalisations
=========================================================== */
.travaux { padding-block: var(--sp-section); }
.travaux__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.travail {
  border-top: 1px solid var(--rule);
  padding-top: 1.4rem;
  display: flex;
  flex-direction: column;
}
.travail__ref {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-600);
}
.travail h3 { font-size: var(--fs-h3); margin: 0.75rem 0 0.7rem; }
.travail p { font-size: var(--fs-small); color: var(--steel); }
.travail p + p { margin-top: 0.8rem; }
.travail__pile { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.travail__pile li {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  color: var(--navy-600);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
}

/* ===========================================================
   Le questionnaire

   Une question à la fois, mais un seul <form> : les étapes sont des
   <fieldset> que le script masque tour à tour. Sans JavaScript, ils
   restent tous visibles et le formulaire se poste normalement — ce
   qui est le comportement par défaut du HTML, et c'est bien pour ça
   que le questionnaire est construit ainsi plutôt qu'en pages
   séparées.
=========================================================== */
.quiz { padding-block: clamp(2.5rem, 5vw, 4rem) var(--sp-section); }
.quiz .wrap { max-width: 780px; }

.quiz__barre {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-600);
}
.quiz__piste {
  flex: 1;
  height: 2px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.quiz__jauge {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--accent);
  transition: width 0.45s var(--ease);
}

.etape {
  border: 0;
  padding: 0;
  margin: 0;
}
/* Quand le script tourne, chaque étape sauf une porte [hidden]. Sans
   script, aucune ne le porte et l'espacement ci-dessous les sépare. */
.etape + .etape { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.etape > legend {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 0.6rem;
  padding: 0;
}
.etape__aide { font-size: var(--fs-small); color: var(--steel); margin-bottom: 1.6rem; max-width: 52ch; }

/* ---------- choix en cartes ----------
   Un <input type=radio> réel sous une étiquette dessinée. Le natif
   porte le clavier, le groupe, la validation et le nom du champ ;
   on ne redessine que la boîte. */
.options { display: grid; gap: 0.65rem; }
.options--paire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.option {
  position: relative;
  display: block;
  border: 1px solid var(--steel-200);
  border-radius: 10px;
  background: var(--paper);
  padding: 0.95rem 1.1rem 0.95rem 2.9rem;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.option:hover { border-color: var(--navy-600); }
.option input {
  position: absolute;
  top: 1.15rem;
  left: 1.1rem;
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
  margin: 0;
}
.option__titre { display: block; font-weight: 600; font-size: var(--fs-small); color: var(--navy); }
.option__note { display: block; margin-top: 0.2rem; font-size: var(--fs-small); color: var(--steel); }
/* :has() porte la mise en évidence de la carte choisie. Là où il
   manque, la puce native reste cochée — le sens ne se perd pas, seul
   le cadre coloré manque. */
.option:has(input:checked) { border-color: var(--navy); background: rgba(46, 111, 176, 0.05); }
.option:has(input:focus-visible) { outline: 2px solid var(--navy-600); outline-offset: 2px; }

.quiz__nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.quiz__nav .form__status { margin-left: auto; }

/* ===========================================================
   Formulaire — champs
=========================================================== */
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.45rem;
  color: var(--navy);
}
.field label span { font-weight: 400; color: var(--steel); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--steel-200);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-600); outline: none; }
.field textarea { resize: vertical; min-height: 140px; }
.field__hint { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--steel); }

/* Le champ fautif est désigné par la bordure ET nommé par le message :
   la couleur n'est jamais le seul signal. Bordure en raccourci complet,
   comme la règle de base la déclare. */
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border: 1px solid var(--alerte); background: #fdf6f4; }

.form__status { font-size: var(--fs-small); color: var(--steel); }
.form__status[data-state="ok"] { color: var(--ok); }
.form__status[data-state="error"] { color: var(--alerte); }

/* ===========================================================
   Entête — identique sur toutes les pages
=========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Le logo est une marque dessinée PLUS un nom en vrai texte. Le nom
   n'est pas dans le SVG parce qu'un SVG chargé par <img> ne peut pas
   récupérer une police externe : dessiné là, « Mecantek Studio »
   serait rendu par la police système et changerait de visage d'un
   appareil à l'autre. En texte, il hérite d'Archivo comme les titres. */
.site-header__logo { flex: none; display: flex; align-items: center; gap: 0.6rem; }
.site-header__logo img { height: 26px; width: auto; }
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
}
/* « Studio » est le mot qui distingue cette marque : il porte l'accent,
   et c'est le seul endroit de l'entête où la couleur d'accent sert. */
.wordmark em { font-style: normal; color: var(--accent); }

.site-header__nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2rem); }
.site-header__links { display: flex; align-items: center; gap: clamp(0.75rem, 1.9vw, 1.9rem); }
.site-header__links a {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
  opacity: 0.72;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease);
}
.site-header__links a:hover { opacity: 1; }
/* La page courante est soulignée, pas seulement éclaircie : l'endroit
   où l'on se trouve ne doit pas dépendre d'une nuance d'opacité. */
.site-header__links a[aria-current="page"] {
  opacity: 1;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.site-header__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  font-size: var(--fs-small);
  font-weight: 600;
}
.site-header__toggle svg { width: 14px; height: 14px; }

/* Quatre liens et le bouton d'action. Le point de rupture est plus bas
   que sur le site d'usinage parce que l'entête porte trois liens de
   moins et pas de sélecteur de langue. Mesuré en forçant la rangée :
   le bouton tient sur une ligne jusqu'à 860px et passe à deux à 840px,
   ce qui double la hauteur de l'entête. js/main.js lit CETTE règle,
   via le display calculé du bouton Menu, plutôt que de répéter le
   nombre. */
@media (max-width: 860px) {
  .site-header__toggle { display: inline-flex; }
  .site-header__links {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 30px -22px rgba(10, 36, 54, 0.5);
  }
  .site-header__links a {
    padding: 0.85rem 0;
    opacity: 1;
    border-bottom: 1px solid var(--rule);
  }
  .site-header__links a:last-child { border-bottom: 0; }
  .site-header__links a[aria-current="page"] { box-shadow: none; color: var(--accent); }
}

/* 375px est la largeur de référence, et à cette largeur la rangée
   porte quatre choses : la marque, le nom, le bouton Menu et l'appel
   à l'action. Mesuré en forçant la rangée, le débordement venait du
   nom — le site d'usinage n'avait qu'une image à cet endroit. Trois
   ajustements plutôt qu'un seul, parce qu'aucun ne suffisait :
   le libellé court du bouton, le nom réduit, et les écarts resserrés.
   L'appel à l'action ne disparaît jamais : quelqu'un qui a décidé de
   commencer ne doit pas ouvrir un menu pour y arriver. */
@media (max-width: 560px) {
  .site-header .btn__long { display: none; }
  .site-header .btn__court { display: inline; }
  .site-header .wrap { gap: 0.4rem; }
  .site-header__nav { gap: 0.4rem; }
  .site-header .btn { padding: 0.55rem 0.8rem; }
  .site-header__logo { gap: 0.45rem; }
  .site-header__logo img { height: 22px; }
  .site-header .wordmark { font-size: 0.9375rem; }
  .site-header__toggle { padding: 0.5rem 0.7rem; }
}

/* Le seuil où le nom cède sa place. Mesuré en forçant la rangée, pas
   choisi : à 375px la rangée occupe 368px des 375 disponibles, nom
   compris — il reste 7px, et le bouton tient sur une seule ligne
   (41px de haut, entête à 72px). Le nom coûte 112px à lui seul, donc
   le masquer à 375 reviendrait à perdre la marque sur la largeur de
   téléphone la plus répandue pour récupérer une marge qui existe déjà.
   Vérifié ensuite à 360px et à 345px : la rangée tient encore, sans
   débordement horizontal ni entête sur deux lignes. C'est ce qui place
   la limite ici plutôt qu'à 400. En dessous, la marque dessinée reste
   seule — et elle est toujours le lien vers l'accueil. */
@media (max-width: 344px) {
  .site-header .wordmark { display: none; }
}

/* ===========================================================
   Entête de page intérieure
=========================================================== */
.page-head { padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 4vw, 3.5rem); border-bottom: 1px solid var(--rule); }
.page-head h1 { font-size: var(--fs-hero); margin-top: 1.1rem; max-width: 22ch; text-wrap: balance; }
.page-head .lead { margin-top: 1.4rem; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 2.5vw, 2rem); }

/* ===========================================================
   Appel final — présent au bas de chaque page intérieure
=========================================================== */
.rappel { background: var(--bone); border-top: 1px solid var(--rule); padding-block: var(--sp-block); }
.rappel .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.rappel h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); max-width: 20ch; }
.rappel p { margin-top: 0.7rem; font-size: var(--fs-small); color: var(--steel); max-width: 46ch; }
.rappel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ===========================================================
   Page de remerciement
=========================================================== */
.merci { padding-block: clamp(4rem, 9vw, 8rem); }
.merci .wrap { max-width: 640px; }
.merci h1 { font-size: var(--fs-hero); margin-top: 1.1rem; }
.merci p { margin-top: 1.4rem; color: var(--steel); font-size: var(--fs-lead); }
.merci__suite { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); display: grid; gap: 0.75rem; }
.merci__suite li { position: relative; padding-left: 1.4rem; font-size: var(--fs-small); color: var(--steel); }
.merci__suite li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* ===========================================================
   Pied de page — la seule surface sombre du site
=========================================================== */
.site-footer { background: var(--navy-900); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.site-footer__logo { display: flex; align-items: center; gap: 0.55rem; }
.site-footer__logo img { height: 20px; width: auto; filter: brightness(0) invert(1); opacity: 0.85; }
/* Sur le fond sombre le nom passe au blanc, et « Studio » garde sa
   distinction par l'opacité plutôt que par la couleur d'accent — qui
   à 5.2:1 sur blanc ne tient pas sur du navy 900. */
.site-footer__logo .wordmark { color: var(--paper); font-size: 0.95rem; opacity: 0.9; }
.site-footer__logo .wordmark em { color: var(--paper); opacity: 0.65; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.site-footer__nav a { font-size: var(--fs-small); color: var(--steel-200); opacity: 0.75; transition: opacity 0.25s var(--ease); }
.site-footer__nav a:hover { opacity: 1; }

/* Plus lumineux que la navigation à côté, exprès : c'est la réponse à
   une question, pas un lien de plus. */
.site-footer__contact { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; }
.site-footer__contact a {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--paper);
  opacity: 0.9;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease);
}
.site-footer__contact a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.site-footer__meta {
  width: 100%;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-200);
  opacity: 0.7;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ===========================================================
   Adaptatif
=========================================================== */
@media (max-width: 1040px) {
  .formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* L'axe de la démarche passe de quatre à deux colonnes avant de
     basculer à la verticale : quatre stations sur une tablette sont
     déjà trop serrées pour que le texte de 32ch respire. */
  .demarche__stations { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .demarche__axe::before { display: none; }
}

@media (max-width: 760px) {
  /* Deux portes ne survivent pas à un téléphone côte à côte : empilées,
     elles gardent l'ordre de la phrase qui les introduit. */
  .choix__grid { grid-template-columns: 1fr; }
  .porte { min-height: 0; }
  .formats__grid { grid-template-columns: 1fr; }
  .suites__grid { grid-template-columns: 1fr; }
  .demarche__stations { grid-template-columns: 1fr; gap: 0; }
  .station { padding: 0 0 2.25rem 2.25rem; }
  .station:last-child { padding-bottom: 0; }
  .station__idx { position: static; display: block; margin-bottom: 0.35rem; }
  .station__tick { top: 0.5rem; left: -2.25rem; width: 1rem; height: 1px; }
  .station__tick::after { top: -2.5px; left: 0.35rem; }
  .station p { max-width: 46ch; }
  .form__row { grid-template-columns: 1fr; }
  .options--paire { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .pour-qui .wrap { flex-direction: column; align-items: flex-start; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
  .quiz__nav .form__status { margin-left: 0; width: 100%; }
}