/* Hallmark · base, reset, typographie, coque, accessibilité
 * Dépend de tokens.css. Aucune valeur brute : tout passe par un token nommé.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;          /* clip, jamais hidden, hidden casse position:sticky */
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

/* Les titres sont TOUJOURS romains. Jamais d'italique sur du display 
   c'est l'un des tells les plus fiables d'une page générée. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-display-s); }
h3 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
h5, h6 { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }

p { text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: from-font; text-underline-offset: 0.18em; }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

/* Chiffres tabulaires partout où un montant est comparé colonne par colonne. */
.u-tnum, .price, .amount, .woocommerce-Price-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Focus ─────────────────────────────────────────────────────────────
   Jamais animé : l'anneau doit apparaître instantanément à la prise de focus. */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-gap);
  border-radius: var(--radius-xs);
  transition: none;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

/* ── Coque ─────────────────────────────────────────────────────────── */
/* Les gouttières intègrent les marges de sécurité iOS : en paysage sur un
   appareil à encoche, le contenu se glisserait sinon sous la barre système. */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-left:  max(var(--shell-pad), env(safe-area-inset-left));
  padding-right: max(var(--shell-pad), env(safe-area-inset-right));
}
.shell--narrow { max-width: calc(var(--shell-max) - 14rem); }
.shell--prose  { max-width: var(--prose-max); }

/* Rythme vertical : généreux au-dessus, resserré en dessous. */
.section        { padding-block: var(--section-y-top) var(--section-y-bottom); }
.section--tight { padding-block: var(--section-y-tight-top) var(--section-y-tight-bottom); }
.section--band  { background: var(--color-paper-2); }

/* Le filet de transition assure déjà la séparation : la section qui le suit
   n'a pas besoin d'un rembourrage complet en plus.
   On ne resserre QUE dans ce cas. Une règle générique sur toutes les sections
   consécutives colle les blocs les uns aux autres : l'asymétrie haut/bas
   suffit à créer le rythme, sans supprimer la respiration. */
.shell:has(> .section-rule) + .section {
  padding-top: var(--section-y-tight-top);
}

/* ── Tête de section, S2 Hanging, centrée ────────────────────────────
   L'ADN de la référence : eyebrow gris fin, puis titre display 2 lignes
   terminé par un point. Pas de numéro, pas de capitales, pas de mono. */
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  margin-bottom: var(--space-xl);
}

/* L'eyebrow porte une pastille d'accent. C'est le seul endroit du site où le
   vert apparaît en aplat sur du papier : un point de 6 px, assez petit pour
   rester sous les 5 % d'empreinte que s'impose la charte. */
.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  color: var(--color-ink-3);
}
.section-head__eyebrow::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  flex: none;
}

/* Montserrat est large : sans resserrement, un titre de deux lignes se
   délite. Le tracking négatif et l'interlignage court lui redonnent
   l'assise d'un bloc plutôt que d'une suite de mots. */
.section-head__title {
  max-width: 18ch;
  letter-spacing: -0.032em;
  line-height: 1.04;
  text-wrap: balance;
}
.section-head__lede {
  max-width: var(--measure-tight);
  color: var(--color-ink-2);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2xs);
}
.section-head--start { align-items: flex-start; text-align: left; }

/* ── Prose ─────────────────────────────────────────────────────────── */
.prose { max-width: var(--measure); color: var(--color-ink-2); line-height: var(--leading-relaxed); }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { font-size: var(--text-3xl); color: var(--color-ink); margin-top: var(--space-xl); }
.prose h3 { font-size: var(--text-2xl); color: var(--color-ink); margin-top: var(--space-lg); }
.prose ul, .prose ol { padding-left: var(--space-md); }
.prose li + li { margin-top: var(--space-2xs); }
.prose a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-line);
  text-decoration-thickness: 2px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.prose a:hover { text-decoration-color: var(--color-accent-text); }
.prose strong { color: var(--color-ink); font-weight: var(--weight-bold); }

/* Tableau de specs, un <table> réel, parce que c'est ce que les moteurs IA extraient. */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.specs-table th,
.specs-table td {
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--rule-hairline) solid var(--color-rule);
  vertical-align: top;
}
.specs-table th {
  width: 42%;
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
}
.specs-table td { color: var(--color-ink-2); }
.specs-table tr:last-child th,
.specs-table tr:last-child td { border-bottom: 0; }

/* Tout contenu large scrolle dans son propre conteneur, jamais la page. */
.scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Utilitaires ───────────────────────────────────────────────────── */
.screen-reader-text,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: var(--z-toast);
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-ink-on-dark);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  transform: translateY(-150%);
}
.skip-link:focus-visible { transform: translateY(0); }

.u-mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
}

/* ── Mouvement réduit ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
    scroll-behavior: auto !important;
  }
}