/* ==========================================================================
   Présentation du site d'origine (gabarit du webdesigner, reprise d'octobre 2026)
   Reprend les règles du thème LSCMS « vitrine » : typographies, bandeau vert
   en tête de page, colonne gauche de l'accueil, boutons fléchés, pied de page.
   Chargée après site.css : elle n'en garde que la mécanique (menu mobile,
   carrousels, formulaire…) et remplace l'habillage.
   ========================================================================== */
@font-face { font-family: "Dayroman"; src: url(/fonts/dayroman.woff2) format("woff2"); font-weight: 500; font-display: swap; }
:root {
  --color03: #cbcfbc; --color02: #697054; --gris-fonce: #444; --gris-clair: #e5e5e5;
  --largeur: 1440px; --gouttiere: 20px; --entete: 76px;
}
body { font-size: 16px; line-height: 1.5; color: #000; }
p { margin: 0; padding: 5px 0; }
h1, h2, h3, h4 { line-height: 1; }
h1 { font-size: 2.625rem; font-weight: 600; margin: 15px 0 20px; }
h2 { font-size: 2.25rem; font-weight: 500; color: var(--olive); margin: 20px 0 15px; }
h3 { font-size: 1.875rem; font-weight: 500; color: var(--gris-fonce); margin: 20px 0 15px; }
h4 { font-size: 1.625rem; font-weight: 400; color: var(--olive); margin: 10px 0 5px; }
.section { padding: 50px 0; }
.section.serre { padding: 30px 0; }
li::marker { color: var(--ocre); }

/* Accroches : vert pâle et ocre, en italique */
.accroche { font-size: 1.2rem; margin: 0; padding: 5px 0 10px; }
.accroche.vert, .fond-olive .accroche.vert { color: var(--color03); }

/* Boutons : flèche dessinée du thème, texte foncé (clair sur fond vert) */
.boutons { gap: 3px; margin-top: 20px; }
.bouton { gap: 10px; font-weight: 400; color: var(--olive); transition: padding .3s, color .3s; }
.bouton::before { width: 40px; height: 21px; background: url(/img/fleche.svg) left center / contain no-repeat; -webkit-mask: none; mask: none; }
.bouton:hover { color: var(--color03); padding-left: 3px; }
.bouton:hover::before { transform: none; }
.fond-olive .bouton, .intro .bouton { color: #fff; }
.fond-olive .bouton::before, .intro .bouton::before { background-image: url(/img/fleche-clair.svg); }
.bouton.plein::before { content: none; }
.bouton.plein:hover { padding-left: 22px; }

/* En-tête : bandeau blanc, logo texte, menu en capitales */
.entete { height: auto; min-height: var(--entete); padding: 10px 30px; background: #fff; box-shadow: none; }
.entete.compact { height: auto; box-shadow: 1px 4px 5px #878787b8; }
.logo-maison { display: none; }
.logo-texte { width: 260px; max-width: 30vw; }
.menu ul { gap: 0; }
.menu a { position: relative; display: block; padding: 10px; font-size: 18px; letter-spacing: 0; color: #000; border: 0; }
.menu a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 1px; background: var(--color03); transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.menu a:hover, .menu a[aria-current] { color: #000; }
.menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu a.menu-resa { margin-left: 10px; padding: 10px 18px; font-size: 16px; }
.menu a.menu-resa::after { content: none; }

/* Accueil : colonne gauche avec le grand logo et le menu vertical, photo à droite */
@media (min-width: 901px) {
  .accueil .entete:not(.compact) {
    position: absolute; top: 0; left: 0; z-index: 50; width: 20%; min-width: 230px;
    flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px 20px 0;
  }
  .accueil .entete:not(.compact) .logo { flex-direction: column; gap: 0; margin-bottom: 50px; padding: 10px 20px 0; }
  .accueil .entete:not(.compact) .logo-maison { display: block; width: 100%; max-width: 220px; }
  .accueil .entete:not(.compact) .logo-texte { width: 100%; max-width: 220px; margin-top: 4px; }
  .accueil .entete:not(.compact) .menu ul { flex-direction: column; align-items: flex-start; }
  .accueil .entete.compact { position: fixed; left: 0; right: 0; }
  .accueil .hero { margin-left: 20%; height: min(100vh, 1000px); }
}

/* Fil d'Ariane : masqué comme sur le site d'origine (il reste dans les données structurées) */
.ariane { display: none; }

/* Bandeau d'introduction : vert foncé sur les trois quarts, photos décalées vers le bas */
.section.intro { background: linear-gradient(0deg, #fff 23%, var(--olive) 23%); color: #fff; padding: 50px 0; }
.section.intro h1, .section.intro h2 { color: #fff; }
.section.intro .presentation { align-items: start; gap: 50px; }
.section.intro .photos { padding: 200px 0 0; }
.section.intro .accroche.ocre { color: var(--color03); }
.presentation { gap: 50px; }
.presentation .photos { display: flex; flex-direction: column; gap: 10px; padding-bottom: 0; }
.presentation .photos img:first-child, .presentation .photos img:nth-child(2) { position: static; width: 100%; border: 0; }
.presentation .photos figure { margin: 0; }
.presentation figcaption { font-style: italic; font-size: .85rem; color: var(--gris-fonce); padding: .5em 0; }
.section.intro figcaption, .section.intro figcaption a { color: #fff; }

/* Texte avec grands mots : filet vert à gauche, mots en Dayroman gris clair */
.experience { grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.experience .texte { border-left: 1px solid var(--color02); padding-left: 40px; }
.mots { align-self: end; font-family: "Dayroman", Georgia, serif; font-style: normal; font-size: 5.5rem; line-height: 1; color: var(--gris-clair); padding-top: 200px; }
@media (max-width: 800px) { .mots { font-size: 3.2rem; padding-top: 20px; } }

/* Bandes « évènements » (fond sable) : bande vert pâle sur le premier cinquième */
.fond-sable { background: linear-gradient(90deg, var(--color03) 20%, #fff 20%); }

/* Questions fréquentes : fond vert pâle, deux colonnes, réponses visibles */
.section.bande-faq { background: var(--color03); padding: 80px 0; }
.faq { max-width: var(--largeur); }
.faq .questions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 60px; margin-top: 20px; }
.faq .question h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 6px; color: var(--olive); }
.faq .question { padding-bottom: 10px; color: var(--olive); }
@media (max-width: 800px) { .faq .questions { grid-template-columns: 1fr; } .section.bande-faq { padding: 50px 0; } }

/* Cartes (trois blocs) */
.cartes { gap: 60px; }
.cartes h3 { font-size: 1.625rem; font-weight: 400; color: var(--olive); margin: 12px 0 0; }
.cartes article { display: flex; flex-direction: column; }
.cartes article img { margin-bottom: 0; }
.cartes .accroche { font-size: 1.2rem; padding-top: 0; }
.cartes .boutons { margin-top: auto; padding-top: 10px; }

/* Galerie : grille de vignettes de 250 px */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(29%, 1fr)); gap: 20px; padding: 10px 0; }
.galerie > a, .galerie figure > a { display: block; height: 250px; overflow: hidden; background: #f5f5f5; }
.galerie figure { margin: 0; }
.galerie img { width: 100%; height: 250px; object-fit: cover; }
.galerie figcaption { font-style: italic; font-size: .8rem; color: var(--gris-fonce); padding: 4px 0; }
@media (max-width: 700px) { .galerie { grid-template-columns: 1fr 1fr; } .galerie > a, .galerie figure > a, .galerie img { height: 160px; } }


/* Pied de page : colonne blanche avec le logo, puis bande ocre */
.pied { grid-template-columns: minmax(335px, 20%) 1fr; gap: 0; padding: 0; align-items: stretch; }
.pied-logo { background: #fff; justify-content: center; padding: 30px 40px; gap: 6px; }
.pied-logo img:first-child { width: 150px; }
.pied-logo img:last-child { width: 260px; max-width: 100%; }
.pied-infos { padding: 40px; }
.pied-infos p { border: 0; padding: 0; line-height: 2; }
.pied-infos ul { gap: 0; font-size: 1rem; }
.pied-infos ul li + li::before { content: "/"; padding: 0 10px; }
@media (max-width: 700px) { .pied { grid-template-columns: 1fr; } .pied-logo { align-items: center; } }

/* Encadré infos pratiques des fiches du guide */
.lieu { background: #f4f1ea; border-left: 3px solid var(--ocre); padding: 18px 22px; }

/* Le titre du bandeau d'introduction occupe la moitié de son bloc (règle .texte du thème) */
.section.intro h1 { width: calc(50% - 25px); }
@media (max-width: 800px) { .section.intro h1 { width: auto; } }
@media (min-width: 901px) { .accueil .hero { height: 900px; } }

/* --- Accueil : carrousel en bande verte, trois grandes photos, points de navigation --- */
.accueil .section.serre:has(.carrousel) { padding: 30px 0; background: linear-gradient(180deg, #fff 30%, var(--olive) 30%, var(--olive) 70%, #fff 70%); }
.accueil .carrousel { max-width: none; padding: 30px 80px 100px; }
.accueil .carrousel .piste { gap: 40px; }
.accueil .carrousel .piste > * { flex: 0 0 calc((100% - 80px) / 3); }
.accueil .carrousel .piste img { width: 100%; height: 700px; object-fit: cover; }

/* Partenaires */
.partenaires { gap: 80px; margin: 30px 0; }
.partenaires img { height: 80px; filter: none; }
.section:has(.partenaires) h2 { font-size: 1.5rem; color: #000; margin: 0; }

/* Vidéo d'ambiance : bande de 446 px */
.video video { aspect-ratio: auto; height: 446px; max-height: none; }

/* Itinéraire : texte filet vert à gauche, trois photos en colonne sur un aplat vert pâle */
.itineraire-bloc { overflow: visible; padding: 0; }
.itineraire { grid-template-columns: 1fr 1fr; gap: 40px; }
.itineraire .texte { border-left: 1px solid var(--color02); padding-left: 40px; }
.itineraire .photos { display: flex; flex-direction: column; align-items: center; gap: 30px; position: static; }
.itineraire .photos::before { inset: auto 0 auto auto; top: 50%; transform: translateY(-50%); width: 31%; height: 59%; background: var(--color03); z-index: -1; }
.itineraire .photos img { width: 460px; max-width: 100%; aspect-ratio: auto; height: 318px; }
.itineraire-bloc { position: relative; }
.itineraire .photos { position: relative; }
.itineraire .photos::before { position: absolute; right: calc(-1 * (100vw - min(100vw, var(--largeur))) / 2 - var(--gouttiere)); }

/* Atouts de l'accueil : aplat vert foncé à gauche, icônes sur deux colonnes */
.accueil .section:has(.atouts) { background: linear-gradient(90deg, var(--olive) 20%, #fff 20%); padding: 80px 80px 200px 20px; }
.accueil .section:has(.atouts) > .wrap { width: 70%; max-width: none; margin: 0 0 0 auto; padding: 0; text-align: left; }
.accueil .section:has(.atouts) h2 { text-align: left; text-transform: uppercase; font-size: 1.875rem; color: var(--gris-fonce); }
.accueil .section:has(.atouts) .accroche { text-align: left; text-transform: uppercase; }
.accueil .atouts { grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }
.accueil .atouts > div { text-align: left; padding: 0 20px 20px 0; }
.accueil .atouts img { height: 57px; margin: 0 0 14px; }
.accueil .atouts strong { font-weight: 600; color: #000; letter-spacing: 0; }

/* Trois photos du bas de l'accueil : 445 px, séparées de 20 px */
.trois-photos { gap: 20px; }
.trois-photos img { height: 445px; }

/* Pied de page : logo texte seul, en haut de la colonne blanche */
.pied-logo { justify-content: flex-start; padding: 0 40px; }
.pied-logo img:first-child { display: none; }
.pied-logo img:last-child { width: 260px; }

/* --- Formulaire de contact : champs soulignés, bouton fléché --- */
.bande-contact { background: #fff; padding: 0 0 50px; }
.bande-contact .acces { gap: 40px; align-items: start; }
.bande-contact:not(.sans-carte) .acces { max-width: none; padding: 0 70px 0 0; grid-template-columns: 580px 1fr; }
.bande-contact .carte h2 { font-size: 1.875rem; color: var(--gris-fonce); margin: 20px 0 10px; }
.bande-contact .carte iframe { height: 450px; }
.bande-contact .carte small { display: block; margin: 0; padding: 10px; background: #d9d9d0; text-align: center; font-size: .8rem; }
.bande-contact .carte small a { color: #000; text-decoration: none; }
.bande-contact.sans-carte .acces { grid-template-columns: 300px minmax(0, 700px); gap: 150px; padding-left: 140px; max-width: none; }
.bande-contact .aplat { background: var(--color03); align-self: stretch; min-height: 600px; margin-top: -60px; }
.formulaire { gap: 18px; padding-top: 30px; }
.formulaire h3 { font-size: 1.875rem; color: var(--gris-fonce); font-weight: 500; line-height: 1.1; margin: 0; }
.formulaire label { color: #000; font-size: 1rem; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel], .formulaire textarea {
  border: 0; border-bottom: 1px solid var(--olive); border-radius: 0; background: transparent; padding: 10px 6px; height: 42px; margin-top: 2px;
}
.formulaire textarea { height: 150px; }
.formulaire .deux { gap: 10px 40px; }
.formulaire .note { font-size: .7rem; color: #000; }
.formulaire button.bouton.plein { justify-self: end; background: none; color: var(--olive); padding: 0; }
.formulaire button.bouton.plein::before { content: ""; }
.formulaire button.bouton.plein:hover { padding-left: 3px; color: var(--color03); background: none; }
@media (max-width: 900px) {
  .bande-contact:not(.sans-carte) .acces, .bande-contact.sans-carte .acces { grid-template-columns: 1fr; padding: 0 var(--gouttiere); gap: 30px; }
  .bande-contact .aplat { display: none; }
}
.partenaires img { height: auto; width: auto; max-height: 80px; max-width: 130px; }

/* --- Module de réservation : cadre fin vert foncé, sans titre --- */
#reservation .reservation { border: 1px solid var(--olive); padding: 36px 20px; max-width: 1400px; min-height: 0; }

/* --- Atouts des pages intérieures : encadré vert pâle, icônes sur deux colonnes --- */
body:not(.accueil) .section:has(.atouts) { background: none; padding: 50px 0; }
body:not(.accueil) .section:has(.atouts) > .wrap { background: var(--color03); padding: 80px; max-width: 1400px; }
body:not(.accueil) .section:has(.atouts) h2 { text-align: left; font-size: 1.875rem; color: var(--gris-fonce); }
body:not(.accueil) .section:has(.atouts) .accroche { text-align: left; }
body:not(.accueil) .atouts { grid-template-columns: 1fr 1fr; gap: 30px 60px; margin-top: 30px; }
body:not(.accueil) .atouts > div { text-align: left; color: var(--olive); }
body:not(.accueil) .atouts img { height: 57px; margin: 0 0 10px; }
body:not(.accueil) .atouts strong { font-weight: 600; color: var(--olive); letter-spacing: 0; text-transform: uppercase; }
body:not(.accueil) .atouts p { font-size: 1rem; color: var(--olive); }

/* --- Questions fréquentes : trois présentations, selon le fond choisi ---
   blanc : questions en titres, l'une sous l'autre (page du gîte)
   bande vert pâle à gauche (fond-sable) : bloc « évènements » du thème
   encadré vert pâle (fond-vert) : bloc « icônes détails », deux colonnes */
.section.bande-faq { background: none; padding: 50px 0; }
.section.bande-faq .questions { display: block; }
.section.bande-faq .question h3 { font-size: 1.875rem; color: var(--gris-fonce); line-height: 1; margin: 20px 0 15px; }
.section.bande-faq .question { color: #000; padding: 0; }
.section.bande-faq.fond-sable { background: linear-gradient(90deg, var(--color03) 20%, #fff 20%); padding: 80px 0; margin-top: 50px; }
.section.bande-faq.fond-sable > .wrap { max-width: 50%; padding: 0; }
.section.bande-faq.fond-vert { background: none; padding: 50px 0; }
.section.bande-faq.fond-vert > .wrap { background: var(--color03); padding: 80px; max-width: 1400px; }
.section.bande-faq.fond-vert .questions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 60px; }
.section.bande-faq.fond-vert .question { color: var(--olive); padding-bottom: 10px; }
.section.bande-faq.fond-vert .question h3 { font-size: 1.25rem; line-height: 1.3; margin: 0 0 6px; color: var(--olive); }
.fond-vert { background: var(--color03); }
@media (max-width: 800px) {
  .section.bande-faq.fond-sable > .wrap { max-width: none; padding: 0 var(--gouttiere); }
  .section.bande-faq.fond-vert > .wrap { padding: 40px 24px; }
  .section.bande-faq.fond-vert .questions { grid-template-columns: 1fr; }
}

/* --- Carrousels des gîtes : trois photos de 300 px de haut, centrées --- */
body:not(.accueil) .carrousel .piste { gap: 40px; }
body:not(.accueil) .carrousel .piste > * { flex: 0 0 calc((100% - 80px) / 3); display: flex; justify-content: center; }
body:not(.accueil) .carrousel .piste img { height: 300px; width: auto; max-width: 100%; object-fit: cover; }
body:not(.accueil) .section:has(.carrousel) .accroche.ocre { font-size: 1.2rem; }

/* --- Blocs « deux colonnes » (présentations hors introduction) : photo à 60 %, centrée, texte aligné au milieu --- */
.section:not(.intro) .presentation { align-items: center; gap: 60px; }
.section:not(.intro) .presentation .photos.seule { align-items: center; }
.section:not(.intro) .presentation .photos.seule img, .section:not(.intro) .presentation .photos.seule figure { width: 60%; }
.section:not(.intro) .presentation .photos.seule figure img { width: 100%; }
.section:not(.intro) .presentation figcaption { text-align: center; }
.section:not(.intro):has(.presentation) { padding: 25px 0; }

/* --- Fiches du guide d'accueil : titre ocre, encadré d'infos pratiques --- */
.fiche-guide main > .section:first-of-type h1 { color: var(--ocre); }
.fiche-guide .presentation .texte ul { list-style: none; margin: 22px 0 0; padding: 18px 22px; background: #f4f1ea; border-left: 3px solid var(--ocre); }
.fiche-guide .presentation .texte ul li { margin: 5px 0; padding: 0; }
.fiche-guide .presentation .texte ul li::marker { content: none; }
.fiche-guide .presentation .texte h2 { margin-top: 0; }
.fiche-guide .presentation .photos.seule img, .fiche-guide .presentation .photos.seule figure { width: 100%; }
.section .boutons.centre, .section:has(> .wrap > .boutons:only-child) .boutons { align-items: center; }
body.fiche-guide .section:not(.intro) .presentation .photos.seule img, body.fiche-guide .section:not(.intro) .presentation .photos.seule figure { width: 100%; }
.section .wrap > .boutons:only-child, .texte-long > .boutons:last-child:not(:first-child) { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 10px 40px; }

/* --- Textes : pleine largeur du conteneur (1400 px), comme les pages du thème --- */
.texte-long { max-width: var(--largeur); }
.texte-long h2 { font-size: 2.25rem; margin: 20px 0 15px; }
.texte-long h3 { font-size: 1.875rem; margin: 20px 0 15px; }
.texte-long h4 { font-size: 1.625rem; margin: 10px 0 5px; }
/* Bande « évènements » : texte sur la moitié de la largeur, centré */
.section.fond-sable { padding: 80px 0; margin-top: 50px; }
.section.fond-sable > .wrap.texte-long { max-width: 50%; padding: 0; }
@media (max-width: 800px) { .section.fond-sable > .wrap.texte-long { max-width: none; padding: 0 var(--gouttiere); } }
.espaces { gap: 0 60px; }
.espaces h3 { font-size: 1rem; font-weight: 600; color: #000; margin: 20px 0 0; }
.espaces.grands-titres h3 { font-size: 2.25rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--olive); margin: 20px 0 15px; }
.formulaire ::placeholder { color: #999; font-size: .85rem; }

/* --- Téléphone : pas de décalage des photos, textes avant les photos dans l'introduction --- */
@media (max-width: 800px) {
  .section.intro { background: linear-gradient(0deg, #fff 12%, var(--olive) 12%); }
  .section.intro .photos { padding-top: 0; order: 2; }
  .section.intro .presentation { gap: 24px; }
  .section:not(.intro) .presentation .photos.seule img, .section:not(.intro) .presentation .photos.seule figure { width: 100%; }
  .experience .texte, .itineraire .texte { padding-left: 20px; }
  h1 { font-size: 2rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.4rem; }
  .accueil .section:has(.atouts) { padding: 50px 20px; background: #fff; }
  .accueil .section:has(.atouts) > .wrap { width: auto; }
  body:not(.accueil) .section:has(.atouts) > .wrap { padding: 40px 24px; }
  .atouts, .accueil .atouts, body:not(.accueil) .atouts { grid-template-columns: 1fr; }
  .accueil .carrousel { padding: 20px 20px 60px; }
  .accueil .carrousel .piste > *, body:not(.accueil) .carrousel .piste > * { flex-basis: 80%; }
  .accueil .carrousel .piste img { height: 420px; }
  .video video { height: 260px; }
  .itineraire .photos img { height: 220px; }
  .trois-photos img { height: 260px; }
  .partenaires { gap: 30px; }
  .pied-infos { padding: 30px 20px; }
}

/* --- Carrousels : points de navigation (gris, le point actif brun) --- */
.carrousel .points { display: flex; justify-content: center; margin-top: 20px; }
.carrousel .points[hidden] { display: none; }
.carrousel .points button { width: 24px; height: 20px; padding: 5px 7px; border: 0; background: none; cursor: pointer; }
.carrousel .points button::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 30px; background: #d6d6d6; transition: background .2s; }
.carrousel .points button:hover::before, .carrousel .points button[aria-current="true"]::before { background: #8e8370; }
.accueil .carrousel .points { margin-top: 30px; }