/* Leu Pied dans l'Eau · « Les cartes postales de Saint-Leu » (démo Vixya, 20 octobre)
   Corben (titres) + Mona Sans (texte) · brun cacao et azur du logo, lagon, corail des transats, soleil */
@font-face { font-family: "Corben"; src: url("/polices/corben.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("/polices/mona.woff2") format("woff2"); font-weight: 400 700; font-stretch: 100%; font-display: swap; }

:root {
  --papier: #F7EFE2; --papier-2: #EADBC4; --blanc: #FFFBF4;
  --cacao: #6E4025; --nuit: #3A2214; --encre: #2B1A10;
  --azur: #1BA1E2; --azur-fonce: #0B7FBA; --lagon: #0E6F96; --lagon-fonce: #0A4F6E;
  --corail: #EE6A3C; --corail-fonce: #C9502A; --soleil: #F3B04A; --terre: #B7603A;
  --titre: "Corben", Georgia, serif; --texte: "Mona Sans", system-ui, sans-serif;
  --gouttiere: 16px; --rayon: 14px;
  --ombre: 0 18px 40px -18px rgb(58 34 20 / .45), 0 4px 10px -4px rgb(58 34 20 / .25);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 1.0625rem/1.6 var(--texte); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem); }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--nuit); color: #fff; padding: 10px 14px; border-radius: 8px; }
.saut:focus { left: 8px; }
.surtitre { font: 700 .8125rem/1.3 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--corail-fonce); margin-bottom: .9em; display: flex; align-items: center; gap: 10px; }
.surtitre::before { content: ""; width: 34px; height: 10px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M1 5q4-4 8 0t8 0 8 0 8 0' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10'%3E%3Cpath d='M1 5q4-4 8 0t8 0 8 0 8 0' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
em { font-style: normal; color: var(--azur-fonce); }

/* ——— Les fonds : chaque section a sa matière ——— */
.fond-papier {
  background-color: var(--papier);
  background-image:
    radial-gradient(circle at 12% 18%, rgb(243 176 74 / .22), transparent 38%),
    radial-gradient(circle at 92% 80%, rgb(27 161 226 / .16), transparent 42%),
    repeating-linear-gradient(0deg, rgb(110 64 37 / .07) 0 1px, transparent 1px 7px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .25 0 0 0 0 .14 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
.fond-papier-bleu {
  background-color: #EEF3F2;
  background-image:
    radial-gradient(circle at 85% 10%, rgb(27 161 226 / .22), transparent 40%),
    radial-gradient(circle at 5% 90%, rgb(238 106 60 / .14), transparent 40%),
    repeating-linear-gradient(90deg, rgb(14 111 150 / .08) 0 1px, transparent 1px 9px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .3 0 0 0 0 .4 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}
.fond-lagon {
  color: #fff; background-color: var(--lagon);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgb(27 161 226 / .75), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgb(10 79 110 / .9), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48'%3E%3Cpath d='M0 24q15-14 30 0t30 0 30 0 30 0' fill='none' stroke='white' stroke-opacity='.16' stroke-width='2'/%3E%3C/svg%3E");
  background-size: auto, auto, 120px 48px;
}
.fond-lagon .surtitre { color: var(--soleil); }
.fond-lagon em { color: var(--soleil); }
.fond-terre {
  color: #fff; background-color: var(--terre);
  background-image:
    radial-gradient(circle at 80% 0%, rgb(243 176 74 / .55), transparent 45%),
    radial-gradient(circle at 0% 100%, rgb(110 64 37 / .7), transparent 50%),
    radial-gradient(rgb(255 255 255 / .16) 1.2px, transparent 1.6px),
    radial-gradient(rgb(58 34 20 / .22) 1px, transparent 1.4px);
  background-size: auto, auto, 11px 11px, 7px 7px;
  background-position: 0 0, 0 0, 0 0, 3px 4px;
}
.fond-terre .surtitre { color: #FFE2B3; }
.fond-couchant {
  color: var(--nuit);
  background:
    radial-gradient(circle at 82% 22%, rgb(255 236 190 / .9), transparent 22%),
    repeating-linear-gradient(180deg, rgb(255 255 255 / .12) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #FBE3BC 0%, #F6C27A 38%, #EF935A 72%, #D7683E 100%);
}
.fond-couchant .surtitre { color: var(--nuit); }
.fond-nuit {
  color: #F7EFE2; background-color: var(--nuit);
  background-image:
    radial-gradient(circle at 15% 20%, rgb(243 176 74 / .22), transparent 35%),
    radial-gradient(circle at 90% 85%, rgb(27 161 226 / .18), transparent 40%),
    radial-gradient(rgb(255 236 200 / .5) 1px, transparent 1.6px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48'%3E%3Cpath d='M0 24q15-14 30 0t30 0 30 0 30 0' fill='none' stroke='%23F3B04A' stroke-opacity='.14' stroke-width='2'/%3E%3C/svg%3E");
  background-size: auto, auto, 46px 46px, 120px 48px;
}
.fond-nuit .surtitre { color: var(--soleil); }

/* ——— Boutons ——— */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4em; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; border-radius: 999px; font: 700 1rem/1.2 var(--texte); text-decoration: none; text-align: center; border: 2px solid transparent; transition: transform .25s cubic-bezier(.3,.7,.3,1.4), box-shadow .25s, background-color .25s, color .25s; }
.bouton svg { width: 20px; height: 20px; flex: none; }
.bouton:hover { transform: translateY(-2px) rotate(-.6deg); box-shadow: 0 10px 22px -10px rgb(58 34 20 / .6); }
.bouton:active { transform: translateY(1px) scale(.98); }
.bouton:focus-visible, .choisir button:focus-visible, a:focus-visible { outline: 3px solid var(--azur); outline-offset: 3px; }
.bouton-corail { background: var(--corail); color: #fff; }
.bouton-corail:hover { background: var(--corail-fonce); }
.bouton-azur { background: var(--azur-fonce); color: #fff; }
.bouton-azur:hover { background: var(--lagon); }
.bouton-trait { border-color: var(--cacao); color: var(--cacao); background: rgb(255 251 244 / .7); }
.bouton-trait:hover { background: var(--cacao); color: #fff; }
.bouton-clair { background: var(--blanc); color: var(--nuit); }
.bouton-clair:hover { background: #fff; }
.bouton-trait-clair { border-color: rgb(247 239 226 / .75); color: #F7EFE2; }
.bouton-trait-clair:hover { background: #F7EFE2; color: var(--nuit); }

/* ——— En-tête ——— */
.entete { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 8px var(--gouttiere); background: rgb(247 239 226 / .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 2px dashed rgb(110 64 37 / .25); min-height: 66px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.marque-timbre { width: 50px; height: 46px; flex: none; padding: 4px; background: #fff; display: grid; place-items: center; --r: 3px; -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round; mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round; filter: drop-shadow(0 2px 3px rgb(58 34 20 / .3)); }
.marque-timbre img { width: 100%; height: 100%; object-fit: contain; }
.marque-nom { font: 700 1.05rem/1.05 var(--titre); color: var(--cacao); display: none; }
.marque-nom small { display: block; font: 600 .72rem/1.3 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--azur-fonce); margin-top: 3px; }
.apercu { font: 700 .7rem/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--cacao); border: 1.5px dashed var(--cacao); border-radius: 6px; padding: 6px 7px; transform: rotate(-4deg); flex: none; }
.entete-tel { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 999px; background: var(--blanc); border: 2px solid var(--cacao); color: var(--cacao); font-weight: 700; text-decoration: none; flex: none; }
.entete-tel svg { width: 18px; height: 18px; }
.entete-tel .long { display: none; }
.entete-reserver { display: none; min-height: 46px; padding: 8px 18px; }
.menu { min-height: 46px; padding: 0 16px 0 14px; flex: none; border: 0; border-radius: 999px; background: var(--corail); color: var(--encre); display: inline-flex; align-items: center; gap: 9px; font: 700 16px/1 var(--texte); letter-spacing: .02em; cursor: pointer; box-shadow: 0 8px 18px -10px rgb(201 80 42 / .9); transition: background .25s; }
.menu:hover { background: #F27D52; }
.menu-traits { display: grid; gap: 6px; width: 20px; }
.menu-traits i { display: block; height: 2.5px; background: currentColor; border-radius: 2px; transition: transform .3s; }
.menu[aria-expanded="true"] .menu-traits i:first-child { transform: translateY(4.25px) rotate(45deg); }
.menu[aria-expanded="true"] .menu-traits i:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.nav { position: fixed; inset: 66px 0 auto 0; background: var(--papier); padding: 18px var(--gouttiere) 26px; border-bottom: 2px dashed rgb(110 64 37 / .3); box-shadow: 0 30px 40px -30px rgb(58 34 20 / .5); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s; max-height: calc(100dvh - 66px); overflow-y: auto; }
.nav.ouverte { transform: none; opacity: 1; visibility: visible; }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.nav li a { display: block; padding: 13px 4px; font: 700 1.3rem/1.2 var(--titre); color: var(--nuit); text-decoration: none; border-bottom: 1px solid rgb(110 64 37 / .15); }
.nav li a[aria-current="page"] { color: var(--corail-fonce); }
.nav-actions { display: grid; gap: 10px; margin-top: 16px; }
html:not(.js) .nav { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; }

@media (min-width: 400px) { .marque-nom { display: block; } }
@media (max-width: 419px) { .marque-nom small { display: none; } }
@media (max-width: 379px) { .marque-nom { display: none; } }
@media (min-width: 1100px) {
  .entete { padding: 10px 28px; gap: 18px; }
  .menu { display: none; }
  .nav { position: static; transform: none; opacity: 1; visibility: visible; background: none; border: 0; box-shadow: none; padding: 0; margin-left: auto; max-height: none; overflow: visible; }
  .nav ul { display: flex; gap: 4px; }
  .nav li a { border: 0; font: 600 .98rem/1 var(--texte); padding: 10px 12px; border-radius: 999px; }
  .nav li a:hover { background: rgb(110 64 37 / .1); }
  .nav li a[aria-current="page"] { background: var(--cacao); color: #fff; }
  .nav-actions { display: none; }
  .entete-tel { margin-left: 0; }
  .entete-tel .long { display: inline; } .entete-tel .court { display: none; }
  .entete-reserver { display: inline-flex; }
}

/* ——— Les cadres : cartes postales et timbres ——— */
.carte { margin: 0; background: var(--blanc); padding: 10px 10px 12px; border-radius: 4px; box-shadow: var(--ombre); }
.carte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.carte figcaption { font: 700 .9rem/1.3 var(--titre); color: var(--cacao); padding: 10px 4px 0; }
.carte-penchee { transform: rotate(-2deg); }
.carte-penchee-droite { transform: rotate(2deg); }
.timbre { --r: 5px; display: block; margin: 0; background: var(--blanc); padding: 9px; -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round; mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round; }
.timbre-photo { filter: drop-shadow(0 10px 14px rgb(58 34 20 / .35)); }
.timbre-photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.timbre-logo img { mix-blend-mode: multiply; }
.tampon { color: var(--cacao); opacity: .85; pointer-events: none; }
.deco { pointer-events: none; }

/* ——— Le haut de page ——— */
.heros { position: relative; padding: 18px var(--gouttiere) 34px; display: grid; gap: 22px; overflow: hidden; }
.vagues { position: absolute; display: block; color: var(--cacao); opacity: .3; width: 200%; height: 60px; left: 0; pointer-events: none; }
.vagues-heros { top: 26px; left: 0; width: 160%; height: 70px; opacity: .26; }
.heros-carte { position: relative; max-width: 640px; margin: 0 auto; width: 100%; }
.carte-heros { transform: rotate(-1.6deg); padding: 9px 9px 10px; }
.carte-heros img { aspect-ratio: 16 / 10; }
.carte-heros figcaption { font-size: .82rem; padding-top: 7px; }
.timbre-logo { position: absolute; right: -4px; top: -12px; width: 84px; transform: rotate(5deg); filter: drop-shadow(0 6px 8px rgb(58 34 20 / .35)); }
.tampon-heros { position: absolute; width: 104px; height: 104px; left: -12px; top: -16px; transform: rotate(-14deg); color: #fff; }
.tampon-heros.imprime { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .4)); }
.cocotier { color: var(--cacao); }
.cocotier-heros { position: absolute; width: 150px; height: 220px; right: -46px; bottom: -30px; opacity: .2; transform-origin: 55% 98%; }
.heros-texte { position: relative; max-width: 640px; margin: 0 auto; }
.heros-texte h1 { color: var(--nuit); margin-bottom: .35em; }
.heros-sous { font-size: 1.04rem; margin-bottom: .6em; max-width: 34em; }
.note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.note strong { font: 700 1.25rem/1 var(--titre); color: var(--cacao); }
.note-etoiles { display: inline-flex; gap: 2px; color: var(--soleil); }
.note-etoiles svg { width: 18px; height: 18px; }
.heros .actions { margin-top: 14px; }
.heros .actions { flex-wrap: nowrap; }
.heros .actions .bouton { flex: 1 1 auto; padding-inline: 16px; }
@media (max-width: 759px) {
  .heros { padding-top: 14px; gap: 16px; }
  .heros .surtitre { margin-bottom: .5em; font-size: .72rem; letter-spacing: .08em; }
  .heros .surtitre::before { width: 24px; }
  .heros-texte h1 { font-size: clamp(1.55rem, 6.6vw, 1.95rem); }
  .heros-sous { font-size: 1rem; line-height: 1.5; }
}
@media (max-width: 759px) and (max-height: 700px) {
  .carte-heros img { aspect-ratio: 16 / 9; }
  .heros-sous { display: none; }
}
@media (min-width: 760px) {
  .heros { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 48px; padding: 56px 40px 80px; min-height: min(80vh, 760px); }
  .heros-carte { order: 2; }
  .heros-texte { margin: 0; }
  .timbre-logo { width: 120px; right: -22px; top: -30px; }
  .tampon-heros { width: 150px; height: 150px; left: -44px; top: -50px; }
  .cocotier-heros { width: 260px; height: 380px; right: auto; left: -60px; bottom: -40px; opacity: .14; }
  .heros .actions .bouton { flex: 0 0 auto; }
}
@media (min-width: 1300px) { .heros { padding-inline: max(56px, calc((100vw - 1240px) / 2)); } }

/* ——— Les sections communes ——— */
section { position: relative; overflow: hidden; }
.lieu, .accueil-hote, .journee, .villas, .fetes, .avis, .reserver, .bloc { padding: 64px var(--gouttiere); }
@media (min-width: 760px) { .lieu, .accueil-hote, .journee, .villas, .fetes, .avis, .reserver, .bloc { padding: 104px 40px; } }
@media (min-width: 1300px) { .lieu, .accueil-hote, .journee, .villas, .fetes, .avis, .reserver, .bloc { padding-inline: max(56px, calc((100vw - 1240px) / 2)); } }
.vagues-haut { top: 18px; color: #fff; opacity: .22; height: 44px; }

/* Le lieu */
.lieu { display: grid; gap: 40px; }
.lieu h2 { color: #fff; }
.chiffres { list-style: none; margin: 1.6em 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.chiffres li { background: rgb(255 255 255 / .12); border: 1.5px dashed rgb(255 255 255 / .45); border-radius: 10px; padding: 12px 10px; }
.chiffres b { display: block; font: 700 1.6rem/1 var(--titre); color: var(--soleil); }
.chiffres span { display: block; font-size: .86rem; line-height: 1.35; margin-top: 6px; }
.lieu-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; padding-bottom: 10px; }
.lieu-p1 { grid-column: 1 / -1; }
.lieu-p2 { transform: rotate(-3deg); margin-top: 6px; }
.lieu-p3 { transform: rotate(3deg); margin-top: 26px; }
.tampon-lieu { position: absolute; width: 110px; height: 110px; left: 38%; top: 44%; color: #fff; opacity: .7; transform: rotate(18deg); }
@media (min-width: 900px) {
  .lieu { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 64px; }
  .lieu-photos { grid-template-columns: 1fr 1fr; }
  .lieu-p1 { grid-column: 1 / -1; width: 92%; }
  .lieu-p2 { width: 92%; margin-top: -46px; margin-left: 4%; position: relative; z-index: 2; }
  .lieu-p3 { margin-top: -10px; }
  .tampon-lieu { width: 150px; height: 150px; left: auto; right: -8px; top: -30px; }
}

/* L'hôtesse : le verso d'une carte postale */
.accueil-hote { display: grid; place-items: center; }
.case-trace { position: absolute; width: 360px; height: 270px; right: -90px; bottom: -40px; color: var(--azur); opacity: .16; }
.verso { position: relative; width: 100%; max-width: 1020px; background: var(--blanc); border-radius: 6px; box-shadow: var(--ombre); padding: 26px 20px; display: grid; gap: 26px; transform: rotate(.6deg);
  background-image: linear-gradient(rgb(255 251 244 / .9), rgb(255 251 244 / .9)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .25 0 0 0 0 .14 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
.verso h2 { color: var(--nuit); }
.verso blockquote { margin: 1.2em 0 0; padding: 14px 16px; border-left: 4px solid var(--azur); background: rgb(27 161 226 / .08); border-radius: 0 10px 10px 0; }
.verso blockquote p { font: 700 1.1rem/1.4 var(--titre); color: var(--cacao); margin: 0 0 .4em; }
.verso cite { font-style: normal; font-size: .9rem; color: var(--lagon); font-weight: 600; }
.verso-adresse { position: relative; border-top: 2px dashed rgb(110 64 37 / .3); padding-top: 22px; display: grid; gap: 14px; justify-items: start; }
.timbre-case { width: 92px; padding: 12px 10px 8px; color: var(--azur); text-align: center; justify-self: end; transform: rotate(4deg); background: #EAF6FC; filter: drop-shadow(0 4px 6px rgb(58 34 20 / .25)); }
.timbre-case svg { width: 64px; height: 48px; display: block; margin: 0 auto; }
.timbre-case small { display: block; font: 700 .66rem/1 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--cacao); margin-top: 6px; }
.tampon-verso { position: absolute; width: 96px; height: 96px; right: 66px; top: 4px; opacity: .55; transform: rotate(-12deg); }
.adresse-lignes { margin: 0; display: grid; width: 100%; font: 700 1.05rem/1 var(--titre); color: var(--nuit); }
.adresse-lignes span { border-bottom: 1.5px solid rgb(110 64 37 / .3); padding: 12px 2px 8px; }
@media (min-width: 900px) {
  .verso { grid-template-columns: 1.25fr 1fr; padding: 44px; gap: 44px; }
  .verso-adresse { border-top: 0; border-left: 2px dashed rgb(110 64 37 / .3); padding: 0 0 0 40px; align-content: start; }
}

/* La journée */
.journee { padding-inline: 0 !important; }
.journee-tete, .journee-actions { padding-inline: var(--gouttiere); max-width: 980px; }
@media (min-width: 760px) { .journee-tete, .journee-actions { padding-inline: 40px; } }
@media (min-width: 1300px) { .journee-tete, .journee-actions { padding-inline: max(56px, calc((100vw - 1240px) / 2)); max-width: none; } .journee-tete h2 { max-width: 900px; } }
.soleil-journee { position: absolute; z-index: 0; width: 150px; height: 150px; right: 7%; top: 28px; color: #FFF3D6; opacity: .7; }
.journee-tete { position: relative; z-index: 1; }
@media (max-width: 759px) { .soleil-journee { width: 110px; height: 110px; right: -24px; top: 6px; } }
.journee-cartes { list-style: none; margin: 18px 0 0; padding: 14px var(--gouttiere) 26px; display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 300px); gap: 18px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--cacao) transparent; overscroll-behavior-x: contain; }
.jc { scroll-snap-align: center; }
.jc .carte { transform: rotate(var(--rot, -1.5deg)); transition: transform .4s cubic-bezier(.3,.7,.3,1.3); }
.jc:nth-child(2n) .carte { --rot: 1.8deg; }
.jc:nth-child(3n) .carte { --rot: -.6deg; }
.jc:hover .carte { transform: rotate(0) translateY(-6px); }
.jc-heure { font: 700 1.2rem/1.2 var(--titre); color: var(--nuit); margin: 16px 0 .3em; }
.jc p:last-child { font-size: .98rem; line-height: 1.5; }
@media (min-width: 1100px) {
  .journee-cartes { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; padding-inline: max(40px, calc((100vw - 1320px) / 2)); }
  .jc:nth-child(even) { margin-top: 48px; }
}

/* Les villas */
.villas-tete { max-width: 860px; }
.villas h2 { color: #fff; }
.choisir { background: rgb(58 34 20 / .32); border: 1.5px dashed rgb(255 255 255 / .5); border-radius: 16px; padding: 16px; margin: 6px 0 30px; max-width: 760px; }
.choisir-titre { font: 700 1.15rem/1.2 var(--titre); margin: 0 0 12px; }
.choisir-boutons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.choisir button { min-height: 52px; border-radius: 12px; border: 2px solid rgb(255 255 255 / .7); background: transparent; color: #fff; font: 700 1rem/1.1 var(--texte); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.choisir button:hover { transform: translateY(-2px); }
.choisir button[aria-pressed="true"] { background: var(--blanc); color: var(--nuit); border-color: var(--blanc); }
.choisir-reponse { margin: 12px 0 0; font-size: .95rem; min-height: 3em; }
.villas-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.villa-lien { position: relative; display: grid; text-decoration: none; color: var(--nuit); background: var(--blanc); border-radius: 6px; padding: 10px 10px 18px; box-shadow: var(--ombre); transform: rotate(var(--rot, -1deg)); transition: transform .35s cubic-bezier(.3,.7,.3,1.3), box-shadow .35s, outline-color .3s; outline: 4px solid transparent; outline-offset: 4px; }
.villa-carte:nth-child(2) .villa-lien { --rot: 1deg; }
.villa-carte:nth-child(3) .villa-lien { --rot: -.4deg; }
.villa-lien:hover { transform: rotate(0) translateY(-6px); }
.villa-lien .carte-photo { margin: 0; }
.villa-lien img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.villa-texte { display: grid; gap: 4px; padding: 14px 6px 0; }
.villa-pers { font: 700 .78rem/1.2 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: var(--azur-fonce); }
.villa-nom { font: 700 1.45rem/1.15 var(--titre); color: var(--cacao); }
.villa-detail { font-size: .98rem; }
.villa-prix { font-size: .95rem; }
.villa-prix strong { font: 700 1.35rem/1 var(--titre); color: var(--corail-fonce); }
.villa-voir { margin-top: 10px; justify-self: start; display: inline-flex; align-items: center; min-height: 48px; padding: 10px 18px; border-radius: 999px; background: var(--cacao); color: #fff; font-weight: 700; }
.villa-tampon { position: absolute; width: 74px; height: 74px; right: 14px; bottom: 16px; color: var(--azur); opacity: .45; transform: rotate(-16deg); }
.villas[data-choix] .villa-carte .villa-lien { opacity: .55; filter: saturate(.6); }
.villas[data-choix] .villa-carte.allumee .villa-lien { opacity: 1; filter: none; outline-color: var(--soleil); }
.villas-ensemble { margin-top: 34px; display: grid; gap: 12px; align-items: center; background: rgb(255 251 244 / .14); border: 1.5px dashed rgb(255 255 255 / .55); border-radius: 16px; padding: 18px; transition: background .3s, outline-color .3s; outline: 4px solid transparent; outline-offset: 4px; }
.villas-ensemble svg { width: 40px; height: 40px; color: var(--soleil); }
.villas-ensemble p { margin: 0; }
.villas-ensemble .bouton { justify-self: start; }
.villas[data-choix="21"] .villas-ensemble { background: rgb(58 34 20 / .45); outline-color: var(--soleil); }
.cocotier-villas { position: absolute; width: 220px; height: 330px; right: -40px; top: 20px; color: #fff; opacity: .14; transform-origin: 55% 98%; }
@media (min-width: 760px) {
  .villas-cartes { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .villas-ensemble { grid-template-columns: auto 1fr auto; padding: 20px 26px; }
}

/* Les fêtes */
.fetes { display: grid; gap: 40px; }
.guirlande { position: absolute; left: 0; top: 0; width: 100%; height: 90px; color: rgb(247 239 226 / .5); }
.guirlande .ampoules circle { fill: var(--soleil); }
.fetes-photo { position: relative; margin-top: 30px; }
.tampon-fetes { position: absolute; width: 120px; height: 120px; left: -14px; bottom: -40px; color: var(--soleil); opacity: .8; transform: rotate(-10deg); }
.fetes h2 { color: #fff; }
.fetes blockquote { margin: 1.4em 0 0; padding: 18px 20px; background: rgb(247 239 226 / .08); border: 1.5px dashed rgb(243 176 74 / .55); border-radius: 12px; }
.fetes blockquote p { font: 700 1.12rem/1.45 var(--titre); margin: 0 0 .5em; }
.fetes cite { font-style: normal; font-size: .92rem; color: var(--soleil); font-weight: 600; }
@media (min-width: 900px) { .fetes { grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; } .fetes-photo { margin-top: 40px; } .tampon-fetes { width: 160px; height: 160px; } }

/* Les avis */
.avis-tete { display: grid; gap: 22px; align-items: center; }
.avis-note { position: relative; justify-self: start; }
.timbre-note { width: 150px; padding: 20px 14px 16px; text-align: center; background: var(--azur-fonce); color: #fff; --r: 6px; transform: rotate(-4deg); filter: drop-shadow(0 10px 14px rgb(14 79 110 / .35)); }
.timbre-note b { display: block; font: 700 3.4rem/1 var(--titre); }
.timbre-note small { display: block; font: 700 .76rem/1.3 var(--texte); letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }
.tampon-note { position: absolute; width: 90px; height: 90px; right: -50px; top: -18px; color: var(--cacao); opacity: .6; transform: rotate(14deg); }
.avis h2 { color: var(--nuit); }
.avis-fort { margin: 36px 0 30px; position: relative; }
.avis-fort blockquote { margin: 0; }
.avis-fort p { font: 700 clamp(1.6rem, 1.1rem + 2.6vw, 3.2rem)/1.15 var(--titre); color: var(--lagon); margin: 0; max-width: 18ch; }
.avis-fort figcaption { margin-top: 12px; font-weight: 700; color: var(--corail-fonce); }
.avis-bande { list-style: none; margin: 0 calc(-1 * var(--gouttiere)); padding: 10px var(--gouttiere) 24px; display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; align-items: start; scrollbar-width: thin; scrollbar-color: var(--lagon) transparent; overscroll-behavior-x: contain; }
.avis-carte { scroll-snap-align: start; background: var(--blanc); border-radius: 4px; padding: 20px 18px; box-shadow: var(--ombre); transform: rotate(var(--rot, -1deg)); border-top: 6px solid var(--c, var(--azur)); }
.avis-carte p { font-size: 1rem; line-height: 1.5; margin-bottom: .8em; }
.avis-carte cite { font-style: normal; font-weight: 700; color: var(--cacao); }
.a2 { --rot: 1.2deg; --c: var(--corail); margin-top: 22px; }
.a3 { --rot: -.6deg; --c: var(--soleil); background: #FFF6E4; }
.a4 { --rot: 1.6deg; --c: var(--lagon); margin-top: 30px; }
.a5 { --rot: -1.4deg; --c: var(--corail); }
.a6 { --rot: .8deg; --c: var(--azur); margin-top: 18px; background: #EEF7FB; }
.a7 { --rot: -.8deg; --c: var(--cacao); }
@media (min-width: 900px) {
  .avis-tete { grid-template-columns: auto 1fr; gap: 70px; }
  .avis-bande { margin: 0; padding-inline: 0; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .avis-fort { margin-left: 22%; }
}

/* Réserver */
.reserver-carte { position: relative; max-width: 1080px; margin: 0 auto; background: var(--blanc); color: var(--nuit); border-radius: 6px; padding: 30px 20px; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .6); display: grid; gap: 26px; transform: rotate(-.5deg); }
.reserver-carte h2 { color: var(--nuit); }
.reserver-carte .surtitre { color: var(--corail-fonce); }
.reserver-carte .bouton-clair { background: var(--papier); border-color: rgb(110 64 37 / .35); }
.reserver-timbres { display: flex; flex-wrap: nowrap; gap: 10px; align-content: start; }
.timbre-prix { --r: 5px; display: grid; place-items: center; align-content: center; gap: 4px; flex: 1 1 0; max-width: 124px; min-height: 108px; padding: 12px 9px; background: var(--azur-fonce); color: #fff; text-align: center; -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round; mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round; transform: rotate(var(--rot, -3deg)); }
.timbre-prix:nth-child(2) { background: var(--corail); --rot: 2deg; }
.timbre-prix:nth-child(3) { background: var(--cacao); --rot: -1deg; }
.timbre-prix b { font: 700 clamp(1.05rem, 4.6vw, 1.45rem)/1 var(--titre); white-space: nowrap; }
.timbre-prix small { font: 600 .78rem/1.2 var(--texte); }
.tampon-reserver { position: absolute; width: 120px; height: 120px; right: -10px; top: -44px; color: var(--corail-fonce); opacity: .7; transform: rotate(12deg); }
@media (min-width: 900px) { .reserver-carte { grid-template-columns: 1.6fr 1fr; padding: 50px; align-items: center; } .reserver-timbres { justify-content: center; } .timbre-prix { min-height: 124px; } .tampon-reserver { width: 160px; height: 160px; } }

/* Pied de page */
.pied { position: relative; overflow: hidden; padding: 70px var(--gouttiere) 110px; }
.vagues-pied { top: 16px; color: var(--soleil); opacity: .25; height: 40px; }
.pied-grille { display: grid; gap: 34px; max-width: 1240px; margin: 0 auto; }
.pied-logo { display: block; width: 170px; background: var(--blanc); padding: 10px; border-radius: 6px; transform: rotate(-3deg); }
.pied-logo img { mix-blend-mode: multiply; }
.pied-marque p { margin-top: 18px; max-width: 30em; }
.pied-col { display: grid; gap: 10px; align-content: start; justify-items: start; }
.pied-titre { font: 700 1.2rem/1 var(--titre); color: var(--soleil); margin: 0 0 6px; }
.pied-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pied-liens a { display: inline-block; padding: 8px 0; text-decoration: none; border-bottom: 1px solid rgb(247 239 226 / .3); }
.pied-mention { max-width: 1240px; margin: 40px auto 0; padding-top: 20px; border-top: 1.5px dashed rgb(247 239 226 / .3); font-size: .9rem; opacity: .85; }
@media (min-width: 900px) { .pied-grille { grid-template-columns: 1.4fr 1fr 1fr; } .pied { padding: 90px 40px 50px; } }

/* La barre d'appel collante (téléphone) */
.barre { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgb(58 34 20 / .96); }
.barre a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 50px; border-radius: 12px; color: #fff; text-decoration: none; font-weight: 700; background: rgb(255 255 255 / .1); }
.barre svg { width: 19px; height: 19px; }
.barre .barre-reserver { background: var(--corail); }
@media (min-width: 900px) { .barre { display: none; } }

/* ——— Pages intérieures ——— */
.page-heros { position: relative; padding: 26px var(--gouttiere) 46px; display: grid; gap: 26px; overflow: hidden; }
.page-heros h1 { color: var(--nuit); }
.page-heros .carte img { aspect-ratio: 16 / 10; }
.page-heros-photo { position: relative; max-width: 640px; width: 100%; margin: 0 auto; }
.page-heros-photo .tampon { position: absolute; width: 104px; height: 104px; right: 10px; top: -30px; transform: rotate(-12deg); }
.page-heros-texte { max-width: 640px; margin: 0 auto; width: 100%; }
@media (min-width: 900px) {
  .page-heros { grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; padding: 64px 40px 90px; }
  .page-heros-texte { margin: 0; }
  .page-heros-photo .tampon { width: 150px; height: 150px; right: 30px; top: -56px; }
}
@media (min-width: 1300px) { .page-heros { padding-inline: max(56px, calc((100vw - 1240px) / 2)); } }
.bloc-tete { max-width: 860px; margin-bottom: 30px; }
.bloc .tampon-coin { position: absolute; width: 130px; height: 130px; right: 4%; top: 30px; opacity: .3; transform: rotate(14deg); }

/* Une villa (page des villas) */
.villa { display: grid; gap: 34px; }
.villa h2 { margin-bottom: .3em; }
.villa-prix-grand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 1em; font-weight: 600; }
.villa-prix-grand strong { font: 700 2.2rem/1 var(--titre); color: var(--corail-fonce); }
.fond-lagon .villa-prix-grand strong, .fond-terre .villa-prix-grand strong { color: var(--soleil); }
.cles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 1.2em; }
.cles div { background: rgb(255 251 244 / .7); border: 1.5px dashed rgb(110 64 37 / .35); border-radius: 10px; padding: 10px 12px; }
.fond-lagon .cles div, .fond-terre .cles div { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .45); }
.cles dt { font: 700 .74rem/1.2 var(--texte); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.cles dd { margin: 4px 0 0; font: 700 1.05rem/1.25 var(--titre); }
.equip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.equip li { font-size: .92rem; padding: 7px 12px; border-radius: 999px; background: rgb(110 64 37 / .1); }
.fond-lagon .equip li, .fond-terre .equip li { background: rgb(255 255 255 / .16); }
.villa-galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.villa-galerie .g1 { grid-column: 1 / -1; }
.villa-galerie .g2 { transform: rotate(-2.5deg); }
.villa-galerie .g3 { transform: rotate(2.5deg); margin-top: 18px; }
.villa-galerie .g4 { transform: rotate(1.5deg); }
.villa-galerie .g5 { transform: rotate(-1.5deg); margin-top: 14px; }
.villa-galerie figcaption { font: 600 .85rem/1.3 var(--texte); color: var(--cacao); padding-top: 6px; }
@media (min-width: 900px) {
  .villa { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start; }
  .villa.inverse .villa-galerie { order: 2; }
}
.villa-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sommaire { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.sommaire a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; text-decoration: none; background: var(--blanc); border-radius: 10px; padding: 10px 14px 10px 10px; box-shadow: 0 8px 18px -12px rgb(58 34 20 / .5); min-height: 64px; transition: transform .25s; }
.sommaire a:hover { transform: translateX(4px); }
.sommaire .som-n { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--azur-fonce); color: #fff; font: 700 1.1rem/1 var(--titre); }
.sommaire strong { display: block; font: 700 1.1rem/1.2 var(--titre); color: var(--cacao); }
.sommaire small { font-size: .9rem; }
.sommaire .som-prix { font: 700 1.05rem/1 var(--titre); color: var(--corail-fonce); white-space: nowrap; }

/* Séjour, Saint-Leu, infos : listes de cartes */
.duo { display: grid; gap: 34px; }
@media (min-width: 900px) { .duo { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .duo.inverse > :first-child { order: 2; } }
.duo-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.duo-photos .g1 { grid-column: 1 / -1; }
.duo-photos .g2 { transform: rotate(-2deg); }
.duo-photos .g3 { transform: rotate(2.4deg); margin-top: 20px; }
.lieux { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lieu-ligne { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; background: var(--blanc); color: var(--nuit); border-radius: 6px; padding: 14px 16px; box-shadow: var(--ombre); transform: rotate(var(--rot, 0deg)); }
.lieu-ligne:nth-child(odd) { --rot: -.5deg; }
.lieu-ligne:nth-child(even) { --rot: .6deg; }
.lieu-dist { --r: 4px; display: grid; place-items: center; width: 76px; min-height: 76px; padding: 8px; background: var(--azur-fonce); color: #fff; text-align: center; font: 700 .95rem/1.1 var(--titre); -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round; mask: linear-gradient(#000 0 0) content-box, radial-gradient(var(--r) at var(--r) var(--r), #0000 97%, #000) calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)) round; }
.lieu-ligne:nth-child(3n+2) .lieu-dist { background: var(--corail); }
.lieu-ligne:nth-child(3n) .lieu-dist { background: var(--cacao); }
.lieu-dist small { display: block; font: 600 .7rem/1.2 var(--texte); margin-top: 4px; }
.lieu-ligne h3 { font-size: 1.1rem; margin: 0 0 .2em; }
.lieu-ligne p { margin: 0; font-size: .95rem; line-height: 1.45; }
@media (min-width: 900px) { .lieux-deux { grid-template-columns: 1fr 1fr; gap: 18px; } }
.activites { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.activites li { padding: 10px 16px; border-radius: 999px; border: 2px dashed rgb(255 255 255 / .6); font-weight: 700; }
.plan { position: relative; max-width: 560px; margin: 0 auto; }
.plan svg { width: 100%; height: auto; display: block; }
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq details { background: var(--blanc); border-radius: 10px; box-shadow: 0 10px 22px -16px rgb(58 34 20 / .6); border-left: 5px solid var(--azur); }
.faq details:nth-child(3n+2) { border-left-color: var(--corail); }
.faq details:nth-child(3n) { border-left-color: var(--soleil); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; min-height: 56px; font: 700 1.05rem/1.35 var(--titre); color: var(--nuit); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%; font: 700 1.5rem/1 var(--texte); color: var(--corail-fonce); transition: rotate .25s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 18px 16px; margin: 0; color: var(--encre); }
.infos-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .infos-cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .infos-cartes { grid-template-columns: repeat(3, 1fr); } }
.info { background: var(--blanc); color: var(--nuit); border-radius: 6px; padding: 20px; box-shadow: var(--ombre); position: relative; }
.info:nth-child(odd) { transform: rotate(-.6deg); }
.info:nth-child(even) { transform: rotate(.7deg); }
.info h3 { color: var(--cacao); }
.info p:last-child, .info ul:last-child { margin-bottom: 0; }
.info ul { padding-left: 1.1em; margin: 0 0 1em; }
.info .info-ico { width: 42px; height: 42px; color: var(--azur-fonce); margin-bottom: 8px; }
.avis-mosaique { columns: 1; column-gap: 16px; }
.avis-mosaique .avis-carte { break-inside: avoid; margin: 0 0 18px; display: block; }
@media (min-width: 760px) { .avis-mosaique { columns: 2; } }
@media (min-width: 1100px) { .avis-mosaique { columns: 3; } }

/* ——— Le mouvement ——— */
@keyframes onde { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes balance { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes rayons { to { transform: rotate(360deg); } }
@keyframes scintille { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes imprime { 0% { opacity: 0; transform: rotate(var(--t-rot, -14deg)) scale(1.6); } 60% { opacity: .95; transform: rotate(var(--t-rot, -14deg)) scale(.94); } 100% { opacity: .85; transform: rotate(var(--t-rot, -14deg)) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .vagues.anime { animation: onde 16s linear infinite; animation-play-state: paused; }
  .cocotier.anime { animation: balance 7s ease-in-out infinite; animation-play-state: paused; }
  .soleil-journee.anime { animation: rayons 60s linear infinite; animation-play-state: paused; }
  .guirlande.anime .ampoules circle { animation: scintille 2.4s ease-in-out infinite; animation-play-state: paused; }
  .guirlande.anime .ampoules circle:nth-child(2n) { animation-delay: -1.2s; }
  .guirlande.anime .ampoules circle:nth-child(3n) { animation-delay: -.6s; }
  .joue.anime, .joue .anime, .joue.anime .ampoules circle, .joue .anime .ampoules circle { animation-play-state: running !important; }
  .js .r { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
  .js .r.vu { opacity: 1; transform: none; }
  .js .carte-penchee.r.vu { transform: rotate(-2deg); }
  .js .carte-penchee-droite.r.vu, .js .r.vu > .carte-penchee-droite { transform: rotate(2deg); }
  .js .lieu-p2.r.vu { transform: rotate(-3deg); }
  .js .lieu-p3.r.vu { transform: rotate(3deg); }
  .js .tampon { opacity: 0; }
  .js .tampon.imprime { animation: imprime .7s cubic-bezier(.2,.8,.3,1.2) forwards; }
  .tampon-heros { --t-rot: -14deg; } .tampon-lieu { --t-rot: 18deg; } .tampon-verso { --t-rot: -12deg; } .tampon-fetes { --t-rot: -10deg; } .tampon-note { --t-rot: 14deg; } .tampon-reserver { --t-rot: 12deg; } .villa-tampon { --t-rot: -16deg; } .page-heros-photo .tampon { --t-rot: -12deg; } .bloc .tampon-coin { --t-rot: 14deg; }
  .js .titre-decoupe .mot { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); transition: opacity .6s, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--m) * 55ms + .15s); }
  .js .titre-decoupe.vu .mot { opacity: 1; transform: none; }
}
.tampon-verso.imprime, .tampon-note.imprime { opacity: .6; }

.citation-claire, .citation-sombre { margin: 1.4em 0 0; padding: 16px 18px; border-radius: 12px; }
.citation-claire { background: rgb(255 255 255 / .12); border: 1.5px dashed rgb(255 255 255 / .55); }
.citation-sombre { background: rgb(255 251 244 / .55); border: 1.5px dashed rgb(58 34 20 / .4); }
.citation-claire p, .citation-sombre p { font: 700 1.1rem/1.45 var(--titre); margin: 0 0 .5em; }
.citation-claire cite, .citation-sombre cite { font-style: normal; font-weight: 600; font-size: .92rem; }
.cocotier-sejour { position: absolute; width: 200px; height: 300px; left: -50px; bottom: -20px; opacity: .14; transform-origin: 55% 98%; }
.info .bouton { margin-top: 12px; }
.fond-couchant .duo-photos .carte, .fond-couchant .timbre-photo { position: relative; z-index: 1; }
.duo > div { position: relative; z-index: 1; }

.plan { background: var(--blanc); padding: 10px; border-radius: 6px; box-shadow: var(--ombre); transform: rotate(1.5deg); }
.tampon-plan { position: absolute; width: 90px; height: 90px; right: 18px; top: 18px; color: var(--corail-fonce); --t-rot: -10deg; }
.fond-terre .lieu-ligne, .fond-lagon .lieu-ligne { color: var(--nuit); }

@media (min-width: 900px) { .lieu h2, .fetes h2 { font-size: clamp(1.6rem, 1rem + 1.4vw, 2.3rem); } }

@media (max-width: 899px) {
  .page-heros { padding-top: 22px; }
  .page-heros-photo { order: -1; }
  .villa-texte { order: -1; }
}

@media (max-width: 759px) {
  .avis-mosaique { columns: auto; display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 300px); gap: 16px; align-items: start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gouttiere)); padding: 10px var(--gouttiere) 24px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--lagon) transparent; }
  .avis-mosaique .avis-carte { margin: 0; scroll-snap-align: start; }
}

/* ——— Les icônes des petites cases (20 octobre) : une famille au trait, une icône par sujet ——— */
.ic { flex: none; width: 24px; height: 24px; color: var(--azur-fonce); }
.chiffres .ic { display: block; width: 28px; height: 28px; color: #fff; margin-bottom: 8px; }
.villa-pers, .villa-detail { display: flex; align-items: center; gap: 8px; }
.villa-pers .ic { width: 24px; height: 24px; }
.villa-detail .ic { color: var(--cacao); }
.cles dt { display: flex; align-items: center; gap: 8px; }
.cles dt .ic { width: 26px; height: 26px; color: inherit; opacity: 1; }

.fond-papier .cles dt .ic { color: var(--azur-fonce); }
.equip li, .activites li { display: inline-flex; align-items: center; gap: 8px; }
.equip li { padding: 6px 13px 6px 9px; }
.equip .ic, .activites .ic { color: inherit; }
.fond-papier .equip .ic { color: var(--azur-fonce); }
.info .info-ico { width: 32px; height: 32px; }
.faq summary { display: flex; align-items: center; gap: 12px; }
.faq summary .ic { width: 26px; height: 26px; color: var(--azur-fonce); }
.faq details:nth-child(3n+2) summary .ic { color: var(--corail-fonce); }
.faq details:nth-child(3n) summary .ic { color: var(--cacao); }
.lieu-ligne h3 { display: flex; align-items: center; gap: 9px; }
.lieu-ligne h3 .ic { width: 26px; height: 26px; }
.timbre-prix .ic { width: 26px; height: 26px; color: #fff; }
.pied-col .bouton .ic { width: 22px; height: 22px; color: inherit; }
.pied-col .bouton { gap: 9px; }
.bouton .ic { color: inherit; }

/* ——— Les décors au trait (20 octobre) : parapente, tortue, hibiscus, coquille, étoile de mer, paille-en-queue.
   Ils se dessinent une fois à l'arrivée, puis glissent avec le défilement (app.js). Toujours sur les bords, sous le contenu. ——— */
section:has(> .dec) { isolation: isolate; }
/* Téléphone et écrans moyens : dans la marge haute ou basse de la section (64 px, puis 104 px), jamais sur le contenu */
.dec { position: absolute; z-index: -1; display: block; width: auto; height: 54px; pointer-events: none; overflow: visible; color: var(--azur-fonce); opacity: .62; will-change: transform; }
.dec-hd { top: 5px; right: 12px; } .dec-hg { top: 5px; left: 12px; } .dec-bd { bottom: 5px; right: 12px; } .dec-bg { bottom: 5px; left: 12px; }
.fond-papier-bleu > .dec { color: var(--lagon); }
.fond-lagon > .dec { color: #fff; opacity: .58; }
.fond-terre > .dec { color: #FFE2B3; opacity: .68; }
.fond-couchant > .dec { color: var(--nuit); opacity: .5; }
.fond-nuit > .dec { color: var(--soleil); opacity: .62; }
@media (max-width: 899px) { .page-heros > .dec { display: none; } }
@media (min-width: 760px) {
  .dec { height: 82px; }
  .dec-hd { top: 11px; right: 4%; } .dec-hg { top: 11px; left: 4%; } .dec-bd { bottom: 11px; right: 4%; } .dec-bg { bottom: 11px; left: 4%; }
  .page-heros > .dec-bd { bottom: 4px; height: 76px; }
}
/* Grand écran : dans les marges de côté, plus grands */
.dec-parapente { --dw: 160px; } .dec-tortue { --dw: 200px; } .dec-hibiscus { --dw: 160px; } .dec-coquille { --dw: 130px; } .dec-etoile { --dw: 130px; } .dec-oiseau { --dw: 230px; }
@media (min-width: 1600px) {
  .dec { height: auto; width: min(var(--dw), calc((100vw - 1240px) / 2 - 30px)); }
  .dec-hd, .dec-bd { right: max(10px, calc((100vw - 1240px) / 2 - var(--dw) - 20px)); }
  .dec-hg, .dec-bg { left: max(10px, calc((100vw - 1240px) / 2 - var(--dw) - 20px)); }
  .dec-hd, .dec-hg { top: 16%; } .dec-bd, .dec-bg { bottom: 16%; }
  .page-heros > .dec-bd { bottom: 14%; height: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .dec path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.9s cubic-bezier(.45,.05,.2,1); transition-delay: calc(var(--k, 0) * 110ms); }
  .js .dec.trace path { stroke-dashoffset: 0; }
}

/* — bouton Menu en pilule (23 octobre) : au téléphone et à la tablette, l'en-tête garde le timbre seul (le nom revient dès 700 px, sur une ligne), et sous 420 px « Appeler » passe en icône seule — */
@media (max-width: 1099px) {
  .marque { flex: none; }
  .marque-nom { white-space: nowrap; }
}
@media (max-width: 699px) { .marque-nom { display: none; } }
@media (max-width: 419px) {
  .entete-tel { position: relative; width: 46px; min-width: 46px; padding: 0; gap: 0; justify-content: center; }
  .entete-tel .court { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}