/* ============================================================
   SIKO — Charte Graphique
   Palette: #1CA7D8 (bleu ciel), #0E1A24 (noir/nuit), #FFFFFF (blanc), #E6F4FB (bleu clair)
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #1CA7D8;
    --primary-dark: #0E1A24;
    --accent: #1CA7D8;
    /* Variantes ACCESSIBLES (WCAG AA). Le bleu de marque #1CA7D8 n'offre que
       2,77:1 avec du blanc — insuffisant (4,5 requis) et difficile à lire en
       plein soleil sur un écran d'entrée de gamme. On garde #1CA7D8 pour les
       dégradés et le décor, et on utilise ces teintes dès qu'un TEXTE doit
       être lisible (fond de bouton, texte coloré sur fond clair). */
    --primary-strong: #147597;  /* 5,22:1 avec blanc — FOND de bouton */
    --success-strong: #12823b;  /* 4,90:1 avec blanc */
    /* Couleurs de TEXTE coloré posé sur une surface. Elles doivent s'inverser
       selon le thème : foncées sur fond clair, CLAIRES sur fond sombre. D'où
       des variables distinctes des fonds de boutons ci-dessus (qui, eux, gardent
       la même teinte dans les deux thèmes, avec du texte blanc). */
    --primary-text: #147597;    /* 5,22:1 sur blanc */
    --success-text: #12823b;    /* 4,90:1 sur blanc */
    --light: #E6F4FB;
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;
    --danger: #dc2626;
    --warning: #f59e0b;
    --success: #16a34a;
    --info: #2563eb;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --text-muted: var(--gray-500);
    --text-secondary: var(--gray-700);
    --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    background: var(--gray-50);
    color: var(--gray-900);
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Un seul système de police pour tout le site : les titres utilisaient
   Georgia (serif), en décalage avec le corps de texte en sans-serif. */
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; color: var(--primary-dark); }

/* ---- AUTH PAGES ---- */
.auth-body {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-strong) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

/* Bouton « retour à l'accueil » (login / register) */
.auth-back {
    position: fixed;
    top: 1.1rem;
    left: 1.1rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 50px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.auth-back:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.5);
    transform: translateX(-2px);
    text-decoration: none;
}
.auth-back svg { width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 480px) {
    /* Le bouton se réduisait à une icône de 37px (font-size:0) sur un fond
       blanc à 10% d'opacité : quasi invisible sur le dégradé sombre, sous le
       seuil tactile de 44px, et sans libellé pour dire ce qu'il fait.
       Pastille pleine en bleu primaire — et non en blanc : le bouton passe
       au-dessus de la carte blanche, où un fond blanc redeviendrait invisible.
       Le bleu tient sur les deux fonds. */
    .auth-back {
        font-size: 0.78rem;
        font-weight: 700;
        gap: 0.4rem;
        padding: 0 0.9rem;
        min-height: 44px;
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    }
    .auth-back:hover {
        background: var(--primary);
        border-color: var(--primary);
    }
    .auth-back svg { width: 17px; height: 17px; }
}

.auth-container {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
}

.auth-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo h1 {
    font-size: 2.2rem;
    color: var(--primary);
    letter-spacing: 2px;
}

.auth-logo .tagline {
    color: var(--accent);
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 0.3rem;
}

.auth-logo-img {
    width: 220px;
    max-width: 75%;
    height: auto;
    display: inline-block;
}

/* ---- STEPS INDICATOR ---- */
.steps {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--gray-200);
    color: var(--gray-500);
    transition: all 0.3s;
}

.step-dot.active {
    background: var(--primary);
    color: var(--white);
}

.step-dot.done {
    background: var(--accent);
    color: var(--white);
}

/* ---- FORMS ---- */
.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 0.4rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: border-color 0.2s;
    background: var(--white);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(28, 167, 216,0.1);
}

.form-control.error {
    border-color: var(--danger);
}

/* Champ mot de passe avec bouton œil (module JS initPasswordToggle).
   .pw-field enveloppe l'input et le bouton ; l'œil est positionné dans le
   champ, à droite, sans chevaucher le texte saisi ni casser .form-control. */
.pw-field {
    position: relative;
    display: block;
}
.pw-field .form-control {
    padding-right: 2.75rem;
}
.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.pw-toggle:hover { color: var(--primary); }
.pw-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
.pw-toggle svg { width: 20px; height: 20px; }

/* Champ verrouillé (ex. réglages figés pendant un cycle de tontine) :
   présentation UNIFORME entre <input> et <select>. Par défaut les navigateurs
   grisent le texte d'un select désactivé mais gardent celui d'un input foncé —
   d'où un mélange incohérent de champs « actifs » et « inactifs ». On force ici
   un rendu « lecture seule » homogène : fond doux, texte atténué, curseur
   interdit. Les jetons étant thématiques, le mode sombre suit automatiquement. */
.form-control:disabled,
.form-control[readonly] {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted); /* Safari/iOS grise le texte saisi */
    cursor: not-allowed;
    opacity: 1;                                 /* annule l'assombrissement natif */
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

textarea.form-control {
    min-height: 80px;
    resize: vertical;
}

.form-text {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

.form-error {
    font-size: 0.8rem;
    color: var(--danger);
    margin-top: 0.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-actions-split {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}
.form-actions-split .btn:last-child { flex: 1; }

/* ---- BUTTONS ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-sm svg { width: 13px; height: 13px; }

.admin-tier-select {
    padding: 2px 4px;
    font-size: 0.8rem;
    border-radius: 4px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-900);
}

.admin-export-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.admin-export-form input[type="date"] {
    width: auto;
    padding: 0.3rem 0.5rem;
}

.admin-kyc-photo {
    max-width: 100%;
    border-radius: 8px;
    margin-top: 0.5rem;
    border: 1px solid var(--gray-200);
}

.admin-mc-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.admin-mc-reject-form {
    display: inline-flex;
    gap: 0.5rem;
}
.admin-mc-reject-form .form-control {
    width: 150px;
    font-size: 0.8rem;
}

/* ---- ADMIN : RÉCONCILIATION FINANCIÈRE ---- */
.recon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.recon-stat { background: var(--white); border-radius: 10px; padding: 1.2rem; box-shadow: var(--shadow); }
.recon-stat .value { font-size: 1.6rem; font-weight: 800; color: var(--primary); }
.recon-stat .label { font-size: .78rem; color: var(--gray-600); margin-top: .25rem; }
.recon-stat.danger .value { color: var(--danger); }
.recon-stat.success .value { color: var(--success); }
.recon-stat.accent .value { color: #F5A623; }

.diff-positive { color: var(--success); font-weight: 700; }
.diff-negative { color: var(--danger); font-weight: 700; }
.diff-zero     { color: var(--gray-600); }
.row-discrepancy { background: #fff5f5 !important; }
[data-theme="dark"] .row-discrepancy { background: #2a1414 !important; }

.filter-bar { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.recon-icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

.btn-primary {
    background: var(--primary-strong);
    color: var(--white);
}
.btn-primary:hover { background: #116482; }

.btn-accent {
    background: var(--primary-strong);
    color: var(--white);
}
.btn-accent:hover { background: #116482; }

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-text);
    color: var(--primary-text);
}
.btn-outline:hover { background: var(--light); }

.admin-recon-link { border-color: var(--success); color: var(--success); }
.admin-recon-link:hover { background: #f0fdf4; }
[data-theme="dark"] .admin-recon-link:hover { background: #052e16; }

.btn-danger {
    background: var(--danger);
    color: var(--white);
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.btn-block {
    width: 100%;
}

.btn-success { background: var(--success); color: var(--white); }

/* ---- ALERTS ---- */
.alert {
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    border-left: 4px solid;
}

.alert-danger { background: #fef2f2; color: var(--danger); border-color: var(--danger); }
.alert-success { background: #f0fdf4; color: var(--success); border-color: var(--success); }
.alert-warning { background: #fffbeb; color: #92400e; border-color: var(--warning); }
.alert-info { background: #eff6ff; color: var(--info); border-color: var(--info); }

/* ---- MAIN LAYOUT ---- */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ---- SÉLECTEUR DE LANGUE (contextes sombres : nav landing + sidebar) ---- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    padding: 2px;
}

.lang-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 0.25rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.65);
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.lang-opt:hover { color: #fff; text-decoration: none; }
.lang-opt.active {
    /* Ancien dégradé bleu-vert clair : 1,89:1 avec du blanc, illisible.
       Teintes assombries pour rester dans l'esprit tout en passant AA. */
    background: linear-gradient(120deg, #147597, #0a7f63);
    color: #fff;
}
/* Sélecteur de langue du pied de la sidebar : réservé au mobile, où la barre
   supérieure est compactée et masque le sien. Masqué par défaut ; la media
   query mobile le repasse en `flex`. Cette règle doit rester AVANT cette media
   query — à spécificité égale c'est l'ordre du fichier qui tranche, une media
   query n'ajoutant aucune spécificité. */
.sidebar-lang-switch {
    display: none;
    width: 100%;
    margin-bottom: 0.5rem;
}
.sidebar-lang-switch .lang-opt { flex: 1; }

/* Sélecteur de langue + thème dans la top-bar (fond clair/sombre selon thème :
   on utilise des variables de gris qui basculent avec le thème). */
.top-bar .lang-switch {
    background: var(--gray-100);
    border-color: var(--gray-200);
}
.top-bar .lang-opt { color: var(--gray-500); }
.top-bar .lang-opt:hover { color: var(--gray-900); }
.top-bar .lang-opt.active { color: #fff; }
.top-bar .theme-toggle {
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 1rem;
    padding: 0.4rem 0.55rem;
    line-height: 1;
    border-radius: 8px;
}
.top-bar .theme-toggle:hover { background: var(--gray-100); color: var(--gray-900); }
.top-bar .theme-toggle #theme-label { display: none; }

.sidebar {
    width: 260px;
    background: var(--primary-dark);
    color: var(--white);
    padding: 0.75rem 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 100;
    /* Défilement possible mais barre masquée (Firefox / IE). */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
/* Barre masquée sous Chrome / Edge / Safari. */
.sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.sidebar-logo {
    padding: 0.75rem 1.25rem 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}
.sidebar-logo-img {
    height: 34px;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.sidebar-logo h2 {
    color: var(--accent);
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.sidebar-logo small {
    color: rgba(255,255,255,0.6);
    font-size: 0.75rem;
}

.sidebar-tier-badge {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.68rem;
    background: var(--tier-color, var(--accent));
    color: #fff;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ---- BADGES PALIER : dégradés métalliques réalistes ---- */
.tier-badge-bronze {
    background: linear-gradient(135deg, #6b3f1d 0%, #a6621f 22%, #cd7f32 45%, #f0c27b 58%, #cd7f32 72%, #8a5423 90%, #6b3f1d 100%);
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 3px rgba(0,0,0,0.25), 0 2px 6px rgba(107,63,29,0.4);
    border: 1px solid rgba(139,88,39,0.5);
}
.tier-badge-silver {
    background: linear-gradient(135deg, #6b6b6e 0%, #9c9ca0 22%, #cfcfd2 45%, #f8f8f9 58%, #cfcfd2 72%, #85858a 90%, #6b6b6e 100%);
    color: #2b2b2e;
    text-shadow: 0 1px 1px rgba(255,255,255,0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.2), 0 2px 6px rgba(107,107,110,0.4);
    border: 1px solid rgba(107,107,110,0.5);
}
.tier-badge-gold {
    background: linear-gradient(135deg, #7a5c00 0%, #b8860b 22%, #d4af37 45%, #fff3b0 58%, #d4af37 72%, #9c7a1a 90%, #7a5c00 100%);
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.25), 0 2px 6px rgba(122,92,0,0.4);
    border: 1px solid rgba(122,92,0,0.5);
}
.tier-badge-platinum {
    background: linear-gradient(135deg, #454552 0%, #6e6e80 22%, #a6a6ba 45%, #e6e6f2 58%, #a6a6ba 72%, #5c5c6c 90%, #454552 100%);
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 3px rgba(0,0,0,0.22), 0 2px 6px rgba(69,69,82,0.4);
    border: 1px solid rgba(69,69,82,0.5);
}

/* ---- PALIER : pièce (image) + libellé ---- */
.tier-coin {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
/* Variante « empilée » : libellé sous la pièce (dashboard + sidebar). */
.tier-coin.tier-coin-stacked {
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
}
/* ============================================================
   PIÈCES 3D — épaisseur par « extrusion » (couches ajoutées par app.js).
   Structure générée :
     .coin3d-scene            → éclat (filtre) + échelle + couleur du palier
       .coin3d                → rotation demi-tour (contexte 3D preserve-3d)
         img.coin-depth × N   → copies reculées en Z = la tranche
         img.tier-coin-img    → face avant (garde sa taille par contexte)
   ============================================================ */
.coin3d-scene {
    --coin-scale: 1;
    --coin-glow: 205,175,90;
    display: inline-block;
    line-height: 0;
    transform: scale(var(--coin-scale));
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.28));
    /* Durée de base = vitesse de l'animation AUTO (un peu plus lente). */
    transition: transform 0.7s ease-in-out, filter 0.7s ease-in-out;
}
.coin3d-scene[data-tier="bronze"]   { --coin-glow: 184,115,51; }   /* cuivre     */
.coin3d-scene[data-tier="silver"]   { --coin-glow: 201,206,214; }  /* argent     */
.coin3d-scene[data-tier="gold"]     { --coin-glow: 226,182,58; }   /* or         */
.coin3d-scene[data-tier="platinum"] { --coin-scale: 1.13; --coin-glow: 139,155,173; } /* platine */

.coin3d {
    position: relative;
    display: inline-block;
    transform-style: preserve-3d;
    transform: perspective(650px) rotateY(0deg);
    transition: transform 0.7s ease-in-out;
}
.coin3d .tier-coin-img { position: relative; }
/* Le survol reste rapide (0,5 s) ; seule l'animation auto utilise 0,7 s. */
.coin3d-scene:hover,
.coin3d-scene:hover .coin3d {
    transition-duration: 0.5s;
}

/* Couches d'extrusion : même image, reculée en profondeur et nuancée = tranche.
   Le pas --depth-step (px entre 2 couches) est défini par contexte pour que
   l'épaisseur reste proportionnelle à la taille de la pièce. */
.coin-depth {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(calc(var(--i) * var(--depth-step, 1px) * -1));
    filter: brightness(calc(0.62 + var(--i) * 0.085));
    pointer-events: none;
}

/* ---- ÉTAT BRILLANT (survol + auto via .coin-shine) : demi-tour + éclat ----
   Le survol et l'auto ciblent le MÊME état → aucun conflit possible. */
.coin3d-scene:hover,
.coin3d-scene.coin-shine {
    transform: scale(calc(var(--coin-scale) * 1.06));
    filter: drop-shadow(0 0 16px rgba(var(--coin-glow), 0.95))
            drop-shadow(0 0 32px rgba(var(--coin-glow), 0.6))
            brightness(1.12) saturate(1.25);
}
.coin3d-scene:hover .coin3d,
.coin3d-scene.coin-shine .coin3d {
    transform: perspective(650px) rotateY(180deg);
}
/* Accessibilité : éclat conservé, pas de rotation. */
@media (prefers-reduced-motion: reduce) {
    .coin3d-scene:hover .coin3d,
    .coin3d-scene.coin-shine .coin3d {
        transform: none;
    }
}

/* Face avant = image d'origine ; sa taille (height) vient des règles de contexte. */
.tier-coin-img {
    height: 133px;   /* défaut (dashboard) ; surchargé par contexte plus bas */
    width: auto;
    display: block;
    flex-shrink: 0;
}
.tier-coin-label {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
/* Épaisseur proportionnelle : --depth-step (px entre 2 couches) suit la taille.
   Réf. : ~140px → 1px (≈ 4px d'épaisseur avec DEPTH=4). Hérité jusqu'à .coin-depth. */
.tier-coin { --depth-step: 1px; }
/* Contexte « small » = tableaux admin (réconciliation), 46px → épaisseur fine. */
.tier-coin.tier-coin-sm .tier-coin-img { height: 46px; }
.tier-coin.tier-coin-sm { --depth-step: 0.35px; }
.tier-coin.tier-coin-sm .tier-coin-label { font-size: 0.78rem; }
.tier-coin.tier-coin-lg .tier-coin-img { height: 72px; }
.tier-coin.tier-coin-lg { --depth-step: 0.55px; }
.sidebar-tier-coin { margin-top: 0.4rem; }
.sidebar-tier-coin.tier-coin-stacked { gap: 0.15rem; }
/* Pièce de la sidebar : plus grande. Même spécificité que .tier-coin-sm et
   placée après → l'emporte (sinon la règle sm ci-dessus gagnait, bug). */
.sidebar-tier-coin.tier-coin-sm .tier-coin-img { height: 147px; }
.sidebar-tier-coin.tier-coin-sm { --depth-step: 1.05px; }
.sidebar-tier-coin.tier-coin-sm .tier-coin-label { font-size: 0.82rem; color: #fff; }
/* Slot pièce dans une stat-card (page wallet) : remplace .stat-icon */
.stat-coin {
    width: 148px;
    height: 148px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-coin .tier-coin-img { height: 140px; }

.sidebar-nav {
    padding: 0.4rem 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.62rem 1.5rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.nav-item:hover {
    background: rgba(255,255,255,0.08);
    color: var(--white);
    text-decoration: none;
}

.nav-item.active {
    background: rgba(255,255,255,0.1);
    color: var(--accent);
    border-left-color: var(--accent);
}

.nav-item .nav-icon {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-item .nav-icon svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.nav-item.is-muted {
    color: rgba(255,255,255,0.45);
    font-size: 0.78rem;
}

.sidebar-divider {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin: 0.4rem 0;
}

.sidebar-footer {
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: auto;
}

.main-content {
    margin-left: 260px;
    flex: 1;
    /* Sans min-width:0, ce flex item garde min-width:auto et refuse de se
       réduire sous la largeur intrinsèque de son contenu : une table large
       élargissait <main> au-delà du viewport (jusqu'en laptop) et empêchait
       .table-container d'activer son overflow-x. */
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.top-bar {
    background: var(--white);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 50;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.top-bar-left h2 {
    font-size: 1.3rem;
    margin: 0;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.notif-bell {
    position: relative;
    display: flex;
    text-decoration: none;
    color: var(--gray-700);
    margin-right: 0.25rem;
}

.notif-bell svg { width: 21px; height: 21px; }

/* Pastille de compteur type Facebook/YouTube : rouge plein, texte blanc,
   ronde pour un chiffre, pilule pour « 9+ », détachée de la cloche par un
   anneau de la couleur du fond. */
.notif-bell .badge {
    position: absolute;
    top: -5px;
    right: -7px;
    box-sizing: border-box;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    box-shadow: 0 0 0 2px var(--white);
}
/* Un compteur n'est pas un statut : pas d'indicateur ✕ hérité de .badge-danger. */
.notif-bell .badge::before { content: none; }

.sidebar-footer .theme-toggle {
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
}

.user-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    background: var(--light);
    border: 1px solid rgba(28,167,216,0.22);
    border-radius: 50px;
    font-size: 0.88rem;
    color: var(--primary-dark);
    font-weight: 700;
}

/* [data-theme="dark"] redéfinit --light en bleu marine foncé, mais la
   couleur de texte restait --primary-dark (quasi noir) : le nom du client
   devenait presque invisible en mode sombre. */
[data-theme="dark"] .user-badge {
    background: rgba(28,167,216,0.16);
    border-color: rgba(28,167,216,0.35);
    color: #ffffff;
}

.page-content {
    padding: 2rem;
    flex: 1;
}

/* ---- FOOTER ---- */
.app-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--gray-200);
    /* .page-content (flex:1) colle déjà le footer en bas des pages courtes ;
       une marge modérée suffit à le détacher du contenu sans laisser un grand
       vide au-dessus. */
    margin-top: 1.5rem;
}
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--gray-500);
}
.footer-links {
    display: flex;
    gap: 1rem;
}
.footer-links a {
    color: var(--gray-500);
    text-decoration: none;
}
.footer-links a:hover {
    color: var(--primary);
}

/* ---- CARDS ---- */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.card-header svg { width: 16px; height: 16px; flex-shrink: 0; }
.card-header.is-info { background: var(--light); }
.card-header.is-danger { background: #fef2f2; color: var(--danger); }
[data-theme="dark"] .card-header.is-info { background: #0E2A38; }
[data-theme="dark"] .card-header.is-danger { background: #450a0a; }

/* ---- GDPR ---- */
.gdpr-page { max-width: 700px; }
.gdpr-section { margin-bottom: 1.5rem; border: 1px solid var(--gray-200); }
.gdpr-section.is-danger { border-color: var(--danger); }
.gdpr-section p { margin-bottom: 1rem; color: var(--gray-700); }
.gdpr-section .is-warning-text { color: var(--danger); font-weight: 600; }

.card-body {
    padding: 1.5rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* ---- STAT CARDS (Dashboard) ---- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.stat-icon svg { width: 26px; height: 26px; }

.stat-icon.green { background: var(--light); color: var(--primary); }
.stat-icon.blue { background: #dbeafe; color: var(--info); }
.stat-icon.red { background: #fef2f2; color: var(--danger); }

/* ---- ICÔNE DE PALIER : dégradé métallique réaliste, selon le palier réel du compte ---- */
.stat-icon.bronze {
    background: linear-gradient(135deg, #6b3f1d 0%, #a6621f 22%, #cd7f32 45%, #f0c27b 58%, #cd7f32 72%, #8a5423 90%, #6b3f1d 100%);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 3px rgba(0,0,0,0.25), 0 2px 6px rgba(107,63,29,0.4);
    border: 1px solid rgba(139,88,39,0.5);
}
.stat-icon.silver {
    background: linear-gradient(135deg, #6b6b6e 0%, #9c9ca0 22%, #cfcfd2 45%, #f8f8f9 58%, #cfcfd2 72%, #85858a 90%, #6b6b6e 100%);
    color: #2b2b2e;
    text-shadow: 0 1px 1px rgba(255,255,255,0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -2px 3px rgba(0,0,0,0.2), 0 2px 6px rgba(107,107,110,0.4);
    border: 1px solid rgba(107,107,110,0.5);
}
.stat-icon.gold {
    background: linear-gradient(135deg, #7a5c00 0%, #b8860b 22%, #d4af37 45%, #fff3b0 58%, #d4af37 72%, #9c7a1a 90%, #7a5c00 100%);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 3px rgba(0,0,0,0.25), 0 2px 6px rgba(122,92,0,0.35);
    border: 1px solid rgba(122,92,0,0.4);
}
.stat-icon.platinum {
    background: linear-gradient(135deg, #454552 0%, #6e6e80 22%, #a6a6ba 45%, #e6e6f2 58%, #a6a6ba 72%, #5c5c6c 90%, #454552 100%);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 3px rgba(0,0,0,0.22), 0 2px 6px rgba(69,69,82,0.4);
    border: 1px solid rgba(69,69,82,0.5);
}

.stat-info { min-width: 0; }
.stat-info h3 {
    font-size: 1.6rem;
    font-family: -apple-system, sans-serif;
    margin-bottom: 0.15rem;
}

.stat-info p {
    font-size: 0.85rem;
    color: var(--gray-500);
}

/* ---- WALLET CARD ---- */
.wallet-card {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-strong));
    /* Fond toujours en dégradé sombre : texte blanc en dur. Sinon var(--white)
       devient #141414 en mode sombre et « Solde disponible » / l'ID deviennent
       illisibles. */
    color: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.wallet-card::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(28, 167, 216,0.15);
}

.wallet-card .balance-label {
    font-size: 0.9rem;
    opacity: 0.8;
}

.wallet-card .balance {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.01em;
    margin: 0.5rem 0;
    text-shadow: 0 2px 14px rgba(0,0,0,0.25);
}

.wallet-card .wallet-id {
    font-size: 0.85rem;
    opacity: 0.7;
    letter-spacing: 1px;
}

.wallet-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.wallet-actions .btn {
    background: rgba(255,255,255,0.2);
    color: var(--white);
    border: 1px solid rgba(255,255,255,0.3);
    flex: 1;
}

.wallet-actions .btn:hover {
    background: rgba(255,255,255,0.3);
}
.wallet-actions .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- WALLET HEADER (balance + QR) ---- */
.wallet-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
/* Le bloc du solde est un flex item : sans min-width:0 il conserve
   min-width:auto, s'élargit à la taille du montant et se fait couper par
   .wallet-card. La valeur ne débordait alors jamais de sa PROPRE boîte, ce qui
   empêchait js-fit-amount de détecter quoi que ce soit. */
.wallet-header-row > div:first-child {
    min-width: 0;
}
.wallet-qr-trigger {
    background: #fff;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
}
.wallet-qr-trigger img { width: 80px; height: 80px; display: block; }

/* ---- WALLET QR MODAL ---- */
.wallet-qr-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
.wallet-qr-modal-content {
    /* Toujours clair (même en mode sombre) : un QR code a besoin d'un fort
       contraste noir/blanc pour rester scannable, donc les couleurs de texte
       sont fixées explicitement plutôt que d'hériter du thème. */
    background: #fff;
    color: #111827;
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    max-width: 320px;
}
.wallet-qr-modal-content h3 {
    margin-bottom: 0.5rem;
    color: #111827;
    font-family: inherit;
}
.wallet-qr-modal-content img { margin: 1rem auto; display: block; }
.wallet-qr-modal-content .wallet-qr-id {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    color: #111827;
}

/* ---- TABLES ---- */
.table-container {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th {
    background: var(--gray-50);
    padding: 0.8rem 1rem;
    text-align: left;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500);
    border-bottom: 2px solid var(--gray-200);
}

table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
}

table tr:hover { background: var(--gray-50); }

/* ---- BADGES ---- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge svg { width: 12px; height: 12px; flex-shrink: 0; }
.badge-lg { font-size: 1rem; padding: 0.5rem 1rem; }
.badge-lg svg { width: 15px; height: 15px; }

.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fef2f2; color: #991b1b; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-gold { background: #fef3c7; color: #92400e; }

/* ---- PROFILE : figures et statuts ---- */
.profile-figure {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-text);
    font-family: inherit;
}
.profile-figure.is-accent {
    font-size: 1.4rem;
    color: var(--accent);
    letter-spacing: 2px;
}
.profile-status-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--primary);
    font-weight: 600;
}
.profile-status-line svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- PROGRESS BAR ---- */
.progress {
    height: 8px;
    background: var(--gray-200);
    border-radius: 50px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 50px;
    transition: width 0.3s;
}

/* --accent est identique à --primary : cette classe ne changeait donc rien
   visuellement. Objectif atteint = dégradé doré réaliste (fait pour être
   fêté), plutôt que la même barre bleue que d'habitude. */
.progress-bar.gold {
    background: linear-gradient(90deg, #b8860b, #ffd700, #d4af37);
}

/* ---- SAVINGS : petits formulaires en ligne (verser / retirer) ---- */
.savings-lock-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}
.savings-inline-form {
    display: flex;
    gap: 0.5rem;
}
.savings-inline-form .form-control { flex: 1; }

/* ---- GROUP CARD ---- */
.group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.group-card {
    display: block;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    border-top: 4px solid var(--primary);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}

.group-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); text-decoration: none; }

.group-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    /* h1-h4 { color: var(--primary-dark) } ne s'adapte jamais au mode
       sombre, alors que le fond de la carte (var(--white)) devient
       quasi noir : le nom du groupe devenait illisible en mode sombre. */
    font-family: inherit;
    color: var(--gray-900);
}

.group-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.8rem 0;
}

.group-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.group-meta span svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ---- FEE SUMMARY (récap de frais : paiement, inscription...) ---- */
.fee-summary {
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}
.fee-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    padding: 0.5rem 0;
    font-size: 0.92rem;
}
.fee-summary-row + .fee-summary-row {
    border-top: 1px solid var(--gray-200);
}
.fee-summary-row.is-danger { color: var(--danger); }
.fee-summary-total {
    border-top: 2px solid var(--gray-200) !important;
    margin-top: 0.2rem;
    padding-top: 0.85rem;
}
.fee-summary-total strong {
    font-size: 1.3rem;
    background: linear-gradient(120deg, var(--primary), #06D6A0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- FORUM / CHAT ---- */
.chat-container {
    height: 500px;
    display: flex;
    flex-direction: column;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: var(--gray-50);
}

.chat-message {
    margin-bottom: 0.55rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

.chat-message .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Bulle des AUTRES : à gauche, fond clair, coin haut-gauche « pointu » */
.chat-message .msg-content {
    background: var(--white);
    padding: 0.45rem 0.7rem;
    border-radius: 2px 14px 14px 14px;
    max-width: 75%;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.08);
    position: relative;
    word-break: break-word;
}

.chat-message .msg-content .msg-author {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.1rem;
}

.chat-message .msg-content .msg-time {
    font-size: 0.66rem;
    color: var(--gray-500);
    display: block;
    text-align: right;
    margin-top: 0.15rem;
}

/* Mes propres messages : à droite, bulle colorée (style WhatsApp) */
.chat-message.is-mine {
    justify-content: flex-end;
}
.chat-message.is-mine .msg-content {
    background: var(--primary);
    color: #fff;
    border-radius: 14px 2px 14px 14px;
}
.chat-message.is-mine .msg-content .msg-time {
    color: rgba(255, 255, 255, 0.75);
}
.chat-message.is-mine .msg-content a { color: #fff; }

/* Marqueur « modifié » à côté de l'heure */
.msg-edited {
    font-style: italic;
    opacity: 0.85;
}

/* Boutons d'action (modifier / supprimer).
   Visibles par défaut : le tactile n'a pas de survol. Sur les appareils
   pointés (souris), on les masque et on les révèle au survol/focus. */
.msg-actions {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 5px;
    display: flex;
    gap: 2px;
    opacity: 1;
    transition: opacity 0.15s;
}

@media (hover: hover) and (pointer: fine) {
    .msg-actions {
        opacity: 0;
    }
    .chat-message:hover .msg-actions,
    .chat-message:focus-within .msg-actions {
        opacity: 1;
    }
}

/* Cibles tactiles plus larges là où il n'y a pas de survol */
@media (hover: none) {
    .msg-act {
        width: 32px;
        height: 32px;
    }
    .msg-act svg {
        width: 16px;
        height: 16px;
    }
}

/* Écran étroit : on rétrécit la bulle pour garder la gouttière libre,
   sinon les boutons d'action n'ont plus la place de s'afficher. */
@media (max-width: 400px) {
    .chat-message.is-mine .msg-content {
        max-width: 68%;
    }
}
.msg-actions form {
    margin: 0;
    display: inline-flex;
}
.msg-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--white);
    color: var(--gray-500);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.msg-act svg {
    width: 14px;
    height: 14px;
}
.msg-act:hover {
    background: var(--gray-100);
    color: var(--gray-700);
}
.msg-del-btn:hover {
    color: var(--danger);
}

/* Formulaire d'édition inline — masqué tant que la bulle n'est pas en édition */
.msg-edit-form {
    display: none;
}
.msg-content.editing .msg-text,
.msg-content.editing .msg-time,
.msg-content.editing .msg-actions {
    display: none;
}
.msg-content.editing .msg-edit-form {
    display: block;
}

/* Bulle en cours d'édition : fond neutre + texte sombre.
   Sur une bulle « is-mine » le fond est var(--primary), soit exactement la
   couleur de .btn-primary : le champ et le bouton Enregistrer y étaient
   illisibles. On neutralise le fond le temps de l'édition.
   Sélecteur volontairement plus spécifique que `.chat-message.is-mine
   .msg-content` pour passer devant, y compris dans la media query mobile. */
.chat-message .msg-content.editing,
.chat-message.is-mine .msg-content.editing {
    background: var(--white);
    color: var(--gray-900);
    max-width: 90%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.msg-edit-form textarea {
    display: block;
    width: 100%;
    min-width: 0; /* sans ça, le champ déborde de la bulle sur mobile */
    resize: vertical;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 0.5rem 0.6rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm);
    color: var(--gray-900);
    background: var(--white);
}
.msg-edit-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(28, 167, 216, 0.15);
}

.msg-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

/* Enregistrer : action principale, nettement marquée (vert = valider) */
.msg-edit-save {
    background: var(--success);
    color: var(--white);
    border: 2px solid var(--success);
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.4);
}
.msg-edit-save:hover {
    background: #15803d;
    border-color: #15803d;
}

/* Annuler : discret, pour ne pas concurrencer Enregistrer */
.msg-edit-cancel {
    background: transparent;
    border: 2px solid var(--gray-300);
    color: var(--gray-600);
}
.msg-edit-cancel:hover {
    background: var(--gray-100);
}

/* Messages système : centrés et discrets */
.chat-message.system {
    justify-content: center;
}

.chat-message.system .msg-content {
    background: #fef3c7;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #92400e;
    text-align: center;
    max-width: 85%;
    box-shadow: none;
}

.chat-input {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    border-top: 1px solid var(--gray-200);
}

.chat-input input {
    flex: 1;
}

/* ---- FORUM : pièce jointe ---- */
.forum-file-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    flex-shrink: 0;
    color: var(--gray-500);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;
}
.forum-file-label:hover { background: var(--gray-100); color: var(--primary); }
.forum-file-label svg { width: 19px; height: 19px; }
.forum-file-preview {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--gray-100);
    font-size: 0.85rem;
    border-top: 1px solid var(--gray-200);
}
.forum-file-preview svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--gray-500); }
.forum-file-remove {
    border: none;
    background: none;
    color: var(--danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-left: auto;
}
.forum-file-remove svg { width: 14px; height: 14px; }
.msg-attachment { margin-top: 0.5rem; }
.msg-attachment img {
    max-width: 250px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    display: block;
}
.msg-attachment .btn svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }

/* ---- EMPTY STATE ---- */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--gray-500);
}

.empty-state .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.empty-state svg { width: 44px; height: 44px; margin: 0 auto 1rem; display: block; }

/* ---- NOTIFICATIONS ---- */
.notif-row {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: background 0.15s ease;
}
.notif-row:last-child { border-bottom: none; }
.notif-row.is-unread { background: var(--light); }
.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    color: var(--primary);
}
.notif-icon svg { width: 20px; height: 20px; }
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 0.9rem; }
.notif-badge-new { font-size: 0.65rem; vertical-align: middle; margin-left: 0.3rem; }
.notif-message { font-size: 0.85rem; margin-top: 0.2rem; }
.notif-date { font-size: 0.75rem; }
.notif-mark-read { flex-shrink: 0; }
.notif-mark-read button svg { width: 14px; height: 14px; }

/* ---- GRID HELPERS ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--gray-500); }
.text-success { color: var(--success-text); }
.text-danger { color: var(--danger); }
.text-accent { color: var(--primary-text); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px;
    }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; }
    .form-row { grid-template-columns: 1fr; }
    /* minmax(0, 1fr) et non 1fr : `1fr` vaut `minmax(auto, 1fr)`, et ce minimum
       `auto` interdit à la colonne de se réduire sous la largeur intrinsèque de
       son contenu. Un montant en white-space:nowrap (posé par js-fit-amount)
       gonflait ainsi la 2e colonne à 308px et la carte débordait de l'écran.
       C'est l'équivalent grid du min-width:0 des flex items. */
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .wallet-actions { flex-direction: column; }
    .group-grid { grid-template-columns: 1fr; }
    .page-content { padding: 1rem; }

    .mobile-menu-btn {
        display: block;
    }

    /* Top bar responsive — une seule ligne compacte.
       Avant : flex-direction:column + flex-wrap sur la droite. Les 5 groupes
       (langue, thème, cloche, badge KYC, nom) débordaient sur deux lignes
       supplémentaires, le nom se retrouvant seul tout en bas. */
    .top-bar {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem;
    }
    .top-bar-left {
        gap: 0.5rem;
        flex: 1;
        min-width: 0; /* autorise l'ellipsis du titre */
    }
    .top-bar-left h2 {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .top-bar-right {
        width: auto;
        flex-wrap: nowrap;
        flex-shrink: 0;
        gap: 0.35rem;
        font-size: 0.85rem;
    }
    /* Éléments secondaires en mobile : la langue est reprise dans la sidebar,
       le statut KYC reste sur le profil, le nom est déjà dans la sidebar.
       Le `>` est important : il épargne le compteur .badge de la cloche. */
    .topbar-lang-switch,
    .top-bar-right > .badge,
    .user-badge {
        display: none;
    }
    /* Contrepartie : la langue apparaît dans le pied de la sidebar
       (le padding de .sidebar-footer gère déjà les marges latérales). */
    .sidebar-lang-switch {
        display: flex;
    }

    /* Tables de données — défilement horizontal dans leur conteneur.
       Ces règles sont volontairement limitées à `.table-container table` :
       appliquées à tous les <table>, elles imposaient 600px de large aux
       tables de mise en page (ex. l'encart Informations d'un groupe), qui
       débordaient alors de l'écran. */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-container table {
        min-width: 600px;
    }
    .table-container table th,
    .table-container table td {
        padding: 0.5rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    /* Cards : on conserve le MÊME rayon qu'au desktop (--radius, 12px) pour
       garder une identité visuelle cohérente entre écrans — auparavant le rayon
       était réduit à 8px sur mobile, ce qui rendait les cartes visiblement plus
       carrées que sur desktop. Les légères marges négatives (−4px) alignent la
       carte sur les bords du contenu sans provoquer de débordement. */
    .card {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
        border-radius: var(--radius);
    }

    /* Footer responsive */
    .footer-content {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    /* Flex-between on mobile */
    .flex-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Stat cards 2 columns on mobile */
    .stats-grid {
        gap: 0.75rem;
    }
    .stat-card {
        padding: 0.75rem;
    }
    .stat-card .value {
        font-size: 1.2rem;
    }

    /* La pièce de palier occupait 148px de large en flex-shrink:0 : sur une
       carte de ~288px il ne restait qu'une centaine de pixels au texte, et
       le libellé du palier se coupait en deux lignes. */
    .stat-coin {
        width: 84px;
        height: 84px;
    }
    .stat-coin .tier-coin-img {
        height: 78px;
    }

    /* Variante opérateur : .stat-coin abrite un badge texte (« Opérateur
       admin », en white-space:nowrap) et non une pièce. Côte à côte, badge et
       libellé demandent ~340px pour ~288px disponibles : on empile. */
    .stat-card-operator {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    .stat-card-operator .stat-coin {
        width: auto;
        height: auto;
    }

    /* Le QR laisse un peu plus de place au solde et à l'identifiant. */
    .wallet-qr-trigger img {
        width: 60px;
        height: 60px;
    }
    .wallet-card .wallet-id {
        letter-spacing: 0.5px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .page-content { padding: 0.75rem; }
    .top-bar-right .badge { font-size: 0.7rem; }
    .user-badge { font-size: 0.8rem; }

    /* Air supplémentaire sur le bord droit des cartes de statistiques. */
    .stats-grid { margin-right: 0.5rem; }

    /* QR au-dessus du solde : on empile la rangée et on remonte le QR par
       `order`.
       `align-items: stretch` est indispensable ici : la règle de base impose
       flex-start, et en colonne le bloc du solde se dimensionnerait alors sur
       son contenu — le montant ne déborderait plus de sa propre boîte et
       js-fit-amount n'aurait rien à détecter (le texte se ferait juste couper
       par la carte). En stretch, le bloc prend toute la largeur : boîte fiable.
       Le QR, lui, ne doit pas s'étirer : align-self le ramène à sa taille. */
    .wallet-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
    }
    .wallet-qr-trigger {
        order: -1;
        align-self: flex-start;
    }
    /* Empilé, le QR ne dispute plus la largeur au montant : il retrouve sa
       taille pleine (il était réduit à 60px pour lui laisser de la place). */
    .wallet-qr-trigger img {
        width: 80px;
        height: 80px;
    }
}

/* ---- CIBLES TACTILES ----
   Sur un appareil sans survol, les commandes de la barre supérieure étaient
   trop petites pour le doigt (cloche 21x21, langues 31x26, thème 42x31).
   On leur garantit une zone d'appui d'au moins 40-44px sans changer leur
   apparence sur ordinateur. */
/* ---- RETOUR VISUEL AU TOUCHER ----
   Les effets :hover (élévation des cartes/boutons, surbrillance de ligne) ne se
   déclenchent jamais sur écran tactile : le mobile perdait donc le langage
   visuel « ceci réagit » présent au desktop. On rétablit l'équivalent en :active
   — qui, lui, se déclenche au toucher — avec la MÊME identité visuelle. */
.btn:active { transform: translateY(1px); }
.group-card:active { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.nav-item:active { background: rgba(255,255,255,0.08); }
.stat-card:active { box-shadow: var(--shadow-lg); }
table tr:active { background: var(--gray-50); }
.pagination a.page-link:active { border-color: var(--primary); color: var(--primary); }

@media (hover: none) {
    .notif-bell,
    .mobile-menu-btn {
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        margin-right: 0;
    }
    .theme-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .lang-opt {
        min-width: 44px;
        min-height: 44px;
    }
    /* Liens de navigation (sidebar, backoffice) : hauteur d'appui confortable */
    .sidebar-nav a,
    .sidebar-footer a {
        min-height: 44px;
    }
    /* Boutons : les .btn-sm tombaient à 28px de haut, trop peu pour un doigt.
       .btn est déjà inline-flex centré, un min-height suffit à agrandir la
       zone d'appui sans décaler le texte. Cible tactile recommandée : 44px. */
    .btn {
        min-height: 44px;
    }
    /* Liens secondaires du pied de page (CGU, Confidentialité, RGPD) */
    .footer-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* Tri des colonnes : le lien ne faisait que la hauteur du texte */
    th .th-sort {
        min-height: 44px;
    }
    /* Pagination : les pastilles de page restaient à 32px sur tactile, sans
       aucun agrandissement — c'est pourtant l'un des contrôles les plus
       utilisés dans les listes. On les porte à la cible tactile de 44px. */
    .pagination a.page-link,
    .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}
.sidebar-overlay.active {
    display: block;
}

@media (min-width: 769px) {
    .mobile-menu-btn { display: none; }
    .sidebar-overlay { display: none !important; }
}

/* ---- TIER BADGES ---- */
.tier-bronze { color: #92400e; }
.tier-silver { color: #6b7280; }
.tier-gold { color: #b45309; }
.tier-platinum { color: #4f46e5; }

/* ---- DARK MODE TOGGLE ---- */
.theme-toggle {
    background: none;
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ---- DARK MODE ---- */
[data-theme="dark"] {
    --gray-50: #111827;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-500: #9ca3af;
    --gray-600: #a1a1aa;
    --gray-700: #d1d5db;
    --gray-900: #f9fafb;
    --white: #141414;
    --light: #0E2A38;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.3);
    /* Sur fond sombre il faut ÉCLAIRCIR : les teintes du mode clair (#147597,
       #12823b) n'y donnent que 3,5:1. On revient aux couleurs de marque
       d'origine, qui deviennent ici parfaitement lisibles (6,64 et 5,59). */
    --primary-text: #1CA7D8;
    --success-text: #16a34a;
}

[data-theme="dark"] body,
[data-theme="dark"] .main-content {
    background: #0A0A0A;
    color: #e5e7eb;
}
[data-theme="dark"] .app-footer {
    border-color: #262626;
}
[data-theme="dark"] .footer-content,
[data-theme="dark"] .footer-links a {
    /* #6b7280 ne donnait que 4,1:1 sur le fond #0A0A0A. */
    color: #9ca3af;
}
[data-theme="dark"] .footer-links a:hover {
    color: #1CA7D8;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: #9BD8F0;
}

[data-theme="dark"] .card {
    background: #141414;
    border-color: #262626;
}

[data-theme="dark"] .card-header {
    background: #0D0D0D;
    border-color: #262626;
    color: #e5e7eb;
}

[data-theme="dark"] .form-control {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

[data-theme="dark"] .form-control:focus {
    border-color: var(--primary);
    background: #1f2937;
}

[data-theme="dark"] table {
    color: #e5e7eb;
}

[data-theme="dark"] table thead {
    background: #0D0D0D;
}

[data-theme="dark"] table tbody tr {
    border-color: #262626;
}

[data-theme="dark"] table tbody tr:hover {
    background: #1f2937;
}

[data-theme="dark"] .alert {
    border-color: #262626;
}

[data-theme="dark"] .alert-success { background: #052e16; color: #86efac; }
[data-theme="dark"] .alert-danger { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .alert-warning { background: #422006; color: #fcd34d; }
[data-theme="dark"] .alert-info { background: #172554; color: #93c5fd; }

[data-theme="dark"] .stat-card {
    background: #141414;
    border-color: #262626;
}

[data-theme="dark"] .top-bar {
    background: #141414;
    border-color: #262626;
}

[data-theme="dark"] .wallet-card {
    background: linear-gradient(135deg, #0E1A24 0%, #147597 50%, #0E2A38 100%);
}

[data-theme="dark"] .auth-container {
    background: #141414;
    color: #e5e7eb;
}

[data-theme="dark"] .text-muted { color: #9ca3af !important; }

[data-theme="dark"] .btn-outline {
    border-color: #4b5563;
    color: #e5e7eb;
}

[data-theme="dark"] .btn-outline:hover {
    background: #374151;
}

[data-theme="dark"] .empty-state { color: #9ca3af; }

[data-theme="dark"] .chat-messages {
    background: #111827;
}

[data-theme="dark"] .chat-message .msg-content {
    background: #1f2937;
    color: #e5e7eb;
}

[data-theme="dark"] .chat-message.is-mine .msg-content {
    background: var(--primary);
    color: #fff;
}

[data-theme="dark"] .msg-act {
    background: #374151;
    color: #d1d5db;
}
[data-theme="dark"] .msg-act:hover {
    background: #4b5563;
    color: #fff;
}
[data-theme="dark"] .chat-message .msg-content.editing,
[data-theme="dark"] .chat-message.is-mine .msg-content.editing {
    background: #1f2937;
    color: #e5e7eb;
}
[data-theme="dark"] .msg-edit-form textarea {
    background: #111827;
    color: #e5e7eb;
    border-color: #374151;
}
[data-theme="dark"] .msg-edit-cancel {
    border-color: #4b5563;
    color: #d1d5db;
}
[data-theme="dark"] .msg-edit-cancel:hover {
    background: #374151;
}

[data-theme="dark"] .chat-input {
    background: #141414;
    border-color: #262626;
}

/* Badge notification pulse */
@keyframes badge-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.badge-pulse { animation: badge-pulse 0.4s ease-in-out; }

/* =============================================================================
   Listes admin — barre d'outils (recherche + filtres), tri, pagination.
   Utilise les variables --gray-* (remappées en thème sombre) → adaptatif.
   ============================================================================= */
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}
.list-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 240px;
    min-width: 180px;
}
.list-search svg {
    position: absolute;
    left: 0.7rem;
    width: 16px;
    height: 16px;
    color: var(--gray-500);
    pointer-events: none;
}
.list-search input[type="search"] {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.1rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--white);
    color: var(--gray-900);
    font-size: 0.9rem;
}
.list-search input[type="search"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(28, 167, 216, 0.15);
}
.list-filter {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    background: var(--white);
    color: var(--gray-900);
    font-size: 0.85rem;
    cursor: pointer;
    max-width: 100%;
}
.list-filter:focus { outline: none; border-color: var(--primary); }
.list-reset { white-space: nowrap; }

/* En-têtes de colonnes triables */
th .th-sort {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
th .th-sort:hover { color: var(--primary); }
th .th-sort.active { color: var(--primary); font-weight: 700; }

/* Ligne « aucun résultat » */
.list-empty {
    text-align: center;
    padding: 2rem 1rem !important;
    color: var(--gray-500);
    font-style: italic;
}

/* Pied de liste : compteur + pagination */
.list-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    font-size: 0.85rem;
}
.list-count { color: var(--gray-600); }
.pagination {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.55rem;
    border: 1px solid var(--gray-300);
    border-radius: 7px;
    background: var(--white);
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pagination a.page-link:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.pagination .page-link.is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 700;
}
.pagination .page-link.is-disabled {
    opacity: 0.45;
    cursor: default;
}
.pagination .page-ellipsis {
    padding: 0 0.25rem;
    color: var(--gray-500);
}

@media (max-width: 640px) {
    .list-toolbar { padding: 0.7rem 0.85rem; }
    .list-footer { padding: 0.7rem 0.85rem; flex-direction: column; align-items: stretch; }
    .list-footer .pagination { justify-content: center; }
}

/* Option A — barre d'outils client (recherche/filtre/tri JS). Réutilise les
   styles .list-search / .list-filter ; en-têtes triables cliquables. */
.table-tools-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}
.table-tools .list-search { flex: 1 1 220px; }
.table-tools th.th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.table-tools th.th-sortable:hover { color: var(--primary); }
.table-tools th[data-dir] { color: var(--primary); }
.tt-arrow { font-size: 0.8em; }

/* =============================================================================
   Page admin — Vérification KYC
   ============================================================================= */
.kyc-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.kyc-head-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.kyc-head-title h3 { margin: 0; font-size: 1.15rem; }

/* Listes d'infos (dl) */
.kyc-info { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1rem; }
.kyc-info dt { color: var(--text-muted); font-size: 0.85rem; }
.kyc-info dd { margin: 0; text-align: right; word-break: break-word; }

/* Grille des documents */
.kyc-doc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}
.kyc-doc { display: flex; flex-direction: column; gap: 0.4rem; }
.kyc-doc-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.kyc-doc-thumb {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
    background: var(--gray-50);
    cursor: zoom-in;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.kyc-doc-thumb:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.kyc-doc-thumb img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.kyc-doc-zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(13, 43, 26, 0.72);
    color: #fff;
}
.kyc-doc-zoom svg { width: 16px; height: 16px; }
.kyc-doc-missing {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    border: 1px dashed var(--gray-300);
    border-radius: 10px;
    color: var(--gray-500);
    font-size: 0.85rem;
    font-style: italic;
    background: var(--gray-50);
}
.kyc-decision {
    margin-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    padding-top: 1.25rem;
}
.kyc-decision-done { margin: 0; color: var(--text-muted); }

/* Lightbox plein écran */
.kyc-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    padding: 2rem;
    cursor: zoom-out;
    align-items: center;
    justify-content: center;
}
.kyc-lightbox.open { display: flex; }
.kyc-lightbox figure { margin: 0; max-width: 92vw; max-height: 90vh; text-align: center; }
.kyc-lightbox img {
    max-width: 92vw;
    max-height: 82vh;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.kyc-lightbox figcaption { color: #fff; margin-top: 0.75rem; font-size: 0.9rem; }
.kyc-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    color: #fff;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
}
@media (max-width: 520px) {
    .kyc-doc-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Pages 2FA — activation (avec QR) + vérification à la connexion
   ============================================================================= */
.twofa-setup { max-width: 520px; margin: 0 auto; }
.twofa-card .card-body { padding: 1.75rem; }

.twofa-hero { text-align: center; margin-bottom: 1.5rem; }
.twofa-icon,
.twofa-verify-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 0.85rem;
    border-radius: 16px;
    background: rgba(28, 167, 216, 0.12);
    color: var(--primary);
}
.twofa-icon svg,
.twofa-verify-icon svg { width: 28px; height: 28px; }
.twofa-verify-icon { display: flex; margin: 0 auto 1rem; }
.twofa-hero h2 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.twofa-hero p { margin: 0; font-size: 0.9rem; }

/* Étapes numérotées */
.twofa-steps {
    margin: 0 0 1.5rem;
    padding-left: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}
.twofa-steps li::marker { color: var(--primary); font-weight: 700; }

/* Cadre du QR — fond blanc constant (le QR reste lisible même en thème sombre) */
.twofa-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 1.25rem;
    padding: 14px;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.twofa-qr img { display: block; width: 220px; height: 220px; }
.twofa-qr-fallback { display: none; color: #b91c1c; font-size: 0.8rem; text-align: center; }
.twofa-qr-error { padding: 1.25rem 1.5rem; }
.twofa-qr-error img { display: none; }
.twofa-qr-error .twofa-qr-fallback { display: block; }

/* Clé manuelle + bouton copier */
.twofa-secret-block { text-align: center; margin-bottom: 1.5rem; }
.twofa-secret-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.twofa-secret {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.9rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
}
.twofa-secret code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--gray-900);
}
.twofa-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--white);
    color: var(--gray-600);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.twofa-copy:hover { background: var(--primary); color: #fff; }
.twofa-copy.copied { background: var(--success); color: #fff; }
.twofa-copy svg { width: 16px; height: 16px; }

/* Formulaire de code (partagé activation + connexion) */
.twofa-form { text-align: center; }
.twofa-form-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}
.twofa-code-input {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 0 auto 1.25rem;
    padding: 0.7rem 0.5rem;
    font-size: 1.9rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5rem;
    text-indent: 0.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    background: var(--white);
    color: var(--gray-900);
}
.twofa-code-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(28, 167, 216, 0.15);
}
.twofa-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}
.twofa-actions .btn { flex: 1; max-width: 180px; }

/* =============================================================================
   Inscription — CGU, choix du niveau, paiement, page d'attente
   ============================================================================= */
.auth-container-wide { max-width: 720px; }

/* CGU */
.terms-scrollbox {
    max-height: 240px;
    overflow-y: auto;
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: var(--gray-50);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-secondary);
    text-align: left;
}
.terms-scrollbox h4 { margin: 0.75rem 0 0.35rem; color: var(--primary); font-size: 0.95rem; }
.terms-scrollbox h4:first-child { margin-top: 0; }
.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    text-align: left;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.4;
}
.terms-check input { margin-top: 3px; flex-shrink: 0; }

/* Choix du niveau */
.tier-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.tier-choice { display: block; cursor: pointer; }
.tier-choice input { position: absolute; opacity: 0; pointer-events: none; }
.tier-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.1rem 0.75rem;
    border: 2px solid var(--gray-200);
    border-radius: 14px;
    background: var(--white);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    height: 100%;
}
.tier-choice:hover .tier-choice-card { border-color: var(--primary); }
.tier-choice input:checked + .tier-choice-card {
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(28, 167, 216, 0.18);
    transform: translateY(-2px);
}
.tier-choice-coin { height: 62px; width: auto; }
.tier-choice-name { font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.82rem; }
.tier-choice-total { font-size: 1.15rem; font-weight: 800; color: var(--primary); }
.tier-choice-detail { font-size: 0.72rem; color: var(--text-muted); }
.tier-choice-limit { font-size: 0.72rem; color: var(--text-muted); }
/* Palier inférieur au niveau actuel : verrouillé (pas de rétrogradation). */
.tier-choice.is-locked { cursor: not-allowed; }
.tier-choice.is-locked .tier-choice-card { opacity: 0.45; filter: grayscale(0.6); }
.tier-choice.is-locked:hover .tier-choice-card { border-color: var(--gray-200); transform: none; }

/* Paiement */
.pay-amount-box {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    text-align: left;
}
.pay-amount-row, .pay-amount-total {
    display: flex;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
}
.pay-amount-row { border-bottom: 1px solid var(--gray-100); color: var(--text-secondary); }
.pay-amount-total {
    background: var(--gray-50);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--gray-900);
}
.pay-instructions { text-align: left; margin-bottom: 1.25rem; font-size: 0.9rem; }
.pay-phone {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    border: 1px dashed var(--primary);
    border-radius: 12px;
    background: rgba(28, 167, 216, 0.07);
}
.pay-phone svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0; }
.pay-phone #pay-phone-number {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--gray-900);
    flex: 1;
}
.pay-phone-copy {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border: none; border-radius: 8px;
    background: var(--white); color: var(--gray-600); cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.pay-phone-copy:hover { background: var(--primary); color: #fff; }
.pay-phone-copy.copied { background: var(--success); color: #fff; }
.pay-phone-copy svg { width: 16px; height: 16px; color: inherit; }
.pay-note { font-size: 0.83rem; color: var(--text-muted); }

/* Page d'attente */
.pending-hero { text-align: center; margin-bottom: 1.25rem; }
.pending-spinner {
    display: inline-block;
    width: 44px; height: 44px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: pending-spin 0.9s linear infinite;
    margin-bottom: 0.75rem;
}
@keyframes pending-spin { to { transform: rotate(360deg); } }
.pending-info { text-align: left; font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1.5rem; }
.pending-info ul { margin: 0.75rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.pending-actions { display: flex; gap: 0.75rem; justify-content: center; }
.pending-actions .btn { flex: 1; max-width: 200px; }

/* Admin — file d'attente des paiements */
.reg-proof-thumb {
    display: block; padding: 0; border: 1px solid var(--gray-200);
    border-radius: 8px; overflow: hidden; background: var(--gray-50);
    cursor: zoom-in; width: 64px; height: 64px;
    transition: border-color 0.15s;
}
.reg-proof-thumb:hover { border-color: var(--primary); }
.reg-proof-thumb img { width: 64px; height: 64px; object-fit: cover; display: block; }
.reg-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.reg-reject-form { display: flex; gap: 0.35rem; }
.reg-reject-form .form-control { padding: 0.3rem 0.5rem; font-size: 0.8rem; min-width: 120px; }

/* =============================================================================
   Badge « Opérateur admin » — remplace la pièce de palier pour les opérateurs
   (compte neutre : pas de niveau bronze/silver/…).
   ============================================================================= */
.operator-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
}
.operator-badge svg { width: 15px; height: 15px; color: var(--primary); flex-shrink: 0; }

/* Variante sidebar (fond sombre) : texte clair. */
.sidebar-operator-badge {
    margin-top: 0.5rem;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.sidebar-operator-badge svg { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════
   IDENTITÉ ADMINISTRATEUR — barre latérale
   La barre d'un opérateur adopte une teinte indigo/violet, distincte du
   navy + cyan d'un membre : le « mode administration » se reconnaît d'un
   coup d'œil. On reste dans la palette sombre et froide du site (l'indigo est
   voisin du cyan de la marque), et la même identité habille le backoffice
   (public/css/backoffice.css) pour que les deux surfaces d'admin ne fassent
   qu'un. Portée par body.is-operator, ajouté par le layout quand Auth::isAdmin().
   ═══════════════════════════════════════════════════════════════════════ */
body.is-operator .sidebar {
    background: linear-gradient(185deg, #241a4d 0%, #191537 52%, #13112a 100%);
}
body.is-operator .sidebar-logo,
body.is-operator .sidebar-divider,
body.is-operator .sidebar-footer {
    border-color: rgba(167, 139, 255, 0.16);
}
body.is-operator .nav-item:hover {
    background: rgba(255, 255, 255, 0.07);
}
body.is-operator .nav-item.active {
    background: rgba(167, 139, 255, 0.16);
    color: #cdbcff;
    border-left-color: #a78bff;
}
body.is-operator .sidebar-operator-badge {
    background: rgba(167, 139, 255, 0.18);
    border-color: rgba(167, 139, 255, 0.42);
    color: #e6ddff;
}
body.is-operator .sidebar-operator-badge svg { color: #c9b8ff; }
/* Pastille de la barre latérale d'admin : pouce indigo translucide. */
body.is-operator .sidebar { scrollbar-color: rgba(167, 139, 255, 0.32) transparent; }
body.is-operator .sidebar::-webkit-scrollbar-thumb { background: rgba(167, 139, 255, 0.28); }

/* Variante large (hero dashboard, carte wallet) : pastille blanche lisible partout. */
.operator-badge-lg {
    padding: 0.6rem 1.1rem;
    font-size: 0.92rem;
    background: rgba(255, 255, 255, 0.92);
    color: #0f2e1e;
    border-color: rgba(255, 255, 255, 0.6);
}
.operator-badge-lg svg { width: 20px; height: 20px; color: #1A6B3C; }

/* ============================================================
   Scrollbars modernes (global) — Firefox + WebKit/Chromium
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: #c3ccd8 transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #c3ccd8;
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
    transition: background-color .2s;
}
::-webkit-scrollbar-thumb:hover { background: #9aa6b6; background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: var(--primary); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

[data-theme="dark"] * { scrollbar-color: #39434f transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #39434f; background-clip: content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4c5867; background-clip: content-box; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:active { background: var(--primary); background-clip: content-box; }

/* ============================================================
   Toasts de notification (espace membre) — apparition auto
   ============================================================ */
.siko-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .6rem; max-width: min(360px, calc(100vw - 2rem)); }
.siko-toast {
    display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
    background: var(--white); color: var(--gray-900);
    border: 1px solid var(--gray-200); border-left: 4px solid var(--primary);
    border-radius: 12px; padding: .75rem .9rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08);
    animation: siko-toast-in .3s cubic-bezier(.21,1.02,.73,1) both; font-size: .88rem;
}
.siko-toast.leaving { animation: siko-toast-out .3s ease forwards; }
.siko-toast-ic { flex: 0 0 auto; width: 20px; height: 20px; color: var(--primary); margin-top: 1px; }
.siko-toast-ic svg { width: 20px; height: 20px; }
.siko-toast-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.siko-toast-body strong { font-size: .88rem; }
.siko-toast-body span { color: var(--gray-600); font-size: .82rem; line-height: 1.35; }
@keyframes siko-toast-in { from { opacity: 0; transform: translateX(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes siko-toast-out { to { opacity: 0; transform: translateX(24px) scale(.98); } }
@media (max-width: 600px) { .siko-toasts { left: 1rem; right: 1rem; max-width: none; } }

/* Choix du canal de vérification à l'inscription (SMS par défaut / email). */
.verify-channel-choice { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.verify-channel { flex: 1 1 140px; cursor: pointer; }
.verify-channel input { position: absolute; opacity: 0; pointer-events: none; }
.verify-channel span {
    display: block;
    text-align: center;
    padding: 0.6rem 0.75rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s;
}
.verify-channel input:checked + span {
    border-color: var(--primary);
    background: var(--light);
    color: var(--primary);
}

/* ---- AIDE HUMAINE : bouton flottant toujours accessible ---- */
.siko-help { position: fixed; right: 1rem; bottom: 1rem; z-index: 900; }
.siko-help-btn {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--primary); color: #fff; border: none; cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s;
}
.siko-help-btn:hover { transform: scale(1.06); }
.siko-help-btn svg { width: 26px; height: 26px; }
.siko-help-panel {
    position: absolute; right: 0; bottom: 62px; width: 240px;
    background: var(--white); border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    padding: 0.9rem; border: 1px solid var(--gray-200);
}
.siko-help-title { font-weight: 800; font-size: 0.95rem; margin: 0 0 0.15rem; }
.siko-help-sub { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.7rem; }
.siko-help-link {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.6rem; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--gray-900); font-size: 0.88rem; font-weight: 600;
}
.siko-help-link:hover { background: var(--gray-100); text-decoration: none; }
.siko-help-ic { font-size: 1rem; }
[data-theme="dark"] .siko-help-panel { background: #1f2937; border-color: #374151; }
[data-theme="dark"] .siko-help-link { color: #e5e7eb; }
[data-theme="dark"] .siko-help-link:hover { background: #374151; }
/* Sur mobile, on remonte le bouton pour ne pas gêner le contenu bas de page. */
@media (max-width: 480px) {
    .siko-help { right: 0.75rem; bottom: 0.75rem; }
    .siko-help-btn { width: 48px; height: 48px; }
    .siko-help-panel { width: calc(100vw - 1.5rem); right: 0; }
}

/* Bouton « partager le reçu » d'une transaction. */
.tx-share {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-left: .35rem; padding: 0;
    border: none; border-radius: 50%; background: transparent;
    color: var(--gray-500); cursor: pointer; vertical-align: middle;
}
.tx-share svg { width: 14px; height: 14px; }
.tx-share:hover { background: var(--gray-100); color: var(--primary); }
.tx-share.is-copied { color: var(--success); }
@media (hover: none) { .tx-share { width: 32px; height: 32px; } }

/* ---- STATUTS : ne jamais reposer sur la SEULE couleur ----
   Un badge vert/rouge est indistinguable pour un daltonien (8 % des hommes)
   et se lit mal en plein soleil. On préfixe chaque type de badge d'un symbole :
   l'information passe alors par la FORME autant que par la couleur. */
.badge-success::before,
.badge-danger::before,
.badge-warning::before,
.badge-info::before {
    margin-right: 0.28em;
    font-weight: 700;
    speak: never;
}
.badge-success::before { content: '✓'; }
.badge-danger::before  { content: '✕'; }
.badge-warning::before { content: '!'; }
.badge-info::before    { content: 'ℹ'; }
/* Les badges qui contiennent déjà une icône SVG explicite n'en ajoutent pas. */
.badge-success:has(svg)::before,
.badge-danger:has(svg)::before,
.badge-warning:has(svg)::before,
.badge-info:has(svg)::before { content: none; }

/* En mode sombre, --white vaut #141414 : les boutons pleins héritaient donc
   d'un texte quasi noir sur fond bleu (3,53:1). Le fond de ces boutons reste
   identique dans les deux thèmes, leur texte doit donc rester blanc (5,22:1). */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-accent,
[data-theme="dark"] .msg-edit-save {
    color: #fff;
}

/* Boutons posés sur la carte wallet (fond dégradé foncé) : leur texte suit
   var(--white), qui vaut #141414 en mode sombre → texte noir illisible. */
[data-theme="dark"] .wallet-actions .btn {
    color: #fff;
}

/* Rythme « tous les N <unité> » : nombre + unité côte à côte. */
.rhythm-row { display: flex; gap: .5rem; }
.rhythm-row input { flex: 0 0 5.5rem; }
.rhythm-row select { flex: 1; min-width: 0; }

/* ── Formulaire dense : tous les champs visibles sans défiler ────────────
   Le formulaire de création de groupe compte une dizaine de champs. Empilés
   en une colonne, ils dépassent la hauteur de tous les écrans, y compris un
   laptop 1366×768 : l'utilisateur remplit à l'aveugle sans jamais voir
   l'ensemble de son réglage. On le passe donc en grille — 2 colonnes dès le
   plus petit écran, 3 à partir du laptop — avec des interlignes resserrés.
   minmax(0, 1fr) et non 1fr : « 1fr » vaut minmax(auto, 1fr) et empêche les
   colonnes de se réduire sous la largeur de leur contenu, ce qui déborde. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem .8rem;
    align-items: start;
}
.form-grid .form-group { margin-bottom: 0; min-width: 0; }
.form-grid label { margin-bottom: .25rem; font-size: .8rem; }
.form-grid .form-control { padding: .55rem .65rem; }
.form-grid .form-text { font-size: .72rem; margin-top: .15rem; display: block; }
/* Un champ « large » occupe les 2 colonnes des petits écrans ; sur 3 colonnes
   il redevient une cellule normale. */
.form-grid .fg-wide { grid-column: span 2; }
.form-grid .fg-all  { grid-column: 1 / -1; }

@media (min-width: 900px) {
    .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-grid .fg-wide { grid-column: span 1; }
}

/* La densité suit la hauteur disponible, pas seulement la largeur : sur un
   laptop 768px de haut il faut 3 colonnes serrées pour tout voir sans
   défiler, alors qu'un écran de 900px et plus a la place d'accueillir
   2 colonnes et des champs confortables — le formulaire remplit alors
   l'écran au lieu de flotter en haut d'une grande zone vide. */
.card-form { max-width: 940px; }

@media (min-width: 900px) and (min-height: 820px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.1rem; }
    .form-grid label { font-size: .85rem; margin-bottom: .3rem; }
    .form-grid .form-control { padding: .7rem .8rem; }
    .form-help { margin-bottom: 1rem; }
    /* Deux colonnes plus larges : la carte s'élargit d'autant. */
    .card-form { max-width: 1120px; }
}

/* Grand écran : encore un cran d'aération, sinon la carte pleine hauteur
   laisse un vide interne avant les boutons. */
@media (min-width: 1200px) and (min-height: 1000px) {
    .form-grid { gap: 1.3rem 1.3rem; }
    .form-grid .form-control { padding: .85rem .9rem; }
    .card-form { max-width: 1240px; }
    /* Sur ces écrans il reste de la hauteur même après aération : on répartit
       les 5 rangées plutôt que de laisser le surplus s'accumuler d'un bloc
       juste au-dessus des boutons. */
    .form-fill .form-grid { flex: 1; align-content: space-between; }
}

/* Sur téléphone, chaque pixel compte pour que le formulaire tienne encore
   dans l'écran : intitulés plus courts sur une ligne, interlignes resserrés. */
@media (max-width: 480px) {
    .form-grid { gap: .45rem .6rem; }
    .form-grid label { font-size: .74rem; margin-bottom: .15rem; }
    .form-grid .form-control { padding: .45rem .55rem; font-size: .9rem; }
    .form-grid .form-summary { font-size: .76rem; padding: .45rem .55rem; line-height: 1.35; }
    .card-compact .card-body { padding: .85rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   CRÉATION DE GROUPE — disposition deux panneaux
   ------------------------------------------------------------------------
   Réglages à gauche (sections numérotées), aperçu vivant à droite. Le
   panneau d'aperçu occupe la hauteur par nature — c'est ce qui « remplit
   l'espace » sans qu'on ait à étirer les champs. Classes dédiées : la page
   de réglages continue d'utiliser .form-grid / .card-fill, intacts.
   ════════════════════════════════════════════════════════════════════════ */

/* La zone de contenu devient une colonne flex pour que la carte grandisse et
   remplisse la hauteur restante sous la barre supérieure. On resserre aussi le
   rembourrage de page et le pied de page sur CET écran : la barre supérieure,
   les 2rem de marge et le footer consomment ~250px — autant les récupérer pour
   que le formulaire tienne sans défiler sur un laptop. */
.page-content:has(> .create) { display: flex; flex-direction: column; padding: 1.25rem 2rem; }
.main-content:has(.create) .app-footer { margin-top: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.create { flex: 1; display: flex; }

.create-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    /* .card apporte déjà fond, rayon, ombre et overflow:hidden — ce dernier
       découpe le fond teinté de l'aperçu selon les coins arrondis. */
}

.create-grid { flex: 1; display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) {
    .create-grid { grid-template-columns: minmax(0, 1fr) clamp(310px, 30%, 380px); }
}

/* ---- Colonne réglages ---- */
.create-body {
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.create-help { margin: 0; }

/* Note d'assurance : poussée au bas de la colonne pour absorber la hauteur
   restante, en miroir du bouton d'action du panneau d'aperçu. Ainsi les deux
   colonnes s'ancrent en bas et remplissent l'écran sans espacer les champs. */
.create-note {
    margin: auto 0 0;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
    font-size: .8rem;
    line-height: 1.45;
    color: var(--text-muted);
}
.create-note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .1rem; color: var(--primary-text); }

.create-section-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 .75rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--gray-900);
}
.create-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: var(--primary-strong);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    flex: 0 0 auto;
}
.create-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem 1rem;
}
@media (min-width: 600px) {
    .create-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.create-fields .form-group { margin-bottom: 0; min-width: 0; }
.create-fields .span-2 { grid-column: 1 / -1; }
.create-fields label { font-size: .82rem; margin-bottom: .3rem; }

/* ---- Panneau d'aperçu ---- */
.create-aside {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
@media (min-width: 860px) {
    .create-aside { border-top: 0; border-left: 1px solid var(--gray-200); }
}
.create-aside-label {
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Le chiffre phare : la cagnotte que chaque membre recevra à son tour. */
.create-pot {
    border-radius: var(--radius);
    padding: 1.15rem 1.25rem;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary-strong));
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    transition: background .2s;
}
.create-pot-cap { font-size: .78rem; opacity: .85; }
.create-pot-amt {
    font-size: clamp(1.55rem, 4vw, 2.1rem);
    font-weight: 800;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.create-pot-sub { font-size: .76rem; opacity: .8; }

.create-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.create-stats li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: .86rem;
    color: var(--text-secondary);
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--gray-200);
}
.create-stats li:last-child { border-bottom: 0; padding-bottom: 0; }
.create-stats strong { font-weight: 700; color: var(--gray-900); }

.create-aside-line {
    margin: 0;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Actions ancrées en bas du panneau : le CTA reste au pied de l'aperçu. */
.create-actions { margin-top: auto; display: flex; flex-direction: column; gap: .6rem; }
.create-actions .btn { width: 100%; }

/* État incohérent : la cagnotte vire à l'avertissement et la phrase l'explique.
   Le bouton n'est pas « disabled » (non focalisable, muet pour le lecteur
   d'écran) — l'envoi est simplement refusé et le motif reste annoncé. */
.create-aside.is-invalid .create-pot { background: linear-gradient(135deg, #7c2d12, #b45309); }
.create-aside.is-invalid .create-aside-line { color: #b45309; font-weight: 600; }
.create-aside.is-invalid #g-submit { opacity: .55; }
[data-theme="dark"] .create-aside.is-invalid .create-aside-line { color: #fbbf24; }

/* Sur petit écran l'aperçu passe sous le formulaire : on l'allège un peu. */
@media (max-width: 600px) {
    .create-body { padding: 1.1rem; gap: 1.1rem; }
    .create-aside { padding: 1.1rem; }
    .create-fields { gap: .7rem .8rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CARTES DE FORMULAIRE DU TABLEAU DE BORD
   ------------------------------------------------------------------------
   Même langage visuel que la création de groupe pour tous les formulaires de
   saisie du dashboard (envoi, recharge, retrait, épargne, paiement…) : carte
   épurée, en-tête à icône plutôt que l'ancien bandeau gris, champs aérés, et
   un pied d'action cohérent (annuler + action principale sur toute la largeur).
   .form-card se pose sur .card, qui fournit fond, rayon, ombre et overflow.
   ═══════════════════════════════════════════════════════════════════════ */
.form-card { max-width: 560px; margin: 0 auto; }
.form-card-head {
    display: flex; align-items: center; gap: .85rem;
    padding: 1.2rem 1.5rem 1.05rem;
    border-bottom: 1px solid var(--gray-100);
}
.form-card-ic {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(28,167,216,.16), rgba(20,117,151,.12));
    color: var(--primary-strong);
}
.form-card-ic svg { width: 22px; height: 22px; }
.form-card-head h2 { margin: 0; font-size: 1.06rem; font-weight: 800; line-height: 1.2; }
.form-card-sub { margin: .14rem 0 0; font-size: .8rem; color: var(--text-muted); font-weight: 400; }
.form-card-body { padding: 1.5rem; }
/* Un encart d'information juste sous l'en-tête ne double pas la marge. */
.form-card-body > .alert:first-child { margin-top: -.15rem; }
.form-card .form-group { margin-bottom: 1.15rem; }
/* Pied d'action : annuler discret + action principale pleine largeur, comme
   à la création de groupe. */
.form-card-foot { display: flex; gap: .75rem; align-items: center; margin-top: 1.4rem; }
.form-card-foot .btn-primary,
.form-card-foot .btn-accent { flex: 1; }
[data-theme="dark"] .form-card-ic { background: rgba(28,167,216,.2); color: #7cc7e6; }
[data-theme="dark"] .form-card-head { border-color: var(--gray-200); }

/* ═══════════════════════════════════════════════════════════════════════
   GRAPHIQUES STATISTIQUES (tableau de bord admin)
   ═══════════════════════════════════════════════════════════════════════ */
.admin-stats-head { margin: .5rem 0 1rem; }
.admin-stats-head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.admin-stats-head p { margin: .15rem 0 0; font-size: .85rem; color: var(--text-muted); }

.admin-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.admin-charts .chart-wide { grid-column: 1 / -1; }

/* Grille des graphiques « Mes finances » (dashboard client) — même gabarit. */
.fin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.fin-grid .chart-wide { grid-column: 1 / -1; }
@media (max-width: 820px) {
    .admin-charts, .fin-grid { grid-template-columns: 1fr; }
    .admin-charts .chart-wide, .fin-grid .chart-wide { grid-column: auto; }
}

.chart-card {
    padding: 1.25rem 1.35rem 1.1rem;
    /* Les infobulles ApexCharts débordent la carte : on n'écrête pas. */
    overflow: visible;
}
.chart-card-head { margin-bottom: .35rem; }
.chart-card-head h3 { margin: 0; font-size: .98rem; font-weight: 800; }
.chart-card-head p { margin: .12rem 0 0; font-size: .78rem; color: var(--text-muted); }
.chart-box { width: 100%; min-height: 40px; }

/* Sparkline glissée dans une tuile KPI : fine bande de tendance sous le label. */
.stat-info { min-width: 0; }
.stat-spark { margin-top: .45rem; height: 34px; }

/* Le texte des graphiques ApexCharts hérite de la police du site ; en sombre,
   la légende et les axes prennent la couleur claire via foreColor (JS). On
   ajuste seulement le fond des infobulles pour rester lisible. */
[data-theme="dark"] .apexcharts-tooltip { background: #1f2937 !important; border-color: #374151 !important; color: #e5e7eb; }
[data-theme="dark"] .apexcharts-tooltip-title { background: #111827 !important; border-color: #374151 !important; }
[data-theme="dark"] .apexcharts-xaxistooltip, [data-theme="dark"] .apexcharts-yaxistooltip { background: #1f2937 !important; border-color: #374151 !important; color: #e5e7eb; }

/* ── Carte pleine hauteur ────────────────────────────────────────────────
   Un formulaire court suivi d'une grande zone vide donne l'impression d'une
   page inachevée. La carte occupe donc toute la hauteur restante : les champs
   en haut, le récapitulatif et les boutons ancrés en bas. On ne dilate PAS
   l'espacement entre les champs — des champs éloignés les uns des autres se
   lisent moins bien qu'un bloc dense.
   :has() cible la seule page concernée sans toucher au gabarit commun ; là où
   il n'est pas supporté, la page retombe simplement sur son rendu normal. */
.page-content:has(> .card-fill) { display: flex; flex-direction: column; }
.card-fill { flex: 1; display: flex; flex-direction: column; }
.card-fill > .card-body { flex: 1; display: flex; flex-direction: column; }
.form-fill { flex: 1; display: flex; flex-direction: column; }
.form-foot { margin-top: auto; padding-top: .9rem; }

/* Bloc explicatif replié : l'information reste accessible sans coûter
   200px de hauteur à chaque visite. */
.form-help { margin-bottom: .7rem; }
.form-help > summary {
    cursor: pointer; font-size: .82rem; font-weight: 600;
    color: var(--primary-text); padding: .3rem 0; list-style: none;
}
.form-help > summary::-webkit-details-marker { display: none; }
.form-help > summary::before { content: '？ '; font-weight: 400; }
.form-help[open] > summary::before { content: '× '; }
.form-help p {
    font-size: .8rem; color: var(--text-muted);
    margin: .25rem 0 0; line-height: 1.45;
}

/* Récapitulatif du réglage : compact, mais visible d'un coup d'œil. */
.form-summary {
    grid-column: 1 / -1;
    margin: .2rem 0 0; padding: .55rem .7rem;
    font-size: .82rem; line-height: 1.4;
}
/* Réglage incohérent : on bloque l'envoi et on le dit visuellement. */
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Gestion des rôles dans un groupe. */
.role-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; flex-wrap: wrap; }
.role-row-name { flex: 1 1 8rem; font-weight: 600; font-size: .9rem; min-width: 0; }
.role-row select { flex: 0 1 11rem; }
.role-badge {
    display: inline-block; padding: .1rem .5rem; border-radius: 999px;
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    background: var(--gray-100); color: var(--gray-700);
}
.role-badge.is-president { background: #fef3c7; color: #92400e; }
.role-badge.is-treasurer { background: #dbeafe; color: #1e40af; }
.role-badge.is-secretary { background: #ede9fe; color: #5b21b6; }
.role-badge.is-controller { background: #dcfce7; color: #166534; }
[data-theme="dark"] .role-badge { background: #374151; color: #e5e7eb; }

/* ═══════════════════════════════════════════════════════════════════════
   SUIVI DES MEMBRES (président) — présence + paiements + retards, en direct
   ═══════════════════════════════════════════════════════════════════════ */
.mon-card { margin-bottom: 1.5rem; }
.mon-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mon-title { display: block; font-weight: 800; font-size: .98rem; }
.mon-hint { display: block; font-weight: 400; font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
/* Indicateur « live » : un point qui pulse doucement. */
.mon-live { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.mon-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: mon-pulse 2s infinite; }
@keyframes mon-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

/* Bandeau de synthèse : petites tuiles compteurs. */
.mon-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-100); }
.mon-chip { border-radius: var(--radius-sm); padding: .55rem .7rem; background: var(--gray-50); border: 1px solid var(--gray-200); }
.mon-chip b { font-size: 1.15rem; font-weight: 800; line-height: 1; }
.mon-chip span { display: block; font-size: .72rem; color: var(--text-muted); margin-top: .25rem; }
.mon-chip.is-online b { color: var(--success); }
.mon-chip.is-paid   b { color: var(--success-text); }
.mon-chip.is-late   b { color: var(--danger); }
.mon-chip.is-pending b { color: var(--warning); }
@media (max-width: 560px) { .mon-summary { grid-template-columns: repeat(2, 1fr); } }

/* Liste des membres. */
.mon-row { display: flex; align-items: center; gap: .85rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--gray-100); border-left: 3px solid transparent; transition: background .15s; }
.mon-row:last-child { border-bottom: 0; }
.mon-row.is-late { border-left-color: var(--danger); background: rgba(220,38,38,.035); }

/* Avatar + pastille de présence en incrustation (façon messagerie). */
.mon-av { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.mon-av-in { width: 100%; height: 100%; border-radius: 50%; background: var(--primary-strong); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; }
.mon-dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--gray-300); border: 2px solid var(--white); }
.mon-row.is-online .mon-dot { background: var(--success); }

.mon-info { flex: 1; min-width: 0; }
.mon-name { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .88rem; font-weight: 600; }
.mon-seen { font-size: .74rem; color: var(--text-muted); margin-top: .12rem; }
.mon-row.is-online .mon-seen span:first-child { color: var(--success); font-weight: 600; }
/* Score de fiabilité (historique de paiement) — pastille couleur selon le niveau. */
.mon-rel { display: inline-block; margin-left: .4rem; font-size: .66rem; font-weight: 700; padding: .03rem .38rem; border-radius: 999px; white-space: nowrap; }
.mon-rel.is-good { background: rgba(22,163,74,.12); color: var(--success-text); }
.mon-rel.is-mid  { background: rgba(245,158,11,.14); color: #b45309; }
.mon-rel.is-bad  { background: rgba(220,38,38,.12); color: var(--danger); }
[data-theme="dark"] .mon-rel.is-mid { color: #fbbf24; }

/* Sélecteur de cycle de vie du compte (admin) — compact dans le tableau. */
.admin-acct-status { padding: .2rem .4rem; font-size: .74rem; width: auto; display: inline-block; border: 1px solid var(--gray-300); border-radius: 6px; background: var(--white); cursor: pointer; }

.mon-pay { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex-shrink: 0; text-align: right; }
.mon-pay-badge { font-size: .7rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.mon-pay-badge.pay-paid    { background: rgba(22,163,74,.12);  color: var(--success-text); border: 1px solid rgba(22,163,74,.3); }
.mon-pay-badge.pay-partial { background: rgba(245,158,11,.13); color: #b45309; border: 1px solid rgba(245,158,11,.35); }
.mon-pay-badge.pay-pending { background: rgba(107,114,128,.12); color: var(--gray-700); border: 1px solid rgba(107,114,128,.25); }
.mon-pay-badge.pay-late    { background: rgba(220,38,38,.12);  color: var(--danger); border: 1px solid rgba(220,38,38,.3); }
.mon-amt { font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .mon-chip { background: var(--gray-100); }
[data-theme="dark"] .mon-dot { border-color: var(--gray-100); }
[data-theme="dark"] .mon-pay-badge.pay-partial { color: #fbbf24; }

/* ═══ Caisse sociale (mode solidarité d'un groupe) ═══ */
.soc-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.soc-title { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #be185d; }
.soc-balance { font-size: .82rem; color: var(--text-muted); }
.soc-balance strong { color: var(--success-text); font-size: 1rem; margin-left: .25rem; }
.soc-request { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.soc-request input[type=number] { flex: 0 0 8rem; }
.soc-request input[type=text] { flex: 1; min-width: 11rem; }
.soc-subhead { font-size: .85rem; font-weight: 800; margin: 1.1rem 0 .5rem; }
.soc-req-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--gray-100); flex-wrap: wrap; }
.soc-req-info { font-size: .86rem; min-width: 0; }
.soc-req-reason { display: block; font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.soc-req-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.soc-ledger { margin-top: 1rem; }
.soc-ledger summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--primary-text); }
.soc-ledger-row { display: flex; justify-content: space-between; font-size: .82rem; padding: .35rem 0; border-bottom: 1px solid var(--gray-100); }
.soc-ledger-amt.is-in { color: var(--success-text); font-weight: 700; }
.soc-ledger-amt.is-out { color: var(--danger); font-weight: 700; }
[data-theme="dark"] .soc-title { color: #f472b6; }

/* Sélecteur d'opérateur mobile money (recharge/retrait) : cartes de marque.
   Le logo (public/img/operators/<val>.png) s'affiche s'il existe, sinon une
   pastille colorée de repli (géré par onerror dans la vue). */
.op-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.op-card { position: relative; cursor: pointer; }
.op-card input { position: absolute; opacity: 0; pointer-events: none; }
.op-inner {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.9rem 0.5rem; border: 2px solid var(--gray-200); border-radius: var(--radius-md);
    background: var(--white); transition: border-color .15s, box-shadow .15s, transform .1s; min-height: 92px;
}
.op-card:hover .op-inner { border-color: var(--gray-300); }
.op-card input:checked + .op-inner {
    border-color: var(--primary); box-shadow: 0 0 0 3px rgba(28,167,216,0.15);
}
.op-card input:focus-visible + .op-inner { outline: 2px solid var(--primary); outline-offset: 2px; }
.op-logo { height: 34px; max-width: 100%; object-fit: contain; }
.op-badge {
    width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.1rem;
}
.op-name { font-size: 0.8rem; font-weight: 700; color: var(--dark); text-align: center; }
[data-theme="dark"] .op-inner { background: var(--gray-100); border-color: var(--gray-200); }

.op-fee { font-size: 0.68rem; color: var(--gray-500); font-weight: 600; }