/* ============================================
   ELANTEC — Design Tokens CSS Variables
   Direction visuelle "Académie moderne" — CONVERGENCE v4, raffinée v5
   Source : clients/actifs/Elantec/brand-brief.md
   Base    : maquettes-vitrine-v3/index-a.html (1.2.0, Piste 1 "Continuité maîtrisée")
   Version : 1.4.0 · 2026-07-14 — itération v5, raffinements sur Direction A VALIDÉE
   ============================================
   DELTA vs v1.3.0 (v4), documenté (cf. 12-design-rendu-v5.md) :
   1. Card / testimonial-card : retour au GRIS (pas le bleu de v4). La
      bordure v4 utilisait --color-brand-deep-2 (famille bleu nuit) — Greg
      juge que gris+orange fonctionne mieux que bleu+orange sur ces cartes.
      Nouveau token neutre --color-border-strong (#6B7280, gris pur, aucune
      teinte bleue/orange) remplace --color-brand-deep-2 comme bordure de
      carte, contraste vérifié ≥4,3:1 sur les deux fonds possibles (bien
      au-dessus du seuil non-texte 3:1). .card et .testimonial-card
      partagent désormais EXACTEMENT la même règle (même entourage gris),
      demande explicite de cohérence entre les deux groupes de cartes.
      Le filet d'accent gauche 3px reste la SEULE touche orange (accent
      uniquement, jamais l'entourage).
   ============================================
   DELTA vs v1.2.0 (v3), historique v4 :
   1. CONVERGENCE : Greg a validé la Piste 1 ("Continuité maîtrisée", Public
      Sans + Space Mono + accent chaleureux) comme direction définitive. Le
      système de bascule [data-variant="a"|"b"] et la Piste 2 ("Caractère
      assumé", Bricolage Grotesque + Spline Sans Mono + cyan) sont RETIRÉS —
      plus qu'une seule police de titres/mono à maintenir. --color-brand-cyan
      reste défini (encore utilisé pour les focus states et le badge par
      défaut), mais n'est plus un accent de variante.
   2. CTA : l'effet "cachet" (ombre décalée mono-couleur) est retiré sur
      retour Greg ("supprimer l'effet cachet ET le fond orange"). Hover =
      changement de couleur net (background-color), pas d'ombre. Traitement
      universel (plus de branche par variante) — cf. règles .btn-primary/
      .btn-secondary ci-dessous.
   3. Card / testimonial-card (v4, remplacé en v5 — voir ci-dessus) : bordure
      pleine renforcée (1px, bleu nuit) + fond passé de --color-bg-surface à
      --color-bg-primary, pour se détacher nettement des sections
      .section-surface qui partagent l'ancien fond de carte.
   ============================================
*/

:root {
  /* ============== COLORS · BRAND (inchangé) ============== */
  --color-brand-deep:        #253569; /* bleu nuit dominant — H1/H2, CTA primaire, bandeaux, footer */
  --color-brand-deep-2:      #3D3E7A; /* hover du bleu nuit, blocs secondaires, bordures renforcées */
  --color-brand-cyan:        #3F7E97; /* accent INST — citations, infographie, filets, focus states */
  --color-brand-yellowgreen: #9DA13A; /* accent PEDA — soulignements, chapter openers. ABSENT en INST. */

  /* ============== COLORS · ACCENT SECONDAIRE (v2, conservé) ==============
     Nuance chaleureuse "communauté de 60 pros du 49". Volontairement
     distincte de --color-mark-orange (#F4802F, réservé au mark/cluster)
     ET de la sanguine de gregoryblanchard.fr (#C4502E). Accent unique du
     système à partir de v4 (Direction A actée). Usage restreint :
     décoratif uniquement (jamais en texte < 14pt/gras), jamais en grande
     surface. */
  --color-accent-warm:       #D98B3F;

  /* ============== COLORS · NEUTRALS (inchangé) ============== */
  --color-bg-primary:    #FAFAF7; /* fond principal blanc cassé */
  --color-bg-surface:    #F1F2F5; /* sections alternées */
  --color-bg-subtle:     #E2E5EA; /* backgrounds très subtils */
  --color-border-subtle: #E2E5EA;
  --color-border-default:#9CA1AB; /* borders inputs */
  --color-border-strong: #C0C6CF; /* gris CLAIR et doux (v6) — bordure card/testimonial-card ; allégé depuis #6B7280 jugé trop marqué par Greg (léger mais délimite) */
  --color-text-primary:  #0F0F1F; /* noir-bleu, pas pur noir */
  --color-text-secondary:#3D3D52;
  --color-text-tertiary: #9CA1AB; /* métadonnées */
  --color-text-on-dark:  #FAFAF7; /* texte sur fond bleu nuit */

  /* ============== COLORS · SEMANTIC (inchangé) ============== */
  --color-status-success: #3E7C47;
  --color-status-error:   #9E2A2B;
  --color-status-warning: #B5851D;
  --color-status-info:    #3F7E97; /* = --color-brand-cyan */

  /* ============== COLORS · MARK (USAGE CANTONNÉ — inchangé depuis v3) ==============
     Ces couleurs ne servent QUE dans le lockup logo (les 7 points du
     cluster, à leur taille et disposition d'origine) — header et footer.
     AUCUN autre usage décoratif, ni en dégradé, ni en teinte isolée, nulle
     part ailleurs sur la page (pas de barre de carte, pas de halo, pas de
     point coloré sur une timeline, pas de filet dégradé).
  */
  --color-mark-magenta:   #923293;
  --color-mark-red:       #EB3230;
  --color-mark-orange:    #F4802F;
  --color-mark-yellow:    #F4E532;
  --color-mark-green:     #9AC341;
  --color-mark-cyan-vif:  #3DA1D3;
  --color-mark-deep:      #253569; /* point d'ancrage du cluster */

  /* ============== TYPOGRAPHY — DIRECTION UNIQUE (v4) ==============
     Piste 1 "Continuité maîtrisée" actée par Greg le 2026-07-14 : Public
     Sans partout (filiation directe avec le wordmark ELANTEC, sans-serif
     géométrique) + Space Mono pour les chiffres/mono. Plus d'indirection
     par variante — une seule famille de titres/mono à maintenir. */
  --font-family-body:    'Public Sans', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Public Sans', system-ui, -apple-system, sans-serif;
  --font-family-mono:    'Space Mono', 'Courier New', monospace;
  --color-accent:        var(--color-accent-warm);

  /* Repartition 60-30-10, actee le 2026-08-25.
     Ces alias nomment le POIDS VISUEL d'une page. Les neutres et les couleurs
     semantiques restent hors de ce calcul : ce sont des infrastructures. */
  --color-role-dominant:  var(--color-bg-primary);   /* 60 % : fond de page et de carte */
  --color-role-secondary: var(--color-brand-deep);   /* 30 % : titres, nav, CTA, sections profondes */
  --color-role-accent:    var(--color-accent);       /* 10 % : filets, eyebrows, keylines, hover */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Échelle modular Major Third (ratio 1.250), base 16px — inchangée */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   20px;
  --text-xl:   25px;
  --text-2xl:  31px;
  --text-3xl:  39px;
  --text-4xl:  49px;
  --text-5xl:  61px;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;

  /* ============== SPACING (inchangé) ============== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ============== RADIUS (inchangé depuis v3) ============== */
  --radius-xs:   4px;      /* chips, mockup-flag */
  --radius-sm:   8px;      /* boutons, inputs */
  --radius-md:   12px;     /* icônes de cards, petites surfaces */
  --radius-lg:   16px;     /* cards, testimonial-card */
  --radius-full: 9999px;   /* badges/tags + points du cluster + point de la frise */

  /* ============== ELEVATIONS (inchangé) ============== */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(15,15,31,0.06);
  --elevation-2: 0 2px 4px rgba(15,15,31,0.08);
  --elevation-3: 0 8px 16px rgba(15,15,31,0.10);

  /* ============== CONTENT WIDTHS (inchangé) ============== */
  --content-narrow: 60ch;
  --content-prose:  65ch;
  --content-wide:   1200px;

  /* ============== MOTION (inchangé) ============== */
  --motion-duration-fast:    150ms;
  --motion-duration-base:    200ms;
  --motion-duration-slow:    250ms;

  --motion-ease-out:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);

  --header-height-desktop:   72px;
  --header-height-mobile:    56px;
  --header-backdrop-blur:    8px;
  --header-shadow-on-scroll: 0 1px 0 var(--color-border-subtle);
}

/* ============================================
   MOTION PATTERNS — classes utilitaires
   ============================================ */
.motion-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--motion-duration-slow) var(--motion-ease-out),
              transform var(--motion-duration-slow) var(--motion-ease-out);
}
.motion-reveal.is-visible { opacity: 1; transform: translateY(0); }

.motion-card {
  transition: transform var(--motion-duration-base) var(--motion-ease-out),
              box-shadow var(--motion-duration-base) var(--motion-ease-out);
}
.motion-card:hover { transform: translateY(-2px); box-shadow: var(--elevation-2); }

.metric-number { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   PATTERN : application sur les composants
   ============================================ */

body {
  font-family: var(--font-family-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
}

h1 { font-family: var(--font-family-heading); font-size: var(--text-4xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-brand-deep); }
h2 { font-family: var(--font-family-heading); font-size: var(--text-3xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-snug); color: var(--color-brand-deep); }
h3 { font-family: var(--font-family-heading); font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-snug); color: var(--color-brand-deep); }
h4 { font-family: var(--font-family-heading); font-size: var(--text-xl); font-weight: var(--font-weight-medium); line-height: var(--leading-snug); color: var(--color-text-primary); }

.display { font-family: var(--font-family-heading); font-size: var(--text-5xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-brand-deep); }

.eyebrow { font-family: var(--font-family-body); font-size: var(--text-sm); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-brand-deep-2); }

.mono { font-family: var(--font-family-mono); font-weight: var(--font-weight-regular); }

.lead { font-size: var(--text-lg); color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 12px; }

/* Bouton primaire — v4 : PLUS de cachet (ombre décalée + "fond orange"
   perçu retirés sur retour Greg). Traitement classique : fond plein,
   hover = changement de couleur net (background-color), pas d'ombre. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 26px;
  background: var(--color-brand-deep);
  color: var(--color-text-on-dark);
  font-family: var(--font-family-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background-color var(--motion-duration-base) var(--motion-ease-out);
}
.btn-primary:hover { background: var(--color-brand-deep-2); }
.btn-primary:focus-visible { outline: 2px solid var(--color-brand-cyan); outline-offset: 2px; }

/* Bouton secondaire — v4 : hover = inversion classique (fond plein +
   texte clair), remplace l'ancien traitement "trait qui se tire" propre
   à la Piste 2 abandonnée. Même logique de "changement de couleur net"
   que le primaire. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 26px;
  background: transparent;
  color: var(--color-brand-deep);
  font-family: var(--font-family-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  border: 1.5px solid var(--color-brand-deep);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background-color var(--motion-duration-base) var(--motion-ease-out),
              color var(--motion-duration-base) var(--motion-ease-out),
              border-color var(--motion-duration-base) var(--motion-ease-out);
}
.btn-secondary:hover { background: var(--color-brand-deep); color: var(--color-text-on-dark); border-color: var(--color-brand-deep); }
.btn-secondary:focus-visible { outline: 2px solid var(--color-brand-cyan); outline-offset: 2px; }

/* Card + testimonial-card — v5 : entourage GRIS renforcé identique sur les
   deux groupes de cartes ("Pour qui" ET "Ils en parlent"), demande
   explicite de cohérence. Bordure pleine 1,5px --color-border-strong (gris
   neutre, ≥4,3:1 sur bg-primary ET bg-surface) — remplace le bleu nuit de
   v4 (--color-brand-deep-2) que Greg juge moins efficace que gris+orange.
   Fond --color-bg-primary conservé (distinct de --color-bg-surface des
   sections qui contiennent ces cartes — cause racine du défaut v3 déjà
   corrigée en v4, non réintroduite). Le filet d'accent orange à gauche
   (cf. site.css) reste la SEULE touche de couleur — l'entourage, lui, est
   entièrement gris. */
.card, .testimonial-card {
  background: var(--color-bg-primary);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--elevation-1);
}

.input {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
}
.input:focus { outline: 2px solid var(--color-brand-cyan); outline-offset: -2px; border-color: var(--color-brand-cyan); }

.badge { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 500; border-radius: var(--radius-full); background: var(--color-brand-cyan); color: var(--color-text-on-dark); }
.badge.deep { background: var(--color-brand-deep); }
.badge.outline { background: transparent; border: 1px solid var(--color-brand-deep); color: var(--color-brand-deep); }

.divider {
  width: 64px;
  height: 3px;
  border: none;
  border-radius: var(--radius-xs);
  background: var(--color-accent);
  margin: var(--space-8) 0;
}
.divider.centered { margin-left: auto; margin-right: auto; }

.container {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}