/* ────────────────────────────────────────────────────────────────────────── tokens.css — Habitat Urbain : source unique des variables de design. Direction artistique : agence immobilière bordelaise haut de gamme, sobre, patrimoniale. Bleu nuit profond en couleur principale, pierre blonde bordelaise (beige chaud) pour les fonds alternés, bronze/laiton en accent parcimonieux (CTA, filets, chiffres clés), gris chauds plutôt que neutres. Organisation : 1. Primitives — la palette brute, jamais utilisée directement ailleurs. 2. Sémantique — ce à quoi sert chaque couleur (c'est ce qu'on consomme). 3. Espacements, rayons, ombres, durées, typographie. 4. Surcharge Bootstrap 5.3 (--bs-*) à partir des tokens ci-dessus. Chargé AVANT site.css et après bootstrap.min.css (voir templates/layout.php). ────────────────────────────────────────────────────────────────────────── */ :root{ /* ═══ 1. Primitives ═════════════════════════════════════════════════════ */ /* Bleu nuit — couleur principale, patrimoniale */ --hu-navy-900:#0D1524; --hu-navy-800:#16233D; --hu-navy-700:#1F3354; --hu-navy-600:#2B456E; --hu-navy-500:#3A5888; --hu-navy-400:#5B7AAB; /* Pierre blonde bordelaise — beige chaud, fonds alternés */ --hu-stone-50:#FBF8F2; --hu-stone-100:#F5EFE3; --hu-stone-200:#EDE4D4; --hu-stone-300:#DDD0B9; --hu-stone-400:#C9B99C; /* Bronze / laiton — accent, à doses homéopathiques */ --hu-bronze-700:#6F571F; --hu-bronze-600:#8C6E2F; --hu-bronze-500:#A8863F; --hu-bronze-400:#C4A263; --hu-bronze-300:#DCC08A; /* Gris chauds (et non neutres) */ --hu-warm-900:#231E18; --hu-warm-800:#2E2820; --hu-warm-700:#3B342B; --hu-warm-600:#5C5348; --hu-warm-500:#6E6558; --hu-warm-400:#8F8677; --hu-warm-300:#BDB3A4; --hu-white:#FFFFFF; /* Canaux RVB — pour composer des alphas en rgb(var(--x) / .12) */ --hu-rgb-navy:22 35 61; --hu-rgb-stone:245 239 227; --hu-rgb-bronze:140 110 47; --hu-rgb-warm:35 30 24; --hu-rgb-white:255 255 255; /* ═══ 2. Tokens sémantiques ═════════════════════════════════════════════ */ /* Fonds */ --hu-bg:var(--hu-stone-50); /* fond de page */ --hu-bg-alt:var(--hu-stone-100); /* bandes alternées, pierre blonde */ --hu-surface:var(--hu-white); /* cartes */ --hu-surface-2:var(--hu-stone-200); /* surfaces enfoncées, encarts */ /* Texte */ --hu-ink:var(--hu-warm-900); /* texte courant */ --hu-ink-soft:var(--hu-warm-700); --hu-muted:var(--hu-warm-500); /* texte secondaire */ --hu-faint:var(--hu-warm-400); /* décoratif seulement — sous AA pour du texte */ /* Filets */ --hu-line:var(--hu-stone-300); --hu-line-soft:var(--hu-stone-200); --hu-line-strong:var(--hu-stone-400); /* Principale — titres, liens, prix, éléments structurants */ --hu-primary:var(--hu-navy-800); --hu-primary-hover:var(--hu-navy-600); --hu-primary-soft:var(--hu-navy-400); --hu-on-primary:var(--hu-stone-50); /* Accent bronze — CTA, filets, chiffres clés. Avec parcimonie. */ --hu-accent:var(--hu-bronze-600); --hu-accent-hover:var(--hu-bronze-700); --hu-accent-soft:var(--hu-bronze-400); --hu-on-accent:var(--hu-stone-50); --hu-accent-ink:var(--hu-stone-50); /* alias historique de --hu-on-accent */ /* Inversé — bande sombre « Nos prestations », légendes sur photo */ --hu-inverse-bg:var(--hu-navy-900); --hu-on-inverse:var(--hu-stone-50); --hu-on-inverse-muted:rgb(var(--hu-rgb-stone) / .70); --hu-line-inverse:rgb(var(--hu-rgb-stone) / .14); --hu-scrim:linear-gradient(0deg, rgb(var(--hu-rgb-navy) / .62), transparent); /* Statuts d'annonce — un ton pastel distinct par pastille */ --hu-status-louer-bg:#E3EFE1; --hu-status-louer-ink:#355C3B; --hu-status-vente-bg:#DEE8F6; --hu-status-vente-ink:#2A4066; --hu-status-offre-bg:var(--hu-accent-soft); --hu-status-offre-ink:var(--hu-warm-900); --hu-status-loue-bg:#F1E4C3; --hu-status-loue-ink:#73581E; --hu-status-vendu-bg:#F5DEDC; --hu-status-vendu-ink:#833C34; /* Échelle DPE/GES (A→G) — dégradé vert → rouge dans la même tonalité que les pastilles de statut (A proche de --hu-status-louer-ink, G identique à --hu-status-vendu-ink). */ --hu-dpe-a:hsl(140 35% 32%); --hu-dpe-b:hsl(100 35% 34%); --hu-dpe-c:hsl(75 38% 38%); --hu-dpe-d:hsl(45 50% 42%); --hu-dpe-e:hsl(32 55% 42%); --hu-dpe-f:hsl(18 55% 42%); --hu-dpe-g:hsl(6 45% 36%); /* Anneau de focus */ --hu-focus-ring:0 0 0 .2rem rgb(var(--hu-rgb-navy) / .18); /* Back-office */ --hu-admin-bg:var(--hu-stone-100); --hu-admin-nav-bg:var(--hu-navy-900); --hu-admin-nav-ink:rgb(var(--hu-rgb-stone) / .78); --hu-admin-nav-ink-active:var(--hu-stone-50); /* ═══ 3. Échelles ═══════════════════════════════════════════════════════ */ /* Espacements — base 4, progression 4/8/12/16/24/32/48/64/96 */ --hu-space-1:4px; --hu-space-2:8px; --hu-space-3:12px; --hu-space-4:16px; --hu-space-5:24px; --hu-space-6:32px; --hu-space-7:48px; --hu-space-8:64px; --hu-space-9:96px; /* Rayons — architecture, pas application mobile : 6px maximum */ --hu-radius-xs:2px; --hu-radius-sm:4px; --hu-radius-md:6px; --hu-radius-round:50%; /* pastilles numérotées seulement */ /* Ombres — très douces, multicouches, teintées gris chaud */ --hu-shadow-xs: 0 1px 1px rgb(var(--hu-rgb-warm) / .04), 0 1px 2px rgb(var(--hu-rgb-warm) / .04); --hu-shadow-sm: 0 1px 2px rgb(var(--hu-rgb-warm) / .04), 0 2px 6px -2px rgb(var(--hu-rgb-warm) / .06); --hu-shadow-md: 0 1px 2px rgb(var(--hu-rgb-warm) / .04), 0 6px 14px -6px rgb(var(--hu-rgb-warm) / .10), 0 12px 28px -14px rgb(var(--hu-rgb-warm) / .10); --hu-shadow-lg: 0 1px 2px rgb(var(--hu-rgb-warm) / .04), 0 10px 22px -10px rgb(var(--hu-rgb-warm) / .12), 0 26px 50px -24px rgb(var(--hu-rgb-warm) / .16); /* Boutons — hauteur confortable, padding généreux, graisse moyenne, pas de capitales. Voir .btn-hug-primary / .btn-hug-outline / .btn-hug-link. */ --hu-btn-height:50px; --hu-btn-py:.85rem; --hu-btn-px:1.75rem; --hu-btn-size:.97rem; --hu-btn-weight:500; --hu-btn-tracking:.012em; --hu-btn-dur:200ms; --hu-btn-height-sm:40px; --hu-btn-py-sm:.55rem; --hu-btn-px-sm:1.15rem; /* Durées et courbe */ --hu-dur-fast:120ms; --hu-dur:180ms; --hu-dur-slow:320ms; --hu-ease:cubic-bezier(.2,.6,.3,1); --hu-transition:var(--hu-dur) var(--hu-ease); /* Typographie — Cormorant Garamond (grands titres, prix, chiffres clés) + Jost (texte et petits titres). Le garamond a un petit œil et un dessin fin : il tient les grands corps, pas le texte courant ni les sous-titres, d'où la répartition h1-h2 / h3-h4 dans site.css et les tailles ci-dessous, remontées par rapport à la précédente serif. */ --hu-font-serif:'Cormorant Garamond', Garamond, Georgia, 'Times New Roman', serif; --hu-font-sans:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; --hu-font-mono:'IBM Plex Mono', ui-monospace, Consolas, monospace; --hu-text-2xs:.66rem; --hu-text-xs:.72rem; --hu-text-sm:.8rem; --hu-text-base:1rem; --hu-text-md:1.1rem; --hu-text-lg:1.25rem; --hu-text-xl:1.8rem; --hu-text-2xl:2.3rem; --hu-text-3xl:clamp(2.4rem, 4.1vw, 3.5rem); --hu-leading-tight:1.25; --hu-leading-snug:1.45; --hu-leading:1.6; --hu-tracking-wide:.05em; --hu-tracking-wider:.11em; /* Carte « verre dépoli » — inspirée de viryacopro.com, posée telle quelle sur les deux fonds existants (navy et crème) sans en changer la teinte. Rayon volontairement au-delà des 6px du reste du site : ce composant est un bloc verre isolé, pas un élément d'architecture générale. */ --hu-glass-radius:18px; --hu-glass-pad:48px; --hu-glass-pad-sm:24px; --hu-glass-gap:40px; --hu-glass-blur:10px; --hu-glass-dark-bg:rgba(255,255,255,.04); --hu-glass-dark-border:rgba(255,255,255,.10); --hu-glass-dark-shadow:0 24px 60px -24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); --hu-glass-light-bg:rgba(255,255,255,.65); --hu-glass-light-border:rgba(255,255,255,.9); --hu-glass-light-shadow:0 20px 50px -20px rgba(14,20,36,.18); --hu-glass-divider:rgba(14,20,36,.08); /* ═══ 4. Surcharge Bootstrap 5.3 ════════════════════════════════════════ */ --bs-body-bg:var(--hu-bg); --bs-body-color:var(--hu-ink); --bs-body-font-family:var(--hu-font-sans); --bs-body-line-height:var(--hu-leading); --bs-emphasis-color:var(--hu-ink); --bs-secondary-color:var(--hu-muted); --bs-secondary-bg:var(--hu-surface-2); --bs-tertiary-bg:var(--hu-bg-alt); --bs-primary:var(--hu-primary); --bs-primary-rgb:var(--hu-rgb-navy); --bs-primary-text-emphasis:var(--hu-navy-900); --bs-primary-bg-subtle:var(--hu-stone-100); --bs-primary-border-subtle:var(--hu-line); --bs-link-color:var(--hu-primary); --bs-link-color-rgb:var(--hu-rgb-navy); --bs-link-hover-color:var(--hu-primary-hover); --bs-border-color:var(--hu-line); --bs-border-color-translucent:var(--hu-line-soft); --bs-border-radius:var(--hu-radius-sm); --bs-border-radius-sm:var(--hu-radius-xs); --bs-border-radius-lg:var(--hu-radius-md); --bs-border-radius-xl:var(--hu-radius-md); --bs-border-radius-2xl:var(--hu-radius-md); --bs-border-radius-pill:var(--hu-radius-md); --bs-box-shadow:var(--hu-shadow-md); --bs-box-shadow-sm:var(--hu-shadow-sm); --bs-box-shadow-lg:var(--hu-shadow-lg); --bs-font-monospace:var(--hu-font-mono); --bs-heading-color:var(--hu-primary); --bs-code-color:var(--hu-accent-hover); --bs-highlight-bg:var(--hu-stone-200); --bs-focus-ring-color:rgb(var(--hu-rgb-navy) / .18); --bs-focus-ring-width:.2rem; } /* Bootstrap recalcule ses composants sur ces variables-là */ .btn{ --bs-btn-border-radius:var(--hu-radius-sm); --bs-btn-focus-box-shadow:var(--hu-focus-ring); transition:background-color var(--hu-transition), border-color var(--hu-transition), color var(--hu-transition); } .btn-primary{ --bs-btn-bg:var(--hu-primary); --bs-btn-border-color:var(--hu-primary); --bs-btn-color:var(--hu-on-primary); --bs-btn-hover-bg:var(--hu-primary-hover); --bs-btn-hover-border-color:var(--hu-primary-hover); --bs-btn-hover-color:var(--hu-on-primary); --bs-btn-active-bg:var(--hu-navy-900); --bs-btn-active-border-color:var(--hu-navy-900); --bs-btn-disabled-bg:var(--hu-primary); --bs-btn-disabled-border-color:var(--hu-primary); --bs-btn-disabled-color:var(--hu-on-primary); --bs-btn-disabled-opacity:.5; } .card{ --bs-card-bg:var(--hu-surface); --bs-card-border-color:var(--hu-line); --bs-card-border-radius:var(--hu-radius-md); --bs-card-box-shadow:var(--hu-shadow-sm); } .pagination{ --bs-pagination-color:var(--hu-primary); --bs-pagination-bg:var(--hu-surface); --bs-pagination-border-color:var(--hu-line); --bs-pagination-border-radius:var(--hu-radius-sm); --bs-pagination-hover-color:var(--hu-primary-hover); --bs-pagination-hover-bg:var(--hu-surface-2); --bs-pagination-hover-border-color:var(--hu-line); --bs-pagination-active-bg:var(--hu-primary); --bs-pagination-active-border-color:var(--hu-primary); --bs-pagination-active-color:var(--hu-on-primary); --bs-pagination-disabled-color:var(--hu-muted); --bs-pagination-disabled-bg:var(--hu-surface); --bs-pagination-disabled-border-color:var(--hu-line); } .table{ --bs-table-color:var(--hu-ink); --bs-table-border-color:var(--hu-line); --bs-table-striped-bg:var(--hu-stone-50); } .form-control, .form-select{ --bs-border-radius:var(--hu-radius-sm); } .alert{ --bs-alert-border-radius:var(--hu-radius-md); } .badge{ --bs-badge-border-radius:var(--hu-radius-xs); }