/* =================================================================== Le Domaine des Montagnais — styles du thème Tokens repris de la maquette Figma (voir README du dépôt). =================================================================== */ /* Police variable : un seul fichier couvre toutes les graisses (100 à 900) */ @font-face { font-family: "Cabinet Grotesk"; src: url("../fonts/CabinetGrotesk-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } /* Police d'affichage (titres) — TAY Road Runner, graisse Regular uniquement */ @font-face { font-family: "TAY Road Runner"; src: url("../fonts/TAYRoadRunnerRegular.woff2") format("woff2"), url("../fonts/TAYRoadRunnerRegular.woff") format("woff"), url("../fonts/TAYRoadRunnerRegular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } :root { --wp--preset--font-size--small: 1rem; --olive: rgba(134, 173, 188, 1); --olive-secondaire: #818368; --lime: #d9e79a; --cream: rgba(255, 253, 247, 1); --sand: #e6e4dc; --peche: #f8efe1; --encre-event:rgb(46, 44, 36); --encre: rgba(42, 40, 32, 0.98); --encre-douce: rgba(51, 50, 44, 0.72); --filet: rgba(51, 50, 44, 0.18); --brun-faq: rgba(129, 131, 104, 0.75); --police-display: "TAY Road Runner", "Cabinet Grotesk", Georgia, serif; --police-texte: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif; --transition-douce: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --ease-sortie: cubic-bezier(0.22, 1, 0.36, 1); /* Section animée de l'accueil : montée des photos et balayage du texte */ --transition-photo: transform 3s var(--ease-sortie); --transition-texte: clip-path 2s ease, opacity 0.9s ease; --border-radius-1: 5px; --border-radius-2: 20px; } .wp-block-columns { gap: 17rem; /* Modifiez cette valeur selon vos besoins */ } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Le blocage du défilement horizontal doit porter sur : posé sur le seul , il est propagé au viewport et le body cesse de rogner. « clip » plutôt que « hidden » pour ne pas créer de conteneur de défilement (position: sticky reste fonctionnel) ; hidden sert de repli. */ html { overflow-x: hidden; overflow-x: clip; } body { margin: 0; background: var(--cream); color: var(--encre); font-family: var(--police-texte); font-size: 19px; line-height: 130%; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } .wp-block-image img { border-radius: var(--border-radius-1); } a { color: inherit; } h1, h2, h3, h4 { font-weight: 400; line-height: 110%; margin: 0 0 24px; } h2 { font-size: 40px; letter-spacing: 5%; } h3{ font-weight: 500; } .contenu-generique > img{ border-radius: var(--border-radius-1); } .conteneur { /* max-width: 1280px; */ margin-inline: auto; padding-inline: 24px; } /* Gouttières de la maquette sur bureau (même seuil que la bascule de la nav). Déclaré ici, avant .entete__grille, pour que la réserve à droite du bouton « Réserver » continue de l'emporter dans l'en-tête. */ @media (min-width: 1024px) { .conteneur { padding-inline: 82px; } } .lecteur-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .lien-evitement { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--encre); color: var(--cream); padding: 12px 20px; } .lien-evitement:focus { left: 0; } .titre-display { font-family: var(--police-display); font-size: 50px; line-height: 1.08; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 400; } .titre-display--espace { letter-spacing: 5%; } .titre-h3 { font-size: clamp(24px, 3vw, 34px); font-weight: 500; } .titre-h4 { font-size: clamp(2rem, 3.7vw, 50px ); } .sur-titre { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 28px; } .contenu-generique.sur-titre { margin: 0 0 2.5rem !important; } .sur-titre--clair { color: var(--cream); } .texte-doux { color: var(--encre); } .note { font-size: 1rem; color: var(--encre-douce); } .ratio-4-3 { aspect-ratio: 4 / 3; display: block; overflow: hidden; background: var(--sand); } .ratio-3-4 { aspect-ratio: 3 / 4; display: block; overflow: hidden; background: var(--sand); } .ratio-7-5 { aspect-ratio: 7 / 5; display: block; overflow: hidden; background: var(--sand); } .ratio-16-9 { aspect-ratio: 16 / 9; display: block; overflow: hidden; background: var(--sand); } /* Cible les boîtes ratio-* même combinées à une autre classe (ex. « categorie__media ratio-4-3 ») — d'où *= plutôt que ^= */ [class*="ratio-"] img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Boutons et liens ---------- */ .bouton { display: inline-flex; align-items: center; justify-content: center; background: var(--olive-secondaire); color: var(--cream); /* line-height 1 + 1px de plus en haut : compense l'espace de descendantes que la boîte de ligne réserve sous un texte en capitales */ padding: 22px 22px 19px 22px; /* padding-block: 18px 16px; */ line-height: 0; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; border-radius: var(--border-radius-1); transition: background var(--transition-douce), color var(--transition-douce); } .bouton:hover { background: var(--lime); color: var(--encre) } .bouton--contour { background: transparent; color: var(--encre); border: 1px solid var(--encre); } .bouton--contour:hover { background: var(--encre); color: var(--cream); } .bouton--contour--white { background: transparent; color: var(--cream); border: 1px solid var(--cream); } .bouton--contour--white:hover { background: var(--cream); color: var(--encre); } /* Bouton avec point à droite (13 px, couleur du texte) : centré par le flex du bouton */ .bouton--icone { gap: 17px; padding: 16px 22px 14px 22px; } .bouton--icone::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .bouton--blanc { background: var(--cream); color: var(--encre); } .bouton--blanc:hover { background: var(--encre); color: var(--cream); } .bouton--secondaire { background: var(--olive); color: white; } .lien-souligne { font-size: 12px; font-weight: 700; text-transform: uppercase; text-underline-offset: 4px; } /* =================================================================== EN-TÊTE — barre fixe, menus WordPress =================================================================== */ .entete { position: fixed; inset-inline: 0; top: 0; z-index: 50; background: transparent; color: var(--cream); transition: background var(--transition-douce), color var(--transition-douce); } .entete.est-solide, .page-sans-hero .entete { background: var(--sand); color: var(--encre); } /* Pages sans hero : la barre, son panneau de sous-menus et le menu mobile prennent le fond de la page (crème) pour se fondre dedans, même au défilement. */ .page-sans-hero .entete, .page-sans-hero .entete.est-solide, .page-sans-hero .entete__sous-menu, .page-sans-hero .menu-mobile { background: var(--cream); } /* Barre pleine largeur : ancre du bouton réserver collé au bord droit */ .entete__barre { position: relative; } .entete__grille { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; /* Espace réservé à droite pour que la nav ne passe pas sous le bouton réserver */ padding-right: calc(max(10vw, 150px) + 24px); } /* La nav est plus large que le reste du site : gouttière gauche réduite (les autres .conteneur gardent leurs 82px sur bureau) */ @media (min-width: 1024px) { .entete__grille { padding-left: 28px; } } .entete .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; align-items: center; } .entete .menu a { display: block; padding-block: 20px; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; } /* Les sous-menus WP sont masqués dans la barre : ils s'affichent dans le panneau déroulant (voir main.js) */ .entete__nav .sub-menu { display: none; } /* Icône « + » en image, teintée avec la couleur courante du texte (masque) pour rester lisible sur nav transparente comme sur nav solide. */ .entete__nav .menu-item-has-children > a::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; background-color: currentColor; -webkit-mask: url("../images/plus.svg") no-repeat center / contain; mask: url("../images/plus.svg") no-repeat center / contain; } /* État ouvert : tiret textuel — on annule la boîte masquée */ .entete__nav .menu-item-has-children.est-ouvert > a::after { content: "−"; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; } /* Centré verticalement par align-items:center de .entete__grille. Le décalage vers le bas en mode hero n'existe que sur bureau (voir la media query min-width: 1024px). */ .entete__logo { display: flex; align-items: center; justify-content: center; padding-block: 12.6px; } /* Nav solide (défilement ou page sans hero) : le logo rétrécit */ .logo-img { height: 44px; width: auto; display: block; transition: height var(--transition-douce); } .entete.est-solide .logo-img, .page-sans-hero .logo-img { height: 38px; } /* Logo blanc sur nav transparente (haut de page avec hero), brun sur nav solide */ .logo-img--brun { display: none; } .entete.est-solide .logo-img--blanc, .page-sans-hero .logo-img--blanc { display: none; } .entete.est-solide .logo-img--brun, .page-sans-hero .logo-img--brun { display: block; } .entete__droite { display: flex; align-items: center; justify-content: flex-end; gap: 24px; } .entete__reserver { /* Collé au bord droit du viewport, hauteur pleine barre */ position: absolute; top: 0; right: 0; bottom: 0; width:min-content; /* min-width: 10vw; */ display: inline-flex; align-items: center; justify-content: center; background: var(--olive); color: var(--cream); padding: 0 28px; border-bottom-left-radius: 5px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; transition: background var(--transition-douce), color var(--transition-douce); } .entete__reserver:hover { background: var(--lime); color: var(--encre); } /* Sélecteur de langue FR / EN (rendu par dm_selecteur_langue quand TranslatePress est actif) — hérite de la couleur courante de la barre */ .selecteur-langue { display: flex; align-items: center; } .selecteur-langue__lien { font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; opacity: 0.65; transition: opacity var(--transition-douce); } .selecteur-langue__lien:hover { opacity: 1; } .selecteur-langue__lien.est-actif { opacity: 1; text-decoration: underline; text-underline-offset: 4px; } .selecteur-langue__lien + .selecteur-langue__lien::before { content: "/"; display: inline-block; /* bloc inline : ne reçoit pas le soulignement du lien actif */ margin: 0 8px; opacity: 0.65; text-decoration: none; } .menu-mobile__langue { margin-top: 24px; justify-content: flex-start; /* aligné à gauche comme le reste du menu mobile */ } .menu-mobile__langue .selecteur-langue__lien { font-size: 18px; } /* Panneau des sous-menus — la barre s'agrandit comme dans la maquette */ .entete__sous-menu { background: var(--sand); color: var(--encre); overflow: hidden; } .entete__sous-menu ul { list-style: none; margin: 0; /* max-width: 1280px; */ margin-inline: auto; padding: 4px 24px 32px; } .entete__sous-menu a { font-size: 24px; font-weight: 700; text-decoration: none; line-height: 1.6; } .entete__sous-menu a:hover { color: var(--olive); } /* Burger + menu mobile */ .entete__burger { display: none; background: none; border: 0; color: inherit; cursor: pointer; font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; padding-block: 20px; } /* Icône hamburger : 3 barres qui deviennent un X quand le menu est ouvert */ .burger-icone { display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: background var(--transition-douce); } .burger-icone::before, .burger-icone::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform var(--transition-douce), top var(--transition-douce); } .burger-icone::before { top: -7px; } .burger-icone::after { top: 7px; } .entete__burger[aria-expanded="true"] .burger-icone { background: transparent; } .entete__burger[aria-expanded="true"] .burger-icone::before { top: 0; transform: rotate(45deg); } .entete__burger[aria-expanded="true"] .burger-icone::after { top: 0; transform: rotate(-45deg); } .menu-mobile { background: var(--sand); color: var(--encre); border-top: 1px solid var(--filet); padding: 16px 24px 32px; text-align: left; } .menu-mobile .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; /* Tout aligné à gauche : annule le align-items: center hérité de .entete .menu */ align-items: flex-start; gap: 16px; } .menu-mobile .menu li { width: 100%; } .menu-mobile .menu a { font-size: 24px; text-decoration: none; padding-block: 8px; /* plus compact que les 20px de la barre bureau (.entete .menu a) */ } /* Parent avec sous-menu : lien à gauche, bouton + / − à droite (ajouté par main.js), sous-liste repliée sur toute la largeur en dessous */ .menu-mobile .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } /* Le lien parent remplit la ligne : toute sa largeur ouvre la sous-liste */ .menu-mobile .menu-item-has-children > a { flex: 1; } .menu-mobile__bascule { width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 28px; line-height: 1; cursor: pointer; } .menu-mobile__bascule::before { content: "+"; } .menu-mobile .est-ouvert > .menu-mobile__bascule::before { content: "−"; } /* Sous-liste sans puces, simplement décalée d'un retrait */ .menu-mobile .sub-menu { display: none; flex-basis: 100%; list-style: none; margin: 4px 0 8px; padding: 0 0 0 16px; } .menu-mobile .est-ouvert > .sub-menu { display: block; } .menu-mobile .sub-menu a { font-size: 18px; color: var(--encre-douce); } @media (max-width: 1023px) { } @media (max-width: 1023px) { .entete__nav { display: none; } .entete__droite { display: none; } /* Logo centré (seul élément dans le flux : il fixe la hauteur de la barre), burger sorti du flux et collé au bord droit, centré verticalement */ .entete__grille { position: relative; display: flex; align-items: center; justify-content: center; padding-inline: 16px; } .entete__burger { display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 20px 16px; } /* Bouton réserver en étiquette verticale accrochée au bord droit de l'écran */ .entete__reserver { position: fixed; top: 50%; right: 0; bottom: auto; transform: translateY(-50%); writing-mode: vertical-rl; min-width: 0; padding: 20px 10px; border-radius: var(--border-radius-1) 0 0 var(--border-radius-1); } /* Pied de page à l'écran (classe posée par main.js) : lime sur encre, sinon le bouton olive se confond avec le pied olive */ .entete__reserver.est-sur-pied { background: var(--lime); color: var(--encre); } } @media (min-width: 1024px) { .menu-mobile { display: none !important; } /* Logo toujours centré sur le viewport, peu importe la longueur des menus : sorti du flux de la grille et ancré au centre de la barre pleine largeur */ .entete__logo { position: absolute; left: 50%; /* Nav transparente (haut de page avec hero) : le logo dépasse 32px sous le centre de la barre ; il remonte quand la nav devient solide */ top: calc(50% + 32px); transform: translate(-50%, -50%); transition: top var(--transition-douce); } .entete.est-solide .entete__logo, .page-sans-hero .entete__logo { top: 50%; } /* Le logo étant hors flux, on fixe les colonnes des deux navs */ .entete__nav--gauche { grid-column: 1; } .entete__droite { grid-column: 3; } } /* =================================================================== HELPERS =================================================================== */ .texte-italique { font-family: var(--police-display); } /* =================================================================== HERO =================================================================== */ .hero { position: relative; /* Plein écran : 100dvh suit la hauteur réelle de l'appareil (barres du navigateur mobile comprises) ; 100vh sert de repli */ min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero--activites { justify-content: flex-start; min-height: 85vh; } .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Vidéo de fond, posée par-dessus l'image du héros qui sert d'image d'attente et de repli (mouvement réduit, absence de JavaScript). */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: reduce) { .hero__video { display: none; } } .hero__voile { position: absolute; inset: 0; background: rgba(51, 50, 44, 0.3); } .hero__voile--fonce { background: rgba(34, 33, 29, 0.6); } .hero__contenu { position: relative; text-align: center; color: var(--cream); padding-inline: 24px; } .hero__contenu--gauche { text-align: center; width: 100%; } /* Signe/logo blanc au-dessus du nom du chalet ou de la chambre */ .hero__logo { display: block; width: auto; height: 55px; margin: 0 auto 20px; } .hero__titre-image { margin-inline: auto; } /* Flèche seule, ancrée à 75px du bas du hero (par-dessus le voile) */ .hero__fleche { position: absolute; bottom: 75px; left: 50%; transform: translateX(-50%); color: inherit; text-decoration: none; /* Va-et-vient sinusoïdal (easeInOutSine) : aucun à-coup aux extrémités */ animation: rebond 2.4s cubic-bezier(0.37, 0, 0.63, 1) infinite; will-change: transform; } .hero__fleche img { width: 58px; /* height: 10vh; */ margin-inline: auto; } @keyframes rebond { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } } /* ------------------------------------------------------------------- Animation d'entrée — page d'accueil uniquement (body.home) Le titre du hero tombe du haut de la page, rebondit une fois sous sa position finale (2,5 s), puis la nav et la flèche apparaissent. L'état « invisible » repose sur le remplissage d'animation (both) : si les animations sont désactivées (prefers-reduced-motion), les éléments restent visibles normalement. ------------------------------------------------------------------- */ .home .hero__titre-image { animation: titre-chute 1s both; } @keyframes titre-chute { 0% { /* Hors de la page, au-dessus du haut du hero */ transform: translateY(-70vh); /* Fall consistently */ animation-timing-function: cubic-bezier(.97,1,.42,1.45); } /* 55% { transform: translateY(0); animation-timing-function: cubic-bezier(0.3, 0, 0.35, 1); } */ /* 73% { Rebond sous la position finale transform: translateY(40px); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); } */ /* 48% { transform: translateY(40px); animation-timing-function: cubic-bezier(0.3, 0, 0.35, 1); } */ 100% { transform: translateY(0); } } /* Nav et flèche : masquées jusqu'à la fin de la chute, puis fondu */ .home .entete { animation: apparition 0.6s ease 1s both; } .home .hero__fleche { animation: apparition 0.9s ease 1.2s both, rebond 2.4s cubic-bezier(0.37, 0, 0.63, 1) 1.2s infinite; } @keyframes apparition { from { opacity: 0; } to { opacity: 1; } } .hero__apartir { margin: -21px 0 0; font-size: 1rem; font-family: var(--police-display); font-weight: 400; text-transform: uppercase; letter-spacing: 5%; } .hero__prix { font-family: var(--police-display); font-size: 1.8rem; margin: 0px 0 0; letter-spacing: 5%; line-height: 110%; } .filet { width: 2px; height: 80px; background: rgba(240, 238, 231, 0.6); margin: 10px auto 16px; } .hero__attributs { font-family: var(--police-display); list-style: none; margin: 0; padding: 0; font-size: 1.3rem; font-weight: 400; text-transform: uppercase; letter-spacing: 5%; display: grid; gap: 4px; line-height: 130%; } /* Décalage du bloc de texte dans le hero des activités. Les deux valeurs en % se calculent sur la largeur du hero. */ .hero--activites .hero__contenu { /* padding-left: 5%; */ /* padding-top: 10%; */ } .titre-hero-activites { font-family: var(--police-display); text-transform: uppercase; font-size: 4.5rem; line-height: 108%; /* max-width: 16em; */ } @media (max-width: 767px) { .titre-hero-activites { font-size: 2rem; } } /* Surlignage façon coup de marqueur : seul le bandeau olive est incliné. Il vit dans un pseudo-élément placé derrière le mot, si bien que le texte reste droit et que le flux du titre n'est pas modifié. */ .titre-hero-activites mark { background: none; color: var(--cream); padding-inline: 8px; position: relative; isolation: isolate; /* garde le bandeau devant l'image du hero */ border-radius: var(--border-radius-1); } .titre-hero-activites mark::before { content: ""; position: absolute; inset: -0.001em 0; z-index: -1; background: rgba(129, 131, 104, 1); transform: rotate(-1deg) translate(0px, -4px); transform-origin: center; border-radius: 5px; } /* Angles alternés pour éviter un effet trop régulier */ .titre-hero-activites mark:nth-of-type(3)::before { transform: rotate(1deg) translate(0px, -5px); } /* Onglets ancrés en bas de la section (comme la flèche du hero) : cadre à bordure blanche, onglet actif plein blanc à texte noir dont seul le coin extérieur est arrondi (miroir selon la page active). */ .onglets { position: absolute; bottom: 75px; left: 50%; transform: translateX(-50%); display: inline-flex; border: 1px solid var(--cream); border-radius: var(--border-radius-1); } .onglet { padding: 12px 24px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream); text-decoration: none; opacity: 0.8; } .onglet--actif { background: var(--cream); color: var(--encre); opacity: 1; } .onglet--actif:first-child { border-radius: var(--border-radius-1) 0 0 var(--border-radius-1); } .onglet--actif:last-child { border-radius: 0 var(--border-radius-1) var(--border-radius-1) 0; } .onglet:hover { opacity: 1; } /* Mobile : le cadre occupe presque toute la largeur (94vw), les onglets se partagent l'espace à parts égales avec le texte centré. */ @media (max-width: 767px) { .onglets { left: auto; transform: none; margin: 0 6px; width: 94vw; } .onglet { flex: 1; padding: 8px; text-align: center; } } /* =================================================================== SECTIONS =================================================================== */ .section-centree { text-align: center; padding-block: 124px 124px; } .section-centree .texte-doux { max-width: 28em; margin-inline: auto; } .section-centree .bouton { margin-top: 32px; } .deux-colonnes { display: grid; gap: 48px; padding-block: 64px; } @media (min-width: 768px) { .deux-colonnes { grid-template-columns: 1fr 1fr; } } /* Grille de catégories décalée (accueil) */ .categories { display: grid; gap: 32px 32px; padding-block: 80px; } .categorie { display: block; text-decoration: none; } .categorie__media { border-radius: var(--border-radius-1); } .categorie__media img { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); border-radius: var(--border-radius-1); } .categorie:hover .categorie__media img { transform: scale(1.05); } .categorie__ligne { position: relative; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--encre); padding-block: 12px 8px; font-size: 1rem; font-weight: 500; } .categorie__plus { /* Boîte fixe de 34 px : le signe grossit sans dicter la hauteur de la ligne (le line-height hérité de 1.6 la ferait gonfler) */ display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 3px; font-size: 52px; line-height: 1; transition: opacity var(--transition-douce); font-weight: 100; } /* Survol : le + s'estompe et « Sélectionner » glisse depuis la droite */ .categorie:hover .categorie__plus { opacity: 0; } .categorie__selectionner { position: absolute; right: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0; transform: translateX(40px); transition: opacity var(--transition-douce), transform var(--transition-douce); } .categorie:hover .categorie__selectionner { opacity: 1; transform: translateX(0); } @media (min-width: 768px) { .categories { grid-template-columns: repeat(12, 1fr); row-gap: 64px; } .categorie--chalets { grid-column: 1 / span 6; } .categorie--chambres { grid-column: 9 / span 4; } .categorie--corporatif { grid-column: 8 / span 5; } } /* Découvrir (accueil) */ .decouvrir { display: grid; gap: 32px; padding-block: 64px; text-align: center; } @media (min-width: 768px) { .decouvrir { grid-template-columns: repeat(3, 1fr); } } .decouvrir__carte { text-decoration: none; } .decouvrir__media { aspect-ratio: 1; display: block; overflow: hidden; background: var(--sand); margin-bottom: 2rem; } .decouvrir__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .decouvrir__carte:hover .decouvrir__media img { transform: scale(1.05); } /* Typographie de la maquette pour les cartes de l'accueil */ .decouvrir .sur-titre { font-size: 15px; line-height: 1; letter-spacing: 5%; } .decouvrir__texte { display: block; max-width: 20em; margin-inline: auto; font-size: 25px; font-weight: 400; line-height: 1; letter-spacing: 0; margin-top: 1rem; } /* FAQ — carte vert sauge arrondie pleine largeur, texte crème (maquette). Même patron de carte que .evenements-accueil__carte. */ .faq { padding-block: 0px; } .faq__carte { padding: 60px; border-radius: var(--border-radius-2); background: var(--brun-faq); color: var(--cream); } .faq__carte .sur-titre { font-size: 12px; margin-bottom: 16px; } .faq__titre { margin: 0 0 24px; font-size: clamp(1.75rem, 3.6vw, 5rem); font-weight: 400; line-height: 1; } /* Intertitre de catégorie — affiché seulement quand la liste en compte plusieurs */ .faq__categorie { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin: 4rem 0 0; } .faq__categorie:first-child { margin-top: 0; } .faq__item { border-bottom: 1px solid rgba(255, 253, 247, 0.6); } .faq__item summary { cursor: pointer; padding-block: 20px; font-weight: 500; font-size: 18px; list-style: none; position: relative; padding-right: 32px; } /* Icône « + » en image, teintée avec la couleur courante du texte (masque), comme les entrées de menu à sous-menu dans l'entête. */ .faq__item summary::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; font-size: 22px; background-color: currentColor; -webkit-mask: url("../images/plus.svg") no-repeat center / contain; mask: url("../images/plus.svg") no-repeat center / contain; } /* État ouvert : tiret textuel — on annule la boîte masquée */ .faq__item[open] summary::after { content: "−"; width: auto; height: auto; background: none; -webkit-mask: none; mask: none; } .faq__reponse { padding-bottom: 20px; color: rgba(255, 253, 247, 0.85); } /* Version épurée (page FAQ) — sans carte ni en-tête, texte à l'encre */ .faq--epure { padding-block: 0 80px; color: var(--encre); } .faq--epure .faq__item { border-bottom-color: rgba(42, 40, 32, 0.25); } .faq--epure .faq__reponse { color: var(--encre); } /* Bouton sombre centré sous l'accordéon (accueil) */ .faq__action { margin: 36px 0 0; text-align: center; } .faq__action .bouton { background: var(--encre); padding-block: 18px 16px; font-size: 13px; } /* Partenaires */ .partenaires__titre { font-size: 22px; font-weight: 700; } /* Ruban défilant vers la gauche : la piste contient un nombre pair de séries identiques et se décale de -50 %, ce qui reboucle sans saut visible. */ .partenaires__bandeau { overflow: hidden; width: 88%; margin: 0 auto 0; opacity: 0.7; font-size: 13px; text-transform: uppercase; letter-spacing: 0.15em; /* Fondu aux deux bords : les logos se révèlent en entrant et s'effacent en sortant du ruban. */ -webkit-mask-image: linear-gradient( to right, transparent 0, #000 12%, #000 88%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 12%, #000 88%, transparent 100% ); } .partenaires__piste { display: flex; width: max-content; animation: defilement-partenaires 40s linear infinite; } /* Pause au survol : laisse le temps de viser un logo cliquable */ .partenaires__bandeau:hover .partenaires__piste { animation-play-state: paused; } .partenaires__serie { display: flex; align-items: center; gap: 48px; padding-right: 48px; /* même écart à la jonction de deux séries */ } @keyframes defilement-partenaires { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .partenaires__piste { animation: none; } .partenaires__bandeau { overflow-x: auto; } } .partenaires__logo { max-height: 112px; width: auto; } /* Avis clients */ .avis { padding-block: 0px 80px; text-align: center; } .avis > a { margin-top: 53px; margin-bottom: 20px; } .avis__grille { display: grid; gap: 24px; /* margin-top: 32px; */ } @media (min-width: 768px) { .avis__grille { grid-template-columns: 1fr 1fr; } } /* Mobile : un seul commentaire affiché, les autres restent accessibles via le bouton « voir plus de commentaires » */ @media (max-width: 767px) { .avis__carte:not(:first-child) { display: none; } } .avis__carte { background: rgba(237, 236, 230, 1); margin: 0; padding: 5vw 5vw 2.5vw 5vw; text-align: center; /* Hauteur fixe : header en haut, étoiles en bas, texte centré au milieu, peu importe la longueur du commentaire */ height: 455px; display: flex; flex-direction: column; /* Permet de dimensionner les étoiles en proportion de la carte (cqi) */ container-type: inline-size; border-radius: var(--border-radius-2 ); font-family: var(--police-display); font-size: 1rem; } .avis__carte figcaption { flex-shrink: 0; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 5%; } .avis__carte blockquote { /* Occupe l'espace restant et centre le texte verticalement */ flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; margin: 24px 0; font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: 5%; text-align: center; } .avis__etoiles { flex-shrink: 0; color: var(--encre); font-size: 8cqi; line-height: 1; } /* Intro chalets — bloc de texte étroit et centré (maquette) */ .intro-chalets { max-width: 709px; margin-inline: auto; padding: 260px 24px 240px 24px; text-align: center; font-weight: 500; } .intro-chalets h2 { font-family: var(--police-display); } /* Arbre centré dans son contenant (deux images superposées) */ .intro-chalets__picto { position: relative; width: 337px; max-width: 100%; margin-inline: auto; } .intro-chalets__contenant { width: 100%; height: auto; display: block; } .intro-chalets__arbre { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44%; /* proportion naturelle : 150 / 337 */ height: auto; } .intro-chalets .bouton { margin-top: 32px; } /* Grille des chalets */ .grille-chalets { border-top: 1px solid var(--filet); padding-block: 80px; } .grille-3 { display: grid; gap: 48px 32px; } /* Archives chalets / chambres : une seule colonne étirée (mise en page mobile) jusqu'à 1350px, trois colonnes seulement au-delà. */ @media (min-width: 1350px) { .grille-3 { grid-template-columns: repeat(3, 1fr); } } .carte-chalet { display: block; text-decoration: none; } .carte-chalet__media { border-radius: var(--border-radius-1); } .carte-chalet__media img { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .carte-chalet:hover .carte-chalet__media img { transform: scale(1.05); } /* Légende : nom à gauche, encadré de détails à droite ; au survol les deux s'effacent et « Sélectionner » glisse de la droite vers le centre. */ .carte-chalet__ligne { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; min-height: 2.5em; } .carte-chalet__nom { font-size: 18px; transition: opacity var(--transition-douce); } .carte-chalet__badge { flex-shrink: 0; border: 1px solid black; border-radius: var(--border-radius-1); padding: 6px 12px; font-size: 10px; color: black; text-transform: uppercase; letter-spacing: 5%; transition: opacity var(--transition-douce); } .carte-chalet__selectionner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; opacity: 0; transform: translateX(40px); transition: opacity var(--transition-douce), transform var(--transition-douce); } .carte-chalet:hover .carte-chalet__nom, .carte-chalet:hover .carte-chalet__badge { opacity: 0; } .carte-chalet:hover .carte-chalet__selectionner { opacity: 1; transform: translateX(0); } .grille-chalets .section-centree { padding-block: 64px 0; } /* Heures d'arrivée */ #single-chalet-heures{ padding-block: 48px 0px; } .heures { padding-block: 88px 124px; } .heures__titre { text-align: center; margin: 0 0 32px; } .heures__liste { list-style: disc; width: fit-content; margin: 0 auto; padding-left: 1.2em; text-align: left; } /* Tarifs */ .tarifs { padding-block: 64px; /* Ancre #tarifs : dégage la section de l'en-tête fixe. */ scroll-margin-top: 120px; } /* Bordures foncées et horizontales seulement : le cadre n'a ni côté gauche ni côté droit, et aucune séparation verticale entre les cases */ .tarifs__cadre { display: grid; border-block: 1px solid var(--encre); } @media (min-width: 768px) { .tarifs__cadre { grid-template-columns: 2fr 1fr; } } .tarifs__tableau { padding: 32px; border-right: 1px solid var(--encre); } @media (min-width: 768px) { .tarifs__tableau { padding: 48px; } } .tarifs table, .politique table { width: 100%; /* Fusionne les bordures des cellules : sans lui, le border-spacing par défaut (2px) coupe les filets horizontaux entre chaque cellule */ border-collapse: collapse; margin-top: 32px; text-align: left; } .tarifs th, .tarifs td, .politique th, .politique td { border-top: 1px solid var(--filet); padding: 16px 8px 16px 0; font-weight: 400; } .tarifs thead th { border-top: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--encre-douce); } /* Filets foncés dans les tableaux de tarifs (la politique garde le doux) */ .tarifs th, .tarifs td { border-top-color: var(--encre); } .politique td { text-align: right; } /* Colonnes de prix centrées, entêtes de saisons comprises (la première colonne — noms — reste alignée à gauche) */ .tarifs td, .tarifs thead th:not(:first-child) { text-align: center; } /* Deuxième rangée du cadre : l'autre type d'hébergement dans sa propre case, et à droite une case ne contenant que le bouton vers son archive */ .tarifs__tableau--second { border-top: 1px solid var(--encre); } .tarifs__action { border-top: 1px solid var(--encre); padding: 32px; display: flex; align-items: flex-end; justify-content: left; } .tarifs__legende { background: var(--cream); border-top: 1px solid var(--encre); padding: 32px; display: flex; flex-direction: column; gap: 24px; } @media (min-width: 768px) { .tarifs__legende { border-top: 0; } } .tarifs__legende ul { list-style: none; margin: 8px 0 0; padding: 0; color: var(--encre-douce); font-size: 14px; } .tarifs__legende .bouton { align-self: flex-start; margin-top: auto; } /* Mobile : le cadre s'empile en une colonne, ses bordures (haut/bas du cadre, filet droit du tableau, séparations entre les cases) sont retirées. Les filets horizontaux entre les lignes du tableau restent. */ @media (max-width: 767px) { .tarifs__cadre, .tarifs__tableau, .tarifs__tableau--second, .tarifs__action, .tarifs__legende { border: 0; } } /* Fiche chalet */ .presentation-chalet { display: grid; gap: 48px; align-items: start; padding-block: 96px; } @media (min-width: 768px) { .presentation-chalet { grid-template-columns: 1fr 1fr; } } .badge-encadre { display: inline-block; border: 1px solid var(--encre); padding: 4px 8px; font-weight: 700; font-size: 15px; text-transform: lowercase; letter-spacing: 5%; border-radius: var(--border-radius-1); } .presentation-chalet__adresse { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 32px; } .caracteristiques { display: grid; } @media (min-width: 768px) { .caracteristiques { grid-template-columns: 1fr 1fr; } } .caracteristiques__media { min-height: 420px; background: var(--sand); } .caracteristiques__media img { width: 100%; height: 100%; object-fit: cover; } .caracteristiques__liste { padding: 64px 24px; } @media (min-width: 768px) { .caracteristiques__liste { padding: 64px; } } .caracteristiques dl { margin: 40px 0 0; } .caracteristiques__groupe { border-bottom: 1px solid var(--filet); padding-block: 20px; } .caracteristiques dt { font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .caracteristiques dd { margin: 8px 0 0; color: var(--encre-douce); } /* Carrousel photos */ .carrousel { position: relative; overflow: hidden; } .carrousel__piste { display: flex; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .carrousel__image { flex: 0 0 100%; aspect-ratio: 4 / 3; object-fit: cover; } .carrousel__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(240, 238, 231, 0.85); color: var(--encre); border: 0; width: 44px; height: 44px; font-size: 24px; cursor: pointer; } .carrousel__nav--prec { left: 12px; } .carrousel__nav--suiv { right: 12px; } .carrousel__nav:hover { background: var(--cream); } /* Activités — bascule et recommandations */ /* Activités sur place (page Activités) — sur-titre, texte large et rangée de 3 photos arrondies, fermée par un filet (maquette desc_activité). */ /* Les onglets Hiver/Été, remontés au-dessus, reprennent le retrait du haut. */ .recommandations__saisons { padding-block: 102px 32px; } .sur-place { padding-block: 64px 0; } /* Filet de fermeture dans les gouttières du conteneur, 34px sous les photos */ .sur-place__filet { margin: 34px 0 0; border: 0; border-top: 1px solid black; } .sur-place__texte { max-width: 30em; margin: 0 0 40px; font-size: 45px; font-weight: 500; line-height: 110%; } /* Photo du milieu à 28 % de la largeur, les deux autres se partagent le reste ; elle abandonne son ratio pour prendre la hauteur de la rangée. */ .sur-place__images { display: grid; grid-template-columns: 1fr 28% 1fr; gap: 16px; } .sur-place__images .ratio-7-5 { border-radius: var(--border-radius-1); } .sur-place__images .ratio-7-5:nth-child(2) { aspect-ratio: auto; } @media (max-width: 767px) { .sur-place__texte { font-size: 20px; } .sur-place__images { grid-template-columns: 1fr; } } .recommandations { padding-block: 80px; } /* Bascule Hiver/Été : réutilise le composant .onglets de la page Chalets. Variante fond clair, hors hero : positionnement normal (au lieu de l'absolu du hero) et couleurs en encre au lieu du crème. */ .onglets--clair { position: static; transform: none; /* display: flex (bloc) + width fit-content pour que margin-inline: auto centre réellement les onglets dans leur section. */ display: flex; margin-inline: auto; width: fit-content; border-color: var(--encre); } .onglets--clair .onglet { color: var(--encre); } .onglets--clair .onglet--actif { background: var(--encre); color: var(--cream); } .recommandations__grille { display: grid; gap: 40px; } @media (min-width: 768px) { .recommandations__grille { position: relative; grid-template-columns: 2fr 1fr; /* Réserve la hauteur de l'aperçu (absolu, hors flux) sous la liste, pour qu'il ne déborde pas sur la section suivante. Hauteur = largeur de la colonne (1fr) × 3/4 (ratio 4:3). */ padding-bottom: calc((100% - 40px) / 3 * 3 / 4); } /* La liste occupe toute la largeur ; l'aperçu (même largeur qu'avant) est positionné par main.js juste sous la ligne survolée, à droite. */ .recommandations__grille > :first-child { grid-column: 1 / -1; } .recommandations__apercu { position: absolute; right: 0; top: 0; width: calc((100% - 40px) / 3); transition: top var(--transition-douce); pointer-events: none; } } .recommandations__liste { list-style: none; margin: 24px 0 0; padding: 0; } /* Ligne = bouton (nom) + lieux (au survol) + distance, centrés verticalement */ .recommandations__ligne { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid transparent; transition: border-color var(--transition-douce); } .recommandations__ligne:has(.est-actif) { border-bottom-color: var(--encre); } .recommandations__item { text-align: left; background: none; cursor: pointer; border: 0; padding: 8px 0; font-size: clamp(24px, 3vw, 32px); color: rgba(51, 50, 44, 0.3); transition: color var(--transition-douce); } .recommandations__ligne:hover .recommandations__item:not(.est-actif) { color: rgba(51, 50, 44, 0.6); } .recommandations__item.est-actif { color: var(--encre); } /* Lieux : même traitement que la distance (toujours visibles, 0.7rem) ; soulignés s'ils ont un lien */ .recommandations__lieux { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; color: rgba(51, 50, 44, 0.3); /* pâle au repos, comme le nom inactif */ transition: color var(--transition-douce); } .recommandations__ligne:hover .recommandations__lieux, .recommandations__ligne:focus-within .recommandations__lieux { color: var(--encre); } .recommandations__lieux a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .recommandations__lieux span { text-decoration: none; } /* Distance : petit, à droite de la ligne ; visible seulement pour l'activité active sur bureau (toutes les cartes l'affichent sur mobile). */ .recommandations__km { flex-shrink: 0; margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; opacity: 0; transition: opacity var(--transition-douce); } .recommandations__ligne:has(.est-actif) .recommandations__km { opacity: 1; } .recommandations__apercu { display: none; } @media (min-width: 768px) { .recommandations__apercu { display: block; } } /* Image propre à chaque ligne : mobile seulement (bureau = aperçu flottant) */ .recommandations__image { display: none; } /* Mobile (maquette activité-mobile) : chaque activité est une carte verticale — image arrondie, titre avec la distance à droite, lieux en dessous séparés d'un filet. Tout à l'encre pleine : pas d'état survolé sur tactile. */ @media (max-width: 767px) { .recommandations__liste { display: grid; gap: 48px; } .recommandations__ligne { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "image image" "titre km" "lieux lieux"; align-items: center; gap: 8px 16px; border-bottom: 0; } .recommandations__image { display: block; grid-area: image; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--border-radius-1); margin-bottom: 8px; } .recommandations__item, .recommandations__item.est-actif, .recommandations__ligne:hover .recommandations__item:not(.est-actif) { grid-area: titre; padding: 0; font-size: 28px; color: var(--encre); } .recommandations__km { grid-area: km; margin-left: 0; opacity: 1; } /* Lieux empilés, un par ligne */ .recommandations__lieux, .recommandations__ligne:hover .recommandations__lieux { grid-area: lieux; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 0.8rem; color: var(--encre); } } .carte-panneau__media{ border-radius: var(--border-radius-1); } .carte-panneau { display: grid; gap: 24px; padding: 32px; border-radius: var(--border-radius-1); } @media (min-width: 768px) { .carte-panneau { grid-template-columns: 1fr 1fr; } } .carte-panneau--peche { background: var(--peche); } .carte-panneau--sable { background: var(--sand); } .carte-panneau__texte { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; } .carte-panneau .bouton { align-self: flex-start; } /* Activités des alentours */ .alentours { background: var(--cream); padding-block: 80px; } /* Texte + bouton à gauche, 3 images à droite (empilé sur mobile) */ .alentours__grille { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .alentours__grille { grid-template-columns: 5fr 7fr; gap: 64px; } } .alentours__texte p { max-width: 42ch; margin: 0 0 32px; } .alentours__images { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .alentours__images .ratio-3-4 { border-radius: var(--border-radius-1); } /* Évènements — accueil : grille de 3 cartes, image voilée au survol avec étiquettes, horaire et lieu. La ligne titre + « + » réutilise .categorie__ligne / .categorie__plus / .categorie__selectionner. */ .evenements-accueil { padding-block: 41px; } /* Carte sombre pleine largeur du conteneur, texte crème (maquette) */ .evenements-accueil__carte { padding: 60px; border-radius: var(--border-radius-2); background: var(--encre-event); color: var(--cream); } .evenements-accueil__carte .sur-titre { color: var(--cream); font-size: 0.8rem; margin-bottom: 32px; } .evenements-accueil__grille { display: grid; gap: 32px 24px; } @media (min-width: 768px) { .evenements-accueil__grille { grid-template-columns: repeat(3, 1fr); } } .evenement-carte { display: block; text-decoration: none; color: inherit; } .evenement-carte__media { position: relative; display: block; aspect-ratio: 6 / 5; overflow: hidden; border-radius: var(--border-radius-1); background: var(--sand); } .evenement-carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .evenement-carte:hover .evenement-carte__media img, .evenement-carte:focus-visible .evenement-carte__media img { transform: scale(1.05); } /* Voile sombre (même teinte que .hero__voile--fonce) : invisible au repos, apparaît au survol avec ses infos — l'image reste en couleur. */ .evenement-carte__voile { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 12px 14px; background: rgba(51, 50, 44, 0.4); color: var(--cream); opacity: 0; transition: opacity var(--transition-douce); } .evenement-carte:hover .evenement-carte__voile, .evenement-carte:focus-visible .evenement-carte__voile { opacity: 1; } .evenement-carte__types { display: flex; flex-wrap: wrap; gap: 6px; } .evenement-carte__type { display: inline-block; padding: 4px 12px; border: 1px solid var(--cream); border-radius: var(--border-radius-1); font-size: 12px; line-height: 1.4; white-space: nowrap; } .evenement-carte__infos { display: flex; flex-direction: column; gap: 4px; } .evenement-carte__horaire { font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; } .evenement-carte__lieu { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .evenement-carte__ligne { font-size: 20px; line-height: 1.2; border-bottom-color: rgba(255, 253, 247, 0.6); } .evenement-carte__ligne > span:first-child { padding-right: 48px; } /* Réplique des états de survol de .categorie sur la carte d'évènement */ .evenement-carte:hover .categorie__plus, .evenement-carte:focus-visible .categorie__plus { opacity: 0; } .evenement-carte:hover .categorie__selectionner, .evenement-carte:focus-visible .categorie__selectionner { opacity: 1; transform: translateX(0); } .evenements-accueil__action { margin: 56px 0 0; text-align: center; } .evenements-accueil__action .bouton--contour--white:hover { background: var(--cream); color: var(--encre); } /* Évènements — rangées type tableau (maquette eventsDesign) : titre, horaire et lieu séparés d'un filet vertical, étiquettes de types à droite, vignette carrée qui touche les filets haut et bas. */ .evenements__liste { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid black; } .evenements__item { border-bottom: 1px solid black; } .evenement-ligne { display: grid; grid-template-areas: "titre infos types media"; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto 128px; align-items: stretch; gap: 0 32px; text-decoration: none; color: inherit; } .evenement-ligne__titre { grid-area: titre; align-self: center; margin: 0; padding-block: 24px; font-size: clamp(20px, 2vw, 26px); font-weight: 400; line-height: 1.2; } .evenement-ligne__infos { grid-area: infos; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding-block: 24px; padding-left: 32px; border-left: 1px solid black; } .evenement-ligne__horaire { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.4; } .evenement-ligne__lieu { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .evenement-ligne__types { grid-area: types; display: flex; flex-direction: column; align-items: flex-end; justify-content: top; gap: 8px; padding-block: 24px; } .evenement-ligne__type { display: inline-block; padding: 4px 14px; border: 1px solid var(--encre); border-radius: var(--border-radius-1); font-size: 15px; line-height: 1.4; white-space: nowrap; } /* Fiche d'un évènement : rangée de détails (date, horaire, lieu, types) séparée du texte par des filets */ .evenement-fiche__details { list-style: none; display: flex; flex-wrap: wrap; gap: 24px 56px; margin: 0 0 40px; padding: 0 0 24px; border-bottom: 1px solid var(--filet); } .evenement-fiche__detail { display: grid; gap: 4px; } .evenement-fiche__lieu { display: inline-flex; align-items: center; gap: 6px; } .evenement-fiche__types { display: flex; flex-wrap: wrap; gap: 8px; } .evenement-fiche__action { margin-top: 40px; } .evenement-fiche__retour { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--filet); } .evenement-fiche__retour a { color: var(--encre); } /* La vignette occupe toute la hauteur de la rangée, collée au bord droit */ .evenement-ligne__media { grid-area: media; overflow: hidden; background: var(--sand); } .evenement-ligne__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Partenaires : mêmes rangées que les évènements, avec le logo entier (jamais rogné) sur fond sable, et un rabais en texte courant. */ .evenement-ligne__media--logo { background: var(--cream); /* même fond que la page : le logo ne flotte pas dans une case sable */ } .evenement-ligne__media--logo img { object-fit: contain; padding: 12px; box-sizing: border-box; } .partenaire-ligne__rabais { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 15px; line-height: 1.5; /* Description complète : la rangée s'allonge, l'image suit (height 100 %) */ white-space: normal; overflow-wrap: anywhere; } /* Mise en forme de l'éditeur conservée : paragraphes et puces visibles */ .partenaire-ligne__rabais p { margin: 0 0 0.5em; } .partenaire-ligne__rabais p:last-child, .partenaire-ligne__rabais ul:last-child, .partenaire-ligne__rabais ol:last-child { margin-bottom: 0; } .partenaire-ligne__rabais ul, .partenaire-ligne__rabais ol { margin: 0 0 0.5em; padding-left: 1.3em; } .partenaire-ligne__rabais ul { list-style: disc; } .partenaire-ligne__rabais li { margin-bottom: 0.25em; } .partenaire-fiche__logo { display: block; max-width: 220px; height: auto; margin-bottom: 32px; } .partenaire-fiche__rabais { margin-block: 32px; } .partenaire-fiche__rabais .sur-titre { margin-bottom: 8px; } .partenaire-fiche__rabais .texte-doux { font-size: 1.15rem; font-weight: 700; } /* Bureau : les colonnes sont définies une seule fois sur la liste et partagées par toutes les rangées (subgrid). Sans cela, chaque rangée calcule sa propre colonne « auto » d'étiquettes et la largeur du titre varie d'une rangée à l'autre. */ @media (min-width: 768px) { .evenements__liste { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto 128px; } .evenements__item, .evenement-ligne { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; } } /* Mobile : titre et infos à gauche de la vignette, étiquettes en dessous */ @media (max-width: 767px) { .evenement-ligne { grid-template-areas: "titre media" "infos media" "types types"; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px 16px; padding-block: 20px; } .evenement-ligne__titre, .evenement-ligne__infos, .evenement-ligne__types { padding-block: 0; } .evenement-ligne__infos { padding-left: 0; border-left: 0; } .evenement-ligne__types { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; } .evenement-ligne__media { aspect-ratio: 1; align-self: start; } } /* Contenu générique */ .contenu-generique { padding-block: 6rem 80px; } /* =================================================================== PAGES NOUS JOINDRE ET RÉSERVATION DE GROUPE =================================================================== */ .entete-page { max-width: 40em; margin-bottom: 48px; } .page-contact, /* Réservation : cadre filet haut/bas, intro encadrée à gauche, formulaire à droite séparé par un filet vertical (voir formualireDesign.png) */ .page-reservation { display: grid; gap: 48px; align-items: stretch; border-block: 1px solid black; /* padding-block: 32px; */ scroll-margin-top: 120px; margin-bottom: 80px; } @media (min-width: 900px) { .page-contact { grid-template-columns: 1fr 1.1fr; } .page-reservation { grid-template-columns: 1fr 2fr; gap: 0; } } .page-contact__coordonnees { display: grid; gap: 28px; margin-top: 40px; } .page-contact__coordonnees .sur-titre { margin-bottom: 4px; } .page-contact__coordonnees p { margin: 0; } .page-reservation__details { display: flex; flex-direction: column; gap: 48px; } .page-reservation__intro { border: 1px solid black; border-right: none !important; border-left: none !important; border-top: none !important; padding: 28px 24px 36px; } .page-reservation__intro .titre-h4 { margin-top: 0; } .page-reservation__partenaires { margin-top: auto; border-top: 1px solid black; padding-block: 24px 4rem; padding-inline: 0 2rem; font-size: 0.9rem; } .page-reservation__partenaires p { margin: 0 0 1em; } .page-reservation__partenaires p:last-child { margin-bottom: 0; } .page-contact__formulaire { border-left: 1px solid black; /* background: var(--sand); */ padding: 40px 32px; scroll-margin-top: 120px; } .page-reservation__formulaire { padding: 8px 0 4rem 32px; } @media (min-width: 900px) { /* .page-reservation__details { padding-right: 40px; } */ .page-reservation__formulaire { border-left: 1px solid black; padding-left: 48px; } } .page-reservation__formulaire .bouton { background: var(--encre); } /* Formulaires (nous joindre, réservations de groupe) */ .formulaire { display: grid; gap: 32px; margin-top: 24px; } .formulaire__rangee { display: grid; gap: 20px; } @media (min-width: 640px) { .formulaire__rangee { grid-template-columns: 1fr 1fr; } } .formulaire__champ { display: grid; gap: 6px; margin: 0; } .formulaire__champ label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .formulaire__champ input, .formulaire__champ textarea { width: 100%; border: 1px solid black; border-radius: var(--border-radius-1); background: var(--cream); color: var(--encre); padding: 12px 14px; font: inherit; } .formulaire__champ input:focus, .formulaire__champ textarea:focus { outline: 2px solid var(--olive); outline-offset: -1px; } /* Champ « nombre de personnes » : simple soulignement, comme la maquette */ .formulaire__champ--souligne input { border: 0; border: 1px solid var(--encre); background: transparent; padding-inline: 4px; } .formulaire textarea { min-height: 140px; resize: vertical; } .formulaire .bouton { border: 0; cursor: pointer; justify-self: start; } /* Groupes de cases à cocher (type de groupe, but du séjour, préférence, service) */ .formulaire__cases { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; } .formulaire__cases legend { padding: 0; margin-bottom: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .formulaire__cases .case { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.95rem; color: var(--encre); } .formulaire__cases .case input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--olive); } /* Piège à robots : champ hors écran, invisible pour les visiteurs */ .champ-piege { position: absolute; left: -9999px; } /* Message de succès ou d'erreur après l'envoi d'un formulaire */ .avis-envoi { padding: 14px 18px; margin: 0 0 24px; } .avis-envoi--succes { background: var(--lime); } .avis-envoi--erreur { background: #f3d9d3; } .descover-activities__carte > div.filet{ margin: 20px auto 35px; } .descover-activities__carte{ /* */ border-radius: var(--border-radius-2); position: relative; text-align: center; color: var(--cream); padding-inline: 24px; background: url("../images/piscine.png") bottom / cover no-repeat; padding: 10rem 0 9rem 0; align-content: center; } @media (max-width: 768px) { .descover-activities__carte{ padding: clamp(2rem, 18vw, 18rem) 0 clamp(2rem, 16vw, 18rem); } } .descover-activities__titre{ font-family: var(--police-display); font-size: clamp(1rem, 8vw,2.7rem); margin-bottom: 0px; } .descover-activities__logo{ display: block; width: auto; height: 3rem; margin: 0 auto 3.4rem; } .descover-activities > a > img{ color: var(--cream); } .descover-activities{ padding-top:3.5rem; } /* =================================================================== SECTION ANIMÉE DE L'ACCUEIL — texte révélé de gauche à droite, puis photos qui apparaissent autour (voir main.js) =================================================================== */ /* Carte arrondie pleine largeur — le padding du conteneur (24 px) garde le fond sable à distance des bords de l'écran */ .anim-nature__scene { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 90vh; padding: 96px 24px; background: var(--sand); border-radius: var(--border-radius-1); overflow: hidden; } .anim-nature__texte { position: relative; z-index: 1; margin: 0; /* Spécifications de la maquette : 75 % du conteneur maximum, 58,59 px maximum, interligne 120 %, sans interlettrage. Police du thème (la TAY Road Runner n'est pas utilisée ici). */ max-width: 75%; text-align: center; font-family: var(--police-texte); font-weight: 400; font-size: clamp(20px, 3.4vw, 58.59px); line-height: 1.2; text-transform: uppercase; letter-spacing: 0; color: rgba(89, 84, 62, 1); } .anim-nature__photo { position: absolute; margin: 0; width: clamp(84px, 10vw, 130px); aspect-ratio: 4 / 5; border-radius: var(--border-radius-1); overflow: hidden; } .anim-nature__photo img { width: 100%; height: 100%; object-fit: cover; } .anim-nature__photo--1 { left: 12%; top: 20%; } .anim-nature__photo--2 { left: 26%; top: 8%; } .anim-nature__photo--3 { right: 16%; top: 14%; aspect-ratio: 1 / 1; } .anim-nature__photo--4 { left: 21%; bottom: 10%; } .anim-nature__photo--5 { left: 49%; bottom: 13%; } .anim-nature__photo--6 { right: 10%; bottom: 6%; } /* État initial (classe posée par main.js — sans JS, tout reste visible) : le texte se dévoile de gauche à droite, et les photos montent depuis le bas de la section (décalées). Le « overflow: hidden » du scène les garde dans le cadre. */ .anim-nature.anim-prete .anim-nature__texte { opacity: 0; clip-path: inset(0 100% 0 0); transition: var(--transition-texte); } .anim-nature.anim-prete .anim-nature__photo { transform: translateY(100vh); /* Délai de base = durée du balayage du texte (0,9 s), puis décalage par photo */ transition: var(--transition-photo) calc(0.9s + var(--i) * 0.15s); } .anim-nature.est-visible .anim-nature__texte { opacity: 1; clip-path: inset(0 0 0 0); } .anim-nature.est-visible .anim-nature__photo { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .anim-nature.anim-prete .anim-nature__texte, .anim-nature.anim-prete .anim-nature__photo { opacity: 1; clip-path: none; transform: none; transition: none; } } /* Sous 640 px : les photos passent en rangée sous le texte pour ne pas chevaucher les mots. */ @media (max-width: 639px) { .anim-nature__scene { display: flex; flex-direction: column; align-items: center; gap: 40px; min-height: 0; padding-block: 72px; } .anim-nature__photos { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .anim-nature__photo { position: static; width: 27%; } } /* =================================================================== PIED DE PAGE — fond olive, menus WordPress =================================================================== */ .pied { background: var(--olive); color: var(--cream); margin-top: 0; } .pied__grille { display: grid; gap: 17vw; padding-block: 64px; } @media (min-width: 768px) { .pied__grille { grid-template-columns: auto 2fr; } } .pied__marque { display: flex; gap: 32px; } .pied__logo { height: 147px; width: auto; } .pied .menu { list-style: none; margin: 0; padding: 0; } .pied a { text-decoration: none; } .pied a:hover { text-decoration: underline; } .pied__liens-principaux { font-family: var(--police-texte); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: 0; display: grid; gap: 8px; } .pied__social { display: flex; align-items: center; gap: 16px; margin-top: 24px; } .pied__langue { font-size: 16px; font-weight: 500; margin-left: 4px; } /* Colonne Activités : 5 premiers titres (texte) + lien « Tout voir » */ .pied__activites { list-style: none; margin: 0; padding: 0; } .pied__activites li { font-size: 16px; font-weight: 500; line-height: 1; } .pied__voir-tout { display: inline-block; margin-top: 14px; font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .pied__colonnes { display: grid; gap: 32px; font-size: 14px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .pied__colonnes { grid-template-columns: repeat(3, 1fr); } } .pied__titre { font-size: 24px; font-weight: 500; line-height: 1; margin: 0 0 15px; } .pied__colonnes .menu { display: grid; gap: 6px; } .pied__colonnes .menu a { font-size: 16px; font-weight: 500; line-height: 1; } .pied__legal { margin-top: 16px; opacity: 0.8; } .pied__adresse { margin-top: 14px !important; } .pied p { margin: 0 0 16px; } /* Tél + courriel groupés sans saut de ligne (après .pied p pour l'emporter) */ .pied__contact p { margin: 0; line-height: 1.4; } /* ---------- Mouvement réduit ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* =================================================================== À PROPOS — carte bleue : texte à gauche, photo à droite =================================================================== */ .a-propos { margin-top: 41px; } .a-propos__carte { display: grid; grid-template-columns: 1fr minmax(0, 330px); gap: 32px; padding: 20px 60px; border-radius: var(--border-radius-2); background: rgba(134, 173, 188, 0.78); /* --olive à 78 % d'opacité */ color: var(--cream); } .a-propos__contenu { display: flex; flex-direction: column; align-items: flex-start; padding-block: 20px } .a-propos__etiquette { margin: 0 0 12px; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .a-propos__titre { margin: 0 0 auto; max-width: 9em; font-family: var(--police-texte); font-weight: 500; font-size: clamp(1.75rem, 3.6vw, 5rem); line-height: 85%; } .a-propos__contenu .bouton { margin-top: 40px; } .a-propos__media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius-1); } @media (max-width: 768px) { .a-propos__carte { grid-template-columns: 1fr; padding: 24px; } .a-propos__media { order: -1; aspect-ratio: 4 / 5; } } /* Cartes pleine largeur sur mobile : à propos, évènements accueil, FAQ. Les marges négatives annulent la gouttière de 24px du .conteneur parent (bord à bord sans recourir à 100vw, qui ignore la barre de défilement). Coins carrés ; on garde la gouttière en padding interne pour que le texte reste aligné avec le reste de la page. */ @media (max-width: 767px) { .conteneur > .a-propos__carte, .conteneur > .evenements-accueil__carte, .conteneur > .faq__carte { margin-inline: -24px; border-radius: 0; padding: 40px 24px; } } /* =================================================================== MISSION — carte olive, texte centré en capitales, accroche surlignée (parts/mission.php, bloc « Mission du Domaine »). Même patron de carte et de bouton que .evenements-accueil__carte. Pas de conteneur : le bloc hérite de la largeur du contenu de la page. =================================================================== */ .mission { padding-block: 40px; } .mission__carte { padding: 120px 60px 80px 60px; border-radius: var(--border-radius-2); background: var(--olive-secondaire); color: var(--cream); text-align: center; } .mission__texte { margin: 0 auto; max-width: 26em; font-family: var(--police-display); font-size: clamp(1.25rem, 3vw, 55px); line-height: 114%; text-transform: uppercase; letter-spacing: 0.02em; } /* Accroche sur fond encre : le bandeau est un pseudo-élément placé derrière le texte, comme le surlignage du hero, pour ne pas casser le flux. */ .mission__texte mark { position: relative; isolation: isolate; background: none; color: var(--cream); padding-inline: 10px; } .mission__texte mark::before { content: ""; position: absolute; inset: -0.2em 0; z-index: -1; transform: rotate(-0.5deg) translate(0px, -13px); transform-origin: center; z-index: -1; background: var(--encre); border-radius: var(--border-radius-1); } .mission__action { margin: 56px 0 0; text-align: center; } .mission__action .bouton--contour--white:hover { background: var(--cream); color: var(--encre); } /* =================================================================== NOTRE HISTOIRE — chronologie à gauche, deux photos empilées à droite (parts/histoire.php, bloc « Notre histoire », maquette notre-histoire). =================================================================== */ .histoire { padding-block: 10px; } .histoire__grille { display: grid; gap: 48px; margin-top: 24px; } @media (min-width: 768px) { /* Seul le texte est dans le flux : c'est lui qui donne la hauteur. La colonne de droite est un repère vide, les photos s'y posent en absolu. */ .histoire__grille { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } } .histoire__chapitres { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; } .histoire__titre { margin: 0 0 8px; font-family: var(--police-texte); font-size: 45px; font-weight: 500; line-height: 1.1; } .histoire__texte { margin: 0; max-width: 25em; } .histoire__texte strong { font-weight: 700; } /* Photos : même largeur, empilées, coins arrondis */ .histoire__photos { display: grid; gap: 24px; align-content: start; } .histoire__photo { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: unset; border-radius: var(--border-radius-1); } /* Bureau : colonne de droite hors flux, calée du haut au bas du texte ; photo du haut = 2/3 de la hauteur, photo du bas = 1/3, recadrées (cover). Hors flux, la taille naturelle des images ne peut plus allonger la section. */ @media (min-width: 768px) { .histoire__photos { position: absolute; top: 0; bottom: 0; right: 0; width: calc(50% - 32px); /* moitié droite moins la demi-gouttière (64px / 2) */ grid-template-rows: 1.3fr 1fr; /* haut ≈ 62 %, bas ≈ 38 % (le tiers agrandi de 15 %) */ align-content: stretch; } .histoire__photo { aspect-ratio: auto; height: 100%; min-height: 0; } } @media (max-width: 768px) { .mission__carte { padding: 24px; } } .politique__texte{ width:50%; padding-top:4rem; } .politique__texte h3{ margin-bottom:0.5rem; margin-top:2rem; } .politique__texte p{ margin-top:0; } @media (max-width: 768px) { .politique__texte{ width:100%; padding-top:2rem !important; } } /* =================================================================== ÉQUIPE — grille de photos carrées, 3 par rangée (parts/equipe.php, bloc « Équipe du Domaine », maquette employeees.png). Bureau : au survol ou au focus, un voile encre recouvre la photo : nom en police d'affichage, filet vertical, court portrait. La carte est un conteneur (unités cqi) : le texte se met à l'échelle de la largeur de la carte pour que le portrait complet (≈ 460 caractères) tienne dans le carré. Mobile : patron des cartes .categorie de l'accueil — nom sous la photo, « + » à droite, le portrait se déplie au clic (classe est-ouvert). =================================================================== */ .equipe { padding-block: 40px; } .equipe__grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 600px) { .equipe__grille { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .equipe__grille { grid-template-columns: repeat(3, 1fr); } } .equipe__carte { position: relative; overflow: hidden; background: rgb(42, 40, 32); color: var(--cream); container-type: inline-size; cursor: default; } .equipe__carte:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; } .equipe__media { aspect-ratio: 1 / 1; } .equipe__photo { display: block; width: 100%; height: 100%; object-fit: cover; } .equipe__voile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7%; background: rgb(42, 40, 32); text-align: center; opacity: 0; transition: opacity var(--transition-douce); } .equipe__carte:hover .equipe__voile, .equipe__carte:focus-visible .equipe__voile, .equipe__carte--sans-photo .equipe__voile { opacity: 1; } .equipe__nom { margin: 0; font-family: var(--police-display); font-weight: 400; font-size: max(1.5rem, 8cqi); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.05em; } .equipe__plus { display: none; } .equipe__filet { height: 10cqi; margin: 3cqi auto; } .equipe__texte { margin: 0; font-size: max(12px, 3.7cqi); line-height: 1.3; } /* Message de l'aperçu de l'éditeur quand aucune fiche n'est publiée */ .equipe__vide { padding: 24px; border: 1px dashed var(--filet); color: var(--encre-douce); text-align: center; } /* Mobile : plus de survol. La carte devient une grille à deux colonnes (photo, puis ligne nom + « + », puis portrait déplié) ; le voile passe en display: contents pour que ses enfants se placent dans cette grille. Même seuil que les cartes .categorie. */ @media (max-width: 767px) { .equipe__carte { display: grid; grid-template-columns: 1fr auto; align-items: stretch; overflow: visible; background: none; color: var(--encre); container-type: normal; } .equipe__media { grid-column: 1 / -1; border-radius: var(--border-radius-1); overflow: hidden; } .equipe__carte--sans-photo .equipe__media { display: none; } .equipe__voile { display: contents; } /* Ligne nom + « + » : mêmes proportions que .categorie__ligne, le filet horizontal est partagé entre les deux cellules */ .equipe__nom, .equipe__plus { border-bottom: 1px solid var(--encre); } .equipe__nom { grid-column: 1; padding-block: 12px 8px; font-family: var(--police-texte); font-size: 1rem; font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.6; } .equipe__plus { grid-column: 2; display: inline-flex; align-items: center; justify-content: center; width: 52px; margin: 0; padding: 0; background: none; border-top: 0; border-inline: 0; border-radius: 0; color: inherit; font: inherit; font-size: 52px; font-weight: 100; /* line-height 0 : le signe grossit sans étirer la rangée, comme la boîte de 3 px de .categorie__plus. Le filet reste aligné sur celui du nom. */ line-height: 0; cursor: pointer; } /* Le signe « + » devient « − » quand le portrait est déplié (main.js) */ .equipe__plus span { display: block; } .equipe__filet { display: none; } .equipe__texte { grid-column: 1 / -1; display: none; padding-top: 12px; font-size: 1rem; text-align: left; } .equipe__carte.est-ouvert .equipe__texte { display: block; } } .goto{ scroll-margin-top: 40px; }