/* ========================================================================== AlyCare — Design tokens (CSS custom properties) ———————————————————————————————————————————————————————————————————— FUSION DES DEUX THÈMES (2026-08-24) Jusqu'ici le site existait en deux copies complètes : `clair/` et la racine en charbon. Un seul code désormais, et un attribut sur décide de tout : → thème clair (DÉFAUT) → thème charbon Les DEUX blocs ci-dessous déclarent exactement les mêmes noms de variables, avec des valeurs différentes. Tout le reste du CSS ne parle qu'en `var(--…)` : à quelques exceptions près (modes de fusion, filtres, opacités — regroupées en fin de chaque feuille sous un titre "SURCHARGES DU THÈME SOMBRE"), changer de thème ne fait que changer ces valeurs. RÈGLE DE TRAVAIL : tout nouveau composant se sert des tokens, jamais d'une couleur en dur. Si une couleur ne peut pas être exprimée avec ces tokens, c'est qu'il manque un token — l'ajouter ICI, dans les deux blocs, plutôt que d'écrire une surcharge de thème de plus. Palette officielle de la cliente (2026-08-21), commune aux deux thèmes : rose vif #e6325e · vert profond #2e5b3f · rose pâle #f4c7cb Typos : DIN Condensed / Century Gothic Pro / Handsome Pro (propriétaires, remplacées par leurs plus proches équivalents du catalogue Google Fonts : Big Shoulders Display / Jost / Caveat). Ces trois familles sont AUTO-HÉBERGÉES depuis le 2026-09-06 — aucun appel aux serveurs de Google, voir les @font-face en tête de css/main.css. ========================================================================== */ /* ========================================================================== THÈME CLAIR — le défaut Sert de base : un token oublié dans le bloc sombre retombera ici, ce qui donnera au pire une couleur claire sur fond sombre (visible tout de suite), jamais une page cassée. ========================================================================== */ :root { /* ---- Palette officielle ---- */ --color-primary: #e6325e; /* rose vif — CTA, liens, accents forts */ --color-secondary: #f4c7cb; /* rose pâle — aplats doux, cartes, badges */ /* Déclinaison du rose LISIBLE EN PETIT sur le fond du thème. En clair, c'est un rose plus soutenu ; en sombre, ce sera au contraire un rose plus CLAIR. Même rôle, valeurs opposées — d'où le nom, un peu trompeur, conservé pour ne rien casser dans les feuilles existantes. */ --color-primary-dark: #c01f47; /* Vert de la charte. RÉSERVÉ aux titres et à quelques touches ponctuelles (étoiles d'avis, filets du bandeau chiffres, spot sur la photo d'Alyssa) — décision du 2026-08-21 : jamais en aplat, jamais ailleurs. */ --color-accent: #2e5b3f; --color-accent-light: #dce8de; /* vert très pâle — usage exceptionnel */ --color-heading: var(--color-accent); /* h1-h4, .manifesto__quote… */ --color-eyebrow: var(--color-primary); /* les sur-titres manuscrits */ /* ---- Fonds ---- */ --color-bg: #fdf7f5; /* fond général — crème à peine rosé */ --color-bg-alt: #faeaea; /* section alternée — rose très pâle */ --color-surface: #ffffff; /* cartes / blocs surélevés */ /* ---- Encres ---- */ --color-text: #2b2020; /* corps de texte — brun-noir chaud */ --color-text-light: #6e5b5c; /* texte secondaire — gris-brun chaud */ --color-text-on-primary: #ffffff; /* sur aplat rose vif */ --color-text-on-secondary: #2b2020; /* sur aplat rose pâle (boutons) */ --color-on-dark: #fdf7f5; /* PAR-DESSUS UNE PHOTO SOMBRE (overlay du salon…) : toujours clair, quel que soit le thème */ /* Le miroir exact du précédent : PAR-DESSUS UN FOND CLAIR, quel que soit le thème. Sert à la photo du hero, claire et sans voile depuis le 2026-08-25 (Rom : "simplement l'image de base"), et à tout ce qui se pose dessus — en-tête transparent, interrupteur, badge Instagram. Encre FIXE dans les deux thèmes : c'est la photo qui commande, pas le thème. Si le cliché définitif de la cliente est sombre, il suffira de repasser ce token sur var(--color-on-dark) et de remettre un voile (voir home.css §4). */ --color-on-light: #2b2020; --color-border: #f0d9d6; --color-success: #2e5b3f; --color-error: #c01f47; /* ---- Voiles posés sur les photos (hero, salon) ---- Codés en rgba() et pas en tokens de couleur : ils doivent assombrir SANS teinter (une teinte ici recolore toute la photo — c'est ce qui avait fait rejeter la 1re proposition sombre). */ /* --scrim-hero (le voile qui assombrissait la photo du hero) A ÉTÉ RETIRÉ le 2026-08-25 : Rom veut la photo nue, "pas de masque de couleur rose ou noir". L'encre du hero est passée en sombre à la place — voir --color-on-light ci-dessus et home.css §4. */ --scrim-salon-top: rgba(28, 18, 16, 0.12); --scrim-salon-bottom: rgba(28, 18, 16, 0.58); /* ---- Préloader ---- IL SUIT LE THÈME DEPUIS LE 2026-08-25. L'intro était charbon dans les deux thèmes ; elle s'ouvre désormais sur le crème du site, le logo manuscrit s'y écrivant à l'encre brun-noir avant de virer au rose de marque une fois la dernière lettre posée. Le rideau se lève donc sur exactement la couleur de la page : aucun raccord visible. Le thème sombre, lui, garde l'intro charbon d'origine. Les couleurs du logo sont figées dans son SVG (une n'hérite pas de currentColor), il existe donc en DEUX fichiers jumeaux : clair : assets/images/logo-anime-clair.svg sombre : assets/images/logo-anime.svg C'est index.html qui choisit lequel charger (voir son préloader). */ --preloader-bg: #fdf7f5; --preloader-ink: #2b2020; /* Le rail de la barre de progression et sa jauge étaient eux aussi figés (blanc translucide, rose pâle) : invisibles sur crème. */ --preloader-rail: rgba(43, 32, 32, 0.16); --preloader-gauge: var(--color-primary); /* ---- Carte du hero (2026-08-25) ---- Le bloc de texte du hero est posé sur une carte en VERRE DÉPOLI : la photo n'a plus de voile (voir plus haut), il fallait donc quelque chose sous le texte. ELLE NE SUIT PAS LE THÈME — décision de Rom le 2026-08-25, après avoir vu les deux : "je souhaite finalement avoir la même chose pour la version claire et sombre de la card, en te basant sur la version claire". Elle avait d'abord été montée en carte thémée (crème / charbon). C'est cohérent avec le reste du hero : la PHOTO est claire dans les deux thèmes, donc tout ce qui se pose dessus l'est aussi (voir --color-on-light). D'où des valeurs ÉCRITES EN DUR ici et pas de var(--color-surface)/(--color-border) : celles-ci basculeraient en charbon dès que le thème sombre est actif. Ces trois tokens n'existent donc que dans :root, ils n'ont PAS de contrepartie dans le bloc sombre — c'est voulu, ne pas "corriger" cet oubli apparent. L'encre qui va dessus, c'est --color-on-light (voir home.css §4). Couverture descendue de 74 % à 54 % le même jour, Rom voulant "visualiser plus le background" — le flou de .hero-x__card a été monté d'autant pour compenser. Plancher à ne pas franchir sans revérifier le contraste du texte sur les zones claires de la photo. */ --hero-card-bg: color-mix(in srgb, #ffffff 54%, transparent); --hero-card-border: color-mix(in srgb, #f0d9d6 80%, transparent); --hero-card-shadow: 0 8px 24px rgba(33, 48, 31, 0.1); /* ---- Badge Instagram flottant (2026-08-26) ---- L'encre de l'icône Instagram posée dans la pastille rose vif du badge (.hero-x__badge-arrow, home.css §4). C'est le SEUL endroit du site où l'encre sur aplat rose vif change avec le thème — les CTA, eux, restent blancs partout via --color-text-on-primary. D'où un token dédié plutôt qu'une surcharge de thème : demande de Rom le 2026-08-26, « sur la version claire, l'icône insta doit être noire ». En sombre elle reste blanche (le badge y flotte sur des sections toutes sombres et porte un halo rose, voir home.css). */ --badge-icon-ink: var(--color-on-light); /* ---- Section "Elles en parlent" ---- La seule section qui ne suit pas le fond de section habituel : Rom l'a voulue BLANCHE en thème clair (2026-08-24), comme une page de papier posée entre deux sections crème. Les cartes, blanches elles aussi, sont décalées d'un souffle pour ne pas s'y dissoudre. En thème sombre la même bande blanche a été essayée puis écartée le même jour : la section y reprend simplement le fond de section normal. */ --avis-bg: #ffffff; --avis-card-bg: #fdf9f8; /* ---- Typographies ---- */ --font-heading: "Big Shoulders Display", "DIN Condensed", "Arial Narrow", sans-serif; --font-body: "Jost", "Century Gothic", "Futura", sans-serif; --font-script: "Caveat", "Segoe Script", cursive; /* clin d'œil à "Handsome Pro" */ --font-size-base: 1rem; --font-size-sm: 0.875rem; --font-size-lg: 1.125rem; --font-size-xl: 1.5rem; --font-size-2xl: 2rem; --font-size-3xl: 2.75rem; --line-height-base: 1.6; --line-height-heading: 1.15; /* ---- Espacements ---- */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; /* ---- Aperçu de chargement des médias (2026-08-26) ---- Fond posé DERRIÈRE la vidéo de « L'institut », la carte Google et le module Planity, le temps qu'ils arrivent : deux halos flous dans les tons de la charte, qui donnent l'impression d'une image pas encore nette plutôt que d'un trou blanc. Même famille visuelle que les aperçus « blur-up » des photos (voir components.css) — sauf qu'ici on ne peut pas montrer un aperçu du vrai contenu : la vidéo et les deux iframes viennent de serveurs tiers. Écrit en color-mix() sur les jetons du thème : la valeur est résolue au moment de l'usage, donc ce fond suit automatiquement le thème sombre sans qu'il faille le redéclarer plus bas. La dernière couche est un dégradé d'une seule couleur, et non la couleur elle-même : `background-image` n'accepte QUE des images, une valeur de couleur y rend toute la déclaration invalide — donc aucun fond du tout, silencieusement. (Vécu le 2026-08-26.) Le passer en dégradé plat garde le jeton utilisable d'une seule pièce, sans devoir poser un `background-color` à côté à chaque usage. */ --media-skeleton: radial-gradient(58% 68% at 28% 24%, color-mix(in srgb, var(--color-secondary) 62%, transparent) 0%, transparent 72%), radial-gradient(52% 62% at 78% 74%, color-mix(in srgb, var(--color-primary) 18%, transparent) 0%, transparent 74%), linear-gradient(var(--color-bg-alt), var(--color-bg-alt)); /* ---- Divers ---- */ --radius-sm: 6px; --radius-md: 14px; --radius-lg: 28px; --shadow-soft: 0 8px 24px rgba(33, 48, 31, 0.1); --max-width: 1180px; --transition-base: 0.25s ease; /* Ascenseurs, champs natifs et menus déroulants suivent le thème. */ color-scheme: light; } /* ========================================================================== THÈME SOMBRE — "charbon neutre chaud" ———————————————————————————————————————————————————————————————————— Le principe, issu des allers-retours avec Rom le 2026-08-21 : les fonds ne sont PAS colorés. Charbon neutre, à peine réchauffé d'un souffle de brun — assez pour ne pas tomber dans le gris bleuté informatique, trop peu pour qu'on puisse nommer une couleur. La couleur ne vient plus du fond mais uniquement de ce qu'on y pose : titres en rose pâle, CTA en rose vif, vert réduit à quelques touches. Une proposition antérieure posait le vert de la charte sur tous les fonds : rejetée, "beaucoup trop marquée". Ne pas y revenir. ========================================================================== */ :root[data-theme="dark"] { /* Les roses de la charte ne bougent pas… */ --color-primary: #e6325e; --color-secondary: #f4c7cb; /* …mais la déclinaison "lisible en petit" s'inverse : sur fond sombre un rose assombri devient illisible, il faut au contraire l'éclaircir. */ --color-primary-dark: #ff6f92; /* Vert de la charte remonté en luminosité pour rester lisible sur charbon, mais volontairement DÉSATURÉ : sur un fond neutre, un vert franc attire l'œil bien plus que sur un fond déjà vert. */ --color-accent: #79a98a; --color-accent-light: #dce8de; /* Les titres passent du vert au ROSE PÂLE : sur charbon neutre il ressort nettement mieux que le vert, même éclairci. */ --color-heading: var(--color-secondary); --color-eyebrow: var(--color-primary-dark); --color-bg: #121011; --color-bg-alt: #171415; --color-surface: #1e1a1b; --color-text: #ece5e2; /* crème chaud */ --color-text-light: #a39a97; /* gris chaud */ --color-text-on-primary: #ffffff; --color-text-on-secondary: #1c1718; --color-on-dark: #f6efe9; --color-border: #2f2929; --color-success: #79a98a; --color-error: #ff6f92; /* Voiles plus opaques et plus neutres : la photo doit se fondre dans le charbon sans ligne de raccord. (Le hero n'en a plus, voir :root.) */ --scrim-salon-top: rgba(12, 10, 10, 0.18); --scrim-salon-bottom: rgba(12, 10, 10, 0.66); --avis-bg: var(--color-bg-alt); --avis-card-bg: var(--color-surface); /* En sombre, une ombre "douce et brune" ne se voit plus : noir franc, plus profond, doublé d'un très léger liseré clair — c'est LUI, et pas l'ombre, qui décolle les cartes du fond. */ --shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.045); /* ---- Préloader ---- L'intro d'origine : charbon, encre crème, baseline rose pâle. Voir le commentaire dans :root pour la version claire. */ --preloader-bg: #121011; --preloader-ink: #f6efe9; --preloader-rail: rgba(255, 255, 255, 0.18); --preloader-gauge: var(--color-secondary); /* Voir la note du bloc clair : blanche en sombre, noire en clair. */ --badge-icon-ink: var(--color-text-on-primary); color-scheme: dark; } /* ========================================================================== BASCULE DOUCE Quand on change de thème, js/theme.js pose .is-theming sur le temps de la transition : sans ça, tout le site changerait de couleur d'un coup sec. On ne transitionne que les propriétés de couleur (jamais `all` : les transforms des animations au scroll se mettraient à traîner) et uniquement pendant ces 450 ms. Le navigateur qui anime nativement la bascule (View Transitions, voir js/theme.js) n'a pas besoin de cette classe — elle ne lui est pas posée. ========================================================================== */ html.is-theming, html.is-theming *, html.is-theming *::before, html.is-theming *::after { transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease, fill 0.45s ease, box-shadow 0.45s ease !important; } @media (prefers-reduced-motion: reduce) { html.is-theming, html.is-theming *, html.is-theming *::before, html.is-theming *::after { transition: none !important; } } /* ========================================================================== ÉCHELLE MOBILE — un seul endroit pour l'air et la taille du texte ———————————————————————————————————————————————————————————————————— (2026-08-26, passe « version mobile ») Le site était dessiné pour de grands écrans : sur un téléphone, --space-2xl (96 px) en haut ET en bas de chaque .section faisait presque un quart d'écran de vide avant le premier mot, et --font-size-3xl (44 px) forçait les titres à casser en trois lignes. On ne touche à AUCUNE règle de composant : on redescend les jetons ici, sous 760 px, et toute la page suit — sections, cartes, grilles, footer. C'est le premier réglage à revoir si le mobile paraît trop aéré ou trop serré ; il n'y a pas d'autre valeur d'espacement à chasser ailleurs. 760 px : le seuil déjà utilisé partout dans le projet (repli des cartes « Les soins », désactivation des pins en JS — voir js/home.js, qui teste min-width: 761px). Ne pas en introduire un autre. ========================================================================== */ @media (max-width: 760px) { :root { /* Le texte courant NE BOUGE PAS (--font-size-base) : seuls les grands titres, qui sont les seuls à déborder, sont redescendus. */ --font-size-xl: 1.3rem; --font-size-2xl: 1.65rem; --font-size-3xl: 2.15rem; /* --space-xs/sm/md inchangés : ce sont les écarts INTERNES (padding de carte, écart label/champ), déjà justes sur petit écran. Seuls les grands écarts de mise en page rétrécissent. */ --space-lg: 2rem; --space-xl: 2.75rem; --space-2xl: 3.5rem; } } /* ========================================================================== ÉCHELLE LAPTOP (2026-08-27) ———————————————————————————————————————————————————————————————————— Pendant du bloc « ÉCHELLE MOBILE » ci-dessus, mais sur l'AUTRE AXE : ce qui distingue un laptop d'un 27 pouces n'est pas sa largeur, c'est sa HAUTEUR. Un 1512×982 va très bien ; un 1600×900, plus large, commence déjà à rogner. Un palier en largeur seule raterait les deux — d'où des valeurs pilotées par `svh`. TROIS GARDE-FOUS, à ne pas retirer : 1. `min-width: 761px` — le seuil du projet. Sous 761 px, ces jetons gardent leur valeur de base, qui renvoie aux jetons mobiles : la version téléphone n'est donc touchée par RIEN de ce qui suit. 2. Le plafond de chaque clamp est la valeur d'origine, atteinte avant 890 px de hauteur de viewport — soit la fenêtre utile d'un simple 1920×1080. Tout écran de bureau, 27"/32" compris, reçoit donc exactement les mêmes pixels qu'avant : seule la plage laptop (606 → 794 px de hauteur utile) est réellement resserrée. Vérifié au pixel sur 3840×2160, 2560×1440, 1920×1080 et 1680×1050. 3. Les jetons sont NOUVEAUX (--space-section, --space-title-gap, --space-block-gap, --badge-size) plutôt qu'une redéfinition de --space-2xl / --space-lg : ces deux-là servent aussi à des écarts HORIZONTAUX (gap de la timeline, marges internes) qu'il ne faut surtout pas asservir à la hauteur d'écran. ========================================================================== */ :root { /* Respiration verticale d'une section (main.css § .section). */ --space-section: var(--space-2xl); /* Écart titre de section → contenu (main.css § .section-title). */ --space-title-gap: var(--space-lg); /* Écart entre un titre de section et un GROS bloc qui suit (cartes, grille) — volontairement plus généreux que --space-title-gap. */ --space-block-gap: var(--space-2xl); /* Diamètre du badge Instagram flottant (home.css § .hero-x__badge). */ --badge-size: 132px; } @media (min-width: 761px) { :root { /* Chaque plafond est atteint AVANT la hauteur utile d'un 1920×1080 (890 px) : sur tout écran de bureau la valeur d'origine s'applique encore, seule la plage laptop (606 → 794 px) est réellement resserrée. */ --space-section: clamp(3rem, 9.6svh, var(--space-2xl)); --space-title-gap: clamp(1.5rem, 3.2svh, var(--space-lg)); --space-block-gap: clamp(2rem, 7.5svh, var(--space-2xl)); --badge-size: clamp(84px, 14.8svh, 132px); } }