/* ============================================================
   Écoles en surchauffe, feuille de style unique
   Design system : cf. /style-guide.html
   Palette officielle : orange #E94E1B · bleu #032981 · crème #FEF7EF
   ============================================================ */

/* La police Archivo (variable, axes wdth + wght) est chargée par un <link>
   dans le <head> de chaque page, plus rapide qu'un @import ici. */

/* ============================================================
   1. TOKENS
   ============================================================ */
:root {
  /* --- Couleurs de marque (ne pas altérer) --- */
  --orange:        #e94e1b;
  --navy:          #032981;
  --cream:         #fef7ef;

  /* --- Dérivées --- */
  --orange-ink:    #b83a0f;   /* orange lisible en petit corps sur crème (5.4:1) */
  --orange-hot:    #ff7a4d;   /* orange lisible sur fond bleu (5.1:1) */
  --navy-deep:     #021d5b;
  --navy-soft:     #4c5a7a;

  /* --- Rôles --- */
  --bg:            var(--cream);
  --bg-alt:        #fbeeda;
  --surface:       #ffffff;
  --ink:           var(--navy);
  --ink-body:      #16224a;
  --ink-soft:      var(--navy-soft);
  --rule:          #e3d5bd;   /* filets fins sur crème */
  --rule-strong:   #c9b795;   /* séparateurs verticaux entre chiffres */
  --accent:        var(--orange);
  --accent-ink:    #ffffff;
  --focus:         var(--navy);
  --error:         #b31111;
  --ok:            #1f7a3d;

  /* --- Fonds inversés (sections bleues) --- */
  --inv-bg:        var(--navy);
  --inv-ink:       #ffffff;
  --inv-soft:      #c3cdec;
  --inv-rule:      rgba(255, 255, 255, .22);
  --inv-accent:    var(--orange-hot);

  /* --- Forme --- */
  --radius:        14px;
  --radius-lg:     20px;
  --maxw:          1140px;
  --shadow:        0 1px 2px rgba(3, 15, 45, .05), 0 18px 40px -18px rgba(3, 25, 90, .22);

  /* --- Typographie --- */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --wide:   "wdth" 100;
  --narrow: "wdth" 84;   /* chiffres « affiche » : semi-condensé */
}

/* Pas de thème sombre automatique : les illustrations sont des bichromies
   dont le fond papier crème est encodé dans le PNG (non transparent sur les
   aplats). Sur un fond sombre, elles se détachent en rectangles clairs et
   l'identité crème/bleu du template disparaît. Le site est donc verrouillé en
   clair. `color-scheme` l'annonce au navigateur pour que les contrôles de
   formulaire natifs suivent. */
:root { color-scheme: light; }

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-variation-settings: var(--wide);
  font-size: clamp(1rem, .96rem + .22vw, 1.09rem);
  line-height: 1.62;
  color: var(--ink-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

/* Les composants ci-dessous redéfinissent `display` ; sans cette règle,
   l'attribut [hidden] serait sans effet sur eux. */
[hidden] { display: none !important; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--orange-ink); text-underline-offset: .18em; }
a:hover { color: var(--accent); }

strong { font-weight: 700; color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 100;
  padding: .65rem 1rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */
h1, h2, h3, h4 {
  margin: 0 0 .45em;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 1.4rem + 4.3vw, 4.15rem); }
h2 { font-size: clamp(1.7rem, 1.25rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); letter-spacing: -.015em; line-height: 1.25; }

/* Chiffres « affiche » : semi-condensé, très gras, orange */
.poster {
  display: block;
  font-variation-settings: var(--narrow);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Pas de sur-titre ni de filet avant les titres : les niveaux se distinguent
   par l'échelle typographique seule. */

/* ============================================================
   4. LAYOUT
   ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, .5rem + 3vw, 2.5rem);
}
.wrap--narrow { max-width: 48rem; }

.section {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4.5vw, 5.75rem);
}

.section__title { margin-bottom: .55rem; }

.section__intro {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  color: var(--ink-soft);
}

/* --- Sections inversées (bleu plein) --- */
.section--navy {
  background: var(--inv-bg);
  color: var(--inv-ink);
  overflow: hidden;
}
.section--navy h2,
.section--navy h3,
.section--navy strong { color: var(--inv-ink); }
.section--navy .section__intro { color: var(--inv-soft); }
.section--navy a { color: var(--inv-accent); }

/* ============================================================
   5. EN-TÊTE
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem clamp(1.15rem, .5rem + 3vw, 2.5rem);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }

.brand__mark {
  flex: none;
  width: 1.6em;
  height: 1.6em;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.brand__mark circle { fill: currentColor; stroke: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, .5rem + 1.2vw, 1.6rem);
}
.site-nav a:not(.btn) {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:not(.btn):hover,
.site-nav a[aria-current="page"] { color: var(--orange-ink); }

/* ============================================================
   6. BOUTONS
   ============================================================ */
.btn {
  --btn-bg: var(--accent);
  --btn-ink: var(--accent-ink);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .68rem 1.25rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease,
              transform .14s ease;
}
.btn:hover { background: var(--orange-ink); color: var(--btn-ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: progress; }

.btn svg { flex: none; width: 1em; height: 1em; }

.btn--sm { padding: .45rem 1rem; font-size: .92rem; }

/* CTA : ≥19px gras, seuil « grand texte » pour le blanc sur orange.
   La taille ne descend pas ; c'est la gouttière qui s'ajuste si besoin. */
.btn--lg { padding: .92rem 1.4rem; font-size: 1.19rem; font-weight: 800; }

.btn--block { width: 100%; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-border: var(--navy);
}
.btn--ghost:hover {
  --btn-bg: var(--navy);
  --btn-ink: #fff;
  background: var(--navy);
  color: #fff;
}

.section--navy .btn--ghost {
  --btn-ink: #fff;
  --btn-border: rgba(255, 255, 255, .55);
}
.section--navy .btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: #fff;
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.hero__lede {
  max-width: 34rem;
  margin-top: 1.5rem;
  font-size: clamp(1rem, .96rem + .28vw, 1.1rem);
  color: var(--ink-soft);
}
.hero__lede p { margin-bottom: .8rem; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 2rem;
}

.hero__art { position: relative; }
.hero__illu { width: 100%; }

/* ============================================================
   8. COMPTEUR
   ============================================================ */
.counter {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 1.1rem;
  margin-top: 1.75rem;
}
.counter__icon { width: 1.6rem; grid-row: span 3; justify-self: center; }
.counter__over,
.counter__label {
  margin: 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.counter__num {
  font-size: clamp(2.9rem, 2rem + 4vw, 4.4rem);
  margin-block: .04em;
}
.section--navy .counter__over,
.section--navy .counter__label { color: var(--inv-ink); }

/* ============================================================
   9. CONSTAT : chiffres clés
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stat {
  padding: 1.5rem 0 1.7rem;
  border-top: 2px solid var(--ink);
}
.stat__num {
  font-size: clamp(2.6rem, 1.9rem + 3.2vw, 4rem);
  margin-bottom: .5rem;
}
.stat__text { margin: 0 0 .75rem; max-width: 30rem; }
.stat__src {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.stat__src a { color: inherit; }
.stat__src a:hover { color: var(--orange-ink); }

/* ---------- Page constat : chiffre + analyse ---------- */
.findings { margin: 0; padding: 0; list-style: none; }

.finding {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem clamp(1.5rem, 1rem + 2.5vw, 3rem);
  padding: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem) 0;
  border-top: 2px solid var(--ink);
}
.finding:last-child { border-bottom: 2px solid var(--ink); }

.finding__fig { font-size: clamp(2.3rem, 1.6rem + 2.7vw, 3.6rem); }
.finding__unit {
  display: block;
  margin-top: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variation-settings: var(--wide);
}
.finding__body h2 {
  margin-bottom: .5rem;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem);
}
.finding__body p { color: var(--ink-soft); max-width: 42rem; }
.finding__body strong { color: var(--ink); }

@media (min-width: 48em) {
  /* `max-content` plutôt qu'un pourcentage : la colonne se cale sur la valeur
     la plus longue (« 40–52 Md€ »), qui ne se coupe donc jamais. */
  .finding { grid-template-columns: max-content 1fr; }
  .finding__fig { grid-row: span 2; }
}

/* Liste des sources en bas de page */
.sources { margin: 0; padding-left: 1.1rem; font-size: .92rem; color: var(--ink-soft); }
.sources li { margin-bottom: .6rem; }

/* ============================================================
   10. POURQUOI : citation
   ============================================================ */
.pourquoi__body { max-width: 42rem; }
.pourquoi__body p { color: var(--inv-soft); }
.pourquoi__body strong { color: var(--inv-ink); }

/* La citation occupe toute la largeur du conteneur : à 48 px dans une colonne
   de 424 px, la première ligne se recoupait d'elle-même et les <br> du HTML
   n'avaient aucun effet. En pleine largeur, la coupe écrite est respectée. */
.pullquote {
  position: relative;
  margin: clamp(2.5rem, 1.75rem + 3vw, 4.25rem) 0 0;
}
/* Les retours à la ligne sont explicites dans le HTML (<br>) : pas de
   `text-wrap: balance` ici, il entrerait en conflit avec la coupe voulue. */
.pullquote p {
  margin: 0;
  font-size: clamp(1.6rem, .9rem + 3vw, 3.6rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--inv-ink);
}
.pullquote::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 4px;
  margin-top: 1.4rem;
  background: var(--accent);
}
.pullquote__spark {
  width: clamp(3rem, 2rem + 3vw, 4.5rem);
  margin-bottom: 1.4rem;
}

/* ============================================================
   11. REVENDICATIONS
   ============================================================ */
.demands {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: demand;
}
.demand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0 clamp(1rem, .5rem + 2vw, 2.25rem);
  padding: 1.6rem 0;
  border-top: 2px solid var(--ink);
}
.demand:last-child { border-bottom: 2px solid var(--ink); }

.demand__num {
  counter-increment: demand;
  font-size: clamp(3.1rem, 2.2rem + 4vw, 4.6rem);
  min-width: 1.1ch;
}
.demand__num::before { content: counter(demand); }

.demand__body { padding-top: .35rem; }
.demand__body h3 { margin-bottom: .35rem; }
.demand__body p { margin: 0; color: var(--ink-soft); max-width: 42rem; }

.demand__icons {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  padding-top: .3rem;
}
.demand__icons img { height: clamp(2.6rem, 2rem + 1.6vw, 3.5rem); width: auto; }

/* ============================================================
   12. FORMULAIRE
   ============================================================ */
/* Section « Signer » : fond crème, formulaire en carte bleue pleine.
   C'est la seule surface bleue posée sur le crème, elle capte l'attention
   sans avoir besoin d'ombre ni de bordure. */
.section--sign { overflow: hidden; }

.sign__art {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(8rem, 4rem + 10vw, 13rem);
  pointer-events: none;
}

.form-card {
  position: relative;
  padding: clamp(1.35rem, 1rem + 2.2vw, 2.25rem);
  background: var(--navy);
  border-radius: var(--radius-lg);
  color: #fff;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1.15rem;
}

.field { margin-bottom: 1.15rem; }
.field--full { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: .38rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
}
.field__opt, .field__hint { font-weight: 400; color: var(--ink-soft); }
.field__hint { display: block; margin-top: .32rem; font-size: .83rem; }
.req { color: var(--error); font-weight: 700; }

.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: .72rem .9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ink-body);
  background: var(--bg);
  border: 2px solid var(--rule);
  border-radius: 10px;
  appearance: none;
}
.field textarea {
  min-height: 6rem;
  line-height: 1.5;
  resize: vertical;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23032981' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: .75rem;
  padding-right: 2.4rem;
}
.field input:focus,
.field select:focus { border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--error); }

.field__error {
  margin: .35rem 0 0;
  font-size: .84rem;
  font-weight: 600;
  color: var(--error);
}
.field__error:empty { display: none; }

.field--check { margin-bottom: .8rem; }
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  font-size: .95rem;
  font-weight: 400;
  color: var(--ink-body);
  cursor: pointer;
}
.check input {
  margin-top: .2rem;
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  margin: 1rem 0 0;
  font-weight: 700;
  min-height: 1.2em;
}
.form-status[data-kind="error"] { color: var(--error); }
.form-status[data-kind="ok"] { color: var(--ok); }

/* Phrase d'engagement juste sous le bouton : ton de l'action, pas du légal */
.form-cta-note {
  margin: .9rem 0 0;
  font-size: .95rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  text-wrap: balance;
}

.form-legal {
  margin: .9rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.thanks {
  margin-top: 1.5rem;
  padding: 1.6rem;
  background: var(--surface);
  border-left: 6px solid var(--ok);
  border-radius: var(--radius);
  color: var(--ink-body);
}
.thanks h3 { color: var(--ok); }

/* --- Inversion des couleurs dans la carte bleue ---
   Placé après les styles de champ ci-dessus : à spécificité égale
   (`.form-card label` vs `.field label`), c'est l'ordre qui tranche. */
.form-card .field label,
.form-card .check { color: #fff; }
.form-card .field__opt,
.form-card .field__hint,
.form-card .form-legal { color: var(--inv-soft); }
.form-card .req { color: var(--orange-hot); }
.form-card .field__error { color: #ff9a9a; }
.form-card a { color: var(--orange-hot); }

.form-card .field input[type="text"],
.form-card .field input[type="email"],
.form-card .field select,
.form-card .field textarea {
  background: var(--cream);
  border-color: transparent;
  color: var(--ink-body);
}
.form-card .field input::placeholder,
.form-card .field textarea::placeholder { color: #7b8398; }
.form-card .field input:focus,
.form-card .field select:focus,
.form-card .field textarea:focus { border-color: var(--accent); }

/* Widget Turnstile : réserve sa hauteur pour éviter un saut de mise en page
   quand le script Cloudflare finit de charger. */
.cf-turnstile {
  min-height: 65px;
  margin-bottom: .75rem;
}
.form-card :focus-visible { outline-color: var(--orange-hot); }

/* ============================================================
   13. PARTAGE
   ============================================================ */
.partager__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  align-items: center;
}
.share { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Motif « 1 signature → 10 et plus » */
.grow { position: relative; padding-left: clamp(2.5rem, 1rem + 5vw, 5rem); }
.grow__spark {
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  transform: translateY(-50%) rotate(-12deg);
}
.grow__line {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: 0;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.grow__line + .grow__line { margin-top: .35rem; }
.grow__num {
  font-variation-settings: var(--narrow);
  font-weight: 900;
  font-size: clamp(2.4rem, 1.7rem + 3vw, 3.8rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--accent);
}
.grow__arrow {
  flex: none;
  width: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  height: auto;
  color: var(--accent);
  align-self: center;
}
.grow__small { font-size: .58em; font-weight: 700; color: var(--ink-soft); }

/* ============================================================
   14. PIED DE PAGE
   ============================================================ */
.site-footer {
  padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
  background: var(--inv-bg);
  color: var(--inv-ink);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  align-items: start;
}
.site-footer .brand { color: #fff; font-size: 1.05rem; }
.site-footer .brand:hover { color: #fff; }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
}
.footer__nav a {
  font-size: .93rem;
  color: var(--inv-soft);
  text-decoration: none;
}
.footer__nav a:hover { color: #fff; text-decoration: underline; }

.footer__meta {
  margin: 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--inv-soft);
}
.footer__meta strong { color: #fff; font-weight: 700; }
.footer__meta a { color: #fff; font-weight: 600; }
.footer__meta a:hover { color: var(--inv-accent); }

/* ============================================================
   15. PAGES DE CONTENU (légal, 404)
   ============================================================ */
.prose { padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); }
.prose h1 { margin-bottom: .6em; }
.prose h2 {
  margin-top: 2.25rem;
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem);
}
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: .45rem; }

.todo {
  display: inline-block;
  padding: .1em .45em;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 4px;
  font-style: italic;
}

/* ============================================================
   16. DÉCORS
   ============================================================ */
.deco { position: absolute; pointer-events: none; user-select: none; }
/* Masqué par défaut : sous 62rem, le décor chevaucherait le texte des chiffres. */
.deco--constat {
  display: none;
  right: 0;
  bottom: 14%;
  width: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

/* ============================================================
   17. RESPONSIVE
   ============================================================ */
@media (min-width: 40em) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
  .demand { grid-template-columns: auto 1fr auto; }
  .demand__icons { display: flex; }
}

@media (min-width: 62em) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; }
  .partager__grid { grid-template-columns: 1.25fr .75fr; }
  .footer__grid { grid-template-columns: auto 1fr auto; gap: 2.5rem; align-items: center; }
  .footer__nav { justify-content: center; }
  .footer__meta { text-align: right; }

  /* 3 chiffres puis 2 : grille de 6 colonnes */
  .deco--constat { display: block; }
  .sign__art { display: block; }

  .stats { grid-template-columns: repeat(6, 1fr); }
  .stat { grid-column: span 2; }
  .stat:nth-child(4), .stat:nth-child(5) { grid-column: span 3; }
  .stat:not(:nth-child(1)):not(:nth-child(4)) {
    padding-left: clamp(1.25rem, .75rem + 1.5vw, 2.25rem);
    border-left: 2px solid var(--rule-strong);
  }
}

/* ============================================================
   18. MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}