/* La Plonplonière — maquette MCD Builder
   Valeurs mesurées sur le site actuel (Chrome, 1440 / 1024 / 390 px). Un bloc par composant. */

/* ---------------------------------------------------------------- polices */
@font-face { font-family: "Playfair Display"; src: url("../../mcd-builder/assets/613a720fdf61e1c6f30818dee6517963a68e2e3e.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../../mcd-builder/assets/b6711decba0d571b538ca01de8a6e70ae4d219af.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
/* polices de secours aux mêmes dimensions (aucun décalage au chargement) */
@font-face { font-family: "Playfair repli"; src: local("Georgia"); size-adjust: 99.80%; ascent-override: 108.42%; descent-override: 25.15%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat repli"; src: local("Arial"); size-adjust: 109.03%; ascent-override: 88.79%; descent-override: 23.02%; line-gap-override: 0%; }

/* ---------------------------------------------------------------- charte */
:root {
  --color-primary: #87a285;          /* vert sauge de la maison */
  --color-text: #212121;
  --color-white: #ffffff;
  --color-icone: #69727d;
  --color-voile: rgba(33, 33, 33, .2);
  --color-voile-carte: rgba(33, 33, 33, .3);
  --color-champ: rgba(255, 255, 255, .2);
  --font-titre: "Playfair Display", "Playfair repli", Georgia, serif;
  --font-texte: "Montserrat", "Montserrat repli", Arial, sans-serif;

  --wrap: 1200px;
  --marge: 12px;
  --espace: 240px;           /* entre deux sections */
  --espace-court: 120px;     /* hero → texte d'introduction, intro → défilé */
  --espace-entete: 48px;     /* en-tête de section → carrousel */
  --gap-duo: 96px;
  --h-duo: 700px;
  --h-hero: 60vh;
  --rayon: 5px;

  --t-hero: 54px;            /* titres de hero, noms des chambres */
  --t-titre: 44px;           /* titres de section */
  --t-carte: 32px;           /* titres de carte */
  --t-sous: 24px;            /* titre de la carte de réservation */
  --t-lien: 18px;            /* liens « Découvrir… » */
  --t-texte: 16px;
  --t-question: 24px;        /* questions de la FAQ */
  --ls-texte: .8px;
  --lh-texte: 1.5;
}
@media (max-width: 1024px) {
  :root { --espace: 120px; --espace-court: 80px; --espace-entete: 32px; --gap-duo: 32px; --h-duo: 500px;
          --t-hero: 42px; --t-titre: 32px; --t-carte: 28px; --t-sous: 18px; --t-question: 20px; }
}
@media (max-width: 767px) {
  :root { --espace: 80px; --espace-court: 60px; --espace-entete: 24px; --h-duo: 400px;
          --t-hero: 32px; --t-titre: 24px; --t-carte: 24px; --t-sous: 16px; --t-lien: 16px; --t-texte: 14px; --t-question: 18px; --ls-texte: .7px; }
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-white); color: var(--color-text); font: 400 var(--t-texte)/var(--lh-texte) var(--font-texte);
       letter-spacing: var(--ls-texte); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
video { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p { margin: 0 0 .9em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.wrap { width: min(100% - 2 * var(--marge), var(--wrap)); margin-inline: auto; }
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 12px; top: 12px; z-index: 100; background: var(--color-white); padding: 8px 12px; }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icone, .entete-site svg, .menu svg, .reseaux svg { display: block; flex: none; }

/* ---------------------------------------------------------------- typographie */
.titre { font: 400 var(--t-titre)/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; }
.titre--centre { text-align: center; }
.lien { font: 700 var(--t-lien)/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; display: inline-block; padding: 3px 0; }
.lien:hover { opacity: .7; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; font: 700 18px/1 var(--font-titre);
       text-transform: uppercase; letter-spacing: normal; border-radius: var(--rayon); transition: background-color .3s, color .3s; }
.kicker { font: 700 var(--t-lien)/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; }

/* ---------------------------------------------------------------- espacement des sections */
main > * + * { margin-top: var(--espace); }
main > .hero + .intro, main > .hero + .texte, main > .hero + .partenaires { margin-top: var(--espace-court); }
main > .bloc + .defile { margin-top: 120px; }
main > .entete + .cartes { margin-top: var(--espace-entete); }
main > .livret { margin: auto; }
.pied { margin-top: var(--espace); }
.section--vert { background: var(--color-primary); color: var(--color-white); }
/* avec JS, c'est la page entière qui passe au vert quand une section verte est au milieu de l'écran (comme sur le site) */
body { transition: background-color .6s ease; }
.js .section--vert { background: transparent; }
body.fond-vert { background: var(--color-primary); }

/* ---------------------------------------------------------------- en-tête */
.entete-site { position: fixed; inset: 0 0 auto; z-index: 50; height: 104px; padding: 12px; display: grid; grid-template-columns: 1fr auto 1fr;
               align-items: center; gap: 20px; background: var(--color-primary); color: var(--color-white); transition: background-color .3s; }
.js .entete-site.is-transparent { background: transparent; }
.entete-site__gauche { display: flex; align-items: center; gap: 12px; }
.entete-site__droite { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.entete-site__logo .logo { width: 80px; height: 80px; }
.menu-bouton { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 0; border-right: 1px solid currentColor;
               font: 700 12px/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; }
.menu-bouton svg { width: 36px; height: 30px; }
.entete-site__tel { font: 700 18px/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; }
.btn--resa { width: 220px; height: 66px; background: var(--color-primary); color: var(--color-white); }
.btn--resa svg { width: 18px; height: 18px; }
.entete-site:not(.is-transparent) .btn--resa { background: var(--color-white); color: var(--color-primary); }
.btn--resa:hover { background: var(--color-white); color: var(--color-primary); }
/* sélecteur de langue : la langue affichée (aria-current, posé par MCD Builder), l'autre au survol */
.lang-switcher { position: relative; display: flex; flex-direction: column; font: 700 18px/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; }
.lang-switcher a { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.lang-switcher a[aria-current]::after { content: ""; border: 4px solid transparent; border-top: 5px solid currentColor; margin-top: 4px; }
.lang-switcher a:not([aria-current]) { position: absolute; top: 100%; left: 0; visibility: hidden; background: var(--color-primary); }
.lang-switcher:hover a, .lang-switcher:focus-within a { visibility: visible; }
.lang-switcher a[aria-current] { order: -1; }
@media (max-width: 1024px) { .entete-site__tel { display: none; } }
@media (max-width: 767px) {
  .entete-site { grid-template-columns: 1fr auto 1fr; gap: 0; }
  .entete-site__gauche .lang-switcher { position: absolute; right: 64px; top: 38px; font-size: 16px; }
  .btn--resa { width: 40px; height: 40px; }
  .entete-site__droite .btn--resa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------------------------------------------------------------- menu plein écran */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--color-white); color: var(--color-text); display: grid;
        grid-template: 104px minmax(0, 1fr) / 680px 1fr; overflow: auto; }
.menu[hidden] { display: none; }
.js .menu { transition: opacity .4s; }
.menu__barre { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 12px; }
.menu-bouton--fermer svg { width: 32px; height: 29px; }
.menu__actions { display: flex; align-items: center; gap: 24px; }
.reseaux { display: flex; gap: 12px; }
.reseaux a { display: block; width: 24px; height: 24px; color: var(--color-text); }
.reseaux svg { width: 100%; height: 100%; fill: currentColor; }
.menu__media { width: 680px; height: 100%; min-height: 0; object-fit: cover; }
.menu__nav { display: flex; align-items: center; padding: 0 20px; position: relative; }
.menu__liste { display: flex; flex-direction: column; gap: 32px; }
.menu__liste > li > a, .menu__ouvrir { display: flex; align-items: center; gap: 12px; font: 400 32px/20px var(--font-titre); text-transform: uppercase; letter-spacing: normal; text-align: left; }
.menu__ouvrir svg { width: 18px; height: 18px; fill: currentColor; transform: rotate(-90deg); transition: transform .3s; }
.menu__groupe.is-ouvert .menu__ouvrir { color: var(--color-primary); }
.menu__sous { position: absolute; left: calc(50% + 72px); top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 10px; }
.menu__groupe.is-ouvert .menu__sous { display: flex; }
.menu__sous a, .menu__retour button { font: 400 24px/36px var(--font-titre); text-transform: uppercase; letter-spacing: normal; }
.menu__retour button { font: 700 18px/1 var(--font-titre); display: flex; align-items: center; gap: 6px; }
.menu__retour button::before { content: "←"; }
.menu a:hover { color: var(--color-primary); }
@media (max-width: 1024px) {
  .menu { grid-template: 104px minmax(0, 1fr) / 1fr; }
  .menu__media { display: none; }
}
@media (max-width: 767px) {
  .menu__liste { gap: 12px; }
  .menu__liste > li > a, .menu__ouvrir { font-size: 24px; }
  .menu__nav { align-items: flex-start; padding: 100px 12px 0; }
  .menu__sous { position: absolute; inset: 0; transform: none; background: var(--color-white); padding: 100px 18px 0; }
  .menu__actions .btn--resa { width: 40px; height: 40px; }
  .menu__actions .btn--resa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------------------------------------------------------------- hero */
.hero { position: relative; height: var(--h-hero); min-height: 400px; display: flex; align-items: flex-end; padding-bottom: 48px; color: var(--color-white); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--color-voile); }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--plein { height: 100vh; height: 100svh; }
.hero__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }
.hero__titre { font: 400 var(--t-hero)/1 var(--font-titre); letter-spacing: normal; margin: 0; }
.hero__sous-titre { font: 700 var(--t-hero)/1 var(--font-titre); letter-spacing: normal; text-align: right; margin: 0; }
@media (max-width: 767px) { .hero__contenu { gap: 12px; } .hero { padding-bottom: 32px; } }
/* hero plein écran : le texte reste au-dessus de la barre de réservation fixe */
.hero--plein { padding-bottom: 140px; }
@media (max-width: 767px) { .hero--plein { padding-bottom: 100px; } }

/* ---------------------------------------------------------------- intro (texte seul, centré) et pages de texte */
.intro__corps { max-width: 780px; margin-inline: auto; text-align: center; }
.texte__corps { max-width: 1140px; margin-inline: auto; }
.texte__corps h2, .texte__corps h3, .texte__corps h4 { font: 400 24px/1.2 var(--font-titre); text-transform: uppercase; letter-spacing: normal; margin: 1.5em 0 .6em; }
.texte__corps ul { list-style: disc; padding-left: 1.4em; margin: 0 0 .9em; }
.texte__corps a, .article-body a, .duo__corps a, .intro__corps a, .faq__reponse a { text-decoration: underline; }

/* ---------------------------------------------------------------- bloc (titre + texte centrés, fond vert) */
.bloc { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 780px; }
.no-js .bloc.section--vert { max-width: none; width: 100%; padding: 60px max(var(--marge), (100% - 780px) / 2); }
.bloc__corps { text-align: center; }
.bloc__lien { text-align: center; }
.bloc:not(.section--vert):has(h1) { max-width: var(--wrap); }

/* ---------------------------------------------------------------- en-tête de section : titre + lien | texte */
.entete { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.entete__titre { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
@media (max-width: 767px) { .entete { grid-template-columns: 1fr; gap: 24px; } }

/* ---------------------------------------------------------------- duo : texte + image */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-duo); align-items: start; }
.duo__media { position: relative; grid-column: 2; grid-row: 1; height: var(--h-duo); }
.duo--inverse .duo__media { grid-column: 1; }
.duo--inverse .duo__texte { grid-column: 2; }
.duo__texte { grid-row: 1; display: flex; flex-direction: column; gap: 20px; }
.duo__image { width: 100%; height: 100%; object-fit: cover; }
.duo__corps ul { list-style: disc; padding-left: 1.25em; margin: 0 0 .9em; }
.duo__corps li { margin-bottom: .4em; }
.duo__media--decor .duo__image { position: relative; z-index: 1; width: calc(100% - 28px); margin-left: 28px; }
.duo__decor { position: absolute; left: 0; top: 35px; width: calc(100% - 28px); height: 100%; object-fit: cover; }
.no-js .duo.section--vert { width: 100%; max-width: none; padding: 60px max(var(--marge), (100% - var(--wrap)) / 2); }
@media (max-width: 767px) {
  .duo { grid-template-columns: 1fr; gap: 48px; }
  .duo__media, .duo--inverse .duo__media, .duo__texte, .duo--inverse .duo__texte { grid-column: 1; grid-row: auto; }
  .duo__texte { order: -1; }
  .duo__media--decor .duo__image { width: calc(100% - 18px); margin-left: 18px; }
  .duo__decor { top: 20px; width: calc(100% - 18px); }
}

/* ---------------------------------------------------------------- galerie (carrousel d'images dans un duo) */
.duo--carrousel { align-items: stretch; }
.galerie { position: relative; grid-column: 2; grid-row: 1; height: var(--h-duo); overflow: hidden; }
.duo--inverse .galerie { grid-column: 1; }
.galerie__piste { display: flex; gap: 10px; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.galerie__piste::-webkit-scrollbar { display: none; }
.galerie__media { flex: 0 0 calc(50% - 5px); height: 100%; object-fit: cover; scroll-snap-align: start; }
.duo--fondu .galerie__media { flex-basis: 100%; }
/* golfs : photo paysage (7:4) qui déborde jusqu'au bord de l'écran, côté image */
.duo--fondu .galerie { height: auto; aspect-ratio: 7 / 4; align-self: start; margin-right: calc((min(100vw - 2 * var(--marge), var(--wrap)) - 100vw) / 2); }
.duo--fondu.duo--inverse .galerie { margin-right: 0; margin-left: calc((min(100vw - 2 * var(--marge), var(--wrap)) - 100vw) / 2); }
.duo--fondu .galerie__piste { height: 100%; }
.js .duo--fondu .galerie__piste { display: block; position: relative; overflow: hidden; }
.js .duo--fondu .galerie__media { position: absolute; inset: 0; width: 100%; opacity: 0; transition: opacity .5s; }
.js .duo--fondu .galerie__media.is-active { opacity: 1; }
/* table d'hôtes : texte 602 px, 2 photos de 346 × 700 qui débordent à droite de l'écran */
.duo--defile { grid-template-columns: 602px 1fr; }
.duo--defile .galerie { width: calc(100% + (100vw - min(100vw - 2 * var(--marge), var(--wrap))) / 2); }
.duo--defile .galerie__media { flex-basis: calc((100% - 10px) / 2); max-width: 346px; }
@media (max-width: 1024px) { .duo--defile { grid-template-columns: 1fr 1fr; } .duo--defile .galerie__media { max-width: none; } }
@media (max-width: 767px) {
  .galerie, .duo--inverse .galerie { grid-column: 1; grid-row: auto; height: 400px; }
  .galerie__media { flex-basis: 85%; }
  /* table d'hôtes : une photo pleine largeur, comme sur le site */
  .duo--defile { grid-template-columns: 1fr; }
  .duo--defile .galerie { width: auto; }
  .duo--defile .galerie__media { flex-basis: 100%; }
}
.fleche { position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: var(--color-primary); }
.fleche::before { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 2px; background: var(--color-white); }
.fleche::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border: solid var(--color-white); border-width: 2px 2px 0 0; }
.fleche--prec { left: 20px; } .fleche--prec::after { left: 12px; transform: translateY(-50%) rotate(-135deg); }
.fleche--suiv { right: 20px; } .fleche--suiv::after { right: 12px; transform: translateY(-50%) rotate(45deg); }
.no-js .fleche { display: none; }

/* ---------------------------------------------------------------- cartes à image de fond (offres, activités, articles) */
.offre, .carte, .post { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; border-radius: var(--rayon);
                        overflow: hidden; color: var(--color-white); text-align: center; background: var(--color-text); }
.offre::after, .carte::after, .post::after { content: ""; position: absolute; inset: 0; background: var(--color-voile-carte); }
.offre__media, .carte__media, .post__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offre__texte, .carte__texte { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.post { gap: 12px; }
.post > :not(.post__media) { position: relative; z-index: 1; margin: 0; }
.offre__titre, .carte__titre, .post__titre { font: 400 var(--t-carte)/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; }
.offre__texte p, .carte__texte p { margin: 0; }
.offre__lien, .carte__lien, .post__lien { margin-top: 14px !important; }

.offres { display: flex; flex-direction: column; gap: 48px; }
.offres__liste { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 340px; gap: 20px; }
.offre:first-child { grid-row: span 2; }
@media (max-width: 1024px) { .offres__liste { grid-auto-rows: 250px; } }
@media (max-width: 767px) {
  .offres { gap: 24px; }
  .offres__liste { grid-template-columns: 1fr; grid-auto-rows: minmax(226px, auto); }
  .offre:first-child { grid-row: auto; min-height: 350px; }
  .offre { min-height: 350px; }
}

/* carrousel de cartes (activités) : défilement infini, 420 × 700 */
.cartes { position: relative; }
.cartes__piste { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 80px; scrollbar-width: none; padding-inline: 80px; }
.cartes__piste::-webkit-scrollbar { display: none; }
.carte { flex: 0 0 calc((100% - 20px) / 3); height: 700px; scroll-snap-align: start; }
.cartes .fleche--prec { left: 130px; } .cartes .fleche--suiv { right: 130px; }
@media (max-width: 1023px) { .cartes__piste { padding-inline: 60px; scroll-padding-inline: 60px; } .carte { flex-basis: calc((100% - 10px) / 2); height: 500px; } .cartes .fleche--prec { left: 80px; } .cartes .fleche--suiv { right: 80px; } }
@media (max-width: 767px) { .cartes__piste { padding-inline: 40px; scroll-padding-inline: 40px; } .carte { flex-basis: 100%; height: 400px; } .cartes .fleche--prec { left: 50px; } .cartes .fleche--suiv { right: 50px; } }

/* cartes d'articles (listes dynamiques MCD Builder) */
.posts { display: flex; flex-direction: column; gap: 20px; }
.posts__liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 28px; }
.posts__liste--blog { grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.posts__lien { text-align: center; }
.post { min-height: 500px; }
.post__meta { font-size: 12px; opacity: .85; }
.post__extrait { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1024px) { .post { min-height: 450px; } .posts__liste--blog { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .posts__liste, .posts__liste--blog { grid-template-columns: 1fr; } .post { min-height: 400px; } }

/* page Blog */
.blog__entete { max-width: 780px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: 20px; }
.titre--page { text-align: center; }

/* ---------------------------------------------------------------- défilé horizontal des chambres */
.defile { overflow: hidden; }
.defile__piste { display: flex; }
.defile__item { flex: 0 0 100%; height: 100vh; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; }
.defile__media { width: 100%; height: 100%; object-fit: cover; }
.defile__texte { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 0 12px; width: min(487px, 100% - 24px); margin-inline: auto; }
.defile__titre { font: 700 var(--t-hero)/1 var(--font-titre); letter-spacing: normal; }
.defile__texte p { margin: 0; }
.no-js .defile__piste { overflow-x: auto; scroll-snap-type: x mandatory; }
.no-js .defile__item { scroll-snap-align: start; }
.infos { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.infos li { display: flex; align-items: center; gap: 12px; }
.infos .icone, .infos svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 767px) {
  .defile__item { grid-template-columns: 1fr; grid-template-rows: 40% 1fr; }
  .defile__texte { width: 100%; padding: 0 12px; }
}

/* ---------------------------------------------------------------- FAQ */
.faq { display: grid; grid-template-columns: 480px 1fr; gap: 96px; }
.faq__entete { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.faq__liste { display: flex; flex-direction: column; gap: 32px; }
.faq__item summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 5px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat; }
.faq__item[open] summary::after { background-size: 100% 2px, 0 0; }
.faq__item:nth-child(2) summary::after { color: var(--color-primary); }
.faq__question { font: 400 var(--t-question)/1.5 var(--font-texte); letter-spacing: var(--ls-texte); text-transform: none; color: #1f2124; }
.faq__item summary::after { margin-top: calc(var(--t-question) * .75 - 7px); }
.faq__reponse { padding-top: 12px; }
.btn--faq, .faq__bouton .btn { background: var(--color-primary); color: var(--color-white); padding: 16px 24px; }
@media (max-width: 1024px) { .faq { grid-template-columns: 400px 1fr; gap: 32px; } }
@media (max-width: 767px) { .faq { grid-template-columns: 1fr; gap: 24px; } .faq__liste { gap: 32px; } }

/* ---------------------------------------------------------------- réservation */
/* carte de réservation : 1/4 de la largeur utile, comme sur le site (291 px à 1440, 411 px à 1920) */
.resa-bloc { width: auto; max-width: none; margin-inline: 92px; display: grid; grid-template-columns: 1fr 3fr; gap: 92px; align-items: start; }
.resa-carte { position: sticky; top: 120px; padding: 32px; container-type: inline-size; border-radius: var(--rayon); background: var(--color-primary); color: var(--color-white);
              display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.resa-carte__logo { width: 80px; height: 80px; }
.resa-carte__titre { font: 400 var(--t-sous)/1 var(--font-titre); letter-spacing: normal; margin: 0; }
.resa { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.resa__dates, .resa__adultes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 12px 14px; border-radius: var(--rayon); background: var(--color-champ); text-align: left; cursor: pointer; }
.resa-carte .resa__dates, .resa-carte .resa__adultes { gap: 0 14px; padding: 14px; }
.resa-carte .resa__champ span { font-size: 12px; line-height: 18px; }
/* chiffres en 44 px comme sur le site, réduits pour que « --/--/---- » tienne sur une ligne quand la carte est étroite */
.resa-carte .resa__dates input { font-size: clamp(16px, (100cqi - 42px) / 8, 44px); line-height: 1.5; }
.resa-carte select { font-size: 44px; line-height: 1.5; }
.resa-carte .resa__garantie { font-size: clamp(14px, 100cqi / 14, 24px); line-height: 1.5; align-self: start; }
.resa-carte .resa__bouton { padding: 6px 0 0; }
.resa__champ { display: flex; flex-direction: column; gap: 4px; }
.resa__champ span { font: 700 12px/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; }
.resa input, .resa select { width: 100%; min-width: 0; border: 0; padding: 0; background: none; color: inherit; font: 400 20px/1.3 var(--font-texte); letter-spacing: normal; cursor: pointer; }
.resa input::placeholder { color: inherit; }
.resa select option { color: var(--color-text); }
.resa__garantie { font: 700 14px/1.3 var(--font-titre); text-transform: uppercase; letter-spacing: normal; text-align: right; align-self: end; margin: 0; }
.resa__bouton { font: 700 18px/1.5 var(--font-titre); text-transform: uppercase; letter-spacing: normal; padding: 10px; color: inherit; }
.resa-bloc__contenu { display: flex; flex-direction: column; gap: 20px; }
.resa-bloc__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.chambres { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.chambre { display: flex; flex-direction: column; gap: 24px; }
.chambre__media { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.chambre__entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.chambre__nom { font: 400 var(--t-carte)/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; }
.chambre__prix { font: 700 var(--t-lien)/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; text-align: right; margin: 0; }
.chambre__lien { text-align: center; }
.chambre .infos { color: #333; letter-spacing: normal; }
@media (max-width: 1024px) {
  .resa-bloc { margin-inline: var(--marge); grid-template-columns: 1fr; }
  .resa-bloc .resa-carte { display: none; }
}
@media (max-width: 767px) { .chambres { grid-template-columns: 1fr; } .chambre__entete { flex-wrap: wrap; } }

/* popup de réservation */
.popup-resa { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
              display: none; grid-template-columns: 480px 1fr; background: var(--color-primary); color: var(--color-white); }
.popup-resa[open] { display: grid; }
.popup-resa::backdrop { background: rgba(0, 0, 0, .5); }
.popup-resa__media { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5); }
.popup-resa__panneau { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 32px 12px; }
.popup-resa__logo { width: 100px; height: 100px; }
.popup-resa__titre { font: 400 36px/1.2 var(--font-titre); letter-spacing: normal; text-align: center; margin: 0; }
.popup-resa .resa { width: min(374px, 100%); }
.popup-resa .resa input { font-size: 32px; }
.popup-resa__fermer { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border: 2px solid currentColor; }
.popup-resa__fermer::before, .popup-resa__fermer::after, .livret__fermer::before, .livret__fermer::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 2px; background: currentColor; transform: rotate(45deg); }
.popup-resa__fermer::after, .livret__fermer::after { transform: rotate(-45deg); }
@media (max-width: 1024px) { .popup-resa { grid-template-columns: 1fr; } .popup-resa__media { display: none; } }

/* barre de réservation fixe en bas de l'écran (principe de la maquette Harlay, sans comparateur) */
.barre-resa { position: fixed; left: 0; right: 0; bottom: 40px; z-index: 40; width: 100%; max-width: calc(900px + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); pointer-events: none; }
.barre-resa__form { display: flex; align-items: center; min-height: 67px; padding: 6px; border: 2px solid var(--color-primary); border-radius: 999px;
                    background: var(--color-white); color: var(--color-text); box-shadow: 0 10px 30px rgba(0, 0, 0, .12); pointer-events: auto; }
.barre-resa__dates { display: flex; align-items: center; flex: 2 1 0; min-width: 0; cursor: pointer; }
.barre-resa__champ { display: flex; flex-direction: column; justify-content: center; gap: 6px; flex: 1 1 0; min-width: 0; padding: 0 12px; cursor: pointer; }
.barre-resa__dates .barre-resa__champ:first-child { padding-left: 22px; }
.barre-resa__label { font: 700 12px/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; white-space: nowrap; color: var(--color-primary); }
.barre-resa__input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--color-text); font: 400 16px/1.1 var(--font-texte); letter-spacing: normal; cursor: pointer; }
.barre-resa__input::placeholder { color: var(--color-icone); }
.barre-resa__input:focus { outline: none; }
.barre-resa__fleche { flex: none; font-size: 20px; line-height: 1; color: var(--color-primary); }
.barre-resa__cal { flex: none; width: 18px; height: 18px; margin-right: 12px; color: var(--color-primary); }
.barre-resa__cal svg, .barre-resa__envoyer-icone svg { width: 100%; height: 100%; }
.barre-resa__champ--adultes { flex: .7 1 0; border-left: 1px solid rgba(135, 162, 133, .4); }
.barre-resa__envoyer { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 51px; padding: 0 32px; border-radius: 999px;
                       border: 2px solid var(--color-primary); background: var(--color-primary); color: var(--color-white); font: 700 16px/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal;
                       cursor: pointer; transition: background-color .3s, color .3s; }
.barre-resa__envoyer:hover, .barre-resa__envoyer:focus-visible { background: var(--color-white); color: var(--color-primary); }
.barre-resa__envoyer:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.barre-resa__envoyer-icone { display: none; width: 22px; height: 22px; }
/* fiches chambres et page Les chambres : sur ordinateur, la carte collante fait déjà le travail */
@media (min-width: 1025px) { body:has(.resa-carte) .barre-resa { display: none; } }
/* le bas de page reste lisible au-dessus de la barre */
.pied { padding-bottom: 120px; }
body:has(.resa-carte) .pied { padding-bottom: 0; }
@media (max-width: 1024px) { body:has(.resa-carte) .pied { padding-bottom: 120px; } }
@media (max-width: 767px) {
  .barre-resa { bottom: 16px; }
  .barre-resa__form { gap: 8px; min-height: 60px; padding: 4px 4px 4px 18px; }
  .barre-resa__dates .barre-resa__champ:first-child { padding-left: 0; }
  .barre-resa__champ { padding: 0 6px; gap: 4px; }
  .barre-resa__cal, .barre-resa__champ--adultes { display: none; }
  .barre-resa__input { font-size: 14px; }
  .barre-resa__fleche { font-size: 16px; }
  .barre-resa__envoyer { width: 50px; height: 50px; padding: 0; border-radius: 50%; }
  .barre-resa__envoyer-icone { display: block; }
  .barre-resa__envoyer-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pied { padding-bottom: 92px; }
  body:has(.resa-carte) .pied { padding-bottom: 92px; }
}

/* ---------------------------------------------------------------- partenaires */
.partenaires__liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 52px; }
.partenaire__lien { position: relative; display: block; aspect-ratio: 1; }
.partenaire__logo { width: 100%; height: 100%; object-fit: contain; }
.partenaire__nom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center;
                   background: var(--color-primary); color: var(--color-white); font: 700 18px/1.2 var(--font-titre); text-transform: uppercase; letter-spacing: normal;
                   opacity: 0; transition: opacity .4s; }
.partenaire__lien:hover .partenaire__nom, .partenaire__lien:focus-visible .partenaire__nom { opacity: 1; }
@media (max-width: 767px) { .partenaires__liste { grid-template-columns: 1fr; gap: 40px; } }

/* ---------------------------------------------------------------- article */
.article-hero { position: relative; height: 60vh; min-height: 400px; display: flex; align-items: flex-end; padding-bottom: 120px; color: var(--color-white); }
.article-hero::after { content: ""; position: absolute; inset: 0; background: var(--color-voile); }
.article-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.article-hero__contenu { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.article-hero__kicker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.article-hero__titre { font: 400 var(--t-hero)/1 var(--font-titre); letter-spacing: normal; }
.article-meta { font-size: 14px; margin: 0; opacity: .9; }
.article-layout { display: grid; grid-template-columns: 1fr; gap: 48px; margin-top: 120px; }
.article-layout:has(.sommaire:not(:empty)) { grid-template-columns: 1fr 280px; }
.article-aside:has(.sommaire:empty) { display: none; }
.sommaire { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.sommaire a:hover { color: var(--color-primary); }
.article-body h2, .article-body h3, .article-body h4 { font: 400 28px/1.2 var(--font-titre); text-transform: uppercase; letter-spacing: normal; margin: 1.4em 0 .6em; }
.article-body ul { list-style: disc; padding-left: 1.4em; margin: 0 0 .9em; }
.article-body .texte__image { margin: 1.5em 0; }
@media (max-width: 1024px) { .article-hero { padding-bottom: 80px; } .article-layout { margin-top: 80px; } .article-layout:has(.sommaire:not(:empty)) { grid-template-columns: 1fr; } .article-aside { display: none; } }
@media (max-width: 767px) { .article-hero { padding-bottom: 48px; } .article-layout { margin-top: 48px; } }

/* ---------------------------------------------------------------- popup « Livret de voyage » (accueil) */
.livret { width: min(544px, 100% - 24px); padding: 48px 40px; border: 0; background: var(--color-primary); color: var(--color-white); text-align: center; }
.livret::backdrop { background: rgba(0, 0, 0, .5); }
.livret[open] { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.livret__logo { width: 100px; height: 100px; }
.livret__titre { font: 700 24px/1.2 var(--font-titre); text-transform: uppercase; letter-spacing: normal; margin: 0; }
.livret__fermer { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border: 2px solid currentColor; }
.btn--blanc { background: var(--color-white); color: var(--color-primary); padding: 12px 20px; }

/* ---------------------------------------------------------------- pied de page */
.avis { display: flex; flex-direction: column; gap: 60px; }
.avis__widget { min-height: 44px; text-align: center; color: var(--color-icone); }   /* dans WordPress : widget Trustindex (shortcode) */
.pied__coordonnees { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 20px; padding-block: 60px; margin-top: var(--espace);
                     border-top: 1px solid var(--color-primary); width: 100%; max-width: none; padding-inline: max(var(--marge), (100% - var(--wrap)) / 2); }
.pied__coordonnees .reseaux a { width: 32px; height: 32px; color: var(--color-text); }
.pied__logo { width: 100px; height: 100px; justify-self: center; }
.pied__adresse { text-align: right; margin: 0; }
.pied__adresse a { color: var(--color-primary); }
.pied__contact { display: grid; grid-template-columns: 715px 1fr; border-top: 1px solid var(--color-primary); min-height: 600px; }
.pied__carte iframe { display: block; width: 100%; height: 100%; min-height: 600px; border: 0; }
.contact { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 10px 35px; }
.form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.form__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: flex; flex-direction: column; }
.field > span:not(.wpcf7-form-control-wrap) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.input { width: 100%; height: 40px; padding: 6px 4px; border: 0; border-bottom: 1px solid var(--color-icone); background: var(--color-white); color: var(--color-text);
         font: 400 14px/1.4 var(--font-texte); letter-spacing: var(--ls-texte); }
textarea.input { height: auto; min-height: 80px; resize: vertical; border: 1px solid var(--color-icone); border-width: 0 0 1px; }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; }
.consent a { text-decoration: underline; }
.btn--envoyer { align-self: center; padding: 11px 0; background: none; color: var(--color-text); border: 0; cursor: pointer; }
.pied__menus { background: var(--color-primary); color: var(--color-white); padding-block: 60px; }
.pied__menus-interieur { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.pied__partenaire-logo { width: 97px; }
.pied__titre { font: 700 18px/1 var(--font-titre); text-transform: uppercase; letter-spacing: normal; margin: 0 0 12px; }
.pied__colonne ul { display: flex; flex-direction: column; gap: 12px; line-height: 20px; }
.pied__colonne a:hover, .pied__colonne a[aria-current] { color: var(--color-text); }
.pied__bas { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 12px; line-height: 1; }
.pied__bas p { margin: 0; }
.pied__credits { display: flex; flex-direction: row-reverse; gap: 16px; }
@media (max-width: 1024px) {
  .pied__contact { grid-template-columns: 1fr 1fr; }
  .pied__menus-interieur { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .avis { gap: 24px; }
  .pied__coordonnees { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pied__coordonnees .reseaux { order: 2; }
  .pied__logo { order: 1; }
  .pied__adresse { order: 3; text-align: center; }
  .pied__contact { grid-template-columns: 1fr; }
  .pied__carte iframe { min-height: 300px; }
  .pied__menus-interieur { grid-template-columns: 1fr 1fr; }
  .pied__partenaire { grid-column: 1 / -1; order: 9; justify-self: center; }
  .pied__bas { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------- Contact Form 7 (états) */
.wpcf7-form-control-wrap { display: block; }
.wpcf7-not-valid { border-color: #b3261e; }
.wpcf7-not-valid-tip { color: #b3261e; font-size: .85em; margin-top: .25em; display: block; }
.wpcf7-response-output { margin: 1em 0 0; padding: .75em 1em; border-radius: var(--rayon); }
.wpcf7-form.sent .wpcf7-response-output { background: #e8f5e9; color: #1b5e20; }
.wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.failed .wpcf7-response-output { background: #fdecea; color: #8a1c13; }
.wpcf7-spinner { margin-left: .5em; }
.wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.consent .wpcf7-list-item label { display: flex; gap: 8px; align-items: flex-start; }

/* comparateur de prix masqué / tarif fermé (MCD Builder) */
[data-mc-prix-etat="ferme"] { opacity: .5; }

/* ---------------------------------------------------------------- apparition au défilement (JS seulement) */
.js [data-revele] { opacity: 0; transform: translateY(40px); transition: opacity .8s, transform .8s; }
.js [data-revele].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-revele] { opacity: 1; transform: none; transition: none; } }