/*
 * ═══════════════════════════════════════════════════════════════════════════
 * SYSTÈME DE DESIGN — CFI Plasturgie
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Un seul fichier définit la marque. Rien — aucune couleur, aucune taille,
 * aucun rayon — ne doit être écrit en dur ailleurs.
 *
 * Les valeurs de marque sont RELEVÉES sur le thème du site principal
 * (assets/css/style.min.css et fonts.min.css), pas inventées. Ce qui est ajouté
 * ici, ce sont les échelles : espacement, typographie fluide, durées, ombres —
 * un thème WordPress n'en a pas besoin, une application si.
 *
 * Le parti pris visuel tient en une phrase : de la matière, pas du décor.
 * La plasturgie transforme des matériaux ; l'interface travaille des aplats
 * pleins, des arêtes nettes et un jaune de signalisation industrielle — celui
 * qu'on trouve sur une ligne de production, pas celui d'un site vitrine.
 */

:root {
  /* ───────────────────────────────────────────────── Couleurs de marque ── */
  /* Relevées : .btn-primary est noir sur blanc, .btn-secondary bleu #1f77bb,
     le survol du menu vert #1c984e, les aplats décoratifs jaune #ffd45c.      */
  --cfi-noir:        #000000;
  --cfi-blanc:       #ffffff;
  --cfi-bleu:        #1f77bb;
  --cfi-bleu-vif:    #007bff;   /* survol du bouton principal, relevé          */
  --cfi-vert:        #1c984e;
  --cfi-vert-clair:  #00bb4c;
  --cfi-jaune:       #ffd45c;
  --cfi-turquoise:   #3bf0dc;
  --cfi-magenta:     #e50051;

  /* ─────────────────────────────────────────────────────── Rôles ───────── */
  --cfi-couleur-primaire:            var(--cfi-noir);
  --cfi-couleur-primaire-contraste:  var(--cfi-blanc);
  --cfi-couleur-primaire-survol:     var(--cfi-bleu-vif);
  --cfi-couleur-secondaire:          var(--cfi-bleu);
  --cfi-couleur-accent:              var(--cfi-vert);
  --cfi-couleur-signal:              var(--cfi-jaune);

  --cfi-couleur-texte:               #0a0a0a;
  --cfi-couleur-texte-discret:       #565656;   /* 7,0:1 sur blanc            */
  --cfi-couleur-fond:                var(--cfi-blanc);
  --cfi-couleur-fond-alt:            #f6f6f4;
  --cfi-couleur-fond-encre:          #101010;   /* sections inversées         */
  --cfi-couleur-bordure:             #dcdcd8;
  --cfi-couleur-bordure-forte:       #0a0a0a;

  /* États — assombris quand il le faut pour tenir le contraste AA sur blanc. */
  --cfi-couleur-succes:              #14703a;
  --cfi-couleur-succes-fond:         #e8f5ed;
  --cfi-couleur-alerte:              #8a5a00;
  --cfi-couleur-alerte-fond:         #fff6e0;
  --cfi-couleur-erreur:              #b3123c;
  --cfi-couleur-erreur-fond:         #fdecf1;
  --cfi-couleur-info-fond:           #eef4fa;

  /* ─────────────────────────────────────────────────── Typographies ────── */
  /* Auto-hébergées, copiées depuis le thème par ops/marque.sh.
     UNE SEULE FAMILLE, décision du 15/09/2026. Le thème en livre deux —
     Parkinsans et DM Sans — et l'interface en chargeait deux : quatre fichiers
     préchargés, deux dessins de lettre sur un même parcours. L'espace de
     formation se traverse EN COURS DE TÂCHE depuis le site vitrine ; deux
     typographies sur ce trajet se lisent comme deux prestataires.
     DM Sans porte donc les titres comme le texte, et la hiérarchie se fait
     par la taille et la graisse — ce qu'une échelle bien réglée suffit à faire.
     Graisses réellement présentes (relevé du 15/08/2026) :
       DM Sans  100 200 300 400 500 600 700 800 900, romain + italique       */
  --cfi-police-titre:       'DMSans', system-ui, -apple-system, sans-serif;
  --cfi-police-texte:       'DMSans', system-ui, -apple-system, sans-serif;
  --cfi-graisse-titre:      700;
  --cfi-graisse-titre-moyen:500;
  --cfi-graisse-texte:      400;
  --cfi-graisse-appui:      600;   /* boutons, libellés, en-têtes de tableau  */

  /* Échelle fluide : une seule valeur pour tous les écrans, pas de palier
     brutal au changement de largeur. Bornes relevées sur le thème
     (h1 : 2,25rem mobile → 3rem desktop).                                    */
  --cfi-t-affiche:   clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);
  --cfi-t-h1:        clamp(2.25rem, 1.7rem + 2.4vw, 3rem);
  --cfi-t-h2:        clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
  --cfi-t-h3:        clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --cfi-t-large:     1.125rem;
  --cfi-t-texte:     1rem;
  --cfi-t-petit:     0.875rem;
  --cfi-t-mention:   0.75rem;

  --cfi-interligne-titre: 1.15;
  --cfi-interligne-texte: 1.6;
  /* Le resserrement était réglé sur Parkinsans, dont les capitales sont plus
     larges. DM Sans est déjà serrée : -0,02em referme les contre-formes des
     petits titres. -0,01em tient sur toute l'échelle, du h4 à l'affiche.      */
  --cfi-interlettre-titre: -0.01em;
  --cfi-interlettre-sur:   0.08em;    /* capitales des étiquettes             */

  /* ───────────────────────────────────────────────────── Espacement ────── */
  /* Échelle géométrique de base 4 : toute marge de l'interface en sort.      */
  --cfi-e-1:  0.25rem;
  --cfi-e-2:  0.5rem;
  --cfi-e-3:  0.75rem;
  --cfi-e-4:  1rem;
  --cfi-e-5:  1.5rem;
  --cfi-e-6:  2rem;
  --cfi-e-7:  3rem;
  --cfi-e-8:  4rem;
  --cfi-e-9:  6rem;
  /* Respiration verticale des grandes sections, fluide elle aussi.           */
  --cfi-section: clamp(3rem, 2rem + 5vw, 6rem);

  /* ─────────────────────────────────────────────────────── Formes ──────── */
  --cfi-rayon:        8px;    /* relevé sur .btn-primary                      */
  --cfi-rayon-petit:  4px;
  --cfi-rayon-rond:   999px;
  --cfi-bordure:      1px solid var(--cfi-couleur-bordure);
  --cfi-bordure-forte: 2px solid var(--cfi-couleur-bordure-forte);
  --cfi-bouton-padding: 1rem 1.125rem;   /* relevé                           */

  /* Ombres discrètes : l'interface est plate, l'élévation ne sert qu'à
     signaler ce qui flotte réellement (menu déroulant, barre collante).      */
  --cfi-ombre-1: 0 1px 2px rgb(0 0 0 / .06);
  --cfi-ombre-2: 0 4px 16px rgb(0 0 0 / .10);

  /* ─────────────────────────────────────────────────────── Mesures ─────── */
  --cfi-largeur-contenu: 75rem;
  --cfi-largeur-texte:   38rem;   /* longueur de ligne confortable            */
  --cfi-largeur-form:    32rem;
  --cfi-cible-tactile:   44px;    /* plancher de toute zone cliquable         */

  /* ─────────────────────────────────────────────────────── Mouvement ───── */
  /* Le mouvement sert à expliquer une transition d'état, jamais à décorer.   */
  --cfi-duree-court:  120ms;
  --cfi-duree-moyen:  240ms;
  --cfi-duree-long:   480ms;
  --cfi-courbe:       cubic-bezier(.2, .7, .3, 1);
  --cfi-courbe-sortie: cubic-bezier(.4, 0, 1, 1);

  /* ─────────────────────────────────────────────────────── Points de rupture
     Mobile d'abord : ces valeurs sont documentées ici pour référence, les
     media queries les écrivent en dur (CSS ne les accepte pas en variables).
       — jusqu'à 47.9375rem : mobile (colonne unique, menu replié)
       — 48rem   : tablette  (deux colonnes, menu déployé)
       — 64rem   : ordinateur portable
       — 90rem   : grand écran (la grille cesse de s'élargir)                 */
}

/* La version arabe bascule le sens de lecture ; la marque ne change pas. */
[dir='rtl'] {
  --cfi-police-titre: 'DMSans', 'Noto Kufi Arabic', system-ui, sans-serif;
  --cfi-police-texte: 'DMSans', 'Noto Kufi Arabic', system-ui, sans-serif;
  --cfi-interlettre-titre: 0;
}

/* Respecter le réglage système : pour qui le demande, plus aucun mouvement. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cfi-duree-court: 0ms;
    --cfi-duree-moyen: 0ms;
    --cfi-duree-long:  0ms;
  }
}