/* ═══════════════════════════════════════════════════════════════════════ BF-SUITE.CSS — Design system commun de la suite BigFamily ─────────────────────────────────────────────────────────────────────── SOURCE UNIQUE. Ce fichier est identique sur tous les sites de la suite (Kids, Cinéma, Budget, et les futurs Asso / Tools). On le dépose dans chaque site sous assets/bf-suite.css et on le charge AVANT le CSS propre au site. Il fournit : • une palette normalisée (variables --bf-*), commune à toute la suite ; • le mode sombre complet (piloté par ) ; • la barre d'actions du bandeau : Admin / Thème / Déconnexion ; • le pied de page « La suite BigFamily ». Ce qui CHANGE d'un site à l'autre = une seule variable : --bf-accent (la nuance du titre : caramel, doré, saumon…) Elle est posée par bf-suite.js à partir de la collection « theme », ou en dur dans le en secours. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* ─── Palette claire (défaut) — dérivée du logo BigFamily ─────────── */ --bf-creme:#F2EBD8; --bf-creme-clair:#FAF6EA; --bf-creme-carte:#FFFDF7; --bf-brun:#5A4632; --bf-brun-fonce:#3E2F20; --bf-olive:#8A9A6B; --bf-olive-fonce:#6B7A50; --bf-dore:#B8873F; --bf-dore-clair:#D4A55C; --bf-rouge:#B04A3A; --bf-texte:#3E2F20; --bf-texte-doux:#7A6A55; --bf-texte-pale:#A0917C; --bf-bord:#D9CDB4; --bf-bord-doux:#E8DFC9; --bf-fond:var(--bf-creme); --bf-carte:var(--bf-creme-carte); --bf-ombre:rgba(62,47,32,.10); --bf-ombre-forte:rgba(62,47,32,.20); /* Accent propre au site : surchargé par bf-suite.js (défaut = doré) */ --bf-accent:#B8873F; --bf-accent-clair:#D4A55C; --bf-rouge:#C0503A; --bf-titre:'Playfair Display','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif; /* Voile du bandeau, en clair */ --bf-voile:linear-gradient(to bottom, rgba(18,12,8,.34) 0%, rgba(18,12,8,.10) 34%, rgba(18,12,8,.52) 74%, rgba(18,12,8,.82) 100%); } /* ─── MODE SOMBRE ──────────────────────────────────────────────────── Activé par (posé par bf-suite.js). On ne redéfinit que les couleurs : la structure ne bouge pas. */ html[data-theme="dark"]{ --bf-creme:#211913; --bf-creme-clair:#2A211A; --bf-creme-carte:#2E251D; --bf-brun:#E6D8C2; --bf-brun-fonce:#F2EBD8; --bf-olive:#A6B584; --bf-olive-fonce:#8A9A6B; --bf-texte:#ECE3D4; --bf-texte-doux:#B7A88F; --bf-texte-pale:#8A7C68; --bf-bord:#413428; --bf-bord-doux:#372B21; --bf-fond:#1B140F; --bf-carte:#2A211A; --bf-ombre:rgba(0,0,0,.34); --bf-ombre-forte:rgba(0,0,0,.5); --bf-rouge:#E06A52; --bf-voile:linear-gradient(to bottom, rgba(10,7,4,.44) 0%, rgba(10,7,4,.18) 34%, rgba(10,7,4,.66) 74%, rgba(10,7,4,.92) 100%); } html[data-theme="dark"] body{background:var(--bf-fond);color:var(--bf-texte);} /* Transition douce lors de la bascule clair/sombre */ html.bf-anim, html.bf-anim body, html.bf-anim .bf-hero-actions .bf-btn, html.bf-anim footer, html.bf-anim .bf-pied-site{ transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* ═══════════════════════════════════════════════════════════════════════ BANDEAU UNIFIÉ — gabarit de référence « Kids » ─────────────────────────────────────────────────────────────────────── Rendu identique sur tous les sites de la suite. Seuls varient l'image de fond (--bf-banniere / [data-bf-banniere]) et l'accent (--bf-accent). Reprend au pixel le bandeau de Kids : hauteur 420px, définition alignée à gauche et collée en bas, mêmes tailles de police, barre verticale. Structure HTML attendue :
(ou ) … la barre .bf-hero-actions est injectée par bf-suite.js …
BigFamilyNom
Famille
[nom féminin]
1 — …
2 — …
═══════════════════════════════════════════════════════════════════════ */ .bf-hero{ position:relative; height:420px; overflow:hidden; background:#1a1208; } .bf-hero-bg{ position:absolute; inset:0; background-image:var(--bf-banniere, none); background-size:cover; background-position:center center; } .bf-hero-overlay{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 60%, rgba(44,36,22,.92) 100%); } .bf-hero-content{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:flex-end; padding:28px 32px 32px; } .bf-hero-name{ font-family:var(--bf-titre); font-size:2.2rem; color:#fff; font-weight:700; letter-spacing:.02em; line-height:1.1; margin-bottom:6px; text-shadow:0 3px 16px rgba(0,0,0,.55); } .bf-hero-name span{ color:var(--bf-accent-clair, var(--bf-accent)); font-style:italic; } .bf-hero-def{ margin-top:8px; border-left:3px solid var(--bf-accent); padding-left:14px; } .bf-hero-def-word{ font-family:var(--bf-titre); color:#fff; font-size:1.05rem; font-weight:700; letter-spacing:.06em; text-shadow:0 2px 10px rgba(0,0,0,.55); } .bf-hero-def-cat{ color:rgba(255,255,255,.55); font-size:.78rem; font-style:italic; margin-bottom:6px; font-weight:300; } .bf-hero-def-line{ color:rgba(255,255,255,.82); font-size:.82rem; font-weight:300; line-height:1.6; text-shadow:0 2px 8px rgba(0,0,0,.5); } .bf-hero-def-line strong{ color:var(--bf-accent); font-weight:700; } /* Logo en médaillon, ancré en haut à gauche (comme Kids) */ .bf-hero > .bf-hero-logo, .bf-hero-logo-wrap{ position:absolute; top:20px; left:26px; z-index:6; width:96px; height:72px; display:flex; align-items:center; justify-content:center; background:none; border:none; box-shadow:none; overflow:visible; } .bf-hero-logo-wrap img{ max-width:100%; max-height:100%; object-fit:contain; display:block; filter:drop-shadow(0 3px 10px rgba(0,0,0,.45)); } @media(max-width:600px){ .bf-hero{height:340px;} .bf-hero-content{padding:20px 20px 22px;} .bf-hero-name{font-size:1.7rem;} .bf-hero > .bf-hero-logo, .bf-hero-logo-wrap{top:14px; left:16px; width:72px; height:54px;} } /* ═══════════════════════════════════════════════════════════════════════ LOGO DU BANDEAU Le logo fourni est déjà un médaillon fini (rond + bordure + fond). On l'affiche donc ENTIER (object-fit:contain), sans le réenfermer dans un cercle qui le rognerait. Fond transparent, simple ombre portée. ═══════════════════════════════════════════════════════════════════════ */ .bf-hero-logo{ width:96px; height:72px; object-fit:contain; background:none; border:none; box-shadow:none; filter:drop-shadow(0 3px 10px rgba(0,0,0,.45)); flex-shrink:0; } div.bf-hero-logo{background-size:contain; background-repeat:no-repeat; background-position:center;} /* Logo par défaut (médaillon fourni), affiché entier. Un site peut le surcharger via --bf-logo ou via applySiteTheme({logo:...}). */ .bf-hero-logo-wrap[data-bf-logo]{ background-image:var(--bf-logo, url('/images/logo-bigfamily.png')); background-size:contain; background-repeat:no-repeat; background-position:center; } @media(max-width:600px){ .bf-hero-logo{width:72px; height:54px;} } /* ═══════════════════════════════════════════════════════════════════════ BARRE D'ACTIONS DU BANDEAU — Admin / Thème / Déconnexion S'ancre en haut-droite du bandeau (le bandeau doit être position:relative). ═══════════════════════════════════════════════════════════════════════ */ .bf-hero-actions{ position:absolute; top:20px; right:22px; z-index:20; display:flex; align-items:center; gap:9px; } .bf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 17px; background:rgba(255,255,255,.15); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.38); border-radius:999px; color:#fff; font-family:'Segoe UI',system-ui,sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.03em; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .18s, border-color .18s, transform .12s; } .bf-btn:hover{background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.55);} .bf-btn:active{transform:translateY(1px);} .bf-btn svg{width:17px; height:17px; display:block; pointer-events:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;} /* Bouton icône seul (thème) : rond, jamais de texte (lune/soleil uniquement) */ .bf-btn.bf-btn-icon{width:38px; padding:0; border-radius:50%;} .bf-btn.bf-btn-icon .bf-btn-label{display:none !important;} /* Bouton déconnexion : masqué tant que l'admin n'est pas connecté */ .bf-btn[data-bf="logout"]{display:none;} html.bf-admin .bf-btn[data-bf="logout"]{display:inline-flex;} /* Compatibilité Kids : son bouton .hero-admin-btn est réutilisé DANS la barre. On annule son positionnement absolu d'origine et on lui donne l'allure bf-btn pour qu'il s'aligne proprement à côté du bouton thème (sans chevauchement). position:relative → reste dans le flux flex ET sert d'ancre au badge de demandes. */ .bf-hero-actions .hero-admin-btn{ position:relative; top:auto; right:auto; height:38px; padding:0 17px; background:rgba(255,255,255,.15); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.38); border-radius:999px; color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.03em; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; white-space:nowrap; } .bf-hero-actions .hero-admin-btn:hover{background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.55);} /* En mode admin, le bouton Admin peut devenir « Gérer » via JS/texte */ @media(max-width:600px){ .bf-hero-actions{top:14px; right:14px; gap:7px;} .bf-btn{height:34px; padding:0 13px; font-size:.76rem;} .bf-btn.bf-btn-icon{width:34px;} /* Sur mobile, on garde le libellé court : les icônes suffisent */ .bf-btn .bf-btn-label{display:none;} .bf-btn svg{width:16px;height:16px;} } /* ═══════════════════════════════════════════════════════════════════════ PIED DE PAGE — « La suite BigFamily » Rempli par bf-suite.js à partir de la collection « sites ». ═══════════════════════════════════════════════════════════════════════ */ footer.bf-pied{ margin-top:40px; background:linear-gradient(to bottom, var(--bf-creme-clair), var(--bf-fond)); border-top:1px solid var(--bf-bord); padding:38px 24px 26px; } .bf-pied-contenu{max-width:1220px; margin:0 auto;} .bf-pied-titre{ font-family:var(--bf-titre); font-size:.76rem; text-transform:uppercase; letter-spacing:.2em; color:var(--bf-texte-pale); font-weight:600; text-align:center; margin-bottom:20px; } .bf-pied-sites{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; max-width:900px; margin:0 auto; } .bf-pied-site{ display:flex; align-items:center; gap:13px; padding:13px 16px; border-radius:11px; background:var(--bf-carte); border:1px solid var(--bf-bord-doux); text-decoration:none; transition:border-color .16s, transform .16s, box-shadow .16s; } .bf-pied-site:hover{ border-color:var(--bf-olive); transform:translateY(-2px); box-shadow:0 6px 18px var(--bf-ombre); } .bf-pied-site.ici{ background:color-mix(in srgb, var(--bf-accent) 12%, var(--bf-carte)); border-color:color-mix(in srgb, var(--bf-accent) 40%, transparent); cursor:default; } .bf-pied-site.ici:hover{transform:none; box-shadow:none;} .bf-pied-pastille{ width:38px; height:38px; border-radius:10px; flex-shrink:0; background:var(--bf-brun); color:var(--bf-creme); display:flex; align-items:center; justify-content:center; font-family:var(--bf-titre); font-size:1.05rem; font-weight:700; } .bf-pied-site.ici .bf-pied-pastille{background:var(--bf-accent);} .bf-pied-texte{min-width:0;} .bf-pied-nom{ font-family:var(--bf-titre); font-size:.94rem; font-weight:700; color:var(--bf-brun); line-height:1.2; } .bf-pied-desc{ font-size:.75rem; color:var(--bf-texte-doux); line-height:1.35; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bf-pied-bas{ margin-top:26px; padding-top:18px; border-top:1px solid var(--bf-bord-doux); text-align:center; font-size:.78rem; color:var(--bf-texte-pale); } .bf-pied-bas .bf-marque{ font-family:var(--bf-titre); color:var(--bf-texte-doux); font-size:.86rem; } .bf-pied-bas .bf-marque em{font-style:italic; color:var(--bf-accent);} @media(max-width:600px){ footer.bf-pied{padding:28px 16px 20px;} .bf-pied-sites{grid-template-columns:1fr;} } /* Utilitaire : masquer tant que JS n'a pas peuplé le footer */ .bf-pied[hidden]{display:none;} /* ═══════════════════════════════════════════════════════════════════════ ADMINISTRATION UNIFIÉE — gabarit de référence « Kids » ─────────────────────────────────────────────────────────────────────── Menu de tuiles → section → retour. Un seul style pour tous les sites. Icônes Tabler inline (BFSuite.icon). Responsive : la grille s'adapte (plusieurs colonnes sur PC, réempilée sur mobile). Dark mode inclus. Chaque site ne fournit que le CONTENU de ses sections. */ .bf-admin-shell{display:flex;flex-direction:column;min-height:0;flex:1;font-family:'Nunito',system-ui,sans-serif;} /* Barre supérieure : retour · titre · fermer */ .bf-admin-topbar{ display:flex;align-items:center;gap:10px; padding:16px 18px 14px;border-bottom:1px solid var(--bf-bord); flex-shrink:0;background:var(--bf-creme-clair); position:sticky;top:0;z-index:2; } .bf-admin-topbar-title{ flex:1;font-family:'Playfair Display',Georgia,serif;font-size:1.25rem; color:var(--bf-brun);font-weight:700;line-height:1.2; } .bf-admin-topbar-sub{font-size:.72rem;color:var(--bf-texte-pale);font-weight:400; margin-top:1px;font-family:'Nunito',system-ui,sans-serif;} .bf-admin-back,.bf-admin-close{ width:40px;height:40px;flex-shrink:0;border:1px solid var(--bf-bord); background:var(--bf-creme);border-radius:12px;cursor:pointer;color:var(--bf-accent); display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s; } .bf-admin-back:hover,.bf-admin-close:hover{background:var(--bf-creme-carte);border-color:var(--bf-accent);} .bf-admin-back svg,.bf-admin-close svg{width:20px;height:20px;} .bf-admin-content{flex:1;overflow-y:auto;padding:18px;-webkit-overflow-scrolling:touch;} /* Résumé chiffré (optionnel) en haut du menu */ .bf-admin-summary{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;} .bf-admin-summary-card{ flex:1;min-width:90px;background:var(--bf-creme-clair);border:1px solid var(--bf-bord); border-radius:12px;padding:12px 8px;text-align:center; } .bf-admin-summary-card.alerte{border-color:var(--bf-rouge,#C0503A);} .bf-admin-summary-val{font-family:'Playfair Display',Georgia,serif;font-size:1.5rem; color:var(--bf-accent);font-weight:700;line-height:1;} .bf-admin-summary-lbl{font-size:.66rem;color:var(--bf-texte-pale);margin-top:4px; text-transform:uppercase;letter-spacing:.05em;line-height:1.2;} /* Grille de tuiles — s'adapte à la largeur (PC multi-colonnes, mobile empilé) */ .bf-admin-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px;margin-bottom:14px;} .bf-admin-tile{ position:relative;background:var(--bf-creme-clair);border:1px solid var(--bf-bord); border-radius:12px;padding:16px 14px;cursor:pointer;text-align:left; display:flex;flex-direction:column;gap:3px;min-height:104px; transition:transform .12s,box-shadow .15s,border-color .15s;font-family:inherit; } .bf-admin-tile:hover{transform:translateY(-2px);box-shadow:var(--bf-ombre);border-color:var(--bf-accent);} .bf-admin-tile:active{transform:scale(.98);} .bf-admin-tile-icon{color:var(--bf-accent);margin-bottom:6px;line-height:0;} .bf-admin-tile-icon svg{width:26px;height:26px;} .bf-admin-tile-label{font-weight:700;font-size:1rem;color:var(--bf-brun);} .bf-admin-tile-sub{font-size:.78rem;color:var(--bf-texte-pale);line-height:1.35;} .bf-admin-tile-badge{ position:absolute;top:12px;right:12px;min-width:22px;height:22px;padding:0 6px; background:var(--bf-rouge,#C0503A);color:#fff;border-radius:999px; font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center; } /* Sections (contenu ouvert depuis une tuile) */ .bf-admin-section{margin-bottom:20px;} .bf-admin-section-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em; color:var(--bf-texte-pale);margin-bottom:10px;font-weight:700; display:flex;justify-content:space-between;align-items:center;gap:8px;} .bf-admin-help{font-size:.82rem;color:var(--bf-texte-doux);background:var(--bf-creme-clair); padding:10px 12px;border-radius:10px;border-left:3px solid var(--bf-accent); margin-bottom:12px;line-height:1.5;} /* Bouton pleine largeur (déconnexion, actions) */ .bf-admin-fullbtn{ width:100%;padding:12px;border-radius:12px;border:1px solid var(--bf-bord); background:var(--bf-creme-clair);color:var(--bf-brun);font-weight:700; font-family:inherit;font-size:.92rem;cursor:pointer;transition:background .15s; display:flex;align-items:center;justify-content:center;gap:8px; } .bf-admin-fullbtn:hover{background:var(--bf-creme-carte);} .bf-admin-fullbtn.danger{color:var(--bf-rouge,#C0503A);} /* ═══════════════════════════════════════════════════════════════════════ BARRE DE MENU UNIFIÉE (référence : Budget) Style commun applicable via .bf-nav / .bf-nav-btn, OU en pont sur les classes existantes de chaque site (voir chaque site). Fond clair, onglets en capitales espacées, actif souligné à l'accent du site. ═══════════════════════════════════════════════════════════════════════ */ .bf-nav{ background:var(--bf-creme-clair); border-bottom:1px solid var(--bf-bord); display:flex; justify-content:center; position:sticky; top:0; z-index:100; box-shadow:0 2px 10px rgba(0,0,0,.04); overflow-x:auto; } .bf-nav::-webkit-scrollbar{height:0;} .bf-nav-btn{ padding:14px 26px; border:none; background:transparent; color:var(--bf-texte-pale); font-family:'Nunito',system-ui,sans-serif; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; cursor:pointer; white-space:nowrap; border-bottom:3px solid transparent; transition:color .15s,background .15s,border-color .15s; } .bf-nav-btn:hover{ color:var(--bf-brun); background:color-mix(in srgb, var(--bf-accent) 6%, transparent); } .bf-nav-btn.active,.bf-nav-btn.actif{ color:var(--bf-accent); border-bottom-color:var(--bf-accent); background:color-mix(in srgb, var(--bf-accent) 8%, transparent); } @media(max-width:600px){ .bf-nav{justify-content:flex-start;} .bf-nav-btn{padding:12px 16px; font-size:.72rem;} } /* ═══════════════════════════════════════════════════════════════════════ MODALE D'ADMINISTRATION (pop-up) — utilisée par Budget Overlay assombri + carte crème centrée (cohérent avec le reste de la suite). La carte réutilise le gabarit bf-admin-*. ═══════════════════════════════════════════════════════════════════════ */ .bf-admin-overlay{ position:fixed; inset:0; z-index:1000; display:none; align-items:flex-start; justify-content:center; background:rgba(20,14,9,.55); backdrop-filter:blur(3px); padding:24px 16px; overflow-y:auto; } .bf-admin-overlay.open{display:flex;} .bf-admin-modal{ width:100%; max-width:760px; margin:auto; background:var(--bf-creme); border:1px solid var(--bf-bord); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.5); overflow:hidden; } .bf-admin-modal .bf-admin-content{padding:18px;} .bf-admin-modal .bf-admin-topbar{background:var(--bf-creme-clair);} @media(max-width:600px){ .bf-admin-overlay{padding:0;} .bf-admin-modal{max-width:none; min-height:100vh; border-radius:0; border:none;} }