/* ═══════════════════════════════════════════════════════════════ MODE VÉLIN — palette nocturne de la Maison Maison Caravelli — V15bis Activation : Persistance : localStorage.cv_mode = 'velin' | 'jour' Bascule par toggle dans le footer. Principe : ce n'est pas une "dark mode" technique. C'est le parchemin retourné. La même Maison, lue à la lampe. Palette inversée : · fond #111411 (encre brune profonde, presque sépia) · crème #14201A (cartes et seconds plans) · ivoire #E6DCC4 (texte principal — ivoire chaud-clair) · brume #A89A80 (texte secondaire) · or rgba(169,134,84,*) (un cran plus saturé pour tenir sur fond sombre, sans devenir tape-à-l'œil) Couche additive. Aucun fichier V6, V7-V14 n'est touché. ═══════════════════════════════════════════════════════════════ */ /* ─── Variables Vélin (n'écrasent pas le mode Jour) ─── */ html[data-mode="velin"] { --vlm-bg: #111411; --vlm-bg-card: #14201A; --vlm-bg-soft: #1F1A15; --vlm-ink: #E6DCC4; --vlm-ink-soft: #A89A80; --vlm-ink-mute: #6E6A60; --vlm-gold: #B89868; --vlm-gold-l: rgba(169,134,84, 0.20); --vlm-gold-m: rgba(169,134,84, 0.45); --vlm-gold-s: rgba(169,134,84, 0.85); --vlm-line: rgba(169,134,84, 0.18); --vlm-line-soft: rgba(169,134,84, 0.10); } /* ═══════════════════════════════════════════════════════════════ TRANSITION GLOBALE — silencieuse, pas brutale ═══════════════════════════════════════════════════════════════ */ html[data-mode] body, html[data-mode] .header, html[data-mode] .ft, html[data-mode] section, html[data-mode] main, html[data-mode] article, html[data-mode] aside { transition: background-color 480ms cubic-bezier(.22,.61,.36,1), color 480ms cubic-bezier(.22,.61,.36,1), border-color 480ms cubic-bezier(.22,.61,.36,1); } /* ═══════════════════════════════════════════════════════════════ FOND ET TEXTE GLOBAL ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] body, html[data-mode="velin"] { background: var(--vlm-bg) !important; color: var(--vlm-ink); } /* Toutes les zones de fond ivoire deviennent encre profonde */ html[data-mode="velin"] section, html[data-mode="velin"] main, html[data-mode="velin"] .container, html[data-mode="velin"] header, html[data-mode="velin"] footer { background-color: transparent; } /* Sections aux fonds clairs spécifiques (style.css V6) */ html[data-mode="velin"] [style*="background:#F2EBDD"], html[data-mode="velin"] [style*="background:#F7F1E6"], html[data-mode="velin"] [style*="background: #F2EBDD"], html[data-mode="velin"] [style*="background: #F7F1E6"] { background-color: var(--vlm-bg) !important; } /* ═══════════════════════════════════════════════════════════════ TYPOGRAPHIE — texte clair sur fond sombre ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] h1, html[data-mode="velin"] h2, html[data-mode="velin"] h3, html[data-mode="velin"] h4, html[data-mode="velin"] h5, html[data-mode="velin"] h6, html[data-mode="velin"] p, html[data-mode="velin"] li, html[data-mode="velin"] span, html[data-mode="velin"] label, html[data-mode="velin"] dt, html[data-mode="velin"] dd { color: var(--vlm-ink); } html[data-mode="velin"] em, html[data-mode="velin"] i { color: var(--vlm-ink); } html[data-mode="velin"] small, html[data-mode="velin"] figcaption, html[data-mode="velin"] .caption, html[data-mode="velin"] .meta, html[data-mode="velin"] .subtitle { color: var(--vlm-ink-soft); } /* ═══════════════════════════════════════════════════════════════ LIENS ET NAVIGATION ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] a { color: var(--vlm-ink); } html[data-mode="velin"] a:hover { color: var(--vlm-gold); } /* Navigation principale */ html[data-mode="velin"] nav a, html[data-mode="velin"] .nav a, html[data-mode="velin"] .menu a { color: var(--vlm-ink); } html[data-mode="velin"] nav a:hover, html[data-mode="velin"] .nav a:hover { color: var(--vlm-gold); } /* Liens « actifs » conservent leur souligné or */ html[data-mode="velin"] .active, html[data-mode="velin"] [aria-current="page"] { color: var(--vlm-ink); } /* ═══════════════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] header, html[data-mode="velin"] .header, html[data-mode="velin"] [class*="hd-"] { background-color: var(--vlm-bg) !important; border-color: var(--vlm-line); } html[data-mode="velin"] .header::before, html[data-mode="velin"] .header::after { background-color: var(--vlm-line); } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] footer, html[data-mode="velin"] .ft, html[data-mode="velin"] [class*="ft-"] { background-color: var(--vlm-bg-soft) !important; color: var(--vlm-ink-soft); border-color: var(--vlm-line); } html[data-mode="velin"] .ft a, html[data-mode="velin"] footer a { color: var(--vlm-ink-soft); } html[data-mode="velin"] .ft a:hover, html[data-mode="velin"] footer a:hover { color: var(--vlm-gold); } /* ═══════════════════════════════════════════════════════════════ CARTES, BLOCS, PROJETS ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] article, html[data-mode="velin"] .card, html[data-mode="velin"] .project, html[data-mode="velin"] [class*="proj-"], html[data-mode="velin"] [class*="card-"] { background-color: var(--vlm-bg-card) !important; border-color: var(--vlm-line); } /* ═══════════════════════════════════════════════════════════════ BORDURES, SÉPARATEURS, FILETS ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] hr, html[data-mode="velin"] .divider, html[data-mode="velin"] [class*="separator"] { border-color: var(--vlm-line); background-color: var(--vlm-line); } html[data-mode="velin"] section { border-color: var(--vlm-line); } /* ═══════════════════════════════════════════════════════════════ IMAGES — garder leur grain mais légère désaturation pour confort ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] img { /* Très léger voile pour que le grain argentique tienne sur fond sombre sans paraître agressif */ filter: brightness(0.92) contrast(1.04); } /* Sceau de la Maison — variante sombre */ html[data-mode="velin"] .seal, html[data-mode="velin"] .footer-seal, html[data-mode="velin"] img[src*="sceau-maison.png"] { filter: invert(0.92) brightness(1.05) contrast(0.95); opacity: 0.42; } html[data-mode="velin"] img[src*="sceau-maison-encre.png"] { filter: none; opacity: 0.75; } /* ═══════════════════════════════════════════════════════════════ BOUTONS / CTA ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] button, html[data-mode="velin"] .btn, html[data-mode="velin"] [class*="btn-"], html[data-mode="velin"] .cta { background-color: transparent; color: var(--vlm-ink); border-color: var(--vlm-gold-m); } html[data-mode="velin"] button:hover, html[data-mode="velin"] .btn:hover, html[data-mode="velin"] .cta:hover { background-color: var(--vlm-gold-l); border-color: var(--vlm-gold-s); color: var(--vlm-ink); } /* ═══════════════════════════════════════════════════════════════ FORMULAIRES ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] input, html[data-mode="velin"] textarea, html[data-mode="velin"] select { background-color: var(--vlm-bg-card); color: var(--vlm-ink); border-color: var(--vlm-line); } html[data-mode="velin"] input:focus, html[data-mode="velin"] textarea:focus, html[data-mode="velin"] select:focus { border-color: var(--vlm-gold-m); outline-color: var(--vlm-gold-m); } html[data-mode="velin"] input::placeholder, html[data-mode="velin"] textarea::placeholder { color: var(--vlm-ink-mute); } html[data-mode="velin"] label { color: var(--vlm-ink-soft); } /* ═══════════════════════════════════════════════════════════════ ARCHIVES (page about) — fond plus chaud, photos plus belles ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] .archives { background: var(--vlm-bg-soft) !important; } html[data-mode="velin"] .archives::before { background: var(--vlm-gold-m); } html[data-mode="velin"] .archives-eyebrow { color: var(--vlm-gold-s); } html[data-mode="velin"] .archives-h2, html[data-mode="velin"] .archives-h2 em { color: var(--vlm-ink); } html[data-mode="velin"] .archives-h2 em { color: var(--vlm-ink-soft); } html[data-mode="velin"] .archives-item img { /* Les archives N&B gagnent à être un cran plus contrastées en Vélin */ filter: brightness(0.95) contrast(1.08); box-shadow: 0 1px 0 rgba(169,134,84, .08) inset, 0 0 0 1px rgba(169,134,84, .15); } html[data-mode="velin"] .archives-item figcaption { color: var(--vlm-ink-mute); } /* ═══════════════════════════════════════════════════════════════ CONCIERGE — palette inversée mais cohérente ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] .concierge-icon { background: var(--vlm-bg-card); border-color: var(--vlm-gold-m); } html[data-mode="velin"] .concierge-icon-c { color: var(--vlm-ink); } html[data-mode="velin"] .concierge-icon:hover { background: var(--vlm-bg-soft); border-color: var(--vlm-gold-s); } html[data-mode="velin"] .concierge-panel { background: var(--vlm-bg-card); border-left-color: var(--vlm-line); color: var(--vlm-ink); } html[data-mode="velin"] .concierge-head { border-bottom-color: var(--vlm-line); } html[data-mode="velin"] .concierge-title { color: var(--vlm-ink); } html[data-mode="velin"] .concierge-key { color: var(--vlm-gold); opacity: 0.85; } html[data-mode="velin"] .concierge-subtitle { color: var(--vlm-gold-s); } html[data-mode="velin"] .concierge-close { color: var(--vlm-ink-soft); } html[data-mode="velin"] .concierge-msg { color: var(--vlm-ink); } html[data-mode="velin"] .concierge-msg--user { color: var(--vlm-ink-soft); border-right-color: var(--vlm-line); } html[data-mode="velin"] .concierge-msg--agent { color: var(--vlm-ink); } html[data-mode="velin"] .concierge-msg--typing { color: var(--vlm-gold); } html[data-mode="velin"] .concierge-msg--limit { color: var(--vlm-ink-soft); border-top-color: var(--vlm-line); } html[data-mode="velin"] .concierge-cta { color: var(--vlm-gold); border-bottom-color: var(--vlm-gold-m); } html[data-mode="velin"] .concierge-cta:hover { color: var(--vlm-ink); border-bottom-color: var(--vlm-ink); } html[data-mode="velin"] .concierge-form { background: var(--vlm-bg-soft); border-top-color: var(--vlm-line); } html[data-mode="velin"] .concierge-input { color: var(--vlm-ink); border-bottom-color: var(--vlm-line); } html[data-mode="velin"] .concierge-input::placeholder { color: var(--vlm-ink-mute); } html[data-mode="velin"] .concierge-input:focus { border-bottom-color: var(--vlm-gold-m); } html[data-mode="velin"] .concierge-send { border-color: var(--vlm-gold-m); color: var(--vlm-gold); } html[data-mode="velin"] .concierge-send:hover { border-color: var(--vlm-gold-s); color: var(--vlm-ink); background: var(--vlm-bg-card); } html[data-mode="velin"] .concierge-list::-webkit-scrollbar-thumb { background: var(--vlm-line); } /* ═══════════════════════════════════════════════════════════════ COOKIE BANNER, ENTRY RITUAL, AMBIANCE — adaptations légères ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] [class*="cookie"], html[data-mode="velin"] [id*="cookie"] { background-color: var(--vlm-bg-card) !important; color: var(--vlm-ink); border-color: var(--vlm-line); } /* ═══════════════════════════════════════════════════════════════ TOGGLE VÉLIN — l'élément lui-même S'inscrit dans le footer, près du sélecteur de langue. Discret. Une typo, deux mots, un séparateur. ═══════════════════════════════════════════════════════════════ */ .velin-toggle { display: inline-flex; align-items: center; gap: 8px; font-family: 'Tenor Sans', 'Cormorant Garamond', serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; user-select: none; } .velin-toggle__sep { color: rgba(138,106,67, 0.45); font-size: 10px; } .velin-toggle__btn { background: transparent; border: none; padding: 4px 2px; cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: rgba(16,28,21, 0.45); transition: color 280ms ease; } .velin-toggle__btn:hover { color: rgba(16,28,21, 0.85); } .velin-toggle__btn.is-active { color: rgba(16,28,21, 0.85); border-bottom: 1px solid rgba(138,106,67, 0.55); padding-bottom: 2px; } /* En mode Vélin : couleurs inversées du toggle lui-même */ html[data-mode="velin"] .velin-toggle__btn { color: rgba(238,229,210, 0.45); } html[data-mode="velin"] .velin-toggle__btn:hover { color: rgba(238,229,210, 0.95); } html[data-mode="velin"] .velin-toggle__btn.is-active { color: rgba(238,229,210, 0.95); border-bottom-color: var(--vlm-gold-m); } html[data-mode="velin"] .velin-toggle__sep { color: rgba(169,134,84, 0.45); } /* ═══════════════════════════════════════════════════════════════ HERO PHOTO (.ph + .ph-bg) — assombrir en Vélin pour préserver la lisibilité sans toucher l'image elle-même ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] .ph, html[data-mode="velin"] section[class*="hero"], html[data-mode="velin"] section[class*="banner"] { background-color: var(--vlm-bg) !important; } html[data-mode="velin"] .ph-bg, html[data-mode="velin"] [class*="hero-bg"], html[data-mode="velin"] [class*="banner-bg"] { filter: brightness(0.32) contrast(1.05) saturate(0.85); } /* Voile supplémentaire pour garantir la lisibilité du texte */ html[data-mode="velin"] .ph::before, html[data-mode="velin"] section[class*="hero"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(12,22,17, 0.55) 0%, rgba(12,22,17, 0.75) 100% ); pointer-events: none; z-index: 1; } html[data-mode="velin"] .ph .container, html[data-mode="velin"] section[class*="hero"] .container { position: relative; z-index: 2; } /* Sections claires nommées explicitement en V6 */ html[data-mode="velin"] .sec--blanc, html[data-mode="velin"] .sec--clair, html[data-mode="velin"] .sec--ivoire, html[data-mode="velin"] [class*="--blanc"], html[data-mode="velin"] [class*="--ivoire"] { background-color: var(--vlm-bg) !important; } html[data-mode="velin"] .sec--creme, html[data-mode="velin"] .sec--sable, html[data-mode="velin"] [class*="--creme"], html[data-mode="velin"] [class*="--sable"] { background-color: var(--vlm-bg-soft) !important; } /* Séparateur typique du site (.sep) */ html[data-mode="velin"] .sep, html[data-mode="velin"] [class*="separator"] { background-color: transparent; border-color: var(--vlm-line); } /* ═══════════════════════════════════════════════════════════════ WIDGETS V13 (ambiance sonore, suggestion lecture) ═══════════════════════════════════════════════════════════════ */ html[data-mode="velin"] [class*="ambiance"], html[data-mode="velin"] [class*="sound"], html[data-mode="velin"] [class*="suggest"], html[data-mode="velin"] [class*="audio"], html[data-mode="velin"] .sg-bubble, html[data-mode="velin"] [class^="sg-"], html[data-mode="velin"] [class*=" sg-"] { background-color: var(--vlm-bg-card) !important; color: var(--vlm-ink) !important; border-color: var(--vlm-line) !important; } html[data-mode="velin"] .sg-bubble *, html[data-mode="velin"] [class*="ambiance"] *, html[data-mode="velin"] [class*="suggest"] * { color: inherit; } html[data-mode="velin"] .sg-cta { color: var(--vlm-gold) !important; border-color: var(--vlm-gold-m) !important; } html[data-mode="velin"] .sg-close { color: var(--vlm-ink-soft) !important; } /* Widget audio (en bas à gauche) */ html[data-mode="velin"] [class*="audio-toggle"], html[data-mode="velin"] [class*="sound-toggle"], html[data-mode="velin"] [id*="audio"], html[data-mode="velin"] [id*="sound"] { background-color: var(--vlm-bg-card) !important; color: var(--vlm-ink) !important; border-color: var(--vlm-line) !important; } /* ═══════════════════════════════════════════════════════════════ PRÉFÉRENCE MOTION — pas d'animations ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html[data-mode] body, html[data-mode] header, html[data-mode] footer, html[data-mode] section, html[data-mode] main { transition: none; } }