/* ========================================================================== N°1 NAILS — feuille de style unique -------------------------------------------------------------------------- La direction artistique est celle du SALON, relevée sur les photos de la pièce plutôt qu'imaginée (outils/da-salon.mjs). Le logo l'avait ouverte — il donne l'or et la famille de rose — mais c'est la pièce qui la décide, parce que c'est elle que la cliente montre et que c'est elle qu'on retrouve en poussant la porte. Quatre choses viennent de là, et elles tiennent tout le reste : 1. LE SALON N'EST PAS ROSE, il est crème. Placards, marbre, rideaux, plafond, plinthes : tout est d'un blanc chaud, et UN mur est rose. La page faisait l'inverse — du rose du haut en bas — et c'est ce qui lui donnait son air de gabarit. Ici la crème est le fond et le rose est ce qu'on REGARDE : il revient par bandes, à sa vraie valeur (#E4B7BE, mesurée) là où l'on veut arrêter l'œil. 2. TOUTE LA LUMIÈRE DE LA PIÈCE EST CHAUDE, sauf celle de la fenêtre. Chaque étagère est éclairée par-dessous. La page reprend ce geste : un filet doré, et la lumière ambrée qui en retombe — voir « .retro ». Ce n'est pas une ombre portée : la règle « aucune ombre » tient toujours. 3. LE SALON N'A AUCUNE SURFACE SOMBRE. Aucune. La page n'en a donc plus non plus : ni bloc noir au milieu du parcours, ni pied de page en quasi-noir, ni voile sombre sur la photo d'ouverture. Ce qui donne le relief n'est plus la valeur mais le ROSE — le mur, servi à sa pleine valeur là où l'on veut arrêter l'œil. 4. LE CŒUR EST LE MOTIF DE LA MARQUE : il est peint sous le lettrage mural, brodé sur la serviette, gravé sur le repose-poignet. LA RÈGLE QUI COMMANDE TOUT LE RESTE : l'or ne peut pas porter de texte sur fond clair. Mesuré contre le rose de la page, le champagne donne 1,3 : 1 et le doré médian 2,7 : 1 — très loin des 4,5 exigés. C'est ce qui avait fait échouer la première version dorée : pour rendre l'or lisible on l'avait assombri en bronze, et il n'était plus doré. Une version précédente s'en tirait en réservant un bloc sombre à l'or, le seul fond où il devenait lisible. Ce bloc a disparu avec tout le reste du noir, et la règle se simplifie donc au lieu de se compliquer : · L'OR NE S'ÉCRIT NULLE PART. Il ne sert qu'aux filets, aux encadrements, aux profils d'étagères et aux ornements — des objets sans texte. C'est exactement son emploi dans le salon, où il n'est jamais une lettre mais toujours un métal ; · le texte d'accent est un bois de rose profond (#7E4A52, 6,4 : 1). Toutes les associations servies sont mesurées : outils/contrastes.py. Le mur à pleine valeur a d'ailleurs coûté un jeton de plus — le gris courant n'y tient pas (3,9 : 1), il y a donc sa version assombrie. ========================================================================== */ /* -------------------------------------------------------------------------- Caractères — servis avec le site (voir outils/polices.sh) -------------------------------------------------------------------------- */ @font-face { font-family: 'Titres'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/titres-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Titres'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/titres-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Titres'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/titres-italique-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Titres'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/titres-italique-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Texte'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/texte-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Texte'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/texte-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- Jetons Les roses ne bougent pas. Tout le reste tient en un seul accent : un lie-de-vin profond, qui remplace à lui seul l'or de la 2ᵉ version, le quasi-noir de la 3ᵉ et l'arc-en-ciel de la 4ᵉ. Toutes les associations servies sont vérifiées : outils/contrastes.py. -------------------------------------------------------------------------- */ :root { /* ====================================================================== LE RELEVÉ DU SALON (outils/da-salon.mjs) ---------------------------------------------------------------------- Les couleurs ne viennent plus du seul logo : elles sont mesurées sur les photos de la pièce. Une précaution était indispensable. Le salon est éclairé par des bandeaux LED ambrés : lire les pixels bruts ne rend que de l'orange — le mur rose y donne #BC776C et le marbre BLANC y donne #E0BB9E. Il faut une référence de blanc soumise à CETTE lumière-là, et c'est justement le marbre du plan de manucure. On l'y ramène, et la pièce sort telle qu'on la voit sur place. Ce que le relevé a appris, et qui change le site : LE SALON N'EST PAS ROSE. Il est crème — placards, marbre, rideaux, plafond, plinthes — avec UN mur rose. Le site faisait l'inverse : du rose partout, de la crème nulle part. C'est cette inversion qu'on répare, et c'est elle qui met la page en phase avec la pièce. ====================================================================== */ /* Les blancs ont été ÉCLAIRCIS et réorientés, à la demande de la cliente qui les trouvait ternes. Le relevé décide de la FAMILLE, pas forcément de la valeur : le placard mesuré (#EAE4DD) tire sur le jaune, et un blanc jauni est exactement ce qui fait daté. On garde donc la crème, mais teintée par le ROSE de la marque plutôt que par l'ambre des LED — et montée de trois points de clarté. Le fond passe de la teinte 37° à la teinte 10°, et de 95 % à 98 % de clarté : c'est ce qui le rend lumineux au lieu de beige, sans jamais devenir un blanc d'hôpital. Les aplats roses, eux, restent mesurés au pixel près. */ --marbre: #FFFDFD; /* le plan de manucure, quasi blanc */ --creme: #FEF9F8; /* le fond de page : un souffle de rose */ --creme-2: #F9EFEE; /* la même crème, un ton plus bas */ --mur: #E4B7BE; /* LE mur rose relevé #E8BBC2 → #D19DA6 */ --mur-pale: #EFD7DA; /* le même mur, loin de la lampe */ --chene: #BE9467; /* le parquet relevé #BE9467 */ --ambre: 255, 201, 141; /* la lumière des bandeaux LED */ /* Les anciens noms sont conservés : ils désignent désormais une matière de la pièce, et non plus une teinte choisie. */ --blanc: var(--marbre); --lait: var(--creme); --rose: var(--mur); --filet: #E3C6C9; /* L'or du logo, ses trois valeurs réelles. Aucune ne porte de texte sur fond clair : voir l'en-tête de ce fichier. */ --or-clair: #FAD797; --or: #C28B55; --or-fonce: #967357; --or-metal: linear-gradient(115deg, #967357 0%, #C28B55 22%, #FAD797 46%, #C28B55 70%, #9C7A5C 100%); --encre: #2C1E22; --gris: #675659; /* Le même gris, assombri pour tenir sur le mur rose à pleine valeur : #675659 n'y donne que 3,9 : 1. */ --gris-mur: #55434A; --bois: #7E4A52; /* l'accent de texte des fonds clairs */ --bois-2: #6E3F47; --titres: 'Titres', 'Iowan Old Style', Georgia, 'Times New Roman', serif; /* « Texte » est désormais Inter (voir outils/polices.sh). Manrope l'a précédée et n'a pas démérité — mais elle ressemblait trop à la romane : terminaisons adoucies, chasse généreuse, même tempérament. Or c'est le CONTRASTE entre les deux caractères qui fait qu'une page a l'air dessinée plutôt que choisie. Inter est son contraire : neutre, dense, dessinée pour l'écran, et elle laisse toute la personnalité à Instrument Serif. */ --texte: 'Texte', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --p1: 0.5rem; --p2: 0.875rem; --p3: 1.375rem; --p4: 2.25rem; --p5: 3.5rem; --p6: clamp(4rem, 8vw, 6.5rem); --p7: clamp(5rem, 11vw, 9rem); --colonne: 38rem; --large: 80rem; --marge: clamp(1.25rem, 5vw, 4rem); /* Un rayon unique pour tout — boutons, cartes, photos — était le signe le plus daté de la page : c'est la valeur moyenne qu'on ne choisit pas. Trois rayons, chacun pour une nature d'objet : · une pilule pour ce qui se clique, · un rayon franc pour les photos, qui doivent respirer, · un rayon plus sage pour les cartes, qui portent du texte. Ce qui est encadré d'un filet d'or reste d'équerre : un filet en `border-image` ne suit pas les angles arrondis. */ --pilule: 999px; --rond-photo: clamp(14px, 1.3vw, 20px); --rond: 14px; --sortie: cubic-bezier(0.22, 1, 0.36, 1); } /* Les halos ne sont plus ceux du logo mais ceux de la PIÈCE : des flaques ambrées, qui sont la couleur des bandeaux LED, et une seule tache froide, qui est la fenêtre. Un bokeh blanc convenait à une carte de visite ; il ne ressemblait pas au salon, où toute la lumière est chaude sauf celle qui entre par le rideau. C'est un fond : rien n'a à être lisible dessus. */ .bokeh { position: relative; isolation: isolate; } .bokeh::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 18% 22%, rgba(255,252,252,.92) 0 6%, transparent 32%), radial-gradient(circle at 76% 12%, rgba(var(--ambre),.17) 0 5%, transparent 28%), radial-gradient(circle at 62% 70%, rgba(var(--ambre),.15) 0 5%, transparent 30%), radial-gradient(circle at 34% 84%, rgba(255,250,250,.72) 0 3%, transparent 22%), radial-gradient(circle at 90% 54%, rgba(var(--ambre),.12) 0 7%, transparent 34%), /* la fenêtre : la seule lumière froide du salon */ radial-gradient(circle at 8% 62%, rgba(233,239,247,.58) 0 4%, transparent 26%); filter: blur(14px); } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--lait); color: var(--encre); font-family: var(--texte); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* Inter est plus dense que Manrope : à graisse et interlignage égaux, le texte paraissait plus lourd et plus tassé. 380 au lieu de 400, et l'interlignage resserré d'un souffle — le texte cesse de flotter sans devenir compact. L'interlettrage négatif compense l'axe de taille optique qu'on n'a pas téléchargé, pour ne pas payer 25 ko de plus. */ font-weight: 380; line-height: 1.58; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; height: auto; } h1, h2, h3 { font-family: var(--titres); font-weight: 400; /* Instrument Serif n'a qu'une graisse */ line-height: 1.02; letter-spacing: -0.015em; margin: 0; text-wrap: balance; } /* Une romane à empattements fins supporte de très grands corps : c'est même là qu'elle donne le meilleur. Taille vérifiée par outils/verifier.mjs à 390, 820, 1440 et 1920 px. */ /* 9 rem contre 2,25 rem pour l'intertitre : un rapport de 4, là où 1,6 donnait une page sans relief. C'est l'écart, pas la taille, qui crée la hiérarchie. */ h1 { font-size: clamp(3rem, 10.5vw, 9rem); line-height: 0.94; letter-spacing: -0.03em; } h2 { font-size: clamp(1.9rem, 4.4vw, 3.25rem); } h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); letter-spacing: -0.01em; line-height: 1.15; } p { margin: 0 0 var(--p3); } p:last-child { margin-bottom: 0; } a { color: var(--bois); text-decoration-thickness: 1px; text-underline-offset: 0.25em; } :focus-visible { outline: 2px solid var(--bois); outline-offset: 3px; } .saut { position: absolute; left: -9999px; background: var(--encre); color: var(--blanc); padding: var(--p2) var(--p3); z-index: 100; } .saut:focus { left: var(--p2); top: var(--p2); } .pictos { position: absolute; width: 0; height: 0; overflow: hidden; } .lecture-seule { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Éléments récurrents -------------------------------------------------------------------------- */ /* Minuscule et très espacée : l'étiquette doit être le plus petit texte de la page, c'est ce qui donne sa mesure au titre qui la suit. */ .sur-titre { font-family: var(--texte); /* 0,3 em d'interlettrage sur une capitale, c'était la signature des années 2019. Resserré à 0,15 em et monté d'un demi-point de corps : l'étiquette redevient un mot compact plutôt qu'une ligne étirée. */ font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gris); margin: 0 0 var(--p2); } /* -------------------------------------------------------------------------- Le rétroéclairage -------------------------------------------------------------------------- Toutes les étagères du salon sont éclairées par-dessous : un profil doré, et une nappe de lumière ambrée qui en retombe. C'est ce qui donne à la pièce sa chaleur, et c'est ce qui manquait le plus à la page. Ce n'est PAS une ombre portée — la règle « aucune ombre sur ce site » tient toujours, c'est elle qui avait fait tomber les versions en cartes blanches. Une ombre s'ajoute sous un objet pour le décoller du fond ; ici on ajoute une SOURCE de lumière sous un filet. L'un est un effet de gabarit, l'autre est un relevé de la pièce. -------------------------------------------------------------------------- */ .retro { position: relative; } .retro::after { content: ''; position: absolute; inset: 0 0 auto; height: 4rem; pointer-events: none; z-index: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.46) 0, rgba(var(--ambre), 0.14) 26%, transparent 100%); border-top: 1px solid transparent; border-image: var(--or-metal) 1; border-width: 1px 0 0; } .retro > * { position: relative; z-index: 1; } /* Le bloc des tarifs a des angles courts : la nappe de lumière doit les suivre, sinon elle déborde en rectangle sur le coin. */ .tarifs.retro::after { border-radius: var(--rond) var(--rond) 0 0; } .section { padding: var(--p7) 0; position: relative; } .section--rose { background: var(--rose); } /* La grande bande du milieu de page prend le mur — mais sa valeur basse, celle qu'il a loin du bandeau lumineux. C'est la répartition de la pièce : la crème est le fond, le rose est ce qu'on REGARDE, et il revient à intervalles, pas en continu. Servie à sa pleine valeur ici, elle écraserait les photos qu'elle porte. */ .section--lait { background: var(--mur-pale); } /* Le bloc de rendez-vous : LE mur, à sa vraie valeur. C'est le seul endroit de la page où le rose est celui qu'on a dans l'œil en entrant dans le salon ; ailleurs il est délavé ou tenu en filet, comme dans la pièce où il n'occupe qu'une paroi. Le gris courant n'y passe plus (3,9 : 1), on prend donc sa version assombrie. */ .section--encre { background: var(--rose); color: var(--gris-mur); } .section--encre h2, .section--encre h3 { color: var(--encre); } .section--encre .sur-titre { color: var(--gris-mur); } .section--encre p { color: var(--gris-mur); } .enveloppe { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--marge); } .enveloppe--lecture { max-width: calc(var(--colonne) + 2 * var(--marge)); } .chapeau { color: var(--gris); font-size: 1.05rem; max-width: 34rem; margin-top: var(--p3); font-weight: 380; letter-spacing: -0.008em; } /* Boutons rectangulaires à angles courts. Le plein est quasi noir : c'est ce qui donne le tranchant que le brun n'avait pas. */ .bouton { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--texte); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 1.05rem 2.2rem; border: 1px solid transparent; border-radius: var(--pilule); text-decoration: none; cursor: pointer; transition: background-color .3s var(--sortie), color .3s var(--sortie), border-color .3s var(--sortie), transform .12s var(--sortie); } /* Le bouton s'enfonce au doigt : un retour tactile d'un pixel suffit, et c'est ce qui manque le plus aux boutons qui n'ont pas l'air vivants. */ .bouton:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .bouton:active { transform: none; } } .bouton--plein { background: var(--bois); color: var(--blanc); border-color: var(--bois); } .bouton--plein:hover { background: var(--bois-2); border-color: var(--bois-2); } .bouton--filet { background: transparent; color: var(--bois); border-color: var(--bois); } .bouton--filet:hover { background: var(--bois); color: var(--blanc); } .bouton--clair { background: var(--bois); color: var(--blanc); border-color: var(--bois); } .bouton--clair:hover { background: var(--bois-2); border-color: var(--bois-2); } .bouton svg { width: 1.05em; height: 1.05em; flex: none; } /* Le halo irisé est supprimé : c'était un aplat multicolore flou, et c'est l'un des éléments qui faisaient basculer la page dans le sucré. La classe reste neutre pour ne pas avoir à toucher au HTML. */ .halo { position: relative; } /* -------------------------------------------------------------------------- En-tête -------------------------------------------------------------------------- */ .entete { position: sticky; top: 0; z-index: 40; background: rgba(254, 249, 248, 0.92); backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: border-color .35s var(--sortie); } .entete[data-defile='oui'] { border-bottom-color: var(--filet); } /* Tant qu'on n'a pas défilé, l'en-tête flotte sur la photo du salon. Le voile de l'ouverture étant crème, la marque et le menu gardent l'encre du reste du site : aucune couleur à surcharger, donc aucun risque de les voir disparaître ailleurs. Restreint à `.accueil` tout de même — les mentions légales n'ont pas de photo derrière leur en-tête. */ .accueil .entete:not([data-defile='oui']) { background: transparent; backdrop-filter: none; } .entete__interieur { max-width: var(--large); margin-inline: auto; padding: var(--p2) var(--marge); display: flex; align-items: center; justify-content: space-between; gap: var(--p3); } .marque { font-family: var(--titres); font-size: 1.15rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre); text-decoration: none; white-space: nowrap; font-variant-numeric: lining-nums; } .menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); } .menu a { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--encre); text-decoration: none; position: relative; padding-block: 0.3rem; } .menu a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--encre); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--sortie); } .menu a:hover::after { transform: scaleX(1); } .entete .bouton { padding: 0.75rem 1.25rem; font-size: 0.68rem; } /* Dans le HTML, le panneau vient APRÈS le bouton qui l'ouvre : c'est ce qui fait qu'au clavier, la tabulation entre dans le menu qu'on vient d'ouvrir au lieu de le sauter. L'ordre à l'écran, lui, est rétabli ici. */ .entete__actions { display: flex; align-items: center; gap: 0.5rem; order: 2; } /* Le sélecteur de langue. Trois codes de deux lettres, pas des drapeaux : un drapeau désigne un pays, pas une langue — l'espagnol n'appartient pas à l'Espagne, et l'anglais pas au Royaume-Uni. */ .langues { display: flex; align-items: center; gap: 0.1rem; margin-inline-end: 0.35rem; } .langues a { font-family: var(--texte); font-size: 0.68rem; font-weight: 550; letter-spacing: 0.08em; color: var(--gris); text-decoration: none; padding: 0.45rem 0.45rem; border-radius: var(--pilule); transition: color .25s var(--sortie), background-color .25s var(--sortie); } .langues a:hover { color: var(--encre); } /* La langue servie n'est pas un lien comme les autres : elle est marquée, et `aria-current` le dit aussi à qui n'y voit rien. */ .langues a[aria-current='page'] { color: var(--encre); background: var(--creme-2); } @media (max-width: 30rem) { .langues a { padding: 0.4rem 0.3rem; font-size: 0.64rem; } .langues { margin-inline-end: 0.1rem; } } .menu { order: 1; } /* -------------------------------------------------------------------------- Le menu du téléphone -------------------------------------------------------------------------- Jusqu'ici les liens étaient simplement masqués sous 62 rem : sur une page qui fait vingt écrans au téléphone, il n'y avait donc AUCUN moyen d'aller quelque part. C'est ce qui manquait le plus, et ça se voyait. Le panneau se pose SUR le haut de la page, sous la barre. Il ne couvre pas l'écran entier et se referme sur Échap comme au premier lien touché : un menu de cinq liens n'a donc besoin ni de bloquer le défilement, ni de piéger le focus. Replié, il est en `visibility: hidden`, ce qui le retire aussi du parcours clavier et des lecteurs d'écran — un menu masqué dont les liens restent tabulables est un piège classique. -------------------------------------------------------------------------- */ .menu__bascule { display: none; } @media (max-width: 62rem) { .menu__bascule { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; /* la cible tactile minimale */ padding: 0; border: 1px solid var(--filet); border-radius: var(--pilule); background: transparent; color: var(--encre); cursor: pointer; transition: background-color .25s var(--sortie); } .menu__bascule:hover { background: var(--creme-2); } .menu__bascule svg { width: 1.25rem; height: 1.25rem; } /* Une seule des deux icônes à la fois, selon l'état du bouton. */ .menu__bascule .menu__fermer { display: none; } .menu__bascule[aria-expanded='true'] .menu__ouvrir { display: none; } .menu__bascule[aria-expanded='true'] .menu__fermer { display: block; } /* Le libellé du bouton de rendez-vous disparaît : il ne reste que le picto, sinon les trois éléments de la barre ne tiennent pas sur un petit téléphone. */ .entete .bouton--plein span { display: none; } .entete .bouton--plein { padding: 0.8rem; } .entete .bouton--plein svg { width: 1.15rem; height: 1.15rem; } .menu { position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 0; background: var(--creme); border-bottom: 1px solid var(--filet); padding: 0 var(--marge); /* Replié : hauteur nulle et invisible au clavier comme au lecteur d'écran. `visibility` fait les deux, et se transitionne. */ max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .35s var(--sortie), visibility .35s; } .menu[data-ouvert='oui'] { max-height: 26rem; visibility: visible; padding-block: var(--p2) var(--p3); } .menu a { font-family: var(--titres); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.01em; text-transform: none; padding-block: 0.7rem; border-bottom: 1px solid var(--filet); } .menu a:last-child { border-bottom: 0; } .menu a::after { display: none; } } /* -------------------------------------------------------------------------- Ouverture — le salon en plein cadre -------------------------------------------------------------------------- Le salon EST l'ouverture. Plutôt que de le décrire trois écrans plus bas, on y entre : sa photo occupe la fenêtre entière et le texte tient la moitié gauche. Le lettrage doré du mur fait office de logo — il est déjà dans la pièce, il n'avait pas à être reposé en pastille par-dessus. -------------------------------------------------------------------------- */ .ouverture { min-height: 100svh; display: grid; align-content: center; /* Sans colonne explicite, les deux blocs — qui portent un `margin-inline: auto` — cessent de s'étirer et se réduisent à leur contenu : une marge automatique désactive l'étirement d'un élément de grille. C'est ce qui les recentrait au milieu de l'écran. */ grid-template-columns: minmax(0, 1fr); /* L'en-tête est « sticky » : il occupe sa place dans le flux, et la photo commencerait donc SOUS lui — la barre laisserait voir le fond crème au lieu du salon. On remonte l'ouverture de sa hauteur exacte. */ margin-top: -4.6rem; padding: clamp(8rem, 20vh, 12rem) 0 var(--p6); overflow: hidden; background-image: url('../img/salon.jpg'); background-size: cover; background-position: 50% 12%; } /* Voile CRÈME, pas noir. Un voile sombre assombrissait la pièce pour rendre un texte clair lisible : on obtenait une photo de salon éteinte, c'est-à- dire le contraire de ce que montre la cliente. On fait l'inverse — on ÉCLAIRCIT la photo avec la crème des placards, et le texte reste à l'encre sombre habituelle. La pièce garde sa lumière, et rien n'est noir. Le voile reste ASYMÉTRIQUE : dense à gauche, où vit le texte ; léger à droite, où l'on veut continuer de voir le mur de flacons rétroéclairé. Ces valeurs ne sont pas estimées. outils/contraste-ouverture.mjs masque le texte, photographie ce qui reste dessous et prend le PIXEL LE PLUS SOMBRE de chaque zone : c'est le pire cas réel, celui qu'aucune lecture de CSS ne donne quand le fond est une photographie. */ .ouverture::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(100deg, rgba(255,250,249,.96) 0%, rgba(255,250,249,.92) 38%, rgba(255,250,249,.70) 62%, rgba(255,250,249,.14) 100%), linear-gradient(to bottom, rgba(255,250,249,.34) 0%, rgba(255,250,249,.08) 32%, rgba(255,250,249,.46) 100%); } /* Le bokeh se retire : la lumière est désormais celle de la photo. */ .ouverture::before { opacity: .3; } .ouverture__haut { max-width: var(--large); margin-inline: auto; padding-inline: var(--marge); } /* Rendus éléments de grille, ces deux blocs doivent reprendre leur largeur (voir le commentaire sur grid-template-columns ci-dessus). */ .ouverture__haut, .ouverture__scene { width: 100%; } /* Le texte tient la moitié gauche : c'est ce qui laisse la pièce respirer à droite, et c'est ce qui rend le voile asymétrique possible. */ /* Le texte s'arrête tous à la même largeur, et cette largeur n'est pas décorative : au-delà, sa boîte va chercher les flacons NOIRS du mur, qui sont le point le plus sombre de la photo et donc le pire cas de contraste. Le voile devrait alors être assez dense pour les effacer — c'est-à-dire effacer la pièce. */ .ouverture__eyebrow, .ouverture__dire { max-width: 40rem; } /* Le titre s'arrête plus tôt que le reste : sa boîte traversait jusqu'au cadre clair accroché au mur, où le voile est volontairement faible. Le texte n'y allait pas, mais la mesure du pire cas, si — et une mesure qu'on ajuste à ce qu'on croit lu plutôt qu'à ce qui est dessiné ne sert à rien. */ .ouverture h1 { max-width: 40rem; } .ouverture__eyebrow { display: flex; flex-wrap: wrap; gap: var(--p2) var(--p4); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gris); padding-bottom: var(--p3); /* Filet métallique : border-image peint le trait avec le dégradé d'or. C'est un FILET, pas du texte — l'or y est donc parfaitement à sa place. */ border-bottom: 1px solid transparent; border-image: var(--or-metal) 1; border-width: 0 0 1px; margin-bottom: var(--p5); } /* Le cœur du salon — il est peint en doré sous le lettrage mural, brodé sur la serviette et gravé sur le repose-poignet. C'est le seul ornement de la marque, donc il est doré : un ornement ne porte pas de texte, la règle de l'or est respectée. Il ferme la ligne, à l'opposé du premier mot. */ .eyebrow__coeur { margin-inline-start: auto; display: inline-flex; color: var(--or); } .eyebrow__coeur svg { width: 1.2rem; height: 1.2rem; } @media (max-width: 34rem) { .eyebrow__coeur { margin-inline-start: 0; } } /* Le second mot passe en italique de la même romane. C'est tout : pas de dégradé, pas de seconde couleur. L'italique d'une romane à fort contraste suffit à créer l'accent, et c'est ce qui fait la différence entre une page de marque et une page bariolée. */ .ouverture h1 em { font-style: italic; color: var(--bois); } /* La seconde ligne est décalée : le titre cesse d'être un pavé aligné. */ .ouverture h1 span { display: block; } /* Pas de chevauchement entre le titre et la photo : la photo passait devant et mangeait la fin de « IMPECCABLES ». Le titre garde toute la largeur, la scène commence dessous. */ .ouverture__scene { position: relative; max-width: var(--large); margin: var(--p4) auto 0; padding-inline: var(--marge); } .ouverture__actions { display: flex; flex-wrap: wrap; gap: var(--p2); margin-top: var(--p4); } .ouverture__horaires { margin-top: var(--p5); padding-top: var(--p3); border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 0.3rem var(--p4); font-size: 0.85rem; color: var(--gris); } .ouverture__horaires b { font-weight: 600; color: var(--encre); } /* Inter passe du 400 au 380 pour le texte courant : tout ce qui doit trancher demande donc un cran de plus qu'avant pour tenir son rang. */ .bouton, .sur-titre, .menu a, .bande li, .filtre, .prestation__numero, .manifeste__etapes b, .pied h3 { font-weight: 550; } strong, b, .reperes strong, .horaires dd, .ouverture__horaires b { font-weight: 600; } /* Le voile étant crème, le texte de l'ouverture garde les couleurs du site. Deux ajustements seulement, tous deux dictés par la mesure : · le paragraphe passe du gris à l'encre. Sur un aplat il tenait 6,2 : 1 ; sur la photo, contre un flacon noir entrevu à travers le voile, il tombait à 3,5 : 1 ; · l'italique du titre passe au bois de rose FONCÉ, pour la même raison. Ce bloc vient en dernier, après les règles d'origine : à spécificité égale, placé plus haut, il perdrait silencieusement. */ .ouverture__dire p { color: var(--encre); font-size: 1.12rem; } .ouverture h1 em { color: var(--bois-2); } .ouverture__horaires { color: var(--encre); } /* -------------------------------------------------------------------------- L'ouverture au téléphone : on change de composition, pas de densité -------------------------------------------------------------------------- Sur un écran étroit, le texte occupe toute la largeur. Pour qu'il tienne par-dessus la photo, il fallait un voile uniforme si dense que la pièce disparaissait : on obtenait une page beige avec un fantôme d'étagères, là où la section « Le salon », plus bas, montrait la même pièce en pleines couleurs. Le remède était pire que le mal. On ne force donc pas la composition du bureau : on en change. La photo occupe le haut, ENTIÈRE et sans aucun voile, et le texte vient dessous sur la crème. Le salon se voit enfin, et plus rien n'est à moitié lisible. La photo passe sur le pseudo-élément (celui du bokeh, qui n'a plus lieu d'être ici) plutôt qu'en fond de section : un fond de section s'étend à toute sa hauteur, texte compris, alors qu'on veut une bande. */ @media (max-width: 62rem) { .ouverture { --photo: clamp(19rem, 74vw, 30rem); min-height: 0; margin-top: 0; /* l'en-tête reprend sa place dans le flux */ background-image: none; /* Assez d'air pour détacher le texte de la photo, pas assez pour que le titre tombe sous la ligne de flottaison d'un petit téléphone. */ padding: calc(var(--photo) + var(--p4)) 0 var(--p6); } .ouverture__eyebrow { margin-bottom: var(--p3); } .ouverture::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--photo); z-index: -1; opacity: 1; filter: none; background: url('../img/salon.jpg') 50% 14% / cover no-repeat; } .ouverture::after { display: none; } /* L'en-tête ne flotte plus sur rien : il redevient une barre crème. */ .accueil .entete:not([data-defile='oui']) { background: rgba(254, 249, 248, 0.92); backdrop-filter: blur(18px); } .ouverture h1 span { padding-inline-start: 0; } } /* -------------------------------------------------------------------------- Bande des styles Une liste, pas un décor : elle dit ce que la cliente pose. Elle ne défile pas — c'est une information, on doit pouvoir la lire. Posée sur le vin, elle sert aussi de respiration sombre entre l'ouverture et la suite. -------------------------------------------------------------------------- */ .bande { /* Elle vient buter contre la photo plein cadre : aucune marge au-dessus, sinon le fond crème s'invite entre les deux. */ margin-top: 0; background: var(--bois); color: var(--blanc); border-block: 0; } .bande ul { /* `margin-inline: auto` ne touche pas les marges verticales : celles du