/* ===================================================================== RUFIX BARBER — base.css Variables de marque, reset, typographie, mise en page générale. ===================================================================== ┌───────────────────────────────────────────────────────────────┐ │ 🎨 CHARTE GRAPHIQUE — MODIFIEZ UNIQUEMENT CE BLOC :root │ │ Toutes les couleurs du site proviennent de ces variables. │ │ Changez une valeur ici → tout le site se met à jour. │ │ Aucune couleur n'est codée en dur ailleurs. │ └───────────────────────────────────────────────────────────────┘ */ :root { /* --- Couleurs de marque (à remplacer par la vraie palette) --- */ --color-bg: #14110f; /* Fond principal — anthracite / noir chaud */ --color-surface: #1d1a17; /* Cartes, encarts — un ton au-dessus du fond */ --color-surface-2: #262220; /* Surface secondaire (survol, champs) */ --color-text: #f4efe7; /* Texte principal — blanc cassé chaud */ --color-muted: #a89f92; /* Texte secondaire / discret */ --color-accent: #c9a24b; /* Accent — or / laiton */ --color-accent-hover: #dcb968; /* Accent au survol (plus clair) */ --color-line: rgba(201,162,75,0.18); /* Filets / bordures fines */ /* --- Couleurs des créneaux (calendrier) --- */ --slot-free: #6fca8a; /* 🟢 disponible — texte/bordure */ --slot-free-bg: rgba(85,180,120,0.16); /* 🟢 disponible — fond */ --slot-taken: #d97a72; /* 🔴 réservé / indisponible — bordure */ --slot-taken-bg: rgba(190,80,72,0.16); /* 🔴 réservé / indisponible — fond */ --slot-pending: #e8a94a; /* 🟠 en attente de confirmation — bordure */ --slot-pending-bg: rgba(224,160,60,0.18); /* 🟠 en attente de confirmation — fond */ --slot-locked-bg: rgba(255,255,255,0.04); /* 🔒 semaine pas encore ouverte / passé */ /* --- Ombres très douces (aspect premium) --- */ --shadow-soft: 0 10px 30px -12px rgba(0,0,0,0.55); --shadow-card: 0 18px 40px -20px rgba(0,0,0,0.65); --shadow-hover: 0 30px 60px -28px rgba(0,0,0,0.8); --shadow-glow: 0 8px 26px -8px rgba(201,162,75,0.45); /* --- Accent doré : dégradé & or profond (touches premium) --- */ --color-accent-deep: #a6802f; --grad-gold: linear-gradient(120deg, #e6c878, #c9a24b 52%, #a6802f); /* --- Rayons d'angles (coins légèrement arrondis) --- */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; /* --- Typographie --- */ --font-title: "Playfair Display", Georgia, "Times New Roman", serif; --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* --- Rythme & largeurs --- */ --container: 1180px; --gutter: clamp(1.1rem, 4vw, 2.5rem); --section-space: clamp(4rem, 9vw, 7.5rem); /* --- Transitions --- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --t-fast: 0.25s; --t-med: 0.45s; --navbar-h: 76px; } /* --------------------------- Reset léger --------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Ancres : on décale la cible pour qu'elle ne passe pas sous la navbar fixe */ scroll-padding-top: calc(var(--navbar-h) + 12px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Sélection de texte aux couleurs de la marque */ ::selection { background: var(--color-accent); color: #1a1712; } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); line-height: 1.65; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* clip (et non hidden) évite que ne devienne un conteneur de défilement — sinon overflow-y passerait à "auto" et découplerait window.scroll (navbar au défilement, ancres…). */ overflow-x: clip; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } /* Icônes SVG (sprite) : taille par défaut, alignées au texte */ .icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex-shrink: 0; } ul { list-style: none; padding: 0; } button, input, select, textarea { font: inherit; color: inherit; } /* Accessibilité : focus visible et net sur tous les éléments interactifs */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* Lien d'évitement pour lecteurs d'écran / clavier */ .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--color-accent); color: #1a1712; padding: 0.7rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; transition: top var(--t-fast) var(--ease); } .skip-link:focus { top: 12px; } /* ------------------------- Typographie ---------------------------- */ h1, h2, h3, h4 { font-family: var(--font-title); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; } h2.section-title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); } .eyebrow { display: inline-block; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1rem; } .lead { color: var(--color-muted); font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem); } /* --------------------------- Layout ------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } section { padding-block: var(--section-space); position: relative; } .section-head { max-width: 620px; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head.center { margin-inline: auto; text-align: center; } /* Grilles réutilisables */ .grid { display: grid; gap: clamp(1.2rem, 3vw, 2rem); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } /* Séparateur discret entre sections */ .divider { height: 1px; background: linear-gradient(90deg, transparent, var(--color-line), transparent); border: 0; max-width: var(--container); margin-inline: auto; } /* Fond alterné pour rythmer la page */ .section--surface { background: var(--color-surface); } /* Utilitaires */ .text-accent { color: var(--color-accent); } .text-center { text-align: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }