@font-face { font-family: "Gelasio"; src: url("polices/gelasio.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Gelasio"; src: url("polices/gelasio-italique.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Mukta"; src: url("polices/mukta-400.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Mukta"; src: url("polices/mukta-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  --creme: #FBF5EA;
  --sable: #F1E4CF;
  --peche: #F2BE98;
  --nuit: #12304A;
  --nuit-f: #0B1E30;
  --lagon: #19A2BE;
  --lagon-c: #7FD3E3;
  --corail: #E96A3F;
  --corail-f: #C9532C;
  --soleil: #F2A65A;
  --bois: #7A4E33;
  --vert: #24513F;
  --encre: #1B2632;
  --encre-d: #4A5562;
  --titre: "Gelasio", Georgia, serif;
  --texte: "Mukta", system-ui, sans-serif;
  /* la frise de la varangue : une flèche et sa perle, en bois */
  --varangue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' width='24' height='20'%3E%3Cpath d='M0 0H24V4H20L12 13L4 4H0Z'/%3E%3Ccircle cx='12' cy='16.5' r='3'/%3E%3C/svg%3E");
  /* l'onde de la piscine, entre deux sections */
  --onde: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 26' width='160' height='26' preserveAspectRatio='none'%3E%3Cpath d='M0 0H160V10Q120 30 80 12T0 10Z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--nuit-f); color: var(--encre); font: 400 1.125rem/1.55 var(--texte); overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.14; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }
p { margin: 0 0 1em; }
.ico { width: 1.25em; height: 1.25em; flex: none; }
.contenu { position: relative; z-index: 1; width: min(1180px, 100% - 40px); margin-inline: auto; }
.surtitre { font: 600 0.8125rem/1.3 var(--texte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--corail-f); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.surtitre::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
blockquote { margin: 0; }
cite { font-style: normal; }
section { position: relative; overflow: hidden; }

/* — boutons — */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 600 1.0625rem/1.1 var(--texte); text-decoration: none; border: 2px solid transparent; white-space: nowrap; transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-corail { background: var(--corail); color: #fff; box-shadow: 0 10px 24px -10px rgba(233, 106, 63, 0.75); }
.btn-corail:hover { background: var(--corail-f); }
.btn-clair { border-color: currentColor; color: inherit; background: transparent; }
.btn-nuit { background: var(--nuit); color: var(--creme); }
.btn-blanc { background: #fff; color: var(--nuit); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* — frises : la varangue (bois, flèches et perles) et l'onde de la piscine — */
.varangue { display: block; height: 20px; background: var(--bois); -webkit-mask: var(--varangue) repeat-x 0 0 / 24px 20px; mask: var(--varangue) repeat-x 0 0 / 24px 20px; pointer-events: none; }
.onde { position: absolute; top: -1px; left: 0; right: 0; z-index: 2; height: 26px; -webkit-mask: var(--onde) repeat-x 0 0 / 160px 26px; mask: var(--onde) repeat-x 0 0 / 160px 26px; pointer-events: none; }
.onde-peche { background: var(--peche); }
.onde-sable { background: var(--sable); }
.onde-lagon { background: #CBE7E8; }
.onde-nuit { background: var(--nuit-f); }
.onde-vert { background: #1B3F31; }
.onde-corail { background: #D95A31; }
.onde-creme { background: var(--sable); }

/* — en-tête — */
.entete { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px max(20px, env(safe-area-inset-left)); background: rgba(251, 240, 228, 0.97); color: var(--nuit); }
.entete .varangue { position: absolute; left: 0; right: 0; top: 100%; height: 14px; -webkit-mask-size: 17px 14px; mask-size: 17px 14px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.logo-toit { width: 40px; height: 28px; color: currentColor; }
.logo-nom { font: 700 1.3rem/1 var(--titre); white-space: nowrap; }
.badge { font: 600 0.6875rem/1 var(--texte); letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 9px; border: 1.5px solid var(--corail-f); color: var(--corail-f); border-radius: 999px; }
.entete-tel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--corail); color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
.entete-tel .court { display: none; }
@media (max-width: 520px) {
  .entete { gap: 8px; padding-inline: 14px; }
  .entete-tel .num { display: none; }
  .entete-tel .court { display: inline; }
  .logo { gap: 7px; }
  .logo-nom { font-size: 1.15rem; }
  .logo-toit { width: 32px; height: 24px; }
  .badge { padding: 5px 7px; letter-spacing: 0.08em; font-size: 0.625rem; }
  .entete-tel { padding: 0 14px; gap: 6px; }
}
@media (max-width: 380px) {
  .logo-nom { font-size: 1.05rem; }
  .logo-toit { width: 28px; height: 21px; }
  .entete-tel { padding: 0 12px; }
}

/* — fenêtres : les photos dans une fenêtre cintrée, bord blanc — */
.fenetre { position: relative; margin: 0; padding: 8px; background: #fff; border-radius: 48% 48% 10px 10px / 26% 26% 10px 10px; box-shadow: 0 24px 48px -26px rgba(60, 25, 10, 0.55); }
.fenetre-photo { overflow: hidden; border-radius: 47% 47% 4px 4px / 25% 25% 4px 4px; }
.fenetre-photo img { width: 100%; height: 100%; object-fit: cover; }

/* — haut de page : le coucher de soleil — */
.heros { background: linear-gradient(180deg, #FBF0E4 0%, #F8DCC2 55%, var(--peche) 100%); color: var(--nuit); padding: 30px 0 56px; }
.soleil svg { width: 100%; height: auto; display: block; }
.heros .soleil { position: absolute; z-index: 0; width: min(150vw, 980px); left: 50%; top: 40px; transform: translateX(-50%); color: rgba(233, 106, 63, 0.18); pointer-events: none; }
.heros-grille { position: relative; z-index: 1; width: min(1180px, 100% - 40px); margin-inline: auto; display: grid; gap: 22px; }
.heros-visuel { position: relative; }
.fenetre-heros .fenetre-photo { aspect-ratio: 4 / 3; }
.fenetre-heros .fenetre-photo img { object-position: 40% 60%; }
.note-pastille { position: absolute; left: 20px; bottom: 20px; z-index: 3; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(251, 245, 234, 0.96); color: var(--encre); font-size: 0.9375rem; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.6); }
.note-pastille b { font-weight: 700; }
.etoiles { color: var(--soleil); letter-spacing: 1px; }
.vignette { position: absolute; right: -4px; top: -14px; width: 30%; max-width: 180px; margin: 0; padding: 6px 6px 0; background: #fff; border-radius: 4px; transform: rotate(5deg); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.6); z-index: 4; }
.vignette img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.vignette figcaption { font: 600 0.8125rem/1 var(--texte); color: var(--encre); text-align: center; padding: 7px 0 8px; }
.heros .surtitre { margin-bottom: 10px; }
.heros h1 { font-size: clamp(1.85rem, 1.35rem + 2.6vw, 3.3rem); }
.heros-sous { margin: 12px 0 20px; color: var(--encre-d); max-width: 34em; }
.heros .actions .btn { flex: 1 1 120px; padding: 0 16px; }
.heros .btn-clair { color: var(--nuit); }
.vagues-bas { position: absolute; left: 0; right: 0; bottom: 18px; height: 40px; color: rgba(255, 255, 255, 0.55); z-index: 0; }
.vagues-bas svg { width: 100%; height: 100%; display: block; }
@media (max-height: 760px) and (max-width: 899px) { .fenetre-heros .fenetre-photo { aspect-ratio: 16 / 10; } }
@media (max-height: 690px) and (max-width: 899px) {
  .heros { padding-top: 26px; }
  .fenetre-heros .fenetre-photo { aspect-ratio: 2 / 1; }
  .vignette { width: 24%; }
  .heros h1 { font-size: 1.75rem; }
  .heros-sous { margin: 10px 0 16px; }
}
@media (min-width: 900px) {
  .heros { padding: 70px 0 110px; }
  .heros-grille { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 56px; }
  .heros-visuel { order: 2; }
  .heros .actions .btn { flex: 0 0 auto; padding: 0 24px; }
  .heros .soleil { left: 72%; top: 10px; width: 760px; }
  .vignette { right: -30px; top: auto; bottom: -34px; }
}

/* — une relance de réservation, à chaque moment où l'on peut se décider — */
.relance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 44px; padding: 22px 24px; border-radius: 18px; background: var(--nuit); color: var(--creme); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.6); }
.relance p { margin: 0; font: 700 1.25rem/1.3 var(--titre); max-width: 32em; }
.relance .btn { flex: 0 0 auto; }
.relance-claire { background: #fff; color: var(--nuit); }
@media (max-width: 560px) { .relance .btn, .relance .actions, .relance .actions .btn { width: 100%; } .relance .actions { flex-direction: column; } }

/* — la maison — */
.maison { background: radial-gradient(80% 60% at 100% 0%, #F6EAD6 0%, var(--sable) 60%); padding: 80px 0 76px; }
.maison::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(25, 162, 190, 0.07) 22px 24px); pointer-events: none; }
.maison-grille { display: grid; gap: 34px; }
.maison-texte h2 { margin-bottom: 18px; }
.maison-texte p { color: var(--encre-d); max-width: 36em; }
.tampon { position: relative; justify-self: start; max-width: 340px; padding: 22px 24px 20px; background: var(--corail); color: #fff; border-radius: 14px 14px 14px 2px; transform: rotate(-2deg); box-shadow: 0 16px 30px -18px rgba(150, 50, 20, 0.7); }
.tampon p { font: italic 600 1.375rem/1.25 var(--titre); margin-bottom: 10px; }
.tampon cite { font-size: 0.9375rem; opacity: 0.92; }
.atouts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; border-top: 1px solid rgba(27, 38, 50, 0.15); }
.atouts li { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-bottom: 1px solid rgba(27, 38, 50, 0.15); }
.atouts .ico { width: 30px; height: 30px; color: var(--lagon); }
.atouts b { display: block; font-weight: 600; color: var(--encre); line-height: 1.25; }
.atouts span { color: var(--encre-d); font-size: 1rem; line-height: 1.35; }
@media (min-width: 900px) {
  .maison { padding: 120px 0 110px; }
  .maison-grille { grid-template-columns: 1.2fr 0.8fr; column-gap: 70px; align-items: center; }
  .tampon { justify-self: center; }
  .atouts { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); column-gap: 28px; }
  .atouts li { flex-direction: row; gap: 14px; }
}

/* — la visite : fond d'eau claire, bambou — */
.visite { background: linear-gradient(180deg, #E6F4F2 0%, #CBE7E8 100%); padding: 80px 0 80px; }
.bambou { position: absolute; z-index: 0; width: 90px; color: rgba(36, 81, 63, 0.35); pointer-events: none; }
.bambou svg { width: 100%; height: auto; display: block; }
.bambou-g { left: -24px; top: 60px; }
.bambou-d { right: -20px; top: 40px; transform: scaleX(-1); color: rgba(155, 227, 139, 0.25); }
.visite-tete { max-width: 760px; margin-bottom: 30px; }
.mosaique { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.m { margin: 0; }
.m .fenetre-photo { border-radius: 14px; aspect-ratio: 4 / 5; border: 6px solid #fff; box-shadow: 0 18px 34px -24px rgba(18, 48, 74, 0.6); }
.m1, .m6 { grid-column: 1 / -1; }
.m1 .fenetre-photo, .m6 .fenetre-photo { aspect-ratio: 16 / 10; border-radius: 48% 48% 14px 14px / 30% 30% 14px 14px; }
.m figcaption { display: flex; gap: 8px; align-items: baseline; padding: 10px 2px 0; font: italic 500 1rem/1.3 var(--titre); color: var(--nuit); }
.m figcaption span { font: 700 0.8125rem/1 var(--texte); color: var(--corail-f); letter-spacing: 0.08em; font-style: normal; }
@media (min-width: 900px) {
  .visite { padding: 120px 0; }
  .mosaique { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .m1 { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
  .m1 .fenetre-photo { aspect-ratio: auto; flex: 1; }
  .m6 { grid-column: span 2; }
  .m .fenetre-photo { aspect-ratio: 4 / 3; }
  .bambou { width: 130px; }
}

/* — une journée : le fond suit l'heure — */
.journee { background: linear-gradient(180deg, #FCEFD2 0%, #D9F0F2 35%, #F7C8A4 65%, var(--nuit) 100%); color: var(--encre); padding: 80px 0 70px; transition: background-color 0.9s ease, color 0.9s ease; }
.js.anim .journee { background: var(--fond-j, #FCEFD2); color: var(--texte-j, #1B2632); }
.journee-tete { max-width: 780px; margin-bottom: 36px; }
.journee .surtitre { color: inherit; opacity: 0.85; }
.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 52px; }
.moment { display: grid; gap: 18px; }
.moment-photo { overflow: hidden; border-radius: 48% 48% 14px 14px / 30% 30% 14px 14px; aspect-ratio: 4 / 3; border: 6px solid rgba(255, 255, 255, 0.9); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.6); }
.moment-photo img { width: 100%; height: 100%; object-fit: cover; }
.heure { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px 14px 4px 10px; border-radius: 999px; border: 1.5px solid currentColor; font: 600 0.875rem/1.2 var(--texte); letter-spacing: 0.1em; text-transform: uppercase; }
.heure-ico { width: 20px; height: 20px; }
.moment h3 { margin-bottom: 14px; }
.avis-court { font: italic 500 1.0625rem/1.45 var(--titre); opacity: 0.9; margin: 0; padding-left: 14px; border-left: 3px solid var(--corail); }
.avis-court cite { display: block; font: 600 0.875rem/1.4 var(--texte); margin-top: 4px; }
.journee .relance { background: var(--corail); color: #fff; }
.journee .relance .btn-corail { background: var(--nuit); box-shadow: none; }
.journee .relance .btn-clair { color: #fff; }
@media (min-width: 900px) {
  .journee { padding: 130px 0 110px; }
  .moments { gap: 90px; }
  .moment { grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
  .moment:nth-child(even) .moment-photo { order: 2; }
}

/* — la table, sous la guirlande — */
.table { background: radial-gradient(70% 60% at 50% 0%, #1D4664 0%, var(--nuit) 55%, var(--nuit-f) 100%); color: var(--creme); padding: 110px 0 90px; }
.guirlande { position: absolute; top: 0; left: 0; right: 0; height: 70px; z-index: 1; }
.guirlande svg { width: 100%; height: 100%; display: block; }
.table .surtitre { color: var(--soleil); }
.table-grille { display: grid; gap: 40px; }
.table-texte h2 { margin-bottom: 18px; }
.table-texte p { color: rgba(251, 245, 234, 0.82); max-width: 34em; }
.table-texte .btn { margin-top: 8px; white-space: normal; text-align: center; line-height: 1.2; }
.gouts-titre { font: italic 600 1.25rem/1.2 var(--titre); color: var(--lagon-c); margin-bottom: 18px; }
.gouts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gouts li { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 9px; border-radius: 10px; max-width: 100%; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.7); transition: transform 0.25s ease; }
.gouts li:hover { transform: rotate(0deg) translateY(-3px) !important; }
.gouts q { font: 700 1.0625rem/1.25 var(--titre); quotes: "« " " »"; }
.gouts span { font-size: 0.8125rem; opacity: 0.85; }
.g1 { background: var(--creme); color: var(--encre); transform: rotate(-2deg); }
.g2 { background: var(--lagon); color: #fff; transform: rotate(1.5deg); }
.g3 { background: var(--soleil); color: var(--encre); transform: rotate(-1deg); }
.g4 { background: transparent; color: var(--creme); border: 1.5px dashed rgba(251, 245, 234, 0.5); transform: rotate(1deg); box-shadow: none; }
.g5 { background: var(--corail); color: #fff; transform: rotate(-1.5deg); }
.g6 { background: var(--sable); color: var(--encre); transform: rotate(2deg); }
@media (prefers-reduced-motion: no-preference) {
  .guirlande.allumee .ampoule .halo { animation: scintille 2.6s ease-in-out infinite; animation-delay: var(--d); }
}
@keyframes scintille { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.45; } }
@media (min-width: 900px) {
  .table { padding: 150px 0 120px; }
  .table-grille { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .gouts li { padding: 16px 20px 14px; }
  .gouts q { font-size: 1.25rem; }
}

/* — les alentours : le vert du jardin — */
.alentours { background: linear-gradient(160deg, #2E6650 0%, var(--vert) 60%, #1B3F31 100%); color: var(--creme); padding: 84px 0 80px; }
.alentours .surtitre { color: var(--soleil); }
.alentours-tete { max-width: 760px; margin-bottom: 34px; }
.alentours-tete h2 { margin-bottom: 16px; }
.alentours-tete p { color: rgba(251, 245, 234, 0.85); }
.lieux { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lieux li { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: rgba(251, 245, 234, 0.08); border: 1px solid rgba(251, 245, 234, 0.16); color: rgba(251, 245, 234, 0.85); font-size: 1rem; line-height: 1.35; }
.lieux b { display: block; font: 700 1.1875rem/1.25 var(--titre); color: var(--creme); }
.lieu-ico { grid-row: span 2; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--soleil); color: var(--vert); }
.lieu-ico svg { width: 34px; height: 34px; }
.alentours .relance-claire { background: var(--creme); }
@media (min-width: 900px) {
  .alentours { padding: 130px 0 110px; }
  .lieux { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .lieux li { grid-template-columns: 1fr; row-gap: 12px; padding: 24px; align-items: start; }
  .lieu-ico { grid-row: auto; }
}

/* — réserver en direct : le corail du soleil — */
.direct { background: linear-gradient(170deg, #F08154 0%, var(--corail) 50%, #D95A31 100%); color: #fff; padding: 84px 0 80px; }
.direct .surtitre { color: var(--nuit); }
.direct-grille { display: grid; gap: 34px; }
.raisons { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: r; }
.raisons li { counter-increment: r; position: relative; padding: 16px 18px 16px 62px; border-radius: 16px; background: rgba(255, 255, 255, 0.14); font-size: 1rem; line-height: 1.4; }
.raisons li::before { content: counter(r); position: absolute; left: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--corail-f); font: 700 1.0625rem/1 var(--titre); }
.raisons b { display: block; font: 700 1.1875rem/1.25 var(--titre); margin-bottom: 2px; }
.direct-actions { display: grid; gap: 12px; }
.btn-grand { min-height: 58px; font-size: 1.125rem; }
@media (max-width: 420px) { .btn-grand { white-space: normal; text-align: center; line-height: 1.2; padding: 8px 18px; } }
@media (min-width: 900px) {
  .direct { padding: 130px 0 120px; }
  .direct-grille { grid-template-columns: 1fr 1fr; column-gap: 70px; align-items: start; }
  .direct-actions { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; }
}

/* — les avis — */
.avis { background: linear-gradient(180deg, var(--creme) 0%, var(--sable) 100%); padding: 84px 0 70px; }
.soleil-avis { position: absolute; z-index: 0; right: -120px; top: 60px; width: 420px; color: rgba(242, 166, 90, 0.2); pointer-events: none; }
.avis-haut { display: grid; gap: 26px; margin-bottom: 40px; }
.note-grande p { margin: 0; }
.note-chiffre { font: 700 clamp(5.5rem, 4rem + 8vw, 9rem)/0.9 var(--titre); color: var(--nuit); letter-spacing: -0.03em; }
.note-etoiles { color: var(--corail); font-size: 1.6rem; letter-spacing: 3px; margin-top: 6px !important; }
.note-legende { color: var(--encre-d); font-weight: 600; }
.citation-geante p { font: italic 600 clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem)/1.2 var(--titre); color: var(--nuit); margin-bottom: 12px; text-wrap: pretty; }
.citation-geante cite, .bande-avis cite { font-weight: 600; font-size: 0.9375rem; color: var(--corail-f); }
.citation-photo { position: relative; margin: 0 0 34px; }
.citation-photo .fenetre-photo { aspect-ratio: 4 / 3; }
.citation-photo .fenetre-photo img { object-position: 50% 60%; }
.citation-photo blockquote { position: relative; z-index: 3; margin: -60px 14px 0 auto; max-width: 420px; padding: 20px 22px; background: var(--nuit); color: var(--creme); border-radius: 12px 12px 2px 12px; box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.7); }
.citation-photo blockquote p { font: 600 1.25rem/1.3 var(--titre); margin-bottom: 10px; }
.citation-photo blockquote cite { color: var(--soleil); font-weight: 600; }
.bande-avis { position: relative; z-index: 1; display: flex; gap: 18px; overflow-x: auto; padding: 8px max(20px, calc((100% - 1180px) / 2)) 30px; scroll-snap-type: x proximity; scroll-padding-inline: max(20px, calc((100% - 1180px) / 2)); touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(18, 48, 74, 0.35) transparent; }
.bande-avis blockquote { flex: 0 0 min(80vw, 360px); scroll-snap-align: start; padding: 22px 22px 18px; border-radius: 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.bande-avis p { margin: 0; font-size: 1.0625rem; line-height: 1.45; }
.a1 { background: #fff; }
.a2 { background: var(--nuit); color: var(--creme); }
.a2 cite { color: var(--soleil) !important; }
.a3 { background: #fff; border-top: 5px solid var(--lagon); }
.avis .relance { margin-top: 20px; }
@media (min-width: 900px) {
  .avis { padding: 130px 0 90px; }
  .avis-haut { grid-template-columns: 0.55fr 1.45fr; gap: 60px; align-items: center; margin-bottom: 70px; }
  .citation-photo { width: min(920px, 100%); margin: 0 auto 60px; }
  .citation-photo .fenetre-photo { aspect-ratio: 16 / 9; }
  .citation-photo blockquote { position: absolute; right: -30px; bottom: -30px; margin: 0; }
  .soleil-avis { width: 640px; right: -160px; }
}

/* — nous trouver : la nuit étoilée — */
.venir { background: radial-gradient(90% 80% at 10% 100%, #1D4664 0%, var(--nuit) 50%, var(--nuit-f) 100%); color: var(--creme); padding: 90px 0 76px; }
.etoiles-fond { position: absolute; left: 0; right: 0; top: 0; height: 300px; z-index: 0; pointer-events: none; -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); }
.venir .surtitre { color: var(--soleil); }
.venir-grille { display: grid; gap: 40px; }
.venir-texte h2 { margin-bottom: 18px; }
.venir-texte p { color: rgba(251, 245, 234, 0.82); max-width: 34em; margin-bottom: 24px; }
.contact { position: relative; background: var(--creme); color: var(--encre); border-radius: 6px; padding: 42px 22px 24px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.8); }
.contact .varangue-carte { position: absolute; top: 0; left: 0; right: 0; border-radius: 6px 6px 0 0; }
.contact-titre { font: 700 1.375rem/1.25 var(--titre); margin-bottom: 14px; }
.contact-num { display: block; font: 700 clamp(1.9rem, 1.4rem + 2vw, 2.6rem)/1.1 var(--titre); color: var(--nuit); text-decoration: none; margin-bottom: 20px; white-space: nowrap; }
.contact .actions .btn { flex: 1 1 160px; }
.contact-adresse { margin: 18px 0 0; font-size: 1rem; color: var(--encre-d); }
@media (min-width: 900px) {
  .venir { padding: 130px 0 120px; }
  .venir-grille { grid-template-columns: 1fr 0.9fr; gap: 80px; align-items: center; }
  .contact { padding: 52px 40px 34px; }
}

/* — pied — */
.pied { background: var(--nuit-f); color: rgba(251, 245, 234, 0.75); padding: 44px 0 40px; font-size: 1rem; }
.pied-grille { display: grid; gap: 18px; }
.pied .logo { color: var(--creme); }
.pied p { margin: 0; }
.pied a { color: var(--creme); }
.mention { font-size: 0.875rem; opacity: 0.8; }
@media (min-width: 900px) { .pied-grille { grid-template-columns: auto 1fr 1.3fr; gap: 50px; align-items: center; } }

/* — barre d'appel collante — */
.barre-appel { display: none; }
@media (max-width: 760px) {
  :root { --barre-h: 67px; }
  .barre-appel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); background: var(--nuit-f); border-top: 1px solid rgba(251, 245, 234, 0.12); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.5); }
  .barre-appel a { display: flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 50px; padding: 0 8px; border-radius: 999px; font-weight: 600; text-decoration: none; background: var(--corail); color: #fff; border: 2px solid var(--corail); white-space: nowrap; }
  .barre-appel a:not(:first-child) { background: transparent; color: var(--creme); border-color: rgba(251, 245, 234, 0.7); }
  body:has(.barre-appel) { padding-bottom: calc(var(--barre-h) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) {
  .barre-appel a { font-size: 0.9375rem; gap: 0.4em; }
  .heros .surtitre { letter-spacing: 0.1em; font-size: 0.75rem; }
  .surtitre::before { width: 18px; }
}

/* — apparitions (cachées seulement si le script tourne et que le mouvement est permis) — */
@media (prefers-reduced-motion: no-preference) {
  .js.anim [data-rev] { opacity: 0; transform: translateY(26px); }
}
:focus-visible { outline: 3px solid var(--lagon); outline-offset: 3px; }
.nw { white-space: nowrap; }
.etoiles-fond::before, .etoiles-fond::after { content: ""; position: absolute; inset: 0; opacity: 0.55; background-image: radial-gradient(1.4px 1.4px at 20px 30px, #FBF5EA 99%, transparent), radial-gradient(1px 1px at 120px 80px, #FBF5EA 99%, transparent), radial-gradient(1.8px 1.8px at 190px 20px, #F7E39A 99%, transparent), radial-gradient(1px 1px at 70px 150px, #FBF5EA 99%, transparent); background-size: 230px 190px; }
.etoiles-fond::after { background-image: radial-gradient(1.2px 1.2px at 60px 60px, #FBF5EA 99%, transparent), radial-gradient(1.6px 1.6px at 160px 130px, #FBF5EA 99%, transparent), radial-gradient(1px 1px at 210px 170px, #7FD3E3 99%, transparent); background-size: 270px 210px; opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) { .etoiles-fond.allumee::after { animation: scintille 3.4s ease-in-out infinite; } .etoiles-fond.allumee::before { animation: scintille 4.2s ease-in-out infinite reverse; } }
@media (max-width: 899px) { .bambou { display: none; } }
.moment:nth-child(4) .moment-photo img { object-position: 80% 70%; }
@media (min-width: 900px) {
  .m6 { grid-column: auto; }
  .m6 .fenetre-photo { aspect-ratio: 4 / 3; border-radius: 14px; }
}

/* ===== 20 octobre : des fonds avec de la matière et des décors animés propres à la maison ===== */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.18 0 0 0 0 0.1 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* haut de page : grain, halo du soleil, une palme qui se balance, des paille-en-queue qui passent */
.heros { background: var(--grain), radial-gradient(55% 45% at 78% 30%, rgba(255, 219, 178, 0.85), transparent 72%), linear-gradient(180deg, #FBF0E4 0%, #F8DCC2 55%, var(--peche) 100%); }
.palme { position: absolute; z-index: 0; pointer-events: none; }
.palme svg { width: 100%; height: auto; display: block; transform-origin: 5% 95%; }
.palme-heros { right: -120px; bottom: 10px; width: 300px; color: rgba(122, 78, 51, 0.2); transform: scaleX(-1); }
.oiseaux { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 0; pointer-events: none; color: #fff; }
.oiseau { position: absolute; left: 0; width: 34px; filter: drop-shadow(0 2px 2px rgba(122, 78, 51, 0.25)); }
.oiseau svg { width: 100%; height: auto; display: block; overflow: visible; }
.oiseau .ailes { transform-box: fill-box; transform-origin: 50% 80%; }
.o1 { top: 16%; transform: translateX(12vw); }
.o2 { top: 34%; width: 26px; transform: translateX(70vw); }
.o3 { top: 6%; width: 20px; transform: translateX(44vw); }
@media (max-width: 899px) { .oiseaux { top: 40%; height: 24%; } }
@media (min-width: 900px) {
  .palme-heros { right: auto; left: -110px; bottom: -30px; width: 420px; transform: none; }
  .oiseau { width: 44px; } .o2 { width: 32px; } .o3 { width: 26px; }
}

/* la maison : un lin clair, le jardin voilé dans le coin, une branche de frangipanier */
.maison { background: var(--grain), repeating-linear-gradient(0deg, rgba(122, 78, 51, 0.04) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(122, 78, 51, 0.035) 0 1px, transparent 1px 5px), radial-gradient(80% 60% at 100% 0%, #F6EAD6 0%, var(--sable) 60%); }
.maison::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("img/jardin-flou.webp") 100% 0 / cover no-repeat; opacity: 0.32; -webkit-mask: radial-gradient(75% 55% at 100% 0%, #000 0%, transparent 72%); mask: radial-gradient(75% 55% at 100% 0%, #000 0%, transparent 72%); pointer-events: none; }
.frangipanier { position: absolute; z-index: 0; right: -70px; top: 30px; width: 200px; color: rgba(201, 83, 44, 0.3); pointer-events: none; }
.frangipanier svg { width: 100%; height: auto; display: block; transform-origin: 10% 100%; }
@media (min-width: 900px) { .frangipanier { right: 2%; top: 50px; width: 330px; } }

/* la visite : l'eau de la piscine et ses reflets qui bougent */
.visite { background: var(--grain), radial-gradient(70% 40% at 20% 0%, rgba(255, 255, 255, 0.6), transparent 70%), linear-gradient(180deg, #DDF1F0 0%, #BFE3E6 55%, #A9D9DF 100%); }
.caustiques { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent); mask: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent); }
.caustiques span { position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% + 600px); background: url("caustiques-a.svg") 0 0 / 600px 300px repeat; opacity: 0.5; }
.caustiques .cb { background-image: url("caustiques-b.svg"); background-size: 600px 300px; opacity: 0.35; left: -600px; }

/* une journée : grain et lumière par-dessus la couleur de l'heure, nuages qui passent, un dessin par moment */
.journee::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--grain), radial-gradient(60% 30% at 92% 4%, rgba(255, 255, 255, 0.45), transparent 70%); pointer-events: none; }
.nuages { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: rgba(255, 255, 255, 0.75); }
.nuage { position: absolute; left: 0; width: 130px; }
.nuage svg { width: 100%; height: auto; display: block; }
.n1 { top: 2%; transform: translateX(55vw); }
.n2 { top: 19%; width: 90px; transform: translateX(8vw); opacity: 0.8; }
.n3 { top: 40%; width: 160px; transform: translateX(70vw); opacity: 0.6; }
.moment { position: relative; }
.moment > .moment-photo, .moment > .moment-texte { position: relative; z-index: 1; }
.moment-deco { position: absolute; z-index: 0; right: -60px; bottom: -50px; width: 190px; opacity: 0.22; pointer-events: none; }
.moment-deco svg { width: 100%; height: auto; display: block; overflow: visible; }
.md-retour { width: 240px; }
.md-matin .tourne, .md-journee .flotte, .md-soir .scintille { transform-box: fill-box; transform-origin: 50% 50%; }
@media (min-width: 900px) {
  .moment-deco { width: 260px; right: -90px; bottom: auto; top: -70px; }
  .moment:nth-child(even) .moment-deco { right: auto; left: -90px; }
  .md-retour { width: 320px; }
}

/* la table : la terrasse au crépuscule en fond voilé, des lucioles, le plancher de bois */
.table-fond { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(18, 48, 74, 0.5) 0%, rgba(18, 48, 74, 0.78) 45%, rgba(11, 30, 48, 0.94) 100%), url("img/crepuscule-flou.webp") 50% 40% / cover no-repeat; pointer-events: none; }
.terrasse { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 0; pointer-events: none; background: var(--grain-clair), repeating-linear-gradient(180deg, rgba(122, 78, 51, 0.42) 0 30px, rgba(0, 0, 0, 0.35) 30px 32px); -webkit-mask: linear-gradient(180deg, transparent, #000 75%); mask: linear-gradient(180deg, transparent, #000 75%); opacity: 0.55; }
.lucioles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lucioles i { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #FFF2B8 0 22%, rgba(247, 227, 154, 0.45) 40%, transparent 70%); opacity: 0.6; }

/* les alentours : les courbes de niveau des Hauts et une palme du jardin */
.alentours { background: var(--grain-clair), radial-gradient(60% 40% at 85% 10%, rgba(127, 211, 160, 0.18), transparent 70%), linear-gradient(160deg, #2E6650 0%, var(--vert) 60%, #1B3F31 100%); }
.topo { position: absolute; z-index: 0; left: 50%; top: 0; width: max(1200px, 100%); transform: translateX(-50%); color: rgba(242, 166, 90, 0.2); pointer-events: none; -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent); }
.topo svg { width: 100%; height: auto; display: block; }
.palme-alentours { left: -110px; bottom: -70px; width: 320px; color: rgba(155, 227, 139, 0.13); }
@media (min-width: 900px) { .palme-alentours { width: 480px; left: -140px; bottom: -110px; } }

/* réserver en direct : la vue voilée de corail, un soleil dont les rayons tournent lentement */
.direct { background: var(--grain-clair), linear-gradient(170deg, rgba(240, 129, 84, 0.93) 0%, rgba(233, 106, 63, 0.9) 50%, rgba(217, 90, 49, 0.96) 100%), url("img/vue-flou.webp") center / cover no-repeat; }
.rayons { position: absolute; z-index: 0; width: 900px; height: 900px; right: -450px; top: -450px; pointer-events: none; }
.rayons span { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 160, 0.55) 0 12%, transparent 13%), repeating-conic-gradient(rgba(255, 255, 255, 0.13) 0 5deg, transparent 5deg 14deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); }
@media (min-width: 900px) { .rayons { width: 1300px; height: 1300px; right: -560px; top: -600px; } }

/* les avis : papier et ombres de palmes qui bougent dans la lumière */
.avis { background: var(--grain), radial-gradient(70% 50% at 0% 100%, rgba(242, 166, 90, 0.18), transparent 70%), linear-gradient(180deg, var(--creme) 0%, var(--sable) 100%); }
.ombres { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: rgba(36, 81, 63, 0.07); }
.ombre { position: absolute; width: 440px; }
.ombre svg { width: 100%; height: auto; display: block; transform-origin: 5% 95%; }
.om1 { left: -150px; top: -70px; width: 380px; transform: scaleY(-1); }
.om2 { right: -170px; bottom: 26%; width: 380px; transform: scale(-1, -1); }
@media (min-width: 900px) { .ombre { width: 600px; } .om1 { left: -180px; top: -110px; } .om2 { right: -200px; } }

/* nous trouver : le relief des Hauts, les cannes, une étoile filante */
.venir { background: var(--grain-clair), radial-gradient(90% 80% at 10% 100%, #1D4664 0%, var(--nuit) 50%, var(--nuit-f) 100%); padding-bottom: 150px; }
.relief { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: 0; pointer-events: none; }
.relief svg { width: 100%; height: 100%; display: block; }
.cannes { position: absolute; z-index: 0; left: -14px; bottom: -6px; width: 170px; color: #2E6650; pointer-events: none; }
.cannes svg { width: 100%; height: auto; display: block; overflow: visible; }
.filante { position: absolute; top: 18%; left: 72%; width: 110px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(251, 245, 234, 0.95), transparent); opacity: 0; }
.filante.f2 { top: 8%; left: 30%; width: 80px; }
@media (min-width: 900px) { .venir { padding-bottom: 200px; } .relief { height: 230px; } .cannes { width: 260px; left: 2%; } }

/* les boucles : seulement à l'écran, transform et opacity, coupées si l'on réduit les animations */
@media (prefers-reduced-motion: no-preference) {
  .palme-heros.allumee svg, .palme-alentours.allumee svg { animation: balance 7s ease-in-out infinite; }
  .oiseaux.allumee .oiseau { animation: vol 26s linear infinite; }
  .oiseaux.allumee .o2 { animation-duration: 34s; animation-delay: -14s; }
  .oiseaux.allumee .o3 { animation-duration: 40s; animation-delay: -27s; }
  .oiseaux.allumee .oiseau svg { animation: plane 4.5s ease-in-out infinite; }
  .oiseaux.allumee .ailes { animation: battre 1.3s ease-in-out infinite; }
  .frangipanier.allumee svg { animation: balance 9s ease-in-out infinite; }
  .caustiques.allumee .ca { animation: reflets 38s linear infinite; }
  .caustiques.allumee .cb { animation: reflets 52s linear infinite reverse; }
  .nuages.allumee .nuage { animation: derive 80s linear infinite; }
  .nuages.allumee .n2 { animation-duration: 60s; animation-delay: -35s; }
  .nuages.allumee .n3 { animation-duration: 95s; animation-delay: -20s; }
  .md-matin.allumee .tourne { animation: tourne 40s linear infinite; }
  .md-journee.allumee .flotte { animation: plane 5s ease-in-out infinite; }
  .md-retour.allumee .glisse { animation: glisse 5s linear infinite; }
  .md-soir.allumee .scintille { animation: scintille-fort 3s ease-in-out infinite; }
  .lucioles.allumee i { animation: luciole var(--t) ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
  .rayons.allumee span { animation: tourne 110s linear infinite; }
  .ombres.allumee .ombre svg { animation: ombre 10s ease-in-out infinite; }
  .ombres.allumee .om2 svg { animation-duration: 13s; animation-delay: -4s; }
  .cannes.allumee .tige { animation: canne 5.5s ease-in-out infinite; animation-delay: var(--d); }
  .etoiles-fond.allumee .filante { animation: filante 11s linear infinite; }
  .etoiles-fond.allumee .f2 { animation-duration: 17s; animation-delay: -6s; }
}
@keyframes balance { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes vol { from { transform: translate3d(-80px, 0, 0); } to { transform: translate3d(calc(100vw + 80px), -50px, 0); } }
@keyframes plane { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes battre { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.35); } }
@keyframes reflets { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-600px, 0, 0); } }
@keyframes derive { from { transform: translate3d(-180px, 0, 0); } to { transform: translate3d(calc(100vw + 20px), 0, 0); } }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes glisse { from { transform: translateX(0); } to { transform: translateX(-100px); } }
@keyframes scintille-fort { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes luciole { 0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.15; } 50% { transform: translate3d(16px, -26px, 0); opacity: 1; } }
@keyframes ombre { 0%, 100% { transform: rotate(-3deg) translateX(0); } 50% { transform: rotate(2deg) translateX(10px); } }
@keyframes canne { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes filante { 0%, 86% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-20deg); } 88% { opacity: 1; } 96%, 100% { opacity: 0; transform: translate3d(-260px, 95px, 0) rotate(-20deg); } }

/* ===== 20 octobre, le site en plusieurs pages : navigation, menu, cartes « Continuer la visite », pied ===== */
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--nuit); color: var(--creme); text-decoration: none; font-weight: 600; }
.evitement:focus { top: 12px; }
.entete-nav { display: none; }
.entete-menu { display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; border: 2px solid var(--nuit); background: transparent; color: var(--nuit); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.entete-menu:hover { background: var(--nuit); color: var(--creme); }
.entete-menu:active { transform: scale(0.94); }
.entete-menu .ico { width: 22px; height: 22px; }
@media (max-width: 520px) { .entete-menu { width: 44px; height: 44px; } }
@media (max-width: 380px) {
  .entete { gap: 6px; padding-inline: 12px; }
  .logo-nom { font-size: 1rem; }
  .logo-toit { width: 26px; height: 19px; }
  .badge { padding: 4px 6px; font-size: 0.5625rem; letter-spacing: 0.06em; }
  .entete-tel { padding: 0 11px; gap: 5px; }
}
@media (min-width: 1180px) {
  .entete { gap: 18px; padding-inline: 32px; }
  .entete-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .entete-nav a { position: relative; padding: 10px 12px; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; color: var(--nuit); white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; }
  .entete-nav a:hover { background: rgba(233, 106, 63, 0.12); color: var(--corail-f); }
  .entete-nav a[aria-current="page"] { color: var(--corail-f); }
  .entete-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 6px; background: var(--corail); -webkit-mask: var(--onde) repeat-x 0 0 / 24px 6px; mask: var(--onde) repeat-x 0 0 / 24px 6px; }
  .entete-tel { margin-left: 6px; }
  .entete-tel .num { display: none; }
  .entete-tel .court { display: inline; }
  .entete-menu { display: none; }
}
@media (min-width: 1400px) { .entete-tel .num { display: inline; } .entete-tel .court { display: none; } }

/* le menu sur téléphone : un panneau crème, la branche de frangipanier et un paille-en-queue */
.menu { position: fixed; inset: 0; z-index: 60; }
.menu[hidden] { display: none; }
.menu::before { content: ""; position: absolute; inset: 0; background: rgba(11, 30, 48, 0.55); }
.menu-panneau { position: absolute; inset: 0 0 0 auto; width: min(100%, 460px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 22px; padding: 14px 20px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--grain), radial-gradient(80% 50% at 100% 100%, rgba(242, 166, 90, 0.35), transparent 70%), linear-gradient(180deg, #FBF0E4 0%, var(--sable) 100%); color: var(--nuit); }
.menu-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.menu-fermer { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--nuit); background: transparent; color: var(--nuit); cursor: pointer; }
.menu-fermer .ico { width: 22px; height: 22px; }
.menu-liste { list-style: none; margin: 8px 0 0; padding: 0; position: relative; z-index: 1; }
.menu-liste li { border-bottom: 1px solid rgba(18, 48, 74, 0.14); }
.menu-liste a { display: flex; align-items: baseline; gap: 14px; padding: 14px 4px; font: 700 1.6rem/1.15 var(--titre); color: var(--nuit); text-decoration: none; }
.menu-liste a[aria-current="page"] { color: var(--corail-f); font-style: italic; }
.menu-num { font: 600 0.8125rem/1 var(--texte); letter-spacing: 0.12em; color: var(--corail-f); }
.menu-actions { position: relative; z-index: 1; display: grid; gap: 10px; }
.menu-actions .btn-clair { color: var(--nuit); }
.menu-deco { position: absolute; right: -40px; bottom: -10px; width: 230px; color: rgba(201, 83, 44, 0.22); pointer-events: none; }
.menu-deco svg { width: 100%; height: auto; display: block; }
.menu-oiseau { position: absolute; top: 90px; right: 28px; left: auto; width: 34px; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) .menu-panneau { animation: menu-entre 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .menu:not([hidden]) .menu-liste li { animation: menu-ligne 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .menu:not([hidden]) .menu-liste li:nth-child(2) { animation-delay: 0.04s; } .menu:not([hidden]) .menu-liste li:nth-child(3) { animation-delay: 0.08s; }
  .menu:not([hidden]) .menu-liste li:nth-child(4) { animation-delay: 0.12s; } .menu:not([hidden]) .menu-liste li:nth-child(5) { animation-delay: 0.16s; }
  .menu:not([hidden]) .menu-liste li:nth-child(6) { animation-delay: 0.2s; }
  .menu:not([hidden]) .menu-oiseau svg { animation: plane 4.5s ease-in-out infinite; }
  .menu:not([hidden]) .menu-oiseau .ailes { animation: battre 1.3s ease-in-out infinite; }
}
@keyframes menu-entre { from { transform: translateX(40px); opacity: 0; } }
@keyframes menu-ligne { from { transform: translateX(24px); opacity: 0; } }
body.menu-ouvert { overflow: hidden; }

/* « Continuer la visite » : une carte par page, chacune dans une couleur de la maison */
.voisines { position: relative; overflow: hidden; padding: 70px 0 64px; background: var(--grain), radial-gradient(60% 70% at 100% 0%, rgba(242, 166, 90, 0.3), transparent 70%), linear-gradient(180deg, #F6E3CC 0%, var(--sable) 100%); }
.onde-voisines { background: var(--nuit-f); }
.voisines .surtitre { margin-bottom: 18px; }
.voisines-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.voisine { display: grid; grid-template-columns: 54px 1fr 22px; align-items: center; gap: 14px; min-height: 76px; padding: 14px 16px; border-radius: 16px; text-decoration: none; box-shadow: 0 16px 30px -24px rgba(18, 48, 74, 0.8); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.voisine:hover { transform: translateY(-4px) rotate(-0.6deg); box-shadow: 0 24px 40px -24px rgba(18, 48, 74, 0.9); }
.voisine:active { transform: scale(0.98); }
.voisine-dessin { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.voisine-dessin svg { width: 30px; height: 30px; }
.voisine-dessin .logo-toit { width: 34px; height: 24px; }
.voisine-texte b { display: block; font: 700 1.2rem/1.2 var(--titre); }
.voisine-texte span { display: block; font-size: 0.9375rem; line-height: 1.35; opacity: 0.88; }
.voisine > .ico { width: 22px; height: 22px; transition: transform 0.25s ease; }
.voisine:hover > .ico { transform: translateX(4px); }
.v1 { background: #fff; color: var(--nuit); } .v1 .voisine-dessin { background: var(--sable); color: var(--corail); }
.v2 { background: var(--nuit); color: var(--creme); } .v2 .voisine-dessin { color: var(--soleil); }
.v3 { background: var(--lagon); color: #fff; }
.v4 { background: var(--vert); color: var(--creme); } .v4 .voisine-dessin { color: var(--soleil); }
.v5 { background: var(--corail); color: #fff; }
@media (min-width: 900px) {
  .voisines { padding: 100px 0 90px; }
  .voisines-liste { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .voisine { grid-template-columns: 1fr; align-content: start; min-height: 220px; padding: 22px 20px; gap: 14px; }
  .voisine > .ico { justify-self: end; align-self: end; }
}

/* le pied */
.pied { padding: 56px 0 30px; }
.pied-grille { display: grid; gap: 28px; }
.pied-marque p { margin-top: 12px; max-width: 26em; }
.pied .pied-titre { font: 600 0.8125rem/1.3 var(--texte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--soleil); margin-bottom: 10px; }
.pied-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.pied-nav a { display: inline-block; padding: 4px 0; text-decoration: none; }
.pied-nav a:hover, .pied-nav a[aria-current="page"] { color: var(--soleil); }
.pied-contact p + p { margin-top: 8px; }
.pied-bas { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(251, 245, 234, 0.14); }
@media (min-width: 900px) { .pied-grille { grid-template-columns: 1.3fr 1fr 1fr; gap: 60px; align-items: start; } }

/* ===== Page « Avis et contact » ===== */
.tete-sous { margin: 12px 0 22px; max-width: 34em; color: var(--encre-d); }
.tete-avis { background: var(--grain), radial-gradient(60% 50% at 85% 20%, rgba(255, 226, 190, 0.8), transparent 70%), linear-gradient(170deg, #F8D3B4 0%, #F4A780 60%, #EE8A60 100%); color: var(--nuit); padding: 34px 0 70px; }
.tete-avis .rayons { right: -480px; top: -420px; }
.tete-avis .surtitre { color: var(--nuit); }
.tete-avis .tete-sous { color: #3A2A22; }
.tete-avis .btn-clair { color: var(--nuit); }
.tete-avis h1 { font-size: clamp(1.85rem, 1.35rem + 2.4vw, 3.2rem); }
.tete-avis-grille { display: grid; gap: 30px; }
.medaille { position: relative; justify-self: center; width: min(78vw, 330px); aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--grain), radial-gradient(circle at 35% 30%, #FFFDF8, var(--creme) 60%, #F3E6D2); box-shadow: 0 30px 60px -30px rgba(120, 40, 10, 0.75), inset 0 0 0 10px rgba(233, 106, 63, 0.12); }
.medaille p { margin: 0; }
.medaille-cercle { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); color: var(--corail); }
.medaille-note { font: italic 700 clamp(5rem, 3.6rem + 6vw, 7.5rem)/0.9 var(--titre); color: var(--nuit); letter-spacing: -0.03em; }
.medaille-etoiles { display: flex; justify-content: center; gap: 4px; margin-top: 8px !important; color: var(--corail); font-size: 1.6rem; line-height: 1; }
.medaille-etoiles span { display: inline-block; }
.medaille-legende { margin-top: 8px !important; font-weight: 600; color: var(--encre-d); }
.medaille-cinq { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%) rotate(-3deg); width: max-content; max-width: 86vw; padding: 9px 16px; border-radius: 999px; background: var(--nuit); color: var(--creme); font-weight: 600; font-size: 0.9375rem; line-height: 1.25; white-space: normal; text-align: center; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.6); }
@media (max-height: 760px) and (max-width: 899px) { .medaille { width: min(62vw, 250px); } .medaille-note { font-size: 4.4rem; } }
@media (min-width: 900px) {
  .tete-avis { padding: 80px 0 120px; }
  .tete-avis-grille { grid-template-columns: 1.15fr 0.85fr; gap: 70px; align-items: center; }
  .medaille { width: 400px; }
  .medaille-note { font-size: 8.5rem; }
}
@media (prefers-reduced-motion: no-preference) { .medaille.allumee .medaille-cercle { animation: tourne 60s linear infinite; } }

.sujets { background: var(--grain), repeating-linear-gradient(0deg, rgba(122, 78, 51, 0.04) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(122, 78, 51, 0.035) 0 1px, transparent 1px 5px), radial-gradient(80% 60% at 0% 0%, #F6EAD6 0%, var(--sable) 60%); padding: 84px 0 80px; }
.onde-corail-c { background: #EE8A60; }
.sujets .frangipanier { right: -80px; top: auto; bottom: 20px; }
.sujets-tete { max-width: 760px; margin-bottom: 26px; }
.onglets { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 18px; scrollbar-width: none; overscroll-behavior-x: contain; }
.onglets::-webkit-scrollbar { display: none; }
.onglets button { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--nuit); background: transparent; color: var(--nuit); font: 600 1rem/1 var(--texte); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.onglets button:hover { transform: translateY(-2px); }
.onglets button[aria-selected="true"] { background: var(--nuit); color: var(--creme); }
.onglets .ico { width: 20px; height: 20px; }
.panneaux { position: relative; }
.panneau { display: grid; gap: 16px; padding: 26px 20px; border-radius: 22px; }
.js .panneau[hidden] { display: none; }
.p-accueil { background: var(--corail); color: #fff; }
.p-table { background: var(--nuit); color: var(--creme); }
.p-chambres { background: #fff; color: var(--nuit); }
.p-piscine { background: var(--lagon); color: #fff; }
.pan-grande p { font: italic 700 clamp(1.7rem, 1.2rem + 2.4vw, 3rem)/1.15 var(--titre); margin-bottom: 10px; text-wrap: pretty; }
.pan-grande cite, .pan-petite cite { font-weight: 600; font-size: 0.9375rem; opacity: 0.9; }
.pan-petite { padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.14); }
.p-chambres .pan-petite { background: var(--sable); }
.pan-petite p { margin-bottom: 8px; font-size: 1.0625rem; line-height: 1.45; }
.pan-petite:nth-child(2) { transform: rotate(-1deg); }
.pan-petite:nth-child(3) { transform: rotate(0.8deg); }
@media (min-width: 900px) {
  .sujets { padding: 130px 0 120px; }
  .panneau { grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; padding: 50px 50px; column-gap: 50px; align-items: center; }
  .pan-grande { grid-row: span 2; }
}

.fil-avis { background: var(--grain), radial-gradient(70% 40% at 80% 0%, rgba(255, 255, 255, 0.6), transparent 70%), linear-gradient(180deg, #DDF1F0 0%, #BFE3E6 55%, #A9D9DF 100%); padding: 84px 0 76px; }
.fil-avis h2 { max-width: 760px; margin-bottom: 26px; }
.fil-avis .relance { margin-top: 20px; }
@media (min-width: 900px) { .fil-avis { padding: 130px 0 110px; } }

.joindre { background: var(--grain-clair), radial-gradient(70% 45% at 70% 8%, rgba(242, 166, 90, 0.55), transparent 70%), linear-gradient(180deg, #E88A62 0%, #B4605A 22%, #3B3F5E 50%, var(--nuit) 72%, var(--nuit-f) 100%); color: var(--creme); padding: 100px 0 90px; }
.onde-lagon-f { background: #A9D9DF; }
.soleil-joindre { position: absolute; z-index: 0; left: 50%; top: 40px; width: min(140vw, 900px); transform: translateX(-35%); color: rgba(255, 214, 160, 0.28); pointer-events: none; }
.vagues-joindre { position: absolute; left: 0; right: 0; top: 250px; height: 46px; color: rgba(255, 255, 255, 0.3); pointer-events: none; }
.vagues-joindre svg { width: 100%; height: 100%; display: block; }
.joindre .surtitre { color: var(--soleil); }
.joindre-grille { display: grid; gap: 40px; }
.joindre-texte h2 { margin-bottom: 18px; }
.joindre-texte p { color: rgba(251, 245, 234, 0.85); max-width: 34em; }
.contact-iti { width: 100%; margin-top: 12px; color: var(--nuit); }
@media (min-width: 900px) {
  .joindre { padding: 150px 0 130px; }
  .joindre-grille { grid-template-columns: 1fr 0.9fr; gap: 80px; align-items: center; }
  .soleil-joindre { width: 760px; transform: translateX(-70%); top: 30px; }
  .vagues-joindre { top: 230px; }
}

/* ===== Pages intérieures : un haut de page par page, avec sa photo dans une fenêtre cintrée ===== */
.tete { position: relative; overflow: hidden; padding: 30px 0 64px; }
.tete-grille { position: relative; z-index: 1; display: grid; gap: 24px; }
.tete h1 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 3.1rem); }
.tete .fenetre-photo { aspect-ratio: 4 / 3; }
.tete-visuel { position: relative; }
.tete .vignette { right: -4px; top: -14px; }
@media (max-height: 760px) and (max-width: 899px) { .tete .fenetre-photo { aspect-ratio: 16 / 10; } }
@media (max-height: 690px) and (max-width: 899px) { .tete .fenetre-photo { aspect-ratio: 2 / 1; } .tete h1 { font-size: 1.7rem; } .tete .vignette { width: 24%; } }
@media (min-width: 900px) {
  .tete { padding: 70px 0 110px; }
  .tete-grille { grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
  .tete-visuel { order: 2; }
  .tete .vignette { right: -30px; top: auto; bottom: -34px; }
}

/* Les chambres : le lin et la paille de leurs murs */
.tete-chambres { background: var(--grain), radial-gradient(50% 40% at 85% 25%, rgba(214, 170, 110, 0.35), transparent 70%), repeating-linear-gradient(0deg, rgba(122, 78, 51, 0.045) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(122, 78, 51, 0.04) 0 1px, transparent 1px 5px), linear-gradient(180deg, #FBF3E6 0%, #F1E2CA 100%); color: var(--nuit); }
.tete-chambres .tete-sous { color: var(--encre-d); }
.tete-chambres .btn-clair { color: var(--nuit); }
.soleils-paille { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: rgba(176, 122, 62, 0.3); }
.soleils-paille span { position: absolute; display: block; }
.soleils-paille svg { width: 100%; height: auto; display: block; }
.sp1 { width: 180px; left: -60px; top: 40%; }
.sp2 { width: 110px; right: 6%; top: 8px; }
.sp3 { width: 140px; left: 44%; bottom: -50px; }
@media (max-width: 899px) { .sp2 { right: -30px; top: auto; bottom: 34%; width: 90px; } .sp3 { display: none; } }

.sommaire { position: relative; z-index: 2; margin-top: 26px; }
.sommaire p { margin: 0 0 10px; font-weight: 600; color: var(--encre-d); }
.sommaire ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sommaire a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--nuit); text-decoration: none; font-weight: 600; box-shadow: 0 8px 18px -12px rgba(18, 48, 74, 0.6); transition: transform 0.2s ease, background-color 0.2s ease; }
.sommaire a:hover { transform: translateY(-2px); background: var(--corail); color: #fff; }

/* Une chambre */
.chambre { position: relative; overflow: hidden; padding: 76px 0 70px; scroll-margin-top: 70px; }
.chambre-grille { position: relative; z-index: 1; display: grid; gap: 26px; }
.chambre-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chambre-photos .principale { grid-column: 1 / -1; }
.chambre-photos .principale .fenetre-photo { aspect-ratio: 4 / 3; }
.chambre-photos figure { margin: 0; }
.chambre-photos .petite { padding: 6px; background: #fff; border-radius: 12px; box-shadow: 0 14px 26px -18px rgba(18, 48, 74, 0.7); }
.chambre-photos .petite img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.chambre-photos .petite:nth-of-type(2) { transform: rotate(-1.5deg); }
.chambre-photos .petite:nth-of-type(3) { transform: rotate(1.5deg); }
.chambre-num { display: inline-block; margin-bottom: 8px; font: 600 0.8125rem/1 var(--texte); letter-spacing: 0.16em; text-transform: uppercase; color: var(--corail-f); }
.chambre h2 { font-style: italic; margin-bottom: 14px; }
.chambre-texte > p { color: var(--encre-d); max-width: 36em; }
.faits { list-style: none; margin: 18px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.faits li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.7); font-size: 0.9375rem; line-height: 1.3; }
.faits .ico { width: 24px; height: 24px; color: var(--lagon); }
.faits b { display: block; font-weight: 600; }
.prix-nuit { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 18px; }
.prix-nuit b { font: 700 2rem/1 var(--titre); color: var(--nuit); }
.prix-nuit span { color: var(--encre-d); font-size: 0.9375rem; }
.chambre .actions .btn { flex: 1 1 180px; }
.chambre .btn-clair { color: var(--nuit); }
.ch-lin { background: var(--grain), radial-gradient(70% 50% at 100% 0%, #F6EAD6, var(--sable) 70%); }
.ch-eau { background: var(--grain), radial-gradient(60% 40% at 0% 0%, rgba(255, 255, 255, 0.6), transparent 70%), linear-gradient(180deg, #E3F3F1 0%, #C6E6E8 100%); }
.ch-peche { background: var(--grain), radial-gradient(60% 50% at 100% 100%, rgba(242, 166, 90, 0.35), transparent 70%), linear-gradient(180deg, #FCEADB 0%, #F7D7BE 100%); }
.ch-feuille { background: var(--grain), radial-gradient(60% 50% at 0% 100%, rgba(127, 211, 160, 0.3), transparent 70%), linear-gradient(180deg, #EEF5EA 0%, #DCEBD6 100%); }
.ch-rose { background: var(--grain), radial-gradient(60% 50% at 100% 0%, rgba(232, 120, 154, 0.2), transparent 70%), linear-gradient(180deg, #FBEDEA 0%, #F4DCD6 100%); }
.chambre .deco-ch { position: absolute; z-index: 0; pointer-events: none; }
.chambre .deco-ch svg { width: 100%; height: auto; display: block; }
@media (min-width: 900px) {
  .chambre { padding: 120px 0 110px; }
  .chambre-grille { grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: center; }
  .chambre:nth-of-type(even) .chambre-photos { order: 2; }
  .chambre-photos { grid-template-columns: 1fr 1fr; gap: 18px; }
  .faits { grid-template-columns: 1fr 1fr; }
}

/* Dans toutes les chambres */
.partout { background: var(--grain-clair), radial-gradient(70% 50% at 100% 0%, rgba(25, 162, 190, 0.25), transparent 70%), linear-gradient(170deg, #1D4664 0%, var(--nuit) 55%, var(--nuit-f) 100%); color: var(--creme); padding: 90px 0 80px; }
.partout .surtitre { color: var(--soleil); }
.partout h2 { max-width: 780px; margin-bottom: 30px; }
.equipements { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.equipements li { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 16px; background: rgba(251, 245, 234, 0.07); border: 1px solid rgba(251, 245, 234, 0.14); font-size: 1rem; line-height: 1.3; }
.equipements .ico { width: 28px; height: 28px; color: var(--soleil); }
.equipements b { font-weight: 600; }
.partout .relance { background: var(--creme); color: var(--nuit); }
@media (min-width: 900px) { .partout { padding: 130px 0 120px; } .equipements { grid-template-columns: repeat(4, 1fr); gap: 18px; } .equipements li { padding: 22px; } }
@media (max-width: 520px) {
  .entete { gap: 6px; padding-inline: 12px; }
  .logo-toit { width: 28px; height: 20px; }
  .logo { gap: 6px; }
  .logo-nom { font-size: 1.05rem; }
  .entete-tel { padding: 0 12px; }
  .entete-menu { width: 42px; height: 42px; }
}
@media (max-width: 380px) {
  .entete { gap: 5px; padding-inline: 10px; }
  .logo-nom { font-size: 0.98rem; }
  .logo-toit { width: 24px; height: 17px; }
  .entete-tel { padding: 0 10px; gap: 4px; }
  .entete-menu { width: 40px; height: 40px; }
}
@media (max-width: 899px) {
  .tete-avis { padding-top: 26px; }
  .tete-avis-grille { gap: 44px; }
  .medaille { order: -1; width: min(66vw, 260px); }
  .medaille-note { font-size: 4.6rem; }
}
@media (max-height: 760px) and (max-width: 899px) { .medaille { width: min(54vw, 210px); } .medaille-note { font-size: 3.8rem; } .medaille-etoiles { font-size: 1.2rem; } }
/* Haut de la page Avis (23 oct) : une photo du lieu dans la fenêtre, la médaille de la note posée sur son coin */
.avis-visuel { position: relative; }
.avis-visuel .fenetre-photo { aspect-ratio: 4 / 3; }
.avis-visuel .medaille { position: absolute; justify-self: auto; order: 0; }
@media (min-width: 900px) {
  .avis-visuel { margin: 0 0 40px 40px; }
  .avis-visuel .medaille { left: -70px; bottom: -56px; width: 210px; }
  .avis-visuel .medaille-note { font-size: 4.4rem; }
  .avis-visuel .medaille-etoiles { font-size: 1.15rem; margin-top: 4px !important; }
  .avis-visuel .medaille-legende { font-size: .85rem; margin-top: 4px !important; }
  .avis-visuel .medaille-cinq { left: 50%; bottom: -34px; font-size: .85rem; padding: 7px 14px; }
}
@media (max-width: 899px) {
  .avis-visuel { order: -1; margin-bottom: 64px; }
  .avis-visuel .medaille { right: 4px; bottom: -48px; width: 126px; }
  .avis-visuel .medaille-note { font-size: 2.9rem; }
  .avis-visuel .medaille-etoiles { font-size: .85rem; gap: 2px; margin-top: 3px !important; }
  .avis-visuel .medaille-legende { font-size: .72rem; margin-top: 3px !important; }
  .avis-visuel .medaille-cinq { left: auto; right: 118px; bottom: 18px; transform: rotate(-3deg); max-width: calc(100vw - 180px); font-size: .8rem; padding: 7px 12px; text-wrap: balance; }
}
@media (max-height: 760px) and (max-width: 899px) { .avis-visuel .fenetre-photo { aspect-ratio: 16 / 10; } .avis-visuel .medaille { width: 112px; } .avis-visuel .medaille-note { font-size: 2.5rem; } }

/* ===== Page « Le séjour » ===== */
.tete-sejour { background: var(--grain), radial-gradient(45% 40% at 88% 18%, rgba(255, 236, 170, 0.9), transparent 70%), linear-gradient(180deg, #FDF4DC 0%, #FBE6BE 60%, #F7D6A6 100%); color: var(--nuit); }
.tete-sejour .btn-clair { color: var(--nuit); }
.rayons-matin { position: absolute; z-index: 0; right: -70px; top: -60px; width: 300px; color: rgba(233, 140, 40, 0.3); pointer-events: none; }
.rayons-matin svg { width: 100%; height: auto; display: block; overflow: visible; }
.rayons-matin .tourne { transform-box: fill-box; transform-origin: 50% 50%; }
.tete-sejour .nuages { color: rgba(255, 255, 255, 0.85); }
@media (min-width: 900px) { .rayons-matin { width: 480px; right: -120px; top: -120px; } }

.cadre-tirage { margin: 0; padding: 8px 8px 0; background: #fff; border-radius: 4px; box-shadow: 0 18px 34px -18px rgba(60, 25, 10, 0.6); overflow: hidden; }
.cadre-tirage img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cadre-tirage figcaption { font: italic 600 0.9375rem/1 var(--titre); color: var(--nuit); text-align: center; padding: 10px 0 11px; }
.cadre-tirage:not(:has(figcaption)) { padding-bottom: 8px; }
.cadre-entre { overflow: hidden; }

.matin { background: var(--grain), repeating-linear-gradient(90deg, rgba(233, 106, 63, 0.05) 0 22px, transparent 22px 44px), radial-gradient(70% 50% at 0% 0%, #FFF6E2, #FBEBD0 70%); padding: 84px 0 80px; }
.onde-matin { background: #F7D6A6; }
.tasse-deco { position: absolute; z-index: 0; right: -10px; top: 40px; width: 130px; color: rgba(201, 83, 44, 0.3); pointer-events: none; }
.tasse-deco svg { width: 100%; height: auto; display: block; overflow: visible; }
.tasse-deco .vapeur path { transform-box: fill-box; transform-origin: 50% 100%; }
.matin-grille { display: grid; gap: 34px; }
.matin-texte h2 { margin-bottom: 16px; }
.matin-texte > p { color: var(--encre-d); max-width: 34em; }
.plateau-liste { list-style: none; margin: 20px 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.plateau-liste li { padding: 10px 14px; border-radius: 10px; font: 700 1.0625rem/1.25 var(--titre); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.5); }
.matin .avis-court { color: var(--encre); }
.matin-photos { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; align-items: start; }
.matin-photos .t1 { transform: rotate(-2deg); }
.matin-photos .t2 { transform: rotate(2.5deg); margin-top: 40px; }
@media (min-width: 900px) {
  .matin { padding: 130px 0 120px; }
  .matin-grille { grid-template-columns: 1.1fr 1fr; gap: 70px; align-items: center; }
  .tasse-deco { width: 200px; right: 4%; top: 50px; }
}

.table-hotes { background: var(--grain-clair), radial-gradient(60% 45% at 50% 0%, rgba(255, 196, 120, 0.35), transparent 70%), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 64px), linear-gradient(180deg, #5E3A26 0%, #4A2D1E 55%, #2E1C14 100%); color: var(--creme); padding: 110px 0 90px; }
.onde-bois { background: #FBEBD0; }
.table-hotes .surtitre { color: var(--soleil); }
.th-grille { display: grid; gap: 34px; }
.th-texte h2 { margin-bottom: 16px; }
.th-texte > p { color: rgba(251, 245, 234, 0.85); max-width: 34em; }
.th-texte .btn { white-space: normal; text-align: center; line-height: 1.2; }
.prix-diner { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 22px; padding: 12px 18px; border-radius: 14px; background: rgba(251, 245, 234, 0.1); border: 1px dashed rgba(251, 245, 234, 0.4); }
.prix-diner b { font: 700 1.9rem/1 var(--titre); color: var(--soleil); }
.prix-diner span { color: rgba(251, 245, 234, 0.85); font-size: 0.9375rem; }
.th-photos { position: relative; display: grid; grid-template-columns: 1fr 0.8fr; gap: 14px; align-items: end; }
.th-plat .fenetre-photo { aspect-ratio: 4 / 5; }
.th-legumes { transform: rotate(3deg); margin-bottom: -10px; }
.th-legumes img { aspect-ratio: 1; }
.gouts-hotes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gouts-hotes li { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-left: 3px solid var(--soleil); background: rgba(0, 0, 0, 0.18); border-radius: 0 10px 10px 0; }
.gouts-hotes q { font: italic 600 1.125rem/1.3 var(--titre); quotes: "« " " »"; }
.gouts-hotes span { font-size: 0.875rem; color: var(--soleil); font-weight: 600; }
@media (min-width: 900px) {
  .table-hotes { padding: 150px 0 120px; }
  .th-grille { grid-template-columns: 1fr 1fr; column-gap: 80px; row-gap: 50px; align-items: center; }
  .gouts-hotes { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

.bassin { background: var(--grain), radial-gradient(70% 40% at 80% 0%, rgba(255, 255, 255, 0.5), transparent 70%), linear-gradient(180deg, #CDEBEC 0%, #9FD5DD 60%, #7CC5D2 100%); padding: 90px 0 80px; }
.palme-bassin { right: -110px; top: -20px; width: 300px; color: rgba(18, 48, 74, 0.12); transform: scaleX(-1); }
.bassin-tete { max-width: 760px; margin-bottom: 28px; }
.bassin-grille { display: grid; gap: 22px; }
.bassin-grande .fenetre-photo { aspect-ratio: 4 / 3; }
.bassin-texte p { color: var(--encre); }
.bassin-spa { justify-self: end; width: 74%; transform: rotate(2deg); }
.bassin-spa img { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .bassin { padding: 130px 0 120px; }
  .palme-bassin { width: 440px; right: -100px; }
  .bassin-grille { grid-template-columns: 1.6fr 1fr; gap: 30px 60px; align-items: start; }
  .bassin-grande { grid-row: span 2; }
  .bassin-grande .fenetre-photo { aspect-ratio: 16 / 10; }
  .bassin-spa { width: 82%; justify-self: start; }
}

.massages { background: var(--grain), radial-gradient(60% 50% at 100% 100%, rgba(242, 166, 90, 0.35), transparent 70%), linear-gradient(180deg, #FBEFE2 0%, #F5DCC6 100%); padding: 90px 0 80px; }
.massages .ombres { color: rgba(122, 78, 51, 0.09); }
.massages-grille { display: grid; gap: 28px; }
.massage-photo .fenetre-photo { aspect-ratio: 3 / 2; }
.massages-texte h2 { margin-bottom: 16px; }
.massages-texte > p { color: var(--encre-d); max-width: 34em; }
@media (min-width: 900px) { .massages { padding: 130px 0 120px; } .massages-grille { grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: center; } }

.plus { background: var(--grain), radial-gradient(70% 60% at 0% 0%, #F6EAD6 0%, var(--sable) 60%); padding: 84px 0 80px; }
.plus h2 { max-width: 780px; margin-bottom: 28px; }
.plus .equipements li { background: #fff; border-color: rgba(18, 48, 74, 0.08); color: var(--encre); box-shadow: 0 14px 28px -22px rgba(18, 48, 74, 0.6); }
.plus .equipements .ico { color: var(--corail); }
.plus .equipements span { color: var(--encre-d); font-size: 0.9375rem; }
@media (min-width: 900px) { .plus { padding: 130px 0 110px; } }
@media (prefers-reduced-motion: no-preference) {
  .rayons-matin.allumee .tourne { animation: tourne 40s linear infinite; }
  .tasse-deco.allumee .vapeur path { animation: vapeur 3.2s ease-in-out infinite; }
  .tasse-deco.allumee .vapeur path:nth-child(2) { animation-delay: -1s; }
  .tasse-deco.allumee .vapeur path:nth-child(3) { animation-delay: -2s; }
  .palme-bassin.allumee svg { animation: balance 7s ease-in-out infinite; }
  .soleils-paille.allumee span svg { animation: tourne 90s linear infinite; }
  .soleils-paille.allumee .sp2 svg { animation-direction: reverse; animation-duration: 70s; }
}
@keyframes vapeur { 0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.35; } 50% { transform: translateY(-8px) scaleY(1.15); opacity: 1; } }

/* Accueil : l'aperçu des chambres, les tons poudrés de leurs murs et les soleils de paille */
.apercu-chambres { background: var(--grain), radial-gradient(60% 50% at 100% 0%, rgba(232, 120, 154, 0.18), transparent 70%), radial-gradient(60% 60% at 0% 100%, rgba(214, 170, 110, 0.3), transparent 70%), linear-gradient(180deg, #FBF0EA 0%, #F4DCD6 100%); padding: 84px 0 80px; }
.onde-eau-f { background: #A9D9DF; }
.onde-rose { background: #F4DCD6; }
.ac-grille { display: grid; gap: 34px; }
.ac-texte h2 { margin-bottom: 16px; }
.ac-texte > p { color: var(--encre-d); max-width: 34em; margin-bottom: 22px; }
.ac-photos { position: relative; padding-bottom: 40px; }
.ac-1 { width: 82%; }
.ac-1 .fenetre-photo { aspect-ratio: 4 / 5; }
.ac-2 { position: absolute; right: 0; bottom: 0; width: 44%; transform: rotate(4deg); }
.ac-2 img { aspect-ratio: 3 / 4; }
@media (min-width: 900px) {
  .apercu-chambres { padding: 130px 0 120px; }
  .ac-grille { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .ac-photos { order: -1; }
}

/* ===== Page « Infos et réservation » : une clé, un carnet de séjour, le chemin jusqu'à la maison ===== */
.tete-infos { background: var(--grain-clair), radial-gradient(55% 45% at 85% 15%, rgba(25, 162, 190, 0.35), transparent 70%), linear-gradient(170deg, #1D4664 0%, var(--nuit) 60%, var(--nuit-f) 100%); color: var(--creme); }
.tete-infos .surtitre { color: var(--soleil); }
.tete-infos .tete-sous { color: rgba(251, 245, 234, 0.85); }
.tete-infos .etoiles-fond { height: 100%; }
.tete-infos .fenetre { background: var(--creme); }
.horaires-carte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 22px; }
.horaires-carte div { padding: 14px 16px; border-radius: 14px; background: rgba(251, 245, 234, 0.08); border: 1px solid rgba(251, 245, 234, 0.18); }
.horaires-carte span { display: block; font-size: 0.875rem; color: var(--lagon-c); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.horaires-carte b { display: block; font: 700 1.5rem/1.15 var(--titre); color: var(--creme); margin-top: 4px; }

.carnet { background: var(--grain), repeating-linear-gradient(180deg, transparent 0 31px, rgba(25, 162, 190, 0.13) 31px 32px), linear-gradient(180deg, #FBF5EA 0%, #F3E7D3 100%); padding: 84px 0 80px; }
.onde-nuit-c { background: var(--nuit-f); }
.carnet::before { content: ""; position: absolute; top: 0; bottom: 0; left: 26px; width: 2px; background: rgba(233, 106, 63, 0.35); z-index: 0; }
.carnet h2 { max-width: 760px; margin-bottom: 28px; }
.regles { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.regles li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: 0 14px 28px -22px rgba(18, 48, 74, 0.7); }
.regles .ico { width: 30px; height: 30px; color: var(--corail); margin-top: 2px; }
.regles b { display: block; font: 700 1.1875rem/1.25 var(--titre); color: var(--nuit); margin-bottom: 2px; }
.regles span { color: var(--encre-d); font-size: 1rem; line-height: 1.45; }
@media (min-width: 900px) { .carnet { padding: 130px 0 120px; } .carnet::before { left: max(40px, calc((100% - 1180px) / 2 - 40px)); } .regles { grid-template-columns: 1fr 1fr; gap: 18px; } }

.faq { background: var(--grain), radial-gradient(70% 50% at 100% 0%, rgba(242, 166, 90, 0.3), transparent 70%), linear-gradient(180deg, #F9E2CF 0%, #F3CDB0 100%); padding: 84px 0 80px; }
.onde-carnet { background: #F3E7D3; }
.faq-grille { display: grid; gap: 30px; }
.faq h2 { margin-bottom: 14px; }
.faq-liste { display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 12px 24px -20px rgba(120, 40, 10, 0.7); overflow: hidden; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 14px 18px; cursor: pointer; list-style: none; font: 700 1.125rem/1.3 var(--titre); color: var(--nuit); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--corail) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform 0.3s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 18px 18px; color: var(--encre-d); }
.faq .tampon { margin-top: 10px; }
@media (min-width: 900px) { .faq { padding: 130px 0 120px; } .faq-grille { grid-template-columns: 0.8fr 1.2fr; gap: 70px; align-items: start; } }

.acces { background: var(--grain-clair), radial-gradient(90% 80% at 10% 100%, #1D4664 0%, var(--nuit) 50%, var(--nuit-f) 100%); color: var(--creme); padding: 90px 0 150px; }
.onde-faq { background: #F3CDB0; }
.acces .surtitre { color: var(--soleil); }
.acces-grille { position: relative; z-index: 1; display: grid; gap: 34px; }
.acces-texte h2 { margin-bottom: 16px; }
.acces-texte p { color: rgba(251, 245, 234, 0.85); max-width: 34em; }
.trace { position: relative; padding: 14px; border-radius: 22px; background: rgba(251, 245, 234, 0.06); border: 1px solid rgba(251, 245, 234, 0.16); }
.trace svg { width: 100%; height: auto; display: block; }
.trace .route { stroke: var(--soleil); }
.trace .cote { stroke: var(--lagon-c); }
.trace text { font: 600 13px var(--texte); fill: var(--creme); }
.trace .maison-point { fill: var(--corail); }
@media (min-width: 900px) { .acces { padding: 130px 0 210px; } .acces-grille { grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } }

/* Chambres : décors propres à chaque chambre, terrasse, ondes */
.onde-lin-c { background: #F1E2CA; }
.onde-feuille { background: #DCEBD6; }
.onde-lin { background: var(--sable); }
.ch-oiseaux { right: 0; left: 0; top: 30px; height: 220px; color: #fff; }
.ch-oiseaux .oiseau { width: 46px; top: 20px; filter: drop-shadow(0 2px 3px rgba(36, 81, 63, 0.35)); }
.ch-oiseaux .oiseau + .oiseau { width: 30px; top: 110px; }
.ch-margouillat { right: 4%; top: 60px; width: 70px; color: rgba(122, 78, 51, 0.28); transform: rotate(-24deg); }
.ch-margouillat .queue { transform-box: fill-box; transform-origin: 50% 0%; }
.ch-paille { left: -60px; bottom: 40px; width: 240px; color: rgba(176, 122, 62, 0.3); }
.chambre-photos .petite.seule { grid-column: 1 / -1; width: 62%; justify-self: end; }
.chambre-photos .petite.seule img { aspect-ratio: 4 / 3; }
.partout-haut { display: grid; gap: 26px; margin-bottom: 30px; }
.partout-haut h2 { margin-bottom: 0; }
.partout-photo { width: min(100%, 420px); background: var(--creme); }
.partout-photo .fenetre-photo { aspect-ratio: 4 / 3; }
.partout .equipements li { flex-direction: row; align-items: center; }
.partout .etoiles-fond { height: 260px; }
@media (min-width: 900px) {
  .ch-margouillat { width: 100px; right: 6%; top: 80px; }
  .ch-paille { width: 360px; left: -90px; }
  .ch-oiseaux .oiseau { width: 60px; }
  .partout-haut { grid-template-columns: 1.3fr 1fr; gap: 70px; align-items: center; margin-bottom: 50px; }
  .partout-photo { justify-self: end; }
  .chambre-photos .petite.seule { width: 60%; }
}
@media (prefers-reduced-motion: no-preference) {
  .ch-oiseaux.allumee .oiseau { animation: vol 30s linear infinite; }
  .ch-oiseaux.allumee .oiseau + .oiseau { animation-duration: 38s; animation-delay: -18s; }
  .ch-oiseaux.allumee .oiseau svg { animation: plane 4.5s ease-in-out infinite; }
  .ch-oiseaux.allumee .ailes { animation: battre 1.3s ease-in-out infinite; }
  .ch-margouillat.allumee svg { animation: margouillat 9s ease-in-out infinite; }
  .ch-margouillat.allumee .queue { animation: queue 2.4s ease-in-out infinite; }
  .ch-paille.allumee svg { animation: tourne 90s linear infinite; }
}
@keyframes margouillat { 0%, 40%, 100% { transform: translateY(0); } 50%, 90% { transform: translateY(-34px); } }
@keyframes queue { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* ===== Page « Les alentours » : les courbes de niveau, le vert du jardin, la route vers la mer ===== */
.tete-alentours { background: var(--grain), radial-gradient(55% 45% at 80% 20%, rgba(255, 236, 190, 0.8), transparent 70%), linear-gradient(180deg, #EAF4E4 0%, #D3E8CF 60%, #BFDDBB 100%); color: var(--nuit); }
.tete-alentours .topo { color: rgba(36, 81, 63, 0.18); }
.tete-alentours .btn-clair { color: var(--nuit); }
.tete-alentours .oiseau { filter: drop-shadow(0 2px 3px rgba(36, 81, 63, 0.45)); }
.altitude { position: absolute; left: 18px; bottom: 18px; z-index: 3; margin: 0; padding: 8px 16px; border-radius: 999px; background: var(--vert); color: var(--creme); font-size: 0.9375rem; box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.6); }
.altitude b { font: 700 1.125rem/1 var(--titre); color: var(--soleil); margin-right: 6px; }

.chemin { background: var(--grain-clair), radial-gradient(60% 40% at 85% 10%, rgba(127, 211, 160, 0.2), transparent 70%), linear-gradient(160deg, #2E6650 0%, var(--vert) 60%, #1B3F31 100%); color: var(--creme); padding: 90px 0 80px; }
.onde-vert-c { background: #BFDDBB; }
.chemin .surtitre { color: var(--soleil); }
.chemin-tete { max-width: 760px; margin-bottom: 34px; }
.etapes { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 18px; }
.etapes::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 10px; width: 3px; background: repeating-linear-gradient(180deg, var(--soleil) 0 10px, transparent 10px 18px); border-radius: 3px; }
.etape { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 6px 14px; align-items: start; padding: 18px; border-radius: 18px; background: rgba(251, 245, 234, 0.08); border: 1px solid rgba(251, 245, 234, 0.16); }
.etape::before { content: ""; position: absolute; left: -24px; top: 26px; width: 15px; height: 15px; border-radius: 50%; background: var(--corail); box-shadow: 0 0 0 4px rgba(233, 106, 63, 0.3); }
.etape-temps { grid-column: 1 / -1; justify-self: start; padding: 4px 12px; border-radius: 999px; background: var(--soleil); color: var(--vert); font: 700 0.9375rem/1.2 var(--texte); }
.etape-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(251, 245, 234, 0.12); color: var(--soleil); }
.etape-ico svg { width: 34px; height: 34px; }
.etape h3 { font-size: 1.3rem; margin-bottom: 6px; }
.etape p { margin: 0; color: rgba(251, 245, 234, 0.85); font-size: 1rem; line-height: 1.45; }
@media (min-width: 900px) {
  .chemin { padding: 130px 0 120px; }
  .etapes { grid-template-columns: 1fr 1fr; gap: 22px 30px; padding-left: 0; }
  .etapes::before { left: 50%; transform: translateX(-50%); }
  .etape::before { display: none; }
  .etape:nth-child(even) { transform: translateY(40px); }
}

.hauts { background: var(--grain), radial-gradient(70% 50% at 100% 0%, rgba(242, 166, 90, 0.35), transparent 70%), linear-gradient(180deg, #FBF1DF 0%, #F2E2C6 100%); padding: 90px 0 190px; }
.onde-vert-f { background: #1B3F31; }
.relief-hauts { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 0; opacity: 0.9; pointer-events: none; }
.relief-hauts svg { width: 100%; height: 100%; display: block; }
.hauts-grille { display: grid; gap: 30px; }
.hauts-texte h2 { margin-bottom: 16px; }
.hauts-texte p { color: var(--encre-d); max-width: 34em; }
.hauts-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hauts-liste li { padding: 18px 16px; border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: 0 16px 28px -22px rgba(36, 81, 63, 0.7); }
.hauts-liste li:nth-child(2) { background: var(--vert); color: var(--creme); transform: rotate(1.5deg); }
.hauts-liste li:nth-child(3) { background: var(--soleil); transform: rotate(-1deg); }
.hauts-liste b { display: block; font: 700 1.2rem/1.2 var(--titre); margin-bottom: 4px; }
.hauts-liste span { font-size: 0.9375rem; line-height: 1.35; opacity: 0.88; }
@media (min-width: 900px) { .hauts { padding: 130px 0 250px; } .relief-hauts { height: 220px; } .hauts-grille { grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } }

.loin { background: var(--grain-clair), radial-gradient(70% 50% at 0% 0%, rgba(25, 162, 190, 0.3), transparent 70%), linear-gradient(180deg, var(--nuit-f) 0%, var(--nuit) 60%, #174061 100%); color: var(--creme); padding: 90px 0 84px; }
.loin .onde-nuit { background: var(--nuit-f); }
.loin .surtitre { color: var(--soleil); }
.loin-tete { max-width: 760px; margin-bottom: 30px; }
.vagues-loin { position: absolute; left: 0; right: 0; bottom: 30px; height: 44px; color: rgba(127, 211, 227, 0.25); pointer-events: none; }
.vagues-loin svg { width: 100%; height: 100%; display: block; }
.distances { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.distances li { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: rgba(251, 245, 234, 0.07); border: 1px solid rgba(251, 245, 234, 0.16); font-size: 1rem; line-height: 1.35; color: rgba(251, 245, 234, 0.85); }
.distances b { display: block; font: 700 1.1875rem/1.25 var(--titre); color: var(--creme); }
.distances .lieu-ico { grid-row: span 2; }
.distances .lieu-ico .ico { width: 30px; height: 30px; }
.citation-route { margin: 34px 0 0; }
.citation-route blockquote { position: relative; padding: 24px 22px; border-radius: 4px 22px 22px 22px; background: var(--corail); color: #fff; transform: rotate(-1deg); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8); }
.citation-route p { font: italic 600 1.35rem/1.3 var(--titre); margin-bottom: 10px; }
.citation-route cite { font-weight: 600; font-size: 0.9375rem; }
@media (min-width: 900px) { .loin { padding: 130px 0 120px; } .distances { grid-template-columns: repeat(3, 1fr); gap: 20px; } .distances li { grid-template-columns: 1fr; row-gap: 12px; padding: 24px; align-items: start; } .distances .lieu-ico { grid-row: auto; } .citation-route { width: min(760px, 100%); margin: 60px auto 0; } }
@media (prefers-reduced-motion: no-preference) { .tete-alentours .oiseaux.allumee .oiseau { animation: vol 26s linear infinite; } }
.trace text { font: 600 19px var(--texte); }
@media (max-width: 899px) { .tete .fenetre-photo { aspect-ratio: 16 / 11; } .tete { padding-top: 24px; } .tete-grille { gap: 20px; } }
@media (max-height: 760px) and (max-width: 899px) { .tete .fenetre-photo { aspect-ratio: 2 / 1; } }
.menu-oiseau { color: rgba(201, 83, 44, 0.55); }

/* — 20 octobre au soir : les décors qui poussent au défilement (palmes en contre-jour, bambou, hibiscus, ondes de la piscine).
   Toujours sur les bords des sections, derrière le contenu ; app.js les fait pousser une fois puis les balance au défilement. — */
.orn-pos { position: absolute; z-index: 0; pointer-events: none; }
.orn-pos .orn { display: block; width: 100%; height: auto; overflow: visible; }
.orn-t-palmes { width: 150px; --dy: -50px; }
.orn-t-bambou { width: 60px; --dy: -86px; }
.orn-t-hibiscus { width: 150px; --dy: -44px; }
.orn-t-ondes { width: 190px; }
/* au téléphone, le pied du décor passe sous le bord de la section : seules les pointes dépassent, dans la marge du haut ou du bas */
.orn-bd { right: -16px; bottom: var(--dy); }
.orn-bg { left: -16px; bottom: var(--dy); transform: scaleX(-1); }
.orn-hd { right: -16px; top: var(--dy); transform: scaleY(-1); }
.orn-od { right: -40px; top: 8px; }
.orn-og { left: -40px; top: 8px; transform: scaleX(-1); }
.orn .kz1 { fill: #24513F; } .orn .kz1s { stroke: #24513F; }
.orn .kz2 { fill: #3F7D5C; } .orn .kz2s { stroke: #3F7D5C; }
.orn .kz3 { fill: #7AA984; } .orn .kz3s { stroke: #7AA984; }
.orn .kzf { fill: #E96A3F; } .orn .kzc { fill: #F7D9A0; } .orn .kzcs { stroke: #F7D9A0; }
.orn .kzl { stroke: #19A2BE; opacity: 0.55; }
.orn-pos .orn { opacity: 0.88; }
/* en contre-jour sur le corail : les palmes en ombre bleu nuit, les fleurs claires */
.orn-ombre .kz1, .orn-ombre .kz2, .orn-ombre .kz3 { fill: rgba(18, 48, 74, 0.45); }
.orn-ombre .kz1s, .orn-ombre .kz2s, .orn-ombre .kz3s { stroke: rgba(18, 48, 74, 0.45); }
.orn-ombre .kzf { fill: rgba(251, 245, 234, 0.8); }
/* sur les fonds sombres : un vert de jardin éclairé, plus discret */
.orn-clair .orn { opacity: 0.5; }
.orn-clair .kz1 { fill: #4F9A72; } .orn-clair .kz1s { stroke: #4F9A72; }
.orn-clair .kz2 { fill: #74B98B; } .orn-clair .kz2s { stroke: #74B98B; }
.orn-clair .kz3 { fill: #A6DDA0; } .orn-clair .kz3s { stroke: #A6DDA0; }
.orn-hg { left: -16px; top: var(--dy); transform: scale(-1, -1); }
.tete .orn-bd { right: -44px; }
@media (max-width: 1239px) { .tete-chambres .orn-bd { right: -84px; } .tete-chambres .orn-pos { --dy: -74px; } .maison .orn-bg { left: -54px; } }
@media (min-width: 760px) {
  .orn-pos { --dy: -6px; }
}
@media (min-width: 760px) and (max-width: 1239px) {
  .orn-t-palmes { width: 130px; } .orn-t-bambou { width: 50px; } .orn-t-hibiscus { width: 104px; } .orn-t-ondes { width: 150px; }
  .orn-bd, .orn-hd, .tete .orn-bd { right: -36px; } .orn-bg, .orn-hg { left: -36px; }
}
/* sur ordinateur, dans la marge à côté du contenu (1180 px) : la partie visible ne dépasse jamais la marge */
@media (min-width: 1240px) {
  .orn-pos { --marge: calc((100vw - 1180px) / 2 - 22px); }
  .orn-t-palmes { --ow: 300px; } .orn-t-bambou { --ow: 110px; } .orn-t-hibiscus { --ow: 220px; } .orn-t-ondes { --ow: 300px; }
  .orn-pos { width: var(--ow); }
  .orn-bd, .orn-hd, .orn-od, .tete .orn-bd { right: min(-16px, calc(var(--marge) - var(--ow))); }
  .orn-bg, .orn-hg, .orn-og { left: min(-16px, calc(var(--marge) - var(--ow))); }
  .orn-od, .orn-og { top: 90px; }
  .orn-bd, .orn-bg { bottom: -6px; } .orn-hd, .orn-hg { top: -6px; }
}
@media (min-width: 1700px) {
  .orn-t-palmes { --ow: 400px; } .orn-t-bambou { --ow: 140px; } .orn-t-hibiscus { --ow: 280px; } .orn-t-ondes { --ow: 380px; }
}

/* — 20 octobre au soir : une icône par case — */
.gouts li { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.gouts li .ico { grid-row: span 2; width: 28px; height: 28px; }
.gouts li q, .gouts li span { grid-column: 2; }
.gouts-hotes li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.gouts-hotes li .ico { grid-row: span 2; width: 28px; height: 28px; color: var(--soleil); }
.gouts-hotes li q, .gouts-hotes li span { grid-column: 2; }
.plateau-liste li { display: inline-flex; align-items: center; gap: 9px; }
.plateau-liste li .ico { width: 26px; height: 26px; }
.hauts-liste .ico { display: block; width: 30px; height: 30px; margin-bottom: 10px; color: var(--corail-f); }
.hauts-liste li:nth-child(2) .ico { color: var(--soleil); }
.hauts-liste li:nth-child(3) .ico { color: var(--nuit); }
.raisons li::before { content: none; }
.raisons li > .ico { position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; padding: 7px; border-radius: 50%; background: #fff; color: var(--corail-f); box-sizing: content-box; }
.raisons li { padding-left: 66px; }
.prix-nuit { align-items: center; }
.prix-nuit .ico { width: 28px; height: 28px; color: var(--corail-f); }
.prix-diner { align-items: center; }
.prix-diner .ico { width: 28px; height: 28px; color: var(--soleil); }
.contact-num { display: flex; align-items: center; gap: 10px; }
.contact-num .ico { width: 28px; height: 28px; color: var(--corail); }
.contact-adresse { display: flex; align-items: flex-start; gap: 8px; }
.contact-adresse .ico { width: 24px; height: 24px; color: var(--corail-f); margin-top: 1px; }
.horaires-carte span { display: flex; align-items: center; gap: 8px; }
.horaires-carte .ico { width: 24px; height: 24px; color: var(--soleil); }

/* ===== 23 octobre : le bouton menu dit « Menu » et se repère (pilule nuit pleine, à côté d'« Appeler » en corail) ===== */
.entete-menu { display: inline-flex; align-items: center; gap: 7px; width: auto; height: auto; min-height: 44px; padding: 0 15px 0 13px; border: 0; border-radius: 999px; background: var(--nuit); color: var(--creme); font: 600 1rem/1 var(--texte); white-space: nowrap; box-shadow: 0 8px 18px -10px rgba(11, 30, 48, 0.75); }
.entete-menu:hover { background: var(--nuit-f); color: #fff; }
.entete-menu .ico { width: 20px; height: 20px; }
@media (max-width: 520px) { .entete-menu { width: auto; height: auto; min-height: 44px; padding: 0 13px 0 11px; gap: 6px; } }
@media (max-width: 439px) {
  .entete-tel { width: 44px; min-width: 44px; padding: 0; justify-content: center; position: relative; }
  .entete-tel .court { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .entete-tel .ico { width: 20px; height: 20px; }
  .entete-menu { padding: 0 12px 0 10px; }
}
@media (min-width: 1180px) { .entete-menu { display: none; } }