/* rental-pack.css — tokens de marque et composants spécifiques au pack rental */ /* ========================================================================= rental-pack.css — tokens de marque du pack `rental` Direction retenue : « Scène » (graphite + turquoise) Déclaré dans @layer overrides, à l'instar de secretary-pack.css : ces tokens gagnent sur le CSS global et sur Bootstrap. ARCHITECTURE — à ne pas contourner Ce fichier porte les valeurs PAR DÉFAUT du pack. L'identité d'un site donné se surcharge par des variables CSS injectées inline depuis une page d'options ACF. Le pack reste ainsi réutilisable pour un autre loueur : on ne modifie jamais ce fichier pour changer la couleur d'un client. Contrastes vérifiés WCAG 2.1 AA sur les deux fonds. ========================================================================= */ @layer overrides { /* --------------------------------------------------------------------- 1. Tokens de marque — mode clair (valeurs par défaut) --------------------------------------------------------------------- */ :root { --color-primary: #0C6E62; /* sarcelle profonde — boutons, liens, titres accentués */ --color-secondary: #3A4446; /* fumée — surfaces secondaires, pied de page */ --color-accent: #17C4A8; /* turquoise — réservé aux points d'emphase */ --color-ink: #101314; /* graphite — texte courant */ --color-ground: #F4F5F6; /* craie — fond de page */ --color-raised: #FFFFFF; /* surfaces en relief : cartes, fiches */ --color-hairline: #DFE2E3; /* filets et séparateurs */ --color-muted: #495254; /* texte secondaire */ /* Ombre — reste sombre dans les deux modes (--color-ink vaut #F0F3F3 en sombre) */ --shadow-color: #101314; /* Texte posé sur --color-primary */ --color-on-primary: #FFFFFF; /* Fond d'en-tête — vaut --color-raised par défaut, peut diverger plus tard */ --header-bg: var(--color-raised); /* Taille de texte courant — 17 px, plancher de lisibilité confortable */ --font-size-body: 1.0625rem; /* Anneau de focus — suit --color-primary, donc correct dans les trois modes */ --focus-ring: var(--color-primary); /* Disponibilité — voir la note en fin de fichier. Volontairement NON colorées en vert/turquoise : la teinte de marque est déjà turquoise, un calendrier qui l'emploierait pour « libre » serait illisible. L'état se lit par la forme, l'emphase par la couleur. */ --avail-free-bg: var(--color-raised); --avail-free-text: var(--color-ink); --avail-booked-bg: #E8EAEB; --avail-booked-text: #636A6C; --avail-selected-bg: var(--color-accent); --avail-selected-text:#04201C; /* Sémantique — distincte de la teinte de marque */ --color-danger: #B3261E; --color-warning: #8A5C00; --color-success: #1F6D33; /* Typographie */ --font-display: "Chivo", "Segoe UI", system-ui, sans-serif; --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; } /* --------------------------------------------------------------------- 2. Alias Bootstrap — le pack ne touche jamais aux sources Bootstrap --------------------------------------------------------------------- */ :root { --bs-primary: var(--color-primary); --bs-secondary: var(--color-secondary); --bs-body-color: var(--color-ink); --bs-body-bg: var(--color-ground); --bs-border-color: var(--color-hairline); --bs-link-color: var(--color-primary); --bs-body-font-family: var(--font-body); --bs-danger: var(--color-danger); --bs-warning: var(--color-warning); --bs-success: var(--color-success); } /* --------------------------------------------------------------------- 3. Tokens de surface — redéclarés selon le fond du conteneur --------------------------------------------------------------------- */ :root { --surface-text: var(--color-ink); --surface-heading: var(--color-ink); --surface-link: var(--color-primary); --surface-muted: var(--color-muted); --surface-border: var(--color-hairline); } /* --------------------------------------------------------------------- 4. Mode sombre explicite --------------------------------------------------------------------- */ [data-bs-theme="dark"] { --color-primary: #2BD6B4; /* éclairci : la sarcelle profonde ne passe pas sur fond graphite */ --color-secondary: #8A9596; --color-accent: #17C4A8; --color-ink: #F0F3F3; --color-ground: #0C0F10; --color-raised: #15191A; --color-hairline: #262D2E; --color-muted: #9EA9AA; --avail-free-bg: var(--color-raised); --avail-free-text: var(--color-ink); --avail-booked-bg: #1C2122; --avail-booked-text: #8A9495; --avail-selected-bg: var(--color-accent); --avail-selected-text:#04201C; --color-danger: #F87A72; --color-warning: #E0A030; --color-success: #5FCB7A; /* Sur fond sombre, l'ombre doit être pure noire et plus opaque pour rester perceptible */ --shadow-color: #000000; --color-on-primary: #101314; --header-bg: var(--color-raised); --font-size-body: 1.0625rem; } /* --------------------------------------------------------------------- 5. Mode automatique — suit la préférence système --------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { [data-bs-theme="auto"] { --color-primary: #2BD6B4; --color-secondary: #8A9596; --color-accent: #17C4A8; --color-ink: #F0F3F3; --color-ground: #0C0F10; --color-raised: #15191A; --color-hairline: #262D2E; --color-muted: #9EA9AA; --avail-free-bg: var(--color-raised); --avail-free-text: var(--color-ink); --avail-booked-bg: #1C2122; --avail-booked-text: #8A9495; --avail-selected-bg: var(--color-accent); --avail-selected-text:#04201C; --color-danger: #F87A72; --color-warning: #E0A030; --color-success: #5FCB7A; --shadow-color: #000000; --color-on-primary: #101314; --header-bg: var(--color-raised); --font-size-body: 1.0625rem; } } /* --------------------------------------------------------------------- 6. Application typographique --------------------------------------------------------------------- */ body { font-family: var(--font-body); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; } .rental-eyebrow { font-family: var(--font-body); font-weight: 600; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); } /* Les prix s'alignent en colonnes dans la grille tarifaire */ .rental-price, .rental-table td { font-variant-numeric: tabular-nums; } } /* ========================================================================= NOTE — pourquoi la disponibilité n'est pas verte Réflexe habituel : libre en vert, réservé en rouge. Impossible ici, la couleur de marque étant déjà un turquoise vert. Un calendrier vert sur un site turquoise ne se lit plus, et le rouge entre en conflit avec les messages d'erreur. Parti retenu : l'état se lit par la FORME (une date réservée est atténuée et non cliquable), et le turquoise est réservé à la sélection en cours — la seule chose qui doive ressortir dans un calendrier. C'est aussi plus accessible : l'information ne repose pas sur la seule couleur, ce qu'exige le critère WCAG 1.4.1. NOTE — polices Chivo et IBM Plex Sans sont à SERVIR DEPUIS TON SERVEUR, jamais depuis le CDN Google Fonts. Deux raisons : la CNIL considère l'appel au CDN comme un transfert de données personnelles sans base légale, et un domaine tiers de moins améliore le LCP. Récupère les .woff2 en variable font, déclare-les en @font-face avec font-display: swap, et préconnecte-les depuis ton propre domaine. ========================================================================= */