/* ========================================================================== 01-tokens.css — La Cabane à Tuque (v2) À coller en premier dans WPCodeBox (CSS global). Principe : des VALEURS de base en tête de fichier, tout le reste en découle. - 5 couleurs de base. Les autres sont dérivées avec color-mix() et la couleur relative. - 1 moteur fluide (--fluid-t). Tailles de texte et espacements en découlent. - 1 unité d'espacement (--space-unit). L'échelle, les rayons et les ombres en découlent. Recolorer le site ou changer le logo = modifier les 5 couleurs. Rien d'autre. Plage fluide : mobile 390 px -> bureau 1440 px (les deux largeurs dessinées). Support : color-mix (Chrome 111, Safari 16.2, Firefox 113) ; couleur relative, pow() non utilisé ; pas de fonctions CSS expérimentales. Contrastes mesurés (WCAG 2.2), à respecter dans les gabarits : texte / surface 15,0 · texte courant / surface 10,3 · texte discret / surface 6,5 accent / surface 5,7 · blanc / accent 6,2 · sur-primaire / primaire 13,0 sur-primaire courant / primaire 10,6 · sur-primaire discret / primaire 7,6 ambre clair / primaire 6,9 (jamais sur fond clair : 1,9) ambre / surface 3,45 -> gros texte (24 px et plus) et décor seulement accent / primaire 2,3 -> jamais de texte rouge sur le bleu nuit ========================================================================== */ :root { /* ========== 1. Moteur fluide ========== --fluid-t va de 0 (à 390 px) à 1rem (à 1440 px), puis reste à 1rem. Tout token fluide s'écrit : calc(MIN + (MAX - MIN) * var(--fluid-t)) avec MIN et MAX en rem. */ --vw-min: 390; --vw-max: 1440; --fluid-t: clamp( 0rem, (100vw - var(--vw-min) / 16 * 1rem) / ((var(--vw-max) - var(--vw-min)) / 16), 1rem ); /* ========== 2. Couleurs : les 5 bases ========== */ --color-surface: #fdf8ed; /* blanc chaud : fond de page (version « Hiver uni », retenue le 12 oct. 2026) */ --color-text: #1c2129; /* encre : titres */ --color-primary: #1f2d3d; /* bleu nuit : estampes, sections sombres */ --color-accent: #b0362a; /* rouge feuille d'érable : l'action, rien d'autre */ --color-highlight: #b07a22; /* ambre : touches décoratives */ --color-white: #fff; --color-black: #000; /* ---------- Dérivées : surfaces ---------- */ --color-paper: #fbf9f4; /* cadres, cartes, tampons : même clarté que le fond, un peu plus neutre */ --color-sky: var(--color-surface); /* section témoignages : même fond que la page (Hiver uni) */ --color-primary-soft: color-mix(in oklab, var(--color-white) 5%, var(--color-primary)); /* forêt du lointain */ --color-primary-deep: color-mix(in oklab, var(--color-black) 25%, var(--color-primary)); /* sous-bois : pied de page */ --color-accent-dark: color-mix(in oklab, var(--color-black) 28%, var(--color-accent)); /* pattes du ruban */ --color-highlight-text: #8f6118; /* ambre pour du TEXTE sur fond clair : 5,1:1 sur la surface (l'ambre de base fait 3,5:1, décor et gros texte seulement) */ --color-highlight-light: #e4ac5a; /* ambre sur fond sombre (repli) */ --color-green: #2f5a3b; /* vert sapin : étiquettes du diaporama (page Réserver) */ /* ---------- Dérivées : texte ---------- */ --color-text-body: color-mix(in oklab, var(--color-text) 85%, var(--color-surface)); /* paragraphes */ --color-text-muted: color-mix(in oklab, var(--color-text) 70%, var(--color-surface)); /* aides, légendes */ --color-on-primary: var(--color-surface); --color-on-primary-body: color-mix(in oklab, var(--color-primary) 10%, var(--color-surface)); --color-on-primary-muted: color-mix(in oklab, var(--color-primary) 25%, var(--color-surface)); --color-on-accent: var(--color-white); /* ---------- Dérivées : filets, lueur, ombre ---------- */ --color-border: color-mix(in oklab, var(--color-text) 15%, var(--color-surface)); --color-border-dotted: color-mix(in oklab, var(--color-text) 50%, var(--color-surface)); --color-border-inverse: color-mix(in srgb, var(--color-on-primary) 40%, transparent); --color-shadow: color-mix(in oklab, var(--color-highlight) 12%, var(--color-text)); /* ombres chaudes */ /* ========== 3. Typographie ========== */ --font-display: "Young Serif", Georgia, serif; /* un seul poids : 400 */ --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --font-hand: "Imaginary Friend", "Comic Neue", cursive; /* tampons-notes, signature. Licence web à vérifier. */ /* Tailles : MIN (390 px) -> MAX (1440 px), en rem */ --text-xs: calc(0.75rem + (0.8125 - 0.75) * var(--fluid-t)); /* 12 -> 13 surtitres */ --text-sm: calc(0.8125rem + (0.875 - 0.8125) * var(--fluid-t)); /* 13 -> 14 aides, légendes */ --text-base: calc(0.9375rem + (1 - 0.9375) * var(--fluid-t)); /* 15 -> 16 petit texte */ --text-md: calc(1rem + (1.0625 - 1) * var(--fluid-t)); /* 16 -> 17 interface, cartes, champs */ --text-lg: calc(1.0625rem + (1.1875 - 1.0625) * var(--fluid-t)); /* 17 -> 19 paragraphe */ --text-xl: calc(1.1875rem + (1.375 - 1.1875) * var(--fluid-t)); /* 19 -> 22 chapeau */ --text-h3: calc(1.625rem + (2.125 - 1.625) * var(--fluid-t)); /* 26 -> 34 */ --text-h2: calc(2rem + (3.25 - 2) * var(--fluid-t)); /* 32 -> 52 */ --text-h1: calc(2.625rem + (4.875 - 2.625) * var(--fluid-t)); /* 42 -> 78 titre du hero d'accueil */ --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; /* le 800 du mockup n'était pas chargé : il s'affichait en 700 */ --leading-display: 1; --leading-heading: 1.08; --leading-ui: 1.45; --leading-body: 1.6; --tracking-display: -0.012em; /* grands titres */ --tracking-eyebrow: 0.23em; /* surtitres */ --tracking-label: 0.15em; /* petites étiquettes majuscules */ /* ========== 4. Espacements : une unité, une échelle ========== */ --space-unit: calc(0.75rem + (1 - 0.75) * var(--fluid-t)); /* 12 -> 16 */ --space-3xs: calc(var(--space-unit) * 0.25); /* 3 -> 4 */ --space-2xs: calc(var(--space-unit) * 0.5); /* 6 -> 8 */ --space-xs: calc(var(--space-unit) * 0.75); /* 9 -> 12 */ --space-sm: var(--space-unit); /* 12 -> 16 */ --space-md: calc(var(--space-unit) * 1.5); /* 18 -> 24 : rythme vertical des colonnes */ --space-lg: calc(var(--space-unit) * 2); /* 24 -> 32 */ --space-xl: calc(var(--space-unit) * 3); /* 36 -> 48 */ --space-2xl: calc(var(--space-unit) * 4); /* 48 -> 64 */ --space-3xl: calc(var(--space-unit) * 6); /* 72 -> 96 */ --grid-gap: var(--space-lg); /* 24 -> 32 */ --space-section: calc(3.5rem + (7.5 - 3.5) * var(--fluid-t)); /* 56 -> 120 entre deux sections */ --gutter: calc(1.25rem + (5 - 1.25) * var(--fluid-t)); /* 20 -> 80 marges de page */ /* ========== 5. Formes, traits, ombres ========== */ --stroke: 1px; --line-thin: calc(var(--stroke) * 1.5); /* champs, filets */ --line: calc(var(--stroke) * 2.5); /* contour d'encre des cartes et des photos */ --radius: var(--space-3xs); /* 3 -> 4 : boutons, champs, cartes */ --radius-pill: 999px; --shadow-paper: 0 var(--space-xs) var(--space-lg) color-mix(in srgb, var(--color-shadow) 14%, transparent); --shadow-stamp: 0 var(--space-2xs) var(--space-md) color-mix(in srgb, var(--color-shadow) 20%, transparent); --shadow-card: 0 var(--space-sm) calc(var(--space-xl) * 0.8) color-mix(in srgb, var(--color-shadow) 28%, transparent); --shadow-text: 0 1px 14px rgb(0 0 0 / 0.45); /* texte clair posé sur une photo */ --shadow-text-lg: 0 2px 24px rgb(0 0 0 / 0.35); /* grands titres posés sur une photo */ /* ========== 6. Mise en page ========== */ --container-max: calc(var(--vw-max) / 16 * 1rem); /* 1440 : cadre du design, marges comprises */ --measure-sm: 28em; /* paragraphes d'introduction */ --measure: 44rem; /* colonne de lecture : texte long, cartes, carrousel */ --measure-prose: 40rem; /* texte légal : environ 70 caractères par ligne à 17–19 px */ --measure-head: 38rem; /* en-tête de section (surtitre + titre) */ --measure-wide: 75rem; /* bande « En bref » */ --tap: 2.75rem; /* zone tactile minimale (44 px) */ --control: 3rem; /* boutons ronds et champs */ --size-seal: clamp(5rem, 11cqi, 8.75rem); /* sceau : taille de base */ --forest-h-lg: max(10.5cqi, 4.5rem); /* forêt basse, bureau */ --form-max: calc(var(--container-max) * 0.65); /* formulaire de groupe */ --logo-h: clamp(4rem, 8cqi, 7rem); /* logo de l'en-tête (le hero, qui passe dessous, en dépend) */ --hero-min-h: clamp(38rem, 54cqi, 46rem); /* hauteur minimale des hero (accueil et Réserver) */ --forest-h-photo: clamp(3.5rem, 7.5cqi, 7.5rem); /* ligne de sapins posée sur une photo : 120 px au plus */ --drift-h: clamp(2.5rem, 6cqi, 5rem); /* congères */ --size-play: calc(var(--tap) * 2); /* bouton lecture de la visite virtuelle */ --opacity-ghost: 0.07; /* photo en arrière-plan très pâle */ /* ========== 7. Inclinaisons, mouvement, focus ========== */ --tilt-photo: 1.4deg; /* photos : alterner le signe avec calc(var(--tilt-photo) * -1) */ --tilt-stamp: calc(var(--tilt-photo) * 4); /* tampons */ --tilt-label: calc(var(--tilt-photo) * -1.6); /* étiquettes vertes du diaporama */ --tilt-btn: calc(var(--tilt-photo) * 2); /* tampons-boutons (flèches, lecture) : alterner le signe */ --duration: 0.2s; --ease: ease; --duration-slide: 0.55s; /* panneau qui glisse du bas */ --duration-fade: 0.9s; /* fondu entre deux photos du diaporama */ --ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-reveal: 1.1s; /* photos qui se posent en arrivant à l'écran (douce) */ --reveal-shift: var(--space-3xs); /* distance parcourue en se posant (très courte : 3-4 px) */ --duration-sway: 5s; /* vent dans les sapins : durée d'un aller (chaque arbre varie ±25 %) */ --sway: 4deg; /* inclinaison d'un arbre au plus fort du vent (5 à 6 px au sommet d'un grand sapin) */ --layer-back-k: 0.55; --layer-back-s: 1.5; /* sapins : couche du fond (amplitude × k, durée × s) */ --layer-mid-k: 0.9; --layer-mid-s: 1; /* couche du milieu */ --layer-front-k: 1.25; --layer-front-s: 0.75; /* couche de devant : penche plus, plus vite */ --duration-steam: 7s; /* vapeur */ --focus-width: var(--line); --focus-offset: var(--space-3xs); } /* Couleur relative : ambre clair exact, dérivé de l'ambre. Sinon, la valeur de repli ci-dessus. */ @supports (color: oklch(from red l c h)) { :root { --color-highlight-light: oklch(from var(--color-highlight) calc(l + 0.16) c h); } } /* ========================================================================== 8. Contextes de couleur : le fond décide des couleurs du contenu. Les composants lisent --ctx-* et fonctionnent sur clair, sombre ou rouge. Une carte claire dans une section sombre : class="ctx-light". ========================================================================== */ :root, .ctx-light { --ctx-bg: var(--color-surface); --ctx-fg: var(--color-text); --ctx-fg-body: var(--color-text-body); --ctx-fg-muted: var(--color-text-muted); --ctx-line: var(--color-border); --ctx-eyebrow: var(--color-accent); --ctx-focus: var(--color-primary); } .ctx-dark { --ctx-bg: var(--color-primary); --ctx-fg: var(--color-on-primary); --ctx-fg-body: var(--color-on-primary-body); --ctx-fg-muted: var(--color-on-primary-muted); --ctx-line: var(--color-border-inverse); --ctx-eyebrow: var(--color-highlight-light); --ctx-focus: var(--color-highlight-light); } .ctx-accent { --ctx-bg: var(--color-accent); --ctx-fg: var(--color-on-accent); --ctx-fg-body: var(--color-on-accent); --ctx-fg-muted: var(--color-on-accent); --ctx-line: var(--color-border-inverse); --ctx-eyebrow: var(--color-on-accent); --ctx-focus: var(--color-on-accent); } .ctx-light, .ctx-dark, .ctx-accent { background: var(--ctx-bg); color: var(--ctx-fg); } :focus-visible { outline: var(--focus-width) solid var(--ctx-focus); outline-offset: var(--focus-offset); } /* Mouvement réduit : les transitions s'arrêtent. */ @media (prefers-reduced-motion: reduce) { :root { --duration: 0s; } } /* ---------- Variante de test : primaire sapin (à retirer une fois tranché) ---------- bascule tout le site : fonds, forêts, pied de page, contrastes. :root[data-primary="sapin"] { --color-primary: #1f3d2e; } */ /* ---------- Points de rupture (les variables CSS ne passent pas dans @media) ---------- Dessinés : 1440 (bureau) et 390 (mobile). Tablette : interpolée par le moteur fluide. Seuils Bricks à utiliser dans les gabarits : 1279 · 991 · 767 · 478. ---------------------------------------------------------------------------------- */ /* ---------- À produire plus tard (pas un token tant que le fichier n'existe pas) ---------- Texture de grain : une tuile WebP <= 8 ko en fond répété, derrière le contenu (z-index -1). Filtre « bords usés » : un seul SVG inséré une fois dans le pied de page. ---------------------------------------------------------------------------------------- */