/* ============================================================
   FAMILLE KOUASSI AKABLA ODETTE
   Thème « Sceau » — couche de design moderne
   ------------------------------------------------------------
   Chargé APRÈS style.css. Ne remplace rien : affine, structure
   et modernise. Toute la direction artistique découle de
   l'emblème familial : bleu roi, or, papier ivoire, motif kente.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS COMPLÉMENTAIRES
   ------------------------------------------------------------ */
:root {
    /* Rythme vertical unique — toutes les marges y font référence */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    /* Largeur de lecture confortable (~65 signes) */
    --measure: 66ch;

    /* Dégradés de marque */
    --grad-royal: linear-gradient(135deg, var(--royal-1) 0%, var(--royal) 48%, var(--royal-2) 100%);
    --grad-nuit:  linear-gradient(168deg, #143A78 0%, var(--royal-2) 55%, var(--royal-3) 100%);
    --grad-or:    linear-gradient(135deg, var(--or-1) 0%, var(--or) 55%, var(--or-2) 100%);

    /* Verre : bord réfringent + voile */
    --glass-bg:     rgba(255,255,255,.72);
    --glass-line:   rgba(255,255,255,.65);
    --glass-shadow: inset 0 1px 0 rgba(255,255,255,.60), 0 1px 0 rgba(11,30,61,.05);

    /* Motif kente : le losange du liseré du sceau.
       Doit se deviner, jamais se lire — d'où la trame large et l'encre très diluée. */
    --kente: repeating-linear-gradient(45deg,  rgba(162,118,30,.055) 0 1px, transparent 1px 26px),
             repeating-linear-gradient(-45deg, rgba(162,118,30,.055) 0 1px, transparent 1px 26px);
    --kente-fort: repeating-linear-gradient(45deg,  rgba(162,118,30,.13) 0 1.2px, transparent 1.2px 12px),
                  repeating-linear-gradient(-45deg, rgba(162,118,30,.13) 0 1.2px, transparent 1.2px 12px);

    color-scheme: light;
}

/* ------------------------------------------------------------
   2. MODE SOMBRE — opt-in (bascule dans le menu profil)
   ------------------------------------------------------------ */
html[data-theme="dark"] {
    /* L'or lisible du theme clair (#7A5714) est un brun : sur fond nuit il
       disparait. Le redefinir ICI evite d'avoir a rattraper la couleur
       regle par regle, comme le faisait le code precedent. */
    --or-txt:   #EBCB80;
    --ink:      #EAF0F8;
    --ink-2:    #9DAAC0;
    --ink-3:    #6C7A91;
    --bg:       #0A1526;
    --surface:  #101F36;
    --surface-2:#16283F;
    --line:     #22374F;
    --line-2:   #1B2E46;

    --ok-bg:     #12332A;
    --warn-bg:   #322512;
    --danger-bg: #35191A;
    --info-bg:   #12294C;

    --royal:    #4A88DC;
    --royal-1:  #6BA3EC;
    --or:       #E0B44E;
    --or-pale:  #3A2E14;

    --sh-1: 0 1px 2px rgba(0,0,0,.30), 0 6px 16px rgba(0,0,0,.24);
    --sh-2: 0 12px 32px rgba(0,0,0,.38);
    --sh-3: 0 28px 64px rgba(0,0,0,.50);

    --glass-bg:   rgba(16,31,54,.74);
    --glass-line: rgba(255,255,255,.10);
    --glass-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(0,0,0,.30);
    --kente: repeating-linear-gradient(45deg,  rgba(224,180,78,.05) 0 1px, transparent 1px 26px),
             repeating-linear-gradient(-45deg, rgba(224,180,78,.05) 0 1px, transparent 1px 26px);
    --kente-fort: repeating-linear-gradient(45deg,  rgba(224,180,78,.10) 0 1.2px, transparent 1.2px 12px),
                  repeating-linear-gradient(-45deg, rgba(224,180,78,.10) 0 1.2px, transparent 1.2px 12px);

    color-scheme: dark;
}
html[data-theme="dark"] .imv-bubble,
html[data-theme="dark"] { --imv-wall: #0A1526; --imv-bubble: #16283F; --imv-green: #1B3557; --imv-green-b: #26456B; }
html[data-theme="dark"] .post.annonce { background: linear-gradient(135deg, #1A2A18, var(--surface)); }
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .tabbar { background: var(--glass-bg); }
html[data-theme="dark"] img:not(.no-dim) { filter: brightness(.94); }

/* Les couleurs d'état sont écrites en dur dans style.css : sur fond sombre,
   elles doivent s'éclaircir au lieu de s'éteindre. */
html[data-theme="dark"] { --emeraude: #3FB587; --ok: #3FB587; --danger: #E88585; --warn: #E0AC55; }
html[data-theme="dark"] .alert-success { color: #7EDCB4; border-color: #1D5F45; }
html[data-theme="dark"] .alert-error   { color: #F3A6A6; border-color: #6B2F2F; }
html[data-theme="dark"] .alert-info    { color: #A8C8F5; border-color: #23477F; }
html[data-theme="dark"] .alert-warn    { color: #EFC583; border-color: #6A4C13; }
html[data-theme="dark"] .badge-ok,
html[data-theme="dark"] .app--admin .badge-ok      { background: #12332A; color: #6FD3A8; }
html[data-theme="dark"] .badge-warn,
html[data-theme="dark"] .app--admin .badge-warn    { background: #322512; color: #EFC583; }
html[data-theme="dark"] .badge-danger,
html[data-theme="dark"] .app--admin .badge-danger  { background: #35191A; color: #F0A0A0; }
html[data-theme="dark"] .badge-or                  { background: #3A2E14; color: #EFCE86; }
html[data-theme="dark"] .depot-banner {
    background: linear-gradient(115deg, #2A2311 0%, var(--surface) 62%);
    border-color: rgba(224,180,78,.30);
}
html[data-theme="dark"] .depot-banner .db-lbl { color: #E0B44E; }
html[data-theme="dark"] .depot-banner .db-ico { background: var(--surface-2); color: #E0B44E; }
html[data-theme="dark"] .empty { background: var(--surface-2); }

/* ------------------------------------------------------------
   3. FOND : papier ivoire, grain et liseré kente
   ------------------------------------------------------------ */
body.app,
body.auth-body {
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 520px at 100% -8%,  rgba(27,78,155,.07), transparent 62%),
        radial-gradient(760px 480px at -8% 108%,  rgba(201,153,47,.09), transparent 58%),
        var(--kente);
    background-attachment: fixed;
}

/* Grain : casse la platitude du numérique. Invisible mais sensible. */
body::after {
    content: "";
    position: fixed; inset: 0; z-index: 1;
    pointer-events: none; opacity: .30; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .16; }
@media print { body::after { display: none; } }

/* ------------------------------------------------------------
   4. TYPOGRAPHIE
   ------------------------------------------------------------ */
body { font-size: 15.5px; letter-spacing: -.005em; }

h1, h2, h3, .serif, .card-title, .page-h1, .topbar-title, .auth-title, .landing-title {
    font-family: var(--serif);
    font-variation-settings: "SOFT" 0, "WONK" 0;
    letter-spacing: -.022em;
    line-height: 1.14;
}
h1, .landing-title, .auth-title { font-weight: 700; }
/* Une seule voix typographique pour les deux espaces : l'administration reste
   la même maison. Sa distinction passe par l'or, pas par une autre police. */
.app--admin h1, .app--admin h2, .app--admin h3,
.app--admin .card-title, .app--admin .topbar-title, .app--admin .page-h1 {
    font-family: var(--serif); font-weight: 700; letter-spacing: -.022em;
}
.app--admin .page-h1, .app--admin .card-title, .app--admin .topbar-title { color: var(--ink); }
.page-h1 { font-size: clamp(26px, 3.4vw, 34px); color: var(--ink); margin-block: 2px var(--sp-5); }
.card-title { font-size: 19px; }

/* Une phrase ne doit jamais laisser un mot seul sur sa dernière ligne */
h1, h2, h3, .card-title { text-wrap: balance; }
p, .sub, .hint, .page-intro, .auth-sub, .landing-sub { text-wrap: pretty; }
p, .page-intro, .auth-sub, .landing-sub { max-width: var(--measure); }

/* Micro-libellés : petites capitales espacées, jamais criardes */
.auth-kicker, .brand-sub, .stat .lbl, .stat-lbl, th, .fig span {
    letter-spacing: .07em;
}
.auth-kicker, .brand-sub { font-weight: 700; }

/* Chiffres alignés en colonne — indispensable pour la trésorerie */
.stat .val, .stat-val, .fig b, .ring .rv b, td, th, .money, .badge,
.cotis-figs, table, .pill, .bell-badge, .tab-label {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.stat .val, .stat-val, .fig b { letter-spacing: -.03em; }

/* ------------------------------------------------------------
   5. ACCESSIBILITÉ & ÉTATS DE FOCUS
   ------------------------------------------------------------ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}

:focus-visible {
    outline: 2.5px solid var(--royal);
    outline-offset: 2px;
    border-radius: 6px;
}
.app--admin :focus-visible { outline-color: var(--or); }
.sidebar :focus-visible, .hero :focus-visible, .auth-aside :focus-visible { outline-color: var(--or-1); }

::selection { background: var(--or-pale); color: var(--royal-2); }

/* Lien d'évitement — obligatoire pour la navigation au clavier */
.skip-link {
    position: absolute; left: var(--sp-3); top: -60px; z-index: 999;
    background: var(--royal); color: #fff; padding: 10px 18px;
    border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 700; font-size: 14px;
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------
   6. TRANSITIONS DE PAGE (View Transitions API)
   ------------------------------------------------------------ */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s var(--ease) both; }
::view-transition-new(root) { animation: vt-in  .30s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }
.sidebar, .topbar, .tabbar { view-transition-name: none; }

/* ------------------------------------------------------------
   7. LE SCEAU — marque de la maison
   ------------------------------------------------------------ */
.sceau {
    border-radius: 50%; flex-shrink: 0; object-fit: contain;
    background: #FBF8F1;
    box-shadow: 0 0 0 1px rgba(162,118,30,.30), 0 6px 18px rgba(11,30,61,.16);
}
/* Sceau réduit de la barre supérieure (mobile) : il ne doit hériter d'aucun dégradé */
.topbar img.brand-crest--sm,
.app--admin .topbar img.brand-crest--sm {
    background: #FBF8F1; border-radius: 50%; width: 38px; height: 38px;
    box-shadow: 0 0 0 1px rgba(162,118,30,.35);
}
/* La marque devient cliquable : retour à l'accueil de l'espace */
a.brand { text-decoration: none; transition: opacity .2s; }
a.brand:hover { opacity: .88; }
.sceau--xl { width: clamp(124px, 20vw, 168px); height: auto; }
.sceau--lg { width: 92px;  height: 92px; }
.sceau--md { width: 56px;  height: 56px; }
.sceau--sm { width: 40px;  height: 40px; }

/* Le sceau posé sur fond bleu gagne un halo doré */
.sidebar .sceau, .auth-aside .sceau, .hero .sceau {
    box-shadow: 0 0 0 1px rgba(227,188,99,.55), 0 8px 24px rgba(7,22,45,.45);
}

/* Ornement de séparation : un filet d'or interrompu par le losange du sceau.
   Repris des motifs ✕ qui ponctuent l'anneau de l'emblème. */
.frieze {
    position: relative; height: 14px; width: 200px;
    background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--or) 70%, transparent) 22%,
            color-mix(in srgb, var(--or) 70%, transparent) 78%,
            transparent 100%)
        center / 100% 1px no-repeat;
}
.frieze::before,
.frieze::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    translate: -50% -50%; rotate: 45deg; background: var(--or);
}
.frieze::before { width: 7px; height: 7px; box-shadow: 0 0 0 5px var(--bg); }
.frieze::after  { width: 15px; height: 15px; background: none; border: 1px solid color-mix(in srgb, var(--or) 55%, transparent); }

/* Bande tissée — pour les pieds de bloc en aplat de couleur */
.frieze--kente {
    width: auto; height: 8px; background: none;
    background-image: var(--kente-fort);
}
.frieze--kente::before, .frieze--kente::after { display: none; }

/* ------------------------------------------------------------
   8. BARRE LATÉRALE
   ------------------------------------------------------------ */
.sidebar {
    background: var(--grad-nuit);
    box-shadow: 1px 0 0 rgba(227,188,99,.18), var(--sh-2);
}
.app--admin .sidebar {
    background: linear-gradient(168deg, #0C2854 0%, #071C40 60%, #04122C 100%);
    box-shadow: 1px 0 0 rgba(201,153,47,.30), var(--sh-2);
}
/* Voile kente très discret sur le bleu */
.sidebar::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
        repeating-linear-gradient(45deg,  rgba(227,188,99,.07) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(-45deg, rgba(227,188,99,.07) 0 1px, transparent 1px 12px);
}
.sidebar > * { position: relative; z-index: 1; }

.brand {
    gap: var(--sp-3); padding: var(--sp-5) var(--sp-4) var(--sp-4);
    border-bottom: 1px solid rgba(227,188,99,.16);
}
.brand-name { font-family: var(--serif); font-size: 17.5px; font-weight: 700; letter-spacing: -.015em; }
.brand-sub  { font-size: 10px; color: var(--or-1); letter-spacing: .16em; }

/* L'élément actif : pastille claire + repère doré à gauche */
.nav-item {
    position: relative; border-radius: 12px; font-size: 14.5px;
    transition: background .2s var(--ease), color .2s, transform .18s var(--spring);
}
.nav-item:hover { background: rgba(255,255,255,.10); transform: translateX(2px); }
/* Repère doré porté par une ombre interne : il épouse l'arrondi de la pastille */
.nav-item.is-active {
    background: rgba(255,255,255,.96); color: var(--royal-2);
    box-shadow: inset 3px 0 0 var(--or), 0 8px 20px rgba(7,22,45,.30);
}
.app--admin .nav-item.is-active { color: var(--royal-2); background: rgba(255,255,255,.96); }
.nav-item.is-active .nav-ico { transform: scale(1.06); }
.nav-ico { transition: transform .22s var(--spring); }

.sidebar-foot { border-top: 1px solid rgba(227,188,99,.16); padding: var(--sp-3); }
.switch-link {
    background: rgba(227,188,99,.16); color: var(--or-1);
    border: 1px solid rgba(227,188,99,.28); letter-spacing: .02em;
    transition: background .2s, color .2s, border-color .2s;
}
.switch-link:hover { background: var(--or); color: var(--royal-3); border-color: transparent; }

/* ------------------------------------------------------------
   9. BARRE SUPÉRIEURE — verre véritable
   ------------------------------------------------------------ */
.topbar {
    background: var(--glass-bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--glass-shadow);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    z-index: var(--z-sticky);
}
.topbar-title { font-size: 19px; }
.icon-btn {
    border-radius: 12px;
    transition: background .2s, border-color .2s, box-shadow .2s, transform .14s var(--spring);
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(.96); }
.bell-badge { background: var(--danger); box-shadow: 0 2px 6px rgba(179,58,58,.4); }
.topbar-search input { transition: border-color .18s, box-shadow .18s, background .18s; }

/* ------------------------------------------------------------
   10. CARTES — l'élévation porte du sens, pas de la décoration
   ------------------------------------------------------------ */
.card, .stat {
    position: relative;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
    transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s;
}
.card { padding: clamp(18px, 2.4vw, 26px); }

/* Filet doré au sommet, révélé au survol */
.card::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 2px;
    border-radius: var(--r) var(--r) 0 0;
    background: var(--grad-or);
    opacity: 0; transition: opacity .32s var(--ease);
}
.card:hover { box-shadow: var(--sh-2); border-color: transparent; }
.card:hover::before { opacity: .85; }

.card-head {
    align-items: baseline;
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line-2);
    margin-bottom: var(--sp-5);
}

/* Statistique : le chiffre est le héros */
.stat { padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + 2px); }
.stat .val, .stat-val { font-family: var(--serif); font-size: 30px; font-weight: 700; }
.stat .lbl, .stat-lbl {
    font-size: 12.5px; text-transform: uppercase; font-weight: 700; color: var(--ink-2);
    text-wrap: balance;                 /* un libellé long se répartit au lieu de s'effiler */
    line-height: 1.35; margin-top: 6px;
}
.stat-ico {
    border-radius: 14px; background: var(--info-bg); color: var(--royal);
    box-shadow: inset 0 0 0 1px rgba(27,78,155,.10);
}
.stat.emeraude .stat-ico { background: var(--ok-bg); color: var(--ok); }
.stat.or .stat-ico      { background: var(--or-pale); color: var(--or-2); }
.stat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }

/* Projecteur suivant le curseur (piloté par theme.js) */
.card.spot::after, .stat.spot::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(201,153,47,.13), transparent 62%);
    opacity: 0; transition: opacity .35s var(--ease);
}
.card.spot:hover::after, .stat.spot:hover::after { opacity: 1; }

/* ------------------------------------------------------------
   11. GRILLES — casser la symétrie systématique
   ------------------------------------------------------------ */
.content {
    padding: clamp(18px, 2.6vw, 40px);
    max-width: 1440px; margin-inline: auto;
    padding-bottom: clamp(32px, 5vw, 72px);   /* respiration optique en bas */
}
.grid { gap: var(--sp-5); }
@media (min-width: 1100px) {
    /* Le bloc principal prend le dessus au lieu de deux moitiés égales */
    .grid-2 { grid-template-columns: 1.15fr .85fr; }
}

/* Téléphones : la grille doit pouvoir rétrécir sous la largeur de son contenu.
   « 1fr » prend pour minimum la taille min-content de la carte, ce qui poussait
   la page à déborder horizontalement sur les petits écrans. « minmax(0,1fr) »
   lève cette contrainte ; la carte se réorganise alors en colonne. */
@media (max-width: 560px) {
    .grid { gap: var(--sp-3); }
    .content { padding-inline: var(--sp-4); }
}
@media (max-width: 420px) {
    .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .stat { padding: var(--sp-4); }
    .stat:has(.stat-ico) { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
    .stat-ico { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }
    .stat .val, .stat-val { font-size: 23px; }
    .stat .lbl, .stat-lbl { font-size: 11px; letter-spacing: .04em; }
    .stat-body { min-width: 0; overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------
   11 bis. ICÔNES
   Tracé SVG héritant de currentColor. Les conteneurs ci-dessous
   étaient calibrés pour des emoji : on les recentre proprement.
   ------------------------------------------------------------ */
/* La classe est « icn » et non « ico » : « .ico » désigne déjà le médaillon
   des états vides dans style.css. */
.icn {
    flex-shrink: 0;
    vertical-align: -.16em;             /* aligne le tracé sur la ligne de base du texte */
}
.icn--retour { rotate: 180deg; }        /* la flèche « suivant » sert de « retour » */

/* Trait un peu plus épais aux petites tailles, sinon l'icône s'efface */
.icn[width="15"], .icn[width="16"], .icn[width="17"] { stroke-width: 1.95; }

/* Navigation : gouttière fixe pour que tous les libellés s'alignent */
.nav-ico {
    width: 24px; height: 24px; font-size: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.nav-item.is-active .nav-ico .icn,
.tab.is-active .tab-ico .icn { stroke-width: 2.05; }

/* Conteneurs déjà centrés par style.css : on neutralise seulement la hauteur
   de ligne héritée du caractère emoji qu'ils contenaient auparavant. */
.tab-ico, .icon-btn, .chip-logout, .cwi, .imv-send, .imv-ic, .chat-fab,
.cc-x, .bk, .db-ico, .confirm-ic { font-size: 0; }
.icon-btn .icn, .chip-logout .icn { pointer-events: none; }

/* Loupe de recherche : un SVG remplace un caractère, il faut le recaler */
.topbar-search .ts-ico, .cc-search > span:first-child {
    display: inline-flex; align-items: center; opacity: .5; font-size: 0;
}
.cc-search > span:first-child { opacity: .55; }

/* Menus et liens porteurs d'icône */
.tu-menu a, .imv-attach-menu button, .cc-tab { align-items: center; gap: 10px; }
.switch-link { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tu-menu a .icn { opacity: .72; }
.tu-menu a:hover .icn { opacity: 1; }
.tu-caret { display: inline-flex; align-items: center; color: var(--ink-3); }
.bc-home { display: inline-flex; align-items: center; }

/* L'icône d'un bouton doit *paraître* centrée, pas l'être au pixel près */
.btn .icn { margin-inline-start: -2px; }
.btn-sm .icn { margin-inline-start: -1px; }

/* Médaillons de contenu : l'icône y est plus grande et prend la couleur du bloc */
.stat-ico .icn, .choice-ico .icn { width: 26px; height: 26px; stroke-width: 1.7; }
.empty .ico .icn { width: 30px; height: 30px; color: var(--ink-3); stroke-width: 1.6; }
.list-ico .icn { color: var(--royal); }

/* Conteneurs construits en JavaScript (messagerie, arbre, invite d'installation) */
.pv-ic, .pwa-help-ic, .list-ico, .tex-head strong, .tp-edit, .cw-conv .ci {
    display: inline-flex; align-items: center; gap: 8px;
}
.list-ico { justify-content: center; }
.pv-ic { color: var(--ink-2); }
.pwa-help-ic { color: var(--royal); justify-content: center; }
/* Le micro passe au rouge pendant l'enregistrement */
.imv-ic.recording .icn, .imv-mic.recording .icn { color: var(--danger); }

/* ------------------------------------------------------------
   12. BOUTONS
   ------------------------------------------------------------ */
.btn {
    border-radius: var(--r-sm); letter-spacing: -.005em;
    transition: transform .16s var(--spring), box-shadow .24s var(--ease), filter .2s, background .2s;
}
.btn-primary  { background: var(--grad-royal); box-shadow: 0 6px 18px rgba(14,46,99,.30); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(14,46,99,.42); transform: translateY(-2px); }
.btn-or       { background: var(--grad-or); color: var(--royal-3); box-shadow: var(--sh-or); }
.btn-or:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-ghost    { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.btn-ghost:hover { background: var(--surface); border-color: var(--royal); color: var(--royal); box-shadow: var(--sh-1); transform: translateY(-1px); }
.btn:active   { transform: translateY(1px) scale(.985); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.4); }

/* Espace admin : l'or devient la couleur d'action */
.app--admin .btn-primary { background: var(--grad-or); color: var(--royal-3); box-shadow: var(--sh-or); }
.app--admin .btn-primary:hover { filter: brightness(1.05); box-shadow: 0 12px 30px rgba(162,118,30,.34); }

/* Cible tactile : 44 px minimum sur téléphone, recommandation d'accessibilité */
@media (max-width: 900px) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 38px; }
    .icon-btn { width: 44px; height: 44px; }
}

/* Bouton purement iconographique : le libellé vit dans aria-label */
.btn-icon {
    width: 40px; height: 40px; padding: 0;
    display: inline-grid; place-items: center;
    border-radius: 12px; background: var(--surface);
    border: 1px solid var(--line); color: var(--ink); box-shadow: var(--sh-1);
}
.btn-icon:hover { border-color: var(--royal); color: var(--royal); transform: translateY(-1px); }
.btn-icon .icn { margin: 0; }

/* Attente : le bouton se verrouille et l'annonce visuellement */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 17px; height: 17px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: rotation .65s linear infinite;
}
.btn-ghost.is-loading::after { border-color: var(--line); border-top-color: var(--royal); }
@keyframes rotation { to { rotate: 360deg; } }

/* Groupe de boutons soudés — pour les filtres et les bascules de vue */
.btn-group { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; padding: 3px; gap: 3px; }
.btn-group .btn { box-shadow: none; background: none; border: none; color: var(--ink-2); font-size: 13.5px; padding: 7px 14px; }
.btn-group .btn.is-active { background: var(--surface); color: var(--royal); box-shadow: var(--sh-1); }

/* Titres de section et libellés porteurs d'icône */
.section-title, .cat-nom, .gen-extremes span, .db-lbl, .bc-current {
    display: inline-flex; align-items: center; gap: 8px;
}
.section-title {
    display: flex; font-family: var(--serif); font-size: 20px; font-weight: 700;
    letter-spacing: -.02em; color: var(--ink); margin: var(--sp-6) 0 var(--sp-4);
}
.section-title .icn { color: var(--or-2); }
.cat-nom .icn { color: var(--royal); opacity: .8; }

/* Lien tertiaire — allège les paires « plein + fantôme » partout */
.btn-link {
    background: none; border: none; box-shadow: none; padding: 8px 4px;
    color: var(--royal); font-weight: 700; text-decoration: underline;
    text-underline-offset: 3px; text-decoration-thickness: 1.5px;
    text-decoration-color: color-mix(in srgb, var(--royal) 35%, transparent);
}
.btn-link:hover { text-decoration-color: currentColor; transform: none; }

/* ------------------------------------------------------------
   13. FORMULAIRES
   ------------------------------------------------------------ */
input, select, textarea { border-radius: var(--r-sm); background: var(--surface); }
input:focus, select:focus, textarea:focus {
    border-color: var(--royal);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--royal) 16%, transparent);
    outline: none;
}
.app--admin input:focus, .app--admin select:focus, .app--admin textarea:focus {
    border-color: var(--or-2);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--or) 22%, transparent);
}
input:invalid:not(:placeholder-shown) { border-color: var(--danger); }
input:invalid:not(:placeholder-shown):focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }
label { font-size: 13px; letter-spacing: .01em; color: var(--ink-2); }

/* ------------------------------------------------------------
   14. ALERTES & BADGES
   ------------------------------------------------------------ */
/* Le texte reste en flux : sur téléphone, une mise en flex morcelait chaque
   fragment de phrase sur sa propre ligne. */
.alert {
    border-radius: var(--r-sm); padding: 14px 16px 14px 18px;
    border-left: 3px solid currentColor;
    line-height: 1.55;
}
.alert a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: inherit; }

.badge {
    border-radius: 7px;               /* le carré arrondi tranche avec les pastilles génériques */
    letter-spacing: .02em; font-size: 11.5px; font-weight: 700;
    padding: 4px 9px; text-transform: uppercase;
}
.badge-or { background: var(--or-pale); color: var(--or-txt); }

/* ------------------------------------------------------------
   15. HERO D'ACCUEIL
   ------------------------------------------------------------ */
.hero {
    border-radius: var(--r-lg);
    padding: clamp(24px, 4vw, 40px);
    background: var(--grad-nuit);
    box-shadow: 0 22px 48px rgba(7,22,45,.30);
    isolation: isolate;
}
/* Le sceau en filigrane, débordant du cadre : de la profondeur, pas un cercle décoratif */
.hero::after {
    content: ""; position: absolute; right: -70px; top: 50%; translate: 0 -50%;
    width: 300px; height: 300px; border-radius: 50%; z-index: -1;
    background: url("../img/sceau-256.webp") center/contain no-repeat;
    opacity: .08; filter: grayscale(.35) blur(.4px);
}
.hero::before {
    content: ""; position: absolute; inset: auto 0 0 0; height: 6px; z-index: 0;
    width: auto; border-radius: 0;
    background-image:
        repeating-linear-gradient(45deg,  rgba(227,188,99,.5) 0 1.5px, transparent 1.5px 9px),
        repeating-linear-gradient(-45deg, rgba(227,188,99,.5) 0 1.5px, transparent 1.5px 9px);
}
.hero h1 { font-family: var(--serif); font-size: clamp(24px, 3.2vw, 32px); }
.hero .sub { max-width: 54ch; }
.hero-actions a {
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px; backdrop-filter: blur(6px);
    transition: background .22s, border-color .22s, transform .18s var(--spring);
}
.hero-actions a:hover { background: rgba(255,255,255,.24); border-color: rgba(227,188,99,.5); transform: translateY(-2px); }
/* Sur téléphone le filigrane passe derrière le texte : on l'efface presque. */
@media (max-width: 700px) {
    .hero::after { width: 210px; height: 210px; right: -80px; opacity: .05; }
}

/* ------------------------------------------------------------
   16. BARRE D'ONGLETS MOBILE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .tabbar {
        background: var(--glass-bg);
        border-top: 1px solid var(--line);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        box-shadow: 0 -6px 24px rgba(11,30,61,.07);
    }
    .tab-ico { transition: background .24s var(--ease), transform .3s var(--spring); }
    .tab { color: var(--ink-2); }          /* les onglets inactifs restent lisibles */
    .tab.is-active { color: var(--royal); }
    .tab.is-active .tab-ico { background: var(--info-bg); transform: translateY(-3px) scale(1.04); }
    .app--admin .tab.is-active { color: var(--or-txt); }
    .app--admin .tab.is-active .tab-ico { background: var(--or-pale); }
    /* ---- La barre ne doit JAMAIS grandir ----
       La page reserve `--tabbar-h` sous son contenu. Si un libelle passe a la
       ligne, la barre depasse cette reserve et vient recouvrir le bas de la
       page : c'est ce qui masquait « Voir tout le registre » et le premier
       bouton des listes. Une seule ligne, coupee au besoin, et la reserve
       redevient exacte quoi qu'on ecrive dans le menu.

       `min-width: 0` est indispensable : sans lui, un element de flex refuse
       de retrecir sous la largeur de son texte, et le libelle deborde par les
       cotes — « Tableau de bord » sortait de l'ecran a gauche. */
    .tab { min-width: 0; padding: 0 3px; }
    .tab-label {
        font-size: 10.5px; letter-spacing: -.01em; max-width: 100%;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Repère supérieur de l'onglet actif */
    .tab.is-active::before {
        content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
        width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--or);
    }

    /* La derniere carte ne doit pas venir toucher le bord des onglets : on
       respire au-dessus de la barre plutot que de s'y appuyer. */
    .content { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-6)); }

    /* Le bouton flottant de messagerie se pose sur la barre, pas dedans. */
    .chat-fab { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px); }
}

/* ------------------------------------------------------------
   17. MOUVEMENT — entrée en cascade, jamais tout d'un bloc
   ------------------------------------------------------------ */
@keyframes lift { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.content > .hero,
.content > .grid > *,
.content > .card,
.content > .alert,
.content > .page-head {
    animation: lift .5s var(--ease) both;
}
.content > .grid > *:nth-child(1) { animation-delay: .04s; }
.content > .grid > *:nth-child(2) { animation-delay: .09s; }
.content > .grid > *:nth-child(3) { animation-delay: .14s; }
.content > .grid > *:nth-child(4) { animation-delay: .19s; }
.content > .grid > *:nth-child(n+5) { animation-delay: .24s; }

/* Révélation au défilement, pilotée par le scroll lui-même */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .content > .card:nth-of-type(n+2),
        .content > .grid:nth-of-type(n+2) > * {
            animation: lift linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 42%;
        }
    }
}

/* ------------------------------------------------------------
   18. ÉTATS VIDES, CHARGEMENT, ERREURS
   ------------------------------------------------------------ */
.empty {
    padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--ink-2);
    border: 1px dashed var(--line); border-radius: var(--r); background: var(--surface-2);
}
.empty .ico {
    font-size: 34px; margin-bottom: var(--sp-3); opacity: .75;
    display: grid; place-items: center; width: 66px; height: 66px; margin-inline: auto;
    border-radius: 50%; background: var(--surface); box-shadow: var(--sh-1);
}

/* Squelettes de chargement — épousent la forme du contenu attendu */
.skeleton {
    border-radius: var(--r-sm);
    background: linear-gradient(100deg, var(--surface-2) 30%, var(--line-2) 48%, var(--surface-2) 66%);
    background-size: 220% 100%;
    animation: shimmer 1.4s linear infinite;
}
.skeleton--line { height: 12px; margin-bottom: 10px; }
.skeleton--line:nth-child(3n) { width: 72%; }
.skeleton--card { height: 128px; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* ------------------------------------------------------------
   19. TABLEAUX
   ------------------------------------------------------------ */
th {
    text-transform: uppercase; font-size: 11.5px; font-weight: 800;
    color: var(--ink-3); letter-spacing: .08em;
}
tbody tr { transition: background .18s; }
tbody tr:hover { background: var(--surface-2); }
/* Les tableaux larges défilent dans leur propre cadre, jamais la page */
.table-wrap { overflow-x: auto; border-radius: var(--r-sm); -webkit-overflow-scrolling: touch; }

/* Filet de securite : une cellule se coupe sur les espaces, jamais au milieu
   d'un mot. Sans cela, une colonne peut tomber a la largeur d'une lettre et le
   tableau devient une colonne de caracteres. Les cellules qui doivent vraiment
   respirer le declarent elles-memes. */
th, td { overflow-wrap: break-word; word-break: normal; }

/* Un nombre ne se lit qu'aligne : les chiffres de meme largeur mettent les
   milliers les uns sous les autres d'une ligne a l'autre. */
td { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   20. AUTHENTIFICATION & PAGE D'ACCUEIL PUBLIQUE
   ------------------------------------------------------------ */
.auth-body { padding: clamp(16px, 4vw, 40px); }
.auth-shell {
    max-width: 1020px; border-radius: var(--r-lg);
    box-shadow: 0 40px 90px rgba(11,30,61,.22), 0 0 0 1px rgba(227,188,99,.22);
}
.auth-panel { padding: clamp(30px, 5vw, 56px); }
.auth-title { font-size: clamp(26px, 4vw, 34px); }
.auth-kicker { color: var(--or-2); }

.auth-aside--member { background: var(--grad-nuit); }
.auth-aside::before {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background-image:
        repeating-linear-gradient(45deg,  rgba(227,188,99,.08) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(-45deg, rgba(227,188,99,.08) 0 1px, transparent 1px 13px);
}
.auth-aside blockquote {
    font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 25px);
    line-height: 1.34; letter-spacing: -.02em;
}
.auth-aside .devise {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
    color: var(--or-1); margin-bottom: var(--sp-5);
}
.auth-aside .devise::before,
.auth-aside .devise::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }

/* Accueil public : le sceau porte la page */
.landing { max-width: 900px; }
.landing-top { display: grid; justify-items: center; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.landing-title { font-size: clamp(30px, 5.4vw, 48px); margin: var(--sp-2) 0; }
.landing-sub { font-size: 16.5px; margin-inline: auto; }
.landing .frieze { margin: var(--sp-1) auto var(--sp-2); }

.landing-choices { gap: var(--sp-5); }
.choice {
    border: 1px solid var(--line-2); border-radius: var(--r-lg);
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    box-shadow: var(--sh-1); overflow: hidden; position: relative;
    display: flex; flex-direction: column;
    transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s;
}
.choice::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 3px;
    background: var(--grad-royal); opacity: 0; transition: opacity .3s;
}
.choice--admin::before { background: var(--grad-or); }
.choice:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: transparent; }
.choice:hover::before { opacity: 1; }
.choice h2 { font-size: 22px; }
.choice p { flex: 1; }                     /* l'appel à l'action s'aligne en bas de chaque carte */
.choice-ico {
    width: 52px; height: 52px; border-radius: 15px; margin-bottom: var(--sp-4);
    box-shadow: inset 0 0 0 1px rgba(11,30,61,.06);
    display: grid; place-items: center;
}
.choice-ico svg { width: 26px; height: 26px; }
.choice--member .choice-ico { background: var(--info-bg); color: var(--royal); }
.choice--admin  .choice-ico { background: var(--or-pale); color: var(--or-2); }
.choice-cta { color: var(--royal); display: inline-flex; align-items: center; gap: 7px; margin-top: var(--sp-4); }
.choice--admin .choice-cta { color: var(--or-txt); }
.choice-cta::after { content: "→"; transition: translate .24s var(--spring); }
.choice:hover .choice-cta::after { translate: 5px 0; }

.landing-foot {
    margin-top: var(--sp-7); color: var(--ink-3); font-size: 12.5px;
    display: flex; align-items: center; justify-content: center; gap: var(--sp-4); flex-wrap: wrap;
}
.landing-foot a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.landing-foot a:hover { color: var(--royal); }

/* ------------------------------------------------------------
   21. MESSAGERIE
   ------------------------------------------------------------ */
.imv-wall { background-color: var(--imv-wall); background-image: var(--kente); }
.imv-head, .cw-head, .cw-cvhead { background: var(--grad-nuit); }
.chat-fab {
    background: var(--grad-or); color: var(--royal-3);
    box-shadow: 0 14px 32px rgba(162,118,30,.42);
}
.chat-fab:hover { transform: scale(1.06) translateY(-2px); }
.cw-head .cwi, .imv-head .avatar, .cw-cvhead .avatar { background: var(--grad-or); color: var(--royal-3); }
.imv-send { background: var(--grad-royal); box-shadow: 0 6px 16px rgba(14,46,99,.34); }

/* ------------------------------------------------------------
   22. BANDEAU DE DÉPÔT (contact trésorerie)
   ------------------------------------------------------------ */
/* Un rappel utile, pas une alarme : fond ivoire, encre bleue, l'or en accent. */
.depot-banner {
    border-radius: var(--r);
    border: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
    border-left: 3px solid var(--or);
    background: linear-gradient(115deg, var(--or-pale) 0%, var(--surface) 62%);
    color: var(--ink);
    box-shadow: var(--sh-1);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.depot-banner:hover { transform: translateY(-2px); box-shadow: var(--sh-2); color: var(--ink); filter: none; }
.depot-banner .db-ico { background: var(--surface); color: var(--or-2); box-shadow: var(--sh-1); }
.depot-banner .db-lbl { color: var(--or-txt); opacity: 1; letter-spacing: .08em; font-size: 11.5px; }
.depot-banner .db-name { color: var(--ink); font-size: 16px; }
.depot-banner .db-tel  { color: var(--royal); font-size: 19px; letter-spacing: .04em; }
.depot-banner .db-cta {
    background: var(--grad-or); color: var(--royal-3); font-weight: 800;
    box-shadow: 0 4px 12px rgba(162,118,30,.28);
}

/* ------------------------------------------------------------
   23. ÉCRITURE ANNULÉE — la ligne reste, mais elle ne compte plus
   ------------------------------------------------------------
   Une écriture de caisse erronée n'est jamais effacée : on lui oppose une
   écriture inverse. La ligne barrée dit au trésorier « ceci a existé, et
   ceci ne compte plus » — deux informations qu'une suppression détruirait.
   ------------------------------------------------------------ */
/* Le trait couvre TOUTE la ligne : une ligne à moitié barrée se lit comme à
   moitié valable. */
tr.mv-annulee > td {
    color: var(--ink-2);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
tr.mv-annulee > td strong { color: var(--ink-2) !important; font-weight: 600; }

/* Les pastilles de couleur retombent au gris : une cotisation annulée ne peut
   pas continuer à s'afficher en vert comme si elle comptait encore. */
tr.mv-annulee .badge {
    background: var(--line-2) !important;
    color: var(--ink-2) !important;
    letter-spacing: .02em;
}

/* Ce qui EXPLIQUE l'annulation n'est jamais barré : on raye ce qui est annulé,
   pas la raison de l'annulation. `inline-block` est ce qui coupe la propagation
   du trait — `text-decoration: none` seul n'y suffirait pas, la décoration d'un
   parent traversant ses descendants en ligne. */
.annul-motif {
    display: inline-block; text-decoration: none;
    font-size: 12px; line-height: 1.45; color: var(--ink-2);
}

/* ------------------------------------------------------------
   24. CORRIGER UNE ÉCRITURE — panneau et confirmation
   ------------------------------------------------------------
   Le geste est rare et il engage : il mérite une page à lui, pas un formulaire
   tassé dans la dernière colonne d'un tableau. D'où le panneau pleine largeur,
   et une palette qui suit le sceau — bleu roi pour choisir, or pour attirer
   l'œil, rouge UNIQUEMENT sur l'acte destructeur.
   ------------------------------------------------------------ */

/* Le déclencheur, dans la cellule de la ligne */
.annul-btn {
    background: var(--surface); border: 1px solid var(--line);
    color: var(--ink-2); font-size: 12px; font-weight: 700;
    padding: 6px 12px; border-radius: var(--r-pill); box-shadow: none;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    transition: color .16s, border-color .16s, background .16s;
}
.annul-btn:hover              { color: var(--royal); border-color: var(--royal); background: var(--surface); }
.annul-btn[aria-expanded="true"] { color: #fff; border-color: var(--royal); background: var(--royal); }
.annul-btn[aria-expanded="true"] .annul-delai { background: rgba(255,255,255,.22); color: #fff; }

.annul-delai {
    font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .01em;
    padding: 2px 7px; border-radius: var(--r-pill);
    background: var(--or-pale); color: var(--or-txt);
}
html[data-theme="dark"] .annul-delai { background: #3A2E14; color: #EFCE86; }

/* ---------- Le panneau ---------- */
tr.annul-panneau > td {
    padding: 0;
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 60%);
    border-left: 3px solid var(--royal);
    box-shadow: inset 0 12px 18px -14px rgba(11,30,61,.22);
}
.corr {
    display: block; padding: var(--sp-5) var(--sp-5) var(--sp-4);
    max-width: 900px;
}

.corr-tete { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-4); }
.corr-tete-ico {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center; color: #fff; background: var(--grad-royal);
    box-shadow: 0 4px 12px rgba(27,78,155,.28);
}
.corr-tete strong { display: block; font-size: 16px; letter-spacing: -.01em; }
.corr-tete p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }

/* La fiche de rappel : les quatre faits, en clair */
.corr-fiche {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 1px; margin: 0 0 var(--sp-5);
    background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.corr-fiche > div { background: var(--surface); padding: 10px 14px; }
.corr-fiche dt {
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-3);
}
.corr-fiche dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.corr-fiche-sec { font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-left: 2px; }

/* ---------- Les trois situations ---------- */
/* Une grille de cartes plutôt qu'un fieldset : <legend> ne devient pas un
   élément de grille de la même façon selon les moteurs, et la mise en page
   s'y cassait. */
.corr-legende {
    margin: 0 0 var(--sp-3);
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-2);
}
.corr-choix {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px; margin: 0 0 var(--sp-4);
}

/* Le bouton radio disparaît à l'œil mais reste au clavier : c'est la CARTE
   qui devient le contrôle, plus lisible qu'une pastille de 13 pixels. */
.corr-opt { position: relative; cursor: pointer; display: block; height: 100%; }
.corr-opt input {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.corr-opt-corps {
    display: block; height: 100%; padding: 14px 15px;
    background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.corr-opt:hover .corr-opt-corps { border-color: var(--royal-1); transform: translateY(-1px); }
.corr-opt input:focus-visible + .corr-opt-corps { box-shadow: 0 0 0 4px rgba(27,78,155,.18); }
.corr-opt input:checked + .corr-opt-corps {
    border-color: var(--royal); background: var(--surface);
    box-shadow: 0 0 0 1.5px var(--royal), 0 8px 20px -12px rgba(27,78,155,.5);
}
.corr-opt-ico {
    display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
    background: var(--surface-2); color: var(--ink-2); margin-bottom: 8px;
    transition: background .16s, color .16s;
}
.corr-opt input:checked + .corr-opt-corps .corr-opt-ico { background: var(--royal); color: #fff; }
.corr-opt-corps strong { display: block; font-size: 14px; }
.corr-opt-corps em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin-top: 3px; }

/* La carte « aucun dépôt » vire au rouge une fois choisie : c'est la seule des
   trois qui détruit sans rien remettre à la place. */
.corr-opt:last-of-type input:checked + .corr-opt-corps {
    border-color: var(--danger); box-shadow: 0 0 0 1.5px var(--danger), 0 8px 20px -12px rgba(179,58,58,.45);
}
.corr-opt:last-of-type input:checked + .corr-opt-corps .corr-opt-ico { background: var(--danger); }

/* ---------- Les champs ---------- */
.corr-champs { margin-bottom: var(--sp-4); max-width: 460px; }
.corr-champs > label {
    display: block; font-size: 12.5px; font-weight: 800; margin-bottom: 6px; color: var(--ink);
}
.corr-champs select, .corr-champs input[type="text"], .corr-champs input[type="number"] { font-size: 14.5px; }
.corr-saisie { position: relative; }
.corr-saisie input { padding-right: 62px; font-weight: 700; }
.corr-unite {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    font-size: 12px; font-weight: 800; color: var(--ink-3); pointer-events: none;
}
.corr-bascule {
    display: flex; align-items: flex-start; gap: 9px; margin: 11px 0 0;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.corr-bascule input { width: auto; margin-top: 2px; flex: 0 0 auto; }
.corr-bascule em { font-style: normal; color: var(--ink-2); }
.corr-aide {
    margin: 9px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.corr-aide strong { color: var(--ink); }
.corr-aide-fort {
    display: flex; gap: 9px; align-items: flex-start; margin: 0;
    padding: 12px 14px; border-radius: 12px;
    background: var(--danger-bg); color: var(--danger); border: 1px solid rgba(179,58,58,.2);
}
.corr-aide-fort strong { color: inherit; }
.corr-facult {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-3); margin-left: 5px;
}

/* Le panneau d'annulation sèche (caisse, paiements) : même ossature, mais le
   bandeau part en rouge — là, rien ne vient remplacer ce qu'on retire. */
.corr-tete--danger .corr-tete-ico {
    background: linear-gradient(135deg, #C75252 0%, var(--danger) 100%);
    box-shadow: 0 4px 12px rgba(179,58,58,.3);
}
.corr-points { margin: 0 0 var(--sp-5); padding: 0; list-style: none; display: grid; gap: 8px; max-width: 62ch; }
.corr-points li { position: relative; padding-left: 20px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.corr-points li::before {
    content: ''; position: absolute; left: 5px; top: 8px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--or);
}
.corr-points strong { color: var(--ink); }
.corr-oblig {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    color: var(--danger); margin-left: 5px;
}

/* Des motifs tout prêts : devant une page blanche on ne sait pas quoi écrire,
   devant quatre exemples, si. Un clic les recopie dans le champ. */
.corr-exemples { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.corr-exemple {
    background: var(--surface); border: 1px dashed var(--line); color: var(--ink-2);
    font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer;
    transition: border-color .16s, color .16s;
}
.corr-exemple:hover { border-style: solid; border-color: var(--royal); color: var(--royal); }

.corr-actions {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.corr-delai { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
              font-size: 12px; color: var(--ink-3); }

/* ---------- La boîte de confirmation ---------- */
.akm {
    border: 0; padding: 0; background: transparent;
    max-width: min(520px, calc(100vw - 32px)); width: 100%;
    color: var(--ink);
}
.akm::backdrop { background: rgba(7,28,64,.55); backdrop-filter: blur(3px); }
.akm-boite {
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    padding: var(--sp-5); box-shadow: 0 32px 64px -24px rgba(7,28,64,.5);
    animation: akm-entree .22s var(--ease, cubic-bezier(.22,1,.36,1)) both;
}
@keyframes akm-entree { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .akm-boite { animation: none; } }

.akm-tete { display: flex; gap: var(--sp-3); align-items: flex-start; }
.akm-ico {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px;
    display: grid; place-items: center; color: #fff;
}
.akm-ico--danger { background: linear-gradient(135deg, #C75252 0%, var(--danger) 100%);
                   box-shadow: 0 6px 16px -6px rgba(179,58,58,.6); }
.akm-ico--royal  { background: var(--grad-royal); box-shadow: 0 6px 16px -6px rgba(27,78,155,.6); }
.akm-titre { margin: 2px 0 0; font-size: 17.5px; line-height: 1.3; letter-spacing: -.015em; }
.akm-sous { margin: 5px 0 0; font-size: 13px; color: var(--ink-2); }

/* `display: grid` l'emporte sur le `display: none` que le navigateur applique
   à [hidden] : sans cette règle, le bloc de comparaison et la liste de points
   restent visibles — et vides — quand on ne les remplit pas. */
.akm-compare[hidden], .akm-points[hidden] { display: none !important; }

.akm-compare {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
    margin-top: var(--sp-4); padding: 14px; border-radius: 14px;
    background: var(--surface-2); border: 1px solid var(--line);
}
.akm-compare > div { min-width: 0; }
.akm-lbl {
    display: block; font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-3); margin-bottom: 3px;
}
.akm-compare strong { display: block; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.akm-av strong { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.akm-ap strong { color: var(--royal); }
.akm-fleche { font-size: 19px; color: var(--or); font-weight: 800; }

.akm-points { margin: var(--sp-4) 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.akm-points li {
    position: relative; padding-left: 22px; font-size: 13px; line-height: 1.55; color: var(--ink-2);
}
.akm-points li::before {
    content: ''; position: absolute; left: 6px; top: 8px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--or);
}
.akm-points strong { color: var(--ink); }

.akm-actions {
    display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
    margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.akm-actions .btn { min-width: 128px; justify-content: center; }

@media (max-width: 640px) {
    .corr { padding: var(--sp-4) var(--sp-3); }
    .corr-actions .btn, .akm-actions .btn { flex: 1 1 100%; }
    .corr-delai { margin-left: 0; }
    .akm-compare { grid-template-columns: 1fr; text-align: left; }
    .akm-fleche { transform: rotate(90deg); justify-self: start; }
}

/* Les pastilles ne se coupent jamais en deux : « COTISATI / ON » est illisible. */
table .badge { white-space: nowrap; }

/* ------------------------------------------------------------
   25. JOURNAL DU RENFORT — aperçu court, journal entier au besoin
   ------------------------------------------------------------
   Trois écritures suffisent à savoir où l'on en est. Le reste s'ouvre en
   pleine largeur : un tableau de six colonnes dans une demi-colonne cassait
   les dates en « 19 aoû / t / 202 / 6 » et écrivait la dernière cellule à la
   verticale. Une liste dans l'étroit, un tableau dans le large.
   ------------------------------------------------------------ */
.jr-apercu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.jr-item {
    display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
    padding: 12px 4px; border-bottom: 1px solid var(--line);
}
.jr-item:last-child { border-bottom: 0; }
.jr-pastille {
    width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto;
}
.jr-pastille--entree { background: var(--ok-bg); color: var(--ok); }
.jr-pastille--sortie { background: var(--danger-bg); color: var(--danger); }
.jr-corps { min-width: 0; }
.jr-corps strong {
    display: block; font-size: 13.5px; line-height: 1.4; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.jr-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 3px; font-size: 11.5px; color: var(--ink-3);
}
.jr-montant { font-size: 14px; font-weight: 800; white-space: nowrap; letter-spacing: -.01em; }
.jr-montant--entree { color: var(--ok); }
.jr-montant--sortie { color: var(--danger); }

/* Une écriture annulée reste lisible, mais cesse d'attirer l'œil. */
.jr-item--annulee .jr-corps strong,
.jr-item--annulee .jr-montant { text-decoration: line-through; color: var(--ink-3); }
.jr-item--annulee .jr-pastille { background: var(--line-2); color: var(--ink-3); }

.jr-plus {
    width: 100%; margin-top: var(--sp-4); justify-content: center; gap: 8px;
    border: 1px dashed var(--line); background: transparent; color: var(--ink-2); font-weight: 700;
}
.jr-plus:hover { border-style: solid; border-color: var(--royal); color: var(--royal); background: var(--surface); }
.jr-plus .icn { transition: transform .2s var(--ease, ease); }
.jr-plus[aria-expanded="true"] .icn { transform: rotate(180deg); }
.jr-compte {
    font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: var(--r-pill);
    background: var(--surface-2); color: var(--ink-2);
}

/* Le journal entier, en pleine largeur */
.jr-complet { margin-top: var(--sp-5); animation: jr-ouvre .22s var(--ease, ease) both; }
@keyframes jr-ouvre { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .jr-complet { animation: none; } }
/* Une date et un montant ne se coupent jamais — dans AUCUN tableau.
   Ces deux regles etaient limitees a `.jr-complet`, c'est-a-dire au journal
   deplie. Les tableaux d'apercu, ceux qu'on voit en arrivant sur la page,
   n'en beneficiaient pas : c'est la que « 19 aout 2026 » s'eparpillait sur
   quatre lignes et que « 4 500 FCFA » se coupait en deux. */
.jr-date, .jr-montant-cell { white-space: nowrap; }

/* ------------------------------------------------------------
   26. FIL D'ANNONCES ET MESSAGERIE SUR PETIT ÉCRAN
   ------------------------------------------------------------
   Deux pages faites d'abord pour l'ordinateur : une barre de composition en
   ligne, une barre d'actions à quatre boutons, une liste et une conversation
   côte à côte. Sur un téléphone tenu d'une main, tout cela déborde ou se
   marche dessus. On ne rétrécit pas : on réorganise.
   ------------------------------------------------------------ */

@media (max-width: 640px) {

    /* ---- Le composeur ---- */
    .composer { padding: 14px; border-radius: 16px; }
    .composer-top { gap: 10px; }
    .composer-top .avatar { width: 38px !important; height: 38px !important; }
    .composer-titre { font-size: 15px; }
    .composer-txt { min-height: 46px; font-size: 15px; }

    /* Les pièces jointes deviennent trois pastilles d'icônes : le mot « Photo »
       ne dit rien de plus que l'appareil photo, et il coûte la moitié de la barre. */
    .composer-bar { gap: 8px; }
    .composer-attach { padding: 9px 12px; gap: 0; }
    .composer-attach span { display: none; }
    .composer-type { max-width: none; flex: 1 1 100%; order: 3; }
    .composer-bar .btn-primary { flex: 1 1 100%; order: 4; margin-left: 0 !important; justify-content: center; }

    /* ---- Les onglets de filtre : on les fait défiler sans montrer d'ascenseur ---- */
    .feed-tabs { scrollbar-width: none; -ms-overflow-style: none; }
    .feed-tabs::-webkit-scrollbar { display: none; }
    .feed-tabs .ft { white-space: nowrap; flex: 0 0 auto; }

    /* ---- La carte de publication ---- */
    .post { padding: 14px; border-radius: 16px; }
    .post-head { gap: 10px; }
    .ph-titre { font-size: 15.5px; }
    .post-media { max-height: 62vh; }

    /* La barre d'actions passe sur deux lignes plutôt que de pousser
       « Épingler » et « Supprimer » hors de l'écran. */
    .post-actions { flex-wrap: wrap; gap: 8px; }
    .post-actions-end { margin-left: auto; flex: 0 0 auto; }
    .act-btn, .react-btn { padding: 8px 12px; min-height: 40px; }

    /* Le nom d'un document ne pousse plus la flèche de téléchargement dehors. */
    .doc-card { padding: 10px 12px; gap: 10px; }
    .doc-nom { font-size: 13.5px; }
    .doc-sub { display: none; }

    /* Le sélecteur de réaction reste dans l'écran, même sur la dernière carte. */
    .react-picker { left: 0; right: auto; max-width: calc(100vw - 48px); flex-wrap: wrap; }

    /* ---- La messagerie ---- */
    /* En conversation, la barre du bas est masquée : plus rien ne protège la
       zone de saisie de la barre gestuelle. C'est ici qu'il faut la rendre. */
    body.msg-conv .imv-bar {
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    .imv-bar { gap: 6px; padding: 8px 10px; }
    .imv-bar input[type=text] { padding: 11px 14px; font-size: 15px; }
    .imv-bar .ib-ico, .imv-ic { width: 42px; height: 42px; flex: 0 0 auto; }
    .imv-send { width: 44px; height: 44px; }

    /* Le menu des pièces jointes en grille de deux : cinq lignes empilées
       obligeaient à viser, la grille tombe sous le pouce. */
    .imv-attach-menu {
        left: 0; right: auto; min-width: 0;
        width: calc(100vw - 28px); max-width: 340px;
        display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
        bottom: calc(54px + env(safe-area-inset-bottom));
    }
    .imv-attach-menu button {
        display: flex; align-items: center; gap: 8px;
        padding: 12px 10px; min-height: 46px; font-size: 13.5px;
    }

    /* L'en-tête de conversation : le nom prime, le reste s'efface. */
    .imv-head { padding: 10px 12px; gap: 10px; }
    .imv-head .hn { font-size: 15px; }
    .imv-head-txt { min-width: 0; }
    .imv-head .hn, .imv-head .hs { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* La liste des discussions : cibles à 56 px, aperçu sur une ligne. */
    .imv-conv { padding: 12px 14px; min-height: 64px; }
    .imv-conv .cn { font-size: 15px; }
    .imv-conv .cp { font-size: 13px; }
}

/* Très petits écrans (≤ 380 px) : on va au plus court sans rien casser. */
@media (max-width: 380px) {
    .composer-attach { padding: 9px 10px; }
    .post-actions { gap: 6px; }
    .act-btn .act-lbl { display: none; }
    .imv-attach-menu { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   27. MESSAGERIE — occuper l'écran, pas une hauteur devinée
   ------------------------------------------------------------
   `height: calc(100dvh - 150px)` était un nombre magique : il ne tenait compte
   ni de la hauteur réelle de la barre du haut, ni du bandeau de dépôt, ni du
   rembourrage du contenu. Résultat, une boîte trop courte laissant une bande
   morte en bas — sur une page dont chaque pixel vertical est du texte lu par
   la famille. On calcule à partir des vraies variables, et le bandeau de dépôt
   ne s'affiche plus ici.
   ------------------------------------------------------------ */
body.msg-page .content {
    padding: var(--sp-3) var(--sp-3) 0;
    max-width: none;
}
body.msg-page .imv {
    height: calc(100dvh - var(--topbar-h) - var(--sp-3));
    min-height: 440px;
}

/* La colonne des discussions : son en-tête reste en place pendant qu'on fait
   défiler la liste — on ne perd pas la recherche en cherchant. */
.imv-list-head { position: sticky; top: 0; z-index: 3; background: var(--surface); }

/* Les actions de l'en-tête de conversation, à droite du nom. */
.imv-head-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.imv-hbtn {
    width: 38px; height: 38px; flex: 0 0 auto; border: 0; cursor: pointer;
    border-radius: 11px; display: grid; place-items: center;
    background: rgba(255,255,255,.14); color: #fff;
    transition: background .15s, transform .15s;
}
.imv-hbtn:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
.imv-hbtn[aria-expanded="true"] { background: var(--or); color: var(--royal-3); }

@media (max-width: 900px) {
    /* La messagerie prend tout : plus de rembourrage, plus de coins arrondis. */
    body.msg-page .content { padding: 0; }
    body.msg-page .imv { height: auto; min-height: 0; }

    /* La recherche n'est plus supprimée sur téléphone : elle se déplie sous
       l'en-tête quand on la demande. La faire disparaître revenait à retirer
       une fonction, pas à l'adapter. */
    .imv-head { flex-wrap: wrap; }
    .imv-head-search {
        display: none; order: 9; flex: 1 0 100%;
        width: auto; margin: 8px 0 0;
    }
    .imv-head.search-open .imv-head-search { display: block; }
    .imv-head-search input { width: 100%; }
}

@media (min-width: 901px) {
    /* Sur grand écran la recherche est toujours là : le bouton n'a pas lieu d'être. */
    .imv-hbtn--search { display: none; }
}

/* ------------------------------------------------------------
   28. VOILE D'ACCUEIL — l'application installée
   ------------------------------------------------------------
   Entre l'écran de lancement du système, qui s'efface dès que le navigateur a
   la main, et la page effectivement peinte, il reste un trou blanc. C'est lui
   qui trahit un site web déguisé en application. Ce voile le comble, dans le
   même bleu nuit, avec le sceau — et il s'efface tout seul.

   Il est écrit dans le HTML et stylé ici, sans image de fond ni police
   distante : il doit s'afficher avant que quoi que ce soit ne soit téléchargé.
   ------------------------------------------------------------ */
.ak-voile {
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-content: center; justify-items: center;
    gap: 14px; padding: 32px;
    background: #0E2E63;                 /* identique aux images de lancement */
    background-image: radial-gradient(120% 80% at 50% 34%, #17408A 0%, #0E2E63 55%, #08214B 100%);
    color: #fff; text-align: center;
    opacity: 1; transition: opacity .42s ease, transform .42s ease;
}
.ak-voile[hidden] { display: none; }

.ak-voile-sceau {
    width: min(52vw, 200px); height: auto;
    filter: drop-shadow(0 14px 38px rgba(0, 0, 0, .5));
    animation: ak-voile-sceau .5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ak-voile-sceau { from { opacity: 0; transform: scale(.9); } }

.ak-voile-nom {
    font-family: var(--serif, Georgia, serif);
    font-size: clamp(21px, 6vw, 29px); line-height: 1.24; letter-spacing: -.01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
    animation: ak-voile-texte .5s .08s cubic-bezier(.22, 1, .36, 1) both;
}
.ak-voile-nom b { font-weight: 800; }

.ak-voile-devise {
    font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
    color: #EFCE81;                       /* l'or du sceau, éclairci pour le fond sombre */
    text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
    animation: ak-voile-texte .5s .14s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ak-voile-texte { from { opacity: 0; transform: translateY(8px); } }

/* Un filet doré qui progresse : il occupe l'attente sans prétendre mesurer
   quoi que ce soit — une fausse barre de chargement serait un mensonge. */
.ak-voile-jauge {
    width: 118px; height: 4px; margin-top: 14px; border-radius: 3px;
    background: rgba(255, 255, 255, .18); overflow: hidden;
}
.ak-voile-jauge i {
    display: block; width: 40%; height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #E3BC63, #C9992F);
    animation: ak-voile-jauge 1.1s ease-in-out infinite;
}
@keyframes ak-voile-jauge {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.ak-voile--part { opacity: 0; transform: scale(1.02); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .ak-voile, .ak-voile-sceau, .ak-voile-nom, .ak-voile-devise, .ak-voile-jauge i {
        animation: none; transition: opacity .2s linear;
    }
}

/* ------------------------------------------------------------
   29. CONVERSATIONS — débordement supprimé, défilement à l'or du sceau
   ------------------------------------------------------------
   La barre horizontale du chat venait du rembourrage de `.imv-wall` :
   `clamp(14px, 4vw, 60px)` se calcule sur la FENÊTRE, pas sur le conteneur. Sur
   un écran de 1400 px cela faisait 112 px de marges dans une boîte de 380 — il
   ne restait plus la place d'une image de 260 px, et le contenu débordait.

   On supprime la cause, puis TOUTE barre horizontale : dans une conversation
   rien ne se lit de gauche à droite, une barre y est toujours un défaut.
   La barre verticale, elle, reste — sans elle on ne sait plus où l'on en est —
   mais devient un filet d'or en retrait du bord, presque effacé au repos.
   ------------------------------------------------------------ */

/* ---- La cause : le rembourrage et les médias ---- */
.chat-widget .imv-wall { padding: 14px 12px; }
.chat-widget .imv-b { max-width: 86%; }
/* L'image est enveloppée dans un <a class="msg-imgw"> : borner l'image seule
   ne suffisait pas, c'est le lien qui portait la largeur. */
.chat-widget .imv-b .msg-imgw { display: block; max-width: 100%; }
.chat-widget .imv-b .msg-img,
.chat-widget .imv-b .msg-vid { max-width: 100%; height: auto; }

/* Le micro et la flèche de téléchargement sont désormais des icônes SVG :
   elles héritent de la couleur du texte et doivent s'aligner sur la ligne. */
.imv-b .msg-aud-ico, .imv-b .msg-doc-ico, .imv-b .msg-doc-dl { display: inline-grid; place-items: center; }
.imv-b .msg-aud-ico { color: var(--ink-2); }
.chat-widget .imv-b .msg-aud audio { max-width: 100%; }
.chat-widget .imv-b .msg-doc { min-width: 0; }

/* Un mot très long — un lien collé, par exemple — ne pousse plus la bulle dehors. */
.imv-b { overflow-wrap: anywhere; }

/* ---- Plus aucune barre horizontale, nulle part dans une conversation ---- */
.chat-widget .imv-wall, .imv-wall, .imv-list, .cw-list {
    overflow-x: hidden;
    overscroll-behavior: contain;   /* le défilement ne « fuit » pas sur la page */
}
.chat-widget .imv-wall::-webkit-scrollbar:horizontal,
.imv-wall::-webkit-scrollbar:horizontal,
.imv-list::-webkit-scrollbar:horizontal,
.cw-list::-webkit-scrollbar:horizontal { height: 0; display: none; }

/* ---- La barre verticale : un filet d'or, en retrait ---- */
.chat-widget .imv-wall, .imv-wall, .imv-list, .cw-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(201, 153, 47, .34) transparent;   /* Firefox */
}
.chat-widget .imv-wall::-webkit-scrollbar,
.imv-wall::-webkit-scrollbar,
.imv-list::-webkit-scrollbar,
.cw-list::-webkit-scrollbar { width: 10px; }

.chat-widget .imv-wall::-webkit-scrollbar-track,
.imv-wall::-webkit-scrollbar-track,
.imv-list::-webkit-scrollbar-track,
.cw-list::-webkit-scrollbar-track { background: transparent; }

/* Le filet fait 4 px de large : les 3 px de bordure transparente de chaque côté
   l'écartent du bord et lui donnent l'air de flotter sur le contenu. */
.chat-widget .imv-wall::-webkit-scrollbar-thumb,
.imv-wall::-webkit-scrollbar-thumb,
.imv-list::-webkit-scrollbar-thumb,
.cw-list::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg, #E3BC63 0%, #C9992F 100%);
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: 999px;
    opacity: .38;
    transition: opacity .18s ease;
}
/* Il se révèle quand la main s'approche, et se pose franchement quand on l'attrape. */
.chat-widget .imv-wall:hover::-webkit-scrollbar-thumb,
.imv-wall:hover::-webkit-scrollbar-thumb,
.imv-list:hover::-webkit-scrollbar-thumb,
.cw-list:hover::-webkit-scrollbar-thumb { opacity: .8; }

.chat-widget .imv-wall::-webkit-scrollbar-thumb:active,
.imv-wall::-webkit-scrollbar-thumb:active,
.imv-list::-webkit-scrollbar-thumb:active,
.cw-list::-webkit-scrollbar-thumb:active { opacity: 1; }

/* Sur fond sombre l'or brille trop : on le retient. */
html[data-theme="dark"] .chat-widget .imv-wall,
html[data-theme="dark"] .imv-wall,
html[data-theme="dark"] .imv-list,
html[data-theme="dark"] .cw-list { scrollbar-color: rgba(224, 180, 78, .30) transparent; }
html[data-theme="dark"] .chat-widget .imv-wall::-webkit-scrollbar-thumb,
html[data-theme="dark"] .imv-wall::-webkit-scrollbar-thumb,
html[data-theme="dark"] .imv-list::-webkit-scrollbar-thumb,
html[data-theme="dark"] .cw-list::-webkit-scrollbar-thumb {
    background-image: linear-gradient(180deg, #E0B44E 0%, #A2761E 100%);
    opacity: .32;
}

/* Au doigt, le système affiche déjà une barre qui s'efface seule : on n'en
   ajoute pas une seconde. */
@media (pointer: coarse) {
    .chat-widget .imv-wall::-webkit-scrollbar,
    .imv-wall::-webkit-scrollbar,
    .imv-list::-webkit-scrollbar,
    .cw-list::-webkit-scrollbar { width: 0; height: 0; }
    .chat-widget .imv-wall, .imv-wall, .imv-list, .cw-list { scrollbar-width: none; }
}

/* ------------------------------------------------------------
   30. FINITIONS — ce que l'audit a mis au jour
   ------------------------------------------------------------ */

/* La période couverte d'un paiement : la flèche entre deux mois n'avait aucun
   style, elle sortait en caractère nu au milieu du texte. */
.jr-periode { white-space: nowrap; }
.jr-fleche { color: var(--or); font-weight: 800; margin: 0 3px; }

/* `auth-shell--admin` était employée sur l'écran de connexion administrateur
   sans qu'aucune règle ne lui corresponde : les deux connexions étaient donc
   rigoureusement identiques. L'espace d'administration se distingue partout
   ailleurs par sa nuit plus profonde — ici aussi, désormais. */
.auth-shell--admin { --royal: var(--royal-2); }
.auth-shell--admin .auth-aside,
.auth-shell--admin .auth-visuel { background: var(--grad-nuit, linear-gradient(168deg, #143A78, #0E2E63 55%, #071C40)); }

/* Les croix de fermeture des bandeaux PWA et des aperçus de pièce jointe sont
   des caractères typographiques : on leur donne au moins une cible tactile
   correcte et un dessin net. */
.pwa-x, .pwa-help-x, .pv-x {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    border: 0; cursor: pointer; font-size: 15px; line-height: 1;
    background: rgba(0, 0, 0, .06); color: var(--ink-2);
    transition: background .15s, color .15s;
}
.pwa-x:hover, .pwa-help-x:hover, .pv-x:hover { background: rgba(0, 0, 0, .12); color: var(--ink); }
html[data-theme="dark"] .pwa-x, html[data-theme="dark"] .pwa-help-x, html[data-theme="dark"] .pv-x {
    background: rgba(255, 255, 255, .10); color: var(--ink-2);
}

/* Une image dont le fichier a disparu du disque affichait l'icône cassée du
   navigateur au milieu d'une publication. Un aplat discret vaut mieux. */
.post-media, .msg-img, .msg-vid { background: var(--surface-2); }

/* ------------------------------------------------------------
   31. PILOTAGE — séparer ce qui est disponible de ce qui est engagé
   ------------------------------------------------------------
   Un solde de caisse additionne l'argent du mois et celui versé d'avance pour
   des mois à venir. Les afficher en un seul chiffre invite à dépenser deux fois
   le même franc. Ces trois blocs les séparent, et la jauge montre d'un coup
   d'œil la part qui ne s'appartient pas.
   ------------------------------------------------------------ */
.pil-trio {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px; margin-bottom: var(--sp-4);
    background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.pil-bloc { background: var(--surface); padding: 14px 16px; }
.pil-lbl {
    display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-3);
}
.pil-val { display: block; margin-top: 5px; font-size: 21px; letter-spacing: -.02em; }
.pil-sous { display: block; margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.pil-bloc--engage .pil-val { color: var(--or-txt); }
.pil-bloc--dispo  .pil-val { color: var(--ok); }

/* La jauge : l'or est ce qui est déjà dû, le vert ce qui reste libre. */
.pil-jauge {
    height: 10px; border-radius: 999px; overflow: hidden;
    background: var(--ok-bg); position: relative;
}
.pil-jauge-engage {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #E3BC63, #C9992F);
}

/* ------------------------------------------------------------
   32. GRAPHES — SVG écrit à la main, couleurs pilotées par le CSS
   ------------------------------------------------------------
   Aucune bibliothèque de graphiques : la PWA doit s'afficher hors connexion, et
   douze barres ne justifient pas 80 Ko de dépendance.

   Règle absolue : aucune couleur n'est écrite dans le SVG. Tout descend d'ici,
   sinon le mode sombre serait illisible. Les dégradés eux-mêmes n'ont pas de
   couleur dans le balisage : leurs arrêts portent une classe, et c'est le CSS
   qui les peint.

   Le bleu dit ce qui est recouvré, l'or ce qui est déjà sécurisé pour les mois
   à venir. La forme creuse, derrière, est ce que la famille devrait verser.
   ------------------------------------------------------------ */
.gc-cadre { width: 100%; }

/* `height: auto` et PAS de `preserveAspectRatio="none"` : c'était le défaut
   d'origine. En étirant le dessin de façon non uniforme, il transformait un
   trait de 3 px en coin noir écrasé et déformait chaque lettre. Le SVG garde
   donc ses proportions, et sa hauteur suit sa largeur. */
.gc { width: 100%; height: auto; display: block; overflow: visible; }

/* ---- Les dégradés : une seule teinte à deux opacités ----
   Deux variables de couleur par thème auraient doublé la palette pour rien :
   la même encre, plus ou moins diluée, suffit et suit automatiquement le
   mode sombre. */
.gs-royal-h { stop-color: var(--royal-1); }
.gs-royal-b { stop-color: var(--royal); }
.gs-or-h    { stop-color: var(--or-1); }
.gs-or-b    { stop-color: var(--or); }
.gs-aire-h  { stop-color: var(--royal); stop-opacity: .28; }
.gs-aire-b  { stop-color: var(--royal); stop-opacity: 0; }
html[data-theme="dark"] .gs-or-h { stop-color: #EFCC79; }
html[data-theme="dark"] .gs-aire-h { stop-opacity: .38; }

/* ---- La grille chiffrée ----
   Sans graduation, une barre n'est qu'une hauteur relative : on voit qu'elle
   dépasse sa voisine, on ne peut rien en conclure. C'est ce qui manquait le
   plus aux premiers graphes. */
.gc-grille { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 6; }
.gc-grille--socle { stroke: var(--line-2, var(--line)); stroke-width: 1.5; stroke-dasharray: none; }
.gc-grad {
    font-size: 17px; font-weight: 700; font-family: inherit; fill: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

/* ---- Les barres ---- */
.gc-attendu { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.gc-collecte.gc-passe { fill: url(#cvRoyal); }
.gc-collecte.gc-futur { fill: url(#cvOr); }

.gc-taux {
    font-size: 21px; font-weight: 800; font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.gc-taux.gc-passe { fill: var(--royal); }
.gc-taux.gc-futur { fill: var(--or-txt); }

.gc-mois {
    font-size: 19px; font-weight: 600; font-family: inherit; fill: var(--ink-3);
}
.gc-mois--passe { fill: var(--ink-2); font-weight: 700; }

.gc-valeur {
    font-size: 18px; font-weight: 700; font-family: inherit; fill: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.gc-valeur--fort { font-size: 22px; font-weight: 800; fill: var(--royal); }

/* ---- Le survol ----
   La zone sensible couvre toute la colonne : demander à l'utilisateur de viser
   une barre de 3 px de haut serait une petite cruauté. L'aplat n'apparaît qu'au
   survol, et l'info-bulle native du navigateur porte le détail chiffré. */
.gc-survol { fill: var(--ink); opacity: 0; transition: opacity .14s ease; }
.gc-col:hover .gc-survol { opacity: .055; }
.gc-col { cursor: default; }

/* ---- Le repère d'aujourd'hui ---- */
.gc-aujourdhui { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 5 5; opacity: .5; }
.gc-borne-fond { fill: var(--danger-bg); }
.gc-borne {
    font-size: 16px; font-weight: 800; font-family: inherit; fill: var(--danger);
    text-transform: uppercase; letter-spacing: .04em;
}

/* ---- Les courbes ---- */
.gc-courbe {
    fill: none; stroke: var(--royal); stroke-width: 3.5;
    stroke-linejoin: round; stroke-linecap: round;
}
.gc-aire { stroke: none; }
.gc-point  { fill: var(--surface); stroke: var(--royal); stroke-width: 3.5; }
.gc-point--fort { stroke-width: 4.5; }

/* ---- La légende : elle nomme les couleurs, sinon le graphe est un décor ---- */
.gc-legende {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    margin-top: 14px; font-size: 12.5px; color: var(--ink-2);
}
.gc-legende > span { display: inline-flex; align-items: center; gap: 7px; }
.gc-legende-det { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gc-puce { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
.gc-puce--attendu { background: var(--surface-2); border: 1px solid var(--line); }
.gc-puce--passe   { background: var(--royal); }
.gc-puce--futur   { background: var(--or); }
.gc-puce--inaction { background: var(--ink-3); opacity: .6; }
.gc-puce--objectif { background: var(--or); }
.gc-puce--anticipation { background: var(--ok); }
.gc-puce--a_lheure     { background: var(--royal); }
.gc-puce--rattrapage   { background: var(--or); }

/* L'astuce de survol n'a de sens qu'avec un pointeur : sur un écran tactile,
   « survolez » ne veut rien dire. */
.gc-astuce { margin-left: auto; color: var(--ink-3); font-size: 11.5px; }
.gc-astuce .icn { vertical-align: -2px; }
@media (hover: none) { .gc-astuce { display: none; } }

/* ---- Sous trois points, les chiffres bruts plutôt qu'une fausse courbe ---- */
.gc-brutes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px; margin-bottom: var(--sp-3);
    background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.gc-brut { background: var(--surface); padding: 12px 14px; }
.gc-brut span {
    display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-3);
}
.gc-brut strong { display: block; margin-top: 3px; font-size: 17px; font-variant-numeric: tabular-nums; }

/* ---- Renfort : la marche vers l'échéance ---- */
.gr-inaction {
    fill: none; stroke: var(--ink-3); stroke-width: 3; stroke-dasharray: 2 9;
    stroke-linecap: round; opacity: .75;
}
.gr-objectif { stroke: var(--or); stroke-width: 2; stroke-dasharray: 3 6; }
.gr-objectif-fond { fill: var(--or-pale); }
.gr-objectif-txt {
    font-size: 17px; font-weight: 800; font-family: inherit; fill: var(--or-txt);
    font-variant-numeric: tabular-nums;
}
.gr-echeance { stroke: var(--royal); stroke-width: 2; stroke-dasharray: 5 5; opacity: .55; }
.gr-echeance-txt {
    font-size: 16px; font-weight: 800; font-family: inherit; fill: var(--royal);
    text-transform: uppercase; letter-spacing: .04em;
}

/* La répartition par moment : trois parts sur une seule barre. Un camembert
   pour trois valeurs serait de la décoration. Le pourcentage est écrit DANS le
   segment quand il y tient : l'œil n'a alors pas à faire l'aller-retour vers
   la légende. */
.gr-barre {
    display: flex; height: 30px; border-radius: 999px; overflow: hidden;
    background: var(--surface-2); border: 1px solid var(--line);
}
.gr-seg {
    display: flex; align-items: center; justify-content: center; height: 100%;
    min-width: 0; color: #fff; font-size: 12px; font-weight: 800;
    font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.gr-seg--anticipation { background: linear-gradient(180deg, var(--ok), var(--emeraude)); }
.gr-seg--a_lheure     { background: linear-gradient(180deg, var(--royal-1), var(--royal)); }
.gr-seg--rattrapage   { background: linear-gradient(180deg, var(--or-1), var(--or)); }

/* ---- L'apparition ----
   Les barres poussent, la courbe se trace. Une seule fois, en moins d'une
   seconde : c'est ce qui fait la différence entre un tableau de bord et une
   image. Coupée net dès que le système demande moins d'animation. */
@keyframes gcPousse { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes gcTrace  { to { stroke-dashoffset: 0; } }
@keyframes gcParait { from { opacity: 0; } to { opacity: 1; } }

.gc-collecte, .gc-attendu {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: gcPousse .55s cubic-bezier(.22, 1, .36, 1) both;
}
.gc-courbe {
    stroke-dasharray: 3000; stroke-dashoffset: 3000;
    animation: gcTrace 1.1s cubic-bezier(.4, 0, .2, 1) forwards;
}
.gc-aire, .gc-point, .gc-valeur, .gc-taux, .gr-inaction {
    animation: gcParait .5s ease-out .45s both;
}

@media (prefers-reduced-motion: reduce) {
    .gc-collecte, .gc-attendu, .gc-aire, .gc-point, .gc-valeur, .gc-taux, .gr-inaction {
        animation: none;
    }
    .gc-courbe { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
}

@media (max-width: 700px) {
    /* Sur téléphone, douze colonnes écrasées deviennent illisibles : on laisse
       le graphe défiler latéralement plutôt que de le comprimer. La barre de
       défilement, elle, reste invisible. */
    .gc-cadre { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .gc-cadre::-webkit-scrollbar { display: none; }
    .gc { min-width: 640px; }
    .gc-legende { font-size: 12px; gap: 6px 14px; }
    .gc-astuce { display: none; }
}

/* ------------------------------------------------------------
   33. IMPRESSION — les documents familiaux méritent du soin
   ------------------------------------------------------------ */
@media print {
    body.app { background: #fff !important; }
    .content { max-width: none; }
    .card, .stat { border: 1px solid #D8D2C6 !important; }
    .card::before, .frieze { display: none !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
}

/* ------------------------------------------------------------
   34. INCIDENTS TECHNIQUES
   ------------------------------------------------------------
   Un journal se lit en diagonale : la reference d'abord, puisqu'elle est ce
   que le membre cite au telephone, le message ensuite. La trace d'execution
   reste pliee — elle ne sert qu'une fois le bon incident trouve.
   ------------------------------------------------------------ */
.inc-recherche { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); }
.inc-recherche input { flex: 1 1 240px; min-width: 0; }

.inc-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
    background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.inc { background: var(--surface); padding: 14px 16px; }

.inc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 7px; }
.inc-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 800;
    letter-spacing: .08em; color: var(--danger); background: var(--danger-bg);
    border-radius: 8px; padding: 3px 9px; }
.inc-type { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--ink-3); }
.inc-date { margin-left: auto; font-size: 12px; color: var(--ink-3); display: inline-flex;
    align-items: center; gap: 5px; }
.inc-date .icn { vertical-align: -2px; }
.inc-msg { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; }

.inc-plus { margin-top: 9px; }
.inc-plus summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--royal); }
.inc-plus pre { margin: 9px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--surface-2);
    border: 1px solid var(--line); font-size: 12px; line-height: 1.55; color: var(--ink-2);
    overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 640px) { .inc-date { margin-left: 0; flex-basis: 100%; } }

/* ------------------------------------------------------------------
   PWA — fenêtre « ouvrez d'abord dans votre navigateur »
   ------------------------------------------------------------------
   S'affiche quand la page tourne dans le mini-navigateur de WhatsApp ou de
   Facebook, d'où l'installation ne pose qu'un raccourci. Le lien est donné en
   clair, avec un bouton pour le copier : c'est le chemin le plus court vers
   Chrome quand « Ouvrir dans le navigateur » se cache dans un menu. */
.pwa-help-card p { margin: 0 0 14px; color: var(--ink-2); font-size: 14px; line-height: 1.5; text-align: center; }
.pwa-help-card p b { color: var(--ink); }
.pwa-help-lien {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
}
.pwa-help-lien code {
    display: block; padding: 9px 11px; border-radius: 9px;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--royal); font-size: 13px; text-align: center;
    overflow-wrap: anywhere;
}
.pwa-help-lien .pwa-btn { width: 100%; }


/* ==================================================================
   INSTALLATION DE L'APPLICATION
   ==================================================================
   Une seule feuille, trois formats selon la place disponible :

     téléphone            carte qui monte du bas, largeur pleine
     tablette / bureau    boîte centrée, 460 px
     écran bas (paysage)  la carte devient défilante plutôt que rognée

   Ce dernier cas était le trou de l'ancienne version : en paysage sur un
   téléphone, la carte dépassait de l'écran et le bouton « Installer »
   se retrouvait hors de portée, invisible. On ne s'en apercevait qu'une
   fois le téléphone tourné.
   ------------------------------------------------------------------ */
.inst { position: fixed; inset: 0; z-index: 600; pointer-events: none; }
body.inst-ouverte { overflow: hidden; }

.inst-fond {
    position: absolute; inset: 0; pointer-events: auto;
    background: rgba(7, 22, 45, .46);
    opacity: 0; transition: opacity .3s ease;
}
.inst.est-ouverte .inst-fond { opacity: 1; }

.inst-carte {
    position: absolute; left: 50%; bottom: 0;
    width: min(460px, 100%);
    max-height: calc(100dvh - 24px);
    display: flex; flex-direction: column;
    transform: translate(-50%, 100%);
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
    pointer-events: auto;
    background: var(--surface);
    border: 1px solid var(--line); border-bottom: 0;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -20px 52px rgba(7, 22, 45, .30);
    overflow: hidden;
}
.inst.est-ouverte .inst-carte { transform: translate(-50%, 0); }

/* La poignée : le signe convenu qu'une feuille se manipule. */
.inst-poignee {
    flex: 0 0 auto; width: 44px; height: 4px; margin: 10px auto 4px;
    border-radius: 2px; background: var(--line);
}

/* Le corps défile, le pied reste : le bouton d'action ne quitte jamais
   l'écran, quelle que soit la hauteur disponible. */
.inst-corps { flex: 1 1 auto; overflow-y: auto; padding: 12px 22px 4px; -webkit-overflow-scrolling: touch; }
.inst-pied  { flex: 0 0 auto; padding: 14px 22px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid transparent; }

.inst-tete { display: flex; gap: 14px; align-items: center; }
.inst-sceau {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 15px;
    background: var(--surface-2); padding: 4px;
}
.inst-titres h2 {
    margin: 0 0 3px; font-size: 18px; line-height: 1.24;
    letter-spacing: -.015em; color: var(--ink);
}
.inst-titres p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }

.inst-atouts {
    list-style: none; margin: 18px 0 0; padding: 16px 0 0;
    border-top: 1px solid var(--line-2, var(--line));
    display: flex; flex-direction: column; gap: 13px;
}
.inst-atouts li { display: flex; gap: 12px; align-items: center; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.inst-ic {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 11px;
    background: var(--or-pale, rgba(201, 153, 47, .12)); color: var(--or);
}

/* L'or du sceau sur le bleu roi : le seul accent doré de la feuille. */
.inst-go {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 16px; border: 0; border-radius: 15px; cursor: pointer;
    background: linear-gradient(135deg, var(--or), var(--or-2, var(--or)));
    color: #0E2E63; font-size: 16px; font-weight: 800; letter-spacing: -.01em;
    box-shadow: 0 8px 22px rgba(201, 153, 47, .30);
    transition: transform .12s ease, box-shadow .18s ease;
}
.inst-go:active { transform: scale(.985); box-shadow: 0 4px 12px rgba(201, 153, 47, .24); }
.inst-go:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; }

.inst-tard {
    display: block; width: 100%; margin-top: 6px; padding: 13px;
    border: 0; background: none; cursor: pointer; border-radius: 12px;
    color: var(--ink-2); font-size: 14.5px; font-weight: 600;
}
.inst-tard:hover { background: var(--surface-2); color: var(--ink); }
.inst-tard:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }

/* ---------------- La marche à suivre ---------------- */
.inst-guide-titre { margin: 4px 0 16px; font-size: 18px; letter-spacing: -.015em; color: var(--ink); text-align: center; }
.inst-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.inst-etapes li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink); }
.inst-etapes b { color: var(--royal); }
.inst-num {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--royal); color: #fff; font-size: 13px; font-weight: 800;
}
/* Les pictogrammes du système, dessinés dans le texte : c'est ce que
   l'utilisateur cherche des yeux sur son écran. */
.inst-glyphe { display: inline-block; vertical-align: -5px; margin: 0 2px; color: var(--royal); }
.inst-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

.inst-lien {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 10px;
}
.inst-lien code {
    padding: 10px 12px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--royal); font-size: 13px; text-align: center; overflow-wrap: anywhere;
}
.inst-copie {
    padding: 11px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
    background: var(--surface); color: var(--royal); font-size: 14px; font-weight: 700;
}
.inst-copie:hover { background: var(--surface-2); }

/* ---------------- La pastille repliée ----------------
   Ce qui reste après « Plus tard ». Tant que l'application n'est pas
   installée, le chemin pour l'installer reste sous le pouce, sans rien
   recouvrir. */
.inst-pastille {
    position: fixed; z-index: 590;
    left: 50%; bottom: calc(18px + env(safe-area-inset-bottom));
    transform: translate(-50%, 26px); opacity: 0;
    transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .26s ease;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 19px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
    background: var(--surface); color: var(--royal); font-size: 13.5px; font-weight: 700;
    box-shadow: 0 10px 26px rgba(7, 22, 45, .20);
}
.inst-pastille.est-ouverte { transform: translate(-50%, 0); opacity: 1; }
.inst-pastille:active { transform: translate(-50%, 1px); }
.inst-pastille:focus-visible { outline: 2px solid var(--royal); outline-offset: 3px; }
@media (max-width: 900px) {
    .inst-pastille { bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom) + 14px); }
}

/* ---------------- Tablette et grand écran ----------------
   La carte cesse d'être une feuille collée au bas : elle se centre, comme
   une boîte de dialogue. Sur un iPad, une feuille ancrée en bas d'un écran
   de 1 024 px de haut paraît perdue. */
@media (min-width: 600px) and (min-height: 560px) {
    .inst-carte {
        top: 50%; bottom: auto;
        transform: translate(-50%, -46%) scale(.98);
        opacity: 0;
        border: 1px solid var(--line); border-radius: 22px;
        max-height: min(86dvh, 720px);
        box-shadow: 0 30px 70px rgba(7, 22, 45, .34);
        transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .24s ease;
    }
    .inst.est-ouverte .inst-carte { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    .inst-poignee { display: none; }
    .inst-corps { padding: 26px 28px 6px; }
    .inst-pied  { padding: 16px 28px 24px; }
    .inst-sceau { width: 62px; height: 62px; }
    .inst-titres h2 { font-size: 20px; }
}

/* ---------------- Écran bas : téléphone en paysage ----------------
   Le pied se sépare visuellement du corps défilant, sinon on ne devine pas
   qu'il reste du contenu au-dessus. */
@media (max-height: 560px) {
    .inst-carte { max-height: calc(100dvh - 12px); }
    .inst-corps { padding: 8px 18px 4px; }
    .inst-pied  { padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top-color: var(--line); }
    .inst-tete  { gap: 11px; }
    .inst-sceau { width: 44px; height: 44px; border-radius: 12px; }
    .inst-titres h2 { font-size: 16px; }
    .inst-titres p  { font-size: 12.5px; }
    .inst-atouts { margin-top: 12px; padding-top: 12px; gap: 9px; }
    .inst-atouts li { font-size: 12.5px; }
    .inst-ic { width: 28px; height: 28px; border-radius: 9px; }
    .inst-go { padding: 13px; font-size: 15px; }
    .inst-tard { padding: 9px; }
}

/* ---------------- Très petits écrans ---------------- */
@media (max-width: 340px) {
    .inst-corps, .inst-pied { padding-left: 16px; padding-right: 16px; }
    .inst-titres h2 { font-size: 16.5px; }
    .inst-atouts li, .inst-etapes li { font-size: 12.5px; }
    .inst-pastille { font-size: 12.5px; padding: 10px 15px; }
}

html[data-theme="dark"] .inst-carte { box-shadow: 0 -20px 52px rgba(0, 0, 0, .58); }
html[data-theme="dark"] .inst-pastille { box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }

@media (prefers-reduced-motion: reduce) {
    .inst-carte, .inst-fond, .inst-pastille, .inst-go { transition: opacity .01s linear; }
    .inst-carte { transform: translate(-50%, 0); }
    .inst.est-ouverte .inst-carte { transform: translate(-50%, 0); }
}

/* ==================================================================
   TUILES CLIQUABLES DU TABLEAU DE BORD
   ==================================================================
   Une tuile qui mène quelque part doit le dire avant le clic, sans pour
   autant se déguiser en bouton : le chevron et le léger soulèvement au
   survol suffisent. Les tuiles inertes gardent exactement leur aspect
   d'avant — c'est la différence entre les deux qui porte l'information. */
a.stat, a.stat:hover, a.stat:visited { text-decoration: none; color: inherit; }
a.stat { position: relative; padding-right: 34px; }

.stat-fleche {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    display: grid; place-items: center;
    color: var(--ink-3); opacity: .55;
    transition: opacity .16s ease, transform .16s ease;
}
.stat-lien:hover {
    border-color: var(--royal);
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
}
.stat-lien:hover .stat-fleche { opacity: 1; transform: translateY(-50%) rotate(-90deg) translateX(2px); }
.stat-lien:active { transform: translateY(0); }
.stat-lien:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.stat-lien { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }

/* Les tuiles à deux populations (à jour / en retard, hommes / femmes) :
   chaque moitié est son propre lien, elles doivent donc se distinguer du
   texte qui les entoure sans crier. */
.stat .lbl a, .stat .val a { color: var(--royal); text-decoration: none; font-weight: 700; }
.stat .lbl a:hover, .stat .val a:hover { text-decoration: underline; }

/* Bandeau de fraîcheur des chiffres */
.maj-bandeau {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: -4px 0 18px; font-size: 12.5px; color: var(--ink-2);
}
.maj-bandeau .pastille {
    width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
.maj-bandeau button {
    border: 1px solid var(--line); background: var(--surface); cursor: pointer;
    padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
    color: var(--royal);
}
.maj-bandeau button:hover { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) {
    .stat-lien, .stat-fleche { transition: none; }
    .stat-lien:hover { transform: none; }
}