/* ==========================================================================
   base.css — reset, typographie de base, conteneur
   Desktop-first : les paliers descendent en max-width (règle 5).
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* Un dégradé imperceptible : une grande surface parfaitement plate se lit
     comme une image morte, même quand personne ne saurait dire pourquoi. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-ground) 45%, #FFFFFF) 0%,
      var(--color-ground) 340px,
      var(--color-ground) 100%)
    var(--color-ground);
  background-attachment: fixed;
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-ink);
  text-wrap: balance;
}
/* h1 et h2 passent à la serif en graisse 400 (D-040). h3 et h4 restent en sans :
   à 17 px une serif perd ses empattements et ne gagne rien, et les titres de
   cartes doivent rester des étiquettes, pas des titres d'article. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-synthesis-weight: none;   /* pas de fausse graisse si le woff2 manque */
}
h1 {
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  max-width: var(--measure-display);
}
h2 {
  font-size: var(--text-title);
  line-height: var(--lh-title);
  letter-spacing: var(--track-title);
}
/* L'accent en italique, le geste repris d'Ibn Sina : une seule respiration dans
   le titre, jamais deux. Aujourd'hui un seul titre du site le porte — le
   « New‑York » de l'accueil. La règle est écrite pour les suivants ; poser un
   <em> dans un titre est une décision de copie, pas de feuille de style. */
h1 em, h2 em {
  font-style: italic;
  font-weight: inherit;
  color: var(--color-link);
}
h3 {
  font-size: var(--text-strong);
  font-weight: var(--w-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p { max-width: var(--measure-body); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-cta-hover); }

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

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
/* Une liste de prose se lit comme un paragraphe et mérite la même mesure. Sans
   cette ligne elle court sur toute la largeur du conteneur : 157 caractères
   relevés sur l'exemple de remboursement de /couronne-dentaire-au-maroc/.
   Cinq listes sont concernées sur tout le site, toutes en display block et
   toutes en contexte de texte. Deux d'entre elles portent .reveal, qui n'est
   qu'un déclencheur d'animation et ne dit rien de la mise en page : d'où la
   seconde ligne. Les seules listes de mise en page qui portent aussi .reveal
   sont .points et .ticks, écartées nommément. */
main ul:not([class]), main ol:not([class]),
main ul.reveal:not(.points):not(.ticks),
main ol.reveal:not(.points):not(.ticks) { max-width: var(--measure-body); }
li { margin-bottom: var(--space-2); }

strong, b { font-weight: var(--weight-medium); }

/* Les chiffres s'alignent : quatre pages de tarifs en dépendent. */
table, .num { font-variant-numeric: tabular-nums lining-nums; }

button { font: inherit; color: inherit; }

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

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

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

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: var(--text-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.lede {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-soft);
  max-width: var(--measure-lead);
}

@media (max-width: 768px)  { :root { --gutter: 1.25rem; } }