/* Le site de plusieurs pages : menu, pied de page, haut des pages intérieures, galeries, fiches, tarifs, questions.
   Même direction que l'accueil : bleu nuit et ocre du logo, toits de case, fonds du matin et décors du jardin. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; z-index: 30; left: 12px; top: -60px; padding: 10px 16px; border-radius: 999px; background: var(--ocre); color: var(--nuit-2); font-weight: 700; text-decoration: none; }
.evitement:focus { top: 12px; }

/* En-tête : page en cours et bouton du menu */
.nav a[aria-current="page"] { color: var(--creme); border-color: var(--ocre); }
.btn-menu { flex: none; display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(240, 199, 102, .6); background: transparent; color: var(--creme); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.burger { display: grid; gap: 5px; width: 20px; }
.burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.burger i:nth-child(2) { width: 70%; justify-self: end; }
.btn-menu:focus-visible { outline: 3px solid var(--ocre-clair); outline-offset: 3px; }
@media (max-width: 359px) { .apercu { display: none; } }

/* Le menu : un panneau bleu nuit sous les étoiles */
.menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 18px var(--marge) 28px; border: 0; background: radial-gradient(120% 70% at 80% 0%, #3B4A63 0%, var(--nuit) 55%, var(--nuit-2) 100%); color: var(--creme); overflow-y: auto; overscroll-behavior: contain; }
.menu[open] { display: flex; flex-direction: column; gap: 22px; animation: menu-entre .45s var(--sortie); }
.menu::backdrop { background: rgba(31, 40, 56, .6); }
@keyframes menu-entre { from { opacity: 0; transform: translateY(-12px); } }
.menu-etoiles { height: 60%; }
.menu-haut { position: relative; display: flex; align-items: center; gap: 12px; }
.menu-nom { font: 400 19px/1.1 var(--titre); }
.menu-fermer { position: relative; margin-left: auto; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid rgba(240, 199, 102, .6); background: transparent; cursor: pointer; }
.menu-fermer i { position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; margin-top: -1px; background: var(--creme); border-radius: 2px; transform: rotate(45deg); }
.menu-fermer i + i { transform: rotate(-45deg); }
.menu-nav { position: relative; display: grid; }
.menu-nav a { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(240, 199, 102, .2); text-decoration: none; font: 400 clamp(25px, 7vw, 32px)/1.15 var(--titre); }
.menu-nav a[aria-current="page"] { color: var(--ocre-clair); }
.menu-num { flex: none; width: 30px; font: 600 13px/1 var(--texte); letter-spacing: .1em; color: var(--ocre-clair); }
.menu-contact { position: relative; display: grid; gap: 10px; margin-top: auto; }
.menu-contact .btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .menu[open] { animation: none; } }

/* Pied de page */
.pied { position: relative; padding-top: 64px; gap: 30px; overflow: clip; background-image: var(--grain-clair); }
.pied-frise { top: 22px; opacity: .3; }
.pied-haut { display: grid; gap: 30px; }
.pied-col { display: grid; gap: 10px; align-content: start; }
.pied-col p { line-height: 1.5; }
.pied-titre { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ocre-clair); }
.pied-tel { font: 400 24px/1.2 var(--titre); text-decoration: none; }
.pied-btn { justify-self: start; min-width: 200px; margin-top: 4px; }
.pied a.btn-ocre { color: var(--nuit-2); }
.pied a.btn-contour { color: var(--creme); }
.pied-pages a { display: block; padding: 6px 0; color: rgba(251, 246, 236, .85); text-decoration: none; }
.pied-pages a[aria-current="page"] { color: var(--ocre-clair); }
.pied-pages a:hover { color: var(--creme); }

/* Haut des pages intérieures : le ciel du soir sur la gauche, une case photo, le fil d'Ariane */
.page-heros { position: relative; isolation: isolate; overflow: clip; color: var(--creme); padding: 10px var(--marge) 44px; background: var(--grain-clair), radial-gradient(120% 70% at 80% 0%, #3B4A63 0%, var(--nuit) 55%, #263144 100%); }
.page-heros .etoiles { z-index: -1; }
.fil { font-size: 14px; color: rgba(251, 246, 236, .7); margin: 6px 0 14px; }
.fil a { color: var(--ocre-clair); text-decoration: none; }
.page-heros h1 { font-size: clamp(30px, 8.2vw, 40px); line-height: 1.1; }
.page-heros-sous { margin-top: 14px; color: rgba(251, 246, 236, .84); max-width: 36em; }
.page-heros .case { margin-top: 26px; }
.page-heros .case-photo { aspect-ratio: 4 / 3; }
.page-heros-lune { position: absolute; z-index: 3; top: 4px; right: 8%; width: 30px; height: 30px; fill: var(--ocre-clair); }
.page-heros-oiseau { position: absolute; z-index: 3; top: -6px; left: 6%; width: 78px; opacity: .9; }
html.js .page-heros-oiseau { animation: vol 3.2s var(--sortie) .3s both; }
.page-heros .actions { margin-top: 22px; }
.page-heros-dessin { position: absolute; z-index: -1; color: var(--ocre); opacity: .14; }

/* Repères en chiffres sous le haut de page */
.reperes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(240, 199, 102, .3); }
.reperes li { display: grid; gap: 2px; }
.reperes strong { font: 400 clamp(28px, 7.4vw, 38px)/1 var(--titre); color: var(--ocre-clair); }
.reperes span { font-size: 15px; line-height: 1.35; color: rgba(251, 246, 236, .82); }

/* Une fiche de logement : le texte, les équipements, le prix, puis la galerie */
.fiche { padding: 64px var(--marge) 56px; display: grid; gap: 28px; overflow: clip; }
.fiche > *:not(.deco):not(.fond):not(.etoiles) { position: relative; z-index: 1; min-width: 0; }
.fiche-num { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.fiche h2 { font-size: clamp(30px, 8vw, 46px); line-height: 1.1; }
.fiche-intro { margin-top: 14px; }
.fiche-faits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.fiche-faits li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(211, 154, 14, .35); }
.fiche-faits b { font: 400 21px/1.15 var(--titre); color: var(--nuit); }
.fiche-faits span { font-size: 14px; line-height: 1.3; color: var(--gris); }
.fiche-equip { display: grid; gap: 8px; margin-top: 18px; }
.fiche-equip li { position: relative; padding-left: 26px; line-height: 1.45; }
.fiche-equip li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 8px; border-left: 2px solid var(--ocre); border-bottom: 2px solid var(--ocre); transform: rotate(-45deg) translateY(-2px); }
.prix { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding: 16px 18px; border-radius: 18px; background: var(--nuit); color: var(--creme); }
.prix-montant { font: 400 40px/1 var(--titre); color: var(--ocre-clair); }
.prix-montant small { font: 600 15px/1 var(--texte); color: var(--creme); margin-left: 4px; }
.prix-detail { flex: 1 1 180px; font-size: 15px; line-height: 1.4; color: rgba(251, 246, 236, .85); }
.fiche-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.fiche-actions .btn { width: 100%; }

/* Galerie : des tirages encadrés qui glissent, trois visibles à la fois sur ordinateur */
.galerie { position: relative; z-index: 1; }
.galerie-titre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.galerie-titre p { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.galerie-fleches { display: none; gap: 8px; }
.galerie-fleches button { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; font: 400 22px/1 var(--texte); }
.galerie-fleches button:disabled { opacity: .3; cursor: default; }
.galerie-bande { overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--marge)); padding: 8px 0 18px; }
.galerie-bande::-webkit-scrollbar { display: none; }
.galerie-bande:focus-visible { outline: 3px solid var(--ocre); outline-offset: -3px; }
.galerie-liste { display: flex; align-items: center; gap: 14px; width: max-content; padding: 0 var(--marge); }
.tirage { scroll-snap-align: center; width: min(80vw, 340px); padding: 8px 8px 12px; border-radius: 6px; background: #FFFDF8; box-shadow: 0 18px 30px -20px rgba(31, 40, 56, .6); transform: rotate(var(--r, 0deg)); }
.tirage:nth-child(3n+1) { --r: -1deg; }
.tirage:nth-child(3n+2) { --r: .8deg; }
.tirage:nth-child(3n) { --r: -.4deg; }
.tirage-img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: var(--sable); }
.tirage-img img { width: 100%; height: 100%; object-fit: cover; }
.tirage.haut .tirage-img { aspect-ratio: 3 / 4; }
.tirage figcaption { margin-top: 10px; padding: 0 4px; font: 400 17px/1.25 var(--titre); color: var(--nuit); }
.galerie-aide { margin-top: -6px; font-size: 14px; }

/* Les couleurs de chaque fiche */
.fiche-hibiscus { background: var(--grain), radial-gradient(50% 40% at 85% 12%, rgba(255, 255, 255, .6), transparent 70%), linear-gradient(180deg, var(--rose), #FBEDE7); color: var(--encre); }
.fiche-hibiscus .fiche-num { color: var(--hibiscus); }
.fiche-toucan { background: var(--grain), radial-gradient(55% 45% at 12% 10%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(180deg, var(--menthe), #EEF7F1); color: var(--encre); }
.fiche-toucan .fiche-num { color: var(--feuille); }
.fiche-bungalow { background: var(--grain), radial-gradient(60% 40% at 90% 0%, rgba(255, 255, 255, .5), transparent 70%), repeating-linear-gradient(180deg, rgba(120, 84, 40, .09) 0 2px, transparent 2px 44px), linear-gradient(180deg, #F3EBDB, var(--sable)); color: var(--encre); }
.fiche-bungalow .fiche-num { color: var(--lagon-fonce); }
.fiche-chalet { background: var(--grain-clair), repeating-linear-gradient(90deg, rgba(0, 0, 0, .26) 0 2px, transparent 2px 92px), radial-gradient(120% 80% at 10% 0%, #4A382C, var(--bois) 60%); color: var(--creme); }
.fiche-villa { background: var(--grain-clair), linear-gradient(160deg, #1B3A4A 0%, var(--lagon-fonce) 55%, var(--lagon) 120%); color: var(--creme); }
.fiche h2, .fiche-hibiscus .galerie-titre, .fiche-toucan .galerie-titre, .fiche-bungalow .galerie-titre { color: var(--nuit); }
.fiche-intro, .fiche-equip { color: var(--gris); }
.fiche-chalet h2, .fiche-villa h2 { color: var(--creme); }
.fiche-chalet .fiche-num, .fiche-villa .fiche-num { color: var(--ocre-clair); }
.fiche-chalet .fiche-intro, .fiche-chalet .fiche-equip, .fiche-villa .fiche-intro, .fiche-villa .fiche-equip { color: rgba(251, 246, 236, .86); }
.fiche-chalet .fiche-faits li, .fiche-villa .fiche-faits li { background: rgba(251, 246, 236, .08); border-color: rgba(240, 199, 102, .4); }
.fiche-chalet .fiche-faits b, .fiche-villa .fiche-faits b { color: var(--ocre-clair); }
.fiche-chalet .fiche-faits span, .fiche-villa .fiche-faits span { color: rgba(251, 246, 236, .8); }
.fiche-chalet .prix, .fiche-villa .prix { background: rgba(251, 246, 236, .1); border: 1px solid rgba(240, 199, 102, .4); }
.fiche-chalet .galerie-titre, .fiche-villa .galerie-titre { color: var(--creme); }
.fiche-deco { width: 200px; height: 200px; right: -50px; top: 30px; opacity: .15; }
.fiche-hibiscus .fiche-deco { color: var(--hibiscus); }
.fiche-toucan .fiche-deco { color: var(--feuille); }
.fiche-bungalow .fiche-deco { color: var(--lagon); width: 220px; height: 74px; opacity: .3; }
.fiche-chalet .fiche-deco { color: var(--ocre); }

/* Comparatif rapide des logements (page Hébergements) */
.choix { padding: 56px var(--marge) 52px; overflow: clip; background: var(--grain), radial-gradient(70% 80% at 0% 100%, rgba(211, 154, 14, .16), transparent 70%), var(--sable); }
.choix > *:not(.fond):not(.deco) { position: relative; z-index: 1; }
.choix-liste { display: grid; gap: 12px; }
.choix-carte { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--creme); color: var(--nuit); text-decoration: none; border: 1px solid rgba(211, 154, 14, .4); box-shadow: 0 14px 24px -20px rgba(31, 40, 56, .7); transition: transform .3s var(--sortie), box-shadow .3s; }
.choix-carte:hover { transform: translateY(-3px); box-shadow: 0 20px 30px -20px rgba(31, 40, 56, .8); }
.choix-img { width: 96px; height: 96px; overflow: hidden; clip-path: polygon(0 26%, 50% 0, 100% 26%, 100% 100%, 0 100%); border-radius: 0 0 12px 12px; }
.choix-img img { width: 100%; height: 100%; object-fit: cover; }
.choix-carte h3 { font-size: 22px; line-height: 1.15; }
.choix-carte p { margin-top: 4px; font-size: 15px; line-height: 1.35; color: var(--gris); }
.choix-carte .choix-prix { color: #8A6A1C; font-weight: 700; }

/* Les tarifs et les conditions (page Infos) */
.tarifs { padding: 64px var(--marge) 56px; overflow: clip; background: var(--grain), radial-gradient(60% 50% at 100% 0%, rgba(240, 199, 102, .3), transparent 70%), var(--creme); }
.tarifs > *:not(.fond):not(.deco) { position: relative; z-index: 1; }
.tarifs-liste { display: grid; gap: 10px; margin-top: 8px; }
.tarifs-liste li { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px dashed rgba(46, 58, 78, .25); }
.tarifs-liste b { font: 400 22px/1.2 var(--titre); color: var(--nuit); }
.tarifs-liste span { grid-column: 1; font-size: 15px; color: var(--gris); }
.tarifs-liste em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 400 28px/1 var(--titre); font-style: normal; color: #A87806; text-align: right; }
.tarifs-liste em small { display: block; margin-top: 4px; font: 600 13px/1 var(--texte); color: var(--gris); }
.tarifs-note { margin-top: 18px; font-size: 15px; color: var(--gris); }

.conditions { padding: 64px var(--marge) 60px; overflow: clip; color: var(--creme); background: var(--grain-clair), radial-gradient(110% 70% at 20% 0%, #3B4A63, var(--nuit) 60%); }
.conditions > *:not(.fond):not(.deco):not(.etoiles) { position: relative; z-index: 1; }
.conditions .tete-section h2 { color: var(--creme); }
.horloges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.horloge { padding: 18px 16px; border-radius: 18px; background: rgba(251, 246, 236, .07); border: 1px solid rgba(240, 199, 102, .35); }
.horloge svg { width: 54px; height: 54px; margin-bottom: 10px; }
.horloge svg circle { fill: none; stroke: var(--ocre-clair); stroke-width: 2; }
.horloge svg .aiguille { stroke: var(--creme); stroke-width: 2.4; stroke-linecap: round; transform-box: view-box; transform-origin: 27px 27px; transition: transform 1.6s var(--sortie) .2s; }
html.js .horloge:not(.vu) .aiguille { transform: rotate(-120deg); }
.horloge svg .part { fill: none; stroke: var(--ocre); stroke-width: 24; transition: stroke-dasharray 1.4s var(--sortie) .2s; }
html.js .horloge:not(.vu) .part { stroke-dasharray: 0 75.4; }
@media (prefers-reduced-motion: reduce) { html.js .horloge .aiguille { transform: none; transition: none; } html.js .horloge .part { stroke-dasharray: 22.6 75.4; transition: none; } }
.horloge b { display: block; font: 400 26px/1.1 var(--titre); color: var(--ocre-clair); }
.horloge span { font-size: 15px; color: rgba(251, 246, 236, .84); }
.regles { display: grid; gap: 12px; margin-top: 26px; }
.regle { padding: 18px 18px 18px 64px; position: relative; border-radius: 18px; background: rgba(251, 246, 236, .06); }
.regle .ico { position: absolute; left: 14px; top: 16px; background: rgba(240, 199, 102, .14); stroke: var(--ocre-clair); }
.regle h3 { font-size: 22px; line-height: 1.2; }
.regle p { margin-top: 6px; color: rgba(251, 246, 236, .84); font-size: 16px; }

/* Questions fréquentes */
.questions { padding: 64px var(--marge) 60px; overflow: clip; background: var(--grain), repeating-linear-gradient(0deg, rgba(46, 58, 78, .045) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(46, 58, 78, .035) 0 1px, transparent 1px 5px), var(--sable); }
.questions > *:not(.fond):not(.deco) { position: relative; z-index: 1; }
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: var(--creme); border: 1px solid rgba(211, 154, 14, .35); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 14px 18px; font: 400 20px/1.25 var(--titre); color: var(--nuit); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--ocre); border-bottom: 2px solid var(--ocre); transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--sortie); }
.faq details[open] summary::after { transform: rotate(-135deg) translateX(-3px); }
.faq details p { padding: 0 18px 18px; color: var(--gris); }

/* Contact (page Infos) */
.contact { padding: 64px var(--marge) 60px; overflow: clip; display: grid; gap: 30px; color: var(--creme); background: var(--grain-clair), linear-gradient(170deg, var(--lagon) 0%, var(--lagon-fonce) 70%); }
.contact > *:not(.fond):not(.deco) { position: relative; z-index: 1; }
.contact h2 { font-size: clamp(30px, 8vw, 46px); line-height: 1.1; }
.contact-carte { padding: 22px 20px; border-radius: 20px; background: rgba(251, 246, 236, .1); border: 1px solid rgba(251, 246, 236, .3); display: grid; gap: 12px; }
.contact-carte .adresse { font-size: 23px; }
.contact-carte .btn { width: 100%; }

/* Le séjour : les services avec leur prix */
.services { padding: 64px var(--marge) 60px; overflow: clip; background: var(--grain), radial-gradient(60% 50% at 0% 0%, rgba(240, 199, 102, .3), transparent 70%), var(--creme); }
.services > *:not(.fond):not(.deco) { position: relative; z-index: 1; }
.services-liste { display: grid; gap: 14px; }
.service { display: grid; gap: 6px; padding: 20px 18px; border-radius: 4px 20px 20px 20px; background: rgba(255, 255, 255, .7); border-left: 3px solid var(--ocre); }
.service h3 { font-size: 23px; line-height: 1.2; color: var(--nuit); }
.service p { color: var(--gris); }
.service .service-prix { font: 400 24px/1.1 var(--titre); color: #A87806; }

.bloc-photo { position: relative; z-index: 1; }
.bloc-photo .case-photo { aspect-ratio: 4 / 3; }

/* Alentours : la carte du Sud et les distances */
.carte-sud { position: relative; z-index: 1; margin: 6px 0 30px; padding: 18px; border-radius: 22px; background: rgba(251, 246, 236, .08); border: 1px solid rgba(251, 246, 236, .25); }
.carte-sud svg { display: block; width: 100%; height: auto; }
.carte-sud .ile { fill: rgba(251, 246, 236, .1); stroke: rgba(251, 246, 236, .55); stroke-width: 1.5; }
.carte-sud .route { fill: none; stroke: var(--ocre-clair); stroke-width: 1.6; stroke-dasharray: 4 5; }
.carte-sud .lieu circle { fill: var(--creme); }
.carte-sud .lieu text { font: 600 13px var(--texte); fill: var(--creme); }
.carte-sud .lieu-domaine circle { fill: var(--ocre); }
.carte-sud .lieu-domaine text { fill: var(--ocre-clair); font-size: 14px; }
.carte-sud .pulse { fill: none; stroke: var(--ocre-clair); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.carte-postale .distance { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: var(--nuit); color: var(--ocre-clair); font-size: 14px; font-weight: 700; }
.partenaires { padding: 64px var(--marge) 60px; overflow: clip; background: var(--grain), radial-gradient(55% 45% at 85% 25%, rgba(255, 255, 255, .55), transparent 70%), var(--sable); }
.partenaires > *:not(.fond):not(.deco) { position: relative; z-index: 1; }

/* Bandeau d'appel à réserver en bas des pages */
.appel { padding: 60px var(--marge) 56px; overflow: clip; display: grid; gap: 18px; color: var(--nuit-2); background: var(--grain), repeating-conic-gradient(from 180deg at 100% 0%, rgba(255, 248, 225, .16) 0 2.5deg, transparent 2.5deg 8deg), linear-gradient(170deg, var(--ocre-clair), var(--ocre) 70%); }
.appel > *:not(.fond):not(.deco):not(.frise) { position: relative; z-index: 1; }
.appel h2 { font-size: clamp(29px, 7.6vw, 44px); line-height: 1.1; }
.appel p { max-width: 38em; }
.appel .actions { margin-top: 6px; }
.appel-frise { color: var(--nuit); opacity: .25; }

/* Accueil : les cinq logements en vignettes vers leur page */
.apercus { display: grid; gap: 14px; position: relative; z-index: 1; }
.apercu-carte { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; text-decoration: none; color: var(--nuit); }
.apercu-img { width: 112px; aspect-ratio: 1; overflow: hidden; clip-path: polygon(0 24%, 50% 0, 100% 24%, 100% 100%, 0 100%); border-radius: 0 0 14px 14px; }
.apercu-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sortie); }
.apercu-carte:hover .apercu-img img { transform: scale(1.04); }
.apercu-carte h3 { font-size: 23px; line-height: 1.15; }
.apercu-carte p { margin-top: 4px; font-size: 15px; line-height: 1.35; color: var(--gris); }
.apercu-carte .choix-prix { color: #8A6A1C; font-weight: 700; }

@media (min-width: 640px) {
  .fiche-actions { flex-direction: row; flex-wrap: wrap; }
  .fiche-actions .btn { width: auto; }
  .horloges { grid-template-columns: repeat(4, 1fr); }
  .regles { grid-template-columns: 1fr 1fr; }
  .services-liste { grid-template-columns: 1fr 1fr; }
  .choix-liste, .apercus { grid-template-columns: 1fr 1fr; }
  .reperes { grid-template-columns: repeat(4, 1fr); }
  .pied-haut { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .btn-menu { display: none; }
  .nav { gap: 22px; }
  .page-heros { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; padding-top: 30px; padding-bottom: 76px; }
  .page-heros h1 { font-size: clamp(42px, 3.8vw, 56px); }
  .page-heros .case { margin-top: 0; --toit: 84px; }
  .page-heros .case-photo { aspect-ratio: auto; height: min(54vh, 500px); }
  .page-heros-lune { width: 40px; height: 40px; }
  .page-heros-oiseau { width: 120px; }
  .fiche { grid-template-columns: 1fr 1.05fr; column-gap: 72px; row-gap: 40px; padding-top: 100px; padding-bottom: 96px; align-items: start; }
  .fiche-visuel { grid-column: 2; grid-row: 1; position: sticky; top: 104px; }
  .fiche-texte { grid-column: 1; grid-row: 1; }
  .fiche-inverse .fiche-visuel { grid-column: 1; }
  .fiche-inverse .fiche-texte { grid-column: 2; }
  .galerie { grid-column: 1 / -1; }
  .galerie-fleches { display: flex; }
  .galerie-aide { display: none; }
  .tirage { width: calc((min(100vw, 1180px + 2 * 48px) - 2 * var(--marge) - 28px) / 3); }
  .fiche-deco { width: 360px; height: 360px; right: 2%; }
  .fiche-bungalow .fiche-deco { width: 360px; height: 120px; }
  .choix-liste, .apercus { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .tarifs { display: grid; grid-template-columns: 1fr 1.3fr; column-gap: 80px; align-items: start; padding-top: 100px; padding-bottom: 90px; }
  .conditions, .questions, .services, .partenaires { padding-top: 100px; padding-bottom: 96px; }
  .questions { display: grid; grid-template-columns: 1fr 1.4fr; column-gap: 80px; align-items: start; }
  .regles { grid-template-columns: repeat(3, 1fr); }
  .services-liste { grid-template-columns: repeat(3, 1fr); }
  .contact { grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; padding-top: 100px; padding-bottom: 96px; }
  .appel { grid-template-columns: 1.3fr 1fr; column-gap: 64px; align-items: center; padding-top: 90px; padding-bottom: 84px; }
  .appel .actions { justify-content: flex-end; }
  .pied-haut { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
  .carte-sud { padding: 28px; }
}

/* Accueil : le prix sous chaque visite */
.visite-prix { margin-top: 16px; font: 400 21px/1.3 var(--titre); color: #8A6A1C; }
.visite-chalet .visite-prix, .visite-villa .visite-prix { color: var(--ocre-clair); }

/* Le séjour : le matin sur un ciel de lever du jour */
.matin { padding: 64px var(--marge) 60px; overflow: clip; display: grid; gap: 30px; background: var(--grain), linear-gradient(180deg, #FBEBC8 0%, #F6E3B4 45%, #CBE8E5 100%); }
.matin > *:not(.fond):not(.deco) { position: relative; z-index: 1; }
.matin .fond-nuages { height: 100%; opacity: .7; }
.matin-soleil { position: relative !important; display: block; width: 56px; height: 56px; margin-bottom: 14px; color: var(--ocre); animation: tourne 36s linear infinite; }
.matin h2 { font-size: clamp(29px, 7.6vw, 44px); line-height: 1.1; color: var(--nuit); }
.matin-texte > p:not(.surtitre) { margin-top: 14px; color: var(--gris); }
.matin-texte .matin-note { font-weight: 700; color: var(--nuit); }
.matin-avis { padding: 22px 20px; border-radius: 4px 20px 20px 20px; background: rgba(255, 255, 255, .7); border-left: 3px solid var(--ocre); }
.matin-avis blockquote { font: 400 clamp(23px, 6vw, 32px)/1.25 var(--titre); color: var(--nuit); }
.matin-avis figcaption { margin-top: 10px; font-size: 15px; font-weight: 600; color: #8A6A1C; }
.table-prix { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 16px; color: rgba(251, 246, 236, .85); }
.table-prix span { font: 400 34px/1 var(--titre); color: var(--ocre-clair); }
.table-prix span + span { margin-left: 10px; }
.table-photo .case-photo { aspect-ratio: 4 / 3; }
.fiche-piscine { color: var(--creme); background: var(--grain-clair), linear-gradient(170deg, var(--lagon) 0%, var(--lagon-fonce) 70%, #1B3A4A 100%); }
.fiche-piscine h2 { color: var(--creme); }
.fiche-piscine .fiche-num { color: var(--ocre-clair); }
.fiche-piscine .fiche-intro, .fiche-piscine .fiche-equip { color: rgba(251, 246, 236, .88); }
.fiche-piscine .galerie-titre { color: var(--creme); }
.services .service p { font-size: 16px; }

/* La villa */
.page-heros-villa { background: var(--grain-clair), radial-gradient(120% 70% at 80% 0%, #2B5868 0%, #1B3A4A 55%, var(--nuit-2) 100%); }
.villa-chiffres { padding: 34px var(--marge) 40px; overflow: clip; color: var(--creme); background: var(--grain-clair), linear-gradient(180deg, #1B3A4A, var(--lagon-fonce)); }
.villa-chiffres .fond-caustiques { height: 100%; }
.reperes-villa { position: relative; z-index: 1; margin-top: 0; padding-top: 0; border-top: 0; }
.fiche-villa-dedans { background: var(--grain), radial-gradient(60% 50% at 100% 0%, rgba(42, 143, 158, .18), transparent 70%), var(--creme); color: var(--encre); }
.fiche-villa-dedans .fond-toits { color: var(--lagon-fonce); opacity: .06; }
.fiche-villa-dedans .fiche-num { color: var(--lagon-fonce); }
.fiche-villa-dedans .fiche-deco { color: var(--feuille); }
.fiche-villa-dedans .galerie-titre { color: var(--nuit); }
.villa-avis { padding: 64px var(--marge) 60px; overflow: clip; display: grid; gap: 26px; background: var(--grain), repeating-linear-gradient(0deg, rgba(46, 58, 78, .045) 0 1px, transparent 1px 4px), var(--sable); }
.villa-avis > *:not(.deco) { position: relative; z-index: 1; }
.villa-avis .avis-geante blockquote { font-size: clamp(28px, 7.4vw, 50px); }
.villa-avis-texte > p { color: var(--gris); }

/* Les alentours : trois façons de découvrir l'île, et les commodités */
.activites { padding: 64px var(--marge) 60px; overflow: clip; background: var(--grain), radial-gradient(55% 45% at 12% 10%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(180deg, var(--menthe), #EEF7F1); }
.activites > *:not(.fond):not(.deco) { position: relative; z-index: 1; }
.activites .fond-feuilles { color: var(--feuille); opacity: .07; }
.trois { display: grid; gap: 14px; counter-reset: trois; }
.trois-item { position: relative; padding: 20px 18px 20px 82px; border-radius: 20px; background: rgba(255, 255, 255, .72); }
.trois-ico { position: absolute !important; left: 16px; top: 18px; width: 50px; height: 50px; padding: 9px; border-radius: 50%; background: var(--nuit); color: var(--ocre-clair); }
.trois-item h3 { font-size: 24px; color: var(--nuit); }
.trois-item p { margin-top: 6px; color: var(--gris); font-size: 16px; }
.activites .actions { margin-top: 22px; }
.commodites { padding: 64px var(--marge) 60px; overflow: clip; display: grid; gap: 26px; background: var(--grain), radial-gradient(70% 80% at 0% 100%, rgba(211, 154, 14, .16), transparent 70%), var(--sable); }
.commodites > *:not(.fond):not(.deco) { position: relative; z-index: 1; }
.commodites .fond-toits { color: #A87806; opacity: .06; }
.commodites h2 { font-size: clamp(29px, 7.6vw, 44px); line-height: 1.1; color: var(--nuit); }
.commodites-texte > p:not(.surtitre) { margin-top: 14px; color: var(--gris); }
.commodites-photos { display: grid; gap: 18px; justify-items: center; }
.commodites-photos .tirage { width: min(100%, 340px); }

@media (min-width: 640px) {
  .trois { grid-template-columns: repeat(3, 1fr); }
  .trois-item { padding: 86px 20px 22px; }
  .commodites-photos { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .matin { grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: center; padding-top: 100px; padding-bottom: 96px; }
  .table .table-photo { --toit: 70px; }
  .villa-chiffres { padding-top: 44px; padding-bottom: 50px; }
  .villa-avis { grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: center; padding-top: 100px; padding-bottom: 96px; }
  .activites, .commodites { padding-top: 100px; padding-bottom: 96px; }
  .commodites { grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .matin-soleil { animation: none; } }

/* En-tête du téléphone : le téléphone en pastille ronde, à côté du menu */
.tel-ico { width: 22px; height: 22px; fill: currentColor; flex: none; }
@media (max-width: 639px) {
  .entete { gap: 8px; }
  .btn-entete-tel { width: 48px; min-height: 48px; height: 48px; padding: 0; border-radius: 50%; }
  .btn-entete-tel .long { display: none !important; }
  .btn-menu { width: 48px; height: 48px; }
  .marque { gap: 8px; }
  .logo { width: 34px; height: 34px; }
  .marque-nom { font-size: 16px; }
  .apercu { font-size: 11px; padding: 4px 8px; }
}
@media (min-width: 640px) { .btn-entete-tel { gap: 8px; } .btn-entete-tel .long { display: inline !important; } }
@media (max-width: 959px) { .fiche-visuel { order: -1; } }
.page-heros-visuel { position: relative; }
.choix .tete-section { margin-bottom: 28px; }
.tarifs-liste em.tarif-texte { font-size: 21px; }
.services .tete-section, .activites .tete-section, .tarifs .tete-section { margin-bottom: 28px; }

/* — Icônes des petites cases (20 octobre au soir) : une par élément, même trait que les équipements, couleur d'accent — */
.ic { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--ic, #A87806); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.visite-chalet, .visite-villa, .fiche-chalet, .fiche-villa, .fiche-piscine, .villa-chiffres, .page-heros, .reserver, .table, .conditions, .contact, .pied, .prix { --ic: var(--ocre-clair); }
.puces li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 9px; }
.puces .ic { width: 24px; height: 24px; }
.visite-prix { display: flex; align-items: center; gap: 10px; }
.accueil-points li { grid-template-columns: 30px 82px 1fr; align-items: center; }
.accueil-points .ic { width: 30px; height: 30px; }
.raison-num .ic { width: 26px; height: 26px; }
.fiche-faits .ic, .reperes .ic { width: 28px; height: 28px; margin-bottom: 6px; }
.fiche-equip li { display: flex; align-items: flex-start; gap: 12px; padding-left: 0; }
.fiche-equip li::before { content: none; }
.fiche-equip .ic { margin-top: -1px; }
.prix > .ic { width: 30px; height: 30px; }
.tarifs-liste li { grid-template-columns: 32px 1fr auto; }
.tarifs-liste .ic { grid-row: 1 / span 2; grid-column: 1; align-self: center; width: 30px; height: 30px; }
.tarifs-liste b, .tarifs-liste span { grid-column: 2; }
.tarifs-liste em { grid-column: 3; }
.tarifs-note, .matin-note { display: flex; align-items: flex-start; gap: 10px; }
.service .ic { width: 32px; height: 32px; margin-bottom: 4px; }
.faq summary { justify-content: flex-start; }
.faq summary::after { margin-left: auto; }
.faq summary .ic { width: 26px; height: 26px; }
.table-prix > .ic { width: 30px; height: 30px; align-self: center; }
.distances li { display: flex; align-items: center; gap: 10px; }
.acces-titre, .pied-titre { display: flex; align-items: center; gap: 8px; }
.acces-titre .ic, .pied-titre .ic { width: 24px; height: 24px; }

/* — Décors tracés au défilement : ils se dessinent une fois à l'arrivée, puis bougent doucement avec le défilement — */
.trace { position: absolute !important; z-index: 0 !important; pointer-events: none; width: 104px; height: 52px; fill: none; stroke: currentColor; stroke-width: 4.4; stroke-linecap: round; stroke-linejoin: round; color: var(--ocre); opacity: .9; }
.trace .rouge { stroke: var(--hibiscus); }
.trace .fin { stroke-width: 2; opacity: .55; }
.trace [data-m] { transform-box: fill-box; will-change: transform; }
:is(section, article):has(> .trace) { position: relative; }
.visite-chalet .trace, .visite-villa .trace, .fiche-chalet .trace, .fiche-villa .trace, .fiche-piscine .trace, .villa-chiffres .trace, .reserver .trace, .table .trace, .conditions .trace, .contact .trace, .alentours .trace { color: var(--ocre-clair); }
.table .trace .rouge, .conditions .trace .rouge, .contact .trace .rouge { stroke: #F08A72; }
.direct .trace, .appel .trace { color: var(--nuit); }
.t-hd { top: 8px; right: 8px; } .t-hg { top: 8px; left: 8px; }
.t-bd { bottom: 2px; right: 8px; } .t-bg { bottom: 2px; left: 8px; }
html.js .trace path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.7s cubic-bezier(.45, .05, .2, 1) calc(var(--i, 0) * .11s); }
html.js .trace.vu path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { html.js .trace path { stroke-dashoffset: 0; transition: none; } }
@media (min-width: 960px) {
  .trace { width: 168px; height: 84px; stroke-width: 2.9; }
  .trace .fin { stroke-width: 1.4; }
  .t-hd { top: 12px; right: 18px; } .t-hg { top: 12px; left: 18px; }
  .t-bd { bottom: 2px; right: 18px; } .t-bg { bottom: 2px; left: 18px; }
}
@media (min-width: 1500px) { .trace { width: 220px; height: 110px; stroke-width: 2.3; } .trace .fin { stroke-width: 1.1; } }
.raison-num { --ic: var(--ocre-clair); }
@media (min-width: 960px) { .appel .trace { width: 128px; height: 64px; stroke-width: 3.6; } }

/* 23 octobre : le bouton menu dit « Menu » et se repère, pilule hibiscus pleine (l'ocre reste au téléphone et à « Réserver ») */
.btn-menu { display: inline-flex; align-items: center; gap: 8px; width: auto; height: auto; min-height: 46px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: var(--hibiscus); color: #fff; font: 700 16px/1 var(--texte); white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); }
.btn-menu .burger { width: 18px; gap: 4px; }
.btn-menu:hover { background: #B23B27; }
@media (max-width: 639px) { .btn-menu { width: auto; height: auto; min-height: 46px; } }
@media (max-width: 400px) {
  .entete { gap: 6px; }
  .btn-entete-tel { width: 44px; min-height: 44px; height: 44px; }
  .btn-menu { min-height: 44px; padding: 0 13px 0 11px; gap: 7px; font-size: 15px; }
  .apercu { font-size: 10px; padding: 3px 6px; letter-spacing: .04em; }
  .logo { width: 30px; height: 30px; }
  .marque { gap: 6px; }
  .marque-nom { font-size: 15px; }
}
@media (min-width: 960px) { .btn-menu { display: none; } }