/* ══════════════════════════════════════════════════════════════ TOKENS — polices, couleurs, thème clair / sombre, échelle de texte ────────────────────────────────────────────────────────────── RÈGLE : aucune couleur en dur ailleurs que dans ce fichier. Toute couleur nouvelle passe par une variable définie ici, sinon elle « fuit » dans l'autre thème et devient impossible à traquer. ══════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Amsterdam'; src: url('../Amsterdam 400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* ─── Thème SOMBRE (défaut : le site s'ouvre en sombre) ───────── Choix artistique assumé — les photographies se lisent mieux sur fond sombre. Le thème clair reste accessible via le bouton ☀. */ :root { --bg: #080808; --bg1: #0c0c0c; --bg2: #101010; --bg3: #181818; --bg4: #202020; --border: #222222; --border2: #2e2e2e; --text: #EDE8DF; --text-mid: #9A9287; --text-dim: #5A5450; /* Marque. --accent sert DEUX rôles : fond de bouton (texte --on-accent dessus) ET couleur de texte (titres, liens). Sa valeur est choisie par thème pour rester lisible dans les deux emplois — ne jamais reprendre la valeur sombre telle quelle dans le thème clair. */ --accent: #C4904A; --accent2: #D9AB70; --on-accent: #080808; --accent-bg: rgba(196,144,74,.07); --accent-soft: rgba(196,144,74,.28); --error: #C04444; --on-error: #FFFFFF; --error-bg: rgba(192,68,68,.12); --success: #4A9970; /* Surfaces composées */ --header-bg: rgba(8,8,8,.93); --mobmenu-bg: rgba(8,8,8,.97); --overlay-bg: rgba(0,0,0,.88); --lightbox-bg: rgba(0,0,0,.96); --lb-btn-bg: rgba(0,0,0,.5); --hover-bg: rgba(255,255,255,.025); --stripe-bg: rgba(255,255,255,.02); --hairline: rgba(255,255,255,.05); --unavail-bg: rgba(80,30,30,.18); --scrim: rgba(0,0,0,.72); --scrim-soft: rgba(0,0,0,.48); --on-scrim: rgba(255,255,255,.65); --on-scrim-dim:rgba(255,255,255,.55); --gift-grad: linear-gradient(135deg,#150f05 0%,#2b1d0b 45%,#1a1209 100%); --shadow: 0 12px 40px rgba(0,0,0,.7); --shadow-md: 0 8px 32px rgba(0,0,0,.5); --shadow-sm: 0 4px 16px rgba(0,0,0,.4); --r: 2px; --r2: 5px; --t: .28s ease; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Jost', system-ui, sans-serif; --display: 'Amsterdam', 'Cormorant Garamond', Georgia, serif; /* Échelle de texte (boutons A− / A+). Le bandeau reste en px. */ --text-scale: 1; /* Hauteurs du bandeau de titre (effet « qui respire ») */ --header-h: 62px; --header-h-tall: 116px; color-scheme: dark; } /* ─── Thème CLAIR ──────────────────────────────────────────────── Activé uniquement par [data-theme="light"] sur . Jamais via prefers-color-scheme : le site doit s'ouvrir en sombre quel que soit le réglage système du visiteur. */ :root[data-theme="light"] { --bg: #FBF9F5; --bg1: #F6F3ED; --bg2: #FFFFFF; --bg3: #F2EEE6; --bg4: #E8E2D6; --border: #E0D9CC; --border2: #CFC5B4; --text: #23201C; --text-mid: #5E574D; --text-dim: #8C8477; --accent: #A8752F; --accent2: #8A5E22; --on-accent: #FFFFFF; --accent-bg: rgba(168,117,47,.09); --accent-soft: rgba(168,117,47,.32); --error: #B03030; --on-error: #FFFFFF; --error-bg: rgba(176,48,48,.10); --success: #2F7A52; --header-bg: rgba(251,249,245,.94); --mobmenu-bg: rgba(251,249,245,.98); --overlay-bg: rgba(35,32,28,.55); --lightbox-bg: rgba(20,18,16,.94); --lb-btn-bg: rgba(0,0,0,.45); --hover-bg: rgba(0,0,0,.035); --stripe-bg: rgba(0,0,0,.022); --hairline: rgba(0,0,0,.06); --unavail-bg: rgba(176,48,48,.08); --scrim: rgba(0,0,0,.62); --scrim-soft: rgba(0,0,0,.42); --on-scrim: rgba(255,255,255,.88); --on-scrim-dim:rgba(255,255,255,.78); --gift-grad: linear-gradient(135deg,#FFFDF8 0%,#F6ECD9 45%,#FBF6EC 100%); --shadow: 0 12px 40px rgba(60,50,35,.16); --shadow-md: 0 8px 32px rgba(60,50,35,.13); --shadow-sm: 0 4px 16px rgba(60,50,35,.10); color-scheme: light; } /* Le sélecteur natif des champs date suit le thème, sinon il reste blanc sur fond sombre. */ :root[data-theme="light"] input[type="date"] { color-scheme: light; } /* Texte POSÉ SUR UNE PHOTOGRAPHIE. Volontairement identique dans les deux thèmes : le voile dégradé est sombre dans les deux cas, le texte doit donc rester clair. C'est le seul endroit où une couleur ne bascule pas — d'où ces variables dédiées, plutôt qu'une couleur en dur perdue dans une règle. */ :root, :root[data-theme="light"] { --on-photo: #FFFFFF; --on-photo-dim: rgba(255,255,255,.72); --on-photo-shadow: 0 1px 3px rgba(0,0,0,.55); /* Le logo n'a pas de fond transparent : son carré est quasi noir. Même valeur dans les deux thèmes, sinon la pastille jure. */ --logo-bg: #080808; --photo-scrim: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 38%, transparent 62%); } /* Lueurs de marque (dégradés décoratifs) */ :root { --hero-glow: rgba(196,144,74,.05); --gift-glow: 0 6px 28px rgba(196,144,74,.18); } :root[data-theme="light"] { --hero-glow: rgba(168,117,47,.08); --gift-glow: 0 6px 28px rgba(168,117,47,.14); } /* Bouton « génération IA » — dégradé de marque, identique dans les deux thèmes */ :root { --ai-grad: linear-gradient(135deg,#6b4fbb,#c47b3e); }