/* ============================================================ 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; --violet: #A78BFA; /* statut "à venir" (Exclu Premium) */ --ambre: #F0A93E; /* statut "en cours de développement" (Exclu Premium) */ --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; --violet: #6D28D9; --ambre: #B5720A; --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; } /* Badge "verrouillé" sur un jeton premium — NOUVEAU 08/09/2026, remplace un simple emoji 🔒 en texte brut (jaune sur fond doré, quasi invisible). Fond sombre + anneau doré pour trancher nettement avec le jeton. */ .bcba-jeton-cadenas { position: absolute; top: -6px; right: 2px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; background: var(--bg-scene); box-shadow: 0 0 0 2px var(--or), 0 4px 10px var(--ombre); z-index: 1; } /* Badge "objet fusionné" (système de fusion — NOUVEAU 08/09/2026, couleur rendue pilotable en admin le même jour) — posé sur la photo d'un super objet (mes-objets.php, place-marche.php, profil-joueur.php). Même construction que .bcba-jeton-cadenas (fond sombre + anneau coloré), mais plus gros car posé sur une photo plus grande. La couleur de l'anneau vient de --badge-couleur, positionnée en style inline par chaque page d'après fusion_paliers.couleur_badge (admin/gerer-fusion-objets.php) — se replie sur l'or par défaut si jamais absente. */ .bcba-badge-fusion { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; background: var(--bg-scene); box-shadow: 0 0 0 3px var(--badge-couleur, var(--or)), 0 6px 14px var(--ombre); z-index: 1; } @media (prefers-reduced-motion: reduce) { .bcba-jeton:hover .bcba-jeton-icone, .bcba-jeton:active .bcba-jeton-icone { transform: none; } } /* Jeton rendu sur un