/* ============================================================================
AgroClimat — JETONS DE DESIGN (feuille partagée)
----------------------------------------------------------------------------
POURQUOI UNE FEUILLE À PART : ces jetons (couleurs, rayons, ombres,
espacements, plans de superposition) étaient historiquement définis en tête
de style.css, la feuille de la carte. Depuis la refonte de l'espace compte
(Mon espace, Mon profil), une seconde famille de pages en a besoin sans
vouloir charger les 3 000 lignes de la carte. Les deux univers partagent
donc CE fichier, et lui seul définit :root.
CHARGEMENT : cette feuille doit être liée AVANT toute autre feuille qui
référence un jeton —
* index.php (carte) : puis style.css, map.css…
* user/_layout.php : puis compte.css.
Une feuille chargée sans jetons.css tombe sur les valeurs par défaut du
navigateur (var() sans repli = propriété invalide) : si la carte ou le
compte perd ses couleurs, c'est ce qu'il faut vérifier en premier.
CONTENU : le bloc :root complet avec ses commentaires (ratios de contraste
mesurés, consigne « une seule ligne pour changer l'accent »), le repli
@supports pour les navigateurs sans color-mix(), les thèmes explicites
data-theme="dark" / "light", et la redéfinition de --largeur-sidebar pour
la tablette (c'est le seul jeton redéfini par media query).
POINTS DE RUPTURE (rappel — @media n'accepte pas var(), ces valeurs sont
donc écrites en dur dans les media queries ; toute modification doit être
répercutée dans style.css, compte.css et ici) :
mobile : max-width: 768px
tablette : min-width: 769px et max-width: 1024px
desktop : min-width: 769px (repli de la sidebar autorisé)
========================================================================== */
:root {
/* ══════════════════════════════════════════════════════════════════════
ACCENT DE L'INTERFACE — UNE SEULE LIGNE À CHANGER
----------------------------------------------------------------------
Le panneau de filtres refondu (maquette validée) n'emploie qu'UNE
couleur d'interaction : ce vert agronomique. Survol, sélection,
bordures actives, pastille de jour choisie, chiffre d'horizon des
modèles, poignée de repli, indicateur de chargement — tout référence
`--accent`, et rien d'autre ne réécrit une couleur d'accent en dur.
POUR REVENIR AU BLEU DE MARQUE : changer la ligne `--accent` ci-dessous
(et sa jumelle du thème sombre si le thème sombre est activé un jour).
Rien d'autre.
--accent: #357ab7; ← bleu de marque recommandé
Attention : le bleu de marque historique #4a89dc ne donne que 3,56:1
en blanc sur fond plein (pastille de jour sélectionné) — sous le seuil
AA de 4,5:1. Le #357ab7 (bleu foncé déjà présent dans la palette) donne
4,55:1 : c'est lui qu'il faut utiliser, pas le #4a89dc.
`--accent-clair` (fond des états sélectionnés et survolés) est CALCULÉ
à partir de `--accent` et de `--panneau` : il suit automatiquement.
`--focus` reste volontairement BLEU et indépendant de l'accent : un
anneau de focus de la même couleur que la sélection deviendrait
indiscernable de celle-ci.
Les couleurs des DONNÉES (échelle de risque vert/jaune/orange/rouge de la
légende de la carte) ne passent jamais par `--accent` : elles arrivent en
style inline depuis la base et cette feuille ne les touche pas.
══════════════════════════════════════════════════════════════════════ */
--accent: #2f6b46; /* ← LA LIGNE */
--accent-clair: color-mix(in srgb, var(--accent) 12%, var(--panneau));
--sur-accent: #ffffff; /* texte posé SUR un aplat d'accent (6,34:1) */
/* ── Palette du panneau de filtres (maquette « refonte-filtres ») ─────
Surfaces et encres propres au panneau. Nommées à part des jetons
historiques ci-dessous pour n'en écraser aucun : en particulier
`--encre` (#333) reste tel quel pour les composants existants, les
encres du panneau s'appellent --encre-1/2/3.
Les valeurs de la maquette ont été assombries là où elles échouaient
au ratio 4,5:1 (voir les ratios mesurés en commentaire). */
--panneau: #ffffff; /* fond du panneau et des tuiles */
--panneau-2: #f8faf7; /* fond des blocs encadrés (specimen…) */
--trait: #dfe5da; /* filet de séparation */
--trait-fort: #c6d0c0; /* bordure de champ et de pastille */
--encre-1: #1c2620; /* texte fort — 15,58:1 sur --panneau */
--encre-2: #45524a; /* texte secondaire — 8,21:1 sur --panneau */
--encre-3: #5f6c64; /* texte tertiaire — 5,50:1 sur --panneau
(maquette : #8a978d, 3,05:1 → refusé) */
--focus: #1565c0; /* anneau de focus — 5,75:1 sur --panneau
(maquette : #1d7fd4, 4,17:1) */
--ombre-douce: 0 1px 2px rgba(20, 40, 28, 0.06), 0 4px 14px rgba(20, 40, 28, 0.05);
/* ── Marque : le bleu Agroclimat ─────────────────────────────────────── */
--bleu-marque: #4a89dc; /* bleu principal (boutons, titres, accents) */
--bleu-fonce: #357ab7; /* survol du bleu principal */
--bleu-tres-fonce: #2a69bc; /* survol des liens du pied de page */
--bleu-pale: #e7f0ff; /* fond des tuiles sélectionnées */
--bleu-brume: #f0f7ff; /* fond des sections repliées */
--bleu-neige: #f0f6ff; /* survol des options de langue */
--bleu-marque-rvb: 74, 137, 220; /* pour composer des rgba() dérivées */
/* ── Marque : le vert de validation ──────────────────────────────────── */
--vert-marque: #83a843;
--vert-fonce: #729638;
--vert-clair: #8fb64a; /* haut du dégradé au survol */
--vert-clair-fonce: #7da13c; /* bas du dégradé au survol */
--vert-marque-rvb: 131, 168, 67;
/* ── États ───────────────────────────────────────────────────────────── */
--couleur-succes: #5cb85c; /* toast de confirmation */
--couleur-succes-rvb: 92, 184, 92;
--couleur-alerte: #f1c40f; /* pastille « à venir » */
--couleur-attention: #f0ad4e; /* liseré des encarts d'avertissement */
/* ── Neutres : textes ────────────────────────────────────────────────── */
--blanc: #fff;
--noir: #000;
--encre: #333; /* texte fort et fond des infobulles */
--encre-titre: #2c3e50; /* libellés de la sidebar */
--gris-fort: #555;
--gris: #666;
--gris-doux: #777;
--gris-clair: #888;
--gris-tres-clair: #999;
--gris-ardoise: #64748b; /* mention de copyright */
/* ── Neutres : bordures ──────────────────────────────────────────────── */
--bord-fort: #ccc;
--bord: #ddd;
--bord-clair: #e0e0e0;
--bord-sidebar: #e0e3eb;
--bord-tuile: #eaeaea;
--bord-tres-clair: #eee;
/* ── Neutres : fonds ─────────────────────────────────────────────────── */
--fond-page: #f7f8fa;
--fond-section: #f9f9f9;
--fond-doux: #f0f0f0;
--fond-pied: #f5f5f5;
--fond-piste: #f1f1f1; /* rail de l'ascenseur de la sidebar */
--fond-spinner: #f3f3f3;
--sidebar-degrade-1: #e4e9f2;
--sidebar-degrade-2: #f5f7fa;
/* ── Voiles semi-transparents ────────────────────────────────────────── */
--voile-blanc-0: rgba(255, 255, 255, 0); /* blanc transparent (dégradés) */
--voile-blanc-50: rgba(255, 255, 255, 0.5);
--voile-blanc-80: rgba(255, 255, 255, 0.8);
--voile-blanc-90: rgba(255, 255, 255, 0.9);
--voile-blanc-95: rgba(255, 255, 255, 0.95);
--voile-sombre: rgba(0, 0, 0, 0.45); /* fond du tiroir mobile (nouveau) */
--flash-succes: rgba(var(--couleur-succes-rvb), 0.2); /* = rgba(92, 184, 92, 0.2) */
/* ── Ombres ──────────────────────────────────────────────────────────── */
--ombre-fine: 0 1px 3px rgba(0, 0, 0, 0.05);
--ombre-carte: 0 2px 5px rgba(0, 0, 0, 0.1);
--ombre-carte-survol: 0 3px 7px rgba(0, 0, 0, 0.15);
--ombre-tuile-active: 0 2px 4px rgba(74, 137, 220, 0.15);
--ombre-bouton: 0 2px 5px rgba(0, 0, 0, 0.2);
--ombre-toast: 0 2px 10px rgba(0, 0, 0, 0.2);
--ombre-info: 0 0 15px rgba(0, 0, 0, 0.2);
--ombre-panneau: 0 2px 24px rgba(0, 0, 0, 0.07);
--ombre-sidebar: 2px 0 10px rgba(0, 0, 0, 0.1);
--ombre-modale: 0 10px 25px rgba(0, 0, 0, 0.1);
--ombre-chargement: 0 5px 25px rgba(0, 0, 0, 0.3);
--ombre-infobulle: 0 3px 8px rgba(0, 0, 0, 0.25);
--ombre-tiroir: -4px 0 24px rgba(0, 0, 0, 0.18); /* panneaux glissants (nouveau) */
/* ── Rayons ──────────────────────────────────────────────────────────── */
--rayon-etiquette: 3px;
--rayon-petit: 4px;
--rayon-infobulle: 5px;
--rayon-controle: 6px; /* champs et boutons */
--rayon-bloc: 8px;
--rayon-large: 10px;
--rayon-panneau: 12px;
--rayon-pilule: 999px;
--rayon-rond: 50%;
/* ── Espacements ─────────────────────────────────────────────────────── */
--espace-2xs: 4px;
--espace-xs: 6px;
--espace-sm: 8px;
--espace-md: 10px;
--espace-lg: 12px;
--espace-xl: 15px;
--espace-2xl: 16px;
--espace-3xl: 20px;
--espace-4xl: 24px;
--espace-5xl: 32px;
/* ── Durées d'animation ──────────────────────────────────────────────── */
--duree-rapide: 0.15s;
--duree-courte: 0.2s;
--duree-moyenne: 0.3s;
/* ── Dimensions structurantes ────────────────────────────────────────── */
--largeur-sidebar: 350px; /* redéfinie plus bas pour la tablette */
--largeur-tiroir-mobile: 300px;
--largeur-panneau-doc: min(480px, 90vw);
/* ── Plans de superposition (rappel des z-index existants) ───────────── */
--plan-infobulle: 500; /* infobulles des tuiles (nouveau) */
--plan-voile: 998; /* voile du tiroir mobile (nouveau) */
--plan-sidebar: 999;
--plan-bouton-menu: 1000;
--plan-chargement-carte: 1100; /* pastille de chargement (nouveau) */
--plan-panneau-doc: 1200; /* documentation indicateur (nouveau) */
}
/* Repli pour les navigateurs antérieurs à color-mix() (avant 2023).
Ces deux valeurs sont le RÉSULTAT du calcul ci-dessus ; elles ne servent
qu'à ces navigateurs. Sur tout moteur moderne, `--accent` seul commande. */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
:root { --accent-clair: #e6f0e8; }
:root[data-theme="dark"] { --accent-clair: #1d2c23; }
}
/* ── Thème sombre ──────────────────────────────────────────────────────────
OPT-IN VOLONTAIRE : le thème est appliqué par ``,
PAS par `@media (prefers-color-scheme: dark)`.
Raison : aucune autre feuille de l'application (map.css, account.css,
tutorial.css, indicator-doc.css, pied de page) n'a de variante sombre.
Suivre la préférence système donnerait aujourd'hui un panneau sombre
collé à une carte, une fiche et un pied de page clairs — pire que pas de
thème sombre du tout. Le jour où le reste de l'application est traité,
il suffit de dupliquer ce bloc dans une media query
`@media (prefers-color-scheme: dark)`.
Ratios mesurés : voir les commentaires de chaque jeton. */
:root[data-theme="dark"] {
--accent: #6fc08d; /* ← LA LIGNE, thème sombre */
--sur-accent: #10201a; /* sur aplat d'accent — 7,72:1 */
--panneau: #1a201c;
--panneau-2: #151a17;
--trait: #2c352f;
--trait-fort: #3b463e;
--encre-1: #e6ece7; /* 13,82:1 sur --panneau */
--encre-2: #a3b0a7; /* 7,36:1 sur --panneau */
--encre-3: #8f9d93; /* 5,85:1 sur --panneau
(maquette : #76837a, 4,18:1 → refusé) */
--focus: #6bb6f0; /* 7,56:1 sur --panneau */
--ombre-douce: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
}
/* Le thème clair explicite doit pouvoir reprendre la main sur un thème
sombre posé plus haut dans l'arbre. */
:root[data-theme="light"] {
--accent: #2f6b46;
--sur-accent: #ffffff;
--panneau: #ffffff;
--panneau-2: #f8faf7;
--trait: #dfe5da;
--trait-fort: #c6d0c0;
--encre-1: #1c2620;
--encre-2: #45524a;
--encre-3: #5f6c64;
--focus: #1565c0;
}
/* ── Tablette (769px → 1024px) : sidebar de la carte rétrécie ─────────────
Le jeton `--largeur-sidebar` (350px par défaut, ci-dessus) est le seul à
varier selon la largeur d'écran. Sa redéfinition vit ici, avec sa valeur
de base, pour que jetons.css reste l'unique feuille qui écrit :root ; les
règles de mise en page de la tablette (rembourrage de la sidebar, bouton
de repli…) restent dans style.css, section 16. */
@media (min-width: 769px) and (max-width: 1024px) {
:root {
--largeur-sidebar: 260px;
}
}