/* ==========================================================================
   Capsules — tokens « premium minimaliste » — palette OFFICIELLE validée par Pape le 22/10/2026
   Surcharge tokens.css (à charger APRÈS). tokens.css = archive bleu/orange, non modifié.
   Direction demandée par Pape : fond blanc, texte quasi noir, menthe #14CF93
   comme unique accent, usage parcimonieux. Orange, cerise, cyan : non utilisés.
   Menthe : CTA, détails, filets fins, fonds de petits éléments avec texte noir.
   Jamais en grand aplat, jamais en texte courant sur blanc (contraste ~2:1).
   ========================================================================== */
:root {
  --c-mint:        #14CF93;
  --c-mint-hover:  #10B781;   /* ~9 % plus sombre */
  --c-mint-soft:   #E8FAF3;   /* teinte très claire, fonds de puces/tags uniquement */
  --c-white:       #FFFFFF;
  --c-black:       #0B0D14;
  --c-gunmetal:    #162521;

  /* Neutres resserrés */
  --c-ink-100: #0B0D14;   /* titres */
  --c-ink-80:  #33363F;   /* texte courant (contraste ~12:1 sur blanc) */
  --c-ink-60:  #5E626C;   /* texte secondaire (~6:1) */
  --c-ink-40:  #9A9DA5;   /* légendes sur noir, désactivé */
  --c-line:    #E7E8EA;   /* filets 1 px */
  --c-line-strong: #CFD1D5;
  --c-fill:    #F4F5F6;   /* placeholders visuels */

  /* Sémantique (remplace bleu / beige / orange) */
  --color-brand:            var(--c-mint);
  --color-accent:           var(--c-mint);
  --color-surface:          var(--c-white);
  --color-surface-inverted: var(--c-black);
  --color-surface-raised:   var(--c-white);
  --color-text:             var(--c-ink-80);
  --color-heading:          var(--c-ink-100);
  --color-text-muted:       var(--c-ink-60);
  --color-text-inverted:    var(--c-white);
  --color-border:           var(--c-line);
  --color-brand-hover:      var(--c-mint-hover);
  --color-accent-hover:     var(--c-mint-hover);
  --gradient-brand: none;   /* pas de dégradé dans cette direction */

  /* Typo : grands corps en Light / Regular, approche resserrée ; eyebrows très espacés */
  --fw-display: 300; --fw-h1: 300; --fw-h2: 300; --fw-h3: 400; --fw-h4: 400; --fw-h5: 500;
  --ls-eyebrow: 0.22em; --fw-eyebrow: 500;

  /* Ombres quasi absentes : on structure par filets */
  --shadow-xs: none; --shadow-sm: none;
  --shadow-md: 0 12px 32px rgba(11, 13, 20, 0.06);
  --shadow-lg: 0 24px 60px rgba(11, 13, 20, 0.08);
  --focus-ring: 0 0 0 3px rgba(20, 207, 147, 0.45);

  /* Grille élargie (proposition de Ndèye, à valider) */
  --container-max: 1200px;
}
@media (min-width: 1024px) { :root { --grid-margin: 120px; } }

html { background: var(--c-white); color: var(--color-text); }

/* Boutons discrets : pilule menthe (texte noir) ou contour 1 px */
.btn { box-shadow: none; font-weight: 500; letter-spacing: 0.01em; }
.btn:hover { box-shadow: none; transform: none; }
.btn--primary { background: var(--c-mint); color: var(--c-black); }
.btn--primary:hover { background: var(--c-mint-hover); }
.btn--accent { background: var(--c-mint); color: var(--c-black); }
.btn--ghost { background: transparent; color: var(--c-black); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--c-black); }
.btn--inverted { background: var(--c-white); color: var(--c-black); }
.card { box-shadow: none; border: 1px solid var(--c-line); }
.card:hover { box-shadow: var(--shadow-md); transform: none; }
.input { border: 1px solid var(--c-line-strong); }
.input:focus { border-color: var(--c-black); }
.tag { background: transparent; box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-ink-80); font-weight: 400; }