/* ═══════════════════════════════════════════════════════════════════════════
   PAGES DE DOCUMENT — mentions légales, confidentialité, CGV, 404, merci.

   Ces pages ne sont pas de la vente : on les lit, parfois on les imprime, et
   un acheteur qui les ouvre cherche une information précise. Elles reprennent
   donc l'en-tête et le pied de la landing pour ne pas donner l'impression
   d'avoir quitté le site, et rien d'autre : une colonne, un fond clair, une
   mesure de lecture courte.
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root { --gk-brand-h: 264; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--gk-n-50);
  color: var(--gk-n-900);
  font-family: var(--gk-font-body);
  font-size: var(--gk-text-base);
  line-height: var(--gk-leading-body);
  -webkit-font-smoothing: antialiased;
  /* Les tokens clairs sont épinglés : sans ça, en thème sombre du système,
     `--gk-text` bascule en clair sur ce fond crème et la page disparaît. */
  --gk-surface: var(--gk-n-0); --gk-surface-2: var(--gk-n-100);
  --gk-border: var(--gk-n-200); --gk-border-strong: var(--gk-n-300);
  --gk-text: var(--gk-n-900); --gk-text-2: var(--gk-n-600); --gk-text-3: var(--gk-n-500);
  --gk-brand-600: oklch(48% calc(var(--gk-brand-c) * .96) var(--gk-brand-h));
}

.env { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }

/* — en-tête, identique à la landing mais en clair — */
header { background: var(--gk-n-0); border-bottom: 1px solid var(--gk-border); }
.barre { display: flex; align-items: center; gap: var(--gk-space-4); padding: 10px clamp(16px, 4vw, 40px); }
.sceau { width: 32px; height: 32px; border-radius: var(--gk-radius-md); background: var(--gk-brand-500);
         color: var(--gk-n-0); display: grid; place-items: center; font-size: 13px;
         font-weight: var(--gk-weight-bold); flex: none; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gk-n-900);
          min-height: 44px; }
.marque-nom { font-size: 17px; font-weight: var(--gk-weight-semi); letter-spacing: -.01em; }
.retour { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px;
          font-size: var(--gk-text-sm); color: var(--gk-text-2); text-decoration: none; }
.retour:hover { color: var(--gk-n-900); text-decoration: underline; }

/* — corps du document — */
main { padding: clamp(32px, 4.5vw, 60px) 0 clamp(48px, 6vw, 80px); }
.doc { max-width: 72ch; }
.kicker { font-size: var(--gk-text-xs); font-weight: var(--gk-weight-bold); letter-spacing: .14em;
          text-transform: uppercase; color: var(--gk-brand-600); }
h1 { font-size: clamp(26px, 3.2vw, 34px); font-weight: var(--gk-weight-semi); letter-spacing: -.02em;
     line-height: 1.15; margin: 10px 0 var(--gk-space-3); text-wrap: pretty; }
h2 { font-size: var(--gk-text-xl); font-weight: var(--gk-weight-semi); letter-spacing: -.01em;
     margin: var(--gk-space-8) 0 var(--gk-space-3); text-wrap: pretty; }
h3 { font-size: var(--gk-text-md); font-weight: var(--gk-weight-semi); margin: var(--gk-space-5) 0 var(--gk-space-2); }
p, li { color: var(--gk-text); font-size: var(--gk-text-sm); }
p { margin: 0 0 var(--gk-space-3); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--gk-space-3); padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
a { color: var(--gk-brand-600); }
.chapo { font-size: var(--gk-text-md); color: var(--gk-text-2); margin-bottom: var(--gk-space-6); }
.maj { font-size: var(--gk-text-xs); color: var(--gk-text-2); }

/* Tableau des données : plus lisible qu'une liste à puces pour un registre. */
table { border-collapse: collapse; width: 100%; margin: 0 0 var(--gk-space-4); font-size: var(--gk-text-sm); }
.tableau { overflow-x: auto; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--gk-border); }
th { font-weight: var(--gk-weight-semi); color: var(--gk-text-2); font-size: var(--gk-text-xs);
     text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }

/* Encadré de rappel. */
.encadre { background: var(--gk-surface); border: 1px solid var(--gk-border-strong);
           border-radius: var(--gk-radius-lg); padding: 18px 20px; margin: 0 0 var(--gk-space-5); }
.encadre p:last-child { margin-bottom: 0; }

/* ── CE QUI RESTE À REMPLIR ─────────────────────────────────────────────────
   Chaque `<mark class="tbd">` est un trou dans le document. Ils sont surlignés
   en jaune vif exprès : une mention légale incomplète mise en ligne sans qu'on
   s'en aperçoive est pire que pas de page du tout. Cherchez « tbd » dans les
   fichiers pour la liste complète. */
mark.tbd { background: oklch(88% .16 95); color: oklch(28% .06 70); padding: 1px 6px;
           border-radius: var(--gk-radius-sm); font-weight: var(--gk-weight-semi);
           box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* — pied — */
footer { border-top: 1px solid var(--gk-border); padding: var(--gk-space-6) 0 var(--gk-space-8); }
.pied-liens { display: flex; gap: var(--gk-space-5); flex-wrap: wrap; align-items: center; }
.pied-liens a, .pied-liens span { display: inline-flex; align-items: center; min-height: 44px;
                                  font-size: var(--gk-text-sm); }
.pied-liens span { color: var(--gk-text-2); }
.pied-liens a { color: var(--gk-text-2); text-decoration: none; }
.pied-liens a:hover { color: var(--gk-n-900); text-decoration: underline; }

/* — bouton, pour les pages 404 et merci — */
.envoyer { display: inline-flex; align-items: center; justify-content: center; border: 0;
           background: var(--gk-brand-500); color: var(--gk-n-0); font: inherit;
           font-size: var(--gk-text-sm); font-weight: var(--gk-weight-semi); min-height: 44px;
           padding: 0 22px; border-radius: var(--gk-radius-full); text-decoration: none;
           box-shadow: var(--gk-shadow-brand); }
.envoyer:hover { background: var(--gk-brand-600); }

/* Une page courte ne doit pas laisser le pied flotter au milieu de l'écran. */
.centree { min-height: calc(100vh - 210px); display: grid; place-items: center; text-align: center; }

@media print {
  header, footer, .retour { display: none; }
  body { background: #fff; }
  .doc { max-width: none; }
  mark.tbd { background: none; border: 1px solid #000; }
}