/* ========================================================================= 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); } html[data-hero="accueil"] { --debord: url("../img/chateau-soir-bateaux-800.webp"); } html[data-hero="table"] { --debord: url("../img/table-hotes-poutres-800.webp"); } html[data-hero="chambres"] { --debord: url("../img/hero-chambres-800.webp"); } 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; } body.sans-bandeau { --bandeau: 0px; } body.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; height: 88vh; min-height: 460px; display: flex; align-items: flex-end; overflow: hidden; background: 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; } /* seule la première photo fait son zoom d'arrivée, au chargement */ .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; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px) saturate(140%); -webkit-backdrop-filter: blur(6px) saturate(140%); 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(255, 255, 255, 0.22); 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 { transform: scale(1.08); } to { 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 uniquement dans le coin bas-gauche, pour la lisibilité du titre */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* la photo est floutée sous le texte, et le flou s'éteint avec le voile */ background: linear-gradient(to top, rgba(28, 26, 23, 0.92) 0%, rgba(28, 26, 23, 0.62) 30%, rgba(28, 26, 23, 0) 64%); /* l'anglaise a des pleins et des déliés très fins : le flou est monté à 22 px pour que la photo ne vienne plus détailler les déliés du titre */ backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); -webkit-mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 68%); mask-image: linear-gradient(to top, #000 0%, #000 34%, transparent 68%); } @media (min-width: 900px) { .hero::after { background: linear-gradient(to top right, rgba(28, 26, 23, 0.94) 0%, rgba(28, 26, 23, 0.70) 30%, rgba(28, 26, 23, 0) 62%); -webkit-mask-image: linear-gradient(to top right, #000 0%, #000 32%, transparent 64%); mask-image: linear-gradient(to top right, #000 0%, #000 32%, transparent 64%); } } .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); } /* 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(--ardoise); color: var(--blanc); } .hero-page__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; } .hero-page::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(28, 26, 23, 0.90) 0%, rgba(28, 26, 23, 0.58) 34%, rgba(28, 26, 23, 0) 70%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to top, #000 0%, #000 26%, transparent 66%); mask-image: linear-gradient(to top, #000 0%, #000 26%, transparent 66%); } @media (min-width: 900px) { .hero-page::after { background: linear-gradient(to right, rgba(28, 26, 23, 0.90) 0%, rgba(28, 26, 23, 0.70) 30%, rgba(28, 26, 23, 0.25) 62%, rgba(28, 26, 23, 0) 85%); -webkit-mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 78%); mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 78%); } } .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); } .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.90) 0%, rgba(28, 26, 23, 0.70) 30%, rgba(28, 26, 23, 0.25) 62%, rgba(28, 26, 23, 0) 85%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 78%); mask-image: linear-gradient(to right, #000 0%, #000 35%, transparent 78%); } .bandeau-sombre__texte { position: relative; z-index: 2; width: 100%; max-width: var(--large); margin-inline: auto; padding: clamp(3rem, 7vw, 5rem) var(--marge); } .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); background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); 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 ------------------------------------------------ */ .reveler { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--transition), transform 700ms var(--transition); } .reveler.est-visible { opacity: 1; transform: 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__image { animation: none; } .reveler { opacity: 1; transform: none; } .curseur { display: none; } .cadre:hover img { transform: none; } .vignette .legende { opacity: 1; transform: none; } }