/* ========================================================================== Jetons de la charte. -------------------------------------------------------------------------- Rien n'est codé en dur ailleurs (doc de dev, section 10.1). LES JETONS SONT NOMMÉS PAR RÔLE, PAS PAR COULEUR. `--c-brand` vaut olive dans une palette, lavande dans une autre. Nommer un jeton `--c-olive` et y mettre du violet est le genre de détail qui fait perdre une demi-heure six mois plus tard. --c-brand* la dominante : intertitres, pictos, bandeaux sombres --c-action* l'action, et rien d'autre : « Réserver en direct » et la barre mobile. Utilisée partout, elle ne veut plus rien dire --c-accent* la ponctuation : liens, états actifs, filets --c-dark-* déclinaisons pour les bandeaux sombres CINQ PALETTES, à faire choisir à Armelle (cadrage, section 12, point 5 : « lui présenter deux variantes de palette, et lui faire choisir »). Elles partent toutes de ses mots à elle : jaune, vert olive, lavande, bleu ciel, et « quelque chose qui inspire le soleil, chaleureux et jovial ». Les neutres restent chauds dans les cinq : c'est ce qui évite l'ambiance spa qu'elle a rejetée en regardant Séjour Ardéchois. La palette se choisit avec l'attribut `data-palette` sur , posé par le serveur depuis `?palette=` et par le sélecteur de prévisualisation. Sans attribut, c'est « olive-soleil ». CONTRASTES : tous les couples sont vérifiés automatiquement par `python tools/check_contrast.py`. Aucune palette n'est livrée sans que le texte courant tienne 4,5:1 sur chacun des trois fonds. ========================================================================== */ :root { /* --- Typographie ------------------------------------------------------- */ --font-title: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Échelle fluide. Le second terme de chaque clamp() contient une unité rem pour que le texte reste zoomable (un clamp en vw seul casse le zoom). */ --t-display: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem); --t-h1: clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem); --t-h2: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem); --t-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); --t-h4: 1.0625rem; --t-lead: clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-tiny: 0.8125rem; --t-eyebrow: 0.78rem; --lh-tight: 1.08; --lh-title: 1.18; --lh-body: 1.7; /* --- Espacements — base 8, deux crans fluides pour le rythme vertical --- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --section-y: clamp(3.25rem, 2rem + 5vw, 6rem); --section-y-lg: clamp(4rem, 2rem + 8vw, 8rem); /* --- Gabarit ----------------------------------------------------------- */ --shell: 1200px; --shell-wide: 1400px; --shell-text: 68ch; --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem); /* --- Rayons ------------------------------------------------------------ */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* --- Ombres : teintées chaud, jamais du noir pur ----------------------- */ --sh-xs: 0 1px 2px rgb(74 66 46 / 7%); --sh-sm: 0 1px 2px rgb(74 66 46 / 5%), 0 3px 10px -2px rgb(74 66 46 / 8%); --sh-md: 0 2px 4px rgb(74 66 46 / 5%), 0 14px 30px -10px rgb(74 66 46 / 16%); --sh-lg: 0 4px 8px rgb(74 66 46 / 5%), 0 28px 60px -20px rgb(74 66 46 / 22%); --sh-ring: inset 0 0 0 1px var(--c-line); /* --- Mouvement --------------------------------------------------------- */ --e-out: cubic-bezier(0.22, 1, 0.36, 1); --e-in-out: cubic-bezier(0.65, 0, 0.35, 1); --d-fast: 140ms; --d-base: 260ms; --d-slow: 600ms; --d-photo: 1200ms; /* fondus de la galerie */ --header-h: 4.5rem; --mobile-bar-h: 4.25rem; /* --- États, communs à toutes les palettes ------------------------------ */ /* Bouton « Voir sur Airbnb » : plein, pour rester lisible sur une photo, sur une crème comme sur un bandeau olive. Blanc dessus : 4,9:1. */ --c-airbnb: #d1344a; --c-airbnb-hover: #b92a3f; --c-danger: #9d3b2b; --c-danger-soft: #fbeceb; --c-success: #4a6b3f; --c-success-soft: #ecf3e9; } @media (min-width: 900px) { :root { --header-h: 5.25rem; --mobile-bar-h: 0rem; } } /* ========================================================================== PALETTE 1 — « Olive et soleil » (défaut) L'olive n'est pas un choix sur une roue chromatique : c'est déjà la couleur de la maison. Le carrelage de la cuisine, la structure du patio, les oliviers du jardin. Le doré ne sert qu'à l'action, la lavande ponctue. ========================================================================== */ :root, [data-palette="olive-soleil"] { --c-brand: #5e6b39; --c-brand-deep: #414a28; --c-brand-deepest: #333a1f; --c-brand-soft: #edf0e2; --c-action: #e0a32c; --c-action-hover: #c78a18; --c-action-soft: #fbf0d7; --c-action-ink: #7a5205; /* texte sur --c-action-soft */ --c-on-action: #2e2b24; --c-accent: #7a68ae; --c-accent-strong: #6a57a0; --c-accent-soft: #f0ecf8; --c-bg: #fdfbf6; --c-sand: #f2ead9; --c-sand-deep: #e8dcc4; --c-surface: #ffffff; --c-ink: #2e2b24; --c-muted: #6b6250; --c-faint: #6f6858; --c-line: #e3d9c4; --c-line-soft: #efe7d6; --c-focus: #4a3a8c; --c-dark-surface: #4a5430; --c-dark-line: #6a7647; --c-dark-muted: #cfd3bd; --c-dark-brand: #cdd6ae; --c-dark-accent: #cfc5ea; --c-dark-focus: #f0e2b4; } /* ========================================================================== PALETTE 2 — « Soleil et lavande » Le jaune passe en dominante, comme Armelle l'a cité en premier. Comme il est impossible d'écrire lisiblement sur du jaune vif, la dominante affichée est un ocre profond, et le jaune vit dans les fonds et les filets. L'action bascule sur la lavande : sur une page déjà chaude, un bouton doré ne ressortirait plus. ========================================================================== */ [data-palette="soleil-lavande"] { --c-brand: #8a6108; --c-brand-deep: #4a3a1c; --c-brand-deepest: #3a2d14; --c-brand-soft: #fbf0d4; --c-action: #6a57a0; --c-action-hover: #57468a; --c-action-soft: #efecf8; --c-action-ink: #584690; --c-on-action: #ffffff; --c-accent: #7d8a4c; --c-accent-strong: #5c6836; --c-accent-soft: #eef1e4; --c-bg: #fefcf5; --c-sand: #fbf0d6; --c-sand-deep: #f0ddb0; --c-surface: #ffffff; --c-ink: #2f2a1e; --c-muted: #6b6047; --c-faint: #6f6650; --c-line: #ecdcb8; --c-line-soft: #f6ead0; --c-focus: #4a3a8c; --c-dark-surface: #574526; --c-dark-line: #7a6438; --c-dark-muted: #ddd2ba; --c-dark-brand: #f0d391; --c-dark-accent: #cdc2ee; --c-dark-focus: #f5dfa2; } /* ========================================================================== PALETTE 3 — « Olive et terre cuite » Deux couleurs seulement, pas de troisième : olive et terre cuite, comme les tuiles des toits, le gravier du terrain de pétanque et les lauriers-roses. La plus sobre des cinq, et la plus « Provence ». Le revers : plus terreuse, moins « estivale » que ce qu'Armelle demande. ========================================================================== */ [data-palette="olive-terre"] { --c-brand: #5e6b39; --c-brand-deep: #414a28; --c-brand-deepest: #32391f; --c-brand-soft: #edf0e2; --c-action: #b05530; --c-action-hover: #96461f; --c-action-soft: #fbeade; --c-action-ink: #94491f; --c-on-action: #ffffff; --c-accent: #b0603a; --c-accent-strong: #97492a; --c-accent-soft: #fbeade; --c-bg: #fdf9f3; --c-sand: #f4e7d8; --c-sand-deep: #e9d6c0; --c-surface: #ffffff; --c-ink: #2f2921; --c-muted: #6e6152; --c-faint: #72665a; --c-line: #e6d5c2; --c-line-soft: #f1e4d5; --c-focus: #8a3d1c; --c-dark-surface: #4a5430; --c-dark-line: #6a7647; --c-dark-muted: #d2d4c0; --c-dark-brand: #cdd6ae; --c-dark-accent: #f0b393; --c-dark-focus: #f3c9a5; } /* ========================================================================== PALETTE 4 — « Lavande et olive » La lavande passe en dominante, l'olive ponctue, le doré garde l'action. Les neutres restent volontairement chauds et beiges : une lavande posée sur des gris froids donne exactement l'ambiance spa qu'Armelle a rejetée en regardant Séjour Ardéchois. ========================================================================== */ [data-palette="lavande-olive"] { --c-brand: #5c4b94; --c-brand-deep: #3b3063; --c-brand-deepest: #2f2650; --c-brand-soft: #eeeaf8; --c-action: #e0a32c; --c-action-hover: #c78a18; --c-action-soft: #fbf0d7; --c-action-ink: #7a5205; --c-on-action: #2e2b24; --c-accent: #6e7a47; --c-accent-strong: #55622f; --c-accent-soft: #edf0e2; --c-bg: #fdfbf7; --c-sand: #f1ecdf; --c-sand-deep: #e4dcca; --c-surface: #ffffff; --c-ink: #2c2833; --c-muted: #665f6b; --c-faint: #6a6470; --c-line: #e2dbcb; --c-line-soft: #eee8da; --c-focus: #4a3a8c; --c-dark-surface: #4a3d78; --c-dark-line: #665596; --c-dark-muted: #cfc8e2; --c-dark-brand: #ccc2ee; --c-dark-accent: #cad78f; --c-dark-focus: #f0e2b4; } /* ========================================================================== PALETTE 5 — « Ciel et sable » Le bleu de la piscine et du ciel, posé sur le sable du terrain de pétanque. Le cadrage recommandait de laisser le bleu aux photos plutôt que d'en faire une couleur d'interface — c'est la réserve à garder en tête en la regardant. Elle est ici parce qu'Armelle a cité le bleu ciel, et qu'on ne tranche pas à sa place. ========================================================================== */ [data-palette="ciel-sable"] { --c-brand: #2f5d7c; --c-brand-deep: #1f4056; --c-brand-deepest: #193445; --c-brand-soft: #e2eef5; --c-action: #e0a32c; --c-action-hover: #c78a18; --c-action-soft: #fbf0d7; --c-action-ink: #7a5205; --c-on-action: #2e2b24; --c-accent: #6e7a47; --c-accent-strong: #55622f; --c-accent-soft: #edf0e2; --c-bg: #fcfaf5; --c-sand: #f1ead9; --c-sand-deep: #e3dac4; --c-surface: #ffffff; --c-ink: #262c30; --c-muted: #5f6468; --c-faint: #63686c; --c-line: #dfd8c8; --c-line-soft: #ede7d8; --c-focus: #1f4056; --c-dark-surface: #2a5471; --c-dark-line: #457091; --c-dark-muted: #c4d4de; --c-dark-brand: #a9cde3; --c-dark-accent: #cad78f; --c-dark-focus: #f0e2b4; } /* -------------------------------------------------------------------------- Inversion pour les bandeaux sombres. Une section porte .band--dark et tout ce qu'elle contient bascule, sans avoir à surcharger chaque composant. Tout passe par les jetons --c-dark-* définis dans chaque palette : c'est ce qui permet au bandeau sombre de suivre le changement de palette au lieu de rester olive quelle que soit la variante choisie. -------------------------------------------------------------------------- */ .band--dark { --c-bg: var(--c-brand-deep); --c-sand: var(--c-dark-surface); --c-sand-deep: var(--c-dark-line); --c-surface: var(--c-dark-surface); --c-ink: #fdfbf6; --c-muted: var(--c-dark-muted); --c-faint: var(--c-dark-muted); --c-line: var(--c-dark-line); --c-line-soft: var(--c-dark-surface); --c-brand: var(--c-dark-brand); --c-brand-soft: var(--c-dark-surface); --c-accent: var(--c-dark-accent); --c-accent-strong: var(--c-dark-accent); --c-accent-soft: var(--c-dark-surface); --c-action-soft: var(--c-dark-surface); --c-action-ink: var(--c-dark-brand); --c-focus: var(--c-dark-focus); }