/* =============================================
   ORGATYPIK - tokens des pages bâties sur le socle commun (chantier sites-web, lot 3)

   Les primitives et les alias ci-dessous sont ceux de design-system/tokens.css, recopiés
   tels quels : la chaîne WordPress, gelée, lit toujours l'original, et ce fichier le
   remplacera au lot 4. Les pages pilotes (index, services, contact) lisent celui-ci.

   Ce qui s'ajoute est la dernière section : les RÔLES du contrat commun
   (commun/contrat-jetons.json), que lit le socle partagé avec pylotik. Chacun pointe vers
   un alias d'orgatypik : le socle prend ainsi les couleurs, les rayons et les graisses
   d'orgatypik sans en connaître aucun. Contrôle : outils/qualite/verifier-jetons.py
   --site orgatypik.
   ============================================= */

:root {
  /* ---------------------------------------------
     1. PRIMITIVES : dans design-system/palette.css, copie de commun/css/palette.css,
        partagée avec pylotik et chargée avant ce fichier.
     --------------------------------------------- */

  /* Échelle d'espacement - base 4, en rem comme sur pylotik (16 px de racine, posés
     par le socle) : les valeurs calculées sont celles des anciens px. */
  --space-1: 0.25rem;   /* 4 px */
  --space-2: 0.5rem;   /* 8 px */
  --space-3: 0.75rem;   /* 12 px */
  --space-4: 1rem;   /* 16 px */
  --space-5: 1.25rem;   /* 20 px */
  --space-6: 1.5rem;   /* 24 px */
  --space-7: 1.75rem;   /* 28 px */
  --space-8: 2rem;   /* 32 px */
  --space-10: 2.5rem;   /* 40 px */
  --space-12: 3rem;   /* 48 px */
  --space-14: 3.5rem;   /* 56 px */
  --space-16: 4rem;   /* 64 px */
  --space-20: 5rem;   /* 80 px */
  --space-25: 6.25rem;   /* 100 px */
  /* Au-delà de l'échelle courante : le hero et les grandes sections. Ils étaient
     écrits en dur (« padding: 160px 0 120px ») dans la maquette, ce qui les rendait
     impossibles à poser en attribut de bloc - un pattern ne doit porter aucune valeur.
     Ils deviennent donc des presets d'espacement, choisissables dans l'éditeur. */
  --space-30: 7.5rem;   /* 120 px */
  --space-40: 10rem;   /* 160 px */

  /* Rayons */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 100px;

  /* ---------------------------------------------
     2. ALIAS SÉMANTIQUES
     --------------------------------------------- */

  /* Marque */
  --navy: var(--ds-orga-navy);
  --navy-dark: var(--ds-orga-navy-dark);
  --navy-deep: var(--ds-orga-navy-deep);
  --navy-mid: var(--ds-orga-navy-mid);
  --navy-light: var(--ds-orga-navy-light);
  --violet: var(--ds-orga-violet);
  --violet-light: var(--ds-orga-violet-light);
  --violet-dark: var(--ds-orga-violet-deep);
  --violet-deep: var(--ds-orga-violet-mix);
  --gray-brand: var(--ds-orga-grey);

  /* Surfaces */
  --white: var(--ds-white);
  --off-white: var(--ds-orga-gray-50);
  --surface-header: var(--ds-orga-white-alpha-97);

  /* Neutres */
  --gray-100: var(--ds-orga-gray-100);
  --gray-200: var(--ds-orga-gray-200);
  --gray-400: var(--ds-orga-gray-500);   /* 5.24:1 AA sur blanc */
  --gray-600: var(--ds-orga-gray-600);
  --text: var(--ds-orga-gray-900);
  --text-light: var(--ds-orga-grey-text);

  /* Liens sur fond clair.
     --navy sert de couleur de lien par défaut (12.03:1 sur blanc).
     --link sert dans les textes déjà gris, où le navy manque d'affordance. */
  /* Le socle lit --link pour TOUS les liens : il prend donc le navy, le lien par défaut
     d'orgatypik. Le bleu, réservé aux textes déjà gris, devient --link-in-grey. */
  --link: var(--navy);
  --link-in-grey: var(--ds-orga-link-blue);   /* 6.58:1 AA sur blanc */

  /* États - consommés par les états de validation du formulaire (.form-hint),
     donc en TEXTE : le seuil est 4.5:1, pas le 3:1 des aplats de la charte. */
  --success: var(--ds-orga-green-text);    /* 5.37:1 AA sur blanc */
  --attention: var(--ds-orga-orange-text); /* 5.22:1 AA sur blanc */
  --error: var(--ds-orga-red);        /* 5.19:1 AA sur blanc - rouge de la charte */

  /* Texte sur fond navy. Ratios donnés sur --navy, puis sur --navy-mid,
     le stop le plus clair des dégradés sombres - c'est lui qui contraint. */
  --on-navy-title: var(--ds-white);          /* 12.03:1 · 10.14:1 */
  --on-navy-overline: var(--ds-orga-violet-overline);  /*  6.97:1 ·  5.88:1 */
  --on-navy-body: var(--ds-orga-blue-gray-200);   /*  7.10:1 ·  5.99:1 */
  --on-navy-muted: var(--ds-orga-blue-gray-300);  /*  5.37:1 ·  4.52:1 */
  --on-navy-accent: var(--ds-orga-violet-on-navy);    /*  5.88:1 ·  4.96:1 - badges, survols */
  --on-navy-border: var(--ds-orga-white-alpha-15);
  --on-navy-border-subtle: var(--ds-orga-white-alpha-06);
  --on-navy-divider: var(--ds-orga-white-alpha-10);  /* filet de séparation horizontal */
  --on-navy-badge-bg: var(--ds-orga-violet-alpha-15);
  --on-navy-badge-border: var(--ds-orga-violet-alpha-30);

  /* Chiffres mis en avant sur navy.

     --on-navy-stat-high reprend l'émeraude du graphe d'engagement : le chiffre
     cible du texte et la barre du SVG portent ainsi la même couleur. 5.87:1, il
     passe même en texte courant.

     --on-navy-stat-violet est réservé au TEXTE LARGE (>= 24px, ou 18.66px gras) :
     le violet clair de la charte ne donne que 3.14:1 sur navy-mid. Il sert au titre
     du hero, jamais à du texte courant.

     --on-navy-stat-plum reprend la prune du graphe. Elle est soumise à la MÊME
     restriction que --on-navy-stat-violet : 3.72:1 sur navy-mid, donc TEXTE LARGE
     uniquement. Dans le SVG, les barres sont des objets graphiques et les
     pourcentages du texte de 30px : le seuil y est de 3:1, jamais de 4.5:1. Hors du
     SVG, elle n'est employable que sur un chiffre assez gros pour rester dans ce
     régime. En texte courant, elle échoue. */
  --on-navy-stat-violet: var(--ds-orga-violet-light); /* 3.72:1 sur navy · 3.14:1 sur navy-mid - TEXTE LARGE */
  --on-navy-stat-plum: var(--ds-orga-plum-light);     /* 4.41:1 sur navy · 3.72:1 sur navy-mid - TEXTE LARGE */
  --on-navy-stat-high: var(--ds-orga-emerald-light);  /* 6.96:1 sur navy · 5.87:1 sur navy-mid */

  /* Catégorisation sur fond clair - les couleurs SECONDAIRES de la charte, qu'elle
     destine explicitement à « la catégorisation ou l'illustration ». Toutes passent
     l'AA en TEXTE sur blanc, ce qui les distingue des voyants.

     À employer partout où il s'agit de distinguer des familles (statuts, étiquettes,
     colonnes), et NON de signaler un état à l'utilisateur. Un badge « Partiel » dans
     un document de travail catégorise ; il n'alerte personne. C'est la différence qui
     commande le choix, et elle évite d'avoir à inventer une teinte : la charte ne
     valide ses voyants (rouge/orange/jaune/vert) qu'en APLAT, au seuil de 3:1. Son
     orange ne donne que 2.28:1 en texte sur blanc. */
  --cat-emerald: var(--ds-orga-emerald);  /* 6.06:1 sur blanc */
  --cat-plum: var(--ds-orga-plum);        /* 8.82:1 sur blanc */
  --cat-steel: var(--ds-orga-steel);      /* 6.62:1 sur blanc */

  /* Aplats teintés et filets, sur fond clair.
     Ce sont des transparences, et non des couleurs opaques : elles se posent
     donc sur n'importe quelle surface sans avoir à être recalculées. Fonds
     d'icône de carte, de pastille, de panneau ; anneau de focus. Aucune ne
     porte de texte : le seuil de contraste ne s'y applique pas. */
  --surface-tint-navy: var(--ds-orga-navy-alpha-08);
  --surface-table-head: var(--ds-orga-navy-pastel);   /* l'aplat de l'en-tête du tableau comparatif */
  --pastel-navy: var(--ds-orga-navy-pastel);           /* aplats clairs, jamais en texte */
  --pastel-violet: var(--ds-orga-violet-pastel);
  --surface-tint-violet: var(--ds-orga-violet-alpha-08);
  --surface-tint-blue: var(--ds-orga-navy-light-alpha-10);
  --surface-accent-soft: var(--ds-orga-violet-alpha-05);
  --surface-attention: var(--ds-orga-orange-alpha-08);
  --border-accent-soft: var(--ds-orga-violet-alpha-15);
  --ring-focus: var(--ds-orga-violet-alpha-10);

  /* Typographie */
  --font-logo: 'Nunito', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout */
  --max-width: 1200px;
  --header-height: 72px;
  --section-padding: var(--space-25) 0;
  --radius: var(--radius-lg);

  /* Élévation */
  --shadow: 0 4px 24px var(--ds-orga-navy-alpha-08);
  --shadow-lg: 0 12px 48px var(--ds-orga-navy-alpha-12);
  --shadow-on-dark: 0 4px 20px var(--ds-orga-black-alpha-25);
  --shadow-violet: 0 4px 16px var(--ds-orga-violet-alpha-30);
  --shadow-violet-lg: 0 6px 24px var(--ds-orga-violet-alpha-40);

  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Dégradés */
  --gradient-brand-text: linear-gradient(90deg, var(--navy) 0%, var(--violet) 100%);
  --gradient-hero: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-dark) 30%, var(--navy) 70%, var(--navy-mid) 100%);
  --gradient-hero-page: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy-dark) 40%, var(--navy) 100%);
  /* Se termine sur --violet-dark et non sur --violet : sur violet pur,
     --on-navy-muted tombe à 3.67:1 et le badge à 4.02:1. */
  --gradient-hero-brand: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--violet-dark) 100%);
  --gradient-section-dark: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-mid) 100%);
  --gradient-cta: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 50%, var(--violet-deep) 100%);
  --gradient-cta-deep: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  --gradient-panel-dark: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  /* Variante CLAIRE du panneau de marque : pastels navy → violet. Les traits fins
     d'une icône (le réseau du collectif) ressortent sur ce fond, là où le dégradé
     sombre les noyait. Le wordmark employé est alors celui des fonds clairs. */
  --gradient-panel-soft: linear-gradient(135deg, var(--pastel-navy) 0%, var(--pastel-violet) 100%);
  --gradient-footer: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 80%);
  --gradient-surface: linear-gradient(135deg, var(--off-white) 0%, var(--gray-100) 100%);

  /* Vignettes d'article - toutes issues de la charte */
  --gradient-media-1: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  --gradient-media-2: linear-gradient(135deg, var(--violet) 0%, var(--violet-light) 100%);
  --gradient-media-3: linear-gradient(135deg, var(--navy-light) 0%, var(--violet-light) 100%);

  /* ---------------------------------------------
     3. RÔLES DU CONTRAT COMMUN (commun/contrat-jetons.json)
     --------------------------------------------- */

  /* Fonds. La page est blanche, la section alternée gris clair : l'inverse de pylotik,
     dont la coque est grise et la section alternée blanche. */
  --shell: var(--white);
  --surface: var(--white);
  --surface-alt: var(--off-white);

  /* Texte et liens */
  --text-title: var(--navy);
  --text-soft: var(--gray-600);
  --line: var(--gray-200);
  --link-hover: var(--violet);

  /* Marque et accent : le violet tient le rôle du terracotta de pylotik. */
  --brand: var(--navy);
  --brand-soft: var(--link-in-grey);
  --accent: var(--violet);
  --accent-hover: var(--violet-dark);
  --accent-flat: var(--violet);
  --interact: var(--violet);

  /* Sur fond navy */
  --on-dark: var(--on-navy-title);
  --on-dark-soft: var(--on-navy-body);
  --on-dark-a10: var(--ds-orga-white-alpha-10);
  --on-dark-a35: rgba(255, 255, 255, 0.35);
  --dark-accent: var(--on-navy-accent);
  --dark-brand: var(--navy-light);
  --dark-line: var(--on-navy-border);
  --dark-surface: var(--ds-orga-white-alpha-06);
  --accent-on-navy: var(--on-navy-accent);
  --accent-on-navy-a12: rgb(from var(--ds-orga-violet-on-navy) r g b / 0.12);
  --interact-on-navy: var(--on-navy-accent);
  --gradient-band: var(--gradient-section-dark);
  --footer-shell: var(--gradient-footer);

  /* Aplats teintés */
  --tint-accent: var(--surface-tint-violet);
  --tint-brand: var(--surface-tint-navy);
  --tint-green: rgb(from var(--ds-orga-green-text) r g b / 0.08);
  --tint-alert: rgb(from var(--ds-orga-red) r g b / 0.08);
  --tint-yellow: var(--surface-attention);

  /* États */
  --state-success: var(--success);
  --state-alert: var(--error);
  --state-waiting: var(--attention);
  --state-running: var(--attention);
  --state-success-on-navy: var(--on-navy-stat-high);
  --state-alert-on-navy: #F43339;            /* @hors-charte voyant rouge de la série sombre de la charte */
  --state-waiting-on-navy: #F99938;          /* @hors-charte voyant orange de la série sombre */

  /* Typographie, élévation */
  --font-num: var(--font-heading);
  --shadow-card: var(--shadow-lg);

  /* Apparence : les valeurs de maquette/style.css, reportées sur les rôles du socle. */
  --heading-leading: 1.2;
  --h1-size: clamp(2.2rem, 5vw, 3.4rem);
  --h2-size: clamp(1.8rem, 3.5vw, 2.6rem);
  --h3-size: clamp(1.2rem, 2vw, 1.5rem);
  --h1-weight: 800;
  --h3-weight: 700;
  --h1-tracking: normal;
  --h2-tracking: normal;
  --section-pad-y: var(--space-25);
  --section-alt-bg: var(--off-white);
  --card-on-alt: var(--white);
  --section-head-width: 700px;
  --section-head-gap: var(--space-16);
  --eyebrow-size: 0.75rem;
  --eyebrow-weight: 600;
  --eyebrow-tracking: 0.08em;
  --header-bg: var(--surface-header);
  --nav-link-color: var(--gray-600);
  --nav-link-font: var(--font-heading);
  --nav-link-size: 0.85rem;
  --nav-link-weight: 600;
  --btn-weight: 700;
  --btn-padding: 14px var(--space-8);
  --btn-radius: var(--radius-md);
  --btn-border: 0px;               /* le bouton plein n'a pas de bord ; .btn-secondary pose le sien */
  --nav-cta-weight: 700;
  --nav-cta-size: 0.85rem;
  --nav-cta-padding: 10px var(--space-6);
  --nav-cta-radius: var(--radius-md);
  --card-padding: var(--space-10) var(--space-8);
  --card-shadow: var(--shadow);
  --footer-columns: 2fr 1fr 1fr 1fr;
  --band-pad-y: var(--space-25);
  /* Mots de marque au fil du texte (commun/css/18-mots-de-marque.css) : les couleurs
     de la charte de CHAQUE marque, lues dans la palette commune. Le logotype est
     exempté de contraste (WCAG 1.4.3) ; sur fond clair, le terracotta de pylotik
     donne 4,31:1. */
  --font-brand: var(--font-logo);
  --wm-pylot: var(--ds-blue-700);
  --wm-ik: var(--ds-terra-700);
  --wm-pylotik-dot: var(--ds-grey-eq);
  --wm-orga-from: var(--ds-orga-navy);
  --wm-orga-to: var(--ds-orga-violet);
  --wm-orga-dot: var(--ds-orga-grey);
  --wm-pylot-on-navy: var(--ds-blue-300);
  --wm-ik-on-navy: var(--ds-terra-500);
  --wm-pylotik-dot-on-navy: var(--ds-grey-eq-dark);
  --wm-orga-from-on-navy: var(--ds-orga-navy-on-navy);
  --wm-orga-to-on-navy: var(--ds-orga-violet-on-navy);
  --wm-orga-dot-on-navy: var(--ds-orga-grey-light);
  /* « inherit » rend le rôle invalide à la résolution : font-weight, propriété héritée,
     reprend alors la graisse du texte. Le lien navy se distingue sans graisse. */
  --link-weight: inherit;
  --strong-color: currentColor;     /* le gras garde la couleur de son texte, sur clair comme sur navy */
  --strong-weight: bolder;
  --prose-bg: transparent;           /* les pages légales sont du texte posé, pas une carte */
  --prose-border: 0;
  --prose-pad: 0;
  --grid-gap: var(--space-10);    /* les modificateurs .gap-* le redéfinissent sur la grille */
}