@font-face { font-family: "Gilda Display"; src: url("polices/gilda.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("polices/hanken.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --nuit: #2E3A4E;
  --nuit-2: #1F2838;
  --ocre: #D39A0E;
  --ocre-clair: #F0C766;
  --creme: #FBF6EC;
  --sable: #F2E8D5;
  --hibiscus: #C8452F;
  --rose: #F8E4DC;
  --menthe: #DDEFE6;
  --feuille: #2F6B55;
  --lagon: #2A8F9E;
  --lagon-fonce: #1D5E6A;
  --bois: #3A2B22;
  --encre: #232B38;
  --gris: #586072;
  --titre: "Gilda Display", "Didot", Georgia, serif;
  --texte: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --marge: 16px;
  --rayon: 18px;
  --sortie: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--nuit-2); color: var(--encre); font: 400 17px/1.6 var(--texte); overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
section, article { position: relative; }
.nw { white-space: nowrap; }

.surtitre { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ocre-clair); margin-bottom: 12px; }
.surtitre-ocre { color: #A87806; }
.surtitre-nuit { color: var(--nuit); }
.surtitre-creme { color: var(--creme); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 600 16px/1.2 var(--texte); text-decoration: none; text-align: center; transition: transform .25s var(--sortie), background-color .25s, box-shadow .25s, border-color .25s; -webkit-tap-highlight-color: transparent; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--ocre-clair); outline-offset: 3px; }
.btn-ocre { background: var(--ocre); color: #1F2838; box-shadow: 0 6px 18px -8px rgba(211, 154, 14, .7); }
.btn-ocre:hover { background: #E2A915; }
.btn-clair, .btn-creme { background: var(--creme); color: var(--nuit); }
.btn-nuit { background: var(--nuit); color: var(--creme); box-shadow: 0 8px 20px -12px rgba(31, 40, 56, .8); }
.btn-nuit:hover { background: var(--nuit-2); }
.btn-contour { border: 1.5px solid rgba(240, 199, 102, .7); color: var(--creme); }
.btn-contour:hover { background: rgba(240, 199, 102, .12); }
.btn-contour-nuit, .btn-lien { border: 1.5px solid rgba(46, 58, 78, .45); color: var(--nuit); }
.btn-contour-nuit:hover, .btn-lien:hover { border-color: var(--nuit); background: rgba(46, 58, 78, .06); }
.btn-lien-clair { border-color: rgba(251, 246, 236, .55); color: var(--creme); }
.btn-lien-clair:hover { border-color: var(--creme); background: rgba(251, 246, 236, .08); }

/* En-tête */
/* Le menu du haut reste fixé en haut de l'écran pendant tout le défilement (demande de Maoni du 22 octobre) : il prend
   une ombre une fois la page descendue, sans jamais se cacher. */
.entete { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 10px; padding: 12px var(--marge); background: var(--nuit); color: var(--creme); }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.logo { width: 38px; height: 38px; flex: none; }
.marque-nom { font: 400 17px/1.05 var(--titre); }
.apercu { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(240, 199, 102, .55); color: var(--ocre-clair); cursor: help; }
.entete { transition: box-shadow .3s; }
.entete.descendu { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .55); }
.nav { display: none; }
.btn-entete-tel { margin-left: auto; min-height: 46px; padding: 0 18px; font-size: 15px; flex: none; background: var(--ocre); color: var(--nuit-2); }
.btn-entete-tel .long { display: none; }
.btn-entete { display: none; }
@media (min-width: 420px) { .btn-entete-tel .long { display: inline; } .btn-entete-tel .court { display: none; } }

/* Cadre en forme de case : le pignon de la photo et son toit tracé à l'ocre */
.case { position: relative; --toit: 46px; padding-top: 12px; }
.case-photo { position: relative; overflow: hidden; clip-path: polygon(0 var(--toit), 50% 0, 100% var(--toit), 100% 100%, 0 100%); border-radius: 0 0 var(--rayon) var(--rayon); background: var(--sable); }
.case-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--sortie); }
.case.vu .case-photo img, html:not(.js) .case-photo img { transform: scale(1); }
.toit { position: absolute; z-index: 2; top: 0; left: -4%; width: 108%; height: calc(var(--toit) + 12px); overflow: visible; pointer-events: none; clip-path: inset(-10px -10px -10px -10px); transition: clip-path 1.3s var(--sortie) .15s; }
.toit path { fill: none; stroke: var(--ocre); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
html.js .case:not(.vu) .toit { clip-path: inset(-10px 50% -10px 50%); }

/* Décors */
.deco { position: absolute; pointer-events: none; z-index: 0; }
.etoiles { position: absolute; left: 0; top: 0; width: 100%; height: min(100%, 440px); fill: #F4F1EA; opacity: .55; pointer-events: none; }
.etoiles .scintille { animation: scintille 3.4s ease-in-out infinite alternate; animation-play-state: paused; }
.actif .etoiles .scintille { animation-play-state: running; }
@keyframes scintille { from { opacity: 1; } to { opacity: .15; } }
.frise { position: absolute; left: 0; right: 0; top: 18px; color: var(--ocre); opacity: .35; pointer-events: none; }

/* Haut de page */
.heros { position: relative; background: radial-gradient(120% 70% at 80% 0%, #3B4A63 0%, var(--nuit) 55%, #263144 100%); color: var(--creme); padding: 4px var(--marge) 36px; overflow: clip; }
.heros-visuel { position: relative; padding-top: 10px; }
.case-heros { --toit: 50px; }
.case-heros .case-photo { height: clamp(200px, 34svh, 330px); }
.lune { position: absolute; z-index: 3; top: 6px; right: 6%; width: 30px; height: 30px; fill: var(--ocre-clair); opacity: 0; transform: rotate(-20deg) scale(.6); transition: opacity 1s .9s, transform 1.2s var(--sortie) .9s; }
.heros.pret .lune, html:not(.js) .lune { opacity: 1; transform: none; }
.oiseau { pointer-events: none; }
.oiseau-corps { fill: #F4F1EA; }
.oiseau-queue { fill: none; stroke: #F4F1EA; stroke-width: 1.6; stroke-linecap: round; }
.heros-oiseau { position: absolute; z-index: 3; top: 2px; left: 4%; width: 92px; opacity: .92; }
html.js .heros-oiseau { opacity: 0; transform: translate(-40px, 26px) rotate(6deg); }
.heros.pret .heros-oiseau { animation: vol 3.2s var(--sortie) .4s forwards; }
@keyframes vol {
  0% { opacity: 0; transform: translate(-40px, 26px) rotate(6deg); }
  25% { opacity: .92; }
  100% { opacity: .92; transform: translate(0, 0) rotate(-4deg); }
}
.heros-texte { position: relative; margin-top: 16px; }
.heros-texte .surtitre { margin-bottom: 8px; font-size: 13px; }
.heros h1 { font-size: clamp(27px, 7.4vw, 34px); line-height: 1.12; }
.note-heros { margin-top: 10px; font-size: 16px; color: rgba(251, 246, 236, .86); }
.note-heros strong { color: var(--creme); font-weight: 700; }
.etoiles-note { color: var(--ocre-clair); letter-spacing: .08em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.actions .btn { flex: 1 1 0; white-space: nowrap; padding: 0 14px; }
.actions .btn:first-child { flex-grow: 1.3; }
.heros-sous { margin-top: 18px; color: rgba(251, 246, 236, .82); max-width: 34em; }

/* Ruban */
.ruban { background: var(--ocre); color: var(--nuit-2); overflow: hidden; padding: 14px 0; border-top: 3px solid var(--ocre-clair); }
.ruban-piste { display: flex; align-items: center; gap: 18px; width: max-content; font: 400 21px/1 var(--titre); will-change: transform; }
.ruban-piste span { white-space: nowrap; }
.ruban-fleur { position: static; width: 22px; height: 22px; color: var(--hibiscus); flex: none; }

/* Accueil */
.accueil { background: var(--creme); padding: 76px var(--marge) 56px; display: grid; gap: 22px; overflow: clip; }
.accueil-palme { width: 220px; height: 220px; right: -60px; top: 40px; color: var(--feuille); opacity: .14; }
.accueil > *:not(.deco):not(.frise) { position: relative; z-index: 1; }
.accueil h2 { font-size: clamp(30px, 8vw, 46px); line-height: 1.1; color: var(--nuit); }
.accueil-texte { display: grid; gap: 14px; color: var(--gris); }
.accueil-points { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; border-top: 1px solid rgba(46, 58, 78, .15); padding-top: 20px; }
.accueil-points li { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; gap: 12px; }
.accueil-points strong { font: 400 clamp(30px, 8vw, 44px)/1 var(--titre); color: var(--ocre); }
.accueil-points span { font-size: 16px; line-height: 1.35; color: var(--gris); }

/* Hébergements : l'entrée et le sommaire */
.hebergements { padding: 64px var(--marge) 48px; background: var(--sable); }
.tete-section { max-width: 760px; margin-bottom: 28px; position: relative; z-index: 1; }
.tete-section h2 { font-size: clamp(29px, 7.6vw, 44px); line-height: 1.1; color: var(--nuit); }
.tete-sous { margin-top: 14px; color: var(--gris); }
.sommaire { display: flex; flex-wrap: wrap; gap: 8px; }
.sommaire a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--creme); color: var(--nuit); text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid rgba(211, 154, 14, .45); transition: transform .25s var(--sortie), background-color .25s; }
.sommaire a:hover { transform: translateY(-2px); background: #fff; }
.sommaire span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nuit); color: var(--ocre-clair); font: 400 14px/1 var(--titre); }

/* Visite d'un hébergement */
.visite { padding: 64px var(--marge) 64px; display: grid; gap: 30px; overflow: clip; }
.visite > *:not(.deco):not(.etoiles) { position: relative; z-index: 1; }
.visite-hibiscus { background: linear-gradient(180deg, var(--rose), #FBEDE7); }
.visite-hibiscus .visite-deco { width: 180px; height: 180px; right: -40px; top: 20px; color: var(--hibiscus); opacity: .16; }
.visite-toucan { background: linear-gradient(180deg, var(--menthe), #EEF7F1); }
.visite-toucan .visite-deco { width: 240px; height: 240px; left: -70px; bottom: 10px; color: var(--feuille); opacity: .16; transform: scaleX(-1); }
.visite-bungalow { background: linear-gradient(180deg, #F3EBDB, var(--sable)); }
.visite-bungalow .visite-deco { width: 220px; height: 74px; right: -30px; top: 30px; color: var(--lagon); opacity: .3; }
.visite-chalet { background: radial-gradient(120% 80% at 10% 0%, #4A382C, var(--bois) 60%); color: var(--creme); }
.visite-chalet .visite-deco { width: 240px; height: 240px; right: -70px; top: 30px; color: var(--ocre); opacity: .18; }
.visite-villa { background: linear-gradient(160deg, #1B3A4A 0%, var(--lagon-fonce) 55%, var(--lagon) 120%); color: var(--creme); }
.villa-etoiles { opacity: .35; height: 50%; }
.visite-photos { display: grid; grid-template-columns: 1.15fr .85fr; gap: 0 12px; align-items: start; }
.case-visite { grid-column: 1 / -1; }
.case-visite .case-photo { aspect-ratio: 4 / 3.3; }
.visite-petite { border-radius: 14px; overflow: hidden; border: 5px solid var(--creme); box-shadow: 0 14px 26px -16px rgba(31, 40, 56, .6); margin-top: -40px; z-index: 3; position: relative; }
.visite-petite img { width: 100%; height: 100%; object-fit: cover; }
.visite-petite.p1 { aspect-ratio: 4 / 3; transform: rotate(-2deg); margin-left: 10px; }
.visite-petite.p2 { aspect-ratio: 3 / 4; transform: rotate(3deg); margin-right: 8px; margin-top: -28px; }
.visite-chalet .visite-petite, .visite-villa .visite-petite { border-color: var(--ocre-clair); }
.visite-num { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lagon); margin-bottom: 8px; }
.visite-hibiscus .visite-num { color: var(--hibiscus); }
.visite-toucan .visite-num { color: var(--feuille); }
.visite-chalet .visite-num, .visite-villa .visite-num { color: var(--ocre-clair); }
.visite h3 { font-size: clamp(28px, 7.4vw, 42px); line-height: 1.12; color: var(--nuit); }
.visite-chalet h3, .visite-villa h3 { color: var(--creme); }
.visite-texte > p:not(.visite-num) { margin-top: 14px; color: var(--gris); }
.visite-chalet .visite-texte > p:not(.visite-num), .visite-villa .visite-texte > p:not(.visite-num) { color: rgba(251, 246, 236, .84); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.puces li { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--nuit); border: 1px solid rgba(211, 154, 14, .45); }
.visite-chalet .puces li, .visite-villa .puces li { background: rgba(251, 246, 236, .1); color: var(--creme); border-color: rgba(240, 199, 102, .5); }
.visite-avis { margin-top: 20px; padding: 16px 18px; border-radius: 4px 16px 16px 16px; background: rgba(255, 255, 255, .65); font: 400 19px/1.35 var(--titre); color: var(--nuit); border-left: 3px solid var(--ocre); }
.visite-avis cite { display: block; margin-top: 8px; font: 600 14px/1.2 var(--texte); font-style: normal; color: #8A6A1C; }
.visite-chalet .visite-avis, .visite-villa .visite-avis { background: rgba(251, 246, 236, .08); color: var(--creme); }
.visite-chalet .visite-avis cite, .visite-villa .visite-avis cite { color: var(--ocre-clair); }
.visite-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.visite-actions .btn { width: 100%; }

/* Réserver en direct */
.direct { background: linear-gradient(170deg, var(--ocre-clair), var(--ocre) 70%); color: var(--nuit-2); padding: 76px var(--marge) 64px; display: grid; gap: 26px; overflow: clip; }
.direct-frise { color: var(--nuit); opacity: .25; }
.direct h2 { font-size: clamp(29px, 7.6vw, 46px); line-height: 1.1; color: var(--nuit-2); }
.raisons { display: grid; gap: 14px; }
.raisons li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 18px; border-radius: 18px; background: rgba(251, 246, 236, .55); }
.raison-num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--nuit); color: var(--ocre-clair); font: 400 22px/1 var(--titre); }
.raisons strong { display: block; font: 400 21px/1.2 var(--titre); margin-bottom: 4px; }
.direct-avis blockquote { font: 400 clamp(24px, 6.4vw, 36px)/1.2 var(--titre); }
.direct-avis figcaption { margin-top: 8px; font-size: 15px; font-weight: 600; }
.direct-actions { margin-top: 0; }

/* Une journée : le fond passe du matin à la nuit */
.journee { padding: 80px var(--marge) 72px; background: linear-gradient(180deg, #FBEBC8 0%, #F6E3B4 16%, #CBE8E5 28%, var(--lagon) 40%, var(--lagon-fonce) 56%, var(--nuit) 80%, var(--nuit-2) 100%); }
.moments { display: grid; gap: 44px; position: relative; }
.moments::before { content: ""; position: absolute; left: 23px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--ocre), rgba(240, 199, 102, .3)); }
.moment { position: relative; padding-left: 66px; }
.moment-ico { position: absolute; left: 0; top: -4px; width: 48px; height: 48px; padding: 9px; border-radius: 50%; background: var(--creme); color: var(--ocre); box-shadow: 0 6px 16px -8px rgba(31, 40, 56, .5); z-index: 1; }
.moment-heure { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #A87806; margin-bottom: 6px; }
.moment h3 { font-size: clamp(25px, 6.6vw, 36px); line-height: 1.15; color: var(--nuit); }
.moment > p:not(.moment-heure) { margin-top: 12px; color: var(--gris); }
.moment-apres h3, .moment-soir h3 { color: var(--creme); }
.moment-apres > p:not(.moment-heure), .moment-soir > p:not(.moment-heure) { color: rgba(251, 246, 236, .86); }
.moment-apres .moment-heure { color: var(--creme); }
.moment-jour > p:not(.moment-heure) { color: var(--nuit-2); }
.moment-soir .moment-heure { color: var(--ocre-clair); }
.moment-soir .moment-ico { background: var(--nuit-2); color: var(--ocre-clair); }
.moment-soir .btn { margin-top: 18px; }
.moment-photos { position: relative; margin-top: 18px; padding-bottom: 44px; }
.case-spa { width: 88%; --toit: 40px; }
.case-spa .case-photo { aspect-ratio: 1 / 1; }
.moment-petite { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 5px solid var(--creme); transform: rotate(-3deg); box-shadow: 0 14px 28px -14px rgba(31, 40, 56, .55); z-index: 3; }
.moment-petite img { width: 100%; height: 100%; object-fit: cover; }

/* Table d'hôtes : la nappe madras */
.table { background-color: var(--nuit-2); background-image: repeating-linear-gradient(90deg, rgba(211, 154, 14, .07) 0 22px, transparent 22px 60px, rgba(200, 69, 47, .07) 60px 72px, transparent 72px 120px), repeating-linear-gradient(0deg, rgba(211, 154, 14, .07) 0 22px, transparent 22px 60px, rgba(200, 69, 47, .07) 60px 72px, transparent 72px 120px); color: var(--creme); padding: 76px var(--marge); display: grid; gap: 40px; }
.table h2 { font-size: clamp(30px, 8vw, 48px); line-height: 1.1; }
.table-tete > p:not(.surtitre) { margin-top: 16px; color: rgba(251, 246, 236, .8); }
.table .surtitre-ocre { color: var(--ocre-clair); }
.table-citation { position: relative; padding-left: 22px; border-left: 3px solid var(--ocre); }
.table-citation blockquote { font: 400 clamp(24px, 6.4vw, 36px)/1.25 var(--titre); color: var(--ocre-clair); }
.table-citation figcaption { margin-top: 12px; font-size: 15px; color: rgba(251, 246, 236, .7); }
.gouts-titre { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(251, 246, 236, .7); margin-bottom: 16px; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 10px; }
.etiquettes li { position: relative; display: grid; gap: 2px; padding: 10px 14px 10px 26px; border-radius: 12px; background: var(--creme); color: var(--nuit); box-shadow: inset 0 0 0 4px var(--creme), inset 0 0 0 5px rgba(211, 154, 14, .55); transform: rotate(var(--r, 0deg)); transition: transform .3s var(--sortie); }
.etiquettes li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--nuit-2); }
.etiquettes li:hover { transform: rotate(0) translateY(-3px); }
.etiquettes li:nth-child(3n+1) { --r: -1.5deg; }
.etiquettes li:nth-child(3n+2) { --r: 1deg; }
.etiquettes li:nth-child(4n) { background: var(--ocre-clair); box-shadow: inset 0 0 0 4px var(--ocre-clair), inset 0 0 0 5px rgba(31, 40, 56, .35); }
.plat { font: 400 18px/1.15 var(--titre); }
.qui { font-size: 13px; font-weight: 600; color: #8A6A1C; }
.etiquettes li:nth-child(4n) .qui { color: var(--nuit); }
.table-appel { padding: 22px 20px; border-radius: 20px; background: rgba(251, 246, 236, .07); border: 1px solid rgba(240, 199, 102, .35); }
.table-appel > p { font: 400 21px/1.3 var(--titre); }

/* Équipements */
.equip { padding: 72px var(--marge) 64px; display: grid; gap: 26px; overflow: clip; background: var(--creme); }
.equip > *:not(.deco) { position: relative; z-index: 1; }
.equip-palme { width: 230px; height: 230px; right: -60px; bottom: -30px; color: var(--feuille); opacity: .12; }
.equip h2 { font-size: clamp(29px, 7.6vw, 44px); line-height: 1.1; color: var(--nuit); }
.equipements { display: grid; grid-template-columns: 1fr; gap: 12px; }
.equipements li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.35; color: var(--nuit); }
.ico { width: 40px; height: 40px; flex: none; padding: 8px; border-radius: 12px; background: var(--sable); fill: none; stroke: var(--lagon); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Alentours : des cartes postales sur le lagon */
.alentours { background: linear-gradient(180deg, var(--lagon) 0%, var(--lagon-fonce) 100%); color: var(--creme); padding: 76px var(--marge) 64px; overflow: clip; }
.alentours .tete-section h2 { color: var(--creme); }
.alentours-vague { width: 260px; height: 86px; right: -40px; top: 24px; color: var(--creme); opacity: .14; }
.cartes-postales { display: grid; gap: 16px; position: relative; z-index: 1; }
.carte-postale { position: relative; padding: 20px 112px 20px 20px; border-radius: 6px; background: var(--creme); color: var(--encre); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .55); background-image: linear-gradient(90deg, transparent calc(100% - 96px), rgba(46, 58, 78, .12) calc(100% - 96px), rgba(46, 58, 78, .12) calc(100% - 95px), transparent calc(100% - 95px)); }
.carte-postale:nth-child(odd) { transform: rotate(-1deg); }
.carte-postale:nth-child(even) { transform: rotate(.8deg); }
.carte-postale h3 { font-size: 23px; line-height: 1.15; color: var(--nuit); }
.carte-postale p { margin-top: 6px; color: var(--gris); font-size: 16px; }
.timbre { position: absolute; top: 14px; right: 14px; width: 58px; height: 66px; display: grid; place-items: center; background: var(--rose); border: 2px dashed rgba(200, 69, 47, .55); border-radius: 3px; }
.carte-postale:nth-child(3n+2) .timbre { background: var(--menthe); border-color: rgba(47, 107, 85, .5); }
.carte-postale:nth-child(3n) .timbre { background: #FBEBC8; border-color: rgba(211, 154, 14, .6); }
.timbre-ico { position: static; width: 34px; height: 34px; color: var(--nuit); }
.alentours-actions { position: relative; z-index: 1; margin-top: 30px; }

/* Avis */
/* Les marges de page sont sur la section (et plus sur chaque enfant) : sinon, en deux colonnes, chaque colonne
   perdait deux fois la marge et la citation et la carte rouge s'écrasaient sur grand écran (capture de Maoni, 20 oct). */
.avis { background: var(--sable); padding: 76px var(--marge) 64px; display: grid; gap: 40px; overflow: clip; }
.avis > *:not(.bande):not(.deco) { position: relative; z-index: 1; min-width: 0; }
.avis > .bande { margin: 0 calc(-1 * var(--marge)); }
.avis-fleur { width: 160px; height: 160px; right: -30px; top: 30px; color: var(--hibiscus); opacity: .14; }
.avis-tete { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.avis-note { display: flex; align-items: baseline; gap: 8px; color: var(--nuit); }
.chiffre { font: 400 clamp(96px, 28vw, 168px)/.85 var(--titre); letter-spacing: -.03em; }
.sur { font: 400 24px/1 var(--titre); color: var(--gris); }
.avis-detail { font-size: 15px; color: var(--gris); padding-bottom: 6px; }
.avis-detail .etoiles-note { font-size: 20px; color: var(--ocre); }
.avis-geante blockquote { font: 400 clamp(32px, 8.6vw, 60px)/1.1 var(--titre); color: var(--nuit); }
.avis-geante .gm { color: var(--ocre); }
.avis-geante figcaption { margin-top: 14px; color: var(--gris); font-size: 15px; }
.avis-photo { position: relative; padding-bottom: 8px; }
.avis-photo-img { width: 72%; aspect-ratio: 3 / 4; border-radius: 160px 160px var(--rayon) var(--rayon); overflow: hidden; }
.avis-photo-img img { width: 100%; height: 100%; object-fit: cover; }
.avis-photo-texte { position: relative; z-index: 2; margin: -96px 0 0 22%; padding: 20px 20px 18px; background: var(--hibiscus); color: #FFF6EE; border-radius: 16px; font: 400 21px/1.3 var(--titre); box-shadow: 0 18px 30px -16px rgba(120, 30, 20, .55); transform: rotate(-1.5deg); }
.avis-photo-texte cite { display: block; margin-top: 10px; font: 600 14px/1.2 var(--texte); font-style: normal; opacity: .9; }
.bande { overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 6px 0 14px; position: relative; z-index: 1; }
.bande::-webkit-scrollbar { display: none; }
.bande:focus-visible { outline: 3px solid var(--ocre); outline-offset: -3px; }
.bande-liste { display: flex; gap: 14px; padding: 0 var(--marge); width: max-content; align-items: flex-start; }
.carte-avis { scroll-snap-align: center; width: min(78vw, 340px); padding: 22px 20px; border-radius: 18px; background: var(--creme); color: var(--encre); box-shadow: 0 10px 24px -18px rgba(31, 40, 56, .6); }
.carte-avis:nth-child(odd) { margin-top: 22px; }
.carte-avis p { font-size: 17px; line-height: 1.5; }
.carte-avis cite { display: block; margin-top: 12px; font-style: normal; font-weight: 600; font-size: 14px; color: #8A6A1C; }
.carte-ocre { background: var(--ocre-clair); }
.carte-ocre cite { color: var(--nuit); }
.carte-nuit { background: var(--nuit); color: var(--creme); }
.carte-nuit p { font: 400 20px/1.3 var(--titre); }
.carte-nuit cite { color: var(--ocre-clair); }
.bande-aide { margin-top: -26px; font-size: 14px; color: var(--gris); }
.avis-actions { margin-top: 0; }

/* Réserver et accès */
.reserver { position: relative; background: radial-gradient(110% 70% at 20% 0%, #3B4A63, var(--nuit) 60%); color: var(--creme); padding: 76px var(--marge) 64px; display: grid; gap: 44px; overflow: clip; }
.reserver > *:not(.etoiles):not(.oiseau) { position: relative; z-index: 1; }
.reserver-oiseau { position: absolute; top: 26px; right: 6%; width: 74px; opacity: .55; }
.reserver h2 { font-size: clamp(30px, 8vw, 50px); line-height: 1.1; padding-right: 40px; }
.reserver-tete > p:not(.surtitre) { margin-top: 16px; color: rgba(251, 246, 236, .82); }
.reserver .surtitre-ocre { color: var(--ocre-clair); }
.actions-colonne { flex-direction: column; margin-top: 26px; }
.actions-colonne .btn { flex: none; width: 100%; }
.acces { border-top: 1px solid rgba(240, 199, 102, .3); padding-top: 28px; display: grid; gap: 18px; }
.acces-titre { font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ocre-clair); }
.adresse { font: 400 24px/1.25 var(--titre); }
.distances { display: grid; gap: 8px; color: rgba(251, 246, 236, .85); }
.distances strong { color: var(--ocre-clair); font-weight: 700; margin-right: 6px; }
.acces .btn { justify-self: start; min-width: 180px; }

/* Pied */
.pied { background: var(--nuit-2); color: rgba(251, 246, 236, .78); padding: 36px var(--marge) 40px; display: grid; gap: 12px; font-size: 15px; }
.pied-marque { display: flex; align-items: center; gap: 10px; font: 400 21px/1.2 var(--titre); color: var(--creme); }
.pied-marque .logo { width: 32px; height: 32px; }
.pied a { color: var(--ocre-clair); }
.pied-mention { font-size: 14px; color: rgba(251, 246, 236, .6); }

/* Barre d'appel collante (téléphone) */
.barre-appel { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: var(--nuit-2); box-shadow: 0 -8px 20px -10px rgba(0, 0, 0, .5); }
.barre-appel a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; }
.barre-appel a:nth-child(1) { background: var(--ocre); color: var(--nuit-2); }
.barre-appel a:nth-child(2) { border: 1.5px solid rgba(240, 199, 102, .6); color: var(--creme); flex: .7; }
.barre-appel a:nth-child(3) { background: var(--creme); color: var(--nuit); }
body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
@media (min-width: 761px) { .barre-appel { display: none; } body { padding-bottom: 0; } }

/* Matières des fonds : grain d'enduit ou de papier, motifs du domaine dessinés derrière le contenu, photos voilées */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .24 0 0 0 0 .12 1.6 0 0 0 -.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .85 1.4 0 0 0 -.77'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
main > section, main > article { isolation: isolate; }
.fond { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.heros { background-image: var(--grain-clair), radial-gradient(120% 70% at 80% 0%, #3B4A63 0%, var(--nuit) 55%, #263144 100%); }

.accueil { background: var(--grain), radial-gradient(60% 45% at 92% 6%, rgba(240, 199, 102, .32), transparent 70%), linear-gradient(180deg, var(--creme), #F5EAD3); }
.accueil::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 52%; background: url("img/jardin-1200.webp") center 30% / cover; opacity: .17; -webkit-mask-image: linear-gradient(180deg, transparent, #000 75%); mask-image: linear-gradient(180deg, transparent, #000 75%); pointer-events: none; }

.hebergements { background: var(--grain), radial-gradient(70% 80% at 0% 100%, rgba(211, 154, 14, .16), transparent 70%), var(--sable); }
.fond-tresse { color: #A87806; opacity: .075; }

.visite-hibiscus { background: var(--grain), radial-gradient(50% 40% at 85% 12%, rgba(255, 255, 255, .6), transparent 70%), linear-gradient(180deg, var(--rose), #FBEDE7); }
.fond-hibiscus { color: var(--hibiscus); opacity: .11; }
.visite-toucan { background: var(--grain), radial-gradient(55% 45% at 12% 10%, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(180deg, var(--menthe), #EEF7F1); }
.fond-feuilles { color: var(--feuille); opacity: .07; }
/* le bungalow : les lames de sa terrasse en bois */
.visite-bungalow { background: var(--grain), radial-gradient(60% 40% at 90% 0%, rgba(255, 255, 255, .5), transparent 70%), repeating-linear-gradient(180deg, rgba(120, 84, 40, .09) 0 2px, transparent 2px 44px), repeating-linear-gradient(180deg, rgba(120, 84, 40, .035) 0 44px, transparent 44px 132px), linear-gradient(180deg, #F3EBDB, var(--sable)); }
/* le chalet : ses planches verticales */
.visite-chalet { background: var(--grain-clair), repeating-linear-gradient(90deg, rgba(0, 0, 0, .26) 0 2px, transparent 2px 92px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 8px), radial-gradient(120% 80% at 10% 0%, #4A382C, var(--bois) 60%); }
/* la villa : les reflets de la piscine */
.fond-caustiques { top: auto; height: 70%; color: #A9EEF2; opacity: .3; }
.fond-caustiques .c1 { animation: reflet 3.4s ease-in-out infinite alternate; }
.fond-caustiques .c2 { animation: reflet 3.4s ease-in-out -1.7s infinite alternate-reverse; }
@keyframes reflet { from { opacity: .1; transform: translate(0, 0); } to { opacity: 1; transform: translate(7px, -3px); } }

/* réserver en direct : le soleil qui rayonne du coin et les toits de case */
.direct { background: var(--grain), repeating-conic-gradient(from 180deg at 100% 0%, rgba(255, 248, 225, .16) 0 2.5deg, transparent 2.5deg 8deg), linear-gradient(170deg, var(--ocre-clair), var(--ocre) 70%); }
.fond-toits { color: var(--nuit); opacity: .07; }

.journee { background-image: var(--grain), linear-gradient(180deg, #FBEBC8 0%, #F6E3B4 16%, #CBE8E5 28%, var(--lagon) 40%, var(--lagon-fonce) 56%, var(--nuit) 80%, var(--nuit-2) 100%); }
.fond-nuages { bottom: auto; height: 560px; color: #fff; opacity: .6; }
.nuage { animation: derive 40s ease-in-out infinite alternate; }
.nuage.n2 { animation-duration: 54s; animation-delay: -22s; }
.nuage.n3 { animation-duration: 46s; animation-delay: -12s; }
.nuage.n4 { animation-duration: 62s; animation-delay: -34s; }
@keyframes derive { from { transform: translateX(-70px); } to { transform: translateX(150px); } }
.journee .journee-etoiles { top: auto; bottom: 0; height: 34%; z-index: -1; }

.table { background-image: var(--grain-clair), repeating-linear-gradient(90deg, rgba(211, 154, 14, .07) 0 22px, transparent 22px 60px, rgba(200, 69, 47, .07) 60px 72px, transparent 72px 120px), repeating-linear-gradient(0deg, rgba(211, 154, 14, .07) 0 22px, transparent 22px 60px, rgba(200, 69, 47, .07) 60px 72px, transparent 72px 120px); }
.fond-vapeur { position: absolute; z-index: 0; top: 26px; right: var(--marge); width: 50px; color: var(--ocre-clair); opacity: .6; pointer-events: none; }
.fond-vapeur .boucle { opacity: 0; animation: vapeur 4.5s ease-in-out infinite; }
.fond-vapeur .v2 { animation-delay: -1.5s; }
.fond-vapeur .v3 { animation-delay: -3s; }
@keyframes vapeur { 0% { opacity: 0; transform: translateY(16px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }

.equip { background: var(--grain), radial-gradient(50% 50% at 100% 100%, rgba(42, 143, 158, .12), transparent 70%), var(--creme); }
.equip::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 46%; background: url("img/villa-spa-1200.webp") center / cover; opacity: .15; -webkit-mask-image: linear-gradient(0deg, transparent, #000 80%); mask-image: linear-gradient(0deg, transparent, #000 80%); pointer-events: none; }

.alentours { background: var(--grain-clair), radial-gradient(60% 50% at 0% 0%, rgba(255, 255, 255, .14), transparent 70%), linear-gradient(180deg, var(--lagon) 0%, var(--lagon-fonce) 100%); }
.fond-topo { color: var(--creme); opacity: .13; }

/* les avis : un lin tissé, comme les draps du domaine */
.avis { background: var(--grain), radial-gradient(55% 45% at 85% 25%, rgba(255, 255, 255, .55), transparent 70%), repeating-linear-gradient(0deg, rgba(46, 58, 78, .045) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(46, 58, 78, .035) 0 1px, transparent 1px 5px), var(--sable); }

.reserver { background: var(--grain-clair), radial-gradient(110% 70% at 20% 0%, #3B4A63, var(--nuit) 60%); }
.reserver::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 60%; background: url("img/villa-piscine-1200.webp") center / cover; opacity: .12; filter: grayscale(.4); -webkit-mask-image: linear-gradient(180deg, transparent, #000 80%); mask-image: linear-gradient(180deg, transparent, #000 80%); pointer-events: none; }

/* Décors animés : palmes qui se balancent, hibiscus qui respirent, vagues qui avancent, oiseau qui plane, soleil qui tourne.
   Transformations et opacité seulement, et seulement quand leur section est à l'écran (classe actif posée par app.js). */
.deco-palme .boucle { transform-box: fill-box; transform-origin: 0% 100%; animation: balance 6.5s ease-in-out infinite alternate; }
@keyframes balance { from { transform: rotate(-2.5deg); } to { transform: rotate(3deg); } }
.visite-deco.deco-hibiscus .boucle, .avis-fleur .boucle { transform-box: fill-box; transform-origin: 50% 50%; animation: respire 7s ease-in-out infinite alternate; }
@keyframes respire { from { transform: rotate(-8deg) scale(.96); } to { transform: rotate(8deg) scale(1.04); } }
.visite-deco.deco-vague .boucle, .alentours-vague .boucle { animation: houle 5s linear infinite; }
@keyframes houle { to { transform: translateX(-40px); } }
.reserver-oiseau.boucle { animation: plane 7s ease-in-out infinite alternate; }
@keyframes plane { from { transform: translate(0, 0) rotate(-3deg); } to { transform: translate(-22px, 12px) rotate(3deg); } }
.moment-matin .moment-ico.boucle { animation: tourne 36s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
html.js main > :not(.actif) .boucle { animation-play-state: paused !important; }

/* Apparitions */
html.js .reveler { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--sortie), transform .9s var(--sortie); }
html.js .reveler.vu { opacity: 1; transform: none; }
html.js .visite-petite.p1.reveler.vu { transform: rotate(-2deg); }
html.js .visite-petite.p2.reveler.vu { transform: rotate(3deg); }
html.js .carte-postale.reveler:nth-child(odd).vu { transform: rotate(-1deg); }
html.js .carte-postale.reveler:nth-child(even).vu { transform: rotate(.8deg); }
.visite-petite.p2.reveler { transition-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveler { opacity: 1; transform: none; transition: none; }
  html.js .visite-petite.p1.reveler { transform: rotate(-2deg); }
  html.js .visite-petite.p2.reveler { transform: rotate(3deg); }
  html.js .case:not(.vu) .toit { clip-path: none; }
  .toit, .case-photo img, .lune { transition: none; }
  .case-photo img { transform: none; }
  html.js .heros-oiseau, .heros.pret .heros-oiseau { opacity: .92; transform: none; animation: none; }
  .lune { opacity: 1; transform: none; }
  .etoiles .scintille { animation: none; }
  .boucle { animation: none !important; }
  .fond-vapeur .boucle { opacity: .7; }
}

/* Écrans bas de téléphone : le titre, la note et le bouton d'appel restent au-dessus de la barre */
@media (max-width: 760px) and (max-height: 700px) {
  .case-heros .case-photo { height: 196px; }
  .heros h1 { font-size: 26px; }
  .heros-texte { margin-top: 12px; }
}

/* Tablette et ordinateur */
@media (min-width: 640px) {
  :root { --marge: 32px; }
  .equipements { grid-template-columns: 1fr 1fr; }
  .accueil-points span { font-size: 15px; }
  .cartes-postales { grid-template-columns: 1fr 1fr; }
  .visite-actions { flex-direction: row; flex-wrap: wrap; }
  .visite-actions .btn { width: auto; }
}

@media (min-width: 960px) {
  :root { --marge: max(48px, calc((100vw - 1180px) / 2)); }
  .entete { padding-top: 16px; padding-bottom: 16px; gap: 18px; }
  .logo { width: 44px; height: 44px; }
  .marque-nom { font-size: 20px; }
  .nav { display: flex; gap: 24px; margin-left: auto; }
  .nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: rgba(251, 246, 236, .85); padding: 6px 0; border-bottom: 1.5px solid transparent; transition: border-color .2s, color .2s; }
  .nav a:hover { color: var(--creme); border-color: var(--ocre); }
  .btn-entete-tel { margin-left: 8px; background: transparent; color: var(--creme); border: 1.5px solid rgba(240, 199, 102, .6); }
  .btn-entete { display: inline-flex; min-height: 46px; padding: 0 22px; font-size: 15px; }

  .heros { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; padding-top: 40px; padding-bottom: 80px; }
  .heros-texte { order: -1; margin-top: 0; }
  .heros h1 { font-size: clamp(40px, 3.6vw, 54px); }
  .heros-texte .surtitre { font-size: 14px; }
  .note-heros { font-size: 17px; margin-top: 18px; }
  .actions { margin-top: 26px; }
  .actions .btn, .actions .btn:first-child { flex: 0 1 auto; padding: 0 26px; }
  .case-heros { --toit: 92px; }
  .case-heros .case-photo { height: min(56vh, 520px); }
  .lune { width: 40px; height: 40px; top: 0; }
  .heros-oiseau { width: 130px; top: -10px; }
  .ruban-piste { font-size: 26px; gap: 26px; }
  .ruban-fleur { width: 26px; height: 26px; }

  .accueil { grid-template-columns: 1.2fr 1fr; column-gap: 72px; padding-top: 120px; padding-bottom: 100px; align-items: end; }
  .accueil-palme { width: 380px; height: 380px; right: -40px; top: 30px; }
  .accueil-points { grid-column: 1 / -1; margin-top: 30px; padding-top: 28px; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .accueil-points li { grid-template-columns: auto 1fr; }
  .accueil-texte { font-size: 18px; }

  .hebergements { padding-top: 110px; padding-bottom: 72px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: end; }
  .tete-section { margin-bottom: 0; }

  .visite { grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; padding-top: 110px; padding-bottom: 110px; }
  .visite-inverse .visite-photos { order: 2; }
  .case-visite { --toit: 76px; }
  .visite-petite { margin-top: -70px; }
  .visite-petite.p2 { margin-top: -40px; }
  .visite-hibiscus .visite-deco { width: 320px; height: 320px; right: 2%; top: 40px; }
  .visite-toucan .visite-deco { width: 420px; height: 420px; left: -40px; bottom: -20px; }
  .visite-chalet .visite-deco { width: 400px; height: 400px; right: 0; top: 20px; }
  .visite-bungalow .visite-deco { width: 360px; height: 120px; right: 4%; top: 50px; }

  .direct { grid-template-columns: 1fr 1fr; column-gap: 72px; row-gap: 36px; padding-top: 110px; padding-bottom: 100px; align-items: start; }
  .direct-tete { grid-column: 1; }
  .raisons { grid-column: 2; grid-row: 1 / span 3; }
  .direct-avis, .direct-actions { grid-column: 1; }
  .direct-actions .btn, .direct-actions .btn:first-child { flex: 0 1 auto; }

  .journee { padding-top: 120px; padding-bottom: 110px; }
  .journee-tete { margin: 0 auto 60px; text-align: center; }
  .moments { max-width: 860px; margin: 0 auto; gap: 72px; }
  .moments::before { left: 31px; }
  .moment { padding-left: 100px; }
  .moment-ico { width: 64px; height: 64px; padding: 13px; }
  .moment-photos { max-width: 620px; }

  .table { grid-template-columns: 1fr 1fr; column-gap: 80px; row-gap: 56px; padding-top: 110px; padding-bottom: 110px; align-items: center; }
  .gouts, .table-appel { grid-column: 1 / -1; }
  .table-appel { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 26px 32px; }
  .table-appel .actions { margin-top: 0; flex-wrap: nowrap; }
  .plat { font-size: 21px; }
  .etiquettes { gap: 16px; }

  .equip { grid-template-columns: 1fr 1.4fr; gap: 72px; align-items: center; padding-top: 100px; padding-bottom: 100px; }
  .equip-palme { width: 380px; height: 380px; left: -80px; right: auto; bottom: -60px; transform: scaleX(-1); }

  .alentours { padding-top: 110px; padding-bottom: 100px; }
  .alentours-vague { width: 420px; height: 140px; right: 4%; top: 60px; }
  .cartes-postales { grid-template-columns: repeat(3, 1fr); gap: 22px; }

  .avis { grid-template-columns: 1fr 1fr; column-gap: 64px; padding-top: 110px; padding-bottom: 96px; align-items: center; }
  .avis-tete, .avis-geante { grid-column: 1; }
  .avis-tete { align-self: end; }
  .avis-photo { grid-column: 2; grid-row: 1 / span 2; }
  .avis-photo-img { width: 78%; margin-left: auto; }
  .avis-photo-texte { margin: -140px 30% 0 0; font-size: 24px; }
  .bande, .bande-aide, .avis-actions { grid-column: 1 / -1; }
  .avis-actions .btn, .avis-actions .btn:first-child { flex: 0 1 auto; }
  .bande-liste { padding: 0 var(--marge); }
  .carte-avis { width: 360px; }
  .avis-fleur { width: 260px; height: 260px; right: 40%; top: 60px; }
  .avis-geante blockquote { font-size: clamp(40px, 3.9vw, 58px); }

  .accueil::before { left: auto; top: 0; width: 50%; height: auto; background-image: url("img/jardin-1200.webp"); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
  .equip::before { right: auto; bottom: 0; width: 46%; height: auto; background-image: url("img/villa-spa-1600.webp"); -webkit-mask-image: linear-gradient(270deg, transparent, #000 70%); mask-image: linear-gradient(270deg, transparent, #000 70%); }
  .reserver::before { left: auto; top: 0; width: 55%; height: auto; background-image: url("img/villa-piscine-1600.webp"); -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
  .fond-vapeur { width: 84px; top: 60px; right: calc(var(--marge) + 8px); }
  .fond-caustiques { height: 80%; }

  .reserver { grid-template-columns: 1.2fr 1fr; gap: 90px; padding-top: 110px; padding-bottom: 110px; align-items: end; }
  .actions-colonne { flex-direction: row; flex-wrap: wrap; }
  .actions-colonne .btn { width: auto; flex: 0 1 auto; }
  .acces { border-top: 0; border-left: 1px solid rgba(240, 199, 102, .3); padding: 0 0 0 48px; }
  .reserver-oiseau { width: 120px; top: 60px; right: var(--marge); }

  .pied { grid-template-columns: auto 1fr; column-gap: 40px; align-items: center; }
  .pied-mention { grid-column: 1 / -1; }
}