/* ============================================================ T'NATURE · Jetons de design Toutes les valeurs de couleur viennent du logo et du bloc « AU CŒUR DE CHÂTEAU-CHALON » de l'ancien site (brief §3.2). Ne pas introduire de couleur en dur ailleurs que dans ce fichier. ============================================================ */ :root{ /* ── Neutres : le squelette du site (≈80 % de la surface) ── */ --c-encre: #383838; /* anthracite du lettrage et du brin d'herbes */ --c-encre-doux: #5A5A5A; /* textes secondaires */ --c-blanc: #FFFFFF; --c-ivoire: #FAF6F1; /* fond de section clair par défaut */ /* ── Chauds : texture aquarelle du carré du logo ── */ --c-creme: #F8E8D8; --c-sable: #F8E8C8; --c-peche: #F8D8B8; --c-abricot: #F8C8A8; --c-terre: #E8B898; /* ombres de l'aquarelle */ /* ── Roses : dégradé du lettrage ── */ --c-rose-poudre:#F8D8D8; --c-rose: #F898A8; --c-corail: #F87898; /* accent chaud du logo */ --c-framboise: #E86888; /* version foncée, survols */ /* ── Variantes assombries, obligatoires dès qu'une couleur porte du TEXTE ── Le corail et la framboise du logo plafonnent à 2,4:1 sur fond clair : illisibles au sens WCAG AA. Ces trois tons gardent la teinte (345°) et la douceur de la palette tout en passant 4,5:1 sur TOUS les fonds clairs du site (blanc, ivoire, crème, sable, pêche). Valeurs calculées, pas choisies à l'œil, voir README §« Contrastes ». */ --c-bois-rose: #A13D56; /* texte accentué : sur-titres, liens, libellés */ --c-bois-rose-sombre:#86324A; /* survol des liens */ --c-bois-rose-fond: #B1435F; /* fond de bouton : blanc dessus à 5,45:1 */ --c-terre-texte: #815731; /* texte brun sur crème (métas de placeholder) */ /* ── Mauve : rectangle plein du motif signature ── */ --c-mauve: #DBBACC; /* ── Ocre : état actif hérité de l'ancien menu. À doser. ── */ --c-ocre: #C9B200; /* ── Rôles sémantiques : c'est ce qu'on utilise dans style.css ── */ --fond-page: var(--c-ivoire); --texte: var(--c-encre); --texte-doux: var(--c-encre-doux); --texte-inverse: var(--c-ivoire); --accent: var(--c-bois-rose); /* texte : version accessible */ --accent-decor: var(--c-corail); /* décor non textuel seulement */ --accent-fonce: var(--c-bois-rose-sombre); /* Boutons : rose au repos, encre au survol. Sens inversé le 07/10/2026 à la demande du client. Les deux fonds portent du blanc au-dessus du seuil AA : #B1435F à 5,45:1 et #383838 à 10,6:1. */ --action-fond: var(--c-bois-rose-fond); --action-texte: var(--c-blanc); --action-fond-survol: var(--c-encre); --etoile: var(--c-ocre); --bordure-douce: rgba(232,184,152,.55); --texte-brun: var(--c-terre-texte); /* ── Dégradé aquarelle du logo, défini une seule fois ── Sert au lettrage du logo et au rectangle qui comble les cartes. */ --degrade-logo: linear-gradient(100deg, var(--c-rose) 0%, var(--c-corail) 18%, var(--c-abricot) 48%, var(--c-peche) 68%, var(--c-sable) 100%); /* ── Typographie ── */ --f-titre: "Caveat Brush", "Permanent Marker", "Amatic SC", cursive; --f-ui: "Jost", "Poppins", "Helvetica Neue", Arial, sans-serif; --f-corps: "Open Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fs-h1: clamp(2.5rem, 6vw, 5rem); --fs-h2: clamp(1.9rem, 4vw, 3.2rem); --fs-h3: clamp(1.2rem, 2vw, 1.5rem); --fs-h4: clamp(1.05rem, 1.4vw, 1.15rem); --fs-body: clamp(1rem, 1.1vw, 1.0625rem); --fs-petit: .875rem; --fs-micro: .78125rem; --lh-titre: 1.05; --lh-corps: 1.7; --ls-surtitre: .12em; /* ── Espacements ── */ --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --e-10: 8rem; --section-y: clamp(3.5rem, 8vw, 7rem); --gouttiere: clamp(1rem, 2.5vw, 2rem); --largeur-max: 1280px; --largeur-texte: 68ch; /* ── Rayons (brief §3.5) ── */ --r-pilule: 999px; /* CTA */ --r-carte: 16px; /* ---------- Panneau de reservation OBT ---------- Le panneau de l'application de gestion lit ces variables pour prendre la charte du site. On ne redonne pas ici les valeurs : on branche sur les jetons existants, pour que le panneau suive automatiquement toute evolution de la charte. Integre le 21/10/2026. */ --obt-accent: var(--action-fond); --obt-accent-text: var(--action-texte); --obt-bg: var(--c-blanc); --obt-text: var(--texte); --obt-line: var(--bordure-douce); --obt-free: var(--c-creme); --obt-radius: var(--r-carte); --obt-title-font: var(--f-titre); --r-champ: 12px; --r-modale: 20px; --r-vignette: 12px; /* ── Ombres : douces et chaudes, jamais noires ── */ --ombre-carte: 0 8px 30px rgba(56,56,56,.08); --ombre-survol: 0 16px 44px rgba(56,56,56,.14); --ombre-header: 0 2px 18px rgba(56,56,56,.09); /* ── Mouvement ── */ --t-rapide: .18s ease; --t-base: .25s ease; --t-lent: .5s cubic-bezier(.22,.61,.36,1); --t-rideau: .9s cubic-bezier(.76,0,.24,1); /* Taille du texte courant sur téléphone : le sous-titre du hero et les paragraphes des sections Maison et Chambres s'y alignent. */ --fs-mobile-texte: .9375rem; /* Les chapôs de section et le sous-titre du hero, sur téléphone : une seule taille pour tous, plus petite que le corps de texte. Avant le 20 octobre 2026 chaque section gardait sa taille d'ordinateur et les introductions pesaient plus lourd que les paragraphes qu'elles annonçaient. */ --fs-mobile-chapo: .875rem; /* Hauteur d'une pastille : ses deux paddings, sa ligne de texte, ses bordures. Sert à réserver un nombre de rangs fixe dans les cartes de chambre. */ --h-puce: calc(.8rem + 1.3 * var(--fs-micro) + 2px); /* ── Divers ── */ --h-header: 76px; --z-header: 100; --z-modale: 500; --z-loader: 9999; } @media (max-width: 767px){ :root{ --h-header: 64px; } } /* Le site est pensé en clair. On neutralise l'inversion automatique des navigateurs pour que la palette du logo reste fidèle. */ :root{ color-scheme: only light; }