/* =====================================================================
LYVIRE — SURCOUCHE « CHALEUR » · réchauffement de l'app de gestion
Auteur : Picasso (direction artistique Lyvire, DAYDGROUP)
---------------------------------------------------------------------
À charger APRÈS style.css (kit) et APRÈS app.css (pont applicatif) :
---------------------------------------------------------------------
PRINCIPE : le « liquid glass » monochrome (noir/blanc/gris, verre,
dégradé de gris des menus, Vente facile en VERT) reste INTACT.
Cette couche ajoute UNIQUEMENT les accents chauds hérités du site
marchand lyvire.daydgroup.com : terracotta #A65E44, or #D4AF37,
crème dorée #F4EBD0, dégradé signature terracotta→or→crème.
Aucune dépendance externe. 100 % additive : la retirer = retour
exact à l'existant.
=====================================================================
SOMMAIRE
1. Tokens chauds (nouveaux, additifs)
2. Accent chaud par univers (Style / Cosmétique / Braid)
3. Marque & structure (logo, page-head, titres de section)
4. Icônes plus marquantes (tailles, puces teintées, duotone)
5. KPI & raccourcis réchauffés
6. Boutons & liens chauds
7. Badges, pastilles d'univers, listes, progression
8. Divers app (encarts, cartes mises en avant)
===================================================================== */
/* ======================= 1. TOKENS CHAUDS ========================== */
:root {
/* Héritage direct du site marchand (da.md lyvire_site_design) */
--ly-terra: #A65E44; /* terracotta — accent chaud principal */
--ly-terra-fonce: #8A4B35; /* terracotta foncé (texte, hover) */
--ly-terra-clair: #C98B72; /* terracotta clair (fins de dégradés) */
--ly-or: #D4AF37; /* or — accent premium */
--ly-or-fonce: #A9822F; /* or foncé (icônes/texte lisible) */
--ly-or-sombre: #7D6017; /* or très foncé (petit texte sur tint) */
--ly-creme: #F4EBD0; /* crème dorée */
/* Voiles très légers (fonds de puces, badges) */
--ly-terra-tint: rgba(166, 94, 68, .10);
--ly-or-tint: rgba(212, 175, 55, .14);
/* LA signature Lyvire (titres forts, filets, CTA majeurs) */
--ly-degrade-signature: linear-gradient(135deg, #A65E44 0%, #D4AF37 60%, #F4EBD0 100%);
--ly-degrade-chaud: linear-gradient(135deg, #A65E44 0%, #D4AF37 100%);
/* Ombre chaude (reprise du site : rgba(166,94,68,.35) adoucie) */
--sh-terra: 0 8px 22px rgba(166, 94, 68, .26);
}
/* ================ 2. ACCENT CHAUD PAR UNIVERS ====================== */
/* On ne touche NI au graphite (--ly-brand) NI aux gris : seul l'accent
beige/marron existant est réchauffé, univers par univers. Le fond
« mesh » gagne un soupçon de crème (bg-3) — imperceptible mais chaud. */
/* STYLE (vêtements) — terracotta, le pont direct avec le site marchand */
body[data-enseigne="style"] {
--ly-accent: #A65E44;
--ly-accent-soft: #C98B72;
--ly-brand-tint: rgba(166, 94, 68, .08);
--ly-bg-3: #F4EDE4;
}
/* COSMÉTIQUE (beauté) — camel doré, côté or de la palette */
body[data-enseigne="cosmetique"] {
--ly-accent: #9C6B33;
--ly-accent-soft: #D9BE93;
--ly-brand-tint: rgba(169, 130, 47, .09);
--ly-bg-1: #F7F3EC;
--ly-bg-3: #F6EFE1;
}
/* BRAID (salon de tressage) — moka profond, écho du fond prune du site */
body[data-enseigne="braid"] {
--ly-accent: #7E4A38;
--ly-accent-soft: #B98A74;
--ly-brand-tint: rgba(126, 74, 56, .08);
--ly-bg-3: #F3ECE7;
}
/* ==================== 3. MARQUE & STRUCTURE ======================== */
/* Le carré-logo de la topbar porte désormais le dégradé chaud :
c'est LE point de chaleur permanent, visible sur chaque écran. */
.topbar__logo {
background: var(--ly-degrade-chaud);
box-shadow: var(--sh-terra), var(--sh-inset);
}
/* Le mot fort de la marque (ex. Group) en terracotta discret. */
.topbar__brand b { color: var(--ly-terra); }
/* Bandeau de titre (page-head) : on GARDE la teinte de section grise
(système de nuances de l'app) et on ajoute le filet signature
terracotta→or→crème en pied de bandeau. */
.page-head { position: relative; overflow: hidden; }
.page-head::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 3px; background: var(--ly-degrade-signature);
opacity: .9; pointer-events: none;
}
/* Titres de section : petit filet chaud devant le libellé + encre
plus affirmée (au lieu du gris muted). */
.section-titre { color: var(--ly-ink-2); }
.section-titre::before {
content: ""; display: inline-block; width: 22px; height: 3px;
border-radius: 2px; background: var(--ly-degrade-chaud);
margin-right: 10px; vertical-align: middle;
}
/* Titre « signature » optionnel (accueil, bilans) : texte en dégradé
terracotta→or→crème, comme sur le site marchand. À réserver aux
GROS titres (≥ 22px) — jamais sur du petit texte (contraste). */
.titre-signature {
background: var(--ly-degrade-signature);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--ly-terra-fonce);
}
/* ============== 4. ICÔNES PLUS MARQUANTES ========================= */
/* Nouvelle taille géante pour les moments forts (héros, tuiles). */
.icon-2xl { width: 48px; height: 48px; }
/* « Puce d'icône » : la brique qui rend les icônes marquantes partout.
Verre teinté + icône colorée, 4 teintes. Cible visuelle nette. */
.puce-ico {
display: grid; place-items: center; flex: none;
width: 56px; height: 56px; border-radius: var(--r-md);
color: var(--ly-terra-fonce);
background: linear-gradient(160deg, rgba(255,255,255,.92), var(--ly-terra-tint));
border: 1px solid rgba(166, 94, 68, .20);
box-shadow: var(--sh-inset);
}
.puce-ico .icon { width: 30px; height: 30px; }
.puce-ico--or { color: var(--ly-or-fonce);
background: linear-gradient(160deg, rgba(255,255,255,.92), var(--ly-or-tint));
border-color: rgba(212,175,55,.30); }
.puce-ico--encre { color: var(--ly-brand-strong);
background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(23,23,26,.07));
border-color: var(--glass-border); }
.puce-ico--vert { color: #1D7A4F;
background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(29,122,79,.10));
border-color: rgba(29,122,79,.22); }
.puce-ico--pleine { color: #fff; background: var(--ly-degrade-chaud);
border-color: transparent; box-shadow: var(--sh-terra), var(--sh-inset); }
/* Les icônes duotone (_sprite_chaleur.html, ids lyd-*) marchent seules :
leur couche de fond porte fill=currentColor opacity .16 en dur. */
/* ================ 5. KPI & RACCOURCIS RÉCHAUFFÉS =================== */
/* KPI de l'app (.kpi-ico était une simple icône flottante) : devient
une vraie puce teintée terracotta — plus grande, plus lisible. */
.kpi-ico {
display: grid; place-items: center; flex: none;
width: 54px; height: 54px; border-radius: var(--r-sm);
font-size: 1.4rem; /* compat anciens emojis */
color: var(--ly-terra-fonce);
background: linear-gradient(160deg, rgba(255,255,255,.92), var(--ly-terra-tint));
border: 1px solid rgba(166, 94, 68, .18);
box-shadow: var(--sh-inset);
margin-bottom: 2px;
}
.kpi-ico .icon { width: 30px; height: 30px; }
/* Variantes par famille d'indicateurs (à poser selon la section) */
.kpi-ico--or { color: var(--ly-or-fonce);
background: linear-gradient(160deg, rgba(255,255,255,.92), var(--ly-or-tint));
border-color: rgba(212,175,55,.28); }
.kpi-ico--encre { color: var(--ly-brand-strong);
background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(23,23,26,.07));
border-color: var(--glass-border); }
.kpi-ico--vert { color: #1D7A4F;
background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(29,122,79,.10));
border-color: rgba(29,122,79,.22); }
.kpi-alerte .kpi-ico { color: var(--ly-danger);
background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(194,74,74,.10));
border-color: rgba(194,74,74,.25); }
/* Équivalents pour le balisage du KIT (tableau-de-bord.html) */
.kpi__ico--chaud { background: var(--ly-degrade-chaud);
box-shadow: var(--sh-terra), var(--sh-inset); }
.kpi__ico--or { background: linear-gradient(150deg, var(--ly-or-fonce), var(--ly-or));
box-shadow: 0 10px 24px rgba(212,175,55,.26), var(--sh-inset); }
/* Raccourcis : l'icône passe en teinte chaude, un peu plus grande. */
.shortcut__ico {
width: 64px; height: 64px;
color: var(--ly-terra-fonce);
background: linear-gradient(160deg, rgba(255,255,255,.92), var(--ly-terra-tint));
border-color: rgba(166, 94, 68, .20);
}
.shortcut__ico .icon { width: 34px; height: 34px; }
/* Vignettes de listes : même chaleur discrète. */
.list__thumb {
color: var(--ly-terra-fonce);
background: linear-gradient(160deg, rgba(255,255,255,.92), var(--ly-terra-tint));
border-color: rgba(166, 94, 68, .16);
}
/* =================== 6. BOUTONS & LIENS CHAUDS ===================== */
/* CTA « chaud » : dégradé terracotta→or + ombre chaude. À réserver aux
actions de MISE EN AVANT (offres, catalogue, communication cliente).
Les actions de gestion gardent le graphite ; Vente facile reste VERT. */
.btn--chaud, .btn-chaud {
color: #fff;
background: var(--ly-degrade-chaud);
box-shadow: var(--sh-terra), var(--sh-inset);
border: 1px solid transparent;
}
.btn--chaud:hover, .btn-chaud:hover { filter: brightness(1.08); }
/* Bouton fantôme « or » (secondaire premium — repris du site) */
.btn--or {
color: var(--ly-or-fonce); background: transparent;
border: 1.5px solid var(--ly-or);
}
.btn--or:hover { background: var(--ly-or-tint); }
/* Liens d'action de l'app : terracotta foncé (contraste AA). */
a.lien { color: var(--ly-terra-fonce); }
/* Prix mis en avant (cartes produits internes) : déjà sur --ly-accent,
donc terracotta automatiquement. On renforce la graisse. */
.cp-prix { font-weight: 800; }
/* ============ 7. BADGES, UNIVERS, LISTES, PROGRESSION ============= */
/* Badges d'univers : chaque univers a SA teinte chaude. */
.badge--univers-style { background: rgba(166,94,68,.14); color: #8A4B35; }
.badge--univers-cosmetique { background: rgba(212,175,55,.20); color: #7D6017; }
.badge--univers-braid { background: rgba(126,74,56,.14); color: #6B3F2E; }
/* Pastilles d'univers de la topbar : un point de couleur par univers,
sans changer le balisage (ciblage par le href de la pastille). */
.univers-pill { display: inline-flex; align-items: center; gap: 7px; }
.univers-pill::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--ly-muted); opacity: .55; flex: none;
transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.univers-pill[href*="u=style"]::before { background: #A65E44; }
.univers-pill[href*="u=cosmetique"]::before { background: #D4AF37; }
.univers-pill[href*="u=braid"]::before { background: #7E4A38; }
.univers-pill.is-active::before { opacity: 1; transform: scale(1.15); }
/* Barres de progression : dégradé chaud (au lieu du gris). */
.progress > span,
.stx-barre__rempli { background: var(--ly-degrade-chaud); }
/* Notes / étoiles : l'or de la marque. */
.note-faite, .etoile-or { color: var(--ly-or-fonce); }
/* ================ 8. DIVERS APP (ENCARTS, MISES EN AVANT) ========== */
/* Encart mis en avant (commandes web, offres…) : liseré chaud à gauche
au lieu du bleu, halo crème très doux. */
.carte--chaude {
border-left: 4px solid var(--ly-terra);
background: linear-gradient(160deg, rgba(255,255,255,.66), rgba(244,235,208,.34));
}
/* Encart « or » (célébration : objectif atteint, meilleure vendeuse…) */
.carte--or {
border-left: 4px solid var(--ly-or);
background: linear-gradient(160deg, rgba(255,255,255,.66), var(--ly-or-tint));
}
/* Avatar : suit --ly-accent → devient terracotta/camel automatiquement.
On lui offre l'ombre chaude. */
.avatar { box-shadow: var(--sh-terra), var(--sh-inset); }
/* Accueil vendeuse : le bouton géant « Faire une vente » reste VERT
(cohérence Vente facile) — on ne le réchauffe PAS ici. Les cartes-
liens sous le bouton prennent la puce terracotta. */
.cl-ico { background: var(--ly-terra-tint); color: var(--ly-terra-fonce); }
/* --- Replis / accessibilité : rien à ajouter, la surcouche n'introduit
aucune nouvelle surface en verre ; les media queries du kit couvrent
déjà reduced-motion / reduced-transparency / no backdrop-filter. --- */