/* ==========================================================================
   tokens.css — atossa.fr
   SEUL fichier du site autorisé à contenir des valeurs hexadécimales.
   Les noms de variables sont ceux du CSS commun d'origine : les maquettes
   déjà écrites s'appuient dessus, on ne les renomme pas.
   Voir docs/charte-graphique-atossa.md pour le raisonnement de chaque valeur.
   ========================================================================== */

:root {

  /* --- Fondamentales ---------------------------------------------------- */
  /* #161826 n'est pas un noir arbitraire : c'est la couleur exacte de la
     plaque du lockup horizontal du logo. */
  --noir   : #161826;   /* en-tête, bandes sombres */
  --noir2  : #0F1018;   /* pied de page, panneau du menu déroulant */
  --page   : #F7F7F7;   /* bandes claires */
  --card   : #FFFFFF;   /* cartes, tuiles, champs */
  --blanc  : #FFFFFF;   /* texte et filets sur fond sombre */
  --ink    : #111219;   /* texte courant sur fond clair */
  --ink2   : #5C5C5C;   /* descriptions, accompagnement */
  --ink3   : #8C8C8C;   /* étiquettes, mentions, atténué */
  --line   : #E2E2E0;   /* séparateurs, bordures, gouttières */

  /* Équivalents sur fond sombre */
  --ink-d1 : #C9C9C9;   /* texte principal */
  --ink-d2 : #A8A8A8;   /* secondaire */
  --ink-d3 : #8C8C8C;   /* atténué */
  --line-d : #2A2D3D;   /* filets */
  --legal  : #7A7A82;   /* barre légale du pied de page */
  --tuile  : #EFEFEC;   /* tuile de la page consultée */

  /* Carte posée sur une bande sombre. Sans elle, une carte prend la couleur
     exacte de sa bande et disparaît : seules les gouttières la trahissent. */
  --surface-d : rgba(255,255,255,.06);

  /* --- Couleurs de marque ----------------------------------------------- */
  /* Elles désignent les compétences techniques, et c'est là que la
     correspondance est STRICTE : pages de compétence, bandeau des six,
     pictogrammes. Deux exceptions arbitrées, et deux seulement :
       — articles de blog, teinte libre (19/08/2026) ;
       — filet des cartes de mission, ornement cyclant par position (21/08/2026).
     Un SECTEUR ou un CLIENT n'en reçoit jamais : la fausse association y serait
     durable et porterait sur un tiers nommé. Voir AGENTS.md R4 et charte 7.3.
     Dans le contenu des pages, préférer les alias par compétence ci-dessous :
     écrire var(--c-detection) plutôt que var(--vert) rend l'intention lisible
     et rend la faute visible en relecture. */
  --rouge  : #ff3d3d;
  --vert   : #66cc00;
  --bleu   : #007fff;
  --ambre  : #ffbf00;

  /* Six compétences pour quatre couleurs : deux paires partagent une teinte,
     et le partage a une logique — ce n'est pas un compromis de pénurie.
       ROUGE  combattre le feu par l'eau : extinction à l'intérieur du site,
              DECI depuis l'extérieur.
       VERT   la chaîne humaine : détecter, puis évacuer.
       BLEU   contenir : le compartimentage.
       AMBRE  évacuer la fumée : le désenfumage.
     Arbitrage Ronan Nicolas du 21/08/2026. */
  --c-extinction      : var(--rouge);
  --c-detection       : var(--vert);
  --c-compartimentage : var(--bleu);
  --c-desenfumage     : var(--ambre);
  --c-evacuation      : var(--vert);
  --c-deci            : var(--rouge);

  /* Double rôle assumé du rouge : extinction automatique ET couleur d'action.
     Boutons, survol, focus, astérisques, dates du blog, titres de colonnes. */
  --action : var(--rouge);

  /* --- Typographie ------------------------------------------------------- */
  --disp : "Archivo", system-ui, sans-serif;
  --body : "IBM Plex Sans", system-ui, sans-serif;
  --mono : "IBM Plex Mono", monospace;  /* note de calcul, jamais du texte courant */

  --t-corps   : 17px;
  --t-h1      : clamp(33px, 5vw, 58px);
  --t-h2      : clamp(23px, 3vw, 33px);
  --t-h3      : 19px;
  --t-chapo   : 18.5px;
  --t-mono    : 11px;
  --t-chiffre : 28px;
  --t-nav     : 14.5px;

  --i-corps   : 1.62;
  --i-h1      : 1.06;
  --i-chiffre : 1.15;

  --ls-h2      : .06em;
  --ls-mono    : .19em;
  --ls-colonne : .15em;
  --ls-bouton  : .065em;

  /* Longueur de ligne — UNIQUEMENT pour le corps d'article et le formulaire.
     Ne jamais l'appliquer au contenu des bandes : un chapô ou une phrase
     d'accompagnement y tient sur une ou deux lignes, et un plafond en
     caractères y crée un vide à droite sans rien gagner en confort.
     Arbitrage Ronan Nicolas du 23/08/2026. Voir charte 3.2. */
  --l-long       : 74ch;

  /* --- Mise en page ------------------------------------------------------ */
  --largeur      : 1180px;
  --marge        : 34px;
  --marge-mobile : 20px;
  --bande-y      : 72px;
  --bande-y-mob  : 48px;
  --gouttiere    : 2px;
  --header-h     : 68px;

  /* --- Signatures --------------------------------------------------------- */
  --filet-titre-w : 60px;
  --filet-titre-h : 4px;
  --filet-titre-y : 22px;
  --vague-h       : 77px;
  --wavefill      : #F7F7F7;  /* toujours la couleur de la bande QUI SUIT */
  --picto         : 44px;

  /* --- Voile des bandes sombres ------------------------------------------ */
  /* Photographie industrielle en niveaux de gris à 16 %, sous ce dégradé.
     Texture, jamais un sujet lisible. */
  --photo-opacite : .16;
  --voile      : linear-gradient(rgba(22,24,38,.93), rgba(22,24,38,.97));
  --bord-clair : rgba(255,255,255,.45);   /* bordure du bouton à contour */
  --survol-d   : rgba(255,255,255,.07);   /* survol dans le panneau sombre */

  /* --- Seule ombre du site ------------------------------------------------ */
  --ombre-bouton : 0 4px 20px rgba(255,61,61,.28);
  --ombre-panneau: 0 16px 34px rgba(0,0,0,.4);  /* panneau du menu déroulant */

  /* --- Focus -------------------------------------------------------------- */
  /* Ne jamais supprimer. */
  --focus        : 2px solid var(--action);
  --focus-offset : 3px;

  /* --- Points de rupture (pour mémoire, non utilisables en media query) --- */
  --bp-nav    : 980px;  /* nav masquée, grilles 1 colonne, marges 20px */
  --bp-tuiles : 760px;  /* bandeau des compétences à 2 colonnes */
}

/* Correspondance compétence → couleur, posée par data-attribut sur <body>.
   Évite qu'une page redéfinisse une couleur dans son coin. */
[data-competence="extinction-automatique"] { --c-page: var(--c-extinction); }
[data-competence="detection-incendie"]     { --c-page: var(--c-detection); }
[data-competence="compartimentage"]        { --c-page: var(--c-compartimentage); }
[data-competence="desenfumage"]            { --c-page: var(--c-desenfumage); }
[data-competence="evacuation"]             { --c-page: var(--c-evacuation); }
[data-competence="deci"]                   { --c-page: var(--c-deci); }

/* Vocabulaire en négatif : ce que le site ne fait jamais.
   Ces règles ne sont pas décoratives, elles verrouillent la charte. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}