/*
 * Pages publiques — système visuel du skill « apple-ui-skills » (fond blanc, accent #155BD0,
 * Inter, grille de 4 px, arrondis de 21 px, bordures de 1 px, aucune animation), adapté :
 * contrastes ≥ 4,5:1, mobile d'abord, mode sombre.
 */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --surface: #ffffff;
  --surface-douce: #f5f7fa;
  --encre: #2d2b30;
  --corps: #454547;
  --doux: #5b6573;
  --bord: #b5c7d8;
  --accent: #155bd0;
  --accent-survol: #2f6cd9;
  --accent-texte: #155bd0;
  --accent-pale: #eef4fd;
  --erreur-fond: #fef2f2;
  --erreur: #991b1b;
  --info-fond: #eef4fd;
  --info: #0e3b85;
  --rayon: 21px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #020617;
    --surface-douce: #0f172a;
    --encre: #f8fafc;
    --corps: #e2e8f0;
    --doux: #a8b3c4;
    --bord: #334155;
    --accent-texte: #8fb3ef;
    --accent-pale: #0f172a;
    --erreur-fond: #450a0a;
    --erreur: #fecaca;
    --info-fond: #071d42;
    --info: #dce8fb;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: "Inter Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--surface);
  color: var(--corps);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--encre); text-wrap: balance; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(36px, 6vw, 51px); font-weight: 700; }
h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 700; margin-top: 48px; }
h3 { font-size: 18px; font-weight: 600; margin-top: 24px; }
p, li { text-wrap: pretty; }
p { margin: 12px 0; }
a { color: var(--accent-texte); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :focus-visible { outline-color: #8fb3ef; } }
.chiffres { font-variant-numeric: tabular-nums; }
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 16px; top: 16px; background: var(--surface); padding: 8px 16px; border-radius: var(--rayon); z-index: 10; }

/* En-tête et pied */
.entete { border-bottom: 1px solid var(--bord); padding-top: env(safe-area-inset-top); }
.entete-interieur, .pied-interieur, main { width: 100%; max-width: 1024px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.entete-interieur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
.marque { color: var(--encre); font-weight: 700; font-size: 18px; text-decoration: none; }
.entete nav ul { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.entete nav a { color: var(--corps); text-decoration: none; }
.entete nav a:hover, .entete nav a[aria-current="page"] { color: var(--accent-texte); text-decoration: underline; }
main { flex: 1; padding-top: 48px; padding-bottom: 64px; }
main.etroit { max-width: 720px; }
.pied { border-top: 1px solid var(--bord); font-size: 14px; color: var(--doux); padding-bottom: env(safe-area-inset-bottom); }
.pied-interieur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; padding-bottom: 24px; }
.pied ul { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; }
.pied a { color: var(--doux); }

/* Composants */
.sous-titre { font-size: clamp(18px, 2.4vw, 22px); color: var(--doux); max-width: 40ch; margin-top: 16px; }
.doux { color: var(--doux); font-size: 14px; }
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 24px; margin-top: 24px; }
.carte.douce { background: var(--surface-douce); }
.grille { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 24px; padding: 0; list-style: none; }
@media (min-width: 640px) { .grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grille.trois { grid-template-columns: repeat(3, 1fr); } }
.grille > li { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 20px; }
.grille > li h3 { margin-top: 0; }
.bouton {
  display: inline-block; margin-top: 16px; padding: 12px 24px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; color: #fff; background: var(--accent); text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--accent-survol); }
.bouton.secondaire { background: transparent; color: var(--accent-texte); border: 1px solid var(--bord); }
.bouton.secondaire:hover { background: var(--accent-pale); }
.bouton:disabled, .bouton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: center; }
label { display: block; font-weight: 600; color: var(--encre); margin-top: 16px; }
input[type="email"], input[type="text"] {
  display: block; width: 100%; margin-top: 4px; padding: 10px 16px; font: inherit; color: var(--encre);
  background: var(--surface); border: 1px solid var(--bord); border-radius: 999px;
}
.case { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: var(--corps); }
.case input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.message { border-radius: var(--rayon); padding: 12px 16px; margin-top: 16px; }
.message.erreur { background: var(--erreur-fond); color: var(--erreur); }
.message.info { background: var(--info-fond); color: var(--info); }
.prix { font-size: clamp(28px, 4vw, 40px); font-weight: 700; color: var(--encre); margin: 8px 0; }
.faq dt { font-weight: 600; color: var(--encre); margin-top: 20px; }
.faq dd { margin: 4px 0 0; }
.a-completer { background: var(--accent-pale); border-radius: 4px; padding: 0 4px; }
.sans-marge { margin-top: 0; }