/* ───────────────────────────────────────────────────────────── Villemont — noms courts des variables (contrat CSS) Les VALEURS sont dans theme.json, et seulement là : couleurs → settings.color.palette (--wp--preset--color--*) tailles → settings.typography.fontSizes (--wp--preset--font-size--*) espaces → settings.spacing.spacingSizes (--wp--preset--spacing--*) le reste → settings.custom (--wp--custom--*) Ce fichier ne fait que donner les noms courts utilisés par le thème et par l'extension villemont-site (var(--burgundy), var(--fs-body)…). Aucune valeur en dur ici : pour changer une couleur ou une taille, modifier theme.json. ───────────────────────────────────────────────────────────── */ :root { /* ── Arrondis (fenêtres de dialogue uniquement) ── */ --radius-dialog: var(--wp--custom--radius--dialog); --radius-control: var(--wp--custom--radius--control); /* ── Bordeaux ── */ --burgundy: var(--wp--preset--color--burgundy); --burgundy-deep: var(--wp--preset--color--burgundy-deep); --burgundy-soft: var(--wp--preset--color--burgundy-soft); /* ── Or / Ocre ── */ --ochre: var(--wp--preset--color--ochre); --ochre-soft: var(--wp--preset--color--ochre-soft); --ochre-deep: var(--wp--preset--color--ochre-deep); /* ── Neutres chauds ── */ --bone: var(--wp--preset--color--bone); --bone-warm: var(--wp--preset--color--bone-warm); --paper: var(--wp--preset--color--paper); --ink: var(--wp--preset--color--ink); --ink-soft: var(--wp--preset--color--ink-soft); /* ── Autre ── */ --olive: var(--wp--preset--color--olive); /* ── Retour de formulaire réussi (vert clair) ── */ --success: var(--wp--custom--color--success); --success-line: var(--wp--custom--color--success-line); /* ── Champs de formulaire : fond crème ── */ --field-bg: var(--bone); /* ── Règles ── */ --rule: var(--wp--custom--color--rule); --rule-soft: var(--wp--custom--color--rule-soft); /* Composantes RVB des couleurs de la charte, pour les transparences : rgba(var(--ink-rgb), 0.55). */ --ink-rgb: var(--wp--custom--rgb--ink); --bone-rgb: var(--wp--custom--rgb--bone); --paper-rgb: var(--wp--custom--rgb--paper); --ochre-rgb: var(--wp--custom--rgb--ochre); --ochre-soft-rgb: var(--wp--custom--rgb--ochre-soft); --ochre-deep-rgb: var(--wp--custom--rgb--ochre-deep); --olive-rgb: var(--wp--custom--rgb--olive); --burgundy-rgb: var(--wp--custom--rgb--burgundy); --shade-rgb: var(--wp--custom--rgb--shade); /* voile sombre des photos */ --black-rgb: var(--wp--custom--rgb--black); /* ombres portées neutres */ --white: var(--wp--custom--color--white); /* fond blanc de l'impression des lettres */ --umber: var(--wp--custom--color--umber); /* fin du dégradé de secours du hero */ /* ── Tailles de texte ── */ --fs-body: var(--wp--preset--font-size--body); --fs-text: var(--wp--preset--font-size--text); --fs-lede: var(--wp--preset--font-size--lede); --fs-caption: var(--wp--preset--font-size--caption); --fs-small: var(--wp--preset--font-size--small); --fs-hero: var(--wp--preset--font-size--hero); --fs-note: var(--wp--preset--font-size--note); --fs-title-sm: var(--wp--preset--font-size--title-sm); --fs-title-md: var(--wp--preset--font-size--title-md); --fs-title-lg: var(--wp--preset--font-size--title-lg); --fs-title-xl: var(--wp--preset--font-size--title-xl); --fs-eyebrow: var(--wp--custom--fs--eyebrow); --fs-label: var(--wp--custom--fs--label); --fs-numeral: var(--wp--custom--fs--numeral); --fs-note-title: var(--wp--custom--fs--note-title); --fs-notice: var(--wp--custom--fs--notice); --fs-support: var(--wp--custom--fs--support); --fs-detail: var(--wp--custom--fs--detail); --fs-fine: var(--wp--custom--fs--fine); --fs-micro: var(--wp--custom--fs--micro); --fs-consent: var(--wp--custom--fs--consent); --fs-label-sm: var(--wp--custom--fs--label-sm); --fs-caps-lg: var(--wp--custom--fs--caps-lg); --fs-caps-xl: var(--wp--custom--fs--caps-xl); --fs-figure: var(--wp--custom--fs--figure); --fs-figure-lg: var(--wp--custom--fs--figure-lg); --fs-figure-xl: var(--wp--custom--fs--figure-xl); --fs-ornament: var(--wp--custom--fs--ornament); --fs-icon: var(--wp--custom--fs--icon); --fs-icon-lg: var(--wp--custom--fs--icon-lg); --fs-pager-arrow: var(--wp--custom--fs--pager-arrow); /* ── Typographie ── */ --serif: var(--wp--preset--font-family--serif); --display: var(--wp--preset--font-family--display); --fw-serif-strong: var(--wp--custom--fw--serif-strong); /* ── Liens dans le texte ── */ --link-color: var(--burgundy); --link-color-hover: var(--burgundy-deep); --link-underline: var(--ochre); --link-underline-width: var(--wp--custom--link--underline-width); --link-underline-offset: var(--wp--custom--link--underline-offset); /* ── En-tête, menu, pied de page ── */ --footer-card-bg: var(--wp--custom--color--footer-card-bg); --footer-card-border: var(--wp--custom--color--footer-card-border); --brand-mark-sm: var(--wp--custom--size--brand-mark-sm); --pager-btn: var(--wp--custom--size--pager-btn); --scroll-hint-w: var(--wp--custom--size--scroll-hint-w); --nav-gap: var(--wp--custom--nav--gap); --nav-tracking: var(--wp--custom--nav--tracking); --header-pad: var(--wp--custom--header--pad); --header-gap: var(--wp--custom--header--gap); /* ── Espacement (fluide, plafonné au desktop) ── */ --pad-section: var(--wp--preset--spacing--section); --pad-block: var(--wp--preset--spacing--block); --gap-large: var(--wp--preset--spacing--large); --gap-medium: var(--wp--preset--spacing--medium); /* ── Mise en page ── */ --container-max: var(--wp--custom--size--container-max); /* = layout.wideSize (vérifié en CI) */ --content-wide: var(--wp--custom--size--content-wide); --header-h: var(--wp--custom--header--height); --transition: var(--wp--custom--transition); /* ── Cible tactile minimale (WCAG 2.5.5 / Apple HIG) ── */ --tap-min: var(--wp--custom--size--tap-min); /* ── Valeurs par défaut des éléments (base.css, reprises d'Astra en 2d) ── */ --paragraph-gap: var(--wp--custom--flow--paragraph-gap); --list-gap: var(--wp--custom--flow--list-gap); --list-indent: var(--wp--custom--flow--list-indent); --stacked-column-gap: var(--wp--custom--flow--stacked-column-gap); --field-height: var(--wp--custom--form--field-height); --field-line: var(--wp--custom--form--field-line); --label-line: var(--wp--custom--form--label-line); --label-weight: var(--wp--custom--form--label-weight); --heading-weight: var(--wp--custom--heading--weight); --heading-line-1: var(--wp--custom--heading--line-1); --heading-line-2: var(--wp--custom--heading--line-2); --heading-line-3: var(--wp--custom--heading--line-3); --heading-line-4: var(--wp--custom--heading--line-4); --heading-line-5: var(--wp--custom--heading--line-5); --heading-line-6: var(--wp--custom--heading--line-6); } /* ───────────────────────────────────────────────────────────── Breakpoints officiels du thème — UN seul jeu, à réutiliser partout. (Les media queries CSS n'acceptent pas var() ; ces valeurs sont donc une convention documentée, écrite en littéral dans chaque fichier.) ≤ 1200px header : menu burger (libellés trop larges pour le menu horizontal) ≤ 1024px tablette large — grilles multi-colonnes → 2 colonnes ≤ 768px tablette portrait — grilles → 1 colonne, header resserré ≤ 640px mobile — burger, 1 colonne, typo réduite ≤ 380px XS — garde-fou petits téléphones ───────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { :root { --header-h: var(--wp--custom--header--height-tablet); } } @media (max-width: 640px) { :root { --header-h: var(--wp--custom--header--height-mobile); } } /* Le menu reste complet jusqu'au passage au burger (1200px). */ @media (max-width: 1500px) { :root { --nav-tracking: var(--wp--custom--nav--tracking-compact); --header-pad: var(--wp--custom--header--pad-compact); --header-gap: var(--wp--custom--header--gap-compact); } }