/* ========================================================================== Ambree Studio — design tokens Colors and type come directly from the client's existing charte graphique. ========================================================================== */ :root { --bg: #f5ead8; --bg-alt: #ece2d0; --surface: #ffffff; --text: #201e1d; --text-soft: #5a5450; --accent-100: #f7e2c9; --accent-300: #e8a874; --accent: #c67139; --accent-700: #8a4a1f; --accent-900: #4a2411; --sage: #7a8a5e; --sage-light: #c9d8b8; --sage-900: #37432a; /* Texte posé sur un aplat terracotta (--accent). Le charbon donne 4.6:1 sur #c67139 : c'est la seule famille de teintes qui passe le seuil AA (4.5:1) sans toucher à la couleur de marque — du crème sur terracotta plafonne à 3.4:1. Volontairement opaque : la moindre transparence repasse sous le seuil. */ --on-accent: #201e1d; /* Survol des surfaces terracotta : on éclaircit (au lieu d'assombrir) pour que --on-accent reste lisible dans les deux thèmes. */ --accent-hover: #d4894f; /* Couleur fonctionnelle d'erreur de formulaire. Absente de la charte, mais indispensable : le terracotta est la couleur d'action, il ne peut pas signaler une erreur. Brique sourde choisie pour rester dans la famille chaude — 5,6:1 sur le crème. */ --error: #a83232; /* Filets et séparateurs. Étaient codés en dur en rgba(74,36,17,…), donc invisibles en thème sombre. */ --line: rgba(74, 36, 17, 0.14); --line-soft: rgba(74, 36, 17, 0.08); /* Fond du header une fois flouté au scroll. */ --header-bg: rgba(245, 234, 216, 0.85); --radius-lg: 24px; --radius-md: 16px; --radius-pill: 999px; --font-display: "Caprasimo", serif; --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --shadow-soft: 0 12px 32px -16px rgba(74, 36, 17, 0.28); --ease: cubic-bezier(0.16, 1, 0.3, 1); } :root[data-theme="dark"] { --bg: #201e1d; --bg-alt: #2a2725; --surface: #2a2725; --text: #f5ead8; --text-soft: #cfc5b8; --accent-100: #4a2411; --accent-300: #a85a2c; --accent: #e08a52; --accent-700: #f0b384; --accent-900: #f7e2c9; --sage: #a9bb8c; --sage-light: #566645; --sage-900: #eef2e2; /* Le terracotta clair du thème sombre (#e08a52) est encore plus lumineux : le charbon y donne 6.3:1, donc --on-accent ne change pas de valeur. */ --on-accent: #201e1d; --accent-hover: #f0b384; /* Version éclaircie pour rester lisible sur le charbon — 7,5:1. */ --error: #f0968c; --line: rgba(245, 234, 216, 0.16); --line-soft: rgba(245, 234, 216, 0.10); --header-bg: rgba(32, 30, 29, 0.85); --shadow-soft: 0 12px 32px -16px rgba(0, 0, 0, 0.5); } /* ---- Reset ---- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } /* ---- Trame de fond ---- Canvas fixe couvrant la fenêtre, placé derrière tout le contenu. z-index négatif : l'élément se peint au-dessus du fond de page (qui est celui de la racine) mais sous le contenu, sans avoir à positionner

ni