/* ============================================================
variables.css — Tokens de design
Source unique de vérité pour : couleurs, typographie,
espacements, rayons, ombres, z-index.
Note sur les breakpoints :
Le CSS natif ne permet pas d'utiliser var() à l'intérieur
d'une media query (@media (max-width: var(--x)) est invalide
tant qu'il n'y a pas de préprocesseur/build). Sans Sass/PostCSS
dans ce projet, les breakpoints ne peuvent donc pas être de
vraies custom properties. Ils sont documentés ici comme
référence figée, à utiliser tels quels dans chaque @media :
480px → mobile
768px → tablette portrait
900px → tablette / grilles complexes (cartes qui empilent)
1024px → petit desktop / tablette paysage
1440px → largeur max du contenu (--container-max)
Exception documentée : contact.css utilise aussi 1100px,
un point d'ajustement fin propre au formulaire de contact.
Ne pas dupliquer ce genre d'exception ailleurs sans raison.
============================================================ */
/* Les polices Google Fonts sont chargées via
+ directement dans le de index.html
(voir juste avant le de variables.css), pas via @import ici.
Un @import dans une feuille de style elle-même chargée par
ajoute un aller-retour réseau bloquant supplémentaire avant que
les polices ne commencent seulement à se télécharger. */
:root {
/* ── Polices ──────────────────────────────────────────── */
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Jost', system-ui, sans-serif;
/* ── Couleurs de base ─────────────────────────────────── */
--color-bg: #f0ede8;
--ivory-card: #f7f4f0;
--ink-deep: #1a1a18;
--ink-base: #2c2622;
--ink-mid: #5a534e;
--caramel: #b07d52;
--caramel-light: #c8956a;
--caramel-pale: #e8d5c4;
--status-online: #5a9c5a;
--status-error: #c0574a;
/* Composants RGB des couleurs ci-dessus, pour les variantes
avec transparence (rgba(var(--ink-base-rgb), 0.5) etc.) */
--ink-base-rgb: 44, 38, 34;
--ink-deep-rgb: 26, 26, 24;
--ivory-rgb: 247, 244, 240;
--border: rgba(var(--ink-base-rgb), 0.10);
/* ── Opacités — échelle fixe ──────────────────────────────
Au lieu de choisir une valeur de transparence au hasard
à chaque composant, on pioche dans cette échelle documentée.
Les paliers correspondent aux besoins réels du projet ;
ne pas en ajouter d'autres sans vérifier qu'aucun n'existe déjà. */
--alpha-06: 0.06; /* trace décorative la plus discrète */
--alpha-08: 0.08; /* second niveau décoratif / ombres légères */
--alpha-10: 0.10; /* bordures / séparateurs discrets sur fond sombre */
--alpha-18: 0.18; /* bordures un peu plus marquées sur fond clair */
--alpha-20: 0.20; /* bordures par défaut d'éléments interactifs sur fond sombre */
--alpha-35: 0.35; /* texte peu appuyé sur fond sombre (copyright, etc.) */
--alpha-50: 0.50; /* texte un peu plus visible que --alpha-35 (nav du footer) */
--alpha-60: 0.60; /* texte moyennement appuyé sur fond sombre
(remplace les anciennes valeurs 0.55/0.60/0.65,
trop proches pour justifier 3 tokens séparés) */
--alpha-92: 0.92; /* quasi-opaque sur fond sombre
(remplace les anciennes 0.90/0.92/0.94) */
--border-on-ink: rgba(var(--ivory-rgb), var(--alpha-10));
--border-on-ink-soft: rgba(var(--ivory-rgb), var(--alpha-20));
--text-on-ink-mid: rgba(var(--ivory-rgb), var(--alpha-35));
--text-on-ink-strong: rgba(var(--ivory-rgb), var(--alpha-60));
--bg-on-ink-heavy: rgba(var(--ivory-rgb), var(--alpha-92));
--border-on-light: rgba(var(--ink-base-rgb), var(--alpha-18));
--shadow-soft: rgba(var(--ink-deep-rgb), var(--alpha-08));
/* ── Espacements — échelle en base 4px ────────────────────
Convention : le nombre dans le nom = nombre d'unités de 4px
(--space-4 = 4 × 4px = 16px). Les demi-crans (1.5, 2.5...)
comblent les écarts quand le design en a réellement besoin.
Toujours préférer une valeur de cette échelle à une valeur
"libre" écrite en dur. */
--space-1: 0.25rem; /* 4px */
--space-1-5: 0.375rem; /* 6px */
--space-2: 0.5rem; /* 8px */
--space-2-5: 0.625rem; /* 10px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-5-5: 1.375rem; /* 22px */
--space-6: 1.5rem; /* 24px */
--space-7: 1.75rem; /* 28px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-14: 3.5rem; /* 56px */
--space-16: 4rem; /* 64px */
--space-18: 4.5rem; /* 72px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-28: 7rem; /* 112px */
/* ── Typographie UI — échelle du texte courant ─────────────
Concerne les libellés, boutons, nav, paragraphes : tout ce
qui n'est PAS un titre en clamp() fluide. Les titres/heros
restent en clamp() sur mesure section par section (voir note
plus bas) car ils sont volontairement calibrés un par un. */
--text-xs: 0.6875rem; /* 11px — badges, labels, sur-titres */
--text-sm: 0.75rem; /* 12px — boutons, petites étiquettes */
--text-base: 0.8125rem; /* 13px — texte d'interface standard */
--text-md: 0.875rem; /* 14px — corps de texte secondaire */
--text-lg: 0.9375rem; /* 15px — corps de texte principal */
--text-xl: 1.0625rem; /* 17px — accroche, texte mis en valeur */
/* Les tailles de titres (hero, sections) utilisent des
clamp() propres à chaque contexte (longueur du texte,
densité de la mise en page). Les figer dans une échelle
commune casserait le calibrage fluide fait section par
section — c'est un choix assumé, pas un oubli. */
/* ── Rayons ───────────────────────────────────────────── */
--radius-sm: 2px;
--radius-md: 3px;
--radius-full: 50%;
--radius-pill: 9999px;
/* ── Largeur de contenu ──────────────────────────────────── */
--container-max: 1440px;
/* ── Z-index — échelle nommée ─────────────────────────────
Toujours passer par un de ces niveaux plutôt qu'un nombre
choisi au hasard, pour éviter les conflits de superposition. */
--z-base: 0;
--z-raised: 1;
--z-sticky: 2;
--z-overlay: 200;
--z-modal: 300;
--z-header: 400; /* toujours au-dessus du panneau plein écran du
menu mobile, pour que le bouton burger reste
cliquable (comme bouton de fermeture) une
fois le menu ouvert */
}