/* ============================================================================
   ARCHIMÈDE — COMPOSANTS PARTAGÉS
   Écrits une seule fois, valables dans les deux directions et dans tout thème
   futur. Aucune couleur ni taille en dur : uniquement des tokens.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   ARMATURE DE PAGE
   ------------------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--wide { max-width: 1420px; }
.wrap--narrow { max-width: 780px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.section--alt { background: var(--c-bg-alt); }
.section--line { border-top: 1px solid var(--c-line); }

.stack > * + * { margin-top: var(--sp-sm); }
.stack-lg > * + * { margin-top: var(--sp-md); }
.stack-xl > * + * { margin-top: var(--sp-lg); }

.grid { display: grid; gap: var(--sp-md); }
/* Un enfant de grille a un minimum automatique égal à sa largeur intrinsèque.
   On l'autorise à rétrécir, sinon un contenu large impose sa taille à la page. */
/* Un enfant de grille ou de pile a un minimum automatique égal à sa largeur
   intrinsèque. On l'autorise à rétrécir, sinon un contenu large (SVG, champ,
   libellé insécable) impose sa taille à la page entière. */
.grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.form__grid > *,
.stack > *,
.stack-lg > *,
.doors > *,
.hero__grid > *,
.sim-panel > *,
.cta-band > *,
.kpi-strip > *,
.steps > *,
.swatches > *,
.readout__row > *,
.site-footer__grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }

/* ---------------------------------------------------------------------------
   TYPOGRAPHIE ÉDITORIALE
   ------------------------------------------------------------------------ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--c-brand);
}
.eyebrow--plain::before { display: none; }

.display {
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--c-ink-muted);
  max-width: 60ch;
}
.muted { color: var(--c-ink-muted); }
.dim { color: var(--c-ink-dim); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }

.prose { max-width: var(--w-prose); }
.prose p + p { margin-top: var(--sp-sm); }

/* Filet de mesure : la graduation, motif de marque */
.rule {
  height: 1px;
  background: var(--c-line);
  border: 0;
  margin: 0;
}
.rule--grad {
  height: 9px;
  background: var(--c-line);
  -webkit-mask-image: repeating-linear-gradient(
    to right, #000 0 1px, transparent 1px 14px);
  mask-image: repeating-linear-gradient(
    to right, #000 0 1px, transparent 1px 14px);
  border: 0;
}

/* ---------------------------------------------------------------------------
   BOUTONS & LIENS D'ACTION
   ------------------------------------------------------------------------ */

.btn {
  --btn-bg: var(--c-brand-fill);
  --btn-fg: var(--c-brand-ink);
  --btn-line: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  padding: 0.82rem 1.35rem;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary:hover { background: var(--c-brand-fill-hover); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-line: var(--c-line);
}
.btn--secondary:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink-muted);
  --btn-line: transparent;
  padding-inline: var(--sp-xs);
}
.btn--ghost:hover { color: var(--c-ink); }

.btn--lg { padding: 1rem 1.7rem; font-size: 1rem; }
.btn--sm { padding: 0.55rem 0.9rem; font-size: var(--fs-sm); }
/* Un libellé de bouton ne se coupe pas au milieu d'un mot, mais il doit pouvoir
   passer à la ligne sur écran étroit. Cause réelle d'un débordement de 49 px à
   360 px : le bouton « Demander ma démonstration », insécable, mesurait 312 px
   et imposait sa largeur à tout le formulaire, puis à la page entière. */
.btn--block { width: 100%; white-space: normal; }
@media (max-width: 480px) {
  .btn { white-space: normal; }
}

.btn__arrow {
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--c-brand);
  text-decoration: none;
}
.link-arrow::after {
  content: '→';
  transition: transform var(--dur-base) var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------------------------
   ÉTIQUETTES & SIGNAUX DE RISQUE
   Le vocabulaire de couleur est porteur de sens : robuste / sous tension / fragile
   ------------------------------------------------------------------------ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-ink-muted);
  white-space: nowrap;
}
.chip--ok    { color: var(--c-ok);    border-color: var(--c-ok);    background: var(--c-ok-bg); }
.chip--watch { color: var(--c-watch); border-color: var(--c-watch); background: var(--c-watch-bg); }
.chip--risk  { color: var(--c-risk);  border-color: var(--c-risk);  background: var(--c-risk-bg); }
.chip--brand { color: var(--c-brand); border-color: var(--c-brand); background: var(--c-brand-bg); }

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* Légende de risque réutilisable */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-sm);
  font-size: var(--fs-xs);
  color: var(--c-ink-dim);
}
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---------------------------------------------------------------------------
   CHIFFRES CLÉS
   ------------------------------------------------------------------------ */

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: var(--sp-2xs);
  font-size: var(--fs-sm);
  color: var(--c-ink-dim);
}
.stat__value--brand { color: var(--c-brand); }

/* ---------------------------------------------------------------------------
   CARTES
   Bordure fine plutôt qu'ombre portée : registre technique, pas marketing.
   ------------------------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  padding: var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.card--link { text-decoration: none; }
.card--link:hover {
  border-color: var(--c-brand);
  transform: translateY(-2px);
}
.card--flat { background: transparent; }
.card--pad-lg { padding: var(--sp-lg); }

.card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.card__text { font-size: var(--fs-sm); color: var(--c-ink-muted); }
.card__foot {
  margin-top: auto;
  padding-top: var(--sp-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2xs);
}

/* Numérotation technique, motif de marque */
.card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--c-ink-dim);
  letter-spacing: var(--ls-label);
}

/* ---------------------------------------------------------------------------
   PORTES DE TRIAGE — le composant central du site refondu
   ------------------------------------------------------------------------ */

.doors {
  display: grid;
  gap: var(--sp-xs);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--sp-md) var(--sp-md) var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-decoration: none;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
/* Soulignement qui se déploie : signale la cible cliquable sans surcharger */
.door::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--c-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}
.door:hover::after,
.door:focus-visible::after { transform: scaleX(1); }
.door:hover { border-color: var(--c-brand); }

.door__who {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.door__promise { font-size: var(--fs-sm); color: var(--c-ink-muted); }
.door__go {
  margin-top: var(--sp-xs);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-brand);
}

/* ---------------------------------------------------------------------------
   BOUSSOLE / RADAR — la visualisation produit
   ------------------------------------------------------------------------ */

.radar {
  width: 100%;
  height: auto;
  /* Un SVG porte une taille intrinsèque : sans cette remise à zéro, il
     impose sa largeur à sa colonne et fait déborder la page sur écran étroit. */
  min-width: 0;
  overflow: visible;
}
.radar__grid  { fill: none; stroke: var(--c-line); stroke-width: 1; }
.radar__spoke { stroke: var(--c-line-soft); stroke-width: 1; }
.radar__axis  { stroke: var(--c-line); stroke-width: 1; }
.radar__shape {
  /* Rendu de la plateforme : remplissage à 15 % (`bgOpacity: .15`) et tracé
     pleine opacité dans le jeton `brand`. */
  fill: var(--c-brand-bg);
  stroke: var(--c-brand-graphic);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: all var(--dur-slow) var(--ease-out);
}
.radar__point {
  fill: var(--c-bg);
  stroke: var(--c-brand-graphic);
  stroke-width: 2;
  transition: all var(--dur-slow) var(--ease-out);
}
.radar__tick {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--c-ink-dim);
}

/* Curseur de simulation : sobre, précis, tactile */
.sim { display: grid; gap: var(--sp-sm); }
.sim__row { display: grid; gap: 0.45rem; }
.sim__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2xs);
  font-size: var(--fs-sm);
}
.sim__name { color: var(--c-ink-muted); }
.sim__val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
}

input[type='range'].slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
}
input[type='range'].slider::-webkit-slider-runnable-track {
  height: 3px;
  background: var(--c-line);
  border-radius: 2px;
}
input[type='range'].slider::-moz-range-track {
  height: 3px;
  background: var(--c-line);
  border-radius: 2px;
}
input[type='range'].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--c-brand-fill);
  border: 2px solid var(--c-bg);
  box-shadow: 0 0 0 1px var(--c-brand-fill);
  transition: transform var(--dur-fast) var(--ease);
}
input[type='range'].slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-brand-fill);
  border: 2px solid var(--c-bg);
  box-shadow: 0 0 0 1px var(--c-brand-fill);
}
input[type='range'].slider:hover::-webkit-slider-thumb { transform: scale(1.12); }

/* Verdict : la conclusion lisible d'une lecture de risque */
.verdict {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--c-line);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  font-size: var(--fs-sm);
}
.verdict--ok    { border-left-color: var(--c-ok); }
.verdict--watch { border-left-color: var(--c-watch); }
.verdict--risk  { border-left-color: var(--c-risk); }
.verdict__label { font-weight: var(--fw-semibold); }

/* Panneau de démonstration : le radar et sa lecture chiffrée côte à côte */
.sim-panel {
  display: grid;
  gap: var(--sp-lg);
  align-items: center;
}
@media (min-width: 900px) {
  .sim-panel { grid-template-columns: 1.15fr 1fr; gap: var(--sp-xl); }
}

/* Lecture chiffrée : neuf lignes lisibles, complément du radar */
.readout { display: grid; gap: 1px; background: var(--c-line-soft); }
.readout__row {
  display: grid;
  grid-template-columns: 1.6rem 1fr 54px 2.4rem auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.42rem 0.5rem;
  background: var(--c-bg);
  font-size: var(--fs-xs);
}
.section--alt .readout__row { background: var(--c-bg-alt); }
.readout__n {
  font-family: var(--font-mono);
  color: var(--c-ink-dim);
  font-size: var(--fs-label);
}
.readout__name { color: var(--c-ink-muted); }
.readout__bar {
  height: 3px;
  background: var(--c-line);
  border-radius: 2px;
  overflow: hidden;
}
.readout__bar i {
  display: block;
  height: 100%;
  background: var(--c-brand-graphic);
  transition: width var(--dur-slow) var(--ease-out);
}
.readout__val {
  font-family: var(--font-mono);
  text-align: right;
  color: var(--c-ink);
}
/* Sous 620px, le tableau de lecture devient trop dense : on retire le graphe
   de barre et l'étiquette de niveau, l'information chiffrée reste. */
@media (max-width: 620px) {
  .readout__row { grid-template-columns: 1.6rem 1fr 2.4rem; }
  .readout__bar,
  .readout__row .chip { display: none; }
}

/* Encart de démonstration : cadre l'outil sans le confondre avec la page */
.demo-frame {
  padding: var(--sp-md);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.demo-frame__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding-bottom: var(--sp-sm);
  margin-bottom: var(--sp-md);
  border-bottom: 1px solid var(--c-line);
}

/* ---------------------------------------------------------------------------
   TITRE DE SECTION — bloc structurel commun aux deux directions
   Le contenu du repère change (numéro d'ordre ou coordonnée), pas la structure.
   ------------------------------------------------------------------------ */

.sec-head {
  display: grid;
  gap: var(--sp-2xs);
  margin-bottom: var(--sp-lg);
}
.sec-head__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.sec-head__title { font-size: var(--fs-h2); max-width: 24ch; }
.sec-head__sub {
  color: var(--c-ink-muted);
  font-size: var(--fs-lead);
  max-width: 58ch;
  margin-top: var(--sp-xs);
}

/* ---------------------------------------------------------------------------
   BANDEAU DE CHIFFRES CLÉS — hairlines, aucun ornement
   ------------------------------------------------------------------------ */

.kpi-strip {
  margin-top: var(--sp-2xl);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}
.kpi-strip .stat + .stat {
  padding-left: var(--sp-md);
  border-left: 1px solid var(--c-line-soft);
}
@media (max-width: 700px) {
  .kpi-strip .stat + .stat {
    padding-left: 0;
    border-left: 0;
    padding-top: var(--sp-sm);
    border-top: 1px solid var(--c-line-soft);
  }
}

/* ---------------------------------------------------------------------------
   PANNEAU DE DÉMONSTRATION — en-tête et cadre
   ------------------------------------------------------------------------ */

.demo-frame__title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}

/* ---------------------------------------------------------------------------
   CARTES USE CASE — secteur et décision retenue
   ------------------------------------------------------------------------ */

.usecase__sector {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.usecase__outcome {
  margin-top: var(--sp-2xs);
  padding-top: var(--sp-2xs);
  border-top: 1px solid var(--c-line-soft);
  font-size: var(--fs-sm);
  color: var(--c-brand);
}

.compare__caption {
  margin-top: var(--sp-xs);
  font-size: var(--fs-xs);
  color: var(--c-ink-dim);
  max-width: var(--w-prose);
}

/* ---------------------------------------------------------------------------
   CITATION TIRÉE — la phrase de positionnement mise en exergue
   Style de base commun ; chaque direction règle le registre (serif italique
   pour « La Carte », sans-serif dense pour « L'Instrument »).
   ------------------------------------------------------------------------ */

.pullquote {
  margin: 0;
  padding-left: var(--sp-md);
  border-left: 2px solid var(--c-brand);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  font-weight: var(--fw-bold);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  max-width: 40ch;
}
.pullquote cite {
  display: block;
  margin-top: var(--sp-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  font-style: normal;
  letter-spacing: 0;
  color: var(--c-ink-dim);
}

.fig { margin: 0; }

/* ---------------------------------------------------------------------------
   UTILITAIRES — jeu minimal et fermé. Toute valeur ponctuelle passe par ici
   plutôt que par un style en ligne, sinon le système se dégrade en silence.
   ------------------------------------------------------------------------ */

.mt-2xs { margin-top: var(--sp-2xs); }
.mt-xs  { margin-top: var(--sp-xs); }
.mt-sm  { margin-top: var(--sp-sm); }
.mt-md  { margin-top: var(--sp-md); }
.mt-lg  { margin-top: var(--sp-lg); }
.mt-xl  { margin-top: var(--sp-xl); }
.mt-2xl { margin-top: var(--sp-2xl); }
.mt-auto { margin-top: auto; }

.mw-34 { max-width: 34ch; }
.mw-40 { max-width: 40ch; }
.mw-prose { max-width: var(--w-prose); }
.mw-narrow { max-width: 46rem; }

.align-center { align-items: center; }
.mx-auto { margin-inline: auto; }
.stack-lg { display: grid; gap: var(--sp-md); }

/* Image cadrée : bordure fine, rayon du système, légende alignée */
.framed {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}
.fig__caption {
  margin-top: var(--sp-2xs);
  font-size: var(--fs-xs);
  color: var(--c-ink-dim);
}

/* Logo en pied de page ou en barre de navigation */
.logo--sm { height: 26px; width: auto; }
.logo--xs { height: 24px; width: auto; }

/* ---------------------------------------------------------------------------
   BARRE DE REVUE — outil de comparaison des directions, hors design du site.
   Volontairement neutre et sombre dans les deux directions : elle ne doit
   jamais être confondue avec un élément de la charte. À retirer à la publication.
   ------------------------------------------------------------------------ */

.review-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-xs) var(--sp-sm);
  padding: 0.5rem var(--gutter);
  background: #1b1f24;
  border-bottom: 1px dashed #4a5560;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #c8d0c0;
}
.review-bar strong { color: #fff; font-weight: 600; }
.review-bar__links { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-sm); }
.review-bar a { color: #b3c396; text-decoration: none; }
.review-bar a:hover { text-decoration: underline; }
.review-bar a[aria-current='true'] { color: #fff; text-decoration: underline; }
.review-bar .theme-switch { display: flex; gap: var(--sp-2xs); }

/* La barre de revue a un fond sombre fixe, indépendant de la palette active.
   Ses boutons ne peuvent donc pas tirer leurs couleurs des jetons de thème :
   en thème B, « --c-ink-muted » devient sombre et le texte disparaîtrait sur
   ce fond. Les valeurs ci-dessous sont volontairement en dur. */
.review-bar .btn,
.review-bar .btn--ghost {
  --btn-fg: #c8d0c0;
  --btn-line: #4a5560;
  --btn-bg: transparent;
  color: #c8d0c0;
}
.review-bar .btn:hover { --btn-fg: #fff; color: #fff; }
.review-bar .btn--doc { color: #b3c396; padding: 0.2rem 0.5rem; }
.review-bar .btn--doc:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   FORMULAIRES — Netlify Forms, accessibles, mesurables
   ------------------------------------------------------------------------ */

.form { display: grid; gap: var(--sp-sm); }
.form__grid {
  display: grid;
  gap: var(--sp-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}

.field { display: grid; gap: 0.35rem; }
.field__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.field__optional {
  font-weight: var(--fw-regular);
  color: var(--c-ink-dim);
}
.field__hint { font-size: var(--fs-xs); color: var(--c-ink-dim); }

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-size: 0.9375rem;
  /* Indispensable : la largeur intrinsèque d'un <select> est celle de son option
     la plus longue. Sans cette remise à zéro, il élargit toute la page sur mobile. */
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.input::placeholder,
.textarea::placeholder { color: var(--c-ink-dim); }
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--c-hairline); }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 51%, calc(100% - 12px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.textarea { min-height: 7rem; resize: vertical; }

/* Cases à cocher : cibles larges, libellé cliquable sur toute la ligne */
.check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  cursor: pointer;
}
.check input {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 0.18rem;
  accent-color: var(--c-brand);
}

/* Champ piège anti-spam : présent dans le DOM, invisible pour l'humain */
.honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form__note {
  font-size: var(--fs-xs);
  color: var(--c-ink-dim);
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

/* Progression d'un tunnel : rassure et réduit l'abandon */
.progress {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.progress__bar {
  flex: 1;
  height: 2px;
  background: var(--c-line);
  border-radius: 2px;
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  width: 33%;
  background: var(--c-brand-fill);
  transition: width var(--dur-slow) var(--ease-out);
}

/* ---------------------------------------------------------------------------
   NAVIGATION
   ------------------------------------------------------------------------ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  min-height: 68px;
}
.site-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex: none;
}
.site-nav__brand img { height: 26px; width: auto; }

.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  margin-left: auto;
  font-size: var(--fs-sm);
}
.site-nav__links a {
  color: var(--c-ink-muted);
  text-decoration: none;
}
.site-nav__links a:hover { color: var(--c-ink); }
.site-nav__cta { display: flex; align-items: center; gap: var(--sp-2xs); }

/* Sous 860 px, la navigation devient une bande de liens sous la barre.
   Première version : les liens étaient purement masqués, sans remplacement —
   une régression par rapport au site actuel, qui a un menu. Aucun contrôle
   automatique ne pouvait le voir, un élément masqué étant ignoré par l'audit.

   Le choix retenu évite un menu déroulant : quatre ancres courtes tiennent sur
   une ligne à 360 px, donc une bande de liens est plus directe qu'un bouton à
   ouvrir. Elle fonctionne sans JavaScript, ne duplique pas le balisage et
   n'affiche aucun état intermédiaire.
   Les liens passent à la ligne plutôt que de défiler horizontalement : un
   défilement cacherait des entrées hors écran, ce qui est précisément le
   défaut qu'on cherche à corriger. */
@media (max-width: 860px) {
  .site-nav__inner { flex-wrap: wrap; row-gap: 0; }
  .site-nav__links {
    order: 3;
    width: 100%;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    padding-block: 0.3rem;
    border-top: 1px solid var(--c-line-soft);
  }
  .site-nav__links a {
    white-space: nowrap;
    padding-block: 0.5rem;
  }
}

/* Sous 620 px, la barre débordait de 76 px : le logotype, le bouton de connexion
   et le bouton d'action ne tenaient pas sur une ligne de 360 px.
   On retire le bouton de connexion — il reste présent dans le hero, dans l'appel
   à l'action final et dans le pied de page — et on resserre l'action principale. */
@media (max-width: 620px) {
  .site-nav__inner { gap: var(--sp-2xs); min-height: 60px; }
  .site-nav__brand img { height: 21px; }
  .site-nav__cta .btn--ghost { display: none; }
  .site-nav__cta .btn {
    padding: 0.52rem 0.75rem;
    font-size: var(--fs-xs);
    white-space: nowrap;
  }
}

/* Cibles tactiles : WCAG 2.2 AA demande 24 x 24 px. Les liens de pied de page
   et de navigation sont des cibles isolées, pas des liens en ligne dans une
   phrase : ils doivent donc atteindre la taille minimale. */
.site-nav__links a {
  display: inline-block;
  padding-block: 0.45rem;
}
.site-footer li a {
  display: inline-block;
  padding-block: 0.32rem;
}
.site-footer li + li { margin-top: 0; }
.site-footer__legal a {
  display: inline-block;
  padding-block: 0.3rem;
}

/* Barre de progression de lecture : utile sur les pages use case longues */
.readbar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--c-brand-fill);
  z-index: var(--z-toast);
}

/* ---------------------------------------------------------------------------
   TABLEAUX — comparatifs et grilles tarifaires
   ------------------------------------------------------------------------ */

.table-wrap { overflow-x: auto; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th,
.table td {
  padding: 0.8rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}
.table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
  border-bottom-color: var(--c-hairline);
}
.table tbody th { font-weight: var(--fw-medium); color: var(--c-ink); }
.table td { color: var(--c-ink-muted); }
.table--highlight { background: var(--c-brand-bg); }

/* ---------------------------------------------------------------------------
   ÉTAPES NUMÉROTÉES
   ------------------------------------------------------------------------ */

.steps { counter-reset: step; display: grid; gap: var(--sp-md); }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-sm);
  align-items: start;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--c-brand);
  padding-top: 0.15rem;
  border-top: 1px solid var(--c-brand);
  min-width: 2.2rem;
}
.step__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
}
.step__text { font-size: var(--fs-sm); color: var(--c-ink-muted); margin-top: 0.3rem; }

/* ---------------------------------------------------------------------------
   TARIFS
   ------------------------------------------------------------------------ */

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-lg) var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  position: relative;
}
.plan--featured { border-color: var(--c-brand); }
.plan__name {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
}
.plan__price {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.4rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.plan__price small {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--c-ink-dim);
  letter-spacing: 0;
}
.plan__feat { display: grid; gap: 0.5rem; font-size: var(--fs-sm); color: var(--c-ink-muted); }
.plan__feat li { display: flex; gap: 0.5rem; }
.plan__feat li::before { content: '—'; color: var(--c-brand); flex: none; }
.plan__flag {
  position: absolute;
  top: calc(-1 * var(--sp-2xs));
  right: var(--sp-md);
  background: var(--c-brand);
  color: var(--c-brand-ink);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
}

/* ---------------------------------------------------------------------------
   QUESTIONS FRÉQUENTES
   ------------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--c-line); }
.faq details {
  border-bottom: 1px solid var(--c-line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-sm);
  padding: var(--sp-sm) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--c-brand);
  flex: none;
  transition: transform var(--dur-base) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer {
  padding: 0 0 var(--sp-sm);
  max-width: var(--w-prose);
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------------
   BANDEAU D'APPEL À L'ACTION
   ------------------------------------------------------------------------ */

.cta-band {
  display: grid;
  gap: var(--sp-md);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  align-items: center;
}
@media (min-width: 780px) {
  .cta-band { grid-template-columns: 1.4fr 1fr; }
  .cta-band .actions { justify-content: flex-end; }
}

/* ---------------------------------------------------------------------------
   PIED DE PAGE
   ------------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--c-line);
  padding-block: var(--sp-xl);
  font-size: var(--fs-sm);
  color: var(--c-ink-dim);
}
.site-footer__grid {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.site-footer h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-dim);
  margin-bottom: var(--sp-2xs);
}

/* Les deux groupes d'une même colonne — « Produit » puis « Contact » — ont besoin
   d'air : sans cela le second titre colle à la liste du premier. La règle ne vise
   que le second groupe, car un titre qui suit une liste n'existe qu'à cet endroit
   du pied de page. 0,625 rem = 10 px, et l'écart suit la taille de texte du
   lecteur s'il l'agrandit — ce qu'une valeur en pixels ne ferait pas. */
.site-footer ul + h3 { margin-top: 0.625rem; }
.site-footer a { color: var(--c-ink-muted); text-decoration: none; }
.site-footer a:hover { color: var(--c-ink); }
.site-footer li + li { margin-top: 0.4rem; }
.site-footer__legal {
  margin-top: var(--sp-xl);
  padding-top: var(--sp-sm);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-sm) var(--sp-md);
  justify-content: space-between;
  font-size: var(--fs-xs);
}

/* Colonne des dernières analyses, dans la grille du pied de page. Elle se comporte
   comme les autres colonnes : plus de mise en pleine largeur, qui la faisait
   passer sous le bloc et rompait l'alignement. La typographie, les couleurs et
   l'interligne des liens sont déjà décrits par .site-footer h3, .site-footer a et
   .site-footer li + li ; seule la ligne de bas de colonne a besoin d'air. */
.site-footer__analyses p { margin-top: 0.6rem; }

/* Pastilles de légende : les couleurs de risque portent du sens, donc elles
   sont nommées dans le système plutôt qu'écrites en style en ligne. */
.dot--ok    { background: var(--c-ok); }
.dot--watch { background: var(--c-watch); }
.dot--risk  { background: var(--c-risk); }

/* Radar de taille réduite (hero) : même dessin, empreinte adaptée */
.radar--sm { max-width: 380px; }

/* ---------------------------------------------------------------------------
   SÉLECTEUR DE LANGUE
   Discret : c'est un changement de version, pas une action commerciale. Il porte
   hreflang et lang pour que les moteurs et les lecteurs d'écran sachent à quoi
   mène le lien.
   ------------------------------------------------------------------------ */

.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 28px;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  color: var(--c-ink-muted);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.lang-switch:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}