/* ════════════════════════════════════════════════════════════════════
   WEBMA — BASE
   Reset, typographie globale, primitives de mise en page.
   ════════════════════════════════════════════════════════════════════ */

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

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

body{
  margin:0;
  background:var(--surface);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:var(--text-md);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-width:0;
}

img,svg{display:block;max-width:100%}

/* Une classe display: (ex. .card{display:flex}) bat le [hidden] du navigateur. */
[hidden]{display:none !important}
svg{flex:none}

a{color:var(--brand-600);text-decoration:none}
a:hover{color:var(--brand-700)}

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

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--brand-600);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}

h1,h2,h3,h4,p,figure{margin:0}

/* ── Titres ────────────────────────────────────────────────────── */
.h-display,.h1,.h2,.h2-sm,.h3,.h4{
  font-family:var(--font-display);
  font-weight:500;
  color:var(--text-primary);
  text-wrap:balance;
}
.h-display{
  font-feature-settings:var(--font-features);
  font-size:var(--text-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);
}
.h1{font-size:var(--text-h1-page);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
.h2{
  font-feature-settings:var(--font-features);
  font-size:var(--text-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);
}
.h2-sm{font-size:var(--text-h2-sm);line-height:var(--lh-h2);letter-spacing:var(--ls-h2-sm)}
.h3{font-size:var(--text-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
.h4{font-size:var(--text-h4);font-weight:600;line-height:var(--lh-h4);letter-spacing:var(--ls-h4)}

/* ── Textes ────────────────────────────────────────────────────── */
.lead{
  font-size:var(--text-lg);line-height:var(--lh-lg);
  color:var(--text-secondary);text-wrap:pretty;
}
.body{font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--text-secondary)}
.mono{font-family:var(--font-mono);letter-spacing:-.01em}
.muted{color:var(--text-muted)}

/* ── Conteneurs et sections ────────────────────────────────────── */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
/* Le cadre d'un article : la barre de navigation plus ses gouttieres,
   pour que le texte tombe exactement sous l'en-tete. */
.container--article{max-width:calc(var(--nav-width) + var(--gutter) * 2)}
.container--text{max-width:var(--container-text)}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:56px}
.section--flush-top{padding-top:16px}
.section--subtle{background:var(--surface-subtle);border-block:1px solid var(--border)}
.section--wash{background:var(--gradient-wash)}

/* En-tête centré de section : pastille + titre + accroche */
.section-head{max-width:60ch;margin-inline:auto;text-align:center}
.section-head .lead{margin-top:16px}

/* ── Grilles ───────────────────────────────────────────────────── */
.grid{display:grid;gap:var(--gap-card)}
.grid--cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid--wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.grid--steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.grid--compare{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start}

/* ── Accessibilité ─────────────────────────────────────────────── */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:16px;top:-64px;z-index:100;
  background:var(--surface);color:var(--text-primary);
  padding:12px 18px;border-radius:var(--radius-full);box-shadow:var(--shadow-md);
  font-weight:600;transition:top .2s ease;
}
.skip-link:focus{top:16px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}