/* ============================================================
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
par
Le HTML de la page ne change pas.
THÈME
Tout le fichier est piloté par [data-theme] sur .
- 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;
}
/* Médaillon "dé à 12 faces" de la page d'accueil (remplace l'ancienne
grille de 6 icônes du 06/09/2026, qui débordait visuellement du rond).
Même traitement de bordure/ombre que .bcba-tampon pour rester cohérent
avec le reste de la charte, mais fond sombre (au lieu de doré) pour que
le dé doré se détache nettement dessus plutôt que de se fondre dedans. */
/* Médaillon "dé" de la page d'accueil : affiche l'image fournie
(12-faces.png, à déposer dans /uploads/images/), recadrée en rond et
plafonnée à une taille discrète — remplace la grille de 6 icônes du
06/09/2026 (débordait du rond) et les tentatives SVG qui ont suivi. */
.bcba-die-hero {
position: relative;
width: 84px;
height: 84px;
margin: 0 auto 28px;
border-radius: 50%;
overflow: hidden;
box-shadow:
0 0 0 3px var(--bg-scene),
0 0 0 5px var(--or),
0 10px 24px var(--ombre);
transform: rotate(-7deg);
}
.bcba-die-hero img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ── 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; }
}
/* Jeton rendu sur un