/* ============================================================
   SOS BOX — Jetons de design « Encre & Miel »
   Source de vérité : docs/direction-artistique.md (étape 2, refonte premium)
   Règle : AUCUNE valeur brute dans les composants — tout passe par ces jetons.
   Intégration : à charger APRÈS styles.css (sa table :root doit gagner la cascade). La migration des composants vers
   ces noms se fait à l'étape 5, section par section.
   ============================================================ */

:root {
  /* ---------- Couleur ---------- */
  --fond: #FAF9F6;            /* ivoire calme — fond principal */
  --fond-2: #ECEFF4;          /* brume bleutée — fond secondaire */
  --blanc: #FFFFFF;           /* réservé aux surfaces sur fonds bleus */

  --encre-texte: #1A2540;     /* texte principal        — 14,43:1 sur --fond */
  --ardoise: #4C5670;         /* texte secondaire       —  6,94:1 sur --fond */
  --legende: #606A80;         /* légendes et mentions   —  5,15:1 sur --fond */

  --bleu: #2B4590;            /* action : boutons, liens, kickers — blanc dessus : 8,91:1 */
  --bleu-profond: #1B2A55;    /* fonds profonds : garantie, finale, menu, pied de page */
  --bleu-hover: #233A78;      /* états survolés — blanc dessus : 10,78:1 */

  --miel: #F2BC3F;            /* accent d'identité — 7,98:1 sur --bleu-profond ;
                                 jamais une action, jamais un texte sur fond clair,
                                 une seule touche par composition */

  --bordure: #DFE3EB;         /* traits, cadres, séparateurs */
  --fond-vitrine: #F5EDE2;    /* crème des rendus 3D : fond des vitrines d'objets */
  --bordure-forte: #7A84A0;   /* bordures des champs — ≥ 3:1 sur blanc ET sur brume (WCAG 1.4.11) */
  --erreur: #B3362B;          /* états d'erreur du formulaire — 5,4:1 sur blanc */

  /* Déclinaisons translucides d'usage courant (bulles, voiles, balayages) */
  --voile-encre-82: rgba(26, 37, 64, 0.82);
  --voile-encre-30: rgba(26, 37, 64, 0.30);
  --bleu-t-08: rgba(43, 69, 144, 0.08);
  --bleu-t-16: rgba(43, 69, 144, 0.16);
  --miel-t-14: rgba(242, 188, 63, 0.14);
  --miel-t-18: rgba(242, 188, 63, 0.18);
  --blanc-t-10: rgba(255, 255, 255, 0.10);
  --blanc-t-26: rgba(255, 255, 255, 0.26);
  --blanc-t-70: rgba(255, 255, 255, 0.70);
  --blanc-t-90: rgba(255, 255, 255, 0.90);
  --bleu-profond-t-92: rgba(27, 42, 85, 0.92);   /* barres fixes, flou d'arrière-plan */

  /* Textes posés sur un fond profond : deux niveaux, pas davantage.
     Blanc à 88 % sur --bleu-profond : 11,4:1 · à 72 % : 7,4:1 — les deux
     restent très au-dessus du seuil de 4,5:1. */
  --texte-sur-sombre: rgba(255, 255, 255, 0.88);
  --texte-sur-sombre-2: rgba(255, 255, 255, 0.72);
  --indice-sur-sombre: rgba(255, 255, 255, 0.60); /* indications non essentielles */

  /* Voiles de lisibilité posés sur les médias (vidéo du hero, photo pleine page) */
  --voile-hero: linear-gradient(to bottom,
      rgba(26, 37, 64, 0.66) 0%,
      rgba(27, 42, 85, 0.46) 38%,
      rgba(27, 42, 85, 0.94) 100%);
  /* Voile directionnel : dense du côté du texte, dégagé sur le bâtiment.
     Un voile uniformément sombre en bas transformait les buis en pot en
     disques indéchiffrables. */
  --voile-photo:
      linear-gradient(to right,
        rgba(26, 37, 64, 0.90) 0%,
        rgba(26, 37, 64, 0.72) 34%,
        rgba(26, 37, 64, 0.30) 62%,
        rgba(26, 37, 64, 0.16) 100%),
      linear-gradient(to top,
        rgba(26, 37, 64, 0.42) 0%,
        rgba(26, 37, 64, 0.10) 45%,
        transparent 100%);

  /* Halo de lisibilité posé sur une photo de fond : dense au centre, sous le
     texte, et dégagé vers les bords pour laisser respirer l'image. */
  --voile-halo: radial-gradient(ellipse 78% 72% at 50% 48%,
      rgba(27, 42, 85, 0.95) 0%,
      rgba(27, 42, 85, 0.88) 38%,
      rgba(27, 42, 85, 0.66) 72%,
      rgba(27, 42, 85, 0.52) 100%);

  /* Ombre de contact sous un objet détouré : douce, 22 % au plus dense. */
  --ombre-contact: radial-gradient(ellipse at 50% 50%,
      rgba(26, 37, 64, 0.22) 0%,
      rgba(26, 37, 64, 0.09) 50%,
      transparent 72%);

  /* Chevron des listes déroulantes (trait --bleu), à la place de la flèche système */
  --chevron-champ: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B4590' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");

  /* Bulles décoratives */
  --bulle-claire: radial-gradient(circle at 32% 30%, var(--miel-t-14), transparent 68%);
  --bulle-sombre: radial-gradient(circle at 32% 30%, var(--miel-t-18), transparent 70%);

  /* ---------- Typographie ---------- */
  --police-titres: 'Archivo', 'Helvetica Neue', sans-serif;
  --police-texte: 'DM Sans', 'Helvetica Neue', sans-serif;

  --fs-hero: clamp(2.75rem, 7vw, 4.75rem);
  --fs-1: clamp(2rem, 4.2vw, 3.05rem);
  --fs-2: clamp(1.35rem, 2.2vw, 1.55rem);
  --fs-3: clamp(1.06rem, 1.5vw, 1.22rem);
  --fs-4: 1rem;
  --fs-5: 0.94rem;
  --fs-6: 0.81rem;

  --interligne-hero: 1.04;
  --interligne-titres: 1.12;
  --interligne-texte: 1.65;

  --approche-hero: -0.03em;
  --approche-titres: -0.015em;
  --approche-etiquette: 0.14em;

  --graisse-titres: 800;
  --graisse-sous-titres: 700;
  --graisse-texte: 400;
  --graisse-texte-fort: 700;

  --mesure: 65ch;             /* largeur maximale du texte courant */

  /* ---------- Espace ---------- */
  --e-1: 4px;  --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px; --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px; --e-10: 128px; --e-11: 160px;

  --respiration-section: clamp(96px, 11vw, 160px);
  --hauteur-nav: 88px;        /* barre fixe : décalage des pages sans hero */
  --hauteur-nav-compacte: 56px;
  --largeur-contenu: 1280px;
  --gouttiere: clamp(24px, 4vw, 64px);

  /* ---------- Formes ---------- */
  --rayon-1: 10px;
  --rayon-2: 16px;
  --rayon-3: 24px;
  --rayon-pilule: 999px;
  --rayon-feuille: clamp(20px, 3vw, 32px);   /* feuilles de sections */

  /* ---------- Ombres (deux seulement) ---------- */
  --ombre-carte: 0 10px 34px rgba(26, 37, 64, 0.08);
  --ombre-levee: 0 18px 48px rgba(26, 37, 64, 0.15);

  /* ---------- Mouvement : deux registres ---------- */
  --t-1: 160ms;               /* micro-interactions rapides */
  --t-2: 260ms;               /* micro-interactions amples */
  --t-signature: 900ms;       /* signatures de marque, une seule fois, à l'entrée */
  --t-apparition: 700ms;      /* apparitions au défilement — 250 ms sur téléphone (app.css) */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);          /* courbe unique du site */
  --ease-rideau: cubic-bezier(0.76, 0, 0.24, 1);   /* réservée aux rideaux/volets */

  /* ---------- Focus clavier ---------- */
  --anneau-focus: 0 0 0 3px var(--fond), 0 0 0 6px var(--bleu);
  --anneau-focus-sombre: 0 0 0 3px var(--bleu-profond), 0 0 0 6px var(--miel);

  /* ---------- Élévations (échelle z) ---------- */
  --z-barre: 90;              /* barre basse du téléphone : sous la navigation et le menu */
  --z-nav: 100;
  --z-menu: 150;
  --z-voile: 180;
  --z-loader: 200;
}

/* ============================================================
   Correspondance de migration ACTIVE — anciens noms → jetons.
   styles.css consomme encore les anciens noms ; cette table le fait
   basculer intégralement sur la palette Encre & Miel. La renommage
   définitif des propriétés se fera au fil des sections.
   ============================================================ */

:root {
  --navy: var(--bleu);
  --navy-deep: var(--bleu-hover);
  --ink: var(--bleu-profond);
  --text: var(--encre-texte);
  --slate: var(--ardoise);
  --paper: var(--fond);
  --mist: var(--fond-2);
  --line: var(--bordure);
  --yellow: var(--miel);
  --font-title: var(--police-titres);
  --font-body: var(--police-texte);
  --w-max: var(--largeur-contenu);
  --gutter: var(--gouttiere);
  --r-sm: var(--rayon-1);
  --r-md: var(--rayon-2);
  --r-lg: var(--rayon-3);
  --r-pill: var(--rayon-pilule);
  --sheet: var(--rayon-feuille);
  --shadow-card: var(--ombre-carte);
  --shadow-lift: var(--ombre-levee);
}