/* ==========================================================================
   BRL Digital : variables
   Couleurs et contrastes repris du cadrage (Direction visuelle). Ne pas en
   ajouter : un seul accent, le violet. Orange et bleu restent à Communication
   et Production, y compris dans les liens vers ces marques.
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Palette brute ---------- */
  --encre: #0B0B0C;          /* fond sombre, texte des boutons violets */
  --carte-1: #141416;        /* cartes sur fond sombre */
  --carte-2: #1C1C20;        /* un niveau au-dessus */
  --trait-sombre: #2A2A2E;   /* bordures sur fond sombre */
  --blanc: #FFFFFF;          /* titres sur fond sombre */
  --gris-texte: #BDBEC0;     /* texte courant sombre, contraste 10,6 */
  --gris-discret: #8E8F93;   /* texte discret sombre, 5,7 sur les cartes */

  --papier: #F4F3EF;         /* fond des sections claires */
  --trait-clair: #CDC9C0;    /* bordures sur fond clair */
  --ardoise: #4A4A4F;        /* texte courant clair, contraste 7,9 */
  --ardoise-discret: #5F5E5A;/* texte discret clair, 5,9 */

  --violet: #8079F7;         /* accent, 5,6 sur le fond sombre */
  --violet-fonce: #5B52E6;   /* texte et liens violets sur fond clair, 5,0 */
  --violet-survol: #948EF9;  /* survol des boutons violets */

  /* ---------- Rôles (fond sombre par défaut) ---------- */
  --fond: var(--encre);
  --carte: var(--carte-1);
  --carte-haute: var(--carte-2);
  --bordure: var(--trait-sombre);
  --bordure-champ: #6A6B71;  /* contour des champs, 3,6 sur le fond */
  --titre: var(--blanc);
  --texte: var(--gris-texte);
  --discret: var(--gris-discret);
  --lien: var(--violet);
  --accent-texte: var(--violet);

  /* ---------- Typographie : Figtree partout, pas de serif ---------- */
  --police: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gras-titre: 800;
  --gras-bouton: 600;
  --gras-texte: 400;

  --t-h1: clamp(2.75rem, 1.6rem + 5.6vw, 5.75rem);
  --t-h2: clamp(2rem, 1.35rem + 2.8vw, 3.5rem);
  --t-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  --t-chapo: clamp(1.125rem, 1.04rem + .4vw, 1.3125rem);
  --t-texte: clamp(1.0625rem, 1.03rem + .15vw, 1.125rem); /* 17 puis 18 px */
  --t-petit: .9375rem;
  --t-mini: .8125rem;

  --interligne: 1.6;
  --interligne-titre: 1.06;
  --approche-titre: -.025em;

  /* ---------- Espacements ---------- */
  --e-1: .25rem;
  --e-2: .5rem;
  --e-3: .75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;
  --e-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  --gouttiere: clamp(1rem, .25rem + 2.5vw, 2.5rem); /* 16 px sur téléphone */
  --largeur: 76rem;
  --largeur-texte: 42rem;

  /* ---------- Formes ---------- */
  --rayon-s: .625rem;
  --rayon: 1.25rem;
  --rayon-l: 1.75rem;
  --pilule: 999px;
  --ombre-fenetre: 0 40px 80px -30px rgba(0, 0, 0, .7);

  /* ---------- Mouvement ---------- */
  --sortie: cubic-bezier(.2, .7, .2, 1);
  --duree: .7s;
}

/* Sections claires : tarifs, FAQ, méthode, corps des articles.
   Les composants lisent les rôles, ils changent donc de couleur tout seuls. */
.clair {
  --fond: var(--papier);
  --carte: var(--blanc);
  --carte-haute: var(--blanc);
  --bordure: var(--trait-clair);
  --bordure-champ: #8C877D;
  --titre: var(--encre);
  --texte: var(--ardoise);
  --discret: var(--ardoise-discret);
  --lien: var(--violet-fonce);
  --accent-texte: var(--violet-fonce);
}