/* ================================================
   GARDE.CSS — Page de garde (index.html uniquement)
   ------------------------------------------------
   Direction : « atelier de papier chaud, encre graphite ».
   Reprise du système Gleap (refero.design) :

     · Toile de lin #EDEDE8 — le fond n'est jamais blanc.
       Les surfaces s'empilent par température, pas par ombre :
       toile → blanc → pierre → caillou.
     · Une seule famille, Switzer, en graisse 400 même en
       display : les titres murmurent, ils ne crient pas.
     · Boutons en capsule (rayon 200px) — non négociable.
     · Filets à l'encre noire, 1px. Cartes à 12px.
     · Un seul élément chromatique, le vert #4CC02B,
       rationné aux pastilles d'état. Nulle part ailleurs.

   Extensions assumées, absentes du système source :
     · un rouge sémantique (brique chaude) pour « oublié »
       et « inacceptable » — la vignette corrigée en a besoin ;
     · un pendant sombre, dérivé en inversant la pile de
       surfaces sur le graphite, puisque la page porte une
       bascule de thème.

   Ce fichier n'est consommé QUE par index.html. Ses jetons sont
   repris à l'identique par css/theme-garde.css, qui porte cette
   identité sur les menus, la connexion et l'admin : toute
   évolution de la palette se fait dans les deux fichiers.
   ================================================ */

.garde-page {
  /* ── Surfaces (empilement par température) ── */
  --g-canvas:  #EDEDE8;   /* Linen Canvas — fond de page */
  --g-surface: #FFFFFF;   /* Frosted White — cartes */
  --g-stone:   #DBDBD2;   /* Warm Stone — bandes, boutons secondaires */
  --g-pebble:  #C0C0C0;   /* Pebble — tuiles circulaires */

  /* ── Encres ── */
  --g-ink:     #141414;   /* Graphite Ink — CTA, ancre */
  --g-text:    #292929;   /* Charcoal Body — titres et texte fort */
  --g-nav:     #353535;   /* Iron Nav — liens et texte courant */
  --g-caption: #6F6F6E;   /* Slate Caption — aides, méta sur blanc */
  --g-label:   #5C5C5C;   /* Ash assombri : les libellés de 12px passent AA */
  --g-muted:   #8F8F8E;   /* Ash Subheading — grands chiffres estompés */

  /* ── Filets ── */
  --g-hairline: #000000;  /* Onyx — filet de carte, 1px */
  --g-quartz:   #D0D0C8;  /* Quartz — séparateurs faibles, survols */

  /* ── Chromatique rationnée ── */
  --g-pulse: #4CC02B;     /* Lime Pulse — pastilles d'état, rien d'autre */

  /* ── Sémantique (vignette corrigée + règles du zéro) ── */
  --g-red:      #9E3B26;
  --g-red-soft: #F1E3DE;

  /* Sur le blanc, le filet noir devient une carte signature ;
     ailleurs on reste sur le quartz. */
  --g-on-ink:   #FFFFFF;  /* texte posé sur le graphite */

  /* Une seule ombre, réservée à la vignette du héro. */
  --g-shadow-card: rgba(16, 24, 40, 0.12) 0 18px 55px 0;

  /* ── Rayons ── */
  --g-r-xs:   3.75px;
  --g-r-sm:   6px;
  --g-r:      12px;
  --g-r-pill: 200px;
  --g-r-full: 9999px;

  /* ── Trame (unité de base 6px) ── */
  --g-gutter:  clamp(24px, 5.5vw, 60px);
  --g-section: clamp(72px, 9vw, 120px);
  --g-maxw:    1200px;

  --font-sans: "Switzer", "Inter", "Manrope", "DM Sans",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  font-family: var(--font-sans);
  font-weight: 400;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--g-nav);
  background: var(--g-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Pendant sombre : la pile de surfaces s'inverse sur le graphite,
   les neutres restent chauds. Le vert ne bouge pas. */
[data-theme="dark"] .garde-page {
  --g-canvas:  #141414;
  --g-surface: #1C1C1B;
  --g-stone:   #292929;
  --g-pebble:  #3A3A38;

  --g-ink:     #EDEDE8;   /* l'ancre devient le lin */
  --g-text:    #E8E8E3;
  --g-nav:     #C9C9C4;
  --g-caption: #A2A29E;
  --g-label:   #9D9D9A;
  --g-muted:   #8F8F8E;

  --g-hairline: #4A4A47;
  --g-quartz:   #303030;

  --g-red:      #DE8C74;
  --g-red-soft: #2E1F1B;

  --g-on-ink:   #141414;  /* texte posé sur le lin */

  --g-shadow-card: rgba(0, 0, 0, 0.45) 0 18px 55px 0;
}

/* ── Accessibilité ── */
.garde-skip {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  padding: 12px 24px; border-radius: var(--g-r-pill);
  background: var(--g-ink); color: var(--g-on-ink);
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.garde-skip:focus { left: var(--g-gutter); }

.garde-page a:focus-visible,
.garde-page button:focus-visible {
  outline: 2px solid var(--g-hairline);
  outline-offset: 3px;
}

/* ════════════════════════════════════════════════
   BOUTONS — la capsule est non négociable
   ════════════════════════════════════════════════ */
.garde-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--g-r-pill);
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 500; line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease,
              color 180ms ease, transform 180ms ease;
}
.garde-btn-primary {
  background: var(--g-ink); color: var(--g-on-ink);
}
.garde-btn-primary:hover {
  background: var(--g-text);
  transform: translateY(-1px);
}
[data-theme="dark"] .garde-page .garde-btn-primary:hover { background: #FFFFFF; }

.garde-btn-ghost {
  background: var(--g-stone); color: var(--g-ink);
}
.garde-btn-ghost:hover {
  background: var(--g-pebble);
  transform: translateY(-1px);
}

.garde-btn-lg { padding: 15px 30px; font-size: 19px; }
.garde-btn-sm { padding: 9px 18px; font-size: 14px; }

/* ── Marque ── */
.garde-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.garde-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--g-r-full);
  background: var(--g-ink); color: var(--g-on-ink);
  font-weight: 500; font-size: 18px; line-height: 1;
}
.garde-mark.sm { width: 27px; height: 27px; font-size: 14px; }
.garde-word {
  font-size: 23px; font-weight: 500; color: var(--g-text);
  letter-spacing: -0.01em;
}

/* ── Navigation ── */
.garde-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px var(--g-gutter);
  background: color-mix(in srgb, var(--g-canvas) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.garde-nav.is-stuck { border-bottom-color: var(--g-quartz); }
.garde-nav-links { display: flex; align-items: center; gap: 6px; }
.garde-nav-links > a:not(.garde-btn) {
  padding: 9px 15px;
  color: var(--g-nav); text-decoration: none;
  font-size: 16px; font-weight: 400;
  border-radius: var(--g-r-pill);
  transition: color 160ms ease, background 160ms ease;
}
.garde-nav-links > a:not(.garde-btn):hover {
  color: var(--g-text);
  background: var(--g-quartz);
}

.garde-theme-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px; margin: 0 6px;
  border-radius: var(--g-r-full);
  border: 1px solid var(--g-quartz);
  background: transparent; color: var(--g-text);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.garde-theme-btn:hover { background: var(--g-stone); border-color: var(--g-stone); }
/* Glyphe au trait posé par js/icons.js (via theme.js). */
.garde-theme-btn svg { width: 17px; height: 17px; display: block; }

/* ── Bandeau compte suspendu ── */
.garde-notice {
  margin: 18px var(--g-gutter) 0;
  padding: 18px 24px;
  border: 1px solid color-mix(in srgb, var(--g-red) 40%, transparent);
  border-radius: var(--g-r);
  background: var(--g-red-soft);
  color: var(--g-text);
  font-size: 16px; line-height: 1.5;
}
.garde-notice strong { font-weight: 600; }
.garde-notice[hidden] { display: none; }

/* ════════════════════════════════════════════════
   ÉLÉMENTS TRANSVERSES
   ════════════════════════════════════════════════ */
.garde-eyebrow {
  font-size: 15px; font-weight: 500;
  line-height: 1.77;
  color: var(--g-label);
  margin-bottom: 18px;
}
.garde-h2 {
  font-size: clamp(30px, 4.2vw, 45px);
  font-weight: 400; line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--g-text);
  max-width: 24ch;
  text-wrap: balance;
}
.garde-section-lead {
  margin-top: 18px; max-width: 62ch;
  font-size: 19px; line-height: 1.6;
  color: var(--g-nav);
}
.garde-section-lead strong { color: var(--g-text); font-weight: 500; }

/* ════════════════════════════════════════════════
   HÉRO
   ════════════════════════════════════════════════ */
.garde-hero {
  padding: clamp(28px, 4vw, 56px) var(--g-gutter) clamp(36px, 4.5vw, 60px);
}
.garde-hero-grid {
  max-width: var(--g-maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(42px, 6vw, 90px);
  align-items: center;
}

.garde-hero-copy > * { animation: gardeRise 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.garde-hero-copy > :nth-child(1) { animation-delay: 40ms; }
.garde-hero-copy > :nth-child(2) { animation-delay: 110ms; }
.garde-hero-copy > :nth-child(3) { animation-delay: 180ms; }
.garde-hero-copy > :nth-child(4) { animation-delay: 250ms; }
.garde-hero-copy > :nth-child(5) { animation-delay: 300ms; }

.garde-h1 {
  font-size: clamp(40px, 6.2vw, 72px);
  font-weight: 500; line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--g-text);
  max-width: 14ch;
  text-wrap: balance;
  margin-bottom: 24px;
}
/* Pas de virage de teinte : l'emphase se joue sur la densité d'encre. */
.garde-h1 em {
  font-style: italic; font-weight: 500;
  color: var(--g-ink);
}
.garde-lead {
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  max-width: 46ch;
  margin-bottom: 36px;
  color: var(--g-nav);
}
.garde-lead strong { color: var(--g-text); font-weight: 500; }

.garde-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }

/* L'unique usage du vert : une pastille d'état. */
.garde-cta-note {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; line-height: 1.5;
  color: var(--g-label);
}
.garde-cta-note::before {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  border-radius: var(--g-r-full);
  background: var(--g-pulse);
}

/* ── La question corrigée ── */
.garde-demo {
  background: var(--g-surface);
  border: 1px solid var(--g-hairline);
  border-radius: var(--g-r);
  box-shadow: var(--g-shadow-card);
  padding: clamp(24px, 2.6vw, 30px);
  animation: gardeRise 800ms 220ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.gd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--g-label);
  padding-bottom: 15px; margin-bottom: 18px;
  border-bottom: 1px solid var(--g-quartz);
}
.gd-tag {
  padding: 4px 12px;
  border-radius: var(--g-r-pill);
  background: var(--g-stone);
  color: var(--g-ink);
  font-weight: 500;
}
.gd-statement {
  font-size: 19px; line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--g-text);
  margin-bottom: 18px;
}
.gd-items { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.gd-items li {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  font-size: 16px; line-height: 1.5;
  color: var(--g-nav);
}
/* Proposition cochable : la case native est masquée, .gd-box la dessine */
.gd-choice {
  grid-column: 1 / 3;
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 12px;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gd-input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.gd-box {
  display: grid; place-items: center;
  width: 21px; height: 21px;
  border: 1px solid var(--g-quartz);
  border-radius: var(--g-r-sm);
  font-size: 12px; font-weight: 600; line-height: 1;
  color: transparent;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.gd-choice:hover .gd-box { border-color: var(--g-label); }
.gd-choice:hover .gd-text { color: var(--g-text); }
.gd-input:checked + .gd-box {
  background: var(--g-ink);
  border-color: var(--g-ink);
  color: var(--g-on-ink);
}
.gd-input:focus-visible + .gd-box {
  outline: 2px solid var(--g-ink);
  outline-offset: 2px;
}
.gd-missed .gd-text,
.gd-extra .gd-text { color: var(--g-text); }
.gd-flag {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--g-r-pill);
  background: var(--g-red-soft); color: var(--g-red);
}
.gd-flag[hidden] { display: none; }
#gd-score { transition: opacity 160ms ease; }
#gd-score.is-updating { opacity: 0.35; }
.gd-verdict {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--g-quartz);
  font-size: 14px; color: var(--g-label);
}
.gd-verdict strong {
  font-size: 27px; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--g-text);
}

/* ── Le fil sous la question (même vignette : une seule ombre) ── */
.gd-thread {
  display: grid; gap: 15px;
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--g-quartz);
}
.gd-thread-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--g-label);
}
.gd-count {
  display: grid; place-items: center;
  min-width: 21px; height: 21px; padding: 0 7px;
  border-radius: var(--g-r-pill);
  background: var(--g-ink); color: var(--g-on-ink);
  font-size: 12px; letter-spacing: 0;
}
.gd-note { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.gd-reply {
  margin-left: 15px; padding-left: 15px;
  border-left: 1px solid var(--g-quartz);
}
.gd-avatar {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--g-r-full);
  background: var(--g-stone); color: var(--g-ink);
  font-size: 12px; font-weight: 500; line-height: 1;
}
.gd-note-meta { font-size: 13px; line-height: 1.4; color: var(--g-label); margin-bottom: 3px; }
.gd-note-meta strong { color: var(--g-text); font-weight: 500; }
.gd-note-body { font-size: 15px; line-height: 1.5; color: var(--g-nav); }

/* ── Statistiques ── */
.garde-stats {
  max-width: var(--g-maxw);
  margin: clamp(54px, 7vw, 90px) auto 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--g-quartz);
  list-style: none;
  display: flex; flex-wrap: wrap;
  gap: 18px clamp(30px, 5vw, 72px);
  font-size: 14px; color: var(--g-label);
}
.garde-stats strong {
  display: block;
  font-size: clamp(27px, 2.4vw, 32px);
  font-weight: 400; line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--g-text);
  margin-bottom: 3px;
}

/* ════════════════════════════════════════════════
   SECTIONS
   ════════════════════════════════════════════════ */
.garde-section { padding: var(--g-section) var(--g-gutter); }
.garde-section-inner { max-width: var(--g-maxw); margin: 0 auto; }
.garde-section-wash { background: var(--g-stone); }

/* ── Méthode : tuiles circulaires en caillou ── */
.garde-steps {
  margin-top: clamp(48px, 6vw, 72px);
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 42px clamp(30px, 4vw, 54px);
}
.garde-step { display: grid; align-content: start; }
.garde-step-num {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--g-r-full);
  background: var(--g-stone);
  color: var(--g-ink);
  font-size: 16px; font-weight: 500; line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}
.garde-step h3 {
  font-size: 27px; font-weight: 400; line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--g-text); margin-bottom: 12px;
}
.garde-step p { font-size: 16px; line-height: 1.6; color: var(--g-nav); }

.garde-steps-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Communauté : trois cartes, puis la boucle de correction ── */
.garde-community {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}
.gc-num {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--g-r-full);
  background: var(--g-stone); color: var(--g-ink);
  font-size: 14px; font-weight: 500; line-height: 1;
  margin-bottom: 18px;
}
.garde-cell-lead h3 { font-size: 23px; font-weight: 400; letter-spacing: -0.01em; }

.garde-loop {
  margin-top: 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: clamp(24px, 4vw, 54px); align-items: center;
  padding: clamp(24px, 3vw, 36px);
  background: var(--g-surface);
  border: 1px solid var(--g-hairline);
  border-radius: var(--g-r);
}
.garde-loop-copy h3 {
  font-size: 27px; font-weight: 400; line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--g-text); margin-bottom: 12px;
}
.garde-loop-copy p { font-size: 16px; line-height: 1.6; color: var(--g-nav); }
.garde-loop-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.garde-loop-steps li {
  position: relative;
  display: grid; align-content: start; gap: 6px;
  padding: 27px 12px 0 0;
}
/* Le trait qui relie les étapes, à hauteur des pastilles */
.garde-loop-steps li:not(:last-child)::before {
  content: "";
  position: absolute; top: 6px; left: 13px; right: 0;
  border-top: 1px solid var(--g-quartz);
}
.gl-dot {
  position: absolute; top: 0; left: 0;
  width: 13px; height: 13px;
  border-radius: var(--g-r-full);
  border: 1px solid var(--g-hairline);
  background: var(--g-surface);
}
/* Pastille d'état « en ligne » : l'usage légitime du vert. */
.gl-dot-live { background: var(--g-pulse); border-color: var(--g-pulse); }
.garde-loop-steps strong { font-size: 16px; font-weight: 500; color: var(--g-text); }
.garde-loop-steps li > span:not(.gl-dot) { font-size: 14px; line-height: 1.5; color: var(--g-label); }

/* ── Plateforme : cartes blanches sur la bande de pierre ── */
.garde-grid {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.garde-cell {
  background: var(--g-surface);
  border-radius: var(--g-r);
  padding: 24px;
}
.garde-cell h3 {
  font-size: 19px; font-weight: 500; line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--g-text); margin-bottom: 9px;
}
.garde-cell p { font-size: 16px; line-height: 1.6; color: var(--g-nav); }

/* ── Barème : l'échelle R2C ── */
.garde-scale {
  margin-top: clamp(48px, 6vw, 66px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--g-surface);
  border: 1px solid var(--g-hairline);
  border-radius: var(--g-r);
  overflow: hidden;
}
.garde-scale-cell {
  padding: clamp(24px, 3vw, 36px) clamp(18px, 2.5vw, 30px);
  display: grid; gap: 12px; align-content: start;
}
.garde-scale-cell + .garde-scale-cell { border-left: 1px solid var(--g-quartz); }
.gsc-note {
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 400; line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--g-text);
}
/* La dégressivité du barème se lit par la densité d'encre. */
.garde-scale-cell:nth-child(2) .gsc-note { color: var(--g-nav); }
.garde-scale-cell:nth-child(3) .gsc-note { color: var(--g-caption); }
.garde-scale-cell:nth-child(4) .gsc-note { color: var(--g-muted); }
.gsc-label {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.5;
  color: var(--g-label);
}
.garde-scale-foot {
  margin-top: 18px;
  font-size: 14px; color: var(--g-label);
}

/* ── Règles du zéro ── */
.garde-zero {
  margin-top: clamp(30px, 4vw, 42px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.garde-zero-card {
  display: grid; grid-template-columns: auto 1fr;
  gap: 18px; align-items: start;
  padding: 24px;
  background: var(--g-surface);
  border-radius: var(--g-r);
}
.gz-badge {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--g-r-full);
  background: var(--g-stone); color: var(--g-ink);
  font-size: 16px; font-weight: 500; line-height: 1;
}
.gz-badge-red { background: var(--g-red-soft); color: var(--g-red); }
.gz-badge-text {
  width: auto; padding: 0 12px;
  border-radius: var(--g-r-pill);
  font-size: 13px; letter-spacing: 0.04em;
}
.garde-zero-wide { grid-column: 1 / -1; }
.garde-zero-card p { font-size: 16px; line-height: 1.6; color: var(--g-nav); }
.garde-zero-card strong { color: var(--g-text); font-weight: 500; }

/* ── CTA final ── */
.garde-final { padding-top: clamp(60px, 8vw, 108px); }
.garde-final-inner {
  text-align: center;
  display: grid; justify-items: center;
  padding: clamp(48px, 7vw, 90px) clamp(24px, 5vw, 60px);
  background: var(--g-surface);
  border: 1px solid var(--g-hairline);
  border-radius: var(--g-r);
}
.garde-final-title { max-width: none; }
.garde-final-title em { font-style: italic; color: var(--g-ink); }
.garde-final-sub {
  margin: 18px 0 30px;
  max-width: 46ch;
  font-size: 19px; line-height: 1.5;
  color: var(--g-nav);
}

/* ── Pied ── */
.garde-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 36px var(--g-gutter);
  border-top: 1px solid var(--g-quartz);
  font-size: 14px; color: var(--g-label);
  text-align: center;
}

/* ── Animations ── */
@keyframes gardeRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .garde-page *,
  .garde-page *::before,
  .garde-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .garde-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .garde-demo { max-width: 560px; }
  .garde-steps { grid-template-columns: 1fr; gap: 30px; }
  .garde-steps-4 { grid-template-columns: 1fr 1fr; }
  .garde-community { grid-template-columns: 1fr 1fr; }
  .garde-community .garde-cell-lead { grid-column: 1 / -1; }
  .garde-loop { grid-template-columns: 1fr; }
  .garde-grid { grid-template-columns: 1fr 1fr; }
  .garde-scale { grid-template-columns: 1fr 1fr; }
  .garde-scale-cell:nth-child(3) { border-left: none; }
  .garde-scale-cell:nth-child(n+3) { border-top: 1px solid var(--g-quartz); }
}
@media (max-width: 680px) {
  .garde-nav-links > a:not(.garde-btn),
  .garde-nav-links .garde-btn-ghost { display: none; }
  .garde-grid { grid-template-columns: 1fr; }
  .garde-steps-4 { grid-template-columns: 1fr; }
  .garde-community { grid-template-columns: 1fr; }
  /* Boucle en colonne : pastilles à gauche, trait vertical */
  .garde-loop-steps { grid-template-columns: 1fr; gap: 18px; }
  .garde-loop-steps li { padding: 0 0 0 27px; }
  .garde-loop-steps li:not(:last-child)::before {
    top: 15px; bottom: -18px; left: 6px; right: auto;
    border-top: none; border-left: 1px solid var(--g-quartz);
  }
  .gl-dot { top: 3px; }
  .garde-zero { grid-template-columns: 1fr; }
  .garde-h2 { max-width: none; }
  .garde-cta-row .garde-btn { flex: 1 1 100%; }
  .garde-stats { gap: 18px 30px; }
}