/* ═══════════════════════════════════════════════════════════════════════════ Star-Pigeons Manager — COUCHE « SYSTÈME » (v1.2.0 — 2026-08-08) Troisième couche, purement additive, chargée APRÈS frontend.css et redesign.css. Elle applique la ligne conductrice validée : · encre vert-noir rail, texte principal · vert #14614E actions, validation, marque · ambre #B6741A PERFORMANCE UNIQUEMENT (vitesse, prix, résultats) · rouge #A0331F santé, urgence · bleu #1C4B84 concours et enlogements · papier #F3F6F4 fond, légèrement verdi — jamais un gris pur ┌──────────────────────────────────────────────────────────────────────┐ │ PORTÉE — l'identité s'applique à TOUS les écrans, quel que soit le │ │ thème d'apparence choisi dans les Paramètres. │ │ │ │ Elle a d'abord été réservée au thème « Bleu Classique » pour ne pas │ │ recouvrir les cinq autres. Mais un compte réglé sur Heritage Gold ne │ │ voyait alors AUCUN changement, et le réglage d'apparence ne servait │ │ plus à rien. │ │ │ │ La mise en page est donc désormais COMMUNE aux six thèmes, et chaque │ │ thème ne redéfinit QUE ses couleurs (§ 17). L'identité reste la │ │ même partout — structure, espacements, familles de menu, tailles — │ │ et le choix d'apparence retrouve son effet : il en change la teinte. │ │ │ │ Conséquence à respecter : dans les § 2 à 16, plus AUCUNE couleur ne │ │ doit être écrite en dur ; toutes passent par les jetons --sy-*, sans │ │ quoi le mode sombre (Night Loft) et le mode très clair (Aero White) │ │ deviennent illisibles. │ └──────────────────────────────────────────────────────────────────────┘ RÈGLES DE SÛRETÉ (à respecter pour toute évolution de ce fichier) : 1. tout est scopé « body.spm-app-mode » → ne touche ni le thème .mc-* ni l'administration WordPress ni la page publique ; 2. aucun display:none sur du contenu, aucune suppression d'information ; 3. aucune modification de la structure PHP/HTML — présentation seule ; 4. réversible : retirer les 2 lignes wp_enqueue_style('spm-system', …) dans includes/class-spm-frontend.php (l. ~81 et ~158) remet l'application à l'état antérieur, à l'identique. Original sauvegardé : includes/class-spm-frontend.php.bak-sys-20260807 ═══════════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────────── 1 · LES JETONS frontend.css consomme les variables --spm-* un peu partout : les redéfinir ici propage la palette sans toucher une règle existante. ────────────────────────────────────────────────────────────────────────── */ /* Les jetons sont posés sur .spm-app-shell — le MÊME élément que celui qui porte data-spm-theme. C'est ce qui permet à un alias d'écrire var(--sy-b1) et d'obtenir la valeur DU THÈME courant : la cascade résout d'abord --sy-b1 sur cet élément (§ 17 l'emporte, plus spécifique), puis l'alias lit ce résultat. Déclarés sur , ils prendraient le repli. */ body.spm-app-mode .spm-app-shell{ /* jetons historiques réaffectés — frontend.css les consomme partout */ --spm-blue:var(--sy-b1); /* ex-bleu marine → couleur d'action du thème */ --spm-blue-2:var(--sy-b2); --spm-gold:var(--sy-a3); /* ex-or clair → ambre de performance */ --spm-bg:var(--sy-cr); --spm-card:var(--sy-cr2); --spm-border:var(--sy-ln); --spm-text:var(--sy-tx); --spm-muted:var(--sy-tx2); /* contraste tenu à 4,5:1 dans les 6 thèmes */ --spm-danger:var(--sy-r); --spm-success:var(--sy-b1); /* jetons du système — préfixe sy- : ne recouvre aucun nom existant. Tous dérivés des jetons de thème du § 17, aucun en dur. */ --sy-enc:var(--sy-h1); --sy-enc2:var(--sy-h2); --sy-enc3:var(--sy-h3); --sy-encl:var(--sy-h3); --sy-pap:var(--sy-cr2); --sy-pap2:var(--sy-cr); --sy-pap3:var(--sy-cr3); --sy-brd:var(--sy-ln); --sy-t1:var(--sy-tx); --sy-t2:var(--sy-tx2); --sy-t3:var(--sy-tx3); --sy-d1:var(--sy-cr3); --sy-d2:var(--sy-tx3); --sy-d3:var(--sy-tx3); --sy-v:var(--sy-b1); --sy-v2:var(--sy-b2); --sy-vp:var(--sy-b1l); --sy-a:var(--sy-a3); --sy-a2:var(--sy-a2b); --sy-ap:var(--sy-apl); --sy-ac:var(--sy-a1); /* États sémantiques — le rouge « santé » et le bleu « concours » ne sont pas décoratifs : ils gardent le même sens dans les six thèmes. Seul Night Loft les redéfinit (§ 17), un pastel clair étant illisible sur fond sombre. */ --sy-r:#A0331F; --sy-rp:#F8E6E2; --sy-rbd:#EDC6BD; --sy-b:#1C4B84; --sy-bp:#E4EDF7; --sy-apl:#F8EFDD; --sy-abd:#E8D3A8; --sy-r1:8px; --sy-r2:12px; --sy-r3:16px; } /* Règle 6 : jamais moins de 16 px de corps de texte. */ body.spm-app-mode .spm-app-shell{ font-size:16px; } /* ────────────────────────────────────────────────────────────────────────── 2 · (LIBRE) L'ancien habillage de barre latérale sombre vivait ici. Il a été retiré : le rail est désormais clair et défini au §13. Le conserver aurait écrasé le nouveau, ses sélecteurs étant plus spécifiques. ────────────────────────────────────────────────────────────────────────── */ /* ────────────────────────────────────────────────────────────────────────── 3 · LA BARRE DE CONTEXTE Deuxième constante : elle dit où l'on est, et rien d'autre. ────────────────────────────────────────────────────────────────────────── */ body.spm-app-mode .spm-app-shell .spm-topbar{ background:var(--sy-pap) !important; border:1px solid var(--sy-brd) !important; box-shadow:0 1px 2px rgba(15,26,22,.05) !important; } body.spm-app-mode .spm-app-shell .spm-topbar__eyebrow{ font-size:.68rem; font-weight:650; letter-spacing:.15em; text-transform:uppercase; color:var(--sy-t3) !important; } body.spm-app-mode .spm-app-shell .spm-topbar__title{ letter-spacing:-.035em; color:var(--sy-t1) !important; } body.spm-app-mode .spm-app-shell .spm-topbar__desc{ color:var(--sy-t2) !important; } body.spm-app-mode .spm-app-shell .spm-hero-pill{ background:var(--sy-vp) !important; color:var(--sy-v) !important; border:1px solid var(--sy-b1l) !important; border-radius:6px !important; font-weight:650; } body.spm-app-mode .spm-app-shell .spm-hero-pill--muted{ background:var(--sy-pap3) !important; color:var(--sy-t2) !important; border-color:var(--sy-brd) !important; } body.spm-app-mode .spm-app-shell .spm-topbar-badge{ background:var(--sy-pap2) !important; border:1px solid var(--sy-brd) !important; border-radius:var(--sy-r1) !important; color:var(--sy-t2) !important; } body.spm-app-mode .spm-app-shell .spm-topbar-badge__label{ color:var(--sy-t3) !important; } body.spm-app-mode .spm-app-shell .spm-topbar-badge--license{ background:var(--sy-vp) !important; border-color:var(--sy-b1l) !important; color:var(--sy-v) !important; font-weight:650; } body.spm-app-mode .spm-app-shell .spm-colony-switchbar__label, body.spm-app-mode .spm-app-shell .spm-return-card__label{ color:var(--sy-t3) !important; } /* ────────────────────────────────────────────────────────────────────────── 4 · LES COMPTEURS DU TABLEAU DE BORD redesign v3 les colorait en bleu / vert / or / violet par rotation (nth-child 4n±), donc au hasard du rang. On repasse à une couleur PAR SENS, dans l'ordre réel des huit tuiles : 1 Total enregistré 2 Colonie réelle → encre (effectif) 3 Concours → bleu (concours) 4 Résultats → ambre (performance) 5 Vaccins 6 Traitements 7 Observations → rouge (santé) 8 Licence → neutre ────────────────────────────────────────────────────────────────────────── */ body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat{ background:var(--sy-pap) !important; border:1px solid var(--sy-brd) !important; border-radius:var(--sy-r3) !important; box-shadow:0 1px 2px rgba(15,26,22,.05) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat:hover{ border-color:var(--sy-t3) !important; box-shadow:0 8px 22px -12px rgba(15,26,22,.34) !important; transform:none !important; /* pas de saut de mise en page */ } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat span{ font-size:.7rem; font-weight:650; letter-spacing:.13em; text-transform:uppercase; color:var(--sy-t3) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat strong{ font-weight:800 !important; letter-spacing:-.045em !important; color:var(--sy-t1) !important; background:none !important; -webkit-text-fill-color:currentColor !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat::before{ background:var(--sy-encl) !important; opacity:1 !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat::after{ opacity:.3 !important; } /* La couleur suit data-spm-kind (posé par le PHP), pas le rang : ajouter ou retirer une tuile ne décale donc plus rien. */ body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat[data-spm-kind="races"]::before{ background:var(--sy-b) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat[data-spm-kind="results"]::before{ background:var(--sy-a2) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat[data-spm-kind="results"] strong{ color:var(--sy-a) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat[data-spm-kind="health"]::before{ background:var(--sy-r) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat[data-spm-kind="license"]::before{ background:var(--sy-brd) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat[data-spm-kind="license"] strong{ font-size:1.4rem !important; color:var(--sy-t2) !important; } /* repli de sécurité tant que l'attribut n'est pas encore servi (cache PHP) */ body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat:not([data-spm-kind]):nth-child(3)::before{ background:var(--sy-b) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat:not([data-spm-kind]):nth-child(4)::before{ background:var(--sy-a2) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat:not([data-spm-kind]):nth-child(4) strong{ color:var(--sy-a) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat:not([data-spm-kind]):nth-child(5)::before, body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat:not([data-spm-kind]):nth-child(6)::before, body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat:not([data-spm-kind]):nth-child(7)::before{ background:var(--sy-r) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat[data-spm-kind="pigeons"] .spm-stat-note{ color:var(--sy-t3) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat__link{ color:var(--sy-v) !important; font-weight:650; } /* héro du tableau de bord : le vert du système */ body.spm-app-mode .spm-app-shell .spm-dashboard-hero-card{ background:linear-gradient(118deg,var(--sy-h1) 0%,var(--sy-h2) 52%,var(--sy-h3) 100%) !important; border:0 !important; border-radius:var(--sy-r3) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-hero-card h1, body.spm-app-mode .spm-app-shell .spm-dashboard-hero-card__title{ letter-spacing:-.04em !important; background:none !important; -webkit-text-fill-color:#FFFFFF !important; color:#FFFFFF !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-hero-card__eyebrow{ color:var(--sy-hc) !important; letter-spacing:.16em; text-transform:uppercase; font-size:.7rem; font-weight:650; } body.spm-app-mode .spm-app-shell .spm-dashboard-hero-card__desc{ color:var(--sy-hs) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-hero-card::after{ opacity:.45 !important; } /* modules */ body.spm-app-mode .spm-app-shell .spm-dashboard-module{ border-radius:var(--sy-r3) !important; border:1px solid var(--sy-brd) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-module::before{ background:var(--sy-v) !important; } body.spm-app-mode .spm-app-shell .spm-dashboard-module__label{ color:var(--sy-t1) !important; font-weight:650; } body.spm-app-mode .spm-app-shell .spm-dashboard-module__count{ color:var(--sy-t2) !important; } /* ────────────────────────────────────────────────────────────────────────── 5 · CONTRÔLES Le vert ne sert qu'aux actions. Aucun bouton ambre : l'ambre ne dit que la performance. ────────────────────────────────────────────────────────────────────────── */ body.spm-app-mode .spm-app-shell .spm-btn{ border-radius:var(--sy-r1) !important; font-weight:650; } body.spm-app-mode .spm-app-shell .spm-btn:not(.spm-btn--ghost):not(.spm-btn--danger):not(.spm-btn--light){ background:var(--sy-v) !important; border-color:var(--sy-v) !important; color:#FFFFFF !important; box-shadow:none !important; } body.spm-app-mode .spm-app-shell .spm-btn:not(.spm-btn--ghost):not(.spm-btn--danger):not(.spm-btn--light):hover{ background:var(--sy-v2) !important; border-color:var(--sy-v2) !important; transform:none !important; } body.spm-app-mode .spm-app-shell .spm-main .spm-btn--ghost{ background:var(--sy-pap) !important; border:1px solid var(--sy-brd) !important; color:var(--sy-t2) !important; } body.spm-app-mode .spm-app-shell .spm-main .spm-btn--ghost:hover{ background:var(--sy-pap2) !important; border-color:var(--sy-t3) !important; color:var(--sy-t1) !important; } body.spm-app-mode .spm-app-shell .spm-btn--danger{ background:var(--sy-r) !important; border-color:var(--sy-r) !important; } body.spm-app-mode .spm-app-shell .spm-input{ border-radius:var(--sy-r1) !important; border-color:var(--sy-brd) !important; color:var(--sy-t1) !important; } body.spm-app-mode .spm-app-shell .spm-input:focus{ border-color:var(--sy-v) !important; box-shadow:0 0 0 3px rgba(20,97,78,.18) !important; } body.spm-app-mode .spm-app-shell .spm-chip{ border-radius:6px !important; background:var(--sy-pap3) !important; border:1px solid var(--sy-brd) !important; color:var(--sy-t2) !important; font-weight:650; } body.spm-app-mode .spm-app-shell .spm-chip--action{ background:var(--sy-vp) !important; border-color:var(--sy-b1l) !important; color:var(--sy-v) !important; } body.spm-app-mode .spm-app-shell .spm-chip:hover{ transform:none !important; } /* ────────────────────────────────────────────────────────────────────────── 6 · PANNEAUX, CARTES, TABLEAUX ────────────────────────────────────────────────────────────────────────── */ body.spm-app-mode .spm-app-shell .spm-card, body.spm-app-mode .spm-app-shell .spm-panel{ background:var(--sy-pap) !important; border:1px solid var(--sy-brd) !important; border-radius:var(--sy-r2) !important; box-shadow:0 1px 2px rgba(15,26,22,.05) !important; } body.spm-app-mode .spm-app-shell .spm-panel--soft{ background:var(--sy-pap2) !important; } body.spm-app-mode .spm-app-shell .spm-panel__head{ border-bottom:1px solid var(--sy-brd) !important; } body.spm-app-mode .spm-app-shell table th{ font-size:.7rem; font-weight:650; letter-spacing:.11em; text-transform:uppercase; color:var(--sy-t3) !important; } body.spm-app-mode .spm-app-shell table tbody tr:hover{ background:var(--sy-pap2) !important; } body.spm-app-mode .spm-app-shell .spm-metric-value{ color:var(--sy-a) !important; } /* les petits compteurs de section (pages Pigeons, Santé…) restaient en bleu marine */ body.spm-app-mode .spm-app-shell .spm-stat{ background:var(--sy-pap) !important; border:1px solid var(--sy-brd) !important; border-radius:var(--sy-r2) !important; } body.spm-app-mode .spm-app-shell .spm-stat span{ color:var(--sy-t3) !important; } body.spm-app-mode .spm-app-shell .spm-stat strong{ color:var(--sy-t1) !important; letter-spacing:-.035em; font-variant-numeric:tabular-nums; } body.spm-app-mode .spm-app-shell .spm-muted{ color:var(--sy-t2) !important; } /* ────────────────────────────────────────────────────────────────────────── 7 · ÉTATS ET MESSAGES ────────────────────────────────────────────────────────────────────────── */ body.spm-app-mode .spm-app-shell .spm-notice{ border-radius:var(--sy-r2) !important; } body.spm-app-mode .spm-app-shell .spm-notice--warning, body.spm-app-mode .spm-app-shell .spm-notice--license{ background:var(--sy-ap) !important; border-color:var(--sy-abd) !important; color:var(--sy-a) !important; } body.spm-app-mode .spm-app-shell .spm-notice--license .spm-notice__text{ color:var(--sy-a) !important; } body.spm-app-mode .spm-app-shell .spm-notice--success{ background:var(--sy-vp) !important; border-color:var(--sy-b1l) !important; color:var(--sy-v) !important; } body.spm-app-mode .spm-app-shell .spm-notice--error, body.spm-app-mode .spm-app-shell .spm-notice--danger{ background:var(--sy-rp) !important; border-color:var(--sy-rbd) !important; color:var(--sy-r) !important; } body.spm-app-mode .spm-app-shell .spm-health-badge--ok{ background:var(--sy-vp) !important; color:var(--sy-v) !important; } body.spm-app-mode .spm-app-shell .spm-health-badge--alert{ background:var(--sy-rp) !important; color:var(--sy-r) !important; } /* le bouton « Demander une licence » : ambre, il signale une limite */ body.spm-app-mode .spm-app-shell .spm-license-request__btn{ background:var(--sy-a) !important; border-color:var(--sy-a) !important; color:#FFFFFF !important; border-radius:var(--sy-r1) !important; box-shadow:none !important; } body.spm-app-mode .spm-app-shell .spm-license-request__btn:hover{ background:var(--sy-a2b) !important; transform:none !important; } /* ═══════════════════════════════════════════════════════════════════════════ 8 · UNIVERSEL — vaut pour LES SIX THÈMES Rien ici n'impose de couleur propre : que des gains de lisibilité, de confort et d'organisation. Les intitulés de familles et les focus empruntent « currentColor », donc ils s'adaptent seuls au thème choisi. ═══════════════════════════════════════════════════════════════════════════ */ /* — 8.1 Les 14 entrées regroupées en quatre familles — Les intitulés sont injectés depuis l'adresse de chaque lien : aucune modification du PHP n'est nécessaire. L'ordre d'affichage est corrigé pour que « Statistiques » rejoigne « Résultats » sous Performances. */ body.spm-app-mode .spm-side-nav{ display:flex; flex-direction:column; } body.spm-app-mode .spm-side-link{ position:relative; min-height:44px; } body.spm-app-mode .spm-side-link[href*="spm_tab=dashboard"]{ order:1; } body.spm-app-mode .spm-side-link[href*="spm_tab=colony"]{ order:10; } body.spm-app-mode .spm-side-link[href*="spm_tab=lofts"]{ order:11; } body.spm-app-mode .spm-side-link[href*="spm_tab=pigeons"]{ order:12; } body.spm-app-mode .spm-side-link[href*="spm_tab=breeding"]{ order:13; } body.spm-app-mode .spm-side-link[href*="spm_tab=results"]{ order:20; } body.spm-app-mode .spm-side-link[href*="spm_tab=stats"]{ order:21; } body.spm-app-mode .spm-side-link[href*="spm_tab=health"]{ order:30; } body.spm-app-mode .spm-side-link[href*="spm_tab=training"]{ order:31; } body.spm-app-mode .spm-side-link[href*="spm_tab=feeding"]{ order:32; } body.spm-app-mode .spm-side-link[href*="spm_tab=import"]{ order:40; } body.spm-app-mode .spm-side-link[href*="spm_tab=import_pdf"]{ order:41; } body.spm-app-mode .spm-side-link[href*="spm_tab=license"]{ order:42; } body.spm-app-mode .spm-side-link[href*="spm_tab=settings"]{ order:43; } body.spm-app-mode .spm-side-link[href*="spm_tab=colony"], body.spm-app-mode .spm-side-link[href*="spm_tab=results"], body.spm-app-mode .spm-side-link[href*="spm_tab=health"], body.spm-app-mode .spm-side-link[href*="spm_tab=import"]{ margin-top:26px; } body.spm-app-mode .spm-side-link[href*="spm_tab=colony"]::after, body.spm-app-mode .spm-side-link[href*="spm_tab=results"]::after, body.spm-app-mode .spm-side-link[href*="spm_tab=health"]::after, body.spm-app-mode .spm-side-link[href*="spm_tab=import"]::after{ position:absolute; left:14px; top:-19px; font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:currentColor; opacity:.55; /* suit la couleur du thème */ pointer-events:none; white-space:nowrap; } body.spm-app-mode .spm-side-link[href*="spm_tab=colony"]::after{ content:"Ma colonie"; } body.spm-app-mode .spm-side-link[href*="spm_tab=results"]::after{ content:"Performances"; } body.spm-app-mode .spm-side-link[href*="spm_tab=health"]::after{ content:"Suivi"; } body.spm-app-mode .spm-side-link[href*="spm_tab=import"]::after{ content:"Outils"; } /* « Import PDF » suit « Import WinStam » : pas de second intitulé. (Ces deux règles doivent rester APRÈS les précédentes.) */ body.spm-app-mode .spm-side-link[href*="spm_tab=import_pdf"]{ margin-top:0; } body.spm-app-mode .spm-side-link[href*="spm_tab=import_pdf"]::after{ content:none; } /* — 8.2 Cibles confortables : public de 55 à 75 ans — */ body.spm-app-mode .spm-app-shell .spm-btn{ min-height:44px; } body.spm-app-mode .spm-app-shell .spm-btn--sm{ min-height:38px; } body.spm-app-mode .spm-app-shell .spm-input{ min-height:44px; } body.spm-app-mode .spm-app-shell .spm-input--compact{ min-height:40px; } body.spm-app-mode .spm-app-shell textarea.spm-input{ min-height:88px; } /* — 8.3 Les chiffres s'alignent en colonne, partout — */ body.spm-app-mode .spm-app-shell table td, body.spm-app-mode .spm-app-shell table th, body.spm-app-mode .spm-app-shell .spm-metric-value, body.spm-app-mode .spm-app-shell .spm-dashboard-module__count, body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat strong{ font-variant-numeric:tabular-nums; } /* — 8.4 La bague est une donnée : chasse fixe, jamais coupée — */ body.spm-app-mode .spm-app-shell .spm-mono, body.spm-app-mode .spm-app-shell .spm-ring, body.spm-app-mode .spm-app-shell .spm-pigeon-ring, body.spm-app-mode .spm-app-shell [class*="ring-number"], body.spm-app-mode .spm-app-shell [class*="__ring"]{ font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace !important; letter-spacing:-.01em; white-space:nowrap; } /* — 8.5 Le focus doit se voir de loin — */ body.spm-app-mode .spm-app-shell a:focus-visible, body.spm-app-mode .spm-app-shell button:focus-visible, body.spm-app-mode .spm-app-shell .spm-btn:focus-visible, body.spm-app-mode .spm-app-shell .spm-input:focus-visible, body.spm-app-mode .spm-app-shell select:focus-visible{ outline:3px solid var(--sy-a2b) !important; outline-offset:3px !important; } body.spm-app-mode .spm-app-shell .spm-side-link:focus-visible{ outline:3px solid var(--sy-a1) !important; outline-offset:-3px !important; } /* — 8.6 Respecter le réglage système « animations réduites » — */ @media (prefers-reduced-motion: reduce){ body.spm-app-mode .spm-app-shell *, body.spm-app-mode .spm-app-shell *::before, body.spm-app-mode .spm-app-shell *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 9 · LES NOUVEAUX ÉLÉMENTS DE SAISIE — valables pour LES SIX THÈMES Ces blocs n'existent nulle part ailleurs : ils sont créés par assets/js/system.js et par le tableau de bord. Ils sont donc habillés ici en couleurs adaptatives (currentColor + voiles translucides), pour rester lisibles aussi bien sur Aero White que sur Night Loft. ═══════════════════════════════════════════════════════════════════════════ */ /* — 9.1 « Compléter plus tard » sur le formulaire pigeon — */ body.spm-app-mode .spm-later{ border:1px solid rgba(128,128,128,.32); border-radius:12px; padding:0; margin-top:4px; background:rgba(128,128,128,.05); } body.spm-app-mode .spm-later__summary{ cursor:pointer; list-style:none; padding:14px 16px; min-height:44px; display:flex; align-items:center; gap:10px; font-weight:650; color:currentColor; border-radius:12px; } body.spm-app-mode .spm-later__summary::-webkit-details-marker{ display:none; } body.spm-app-mode .spm-later__summary::before{ content:""; width:9px; height:9px; flex:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .2s; opacity:.7; } body.spm-app-mode .spm-later[open] > .spm-later__summary::before{ transform:rotate(45deg); } body.spm-app-mode .spm-later__summary:hover{ background:rgba(128,128,128,.09); } body.spm-app-mode .spm-later__hint{ margin:0; padding:0 16px 12px; font-size:.86rem; opacity:.7; max-width:70ch; } body.spm-app-mode .spm-later__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; padding:0 16px 16px; } body.spm-app-mode .spm-later__grid .spm-col-span-2{ grid-column:1/-1; } /* — 9.2 Recherche d'adresse pour latitude / longitude — */ body.spm-app-mode .spm-addr{ border:1px dashed rgba(128,128,128,.4); border-radius:12px; padding:12px 14px; background:rgba(128,128,128,.05); } body.spm-app-mode .spm-addr__label{ display:block; margin-bottom:6px; font-weight:650; } body.spm-app-mode .spm-addr__row{ display:flex; gap:8px; flex-wrap:wrap; align-items:stretch; } body.spm-app-mode .spm-addr__input{ flex:1 1 220px; min-width:0; } body.spm-app-mode .spm-addr__btn{ flex:0 0 auto; white-space:nowrap; } body.spm-app-mode .spm-addr__btn[disabled]{ opacity:.6; cursor:progress; } body.spm-app-mode .spm-addr__state{ margin:8px 0 0; font-size:.85rem; opacity:.75; min-height:1.2em; } body.spm-app-mode .spm-addr__state.is-ok{ color:var(--sy-b2); opacity:1; font-weight:600; } body.spm-app-mode .spm-addr__state.is-warn{ color:#C2603F; opacity:1; font-weight:600; } /* — 9.3 Aide déplacée sous le champ — */ body.spm-app-mode .spm-fieldhint{ display:block; margin-top:6px; font-size:.83rem; line-height:1.45; opacity:.68; max-width:62ch; } /* — 9.4 « Tous les chiffres », replié par défaut — */ body.spm-app-mode .spm-more-figures{ margin-bottom:16px; } body.spm-app-mode .spm-more-figures__summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 16px; border:1px solid rgba(128,128,128,.32); border-radius:10px; font-weight:650; font-size:.9rem; background:rgba(128,128,128,.05); } body.spm-app-mode .spm-more-figures__summary::-webkit-details-marker{ display:none; } body.spm-app-mode .spm-more-figures__summary::before{ content:""; width:9px; height:9px; flex:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .2s; opacity:.7; } body.spm-app-mode .spm-more-figures[open] > .spm-more-figures__summary::before{ transform:rotate(45deg); } body.spm-app-mode .spm-more-figures__summary:hover{ background:rgba(128,128,128,.1); } body.spm-app-mode .spm-more-figures .spm-performance-grid{ margin-top:12px; } /* — 9.5 La précision sous le compteur « Pigeons » — */ body.spm-app-mode .spm-stat-note{ display:block; margin-top:4px; font-size:.78rem; line-height:1.35; opacity:.7; font-variant-numeric:tabular-nums; } /* ═══════════════════════════════════════════════════════════════════════════ 10 · L'ACCUEIL — héros du jour puis tuiles de tailles inégales Structure produite par spm_frontend_dashboard_trait.php. Habillage adaptatif (voiles translucides + currentColor) pour les six thèmes, avec le vert de marque pour « Bleu Classique » un peu plus bas. ═══════════════════════════════════════════════════════════════════════════ */ body.spm-app-mode .sy-home{ display:flex; flex-direction:column; gap:16px; } body.spm-app-mode .sy-hero{ display:grid; grid-template-columns:1fr; gap:22px; padding:26px 28px; border-radius:18px; background:linear-gradient(118deg,var(--sy-h1) 0%,var(--sy-h2) 52%,var(--sy-h3) 100%); color:var(--sy-ht); } @media(min-width:900px){ body.spm-app-mode .sy-hero{ grid-template-columns:1.35fr .8fr; align-items:center; } } body.spm-app-mode .sy-hero__eyebrow{ margin:0; font-size:.74rem; font-weight:650; letter-spacing:.16em; text-transform:uppercase; color:var(--sy-hc); } body.spm-app-mode .sy-hero__title{ margin:10px 0 6px; font-size:clamp(1.55rem,3.1vw,2.3rem); font-weight:800; letter-spacing:-.045em; line-height:1.1; color:#FFFFFF; text-wrap:balance; } body.spm-app-mode .sy-hero__sub{ margin:0; font-size:.95rem; color:var(--sy-hs); } body.spm-app-mode .sy-hero__sub .spm-mono{ color:var(--sy-hs); } body.spm-app-mode .sy-hero__figure{ display:flex; align-items:baseline; gap:12px; margin:18px 0 0; flex-wrap:wrap; } body.spm-app-mode .sy-hero__figure strong{ font-size:clamp(2.4rem,5vw,3.4rem); line-height:1; font-weight:800; letter-spacing:-.05em; color:var(--sy-a1); font-variant-numeric:tabular-nums; } body.spm-app-mode .sy-hero__figure span{ font-size:.9rem; color:var(--sy-hs); } body.spm-app-mode .sy-hero__actions{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; } body.spm-app-mode .sy-hero__ghost{ background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.28) !important; color:var(--sy-ht) !important; } body.spm-app-mode .sy-hero__ghost:hover{ background:rgba(255,255,255,.18) !important; color:#FFFFFF !important; } body.spm-app-mode .sy-hero__board{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.17); border-radius:14px; padding:14px 16px; } body.spm-app-mode .sy-hero__board-title{ margin:0 0 10px; font-size:.7rem; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--sy-hc); } body.spm-app-mode .sy-hero__row{ display:flex; align-items:center; gap:10px; padding:5px 0; font-size:.9rem; } body.spm-app-mode .sy-hero__rank{ width:26px; height:26px; flex:none; display:grid; place-items:center; border-radius:7px; background:rgba(255,255,255,.14); font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums; } body.spm-app-mode .sy-hero__rank.is-first{ background:var(--sy-a1); color:var(--sy-h1); } body.spm-app-mode .sy-hero__ring{ color:var(--sy-hs); } body.spm-app-mode .sy-hero__speed{ margin-left:auto; font-weight:700; color:var(--sy-a1); font-variant-numeric:tabular-nums; } body.spm-app-mode .sy-steps{ margin:16px 0 0; padding-left:20px; color:var(--sy-hs); font-size:.93rem; } body.spm-app-mode .sy-steps li{ margin-bottom:5px; } body.spm-app-mode .sy-steps a{ color:#FFFFFF; text-underline-offset:3px; } /* — les tuiles : la taille dit l'importance — */ body.spm-app-mode .sy-home .spm-dashboard-overview-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); } @media(min-width:1000px){ body.spm-app-mode .sy-home .spm-dashboard-overview-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } body.spm-app-mode .sy-home [data-spm-span="2"]{ grid-column:span 2; } } body.spm-app-mode .sy-attention__list{ display:flex; flex-direction:column; margin-top:10px; } body.spm-app-mode .sy-attention__row{ display:flex; align-items:center; gap:10px; min-height:40px; padding:6px 0; border-top:1px solid rgba(128,128,128,.25); text-decoration:none; color:inherit; font-size:.88rem; } body.spm-app-mode .sy-attention__row:hover{ text-decoration:underline; } body.spm-app-mode .sy-attention__row b{ margin-left:auto; font-variant-numeric:tabular-nums; font-size:1rem; } /* — accents de l'accueil pour « Bleu Classique » — */ body.spm-app-mode .spm-app-shell .spm-dashboard-overview-stat[data-spm-kind="calm"]::before{ background:var(--sy-v2) !important; } body.spm-app-mode .spm-app-shell .sy-attention[data-spm-kind="health"] strong{ color:var(--sy-r) !important; } body.spm-app-mode .spm-app-shell .sy-attention__row{ border-top-color:var(--sy-brd) !important; } body.spm-app-mode .spm-app-shell .sy-attention__row b{ color:var(--sy-r) !important; } /* ═══════════════════════════════════════════════════════════════════════════ 11 · PIGEONNIERS — le plan Une case = un casier réel de la table loft_boxes. Couleurs sémantiques, lisibles sur les six thèmes (elles ne dépendent pas du fond). ═══════════════════════════════════════════════════════════════════════════ */ /* Un pigeonnier occupe toute la largeur : un plan de casiers a besoin de place, surtout quand il compte plusieurs blocs côte à côte. */ body.spm-app-mode .sy-lofts{ display:flex; flex-direction:column; gap:12px; margin-bottom:14px; } body.spm-app-mode .sy-loft{ width:100%; box-sizing:border-box; border:1px solid rgba(128,128,128,.3); border-radius:14px; padding:14px 18px; background:rgba(128,128,128,.04); display:flex; flex-direction:column; gap:11px; } body.spm-app-mode .sy-loft.is-active{ border-color:var(--sy-b2); box-shadow:0 0 0 1px var(--sy-b2); } body.spm-app-mode .sy-loft__head{ display:flex; align-items:center; gap:9px; } body.spm-app-mode .sy-loft__name{ margin:0; font-size:1.02rem; font-weight:750; letter-spacing:-.02em; } body.spm-app-mode .sy-loft__code{ font-size:.72rem; font-weight:650; letter-spacing:.06em; padding:3px 7px; border-radius:5px; background:rgba(128,128,128,.16); } body.spm-app-mode .sy-loft__dot{ margin-left:auto; width:10px; height:10px; border-radius:50%; background:var(--sy-b2); flex:none; } body.spm-app-mode .sy-loft__dot.is-full{ background:var(--sy-a2b); } /* Un pigeonnier = plusieurs blocs, chacun sa largeur. « Côte à côte » les aligne, « Empilés » les met les uns sous les autres. */ body.spm-app-mode .sy-plan{ display:flex; gap:10px; align-items:flex-start; } body.spm-app-mode .sy-plan--h{ flex-direction:row; flex-wrap:wrap; } body.spm-app-mode .sy-plan--v{ flex-direction:column; } body.spm-app-mode .sy-block{ display:flex; flex-direction:column; gap:4px; min-width:0; } body.spm-app-mode .sy-plan--v .sy-block{ width:100%; } body.spm-app-mode .sy-block__tag{ font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.6; } body.spm-app-mode .sy-block__grid{ display:grid; gap:3px; grid-template-columns:repeat(var(--sy-cols,8),minmax(9px,16px)); } body.spm-app-mode .sy-cell{ aspect-ratio:1; border-radius:3px; display:block; min-width:8px; background:rgba(128,128,128,.22); } body.spm-app-mode .sy-cell.is-taken{ background:var(--sy-b2); } body.spm-app-mode .sy-cell.is-held{ background:var(--sy-a2b); } body.spm-app-mode .sy-cell.is-off{ background:var(--sy-r); } body.spm-app-mode .sy-loft__meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:.83rem; opacity:.78; } body.spm-app-mode .sy-loft__meta strong{ font-weight:750; opacity:1; font-variant-numeric:tabular-nums; } body.spm-app-mode .sy-loft__note{ margin:0; font-size:.82rem; opacity:.66; } body.spm-app-mode .sy-loft__empty{ margin:0; font-size:.84rem; opacity:.6; padding:14px 0; border-top:1px dashed rgba(128,128,128,.32); border-bottom:1px dashed rgba(128,128,128,.32); } body.spm-app-mode .sy-loft__actions{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; } body.spm-app-mode .sy-loft__del{ display:inline; } body.spm-app-mode .sy-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:.8rem; opacity:.72; margin:0 0 18px; } body.spm-app-mode .sy-legend span{ display:flex; align-items:center; gap:6px; } body.spm-app-mode .sy-legend .sy-cell{ width:12px; height:12px; aspect-ratio:auto; } /* — le panneau de disposition — */ body.spm-app-mode .sy-planner__form, body.spm-app-mode .sy-planner__layout{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-top:12px; } body.spm-app-mode .sy-planner__layout{ border-top:1px solid rgba(128,128,128,.25); padding-top:14px; margin-top:16px; } body.spm-app-mode .sy-planner__field{ display:flex; flex-direction:column; gap:5px; } body.spm-app-mode .sy-planner__field label{ font-size:.8rem; font-weight:650; } body.spm-app-mode .sy-planner__field .spm-input{ width:auto; min-width:130px; } body.spm-app-mode .sy-orient{ border:1px solid rgba(128,128,128,.3); border-radius:10px; padding:8px 14px 12px; margin:0; display:flex; gap:16px; flex-wrap:wrap; align-items:center; } body.spm-app-mode .sy-orient legend{ font-size:.78rem; font-weight:650; padding:0 6px; } body.spm-app-mode .sy-orient__opt{ display:flex; align-items:center; gap:7px; min-height:44px; cursor:pointer; font-size:.88rem; } body.spm-app-mode .sy-widths{ display:flex; gap:12px; flex-wrap:wrap; } /* ═══════════════════════════════════════════════════════════════════════════ 12 · LA BARRE DE CONTEXTE, RÉDUITE À L'ESSENTIEL Une seule ligne : où je suis, quelle colonie, une action. Le nom de la colonie n'apparaît plus qu'une fois par écran. ═══════════════════════════════════════════════════════════════════════════ */ body.spm-app-mode .sy-bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 18px; min-height:60px; } body.spm-app-mode .sy-bar__left{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; min-width:0; } body.spm-app-mode .sy-bar__title{ margin:0; font-size:1.35rem; font-weight:800; letter-spacing:-.035em; } body.spm-app-mode .sy-bar__role{ font-size:.72rem; font-weight:650; letter-spacing:.1em; text-transform:uppercase; opacity:.55; } body.spm-app-mode .sy-bar__right{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* — le passage vers le Studio, à gauche de la colonie — La plaque du logo porte son propre fond : on ne lui met ni cadre ni couleur, sinon on empile deux encadrements. Seule la hauteur est fixée, la largeur suit le rapport 1200×544 du fichier. */ body.spm-app-mode .sy-bar__studio{ display:inline-flex; align-items:center; flex:0 0 auto; line-height:0; text-decoration:none; border-radius:9px; opacity:.92; transition:opacity .16s ease, transform .16s ease; } body.spm-app-mode .sy-bar__studio img{ height:34px; width:auto; max-width:none; display:block; border:0; } body.spm-app-mode .sy-bar__studio:hover, body.spm-app-mode .sy-bar__studio:focus-visible{ opacity:1; transform:translateY(-1px); } body.spm-app-mode .sy-bar__colony{ margin:0; } body.spm-app-mode .sy-bar__colony .spm-input{ min-width:180px; } body.spm-app-mode .sy-bar__colony-name{ font-size:.92rem; font-weight:650; } body.spm-app-mode .sy-bar__badge{ display:inline-flex; align-items:center; min-height:38px; padding:0 12px; border-radius:8px; font-size:.82rem; font-weight:650; text-decoration:none; } body.spm-app-mode .sy-bar__badge--trial{ background:rgba(212,149,47,.16); color:var(--sy-a3); border:1px solid rgba(212,149,47,.45); } /* — les raccourcis vers les modules, repliés — */ body.spm-app-mode .sy-shortcuts{ margin:0 0 16px; } body.spm-app-mode .sy-shortcuts__summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 16px; border:1px solid rgba(128,128,128,.32); border-radius:10px; font-weight:650; font-size:.9rem; background:rgba(128,128,128,.05); } body.spm-app-mode .sy-shortcuts__summary::-webkit-details-marker{ display:none; } body.spm-app-mode .sy-shortcuts__summary::before{ content:""; width:9px; height:9px; flex:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .2s; opacity:.7; } body.spm-app-mode .sy-shortcuts[open] > .sy-shortcuts__summary::before{ transform:rotate(45deg); } body.spm-app-mode .sy-shortcuts .spm-dashboard-modules{ margin-top:12px; } /* des vignettes deux fois plus petites : ce sont des raccourcis, pas des affiches */ body.spm-app-mode .sy-shortcuts .spm-dashboard-module__image img{ max-height:56px; width:auto; } body.spm-app-mode .sy-shortcuts .spm-dashboard-module{ padding:12px 10px; } /* ═══════════════════════════════════════════════════════════════════════════ 13 · LE RAIL ET LE FOND CRÈME Rail clair à gauche, entrées regroupées en familles, entrée courante en vert plein. Le contenu repose sur un fond crème plutôt qu'un gris : plus chaleureux, moins « logiciel ». ═══════════════════════════════════════════════════════════════════════════ */ body.spm-app-mode{ --sy-cr:#F7F3E9; /* crème — le fond général */ --sy-cr2:#FDFBF5; /* crème clair — les cartes */ --sy-cr3:#EFE9DA; /* crème appuyé — survols, remplis */ --sy-ln:#E2DACA; /* filets */ --sy-tx:#2B2A25; /* encre chaude */ --sy-tx2:#6A6459; --sy-tx3:#8C8578; } html:has(body.spm-app-mode){ background:var(--sy-cr); } body.spm-app-mode{ background:var(--sy-cr) !important; } body.spm-app-mode .sy-app-host{ background:var(--sy-cr) !important; padding:0 !important; margin:0 !important; border-radius:0 !important; box-shadow:none !important; } body.spm-app-mode .sy-shell{ display:grid !important; grid-template-columns:256px minmax(0,1fr) !important; gap:0 !important; padding:0 !important; background:var(--sy-cr) !important; min-height:100vh; align-items:stretch; } @media(max-width:900px){ body.spm-app-mode .sy-shell{ grid-template-columns:1fr !important; } } /* — le rail — */ body.spm-app-mode .sy-rail{ background:var(--sy-cr) !important; border:0 !important; border-right:1px solid var(--sy-ln) !important; border-radius:0 !important; padding:18px 14px 16px !important; display:flex !important; flex-direction:column !important; gap:16px !important; color:var(--sy-tx2) !important; position:sticky; top:0; align-self:start; height:100vh; overflow:hidden; } body.spm-app-mode .sy-rail__brand{ display:flex; justify-content:center; padding-bottom:14px; border-bottom:1px solid var(--sy-ln); flex:none; } body.spm-app-mode .sy-rail__logo{ width:150px; height:150px; object-fit:contain; display:block; background:#FFFFFF; border:1px solid var(--sy-ln); border-radius:18px; padding:8px; } body.spm-app-mode .sy-nav{ display:flex; flex-direction:column; gap:1px; flex:1 1 auto; min-height:0; overflow-y:auto; } body.spm-app-mode .sy-nav__group{ margin:14px 0 4px; padding:0 10px; font-size:.66rem; font-weight:750; letter-spacing:.15em; text-transform:uppercase; color:var(--sy-tx3); } body.spm-app-mode .sy-nav__group:first-child{ margin-top:2px; } body.spm-app-mode .sy-nav__link{ display:flex; align-items:center; gap:11px; min-height:44px; padding:9px 11px; border-radius:10px; color:var(--sy-tx2) !important; text-decoration:none; font-size:.94rem; font-weight:600; transition:background .18s, color .18s; } body.spm-app-mode .sy-nav__link:hover{ background:var(--sy-cr3); color:var(--sy-tx) !important; } body.spm-app-mode .sy-nav__link.is-on{ background:var(--sy-b1) !important; color:#FFFFFF !important; font-weight:700; } body.spm-app-mode .sy-nav__link.is-locked{ opacity:.6; } body.spm-app-mode .sy-nav__lock{ margin-left:auto; color:var(--sy-a3); font-size:1.1rem; line-height:1; } body.spm-app-mode .sy-nav__icon{ width:20px; height:20px; flex:none; display:inline-flex; align-items:center; justify-content:center; } body.spm-app-mode .sy-nav__icon svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } body.spm-app-mode .sy-rail__foot{ border-top:1px solid var(--sy-ln); padding-top:12px; flex:none; display:flex; flex-direction:column; gap:10px; } body.spm-app-mode .sy-rail__promo{ display:block; text-decoration:none; padding:11px 13px; border-radius:12px; background:var(--sy-apl); border:1px solid var(--sy-abd); } body.spm-app-mode .sy-rail__promo b{ display:block; color:var(--sy-a3); font-size:.86rem; } body.spm-app-mode .sy-rail__promo span{ display:block; margin:3px 0 6px; color:var(--sy-tx2); font-size:.76rem; line-height:1.4; } body.spm-app-mode .sy-rail__promo em{ font-style:normal; color:var(--sy-b1); font-size:.8rem; font-weight:700; } body.spm-app-mode .sy-rail__who{ display:flex; align-items:center; gap:10px; min-width:0; } body.spm-app-mode .sy-rail__avatar{ width:36px; height:36px; flex:none; border-radius:11px; background:var(--sy-b1); color:#FFFFFF; display:grid; place-items:center; font-size:.8rem; font-weight:750; } body.spm-app-mode .sy-rail__names{ display:flex; flex-direction:column; min-width:0; line-height:1.25; } body.spm-app-mode .sy-rail__names b{ font-size:.86rem; color:var(--sy-tx); font-weight:700; } body.spm-app-mode .sy-rail__names em{ font-style:normal; font-size:.76rem; color:var(--sy-tx3); } body.spm-app-mode .sy-rail__out{ display:flex; align-items:center; justify-content:center; min-height:42px; border-radius:10px; text-decoration:none; border:1px solid var(--sy-ln); color:var(--sy-tx2); font-size:.85rem; font-weight:650; background:var(--sy-cr2); } body.spm-app-mode .sy-rail__out:hover{ background:var(--sy-cr3); color:var(--sy-tx); } /* — le contenu — */ body.spm-app-mode .sy-main{ padding:20px 24px 34px !important; background:var(--sy-cr) !important; min-width:0; } body.spm-app-mode .sy-bar{ background:var(--sy-cr2) !important; border:1px solid var(--sy-ln) !important; border-radius:14px !important; margin-bottom:16px !important; box-shadow:0 1px 2px rgba(43,42,37,.05) !important; } /* le crème gouverne aussi les panneaux et les tuiles */ body.spm-app-mode .sy-main .spm-card, body.spm-app-mode .sy-main .spm-panel, body.spm-app-mode .sy-main .spm-dashboard-overview-stat, body.spm-app-mode .sy-main .spm-stat, body.spm-app-mode .sy-main .spm-dashboard-module{ background:var(--sy-cr2) !important; border-color:var(--sy-ln) !important; } body.spm-app-mode .sy-main .spm-panel--soft{ background:var(--sy-cr3) !important; } body.spm-app-mode .sy-main table tbody tr:hover{ background:var(--sy-cr3) !important; } body.spm-app-mode .sy-main .spm-input{ background:var(--sy-cr2) !important; border-color:var(--sy-ln) !important; } body.spm-app-mode .sy-loft{ background:var(--sy-cr2) !important; border-color:var(--sy-ln) !important; } body.spm-app-mode .sy-cell{ background:var(--sy-cr3); } body.spm-app-mode .sy-later, body.spm-app-mode .sy-shortcuts__summary, body.spm-app-mode .sy-more-figures__summary, body.spm-app-mode .sy-addr{ background:var(--sy-cr3); border-color:var(--sy-ln); } /* ═══════════════════════════════════════════════════════════════════════════ 15 · LES RÉSULTATS OFFICIELS Panneau en tête de l'onglet Résultats : recherche du colombophile, puis ses classements réels lus sur l'API sprfcb/v1. ═══════════════════════════════════════════════════════════════════════════ */ body.spm-app-mode .sy-rfcb{ background:linear-gradient(118deg,var(--sy-h1) 0%,var(--sy-h2) 60%,var(--sy-h3) 100%); color:var(--sy-ht); border-radius:16px; padding:20px 22px; margin-bottom:18px; box-shadow:0 18px 40px -22px rgba(15,26,22,.6); } body.spm-app-mode .sy-rfcb__head{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:10px; } body.spm-app-mode .sy-rfcb__eyebrow{ margin:0; font-size:.71rem; font-weight:650; letter-spacing:.16em; text-transform:uppercase; color:var(--sy-hc); } body.spm-app-mode .sy-rfcb__title{ margin:6px 0 0; font-size:1.5rem; font-weight:800; letter-spacing:-.04em; color:#FFFFFF; } body.spm-app-mode .sy-rfcb__unlink{ margin-left:auto; } body.spm-app-mode .sy-rfcb__unlink .spm-btn{ background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.28) !important; color:var(--sy-ht) !important; } body.spm-app-mode .sy-rfcb__intro{ margin:0 0 14px; color:var(--sy-hs); font-size:.92rem; max-width:70ch; } body.spm-app-mode .sy-rfcb__who{ margin:0 0 14px; color:var(--sy-hs); font-size:.95rem; } body.spm-app-mode .sy-rfcb__who b{ color:#FFFFFF; } body.spm-app-mode .sy-rfcb__pick label{ display:block; font-size:.8rem; font-weight:650; color:var(--sy-hc); margin-bottom:6px; } body.spm-app-mode .sy-rfcb__pick .spm-input{ max-width:420px; min-height:46px; background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.25) !important; color:#FFFFFF !important; } body.spm-app-mode .sy-rfcb__hits{ display:flex; flex-direction:column; gap:6px; margin-top:10px; max-width:560px; } body.spm-app-mode .sy-rfcb__hit{ display:flex; flex-direction:column; gap:2px; text-align:left; min-height:52px; padding:9px 13px; border-radius:10px; cursor:pointer; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); color:var(--sy-ht); transition:background .18s; } body.spm-app-mode .sy-rfcb__hit:hover{ background:rgba(255,255,255,.17); } body.spm-app-mode .sy-rfcb__hitname{ font-weight:700; font-size:.95rem; } body.spm-app-mode .sy-rfcb__hitmeta{ font-size:.79rem; color:var(--sy-hs); } body.spm-app-mode .sy-rfcb__none, body.spm-app-mode .sy-rfcb__loading, body.spm-app-mode .sy-rfcb__more{ margin:10px 0 0; color:var(--sy-hs); font-size:.88rem; } /* — le même panneau, dans la fiche d'un pigeon — Posé par system.js au-dessus des résultats saisis à la main. Il lit la base officielle par la BAGUE : c'est ce qui manquait pour qu'une fiche cesse d'afficher « aucun résultat » alors que le pigeon est classé. */ /* Le panneau vit dans .spm-pigeon-sheet, une GRILLE. Sans min-width:0, un élément de grille prend la largeur de son contenu (min-width:auto) : le tableau à six colonnes étirait donc le panneau à 1 146 px dans une colonne de 324, et .spm-app-host (overflow:hidden) coupait le reste — les classements devenaient illisibles sur téléphone, sans barre de défilement. Mesuré au DOM avant/après. */ body.spm-app-mode .sy-rfcb--pigeon{ margin:16px 0 0; min-width:0; } body.spm-app-mode .sy-rfcb--pigeon .sy-rfcb__body{ min-width:0; } body.spm-app-mode .sy-rfcb--pigeon .sy-rfcb__wrap{ max-width:100%; } body.spm-app-mode .sy-rfcb__resume{ margin:12px 0 0; color:var(--sy-ht); font-size:.92rem; font-weight:600; } body.spm-app-mode .sy-rfcb__resume b{ color:var(--sy-a1); } /* le rang dans les dix premiers ressort en ambre : c'est de la performance */ body.spm-app-mode .sy-rfcb--pigeon .sy-rfcb__table td.strong{ color:var(--sy-a1); font-weight:700; } /* la note qui explique ce que contient le panneau des résultats saisis */ body.spm-app-mode .sy-perf-note{ margin:-2px 0 12px; font-size:.86rem; color:var(--sy-t2); } /* — la PROVENANCE de chaque classement — Le panneau réunit quatre bases qui ne se parlaient pas. Dire d'où vient chaque ligne est le fond du sujet : sans cela, on ne saurait pas si un rang vient d'un classement d'entente ou du national, ni pourquoi le même vol apparaît plusieurs fois. Étiquettes posées sur le fond sombre du panneau : teintes claires, jamais de couleur pleine. */ body.spm-app-mode .sy-src{ display:inline-block; min-width:62px; text-align:center; padding:1px 8px; margin-right:6px; border-radius:999px; font-size:.68rem; font-weight:750; letter-spacing:.02em; white-space:nowrap; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); color:var(--sy-ht); } body.spm-app-mode .sy-src--national{ color:var(--sy-hc); border-color:rgba(130,210,183,.45); } body.spm-app-mode .sy-src--pipa { color:#A8C8FF; border-color:rgba(168,200,255,.45); } body.spm-app-mode .sy-src--mail { color:#D3BEF7; border-color:rgba(211,190,247,.45); } body.spm-app-mode .sy-src--saisie { color:var(--sy-hs); border-color:rgba(255,255,255,.28); } /* l'annonce en direct n'est pas un classement : elle porte la couleur d'alerte, comme le badge orange du site de recherche */ body.spm-app-mode .sy-src--annonce { color:var(--sy-a1); border-color:rgba(240,188,100,.55); } /* la colonne des classements porte plusieurs lignes : on l'aère */ body.spm-app-mode .sy-rfcb__ou{ font-size:.84rem; line-height:1.75; } /* « 9/62 » : le rang porte la performance, le nombre de partants le situe sans lui voler la vedette */ body.spm-app-mode .sy-sur{ font-weight:500; font-size:.82em; color:var(--sy-hs); } /* « au nom de … » : le pigeon est bien le sien (la bague le dit), mais la source porte un autre nom — vendu, ou engagé par un tiers */ body.spm-app-mode .sy-autrenom{ color:var(--sy-a1); font-style:italic; } /* « engagé » = présent au concours, sans rang dans ce classement. Mesuré : 41,6 % des lignes de la base nationale sont dans ce cas — les afficher « 0e » serait faux. */ body.spm-app-mode .sy-engage{ font-style:italic; font-weight:500; color:var(--sy-hs); } body.spm-app-mode .sy-rfcb__avert{ color:var(--sy-a1) !important; } /* Un compteur rempli depuis la base officielle : il doit se distinguer d'une valeur saisie, sans crier. Un filet vert à gauche, et le chiffre dans la couleur d'action. Portée body.spm-app-mode .spm-app-shell (= …spm-app-shell) : frontend.css fixe la couleur des chiffres avec une spécificité qu'un simple « body.spm-app-mode » ne bat pas. */ body.spm-app-mode .spm-stat.sy-stat--officiel{ box-shadow:inset 3px 0 0 var(--sy-v); } body.spm-app-mode .spm-app-shell .spm-stat.sy-stat--officiel strong{ color:var(--sy-v) !important; } body.spm-app-mode .sy-stat-note{ margin:8px 0 0; font-size:.84rem; color:var(--sy-t2); } body.spm-app-mode .sy-rfcb__figures{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); margin-bottom:14px; } body.spm-app-mode .sy-rfcb__figures div{ background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:10px 13px; } body.spm-app-mode .sy-rfcb__figures span{ display:block; font-size:.68rem; font-weight:650; letter-spacing:.13em; text-transform:uppercase; color:var(--sy-hc); } body.spm-app-mode .sy-rfcb__figures b{ display:block; margin-top:4px; font-size:1.7rem; font-weight:800; letter-spacing:-.045em; font-variant-numeric:tabular-nums; } body.spm-app-mode .sy-rfcb__figures .is-best b{ color:var(--sy-a1); } body.spm-app-mode .sy-rfcb__wrap{ overflow-x:auto; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); } body.spm-app-mode .sy-rfcb__table{ width:100%; min-width:720px; border-collapse:collapse; font-size:.86rem; } body.spm-app-mode .sy-rfcb__table th{ text-align:left; padding:9px 12px; font-size:.67rem; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--sy-hc); border-bottom:1px solid rgba(255,255,255,.16); white-space:nowrap; } body.spm-app-mode .sy-rfcb__table td{ padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.08); white-space:nowrap; font-variant-numeric:tabular-nums; } body.spm-app-mode .sy-rfcb__table tbody tr:last-child td{ border-bottom:0; } body.spm-app-mode .sy-rfcb__table tbody tr:hover{ background:rgba(255,255,255,.06); } body.spm-app-mode .sy-rfcb__table .r{ text-align:right; } body.spm-app-mode .sy-rfcb__table .strong{ font-weight:750; color:var(--sy-a1); } body.spm-app-mode .sy-rfcb__table .mono{ font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace; font-size:.82rem; } /* ═══════════════════════════════════════════════════════════════════════════ 16 · RETRAIT D'UN IMPORT ═══════════════════════════════════════════════════════════════════════════ */ body.spm-app-mode .sy-rm{ display:flex; flex-direction:column; gap:7px; align-items:flex-start; } body.spm-app-mode .sy-rm__force{ display:flex; align-items:center; gap:7px; font-size:.79rem; color:var(--sy-tx2); min-height:34px; cursor:pointer; white-space:normal; max-width:230px; line-height:1.35; } body.spm-app-mode .sy-rm__kept{ margin:8px 0 0; font-size:.78rem; color:var(--sy-a3); max-width:280px; line-height:1.4; } body.spm-app-mode .sy-rm__kept span{ display:block; color:var(--sy-tx2); margin-top:2px; } /* ═══════════════════════════════════════════════════════════════════════════ 17 · LES SIX THÈMES, RENDUS À LA VIE Ils ne recouvrent plus l'identité : ils la déclinent. Chaque thème ne redéfinit QUE des couleurs ; la mise en page, les espacements, les familles de menu et les tailles restent identiques partout. Le réglage se trouve dans Paramètres → Apparence. Les jetons sont posés sur .spm-app-shell[data-spm-theme="…"], donc sur le même élément que les alias du § 1 — c'est ce qui fait que --spm-card, --sy-pap ou --sy-v suivent le thème sans qu'aucune règle ne soit dupliquée. Chaque thème doit fournir les 19 jetons ci-dessous, sans exception : cr cr2 cr3 ln surfaces (fond, carte, appui, filet) tx tx2 tx3 encres (texte, secondaire, discret) b1 b2 b1l action (plein, survol, pastel) h1 h2 h3 hc hs ht bandeaux (dégradé sombre + textes posés dessus) a1 a2b a3 ambre (PERFORMANCE uniquement — jamais un bouton) ═══════════════════════════════════════════════════════════════════════════ */ /* Repli : tant que le shell n'a pas d'attribut de thème, on rend Forest Field. Posé sur body pour que le fond de page existe avant même le shell. */ body.spm-app-mode{ --sy-b1:#14614E; --sy-b2:#1D8168; --sy-b1l:#C9E0D6; --sy-h1:#0D2A22; --sy-h2:#134034; --sy-h3:#1A5747; --sy-hc:#82D2B7; --sy-hs:#A6CDBF; --sy-ht:#E9F3EF; --sy-a1:#F0BC64; --sy-a2b:#D4952F; --sy-a3:#9E6413; } /* ── Forest Field — vert de campagne sur crème (l'identité de référence) ── */ body.spm-app-mode .spm-app-shell[data-spm-theme="forest-field"]{ --sy-cr:#F7F3E9; --sy-cr2:#FDFBF5; --sy-cr3:#EFE9DA; --sy-ln:#E2DACA; --sy-tx:#2B2A25; --sy-tx2:#635D52; --sy-tx3:#726C5F; --sy-b1:#14614E; --sy-b2:#1D8168; --sy-b1l:#C9E0D6; --sy-h1:#0D2A22; --sy-h2:#134034; --sy-h3:#1A5747; --sy-hc:#82D2B7; --sy-hs:#BFD9CE; --sy-ht:#E9F3EF; --sy-a1:#F0BC64; --sy-a2b:#D4952F; --sy-a3:#8A5710; } /* ── Heritage Gold — ivoire et or, le plus chaleureux ── L'action est un brun profond, l'ambre de performance reste plus clair et plus saturé : sans cet écart, « action » et « performance » se confondent. */ body.spm-app-mode .spm-app-shell[data-spm-theme="heritage-gold"]{ --sy-cr:#F8F2E4; --sy-cr2:#FFFCF4; --sy-cr3:#F0E7D2; --sy-ln:#E4D8BE; --sy-tx:#2E2718; --sy-tx2:#665B41; --sy-tx3:#786B54; --sy-b1:#6E4E12; --sy-b2:#8A6414; --sy-b1l:#EBDCB6; --sy-h1:#332812; --sy-h2:#4C3A16; --sy-h3:#6B531F; --sy-hc:#F0CE84; --sy-hs:#DCC79C; --sy-ht:#FBF5E6; --sy-a1:#F2CE7A; --sy-a2b:#C79A34; --sy-a3:#9A6A11; --sy-apl:#F3E6C8; --sy-abd:#DCC793; } /* ── Bleu Classique — le thème par défaut, fidèle à son nom ── */ body.spm-app-mode .spm-app-shell[data-spm-theme="classic-blue"]{ --sy-cr:#F4F5F9; --sy-cr2:#FFFFFF; --sy-cr3:#E9ECF4; --sy-ln:#DBE0EC; --sy-tx:#151B2B; --sy-tx2:#4E576D; --sy-tx3:#646D89; --sy-b1:#17417F; --sy-b2:#1F569F; --sy-b1l:#CBDBF2; --sy-h1:#0C1F3F; --sy-h2:#153157; --sy-h3:#1E4677; --sy-hc:#8FB6E8; --sy-hs:#B8CBE5; --sy-ht:#EDF2FA; --sy-a1:#F0C24F; --sy-a2b:#C79A22; --sy-a3:#8A6A0F; } /* ── Control Slate — ardoise et acier, plus technique ── */ body.spm-app-mode .spm-app-shell[data-spm-theme="control-slate"]{ --sy-cr:#F1F3F5; --sy-cr2:#FFFFFF; --sy-cr3:#E5E9ED; --sy-ln:#D6DCE2; --sy-tx:#161D24; --sy-tx2:#4C5762; --sy-tx3:#636E7A; --sy-b1:#2C4557; --sy-b2:#3A5B72; --sy-b1l:#D2DDE5; --sy-h1:#182430; --sy-h2:#243447; --sy-h3:#33506B; --sy-hc:#9DBDD4; --sy-hs:#B4C3CF; --sy-ht:#EEF3F7; --sy-a1:#E9B45C; --sy-a2b:#BE8A2C; --sy-a3:#7A5810; } /* ── Aero White — très lumineux, pour les longues séances ── */ body.spm-app-mode .spm-app-shell[data-spm-theme="aero-white"]{ --sy-cr:#FAFCFF; --sy-cr2:#FFFFFF; --sy-cr3:#EFF4FB; --sy-ln:#DEE7F3; --sy-tx:#101828; --sy-tx2:#48566E; --sy-tx3:#68758D; --sy-b1:#1B4F94; --sy-b2:#2765B4; --sy-b1l:#D3E3F8; --sy-h1:#12294B; --sy-h2:#1B4173; --sy-h3:#265C9E; --sy-hc:#9CC4EE; --sy-hs:#BCD0E7; --sy-ht:#F3F8FE; --sy-a1:#F0C55E; --sy-a2b:#C1932C; --sy-a3:#7E5D10; } /* ── Night Loft — un vrai mode sombre, pour travailler le soir ── Tout s'inverse : les encres deviennent claires, les pastels deviennent des teintes sourdes. Un pastel clair sur fond sombre serait illisible. */ body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"]{ --sy-cr:#0E141C; --sy-cr2:#161F2A; --sy-cr3:#1E2A38; --sy-ln:#2A3949; --sy-tx:#E8EEF6; --sy-tx2:#B4C2D2; --sy-tx3:#93A2B4; --sy-b1:#1E7A62; --sy-b2:#2A9C7E; --sy-b1l:#17362E; --sy-h1:#0B1017; --sy-h2:#12202B; --sy-h3:#1A3A45; --sy-hc:#6FD3B4; --sy-hs:#A9BECE; --sy-ht:#EAF4F0; --sy-a1:#F0BC64; --sy-a2b:#D4952F; --sy-a3:#E5B463; --sy-apl:#2C2413; --sy-abd:#4E3D1B; --sy-r:#EC8168; --sy-rp:#2E1712; --sy-rbd:#57281F; --sy-b:#7FB0E8; --sy-bp:#132538; } /* ═══════════════════════════════════════════════════════════════════════════ 17b · CE QUE LES JETONS NE PEUVENT PAS RATTRAPER Le fond de la page et quelques surfaces sont peints en dehors du shell : il faut les accrocher au thème par :has(), sinon Night Loft laisse une bande crème autour de l'application. ═══════════════════════════════════════════════════════════════════════════ */ html:has(.spm-app-shell[data-spm-theme="night-loft"]), body.spm-app-mode:has(.spm-app-shell[data-spm-theme="night-loft"]){ background:#0E141C !important; } html:has(.spm-app-shell[data-spm-theme="classic-blue"]), body.spm-app-mode:has(.spm-app-shell[data-spm-theme="classic-blue"]){ background:#F4F5F9 !important; } html:has(.spm-app-shell[data-spm-theme="control-slate"]), body.spm-app-mode:has(.spm-app-shell[data-spm-theme="control-slate"]){ background:#F1F3F5 !important; } html:has(.spm-app-shell[data-spm-theme="aero-white"]), body.spm-app-mode:has(.spm-app-shell[data-spm-theme="aero-white"]){ background:#FAFCFF !important; } html:has(.spm-app-shell[data-spm-theme="heritage-gold"]), body.spm-app-mode:has(.spm-app-shell[data-spm-theme="heritage-gold"]){ background:#F8F2E4 !important; } html:has(.spm-app-shell[data-spm-theme="forest-field"]), body.spm-app-mode:has(.spm-app-shell[data-spm-theme="forest-field"]){ background:#F7F3E9 !important; } /* En sombre, les surfaces que frontend.css peint en blanc doivent suivre. */ body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main .spm-card, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main .spm-panel, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main .spm-dashboard-overview-stat, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main .spm-stat, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main .spm-dashboard-module, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-bar, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-loft, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-rail__out{ background:var(--sy-cr2) !important; color:var(--sy-tx) !important; } body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-rail{ color:var(--sy-tx2); } body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main .spm-input, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main select, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main textarea{ background:var(--sy-cr3) !important; color:var(--sy-tx) !important; } body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-bar__title, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .spm-topbar__title, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] h1, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] h2, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] h3{ color:var(--sy-tx) !important; } /* le logo est dessiné en foncé : il lui faut un fond clair, même la nuit */ body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-rail__logo{ background:#F3F6F4; } /* les tableaux de frontend.css rayent en blanc cassé */ body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main table tbody tr, body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main table thead th{ background:transparent !important; color:var(--sy-tx) !important; } body.spm-app-mode .spm-app-shell[data-spm-theme="night-loft"] .sy-main table tbody tr:nth-child(even){ background:rgba(255,255,255,.03) !important; } /* ═══════════════════════════════════════════════════════════════════════════ 18 · LE TÉLÉPHONE « Au pigeonnier, on tient le téléphone d'une main. » (maquette, structure 07) Le rail devient un tiroir, cinq onglets s'installent en bas sous le pouce, le héros devient une carte et les tuiles s'empilent par deux. ┌──────────────────────────────────────────────────────────────────────┐ │ REPLI SANS JAVASCRIPT — tout ce qui dépend du tiroir est scopé │ │ « body.sy-js », classe posée par system.js. Si le script ne se │ │ charge pas, le rail reste simplement empilé au-dessus du contenu : │ │ moins joli, mais AUCUNE entrée de menu n'est perdue. Ne jamais │ │ masquer le rail en dehors de ce scope. │ └──────────────────────────────────────────────────────────────────────┘ ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:900px){ /* — le contenu respire moins large, et laisse la place à la barre basse — */ body.spm-app-mode .sy-main{ padding:14px 12px 96px !important; } body.spm-app-mode .sy-shell{ min-height:auto; } /* la barre de contexte reste sous la main, collée en haut. Ligne 1 : le bouton « Menu » puis le titre de l'écran. Ligne 2 : la colonie — elle passe dessous plutôt que de tout serrer. */ /* ⚠ frontend.css contient : body.spm-app-mode .spm-app-shell .spm-topbar{ display:grid !important } — même !important, mais une spécificité supérieure à « body.spm-app-mode .sy-bar ». En grille, chaque enfant prend sa propre rangée et le bouton s'étire sur toute la largeur. Il faut donc écrire cette règle-ci avec la portée body.spm-app-mode .spm-app-shell (= body.spm-app-mode .spm-app-shell) pour égaler la spécificité ; notre feuille étant chargée après, elle l'emporte. */ body.spm-app-mode .spm-app-shell .sy-bar{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; position:sticky; top:0; z-index:30; margin-bottom:12px !important; border-radius:12px !important; padding:10px 12px !important; gap:10px !important; min-height:0 !important; } body.spm-app-mode .sy-bar__title{ font-size:1.15rem !important; } body.spm-app-mode .sy-burger{ flex:0 0 auto !important; order:-1; } body.spm-app-mode .sy-bar__left{ flex:1 1 auto !important; gap:8px !important; } body.spm-app-mode .sy-bar__right{ flex:1 1 100% !important; margin-left:0 !important; gap:8px !important; } /* Au téléphone la barre passe sur deux lignes : le logo du Studio rétrécit pour ne pas manger la place du sélecteur de colonie. */ body.spm-app-mode .sy-bar__studio img{ height:28px !important; } /* — le héros devient une carte — */ body.spm-app-mode .sy-hero{ padding:18px 16px !important; border-radius:16px !important; grid-template-columns:1fr !important; gap:14px !important; } body.spm-app-mode .sy-hero__title{ font-size:1.6rem !important; } body.spm-app-mode .sy-hero__fig{ font-size:2.6rem !important; } /* — les tuiles s'empilent par deux — */ body.spm-app-mode .sy-tiles, body.spm-app-mode .sy-main .spm-dashboard-overview, body.spm-app-mode .sy-main .spm-dashboard-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } body.spm-app-mode .sy-tile--wide{ grid-column:span 2 !important; } body.spm-app-mode .sy-main .spm-dashboard-overview-stat, body.spm-app-mode .sy-main .spm-stat{ padding:12px 13px !important; } /* les grands chiffres restent grands, mais tiennent dans la largeur */ body.spm-app-mode .sy-main .spm-dashboard-overview-stat strong, body.spm-app-mode .sy-main .spm-stat strong{ font-size:1.6rem !important; letter-spacing:-.04em; } /* — la fiche d'un pigeon est une grille SANS colonnes déclarées — .spm-pigeon-sheet{display:grid} laisse donc une piste « auto », qui se dimensionne sur le contenu le plus large. Le panneau des classements croisés (six colonnes) la portait à 892 px dans une fiche de 324 : tout le reste de la fiche s'en trouvait étiré et coupé par .spm-app-host{overflow:hidden}. minmax(0,1fr) borne la piste à la largeur réelle ; le tableau, lui, défile dans son cadre. */ body.spm-app-mode .spm-pigeon-sheet{ grid-template-columns:minmax(0,1fr); } /* — un tableau ne doit jamais élargir la page : il défile seul — */ body.spm-app-mode .sy-main table{ display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; } body.spm-app-mode .sy-main table td, body.spm-app-mode .sy-main table th{ white-space:nowrap; } /* — la saisie : 16 px minimum, sans quoi iOS zoome à chaque champ — */ body.spm-app-mode .sy-main input, body.spm-app-mode .sy-main select, body.spm-app-mode .sy-main textarea, body.spm-app-mode .sy-main .spm-input{ font-size:16px !important; min-height:46px !important; } body.spm-app-mode .sy-main textarea{ min-height:96px !important; } /* — les rangées de boutons passent à la ligne au lieu de déborder — */ body.spm-app-mode .sy-main .spm-actions, body.spm-app-mode .sy-main .spm-form-actions, body.spm-app-mode .sy-bar__right{ flex-wrap:wrap !important; } body.spm-app-mode .sy-main .spm-btn, body.spm-app-mode .sy-main button{ min-height:44px !important; } } /* ── Le tiroir et la barre d'onglets — seulement si system.js a pris la main ── */ @media (max-width:900px){ /* le rail glisse depuis la gauche */ body.spm-app-mode.sy-js .sy-rail{ position:fixed !important; top:0; left:0; bottom:0; width:min(86vw,330px); height:100dvh; z-index:70; padding:16px 14px 24px !important; overflow-y:auto; overscroll-behavior:contain; border-right:1px solid var(--sy-ln) !important; background:var(--sy-cr) !important; transform:translateX(-102%); transition:transform .24s ease; box-shadow:0 0 44px rgba(0,0,0,.28); } body.spm-app-mode.sy-js.sy-drawer .sy-rail{ transform:translateX(0); } /* dans le tiroir, le logo n'a pas besoin de 150 px */ body.spm-app-mode.sy-js .sy-rail__logo{ width:64px; height:64px; padding:5px; } body.spm-app-mode.sy-js .sy-rail__brand{ padding-bottom:10px; } /* le voile, posé par le script */ body.spm-app-mode .sy-veil{ position:fixed; inset:0; z-index:65; border:0; padding:0; background:rgba(10,14,12,.5); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .24s ease; } body.spm-app-mode.sy-drawer .sy-veil{ opacity:1; pointer-events:auto; } /* le bouton « menu », dans la barre de contexte */ body.spm-app-mode .sy-burger{ display:inline-flex !important; align-items:center; justify-content:center; gap:7px; min-height:44px; min-width:44px; padding:0 12px; border:1px solid var(--sy-ln); border-radius:10px; background:var(--sy-cr2); color:var(--sy-tx); font-size:.9rem; font-weight:650; cursor:pointer; } body.spm-app-mode .sy-burger svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; } /* — les cinq onglets, sous le pouce — */ body.spm-app-mode .sy-tabbar{ display:grid !important; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--sy-cr2); border-top:1px solid var(--sy-ln); padding:4px 0 calc(4px + env(safe-area-inset-bottom,0px)); box-shadow:0 -6px 22px rgba(10,14,12,.10); } body.spm-app-mode .sy-tabbar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:52px; padding:4px 2px; text-decoration:none; color:var(--sy-tx2); font-size:.68rem; font-weight:600; line-height:1.15; text-align:center; border-radius:10px; } body.spm-app-mode .sy-tabbar a svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } body.spm-app-mode .sy-tabbar a.is-on{ color:var(--sy-b1); font-weight:750; } body.spm-app-mode .sy-tabbar a:focus-visible{ outline:3px solid var(--sy-a1); outline-offset:-3px; } } /* Au-delà de 900 px, rien de tout cela n'existe : le rail reprend sa place. */ @media (min-width:901px){ body.spm-app-mode .sy-tabbar, body.spm-app-mode .sy-veil, body.spm-app-mode .sy-burger{ display:none !important; } } /* ══════════════════════════════════════════════════════════════════════ 🔴 iOS — LE VERRE DÉPOLI FLOUTAIT TOUT L'ÉCRAN, LE TIROIR COMPRIS ───────────────────────────────────────────────────────────────────── Signalé le 27/08/2026, capture à l'appui : sur iPhone, ouvrir le menu rendait la page ET le menu illisibles, au point de ne plus pouvoir s'en servir. La cause n'est pas une erreur d'empilement : c'est `backdrop-filter`. Sur iOS, un élément `position:fixed` couvrant tout l'écran et portant un `backdrop-filter` fait basculer WebKit sur une couche de composition unique — et le flou s'applique alors à TOUT ce que contient cette couche, y compris ce qui est peint AU-DESSUS. Le tiroir avait beau être à `z-index:70` contre 65 pour le voile, il était flouté avec le reste. Trois éléments portaient ce verre dépoli : le voile (2 px), la carte de marque en tête du tiroir (6 px) et la barre du haut (8 px). Sur téléphone, aucun des trois n'apporte quoi que ce soit — on les rend nets, et le voile compense par un fond un peu plus franc. Sur ordinateur, rien ne change : l'effet n'y a jamais posé de problème. ══════════════════════════════════════════════════════════════════════ */ @media (max-width:900px){ body.spm-app-mode .sy-veil, body.spm-app-mode .spm-brand-card, body.spm-app-mode .spm-topbar, body.spm-app-mode .sy-rail .spm-brand-card{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } /* le voile assombrit franchement, puisqu'il ne floute plus */ body.spm-app-mode .sy-veil{ background:rgba(10,14,12,.58) !important; } /* et le tiroir passe devant lui en toute circonstance */ body.spm-app-mode.sy-js .sy-rail{ z-index:80 !important; } } /* ══════════════════════════════════════════════════════════════════════ 🔴 iPhone (28/08) — LE VOILE AVALAIT LES TAPS DESTINÉS AU MENU ───────────────────────────────────────────────────────────────────── Le flou réglé, le tiroir restait inutilisable : lisible, mais sourd. Le voile était posé sur tandis que le rail vit dans la page ; ils ne partageaient donc pas le même contexte d'empilement, et comparer leurs z-index n'avait aucun sens. Le voile passait devant, et chaque appui sur « Pigeonniers » ne faisait que refermer le tiroir. Deux verrous, pour ne plus jamais en dépendre : • le script pose maintenant le voile JUSTE AVANT le rail, même parent ; • et ici, le voile devient TRANSPARENT AUX CLICS. Il ne peut plus rien intercepter, quoi qu'il arrive à l'empilement. La fermeture au doigt hors du menu est reprise par le document, dans system.js. ══════════════════════════════════════════════════════════════════════ */ body.spm-app-mode .sy-veil, body.spm-app-mode.sy-drawer .sy-veil{ pointer-events:none !important; } /* ══════════════════════════════════════════════════════════════════════ ⭐ 01/09 — LA PAGE D'ENTRAÎNEMENT, REFAITE PAR ÉTAPES « Il faut revoir de A à Z la page d'entraînement pour que ce soit plus pratique, plus claire et fonctionnel. » — Jean-Sébastien Quatre étapes numérotées, dans l'ordre où on les vit : qui part, où et quand, le lâcher, les arrivées. Les boutons du terrain sont dimensionnés pour un POUCE, pas pour une souris : on s'en sert dehors, une main tenant le panier. ══════════════════════════════════════════════════════════════════════ */ /* ⭐ 01/09 (2e passe) — « Ça serait bien pour la version PC d'exploiter toute la page, et pour la version mobile comme ça ce n'est pas encore très clair. » Sur GRAND ÉCRAN : deux colonnes. À gauche la préparation (qui part, où et quand), à droite le terrain (le lâcher, les arrivées) — on voit d'un coup d'œil ce qu'on prépare ET ce qui se passe, sans faire défiler. Sur TÉLÉPHONE : une seule colonne, dans l'ordre du parcours. */ .spm-training{width:100%;max-width:none} .spm-training-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start; justify-content:space-between;margin-bottom:18px;padding-bottom:14px; border-bottom:1px solid var(--sy-line,#e6e8ec)} .spm-training-head h2{margin:0 0 4px} .spm-training-head p{margin:0} .spm-training-head__actions{display:flex;gap:8px;flex-wrap:wrap} .spm-group-chip--new{border-style:dashed;border-color:var(--sy-accent,#1f6feb); color:var(--sy-accent,#1f6feb);font-weight:600} @media (min-width:1100px){ .spm-training-steps{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .spm-training-steps .spm-step{margin-bottom:0} .spm-training-terrain{display:grid;grid-template-columns:1fr 1fr;gap:16px; align-items:start;margin-top:16px} .spm-training-terrain .spm-step{margin-bottom:0} } @media (min-width:1500px){ /* très large : la préparation à gauche, le terrain à droite, côte à côte */ .spm-training-steps{grid-template-columns:1fr 1fr} } .spm-step{background:var(--sy-surface,#fff);border:1px solid var(--sy-line,#e6e8ec); border-radius:14px;padding:18px;margin-bottom:16px} .spm-step__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px} .spm-step__head h3{margin:0 0 2px} .spm-step__head p{margin:0} .spm-step__num{flex:0 0 32px;width:32px;height:32px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--sy-accent,#1f6feb);color:#fff;font-weight:700} /* les groupes et les points favoris : des pastilles cliquables */ .spm-training-groups,.spm-training-points{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px} .spm-group-chip,.spm-point-chip{display:inline-flex;align-items:center;gap:8px; padding:9px 14px;border:1px solid var(--sy-line,#e6e8ec);border-radius:999px; background:var(--sy-surface,#fff);cursor:pointer;font-size:14px} .spm-group-chip:hover,.spm-point-chip:hover{border-color:var(--sy-accent,#1f6feb)} .spm-group-chip span{background:var(--sy-accent,#1f6feb);color:#fff;border-radius:999px; padding:1px 8px;font-size:12px;font-weight:700} .spm-group-chip--ghost{border-style:dashed;color:var(--sy-muted,#6b7280)} .spm-point-chip.is-active{border-color:var(--sy-accent,#1f6feb); box-shadow:inset 0 0 0 1px var(--sy-accent,#1f6feb)} /* ── le terrain : gros, lisible, utilisable au pouce ── */ .spm-step--terrain{border-width:2px} .spm-btn-start{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:4px;width:100%;min-height:120px;border:0;border-radius:16px;cursor:pointer; background:#188a4a;color:#fff;font-size:34px;font-weight:800;letter-spacing:2px} .spm-btn-start small{font-size:14px;font-weight:500;letter-spacing:0;opacity:.9} .spm-btn-start:active{background:#146b3a} .spm-chrono{text-align:center;padding:8px 0} .spm-chrono__time{font-size:44px;font-weight:800;font-variant-numeric:tabular-nums; letter-spacing:2px} /* ── les arrivées : une ligne par pigeon, un seul geste ── */ .spm-returns{display:flex;flex-direction:column;gap:8px} .spm-return{display:flex;align-items:center;gap:12px;padding:10px 12px; border:1px solid var(--sy-line,#e6e8ec);border-radius:12px} .spm-return--done{background:rgba(24,138,74,.07);border-color:rgba(24,138,74,.35)} .spm-return__ring{font-weight:700;font-variant-numeric:tabular-nums;flex:1} .spm-return__time{font-variant-numeric:tabular-nums} .spm-return__speed{color:var(--sy-muted,#6b7280);font-size:13px} .spm-return .spm-btn{min-height:40px;padding:0 18px} .spm-alert--warn{background:#fff8e5;border:1px solid #f0c96b;border-radius:12px; padding:12px 14px;margin-bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* Au téléphone, le terrain passe en pleine largeur et les cibles grandissent. */ @media (max-width:640px){ .spm-step{padding:14px;border-radius:12px} .spm-btn-start{min-height:140px;font-size:40px} .spm-chrono__time{font-size:38px} .spm-return{flex-wrap:wrap} .spm-return .spm-btn{min-height:44px;flex:1} .spm-group-chip,.spm-point-chip{padding:11px 16px} } /* ══════════════════════════════════════════════════════════════════════ ⭐ 01/09 — « Les cases sont beaucoup trop grandes, il faut les réduire à la moitié de la page et les mettre l'une à côté de l'autre. » Les quatre chiffres tenaient chacun une ligne pleine. Ils passent en grille serrée — quatre de front sur PC, deux au téléphone — et les conseils reviennent en cartes, deux par ligne. ══════════════════════════════════════════════════════════════════════ */ .spm-training .spm-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .spm-training .spm-kpi{padding:10px 12px;border:1px solid var(--sy-line,#e6e8ec); border-radius:10px;display:flex;flex-direction:column;gap:2px;min-height:0} .spm-training .spm-kpi span{font-size:12px;color:var(--sy-muted,#6b7280);line-height:1.2} .spm-training .spm-kpi strong{font-size:19px;line-height:1.1} .spm-coach{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .spm-coach__card{border:1px solid var(--sy-line,#e6e8ec);border-left-width:3px; border-radius:10px;padding:10px 12px} .spm-coach__card h4{margin:4px 0 4px;font-size:14px} .spm-coach__card p{margin:0 0 6px;font-size:13px;line-height:1.45} .spm-coach__card a{font-size:12px} .spm-coach__badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.4px;color:var(--sy-muted,#6b7280)} .spm-coach__card--good{border-left-color:#188a4a} .spm-coach__card--warn{border-left-color:#d98b00} .spm-coach__card--info{border-left-color:#1f6feb} @media (max-width:820px){ .spm-training .spm-kpi-grid{grid-template-columns:repeat(2,1fr)} .spm-coach{grid-template-columns:1fr} } /* ⭐ 01/09 — la météo du point de lâcher, et le verdict sur le vent. */ .spm-meteo{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;margin-bottom:8px; border:1px solid var(--sy-line,#e6e8ec);border-radius:10px;font-size:13px;line-height:1.5} .spm-meteo__badge{flex:0 0 auto;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px; text-transform:uppercase;letter-spacing:.3px;white-space:nowrap} .spm-meteo__badge--bon{background:rgba(24,138,74,.14);color:#146b3a} .spm-meteo__badge--dur{background:rgba(192,57,43,.12);color:#a5342a} .spm-meteo__badge--neutre{background:rgba(107,114,128,.12);color:#5b6470} /* ⭐ 01/09 — la pastille de groupe dit son état : dans la séance, ou pas. */ .spm-group-chip{position:relative;transition:background .15s,border-color .15s} .spm-group-chip__mark{width:16px;height:16px;border:1.5px solid var(--sy-line,#c9cdd4); border-radius:5px;flex:0 0 16px} .spm-group-chip.is-in{background:rgba(24,138,74,.10);border-color:#188a4a} .spm-group-chip.is-in .spm-group-chip__mark{background:#188a4a;border-color:#188a4a; position:relative} .spm-group-chip.is-in .spm-group-chip__mark::after{content:'';position:absolute; left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0; transform:rotate(45deg)} .spm-group-chip__n{background:var(--sy-line,#e6e8ec);color:var(--sy-muted,#5b6470); border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700} .spm-group-chip.is-in .spm-group-chip__n{background:#188a4a;color:#fff} .spm-recap{margin:0 0 8px;font-weight:600;font-size:13px;color:#146b3a} .spm-picker-vide{color:var(--sy-muted,#6b7280);font-size:13px;line-height:1.5} /* ⭐ 01/09 — le bloc du bas : listing à gauche, carte à droite, conseils dessous. */ .spm-bas__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:12px} .spm-bas .spm-coach{margin-top:14px} .spm-step--resume{border-left:3px solid #188a4a} .spm-return__input{max-width:130px;font-variant-numeric:tabular-nums} @media (max-width:1000px){ .spm-bas__grid{grid-template-columns:1fr} } /* ⭐ 01/09 — « La carte doit être aussi haute que large. » Un carré exact, quelle que soit la largeur de la colonne. Et la courbe de progression cesse de prendre toute la page : elle tient dans sa carte. */ /* 🔴 frontend.css impose `height:420px` à cette carte, à spécificité égale : mon `aspect-ratio` seul ne pouvait pas gagner, et la carte restait étroite et haute. On remonte donc la spécificité (`.spm-bas .spm-carte-carree`) ET l'on annule explicitement la hauteur — un `aspect-ratio` ne s'applique jamais tant qu'une hauteur fixe est posée. */ .spm-bas .spm-carte-carree{height:auto !important;min-height:0;width:100%;aspect-ratio:1/1} .spm-bas .spm-carte-carree .leaflet-container{height:100%;width:100%} /* 🔴 01/09 — un `max-height` sur un SVG BRIDE SA LARGEUR. Le graphique a un viewBox 420×220 : en plafonnant sa hauteur à 260 px, on lui interdisait de dépasser ~500 px de large, et il restait un timbre-poste centré au milieu d'une colonne de 800 px. On ne contraint plus que la largeur ; la hauteur suit le rapport, comme pour une image. */ .spm-bas .spm-training-progress-card{display:block;width:100%} @supports not (aspect-ratio: 1 / 1){ .spm-bas .spm-carte-carree{height:0 !important;padding-bottom:100%} } @media (max-width:1000px){ .spm-bas .spm-carte-carree{aspect-ratio:4/3} } /* ⭐ 01/09 — fin d'entraînement, et pigeon déclaré non rentré. */ .spm-chrono--fini .spm-chrono__time{color:#146b3a} .spm-fin{margin:2px 0 0;font-weight:700;color:#146b3a;letter-spacing:.5px;text-transform:uppercase;font-size:13px} .spm-return--missing{background:rgba(192,57,43,.06);border-color:rgba(192,57,43,.3);opacity:.85} .spm-return--missing .spm-return__ring{text-decoration:line-through;opacity:.7} .spm-return__missing{display:inline-flex;align-items:center;gap:6px;font-size:12px; color:var(--sy-muted,#6b7280);white-space:nowrap;cursor:pointer} .spm-return__missing input{width:16px;height:16px} /* ⭐ 01/09 — « Je n'ai pas la possibilité de localiser ma colonie. » Le bloc EXISTAIT, mais après la liste des pays, le profil sanitaire, l'e-mail, le téléphone et la description : personne ne descend jusque-là. Il est remonté juste après le nom, et encadré — c'est le point d'arrivée de tous les pigeons, toutes les distances en dépendent. */ .spm-home-bloc{border-top:2px solid var(--sy-accent,#1f6feb);padding-top:12px;margin-top:6px} .spm-home-bloc strong{font-size:15px} /* ⭐ 01/09 — la courbe prend toute la largeur de la colonne de gauche. */ .spm-bas .spm-courbe{width:100%;max-height:none;overflow:visible} .spm-bas .spm-courbe svg{width:100%;height:auto;max-height:none;display:block} /* ══════════════════════════════════════════════════════════════════════ 🔴 01/09 — LES EN-TÊTES DU CLASSEMENT OFFICIEL ÉTAIENT ILLISIBLES. « Dans le tableau, le dessus des colonnes est illisible : écriture sombre sur bleu foncé. » — Jean-Sébastien `body.spm-app-mode .spm-app-shell table th` impose `color:var(--sy-t3) !important` — un gris discret — à TOUS les en-têtes de l'application. Le tableau RFCB, lui, a un fond bleu foncé et déclarait bien `color:#fff` : le `!important` du Manager l'écrasait. 👉 On rend le blanc au seul tableau qui a un fond sombre. ⚠ Un `!important` posé large finit toujours par casser un contenu qu'il n'avait pas prévu. ══════════════════════════════════════════════════════════════════════ */ body.spm-app-mode #sprfcb th, body.spm-app-mode .spm-app-shell #sprfcb th, body.spm-app-mode .spm-app-shell #sprfcb table th, #sprfcb thead th{ color:#fff !important; } /* les liens et petites mentions de l'en-tête suivent */ body.spm-app-mode #sprfcb th a, body.spm-app-mode #sprfcb th small{ color:#fff !important; opacity:.92 } /* ═══ SANTÉ — le formulaire unique à trois onglets (17/09/2026) ═══════════ Trois formulaires jumeaux, toujours dépliés, faisaient de cet écran un rouleau de 2 Mo. Un seul vit à la fois ; les onglets tiennent au pouce (44 px) et passent en trois colonnes sur un téléphone. */ .spm-health-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 16px} .spm-health-tab{ appearance:none;border:1px solid var(--spm-border);background:var(--spm-card); color:var(--spm-text);padding:11px 18px;border-radius:999px;font-weight:700; cursor:pointer;min-height:44px;line-height:1.1; } .spm-health-tab:hover{border-color:var(--spm-blue)} .spm-health-tab.is-active{background:var(--spm-blue);border-color:var(--spm-blue);color:#fff} .spm-health-tab:focus-visible{outline:3px solid var(--spm-gold);outline-offset:2px} .spm-health-pane[hidden]{display:none !important} .spm-health-recap{margin:6px 0 0;font-weight:700;color:var(--spm-text)} .spm-health-recap--vide{font-weight:500;color:var(--spm-muted)} .spm-health-recap--gros{color:var(--spm-danger)} .spm-picker-vide{color:var(--spm-muted)} @media (max-width:560px){ .spm-health-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .spm-health-tab{padding:11px 6px;font-size:.92rem} .spm-training-multi-picker__toolbar .spm-input{flex:1 1 100%} } /* le choix du profil sanitaire : une ligne, un bouton (18/09/2026) */ .spm-health-profile-pick{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:8px} .spm-health-profile-pick label{display:block;width:100%;font-weight:700;margin-bottom:4px} .spm-health-profile-pick .spm-input{flex:1 1 320px} @media (max-width:560px){ .spm-health-profile-pick .spm-btn{width:100%} }