/* ========================================================================== templates-skin.css — MODÈLES VISUELS (peaux) du site public. Le site public (index.html) est peint pour un seul thème sombre ("luxe"). Ce fichier transforme réellement son apparence selon le modèle choisi par la boutique, SANS toucher à sa structure HTML. Principe : - tenant-theme.js pose sur deux classes : `themed` + `theme-`. - Chaque `body.theme-` ne fait que (re)définir un JEU DE VARIABLES. - Un unique bloc `body.themed …` réécrit toutes les couleurs/typos codées en dur du site en s'appuyant sur ces variables. Un seul calque d'override, N palettes -> N rendus distincts, cohérents et maintenables. Variables par thème : --gold / --gold-soft : couleur d'accent (CTA, prix, marque) + variante --on-accent : texte lisible POSÉ sur la couleur d'accent --ink / --ink-2 / --ink-3 : fonds (page, bandes, cartes) --paper : couleur de texte principale --muted : texte secondaire --line : filets / bordures --hero-ink : couleur des grands titres (hero + sections) --hero-grad : fond du hero --header-bg : fond de l'en-tête collante --platform-grad : fond de la bande marketing "technologie" --platform-ink : texte sur cette bande --font-heading / --font-body : typographies --radius : arrondi des boutons/cartes Les surcharges de marque (couleur principale/accent de la boutique) sont posées EN INLINE sur par applyBranding -> elles gagnent sur ces vars. ========================================================================== */ /* ---- classic — chaleureux, clair, artisanal --------------------------- */ body.theme-classic { --gold: #a9744f; --gold-soft: #7f5539; --on-accent: #fff; --ink: #faf6f1; --ink-2: #f3e7d8; --ink-3: #ece0d3; --paper: #2a1e16; --muted: #836f5d; --line: rgba(127, 85, 57, .16); --hero-ink: #2a1e16; --hero-grad: radial-gradient(1000px 520px at 80% -10%, rgba(169, 116, 79, .18), transparent 60%), linear-gradient(180deg, #fbf3ea 0%, #f3e7d8 100%); --hero-tint: rgba(169, 116, 79, .18); --header-bg: rgba(250, 246, 241, .9); --platform-grad: linear-gradient(180deg, #f3e7d8, #ece0d3); --platform-tint: rgba(0,0,0,0); --platform-ink: #2a1e16; --font-heading: 'Playfair Display'; --font-body: 'Inter'; --radius: 10px; } /* ---- editorial — magazine, blanc, sérif fine -------------------------- */ body.theme-editorial { --gold: #b8912f; --gold-soft: #8d6e63; --on-accent: #fff; --ink: #ffffff; --ink-2: #faf8f4; --ink-3: #f2efe8; --paper: #1a1a1a; --muted: #6b6b6b; --line: rgba(0, 0, 0, .1); --hero-ink: #141414; --hero-grad: linear-gradient(180deg, #ffffff 0%, #faf8f4 100%); --hero-tint: rgba(0,0,0,0); --header-bg: rgba(255, 255, 255, .9); --platform-grad: linear-gradient(180deg, #faf8f4, #f2efe8); --platform-tint: rgba(0,0,0,0); --platform-ink: #141414; --font-heading: 'Cormorant Garamond'; --font-body: 'Manrope'; --radius: 4px; } /* ---- zen — spa, épuré, tons doux -------------------------------------- */ body.theme-zen { --gold: #6b8f89; --gold-soft: #4f746d; --on-accent: #fff; --ink: #f3f6f5; --ink-2: #e9f0ee; --ink-3: #dfe9e6; --paper: #26332f; --muted: #6f817c; --line: rgba(107, 143, 137, .2); --hero-ink: #26332f; --hero-grad: radial-gradient(900px 500px at 78% -10%, rgba(107, 143, 137, .18), transparent 60%), linear-gradient(180deg, #eef4f2 0%, #e2edea 100%); --hero-tint: rgba(107, 143, 137, .18); --header-bg: rgba(243, 246, 245, .9); --platform-grad: linear-gradient(180deg, #e9f0ee, #dfe9e6); --platform-tint: rgba(0,0,0,0); --platform-ink: #26332f; --font-heading: 'Josefin Sans'; --font-body: 'Nunito Sans'; --radius: 18px; } /* ---- bold — moderne, contrasté, énergique ----------------------------- */ body.theme-bold { --gold: #e63946; --gold-soft: #c1121f; --on-accent: #fff; --ink: #fff8f0; --ink-2: #fff1e2; --ink-3: #ffe6cf; --paper: #1d1d1d; --muted: #5a5a5a; --line: rgba(29, 53, 87, .16); --hero-ink: #1d3557; --hero-grad: linear-gradient(120deg, #fff1e2 0%, #ffe0c7 100%); --hero-tint: rgba(0,0,0,0); --header-bg: rgba(255, 248, 240, .92); --platform-grad: linear-gradient(180deg, #1d3557, #152844); --platform-tint: rgba(0,0,0,0); --platform-ink: #ffffff; --font-heading: 'Poppins'; --font-body: 'Inter'; --radius: 14px; } /* ---- luxe — sombre, or, sérif (rendu d'origine du site) --------------- */ body.theme-luxe { --gold: #c9a227; --gold-soft: #e8d8a0; --on-accent: #141210; --ink: #141210; --ink-2: #1c1916; --ink-3: #242019; --paper: #f4efe6; --muted: #a79f8f; --line: rgba(232, 216, 160, .16); --hero-ink: #ffffff; --hero-grad: radial-gradient(1200px 600px at 78% -10%, rgba(201, 162, 39, .18), transparent 60%), linear-gradient(180deg, #100e0c 0%, #17130f 60%, #141210 100%); --hero-tint: rgba(201, 162, 39, .18); --header-bg: rgba(20, 18, 16, .82); --platform-grad: linear-gradient(180deg, #141210, #100e0c); --platform-tint: rgba(0,0,0,0); --platform-ink: #ffffff; --font-heading: 'Cormorant'; --font-body: 'Jost'; --radius: 999px; } /* ---- custom — base neutre, pilotée par la marque de la boutique ------- */ body.theme-custom { --gold: #6c8cff; --gold-soft: #8b5cf6; --on-accent: #fff; --ink: #ffffff; --ink-2: #f7f7f8; --ink-3: #eeeef2; --paper: #1a1a1a; --muted: #666a72; --line: rgba(0, 0, 0, .1); --hero-ink: #141414; --hero-grad: radial-gradient(1000px 520px at 80% -10%, rgba(108, 140, 255, .14), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%); --hero-tint: rgba(108, 140, 255, .14); --header-bg: rgba(255, 255, 255, .9); --platform-grad: linear-gradient(180deg, #f7f7f8, #eeeef2); --platform-tint: rgba(0,0,0,0); --platform-ink: #141414; --font-heading: 'Inter'; --font-body: 'Inter'; --radius: 12px; } /* ====================================================================== Calque d'override unique — s'applique dès qu'un thème est actif. Réécrit les valeurs codées en dur (couleurs #fff/#cfc7b8, polices 'Cormorant'/'Jost', gradients sombres) en variables du thème courant. Spécificité `body.themed …` > sélecteurs d'origine -> gagne sans !important. ====================================================================== */ body.themed { font-family: var(--font-body), system-ui, sans-serif; } /* Typographies de titres */ body.themed .brand, body.themed .hero-title, body.themed .section-head h2, body.themed .svc h3, body.themed .svc .price, body.themed .member h3, body.themed .member .avatar, body.themed .value h3, body.themed .plat-card h3, body.themed .stat strong, body.themed .cta h2, body.themed #avis-summary { font-family: var(--font-heading), Georgia, serif; } /* Typographie des BOUTONS / NAV / chrome UI (3e emplacement --font-ui). Le repli var(--font-ui, var(--font-body)) est TOTALEMENT rétrocompatible : sans police UI choisie, boutons et nav gardent exactement la police de corps actuelle. */ body.themed .reserve-btn, body.themed .btn-gold, body.themed .btn-outline, body.themed .main-nav a, body.themed button { font-family: var(--font-ui, var(--font-body)), system-ui, sans-serif; } /* En-tête */ body.themed .site-header { background: var(--header-bg, var(--ink)); } /* Hero */ /* UNITÉ VISUELLE (chantier 81) : le héros ne peint plus son PROPRE fond (un dégradé clair de la peau, indépendant du salon) — il pose une TEINTE de marque par-dessus le fond du salon. Avant : héros blanc au-dessus d'un corps sombre, deux fonds qui se contredisaient. */ body.themed .hero::before { background: radial-gradient(1200px 600px at 78% -10%, var(--hero-tint, transparent), transparent 60%), var(--ink); } body.themed .hero::after { background: none; } body.themed .hero-title { color: var(--hero-ink); } body.themed .hero-text { color: var(--hero-muted, var(--muted)); } /* Grands titres de sections (étaient en #fff codé en dur) */ body.themed .section-head h2, body.themed .member h3, body.themed .plat-card h3 { color: var(--hero-ink); } /* Boutons : arrondi + texte lisible sur l'accent */ body.themed .btn-gold, body.themed .btn-outline, body.themed .reserve-btn { border-radius: var(--radius); } body.themed .btn-gold { color: var(--on-accent); } body.themed .btn-gold:hover { box-shadow: 0 18px 46px color-mix(in srgb, var(--gold) 34%, transparent); } body.themed .reserve-btn:hover { color: var(--on-accent); } body.themed .member .avatar { color: var(--on-accent); } body.themed .svc, body.themed .review-card, body.themed .member, body.themed .value, body.themed .plat-card { border-radius: calc(var(--radius) + 4px); } /* Bande marketing "technologie" */ body.themed .platform { background: linear-gradient(180deg, var(--platform-tint, transparent), transparent), var(--ink); } body.themed .platform .section-head h2, body.themed .platform .plat-card h3, body.themed .platform .eyebrow { color: var(--platform-ink); } body.themed .platform .plat-card p { color: color-mix(in srgb, var(--platform-ink) 72%, transparent); } body.themed .platform .plat-card { border-color: color-mix(in srgb, var(--platform-ink) 18%, transparent); background: color-mix(in srgb, var(--platform-ink) 5%, transparent); } /* Filet décoratif sous les titres */ body.themed .rule { background: var(--gold); } /* ====================================================================== MODE SOMBRE / CLAIR (chantier 41) — variantes inversées des peaux. Ne s'activent QUE sur choix explicite de l'utilisateur (bouton soleil/lune → html[data-theme-user], posé par theme.js). Sans choix, chaque peau garde sa DA native. Accents, polices et arrondis conservés. ====================================================================== */ /* ---- luxe inversé → variante claire crème/or -------------------------- */ :root[data-theme="light"][data-theme-user] body.theme-luxe { --gold: #8f6b14; --gold-soft: #7a5c10; --on-accent: #fff; --ink: #f6f1e7; --ink-2: #fffdf8; --ink-3: #efe8da; --paper: #26221b; --muted: #6d6355; --line: rgba(94, 74, 30, .22); --hero-ink: #26221b; --hero-grad: radial-gradient(1200px 600px at 78% -10%, rgba(143, 107, 20, .14), transparent 60%), linear-gradient(180deg, #faf6ee 0%, #f2ecdf 60%, #f6f1e7 100%); --hero-tint: rgba(143, 107, 20, .14); --header-bg: rgba(252, 249, 242, .92); --platform-grad: linear-gradient(180deg, #f6f1e7, #efe8da); --platform-tint: rgba(0,0,0,0); --platform-ink: #26221b; } /* ---- classic inversé → variante sombre cognac ------------------------- */ :root[data-theme="dark"][data-theme-user] body.theme-classic { --gold: #c68d63; --gold-soft: #a9744f; --on-accent: #1a130e; --ink: #191410; --ink-2: #201a14; --ink-3: #281f17; --paper: #f0e7dc; --muted: #a5937f; --line: rgba(198, 141, 99, .26); --hero-ink: #f0e7dc; --hero-grad: radial-gradient(1000px 520px at 80% -10%, rgba(198, 141, 99, .16), transparent 60%), linear-gradient(180deg, #16110d 0%, #1d1712 100%); --hero-tint: rgba(198, 141, 99, .16); --header-bg: rgba(25, 20, 16, .9); --platform-grad: linear-gradient(180deg, #201a14, #191410); --platform-tint: rgba(0,0,0,0); --platform-ink: #f0e7dc; } /* ---- editorial inversé → variante sombre encre ------------------------ */ :root[data-theme="dark"][data-theme-user] body.theme-editorial { --gold: #d4b25a; --gold-soft: #b09070; --on-accent: #161616; --ink: #171717; --ink-2: #1e1e1e; --ink-3: #262626; --paper: #f2efe8; --muted: #9a9a9a; --line: rgba(255, 255, 255, .12); --hero-ink: #f2efe8; --hero-grad: linear-gradient(180deg, #151515 0%, #1c1c1c 100%); --hero-tint: rgba(0,0,0,0); --header-bg: rgba(23, 23, 23, .9); --platform-grad: linear-gradient(180deg, #1e1e1e, #262626); --platform-tint: rgba(0,0,0,0); --platform-ink: #f2efe8; } /* ---- zen inversé → variante sombre sauge ------------------------------ */ :root[data-theme="dark"][data-theme-user] body.theme-zen { --gold: #8fb5ae; --gold-soft: #6b8f89; --on-accent: #16201d; --ink: #1b2321; --ink-2: #212b28; --ink-3: #28332f; --paper: #e9f0ee; --muted: #8fa39e; --line: rgba(143, 181, 174, .24); --hero-ink: #e9f0ee; --hero-grad: radial-gradient(900px 500px at 78% -10%, rgba(143, 181, 174, .14), transparent 60%), linear-gradient(180deg, #181f1d 0%, #1f2926 100%); --hero-tint: rgba(143, 181, 174, .14); --header-bg: rgba(27, 35, 33, .9); --platform-grad: linear-gradient(180deg, #212b28, #28332f); --platform-tint: rgba(0,0,0,0); --platform-ink: #e9f0ee; } /* ---- bold inversé → variante sombre contrastée ------------------------ */ :root[data-theme="dark"][data-theme-user] body.theme-bold { --gold: #ef5966; --gold-soft: #e63946; --on-accent: #fff; --ink: #171717; --ink-2: #1f1f1f; --ink-3: #272727; --paper: #fff1e2; --muted: #a08f80; --line: rgba(239, 89, 102, .28); --hero-ink: #fff1e2; --hero-grad: linear-gradient(120deg, #1b1b1b 0%, #241d18 100%); --hero-tint: rgba(0,0,0,0); --header-bg: rgba(23, 23, 23, .92); --platform-grad: linear-gradient(180deg, #1d3557, #152844); --platform-tint: rgba(0,0,0,0); --platform-ink: #ffffff; } /* ---- custom inversé → variante sombre neutre --------------------------- */ :root[data-theme="dark"][data-theme-user] body.theme-custom { --gold: #8ea6ff; --gold-soft: #a58bf6; --on-accent: #14151a; --ink: #16171a; --ink-2: #1d1f24; --ink-3: #24262c; --paper: #f2f2f5; --muted: #8f939c; --line: rgba(255, 255, 255, .12); --hero-ink: #f2f2f5; --hero-grad: radial-gradient(1000px 520px at 80% -10%, rgba(142, 166, 255, .12), transparent 60%), linear-gradient(180deg, #141519 0%, #1b1d22 100%); --hero-tint: rgba(142, 166, 255, .12); --header-bg: rgba(22, 23, 26, .9); --platform-grad: linear-gradient(180deg, #1d1f24, #24262c); --platform-tint: rgba(0,0,0,0); --platform-ink: #f2f2f5; } /* ========================================================================== CHANTIER 72 — verre dépoli de l'en-tête shrunk pour les PEAUX. `body.themed .site-header { background: var(--header-bg) }` (plus haut) gagnerait sinon sur la règle .is-shrunk de la page : ici, même sujet, spécificité supérieure — le fond suit le thème du tenant (--bg posé par le branding, sinon --ink de la peau, variantes claires ET sombres comprises). ========================================================================== */ body.themed .site-header.is-shrunk { background: color-mix(in srgb, var(--bg, var(--ink, #141210)) 78%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); border-bottom: 1px solid color-mix(in srgb, var(--paper, #f4efe6) 16%, transparent); }