/* ═══════════════════════════════════════════════════════════════ CHEZ PAULETTE STUDIO — Global CSS Chargé sur toutes les pages. Ce bloc :root est le POINT DE BASCULE du site : les 13 feuilles CSS et les 26 patterns ne consomment que ces variables sémantiques. Changer la marque, c'est changer ce bloc et la palette theme.json — rien d'autre. Tokens et justifications : voir DESIGN.md à la racine du projet. ═══════════════════════════════════════════════════════════════ */ /* ── DESIGN TOKENS ── */ :root { /* ── Échelle de marque : SOURCE UNIQUE = palette theme.json ── Bordeaux dégradé vers le crème (jamais vers le blanc, qui vire au rose). Les alias --primary-* sont conservés : tout le CSS existant les consomme. */ --vin-950: var(--wp--preset--color--vin-950); --vin-900: var(--wp--preset--color--vin-900); --vin-800: var(--wp--preset--color--vin-800); --vin-700: var(--wp--preset--color--vin-700); --vin-600: var(--wp--preset--color--vin-600); --vin-500: var(--wp--preset--color--vin-500); --vin-200: var(--wp--preset--color--vin-200); --vin-100: var(--wp--preset--color--vin-100); /* vin-900 et non vin-950 : en aplat plein écran (héros, sections drenchées) le 950 lit comme du noir et perd la marque. Le 950 reste disponible pour les dégradés et les voiles. */ --primary-900: var(--vin-900); --primary-800: var(--vin-800); /* survol de bouton */ --primary-700: var(--vin-700); /* RAL 3005 — couleur d'action */ --primary-600: var(--vin-600); --primary-500: var(--vin-500); --primary-100: var(--vin-100); /* ── Encres. Jamais #000 : l'encre est teintée vers le bordeaux. ── */ --black: #1B1417; --ink: #1B1417; /* titres sur fond clair */ --ink-2: #716461; /* taupe chaud — texte secondaire (5,02:1 sur le fond) */ --gray-700: #3B3230; /* corps de texte courant */ --gray-500: #716461; /* texte tertiaire */ --gray-300: #B6B0A8; /* séparateurs */ --gray-200: #D1CABE; /* bordures, surfaces cartes */ --gray-100: #E9E0D2; /* crème RAL 9001 */ /* ── Surfaces. « Aucune couleur froide » : pas un seul gris neutre, pas de blanc pur. --white est conservé comme NOM (70 usages) mais vaut du crème. ── */ --white: #F5F0EB; /* ex-blanc : inputs, cartes. Crème, jamais #FFF */ --bg: #F5F0EB; /* fond global */ --cream: #F5F0EB; /* fond général, nav */ --linen-deep: #E9E0D2; /* cartes — RAL 9001 */ --linen-grey: #E9E0D2; /* galeries */ --linen-amber:#E1D4C7; /* sections de rupture tièdes */ --ivory: #E9E0D2; /* texte crème sur surfaces bordeaux */ --davos: #F2F2F2; /* typo sur bordeaux uniquement (cf. DESIGN.md) */ --surface-dark: var(--vin-900); /* sections drenchées + pied de page */ /* ── Accents ── */ --forest: var(--vin-700); /* nom hérité — couleur d'action */ --forest-deep: var(--vin-800); /* survol */ --amber: #C0A39B; /* rosé sourd — accent parcimonieux */ --gold-star: #FFD700; /* étoiles d'avis Google uniquement */ /* ── Alerte (validation de formulaire). Doit crier « erreur » sans être confondue avec le bordeaux de marque : plus claire, plus saturée, décalée vers l'orangé. 5,78:1 sur le fond, et suffisamment distante du vin en OKLab pour ne pas passer pour une variante de la marque. ── */ --alerte: #AF2D18; --alerte-fond: #F3DED6; /* ── Formes. « Des angles arrondis pour apporter douceur » (charte). ── */ --radius: 10px; --radius-lg: 20px; --radius-card: 20px; --radius-input:12px; --radius-pill: 999px; /* boutons — cf. « RÉSERVEZ » */ --arch-full: 50% 50% 0 0 / 60% 60% 0 0; /* niche, masque d'image */ --arch-soft: 14rem 14rem 1.5rem 1.5rem; /* carte haute arquée */ /* ── Lumière. Pas d'ombre grise : sur du crème elle fait une tache sale. Les ombres sont teintées bordeaux, et l'élévation passe surtout par la lueur chaude, à l'image des corniches LED du studio. ── */ /* ── LE GRAIN DES FONDS ───────────────────────────────────────────────── Direction arrêtée le 1er septembre 2026 : la bonne référence n'est pas le grain photographique, c'est LE MUR PEINT MAT. Ces deux couleurs sont des références de peinture (RAL 3005 et RAL 9001) et les murs du studio seront réellement peints ainsi. Deux couches, et c'est la seconde qu'on oublie : • `--grain-dent` : haute fréquence, très faible contraste. Elle tue le banding et donne la micro-rugosité. • `--grain-lent` : très basse fréquence, grandes taches à peine perceptibles. C'est ELLE qui fait la différence entre « un mur » et « un aplat avec du bruit dessus ». Du grain fin seul se lit toujours comme un filtre ajouté. ⚠ AUCUN MODE DE FUSION. Une tentative précédente utilisait `overlay`, qui préserve les noirs par construction et ne pouvait donc rien faire sur du bordeaux : 0,57 ‰ mesurés au lieu des 4 à 6 visés. Ici, un mouchetis teinté en alpha simple — il marche des deux côtés par construction, il est prévisible, et il évite un calque de composition plein écran. ⚠ L'ENCRE DU MOUCHETIS EST BORDEAUX, PAS GRISE. `0.102 0.016 0.024` est `vin-950` en composantes normalisées. Un mouchetis gris sur du crème produit la tache sale et froide que DESIGN.md interdit. ⚠ LE `background-size` EST OBLIGATOIRE À L'USAGE. Sans taille explicite, le motif se lisse au rééchantillonnage retina et le grain disparaît sur les écrans qui en ont le plus besoin. Vérifié : 5,44 ‰ à 1x, 5,43 ‰ à 2x, 5,43 ‰ à 3x. C'est la taille explicite qui tient ce chiffre, rien d'autre. Mesuré sur /merci/ après pose : le crème passe d'UNE couleur distincte et 0,00 ‰ à 4,85-4,99 ‰ selon la zone. Le repère pour une régression. */ --grain-dent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.102 0 0 0 0 0.016 0 0 0 0 0.024 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='3.4' amplitude='0.056'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23d)'/%3E%3C/svg%3E"); --grain-lent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002' numOctaves='2' stitchTiles='stitch' seed='19'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.102 0 0 0 0 0.016 0 0 0 0 0.024 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='1.7' amplitude='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='1200' height='1200' filter='url(%23l)'/%3E%3C/svg%3E"); /* Les mêmes deux couches, encre claire, pour le bordeaux. La polarité s'inverse avec le fond : creuser le crème, éclairer le vin. C'est ce que `mix-blend-mode: overlay` prétendait faire tout seul et ne pouvait pas — overlay préserve les noirs par construction, donc ne mordait pas sur le bordeaux. Deux jeux d'encre en alpha simple, et le problème disparaît. ⚠ LA GAMMA DE L'ENCRE CLAIRE EST PLUS RAIDE, ET CE N'EST PAS UNE COQUILLE À ALIGNER SUR CELLE DE L'ENCRE SOMBRE. Un mouchetis n'ajoute pas que du relief, il déplace aussi la moyenne — sur un fond sombre, ce déplacement éclaircit, et un bordeaux qui s'éclaircit devient laiteux. À gamma 3,4, il fallait +10,5 niveaux de luminance pour obtenir 2,5 d'écart-type : le pied de page virait au gris-prune. Une gamma plus raide rend le mouchetis plus rare et plus franc — même écart-type pour +3,9 niveaux seulement, soit l'exact miroir des -3,8 que l'encre sombre coûte au crème. */ --grain-dent-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='D' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.914 0 0 0 0 0.878 0 0 0 0 0.824 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='5.2' amplitude='0.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23D)'/%3E%3C/svg%3E"); --grain-lent-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='L' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.002' numOctaves='2' stitchTiles='stitch' seed='19'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.914 0 0 0 0 0.878 0 0 0 0 0.824 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='3.0' amplitude='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='1200' height='1200' filter='url(%23L)'/%3E%3C/svg%3E"); /* ── LES DEUX COULEURS DE PASTILLE ────────────────────────────────────── ⚠ CE SONT DEUX COULEURS HORS NUANCIER, POSÉES SUR DEMANDE EXPLICITE DE CORENTIN (19 septembre 2026, maquette à l'appui : « respecte les couleurs qu'il y a sur l'image »). Le nuancier de la charte est une référence de PEINTURE — bordeaux RAL 3005 et crème RAL 9001 — et son échelle `vin` est une rampe taupe-rosée qui ne monte jamais jusqu'au rose franc ni ne redescend vers un rouge vif. Un commentaire voisin, sur `.sq-after__badge`, avait refusé d'inventer une pêche pour cette raison même. Elles restent donc CONFINÉES aux pastilles, et il n'en existe pas d'autre usage : ce sont des signaux, pas des couleurs de marque. Toute extension hors de ce rôle est une décision de charte, et passe par la designer. `--rouge-rarete` est volontairement plus clair et plus saturé que le bordeaux : c'est ce qui le fait lire comme une alerte plutôt que comme du texte de marque, et c'est aussi ce qui lui interdit de servir ailleurs. */ --rose-pastille: #F7DBDB; --rouge-rarete: #B02F27; --flamme: #D9561C; --shadow-sm: 0 1px 2px rgba(94,32,40,.07); --shadow-md: 0 6px 18px rgba(94,32,40,.10); --shadow-lg: 0 20px 60px rgba(94,32,40,.16); --glow-cove: radial-gradient(120% 80% at 50% 0%, rgba(233,224,210,.55) 0%, rgba(233,224,210,0) 65%); /* ── Mouvement ── */ --ease-out-expo: cubic-bezier(.16,1,.3,1); --dur-fast: 180ms; --dur-base: 320ms; --dur-slow: 640ms; /* Titrage : Marcellus. Glyphique inscriptionnel, une seule graisse (400). Choisie pour tenir le registre de Canela (charte) sans licence commerciale : évasures en bout de fût, capitales lapidaires. La hiérarchie se fait à la taille et à la couleur, jamais au gras — il n'existe pas. */ --font-display: "Marcellus", Georgia, serif; /* Sous-titres et corps : Manrope variable (200-800), prescrite par la charte. */ --font-heading: "Manrope", system-ui, sans-serif; --font-body: "Manrope", system-ui, sans-serif; --container: 1280px; --section-y: 96px; } @media (max-width: 768px) { :root { --section-y: 64px; } } /* ── GARDE-FOU TYPOGRAPHIQUE ────────────────────────────────────────────── Marcellus n'existe qu'en 400. Si une règle lui demande du 700 ou du 900, le navigateur fabrique un faux gras en épaississant les traits — ce qui écrase les évasures en bout de fût, c'est-à-dire exactement ce pour quoi la police a été choisie. On interdit la synthèse : la demande de gras est alors ignorée et le dessin reste intact. Sans effet sur Manrope, qui est variable (200-800) et a de vraies graisses. */ html { font-synthesis-weight: none; } /* Les capitales de Marcellus sont son meilleur usage (titres de section du board), mais elles se serrent sans interlettrage. */ [class$="__eyebrow"], [class$="__kicker"] { letter-spacing: .1em; } /* ── ACCESSIBILITÉ : contenu réservé aux lecteurs d'écran ── Masqué visuellement mais lu par les lecteurs d'écran (clip, pas display:none). Indispensable car on désactive le CSS de Contact Form 7 : sans ça, sa liste d'erreurs .screen-reader-response s'affiche visiblement. */ /* Un lien en chantier (cp_lien_visible) : absent en production, estompé ailleurs pour qu'on sache, en local, qu'il ne sera pas en ligne. */ .cp-chantier { opacity: 0.45; } .screen-reader-text, .screen-reader-response { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Honeypot anti-spam des formulaires (global : un form peut être sur n'importe quelle page) */ .cp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* CF7 6.1+ emballe ses champs cachés dans un
: la bordure groove par défaut du navigateur apparaissait comme 2 barres noires au-dessus du form. */ .wpcf7 .hidden-fields-container { border: 0; padding: 0; margin: 0; min-inline-size: 0; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: clip; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font: inherit; cursor: pointer; border: none; background: none; } /* ── FOCUS ── */ :focus-visible { outline: 2px solid var(--primary-700); outline-offset: 4px; border-radius: 3px; } *:focus:not(:focus-visible) { outline: none; } /* ── SKIP LINK ── */ .skip-link { position: fixed; top: -100%; left: 1rem; z-index: 200; background: var(--primary-700); color: var(--white); padding: 0.75rem 1.5rem; border-radius: 0 0 var(--radius) var(--radius); font-weight: 700; font-size: 0.875rem; transition: top 0.2s; } .skip-link:focus { top: 0; } /* ── CONTAINER ── */ .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } @media (min-width: 768px) { .container { padding: 0 40px; } } .header .container { max-width: 100%; margin: 0; padding-left: 24px; padding-right: 24px; } @media (min-width: 768px) { .header .container { padding-left: 32px; padding-right: 40px; } } /* ── BUTTONS ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 26px; border-radius: 999px; /* pills — design system global (Hook-style). --radius reste pour cartes/inputs. */ border: 2px solid transparent; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; white-space: nowrap; } .btn--primary { background: var(--primary-700); color: var(--white); border-color: var(--primary-700); } .btn--primary:hover { background: var(--primary-800); border-color: var(--primary-800); transform: translateY(-1px); } /* Variante contour pour fond clair. */ .btn--outline { background: transparent; color: var(--ink); border-color: var(--gray-300); } .btn--outline:hover { border-color: var(--ink); background: var(--gray-100); transform: translateY(-1px); } .btn--lg { padding: 18px 34px; font-size: 0.9rem; } /* ── COUNTER ── */ .counter { font-variant-numeric: tabular-nums; } /* ── EYEBROW ── */ .eyebrow { font-family: 'Barlow Condensed', system-ui, sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-700); } /* ── SECTION MODIFIERS ── */ .section { padding: var(--section-y) 0; } /* ── SCROLL-REVEAL ── */ .rv, .rv-l, .rv-r { opacity: 0; transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i, 0) * 0.08s); } .rv { transform: translateY(20px); } .rv-l { transform: translateX(-24px); } .rv-r { transform: translateX(24px); } .rv.is-visible, .rv-l.is-visible, .rv-r.is-visible { opacity: 1; transform: none; } /* ── REDUCED MOTION ── */ @media (prefers-reduced-motion: reduce) { .rv, .rv-l, .rv-r { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── Les libellés d'action ne doivent jamais imposer la largeur de la page ───── Les appels à l'action de la pré-ouverture (« Rejoindre la liste d'attente ») sont bien plus longs que ceux du thème d'origine (« Devis »). En capitales interlettrées et sans césure, leur largeur minimale dépassait celle d'un téléphone et poussait les colonnes de grille qui les contiennent. Deux garde-fous : le bouton peut revenir à la ligne, et les éléments de grille sont autorisés à passer sous leur min-content. */ .btn { max-width: 100%; white-space: normal; text-wrap: balance; }