/* ============================================================
   BCBA — Les Bons Comptes font les Bons Amis
   Identité visuelle v2 : le livret d'épargne orné — cadres dorés,
   médaillons, constellation de pointillés, façon carte à collectionner.

   STRATÉGIE DE MIGRATION
   Ce fichier reprend EXACTEMENT les mêmes sélecteurs que bcba.css.
   Pour migrer une page : remplacer uniquement la balise <link>
       <link rel="stylesheet" href="/assets/css/bcba.css">
   par
       <link rel="stylesheet" href="/assets/css/bcba-2.css">
   Le HTML de la page ne change pas.

   THÈME
   Tout le fichier est piloté par [data-theme] sur <html>.
   - data-theme="dark"  (ou absent) → « livret fermé » : fond vert-forêt
     très sombre, dorures, panneaux sombres ornés. C'est le thème par défaut.
   - data-theme="light" → « livret ouvert » : fond parchemin/crème, encre,
     dorures assombries pour rester lisibles.
   Un petit script de bascule (data-theme + localStorage 'bcba-theme')
   est fourni à la fin de ce fichier en commentaire, à coller une fois
   par page qui affiche le bouton .bcba-theme-toggle.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Space+Mono:wght@400;700&family=Work+Sans:wght@400;500;600&display=swap');

:root,
[data-theme="dark"] {
    --bg-scene:     #081A16;   /* fond de page — vert forêt quasi noir */
    --bg-carte:     #0F2A24;   /* panneaux/cartes sur fond sombre */
    --bg-carte-2:   #143630;   /* variante légèrement plus claire (hover, en-têtes de tableau) */
    --texte-scene:  #F3EEE1;   /* texte sur fond sombre */
    --texte-carte:  #F3EEE1;
    --texte-att:    #C7BFAE;   /* texte atténué */
    --or:           #C9A227;
    --or-clair:     #E8CD7A;
    --or-profond:   #6F5510;   /* tranche foncée pour le relief 3D des boutons/jetons */
    --rouge:        #D0685A;   /* stamp-red éclairci pour rester lisible sur fond sombre */
    --vert-ok:      #4CAF7D;
    --ligne:        rgba(243, 238, 225, .16);
    --ligne-forte:  rgba(243, 238, 225, .3);
    --ombre:        rgba(0, 0, 0, .55);
    --voile-fond:   rgba(4, 14, 12, .84);
}

[data-theme="light"] {
    --bg-scene:     #F3EEE1;   /* parchemin */
    --bg-carte:     #FFFFFF;
    --bg-carte-2:   #F3EEE1;
    --texte-scene:  #1C1A16;
    --texte-carte:  #1C1A16;
    --texte-att:    #5A5348;
    --or:           #A67F1D;   /* assombri pour le contraste sur clair */
    --or-clair:     #C9A227;
    --or-profond:   #5C4610;
    --rouge:        #8B3A2E;
    --vert-ok:      #1B7A4A;
    --ligne:        rgba(28, 26, 22, .14);
    --ligne-forte:  rgba(28, 26, 22, .28);
    --ombre:        rgba(28, 26, 22, .22);
    --voile-fond:   rgba(243, 238, 225, .88);
}

:root {
    --font-display: 'Fraunces', serif;
    --font-mono: 'Space Mono', monospace;
    --font-body: 'Work Sans', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg-scene);
    color: var(--texte-scene);
    font-family: var(--font-body);
    line-height: 1.55;
    transition: background-color .25s ease, color .25s ease;
}

a { color: inherit; }

/* ── Motif de fond commun : voile étoilé très discret sur les grandes
     zones sombres, pour rappeler le ciel nocturne du visuel de référence ── */

[data-theme="dark"] .bcba-page {
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(243,238,225,.35) 0, transparent 60%),
        radial-gradient(1px 1px at 75% 15%, rgba(243,238,225,.25) 0, transparent 60%),
        radial-gradient(1px 1px at 60% 70%, rgba(243,238,225,.3) 0, transparent 60%),
        radial-gradient(1px 1px at 90% 55%, rgba(243,238,225,.22) 0, transparent 60%),
        radial-gradient(1px 1px at 10% 80%, rgba(243,238,225,.28) 0, transparent 60%);
    background-repeat: no-repeat;
}

/* ── Structure générale ─────────────────────────────────── */

.bcba-page { min-height: 100vh; display: flex; flex-direction: column; }

.bcba-hero {
    padding: 64px 24px 80px;
    text-align: center;
    position: relative;
}

.bcba-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--or) 20%, var(--or) 80%, transparent);
    opacity: .5;
}

/* ── Médaillons : logo, tampon de dé, icônes de section ────
     Anneau doré en relief + halo intérieur + cercle pointillé
     tournant, façon carte à collectionner.                    ── */

.bcba-medaillon {
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0 auto 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 32% 28%, var(--or-clair) 0%, var(--or) 55%, var(--or-profond) 100%);
    box-shadow:
        0 0 0 3px var(--bg-scene),
        0 0 0 5px var(--or),
        inset 0 2px 4px rgba(255,255,255,.35),
        inset 0 -3px 6px rgba(0,0,0,.35),
        0 10px 24px var(--ombre);
    color: var(--bg-scene);
    font-family: var(--font-display);
    font-weight: 700;
}

.bcba-medaillon::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px dashed var(--ligne-forte);
    animation: bcba-constellation-tourne 40s linear infinite;
}

@keyframes bcba-constellation-tourne {
    to { transform: rotate(360deg); }
}

.bcba-logo {
    display: block;
    width: 100%;
    max-width: 500px;
    margin: 0 auto 30px;
    cursor: pointer;
}

.bcba-logo img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    filter: drop-shadow(0 12px 30px var(--ombre));
}

.bcba-logo1 {
    display: block;
    width: 100%;
    max-width: 120px;
    margin: 0 auto 30px;
    cursor: pointer;
}

.bcba-logo1 img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--bg-scene), 0 0 0 5px var(--or);
}

/* Compat : anciens sélecteurs .bcba-tampon* redirigés vers le médaillon */

.bcba-tampon2,
.bcba-tampon {
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0 auto 28px;
    border-radius: 50%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 6px;
    padding: 16px 22px;
    background: radial-gradient(circle at 32% 28%, var(--or-clair) 0%, var(--or) 55%, var(--or-profond) 100%);
    box-shadow:
        0 0 0 3px var(--bg-scene),
        0 0 0 5px var(--or),
        inset 0 2px 4px rgba(255,255,255,.35),
        inset 0 -3px 6px rgba(0,0,0,.35),
        0 10px 24px var(--ombre);
    transform: rotate(-7deg);
}

.bcba-tampon2 { transform: none; }

.bcba-tampon span {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: .9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
}

/* Points de dé pleins (spans vides, ex. dos de carte lancer-de.php) —
   dès qu'un span contient une icône/emoji, il s'affiche normalement
   au lieu d'être masqué par ce fond plein. */
.bcba-tampon span:empty {
    background: var(--bg-scene);
}

.bcba-tampon-sm {
    width: 56px;
    height: 56px;
    padding: 10px 13px;
    gap: 4px;
    margin: 0 0 4px;
}

/* ── Jetons de plateau : actions secondaires sous forme de pièces
     cliquables, dans le même langage visuel que le médaillon —
     pensés pour remplacer une rangée de boutons "texte" plate.  ── */

.bcba-jetons-rangee {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 22px 0 10px;
}

.bcba-jeton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 84px;
    text-decoration: none;
    color: var(--texte-carte);
}

.bcba-jeton-icone {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    background: radial-gradient(circle at 32% 28%, var(--or-clair) 0%, var(--or) 55%, var(--or-profond) 100%);
    box-shadow:
        0 0 0 3px var(--bg-carte),
        0 0 0 5px var(--or),
        inset 0 2px 4px rgba(255,255,255,.35),
        inset 0 -3px 6px rgba(0,0,0,.3),
        0 5px 0 var(--or-profond),
        0 10px 18px var(--ombre);
    transition: transform .15s ease, box-shadow .15s ease;
}

.bcba-jeton:hover .bcba-jeton-icone {
    transform: translateY(-3px) rotate(-4deg);
}

.bcba-jeton:active .bcba-jeton-icone {
    transform: translateY(2px);
    box-shadow:
        0 0 0 3px var(--bg-carte),
        0 0 0 5px var(--or),
        inset 0 2px 4px rgba(255,255,255,.25),
        inset 0 -2px 4px rgba(0,0,0,.3),
        0 1px 0 var(--or-profond),
        0 3px 10px var(--ombre);
}

.bcba-jeton-label {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .02em;
    text-align: center;
    line-height: 1.25;
}

@media (prefers-reduced-motion: reduce) {
    .bcba-jeton:hover .bcba-jeton-icone,
    .bcba-jeton:active .bcba-jeton-icone { transform: none; }
}

/* ── Cadre orné : à poser sur cartes/panneaux pour le style
     « carte à collectionner » (double liseré + fleurons d'angle) ── */

.bcba-cadre-orne {
    position: relative;
    border: 1px solid var(--or);
    border-radius: 16px;
    box-shadow:
        0 0 0 5px var(--bg-scene),
        0 0 0 6px var(--ligne-forte),
        0 24px 50px var(--ombre);
}

.bcba-cadre-orne::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid var(--ligne-forte);
    border-radius: 10px;
    pointer-events: none;
}

.bcba-cadre-orne::after {
    content: '❖';
    position: absolute;
    top: -1px; left: -1px;
    color: var(--or);
    font-size: .8rem;
    line-height: 1;
    padding: 6px;
    pointer-events: none;
}

/* ── Illustration encadrée (photo du plateau IRL, visuels de carte...) ── */

.bcba-illustration {
    position: relative;
    border: 1px solid var(--or);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 0 5px var(--bg-scene), 0 0 0 6px var(--ligne-forte), 0 20px 40px var(--ombre);
    margin: 0 0 32px;
}

.bcba-illustration img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: cover;
}

.bcba-illustration-legende {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    text-align: center;
    color: var(--or-clair);
    background: var(--bg-carte-2);
    padding: 8px 12px;
}

/* Variante portrait (ex. 450×600) : largeur contrainte et centrée plutôt
   qu'étirée sur toute la largeur, recadrage vertical au lieu d'horizontal. */

.bcba-illustration.bcba-illustration-portrait {
    max-width: 260px;
    margin: 0 auto 28px;
}

.bcba-illustration.bcba-illustration-portrait img {
    aspect-ratio: 3 / 4;
    max-height: none;
    object-fit: cover;
}

/* ── Typographie ────────────────────────────────────────── */

.bcba-eyebrow {
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--or-clair);
    margin: 0 0 18px;
}

.bcba-titre {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    line-height: 1.05;
    letter-spacing: -.01em;
    color: var(--or);
    text-shadow: 0 2px 24px var(--ombre);
    margin: 0 0 22px;
}

.bcba-soustitre {
    max-width: 560px;
    margin: 0 auto 36px;
    font-size: 1.08rem;
    color: var(--texte-scene);
    opacity: .92;
}

/* ── Bouton tampon (CTA) ────────────────────────────────── */

.bcba-btn-tampon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--bg-scene);
    background: var(--or);
    border: 2px solid var(--or);
    border-radius: 6px;
    padding: 15px 28px;
    overflow: hidden;
    box-shadow: inset 0 0 0 3px var(--bg-scene), 0 8px 20px var(--ombre);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* Reflet qui balaie le bouton — un seul geste ludique, déclenché au survol */
.bcba-btn-tampon::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 30%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
    pointer-events: none;
}

.bcba-btn-tampon:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 3px var(--bg-scene), 0 14px 26px var(--ombre);
}
.bcba-btn-tampon:hover::after { left: 130%; }

.bcba-btn-tampon:active {
    transform: translateY(0);
    filter: brightness(.94);
    box-shadow: inset 0 0 0 3px var(--bg-scene), 0 4px 10px var(--ombre);
}

.bcba-btn-tampon:focus-visible { outline: 3px solid var(--texte-scene); outline-offset: 3px; }

/* Variante compacte pour les actions inline dans une liste (accepter,
   refuser, rembourser...) — même identité, gabarit réduit. */
.bcba-btn-tampon-sm {
    padding: 6px 16px;
    font-size: .7rem;
    box-shadow: inset 0 0 0 2px var(--bg-scene), 0 4px 10px var(--ombre);
}

@media (prefers-reduced-motion: reduce) {
    .bcba-btn-tampon::after { display: none; }
}

/* Boutons secondaires (texte, discrets) */

.bcba-btn-texte {
    font-family: var(--font-mono);
    font-size: .85rem;
    background: none;
    border: 1px solid var(--rouge);
    color: var(--rouge);
    border-radius: 999px;
    padding: 10px 22px;
    cursor: pointer;
}
.bcba-btn-texte:hover { background: linear-gradient(150deg, var(--rouge), #6f281e); color: var(--bg-scene); border-color: var(--rouge); }

.bcba-btn-texte-sm {
    padding: 6px 14px;
    font-size: .7rem;
}

/* ── Sélecteur de thème (bouton dark/light) ─────────────── */

.bcba-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--bg-carte);
    border: 1px solid var(--or);
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 24px var(--ombre);
}

.bcba-theme-toggle input { display: none; }

.bcba-theme-toggle label {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
}

/* Symboles seuls (☀ / 🌙) — pas de libellé texte, celui qui correspond
   au thème actif ressort, l'autre s'estompe. */

.bcba-toggle-icone {
    font-size: .85rem;
    line-height: 1;
    opacity: .4;
    transition: opacity .2s ease;
}

.bcba-theme-toggle input:not(:checked) + label .bcba-toggle-icone:first-child { opacity: 1; }
.bcba-theme-toggle input:checked + label .bcba-toggle-icone:last-child { opacity: 1; }

.bcba-toggle-slider {
    width: 34px;
    height: 20px;
    background: var(--bg-carte-2);
    border: 1px solid var(--or);
    border-radius: 11px;
    position: relative;
    transition: background .3s;
}

.bcba-toggle-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--or);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform .3s;
}

.bcba-theme-toggle input:checked + label .bcba-toggle-slider::before {
    transform: translateX(15px);
}

/* ── Le livret ouvert : section « pages réglées » ─────────
     Reste un panneau clair-sur-sombre en thème dark (page dans le
     livret fermé), et devient la couleur de fond dominante en light. ── */

.bcba-livret {
    background: var(--bg-carte);
    color: var(--texte-carte);
    padding: 64px 24px;
}

.bcba-livret-inner { max-width: 720px; margin: 0 auto; }

.bcba-livret h2 {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--or);
    margin: 0 0 36px;
}

.bcba-livret h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--or), transparent);
    opacity: .55;
}

.bcba-ligne {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 22px;
    align-items: center;
    padding: 16px 16px 16px 18px;
    border-left: 3px solid transparent;
    border-radius: 8px;
    transition: background-color .15s ease, border-color .15s ease;
}

.bcba-ligne + .bcba-ligne { margin-top: 2px; }

.bcba-ligne:hover {
    background: var(--bg-carte-2);
    border-left-color: var(--or);
}

.bcba-ligne-repere {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: .95rem;
    color: var(--rouge);
    white-space: nowrap;
}

.bcba-ligne-repere::before {
    content: '◆';
    font-size: .55rem;
    color: var(--or);
}

.bcba-ligne-texte { font-size: 1rem; }
.bcba-ligne-texte strong { color: var(--or); }

.bcba-ligne-repere.avec-icone::before { content: none; }

/* Tuiles de statistiques — pour les montants clés (Courant, Épargne, Dette),
   plus de présence qu'une simple ligne de tableau. */

.bcba-stats-rangee {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 8px 0 30px;
}

.bcba-stat-tuile {
    position: relative;
    padding: 20px 20px 18px;
    border: 1px solid var(--ligne-forte);
    border-radius: 10px;
    background: var(--bg-carte-2);
    overflow: hidden;
}

.bcba-stat-tuile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--or), transparent);
}

.bcba-stat-tuile.negatif::before {
    background: linear-gradient(90deg, var(--rouge), transparent);
}

.bcba-stat-tuile-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-att);
    margin: 0 0 10px;
}

.bcba-stat-tuile-valeur {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--or);
    line-height: 1.15;
}

.bcba-stat-tuile.negatif .bcba-stat-tuile-valeur { color: var(--rouge); }

.bcba-stat-tuile-lien {
    display: inline-block;
    margin-top: 10px;
}

/* Barre de synthèse — pour un montant total qui résume les tuiles
   au-dessus (patrimoine net, etc.), plus marquante qu'une simple ligne. */

.bcba-stat-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 6px;
    padding: 20px 24px;
    border: 1px solid var(--or);
    border-radius: 10px;
    background: linear-gradient(135deg, var(--bg-carte-2), transparent);
}

.bcba-stat-total-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--texte-carte);
}

.bcba-stat-total-valeur {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.9rem;
    color: var(--or);
}

.bcba-stat-total.negatif .bcba-stat-total-valeur { color: var(--rouge); }

/* Pastille de lien — remplace les liens texte soulignés "à l'ancienne"
   dans les lignes de livret (Gérer mes comptes, Voir mes placements...) */

.bcba-puce-lien {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--or);
    background: var(--bg-carte-2);
    border: 1px solid var(--or);
    padding: 6px 14px 6px 20px;
    margin: 3px 4px 3px 0;
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
    transition: background .15s ease, color .15s ease;
}

.bcba-puce-lien:hover {
    background: var(--or);
    color: var(--bg-scene);
}

/* ── Section communauté ─────────────────────────────────── */

.bcba-communaute {
    padding: 56px 24px 72px;
    text-align: center;
}

.bcba-communaute p {
    max-width: 520px;
    margin: 0 auto 8px;
    font-size: .95rem;
    color: var(--texte-scene);
    opacity: .85;
}

.bcba-communaute a {
    color: var(--or-clair);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bcba-footer-liens {
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: .82rem;
}

.bcba-footer-liens a { margin: 0 10px; color: var(--or-clair); text-decoration: none; }
.bcba-footer-liens a:hover { text-decoration: underline; }

/* ── Page de connexion ──────────────────────────────────── */

.bcba-connexion-cadre {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.bcba-carte-connexion {
    width: 100%;
    max-width: 400px;
    background: var(--bg-carte);
    color: var(--texte-carte);
    border-radius: 14px;
    padding: 40px 36px;
    text-align: center;
    border: 1px solid var(--or);
    box-shadow: 0 0 0 5px var(--bg-scene), 0 0 0 6px var(--ligne-forte), 0 30px 60px var(--ombre);
}

.bcba-carte-connexion h1 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--or);
    margin: 4px 0 6px;
}

.bcba-carte-connexion .bcba-soustitre-mini {
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rouge);
    opacity: .9;
    margin: 0 0 28px;
}

.bcba-champ { text-align: left; margin-bottom: 20px; }

.bcba-champ label {
    display: block;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--texte-att);
    margin-bottom: 6px;
}

.bcba-champ input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 10px 2px;
    border: none;
    border-bottom: 2px solid var(--ligne-forte);
    background: transparent;
    color: var(--texte-carte);
    transition: border-color .15s ease;
}

.bcba-champ input:focus {
    outline: none;
    border-bottom-color: var(--rouge);
}

.bcba-erreur {
    background: rgba(208, 104, 90, .12);
    border: 1px solid var(--rouge);
    color: var(--rouge);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .9rem;
    margin-bottom: 20px;
    text-align: left;
}

.bcba-message-ok {
    background: rgba(76, 175, 125, .12);
    border: 1px solid var(--vert-ok);
    color: var(--vert-ok);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .9rem;
    margin-bottom: 20px;
}

.bcba-carte-connexion .bcba-btn-tampon {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

.bcba-retour-accueil {
    display: block;
    margin-top: 24px;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--or-clair);
    text-decoration: none;
}
.bcba-retour-accueil:hover { text-decoration: underline; }

/* ── Accessibilité : mouvement réduit ───────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

/* QR code (activer-2fa.php) — contrainte de base, en plus du renfort mobile
   plus bas, au cas où QRCode.js générerait une taille plus grande que prévu. */
#qrcode {
    max-width: 100%;
    overflow: hidden;
}
#qrcode img, #qrcode canvas, #qrcode table {
    max-width: 100%;
    height: auto;
}

/* ── Petits écrans ──────────────────────────────────────── */

@media (max-width: 480px) {
    /* !important nécessaire : bat tout style inline grid-template-columns
       laissé sur certaines pages (ex. placements.php, mes-dettes.php). */
    .bcba-ligne { grid-template-columns: 1fr !important; gap: 4px; }
    .bcba-carte-connexion { padding: 32px 24px; }

    /* Formulaire du chat : le bouton "Envoyer" (petites capitales, padding
       généreux) et le textarea ne cohabitent plus sur une seule ligne en
       dessous de 480px — on empile au lieu de les compresser. */
    .bcba-chat-form { flex-direction: column; align-items: stretch; }
    .bcba-chat-form button { width: 100%; }

    /* QR code (activer-2fa.php) : QRCode.js génère une taille fixe qui
       déborde sur petit écran sans cette contrainte. */
    #qrcode { max-width: 100%; overflow: hidden; }
    #qrcode img, #qrcode canvas, #qrcode table {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ============================================================
   Carte de tirage qui se retourne — pop-up au lancer de dé
   ============================================================ */

.bcba-fond-carte {
    position: fixed;
    inset: 0;
    background: var(--voile-fond);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 20px;
}

.bcba-fond-carte.visible { display: flex; }

.bcba-carte-scene {
    width: 100%;
    max-width: 340px;
    aspect-ratio: 3 / 4;
    perspective: 1400px;
}

.bcba-carte-3d {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2, .8, .25, 1);
}

.bcba-carte-3d.retournee { transform: rotateY(180deg); }

.bcba-carte-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px;
    box-shadow: 0 30px 70px var(--ombre);
}

.bcba-carte-dos {
    background: var(--bg-carte);
    border: 3px solid var(--or);
    padding: 0;
    overflow: hidden;
}

.bcba-carte-dos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bcba-carte-recto {
    background: var(--bg-carte);
    color: var(--texte-carte);
    transform: rotateY(180deg);
    border: 3px solid var(--or);
    overflow-y: auto;
}

.bcba-carte-dos .bcba-tampon { margin-bottom: 0; }

.bcba-carte-valeur {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 3.4rem;
    color: var(--or);
    line-height: 1;
    margin: 6px 0 14px;
}

.bcba-carte-ligne {
    font-family: var(--font-mono);
    font-size: .88rem;
    margin: 4px 0;
    color: var(--texte-carte);
}

.bcba-carte-ligne.positif { color: var(--vert-ok); }
.bcba-carte-ligne.negatif { color: var(--rouge); }

.bcba-carte-fermer {
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: .82rem;
    background: none;
    border: 1px solid var(--or);
    color: var(--or);
    border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
}

.bcba-carte-fermer:hover { background: var(--or); color: var(--bg-scene); }

/* Étincelles */

.bcba-etincelle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--or);
    opacity: 0;
    pointer-events: none;
}

.bcba-etincelle.jouer {
    animation: bcba-etincelle-anim .9s ease-out forwards;
}

@keyframes bcba-etincelle-anim {
    0%   { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(.3); }
}

@media (prefers-reduced-motion: reduce) {
    .bcba-carte-3d { transition: none; }
    .bcba-etincelle.jouer { animation: none; opacity: 0; }
    .bcba-medaillon::before { animation: none; }
}

/* ============================================================
   Calendrier + pion
   ============================================================ */

.bcba-calendrier-scene {
    width: 100%;
    max-width: 380px;
    background: var(--bg-carte);
    border-radius: 16px;
    padding: 24px 22px 20px;
    box-shadow: 0 30px 70px var(--ombre);
    border: 3px solid var(--or);
}

.bcba-calendrier-titre {
    text-align: center;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-att);
    margin: 0 0 4px;
}

.bcba-calendrier-de {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--rouge);
    margin: 0 0 16px;
}

.bcba-calendrier-grille {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.bcba-calendrier-case {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ligne);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--texte-carte);
    background: var(--bg-carte-2);
}

.bcba-calendrier-case.bcba-case-vide {
    visibility: hidden;
}

.bcba-calendrier-case.bcba-case-actuel {
    outline: 2px solid var(--or);
    outline-offset: -2px;
}

.bcba-calendrier-case.bcba-case-arrivee {
    background: var(--or);
    color: var(--bg-scene);
    font-weight: 700;
}

.bcba-calendrier-pion {
    position: absolute;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    background: var(--rouge);
    border: 2px solid var(--bg-carte);
    box-shadow: 0 3px 8px var(--ombre);
    transition: left .9s cubic-bezier(.3, .7, .3, 1), top .9s cubic-bezier(.3, .7, .3, 1), opacity .3s ease;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
}

.bcba-calendrier-equation {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1.15rem;
    margin: 16px 0 0;
    color: var(--texte-carte);
}

.bcba-calendrier-equation strong {
    color: var(--rouge);
}

@media (prefers-reduced-motion: reduce) {
    .bcba-calendrier-pion { transition: opacity .2s ease; }
}

/* ============================================================
   Pages internes (tableau de bord, admin, modération, formulaires)
   ============================================================ */

.bcba-page-interne {
    min-height: 100vh;
    padding: 48px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bcba-carte-interne {
    width: 100%;
    max-width: 640px;
    background: var(--bg-carte);
    color: var(--texte-carte);
    border-radius: 14px;
    padding: 36px 40px;
    border: 1px solid var(--or);
    box-shadow: 0 0 0 5px var(--bg-scene), 0 0 0 6px var(--ligne-forte), 0 24px 50px var(--ombre);
}

.bcba-carte-interne.large { max-width: 880px; }

.bcba-carte-interne h1 {
    font-family: var(--font-display);
    font-size: 1.7rem;
    color: var(--or);
    margin: 0 0 6px;
}

.bcba-carte-interne h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--or);
    margin: 32px 0 14px;
}

.bcba-carte-interne h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--or), transparent);
    opacity: .5;
}

.bcba-carte-interne p { margin: 0 0 14px; }

.bcba-lien-retour {
    display: inline-block;
    margin-bottom: 20px;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--or-clair);
    text-decoration: none;
}
.bcba-lien-retour:hover { text-decoration: underline; }

.bcba-carte-interne + .bcba-lien-retour,
.bcba-lien-retour.sombre { color: var(--or-clair); }

/* Champs de formulaire "boîte" */

.bcba-champ-boxed { margin-bottom: 18px; }

.bcba-champ-boxed label {
    display: block;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--texte-att);
    margin-bottom: 6px;
}

.bcba-champ-boxed input[type=text],
.bcba-champ-boxed input[type=number],
.bcba-champ-boxed input[type=password],
.bcba-champ-boxed textarea,
.bcba-champ-boxed select {
    width: 100%;
    font-family: var(--font-body);
    font-size: .96rem;
    padding: 9px 11px;
    border: 1px solid var(--ligne-forte);
    border-radius: 8px;
    background: var(--bg-carte-2);
    color: var(--texte-carte);
}

.bcba-champ-boxed input:focus,
.bcba-champ-boxed textarea:focus,
.bcba-champ-boxed select:focus {
    outline: none;
    border-color: var(--rouge);
}

.bcba-champ-case {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    margin-bottom: 14px;
}

.bcba-note {
    font-size: .85rem;
    color: var(--texte-att);
    margin: -8px 0 16px;
}

/* Tableaux */

.bcba-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    margin: 8px 0 20px;
}

.bcba-table th {
    background: var(--bg-scene);
    color: var(--texte-scene);
    font-family: var(--font-mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    padding: 10px 12px;
}

.bcba-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ligne);
    color: var(--texte-carte);
}

.bcba-table tr:last-child td { border-bottom: none; }

/* Bloc "proposition" (file de validation admin) */

.bcba-proposition {
    border: 1px solid var(--ligne-forte);
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 24px;
}

.bcba-proposition h2 { margin-top: 0; }

.bcba-liste-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bcba-liste-nav li { margin-bottom: 10px; }
.bcba-liste-nav a { color: var(--or); text-decoration: none; font-weight: 500; }
.bcba-liste-nav a:hover { text-decoration: underline; }

/* ============================================================
   Galerie de catalogue (objets/acquisitions, événements)
   ============================================================ */

.bcba-recherche-barre {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    margin: 8px 0 20px;
    padding: 16px;
    background: var(--bg-carte-2);
    border-radius: 10px;
}

.bcba-recherche-barre .bcba-champ-boxed {
    margin-bottom: 0;
    flex: 1 1 180px;
}

.bcba-grille-catalogue {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 36px;
}

.bcba-carte-catalogue-mini {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--bg-carte);
    border: 1px solid var(--ligne-forte);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.bcba-carte-catalogue-mini:hover {
    box-shadow: 0 8px 20px var(--ombre);
    transform: translateY(-2px);
    border-color: var(--or);
}

.bcba-carte-catalogue-mini-active {
    outline: 3px solid var(--rouge);
    outline-offset: -3px;
}

.bcba-catalogue-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--bg-carte-2);
}

.bcba-catalogue-image-vide {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-scene);
    color: var(--or);
    font-family: var(--font-mono);
    font-size: .72rem;
    text-align: center;
    padding: 8px;
}

.bcba-catalogue-corps {
    padding: 10px 12px;
}

.bcba-catalogue-nom {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .92rem;
    color: var(--or);
    margin: 0 0 4px;
    line-height: 1.25;
}

.bcba-catalogue-info {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--texte-att);
}

.bcba-catalogue-ancre {
    scroll-margin-top: 20px;
}

/* Compte à rebours d'enchère */
.bcba-compte-rebours {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--rouge);
}
.bcba-compte-rebours.termine {
    color: var(--texte-att);
    font-weight: 400;
}

/* ============================================================
   Menu latéral (hamburger) — navigation globale du site
   ============================================================ */

.bcba-menu-hamburger {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--bg-carte);
    border: 1px solid var(--or);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 10px 24px var(--ombre);
}

.bcba-menu-hamburger span {
    width: 18px;
    height: 2px;
    background: var(--or);
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
}

.bcba-menu-hamburger.ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bcba-menu-hamburger.ouvert span:nth-child(2) { opacity: 0; }
.bcba-menu-hamburger.ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.bcba-menu-voile {
    position: fixed;
    inset: 0;
    background: var(--voile-fond);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.bcba-menu-voile.visible { opacity: 1; pointer-events: auto; }

.bcba-menu-volet {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 82vw;
    background: var(--bg-carte);
    border-right: 1px solid var(--or);
    box-shadow: 0 0 50px var(--ombre);
    z-index: 1000;
    padding: 28px 22px;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.2, .8, .25, 1);
    overflow-y: auto;
}

.bcba-menu-volet.ouvert { transform: translateX(0); }

.bcba-menu-fermer {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--or);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}

.bcba-menu-volet-logo {
    display: block;
    width: 64px;
    margin: 4px auto 20px;
}

.bcba-menu-volet-logo img {
    display: block;
    width: 100%;
    border-radius: 50%;
    border: 2px solid var(--or);
}

.bcba-menu-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bcba-menu-liste li { border-bottom: 1px solid var(--ligne); }
.bcba-menu-liste li:first-child { border-top: 1px solid var(--ligne); }

.bcba-menu-liste a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 6px;
    color: var(--texte-carte);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: .92rem;
    transition: color .15s ease, padding-left .15s ease;
}

.bcba-menu-liste a:hover { color: var(--or); padding-left: 10px; }

.bcba-menu-liste a.actif {
    color: var(--or);
    font-weight: 700;
}

.bcba-menu-liste-separateur {
    margin: 14px 0 4px;
    padding: 0 6px;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texte-att);
}

@media (prefers-reduced-motion: reduce) {
    .bcba-menu-volet,
    .bcba-menu-voile,
    .bcba-menu-hamburger span { transition: none; }
}

/* ── Galerie d'objets possédés (avec action intégrée, ex. mise aux
     enchères) — différent de la grille catalogue en lecture seule. ── */

.bcba-grille-objets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    margin: 8px 0 32px;
}

.bcba-carte-objet {
    background: var(--bg-carte-2);
    border: 1px solid var(--ligne-forte);
    border-radius: 12px;
    overflow: hidden;
}

.bcba-carte-objet-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--bg-scene);
}

.bcba-carte-objet-image-vide {
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-scene);
    font-size: 2rem;
}

.bcba-carte-objet-corps {
    padding: 14px 16px 18px;
}

.bcba-carte-objet-nom {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--or);
    margin: 0 0 6px;
}

.bcba-carte-objet-valeur {
    font-family: var(--font-mono);
    font-size: .76rem;
    color: var(--texte-att);
    margin: 0 0 14px;
}

.bcba-carte-objet form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.bcba-carte-objet .bcba-champ-boxed {
    margin-bottom: 0;
    flex: 1 1 110px;
}

/* ============================================================
   Liste des joueurs — galerie de cartes
   ============================================================ */

.bcba-grille-joueurs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
    margin: 8px 0 32px;
}

.bcba-carte-joueur {
    background: var(--bg-carte);
    border: 1px solid var(--ligne-forte);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
}

.bcba-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 12px;
    object-fit: cover;
    border: 2px solid var(--or);
    display: block;
}

.bcba-avatar-initiale {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: var(--bg-scene);
    color: var(--or);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--or);
}

/* Grand avatar — fiche personnage, contrôle d'upload de photo de profil. */
.bcba-avatar-grand {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 18px;
    border: 3px solid var(--or);
    box-shadow: 0 0 0 4px var(--bg-carte), 0 10px 24px var(--ombre);
}

.bcba-carte-joueur-nom {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--or);
    margin: 0 0 4px;
}

.bcba-carte-joueur-age {
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--texte-att);
    margin: 0 0 8px;
}

.bcba-statut-ligne {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--texte-carte);
}

.bcba-statut-point {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.bcba-statut-point.actif { background: var(--vert-ok); }
.bcba-statut-point.inactif { background: var(--texte-att); }

.bcba-badge-fin {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(208, 104, 90, .14);
    color: var(--rouge);
}

/* Badge de rôle — liste-joueurs.php. Pas de badge pour un simple joueur,
   c'est le cas par défaut, pas la peine de le marquer. */
.bcba-badge-role {
    display: inline-block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--or);
    color: var(--or);
    background: transparent;
}

.bcba-badge-role.mod {
    border-color: var(--or);
    color: var(--or);
}

.bcba-badge-role.super-mod {
    border-color: var(--or);
    background: var(--or);
    color: var(--bg-scene);
    font-weight: 700;
}

.bcba-badge-role.admin {
    border-color: var(--rouge);
    background: var(--rouge);
    color: var(--bg-scene);
    font-weight: 700;
}

/* ============================================================
   Groupe de boutons d'action
   ============================================================ */

.bcba-actions-groupe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.bcba-actions-groupe .bcba-btn-tampon,
.bcba-actions-groupe .bcba-btn-texte {
    margin: 0;
}

/* ============================================================
   Chat entre joueurs
   ============================================================ */

.bcba-chat-fenetre {
    height: 420px;
    overflow-y: auto;
    border: 1px solid var(--ligne-forte);
    border-radius: 10px;
    padding: 16px;
    margin: 8px 0 16px;
    background: var(--bg-carte);
}

.bcba-chat-message {
    margin-bottom: 14px;
}

.bcba-chat-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.bcba-chat-auteur {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .92rem;
    color: var(--or);
}

.bcba-chat-heure {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--texte-att);
    white-space: nowrap;
}

.bcba-chat-texte {
    margin: 2px 0 0;
    font-size: .94rem;
    color: var(--texte-carte);
    word-wrap: break-word;
}

.bcba-chat-vide {
    text-align: center;
    color: var(--texte-att);
    font-size: .9rem;
    padding: 40px 0;
}

.bcba-chat-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.bcba-chat-form textarea {
    flex: 1;
    font-family: var(--font-body);
    font-size: .95rem;
    padding: 10px;
    border: 1px solid var(--ligne-forte);
    border-radius: 8px;
    resize: none;
    background: var(--bg-carte-2);
    color: var(--texte-carte);
}

.bcba-chat-form textarea:focus {
    outline: none;
    border-color: var(--rouge);
}

.bcba-chat-note {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--texte-att);
    margin: 8px 0 0;
}

/* ============================================================
   SCRIPT DE BASCULE DARK/LIGHT — à coller une fois par page qui
   affiche le bouton .bcba-theme-toggle (identique à celui déjà
   présent dans Accueil-des-nouveaux.php, adapté aux nouvelles
   variables de ce fichier).

<script>
    const themeToggle = document.getElementById('themeToggle');
    const htmlElement = document.documentElement;
    const savedTheme = localStorage.getItem('bcba-theme') || 'dark';
    htmlElement.setAttribute('data-theme', savedTheme);
    if (themeToggle) {
        themeToggle.checked = savedTheme === 'light';
        themeToggle.addEventListener('change', () => {
            const newTheme = themeToggle.checked ? 'light' : 'dark';
            htmlElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('bcba-theme', newTheme);
        });
    }
</script>

   HTML du bouton correspondant (symboles seuls, pas de texte) :

<div class="bcba-theme-toggle">
    <input type="checkbox" id="themeToggle">
    <label for="themeToggle" aria-label="Basculer entre mode sombre et mode clair">
        <span class="bcba-toggle-icone">🌙</span>
        <span class="bcba-toggle-slider"></span>
        <span class="bcba-toggle-icone">☀️</span>
    </label>
</div>

   ============================================================ */