/*
 * L'habillage de Peas'Up sur TOUTE l'administration de son instance (« habillage » du
 * manifeste) : chargée après les feuilles du cœur et de l'instance, elle surcharge leurs
 * jetons de forme (docs/apparence.md du socle). Le socle établit des boutons à coins
 * arrondis ; Peas'Up, fidèle à sa charte, les veut en pilule, appuyés, en Poppins — les
 * écrans du cœur (utilisateurs, réglages…) les reçoivent comme les siens.
 *
 * Les couleurs, elles, restent celles de l'atelier d'apparence de l'instance.
 */
/* font-display: block : le navigateur attend la police (quelques millisecondes, elle est en cache)
   plutôt que de dessiner la police de secours puis de basculer — le texte changeait de police
   sous les yeux à chaque rechargement. */
@font-face { font-family: Poppins; font-weight: 500; font-display: block; src: url('poppins-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 600; font-display: block; src: url('poppins-latin-600-normal.woff2') format('woff2'); }

:root {
    --btn-rayon: 999px;
    --btn-espace: 1.2rem;
    --btn-espace-petit: .8rem;
    --btn-graisse: 600;
    --btn-graisse-principal: 600;
    --btn-police: Poppins, system-ui, sans-serif;
    --champ-rayon: 12px;
}

/*
 * La charte Peas'Up, UNE source pour le back-office (`.peasup`, peasup.css) et ses widgets du
 * tableau de bord (`.tdb-peasup`, widgets.css). Ici parce que cette feuille est la seule
 * chargée sur les deux pages : peasup.css ne l'est pas sur le tableau de bord, et les widgets
 * redéclaraient la palette sous d'autres noms, avec des valeurs qui avaient divergé. Bornée
 * à ces deux classes : les écrans du cœur n'en reçoivent rien. L'aperçu d'un défi
 * (derouler.css, page à part sans la coquille) garde sa propre copie, aux mêmes valeurs.
 * Plus les listes filtrables (filtres-de-liste.js) : la barre et l'en-tête de tri vivent
 * aussi sur un écran de peasup_participants, hors de `.peasup` ; leurs menus, accrochés au
 * <body> pour qu'aucun cadre ne les coupe (.fl-menu).
 */
.peasup, .tdb-peasup, .filtres-de-liste, .fl-cadre, .fl-menu, table[data-filtrable] {
    --green: #335533; --green-dk: #1d301d; --green-vif: #79cb43;
    --pea: #c8e296; --pea-lt: #eef6e8; --pea-plein: #e1efc5;
    --cream: #fcf3d9; --cream-2: #f4f1e4; --yellow: #f9c645; --coral: #f0907a;
    --yellow-lt: #fdf3d4; --yellow-dk: #8a6400; --coral-lt: #fde8e2; --coral-dk: #9c3f2a;
    --ink: #1d301d; --body: #3d4d3d; --muted: #6c7d6c;
    --line: rgba(51, 85, 51, .13); --white: #fff;
    /* Ce qui est à corriger (une fiche incomplète, une ligne d’import) ; plus pâle : sa ligne.
       Pas « --erreur » : le cœur a déjà ce jeton, et ses composants dans nos pages le liraient. */
    --alerte: #a2543f; --alerte-lt: #fdf0ec; --alerte-pale: #fffaf8;
    /* Un geste qui efface (le bouton danger) : plus franc que l'erreur, on le voit avant de cliquer. */
    --danger: #b3412e; --danger-dk: #8f3424; --danger-lt: #fbe9e5;
    /* Les statuts : brouillon (gris), planifié ou commun (ambre), terminé (bleu). */
    --gris-lt: #f0efec; --gris-dk: #6b6b6b;
    --ambre-lt: #fdf0d5; --ambre-dk: #8a6a15;
    --bleu-lt: #e7ecff; --bleu-dk: #3a4a8a;
    /* Le podium : argent et bronze (l'or, c'est --yellow). */
    --argent: #e3e3e3; --bronze: #f0cba8;
    --survol: #fcfbf7; --interrupteur-eteint: #ddd;
    --r: 18px; --shadow: 0 2px 12px rgba(29, 48, 29, .06);
    --ombre-filet: 0 1px 0 rgba(29, 48, 29, .06); --ombre-survol: 0 6px 16px rgba(29, 48, 29, .07);
    --voile-feuille: rgba(29, 48, 29, .38);
    --ombre-forte: 0 10px 30px rgba(29, 48, 29, .18); --ombre-fenetre: 0 12px 40px rgba(29, 48, 29, .25);
    --voile: rgba(29, 48, 29, .35);
    /* Du blanc posé sur un fond vert foncé (la réponse de la synthèse du pilotage). */
    --blanc-voile: rgba(255, 255, 255, .08); --blanc-voile-fort: rgba(255, 255, 255, .14);
    /* Les séries d'un graphique par catégorie (camemberts de l'explorateur du pilotage) : sept
       teintes dans un ORDRE validé pour le daltonisme (écart entre voisines), pas celles de la
       charte — ses verts et jaunes se confondent deux à deux. Au-delà : « Autres », en gris. */
    --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100;
    --serie-5: #e87ba4; --serie-6: #008300; --serie-7: #6250d6; --serie-autres: #a3a39b;
}

/* Les statuts, les mêmes sur les écrans et sur les widgets. */
:is(.peasup, .tdb-peasup) .tag.en_cours { background: var(--pea); color: var(--green-dk); }
:is(.peasup, .tdb-peasup) .tag.brouillon { background: var(--gris-lt); color: var(--gris-dk); }
:is(.peasup, .tdb-peasup) .tag.planifie, .peasup .tag.commun { background: var(--ambre-lt); color: var(--ambre-dk); }
:is(.peasup, .tdb-peasup) .tag.termine { background: var(--bleu-lt); color: var(--bleu-dk); }

/* La barre d'avancement (macro `barre`, templates/_ui.html.twig) : un <div role=progressbar>
   dont le plein est un <rect> SVG — pas de <progress> habillé par ses pseudo-éléments, que
   la capture des retours ne recopie pas. Couleurs : --fond, --plein. */
:is(.peasup, .tdb-peasup) .bar { --fond: var(--pea-lt); --plein: var(--green); display: block; width: 100%; height: 8px; border-radius: 999px; background: var(--fond); overflow: hidden; }
:is(.peasup, .tdb-peasup) .bar svg { display: block; }
:is(.peasup, .tdb-peasup) .bar rect { fill: var(--plein); }

/* Tout écran du back-office prend la largeur de la fenêtre (demande de Guillaume, 24/10) : le
   socle borne son contenu à 1 400 px, et sur grand écran les listes s'y serraient. Jusqu'à
   1 440 px seulement (26/10) : au-delà — un écran de 34 pouces —, les champs s'étiraient
   démesurément ; le contenu s'arrête là, contre le menu (aligné à gauche, comme en dessous). */
.principal .contenu { max-width: 1440px; }

/* UN vert pour tous les boutons principaux, ceux de Peas'Up comme ceux du socle (Utilisateurs,
   Rôles, Réglages…), texte blanc : celui de l'entrée ACTIVE du menu, sa teinte la plus claire
   (demande de Guillaume, 24/10). Le socle la peint en posant l'accent à 22 % sur le fond de la
   barre ; le bouton fait le même mélange, de la même façon (un dégradé uni sur le fond, pas
   de color-mix, refusé par le socle) : il suit l'atelier d'apparence avec le menu. Ceux du
   socle étaient du jaune de l'accent, texte sombre. Au survol, il fonce. */
:root {
    --bouton-principal: linear-gradient(rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .22)) var(--sidebar-bg);
    --texte-sur-bouton: #fff;
}
.btn-primary, .bouton:not(.second):not(.danger):not(.lien) { background: var(--bouton-principal); border-color: transparent; color: var(--texte-sur-bouton); }
.btn-primary:hover, .bouton:not(.second):not(.danger):not(.lien):hover { background: var(--bouton-principal); border-color: transparent; color: var(--texte-sur-bouton); filter: brightness(.88); }