/* ============================================================================
   oya-charte.css — Design system OYA (charte graphique imposée 2025)
   SSOT couleurs + typographie. EPIC-002 / US-OYA-005.

   Palette = valeurs RENDUES vérifiées au pixel depuis le PDF de charte
   (le tableau hex p.9 du PDF est corrompu : 4 hex/6 mal appariés — écarté).
   Thème : navy-ancré + contenu clair. Univers : transition alimentaire.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Typo WEB = Poppins (la charte p.8 désigne Poppins comme police web :
   texte courant Regular + sous-titres SemiBold). Titres en Poppins 600/700.
   Aller Display (print) écartée du web : licence webfont payante au-delà de 25 visiteurs. */

:root {
  /* ---- Marque charte (valeurs rendues) ---- */
  /* DOMINANTE = vert sapin de la charte (univers agriculture). Le navy de la charte
     est relégué à un rare accent ; ces tokens "navy" portent désormais les verts. */
  --oya-navy:        #22685C;  /* vert sapin charte — identité dominante (navbar/héros/footer) */
  --oya-navy-deep:   #1A5046;  /* vert sapin profond (depth / footer / hover) */
  --oya-navy-soft:   #3F886C;  /* vert teal médium (cartes/sections sur vert) */
  --oya-accent-nuit: #2B3A47;  /* vrai bleu nuit charte — accent rare uniquement */
  --oya-corail:      #F4704C;  /* highlight / « recommandé » */
  --oya-orange:      #F6A20E;  /* CTA / cercles de score */
  --oya-lime:        #ABCC40;  /* fraîcheur / progression */
  --oya-sapin:       #22685C;  /* brand secondaire / liens / boutons primaires */
  --oya-sapin-mid:   #3F886C;  /* teal médium */
  --oya-charbon:     #424242;  /* texte sur clair */

  /* ---- Surfaces (navy-ancré + contenu clair) ---- */
  --oya-bg:          var(--oya-navy);   /* fond de page = identité navy */
  --oya-surface:     #FFFFFF;           /* cartes / zones de contenu (lisibilité) */
  --oya-surface-2:   #F6F4EF;           /* surface claire très légère (warm subtil) */
  --oya-ink:         #2B3A47;           /* texte principal sur clair */
  --oya-ink-soft:    #5B6B78;           /* texte secondaire sur clair */
  --oya-on-navy:     #FFFFFF;           /* texte sur navy */
  --oya-on-navy-soft:#C4D0D9;           /* texte secondaire sur navy */
  --oya-border:      #E5E2DA;           /* bordures sur clair */
  --oya-border-navy: rgba(255,255,255,.14);

  /* ---- Sémantique (back-office) ---- */
  --oya-danger:      #C23614;  /* brique charte */
  --oya-warning:     #F9B233;  /* doré charte */
  --oya-info:        var(--oya-sapin-mid);
  --oya-success:     var(--oya-lime);

  /* ---- Typo charte ---- */
  --oya-font:        'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --oya-font-titre:  'Poppins', system-ui, -apple-system, sans-serif;

  /* ---- Rayon / ombre / transition ---- */
  --oya-radius:      .5rem;
  --oya-radius-lg:   1rem;
  --oya-radius-pill: 999px;
  --oya-shadow-sm:   0 1px 3px rgba(43,58,71,.08);
  --oya-shadow:      0 8px 28px rgba(43,58,71,.14);
  --oya-shadow-navy: 0 12px 40px rgba(0,0,0,.30);
  --oya-t:           .18s ease;

  /* ============================================================
     Alias rétro-compat (AC2) : anciennes variables → tokens charte.
     Permet aux templates/styles existants de se re-skinner sans
     réécriture massive (DRY). À résorber au fil des stories.
     ============================================================ */
  --oya-green:        var(--oya-sapin);
  --oya-green-mid:    var(--oya-sapin-mid);
  --oya-green-soft:   var(--oya-lime);
  --oya-dark:         var(--oya-navy);
  --oya-vert-profond: var(--oya-navy);
  --oya-mousse:       var(--oya-sapin-mid);
  --oya-light:        var(--oya-lime);
  --oya-soleil:       var(--oya-orange);
  --oya-prune:        var(--oya-charbon);
  --oya-paper:        var(--oya-surface-2);
  --oya-paper-2:      #ECE8DF;
  --oya-bg-light:     var(--oya-surface-2);
}

/* ---- Base typographique ---- */
body {
  font-family: var(--oya-font);
  color: var(--oya-ink);
}
h1, h2, h3, .oya-titre {
  font-family: var(--oya-font-titre);
  font-weight: 600;
  letter-spacing: .2px;
}
a { color: var(--oya-sapin); }
a:hover { color: var(--oya-sapin-mid); }

/* ---- Composants partagés (SSOT — utilisés front + back-office) ---- */
.btn-oya { background: var(--oya-sapin); color: #fff; border: none; }
.btn-oya:hover { background: var(--oya-navy); color: #fff; }
.btn-oya-soleil { background: var(--oya-orange); color: #3a2600; border: none; font-weight: 600; }
.btn-oya-soleil:hover { filter: brightness(.95); color: #3a2600; }
.btn-oya-grad { background: linear-gradient(135deg, var(--oya-sapin), var(--oya-sapin-mid)); color: #fff; border: none; }
.btn-oya-corail { background: var(--oya-corail); color: #fff; border: none; font-weight: 600; }

.progress-step .step { width: 2rem; height: 2rem; border-radius: 50%; background: #dee2e6;
  display: inline-flex; align-items: center; justify-content: center; font-weight: bold; }
.progress-step .step.active { background: var(--oya-sapin); color: #fff; }
.progress-step .step.done { background: var(--oya-lime); color: var(--oya-navy); }