/* ========================================================================== LE MOULIN AUX ÉPICES — feuille unique. La GRILLE vient du clone de lasalaplazahotel.com : échelle racine en vw, conteneurs, breakpoints, épinglage, durées et easings, tous relevés au getComputedStyle et non estimés. Le CONTENU, la palette, les fontes, les images et les textes sont ceux du Moulin. ✅ Les deux fontes de assets/fonts/ sont sous licence SIL OFL : elles peuvent être servies depuis le domaine du Moulin. ========================================================================== */ /* --- L'échelle racine ---------------------------------------------------- Toute la mise en page du site est proportionnelle à la largeur de fenêtre : `html` porte une taille en vw, et absolument tout le reste est en rem. L'échelle ci-dessous est recopiée telle quelle de main.min.css, bornes décimales comprises. Vérifiée par la mesure : 7,5 px à 1440, 10 px à 1920, 8,34 px à 834, 10,2375 px à 390. */ @media only screen and (min-width: 1600.1px) { html { font-size: .52083333vw; } } @media only screen and (min-width: 1400.1px) { html { font-size: .52083333vw; } } @media only screen and (max-width: 1550px) and (max-height: 1200px) { html { font-size: .66253333vw; } } @media only screen and (max-width: 1550px) and (max-height: 920px) { html { font-size: .52083333vw; } } @media only screen and (min-width: 991.1px) and (max-width: 1400px) { html { font-size: .62083333vw; } } @media only screen and (min-width: 767.98px) and (max-width: 991px) { html { font-size: 1vw; } } @media only screen and (max-width: 767.98px) { html { font-size: 2.625vw; } } @media only screen and (max-width: 768px) and (max-height: 550px) and (orientation: landscape) and (min-width: 420px) { html { font-size: 1vw; } } @media only screen and (min-width: 768px) and (max-width: 991px) and (max-height: 550px) and (orientation: landscape), only screen and (min-width: 767.98px) and (orientation: landscape) and (max-width: 991px) { html { font-size: .8vw; } } /* ⭐ Plancher de lisibilité (audit 26/09/2026). L'échelle ci-dessus est calée pour un écran de 1920 : à 1440 la racine tombe à 7,5 px, et le pied de page, les boutons, le bloc contact et les libellés de la barre « Demander » passaient à 8–10 px — illisibles sur l'écran de portable le plus courant. La racine ne descend plus sous 9 px au-dessus de la tablette. Mesuré à 1024, 1280, 1366 et 1440 : aucun débordement, la mise en page grandit d'un bloc. */ @media only screen and (min-width: 767.98px) { html { font-size: max(9px, .52083333vw); } } @media only screen and (min-width: 991.1px) and (max-width: 1400px) { html { font-size: max(9px, .62083333vw); } } @media only screen and (min-width: 1400.1px) and (max-width: 1550px) and (max-height: 1200px) and (min-height: 920.1px) { html { font-size: max(9px, .66253333vw); } } /* --- Fontes -------------------------------------------------------------- Deux familles, toutes deux sous licence SIL OFL — donc servables depuis le domaine du Moulin, ce qui n'était le cas d'aucune des trois fontes de la référence (Hurme, Berlingske, Calluna sont commerciales). Instrument Serif et Jost ne sont pas des choix nouveaux : ce sont ceux déjà retenus pour le site du Moulin, après comparaison de huit substituts sur planche. Instrument Serif est plus CONDENSÉE que Berlingske et Jost un peu plus étroite que Hurme : les longueurs de texte ont été reprises en conséquence, section par section. */ /* EB GARAMOND — Manon, 29/08 : « prendre Garamond pour la police serif ». C'est la Garamond libre de référence (Georg Duffner, Octavio Pardo), servie ici en woff2 auto-hébergé comme les autres, jamais depuis un CDN. Trois coupes et non une : le romain, l'italique (les gloses de la page histoire l'emploient), et un DEMI-GRAS réel. Instrument Serif n'avait que le 400 : tous les `` du site étaient graissés par le navigateur, qui épaissit le contour au lieu de dessiner. Avec le 600, ils sont dessinés. ⚠️ MESURÉ avant l'échange : à taille égale, l'œil-de-caractère de Garamond fait 40,5 contre 51 — 21 % de moins — et sa chasse est 13 % plus large. Échangée sans rien d'autre, elle aurait rendu tout le site plus petit ET ses lignes plus longues à la fois : 78 signes par ligne là où le confort s'arrête vers 70. D'où le `size-adjust: 112%`. C'est UNE valeur, sur la fonte, et non vingt retouches de `font-size` éparpillées dans deux feuilles : chaque règle du site garde ses chiffres, et toutes suivent ensemble. 112 et non 126 (le rapport exact des œils) : à 126 les titres d'affichage devenaient énormes et les lignes tombaient à 62 signes. À 112, l'œil vaut 89 % de l'ancien — la petite différence qui reste EST le caractère d'une Garamond — et la ligne revient à 70 signes. Repli : Safari 16 et antérieurs ignorent `size-adjust` et rendent le texte 12 % plus petit. Ça se lit encore ; ça ne casse rien. */ @font-face { font-family: "EB Garamond"; src: url(assets/fonts/eb-garamond-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 112%; } @font-face { font-family: "EB Garamond"; src: url(assets/fonts/eb-garamond-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; size-adjust: 112%; } @font-face { font-family: "EB Garamond"; src: url(assets/fonts/eb-garamond-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; size-adjust: 112%; } /* PLAYFAIR (25/09/2026) — la serif de Mont Rural, demandée par Manon. Playfair 2 (Claus Eggers Sørensen, licence OFL), servie depuis Google Fonts puis auto-hébergée. Le romain est VARIABLE sur la taille optique (opsz 5 → 1200) : avec `font-optical-sizing: auto`, plus le texte est grand, plus les déliés s'affinent — c'est tout le caractère des grands titres de Mont Rural. Le fichier figé que Google sert par défaut n'a PAS cet axe : c'est celui que charge Mont Rural qui a été retenu (60 ko, 233 glyphes, accents vérifiés). L'italique n'existe qu'en coupe figée (36 ko). `font-weight: 400 600` : le fichier n'a qu'une graisse ; la plage empêche le navigateur d'inventer un gras synthétique quand un tombe dessus. */ @font-face { font-family: "Playfair"; src: url(assets/fonts/playfair-latin-opsz-normal.woff2) format("woff2-variations"), url(assets/fonts/playfair-latin-opsz-normal.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } @font-face { font-family: "Playfair"; src: url(assets/fonts/playfair-latin-400-italic.woff2) format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; } @font-face { font-family: "Jost"; src: url(assets/fonts/jost-latin-wght-normal.woff2) format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } /* --- Palette ------------------------------------------------------------- Correspondance faite par RÔLE et non par teinte, avec le contraste vérifié à chaque fois. Le site passe d'un vert-gris marin à un brun-or chaleureux. Le seul jeton qui change de logique est `--bouton` : plein vert avec texte blanc chez eux (5,5:1), pilule crème avec texte brun chez nous (12,1:1). D'où `--sur-bouton`, qui n'existait pas dans la référence. */ :root { --bouton: #EDE4D8; /* pilule beige — même valeur que --beige, mais rôle distinct : une surface de contrôle, pas un fond. #F7E8D9 tirait à l'orange (sat .121 contre .045 au fond) et jurait avec le crème. */ --sur-bouton: #322016; /* le texte qui va dessus */ --encre: #322016; /* titres, bandeau d'en-tête, colonne contact, pied */ --brun: #553725; /* bouton du moteur, titres alternés */ /* 26/09 — Manon : plus de turquoise du tout. L'or porte seul l'accent : texte, pictos, filets, puces, focus ; le brun prend le survol des boutons. */ --or: #9B744A; /* accent : liens, surtitres, pictos, filets, focus */ --or-clair: #AD8253; /* le même sur fond sombre */ --creme: #F5F0EA; /* fond de page, bandeau d'avantages */ --beige: #EDE4D8; /* Le papier de l'affiche (25/09) : un grain fin de fibres et un marbré large, tous deux en brun à très faible opacité, en SVG inline — aucune requête. Deux tuiles de tailles premières entre elles (240 et 900) pour que la répétition ne se lise pas. */ --papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .13 0 0 0 0 .08 0 0 0 .3 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.00667' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .22 0 0 0 0 .14 0 0 0 .12 -.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); /* fond du carrousel des pièces */ --blanc: #fff; } /* --- Remise à zéro -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* 600 et non 700 : la coupe demi-grasse d'EB Garamond est dessinée, la grasse n'existe pas dans le fichier servi — demander 700 relancerait le graissage synthétique qu'on cherche justement à éviter. */ strong, b { font-weight: 600; } body { margin: 0; /* La reference met le sans-serif geometrique sur le body ; le serif est pose sur les titres et les blocs de texte, pas en heritage global. */ font-family: "Jost"; font-weight: 400; color: var(--encre); background: var(--creme); -webkit-font-smoothing: antialiased; } ul { margin: 0; padding: 0; } .list-unstyled { list-style: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } p { margin: 0; } /* --- Ce que le navigateur dessine à notre place --------------------------- La sélection, le curseur de saisie, l'anneau de focus et la barre de défilement sont livrés par le navigateur dans des teintes qui n'appartiennent à aucune charte — un bleu système au milieu d'un site brun-or. Ils se traitent ici, une fois. Le brun et non l'or pour la sélection : mesuré, crème sur `--or` ne donne que 3,7:1, sous le seuil de 4,5. Crème sur `--brun` donne 9,5:1. */ ::selection { background: var(--brun); color: var(--creme); } input, textarea, select { caret-color: var(--or); } html { scrollbar-color: var(--or-clair) var(--creme); scrollbar-width: thin; } /* Un anneau de focus par défaut, au cas où un élément n'ait pas le sien. Les règles des composants sont plus spécifiques et continuent de l'emporter. */ :focus-visible { outline: 2px solid var(--or); outline-offset: 3px; } /* --- Les ancres et l'en-tête fixe ----------------------------------------- L'en-tête est `position: fixed` sur 7,5 rem. Sans cette réserve, toute cible d'ancre (`#piece-le-salon`, `#demander`…) se range pile sous lui : on saute, et le titre visé est caché. 10 rem laisse l'en-tête plus un peu d'air. */ [id] { scroll-margin-top: 19rem; } /* 16,8 rem d'en-tete + un peu d'air */ /* En mobile la barre de contact revient au-dessus de l'en-tête (5,8 + 7,5). */ @media (max-width: 767.98px) { [id] { scroll-margin-top: 15rem; } } /* --- Conteneurs ---------------------------------------------------------- Mesuré : le conteneur pleine largeur porte 0,75 rem de marge interne de chaque côté, et la rangée les compense. */ .container-fluid { width: 100%; padding-inline: .75rem; } .container-fluid-full { padding-inline: .75rem; } .row { display: flex; flex-wrap: wrap; margin-inline: -.75rem; } .col-12 { flex: 0 0 100%; max-width: 100%; padding-inline: .75rem; } .p-0 { padding: 0 !important; } /* `p-16` n'ajoute rien : mesure faite, le retrait vient de .col-12 (0,75 rem) et rien d'autre. Le nom vient de leur grille, pas d'un espacement. */ .p-16 { } .text-center { text-align: center; } .position-relative { position: relative; } .overflow-hidden { overflow: hidden; } /* --- Icônes en masque ---------------------------------------------------- La référence ne pose pas les SVG en mais en masque CSS sur un carré coloré : c'est ce qui permet de recolorer l'icône au survol. On reproduit la technique, pas seulement le résultat. */ .icons { width: 1.8rem; height: 1.8rem; display: inline-block; vertical-align: middle; font-style: normal; background-color: #000; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transition: all .5s ease-in-out; } /* Les icônes de la référence étaient SES fichiers ; celles-ci sont redessinées. Plus aucune icône de réseau social — Instagram retiré le 29/08. */ .ico-arrow-down{ -webkit-mask-image: url(assets/img/arrow-down.svg);mask-image: url(assets/img/arrow-down.svg); } /* --- Barre de contact ---------------------------------------------------- Fixée en haut, 3,8 rem de haut, texte à 1 rem — mesure : 28,5 px et 7,5 px à 1440, soit exactement 3,8 et 1 rem. */ .contact-bar { position: fixed; inset: 0 0 auto; z-index: 5; height: 3.8rem; color: var(--blanc); font-family: "Jost"; font-size: 1rem; transition: 1s cubic-bezier(.645, .045, .355, 1); } /* Le bandeau sombre occupe TOUTE la largeur ; c'est son conteneur interne qui est en retrait de 5 rem — mesure : 37,5 px sur 1440. */ /* On vise le premier enfant par sa STRUCTURE, pas par `.fade-animate` : cette classe n'est posée qu'à la révélation, et le fond du bandeau ne doit pas clignoter en attendant. */ .contact-bar > div { background: var(--encre); height: 3.8rem; } /* `width: 100%` PLUS une marge déborde de la marge : la largeur doit se déduire, pas se fixer. Mesure : 182 rem de contenu sur 192 rem de page. */ .contact-bar .container-fluid-full { margin-inline: 5rem; width: auto; } .contact-bar .b-block { display: flex; align-items: center; justify-content: space-between; height: 1.8rem; padding-top: 1rem; } .b-rrss { display: flex; align-items: center; gap: 1rem; height: 1.8rem; } .b-rrss .icons { width: 1.8rem; height: 1.8rem; background-color: var(--blanc); } .b-contact { display: flex; align-items: center; gap: 3rem; height: 1.8rem; } .b-contact a { display: inline-flex; align-items: center; gap: .8rem; } .b-contact img { width: 2.4rem; height: 2.4rem; } /* --- En-tête ------------------------------------------------------------- Fixée sous la barre de contact (top 3,8 rem), 7,5 rem de haut. */ header { font-family: var(--titre-affichage); /* `top: 0` et non 3,8 rem : la barre de contact qui occupait cette bande a été supprimée, l'en-tête prend sa place. */ position: fixed; top: 0; left: 0; right: 0; z-index: 5; /* ⚠️ 16,8 rem et non 7,5 (19/09/2026). Les 7,5 rem dataient d'une marque d'UNE ligne. Le logotype en fait trois — mesuré à 6,77 rem — et remplissait donc 90 % de la barre. MESURé avant correction, identique à 834, 1440 et 1920 : marge à GAUCHE 5,75 rem, marge à DROITE (le bouton Menu) 5,00 rem, air AU-DESSUS 0,37 rem. Quinze fois moins en haut que sur les côtés : le logotype était généreusement rentré latéralement et collé au bord supérieur. Manon, 19/09 : « c'est trop haut sur la page ». 16,8 = 5 + 6,77 + 5 : on prend le registre du côté droit, et le bloc se retrouve à la même distance du bord haut que le Menu l'est du bord droit. ⚠️ 20/09 — Manon : « le logo et le menu du haut sont trop bas ». Le registre du côté droit était le mauvais étalon : 5 rem de marge LATÉRALE se lisent comme une marge normale, les mêmes 5 rem EN HAUT se lisent comme une barre qui descend sur la photo. 13 = 3,1 + 6,77 + 3,1 : le logotype garde de l'air des deux côtés — on ne revient pas aux 7,5 rem où il touchait le bord — mais remonte de 38 à 23 px du haut, et le Menu, centré sur la même hauteur, le suit sans qu'on y touche. La hauteur est UNE variable, lue aussi par `.b-menu-links` (l. ~256) : elle était recopiée en clair aux deux endroits, et deux nombres censés rester égaux finissent toujours par diverger. */ --hauteur-entete: 13rem; height: var(--hauteur-entete); transition: opacity 1s 1.5s, transform 1s 1.5s; } /* L'en-tête est posé sur la photo, sans fond : tout son contenu est en BLANC, sinon il est illisible. Une ombre portée très douce le décolle des zones claires de la photo sans se voir. ⚠️ Ces règles avaient sauté dans une coupe trop large — le menu était repassé en brun sur la photo. */ header, header a, header p, header .marque-nom { color: var(--blanc); } header .icons { background-color: var(--blanc); } header .menu-toggle-2 > div { background: var(--blanc); } header .marque-nom, header .b-menu-links a, header .b-menu-lang a, header .b-lang p, header .menu-toggle p { text-shadow: 0 1px 12px rgba(20, 12, 8, .45); } /* Corps unifié pour toute la barre : 1,6 rem au lieu de 1,2 — c'était trop petit pour être lu sur une photo. */ header .b-menu-links a, header .b-menu-lang a, header .b-menu-lang .b-lang p { font-family: "Jost"; font-size: 2rem; font-weight: 400; letter-spacing: .02em; text-transform: none; } .b-menu-links { display: flex; align-items: center; justify-content: center; /* Plus de `margin-top` : la rangée est centrée dans la hauteur de l'en-tête, le logo avec elle. C'est le décalage qui le faisait paraître trop haut. */ gap: 6rem; height: var(--hauteur-entete); margin-top: 0; margin-left: 5rem; /* suit la hauteur de l'en-tête, sans la recopier */ /* La liste se dimensionne sur son contenu (86,4 rem mesurés), sinon elle s'étire sur toute la largeur et les liens partent au centre. */ width: max-content; font-family: "Jost"; font-size: 1.2rem; } .b-menu-lang { position: absolute; top: 50%; transform: translateY(-50%); right: 5rem; display: flex; align-items: center; gap: 4rem; height: 2.4rem; font-family: "Jost"; } .b-lang { position: relative; } .b-lang > p { display: inline-flex; align-items: center; gap: .6rem; } .b-lang .icons { width: 1rem; height: 1rem; background-color: currentColor; } .b-langs { display: none; position: absolute; top: 100%; left: 0; } .no-desktop { display: none; } /* --- Héros --------------------------------------------------------------- Exactement une fenêtre de haut (120 rem = 900 px à 1440). L'image est en `cover`, et le logo est centré par translation depuis le centre du bloc — c'est la composition de la référence. */ /* ⛔ LE CONTENEUR N'EST PLUS FIXE (19/09/2026) ----------------------------- Il l'était pour reproduire le ScrollSmoother de la référence : la page ne défilait pas vraiment, c'est son contenu qui était translaté de −scrollY × 1,5 pendant que la hauteur du `body` était ramenée à (contenu − fenêtre) / 1,5 pour fabriquer une barre de défilement. MESURÉ avant retrait, à 1440 × 900 sur l'accueil : course de la barre 3 553 px, course réelle du contenu 5 330 px — facteur 1,500. Le contenu avançait donc d'une fois et demie ce que disait l'ascenseur. Tout ce qui raisonne en coordonnées natives visait juste et atterrissait trop loin : saut d'ancre, Page ↓, Cmd+F, restauration de position au rechargement, `scrollIntoView`. Et le rattrapage exponentiel (τ = 300 ms) ajoutait par dessus un retard permanent entre le geste et l'image. Manon, 19/09 : « tous les scrolls bug ». On rend le défilement au navigateur. L'épinglage, lui, reste — il lit maintenant `window.scrollY` directement (VITESSE ramenée à 1 dans script.js). */ #smooth-wrapper { position: static; overflow: visible; width: 100%; height: auto; } /* ⚠️ La boîte du héros et sa photo doivent être sur la MÊME mesure. Elle était à `120rem` et la photo à `100vh` : les deux ne coïncident qu'en 16/10, et sur un écran plus large que haut la photo laissait jusqu'à 289 px de crème sous elle. `svh` plutôt que `vh` : sur mobile, la barre d'outils du navigateur ne fait plus sauter la hauteur au défilement. */ .d-hero { position: relative; height: 100svh; } .d-hero .container-fluid, .d-hero .row, .d-hero .col-12 { height: 100%; } /* Le bloc image fait exactement une fenêtre, et porte un voile noir à 30 % — c'est lui qui assombrit la photo sous le logo. Le voile est au-dessus de l'image (z-index 1) mais sous le bloc de marque. */ .d-hero .img-div { position: relative; width: 100%; height: 100%; overflow: hidden; } .d-hero .img-div::before { content: ""; position: absolute; inset: 0; z-index: 1; /* ⭐ Manon, 29/08 : « illuminer un peu plus la photo home ». Le voile PLAT de 18 % assombrissait la photo partout — y compris les angles, où il n'y a aucun texte à protéger. Il tombe à 6 %, et le noir qui reste se concentre en un halo doux au CENTRE, exactement sous l'emblème et le nom. La photo s'éclaircit donc franchement là où on la regarde, sans que le blanc du titre perde son fond. */ background: radial-gradient(64% 54% at 50% 50%, rgba(24,15,10,.30) 0%, rgba(24,15,10,.13) 56%, rgba(24,15,10,0) 100%), linear-gradient(0deg, rgba(0,0,0,.06), rgba(0,0,0,.06)); } /* ⭐ Manon, 19/09 : « trop agressive visuellement ». Mesure faite sur le fichier : rien n'est écrêté (0 % de pixels à 250+), donc ce n'était pas une surexposition — c'était le filtre lui-même. `brightness()` en CSS est un MULTIPLICATEUR : à 1.11 il donnait +22 à un pixel clair et +2 à un pixel sombre, donc il ÉCARTAIT l'histogramme (écart-type 43,9 → 48,8, soit +11 % de contraste) au lieu de lever la photo. Et `saturate(1.04)` poussait une image déjà très saturée (10 % des pixels au-dessus de 81 %) : le jaune de la fresque contre le bleu du canapé, c'est ce qui tapait à l'œil. On garde la luminosité demandée le 29/08 (médiane 67,6 → 70,7, donc un peu plus claire qu'avant) mais on rend le contraste au fichier (σ 44,5) et on détend les zones saturées (p90 : 83 % → 63 %). `contrast(.93)` pivote sur 127,5 : la photo ayant sa médiane à 61, il ramasse les noirs vers le milieu sans jamais toucher aux hautes lumières. Vérifié : la zone centrale sous le titre garde la même luminance (108 → 108), le blanc du nom ne perd rien. */ /* ⭐ Manon, 19/09 : « très doux, essaie ». On descend d'un cran de plus que le réglage mesuré ci-dessus — saturation à .90, contraste à .89, et la luminosité remonte à 1.12 pour que l'image ne vire pas au gris en perdant son contraste. Mesuré : médiane 74, écart-type 44,1, saturation moyenne 30,1 % (contre 44,3 % au départ) et p90 à 54,5 % (contre 83,4 %). */ .d-hero .img-div img { filter: brightness(1.12) saturate(.90) contrast(.89); } .d-hero picture { display: block; width: 100%; height: 100%; } .d-hero .img-div img { display: inline; width: 100%; height: 100%; object-fit: cover; } /* Centré dans la photo : `top: 50%` avec la translation de −50 % met le bloc au milieu exact. Il était à 38 %, donc trop haut. */ .d-hero .b-block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 172.8rem; max-width: 92%; } .d-hero .b-block .logo { width: 31.4167rem; height: 38.1rem; } .d-hero .b-block { z-index: 2; } /* (Les styles du tiroir de navigation et du bouton Menu ont été retirés : la section n'existe plus dans le balisage.) */ /* --- Bandeau d'avantages ------------------------------------------------- Marquise : la piste fait `width: max-content` et se translate de -50 % en 40 s linéaires ; les trois messages sont donc écrits trois fois pour que la boucle se referme sans saut. Valeurs recopiées de la référence. */ .d-advantages { position: relative; background-color: var(--creme); padding: 0; margin: 0; overflow: hidden; } .d-advantages .b-adv-wrapper { width: 100%; background: 0 0; } .d-advantages .b-advs { display: flex; width: max-content; animation: scrollVentajas 40s linear infinite; } .d-advantages .b-adv { flex: 0 0 auto; padding: 4rem 2rem; white-space: nowrap; display: flex; align-items: center; font-family: "Jost"; font-size: 1.4rem; line-height: 120%; text-transform: uppercase; color: var(--encre); } .d-advantages .b-adv img { height: 6rem; width: auto; margin-right: 1.5rem; border-radius: 10rem; } @keyframes scrollVentajas { 0% { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Moteur de réservation ----------------------------------------------- Fixé en bas de fenêtre, centré par translation, 78 % de large. */ .d-motor { position: fixed; bottom: 3rem; left: 50%; transform: translate(-50%, 0); /* 21/10 : 4 et non 1 — le cartouche d'adresse (brun) passait PAR-DESSUS la barre et en mangeait la moitié droite. L'en-tête reste au-dessus (5). */ z-index: 4; width: 78%; padding: 0; margin: 0; transition: all .5s ease-in-out; } /* Au-dessus de 768 px, largeur fixe en rem — donc proportionnelle a la fenetre comme tout le reste : 124,6 rem = 934,5 px a 1440. En dessous, 78 %. ⚠️ Le `min()` n'est pas une ceinture de sécurité, il répare un débordement réel. Entre 768 et 991 px le rem passe à 1 vw (l. 24) : 124,6 rem valent alors 1 039 px sur une fenêtre de 834. MESURÉ avant correction, sur les six pages : la barre allait de −103 à 937. Elle dépassait de 103 px de CHAQUE côté, et personne ne l'avait vue — `overflow-x: clip` ne s'applique qu'en dessous de 768 px, donc en tablette le débordement était bien là, sans même la barre de défilement horizontale qui l'aurait signalé. */ @media (min-width: 768px) { .d-motor { width: min(124.6rem, calc(100% - 4rem)); bottom: 3rem; margin-bottom: 0; } } /* La barre de réservation, en transparent (Manon, 29/08) : contour blanc, texte blanc, coins arrondis — la même grammaire que l'en-tête, qui n'a pas de fond non plus. Un flou d'arrière-plan très léger garde le texte lisible quelle que soit la photo derrière : sans lui, la barre disparaît sur les zones claires. Les proportions restent celles de la référence. */ .d-motor .b-motor-new { display: block; padding-inline: .75rem; height: 8.4rem; font-family: "Jost"; } .d-motor .b-motor-new > div { /* Même piège qu'au-dessus, une ligne plus bas : 112,4 rem = 937 px à 834. */ display: flex; align-items: stretch; width: min(112.4rem, 100%); margin-inline: auto; height: 8.4rem; position: relative; border: 1px solid rgba(255, 255, 255, .55); border-radius: 4.2rem; overflow: hidden; background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .d-motor .b-inputs { display: flex; align-items: center; flex: 1 1 auto; padding-inline: 3rem; height: 8.4rem; background: transparent; } .d-motor .col-form { display: flex; flex-direction: column; justify-content: center; position: relative; padding: .3rem 1.7rem; height: 8.4rem; flex: 1 1 0; } .d-motor .col-form + .col-form { border-left: 1px solid rgba(255, 255, 255, .28); } .d-motor .b-label { display: flex; height: 1.9rem; } .d-motor .b-label label, .d-motor .col-form > label { width: 100%; display: block; font-family: "Jost"; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .72); } .d-motor .div-border { display: flex; align-items: center; height: 2.24rem; } .d-motor .form-control { width: 100%; border: 0; background: transparent; padding: 0; font-family: var(--titre-affichage); font-size: 1.9rem; color: var(--blanc); } .d-motor .form-control::placeholder { color: rgba(255, 255, 255, .82); } .d-motor .form-control:focus { outline: none; } .d-motor .form-control:focus-visible { outline: 2px solid rgba(255,255,255,.8); outline-offset: 4px; border-radius: 2px; } /* Le navigateur dessine le glyphe du calendrier en SOMBRE, et il n'accepte aucune `color` : sur la photo du héros il se voyait comme une tache noire à côté d'un texte blanc. `invert(1)` retourne le glyphe — noir devient blanc — c'est le seul levier que Safari et Chrome laissent sur cet élément. */ .d-motor input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .85; cursor: pointer; } .d-motor input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } .d-motor .b-btn { display: block !important; flex: 0 0 auto; } .d-motor .btn { height: 8.4rem; border: 0; cursor: pointer; padding: 0 5rem; background: transparent; color: var(--blanc); border-left: 1px solid rgba(255, 255, 255, .55); font-family: "Jost"; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .12em; transition: background-color .35s ease; } .d-motor .btn:hover { background: rgba(255, 255, 255, .14); } /* --- Bannière pleine page ------------------------------------------------ Le fond sombre est posé en `mix-blend-mode: multiply` à 55 % : il teinte la photo au lieu de la voiler, et garde les hautes lumières. */ .d-banner-full { position: relative; width: 192rem; max-width: 100%; height: 120rem; } .d-banner-full .container-fluid, .d-banner-full .row, .d-banner-full .col-12 { height: 100%; } .d-banner-full .img-div { position: relative; width: 100%; height: 100%; overflow: hidden; } .d-banner-full .img-div::before { content: ""; position: absolute; inset: 0; background: var(--encre); mix-blend-mode: multiply; opacity: .55; } .d-banner-full picture { display: block; width: 100%; height: 100%; } .d-banner-full .img-div img { display: inline; width: 100%; height: 100%; object-fit: cover; } .d-banner-full .b-block { position: absolute; top: 60rem; left: 50%; width: 98rem; /* 26/10 — audit : entre 768 et ~900 px, 98 rem dépassaient l'écran et la phrase de la bannière était coupée des deux côtés. */ max-width: calc(100% - 8rem); transform: translate(-50%, -50%); } .d-banner-full .p-section { font-family: "Jost"; font-size: 1.4rem; font-weight: 400; line-height: 1.96rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blanc); margin: 0 0 2rem; } .d-banner-full .title { font-family: var(--titre-affichage); font-size: 4rem; font-weight: 400; line-height: 5.4rem; margin: 0 0 5rem; color: rgba(250, 246, 240, .62); } .text-reveal .title > div { position: relative; display: inline-block; } /* --- Carrousel des chambres ---------------------------------------------- Le rail se tire à la main (script.js) et chaque carte se pivote selon sa distance au centre de l'écran. ⚠️ Le survol ne change PAS la largeur : faire grossir une carte dans un rail en flex refait couler toute la ligne, et ce reflux se bat avec le transform de l'arc. Tout passe par le transform, piloté image par image : la carte monte et grandit, ses voisines s'écartent de part et d'autre. */ .d-carousel-rooms { position: relative; background-color: var(--beige); padding-top: 5rem; padding-bottom: 12rem; height: auto; overflow: hidden; } .d-carousel-rooms .b-intro { margin-top: 2.7rem; height: 11.6rem; margin-bottom: 4rem; } .d-carousel-rooms .b-intro > div { width: 74.7rem; margin-inline: auto; } .d-carousel-rooms .p-section { font-family: "Jost"; font-size: 1.4rem; line-height: 1.96rem; text-transform: uppercase; letter-spacing: .1em; color: var(--encre); margin-bottom: 1rem; } .d-carousel-rooms .b-intro .title { font-family: var(--titre-affichage); font-size: 4.4rem; font-weight: 400; line-height: 5rem; color: var(--encre); margin: 0; } .d-carousel-rooms .b-carousel { position: relative; } /* ⛔ `> div` prenait AUSSI le bloc du bouton « Voir toutes les photos », qui est lui aussi un div direct de `.b-carousel`. Il héritait donc de `width: 100%` : mesuré, une bande INVISIBLE de 1440 × 42 px posée en travers du carrousel, à mi-hauteur, en `z-index: 4`. Deux conséquences, et aucune n'était devinable à l'œil — c'est `elementFromPoint` qui les a montrées : le bouton se collait au bord GAUCHE au lieu du droit, et surtout il avalait le survol des cartes qu'il recouvrait. La référence, elle, le mesure à 203,88 px de large, calé à droite (ref/desktop.json, index 453). `:not(.b-btn-block)` rend au bouton sa largeur de contenu, et aux cartes leur survol. */ .d-carousel-rooms .b-carousel > div:not(.b-btn-block) { flex: 1 1 auto; min-width: 0; width: 100%; } .d-carousel-rooms .carousel { width: 100%; overflow: visible; cursor: grab; user-select: none; } .d-carousel-rooms .wrapper { display: flex; gap: 4rem; will-change: transform; padding-inline: 20rem; align-items: center; } .d-carousel-rooms .wrapper > div { flex: 0 0 auto; width: 37rem; height: 55rem; display: flex; flex-direction: column; transform-origin: 50% 50%; will-change: transform; /* Au repos : rien. Ni fond, ni ombre, ni contour — la photo seule. Le cadre blanc est posé plus bas, en pseudo-élément, et ne se montre qu'au survol. */ background: transparent; box-shadow: none; } .d-carousel-rooms .img-div { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; overflow: hidden; border-radius: 0; } .d-carousel-rooms .img-div picture { display: block; width: 100%; height: 100%; } .d-carousel-rooms .img-div img { display: inline; width: 100%; height: 100%; object-fit: cover; } .d-carousel-rooms .b-text { flex: 0 0 auto; background: transparent; /* Le nom s'aligne sur le BORD GAUCHE de la photo (Manon, 29/08) : aucune marge intérieure à gauche, sinon il flotte de quelques pixels et l'arête verticale de la colonne se perd. */ padding: 2.2rem 0 0; text-align: left; } /* Le nom est cliquable : il ouvre l'aperçu. Un soulignement discret au survol le dit, sans meubler la carte au repos. */ .d-carousel-rooms .b-text .title a { transition: color .35s ease; } .d-carousel-rooms .wrapper > div:hover .b-text .title a { color: var(--or); } .d-carousel-rooms .b-text .title { font-family: var(--titre-affichage); font-size: 2.6rem; font-weight: 400; line-height: 120%; color: var(--encre); margin: 0; } /* (Les boutons des cartes ont été retirés : le titre suffit.) */ .d-carousel-rooms .b-btn-block { position: absolute; top: 50%; right: 6rem; z-index: 4; transform: translateY(-50%); } /* --- Liste d'informations ------------------------------------------------ Photo à gauche sur 62 %, texte centré verticalement à droite sur 38 %. */ .d-info-list { position: relative; width: 192rem; max-width: 100%; height: 120rem; } .d-info-list .container-fluid, .d-info-list .row { height: 100%; } .d-info-list .col-md-6 { height: 100%; } .d-info-list .b-img { flex: 0 0 62%; max-width: 62%; padding-right: .75rem; padding-left: 0; } .d-info-list .b-info { flex: 0 0 38%; max-width: 38%; display: grid; align-items: center; padding-inline: .75rem; } .d-info-list .b-img .img-div { width: 100%; height: 100%; overflow: hidden; position: relative; } .d-info-list .b-img picture { display: block; width: 100%; height: 100%; } .d-info-list .b-img img { display: inline; width: 100%; height: 100%; object-fit: cover; } .d-info-list .b-info > div { width: 46rem; margin-inline: auto; } .d-info-list .p-section { font-family: "Jost"; font-size: 1.4rem; line-height: 1.96rem; text-transform: uppercase; letter-spacing: .1em; color: var(--or); margin-bottom: 2rem; } .d-info-list .b-info .title { font-family: var(--titre-affichage); font-size: 3.6rem; font-weight: 400; line-height: 4.4rem; color: var(--encre); margin: 0 0 3rem; } .d-info-list .b-btn { margin-top: 4rem; } /* --- LE CADRE DES PIÈCES, QUI N'APPARAÎT QU'AU SURVOL -------------------- Manon, 29/08 : « au début on voit uniquement la photo ; quand on survole, le cadre blanc apparaît et la photo grandit légèrement ». ⭐ C'est aussi ce que fait la référence, et la mesure le dit : dans `ref/desktop.json`, la carte ET son `.b-text` valent tous deux `background-color: rgba(0, 0, 0, 0)` — transparents. Le bandeau blanc permanent qu'on avait posé ici était donc un écart, pas un relevé. ⚠️ Le cadre est un pseudo-élément ABSOLU qui déborde de la carte, et non une marge intérieure : une marge changerait la taille de la carte, refaisant couler tout le rail en flex — et ce reflux se battrait avec le transform de l'arc, réécrit à chaque image. En absolu, rien ne bouge d'un pixel. */ .d-carousel-rooms .wrapper > div { position: relative; } .d-carousel-rooms .wrapper > div::before { content: ""; position: absolute; z-index: 0; inset: -1.8rem; background: var(--blanc); border-radius: 0; box-shadow: 0 26px 50px -12px rgba(20, 12, 6, .34); opacity: 0; transition: opacity .5s cubic-bezier(.215, .61, .355, 1); } .d-carousel-rooms .wrapper > div:hover::before, .d-carousel-rooms .wrapper > div:focus-within::before { opacity: 1; } /* La photo et le nom passent DEVANT le cadre. */ .d-carousel-rooms .img-div, .d-carousel-rooms .b-text { position: relative; z-index: 1; } /* « La photo grandit légèrement » : le zoom se joue à l'intérieur du cadre découpé, la boîte ne bouge donc pas non plus. */ .d-carousel-rooms .img-div img { transition: transform .7s cubic-bezier(.215, .61, .355, 1); } .d-carousel-rooms .wrapper > div:hover .img-div img, .d-carousel-rooms .wrapper > div:focus-within .img-div img { transform: scale(1.06); } /* --- Blog, en jeu de cartes ---------------------------------------------- Les cartes se chevauchent, pivotent selon leur distance au centre, et celle du centre passe devant. Le titre est posé SUR la photo, sous un dégradé. */ .d-featured-blog { position: relative; background-color: var(--creme); padding-top: 10rem; padding-bottom: 10rem; overflow: hidden; } .d-featured-blog .b-intro { position: relative; height: auto; margin-bottom: 6rem; } .d-featured-blog .b-title { width: 92rem; margin-left: 16rem; text-align: left; } .d-featured-blog .p-section { font-family: "Jost"; font-size: 1.4rem; line-height: 1.96rem; text-transform: uppercase; letter-spacing: .1em; color: var(--or); margin-bottom: 2rem; } .d-featured-blog .title { font-family: var(--titre-affichage); font-size: 4rem; font-weight: 400; line-height: 4.8rem; color: var(--encre); margin: 0; } .d-featured-blog .b-intro .b-btn { position: absolute; top: 2rem; right: 12rem; } .d-featured-blog .b-blog { display: block; overflow: visible; padding: 0; } .d-featured-blog .b-slider-blog { display: block; width: 100%; overflow: visible; } .d-featured-blog .container-1 { display: flex; gap: 0; padding-inline: 22rem; will-change: transform; align-items: flex-start; } .d-featured-blog .card { flex: 0 0 auto; width: 34rem; background: transparent; transform-origin: 50% 100%; will-change: transform; z-index: var(--rang, 1); } .d-featured-blog .card:hover, .d-featured-blog .card:focus-within { z-index: 200; } .d-featured-blog .card + .card { margin-left: -6rem; } .d-featured-blog .card .content { position: relative; } /* ⚠️ Plus de levée EN CSS ici : depuis que le rail écarte les voisines (script.js, bloc « L'écartement au survol »), c'est le transform de la CARTE qui monte et grandit, image par image. Garder en plus une transition sur `.content` ajoutait une seconde levée par-dessus la première — le geste partait deux fois, et pas à la même vitesse. */ .d-featured-blog .card .img-div { position: relative; width: 34rem; height: 50rem; overflow: hidden; border-radius: 14px; box-shadow: 0 16px 40px rgba(20, 12, 6, .26); transition: box-shadow .38s ease; } .d-featured-blog .card:hover .img-div { box-shadow: 0 34px 70px rgba(20, 12, 6, .42); } /* Le dégradé suit le texte : il ne sert plus à couvrir le seul bas de la carte mais toute sa hauteur, en pesant un peu plus au centre où le titre est désormais posé. Sans ce rééquilibrage, le titre centré tombait sur la partie claire de la photo. */ .d-featured-blog .card .img-div::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(0deg, rgba(24,14,6,.62) 0%, rgba(24,14,6,.58) 38%, rgba(24,14,6,.44) 62%, rgba(24,14,6,.22) 100%); } .d-featured-blog .card img { display: inline; width: 100%; height: 100%; object-fit: cover; } /* Le texte au MILIEU de la carte, et non collé en bas (Manon, 29/08 : « comme sur lasala »). C'est bien ce que dit la mesure de la référence : carte à y 8934,59 sur 364,66 de haut → centre 9116,92 ; bloc de texte à y 9038,38 sur 157,10 → centre 9116,93. Centré au centième de pixel, sur les deux axes, avec 34,7 px de marge latérale. Le texte, lui, reste ferré à gauche dans ce bloc centré (le bouton commence au bord gauche du bloc). */ .d-featured-blog .card .b-text { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; padding-inline: 4.6rem; text-align: left; } .d-featured-blog .card .p-section { font-size: 1.1rem; letter-spacing: .14em; color: var(--blanc); margin-bottom: .8rem; } .d-featured-blog .card .title { font-family: var(--titre-affichage); font-size: 2.6rem; line-height: 2.9rem; color: var(--blanc); margin: 0 0 1.6rem; } .d-featured-blog .card .b-btn .button { padding: 1.2rem 2.4rem; font-size: 1.2rem; } /* --- Localisation -------------------------------------------------------- Photo pleine hauteur à gauche, bloc de contact centré à droite sur le fond sombre. Pilules pleines : un filet fin s'efface sur un fond sombre. */ .d-location { position: relative; height: 120rem; } .d-location .container-fluid, .d-location .row { height: 100%; } .d-location .col-6 { flex: 0 0 50%; max-width: 50%; height: 100%; padding: 0; } .d-location .b-map { position: relative; overflow: hidden; } .d-location .b-map .img-div, .d-location .b-map picture { width: 100%; height: 100%; } .d-location .b-map img { display: inline; width: 100%; height: 100%; object-fit: cover; } /* --- La surcouche de la carte d'accès ------------------------------------- Les toponymes et le repère sont posés ICI et non gravés dans le SVG : une webfont ne se charge pas à l'intérieur d'un `` (le fichier a son propre document, qui n'hérite ni des `@font-face` ni des variables de la page), et ces textes doivent rester traduisibles. Le positionnement en pourcentage n'est juste que parce que l'image ET la colonne sont au même rapport 4:5 : `object-fit: cover` ne recadre alors rien, et 47 % de l'image tombent sur 47 % de la colonne. Changer l'un des deux rapports décalerait TOUS les repères. */ .d-location .b-map .carte-lieux li, .d-location .b-map .carte-repere { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); margin: 0; } .d-location .b-map .carte-lieux li { font-family: var(--titre-affichage), Georgia, serif; font-size: 1.6rem; line-height: 1; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: var(--brun); /* Un halo crème plutôt qu'un fond : le lavis reste visible sous le mot. */ text-shadow: 0 0 .6rem #EFE6D9, 0 0 .3rem #EFE6D9, 0 0 .3rem #EFE6D9; } .d-location .b-map .carte-lieux .carte-lieux__eau { color: var(--brun); font-style: italic; letter-spacing: .1em; } .d-location .b-map .carte-repere { display: flex; flex-direction: column; align-items: center; gap: .6rem; } .d-location .b-map .carte-repere__pastille { display: grid; place-items: center; width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--creme); border: .1rem solid var(--or); box-shadow: 0 .4rem 1.2rem rgba(50, 32, 22, .22); } .d-location .b-map .carte-repere__pastille svg { width: 2.2rem; height: 3rem; fill: none; stroke: var(--encre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .d-location .b-map .carte-repere__nom { font-family: var(--titre-affichage), Georgia, serif; font-size: 1.7rem; line-height: 1; letter-spacing: .1em; white-space: nowrap; color: var(--encre); background: var(--creme); padding: .5rem .9rem; box-shadow: 0 .2rem .8rem rgba(50, 32, 22, .16); } /* Le crédit de la carte. C'était l'attribution ODbL d'OpenStreetMap ; depuis le passage à l'illustration, c'est le crédit de l'illustration — dû de la même façon, et pour la même raison. */ .d-location .b-map .carte-credit { position: absolute; left: 1.4rem; bottom: 1.2rem; margin: 0; font-size: 1rem; line-height: 1.4; letter-spacing: .04em; color: var(--or); opacity: .85; } /* Sur mobile la colonne se réduit : les toponymes secondaires se marchent dessus, on ne garde que le repère et les trois noms qui situent. */ @media only screen and (max-width: 767.98px) { .d-location .b-map .carte-lieux li { font-size: 1.9rem; } .d-location .b-map .carte-lieux li:nth-child(4), .d-location .b-map .carte-lieux li:nth-child(5), .d-location .b-map .carte-lieux li:nth-child(7) { display: none; } .d-location .b-map .carte-repere__nom { font-size: 2rem; } .d-location .b-map .carte-repere__pastille { width: 5.6rem; height: 5.6rem; } } /* --- Badges flottants ----------------------------------------------------- Awwwards : rail fixé au bord droit, centré verticalement. « Adults only » : pastille cuivre débordant du coin du moteur, avec son texte circulaire qui tourne en 20 s. */ #awwwards { position: fixed; z-index: 999; top: 50%; right: 0; transform: translateY(-50%); } .d-motor .b-only-adults { position: absolute !important; height: 64px !important; width: 64px !important; right: 28px; top: -31px; border-radius: 100% !important; background-color: var(--or-clair); } .d-motor .b-only-adults svg { position: absolute; left: 8px; top: 8px; display: block; transform-origin: center; animation: rotate-svg 20s linear infinite; } @keyframes rotate-svg { to { transform: rotate(360deg); } } /* ========================================================================== DISPOSITION INTERNE DES SECTIONS Les sections avaient la bonne hauteur mais leur contenu se collait en haut, laissant le reste vide. Les offsets ci-dessous sont relevés dans la référence, exprimés en rem sur la base desktop (÷ 7,5 px). ========================================================================== */ /* Le rail est enveloppé d'un div intermédiaire qui est, lui, l'élément flex : sans `min-width: 0` il se dimensionne sur son CONTENU. Il ne doit PAS être `overflow: hidden` ici : les cartes pivotées débordent volontairement. */ .d-carousel-rooms .b-carousel > div:not(.b-btn-block) { flex: 1 1 auto; min-width: 0; width: 100%; } /* --- Localisation : la colonne contact est sur fond vert sombre ---------- Relevé : `.b-contact` porte le fond sombre sur toute sa moitié ; le titre est en cuivre, l'adresse et les liens en blanc, les icônes sociales en blanc. Le bloc de texte commence à 33,87 rem du bord de la colonne et fait 28,27 rem de large. */ .d-location .b-contact { background-color: var(--encre); } .d-location .b-contact > div { width: 28.27rem; margin-left: 33.87rem; } /* Écarts relevés dans la référence, en px depuis le haut de la section : titre 332, adresse 387, bouton 431, liens 484, bouton 528, réseaux 581. Soit, entre les blocs : 23 · 15 · 22 · 14 · 22 px. */ /* Le sur-titre : c'est lui qui donne son assise au bloc, et il manquait. */ .d-location .b-contact__lieu { color: var(--blanc); font-family: var(--titre-affichage); font-weight: 400; font-size: 2.4rem; line-height: 130%; margin: 0 0 .8rem; } /* 3,6 rem et non 2,4 : c'est la mesure de la référence (27 px à 1440). À 2,4 le nom du lieu passait sous l'adresse en présence, alors qu'il est la seule chose en or de la colonne. */ .d-location .b-contact .title { color: var(--or-clair); font-family: var(--titre-affichage); font-weight: 400; font-size: 3.6rem; line-height: 120%; margin: 0 0 2.4rem; } /* Les deux actions, en liens soulignés comme la référence — `.btn-underline` existe déjà dans la feuille, il servait aux cartes de la grille. */ .d-location .b-contact__lien { margin: 0 0 2.2rem; } .d-location .b-contact__joindre { margin: 0 0 2.2rem; } .d-location .b-contact__joindre a { font-family: var(--titre-affichage); font-size: 1.4rem; line-height: 140%; color: var(--blanc); } .d-location address { color: var(--blanc); font-style: italic; font-size: 1.4rem; line-height: 1.96rem; margin: 0 0 2rem; } .d-location .b-contact a { color: var(--blanc); } .d-location .b-contact .b-btn { margin: 0 0 2.93rem; } .d-location .b-contact ul:not(.b-social) { margin: 0 0 1.87rem; } .d-location .b-contact ul:not(.b-social) li a { font-size: 1.4rem; line-height: 2rem; } .d-location .b-contact .plain-text, .d-location .b-contact p { color: var(--blanc); font-size: 1.4rem; line-height: 2rem; } .d-location .b-social { display: flex; gap: 1rem; margin-top: 2.93rem; } .d-location .b-social .icons { width: 3.6rem; height: 3.6rem; background-color: var(--blanc); } /* --- Pied de page -------------------------------------------------------- Une seule rangée : à gauche le logo puis les colonnes de liens, à droite le bloc légal. Mesure : rangée de 182 rem à 5 rem des bords, haute de 14,73 rem, logo 15,07 rem, colonnes de liens 56,13 rem, bloc légal 27,33 rem. */ /* La rangée porte une marge négative de −0,75 rem : si le conteneur n'a pas le retrait correspondant, elle déborde des deux côtés. */ /* ⚠️ Le fond sombre du pied de page avait sauté dans une coupe trop large : texte blanc sur crème, donc invisible. */ footer { background-color: var(--encre); color: var(--blanc); } footer a { color: inherit; } footer .container-fluid { padding-inline: .75rem; } /* Tout se cale sur l'AXE DE L'EMBLÈME (Manon, 29/08 : « baisser le texte pour qu'il soit à la même hauteur que le logo de gauche »). Mesuré avant : les trois blocs partaient tous du même haut, à 2263 — mais l'emblème occupe 158 px de haut quand le bloc légal n'en fait que 56, si bien que leurs centres tombaient 51 px l'un au-dessus de l'autre. On centre au lieu de ferrer en haut : les centres se rejoignent, et les textes descendent. */ footer .b-block-global { display: flex; justify-content: space-between; align-items: center; /* ⚠️ min() : 182 rem valent 1 518 px quand le rem passe à 1 vw (768–991 px). Mesuré à 834 : le pied allait de 6 à 1 524, soit 690 px hors écran, sur les sept pages. C'était invisible tant que #smooth-wrapper était fixe et en `overflow: hidden` ; le défilement rendu au navigateur l'a mis au jour. */ width: min(182rem, calc(100% - 4rem)); margin-inline: auto; padding-block: 5rem 10rem; min-height: 14.73rem; } /* 27/09 : le pied se cale sur les marges de l'en-tête (logo à 5,75 rem du bord) au lieu de 2,75 rem — mesuré : logo du pied à 25 px, celui du haut à 52. */ @media (min-width: 768px) { footer .b-block-global { width: min(182rem, calc(100% - 10rem)); } } footer .b-block-global > div { display: flex; align-items: stretch; } footer .logo { width: 15.07rem; flex: 0 0 auto; } footer .logo img { width: 100%; height: auto; } /* Colonnes à largeur de contenu, 5 rem entre elles, liens à 1,4 rem / 1,96 rem d'interligne — mesuré : 10,5 px et 14,7 px à 1440. */ footer .b-links { display: flex; gap: 5rem; margin-left: 11.93rem; } footer .b-links ul { display: grid; align-content: center; gap: .93rem; } footer .b-links a { font-family: "Jost"; font-size: 1.4rem; line-height: 1.96rem; text-transform: uppercase; color: var(--blanc); } footer .b-links a:hover { color: var(--or-clair); } footer .b-legal { /* 27/09 : 1,3 rem et non 1,1 — mesuré à 9,9 px à 1440, le plus petit texte du site. */ width: 34rem; flex: 0 0 auto; font-family: "Jost"; font-size: 1.3rem; line-height: 1.9rem; color: rgba(255,255,255,.7); } footer .b-legal p { margin: 0 0 .4rem; } footer .b-legal ul { display: flex; gap: .6rem; margin-top: .6rem; } /* Un point médian entre les liens légaux : collés, ils se lisaient d'un bloc. */ footer .b-legal ul li + li::before { content: "·"; margin-right: .6rem; opacity: .6; } footer .b-legal a { color: var(--blanc); text-decoration: underline; } /* 26/10 — audit : entre 768 et ~950 px, le bloc légal (34 rem fixes) sortait de l'écran de 40 à 140 px sur toutes les pages. Dans cette plage, il passe sous les liens, ferré à gauche. */ @media (min-width: 768px) and (max-width: 991.98px) { footer .b-block-global { flex-wrap: wrap; justify-content: flex-start; row-gap: 4rem; } footer .b-legal { width: 100%; } } /* --- Apparitions au défilement ------------------------------------------- Mécanique recopiée telle quelle de la référence : l'élément porte `data-fade` et démarre à opacité 0 avec un décalage de 20 px ; la classe `.fade-animate` est l'état RÉVÉLÉ, posée par le script quand l'élément entre dans la fenêtre. Les tables de durée et de délai sont celles de la référence — noter que 2000 y donne 1,5 s et non 2 s. */ html:not(.no-js) [data-fade=fade-in] { transform: translate3d(0, 0, 0); } html:not(.no-js) [data-fade=fade-up] { transform: translate3d(0, 20px, 0); } html:not(.no-js) [data-fade=fade-down] { transform: translate3d(0, -20px, 0); } html:not(.no-js) [data-fade^=fade][data-fade^=fade] { opacity: 0; transition-property: opacity, transform; } html:not(.no-js) [data-fade^=fade][data-fade^=fade].fade-animate { opacity: 1; transform: none; } [data-fade][data-fade][data-fade-duration="100"] { transition-duration: .1s; } [data-fade][data-fade][data-fade-duration="700"] { transition-duration: .7s; } [data-fade][data-fade][data-fade-duration="1000"] { transition-duration: 1s; } [data-fade][data-fade][data-fade-delay="100"].fade-animate { transition-delay: .1s; } [data-fade][data-fade][data-fade-delay="700"].fade-animate { transition-delay: .7s; } [data-fade][data-fade][data-fade-delay="2000"].fade-animate { transition-delay: 1.5s; } @media (prefers-reduced-motion: reduce) { html:not(.no-js) [data-fade^=fade][data-fade^=fade] { opacity: 1; transform: none; transition: none; } } /* ========================================================================== COMPOSITIONS PROPRES AU MOULIN La référence gravait le lieu et le nom dans une image de logo unique. On les remet en TEXTE : traduisible en EN et DE, lisible par un lecteur d'écran, et la boîte ne bouge pas. Les tailles reprennent celles du logo d'origine. ========================================================================== */ /* --- La marque dans l'en-tête : emblème + nom sur une ligne --------------- Elle entre en glissant au premier défilement (voir `enTete` dans script.js). ⚠️ La BOÎTE du
  • ne bouge pas : seul son contenu se translate et s'estompe. Si on la faisait disparaître pour de bon, les cinq liens du menu sauteraient vers la gauche à chaque apparition — un tressautement à chaque retour en haut de page. `visibility` transite en escalier : elle bascule à la fin en sortant, au début en entrant. C'est ce qui sort le lien de l'ordre de tabulation tant qu'il est invisible, sans casser le fondu. */ .marque-lien { display: inline-flex; align-items: center; gap: 1.2rem; transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1), visibility .5s; } /* 20/09/2026 — Manon : « quand on est tout en haut du héros, le menu et le logo doivent être invisibles et apparaître quand on scroll. » Historique, pour que la décision reste lisible : le 19/09 `.marque-lien` avait été SORTI de cette règle, au motif qu'il n'y avait plus de doublon depuis que le héros porte la fenêtre et l'en-tête le logotype au O-meule. L'arbitrage change ici — ce n'est plus une question de doublon mais de premier écran : le héros doit s'ouvrir nu, sans aucune interface posée dessus. Le bouton Menu rejoint donc le masquage, ce qui est nouveau. `visibility` transite en escalier : elle bascule à la fin en sortant, au début en entrant — c'est ce qui sort les deux éléments de l'ordre de tabulation tant qu'ils sont invisibles, sans casser le fondu. ⚠️ Le masquage ne vaut QUE sur l'accueil et QUE sous le seuil de 60 px : c'est `enTete()` dans script.js qui pose `marque-au-repos`, et il exige un `.d-hero` sur `body.page-accueil`. Si le JS ne tourne pas, la classe n'est jamais posée et tout reste visible — le défaut est donc le cas sûr. */ body.marque-au-repos .b-logo-mobile .item, body.marque-au-repos .marque-lien, body.marque-au-repos .menu-bouton { opacity: 0; visibility: hidden; pointer-events: none; } body.marque-au-repos .b-logo-mobile .item, body.marque-au-repos .marque-lien { transform: translateX(-1.4rem); } body.marque-au-repos .menu-bouton { transform: translateX(1.4rem); } .menu-bouton { transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1), visibility .5s; } /* Filet de sécurité clavier : un héros plein écran sans élément focusable ne défile pas à la tabulation, et l'utilisateur au clavier se retrouverait sans aucun accès à la navigation. Dès qu'un élément de l'en-tête prend le focus, la barre revient — la règle l'emporte sur le masquage ci-dessus. */ body.marque-au-repos header:focus-within .marque-lien, body.marque-au-repos header:focus-within .menu-bouton, body.marque-au-repos header:focus-within .b-logo-mobile .item { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } .b-logo-mobile .item { transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1), visibility .5s; } @media (prefers-reduced-motion: reduce) { .marque-lien, .b-logo-mobile .item { transition: none; } } .marque-lien .logo { width: 3rem; height: 4.1rem; } /* Marque en capitales et liens en bas de casse : deux traitements pour une seule barre, ça se voyait. Tout passe en bas de casse, au même corps, et la marque se distingue par la police d'affichage plutôt que par la casse. */ .marque-nom { font-family: var(--titre-affichage); font-size: 2.8rem; font-weight: 400; letter-spacing: .02em; white-space: nowrap; color: var(--blanc); } /* --- Le héros : lieu, emblème, nom, sous-titre --------------------------- L'ensemble tient dans la boîte de 31,42 × 38,1 rem du logo d'origine. */ /* ⭐ Tout l'emblème monte d'un cran (Manon, 29/08 : « le logo home peut-on le mettre plus grand, ainsi que tout le titre avec Petite France etc »). Les quatre pièces grandissent ENSEMBLE, dans le même rapport — sinon la composition se déséquilibre : l'emblème ×1,4, le nom ×1,3, le lieu ×1,35, et l'arc du bas suit plus bas. Mesuré à 1440 × 900 : le bloc passe de ~324 à ~410 px de haut, il reste donc très au large dans la fenêtre, et la barre de réservation — qui est fixe, en bas — n'est pas touchée. */ .d-hero .b-block .hero-lieu { font-family: "Jost"; font-size: 1.55rem; font-weight: 400; letter-spacing: .38em; text-indent: .38em; /* l'interlettrage décentre : on compense */ text-transform: uppercase; color: rgba(255, 255, 255, .95); margin: 0 0 3.4rem; } .d-hero .b-block .logo { width: 15.3rem; height: 21rem; margin-inline: auto; } .d-hero .b-block .hero-nom { font-weight: 400; color: var(--blanc); font-size: 8.3rem; line-height: 1.06; letter-spacing: .01em; margin: 2.4rem 0 0; } .d-hero .b-block .hero-sous { font-family: "Jost"; font-size: 1.5rem; letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .88); margin: 1.6rem 0 0; } /* --- Le bouton, qui change de logique ------------------------------------- Plein vert avec texte blanc chez eux, pilule crème avec texte brun chez nous : il faut donc surcharger la couleur du texte, sinon il disparaît. */ /* --- Boutons -------------------------------------------------------------- Pilule crème sur fond clair, contour sur fond sombre. La flèche est une icône en masque, donc elle prend la couleur du texte. ⚠️ Ce bloc avait sauté dans une coupe trop large : les boutons revenaient au texte nu, avec un carré noir à la place de la flèche. */ .button { display: inline-flex; align-items: center; gap: 1rem; padding: 1.8rem 3rem; border-radius: 30px; border: 0; cursor: pointer; font-family: "Jost"; font-size: 1.4rem; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; background-color: var(--bouton); color: var(--sur-bouton); text-decoration: none; transition: all .5s cubic-bezier(.645, .045, .355, 1); } .button:hover { background-color: var(--brun); color: var(--blanc); } .button__flair { display: none; } .button__label { display: inline-flex; align-items: center; gap: 1rem; } .button .icons, .button__label .icons { width: 1.4rem; height: 1.4rem; background-color: currentColor; flex: 0 0 auto; } .ico-arrow-btn { -webkit-mask-image: url(assets/img/arrow-btn.svg); mask-image: url(assets/img/arrow-btn.svg); } .btn-underline { display: inline-block; position: relative; font-family: "Jost"; font-size: 1.3rem; line-height: 1.68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--or); border-bottom: 1px solid currentColor; padding-bottom: .3rem; } .btn-underline:hover { opacity: .7; } .button-border-green, .button-border-brown { background-color: transparent; color: var(--or); box-shadow: inset 0 0 0 1px currentColor; } .button-border-white { background-color: transparent; color: var(--blanc); box-shadow: inset 0 0 0 1px currentColor; } .button-white-opacity { background-color: rgba(255, 255, 255, .5); color: var(--encre); } .button-green { background-color: var(--bouton); color: var(--sur-bouton); } .button--stroke .icons { background-color: currentColor; } /* Le carrousel des pièces est la seule surface qui ne soit pas crème — et il porte un bouton. Comme la pilule vaut désormais le même beige que ce fond, elle s'y inverse en crème, sinon elle disparaît dans son propre support. */ .d-carousel-rooms .button-green { background-color: var(--creme); } .button-border-green, .button-border-brown { background-color: transparent; color: var(--or); box-shadow: inset 0 0 0 1px currentColor; } .button-border-white { background-color: transparent; color: var(--blanc); box-shadow: inset 0 0 0 1px currentColor; } .button-white-opacity { background-color: rgba(255, 255, 255, .5); color: var(--encre); } @media (max-width: 767.98px) { .d-hero .b-block .hero-nom { font-size: 5.2rem; } .marque-nom { font-size: 1.2rem; letter-spacing: .14em; } } /* ========================================================================== SURCHARGES MOBILES — EN FIN DE FEUILLE, ET C'EST VOLONTAIRE Les blocs de mise en page ajoutés après la media query la court-circuitaient : à spécificité égale, c'est l'ordre qui tranche. Tout ce qui doit gagner en mobile est donc regroupé ici, au dernier rang. ========================================================================== */ @media (max-width: 767.98px) { /* Le rail des chambres prend toute la largeur, le bouton passe dessous. */ .d-carousel-rooms .b-carousel { display: block; height: auto; } .d-carousel-rooms .b-carousel > div { width: 100%; min-width: 0; overflow: hidden; } .d-carousel-rooms .b-btn-block { position: static; transform: none; margin-top: 3rem; } /* Le pied de page s'empile : 182 rem valent 1 863 px sur un écran de 390. */ /* ⚠️ En colonne, `align-items: center` ne centre plus verticalement mais HORIZONTALEMENT : mesuré à 390 px, l'emblème et le bloc légal partaient au milieu pendant que les colonnes de liens restaient à gauche. On revient au ferrage à gauche dès que la rangée se casse. */ footer .b-block-global { flex-direction: column; align-items: flex-start; gap: 4rem; width: auto; margin-inline: 2rem; } footer .b-block-global > div { flex-wrap: wrap; gap: 3rem; } footer .b-links { margin-left: 0; flex-wrap: wrap; gap: 3rem; } footer .b-legal { width: 100%; } /* Le tiroir fermé ne doit pas élargir le document. */ .site-nav__menu .container, .site-nav__menu .row { max-width: 100%; } /* La colonne contact de la localisation, sur toute la largeur. */ .d-location .col-6 { flex: 0 0 100%; max-width: 100%; height: auto; } .d-location .b-contact > div { width: auto; margin: 4rem 2rem; } .d-location .b-contact .b-btn .button { width: auto; } } @media (max-width: 767.98px) { /* Toutes les largeurs fixes en rem, neutralisées d'un coup. Elles valaient leur mesure desktop et débordaient : 74,7 rem = 765 px et 102,7 rem = 1 051 px sur un écran de 390. C'est ce débordement qui élargissait le viewport de mise en page, et donc TOUS les éléments fixés (barre de contact, en-tête, tiroir, moteur) à 1 560 px. */ .d-carousel-rooms .b-intro > div, .d-featured-blog .b-title, .d-featured-blog .b-slider-blog, .d-info-list .b-info > div, .d-banner-full .b-block, .mwg_effect030 { width: auto; max-width: 100%; } /* --- `.d-info-list` en mobile : la photo AU-DESSUS du texte -------------- La largeur du bloc de texte était bien neutralisée juste au-dessus, mais pas celle de sa COLONNE : `.b-info` gardait son `flex: 0 0 38%`, soit 148 px sur un écran de 390. Le titre y descendait à huit signes par ligne et sortait du cadre par la droite. C'était déjà vrai avant le passage à Garamond — elle ne fait qu'allonger la colonne (901 px au lieu de 631) et rendre le défaut impossible à ne plus voir. La réponse est celle que le projet applique déjà partout ailleurs pour le même problème : sous 768 px, une moitié d'écran par colonne ne montre ni l'une ni l'autre, donc on empile. `.d-img-info` le fait dans pages.css, `.d-location` le fait quinze lignes plus haut. L'épinglage, lui, est déjà désactivé sous 768 px (script.js), donc rien à démêler de ce côté. ⚠️ Cette section vit sur la home, pas sur la page histoire : c'est une correction de débord, pas un choix de mise en page à reprendre. */ .d-info-list { height: auto; } .d-info-list .col-md-6 { height: auto; } .d-info-list .b-img, .d-info-list .b-info { flex: 0 0 100%; max-width: 100%; padding-inline: 0; } .d-info-list .b-img .img-div { height: 35rem; } .d-info-list .b-info > div { padding: 5rem 2rem 7rem; } .d-banner-full .b-block, .contact-bar .container-fluid-full { margin-inline: 2rem; } /* `margin` sur une colonne la pousse DEHORS sans réduire sa largeur : c'est du `padding` qu'il faut. */ .d-featured-blog .b-blog { width: auto; margin-inline: 0; padding-inline: 2rem; } /* Le bouton de l'intro du blog est calé à `left: 138,2 rem` en desktop — soit 1 415 px sur un écran de 390. Il repasse dans le flux. */ .d-featured-blog .b-intro { display: block; height: auto; } .d-featured-blog .b-intro .b-btn { position: static; margin-top: 3rem; } .d-featured-blog .container-1 { gap: 2rem; } } @media (max-width: 767.98px) { /* --- En-tête mobile ------------------------------------------------------ Relevé sur la référence en 390 : la rangée de liens est MASQUÉE, seul subsiste le logo à gauche et « FR · Menu » à droite. La barre de contact y fait 5,8 rem de haut au lieu de 3,8. */ .contact-bar { height: 5.8rem; } .contact-bar > div { height: 5.8rem; } .contact-bar .b-block { height: auto; padding-top: 1.6rem; } header { top: 5.8rem; } /* ⭐ Manon, 19/09 (3) : « le logo en haut à gauche sur deux lignes ». Il l'était déjà en desktop, mais PAS ici : en mobile la barre montrait `.b-logo-mobile`, qui est une image de la fenêtre — un seul bloc, pas de lignes du tout. Le logotype en texte était masqué, et la raison tenait dans le commentaire d'en bas : la rangée de liens faisait 620 px sur un écran de 390 et élargissait le viewport de mise en page. Cette raison a disparu avec les liens. `.b-menu-links` ne porte plus que la marque — mesurée à 222 px — et tient donc largement. On rend le logotype au mobile et on retire l'image, qui ferait doublon. */ .b-menu-links { display: flex; margin-left: 0; } .b-logo-mobile { display: none; } .b-logo-mobile .img-2 { display: none; } .b-logo-mobile .logo { width: 5rem; height: 6.9rem; } .b-menu-lang { right: 3rem; top: 3rem; gap: 3rem; } .b-menu-lang .item { display: none; } /* « Demander des dates » vit dans le tiroir */ .b-menu-lang .b-lang, .b-menu-lang .menu-toggle { display: flex; } /* --- Héros mobile -------------------------------------------------------- Le rem mobile vaut 10,24 px contre 7,5 en desktop : à valeur égale tout grossit de 37 %. Les tailles du héros sont donc reprises pour l'écran. */ .d-hero .b-block .hero-lieu { font-size: 1.4rem; letter-spacing: .3em; text-indent: .3em; margin-bottom: 2rem; } .d-hero .b-block .logo { width: 9.6rem; height: 13.2rem; } .d-hero .b-block .hero-nom { font-size: 5rem; margin-top: 2rem; } .d-hero .b-block .hero-sous { font-size: 1.05rem; letter-spacing: .18em; text-indent: .18em; } /* --- Moteur mobile : 78 % de large, empilé ------------------------------- */ .d-motor .b-motor-new > div { width: 100%; height: auto; flex-wrap: wrap; } /* La hauteur fixe de 8,4 rem (l. 351) n'était pas relâchée ici : une fois les colonnes empilées, la barre gardait sa hauteur d'une seule rangée et le bouton « Demander » sortait par le BAS. Mesuré à 375 × 812 : le bouton tombait à 895 px, soit 83 px sous le bord de l'écran. */ .d-motor .b-motor-new { height: auto; } .d-motor .b-inputs { width: 100%; height: auto; padding: 1.5rem 2rem; border-radius: 3px 3px 0 0; } /* ⚠️ Ici se cachait le pire défaut du site, et il était LITTÉRALEMENT invisible. `flex: 1 1 0` ne suffit pas à faire rétrécir une colonne : un élément flex garde `min-width: auto`, c'est-à-dire la largeur intrinsèque de son contenu. Or `.col-cal` contient DEUX champs `type="date"`, que le navigateur ne descend jamais sous ~164 px chacun. MESURÉ à 390 px, avant correction : la rangée intérieure fait 287 px de large, et les deux colonnes en réclamaient 481. « Arrivée/Départ » allait jusqu'à 436, et « Voyageurs » de 436 à 553 — soit ENTIÈREMENT hors de l'écran. Le `overflow-x: clip` de la l. 1242 découpait proprement le tout : aucune barre de défilement, aucun indice. Le champ n'existait simplement plus pour qui réservait depuis son téléphone. Identique à 360 et à 320. On empile au lieu de juxtaposer, et `min-width: 0` rend enfin les colonnes compressibles. Le filet séparateur passe de la gauche au haut, puisque les colonnes ne sont plus côte à côte. */ .d-motor .b-inputs { flex-wrap: wrap; } .d-motor .col-form { min-width: 0; } .d-motor .col-cal, .d-motor .col-persons { width: auto; flex: 1 1 100%; height: auto; } .d-motor .col-form + .col-form { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .28); margin-top: .6rem; padding-top: 1rem; } /* Les deux dates partagent la rangée : sans `min-width: 0` sur le champ lui-même, la colonne compressible ne sert à rien, il refuse de suivre. */ .d-motor .div-border .form-control { min-width: 0; } /* 1,2 et non 1,7 rem : à 320 px, les deux champs ne disposent que de 221 px. Mesuré, « jj/mm/aaaa » en réclame 108 — ça passe, mais sans marge. La taille du texte, elle, ne bouge pas : 1,9 rem vaut 16,0 px à 320, et descendre sous 16 px déclencherait le zoom automatique de Safari iOS. */ .d-motor .col-form { padding-inline: 1.2rem; } /* 86 % et non 78 : les 8 points gagnés sont exactement ce qui manquait aux deux champs de date pour tenir sur un écran de 320. */ .d-motor { width: 86%; } .d-motor .b-btn { width: 100%; flex: 0 0 100%; } .d-motor .btn { height: 6rem; } } /* ========================================================================== RÉGLAGES DU 29/08 — en-tête sans fond, héros en losange ========================================================================== */ /* --- La police d'affichage ------------------------------------------------ HARMOND retirée le 20/09 : deux coupes .otf (151 ko) déclarées et téléchargées par le navigateur, mais appelées par AUCUN sélecteur — mesuré au canvas, elles rendaient comme Georgia. Leur licence « Free for personal use » interdisait de toute façon l'usage commercial. Les fichiers sont retirés d'assets/fonts/. */ /* MAGILIO (Prioritype Co) — demandée par Manon le 29/08 pour le titre du héros. Je n'ai pas le fichier : Behance ne sert qu'un aperçu du projet, pas la fonte. Dépose `Magilio.otf` (ou .woff2) dans assets/fonts/, décommente le bloc ci-dessous et bascule `--titre-marque` sur "Magilio" — deux lignes. @font-face { font-family: "Magilio"; src: url(assets/fonts/Magilio.otf) format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } */ /* CRÈME ESPAÑA — déposée par Manon le 29/08 pour le titre du héros. Servie en .woff2 (42 ko) : c'est le format le plus léger de l'archive. */ @font-face { font-family: "Creme Espana"; src: url(assets/fonts/creme-espana.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Instrument Serif retirée le 20/09. Elle n'était plus que le second choix de la pile : mesuré au canvas, la pile rendait à 663 px — la largeur d'EB Garamond — et jamais aux 513 px d'Instrument Serif. Elle ne rendait donc nulle part, pour 43 ko téléchargés à chaque visite. */ :root { --titre-affichage: "Playfair", Georgia, serif; /* EB Garamond jusqu'au 25/09 */ --titre-marque: var(--titre-affichage); /* Creme Espana avant le 25/09 : tout le serif en Playfair, comme le logo du héros */ /* UNIQUEMENT le nom dans le héros */ } .d-hero .b-block .hero-nom { font-family: var(--titre-marque); } /* --- Les deux contacts, remontés au niveau du menu ------------------------ */ .b-menu-lang .b-joindre a { display: inline-flex; align-items: center; gap: .8rem; } .b-menu-lang .b-joindre .icons { width: 2rem; height: 2rem; } .ico-mail { -webkit-mask-image: url(assets/img/mail.svg); mask-image: url(assets/img/mail.svg); } /* --- L'EN-TÊTE SUR UN FOND CLAIR ----------------------------------------- Manon, 29/08 : « le menu en haut doit devenir marron sur fond blanc tout comme le formulaire ». Le script pose `sur-clair` sur CHAQUE jeton de la barre, et non sur l'en-tête entier : à `.d-info-list`, la photo occupe les 62 % de gauche et la crème les 38 % de droite — les liens de gauche doivent rester blancs pendant que « Contact » et « FR » passent en brun. Une bascule d'un seul tenant en aurait forcément sacrifié une moitié. L'ombre portée tombe en même temps : elle sert à décoller le blanc d'une photo, elle n'a rien à faire sous du brun sur de la crème. */ header .sur-clair, header .sur-clair a, header .sur-clair p, header .sur-clair .marque-nom { color: var(--encre); text-shadow: none; } header .sur-clair .icons { background-color: var(--encre); } /* L'emblème est une image, pas une icône en masque : on tient les deux versions dans le balisage et on montre celle qui va. */ .marque-lien .logo--sombre { display: none; } header .sur-clair .marque-lien .logo--blanc { display: none; } header .sur-clair .marque-lien .logo--sombre { display: inline; } /* Le bandeau net (Manon, 26/09) : « le header doit être en blanc net encadré, sur toutes les pages » — et PAS de fondu. Dès qu'un jeton passe sur du clair, l'en-tête prend un fond crème plein et un filet d'un pixel dessous. C'était jusqu'ici réglé page par page (histoire, logement, essais) ; c'est la règle. */ header { transition: background-color .4s ease, box-shadow .4s ease; } header:has(.item.sur-clair) { background-color: var(--creme); box-shadow: 0 1px 0 rgba(50, 32, 22, .08); } /* Tiroir ouvert, l'en-tête passe devant lui : le bandeau n'a plus à s'y voir. */ html body.tiroir-ouvert header, html body.tiroir-ouvert header:has(.item.sur-clair) { /* `html` : passe devant `body.ipd header:has(…)` des infos pratiques, qui masquait le haut du tiroir (audit 26/09) */ background-color: transparent; box-shadow: none; } /* --- Le héros en losange -------------------------------------------------- Deux arcs de cercle : le lieu bombe vers le haut, la promesse creuse vers le bas. Avec l'emblème et le nom au centre, l'ensemble dessine le losange. Les `textPath` portent du vrai texte, pas une image. */ .d-hero .b-block { display: grid; justify-items: center; } .hero-arc { display: block; width: 74rem; max-width: 100%; height: auto; overflow: visible; } .hero-arc text { font-family: "Jost"; font-size: 26px; font-weight: 400; letter-spacing: .34em; text-transform: uppercase; fill: rgba(255, 255, 255, .95); } /* Les extrémités de l'arc du bas remontent au niveau du titre : sans cet écart, « Le Moulin aux Épices » et « DORMIR DANS… » se percutaient. */ .hero-arc--haut { margin-bottom: -2rem; } .hero-arc--bas { margin-top: 3.4rem; } .hero-arc--bas text { font-size: 22px; letter-spacing: .26em; fill: rgba(255, 255, 255, .9); } /* La promesse à plat (25/09) : le drapeau a remplacé les arcs. Même Jost espacée en capitales que l'ancien arc, pour ne changer que la forme. */ .hero-promesse { margin: 3.2rem 0 0; font-family: "Jost", sans-serif; font-weight: 400; font-size: 1.9rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 12px rgba(20, 12, 8, .55); } @media (max-width: 767.98px) { .hero-promesse { font-size: 1.3rem; letter-spacing: .14em; margin-top: 2rem; } } /* --- Le titre qui s'allume : un mot ne se coupe pas ---------------------- Chaque caractère est un bloc en ligne (c'est ce que l'allumage pilote), et sans cette boîte-ci le navigateur casse la ligne entre deux LETTRES : « Stras / bourg ». Le mot devient insécable, la coupe retombe aux espaces. */ .text-reveal .title .mot { display: inline-block; white-space: nowrap; } /* Le texte à plat, pour les lecteurs d'écran et les moteurs : les arcs sont `aria-hidden`, il faut bien que la phrase existe quelque part. */ .hero-lecture-seule { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 767.98px) { /* Le texte doit tenir dans la LONGUEUR DU CHEMIN, pas dans la largeur de la boîte : le chemin fait ~600 unités, et 26 caractères à 34 px avec .22em d'interlettrage en demandaient 725. D'où le calibrage ci-dessous. */ .hero-arc { width: 100%; } .hero-arc text { font-size: 23px; letter-spacing: .14em; } .hero-arc--bas text { font-size: 20px; letter-spacing: .10em; } .hero-arc--haut { margin-bottom: -1rem; } .hero-arc--bas { margin-top: .8rem; } .b-logo-mobile .logo { width: 4.4rem; height: 6rem; } /* L'en-tête n'a plus de barre au-dessus de lui. */ header { top: 0; } .b-menu-lang .b-joindre { display: none; } /* la place manque : ils vivent dans le tiroir */ } /* --- Le texte qui s'allume lettre à lettre ------------------------------- */ .text-reveal .title > div { transition: color .25s linear; } @media (max-width: 767.98px) { /* Les retraits des rails sont dessinés pour le grand écran : 22 rem valent 225 px sur 390. On les ramène à l'échelle. */ .d-featured-blog .container-1 { padding-inline: 3rem; } .d-carousel-rooms .wrapper { padding-inline: 3rem; gap: 2rem; } .d-featured-blog .card { width: 26rem; } .d-featured-blog .card .img-div { width: 26rem; height: 38rem; } .d-featured-blog .card + .card { margin-left: -4rem; } } @media (max-width: 767.98px) { /* En dernier ressort : la rangée de liens de l'en-tête restait affichée et faisait 620 px de large sur un écran de 390 — c'est elle qui élargissait le viewport de mise en page, et donc tous les éléments fixés. */ /* ⚠️ Le `display: none !important` qui vivait ici est levé (voir plus haut) : il visait la rangée de LIENS, qui n'existe plus. Ne reste que la marque. */ header .b-menu-lang { position: absolute; right: 3rem; left: auto; max-width: 24rem; } } /* Filet de sécurité en petit écran : rien sur cette page ne doit défiler horizontalement. `clip` (et non `hidden`) borne le viewport de mise en page sans créer de conteneur de défilement — sans quoi un seul élément trop large fait grossir l'ICB, et TOUS les éléments fixés grossissent avec lui. */ /* ⚠️ À TOUTES LES LARGEURS depuis le 19/09, et non plus seulement en petit écran. Tant que `#smooth-wrapper` était fixe et en `overflow: hidden`, c'est LUI qui rognait les débordements au-dessus de 768 px. En rendant le défilement au navigateur, ce rognage a disparu et trois débordements préexistants sont remontés à la surface dans la bande 768–991, où le rem vaut 1 vw : le pied (182 rem = 1 518 px à 834, corrigé l. ~852), le carrousel de pièces de l'accueil, et le bloc contact de trois pages — 80 à 103 px. `clip` et non `hidden` : il borne le viewport de mise en page sans créer de conteneur de défilement, sans quoi un seul élément trop large ferait grossir l'ICB et tous les éléments fixés grossiraient avec lui. ℹ️ Ceci rétablit exactement ce qu'on voyait avant — rien n'a régressé — mais ce filet MASQUE deux défauts réels qui restent à traiter à la source. */ html, body { overflow-x: clip; max-width: 100%; } /* --- Bandeau de chiffres -------------------------------------------------- Trois repères entre l'accueil et la bannière, à l'emplacement de l'ancienne marquise. Trois colonnes égales, séparées par un filet, sur le fond crème. */ .d-chiffres { position: relative; background-color: var(--creme); padding-block: 5rem; } /* 9 → 5 rem : « moins d'espace blanc » (26/09) */ .d-chiffres .b-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); width: 150rem; max-width: 100%; margin-inline: auto; } .d-chiffres .b-chiffre { text-align: center; padding-inline: 4rem; } .d-chiffres .b-chiffre + .b-chiffre { border-left: 1px solid rgba(50, 32, 22, .14); } /* « Petite France » est plus long que les deux autres valeurs : on borne le corps pour que les trois colonnes gardent la même assise. */ .d-chiffres .valeur { font-family: var(--titre-affichage); font-weight: 400; font-size: 6.2rem; line-height: 1.1; /* 4,6 → 6,2 : « un peu plus grands » (25/09) */ color: var(--encre); margin: 0 0 1.8rem; } /* Une vignette à la plume au-dessus de chaque chiffre (Manon, 26/09). */ .d-chiffres .vignette { display: block; height: 7.4rem; width: auto; aspect-ratio: 56 / 44; margin: 0 auto 1.4rem; color: var(--encre); } .d-chiffres .vignette[data-vignette="voyageurs"] { aspect-ratio: 84 / 40; } .d-chiffres .vignette svg { display: block; width: 100%; height: 100%; overflow: visible; } .d-chiffres .valeur sup { font-size: .5em; vertical-align: super; } .d-chiffres .valeur span { font-size: .55em; color: var(--or); } .d-chiffres .libelle { font-family: "Jost"; font-size: 1.65rem; line-height: 2.5rem; /* 1,3 → 1,65 */ letter-spacing: .06em; color: rgba(50, 32, 22, .72); max-width: 32rem; margin-inline: auto; } @media (max-width: 767.98px) { .d-chiffres { padding-block: 6rem; } /* ⚠️ `margin-inline: 2rem` débordait : `.b-chiffres` EST la `.col-12`, donc une boîte déjà large de 100 %. Deux marges de 2 rem la poussaient à 100 % + 4 rem, soit 41 px de trop à 390 — et c'est tout le document qui s'élargissait, comme au bug n° 3 de la home (RAPPORT.md § 14). En retrait interne, la boîte reste dans ses 100 % : `box-sizing: border-box`. */ .d-chiffres .b-chiffres { grid-template-columns: 1fr; gap: 4rem; width: auto; padding-inline: 2rem; } .d-chiffres .b-chiffre { padding-inline: 0; } .d-chiffres .b-chiffre + .b-chiffre { border-left: 0; border-top: 1px solid rgba(50, 32, 22, .14); padding-top: 4rem; } .d-chiffres .valeur { font-size: 5rem; } .d-chiffres .libelle { font-size: 1.5rem; line-height: 2.3rem; } } /* --- La barre de réservation sur fond clair ------------------------------- Elle est blanche sur transparent : sur une section crème, elle disparaît. Le script pose `motor-clair` sur le body, et c'est le TRAIT et le TEXTE qui passent en brun — le fond, lui, reste transparent. */ body.motor-clair .d-motor .b-motor-new > div { background: transparent; border-color: rgba(50, 32, 22, .45); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ⭐ LE CAS À CHEVAL — celui que Manon a pointé en capture le 29/08 sur `.d-info-list` : la photo tient 62 % de la largeur, la crème 38 %, et la pilule traverse les deux. Le contour blanc disparaissait à droite, « DEMANDER » avec lui. Passer la pilule en brun ne suffit pas : le brun deviendrait à son tour illisible sur les 62 % de photo. On lui donne donc SON PROPRE FOND clair, posé seulement dans ce cas — le contour brun redevient visible d'un bout à l'autre, et le texte avec lui. ⚠️ Ce voile ne s'applique PAS aux sections entièrement claires : de la crème sur de la crème s'y verrait comme une tache, alors que le contour brun seul y suffit déjà. C'est `motor-voile`, et non `motor-clair`, qui le porte. */ body.motor-voile .d-motor .b-motor-new > div { background: rgba(245, 240, 234, .86); border-color: rgba(50, 32, 22, .5); box-shadow: 0 10px 40px rgba(20, 12, 6, .12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.motor-clair .d-motor .b-label label, body.motor-clair .d-motor .col-form > label { color: rgba(50, 32, 22, .62); } body.motor-clair .d-motor .form-control { color: var(--encre); } body.motor-clair .d-motor .form-control::placeholder { color: rgba(50, 32, 22, .75); } /* Sur la barre claire le texte repasse en brun : le glyphe doit redevenir sombre lui aussi, donc on lui retire l'inversion. */ body.motor-clair .d-motor input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: .7; } body.motor-clair .d-motor .btn { color: var(--encre); } body.motor-clair .d-motor .btn:hover { background: rgba(50, 32, 22, .08); } body.motor-clair .d-motor .col-form + .col-form, body.motor-clair .d-motor .btn { border-left-color: rgba(50, 32, 22, .28); } /* ========================================================================== APERÇU D'UNE PIÈCE Photo à gauche, texte à droite, sur le fond sombre de la maison. Le natif gère le focus et la touche Échap ; on ne fait que l'habiller. ========================================================================== */ .apercu { width: min(150rem, 92vw); max-width: none; height: min(88rem, 88vh); padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--encre); color: var(--blanc); box-shadow: 0 40px 90px -30px rgba(10, 6, 3, .7); } .apercu::backdrop { background: rgba(20, 12, 6, .78); backdrop-filter: blur(3px); } .apercu__cadre { height: 100%; } .apercu__piece[hidden] { display: none; } .apercu__piece { display: grid; grid-template-columns: 1fr 1fr; height: 100%; } /* La colonne de gauche porte TOUTES les photos dont on dispose pour la pièce, et non une seule (Manon, 29/08 : « les photos dispos »). La composition change avec leur nombre — une pleine hauteur, deux empilées, trois en L — plutôt que de forcer une grille fixe où une case resterait vide. */ .apercu__images { margin: 0; overflow: hidden; min-height: 0; display: grid; gap: .4rem; height: 100%; grid-template-columns: 1fr; } .apercu__images img { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; } .apercu__images--2 { grid-template-rows: 1.5fr 1fr; } .apercu__images--3 { grid-template-rows: 1.5fr 1fr; grid-template-columns: 1fr 1fr; } .apercu__images--3 img:first-child { grid-column: 1 / -1; } /* ⛔ `align-content: center` dans un conteneur qui DÉFILE rend le haut du contenu inatteignable dès qu'il déborde : mesuré sur mobile, l'aperçu du salon s'ouvrait sur « seul tenant : 45 m² » — l'œil et le titre étaient coupés au-dessus, et aucun défilement ne permettait d'y revenir. `safe center` centre tant que ça tient, et repart du haut sinon. */ .apercu__texte { display: grid; align-content: safe center; gap: 0; padding: 6rem 7rem; overflow-y: auto; } .apercu__oeil { font-family: "Jost"; font-size: 1.3rem; letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin: 0 0 2rem; } .apercu__titre { font-family: var(--titre-affichage); font-weight: 400; font-size: 5rem; line-height: 1.1; margin: 0 0 3rem; } .apercu__description { font-family: "Jost"; font-size: 1.8rem; line-height: 3rem; color: rgba(255, 255, 255, .84); margin: 0 0 2.4rem; } .apercu__sous { font-family: "Jost"; font-size: 1.3rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin: 0 0 1.6rem; font-weight: 400; } .apercu__equipements { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; list-style: none; font-family: "Jost"; font-size: 1.5rem; line-height: 2.4rem; color: rgba(255, 255, 255, .84); } .apercu__equipements li { position: relative; padding-left: 1.8rem; } .apercu__equipements li::before { content: ""; position: absolute; left: 0; top: 1rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--or); } /* Les trois commandes, posées par-dessus la photo. */ .apercu__fermer, .apercu__nav { position: absolute; z-index: 2; display: grid; place-items: center; width: 5.4rem; height: 5.4rem; border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; background: rgba(20, 12, 6, .45); color: var(--blanc); font-size: 1.8rem; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .3s ease, border-color .3s ease; } .apercu__fermer:hover, .apercu__nav:hover { background: rgba(20, 12, 6, .8); border-color: var(--blanc); } .apercu__fermer { top: 2.4rem; right: 2.4rem; } .apercu__nav--avant { top: 50%; left: 2.4rem; transform: translateY(-50%); } /* Les deux flèches restent DANS la moitié image : la seconde se cale sur le bord de la colonne, pas à une distance fixe qui tombait en plein milieu. */ .apercu__nav--apres { top: 50%; left: calc(50% - 7.8rem); transform: translateY(-50%); } /* Le curseur dit que la carte s'ouvre. */ .d-carousel-rooms .piece { cursor: pointer; } @media (max-width: 900px) { .apercu { width: 94vw; height: 90vh; } .apercu__piece { grid-template-columns: 1fr; grid-template-rows: 40% 60%; } .apercu__texte { padding: 4rem 3rem; align-content: start; } /* Les flèches remontent DANS la photo : à mi-hauteur de la boîte, elles tombaient au milieu du texte. */ .apercu__nav { top: 20%; } .apercu__titre { font-size: 3.6rem; } .apercu__equipements { grid-template-columns: 1fr; } .apercu__nav--apres { left: auto; right: 2.4rem; } } /* ========================================================================== LE CHROME S'EFFACE ========================================================================== Constat MESURÉ le 29/08 et non supposé : `header` est `fixed` avec `background: rgba(0,0,0,0)` à TOUTES les positions de défilement, et `.d-motor` est `fixed` en bas, 63 px, en permanence. Sondé à `elementFromPoint(80, 20)` à y = 1000, 2600 et 3400 : ce que l'on touche est `SPAN.marque-nom` — la marque s'imprime littéralement par-dessus le titre de section. Et la pilule recouvrait « Des colombages, des volets bleus… » comme l'avis « L'eau passe sous le plancher ». Deux bandes permanentes mangent donc le haut et le bas de CHACUNE des photos pleine page — sur un site dont l'argument entier est « regardez ce lieu ». Le chrome n'est jamais absent. ⚖️ Ce qu'on ne fait PAS : donner un fond à l'en-tête. Manon a tranché le 29/08 — « le menu en haut doit devenir marron sur fond blanc », d'où la bascule jeton par jeton de `sur-clair`. L'en-tête sans fond est une décision, pas un oubli. Ce qu'on fait : les deux se retirent pendant la DESCENTE et reviennent à la remontée, en haut de page, et à l'arrêt. La photo reçoit un écran entier ; la barre revient exactement au moment où l'on décide. Rien n'est retiré, aucune couleur ni forme nouvelle n'apparaît. ========================================================================== */ /* `chrome-actif` n'est posée qu'une fois l'entrée du site jouée : sans elle on écraserait le `transition-delay: 1.5s` de `[data-fade-delay="2000"]`, qui EST l'apparition de l'en-tête au chargement. Doublement de l'attribut pour passer devant la table des durées, comme le reste de cette feuille le fait déjà. */ body.chrome-actif header[data-fade][data-fade][data-fade] { transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .32s linear; } body.chrome-bas header[data-fade][data-fade].fade-animate, body.chrome-bas header[data-fade][data-fade] { transform: translate3d(0, -100%, 0); opacity: 0; pointer-events: none; } /* La pilule garde son centrage par translation : le retrait s'ajoute au `-50%` horizontal, il ne le remplace pas. `calc(100% + 3rem)` la sort de sous le bord bas, `bottom: 3rem` compris. */ body.chrome-actif .d-motor { transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .32s linear; } body.chrome-bas .d-motor { transform: translate(-50%, calc(100% + 3rem)); opacity: 0; pointer-events: none; } /* Mouvement réduit : le retrait reste — c'est une correction de recouvrement, pas un effet — mais il se fait sans glissement. */ @media (prefers-reduced-motion: reduce) { body.chrome-actif header[data-fade][data-fade][data-fade], body.chrome-actif .d-motor { transition: none; } } /* ========================================================================== LA COLONNE CONTACT : remise à une taille lisible ========================================================================== Manon, 30/08 : « ce texte plus grand ». ⛔ Et il y avait une ANOMALIE derrière, pas seulement un réglage trop petit. Le sur-titre est écrit `font-size: 2.4rem` plus haut dans cette feuille — mais il est rendu à 10,5 px. C'est un `

    `, et la règle `.d-location .b-contact p { font-size: 1.4rem }`, plus bas ET plus spécifique (0,2,1 contre 0,2,0), l'écrasait depuis le début. L'intention écrite dans le commentaire d'origine — « c'est lui qui donne son assise au bloc » — n'a jamais été appliquée. Mesuré à 1440 avant correction : adresse, e-mail, « OUVRIR DANS GOOGLE MAPS » et « DEMANDER CES DATES » à 10,5 px. La colonne fait 720 px de large et 900 de haut pour un bloc de 212 × 248 — 652 px de vide en dessous. La place ne manquait pas, elle n'était pas prise. ========================================================================== */ .d-location .b-contact > div { width: 40rem; } /* `p.b-contact__lieu` et non `.b-contact__lieu` : il faut passer devant la règle générique sur `p`, qui gagnait sur la spécificité comme sur l'ordre. */ .d-location .b-contact p.b-contact__lieu { font-size: 2.2rem; line-height: 140%; margin: 0 0 1rem; } .d-location .b-contact .title { font-size: 5rem; margin: 0 0 2.8rem; } .d-location address { font-size: 2rem; line-height: 160%; margin: 0 0 2.6rem; } .d-location .b-contact__joindre a { font-size: 1.9rem; } .d-location .b-contact ul:not(.b-social) li a { font-size: 2rem; line-height: 160%; } .d-location .b-contact .plain-text, .d-location .b-contact p { font-size: 2rem; line-height: 160%; } /* En petit écran l'échelle racine est déjà trois fois plus grande (2,625 vw contre 0,52) : reprises telles quelles, ces valeurs donneraient 20,5 px de texte courant et 51 px de titre sur 390. On les borne. */ @media (max-width: 767.98px) { .d-location .b-contact p.b-contact__lieu { font-size: 1.7rem; } .d-location .b-contact .title { font-size: 4rem; margin-bottom: 2.2rem; } .d-location address { font-size: 1.7rem; } .d-location .b-contact__joindre a { font-size: 1.6rem; } .d-location .b-contact ul:not(.b-social) li a, .d-location .b-contact .plain-text, .d-location .b-contact p { font-size: 1.7rem; } } /* --- Hors de la vue, pas hors du document -------------------------------- Pour un texte qui doit rester lisible par Google et par un lecteur d'écran sans s'afficher. `display: none` et `visibility: hidden` le retireraient des deux : il faut donc le réduire à un pixel et le rogner, la seule technique qui le garde dans l'arbre d'accessibilité. */ .hors-vue { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* --- Le logotype de l'en-tête (19/09/2026) ------------------------------- Manon a retenu le nom empilé au O-meule. Il remplace le couple « fenêtre + Le Moulin aux Épices » qui tenait la marque de la barre ; la fenêtre reste le signe du héros, du favicon et de la version mobile. Il a d'abord été composé en Fraunces, sous-ensemblée aux lettres du nom et auto-hébergée. Abandonnée le 19/09 : le lockup du héros ayant été arrêté en EB Garamond, deux serifs cohabitaient sur la même page. Le logotype reprend donc la fonte du site, et le fichier de 6,3 Ko a été supprimé. ⚠️ La règle qui reste, elle : toute fonte ajoutée ici s'auto-héberge. Passer par Google Fonts enverrait l'adresse IP de chaque visiteur à Google, ce qui contredirait la promesse « mesure sans cookies, aucun bandeau ». */ .marque-bloc { display: block; line-height: 1.14; text-align: left; } /* L'ombre que portait `.marque-nom` : sans elle, le logotype blanc se perd sur les zones claires de la photo du héros — neige, ciel, reflets sur l'eau. */ header .marque-bloc { text-shadow: 0 1px 12px rgba(20, 12, 8, .45); } header .sur-clair .marque-bloc { text-shadow: none; } .marque-bloc .l { display: block; white-space: nowrap; /* Gloock, comme le héros (Manon, 19/09 : « gloock partout »). Elle a d'abord été en Fraunces, puis en EB Garamond le temps que le nom du héros soit tranché ; le fichier fraunces-logo.woff2 a été supprimé au passage. ⚠️ Gloock est une didone : ses déliés sont très fins, et à 20 px dans la barre ils tombent sous le pixel sur un écran non-Retina. Le corps du logo est donc monté de 2 à 2,2 rem pour compenser — c'est le minimum qui tient. */ font-family: var(--titre-affichage), Georgia, serif; font-size: 2.25rem; letter-spacing: .1em; } .marque-bloc .ville { display: block; margin-top: .5rem; padding-left: .42em; font-family: "Jost", sans-serif; font-size: 1.05rem; letter-spacing: .42em; opacity: .78; } /* La meule remplace le O. Elle hérite de currentColor, donc elle suit la bascule `sur-clair` sans règle supplémentaire. Le trait est épaissi parce qu'à 1,4 rem de côté, 2,2 sur un viewBox de 40 ne rendrait que 0,8 px. */ .marque-meule { display: inline-block; width: .74em; height: .74em; vertical-align: -.02em; margin: 0 .04em; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; } /* Le logotype dans le pied de page (19/09/2026). Même dessin qu'en en-tête, plus grand : la place ne manque pas et c'est la dernière signature de la page. `footer .logo` imposait une largeur de 15,07 rem calibrée sur l'image de la fenêtre — le bloc de texte se dimensionne sur son contenu. */ footer .logo { width: auto; } .marque-lien--pied .marque-bloc .l { font-size: 2.3rem; } .marque-lien--pied .marque-bloc .ville { font-size: 1.1rem; margin-top: .8rem; } /* --- Le lockup du héros (19/09/2026) ------------------------------------- Le nom courbé au-dessus de la fenêtre, un filet, puis le lieu. Remplace `hero-lieu` + l'image de marque + `hero-nom`, qui faisaient trois blocs empilés là où il n'en faut qu'un. Les trois registres gardent la hiérarchie de trait du logo : le nom en EB Garamond, la fenêtre au trait moyen, le filet et le lieu plus discrets. */ .hero-marque { margin: 0; line-height: 0; /* ⚠️ La couleur ne s'hérite PAS ici : `body` porte l'encre brune, et l'ancienne composition la corrigeait classe par classe (.hero-lieu, .hero-nom). Sans cette ligne, le lockup se dessine en #322016 sur une photo sombre — présent, mesurable, et parfaitement invisible. */ color: var(--blanc); } /* Le lockup est borné par la LARGEUR et par la HAUTEUR : son ratio est de 200 sur 240, donc une largeur fixée en vw seule le fait exploser sur un écran bas — mesuré à 408 px de large dans 312 px de haut. */ .hero-marque svg { width: min(60rem, 76vw, 42vh); height: auto; overflow: visible; } .hero-marque__nom { font-family: var(--titre-affichage); font-weight: 400; font-size: 17px; letter-spacing: 3.4px; fill: currentColor; } .hero-marque__fenetre { fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; } .hero-marque__filet { stroke: currentColor; stroke-width: 1; opacity: .55; } .hero-marque__lieu { font-family: "Jost", sans-serif; font-weight: 400; font-size: 8.2px; letter-spacing: 2.05px; fill: currentColor; } /* Sur la photo du héros, le lockup blanc a besoin de la même ombre que le reste du bloc — neige, ciel et reflets sur l'eau sont des fonds clairs. */ .d-hero .hero-marque svg { filter: drop-shadow(0 1px 12px rgba(20, 12, 8, .45)); } /* Dans le menu, le logo tient sur UNE ligne et laisse tomber la ville (Manon, 19/09) : la barre fait 7,5 rem de haut, trois lignes y étaient à l'étroit, et « Strasbourg » est déjà dit par le héros et le pied. */ .marque-bloc--ligne .l { font-size: 2.2rem; letter-spacing: .085em; } /* --- L'apparition du bandeau de chiffres (19/09/2026) --------------------- Trois gestes qui se suivent : les filets de séparation se déploient du centre, les trois colonnes montent en cascade, et la note compte. Tout part d'une seule classe posée par l'observateur (script.js). */ /* Le séparateur passe de `border-left` à un trait absolu : une bordure ne s'anime pas en hauteur, un pseudo-élément si. */ .d-chiffres .b-chiffre + .b-chiffre { border-left: 0; } .d-chiffres .b-chiffre { position: relative; } .d-chiffres .b-chiffre + .b-chiffre::before { content: ""; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px; background: rgba(50, 32, 22, .14); transform: scaleY(0); transform-origin: center; transition: transform 1.1s cubic-bezier(.22, 1, .36, 1) .15s; } .d-chiffres.chiffres-animes .b-chiffre + .b-chiffre::before { transform: scaleY(1); } .d-chiffres .b-chiffre > * { opacity: 0; transform: translateY(1.8rem); transition: opacity .85s ease, transform .85s cubic-bezier(.22, 1, .36, 1); } .d-chiffres.chiffres-animes .b-chiffre > * { opacity: 1; transform: none; } /* La cascade : chaque colonne part 140 ms après la précédente, et à l'intérieur d'une colonne le libellé suit la valeur de 90 ms. */ .d-chiffres.chiffres-animes .b-chiffre:nth-child(1) .valeur { transition-delay: .05s; } .d-chiffres.chiffres-animes .b-chiffre:nth-child(1) .libelle { transition-delay: .14s; } .d-chiffres.chiffres-animes .b-chiffre:nth-child(2) .valeur { transition-delay: .19s; } .d-chiffres.chiffres-animes .b-chiffre:nth-child(2) .libelle { transition-delay: .28s; } .d-chiffres.chiffres-animes .b-chiffre:nth-child(3) .valeur { transition-delay: .33s; } .d-chiffres.chiffres-animes .b-chiffre:nth-child(3) .libelle { transition-delay: .42s; } /* ⚠️ Sans ce garde-fou, le bandeau reste invisible pour qui a désactivé les animations : l'état de départ est `opacity: 0`. Ici tout est posé d'emblée. */ @media (prefers-reduced-motion: reduce) { .d-chiffres .b-chiffre > *, .d-chiffres .b-chiffre + .b-chiffre::before { opacity: 1; transform: none; transition: none; } } /* --- La meule en filigrane (19/09/2026) ----------------------------------- Manon : « le petit dessin de moulin en grand, quasi ton sur ton vs le fond crème, en mode déco », qui tourne au défilement et va moins vite que la photo. La photo est resserrée de 62 % à 54 % pour lui laisser de l'air. ⚠️ `overflow: hidden` sur la section n'est pas décoratif : la meule déborde volontairement à droite, et sans cette ligne elle ajouterait une barre de défilement horizontale — le piège déjà rencontré deux fois ici. */ .d-info-list { overflow: hidden; } .d-info-list .b-img { flex: 0 0 54%; max-width: 54%; } .d-info-list .b-info { flex: 0 0 46%; max-width: 46%; } .deco-meule { position: absolute; z-index: 0; pointer-events: none; /* Ramenée à cheval sur la limite des deux colonnes (Manon, 19/09) : elle passe SOUS la photo, qui la recouvre en partie — c'est ce recouvrement qui donne la profondeur, plus encore que le parallaxe. */ top: 50%; left: 50%; width: 116rem; height: 116rem; margin-top: -58rem; margin-left: -58rem; /* .045 et non .07 : à 116 rem le dessin passe derrière le texte, et c'est le CONTRASTE qui gênait la lecture, pas la taille. Le trait du SVG est passé de 0,55 à 0,16 — il rendait 8,9 px à l'écran — puis remonté à 0,62 en trois fois, à la demande de Manon : 15 px à 967 px de large. C'est l'épaisseur de la version qui gênait — mais à 4,5 % d'opacité au lieu de 7 %, donc sans le contraste qui posait problème. */ color: rgba(50, 32, 22, .045); will-change: transform; } .deco-meule svg { width: 100%; height: 100%; display: block; } /* Le contenu repasse devant : `.b-info` était déjà en `position: relative`, la colonne image ne l'était pas. */ .d-info-list .b-img, .d-info-list .b-info { position: relative; z-index: 1; } @media (max-width: 991px) { .deco-meule { width: 82rem; height: 82rem; margin-top: -41rem; margin-left: -41rem; left: 80%; } } @media (prefers-reduced-motion: reduce) { .deco-meule { transform: none !important; } } /* --- La carte Google, au clic (19/09/2026) -------------------------------- Posée par-dessus l'illustration, en bas. Une fois la carte chargée, elle prend toute la colonne et le bouton disparaît. */ .carte-google { position: absolute; z-index: 3; left: 50%; bottom: 3rem; transform: translateX(-50%); text-align: center; width: max-content; max-width: 90%; } .carte-google__bouton { font-family: "Jost", sans-serif; font-size: 1.3rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-bouton); background: var(--bouton); border: 0; border-radius: 0; padding: 1.4rem 2.8rem; cursor: pointer; box-shadow: 0 10px 28px -8px rgba(20, 12, 6, .45); transition: background .3s ease; } .carte-google__bouton:hover { background: #fff; } .carte-google__bouton:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; } .carte-google__note { font-family: "Jost", sans-serif; font-size: 1.05rem; letter-spacing: .06em; color: var(--blanc); margin-top: .9rem; text-shadow: 0 1px 10px rgba(20, 12, 8, .7); } /* Une fois chargée, la carte remplace tout le contenu de la colonne. */ .d-location .img-div.carte-chargee > *:not(iframe) { display: none; } .d-location .img-div iframe { width: 100%; height: 100%; border: 0; display: block; } /* --- Gloock pour le nom du héros (19/09/2026) ----------------------------- Choix de Manon sur planche, contre EB Garamond, Newsreader, Young Serif, Instrument Serif, Fraunces et Literata. Didone contemporaine : pleins larges, déliés très fins. 3 Ko, réduite aux seules lettres du nom, auto-hébergée comme toutes les fontes du site. ⚠️ Le risque connu et accepté : ses déliés s'amincissent sur les zones claires de la photo. L'ombre portée du lockup est donc renforcée ici — c'est elle qui tient le dessin sur la neige, le ciel et les reflets. */ @font-face { font-family: "Gloock Logo"; src: url("assets/fonts/gloock-logo.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } .hero-marque__nom { font-family: var(--titre-affichage), Georgia, serif; } .d-hero .hero-marque svg { filter: drop-shadow(0 1px 14px rgba(20, 12, 8, .62)); } /* ════════════════════════════════════════════════════════════════════════════ LE TIROIR DE NAVIGATION (19/09/2026, second passage) ⭐ Manon : « enlever totalement le menu en haut de page et faire un menu trois barres qui s'ouvre au côté de la page. » Ce qui change dans la barre : les cinq liens partent, il ne reste que le logotype à gauche et, à droite, Contact / FR / le bouton. La barre retrouve donc la hauteur qu'il lui fallait pour porter le logo sur DEUX lignes. ═════════════════════════════════════════════════════════════════════════ */ /* --- Le logotype retrouve sa ville --------------------------------------- `marque-bloc--ligne` n'est plus posée nulle part : la règle qui écrasait le corps et l'approche est donc sans objet. Le bloc reprend le dessin commun (`.marque-bloc .l` + `.ville`), et l'ensemble se recentre dans les 7,5 rem de la rangée — deux lignes à 2,25 rem et 1,05 rem tiennent largement. */ header .marque-bloc .ville { font-size: 1rem; letter-spacing: .38em; opacity: .72; } /* --- Le bouton trois barres ----------------------------------------------- */ .menu-bouton { display: inline-flex; align-items: center; gap: 1.2rem; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; font-family: "Jost"; font-size: 2rem; font-weight: 400; letter-spacing: .02em; } .menu-bouton__mot { text-shadow: 0 1px 12px rgba(20, 12, 8, .45); } header .sur-clair .menu-bouton__mot { text-shadow: none; } .menu-toggle-2 { display: grid; gap: .5rem; width: 2.4rem; /* Une boîte de hauteur FIXE : les trois barres se superposent à l'ouverture, et sans hauteur imposée la rangée entière sauterait de 1,8 rem au clic. */ height: 1.7rem; align-content: space-between; } .menu-toggle-2 > span { display: block; width: 100%; height: .2rem; border-radius: .2rem; background: var(--blanc); transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .2s linear; } header .sur-clair .menu-toggle-2 > span { background: var(--encre); } /* Ouvert : la barre du haut et celle du bas se rejoignent au centre en croix, celle du milieu s'efface. Les .75rem sont la demi-hauteur de la boîte moins la demi-épaisseur du trait — la croix se ferme donc exactement au milieu. */ body.tiroir-ouvert .menu-toggle-2 > .one { transform: translateY(.75rem) rotate(45deg); } body.tiroir-ouvert .menu-toggle-2 > .two { opacity: 0; transform: scaleX(.2); } body.tiroir-ouvert .menu-toggle-2 > .three { transform: translateY(-.75rem) rotate(-45deg); } /* ⚠️ Mesuré sur galerie.html, et invisible à l'œil parce que le texte l'était littéralement : sur une page à fond crème, le script des fonds clairs pose `sur-clair` sur Contact et sur FR, donc `color: var(--encre)` — soit #322016. Or le tiroir ouvert glisse SOUS eux avec exactement ce fond : #322016 sur #322016, rapport de contraste 1:1. Les deux jetons ne disparaissaient pas, ils restaient là, illisibles. On les retire pendant l'ouverture plutôt que de les recolorer : le pied du tiroir porte déjà l'adresse de contact et les trois langues, les garder dans la barre serait de toute façon un doublon posé par-dessus son propre double. Le bouton, lui, reste — c'est lui qui ferme — et passe en crème. */ /* (La règle qui masquait Contact et FR pendant l'ouverture a été retirée le même jour : les deux jetons ne sont plus dans la barre du tout.) */ /* Sur le panneau brun, les barres redeviennent claires quoi que dise `sur-clair` : le bouton est alors POSÉ sur le tiroir, pas sur la page. */ body.tiroir-ouvert header .menu-toggle-2 > span { background: var(--creme); } body.tiroir-ouvert header .menu-toggle .menu-bouton__mot { color: var(--creme); text-shadow: none; } /* --- Le panneau ----------------------------------------------------------- */ .tiroir-voile { position: fixed; inset: 0; z-index: 30; background: rgba(24, 15, 10, .52); opacity: 0; transition: opacity .45s ease; } body.tiroir-ouvert .tiroir-voile { opacity: 1; } .tiroir { position: fixed; top: 0; right: 0; bottom: 0; z-index: 35; width: min(44rem, 86vw); background: var(--encre); color: var(--creme); /* L'ombre n'existe qu'OUVERT. Au repos, même poussé à 102 %, son flou de 6 rem débordait encore : une bande sombre courait le long du bord droit de toutes les pages sur fond crème (Manon, 26/09, captures à l'appui). */ transform: translateX(102%); box-shadow: -2rem 0 6rem rgba(20, 12, 8, 0); transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s ease; overflow-y: auto; overscroll-behavior: contain; } body.tiroir-ouvert .tiroir { transform: translateX(0); box-shadow: -2rem 0 6rem rgba(20, 12, 8, .45); } /* L'en-tête repasse AU-DESSUS du panneau pendant l'ouverture : c'est le même bouton qui ouvre et qui ferme, il doit rester cliquable. */ body.tiroir-ouvert header { z-index: 40; } /* Et il ne se rétracte plus : `chrome-bas` l'escamote à la descente, or on défile dans le tiroir. Sans ceci, la croix disparaît sous le bord haut. */ body.tiroir-ouvert header[data-fade][data-fade] { transform: none; opacity: 1; pointer-events: auto; } .tiroir-dedans { display: flex; flex-direction: column; justify-content: center; min-height: 100%; padding: 12rem 5rem 5rem; } .tiroir-liens { display: grid; gap: 2.6rem; margin: 0; } .tiroir-liens a { display: inline-block; font-family: var(--titre-affichage), Georgia, serif; font-size: 3.4rem; line-height: 1.1; letter-spacing: .02em; color: var(--creme); text-decoration: none; transition: color .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1); } .tiroir-liens a:hover, .tiroir-liens a:focus-visible { color: var(--or-clair); transform: translateX(.8rem); } /* La page courante : un filet à l'or, pas une couleur — le tiroir compte six entrées, six teintes différentes deviendraient du bruit. */ .tiroir-liens a[aria-current="page"] { color: var(--or-clair); } .tiroir-liens a[aria-current="page"]::after { content: ""; display: block; height: 1px; margin-top: .6rem; background: currentColor; opacity: .6; } /* Les entrées entrent en cascade DERRIÈRE le panneau, une fois qu'il est presque arrivé : le délai de base (.18s) est un peu moins que la durée du glissement, pour que les deux gestes se chevauchent au lieu de se suivre. */ .tiroir-liens li { opacity: 0; transform: translateX(2.4rem); } body.tiroir-ouvert .tiroir-liens li { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(.18s + var(--rang, 0) * .055s); } .tiroir-pied { margin-top: 6rem; padding-top: 3rem; border-top: 1px solid rgba(245, 240, 234, .18); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; font-family: "Jost"; font-size: 1.5rem; } .tiroir-pied a { color: var(--creme); text-decoration: none; opacity: .82; transition: opacity .3s ease; } .tiroir-pied a:hover, .tiroir-pied a:focus-visible { opacity: 1; } .tiroir-langs { display: flex; gap: 1.6rem; margin: 0; } .tiroir-langs a[aria-current="true"] { opacity: 1; color: var(--or-clair); } @media (max-width: 767.98px) { .tiroir { width: min(40rem, 92vw); } .tiroir-dedans { padding: 14rem 4rem 4rem; } .tiroir-liens { gap: 2.2rem; } .tiroir-liens a { font-size: 3rem; } /* --- La taille des cibles au doigt -------------------------------------- MESURÉ à 390 px : les entrées du menu faisaient 34 px de haut, l'adresse de contact 23, et FR/EN/DE 16 à 20 px de LARGE. Le seuil confortable est 44 px (Apple) / 48 (Google) — on était entre le tiers et la moitié. On agrandit la zone sensible sans toucher au dessin : c'est du remplissage interne, pas de la marge, donc rien ne bouge à l'écran. Le `gap` des liens descend de 2,2 à 1,4 rem pour que l'espacement PERÇU reste le même, le remplissage ayant pris le relais. */ .tiroir-liens { gap: 1.4rem; } .tiroir-liens a { padding-block: .7rem; } .tiroir-contact { display: inline-block; padding-block: 1.15rem; } /* La marge négative annule le remplissage sur les bords : la rangée du pied reste alignée sur le reste du tiroir, la cible seule grandit. */ .tiroir-langs { gap: 0; margin-inline: -1.45rem; } /* 1,45 rem de chaque côté : « FR » ne fait que 15 px de large, il faut ce remplissage pour amener la cible à 44. Mesuré après coup : 44 × 44. */ .tiroir-langs a { display: inline-block; padding: 1.15rem 1.45rem; } /* Le bouton qui ouvre et ferme le tiroir faisait 29 px de haut. La marge négative rend au pixel près ce que le remplissage prend : la position du bouton dans l'en-tête ne bouge pas, seule la zone sensible grandit. */ .menu-bouton { padding-block: .8rem; margin-block: -.8rem; } } @media (prefers-reduced-motion: reduce) { .tiroir, .tiroir-voile, .tiroir-liens li, .menu-toggle-2 > span { transition: none; } } /* ════════════════════════════════════════════════════════════════════════════ LE HÉROS RESPIRE, PUIS S'EFFACE (19/09/2026) ⭐ Manon : « une fake animation genre un zoom continu sur la photo du héros pour donner un peu de dynamisme et un effet vidéo » — et « quand je scroll, il faut que le logo disparaisse du héros d'une façon fun ». ═════════════════════════════════════════════════════════════════════════ */ /* --- Le zoom continu ------------------------------------------------------ `alternate` plutôt qu'une boucle simple : une boucle reviendrait d'un coup de 1,10 à 1,00 toutes les 28 s, et cette cassure est exactement ce qui trahit un faux mouvement. En aller-retour, la photo respire sans jamais sauter — c'est ce qui donne l'impression d'un plan filmé. Le pas est volontairement court (10 %) et long (28 s aller) : à peu près 0,4 % par seconde, soit sous le seuil où l'œil lit un mouvement. On ne le voit pas bouger, on sent juste que ce n'est pas une image fixe. */ @keyframes heros-respire { from { transform: scale(1); } to { transform: scale(1.10); } } .d-hero .img-div img { animation: heros-respire 28s ease-in-out infinite alternate; /* La photo fait déjà exactement la fenêtre ; sans `will-change`, Safari la repeint en entier à chaque image au lieu de la composer sur la carte. */ will-change: transform; } @media (prefers-reduced-motion: reduce) { .d-hero .img-div img { animation: none; } } /* --- La sortie du lockup : retirée le 26/10/2026 (voir script.js). --- */ /* Le logotype en en-tête mobile : le rem y vaut 10,24 px contre 7,5 en desktop, donc 2,25 rem y ferait 23 px au lieu de 17. On redescend pour que les deux lignes tiennent dans la barre sans toucher le bouton Menu. */ @media (max-width: 767.98px) { header .marque-bloc .l { font-size: 1.7rem; letter-spacing: .07em; } header .marque-bloc .ville { font-size: .8rem; letter-spacing: .3em; margin-top: .4rem; } } /* ════════════════════════════════════════════════════════════════════════════ LA MONTÉE MOT À MOT (19/09/2026) ⭐ Manon : « quand on scroll vers "Un seul logement, entier / Quatre fenêtres sur l'eau…", peux-tu faire un petit effet d'animation d'apparition ». Chaque mot part d'en dessous, légèrement incliné, et se redresse. Le décalage entre deux mots (.045 s) est court exprès : plus long, une phrase de onze mots met presque une seconde à finir de se poser et on attend la fin. ═════════════════════════════════════════════════════════════════════════ */ /* Le masque : chaque mot monte DEPUIS sa propre ligne, il ne traverse pas le texte au-dessus. Sans `overflow: hidden` sur la boîte de ligne, on voit les mots arriver par-dessus le sur-titre. */ .bloc-monte .mot-boite { display: inline-block; overflow: hidden; vertical-align: bottom; } .bloc-monte .mot-monte { display: inline-block; transform: translateY(105%) rotate(3deg); opacity: 0; } /* La rotation part de l'angle BAS-GAUCHE : pivoter sur le centre ferait sortir le mot par le haut du masque avant même d'avoir commencé à monter. */ .bloc-monte .mot-monte { transform-origin: 0% 100%; } .bloc-monte.monte .mot-monte { transform: none; opacity: 1; transition: transform .72s cubic-bezier(.22, 1, .36, 1), opacity .5s ease; transition-delay: calc(var(--rang, 0) * .045s); } /* Le sur-titre précède la phrase d'un souffle et ne se découpe pas : trois mots en capitales espacées, le découpage n'y ajouterait rien. */ .bloc-monte .p-section { opacity: 0; transform: translateY(1.2rem); } .bloc-monte.monte .p-section { opacity: 1; transform: none; transition: opacity .6s ease .05s, transform .6s cubic-bezier(.22, 1, .36, 1) .05s; } @media (prefers-reduced-motion: reduce) { .bloc-monte .mot-monte, .bloc-monte .p-section { transform: none; opacity: 1; transition: none; } } /* ════════════════════════════════════════════════════════════════════════════ LA SECTION PLAN, REFAITE (19/09/2026) ⭐ Manon : la carte Google à la place de l'illustration, la fenêtre du logo en filigrane derrière le bloc de contact, et les infos d'accès. ═════════════════════════════════════════════════════════════════════════ */ /* L'iframe remplit sa colonne. `border: 0` n'est pas décoratif : sans lui, le navigateur pose son liseré 3D par défaut le long des 120 rem de hauteur. Le filtre calme les couleurs de Google — le rouge des POI et le jaune des axes sont très saturés à côté d'une palette brun-crème — sans rien masquer : c'est le même geste que sur la photo du héros, et l'échelle reste lisible. */ .d-location .b-map .carte-google__cadre { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.72) contrast(.94) sepia(.12); } /* --- Le filigrane de la fenêtre ------------------------------------------- ⭐ Manon, 19/09 (4) : « mets-la plus grande et sous la carte, comme le moulin ». C'est exactement le traitement de `.deco-meule` : un très grand dessin à cheval sur la limite des deux colonnes, dont la carte recouvre la moitié gauche. Le recouvrement fait la profondeur ; un filigrane cadré pile dans sa colonne se lirait comme une illustration de plus. Il est donc accroché à la SECTION (déjà `position: relative`) et non plus au bloc de texte, qui ne pouvait pas le laisser déborder jusque sous la carte. */ .d-location .b-contact > div { position: relative; } .d-location .deco-fenetre { position: absolute; z-index: 0; pointer-events: none; /* À cheval sur la limite des colonnes, centré en hauteur. Le viewBox est en 2:3, donc 70 rem de large valent 105 rem de haut : sur les 120 rem de la section, il reste 7,5 rem d'air en haut et en bas. */ top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70rem; height: auto; fill: none; stroke: var(--blanc); /* Le dessin sculpté (25/09) trace en currentColor, avec ses épaisseurs déjà ramenées dans l'HTML au rapport 1,1 / 3,6. */ color: var(--blanc); /* 1,1 et non 2,2 : le trait du SVG suit l'échelle du dessin. À 34 rem, 2,2 rendait 4,7 px ; à 70 rem il en rendrait 9,7. On garde la MÊME épaisseur à l'écran — c'est le dessin qui grandit, pas le trait. */ stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; /* 14 % : mesuré contre le brun #322016, c'est le point où la fenêtre se voit franchement sans que le blanc du texte perde son fond. Au-delà, les montants du dessin passent DEVANT l'adresse à la lecture. */ opacity: .14; } /* La carte passe DEVANT le filigrane. `.b-map` était déjà positionnée mais sans z-index : entre deux frères positionnés, c'est l'ordre du DOM qui tranche, et le filigrane est écrit après. Sans cette ligne il passerait par-dessus la carte au lieu de disparaître dessous. */ .d-location .b-map { z-index: 1; } /* Le texte repasse devant. Sans ce `position: relative`, un enfant sans z-index reste sous un frère positionné, même posé après lui. */ .d-location .b-contact__texte { position: relative; z-index: 1; } /* --- Les infos d'accès ---------------------------------------------------- */ .d-location .b-contact__acces { margin: 0 0 2.2rem; padding: 0; display: grid; gap: 1rem; } .d-location .b-contact__acces li { position: relative; padding-left: 1.8rem; font-family: "Jost"; font-size: 1.4rem; line-height: 2rem; color: rgba(255, 255, 255, .82); } /* Un filet et non une puce : la colonne aligne déjà quatre blocs de texte au fer à gauche, des puces rondes y ajouteraient une quatrième forme. */ .d-location .b-contact__acces li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .9rem; height: 1px; background: var(--or-clair); } .d-location .b-contact__acces strong { color: var(--blanc); font-weight: 400; } /* Le sur-titre et le nom portaient `no-mobile` / `no-desktop` : le bloc logo en image qu'ils compensaient n'existe plus, la fenêtre en filigrane le remplace aux deux tailles. */ @media (max-width: 767.98px) { .d-location .deco-fenetre { width: 46rem; opacity: .12; } .d-location .b-contact__acces li { font-size: 1.5rem; line-height: 2.2rem; } /* La colonne carte a perdu sa hauteur avec `height: auto` sur le `col-6` : une iframe sans hauteur explicite s'effondre à 150 px par défaut. */ .d-location .b-map { height: 52rem; } } /* --- ESSAI Black Nory (20/09) -------------------------------------------- Rien ici n'affecte index.html : ces règles ne visent que les classes introduites par index-nory.html. À supprimer d'un bloc si l'essai est abandonné. */ /* `currentColor` ne traverse pas une balise : le fichier s'y charge comme une image, avec sa couleur par défaut. On le blanchit au filtre, le héros étant sur photo sombre. */ .hero-marque__nory { filter: brightness(0) invert(1); } .marque-bloc--nory { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; } .marque-nory { width: 15.5rem; height: auto; display: block; /* Le SVG est en currentColor ; posé en il perd l'héritage, donc on le teinte par filtre. La barre est sur photo sombre au premier écran. */ filter: brightness(0) invert(1); } header .sur-clair .marque-nory { filter: brightness(0) invert(.12); } @media (max-width: 767.98px) { .marque-nory { width: 11rem; } } /* Le lockup drapeau est LARGE (330 sur 160, soit un rapport de 2,06) là où l'ancien était haut (200 sur 240, rapport 0,83). Le plafond `42vh` posé sur la LARGEUR devenait donc absurde : il bornait à 20 vh de haut et laissait les deux tiers de l'écran vides. Recalculé pour plafonner la hauteur au même endroit qu'avant : 2,06 × 34 vh ≈ 70 vh. */ .hero-marque--drapeau svg { width: min(78rem, 88vw, 70vh); } @media (max-width: 767.98px) { /* En colonne étroite, l'emblème et le mot côte à côte deviennent minuscules. On rend la main à la largeur. */ .hero-marque--drapeau svg { width: min(94vw, 120vh); } } /* --- Le papier (25/09/2026) ------------------------------------------------- Posé sur le fond de page ET sur chaque section qui repeint son propre crème ou beige — sinon la section masque le grain du body. Jamais sur les photos, ni sur les fonds sombres : le grain y ferait de la neige. */ body, .d-advantages, .d-carousel-rooms, .d-visite, .d-featured-blog, .d-chiffres, .d-capacite, .d-chrono, .d-galerie-tete, .d-galerie, .d-escapades, .d-retour { background-image: var(--papier); } /* --- La visite (25/09/2026) ------------------------------------------------- Remplace le carrousel des pièces. Liste à gauche, une grande photo à droite ; la rose-meule tourne très lentement derrière la liste, ton sur ton. */ .d-visite { position: relative; overflow: hidden; background-color: var(--beige); background-image: var(--papier); padding: 12rem 0 12rem; } .d-visite .deco-rosace { position: absolute; z-index: 0; pointer-events: none; width: 92rem; height: 92rem; left: -18rem; top: 50%; margin-top: -40rem; color: var(--encre); opacity: .085; animation: rosace-tourne 240s linear infinite; } @keyframes rosace-tourne { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .d-visite .deco-rosace { animation: none; } } .d-visite > *:not(.deco-rosace) { position: relative; z-index: 1; } .visite__intro { text-align: center; max-width: 74.7rem; margin: 0 auto 8rem; } .d-visite .p-section { font-family: "Jost"; font-size: 1.4rem; line-height: 1.96rem; text-transform: uppercase; letter-spacing: .1em; color: var(--or); margin: 0 0 1.4rem; } .d-visite .visite__intro .title { font-family: var(--titre-affichage); font-size: 4.4rem; font-weight: 400; line-height: 5rem; color: var(--encre); margin: 0; } .visite__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10rem; align-items: center; max-width: 144rem; margin: 0 auto; padding-inline: 12rem; } .visite__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(50, 32, 22, .16); counter-reset: none; } .visite__item { border-bottom: 1px solid rgba(50, 32, 22, .16); } .visite__piece { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 5.6rem 1fr; align-items: baseline; padding: 2.2rem 0 2rem; } .visite__num { font-family: var(--titre-affichage); font-style: italic; font-size: 1.8rem; color: var(--or); } .visite__nom { font-family: var(--titre-affichage); font-size: 3.6rem; line-height: 1.1; color: rgba(50, 32, 22, .34); transition: color .45s, transform .6s cubic-bezier(.16, 1, .3, 1); } .visite__piece:hover .visite__nom, .visite__piece:focus-visible .visite__nom { color: rgba(50, 32, 22, .7); } .visite__piece:focus-visible { outline: 2px solid var(--or); outline-offset: .4rem; } .visite__item.est-active .visite__nom { color: var(--encre); transform: translateX(.8rem); } .visite__desc { margin: 0 0 0 5.6rem; max-height: 0; overflow: hidden; opacity: 0; font-family: "Jost"; font-size: 1.5rem; line-height: 2.3rem; color: var(--gris-chaud); transition: max-height .55s cubic-bezier(.16, 1, .3, 1), opacity .4s, margin .55s; } .visite__item.est-active .visite__desc { max-height: 10rem; opacity: 1; margin-bottom: 2.2rem; } .visite__ouvrir { display: inline-block; margin-left: .6rem; color: var(--encre); text-decoration: none; font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--or); padding-bottom: .2rem; } .visite__ouvrir:hover { color: var(--or); } .visite__scene { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: rgba(50, 32, 22, .06); } .visite__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.045); transition: opacity .8s ease, transform 1.8s cubic-bezier(.16, 1, .3, 1); } .visite__scene img.est-active { opacity: 1; transform: none; } .visite__pied { display: flex; justify-content: center; margin-top: 8rem; } @media (max-width: 1199.98px) { .visite__corps { padding-inline: 6rem; gap: 6rem; } } @media (max-width: 767.98px) { .d-visite { padding: 8rem 0; } .d-visite .deco-rosace { width: 60rem; height: 60rem; left: 50%; margin-left: -30rem; top: auto; bottom: -14rem; margin-top: 0; } .d-visite .visite__intro { margin-bottom: 4rem; padding-inline: 2rem; } .d-visite .visite__intro .title { font-size: 2.8rem; line-height: 3.4rem; } .visite__corps { grid-template-columns: 1fr; gap: 3rem; padding-inline: 2rem; } .visite__scene { order: -1; aspect-ratio: 4 / 3; } .visite__nom { font-size: 2.6rem; } .visite__piece { grid-template-columns: 4rem 1fr; padding: 1.6rem 0 1.4rem; } .visite__desc { margin-left: 4rem; font-size: 1.4rem; } .visite__pied { margin-top: 5rem; } } /* --- Playfair : l'interlettrage de Mont Rural (25/09/2026) ------------------ Mont Rural serre ses titres à −0,08 em sur des corps de 60 à 70 px. Les nôtres font 20 à 38 px : à cette taille, −0,02 em donne la même densité sans coller les lettres. Mesuré avant : TOUS ces titres étaient à `normal`, aucun réglage voulu n'est écrasé. */ h1, h2, h3, .title, .valeur, .visite__nom, .apercu__titre { letter-spacing: -.02em; } /* --- Le nouveau logo du héros (25/09/2026) ---------------------------------- Planche : essai-fenetre-homard.html (« A · Plume légère » + nom en « D »). Tout se règle sur UNE variable, --corps, la taille des capitales : l'anglaise, le lieu et la fenêtre en sont des multiples, la composition garde donc ses proportions de 320 px à l'écran large. */ @font-face { font-family: "Monsieur La Doulaise"; /* OFL — en attendant Canora (R-Typography), commerciale */ src: url(assets/fonts/monsieur-la-doulaise-latin-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: block; /* audit 26/09 : plus de police de secours à la place de l’anglaise au chargement ; préchargée dans chaque page */ } .hero-marque--plume { --corps: clamp(36px, 5.4vw, 84px); /* 25/09 : « trop petit » — était clamp(30px, 4.4vw, 66px) */ display: flex; flex-direction: column; align-items: center; margin: 0; line-height: 1; color: var(--blanc); font-weight: 400; } /* L'ombre portée de l'emblème, pour qu'il se lise sur la photo. */ .d-hero .hero-marque.hero-marque--plume { filter: drop-shadow(0 1px 12px rgba(20, 12, 8, .55)); } .hero-marque--plume .hero-marque__plume { width: calc(var(--corps) * 1.1); height: auto; overflow: visible; margin-bottom: calc(var(--corps) * .32); } .hero-marque__nom { display: flex; flex-direction: column; align-items: flex-end; } .hero-marque__caps { font-family: var(--titre-affichage); font-size: var(--corps); letter-spacing: .24em; margin-right: -.24em; text-transform: uppercase; white-space: nowrap; } .hero-marque__script { font-family: "Monsieur La Doulaise", cursive; font-size: calc(var(--corps) * 1.17); margin-top: -.2em; margin-right: -.18em; white-space: nowrap; letter-spacing: 0; } .hero-marque--plume .hero-marque__lieu { font-family: "Jost", sans-serif; font-size: max(10px, calc(var(--corps) * .19)); letter-spacing: .3em; margin: calc(var(--corps) * .3) -.3em 0 0; text-transform: uppercase; white-space: nowrap; } /* Le lieu en arc au-dessus de la fenêtre (25/09) : le viewBox passe de 116 à 176 unités de large, la fenêtre garde sa taille si la largeur suit (× 176/116). */ /* Arc éloigné (rayon 84, 25/09) : viewBox 168 → 188 de large, largeur × 188/168. */ .hero-marque--plume .hero-marque__plume { width: max(calc(var(--corps) * 2.38), 166px); margin-bottom: calc(var(--corps) * .3); } /* Mesuré : à 1,67 × le corps, le lieu en arc faisait 6 px de haut sur ordinateur et 3 px sur téléphone. Fenêtre + arc agrandis, avec un plancher à 150 px. */ .hero-marque__arc { font-family: "Jost", sans-serif; font-size: 13px; letter-spacing: 2.6px; text-transform: uppercase; fill: currentColor; stroke: none; } /* --- Le logo de l'en-tête = celui du héros (25/09/2026) ---------------------- Manon : « pour le logo en haut à gauche tu peux reprendre celui du héros ». En petit, on garde le NOM tel que composé dans le héros — LE MOULIN en capitales espacées, « aux Épices » en anglaise calée à droite dessous — sans la fenêtre ni le lieu, qui ne se liraient plus à cette taille. */ header .marque-bloc--plume { display: flex; flex-direction: column; align-items: flex-end; width: max-content; line-height: 1; } .marque-bloc--plume .mb-caps { font-family: var(--titre-affichage); font-weight: 400; font-size: 3.2rem; /* 2,4 → 3,2 : « plus grand » */ letter-spacing: .22em; margin-right: -.22em; text-transform: uppercase; white-space: nowrap; } .marque-bloc--plume .mb-script { font-family: "Monsieur La Doulaise", cursive; font-size: 4rem; letter-spacing: 0; margin-top: -.22em; margin-right: -.15em; white-space: nowrap; } @media (max-width: 767.98px) { .marque-bloc--plume .mb-caps { font-size: 2.1rem; } .marque-bloc--plume .mb-script { font-size: 2.7rem; } } /* « Menu » dans la typo du logo (25/09) : Playfair en capitales espacées, comme LE MOULIN. */ header .menu-bouton__mot { /* Même corps que LE MOULIN du logo de l'en-tête (Manon, 25/09) : 1,9 → 3,2 rem. */ font-family: var(--titre-affichage); font-weight: 400; font-size: 3.2rem; letter-spacing: .22em; text-transform: uppercase; } @media (max-width: 767.98px) { header .menu-bouton__mot { font-size: 2.1rem; } } /* = .mb-caps mobile */ /* --- Le moulin du tiroir (25/09/2026) --------------------------------------- */ /* En bas à droite du tiroir (Manon, 25/09). DANS le flux, placé après le pied (contact, langues) par `order` et calé à droite : en position absolue, il recouvrait la ligne et l'adresse sur écran étroit (mesuré). */ /* Puis remonté AU-DESSUS du pied (« le moulin quand même au-dessus de la barre contact », 25/09) : liens → moulin → pied. Le pied garde sa marge, réduite. */ .tiroir-liens { order: 0; } .tiroir-moulin { order: 1; } .tiroir-pied { order: 2; margin-top: 3rem; } .tiroir-moulin { align-self: flex-end; color: var(--creme); width: min(24rem, 60%); margin: 4.8rem -1rem 0 0; opacity: .92; pointer-events: none; } .tiroir-moulin svg { display: block; width: 100%; height: auto; overflow: visible; } /* Menu ouvert : le logo de l'en-tête se retire — sur écran étroit, il passait PAR-DESSUS le contenu du tiroir (mesuré en ouvrant le menu, 25/09). */ body.tiroir-ouvert header .marque-lien { opacity: 0; pointer-events: none; transition: opacity .3s ease; } /* ========================================================================== LA BARRE DE RÉSERVATION — « LE TRAIT ET SON BOUTON » (25/09/2026) ========================================================================== Manon a choisi la variante C de essai-reservation-trait.html : plus de pilule en verre dépoli. Les champs sont de simples filets blancs posés sur la photo, et « Demander » devient un vrai bouton rectangle au filet, qui se remplit de crème au survol. Les dates s'affichent en toutes lettres (« 12 décembre ») et le menu porte un chevron : c'est script.js (« barreAuTrait ») qui pose `.motor-trait` et enveloppe chaque champ. Sans script, les champs natifs restent en place. Sans boîte, rien ne garantit plus la lisibilité : un VOILE flou et sans bord (::before) assombrit juste ce qu'il faut derrière la barre. Il passe au crème dans le cas « à cheval » (motor-voile) et disparaît sur fond clair (motor-clair), où c'est le trait qui passe en brun. */ .d-motor .b-motor-new { height: auto; } .d-motor .b-motor-new > div { height: auto; align-items: flex-end; gap: 4rem; border: 0; border-radius: 0; background: none; overflow: visible; backdrop-filter: none; -webkit-backdrop-filter: none; } .d-motor .b-motor-new > div::before { content: ""; position: absolute; inset: -4rem -8rem -3rem; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(20, 12, 8, .5), rgba(20, 12, 8, .28) 55%, rgba(20, 12, 8, 0)); transition: opacity .4s ease, background .4s ease; } .d-motor .b-inputs { padding-inline: 0; height: auto; gap: 4rem; align-items: flex-end; } .d-motor .col-form { padding: 0; height: auto; justify-content: flex-end; } .d-motor .col-form + .col-form { border-left: 0; } .d-motor .col-cal { flex: 2 1 0; } .d-motor .b-label { gap: 4rem; height: auto; margin-bottom: .9rem; } .d-motor .b-label label, .d-motor .col-form > label { font-size: 1.3rem; letter-spacing: .2em; color: rgba(255, 255, 255, .82); margin-bottom: 0; } .d-motor .col-persons > label { margin-bottom: .9rem; } .d-motor .div-border { height: auto; gap: 4rem; } .d-motor .b-label label, .d-motor .div-border > * { flex: 1 1 0; min-width: 0; } /* Le champ au trait : un filet dessous, la valeur en Playfair, un chevron. */ .motor-trait .champ-trait { position: relative; display: block; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, .7); padding-bottom: .9rem; transition: border-color .3s ease; } .motor-trait .champ-trait:hover { border-bottom-color: #fff; } .motor-trait .champ-trait .valeur { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; font-family: var(--titre-affichage); font-size: 2.1rem; line-height: 1.3; color: var(--blanc); white-space: nowrap; } .motor-trait .champ-trait .valeur i { font-style: italic; opacity: .8; overflow: hidden; text-overflow: ellipsis; } .motor-trait .champ-trait .valeur i.rempli { font-style: normal; opacity: 1; } .motor-trait .champ-trait .chevron { flex: none; width: 1.1rem; height: .7rem; opacity: .8; transition: transform .3s ease; } .motor-trait .champ-trait:hover .chevron { transform: translateY(2px); } /* Le vrai champ, transparent, couvre tout : clic, clavier, sélecteur natif. */ .motor-trait .champ-trait .form-control { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .motor-trait .champ-trait .form-control option { color: var(--encre); } .motor-trait .champ-trait:focus-within { outline: 1px solid rgba(255, 255, 255, .7); outline-offset: .6rem; } /* Le bouton : un rectangle au filet, qui se remplit de crème au survol. */ .d-motor .b-btn { align-self: flex-end; } .d-motor .btn { height: 5.6rem; padding: 0 3.6rem; border: 1px solid rgba(255, 255, 255, .85); border-radius: 0; font-size: 1.3rem; letter-spacing: .24em; color: var(--blanc); background: transparent; transition: background-color .3s ease, color .3s ease, border-color .3s ease; } .d-motor .btn .fleche { display: inline-block; margin-left: 1rem; letter-spacing: 0; transition: transform .35s cubic-bezier(.22, 1, .36, 1); } .d-motor .btn:hover, .d-motor .btn:focus-visible { background: var(--creme); color: var(--encre); border-color: var(--creme); } .d-motor .btn:hover .fleche, .d-motor .btn:focus-visible .fleche { transform: translateX(.6rem); } /* Sur fond clair : plus de voile, le trait et le texte passent en brun. */ body.motor-clair .d-motor .b-motor-new > div { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.motor-clair .d-motor .b-motor-new > div::before { opacity: 0; } body.motor-clair .motor-trait .champ-trait { border-bottom-color: rgba(50, 32, 22, .55); } body.motor-clair .motor-trait .champ-trait:hover { border-bottom-color: var(--encre); } body.motor-clair .motor-trait .champ-trait .valeur { color: var(--encre); } body.motor-clair .motor-trait .champ-trait:focus-within { outline-color: rgba(50, 32, 22, .6); } body.motor-clair .d-motor .btn { color: var(--encre); border: 1px solid rgba(50, 32, 22, .7); } body.motor-clair .d-motor .btn:hover, body.motor-clair .d-motor .btn:focus-visible { background: var(--encre); color: var(--creme); border-color: var(--encre); } /* À cheval photo / crème : le voile revient, en crème, pour porter le brun. */ body.motor-voile .d-motor .b-motor-new > div::before { opacity: 1; background: radial-gradient(closest-side, rgba(245, 240, 234, .94), rgba(245, 240, 234, .8) 60%, rgba(245, 240, 234, 0)); } /* ⭐ Passée la photo, une CARTE et non plus un trait nu (27/09/2026). Sondé page par page (tools/_sous-barre.mjs) : sur la crème, le trait brun sans fond se posait À MÊME le texte — « Contenus et droits » des mentions légales, les paragraphes des escapades, les réponses des infos pratiques se lisaient à travers les champs. Et sur la grille de la galerie, le brun tombait sur les photos. La barre prend donc, dès qu'elle quitte la photo, un fond crème plein, un filet et une ombre douce : lisible sur la crème comme sur une photo, sans rien changer à sa taille (c'est le ::before qui s'élargit, la barre ne bouge pas d'un pixel). */ body.motor-clair .d-motor .b-motor-new > div::before, body.motor-voile .d-motor .b-motor-new > div::before { opacity: 1; inset: -2.4rem -3.2rem; border-radius: 2px; background: var(--creme); box-shadow: 0 0 0 1px rgba(50, 32, 22, .12), 0 1.6rem 4.8rem -1.6rem rgba(40, 24, 14, .28); } @media (max-width: 767.98px) { .d-motor .b-motor-new > div { flex-direction: column; align-items: stretch; gap: 2.2rem; } .d-motor .b-motor-new > div::before { inset: -3rem -2rem -2rem; border-radius: 3rem; filter: blur(0); } body.motor-clair .d-motor .b-motor-new > div::before, body.motor-voile .d-motor .b-motor-new > div::before { inset: -1.6rem -1.6rem; border-radius: 2px; } .d-motor .b-inputs { padding: 0; gap: 2.2rem; } .d-motor .col-form + .col-form { border-top: 0; margin-top: 0; padding-top: 0; } .d-motor .b-label, .d-motor .div-border { gap: 2.2rem; } .motor-trait .champ-trait .valeur { font-size: 1.9rem; } /* 16 px : pas de zoom auto sur Safari iOS */ .d-motor .b-btn { width: 100%; } .d-motor .btn { width: 100%; height: 5.2rem; } } /* --- La visite, layout revu (25/09/2026) -------------------------------------- Manon : « les photos un peu plus grandes », puis « faut revoir le layout ». Mesuré avant : à 1440, la photo faisait 466 × 373 px, soit un tiers de l'écran, dans une boîte de 1 080 px centrée. Maintenant, colonne de gauche = titre + liste + bouton, et la photo prend le reste JUSQU'AU BORD droit. */ .d-visite { padding: 12rem 0; } .visite__corps { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10rem; align-items: center; max-width: none; padding: 0 0 0 max(12rem, calc((100vw - 192rem) / 2)); } .visite__gauche .visite__intro { text-align: left; max-width: none; margin: 0 0 5rem; } .visite__gauche .visite__pied { justify-content: flex-start; margin-top: 5rem; } .visite__scene { aspect-ratio: auto; height: min(88vh, 96rem); min-height: 56rem; } @media (max-width: 1199.98px) { .visite__corps { padding-left: 6rem; gap: 6rem; } } @media (max-width: 767.98px) { .visite__corps { grid-template-columns: 1fr; gap: 3rem; padding: 0 2rem; } .visite__gauche { display: contents; } .visite__gauche .visite__intro { order: -2; text-align: center; margin-bottom: 1rem; padding-inline: 0; } .visite__scene { order: -1; height: auto; min-height: 0; aspect-ratio: 4 / 3; margin-inline: -2rem; } .visite__gauche .visite__pied { justify-content: center; margin-top: 2rem; } } /* --- Le logo du pied de page = celui de l'en-tête (25/09/2026) --------------- Manon : « change le logo du footer comme celui du haut ». Même composition (LE MOULIN en capitales espacées, « aux Épices » en anglaise calée à droite). */ footer .marque-bloc--plume { display: flex; flex-direction: column; align-items: flex-end; width: max-content; line-height: 1; color: inherit; } /* --- La barre au trait sur téléphone : repliée (25/09/2026) ------------------- Capture de Manon : empilée, la barre faisait ~218 px de haut et recouvrait le logo du héros (« sur téléphone le layout est complètement fucked up »). Repliée, il ne reste que « Demander → » ; le premier toucher déplie les champs dans un panneau brun opaque (script.js, `.ouvert`), le second envoie. */ @media (max-width: 767.98px) { .d-motor.motor-trait { width: calc(100% - 4rem); bottom: 2rem; } .d-motor.motor-trait .b-inputs { display: none; } .d-motor.motor-trait .b-motor-new > div { gap: 0; } .d-motor.motor-trait .b-motor-new > div::before { inset: -2.4rem -2rem -2rem; } .d-motor.motor-trait.ouvert .b-inputs { display: flex; margin-bottom: 2.6rem; } .d-motor.motor-trait.ouvert .b-motor-new > div::before { opacity: 1; inset: -2.6rem -2rem -2rem; border-radius: 0; background: rgba(50, 32, 22, .96); box-shadow: 0 -1.6rem 4rem rgba(20, 12, 8, .35); } /* Ouvert, le panneau est toujours brun : le texte reste crème, même au-dessus d'une section claire. */ body .d-motor.motor-trait.ouvert .champ-trait { border-bottom-color: rgba(255, 255, 255, .6); } body .d-motor.motor-trait.ouvert .champ-trait .valeur { color: var(--blanc); } body .d-motor.motor-trait.ouvert .b-label label, body .d-motor.motor-trait.ouvert .col-form > label { color: rgba(255, 255, 255, .78); } body .d-motor.motor-trait.ouvert .btn { color: var(--encre); background: var(--creme); border-color: var(--creme); } } /* --- La visite en mosaïque (25/09/2026) ---------------------------------------- Version D de essai-visite.html, choisie par Manon : « les images plus grandes, un trait plus fin entre les photos, le nom des pièces en typo calligraphie ». Cinq colonnes : le salon en grand (2 × 2), puis chambre, seconde chambre, salle de bain en haut ; cuisine et terrasse (large) en bas. Les six pièces sont visibles, bord à bord à 3 rem près, joint de 4 px. */ .d-visite--mosaique { padding: 11rem 0 12rem; } .d-visite--mosaique .visite__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 4rem; /* 27/09 : 5,75 rem, la marge du logotype de l'en-tête. À 3 rem le titre et le bouton collaient au bord (27 px à 1440) sous un logo posé à 52 px. */ padding: 0 5.75rem 0 max(5.75rem, calc((100vw - 192rem) / 2)); margin-bottom: 4.4rem; } .d-visite--mosaique .visite__tete .title { font-family: var(--titre-affichage); font-size: 4.4rem; font-weight: 400; line-height: 5rem; color: var(--encre); margin: 0; max-width: 20ch; } .d-visite--mosaique .visite__pied { margin: 0; flex: none; } .visite__mosaique { display: grid; gap: 4px; padding-inline: 3rem; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(260px, 25vw, 460px)); } .visite__tuile--1 { grid-column: 1 / 3; grid-row: 1 / 3; } .visite__tuile--6 { grid-column: 4 / 6; } .visite__tuile { position: relative; overflow: hidden; display: block; color: var(--blanc); text-decoration: none; border: 0; padding: 0; margin: 0; letter-spacing: 0; text-transform: none; font-size: inherit; } .visite__tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); } .visite__tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 12, 8, .6), rgba(20, 12, 8, 0) 48%); pointer-events: none; } .visite__tuile:hover img, .visite__tuile:focus-visible img { transform: scale(1.045); } .visite__tuile:focus-visible { outline: 2px solid var(--or); outline-offset: -2px; } .visite__legende { position: absolute; z-index: 1; left: 2.4rem; right: 2.4rem; bottom: 1.6rem; display: flex; align-items: baseline; gap: 1.2rem; } .visite__tuile .visite__num { font-family: var(--titre-affichage); font-style: italic; font-size: 1.6rem; color: var(--or-clair); } /* Le nom en anglaise, la calligraphie de « aux Épices ». */ .visite__tuile .visite__nom { font-family: "Monsieur La Doulaise", cursive; font-size: 4.6rem; line-height: 1.1; color: var(--blanc); text-shadow: 0 1px 14px rgba(20, 12, 8, .5); transform: none; } .visite__tuile--1 .visite__nom { font-size: 7rem; } .visite__voir { margin-left: auto; font-family: "Jost"; font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateX(-.6rem); transition: opacity .3s, transform .3s; } .visite__tuile:hover .visite__voir, .visite__tuile:focus-visible .visite__voir { opacity: 1; transform: none; } @media (max-width: 1199.98px) { .visite__mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 34vw; } .visite__tuile--1 { grid-column: 1 / -1; grid-row: auto; } .visite__tuile--1, .visite__tuile--6 { grid-row: span 1; } .visite__tuile--6 { grid-column: 1 / -1; } .visite__tuile--1 { grid-row: span 2; } } @media (max-width: 767.98px) { .d-visite--mosaique { padding: 7rem 0 8rem; } .d-visite--mosaique .visite__tete { flex-direction: column; align-items: flex-start; gap: 2.4rem; padding-inline: 2rem; margin-bottom: 3rem; } .d-visite--mosaique .visite__tete .title { font-size: 2.8rem; line-height: 3.4rem; } .visite__mosaique { padding-inline: 0; gap: 3px; grid-auto-rows: 46vw; } .visite__tuile--1 { grid-row: span 1; grid-auto-rows: 70vw; } .visite__tuile .visite__nom { font-size: 3.4rem; } .visite__tuile--1 .visite__nom { font-size: 4.6rem; } .visite__legende { left: 1.4rem; bottom: 1rem; } .visite__voir { display: none; } } /* Une seule ligne : « La seconde chambre » passait sur deux lignes à 276 px (mesuré). */ .visite__tuile .visite__nom { white-space: nowrap; font-size: 4.6rem; } /* 59 px de marge à 4 rem : on peut monter */ .visite__tuile--1 .visite__nom { font-size: 8rem; } .visite__legende { left: 2rem; right: 2rem; } /* --- La mosaïque « en huge », à la Badrutt's (25/09/2026) ----------------------- Manon : « plutôt en huge comme ça » (Suites / Rooms de Badrutt's Palace) : le nom en anglaise ÉNORME, centré sur la photo ; « Découvrir » souligné en bas à gauche ; plus de numéro. La taille suit la largeur de CHAQUE tuile (unités de conteneur `cqw`) : chaque nom remplit sa photo sans en sortir — les coefficients viennent de la chasse mesurée de chaque nom. Joint de 2 px. */ .visite__mosaique { gap: 2px; } .visite__tuile { container-type: inline-size; } .visite__tuile::after { background: linear-gradient(to top, rgba(20, 12, 8, .45), rgba(20, 12, 8, .12) 45%, rgba(20, 12, 8, .18)); } .visite__legende { inset: 0; display: block; } .visite__tuile .visite__num { display: none; } .visite__tuile .visite__nom { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); font-size: 20.8cqw; line-height: 1; white-space: nowrap; text-shadow: 0 2px 24px rgba(20, 12, 8, .35); } /* Mesuré : chaque nom couvre ~82 % de la largeur de sa tuile. */ .visite__tuile--1 .visite__nom { font-size: 27.3cqw; } /* Le salon */ .visite__tuile--3 .visite__nom { font-size: 13.7cqw; } /* La seconde chambre */ .visite__tuile--4 .visite__nom { font-size: 17.1cqw; } /* La salle de bain */ .visite__tuile--5 .visite__nom { font-size: 24cqw; } /* La cuisine */ .visite__tuile--6 .visite__nom { font-size: 13.2cqw; } /* La terrasse sur l'eau */ .visite__voir { position: absolute; left: 7%; bottom: 7%; margin: 0; font-family: "Jost"; font-size: 1.5rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: 1; transform: none; border-bottom: 1px solid currentColor; padding-bottom: .2rem; } .visite__tuile:hover .visite__voir { opacity: .85; } @media (max-width: 767.98px) { .visite__mosaique { gap: 2px; } .visite__voir { display: block; font-size: 1.2rem; left: 6%; bottom: 6%; } } @media (max-width: 767.98px) { .visite__tuile--1 { grid-row: span 2; } /* 375 × 173 mesuré : le salon reprend sa place de photo principale */ } /* --- La mosaïque comme Badrutt's « Suites / Rooms » (25/09/2026) --------------- Manon : « typo de la même taille, layout qui prend toute la page ». Mesuré sur badruttspalace.com à 1440 : deux colonnes de 720 px bord à bord, noms en anglaise à 139,7 px (9,7 vw), TOUS à la même taille. Ici : deux photos par rangée, pleine largeur, 88 vh de haut ; nom à 8,5 vw pour tous (les noms longs passent sur deux lignes au lieu de rétrécir). Remplace la grille 5 colonnes. */ .visite__mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: max(52rem, 88vh); padding-inline: 0; gap: 2px; } .visite__tuile--1, .visite__tuile--6 { grid-column: auto; grid-row: auto; } .visite__tuile .visite__nom, .visite__tuile--1 .visite__nom, .visite__tuile--3 .visite__nom, .visite__tuile--4 .visite__nom, .visite__tuile--5 .visite__nom, .visite__tuile--6 .visite__nom { font-size: 8.5vw; line-height: .95; white-space: normal; text-align: center; width: 88%; } .visite__voir { left: 5.8%; bottom: 8%; font-size: 1.9rem; } @media (max-width: 767.98px) { .visite__mosaique { grid-template-columns: 1fr; grid-auto-rows: 118vw; } .visite__tuile .visite__nom, .visite__tuile--1 .visite__nom, .visite__tuile--3 .visite__nom, .visite__tuile--4 .visite__nom, .visite__tuile--5 .visite__nom, .visite__tuile--6 .visite__nom { font-size: 17vw; } .visite__voir { font-size: 1.3rem; } } .visite__tuile .visite__nom { word-spacing: .18em; } /* l'espace de l'anglaise est trop serré : « Le salon » se lisait « Lesalon » */ /* ========================================================================== TÉLÉPHONE — PASSE GLOBALE (25/09/2026) ========================================================================== Manon : « optimise le layout sur téléphone au global ». Audit à 375 × 812 (tools/audit-mobile.mjs) sur les onze pages, avant correction : - les bannières photo gardaient leur hauteur desktop (120 rem = 1 181 px) et un bloc de 205 px de large pour un titre de 39 px : 1 617 px de texte, qui débordait au-dessus de la photo jusque dans les chiffres ; - les titres de section faisaient 35 à 49 px — 5 ou 6 mots par écran ; - le titre des escapades restait décalé de 157 px (marge desktop) ; - la fenêtre décorative de l'adresse passait SOUS le texte, par-dessus lui ; - des hauteurs fixes (120 rem) laissaient de grands vides ; - le pied de page était en 10,8 px. `#smooth-content` (présent sur les douze pages) donne la priorité sur les réglages par section sans `!important`. */ @media (max-width: 767.98px) { /* Titres : ~27 px, interligne serré. */ #smooth-content :is(h1, h2).title, #smooth-content .hero-titre { font-size: 2.8rem; line-height: 1.2; letter-spacing: -.015em; } #smooth-content .d-chrono .jalon .date { font-size: 3rem; } #smooth-content .d-chiffres .valeur { font-size: 3.8rem; } #smooth-content .d-chiffres .valeur span { white-space: nowrap; } /* Bannières photo : un écran de haut, texte centré, lisible. */ #smooth-content .d-banner-full { height: max(56rem, 86svh); } #smooth-content .d-banner-full .b-block { top: 50%; left: 50%; width: 86%; transform: translate(-50%, -50%); } #smooth-content .d-banner-full .title { font-size: 2.5rem; line-height: 1.35; margin-bottom: 2.4rem; } #smooth-content .d-banner-full .p-section { font-size: 1.2rem; margin-bottom: 1.4rem; } /* Escapades : le titre reprend toute la largeur. */ #smooth-content .d-featured-blog { height: auto; padding-block: 7rem; } #smooth-content .d-featured-blog .b-intro .b-title { margin-left: 0; width: auto; padding-inline: 1.4rem; } #smooth-content .d-featured-blog .b-intro { margin-bottom: 3.6rem; } /* Adresse : hauteur libre, et plus de décor sous le texte. */ #smooth-content .d-location { height: auto; } #smooth-content .d-location .deco-fenetre { display: none; } /* Pied de page : 12 px au lieu de 10,8. */ footer p, footer p a { font-size: 1.25rem; line-height: 1.6; } } @media (max-width: 767.98px) { footer a[href*="mentions"], footer a[href*="confidentialite"], footer p a, footer .b-legal a { font-size: 1.25rem; } #smooth-content .d-featured-blog .card .p-section { font-size: 1.2rem; } } /* Téléphone : intros de section centrées (Manon, 25/09 : « mets les textes au milieu »). */ @media (max-width: 767.98px) { #smooth-content .d-visite--mosaique .visite__tete { align-items: center; text-align: center; } #smooth-content .d-featured-blog .b-intro, #smooth-content .d-featured-blog .b-intro .b-title { text-align: center; } #smooth-content .d-featured-blog .b-intro .b-btn { display: flex; justify-content: center; } } /* --- La mosaïque en trois colonnes (26/09/2026) -------------------------------- Manon : « une mosaïque avec des lignes de 3 images, pour que ça prenne moins de place en hauteur ». Deux rangées de trois au lieu de trois rangées de deux, et 64 vh au lieu de 88 : la section passe d'environ 3 × 88 vh à 2 × 64 vh. Les noms restent tous à la même taille, mais relative à la TUILE (cqw) et non plus à l'écran : à 8,5 vw, « La chambre » débordait de sa tuile (capture de Manon). 16 cqw, et les noms longs passent sur deux lignes. */ .visite__mosaique { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max(40rem, 64vh); } .visite__tuile .visite__nom, .visite__tuile--1 .visite__nom, .visite__tuile--3 .visite__nom, .visite__tuile--4 .visite__nom, .visite__tuile--5 .visite__nom, .visite__tuile--6 .visite__nom { font-size: 16cqw; width: 90%; } .visite__voir { left: 7%; bottom: 7%; font-size: 1.6rem; } @media (max-width: 767.98px) { .visite__mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 64vw; } .visite__tuile .visite__nom, .visite__tuile--1 .visite__nom, .visite__tuile--3 .visite__nom, .visite__tuile--4 .visite__nom, .visite__tuile--5 .visite__nom, .visite__tuile--6 .visite__nom { font-size: 17cqw; } .visite__voir { font-size: 1.1rem; } } /* Menu : le texte un peu plus haut, l'illustration ne bouge pas (Manon, 26/09). Décalage relatif : il ne change pas le flux, donc le moulin et le pied du tiroir restent exactement où ils étaient. */ .tiroir-liens { position: relative; top: -5rem; } /* ========================================================================== LA SECTION ADRESSE EN CARTOUCHE (26/09/2026) ========================================================================== Manon a choisi la version B de essai-localisation.html : « c'est trop haut », « mets la cartouche ». La carte passe en pleine largeur (sépia doux, pour rejoindre la palette), et une fiche brune se pose dessus, à droite, avec une rangée de maisons à colombages au trait fin en tête. Hauteur : 58 vh au lieu de 120 rem. L'accès détaillé part sur « Venir et se garer » ; la fenêtre-décor, qui passait sous le texte, disparaît. */ .d-location--cartouche .deco-fenetre, .d-location--cartouche .b-contact__acces { display: none; } .d-location--cartouche iframe { filter: grayscale(.8) sepia(.28) contrast(.94) brightness(1.03); } .d-location--cartouche .vignette--rangee { display: block; width: 100%; aspect-ratio: 196 / 100; color: var(--creme); margin-bottom: 2.6rem; } .d-location--cartouche .vignette--rangee svg { display: block; width: 100%; height: 100%; overflow: visible; } @media (min-width: 768px) { .d-location.d-location--cartouche { height: max(46rem, 58vh); } .d-location--cartouche .row { position: relative; height: 100%; } .d-location--cartouche .col-6.b-map { position: absolute; inset: 0; max-width: none; width: 100%; flex: none; height: 100%; } .d-location--cartouche .col-6.b-contact { position: absolute; z-index: 2; right: clamp(3rem, 7vw, 14rem); top: 50%; transform: translateY(-50%); width: min(54rem, 88%); max-width: none; flex: none; height: auto; padding: 4rem 4.6rem 4.4rem; box-shadow: 0 2.4rem 6rem rgba(20, 12, 8, .28); } .d-location--cartouche .b-contact > div { width: auto; margin: 0; } } @media (max-width: 767.98px) { .d-location--cartouche .b-map { height: 42vh; } .d-location--cartouche .b-contact > div { margin: 3.6rem 2rem 4rem; } } /* La colonne porte `p-0` : le retrait passe sur le bloc intérieur. Les liens s'alignent en ligne au lieu de s'empiler (la fiche dépassait 500 px). */ .d-location--cartouche .b-contact > div { padding: 3.6rem 4.4rem 3.2rem; } .d-location--cartouche .b-contact .title { margin-bottom: 1.6rem; } .d-location--cartouche address { margin-bottom: 2.2rem; } .d-location--cartouche .b-contact__lien, .d-location--cartouche .b-contact__joindre { display: inline-block; margin: 0 2.4rem 1.4rem 0; } /* 26/10 — Nathalie a créé contact@lemoulinauxepices.com : l'adresse est rendue au cartouche (elle était masquée ici, et le pied de page ne la montre pas). */ @media (max-width: 767.98px) { .d-location--cartouche .b-contact > div { padding: 0; } } /* Mesuré : fiche de 465 px dans une section de 522 — trop juste. */ @media (min-width: 768px) { .d-location.d-location--cartouche { height: max(50rem, 64vh); } } .d-location--cartouche .vignette--rangee { width: 84%; margin-bottom: 2.2rem; } /* Le sépia de la carte : une règle `.carte-google__cadre` antérieure l'écrasait (eau bleue vive, mesuré). */ .d-location.d-location--cartouche .b-map iframe.carte-google__cadre { filter: grayscale(.8) sepia(.28) contrast(.94) brightness(1.03); } /* Cartouche, réglage (Manon, 26/09) : « élargis la carte en hauteur sans toucher l'étiquette, l'illus un peu plus petite, optimise le layout ». La section passe de 64 à 76 vh ; la fiche garde sa largeur ; la rangée de maisons perd un quart ; le rythme vertical de la fiche est resserré. */ @media (min-width: 768px) { .d-location.d-location--cartouche { height: max(58rem, 76vh); } } .d-location--cartouche .vignette--rangee { width: 64%; margin-bottom: 2.4rem; } .d-location--cartouche .b-contact > div { padding: 3.8rem 4.4rem 3rem; } .d-location--cartouche .b-contact__lieu { margin-bottom: .8rem; } .d-location--cartouche .b-contact .title { margin-bottom: 1.8rem; } .d-location--cartouche address { margin-bottom: 2.6rem; } .d-location--cartouche .b-contact__lien { margin: 0 2.4rem 1.2rem 0; } /* --- Escapades : un grand dessin en filigrane derrière les cartes (26/09/2026) --- Essai : trois décors au choix par ?deco= (voir essai-escapades.html). */ .d-featured-blog .deco-escapades { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; color: var(--encre); } .d-featured-blog > .container-fluid { position: relative; z-index: 1; } .deco-escapades svg { display: block; width: 100%; height: 100%; overflow: visible; } .deco-escapades .deco-e { position: absolute; } /* A — la rose de la cathédrale, immense, centrée derrière les cartes. */ .deco-escapades--rosace .deco-e { width: 118vh; aspect-ratio: 1; left: 50%; top: 58%; transform: translate(-50%, -50%); opacity: .07; } .deco-escapades--rosace .deco-e svg { animation: rosace-tourne 300s linear infinite; } /* B — le moulin, très grand, qui déborde à droite. */ .deco-escapades--moulin .deco-e { width: 74vw; aspect-ratio: 152 / 118; right: -10vw; bottom: -6vh; opacity: .085; } /* C — la rangée de maisons en frise, en pied de section, comme un horizon de quai. */ .deco-escapades--rangee .deco-e { width: 100%; aspect-ratio: 196 / 100; left: 0; bottom: -2vw; opacity: .09; } @media (prefers-reduced-motion: reduce) { .deco-escapades--rosace .deco-e svg { animation: none; } } /* La carte encore un peu plus haute (Manon, 26/09) : 76 → 88 vh, la fiche ne bouge pas. */ @media (min-width: 768px) { .d-location.d-location--cartouche { height: max(62rem, 88vh); } } /* La rose à la plume : un trait plus fin que la version nette, un peu plus présente. */ .deco-escapades--rosace .deco-e { opacity: .1; } /* La bande beige sous la mosaïque passe en crème (Manon, 26/09) : même fond que les Escapades qui suivent. */ .d-visite.d-visite--mosaique { background-color: var(--creme); } /* --- Le bruit dans le tunnel (essai D, généralisé à toutes les pages — audit 26/09) Dès que deux dates sont choisies, une note discrète au-dessus de la barre « Demander ». Une ligne, pas une section : voir la mémoire « bruit sans drame ». */ .d-motor .motor-note { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 6px; opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(620px, calc(100vw - 32px)); margin: 0; padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--creme); color: var(--encre); box-shadow: 0 4px 18px rgba(50, 32, 22, .16); font: 400 13.5px/1.4 "Jost"; transition: opacity .35s ease, translate .35s ease; } .d-motor .motor-note.visible { opacity: 1; translate: -50% 0; pointer-events: auto; } .d-motor .motor-note .vignette { flex: none; display: block; width: 28px; height: 22px; color: var(--brun); } .d-motor .motor-note a { color: var(--brun); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .2em; white-space: nowrap; } @media (max-width: 900px) { .d-motor .motor-note { border-radius: 14px; } } /* ========================================================================== TÉLÉPHONE — PASSE D'AUDIT (26/09/2026) ========================================================================== Mesuré à 375 × 812 (tools/_audit-design.mjs, _audit-captures.mjs). */ @media (max-width: 767.98px) { /* Les trois chiffres de l'accueil prenaient 870 px de haut, empilés et centrés. Une ligne chacun : la vignette à gauche, la valeur et son libellé à droite. La section tombe à environ 330 px. */ #smooth-content .d-chiffres { padding-block: 2.4rem; } #smooth-content .d-chiffres .b-chiffres { gap: 0; padding-inline: 2rem; } #smooth-content .d-chiffres .b-chiffre { display: grid; grid-template-columns: 9rem 1fr; column-gap: 2rem; align-items: center; text-align: left; padding: 2rem 0; } #smooth-content .d-chiffres .b-chiffre + .b-chiffre { border-top: 1px solid rgba(50, 32, 22, .14); padding-top: 2rem; } #smooth-content .d-chiffres .b-chiffre + .b-chiffre::before { display: none; } #smooth-content .d-chiffres .vignette { grid-row: 1 / 3; height: 5.4rem; margin: 0; justify-self: center; } #smooth-content .d-chiffres .valeur { font-size: 3.4rem; margin: 0 0 .4rem; align-self: end; } #smooth-content .d-chiffres .libelle { font-size: 1.45rem; line-height: 2.1rem; margin: 0; max-width: none; align-self: start; } #smooth-content .d-chiffres .vignette[data-vignette="voyageurs"] { height: auto; width: 9rem; } #smooth-content .d-chiffres .valeur span { white-space: nowrap; } #smooth-content .d-chiffres .b-chiffre:nth-child(3) .valeur span { display: block; font-size: .5em; line-height: 1.3; } #smooth-content .d-chiffres .valeur .sep { display: none; } /* Les noms des pièces, en anglaise blanche, disparaissaient sur les photos claires (chambre, cuisine, salle de bain). Le style reste — seul le voile s'assombrit, et l'ombre du texte se resserre pour détacher le trait fin. */ .visite__tuile::after { background: linear-gradient(to top, rgba(20, 12, 8, .55), rgba(20, 12, 8, .32) 55%, rgba(20, 12, 8, .28)); } .visite__tuile .visite__nom { text-shadow: 0 1px 2px rgba(20, 12, 8, .7), 0 0 18px rgba(20, 12, 8, .55); } /* « Demander », replié en bas d'écran, n'était qu'un contour de 1 px : sur une photo claire (galerie, mosaïque) on ne le lisait plus. Un fond brun plein — c'est le seul bouton d'action du site, il doit se voir partout. */ .d-motor.motor-trait:not(.ouvert) .btn { background: rgba(50, 32, 22, .9); color: var(--creme); border-color: transparent; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 .6rem 2rem rgba(20, 12, 8, .25); } /* Cibles tactiles : les liens soulignés du bloc adresse faisaient 20 px de haut. */ .b-contact .btn-underline, .d-article-sejour .btn-underline, .d-escapades .btn-underline { display: inline-block; padding-block: 1.2rem; } } /* La carte touche le pied de page, sur toutes les pages (Manon, 26/09) : la section adresse portait une marge basse de 1,2 rem — la bande crème de 11 px entre la carte et le pied. Déjà retirée sur l'essai D ; généralisé ici. */ main > .d-location, #smooth-content .d-location { margin-bottom: 0; } /* --- Escapades de l'accueil au téléphone : une rangée qu'on fait glisser au doigt (audit 26/09). Le jeu en éventail suivait le défilement vertical et poussait les cartes hors de l'écran sans qu'on puisse les ramener. Ici le défilement horizontal est natif, calé carte par carte ; script.js ne touche plus au rail sous 768 px. */ @media (max-width: 767.98px) { #smooth-content .d-featured-blog .b-slider-blog { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #smooth-content .d-featured-blog .b-slider-blog::-webkit-scrollbar { display: none; } #smooth-content .d-featured-blog .container-1 { width: max-content; gap: 1.2rem; padding: 1rem 2rem 3rem; transform: none !important; } #smooth-content .d-featured-blog .card { width: 27rem; scroll-snap-align: center; transform: none !important; } #smooth-content .d-featured-blog .card + .card { margin-left: 0; } #smooth-content .d-featured-blog .card .img-div { width: 27rem; height: 36rem; } #smooth-content .d-featured-blog .card .b-text { padding-inline: 2.4rem; } } /* ========================================================================== APERÇU D'UNE PIÈCE — refonte (Manon, 26/09 : « améliore le design de ce truc ») Le panneau brun à puces dorées pesait : texte sur fond crème, comme le reste du site ; les équipements en étiquettes ; les flèches quittent la photo pour se ranger en bas du texte, là où l'on vient de finir de lire. Rien ne change dans le script : mêmes boutons, mêmes classes. ========================================================================== */ /* Manon, 26/09 (2) : « j'aimais bien le marron, et j'aime pas les bulles » — le fond brun revient, les équipements redeviennent une liste, en deux colonnes filetées, le tiret doré de la page Logement à la place des puces. */ .apercu { border-radius: 4px; } .apercu__piece { grid-template-columns: 1.15fr 1fr; } .apercu__images { gap: 3px; background: var(--encre); } .apercu__images--2 { grid-template-rows: 2fr 1fr; } .apercu__texte { padding: 7rem 7rem 12rem; align-content: safe center; } .apercu__oeil { margin-bottom: 1.4rem; display: flex; align-items: center; gap: 1.2rem; } .apercu__oeil::before { content: ""; width: 2.8rem; height: 1px; background: var(--or); } .apercu__titre { font-size: 5.4rem; margin-bottom: 2.4rem; } .apercu__description { font-size: 1.75rem; line-height: 1.7; max-width: 58ch; margin-bottom: 3.6rem; } .apercu__equipements { grid-template-columns: 1fr 1fr; gap: 0 3.2rem; font-size: 1.5rem; line-height: 1.4; } .apercu__equipements li { padding: 1rem 0 1rem 2.4rem; border-bottom: 1px solid rgba(255, 255, 255, .12); } .apercu__equipements li::before { content: "—"; top: 1rem; width: auto; height: auto; border-radius: 0; background: none; color: var(--or); } .apercu__fermer, .apercu__nav { width: 4.6rem; height: 4.6rem; font-size: 1.6rem; background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, .35); backdrop-filter: none; -webkit-backdrop-filter: none; } .apercu__fermer:hover, .apercu__nav:hover { background: var(--creme); color: var(--encre); border-color: var(--creme); } .apercu__fermer { top: 2.4rem; right: 2.4rem; } /* Les flèches, ensemble, en bas à droite du panneau de texte. */ .apercu__nav--avant, .apercu__nav--apres { top: auto; bottom: 3.4rem; transform: none; } .apercu__nav--avant { left: auto; right: calc(3.4rem + 4.6rem + 1rem); } .apercu__nav--apres { left: auto; right: 3.4rem; } @media (max-width: 900px) { .apercu { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; } .apercu__piece { grid-template-columns: 1fr; grid-template-rows: 38% 62%; } .apercu__images--2 { grid-template-rows: 1fr; } .apercu__images--2 img + img, .apercu__images--3 img + img { display: none; } /* une photo au téléphone, la place va au texte */ .apercu__images--3 { grid-template-columns: 1fr; grid-template-rows: 1fr; } .apercu__texte { padding: 3.2rem 2.4rem 10rem; align-content: start; } .apercu__titre { font-size: 3.6rem; margin-bottom: 1.6rem; } .apercu__description { font-size: 1.6rem; margin-bottom: 2.6rem; } .apercu__fermer { top: 1.6rem; right: 1.6rem; background: rgba(50, 32, 22, .7); } .apercu__nav { top: auto; background: var(--encre); box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .35); } .apercu__equipements { grid-template-columns: 1fr; } .apercu__nav--avant, .apercu__nav--apres { bottom: 2rem; position: fixed; } .apercu__nav--avant { right: calc(2rem + 4.6rem + 1rem); } .apercu__nav--apres { right: 2rem; } } /* --- La carte au clic (audit 26/09) ------------------------------------------ Google Maps pesait 1,5 à 2 Mo de script à chaque page et déposait ses cookies sans rien demander. À la place : l'aquarelle de la Petite France, et la carte interactive ne se charge qu'au clic. Pas de bandeau cookies nécessaire. */ .d-location .b-map .carte-facade { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--beige); overflow: hidden; } .d-location .b-map .carte-facade img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); } .d-location .b-map .carte-facade:hover img { transform: scale(1.03); } /* 21/10 : le bouton quitte le bas de la carte. Il y tombait exactement sous la barre de réservation, fixée elle aussi à 3 rem du bas — « AFFICHER LA CARTE » et « VOYAGEURS » se chevauchaient. Il se pose au centre de la partie libre de l'illustration (à gauche du cartouche en desktop, au milieu en mobile). */ .carte-facade__bouton { position: absolute; left: 50%; top: 40%; translate: -50% -50%; white-space: nowrap; padding: 1.3rem 2.6rem; border-radius: 999px; background: var(--encre); color: var(--creme); font: 500 1.35rem/1 "Jost"; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 .6rem 2rem rgba(20, 12, 8, .3); } .carte-facade:hover .carte-facade__bouton, .carte-facade:focus-visible .carte-facade__bouton { background: var(--brun); } .carte-facade:focus-visible { outline: 2px solid var(--or); outline-offset: -4px; } /* Sur l'accueil aussi, la carte touche la bannière photo qui suit : le petit espace voulu le 26/09 est retiré (Manon, 26/10 : « enlève l'écart blanc »). */ @media (min-width: 768px) { .d-location--cartouche .carte-facade__bouton { left: 28%; } } @media (max-width: 767.98px) { .carte-facade__bouton { top: 50%; } } /* en mobile la barre ne passe pas sur la carte : le bouton reste au centre */ /* La rose plus grande (Manon, 27/09) : 118 → 150 vh. */ .deco-escapades--rosace .deco-e { width: 150vh; } /* …et en fond de l'article sur la cathédrale. */ .d-article { position: relative; overflow: hidden; } .d-article > .deco-escapades { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: var(--encre); } .d-article > .deco-escapades--rosace .deco-e { width: min(140vh, 130vw); top: 50%; } .d-article > .d-article__section { position: relative; z-index: 1; } /* --- Bandeau cookies (27/09) : discret, en bas à gauche, au-dessus de la barre « Demander ». */ .cookies { position: fixed; z-index: 60; left: 2rem; bottom: 11rem; width: min(46rem, calc(100vw - 4rem)); padding: 2rem 2.2rem; border-radius: 4px; background: var(--encre); color: var(--creme); box-shadow: 0 1.2rem 4rem rgba(20, 12, 8, .35); font: 400 1.45rem/1.55 "Jost"; } .cookies p { margin: 0 0 1.6rem; } .cookies a { color: var(--creme); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .2em; } .cookies__boutons { display: flex; gap: 1rem; } .cookies button { flex: 1; padding: 1.2rem 1.6rem; border-radius: 999px; font: 500 1.25rem/1 "Jost"; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border: 1px solid rgba(245, 240, 234, .5); background: transparent; color: var(--creme); } .cookies button[data-choix="oui"] { background: var(--creme); color: var(--encre); border-color: var(--creme); } .cookies button:hover { border-color: var(--creme); } @media (max-width: 767.98px) { .cookies { left: 1.6rem; right: 1.6rem; width: auto; bottom: 9rem; font-size: 1.4rem; } } /* La rose ENTIÈRE (Manon, 27/09 : « elle est coupée ») : à 150 vh elle dépassait la section, qui la rognait en haut. Elle prend toute la hauteur de la section, centrée — aussi grande que possible sans être coupée. */ .d-featured-blog .deco-escapades--rosace .deco-e { width: auto; height: 100%; aspect-ratio: 1; top: 50%; } /* --- Zones supprimées depuis /admin ----------------------------------------- tools/contenu.mjs pose `data-cms-masque` sur un texte ou un cadre que Nathalie a retiré. Caché partout, sauf dans l'admin en mode Modifier, qui le montre pâli pour qu'on puisse le rétablir. */ html:not(.admin-modifier) [data-cms-masque] { display: none !important; } /* --- Réserver sur Airbnb ou Booking (25/10/2026) ------------------------------ Le bouton « Demander » (un e-mail) laisse place aux deux annonces. Ce sont les seuls aplats BLANCS de la barre : on les voit sur la photo comme sur la crème, et le logo dans sa couleur dit où l'on va avant même de lire. Liens et dates : script.js, « plateformes ». */ :root { --airbnb: #FF385C; --booking: #003B95; } .d-motor .b-plateformes { display: flex !important; flex-direction: column; gap: .9rem; } .d-motor .plateformes__titre { margin: 0; font-family: "Jost"; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .72); } .d-motor .plateformes { display: flex; gap: 1rem; } .plateforme { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; height: 5.6rem; padding: 0 2.4rem; min-width: 16rem; background: #fff; color: var(--encre); border-radius: 2px; text-decoration: none; font-family: "Jost"; font-weight: 500; font-size: 1.6rem; letter-spacing: .01em; white-space: nowrap; box-shadow: 0 .4rem 1.6rem rgba(20, 12, 8, .18); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; } .plateforme[hidden] { display: none; } .plateforme:hover, .plateforme:focus-visible { transform: translateY(-2px); box-shadow: 0 .9rem 2.4rem rgba(20, 12, 8, .26); } .plateforme:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .plateforme__logo { flex: none; width: 2.2rem; height: 2.2rem; } .plateforme--airbnb .plateforme__logo { color: var(--airbnb); } .plateforme--airbnb span { color: var(--airbnb); font-weight: 600; } .plateforme--booking span { color: var(--booking); font-weight: 600; } body.motor-clair .d-motor .plateformes__titre { color: rgba(50, 32, 22, .7); } body.motor-clair .plateforme { box-shadow: 0 0 0 1px rgba(50, 32, 22, .14), 0 .4rem 1.2rem rgba(20, 12, 8, .08); } body.motor-clair .plateforme:focus-visible { outline-color: var(--encre); } /* Entre 768 et 1200 px, trois champs et deux boutons se serrent : les boutons perdent leur largeur minimale, pas leur logo. */ @media (max-width: 1199.98px) and (min-width: 768px) { .plateforme { min-width: 0; padding: 0 1.8rem; font-size: 1.5rem; } } /* Téléphone : repliée, la barre n'est plus que les deux plateformes, côte à côte — un toucher, et l'on est sur l'annonce (l'application si elle est installée). Dépliée par un lien « Réserver », les dates reviennent au-dessus. */ @media (max-width: 767.98px) { .d-motor .b-plateformes { width: 100%; } .d-motor.motor-trait:not(.ouvert) .plateformes__titre { display: none; } .d-motor.motor-trait:not(.ouvert) .b-motor-new > div::before { opacity: 0; } .d-motor .plateformes > .plateforme { flex: 1 1 0; min-width: 0; height: 5.2rem; padding: 0 1.2rem; font-size: 1.5rem; } .d-motor .plateforme { box-shadow: 0 .6rem 2rem rgba(20, 12, 8, .3); } body .d-motor.motor-trait.ouvert .plateformes__titre { color: rgba(255, 255, 255, .78); } } /* Le duo en ligne : bloc adresse, menu, fin des articles d'escapade. */ .resa-duo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; } .resa-duo__titre { flex: 0 0 100%; font-family: "Jost"; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .12em; opacity: .75; } .resa-duo__lien { display: inline-flex; align-items: center; gap: .8rem; padding: 1rem 1.6rem; background: #fff; border-radius: 2px; text-decoration: none; font-family: "Jost"; font-weight: 600; font-size: 1.5rem; white-space: nowrap; box-shadow: 0 0 0 1px rgba(50, 32, 22, .14); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease; } .resa-duo__lien[hidden] { display: none; } .resa-duo__lien:hover, .resa-duo__lien:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(50, 32, 22, .2), 0 .8rem 2rem rgba(20, 12, 8, .14); } .resa-duo__lien .plateforme__logo { width: 1.9rem; height: 1.9rem; } .resa-duo__lien.plateforme--airbnb { color: var(--airbnb); } .resa-duo__lien.plateforme--booking { color: var(--booking); } .tiroir-resa { margin: 0 0 2.4rem; } .d-article-sejour__resa { justify-content: center; margin: 3.2rem 0 0; } .d-article-sejour__resa .resa-duo__titre { text-align: center; color: var(--creme); } .d-location .b-contact .resa-duo { margin-top: 1.2rem; } .tiroir-pied .resa-duo__lien { opacity: 1; } .tiroir-pied .tiroir-resa { flex: 0 0 100%; } /* Le cartouche passe ses liens en `inline-block` : le duo garde sa rangée. */ .d-location .b-contact .resa-duo, .d-location--cartouche .b-contact .resa-duo { display: flex; width: 100%; margin-right: 0; } /* Téléphone : la colonne d'adresse fait 249 px, les deux boutons y tiennent côte à côte. */ @media (max-width: 767.98px) { .resa-duo { gap: .8rem; } .resa-duo__lien { padding: .9rem 1.1rem; font-size: 1.4rem; gap: .6rem; } } /* --- La barre sans champs (26/10/2026) ----------------------------------------- Manon : les dates et voyageurs ne sont pas synchronisés avec Airbnb, et la barre à moitié vide « est bizarre ». Reste une invitation et les deux annonces : la barre prend la largeur de son contenu, toujours centrée (`.d-motor` est posé à left: 50% + translate). */ @media (min-width: 768px) { .d-motor.motor-trait { width: auto; max-width: calc(100% - 4rem); } .d-motor .b-motor-new > div { align-items: center; gap: 4.8rem; } .d-motor .b-plateformes { align-self: center; } } .motor-invite { display: flex; flex-direction: column; gap: .4rem; } .motor-invite p { margin: 0; white-space: nowrap; } .motor-invite__titre { font-family: var(--titre-affichage); font-size: 2.2rem; line-height: 1.2; color: var(--blanc); } .motor-invite__texte { font-family: "Jost"; font-size: 1.3rem; letter-spacing: .02em; color: rgba(255, 255, 255, .78); } body.motor-clair .motor-invite__titre { color: var(--encre); } body.motor-clair .motor-invite__texte { color: rgba(50, 32, 22, .7); } @media (max-width: 767.98px) { .motor-invite { display: none; } } /* Sur une photo chargée (le hublot, la mosaïque), l'invitation reste lisible. */ .motor-invite p { text-shadow: 0 1px 2px rgba(20, 12, 8, .55), 0 0 14px rgba(20, 12, 8, .45); } body.motor-clair .motor-invite p { text-shadow: none; }