/* ==========================================================================
   ZAIN.MA — Jetons du design system
   Source : docs/04-design-system.md (palette révisée option B, 21/07/2026)

   Toutes les valeurs de couleur ont été validées par calcul de contraste
   WCAG 2.1. Les ratios figurent en commentaire : ne pas modifier une valeur
   sans recalculer, sous peine de casser la conformité AA.

   Palette issue du LOGO (anthracite + bordeaux), pas du thème précédent.
   ========================================================================== */

/* Inter, auto-hébergée en woff2 variable (latin) : un seul fichier de 47 Ko
   couvre toutes les graisses. Remplace les trois familles Google Fonts × 18
   graisses de l'ancien site (plusieurs centaines de Ko, chargées depuis Google).
   font-display: swap → le texte s'affiche immédiatement en police système puis
   bascule sur Inter, sans bloquer le rendu. Le fichier est préchargé (functions.php).
   Le rôle « données » (étiquettes mono) utilise la pile système : inutile de
   charger une seconde famille pour quelques micro-libellés. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
}

:root {
  /* ---------- Fonds et surfaces ---------- */
  --fond:          #FFFFFF;
  --surface:       #F8F6F8;
  --surface-2:     #F3EFF3;
  --bord:          #E2DDE3;
  --bord-fort:     #C8C1CA;

  /* ---------- Encres — neutres tièdes, teintes 287-300°, accordés au bordeaux
       Un gris parfaitement neutre à côté d'un bordeaux paraît sale. ---------- */
  --encre:         #1A171C;  /* titres      · 17.75:1 · AAA */
  --encre-2:       #404042;  /* corps       · 10.34:1 · AAA · = anthracite du logo */
  --encre-3:       #6B646C;  /* secondaire  ·  5.73:1 · AA  */
  --encre-4:       #8A828C;  /* discret     ·  3.72:1 · texte large uniquement (24px, ou 19px gras) */

  /* ---------- Accent de marque ---------- */
  --accent:        #991B31;  /* bordeaux du logo · 8.22:1 sur blanc · AAA
                                blanc dessus : 8.22:1 · AAA */
  --accent-fonce:  #7A1728;  /* survol · 10.60:1 · AAA */
  --accent-pale:   #FBF0F2;  /* fonds de section */

  /* ---------- Sémantiques
       ⚠ La marque occupe déjà le rouge. --erreur (17°) n'est qu'à 27° du
       bordeaux (350°) sur la roue chromatique : l'état d'erreur ne doit
       JAMAIS reposer sur la teinte seule. Toujours icône + texte + bordure
       + aria-invalid. C'est de toute façon l'exigence WCAG. ---------- */
  --ok:            #0E7C4A;  /* 5.25:1 · AA */
  --attention:     #8A5A00;  /* 5.93:1 · AA */
  --erreur:        #C2410C;  /* 5.18:1 · AA */
  --info:          #3F5C77;  /* 6.98:1 · AA */

  /* ---------- Logo — jetons distincts de l'interface, pour qu'il bascule seul ---------- */
  --logo-encre:    #404042;
  --logo-accent:   #991B31;

  /* ---------- Sur-aplat ---------- */
  --sur-accent:    #FFFFFF;

  /* ---------- Typographie ---------- */
  --police-texte:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* Pile système : les rares micro-libellés en capitales ne justifient pas
     le chargement d'une seconde famille de police. */
  --police-donnee: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  --t-1:  clamp(2rem, 1.5rem + 2.2vw, 3rem);      /* 32 → 48 px */
  --t-2:  clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem);/* 24 → 30 px */
  --t-3:  1.25rem;                                  /* 20 px */
  --t-corps: 1rem;                                  /* 16 px */
  --t-petit: 0.875rem;                              /* 14 px */
  --t-etiquette: 0.75rem;                           /* 12 px */

  --graisse-normale: 400;
  --graisse-demi:    600;
  --graisse-forte:   700;

  --interligne-titre: 1.15;
  --interligne-corps: 1.6;

  /* ---------- Espacement — base 4 px, sans exception ---------- */
  --e-1:  0.25rem;  /*  4 px */
  --e-2:  0.5rem;   /*  8 px */
  --e-3:  1rem;     /* 16 px */
  --e-4:  1.5rem;   /* 24 px */
  --e-5:  3rem;     /* 48 px */
  --e-6:  6rem;     /* 96 px */

  /* ---------- Mise en page ---------- */
  --largeur-max:    1280px;
  --largeur-texte:  65ch;
  --gouttiere:      var(--e-4);
  --rayon:          0;      /* angles droits — décision Phase 4, registre industriel */
  --rayon-carte:    4px;

  --ombre: 0 1px 2px rgb(26 23 28 / 6%), 0 8px 24px -12px rgb(26 23 28 / 18%);

  --transition: 150ms ease;

  color-scheme: light;
}

/* ==========================================================================
   Thème sombre — validé pour le site public (décision client 21/07/2026).
   Le bordeaux de marque tombe à 2.29:1 sur fond sombre : interdit ici,
   remplacé par #E0697E.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:         #141115;
    --surface:      #1E1A20;
    --surface-2:    #262029;
    --bord:         #332C36;
    --bord-fort:    #463D4A;

    --encre:        #F2EDF3;  /* 16.22:1 · AAA */
    --encre-2:      #CDC5CF;  /* 11.14:1 · AAA */
    --encre-3:      #9E96A1;  /*  6.54:1 · AA  */
    --encre-4:      #7C7480;

    --accent:       #E0697E;  /*  5.79:1 · AA  */
    --accent-fonce: #EE8A9B;  /*  7.80:1 · AAA */
    --accent-pale:  #251A1E;

    --ok:           #4ADE80;  /* 10.75:1 · AAA */
    --attention:    #F0B429;  /* 10.05:1 · AAA */
    --erreur:       #FF9A62;  /*  8.97:1 · AAA */
    --info:         #9DBBD4;  /*  9.36:1 · AAA */

    --logo-encre:   #F2EDF3;
    --logo-accent:  #E0697E;

    --ombre: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 70%);

    color-scheme: dark;
  }
}

/* Bascule manuelle — doit l'emporter sur la préférence système, dans les deux sens. */
:root[data-theme="dark"] {
  --fond:         #141115;
  --surface:      #1E1A20;
  --surface-2:    #262029;
  --bord:         #332C36;
  --bord-fort:    #463D4A;
  --encre:        #F2EDF3;
  --encre-2:      #CDC5CF;
  --encre-3:      #9E96A1;
  --encre-4:      #7C7480;
  --accent:       #E0697E;
  --accent-fonce: #EE8A9B;
  --accent-pale:  #251A1E;
  --ok:           #4ADE80;
  --attention:    #F0B429;
  --erreur:       #FF9A62;
  --info:         #9DBBD4;
  --logo-encre:   #F2EDF3;
  --logo-accent:  #E0697E;
  --ombre: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 70%);
  color-scheme: dark;
}