/* ===== Paradis Lé La, site de plusieurs pages (20 octobre) =====
   Même direction que l'accueil : sable, encre du logo, turquoise de la piscine, un fruit et une couleur par logement,
   ovales et arches du médaillon, fonds en matière du lieu. Ce fichier ajoute le menu, les hauts de page intérieurs,
   les pages de logement, le séjour, les alentours, les infos pratiques et les avis. */

/* ---------- en-tête et menu ---------- */
.entete-nav a[aria-current="page"]::after { transform: scaleX(1); }
/* 23 octobre : le bouton dit « Menu » et se repère, pilule encre pleine (le turquoise reste à « Appeler ») */
.menu-bouton {
  margin-left: auto; flex: none; min-height: 46px; border-radius: 999px; padding: 0 16px 0 14px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--encre); border: 0; color: var(--sable); font: 600 16px/1 var(--texte); white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(28, 38, 32, .7);
}
.menu-bouton .barres { display: grid; gap: 4px; width: 18px; }
.menu-bouton .barres span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--sortie), opacity .2s; }
.menu-ouvert .menu-bouton .barres span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .menu-bouton .barres span:nth-child(2) { opacity: 0; }
.menu-ouvert .menu-bouton .barres span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 400px) { .menu-bouton { padding: 0 13px 0 11px; gap: 7px; } }
.entete-tel { margin-left: 8px; }
.menu-fruits, .menu-reserver { display: none; }

@media (max-width: 1099px) {
  .entete-nav {
    display: none; position: fixed; left: 0; right: 0; top: 68px; z-index: 50;
    max-height: calc(100svh - 68px); overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; gap: 0; margin: 0; padding: 10px var(--marge) 26px;
    background: url("deco/grain.svg") 0 0 / 220px, var(--sable); border-bottom: 1px solid rgba(28, 38, 32, .12);
    box-shadow: 0 24px 40px -30px rgba(0, 0, 0, .5);
  }
  .menu-ouvert .entete-nav { display: flex; }
  .entete-nav > a:not(.bouton) { font: 600 25px/1.2 var(--titres); padding: 13px 0; border-bottom: 1px solid rgba(28, 38, 32, .1); }
  .entete-nav > a::after { display: none; }
  .entete-nav > a[aria-current="page"] { color: var(--lagon); }
  .menu-fruits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; list-style: none; padding: 0; margin: 18px 0; }
  .menu-fruits a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px 0 8px; border-radius: 999px; background: rgba(255, 255, 255, .6); border: 1.5px solid var(--c); text-decoration: none; font-weight: 600; font-size: 16px; }
  .menu-fruits svg { width: 28px; height: 28px; color: var(--c); flex: none; }
  .menu-reserver { display: inline-flex; width: 100%; }
}
@media (min-width: 900px) and (max-width: 1099px) { .entete-nav { top: 84px; max-height: calc(100svh - 84px); } }
@media (min-width: 1100px) {
  .menu-bouton { display: none; }
  .entete-nav { display: flex; margin-left: auto; gap: 24px; }
  .entete-tel { margin-left: 18px; }
}
@media (min-width: 900px) and (max-width: 1099px) { .entete-nav { display: none; } .menu-ouvert .entete-nav { display: flex; } }

/* ---------- les cartes des logements (accueil et page des logements) ---------- */
.choix { list-style: none; margin: 0 auto; padding: 0 var(--marge) 64px; max-width: var(--largeur); display: grid; gap: 14px; }
.choix-carte { position: relative; border-radius: 26px; overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 100% 0%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 60%), url("deco/grain.svg") 0 0 / 220px, var(--fond);
  box-shadow: 0 18px 30px -26px rgba(28, 38, 32, .7); }
.choix-carte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); opacity: .12; -webkit-mask: var(--motif) 0 0 / 200px repeat; mask: var(--motif) 0 0 / 200px repeat; pointer-events: none; }
.choix-lien { display: grid; grid-template-columns: 116px 1fr; gap: 16px; align-items: center; padding: 14px 16px 14px 14px; text-decoration: none; color: inherit; }
.choix-photo { width: 116px; aspect-ratio: 3 / 4; border-radius: 999px; overflow: hidden; outline: 1.5px solid var(--encre); outline-offset: 4px; margin: 5px; }
.choix-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sortie); }
.choix-texte { display: grid; gap: 4px; min-width: 0; }
.choix .embleme svg { width: 34px; height: 34px; padding: 4px; }
.choix .embleme { font-size: 11px; }
.choix-nom { font: 600 30px/1.05 var(--titres); }
.choix-detail { font-size: 15px; color: var(--encre-2); }
.choix-prix { font-weight: 700; font-size: 16px; }
.choix-voir { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--encre); color: var(--sable); font-weight: 600; font-size: 15px; }
.choix-voir::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.choix-lien:hover .choix-photo img { transform: scale(1.05); }
.choix-lien:hover .choix-voir { background: #2C3A31; }
.choix-lien:focus-visible { outline: 2px solid var(--lagon); outline-offset: -4px; border-radius: 26px; }
.logements-actions { padding-bottom: 72px; margin-top: 0; }
.logements .choix { padding-bottom: 34px; }
@media (min-width: 700px) {
  .choix { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .choix-carte:nth-child(even) { transform: translateY(34px); }
  .js .choix-carte.r:nth-child(even) { transform: translateY(60px); }
  .js .choix-carte.r.vu:nth-child(even) { transform: translateY(34px); }
  .choix { padding-bottom: 96px; }
}
@media (min-width: 1100px) {
  .choix { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .choix-carte:nth-child(even) { transform: none; }
  .js .choix-carte.r:nth-child(even) { transform: translateY(26px); }
  .js .choix-carte.r.vu:nth-child(even) { transform: none; }
  .choix-carte:nth-child(3n + 2), .js .choix-carte.r.vu:nth-child(3n + 2) { transform: translateY(46px); }
  .choix-lien { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 28px 24px 30px; }
  .choix-photo { width: 76%; aspect-ratio: 4 / 5; border-radius: 999px 999px 24px 24px; margin: 8px; outline-offset: 6px; }
  .choix-texte { justify-items: center; }
  .choix .embleme { justify-content: center; }
  .choix-nom { font-size: 40px; }
  .choix-voir { justify-self: center; }
}

/* ---------- haut des pages intérieures ---------- */
.tete-page { position: relative; isolation: isolate; overflow: hidden; padding: 30px var(--marge) 64px; display: grid; gap: 30px; }
.tete-texte { max-width: var(--largeur); width: 100%; margin: 0 auto; position: relative; z-index: 1; }
.tete-page h1 { font-size: clamp(30px, 7.6vw, 60px); max-width: 15em; margin-bottom: 16px; }
.tete-intro { color: var(--encre-2); max-width: 36em; margin-bottom: 22px; }
.tete-page .surtitre { margin-bottom: 10px; }
.js .tete-texte > * { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--sortie), transform .8s var(--sortie); }
.js .ouvert .tete-texte > * { opacity: 1; transform: none; }
.js .ouvert .tete-texte > :nth-child(2) { transition-delay: .1s; }
.js .ouvert .tete-texte > :nth-child(3) { transition-delay: .2s; }
.js .ouvert .tete-texte > :nth-child(4) { transition-delay: .3s; }
.tete-cadre { position: relative; z-index: 1; width: min(100%, 560px); justify-self: center; height: clamp(220px, 42svh, 420px); margin: 7px;
  border-radius: 999px 999px 28px 28px; overflow: hidden; outline: 1.5px solid currentColor; outline-offset: 6px; }
.tete-cadre img { width: 100%; height: 100%; object-fit: cover; }
.js .tete-cadre img { clip-path: ellipse(18% 15% at 50% 55%); transform: scale(1.07); transition: clip-path 1.7s cubic-bezier(.6, 0, .2, 1), transform 2s var(--sortie); }
.js .ouvert .tete-cadre img { clip-path: ellipse(100% 100% at 50% 50%); transform: scale(1); }

.tete-bois { padding-top: 112px; background: url("deco/bois.svg") 0 0 / 480px 240px, linear-gradient(180deg, #E9DCC4, #EADFCB); }
.tete-eau { color: var(--sable); background: linear-gradient(170deg, rgba(18, 133, 143, .86) 0%, rgba(11, 95, 103, .92) 60%, rgba(10, 76, 83, .97) 100%), url("img/eau-piscine-1200.webp") 50% 30% / cover, #0B5F67; }
.tete-eau .surtitre { color: var(--soleil); }
.tete-eau h1 em { color: #FFE08A; }
.tete-eau .tete-intro { color: rgba(246, 239, 226, .86); }
.tete-eau > .caustiques, .tete-eau > .bulles { position: absolute; z-index: 0; }
.tete-eau .tete-cadre { color: rgba(246, 239, 226, .7); }
.tete-ciel { padding-top: 120px; background: url("deco/courbes.svg") 50% 0 / 1100px auto, radial-gradient(ellipse at 85% 8%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, #D3E9EA 0%, #EAF3EF 100%); }
.tete-ciel > .ciel { position: absolute; z-index: 0; left: 0; right: 0; top: 18px; height: 120px; overflow: hidden; pointer-events: none; }
.tete-enduit { background: url("deco/enduit.svg") 0 0 / 360px, radial-gradient(ellipse at 20% 30%, rgba(240, 180, 14, .16), transparent 55%), #F3EADB; }
.tete-enduit > .medaillon-trace { z-index: 0; left: auto; right: -120px; top: 20px; transform: none; width: 360px; }
.tete-toile { background:
    repeating-linear-gradient(0deg, rgba(28, 38, 32, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(28, 38, 32, .03) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 12% 6%, rgba(240, 180, 14, .22), transparent 45%), linear-gradient(var(--sable-2), var(--sable)); }
.tete-bois > .guirlande { top: 0; }

@media (min-width: 900px) {
  .tete-page { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 60px; padding: 70px max(var(--marge), calc((100vw - var(--largeur)) / 2 + var(--marge))) 100px; }
  .tete-page:not(:has(.tete-cadre, .horloge, .note-page)) { grid-template-columns: 1fr; }
  .tete-bois { padding-top: 140px; }
  .tete-ciel { padding-top: 150px; }
  .tete-texte { margin: 0; }
  .tete-cadre { height: min(560px, 66svh); }
  .tete-enduit > .medaillon-trace { right: 6%; top: 40px; width: 420px; }
}
/* Hauts de page Avis et Infos (23 oct) : la photo à droite, la note ou les horaires sous le texte */
@media (min-width: 900px) {
  .tete-avec-photo > .tete-texte { grid-column: 1; grid-row: 1; }
  .tete-avec-photo > .tete-cadre { grid-column: 2; grid-row: 1 / span 2; }
  .tete-avec-photo > .note-page, .tete-avec-photo > .horloge { grid-column: 1; grid-row: 2; justify-self: start; }
}

/* ---------- pages de logement ---------- */
.fil { position: relative; z-index: 2; padding: 16px var(--marge) 18px; background: url("deco/grain.svg") 0 0 / 220px, var(--fond); display: grid; gap: 12px; }
.fil-retour { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--encre); text-decoration: none; font-weight: 600; font-size: 15px; }
.fil-retour::before { content: ""; width: 8px; height: 8px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: 2px; }
.fil-retour:hover { background: var(--encre); color: var(--sable); }
.fil-fruits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.fil-fruits a { display: grid; justify-items: center; gap: 2px; min-height: 48px; padding: 4px 0; border-radius: 16px; text-decoration: none; font-size: 12px; font-weight: 600; color: var(--encre-2); }
.fil-fruits svg { width: 34px; height: 34px; padding: 4px; border-radius: 50%; color: var(--c); background: var(--sable); border: 1.5px solid transparent; transition: transform .3s var(--sortie), border-color .3s; }
.fil-fruits a:hover svg { transform: translateY(-2px) rotate(-8deg); border-color: var(--c); }
.fil-fruits a[aria-current="page"] { color: var(--encre); }
.fil-fruits a[aria-current="page"] svg { background: var(--c); color: var(--sable); border-color: var(--c); }
.fil-fruits span { white-space: nowrap; }
@media (max-width: 380px) { .fil-fruits span { font-size: 11px; } }
@media (min-width: 900px) {
  .fil { grid-template-columns: auto 1fr; align-items: center; gap: 30px; padding: 22px max(var(--marge), calc((100vw - var(--largeur)) / 2 + var(--marge))); }
  .fil-fruits { justify-self: end; grid-template-columns: repeat(6, 84px); }
  .fil-fruits a { font-size: 13px; }
}

.visite-page { margin-top: 0; border-radius: 0; padding-top: 30px; }
.visite-page h1 { font-size: clamp(46px, 13vw, 84px); line-height: 1; margin: 12px 0 8px; }
.prix-nuit { font-size: 17px; color: var(--encre-2); margin-bottom: 14px; }
.prix-nuit strong { font: 600 30px/1 var(--titres); color: var(--encre); margin-right: 4px; }
.visite-page .visite-texte > p:not(.embleme):not(.prix-nuit) { color: var(--encre-2); max-width: 34em; }
.js .visite-page .v1.r img { transform: scale(1.06); }
@media (min-width: 900px) { .visite-page { padding-top: 60px; } }

.galerie-logement { position: relative; display: grid; gap: 22px; padding: 10px var(--marge) 64px; justify-items: center;
  background: radial-gradient(ellipse at 0% 100%, rgba(255, 255, 255, .5), transparent 55%), url("deco/grain.svg") 0 0 / 220px, var(--fond); }
.galerie-photo { width: min(100%, 620px); overflow: hidden; }
.galerie-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--sortie); }
.js .galerie-photo.r img { transform: scale(1.06); }
.js .galerie-photo.r.vu img { transform: none; }
.g1 { aspect-ratio: 3 / 2; border-radius: 28px 28px 999px 999px; outline: 1.5px solid var(--encre); outline-offset: 6px; margin: 7px; }
.g2 { width: min(72%, 380px); aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--sable); box-shadow: 0 20px 34px -24px rgba(0, 0, 0, .6); }
@media (min-width: 900px) {
  .galerie-logement { grid-template-columns: 1.3fr .7fr; align-items: center; padding: 20px max(var(--marge), calc((100vw - var(--largeur)) / 2 + var(--marge))) 100px; gap: 50px; }
  .galerie-1 { grid-template-columns: 1fr; }
  .g2 { width: 100%; max-width: 340px; margin-top: 120px; }
}

.equip { position: relative; isolation: isolate; overflow: hidden; padding: 72px var(--marge) 72px;
  background: url("deco/enduit.svg") 0 0 / 360px, radial-gradient(ellipse at 90% 0%, rgba(240, 180, 14, .14), transparent 50%), #F3EADB; }
.equip-tete, .equip-grille, .equip-commun { max-width: var(--largeur); margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.equip h2 { font-size: clamp(26px, 5.4vw, 42px); max-width: 17em; margin-bottom: 30px; }
.equip h2 em { color: var(--c); }
.equip-grille { display: grid; gap: 14px; }
.equip-groupe { background: rgba(255, 255, 255, .62); border: 1px solid rgba(28, 38, 32, .1); border-radius: 26px; padding: 22px 20px 18px; position: relative; }
.equip-groupe::before { content: ""; position: absolute; left: 20px; top: -8px; width: 16px; height: 22px; border-radius: 999px; background: var(--c); outline: 1.5px solid var(--c); outline-offset: 3px; }
.equip-groupe h3 { font-size: 22px; margin-bottom: 10px; }
.equip-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.equip-groupe li { display: flex; gap: 10px; align-items: baseline; }
.equip-groupe li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--c); transform: translateY(-1px); }
.equip-commun { margin-top: 26px; color: var(--encre-2); font-size: 16px; max-width: 46em; }
.fruit-trace { z-index: 0; width: 220px; height: 220px; right: -50px; top: 24px; color: var(--c); opacity: .3; animation: flotte 10s ease-in-out infinite; }
.fruit-trace use { stroke-width: .9; }
@media (min-width: 700px) { .equip-grille { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1100px) {
  .equip { padding: 110px var(--marge); }
  .equip-grille { grid-template-columns: repeat(4, 1fr); }
  .js .equip-groupe.r:nth-child(2) { transition-delay: .1s; }
  .js .equip-groupe.r:nth-child(3) { transition-delay: .2s; }
  .js .equip-groupe.r:nth-child(4) { transition-delay: .3s; }
  .fruit-trace { width: 380px; height: 380px; right: 4%; top: 40px; }
}

.mot-hote { position: relative; isolation: isolate; overflow: hidden; text-align: center; color: var(--sable); padding: 96px var(--marge) 96px;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--c) 30%, var(--encre)), var(--encre) 72%); }
.mot-hote::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("deco/tressage.svg") 0 0 / 48px; opacity: .07; pointer-events: none; }
.mot-hote > .medaillon-trace { z-index: 0; top: 50%; transform: translate(-50%, -50%); width: min(86vw, 440px); }
.mot-hote .medaillon-trace ellipse { stroke: rgba(246, 239, 226, .28); }
.mot-hote .medaillon-trace ellipse + ellipse { stroke: rgba(240, 180, 14, .3); }
.mot-fruit { z-index: 0; width: 76px; height: 76px; left: 50%; top: 34px; margin-left: -38px; color: var(--c); animation: flotte 8s ease-in-out infinite; }
.mot-hote blockquote { position: relative; z-index: 1; max-width: 30em; margin: 0 auto; }
.mot-hote p { font: italic 500 clamp(24px, 5.6vw, 38px)/1.3 var(--titres); text-wrap: balance; }
.mot-hote cite { display: block; margin-top: 16px; font: normal 600 15px/1.3 var(--texte); color: rgba(246, 239, 226, .75); }
@media (min-width: 900px) { .mot-hote { padding: 140px var(--marge); } .mot-fruit { top: 60px; } }

.sejour-logement { position: relative; isolation: isolate; overflow: hidden; color: var(--sable); padding: 72px var(--marge) 80px;
  background: linear-gradient(170deg, rgba(18, 133, 143, .86) 0%, rgba(11, 95, 103, .92) 55%, rgba(10, 76, 83, .97) 100%), url("img/eau-piscine-1200.webp") 50% 30% / cover, #0B5F67; }
.sejour-logement > .caustiques, .sejour-logement > .vagues { position: absolute; z-index: 0; }
.sejour-logement-in { position: relative; z-index: 1; max-width: var(--largeur); margin: 0 auto; }
.sejour-logement .surtitre { color: var(--soleil); }
.sejour-logement h2 { font-size: clamp(26px, 5.4vw, 42px); max-width: 17em; margin-bottom: 26px; }
.cles { margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(246, 239, 226, .25); }
.cles div { padding: 14px 10px 14px 0; border-bottom: 1px solid rgba(246, 239, 226, .25); }
.cles dt { font: 600 12px/1.2 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: #FFE08A; margin-bottom: 4px; }
.cles dd { margin: 0; font-weight: 500; line-height: 1.4; }
.extras { display: grid; gap: 10px; margin-bottom: 26px; }
.extras a, .extras p { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px 10px 10px; border-radius: 999px; text-decoration: none;
  background: rgba(246, 239, 226, .1); border: 1px solid rgba(246, 239, 226, .3); transition: background-color .25s; }
.extras a:hover { background: rgba(246, 239, 226, .18); }
.extras-prix { flex: none; display: grid; place-items: center; min-width: 60px; height: 46px; padding: 0 8px; border-radius: 999px; background: var(--soleil); color: var(--encre); font: 600 18px/1 var(--titres); }
@media (min-width: 900px) {
  .sejour-logement { padding: 110px var(--marge); }
  .cles { grid-template-columns: repeat(6, 1fr); }
  .extras { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

.autres { position: relative; padding: 72px var(--marge) 64px; background: url("deco/bois.svg") 0 0 / 480px 240px, linear-gradient(180deg, #E9DCC4, #EADFCB); }
.autres-tete, .autres-liste, .suivants { max-width: var(--largeur); margin-left: auto; margin-right: auto; }
.autres h2 { font-size: clamp(25px, 5vw, 38px); max-width: 17em; margin-bottom: 26px; }
.autres-liste { list-style: none; padding: 0; display: grid; gap: 12px; }
.autres-liste a { display: grid; grid-template-columns: 64px 1fr 40px; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 999px; text-decoration: none;
  background: url("deco/grain.svg") 0 0 / 220px, var(--fond); border: 1.5px solid transparent; transition: border-color .25s, transform .25s var(--sortie); }
.autres-liste a:hover { border-color: var(--c); transform: translateY(-2px); }
.autres-liste figure { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; }
.autres-liste img { width: 100%; height: 100%; object-fit: cover; }
.autres-texte { display: grid; line-height: 1.2; }
.autres-type { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); font-weight: 600; }
.autres-liste strong { font: 600 24px/1.1 var(--titres); }
.autres-prix { font-size: 15px; color: var(--encre-2); }
.autres-liste svg { width: 40px; height: 40px; color: var(--c); }
.suivants { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.suivants .bouton { flex: 1 1 200px; }
@media (min-width: 900px) {
  .autres { padding: 100px var(--marge) 90px; }
  .autres-liste { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .suivants { justify-content: flex-end; }
  .suivants .bouton { flex: 0 0 auto; }
}

/* la carte de réservation seule, en fin de page */
.contact-seul { grid-template-columns: 1fr !important; justify-items: center; }
.contact-seul .contact-carte { width: 100%; max-width: 760px; grid-row: auto !important; }

/* ---------- page des logements ---------- */
.logements-page { padding-top: 0; background: url("deco/bois.svg") 0 0 / 480px 240px, linear-gradient(180deg, #EADFCB, #E9DCC4); }
.comparaison { position: relative; isolation: isolate; overflow: hidden; padding: 72px var(--marge) 72px; background: url("deco/enduit.svg") 0 0 / 360px, #F3EADB; }
.comparaison > .feuille-hotes { top: 10px; }
.comparaison-tete, .comparer, .pastilles-claires { max-width: var(--largeur); margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.comparaison h2 { font-size: clamp(26px, 5.4vw, 42px); max-width: 17em; margin-bottom: 14px; }
.comparaison-tete > p:last-child { color: var(--encre-2); max-width: 38em; margin-bottom: 28px; }
.comparer { display: grid; gap: 10px; }
.comparer-ligne { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 16px 18px; border-radius: 22px; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .66); border: 1px solid rgba(28, 38, 32, .1); border-left: 6px solid var(--c); transition: transform .25s var(--sortie), box-shadow .25s; }
a.comparer-ligne:hover { transform: translateY(-2px); box-shadow: 0 14px 24px -20px rgba(28, 38, 32, .7); }
.comparer-tete { display: none; }
.comparer-nom { display: flex; align-items: center; gap: 10px; grid-column: 1; }
.comparer-nom svg { width: 40px; height: 40px; flex: none; color: var(--c); }
.comparer-nom strong { display: block; font: 600 24px/1.05 var(--titres); }
.comparer-nom small { display: block; font-size: 14px; color: var(--encre-2); }
.comparer-prix { grid-column: 2; grid-row: 1; align-self: center; font: 600 24px/1 var(--titres); white-space: nowrap; }
.comparer-case { grid-column: 1 / -1; font-size: 15px; color: var(--encre-2); }
.comparer-case::before { content: attr(data-t) " : "; font-weight: 600; color: var(--encre); }
.pastilles-claires { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pastilles-claires li { border: 1px solid rgba(28, 38, 32, .25); border-radius: 999px; padding: 8px 14px; font-size: 15px; background: rgba(255, 255, 255, .4); }
@media (min-width: 900px) {
  .comparaison { padding: 110px var(--marge); }
  .comparer { gap: 8px; }
  .comparer-ligne { grid-template-columns: 1.1fr 1fr 1.4fr 110px; align-items: center; padding: 14px 22px; }
  .comparer-tete { display: grid; background: none; border: 0; padding: 0 22px 4px 28px; font: 600 12px/1.2 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--lagon); }
  .comparer-case { grid-column: auto; font-size: 16px; }
  .comparer-case::before { display: none; }
  .comparer-prix { grid-column: auto; grid-row: auto; text-align: right; }
}
.tarifs .comparer-ligne { background: rgba(246, 239, 226, .94); }

/* ---------- le séjour ---------- */
.bassin { position: relative; isolation: isolate; overflow: hidden; max-width: none; padding: 72px var(--marge); display: grid; gap: 36px;
  background: url("deco/enduit.svg") 0 0 / 360px, radial-gradient(ellipse at 10% 10%, rgba(17, 128, 138, .14), transparent 50%), #F3EADB; }
.bassin-photos { position: relative; width: min(100%, 560px); justify-self: center; padding-bottom: 60px; }
.b1 { aspect-ratio: 4 / 4.4; border-radius: 999px 999px 26px 26px; overflow: hidden; outline: 1.5px solid var(--encre); outline-offset: 6px; margin: 7px; }
.b2 { position: absolute; right: -4px; bottom: 0; width: 44%; aspect-ratio: 3 / 4; border-radius: 999px; overflow: hidden; border: 6px solid #F3EADB; box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .6); }
.b1 img, .b2 img { width: 100%; height: 100%; object-fit: cover; }
.bassin h2 { font-size: clamp(26px, 5.4vw, 42px); margin-bottom: 16px; }
.bassin-texte > p:not(.surtitre) { color: var(--encre-2); margin-bottom: 20px; max-width: 36em; }
.chiffres { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chiffres li { display: grid; gap: 4px; align-content: start; padding: 16px 10px; border-radius: 999px 999px 20px 20px; background: var(--lagon-fonce); color: var(--sable); text-align: center; }
.chiffres strong { font: 600 clamp(19px, 5vw, 28px)/1.05 var(--titres); }
.chiffres span { font-size: 13px; line-height: 1.3; color: rgba(246, 239, 226, .8); }
@media (min-width: 900px) {
  .bassin { grid-template-columns: .9fr 1fr; align-items: center; gap: 80px; padding: 110px max(var(--marge), calc((100vw - var(--largeur)) / 2 + var(--marge))); }
}

.espaces { list-style: none; padding: 0; margin: 34px auto 0; max-width: var(--largeur); display: grid; gap: 34px; }
.espace { display: grid; gap: 16px; }
.espace figure { aspect-ratio: 4 / 3; border-radius: 999px 999px 24px 24px; overflow: hidden; outline: 1.5px solid rgba(246, 239, 226, .55); outline-offset: 6px; margin: 7px; }
.espace:nth-child(even) figure { border-radius: 24px 24px 999px 999px; }
.espace img { width: 100%; height: 100%; object-fit: cover; }
.espace h3 { font-size: 24px; margin-bottom: 6px; }
.espace p { color: rgba(246, 239, 226, .82); }
@media (min-width: 900px) {
  .espaces { grid-template-columns: repeat(2, 1fr); gap: 50px 70px; margin-top: 60px; }
  .espace:nth-child(even) { transform: translateY(70px); }
  .js .espace.r:nth-child(even) { transform: translateY(96px); }
  .js .espace.r.vu:nth-child(even) { transform: translateY(70px); }
  .espaces + .pastilles { margin-top: 110px; }
}

.ardoise { position: relative; background: var(--encre); color: var(--sable); border-radius: 26px; padding: 22px 20px 18px; margin: 4px 0 24px;
  box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .7); }
.ardoise-ligne { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed rgba(246, 239, 226, .3); }
.ardoise-ligne svg { width: 40px; height: 40px; color: var(--soleil); }
.ardoise-ligne strong { display: block; font: 600 19px/1.2 var(--titres); }
.ardoise-ligne small { display: block; font-size: 14px; color: rgba(246, 239, 226, .75); }
.ardoise-prix { font: 600 26px/1 var(--titres); color: var(--soleil); white-space: nowrap; }
.ardoise-note { margin-top: 12px !important; font-size: 15px; color: rgba(246, 239, 226, .8); }
.table-page .table-texte > .citation-table { margin-bottom: 14px; }
.table-page .actions { margin-top: 16px; }

.plus { position: relative; padding: 72px var(--marge) 80px; background: url("deco/grain.svg") 0 0 / 220px, radial-gradient(ellipse at 80% 10%, rgba(17, 128, 138, .12), transparent 50%), var(--sable-2); }
.plus-tete, .plus-liste { max-width: var(--largeur); margin-left: auto; margin-right: auto; }
.plus h2 { font-size: clamp(26px, 5.4vw, 42px); max-width: 17em; margin-bottom: 30px; }
.plus-liste { list-style: none; padding: 0; display: grid; gap: 16px; }
.plus-liste li { position: relative; background: var(--sable); border-radius: 999px 999px 26px 26px; padding: 34px 22px 26px; text-align: center; border: 1px solid rgba(28, 38, 32, .1); }
.plus-liste svg { width: 56px; height: 56px; padding: 9px; margin: 0 auto 12px; display: block; border-radius: 50%; color: var(--c); border: 1.5px solid var(--c); }
.plus-liste h3 { font-size: 23px; margin-bottom: 8px; }
.plus-liste p { color: var(--encre-2); }
.sejour-citation-claire { margin: 44px auto 0; text-align: center; max-width: 36em; }
.sejour-citation-claire p { font: italic 500 clamp(21px, 4.6vw, 30px)/1.35 var(--titres); }
.sejour-citation-claire cite { display: block; margin-top: 10px; font: normal 600 14px/1 var(--texte); color: var(--encre-2); }
@media (min-width: 900px) {
  .plus { padding: 110px var(--marge); }
  .plus-liste { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .js .plus-liste .r:nth-child(2) { transition-delay: .12s; }
  .js .plus-liste .r:nth-child(3) { transition-delay: .24s; }
}

/* ---------- les alentours ---------- */
.route { position: relative; padding: 72px var(--marge) 80px; background: url("deco/enduit.svg") 0 0 / 360px, radial-gradient(ellipse at 90% 20%, rgba(240, 180, 14, .16), transparent 50%), #F3EADB; }
.route-tete, .etapes { max-width: var(--largeur); margin-left: auto; margin-right: auto; }
.route h2 { font-size: clamp(26px, 5.4vw, 42px); max-width: 17em; margin-bottom: 36px; }
.etapes { list-style: none; padding: 0 0 0 0; position: relative; display: grid; gap: 30px; max-width: 760px; }
.route-trait { position: absolute; left: 6px; top: 20px; bottom: 30px; width: 40px; height: calc(100% - 50px); pointer-events: none; overflow: visible; }
.route-trait path { fill: none; stroke: var(--lagon); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transition: stroke-dashoffset 3.2s cubic-bezier(.5, 0, .2, 1); }
.route-trait.vu path { stroke-dashoffset: 0; }
html:not(.js) .route-trait path { stroke-dashoffset: 0; }
.etape { position: relative; padding-left: 74px; }
.etape-point { position: absolute; left: 0; top: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--sable); border: 1.5px solid var(--c); display: grid; place-items: center; box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .5); }
.etape-point svg { width: 30px; height: 30px; color: var(--c); }
.js .etape.r .etape-point { transform: scale(.4); transition: transform .8s .2s cubic-bezier(.3, 1.6, .5, 1); }
.js .etape.r.vu .etape-point { transform: none; }
.etape-temps { display: inline-block; font: 600 12px/1 var(--texte); letter-spacing: .14em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; background: var(--encre); color: var(--sable); margin-bottom: 8px; }
.etape h3 { font-size: 23px; margin-bottom: 6px; }
.etape p:last-child { color: var(--encre-2); }
@media (min-width: 900px) {
  .route { padding: 110px var(--marge) 120px; }
  .route > .route-tete { display: grid; grid-template-columns: 1fr; }
  .etapes { gap: 40px; }
  .etape { padding-left: 96px; }
  .etape-point { width: 64px; height: 64px; }
  .etape-point svg { width: 36px; height: 36px; }
  .route-trait { left: 12px; }
}

.alentours-page { border-radius: 0; padding-top: 80px; }
.alentours-page::before { display: none; }

.preparer { position: relative; isolation: isolate; overflow: hidden; padding: 72px var(--marge) 80px; background: url("deco/bois.svg") 0 0 / 480px 240px, linear-gradient(180deg, #E9DCC4, #EADFCB); }
.preparer > .feuille-hotes { top: 0; }
.preparer-tete, .liens-ile { max-width: var(--largeur); margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.preparer h2 { font-size: clamp(26px, 5.4vw, 42px); max-width: 17em; margin-bottom: 14px; }
.preparer-tete > p:last-child { color: var(--encre-2); max-width: 38em; margin-bottom: 28px; }
.liens-ile { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.liens-ile a { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 140px; padding: 18px 10px; text-align: center; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3;
  background: var(--sable); border-radius: 999px 999px 22px 22px; border: 1.5px solid transparent; transition: border-color .25s, transform .25s var(--sortie); }
.liens-ile a:hover { border-color: var(--c); transform: translateY(-3px); }
.liens-ile svg { width: 46px; height: 46px; padding: 8px; border-radius: 50%; color: var(--c); border: 1.5px solid var(--c); }
@media (min-width: 900px) {
  .preparer { padding: 110px var(--marge); }
  .liens-ile { grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .liens-ile a { min-height: 180px; }
}

/* ---------- infos pratiques ---------- */
.horloge { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: min(100%, 440px); justify-self: center; }
.horloge-carte { display: grid; justify-items: center; gap: 2px; padding: 26px 12px 22px; border-radius: 999px 999px 26px 26px; background: var(--sable); border: 1.5px solid var(--encre); text-align: center; box-shadow: 0 18px 30px -24px rgba(0, 0, 0, .6); }
.horloge-carte svg { width: 48px; height: 48px; color: var(--soleil); margin-bottom: 6px; }
.horloge-titre { font: 600 12px/1.2 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--lagon); }
.horloge-heure { font: 600 clamp(40px, 11vw, 64px)/1 var(--titres); }
.horloge-carte p:last-child { font-size: 15px; color: var(--encre-2); }
.horloge-nuit { background: var(--encre); color: var(--sable); border-color: var(--encre); transform: translateY(26px); }
.horloge-nuit svg { color: #9EE3E0; }
.horloge-nuit .horloge-titre { color: #FFE08A; }
.horloge-nuit p:last-child { color: rgba(246, 239, 226, .75); }
.js .horloge-carte { opacity: 0; transition: opacity .9s .5s, transform 1s .5s var(--sortie); }
.js .horloge-carte:first-child { transform: translateY(20px) rotate(-4deg); }
.js .horloge-nuit { transform: translateY(46px) rotate(4deg); transition-delay: .7s; }
.js .ouvert .horloge-carte { opacity: 1; transform: none; }
.js .ouvert .horloge-nuit { transform: translateY(26px); }

.regles, .etapes-resa, .faq { position: relative; padding: 72px var(--marge) 72px; }
.regles { background: url("deco/grain.svg") 0 0 / 220px, var(--sable); }
.regles-tete, .regles-grille, .trois, .faq-liste { max-width: var(--largeur); margin-left: auto; margin-right: auto; position: relative; z-index: 1; }
.regles h2, .etapes-resa h2, .faq h2, .tarifs h2 { font-size: clamp(26px, 5.4vw, 42px); max-width: 17em; margin-bottom: 30px; }
.regles-grille { margin: 0; display: grid; gap: 12px; }
.regle { padding: 20px 20px 18px 22px; border-radius: 22px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(28, 38, 32, .1); position: relative; overflow: hidden; }
.regle::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
.regle dt { font: 600 20px/1.2 var(--titres); margin-bottom: 6px; }
.regle dd { margin: 0; color: var(--encre-2); }
@media (min-width: 700px) { .regles-grille { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .regles-grille { grid-template-columns: repeat(4, 1fr); } .regles, .etapes-resa, .faq { padding: 110px var(--marge); } }

.tarifs { position: relative; isolation: isolate; overflow: hidden; color: var(--sable); padding: 72px var(--marge) 80px;
  background: linear-gradient(170deg, rgba(18, 133, 143, .86) 0%, rgba(11, 95, 103, .92) 55%, rgba(10, 76, 83, .97) 100%), url("img/eau-piscine-1200.webp") 50% 30% / cover, #0B5F67; }
.tarifs > .caustiques { position: absolute; z-index: 0; }
.tarifs-in { position: relative; z-index: 1; max-width: var(--largeur); margin: 0 auto; }
.tarifs .surtitre { color: var(--soleil); }
.tarifs h2 em { color: #FFE08A; }
.tarifs .comparer { color: var(--encre); }
.tarifs .comparer-tete { color: #FFE08A; }
.tarifs .extras { margin: 22px 0 0; }
@media (min-width: 900px) { .tarifs { padding: 110px var(--marge); } }

.etapes-resa { background: url("deco/bois.svg") 0 0 / 480px 240px, linear-gradient(180deg, #E9DCC4, #EADFCB); }
.trois { list-style: none; padding: 0; display: grid; gap: 16px; }
.trois li { position: relative; background: var(--sable); border-radius: 26px; padding: 26px 22px 22px 84px; min-height: 120px; }
.trois-num { position: absolute; left: 18px; top: 22px; width: 48px; height: 64px; border-radius: 999px; display: grid; place-items: center; background: var(--lagon); color: var(--sable); font: 600 28px/1 var(--titres); outline: 1.5px solid var(--lagon); outline-offset: 3px; }
.trois li:nth-child(2) .trois-num { background: var(--soleil); color: var(--encre); outline-color: var(--soleil); }
.trois li:nth-child(3) .trois-num { background: var(--litchi); outline-color: var(--litchi); }
.trois h3 { font-size: 22px; margin-bottom: 6px; }
.trois p { color: var(--encre-2); }
@media (min-width: 900px) {
  .trois { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .trois li { padding: 100px 24px 26px; }
  .trois-num { left: 24px; top: 22px; }
  .js .trois .r:nth-child(2) { transition-delay: .12s; }
  .js .trois .r:nth-child(3) { transition-delay: .24s; }
}

.faq { isolation: isolate; overflow: hidden; background: url("deco/enduit.svg") 0 0 / 360px, #F3EADB; }
.faq-liste { display: grid; gap: 10px; max-width: 860px; margin-left: 0; }
.faq details { background: rgba(255, 255, 255, .62); border: 1px solid rgba(28, 38, 32, .1); border-radius: 22px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 14px 18px 14px 20px; font: 600 19px/1.3 var(--titres); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--lagon);
  background: linear-gradient(var(--lagon), var(--lagon)) 50% 50% / 12px 1.5px no-repeat, linear-gradient(var(--lagon), var(--lagon)) 50% 50% / 1.5px 12px no-repeat; transition: transform .3s var(--sortie); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 18px; color: var(--encre-2); }
.faq summary:focus-visible { outline: 2px solid var(--lagon); outline-offset: -2px; border-radius: 22px; }
@media (min-width: 1100px) { .faq-liste { margin-left: auto; margin-right: auto; } }

.actions-infos { justify-self: start; }

/* ---------- avis ---------- */
.note-page { position: relative; z-index: 1; justify-self: stretch; width: 100%; max-width: 380px; }
.repartition { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; width: min(100%, 340px); }
.repartition li { display: grid; grid-template-columns: 128px 1fr 30px; gap: 10px; align-items: center; font-size: 15px; font-weight: 500; }
.repartition li span:last-child { text-align: right; }
.barre { position: relative; height: 10px; border-radius: 999px; background: rgba(28, 38, 32, .1); overflow: hidden; }
.barre::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--soleil); transform-origin: left; transform: scaleX(var(--p)); transition: transform 1.6s .6s var(--sortie); }
.js .tete-toile:not(.ouvert) .barre::after { transform: scaleX(0); }
@media (min-width: 900px) { .note-page { justify-self: center; } }

.avis-page { padding: 64px var(--marge) 80px; }
.avis-page > .citation-geante { max-width: var(--largeur); margin: 0 auto 40px; }
.mur { max-width: var(--largeur); margin: 0 auto; columns: 1; column-gap: 18px; }
.mur-avis { break-inside: avoid; margin: 0 0 18px; padding: 24px 22px 20px; border-radius: 26px; background: var(--sable); border: 1px solid rgba(28, 38, 32, .12); overflow: hidden; }
.mur-avis p { font-size: 17px; line-height: 1.5; }
.mur-avis cite { display: block; margin-top: 12px; font: normal 600 15px/1 var(--texte); color: var(--encre-2); }
.mur-encre { background: var(--encre); color: var(--sable); border-color: var(--encre); }
.mur-encre cite { color: rgba(246, 239, 226, .75); }
.mur-soleil { background: #FBEFD2; border-top: 6px solid var(--soleil); }
.mur-lagon { border-left: 6px solid var(--lagon); }
.mur-litchi { background: var(--litchi-pale); border-radius: 999px 999px 26px 26px; padding-top: 44px; text-align: center; }
.mur-litchi p { font: italic 500 24px/1.3 var(--titres); }
.mur-manguier { background: var(--manguier-pale); }
.mur-grand p { font: italic 500 clamp(22px, 5vw, 28px)/1.35 var(--titres); }
.mur-photo { padding: 0; background: var(--lagon-fonce); color: var(--sable); border: 0; }
.mur-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.mur-photo-bas img { aspect-ratio: 4 / 3; }
.mur-photo p, .mur-photo cite { padding: 0 22px; }
.mur-photo p { padding-top: 18px; font: italic 500 21px/1.35 var(--titres); }
.mur-photo cite { padding-bottom: 22px; color: rgba(246, 239, 226, .75); }
@media (min-width: 700px) { .mur { columns: 2; } }
@media (min-width: 1100px) { .mur { columns: 3; column-gap: 22px; } .mur-avis { margin-bottom: 22px; } .avis-page { padding: 100px var(--marge); } }

.retours { position: relative; isolation: isolate; overflow: hidden; color: var(--sable); padding: 72px var(--marge) 80px; background: var(--encre); }
.retours::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("deco/tressage.svg") 0 0 / 48px; opacity: .1; -webkit-mask: linear-gradient(100deg, #000 0%, transparent 75%); mask: linear-gradient(100deg, #000 0%, transparent 75%); }
.retours-in { max-width: var(--largeur); margin: 0 auto; position: relative; z-index: 1; }
.retours .surtitre { color: var(--soleil); }
.retours h2 { font-size: clamp(26px, 5.4vw, 42px); max-width: 17em; margin-bottom: 30px; }
.retours h2 em { color: var(--soleil); }
.retours-liste { display: grid; gap: 16px; margin-bottom: 30px; }
.retours blockquote { border: 1.5px solid rgba(240, 180, 14, .45); border-radius: 999px 999px 26px 26px; padding: 40px 24px 26px; text-align: center; }
.retours blockquote p { font: italic 500 21px/1.4 var(--titres); }
.retours blockquote cite { display: block; margin-top: 12px; font: normal 600 14px/1 var(--texte); color: rgba(246, 239, 226, .75); }
@media (min-width: 900px) {
  .retours { padding: 110px var(--marge); }
  .retours-liste { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .js .retours-liste .r:nth-child(2) { transition-delay: .12s; }
  .js .retours-liste .r:nth-child(3) { transition-delay: .24s; }
}

/* ---------- pied : le plan du site ---------- */
.pied-plan { display: grid; gap: 22px; width: min(100%, var(--largeur)); text-align: left; margin: 10px 0 14px; padding: 22px 0; border-top: 1px solid rgba(28, 38, 32, .15); border-bottom: 1px solid rgba(28, 38, 32, .15); }
.pied-plan > * { display: grid; gap: 4px; align-content: start; }
.pied-plan a { text-decoration: none; padding: 6px 0; color: var(--encre); font-weight: 500; overflow-wrap: anywhere; }
.pied-plan a:hover { color: var(--lagon); }
.pied-plan p:not(.pied-titre) { margin-top: 6px; }
.pied-titre { font: 600 12px/1.2 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--lagon); margin-bottom: 4px; }
@media (min-width: 700px) { .pied-plan { grid-template-columns: repeat(3, 1fr); gap: 30px; } }

/* ---------- accueil ---------- */
.page-accueil .sejour::before { background: #E9DCC4; }
.contact .actions-infos { grid-column: 1 / -1; }
@media (min-width: 900px) { .page-accueil .contact .actions-infos { grid-column: 2; } }

@media (prefers-reduced-motion: reduce) {
  .js .tete-texte > *, .js .horloge-carte, .js .etape.r .etape-point { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .tete-cadre img, .js .galerie-photo.r img { clip-path: none !important; transform: none !important; transition: none !important; }
  .route-trait path { stroke-dashoffset: 0; transition: none; }
  .barre::after { transition: none; }
  .js .tete-toile:not(.ouvert) .barre::after { transform: scaleX(var(--p)); }
  .js .horloge-nuit { transform: translateY(26px) !important; }
}

/* ---------- reprises après le premier regard (20 octobre) ---------- */
/* téléphone : le nom du logement et son prix avant les photos, la description après */
@media (max-width: 899px) {
  .visite-page { gap: 0; }
  .visite-page .visite-texte { display: contents; }
  .visite-page .embleme { order: 1; }
  .visite-page h1 { order: 2; }
  .visite-page .prix-nuit { order: 3; margin-bottom: 22px; }
  .visite-page .visite-photos { order: 4; margin-bottom: 26px; }
  .visite-page .visite-texte > p:not(.embleme):not(.prix-nuit), .visite-page .chips, .visite-page .actions { order: 5; }
  .visite-page .v1 { aspect-ratio: 4 / 3.6; }
  .visite-page h1 { font-size: clamp(44px, 12vw, 60px); margin-top: 10px; }
  /* les pages intérieures : la photo du haut d'abord, plus basse, puis le titre */
  .tete-page:has(.tete-cadre) { padding-top: 22px; gap: 22px; }
  .tete-cadre { order: -1; height: clamp(190px, 30svh, 280px); }
}
.infos div:has(a[href^="mailto"]) { grid-column: 1 / -1; }
.retours > .orbite { left: auto; right: -90px; top: -110px; bottom: auto; }
.mur-avis img { display: block; }
.visite-page .visite-texte > * { position: relative; z-index: 1; }

/* ===== Icônes des cases d'information (modif du 20 octobre au soir) ===== */
/* Une seule famille au trait (symboles « i-… » de commun/sprite.html), une icône par élément, à la couleur du repère. */
.ic { flex: none; width: 26px; height: 26px; color: var(--c, var(--lagon)); }
.ic use { stroke-width: 1.6; }
/* listes à puces : l'icône remplace la puce */
.faits li .ic { width: 28px; height: 28px; }
.pastilles li, .pastilles-claires li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 10px; }
.pastilles .ic { width: 24px; height: 24px; color: var(--soleil); }
.pastilles-claires .ic { width: 24px; height: 24px; color: var(--lagon); }
.equip-groupe li { align-items: center; }
.equip-groupe li::before { content: none; }
.equip-groupe .ic { width: 26px; height: 26px; color: var(--c); }
.equip-commun { display: grid; gap: 12px; color: var(--encre); max-width: var(--largeur); }
.equip-commun-titre { font: 600 12px/1.2 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-2); }
.equip-commun ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.equip-commun li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(28, 38, 32, .12); font-size: 15px; font-weight: 500; }
.equip-commun .ic { width: 24px; height: 24px; color: var(--c); }
/* listes de définitions : l'icône en tête de l'intitulé */
.infos dt, .regle dt { display: flex; align-items: center; gap: 8px; }
.infos dt .ic { width: 24px; height: 24px; color: var(--lagon); }
.regle dt { gap: 10px; }
.regle dt .ic { width: 30px; height: 30px; color: var(--c); }
.cles dt .ic { display: block; width: 28px; height: 28px; margin-bottom: 8px; color: #FFE08A; }
.chiffres .ic { justify-self: center; width: 30px; height: 30px; color: #FFE08A; margin-bottom: 2px; }
.extras .ic { width: 28px; height: 28px; color: #FFE08A; }
.faq summary .ic { width: 28px; height: 28px; color: var(--lagon); }
.faq summary > span { flex: 1; }
.pied-plan .pied-contact { display: flex; align-items: center; gap: 10px; }
.pied-plan .pied-contact .ic { width: 24px; height: 24px; color: var(--lagon); }
.pied-plan p.pied-contact { align-items: flex-start; }

/* ===== Ornements qui poussent au défilement (modif du 20 octobre au soir) ===== */
/* Rameau de litchi, feuille de bananier, rameau de manguier, palme de cocotier (symboles « o-… »), posés sur les bords
   des sections. Ils se tracent et poussent une fois à l'arrivée (classe « vu »), puis se balancent au rythme du défilement :
   app.js donne à chacun --p, de 1 (section en bas de l'écran) à -1 (section en haut). Transform, opacity et
   stroke-dashoffset seulement. Mouvement réduit : dessinés et immobiles. */
section:has(> .ornes), article:has(> .ornes) { position: relative; isolation: isolate; }
.ornes { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; overflow: hidden; pointer-events: none; }
.orne { position: absolute; display: block; width: 116px; height: 116px; color: rgba(78, 139, 58, .5); --o-fruit: rgba(200, 56, 90, .6);
  transform: translate3d(0, calc(var(--p, 0) * var(--amp, 26px)), 0) rotate(calc(var(--p, 0) * var(--tour, 7deg))); will-change: transform; }
.orne svg { display: block; width: 100%; height: 100%; overflow: visible; opacity: 0; transform: scale(.45) rotate(-10deg); transform-origin: inherit;
  transition: opacity .9s ease-out, transform 1.8s var(--sortie); }
.orne use { stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.45, 0, .2, 1); transform-box: view-box; transform-origin: 50% 50%; }
.orne.vu svg { opacity: 1; transform: none; }
.orne.vu use { stroke-dashoffset: 0; }
html:not(.js) .orne svg { opacity: 1; transform: none; }
html:not(.js) .orne use { stroke-dashoffset: 0; }
/* les coins : la tige part du bord de l'écran */
.orne-bg { left: -26px; bottom: -8px; transform-origin: 0 100%; }
.orne-bd { right: -26px; bottom: -8px; transform-origin: 100% 100%; --tour: -7deg; }
.orne-bd use { transform: scaleX(-1); }
.orne-hg { left: -26px; top: -8px; transform-origin: 0 0; --tour: -6deg; }
.orne-hg use { transform: scaleY(-1); }
.orne-hd { right: -26px; top: -8px; transform-origin: 100% 0; }
.orne-hd use { transform: scale(-1, -1); }
.orne-bananier { color: rgba(141, 179, 58, .55); }
.orne-palme { color: rgba(62, 156, 132, .5); }
.orne-manguier { --o-fruit: rgba(226, 178, 28, .85); }
/* sur fond sombre */
.retours .orne { color: rgba(240, 180, 14, .38); --o-fruit: rgba(246, 239, 226, .45); }
@media (min-width: 700px) {
  .orne { width: 180px; height: 180px; }
}
@media (min-width: 1100px) {
  .orne { width: 250px; height: 250px; }
  .orne-bg, .orne-hg { left: max(-20px, calc((100vw - var(--largeur)) / 2 - 290px)); }
  .orne-bd, .orne-hd { right: max(-20px, calc((100vw - var(--largeur)) / 2 - 290px)); }
}
@media (prefers-reduced-motion: reduce) {
  .orne { transform: none !important; will-change: auto; }
  .orne svg { opacity: 1; transform: none; transition: none; }
  .orne use { stroke-dashoffset: 0; transition: none; }
}

/* ===== Retouches d'affichage (modif du 20 octobre au soir) ===== */
/* les cartes des logements : la colonne décalée vers le bas ne touche plus les boutons qui suivent */
.logements .choix { padding-bottom: 44px; }
@media (min-width: 700px) { .logements .choix { padding-bottom: 92px; } }
@media (min-width: 1100px) { .logements .choix { padding-bottom: 104px; } .logements-page .choix { padding-bottom: 120px; } }
/* questions fréquentes : le titre aligné sur la liste */
@media (min-width: 1100px) { .faq .regles-tete { max-width: 860px; } }
.plus-liste svg use { stroke-width: 1.3; }
/* ornements au téléphone : petits, dans les marges hautes et basses des sections, jamais sur un texte ni un bouton */
@media (max-width: 699px) {
  .orne { width: 96px; height: 96px; --amp: 6px; }
  .orne-bg, .orne-hg { left: -24px; }
  .orne-bd, .orne-hd { right: -24px; }
  .orne-bg, .orne-bd { bottom: -32px; }
  .orne-hg, .orne-hd { top: -34px; }
  .autres { padding-bottom: 88px; }
  .equip { padding-bottom: 88px; }
  .table { padding-bottom: 88px; }
  .avis .orne-hg { top: -44px; }
  .logements-page .choix { padding-bottom: 100px; }
}
/* écran d'ordinateur : dans la marge de côté, à l'écart du texte */
@media (min-width: 1100px) {
  .orne { width: 210px; height: 210px; }
  .orne-bg, .orne-hg { left: calc((100vw - var(--largeur)) / 2 - 216px); }
  .orne-bd, .orne-hd { right: calc((100vw - var(--largeur)) / 2 - 216px); }
}
/* conditions de la maison : la grille alignée sur le titre (elle collait au bord gauche sur grand écran) */
.regles-grille { margin-left: auto; margin-right: auto; }
/* contact des pages intérieures : le bouton d'itinéraire sous les infos, comme à l'accueil */
@media (min-width: 900px) {
  .contact .actions-infos { grid-column: 2; align-self: start; }
}
/* l'ancien fruit tracé des équipements : dans la marge sur très grand écran, plus sur la carte « Dehors » */
@media (min-width: 1700px) {
  .fruit-trace { width: 300px; height: 300px; right: calc((100vw - var(--largeur)) / 2 - 330px); }
}
/* ornements au téléphone : un peu plus marqués, ils sont petits */
@media (max-width: 699px) {
  .orne { color: rgba(78, 139, 58, .7); --o-fruit: rgba(200, 56, 90, .75); }
  .orne-bananier { color: rgba(141, 179, 58, .75); }
  .orne-palme { color: rgba(62, 156, 132, .7); }
}
/* les alentours : le titre aligné sur la route qu'il présente */
@media (min-width: 900px) { .route-tete { max-width: 760px; } }