/* ========================================================================== Alsace Clean Pro — thème "cozy" (site particuliers) Chargé APRÈS styles.css sur . Direction : gris graphite sombre, dominant partout. Le brun bois et l'or de la marque sont des accents secondaires : tuiles d'icônes, filets, liserés. Jamais de surface brune pleine, jamais de fausse texture de bois. ========================================================================== */ :root[data-theme="cozy"] { /* Base — graphite */ --bg: #17191b; --bg-alt: #1d2023; --surface: #202326; --surface-2: #262a2e; --border: #32373b; --border-strong: #454b50; --heading: #f6f8f9; --text: #e7eaec; --text-soft: #c3c9cd; --text-muted: #a4acb2; --text-faint: #7d868c; --text-dim: #666f75; /* Or de la marque = accent principal sur fond sombre */ --accent: #e2ae3e; --accent-2: #f0cb70; --accent-3: #c08b3c; --accent-soft: rgba(226, 174, 62, 0.11); --ring: rgba(226, 174, 62, 0.22); --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.42); --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.55); --header-bg: rgba(23, 25, 27, 0.9); --header-border: #2c3134; --btn-primary-bg: linear-gradient(135deg, #e2ae3e, #cd8f2a); --btn-primary-bg-hover: linear-gradient(135deg, #f0cb70, #e0a82e); --btn-primary-fg: #1a1408; --btn-outline: #cbb59a; --btn-outline-fg: #ddcbb2; --btn-outline-fg-hover: #1a1a1a; /* Bois — accent secondaire uniquement */ --wood-700: #4a3020; --wood-500: #6d472b; --wood-300: #a4703f; --wood-100: #c99a67; --wood-strip: linear-gradient(90deg, #4a3020 0%, #8a5f37 48%, #4a3020 100%); /* Héros — graphite profond, chaleur en périphérie */ --hero-bg: linear-gradient(158deg, #0d0f11 0%, #191c1f 58%, #212528 100%); --hero-glow-a: rgba(226, 174, 62, 0.10); --hero-glow-b: rgba(120, 78, 44, 0.09); --hero-text: #f7f9fa; --hero-lede: #c8cfd4; --hero-mark: url("../logo/logo-drop.png"); --hero-mark-filter: grayscale(1) brightness(1.6); --hero-mark-opacity: 0.05; --hero-photo: url("../img/ccb8cbfde4.webp"); --hero-photo-opacity: 0.20; /* Bandeau de titre : on garde le gris graphite du thème, la palette sombre apportant déjà le contraste que le bleu apporte côté professionnels. */ --page-hero-bg: var(--bg-alt); --page-hero-heading: var(--heading); --page-hero-lede: var(--text-soft); --page-hero-eyebrow: var(--accent-2); --page-hero-crumb: var(--text-faint); --page-hero-crumb-hover: var(--accent-2); --page-hero-border: var(--border); /* Bandes inversées + pied de page : graphite plus profond, liseré bois */ --deep-bg: #101214; --deep-texture: none; --deep-text: #d5dbe0; --deep-muted: #a9b2b8; --deep-faint: #79828a; --deep-heading: #f8fafb; --deep-rule: rgba(255, 255, 255, 0.10); --deep-accent: #f0cb70; --scroll-thumb: rgba(255, 255, 255, 0.20); --scroll-thumb-hover: rgba(255, 255, 255, 0.38); --rule: linear-gradient(90deg, var(--wood-300), var(--accent-2)); --icon-bg: linear-gradient(140deg, #3f2c1e, #6b492c); --icon-fg: #e8cfae; --ok-bg: rgba(80, 150, 132, 0.15); --ok-border: rgba(110, 200, 180, 0.34); --ok-fg: #86d2be; --fill-slot-fg: #f0cb70; } /* --- Le filet brun : signature discrète de la version particuliers --- */ :root[data-theme="cozy"] .divider-gold { height: 2px; border-radius: 2px; } /* Liseré brun en haut des bandes sombres et du pied de page */ :root[data-theme="cozy"] .band-navy, :root[data-theme="cozy"] .site-footer { background-image: var(--wood-strip); background-repeat: no-repeat; background-size: 100% 3px; background-position: top center; border-top: none; } :root[data-theme="cozy"] .band-navy + .band-navy { background-image: none; border-top: 1px solid var(--deep-rule); } /* --- Ajustements de surface --- */ :root[data-theme="cozy"] body { /* Pas de background-attachment: fixed — il force un repaint plein écran à chaque défilement, très coûteux à côté d'une vidéo qui décode. */ background-image: radial-gradient(circle at 88% -8%, rgba(226, 174, 62, 0.028), transparent 40%); background-repeat: no-repeat; } :root[data-theme="cozy"] .logo-name { color: #eef1f3; } :root[data-theme="cozy"] .logo-name .logo-pro { color: var(--accent-2); } :root[data-theme="cozy"] .card { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 38%); } :root[data-theme="cozy"] .card.lift:hover { border-color: var(--border-strong); } :root[data-theme="cozy"] .feature-item .tick { border-color: var(--border-strong); } :root[data-theme="cozy"] .feature-item .tick svg { stroke: var(--accent); } :root[data-theme="cozy"] .client-types li { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent); } :root[data-theme="cozy"] .btn-ghost { border-color: rgba(255, 255, 255, 0.32); color: #f7f9fa; } :root[data-theme="cozy"] .btn-ghost:hover { background: rgba(255, 255, 255, 0.10); border-color: #ffffff; } :root[data-theme="cozy"] ::selection { background: var(--accent-2); color: #1a1408; } :root[data-theme="cozy"] .demo-banner { color: #1a1408; } :root[data-theme="cozy"] .site-footer .logo-link img { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6)); } :root[data-theme="cozy"] .img-placeholder { background: linear-gradient(135deg, var(--surface), var(--surface-2)); border-color: var(--border-strong); color: var(--text-faint); } :root[data-theme="cozy"] .img-placeholder svg { stroke: var(--text-faint); } /* Le fond de carte OSM est clair : on l'inverse pour l'accorder au graphite (inversion + rotation de teinte = le classique "dark map", les verts et les bleus restent à leur place au lieu de virer au rose). */ :root[data-theme="cozy"] .map-figure img { filter: invert(0.92) hue-rotate(180deg) saturate(0.72) brightness(0.95) contrast(0.9); } :root[data-theme="cozy"] .map-figure figcaption { background: rgba(16, 18, 20, 0.82); color: var(--text-faint); } :root[data-theme="cozy"] .map-pin { stroke: #16181a; } /* --- Espace client sur fond graphite --- Mêmes teintes décalées que le thème clair — sarcelle plutôt que vert, rose plutôt que rouge — et pour la même raison : sur fond sombre, un vert pâle et un rouge pâle étaient encore plus proches l'un de l'autre en déficience rouge/vert que sur fond blanc. */ :root[data-theme="cozy"] { --statut-ok-bg: rgba(110, 200, 180, 0.14); --statut-ok-fg: #86d2be; --statut-ok-bd: rgba(110, 200, 180, 0.34); --statut-attente-bg: rgba(226, 174, 62, 0.14); --statut-attente-fg: #f0cb70; --statut-attente-bd: rgba(226, 174, 62, 0.4); --statut-ko-bg: rgba(230, 120, 160, 0.14); --statut-ko-fg: #efa2bd; --statut-ko-bd: rgba(230, 120, 160, 0.34); --erreur-fg: #efa2bd; }