…
… formulaire avec .grille.k2 / .k3 …
On homogénéise ici sans toucher aux gabarits : titres à --fs-h3, boîte
sans marge latérale sur mobile, grilles internes en une colonne. */
[id^="modal-"] > div > h3{font-family:var(--f-titre);font-weight:600;font-size:var(--fs-h3);line-height:1.25}
@media(max-width:640px){
[id^="modal-"] > div{margin:12px auto !important;padding:18px !important;
max-width:calc(100vw - 24px) !important;max-height:calc(100vh - 24px) !important;overflow:auto}
[id^="modal-"] .grille.k4,[id^="modal-"] .grille.k3,[id^="modal-"] .grille.k2{grid-template-columns:1fr}
}
/* ============ RESPONSIVE - dashboard bailleur ============
Cascade des breakpoints :
• 1080 : le layout 2-colonnes se replie (dashboard/grid2/fin)
• 820 : la sidebar disparaît, la recherche aussi (topbar compacte)
• 640 : les libellés secondaires se masquent (topbar, actions)
• 480 : les cartes deviennent monocolonnes, les CTA à pleine largeur
• 380 : réduction typographique de sûreté sur les très petits mobiles
*/
@media(max-width:1080px){
.kpis{grid-template-columns:repeat(2,1fr)}
.fin{grid-template-columns:1fr}
.grid2{grid-template-columns:1fr}
.grille.k4,.grille.k3{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
.app{grid-template-columns:1fr}
/* La sidebar devient un tiroir hors-écran, ouvert par le bouton hamburger. */
.side{position:fixed;top:0;left:0;bottom:0;height:100dvh;width:270px;max-width:82vw;z-index:60;
transform:translateX(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
box-shadow:0 24px 60px rgba(0,0,0,.45);will-change:transform}
.app.nav-open .side{transform:none}
.search{display:none}
.grille.k4,.grille.k3,.grille.k2{grid-template-columns:1fr}
/* Colonnes masquées via hide-on-mobile : en layout auto, les colonnes
restantes se répartissaient l'espace libéré de façon inégale (grands
vides) et débordaient quand même. Layout fixed = colonnes visibles
à largeur égale, texte qui wrap au lieu de pousser la table hors cadre. */
table.liste{table-layout:fixed;width:100%}
table.liste th,table.liste td{white-space:normal;word-break:break-word;overflow-wrap:break-word}
}
@media(max-width:640px){
/* Topbar compacte : org à gauche, boutons à droite, gap serré. */
.top{gap:8px}
.org .r{display:none} /* rôle + email masqués */
/* KPI et cartes devise : garantie de lisibilité, pas de collage. */
.kpi{padding:14px 14px 12px}
.devcard{padding:14px 16px}
.devrow{gap:10px}
/* Panneaux et alertes : cellules plus aérées pour le doigt. */
.decl,.alert{padding:12px 14px;gap:10px}
.panel .ph{padding:12px 14px}
/* Grille des stats-row du dashboard : chaque carte occupe toute la largeur. */
#stats-row #kpis > .kpi,#stats-row #fin > .fin-mini{flex-basis:100%}
/* Tableaux : padding/police resserrés pour tenir dans le container sans déborder. */
table.liste thead th,table.liste tbody td,table.liste tfoot td{padding:8px 8px;font-size:12px}
}
@media(max-width:480px){
/* Actions du dashboard : boutons empilés sur toute la largeur. */
.pagehead .actions{width:100%}
.pagehead .actions,.pagehead .actions {flex:1 1 100%;justify-content:center}
/* Cartes de paiement à confirmer : la ligne se replie proprement. */
.decl{flex-wrap:wrap}
.decl .info{flex-basis:calc(100% - 48px - 10px)} /* .who = 38 + gap */
.decl .amt{margin-left:auto}
.decl .cta{flex-basis:100%;justify-content:flex-end}
/* Bouton icobtn plus compact pour caser plus d'actions. */
.icobtn{width:34px;height:34px;font-size:15px}
}
@media(max-width:380px){
:root{--fs-corps:13px;--fs-corps-lg:14px}
.decl .amt{font-size:var(--fs-corps-lg)}
}
/* ═══════════════════════════════════════════════════════════════════════
LOCAGEX APP - REFONTE PRO (v2) · thème clair / sombre partagé + composants
───────────────────────────────────────────────────────────────────────
Le shell bailleur (.app) reprend le thème de la landing :
clair par défaut, sombre via [data-theme="dark"] sur
(même clé localStorage « locagex-theme »). Tous les overrides sombres sont
scopés sous `.app` pour ne jamais impacter la page publique (.home).
═══════════════════════════════════════════════════════════════════════ */
/* ───── Compléments dark mode (tokens non couverts par palette K) ───── */
[data-theme="dark"] .app{
--surface-2:var(--c-navy-deep);
--ombre:0 1px 2px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.42);
}
[data-theme="dark"] body:not(.home){background:var(--c-navy)}
/* Puits clair par défaut (utilisé par les chips/inset) - token dispo partout. */
:root{--surface-2:var(--c-mist)}
/* ════════════ BOUTONS - SYSTÈME UNIQUE = .btn-lux ════════════
Toute l'app métier (app/, locataire/, technicien/) utilise UNE seule famille
de boutons : .btn-lux + variantes (--primary teal, --white, --ghost, --green,
--red, --navy, --danger) et tailles (--sm/--lg/--icon). Définition : voir le
bloc « BOUTONS PREMIUM » plus bas. Les anciennes classes (.btn, .btn-or,
.btn-ghost, .cpt-btn, .btn-sm…) ont été retirées ; ne pas les réintroduire.
(Le site public .home garde son propre .btn dans css/locagex.css.) */
/* ════════════ SÉLECTEURS SEGMENTÉS - SOURCE UNIQUE ════════════
UN seul composant pour : sélection de période, toggle de devise, mini-onglets.
Référence : etat-comptable (.cpt-seg). Noms hérités aliasés ici (.per-chips /
.per-chip d'agence, .seg du tableau de bord) → rendu identique partout. */
.seg,.cpt-seg,.per-chips,.pt-toggle{
display:inline-flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--c-line);border-radius:10px;background:var(--app-card);gap:0}
.seg button,.cpt-seg button,.per-chip,.pt-opt{
border:0;border-radius:0;background:transparent;padding:7px 13px;
font-size:12.5px;font-weight:500;color:var(--app-ink-muted);cursor:pointer;white-space:nowrap;
display:inline-flex;align-items:center;gap:6px;
transition:background .15s ease,color .15s ease}
.seg button:not(.on):hover,.cpt-seg button:not(.on):hover,.per-chip:not(.on):hover,.pt-opt:not(.on):hover{
color:var(--app-ink);background:var(--app-card-hover)}
.seg button.on,.cpt-seg button.on,.per-chip.on,.pt-opt.on{
background:linear-gradient(135deg,var(--az-teal),var(--az-teal-2));color:#fff;font-weight:600;
box-shadow:0 8px 18px -12px var(--az-teal-glow)}
.seg button:focus-visible,.cpt-seg button:focus-visible,.per-chip:focus-visible,.pt-opt:focus-visible{
outline:2px solid var(--az-teal);outline-offset:-3px}
[data-theme="dark"] .seg button.on,[data-theme="dark"] .cpt-seg button.on,[data-theme="dark"] .per-chip.on,[data-theme="dark"] .pt-opt.on{
background:linear-gradient(135deg,var(--az-teal),var(--az-teal-2))}
/* ── Onglets « dossier » (mini) - source unique (.cpt-tab), spec etat-comptable ── */
.cpt-tabs,.fc-tabs{display:flex;gap:0;padding:6px 6px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--c-line);border-radius:14px 14px 12px 12px;
background:linear-gradient(180deg,#f7f8fa,#e4e6eb);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(12,29,50,.10),0 12px 26px -20px rgba(12,29,50,.5)}
.cpt-tab,.fc-tab{position:relative;flex:0 0 auto;border:0;background:transparent;cursor:pointer;white-space:nowrap;
padding:12px 22px 14px;font-family:var(--f-titre);font-size:14px;color:#4a4f5a;border-radius:10px 10px 0 0;
display:inline-flex;align-items:center;gap:7px;
transition:color .15s ease,background .15s ease}
.cpt-tab+.cpt-tab::before,.fc-tab+.fc-tab::before{content:"";position:absolute;left:0;top:13px;bottom:11px;width:1px;background:rgba(12,29,50,.12)}
.cpt-tab:hover,.fc-tab:hover{color:var(--app-ink);background:rgba(255,255,255,.5)}
.cpt-tab.on,.fc-tab.on{color:#fff;font-weight:600;
background:linear-gradient(180deg,var(--az-teal),var(--az-teal-2));
box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 -1px 0 rgba(0,0,0,.10),0 7px 16px -9px var(--az-teal-glow)}
.cpt-tab.on::before,.cpt-tab.on+.cpt-tab::before,.fc-tab.on::before,.fc-tab.on+.fc-tab::before{display:none}
.cpt-tab:focus-visible,.fc-tab:focus-visible{outline:2px solid var(--az-teal);outline-offset:-3px}
[data-theme="dark"] .cpt-tabs,[data-theme="dark"] .fc-tabs{border-color:var(--c-line);
background:linear-gradient(180deg,var(--app-card-hover),var(--app-card));
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 26px rgba(0,0,0,.35)}
[data-theme="dark"] .cpt-tab,[data-theme="dark"] .fc-tab{color:var(--app-ink-muted)}
[data-theme="dark"] .cpt-tab:hover,[data-theme="dark"] .fc-tab:hover{background:rgba(255,255,255,.04)}
[data-theme="dark"] .cpt-tab+.cpt-tab::before,[data-theme="dark"] .fc-tab+.fc-tab::before{background:rgba(255,255,255,.10)}
[data-theme="dark"] .cpt-tab.on,[data-theme="dark"] .fc-tab.on{color:#fff}
/* Teintes d'onglets inactifs (alternance) - partagées. */
.ong1{background:linear-gradient(90deg,var(--az-teal-glow),var(--az-teal-soft))}
.ong2{background:linear-gradient(180deg,var(--az-teal-soft),var(--az-teal-glow))}
/* Focus accessible - anneau doré */
.menu-btn:focus-visible,.menu-item:focus-visible,.icobtn:focus-visible{
outline:none;box-shadow:0 0 0 3px rgba(180,132,43,.35)}
/* Topbar : icobtn + search harmonisés au thème */
.icobtn{border-radius:8px;transition:border-color .16s,color .16s,background .16s,transform .16s}
.icobtn:hover{border-color:var(--c-gold-deep);color:var(--c-gold-deep);transform:translateY(-1px)}
/* Bouton de thème : lune en clair, soleil en sombre */
#theme-btn .i-sun{display:none}
[data-theme="dark"] #theme-btn .i-sun{display:block}
[data-theme="dark"] #theme-btn .i-moon{display:none}
.search{border-radius:8px}
.search:focus-within{border-color:var(--c-gold-deep);box-shadow:0 0 0 3px rgba(180,132,43,.12)}
/* ════════════ MENU D'ACTIONS DÉROULANT (regroupe les actions par ligne) ════
Markup :
Comportement dans js/ui.js (ouverture/fermeture, clavier, clic extérieur). */
.menu{position:relative;display:inline-block}
.menu-btn .menu-caret{width:13px;height:13px;transition:transform .18s}
.menu.open .menu-btn .menu-caret{transform:rotate(180deg)}
.menu-list{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:196px;
background:var(--c-white);border:1px solid var(--c-line);border-radius:10px;padding:6px;
box-shadow:0 12px 34px rgba(2,48,71,.16),0 2px 8px rgba(2,48,71,.08);
opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;
transition:opacity .16s,transform .16s}
[data-theme="dark"] .app .menu-list{box-shadow:0 16px 40px rgba(0,0,0,.5)}
.menu.open .menu-list{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.menu-list.left{right:auto;left:0;transform-origin:top left}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
font:inherit;font-size:13.5px;font-weight:500;color:var(--c-navy);background:transparent;
border:0;border-radius:7px;padding:9px 11px;cursor:pointer;white-space:nowrap;
transition:background .12s,color .12s}
.menu-item .mi-ic{width:17px;text-align:center;opacity:.85;flex:none;font-size:14px}
.menu-item:hover,.menu-item:focus-visible{background:var(--c-cream);color:var(--c-navy);outline:none}
[data-theme="dark"] .app .menu-item:hover,[data-theme="dark"] .app .menu-item:focus-visible{
background:var(--surface-2)}
.menu-item.danger{color:var(--c-critique)}
.menu-item.danger:hover{background:rgba(192,57,43,.10);color:var(--c-critique)}
.menu-item.primary{color:var(--c-gold-deep);font-weight:600}
[data-theme="dark"] .app .menu-item.primary{color:var(--c-gold)}
.menu-item:disabled{opacity:.5;cursor:not-allowed}
.menu-sep{height:1px;background:var(--c-line);margin:5px 4px}
.menu-label{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--c-slate);
font-weight:700;padding:8px 11px 4px}
/* Bouton d'actions compact pour les tableaux (patron unique baux, pannes…).
Kebab vertical « ⋮ » 34×34, hover doré. Le menu s'ouvre vers le haut
pour ne pas se faire tronquer en bas de tableau. */
.tbl-menu-btn{width:34px;height:34px;padding:0!important;display:inline-grid;place-items:center;
border:1px solid var(--c-line-soft);border-radius:9px;background:transparent;color:var(--c-slate);
font:700 21px/1 var(--f-corps);letter-spacing:1px;cursor:pointer;
transition:background .16s,color .16s,border-color .16s}
.tbl-menu-btn:hover,.menu.open .tbl-menu-btn{background:var(--c-gold-wash);
border-color:rgba(180,132,43,.4);color:var(--c-gold-deep)}
.tbl-menu-btn .menu-caret{display:none}
/* Ouverture VERS LE HAUT en tableau : évite la troncature en bas de liste. */
.menu:has(> .tbl-menu-btn){z-index:1}
.menu.open:has(> .tbl-menu-btn){z-index:1000}
.menu:has(> .tbl-menu-btn) .menu-list{top:auto;bottom:calc(100% + 7px);
z-index:1001;transform-origin:bottom right}
.menu:has(> .tbl-menu-btn) .menu-list.left{transform-origin:bottom left}
/* Le conteneur défilant du tableau ET la table elle-même doivent laisser
le menu déborder (le menu s'ouvre au-dessus de la ligne). */
.table-scroll:has(.tbl-menu-btn){overflow:visible!important}
.table-scroll:has(.tbl-menu-btn) table,
.table-scroll:has(.tbl-menu-btn) tbody,
.table-scroll:has(.tbl-menu-btn) tr,
.table-scroll:has(.tbl-menu-btn) td{overflow:visible!important}
table.liste:has(.tbl-menu-btn){overflow:visible!important}
/* ════════════ OVERRIDES SOMBRES : éléments à fond clair codé en dur ════════ */
[data-theme="dark"] .app{color:var(--app-ink)}
[data-theme="dark"] .app a{color:var(--c-gold)}
[data-theme="dark"] .app .panel .ph a{color:var(--c-gold)}
/* Tables */
[data-theme="dark"] .app table.liste th{background:#1e2a3a;color:var(--app-ink-muted)}
[data-theme="dark"] .app table.liste tbody tr td{background:var(--c-white)}
[data-theme="dark"] .app table.liste tbody tr:hover td{background:rgba(230,184,76,.07)}
[data-theme="dark"] .app .table-scroll::-webkit-scrollbar-thumb{background:#0A4D68}
[data-theme="dark"] .app .table-scroll::-webkit-scrollbar-thumb:hover{background:var(--c-gold-deep)}
/* Formulaires */
[data-theme="dark"] .app .champ input,[data-theme="dark"] .app .champ select,
[data-theme="dark"] .app .champ textarea,[data-theme="dark"] .app .pieces-ed input,
[data-theme="dark"] .app .pieces-ed select{background:#221a17;border-color:var(--c-line);color:var(--app-ink)}
[data-theme="dark"] .app .champ input::placeholder,
[data-theme="dark"] .app .champ textarea::placeholder{color:#5f67888d}
[data-theme="dark"] .app select option{background:#3a2d28;color:var(--app-ink)}
/* KPI : la puce d'icône devient un puits sombre lisible sur la carte */
[data-theme="dark"] .app .kpi .lab .ic{background:var(--surface-2)}
[data-theme="dark"] .app .kpi.warn .lab .ic{background:rgba(192,57,43,.22);color:#FCA5A5}
[data-theme="dark"] .app .kpi.warn .val{color:#FCA5A5}
[data-theme="dark"] .app .panel .ph .cnt{background:var(--surface-2);color:var(--app-ink-muted)}
/* Badges (pastilles de statut) - variantes sombres */
[data-theme="dark"] .app .badge.ok,[data-theme="dark"] .app .badge-pill.ok{background:rgba(15,157,88,.18);color:#6EE7B7}
[data-theme="dark"] .app .badge.warn,[data-theme="dark"] .app .badge-pill.warn{background:rgba(166,101,14,.22);color:#e9c583}
[data-theme="dark"] .app .badge.crit,[data-theme="dark"] .app .badge-pill.crit{background:rgba(192,57,43,.22);color:#FCA5A5}
[data-theme="dark"] .app .badge.neutre,[data-theme="dark"] .app .badge-pill.neutre{background:rgba(255,255,255,.07);color:var(--app-ink-muted)}
/* Encarts d'alerte */
[data-theme="dark"] .app .alerte-box.err{background:rgba(192,57,43,.16);color:#FCA5A5}
[data-theme="dark"] .app .alerte-box.info{background:rgba(143,160,216,.14);color:#aeb9e6}
[data-theme="dark"] .app .alert.r .ic{background:rgba(192,57,43,.22);color:#FCA5A5}
[data-theme="dark"] .app .alert.a .ic{background:rgba(166,101,14,.22);color:#e9c583}
[data-theme="dark"] .app a.alert.clickable:hover{background:rgba(255,255,255,.03)}
/* Mini-boutons (confirmer/contester) */
[data-theme="dark"] .app .mini.no{background:var(--c-white);border-color:var(--c-line);color:var(--app-ink-muted)}
/* Chips pays / devise */
[data-theme="dark"] .app .chip{background:var(--c-white);border-color:var(--c-line);color:var(--app-ink-muted)}
[data-theme="dark"] .app .chip.on{background:var(--c-gold-deep);border-color:var(--c-gold-deep);color:#241b06}
/* Calendrier partagé - surfaces sombres */
[data-theme="dark"] .app .cal2-jour{background:var(--surface-2);color:var(--az-white)}
[data-theme="dark"] .app .cal2-num{color:var(--az-white)}
[data-theme="dark"] .app .cal2-jour.aujourdhui .cal2-num{background:var(--az-teal);color:#fff}
[data-theme="dark"] .app .cal2-jour.we:not(.actif){background:#1c1613}
[data-theme="dark"] .app .cal2-jour:not(.vide):hover{background:#3a2d28;border-color:var(--az-teal)}
[data-theme="dark"] .app .cal2-jour.actif{background:linear-gradient(180deg,#3a2d28 40%,rgba(230,184,76,.16));border-color:var(--gold-line)}
[data-theme="dark"] .app .cal2-jour.on{background:#3a2d28;border-color:var(--c-gold-deep)}
[data-theme="dark"] .app .cal2-nav:hover{background:var(--surface-2)}
[data-theme="dark"] .app .cal2-events li{color:var(--az-white)}
/* Modales génériques (fond carte via token, déjà ok) - renfort ombre */
[data-theme="dark"] .app .kpi,[data-theme="dark"] .app .panel,[data-theme="dark"] .app .carte{box-shadow:var(--ombre)}
/* ════════════ FINITIONS communes (clair + sombre) ════════════ */
/* Cartes & panneaux : coins un peu plus doux, meilleure présence */
.kpi,.panel,.carte,.cal2-panel,.cal2-carte{border-radius:12px}
.kpi{transition:transform .18s,box-shadow .18s,border-color .18s}
.kpi:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(2,48,71,.09);border-color:var(--gold-line)}
[data-theme="dark"] .app .kpi:hover{box-shadow:0 14px 32px rgba(0,0,0,.45)}
table.liste,.table-scroll{border-radius:12px}
.champ input,.champ select,.champ textarea{border-radius:8px}
.mini{border-radius:7px}
/* En-tête de page : filet doré sous le titre pour la signature « premium » */
.pagehead h1{position:relative}
/* Barre de progression sidebar plus fine et arrondie déjà ok. */
/* Titre de section abonnement / génériques */
.titre-page,.ab-secttl{letter-spacing:-.2px}
/* ════════════ COMPOSANTS RÉUTILISABLES (theme-aware) ════════════ */
/* Tuiles statistiques compactes - grille auto-fit par défaut. */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.stat{background:var(--c-white);border:1px solid var(--c-line);border-radius:12px;padding:15px 16px;
box-shadow:var(--ombre);position:relative;overflow:hidden;
transition:transform .18s,box-shadow .18s,border-color .18s}
.stat:hover{transform:translateY(-2px);border-color:var(--gold-line);box-shadow:0 10px 24px rgba(2,48,71,.09)}
[data-theme="dark"] .app .stat:hover{box-shadow:0 14px 30px rgba(0,0,0,.45)}
.stat .k{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--c-slate);
font-weight:700;display:flex;align-items:center;gap:7px}
.stat .k .ic{width:24px;height:24px;border-radius:7px;background:var(--surface-2);display:grid;
place-items:center;font-size:13px;flex:none}
.stat .v{font-family:var(--f-titre);font-size:var(--fs-h2);font-weight:600;margin-top:8px;line-height:1.05}
.stat .v small{font-family:var(--f-corps);font-size:var(--fs-corps);font-weight:600;color:var(--c-slate)}
.stat .m{font-size:var(--fs-petit);color:var(--c-slate);margin-top:5px;line-height:1.45}
.stat .m b{color:var(--c-navy);font-weight:600}
.stat.accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(var(--c-gold-deep),var(--c-gold))}
.stat.ok .v{color:var(--c-succes)}
[data-theme="dark"] .app .stat.ok .v{color:#6EE7B7}
.stat.crit .v{color:var(--c-critique)}
[data-theme="dark"] .app .stat.crit .v{color:#FCA5A5}
/* Mini-barre de progression réutilisable (occupation, usage…). */
.mbar{height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-top:8px}
.mbar i{display:block;height:100%;background:linear-gradient(90deg,var(--c-gold-deep),var(--c-gold));border-radius:3px}
.mbar i.ok{background:linear-gradient(90deg,#2E8F63,#57c78e)}
.mbar i.crit{background:linear-gradient(90deg,#C0392B,#d06450)}
/* Bannières d'information contextuelles (theme-aware). */
.banner{display:flex;gap:11px;align-items:flex-start;border-radius:12px;padding:13px 16px;
margin-bottom:18px;font-size:13.5px;line-height:1.5;border:1px solid transparent}
.banner .bic{font-size:16px;flex:none;line-height:1.4}
.banner b{font-weight:700}
.banner.ok{background:rgba(15,157,88,.10);border-color:rgba(15,157,88,.28);color:#1f7d4e}
.banner.warn{background:rgba(166,101,14,.10);border-color:rgba(166,101,14,.30);color:var(--c-alerte)}
.banner.info{background:rgba(43,58,120,.08);border-color:rgba(43,58,120,.22);color:var(--c-navy-soft)}
.banner.crit{background:rgba(192,57,43,.09);border-color:rgba(192,57,43,.28);color:var(--c-critique)}
[data-theme="dark"] .app .banner.ok{color:#8ee0b2}
[data-theme="dark"] .app .banner.warn{color:#e9c583}
[data-theme="dark"] .app .banner.info{color:#aeb9e6;border-color:rgba(143,160,216,.28)}
[data-theme="dark"] .app .banner.crit{color:#FCA5A5}
/* Carte de bloc générique avec en-tête (réutilise le langage .panel). */
.bloc{background:var(--c-white);border:1px solid var(--c-line);border-radius:12px;
box-shadow:var(--ombre);padding:20px 22px;margin-bottom:18px}
.bloc-titre{font-family:var(--f-titre);font-size:16px;font-weight:600;margin-bottom:4px;
display:flex;align-items:center;gap:9px}
.bloc-titre .ic{width:30px;height:30px;border-radius:8px;background:rgba(230,184,76,.14);
border:1px solid var(--gold-line);display:grid;place-items:center;color:var(--c-gold-deep);font-size:15px;flex:none}
[data-theme="dark"] .app .bloc-titre .ic{color:var(--c-gold)}
.bloc-sub{color:var(--c-slate);font-size:13px;margin-bottom:16px}
/* Titre de section (avec tick doré) - remplace les