/* ============================================================
   SOCING — tokens.css
   Variables de design (vague V1 CONTRATS, famille Cristallo).
   Palette chaude, faible saturation : AUCUN dégradé bleu-violet.
   Règle de pairage : sur fond prune, texte et traits porteurs de
   sens UNIQUEMENT en crème (--creme) ou corail clair (--corail-clair).
   ============================================================ */

:root {
  /* ---- Palette Cristallo (bases) ---- */
  --creme:        #F6F1E7; /* papier IDEAING, fond principal */
  --corail:       #FF6B61; /* geste humain, action primaire */
  --corail-clair: #FF9B91; /* chaleur sur fond sombre */
  --prune:        #071A2E; /* encre bleu nuit, lisibilité forte */
  --sarcelle:     #23C7BD; /* élan, validation, focus */
  --vert:         #17856F; /* ancrage, pousse, projet */
  --or:           #FFC34D; /* idée, repère, attention non alarmante */
  --bleu:         #56A4FF; /* passage, professionnel, ouverture */

  /* ---- Déclinaisons claires (fonds, badges) ---- */
  --creme-clair:    #FFFDF7;
  --corail-pale:    #FFE0DC;
  --prune-clair:    #496078;
  --sarcelle-clair: #BFF3EE;
  --vert-clair:     #BFE6D8;
  --or-clair:       #FFF0BD;
  --bleu-clair:     #DCEBFF;

  /* ---- Déclinaisons sombres (traits sur crème) ---- */
  --creme-sombre:    #E6DCC8;
  --corail-sombre:   #A72D28;
  --prune-sombre:    #04101D;
  --sarcelle-sombre: #0E625D;
  --vert-sombre:     #0D5747;

  /* ---- Rôles sémantiques ---- */
  --fond:            var(--creme);
  --fond-sombre:     var(--prune);
  --surface:         var(--creme-clair);
  --encre:           var(--prune);
  --encre-sur-prune: var(--creme);
  --accent:          var(--corail);
  --accent-sur-prune: var(--corail-clair);
  --calme:           var(--sarcelle);
  --ancrage:         var(--vert);
  --danger:          var(--corail-sombre); /* 6,5:1 sur crème */
  --bordure:         var(--creme-sombre);

  /* ---- Espacements (base 4 px) ---- */
  --espace-1:  0.25rem;  /* 4 px  */
  --espace-2:  0.5rem;   /* 8 px  */
  --espace-3:  0.75rem;  /* 12 px */
  --espace-4:  1rem;     /* 16 px */
  --espace-5:  1.25rem;  /* 20 px */
  --espace-6:  1.5rem;   /* 24 px */
  --espace-8:  2rem;     /* 32 px */
  --espace-10: 2.5rem;   /* 40 px */
  --espace-12: 3rem;     /* 48 px */
  --espace-16: 4rem;     /* 64 px */

  /* ---- Rayons ---- */
  --rayon-s:    0.375rem; /* 6 px  */
  --rayon-m:    0.75rem;  /* 12 px */
  --rayon-l:    1.25rem;  /* 20 px — coquille « contenant protecteur » */
  --rayon-plein: 999px;   /* pilules, badges */

  /* ---- Échelle typographique fluide (base ≥ 18 px) ---- */
  --texte-s:   clamp(0.94rem, 0.9rem + 0.2vw, 1rem);      /* ≥ 15 px, libellés secondaires */
  --texte-base: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); /* ≥ 18 px, corps de texte */
  --texte-l:   clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);    /* sous-titres */
  --texte-xl:  clamp(1.6rem, 1.35rem + 1.2vw, 2rem);      /* titres de section */
  --texte-xxl: clamp(1.9rem, 1.5rem + 1.9vw, 2.6rem);     /* titre d'écran */

  /* ---- Cible tactile (WCAG 2.5.5 / 2.5.8 — visé 44 px) ---- */
  --cible: 44px;

  /* ---- Anneau de focus toujours visible (WCAG 2.4.7 / 2.4.13) ---- */
  --focus-ring: 3px solid var(--sarcelle-sombre);
  --focus-ring-offset: 2px;
  /* Variante sur fond prune : sarcelle y est insuffisante (1,72:1). */
  --focus-ring-sur-prune: 3px solid var(--corail-clair);

  /* ---- Durées de mouvement ---- */
  --duree-rapide:  150ms;
  --duree-moyenne: 250ms;
  --duree-lente:   400ms;
  --courbe: cubic-bezier(0.3, 0, 0.2, 1);

  /* ---- Couches (z-index) ---- */
  --z-base:      0;
  --z-collant:   100;  /* navigation basse, en-têtes collants */
  --z-session:   150;  /* plein écran à deux, sous le bouton Masquer */
  --z-masquer:   550;  /* sortie rapide, au-dessus des écrans système */
  --z-bandeau:   300;  /* bandeau d'urgence */
  --z-dialogue:  400;  /* écrans modaux */
--z-verrou:    500;  /* écran de verrouillage, au-dessus de tout */
--z-maj:       600;  /* mise à jour choisie, tactile même verrouillée */
--z-voile:     700;  /* voile d'arrière-plan neutre, au-dessus de tout le reste */
}

/* Mouvement réduit : toute durée devient nulle (WCAG 2.3.3).
   Les états finaux restent perceptibles sans animation. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-rapide:  0.01ms;
    --duree-moyenne: 0.01ms;
    --duree-lente:   0.01ms;
  }
}