/* ========================================================================= Le Clos de la Tonnellerie — feuille de style unique 1. Polices 2. Variables 3. Base 4. Typographie 5. Mise en page 6. Bandeau démo 7. En-tête 8. Hero 9. Images 10. Chambres 11. Liens/boutons 12. Bandeau sombre 13. Galerie + curseur 14. Lightbox 15. Formulaire 16. Pied de page 17. Révélation 18. Mouvement réduit ========================================================================= */ /* 1. POLICES — auto-hébergées, aucun appel à un CDN ------------------------ */ @font-face { font-family: "Rubik"; src: url("../fonts/rubik-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Rubik"; src: url("../fonts/rubik-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("../fonts/figtree-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("../fonts/figtree-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Pinyon Script"; src: url("../fonts/pinyon-script-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* 2. VARIABLES ------------------------------------------------------------ */ :root { --encre: #1C1A17; --pierre: #F4F2EE; --blanc: #FCFBF9; --tuffeau: #DEDAD2; --ardoise: #3A4541; --eau: #45605C; /* --script porte les grands titres et l'enseigne ; --titre reste sur les petits intertitres, où une anglaise deviendrait illisible. */ --script: "Pinyon Script", "Apple Chancery", "Segoe Script", cursive; --titre: "Rubik", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --texte: "Figtree", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --transition: cubic-bezier(0.4, 0, 0.2, 1); --bandeau: 28px; /* hauteur du bandeau de démonstration */ --entete: 96px; /* hauteur de l'en-tête, réduite au scroll */ --marge: clamp(1.25rem, 5vw, 5rem); --large: 1440px; --gouttiere: clamp(1.25rem, 2.2vw, 2rem); } /* 3. BASE ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* le fond de est celui du canevas : c'est lui qu'on voit dans le rebond élastique, au-delà des deux extrémités du document. On y met l'ardoise du pied de page, pour que le bas du site continue au lieu de virer au blanc. La photo posée en haut, remontée hors du document, prolonge le hero de quelques dizaines de pixels quand on tire vers le haut ; les pages qui en ont une la déclarent par --debord. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* couleur du canevas : c'est elle qu'on voit dans le rebond élastique, au-delà des deux bouts du document. En bas, le pied de page continue au lieu de virer au blanc. */ background-color: var(--ardoise); /* deux calques posés *au-dessus* du haut du document, donc visibles seulement quand on tire vers le haut : la photo du hero qui déborde de 140 px, puis un aplat qui prend le relais si l'on tire plus loin. */ background-image: var(--debord, none), linear-gradient(var(--fond-haut, var(--pierre)), var(--fond-haut, var(--pierre))); background-repeat: no-repeat, no-repeat; background-position: center -140px, center -900px; background-size: 100% auto, 100% 900px; } /* chaque page à hero déclare sa photo de débord. Les chemins sont écrits ici, et non dans le HTML : une url() passée par variable est résolue depuis la feuille qui la consomme, donc depuis assets/css/. */ html[data-hero] { --fond-haut: var(--encre); } /* 400w et non 800w : ce calque n'est visible que sur 140 px de rebond élastique, jamais net. En 800w il pesait jusqu'à 78 Ko téléchargés en concurrence directe avec la photo du hero, donc avec le LCP. */ html[data-hero="accueil"] { --debord: url("../img/chateau-soir-bateaux-400.webp"); } html[data-hero="table"] { --debord: url("../img/table-hotes-poutres-400.webp"); } html[data-hero="chambres"] { --debord: url("../img/hero-chambres-400.webp"); } /* transition douce d'une page à l'autre : le navigateur enchaîne les deux documents par un fondu au lieu du clignotement blanc habituel. Les navigateurs qui ne connaissent pas la règle l'ignorent simplement. */ @view-transition { navigation: auto; } /* teinte de fond des conteneurs d'image pleine largeur en haut de page. C'est ce qu'on voit le temps que la photo arrive : un aplat repris de la couleur dominante du cliché, assombri pour rester dans le ton une fois le voile sombre du hero appliqué — au lieu d'un aplat clair qui flasherait. */ html[data-teinte="accueil"] { --hero-fond: #3D3F31; } html[data-teinte="chambres"] { --hero-fond: #614C31; } html[data-teinte="table"] { --hero-fond: #76655D; } html[data-teinte="cher"] { --hero-fond: #4F5753; } body { margin: 0; background: var(--pierre); color: var(--encre); font-family: var(--texte); font-size: 17px; font-weight: 400; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; height: auto; } ::selection { background: var(--eau); color: var(--blanc); } :focus-visible { outline: 2px solid var(--eau); outline-offset: 3px; } .lien-evitement { position: absolute; left: var(--marge); top: -100px; z-index: 200; background: var(--eau); color: var(--blanc); padding: 0.75rem 1.25rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: top 250ms var(--transition); } .lien-evitement:focus { top: calc(var(--bandeau) + 0.5rem); } /* 4. TYPOGRAPHIE ---------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--titre); font-weight: 400; margin: 0; color: inherit; } /* h1 et h2 en anglaise : la fonte a une petite hauteur d'x et des lettres liées, d'où la taille relevée, l'interlettrage remis à zéro et un interlignage plus large pour laisser passer les hampes. */ h1, h2 { font-family: var(--script); letter-spacing: 0; } h1 { font-size: clamp(2.6rem, min(7.6vw + 1rem, 12vh), 6.5rem); line-height: 1.08; } h2 { font-size: clamp(2.35rem, min(4.5vw, 7.4vh), 3.85rem); line-height: 1.16; margin-bottom: clamp(1.25rem, 2vw, 1.75rem); } h3 { font-size: clamp(1.35rem, 2.1vw, 1.85rem); font-weight: 500; /* Rubik 500 : la hiérarchie sans passer en gras */ line-height: 1.2; letter-spacing: -0.012em; } h4 { font-family: var(--texte); font-size: 0.8125rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; } p { margin: 0 0 1.35em; } p:last-child { margin-bottom: 0; } .mesure { max-width: 68ch; } .intro { font-size: 1.125rem; line-height: 1.65; max-width: 62ch; } .menu-secondaire { font-size: 0.9375rem; } .detail { font-size: 0.875rem; line-height: 1.6; color: color-mix(in srgb, var(--encre) 68%, var(--pierre)); } /* 5. MISE EN PAGE --------------------------------------------------------- */ .enveloppe { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--marge); } .grille { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gouttiere); row-gap: clamp(1.5rem, 3vw, 2.5rem); } /* photo haute + texte court : on centre le texte sur la hauteur de l'image, le blanc se répartit au-dessus et au-dessous au lieu de tomber d'un bloc */ @media (min-width: 900px) { .grille--centree { align-items: center; } } .section { padding-block: clamp(3.5rem, 9vw, 8rem); } .section--serree { padding-block: clamp(2.5rem, 6vw, 5rem); } .section--claire { background: var(--blanc); } .section--filet { border-top: 1px solid var(--tuffeau); } .filet { border: 0; border-top: 1px solid var(--tuffeau); margin: 0; } /* colonnes — mobile d'abord : tout sur 12, redistribué à 900px */ .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: 1 / -1; } @media (min-width: 900px) { /* la largeur est posée sur grid-column-end : un grid-column-start ajouté par une classe de décalage ne peut donc pas l'annuler. En contrepartie il faut rendre son « auto » au départ, sinon le 1 hérité du mobile colle chaque bloc à la première colonne, donc à la ligne suivante. */ .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column-start: auto; } .col-4 { grid-column-end: span 4; } .col-5 { grid-column-end: span 5; } .col-6 { grid-column-end: span 6; } .col-7 { grid-column-end: span 7; } .col-8 { grid-column-end: span 8; } .decale-1 { grid-column-start: 2; } .decale-2 { grid-column-start: 3; } } /* 6. BANDEAU DE DÉMONSTRATION --------------------------------------------- */ .bandeau-demo { position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--bandeau); display: flex; align-items: center; justify-content: center; background: var(--tuffeau); color: var(--encre); font-size: 13px; font-weight: 400; } .bandeau-demo p { margin: 0; } .bandeau-demo a { color: inherit; } .bandeau-demo__fermer { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: none; color: inherit; font-family: var(--texte); font-size: 15px; line-height: 1; cursor: pointer; } /* la classe est posée sur par le script en ligne du , avant le premier rendu : le bandeau déjà fermé ne réapparaît plus le temps que le script principal se charge. Le sélecteur accepte les deux emplacements. */ .sans-bandeau { --bandeau: 0px; } .sans-bandeau .bandeau-demo { display: none; } @media (max-width: 639px) { :root { --bandeau: 0px; } .bandeau-demo { display: none; } } /* 7. EN-TÊTE -------------------------------------------------------------- */ .entete { position: fixed; left: 0; right: 0; top: var(--bandeau); z-index: 80; height: var(--entete); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: height 250ms var(--transition), background-color 250ms var(--transition), border-color 250ms var(--transition), color 250ms var(--transition); } .entete__contenu { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--marge); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* par-dessus le hero : plus de bande floutée en haut de la photo, la lisibilité du blanc sur fond clair tient sur une ombre portée douce, invisible à l'œil */ .entete--clair { color: var(--blanc); text-shadow: 0 1px 3px rgba(28, 26, 23, 0.55), 0 0 14px rgba(28, 26, 23, 0.35); } .entete--pose { /* au-delà de 80 px de scroll */ height: 64px; background: var(--pierre); border-bottom-color: var(--tuffeau); color: var(--encre); } .marque { font-family: var(--script); font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 400; letter-spacing: 0; color: inherit; text-decoration: none; white-space: nowrap; } .navigation { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); } .navigation a { color: inherit; text-decoration: none; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding-block: 0.35rem; border-bottom: 1px solid transparent; transition: border-color 250ms var(--transition); } .navigation a:hover, .navigation a[aria-current="page"] { border-bottom-color: currentColor; } /* le choix de langue se lit comme un réglage, pas comme une sixième page : sur grand écran un filet vertical l'isole du reste de la navigation */ @media (min-width: 900px) { .navigation__langue { padding-left: clamp(0.9rem, 1.8vw, 1.6rem); border-left: 1px solid; border-left-color: color-mix(in srgb, currentColor 40%, transparent); } } .navigation__bascule { display: none; border: 0; background: none; color: inherit; cursor: pointer; font-family: var(--texte); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.35rem 0; } @media (max-width: 899px) { .navigation__bascule { display: block; } .navigation { position: fixed; inset: calc(var(--bandeau) + var(--entete)) 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; background: color-mix(in srgb, var(--pierre) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--tuffeau); padding: 0.5rem var(--marge) 1.5rem; color: var(--encre); text-shadow: none; /* le fond clair du menu déroulé n'a pas besoin de l'ombre portée du header transparent */ opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 300ms var(--transition), transform 300ms var(--transition), visibility 0s linear 300ms; } /* changement de format : on ferme sans rejouer l'animation */ .navigation.sans-transition, .navigation.sans-transition a { transition: none; } .navigation.est-ouverte { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .navigation a { padding-block: 0.85rem; width: 100%; opacity: 0; transform: translateY(-6px); transition: opacity 300ms var(--transition), transform 300ms var(--transition); } /* les liens arrivent l'un après l'autre, 40 ms d'écart */ .navigation.est-ouverte a { opacity: 1; transform: none; } .navigation.est-ouverte a:nth-child(1) { transition-delay: 60ms; } .navigation.est-ouverte a:nth-child(2) { transition-delay: 100ms; } .navigation.est-ouverte a:nth-child(3) { transition-delay: 140ms; } .navigation.est-ouverte a:nth-child(4) { transition-delay: 180ms; } .navigation.est-ouverte a:nth-child(5) { transition-delay: 220ms; } .navigation.est-ouverte a:nth-child(6) { transition-delay: 260ms; } /* dans le menu déroulé, le choix de langue se détache par un filet horizontal */ .navigation__langue { margin-top: 0.35rem; border-top: 1px solid var(--tuffeau); } /* en menu déroulant, la page courante se signale par la couleur, pas par un trait */ .navigation a[aria-current="page"] { border-bottom-color: transparent; color: var(--eau); } } /* 8. HERO ----------------------------------------------------------------- */ .hero { position: relative; /* svh et non vh : sur téléphone, vh se cale sur la fenêtre *sans* la barre d'adresse. Au premier rendu la barre est là, le hero dépasse, puis la barre se replie et toute la page saute. svh prend la petite hauteur, celle qui ne bouge jamais. La ligne vh reste au-dessus pour les navigateurs anciens. */ height: 88vh; height: 88svh; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; background: var(--hero-fond, var(--ardoise)); } /* le carrousel : trois photos empilées, celle qui arrive vient de la droite */ .hero__diapos { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__diapo { position: absolute; inset: 0; transform: translateX(100%); transition: transform 900ms var(--transition); } .hero__diapo.est-active { transform: translateX(0); } .hero__diapo.sort { transform: translateX(-100%); } .hero__diapo.sans-transition { transition: none; } .hero__diapo picture { display: block; width: 100%; height: 100%; } .hero__image { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; } /* Sur un cadre plus large que le 9/16 de la photo — une tablette tenue en portrait, typiquement — c'est en hauteur que le recadrage mord, et il mord au centre. Le hero de /le-cher y perdait l'arche et l'eau pour ne garder que le mur du château, alors que c'est précisément la rivière que la page raconte. On ancre donc son cadrage vers le bas. La règle est réservée à cette page : les photos du carrousel de l'accueil sont cadrées pour que leur bas soit de l'eau calme, sous le titre. Les ancrer vers le bas ne montrerait plus que cette eau. Sur un téléphone, la photo remplit exactement la hauteur du cadre : il n'y a aucun débord vertical, et cette règle n'a donc aucun effet. */ @media (max-width: 899px) { .hero--ancre-bas .hero__image { object-position: center 92%; } } /* Arrivée de la première photo. Avant : l'animation démarrait dès que le style était calculé, donc AVANT que la photo ne soit là — le zoom se jouait sur du vide, puis la photo tombait dedans, puis le script relançait l'animation. Trois temps, visibles à l'œil. Maintenant : la photo est masquée jusqu'à ce qu'elle soit décodée, et le script pose « est-prete » sur le hero. Le fondu et le zoom partent alors ensemble, une seule fois, sur une image déjà prête à peindre. Et si la photo est déjà en cache (navigation interne, seconde visite), le script pose « est-prete » avant le premier rendu : elle s'affiche d'emblée, sans animation du tout. */ .hero__diapo:first-child .hero__image { opacity: 1; } .js .hero.attend-photo .hero__diapo:first-child .hero__image { opacity: 0; } .js .hero.est-prete:not(.sans-arrivee) .hero__diapo:first-child .hero__image { animation: arrivee 900ms var(--transition) both; } /* le bouton pour passer à la photo suivante */ .hero__suivant { position: absolute; z-index: 3; right: clamp(1rem, 2.5vw, 2.5rem); top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 2px; /* fond translucide simple, sans backdrop-filter : le bouton est posé sur la photo du hero, et un backdrop-filter l'aurait forcée dans son propre calque de composition dès le premier rendu. À 42 px, un flou de 6 px ne se lisait de toute façon pas. */ background: rgba(28, 26, 23, 0.28); color: #fff; font-family: var(--texte); font-size: 1rem; line-height: 1; cursor: pointer; transition: background-color 250ms var(--transition), border-color 250ms var(--transition); } @media (max-width: 899px) { .hero__suivant { top: calc(var(--entete) + 0.75rem); transform: none; } } .hero__suivant:hover, .hero__suivant:focus-visible { background: rgba(28, 26, 23, 0.44); border-color: rgba(255, 255, 255, 0.75); } /* l'image arrive légèrement agrandie et se pose : une seule fois, au chargement */ @keyframes arrivee { from { opacity: 0; transform: scale(1.06); } 35% { opacity: 1; } to { opacity: 1; transform: scale(1); } } /* Plus de bande floutée en haut de la photo : juste un dégradé sombre, sans flou et sans bord visible, pour que la navigation blanche tienne le contraste quand la photo affichée est claire. */ .hero::before, .hero-page::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: clamp(130px, 24vh, 220px); background: linear-gradient(to bottom, rgba(28, 26, 23, 0.58) 0%, rgba(28, 26, 23, 0.26) 45%, rgba(28, 26, 23, 0) 100%); pointer-events: none; } /* Voile de lisibilité du titre, dans le bas du hero. Il portait un backdrop-filter: blur(22px) sur toute la surface du hero. Un backdrop-filter ne se peint pas avec le reste de la page : le navigateur doit isoler un calque, lire les pixels du fond, les flouter sur le GPU, puis recomposer. Ce travail arrive une à plusieurs images de rendu APRÈS le reste. D'où la séquence qu'on voyait : la photo nette s'affiche, puis le flou se pose par-dessus, puis le titre. Sur un grand écran, un flou de 22 px sur toute la hauteur du hero est aussi l'effet le plus coûteux de la page — il repassait à chaque image du carrousel et à chaque scroll. Un dégradé seul se peint dans la même image de rendu que la photo : plus aucune étape visible. Le voile est redessiné en six arrêts au lieu de trois, ce qui lui rend la douceur que le flou apportait et supprime au passage le risque de bandes dans les aplats sombres. Le masque disparaît lui aussi : il ne servait qu'à découper le flou, la rampe d'opacité du dégradé fait désormais le travail toute seule — un calque de composition en moins. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(28, 26, 23, 0.94) 0%, rgba(28, 26, 23, 0.88) 11%, rgba(28, 26, 23, 0.74) 24%, rgba(28, 26, 23, 0.52) 39%, rgba(28, 26, 23, 0.28) 54%, rgba(28, 26, 23, 0.10) 66%, rgba(28, 26, 23, 0) 76%); } @media (min-width: 900px) { .hero::after { background: linear-gradient(to top right, rgba(28, 26, 23, 0.95) 0%, rgba(28, 26, 23, 0.89) 11%, rgba(28, 26, 23, 0.75) 24%, rgba(28, 26, 23, 0.53) 38%, rgba(28, 26, 23, 0.29) 52%, rgba(28, 26, 23, 0.11) 64%, rgba(28, 26, 23, 0) 74%); } } .hero__texte { position: relative; z-index: 2; width: 100%; max-width: var(--large); margin-inline: auto; padding: 0 var(--marge) clamp(2.5rem, 6vw, 4.5rem); color: var(--blanc); text-shadow: 0 1px 2px rgba(28, 26, 23, 0.45), 0 2px 18px rgba(28, 26, 23, 0.40), 0 0 42px rgba(28, 26, 23, 0.30); } /* l'anglaise a un œil étroit : à 15ch le titre sortait du voile et tombait sur la partie claire de la photo */ .hero__texte h1 { max-width: 11ch; } .hero__sous { margin-top: 1.25rem; max-width: 44ch; font-size: 1.0625rem; color: color-mix(in srgb, var(--blanc) 88%, var(--ardoise)); } /* 8 bis. HERO DES PAGES SECONDAIRES --------------------------------------- */ /* une seule photo, fixe, et le voile qui court de la gauche vers la droite */ .hero-page { position: relative; display: flex; align-items: flex-end; min-height: clamp(400px, 64vh, 620px); overflow: hidden; background: var(--hero-fond, var(--ardoise)); color: var(--blanc); } .hero-page__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; } /* même principe que .hero::after : dégradé seul, peint avec la photo */ .hero-page::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(28, 26, 23, 0.92) 0%, rgba(28, 26, 23, 0.84) 13%, rgba(28, 26, 23, 0.66) 29%, rgba(28, 26, 23, 0.44) 44%, rgba(28, 26, 23, 0.22) 58%, rgba(28, 26, 23, 0.08) 69%, rgba(28, 26, 23, 0) 79%); } @media (min-width: 900px) { .hero-page::after { background: linear-gradient(to right, rgba(28, 26, 23, 0.92) 0%, rgba(28, 26, 23, 0.84) 16%, rgba(28, 26, 23, 0.70) 31%, rgba(28, 26, 23, 0.49) 48%, rgba(28, 26, 23, 0.27) 64%, rgba(28, 26, 23, 0.10) 77%, rgba(28, 26, 23, 0) 88%); } } .hero-page__texte { position: relative; z-index: 2; width: 100%; max-width: var(--large); margin-inline: auto; padding: calc(var(--bandeau) + var(--entete) + clamp(2rem, 6vw, 4rem)) var(--marge) clamp(2.5rem, 6vw, 4rem); text-shadow: 0 1px 2px rgba(28, 26, 23, 0.45), 0 2px 18px rgba(28, 26, 23, 0.40), 0 0 42px rgba(28, 26, 23, 0.30); } .hero-page__texte h1 { max-width: 14ch; } .hero-page .intro { margin-top: 1.25rem; max-width: 44ch; color: color-mix(in srgb, var(--blanc) 88%, var(--ardoise)); } /* 9. IMAGES --------------------------------------------------------------- */ .cadre { display: block; /* un inline ignore aspect-ratio : la boîte était mal mesurée et le contenu débordait */ position: relative; overflow: hidden; background: var(--tuffeau); } .cadre img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--transition); } .cadre--3-2 { aspect-ratio: 3 / 2; } .cadre--4-5 { aspect-ratio: 4 / 5; } .cadre--4-3 { aspect-ratio: 4 / 3; } .cadre--16-9 { aspect-ratio: 16 / 9; } @media (hover: hover) { .cadre:hover img, a:hover .cadre img, button:hover .cadre img { transform: scale(1.04); } } figure { margin: 0; } figcaption, .legende { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.5; color: color-mix(in srgb, var(--encre) 66%, var(--pierre)); } /* légende qui remonte en même temps que le zoom de l'image */ .vignette .legende { opacity: 0; transform: translateY(8px); transition: opacity 700ms var(--transition), transform 700ms var(--transition); } @media (hover: hover) { .vignette:hover .legende, .vignette:focus-visible .legende { opacity: 1; transform: none; } } @media (hover: none) { .vignette .legende { opacity: 1; transform: none; } } .image-large img { width: 100%; } /* un paragraphe qui suit directement une photo encadrée : un peu d'air */ .vignette + p, .cadre + p { margin-top: 1.25rem; } /* 10. CHAMBRES ------------------------------------------------------------ */ .chambre { border-top: 1px solid var(--tuffeau); padding-top: clamp(1.75rem, 3.5vw, 3rem); align-items: center; /* le texte est plus court que la photo : on l'équilibre */ } .chambre + .chambre { margin-top: clamp(3rem, 7vw, 6rem); } .chambre__texte h3 { margin-bottom: 0.75rem; } .chambre__faits { margin: 0 0 1.25rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font-size: 0.875rem; color: color-mix(in srgb, var(--encre) 68%, var(--pierre)); } .chambre__equipements { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--tuffeau); font-size: 0.875rem; line-height: 1.6; color: color-mix(in srgb, var(--encre) 68%, var(--pierre)); } .chambre__prix { margin-top: 1rem; font-size: 0.9375rem; } .chambre__prix strong { font-weight: 500; } @media (min-width: 900px) { .chambre--inverse .chambre__media { order: 2; } .chambre--inverse .chambre__texte { order: 1; } } /* 11. LIENS ET BOUTONS ---------------------------------------------------- */ a { color: var(--eau); } .lien { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size 300ms var(--transition); padding-bottom: 1px; } .lien:hover, .lien:focus-visible { background-size: 100% 1px; } .lien--accent { color: var(--eau); } /* le corps de texte souligne ses liens par défaut, le trait se dessine au survol */ .mesure a:not(.bouton):not(.lien), .intro a:not(.bouton):not(.lien) { color: var(--eau); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; transition: background-size 300ms var(--transition); } .bouton { display: inline-block; padding: 0.95rem 1.75rem; background: var(--eau); color: var(--blanc); border: 0; font-family: var(--texte); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color 250ms var(--transition); } .bouton:hover, .bouton:focus-visible { background: var(--ardoise); } .bouton--ligne { background: none; color: var(--encre); border: 1px solid var(--tuffeau); transition: border-color 250ms var(--transition), color 250ms var(--transition); } .bouton--ligne:hover, .bouton--ligne:focus-visible { background: none; border-color: var(--eau); color: var(--eau); } /* 12. BANDEAU SOMBRE ------------------------------------------------------ */ .bandeau-sombre { position: relative; background: var(--encre); color: var(--blanc); overflow: hidden; min-height: clamp(420px, 62vh, 640px); display: flex; align-items: center; } .bandeau-sombre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% center; } /* voile dégradé côté texte : sans lui, le blanc devient illisible dès que la photo du bandeau est claire (la salle à manger, par exemple) */ .bandeau-sombre::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(28, 26, 23, 0.92) 0%, rgba(28, 26, 23, 0.84) 16%, rgba(28, 26, 23, 0.70) 31%, rgba(28, 26, 23, 0.49) 48%, rgba(28, 26, 23, 0.27) 64%, rgba(28, 26, 23, 0.10) 77%, rgba(28, 26, 23, 0) 88%); } .bandeau-sombre__texte { position: relative; z-index: 2; width: 100%; max-width: var(--large); margin-inline: auto; padding: clamp(3rem, 7vw, 5rem) var(--marge); text-shadow: 0 1px 2px rgba(28, 26, 23, 0.45), 0 2px 18px rgba(28, 26, 23, 0.40), 0 0 42px rgba(28, 26, 23, 0.30); } .bandeau-sombre__texte > * { max-width: 46ch; } .bandeau-sombre p { color: color-mix(in srgb, var(--blanc) 86%, var(--encre)); } /* 13. GALERIE ET CURSEUR -------------------------------------------------- */ .galerie { align-items: start; } .galerie.grille { margin-top: clamp(1.5rem, 3vw, 2rem); margin-bottom: clamp(1.5rem, 3vw, 2rem); } h2 + .galerie.grille { margin-top: 0; } /* le h2 porte déjà sa propre marge basse */ .vignette { display: block; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; } /* le curseur système ne disparaît que sur une photo agrandissable : les photos qui ouvrent un lien gardent la main, pour ne pas promettre un agrandissement */ @media (hover: hover) and (pointer: fine) { .vignette { cursor: none; } } .curseur { position: fixed; top: 0; left: 0; z-index: 70; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 300ms var(--transition); } .curseur[data-visible="oui"] { opacity: 1; } /* la loupe se pose au survol de la photo, au même rythme que le zoom */ .curseur__disque { position: absolute; top: -32px; left: -32px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); /* pas de backdrop-filter ici : la loupe suit la souris, donc le navigateur relisait et refloutait le fond à chaque image de rendu, sur une page pleine de photos. Un flou de 2 px était invisible, le coût ne l'était pas. */ background: rgba(28, 26, 23, 0.26); transform: scale(0.7); transition: transform 450ms var(--transition); } .curseur[data-actif="oui"] .curseur__disque { transform: scale(1); } .curseur__disque svg { width: 22px; height: 22px; fill: none; stroke: rgba(255, 255, 255, 0.92); stroke-width: 1.5; stroke-linecap: round; } /* 14. LIGHTBOX ------------------------------------------------------------ */ .lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(28, 26, 23, 0.96); display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); opacity: 0; transition: opacity 300ms var(--transition); } .lightbox[hidden] { display: none; } .lightbox[data-ouverte="oui"] { opacity: 1; } .lightbox__image { max-width: min(100%, 1400px); max-height: 82vh; width: auto; height: auto; object-fit: contain; transform-origin: top left; } .lightbox__legende { position: absolute; left: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 3vw, 2rem); max-width: 52ch; color: color-mix(in srgb, var(--blanc) 82%, var(--encre)); font-size: 0.8125rem; } .lightbox__bouton { position: absolute; border: 1px solid rgba(252, 251, 249, 0.28); background: none; color: var(--blanc); font-family: var(--texte); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.7rem 1rem; cursor: pointer; transition: border-color 250ms var(--transition), background-color 250ms var(--transition); } .lightbox__bouton:hover, .lightbox__bouton:focus-visible { border-color: var(--blanc); background: rgba(252, 251, 249, 0.08); } .lightbox__fermer { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 4vw, 3rem); } .lightbox__precedent { left: clamp(1rem, 4vw, 3rem); top: 50%; transform: translateY(-50%); } .lightbox__suivant { right: clamp(1rem, 4vw, 3rem); top: 50%; transform: translateY(-50%); } /* l'en-tête s'efface pendant que la fenêtre d'image est ouverte */ body.lightbox-ouverte .entete, body.lightbox-ouverte .bandeau-demo { opacity: 0; pointer-events: none; transition: opacity 250ms var(--transition); } /* 15. FORMULAIRE ---------------------------------------------------------- */ /* le bouton « Demander une réservation » vise cette section : on dégage la hauteur de l'en-tête fixe, sinon le titre se cale dessous */ #reservation { scroll-margin-top: calc(var(--bandeau) + var(--entete) + 1.5rem); } .champ { display: block; margin-bottom: 1.5rem; } .champ span { display: block; margin-bottom: 0.4rem; font-size: 0.8125rem; color: color-mix(in srgb, var(--encre) 70%, var(--pierre)); } /* imbriqué dans le libellé : il faut battre la spécificité de « .champ span » */ .champ .champ__note { display: inline; margin: 0; font-size: inherit; opacity: 0.7; } /* deux champs courts sur une ligne, l'un sous l'autre au téléphone */ .champ-duo { display: grid; gap: 0 1rem; } @media (min-width: 560px) { .champ-duo { grid-template-columns: 1fr 1fr; } } .champ input, .champ textarea, .champ select { width: 100%; padding: 0.85rem 0.9rem; font: inherit; font-size: 1rem; color: var(--encre); background: var(--blanc); border: 1px solid var(--tuffeau); border-radius: 2px; transition: border-color 250ms var(--transition); } .champ input:hover, .champ textarea:hover, .champ select:hover { border-color: color-mix(in srgb, var(--tuffeau) 60%, var(--eau)); } .champ input:focus-visible, .champ textarea:focus-visible, .champ select:focus-visible { border-color: var(--eau); } .champ textarea { min-height: 9rem; resize: vertical; } /* le sélecteur natif de Safari force ses propres hauteur et fond : on les reprend */ .champ select { appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer; } .champ select { background-image: linear-gradient(45deg, transparent 50%, var(--eau) 50%), linear-gradient(135deg, var(--eau) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 1.25rem, calc(100% - 0.85rem) 1.25rem; background-size: 0.3rem 0.3rem, 0.3rem 0.3rem; background-repeat: no-repeat; } /* le sélecteur de date de Safari déborde de son cadre sans hauteur explicite */ .champ input[type="date"] { min-height: 3.2rem; } .consentement { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1.75rem; font-size: 0.875rem; line-height: 1.55; } .consentement input { margin-top: 0.3rem; width: 1rem; height: 1rem; accent-color: var(--eau); flex: none; } .formulaire__reponse:empty { display: none; } .formulaire__reponse { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--tuffeau); font-size: 0.875rem; color: var(--eau); } /* 16. PIED DE PAGE -------------------------------------------------------- */ .pied { background: var(--ardoise); color: color-mix(in srgb, var(--blanc) 88%, var(--ardoise)); padding-block: clamp(3rem, 6vw, 5rem); font-size: 0.9375rem; } .pied a { color: inherit; } .pied .detail { color: color-mix(in srgb, var(--blanc) 82%, var(--ardoise)); } .pied h2, .pied h3 { color: var(--blanc); } /* L'enseigne du pied reprend l'anglaise de l'en-tête. Sur l'ardoise et en blanc, elle répond à la marque du haut de page ; taille relevée, interlettrage à zéro et interlignage large, comme partout où la Pinyon est posée. */ .pied__enseigne { font-family: var(--script); font-size: clamp(2.1rem, 3.2vw, 2.7rem); font-weight: 400; letter-spacing: 0; line-height: 1.25; margin-bottom: 0.65rem; } .pied__mention { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.5rem; border-top: 1px solid rgba(252, 251, 249, 0.18); font-size: 0.8125rem; line-height: 1.65; color: color-mix(in srgb, var(--blanc) 74%, var(--ardoise)); } .pied__liens { list-style: none; margin: 0; padding: 0; } .pied__liens li { margin-bottom: 0.4rem; } /* 17. RÉVÉLATION AU SCROLL ------------------------------------------------ */ /* Le masquage est conditionné à « html.js », classe posée par un script en ligne dans le . Sans cette garde, un script lent, bloqué ou en échec laissait toute la page en opacity: 0 — un site blanc. Désormais le pire cas est un site entièrement lisible, simplement sans l'animation. */ .js .reveler { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--transition), transform 700ms var(--transition); } .js .reveler.est-visible { opacity: 1; transform: none; } /* déjà à l'écran au chargement : pas d'animation du tout, le bloc est là dès la première image de rendu. C'est le script qui pose cette classe, avant même de brancher l'observateur. */ .js .reveler.deja-la { opacity: 1; transform: none; transition: none; } /* 19. EN-TÊTE DE PAGE (pages secondaires, sans hero) ----------------------- */ .entete-page { padding-top: calc(var(--bandeau) + var(--entete) + clamp(3rem, 8vw, 6rem)); padding-bottom: clamp(2rem, 5vw, 3.5rem); } .entete-page .intro { margin-top: 1.25rem; } /* 20. TEASERS (accueil : chambres / table / alentours) --------------------- */ /* colonnes de hauteurs inégales : les liens se calent tous en bas */ .decouvrir__item { display: flex; flex-direction: column; } .decouvrir__item > a { display: block; } .decouvrir__item .lien--accent { margin-top: auto; align-self: flex-start; } /* les trois cartes annoncent des pages entières : leur titre passe à l'anglaise, comme les h2, avec la taille relevée que demande sa petite hauteur d'x */ .decouvrir__item h3 { font-family: var(--script); font-weight: 400; font-size: clamp(1.9rem, 2.6vw, 2.35rem); line-height: 1.16; letter-spacing: 0; margin-bottom: 0.5rem; } .decouvrir__item .cadre { margin-bottom: 1.25rem; } .decouvrir__item p { margin-bottom: 1rem; } /* 21. GROUPES D'ACTIONS (bouton + lien côte à côte) ------------------------ */ .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 1.5rem; } /* 22. QUESTIONS FRÉQUENTES (natif, sans JS) -------------------------------- */ .faq { max-width: 68ch; } .faq details { border-top: 1px solid var(--tuffeau); padding-block: 1.35rem; } .faq details:last-of-type { border-bottom: 1px solid var(--tuffeau); } .faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1.25rem; cursor: pointer; list-style: none; font-family: var(--titre); font-size: 1.0625rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: none; font-family: var(--texte); font-size: 1.25rem; line-height: 1; color: var(--eau); transform: rotate(0deg); transition: transform 250ms var(--transition); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { margin-top: 0.85rem; max-width: 60ch; color: color-mix(in srgb, var(--encre) 78%, var(--pierre)); } /* 23. COLONNES PRATIQUES (voiture / train / vélo) --------------------------- */ .pratique__item { padding-top: 1.5rem; border-top: 1px solid var(--tuffeau); } .pratique__item h3 { margin-bottom: 0.6rem; } /* 24. CRÉDITS (mentions légales) ------------------------------------------ */ .credits { list-style: none; margin: 0 0 2rem; padding: 0; max-width: 68ch; } .credits li { padding: 0.8rem 0; border-top: 1px solid var(--tuffeau); } .credits li:last-child { border-bottom: 1px solid var(--tuffeau); } .credits__sujet { display: block; font-family: var(--titre); font-weight: 500; font-size: 0.9375rem; line-height: 1.5; } .credits__source { display: block; margin-top: 0.15rem; font-size: 0.875rem; line-height: 1.6; color: color-mix(in srgb, var(--encre) 68%, var(--pierre)); } /* 25. MOUVEMENT RÉDUIT ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .hero .hero__image { animation: none; opacity: 1; } .js .reveler, .js .reveler.est-visible { opacity: 1; transform: none; } .curseur { display: none; } .cadre:hover img { transform: none; } .vignette .legende { opacity: 1; transform: none; } } /* 18b. les personnes qui demandent moins de mouvement n'ont pas le fondu ----- */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }