/* ============================================================
   tokens.css — couche d'alias du design system dentaire365
   ------------------------------------------------------------
   SOURCE DE VÉRITÉ : theme.json, `settings.custom.ds`.
   WordPress en génère les variables `--wp--custom--ds--*`. Ce fichier ne fait
   que leur donner les noms courts de la spéc (dentaire365-implementation.md
   §1.1), déclarés UNE fois. Il ne contient aucune valeur en dur, à deux
   exceptions près, signalées ligne à ligne.

   Ne jamais écrire une valeur ici : ajouter le token dans theme.json.

   Chargé avant fonts.css et layout.css (cf. functions.php), front + éditeur.
   ============================================================ */

:root{
  /* ---- Typographie ---- */
  --font-titre: var(--wp--custom--ds--font-titre);
  --font-texte: var(--wp--custom--ds--font-texte);

  --fs-rubrique: var(--wp--custom--ds--fs-rubrique);  --lh-rubrique: var(--wp--custom--ds--lh-rubrique);
  --fs-une:      var(--wp--custom--ds--fs-une);       --lh-une:      var(--wp--custom--ds--lh-une);
  /* Titre de la carte « À la une » : hors §1.1, ajouté sur demande du 28/07.
     Le titre de une reste à --fs-une sur la page article. */
  --fs-une-carte: var(--wp--custom--ds--fs-une-carte);
  --fs-titre-l:  var(--wp--custom--ds--fs-titre-l);   --lh-titre-l:  var(--wp--custom--ds--lh-titre-l);
  --fs-titre-m:  var(--wp--custom--ds--fs-titre-m);   --lh-titre-m:  var(--wp--custom--ds--lh-titre-m);
  --fs-titre-s:  var(--wp--custom--ds--fs-titre-s);   --lh-titre-s:  var(--wp--custom--ds--lh-titre-s);
  --fs-surtitre: var(--wp--custom--ds--fs-surtitre);  --ls-surtitre: var(--wp--custom--ds--ls-surtitre);
  --fs-chapo:    var(--wp--custom--ds--fs-chapo);     --lh-chapo:    var(--wp--custom--ds--lh-chapo);
  /* Chapô de la page article, recette ART-04 : il doit peser plus lourd que le
     texte courant, ce que --fs-chapo ne fait pas, il sert aussi aux cartes. */
  --fs-chapo-article: var(--wp--custom--ds--fs-chapo-article);
  --lh-chapo-article: var(--wp--custom--ds--lh-chapo-article);
  --fs-courant:  var(--wp--custom--ds--fs-courant);   --lh-courant:  var(--wp--custom--ds--lh-courant);
  --fs-folio:    var(--wp--custom--ds--fs-folio);     --lh-folio:    var(--wp--custom--ds--lh-folio);

  /* Interlettrages hors §1.1, repris de §2.1 (rubrique) et §5.3 (étiquette). */
  --ls-rubrique:  var(--wp--custom--ds--ls-rubrique);
  --ls-etiquette: var(--wp--custom--ds--ls-etiquette);

  /* ---- Couleur ---- */
  --c-encre:      var(--wp--custom--ds--color-encre);
  --c-texte:      var(--wp--custom--ds--color-texte);
  --c-texte-doux: var(--wp--custom--ds--color-texte-doux);

  /* Accent éditorial. Décision du 27/07 (option b) : l'accent SUIT L'UNIVERS.
     `primary` / `accent` sont réécrits par pôle via le Palette_Filter SSR de
     parresia-topics — Omni porte le rouge de la spéc, Ortho garde son bleu.
     Le repli n'est utilisé que si parresia-topics est inactif. */
  --c-rouge:   var(--wp--preset--color--primary, var(--wp--custom--ds--color-rouge-defaut));
  --c-rouge-h: var(--wp--preset--color--accent,  var(--wp--custom--ds--color-rouge-h-defaut));

  --c-jaune:      var(--wp--custom--ds--color-jaune);
  --c-jaune-h:    var(--wp--custom--ds--color-jaune-h);
  --c-papier:     var(--wp--custom--ds--color-papier);
  --c-trame:      var(--wp--custom--ds--color-trame);
  --c-nuit:       var(--wp--custom--ds--color-nuit);
  --c-filet:      var(--wp--custom--ds--color-filet);
  --c-filet-fort: var(--wp--custom--ds--color-filet-fort);

  /* Teintes de composants (§5.2, §5.4, §5.6) — hors §1.1, ajoutées au titre de
     la règle « une valeur manquante devient un token ». */
  --c-sponsor-nom:      var(--wp--custom--ds--color-sponsor-nom);
  --c-desactive-texte:  var(--wp--custom--ds--color-desactive-texte);
  --c-nuit-chapo:       var(--wp--custom--ds--color-nuit-chapo);
  --c-nuit-folio:       var(--wp--custom--ds--color-nuit-folio);
  --c-nuit-sponsor-nom: var(--wp--custom--ds--color-nuit-sponsor-nom);

  /* Puces de rubrique (Top 5) — fixes, indépendantes de l'univers. */
  --c-rub-1: var(--wp--custom--ds--color-rub-1);
  --c-rub-2: var(--wp--custom--ds--color-rub-2);
  --c-rub-3: var(--wp--custom--ds--color-rub-3);
  --c-rub-4: var(--wp--custom--ds--color-rub-4);
  --c-rub-5: var(--wp--custom--ds--color-rub-5);

  /* ---- Espacement (base 4) ---- */
  --e1:  var(--wp--custom--ds--espace-1);
  --e2:  var(--wp--custom--ds--espace-2);
  --e3:  var(--wp--custom--ds--espace-3);
  --e4:  var(--wp--custom--ds--espace-4);
  --e5:  var(--wp--custom--ds--espace-5);
  --e6:  var(--wp--custom--ds--espace-6);
  --e7:  var(--wp--custom--ds--espace-7);
  --e8:  var(--wp--custom--ds--espace-8);
  --e9:  var(--wp--custom--ds--espace-9);
  --e10: var(--wp--custom--ds--espace-10);
  --e11: var(--wp--custom--ds--espace-11);

  /* ---- Rayons ---- */
  --r-etiquette: var(--wp--custom--ds--rayon-etiquette);
  --r-bouton:    var(--wp--custom--ds--rayon-bouton);
  --r-image:     var(--wp--custom--ds--rayon-image);
  --r-bloc:      var(--wp--custom--ds--rayon-bloc);

  /* ---- Composants ---- */
  --h-bouton:          var(--wp--custom--ds--hauteur-bouton);
  --fs-toutvoir:       var(--wp--custom--ds--fs-toutvoir);
  --h-toutvoir:        var(--wp--custom--ds--hauteur-toutvoir);
  --e-surtitre-titre:  var(--wp--custom--ds--espace-surtitre-titre);

  /* ---- Grille ---- */
  --col-gauche:      var(--wp--custom--ds--col-gauche);
  --col-droite:      var(--wp--custom--ds--col-droite);
  --gouttiere:       var(--wp--custom--ds--gouttiere);
  --largeur-max:     var(--wp--custom--ds--largeur-max);
  --marge-mobile:    var(--wp--custom--ds--marge-mobile);
  --marge-page:      var(--wp--custom--ds--marge-page);
  --col-centrale-min:var(--wp--custom--ds--col-centrale-min);

  /* Gouttière de page CONSTANTE, à toutes les largeurs — jamais zéro.
     Le contenu ne touche jamais le bord de l'écran. */
  --marge-laterale: var(--marge-page);

  /* Plancher des petites tailles de texte (recette du 2026-09-29, U-08) :
     aucun texte sous 12 px sur mobile. Les tailles sous ce seuil s'ecrivent
     `max(var(--fs-min,0px),11px)` : inchangees sur desktop, 12 px sur mobile. */
  --fs-min: 0px;
}

@media (max-width:767px){
  :root{
    --marge-laterale: var(--marge-mobile);
    --fs-min: 12px;
    --fs-toutvoir: max(var(--fs-min), var(--wp--custom--ds--fs-toutvoir));
  }
}

/* AFF-09, recette 2. Sur un portable 14 pouces en 1920x1080, Windows applique
   un facteur de 150 % : le navigateur ne voit que 1280 px de large, et un
   corps de 17 px y pese comme 25 px physiques. Face a un Mac dont la fenetre
   fait 1512 px, tout parait grossi. Entre 1064 et 1440 px de viewport, la
   typographie glisse donc de 88 % a 100 % de son echelle, de facon continue.
   La mise en page ne bouge pas : ses paliers restent ceux de §3.1.
   Le rapport de deux longueurs dans calc() donne un nombre (CSS Values 4).
   Un navigateur qui ne le sait pas ignore la declaration et garde l'echelle
   pleine, ce qui est l'etat d'avant. */
@media (min-width:1064px) and (max-width:1439px){
  :root{
    --echelle-type: calc(0.88 + 0.12 * ((100vw - 1064px) / 376px));
    --fs-rubrique: calc(var(--wp--custom--ds--fs-rubrique) * var(--echelle-type));
    --fs-une: calc(var(--wp--custom--ds--fs-une) * var(--echelle-type));
    --fs-une-carte: calc(var(--wp--custom--ds--fs-une-carte) * var(--echelle-type));
    --fs-titre-l: calc(var(--wp--custom--ds--fs-titre-l) * var(--echelle-type));
    --fs-titre-m: calc(var(--wp--custom--ds--fs-titre-m) * var(--echelle-type));
    --fs-titre-s: calc(var(--wp--custom--ds--fs-titre-s) * var(--echelle-type));
    --fs-surtitre: calc(var(--wp--custom--ds--fs-surtitre) * var(--echelle-type));
    --fs-chapo: calc(var(--wp--custom--ds--fs-chapo) * var(--echelle-type));
    --fs-chapo-article: calc(var(--wp--custom--ds--fs-chapo-article) * var(--echelle-type));
    --fs-courant: calc(var(--wp--custom--ds--fs-courant) * var(--echelle-type));
    --fs-folio: calc(var(--wp--custom--ds--fs-folio) * var(--echelle-type));
    --fs-toutvoir: calc(var(--wp--custom--ds--fs-toutvoir) * var(--echelle-type));
  }
}

/* Paliers de la sidebar gauche — §3.1.
   Les seuils sont décalés de 2 × --marge-page (40px) par rapport aux largeurs
   du tableau : celui-ci donne la largeur UTILE, et la gouttière de page étant
   constante, utile = viewport − 40. Un palier annoncé à 1280 bascule donc à
   1320, 1140 à 1180, 1024 à 1064. C'est ce décalage qui garantit à la fois la
   marge permanente ET les minimums de colonne centrale (700 / 604 / 524).
   Les seuils restent des valeurs en dur : une media query ne sait pas lire une
   custom property, c'est une limite du CSS. */
@media (max-width:1319px){
  :root{
    --col-gauche: var(--wp--custom--ds--col-gauche-md);
    --gouttiere:  var(--wp--custom--ds--gouttiere-md);
  }
}
@media (max-width:1179px){
  :root{
    --col-gauche: var(--wp--custom--ds--col-gauche-sm);
    --gouttiere:  var(--wp--custom--ds--gouttiere-sm);
  }
}
@media (max-width:1063px){
  :root{
    --col-gauche: 0;
    --gouttiere:  var(--wp--custom--ds--gouttiere-tablette);
  }
}