/* Boutik Hôtel 2A · Boucan Canot. Direction : bleu Klein du site de l'hôtel, sable « Dune » des chambres, nuit,
   corail des murs des chambres pour les boutons. Photos dans un cadre en feuille (deux coins arrondis en diagonale,
   comme la courbe du A du logo). Titres en Bellefair, texte en Nata Sans. */
@font-face { font-family: "Bellefair"; src: url("/polices/bellefair.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nata Sans"; src: url("/polices/nata.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --bleu: #0B2FA3; --bleu-2: #08257F; --nuit: #0E1A3D; --nuit-2: #16244F;
  --sable: #EFE7DA; --sable-2: #E6D9C4; --blanc: #FFFDF8; --corail: #E65A33; --corail-2: #CF4722; --lagon: #1FA3BF;
  --encre: #14213F; --encre-2: #45506A;
  --titres: "Bellefair", "Times New Roman", serif; --texte: "Nata Sans", system-ui, sans-serif;
  --marge: 16px; --largeur: 1200px; --sortie: cubic-bezier(.2, .8, .2, 1);
  --rf: 64px;
}
@media (min-width: 700px) { :root { --marge: 32px; --rf: 96px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { font: 400 17px/1.6 var(--texte); color: var(--encre); background: var(--sable); overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--titres); font-weight: 400; line-height: 1.12; letter-spacing: .005em; }
h1 em, h2 em { font-style: normal; color: var(--lagon-titre, var(--corail)); }
h2 { font-size: clamp(28px, 6.6vw, 48px); margin-bottom: 18px; }
h3 { font-size: 25px; margin-bottom: 8px; }
p + p { margin-top: 12px; }
.surtitre { font: 600 13px/1.3 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: var(--bleu); margin-bottom: 12px; }
.ic { width: 26px; height: 26px; flex: 0 0 auto; }

/* boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 1.5px solid var(--bleu); background: var(--bleu); color: #fff;
  font: 600 16px/1.2 var(--texte); text-decoration: none; text-align: center; transition: background .25s, color .25s, border-color .25s, transform .25s var(--sortie);
}
.bouton:hover { transform: translateY(-2px); }
.bouton .ic { width: 20px; height: 20px; }
.bouton-corail { background: var(--corail); border-color: var(--corail); color: #fff; }
.bouton-corail:hover { background: var(--corail-2); border-color: var(--corail-2); }
.bouton-trait { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.bouton-trait:hover { background: #fff; color: var(--bleu); }
.bouton-trait-bleu { background: transparent; color: var(--bleu); border-color: var(--bleu); }
.bouton-clair { background: var(--blanc); color: var(--bleu); border-color: var(--blanc); }
.bouton-petit { min-height: 44px; padding: 0 16px; font-size: 15px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.actions-centre { justify-content: center; }

/* le cadre en feuille et son filet décalé */
.cadre-feuille { position: relative; border-radius: 0 var(--rf); overflow: hidden; outline: 1.5px solid var(--filet, rgba(11, 47, 163, .45)); outline-offset: 7px; margin: 9px; }
.cadre-feuille img { width: 100%; height: 100%; object-fit: cover; }
figure:not(.cadre-feuille) { border-radius: 18px; overflow: hidden; }
figure:not(.cadre-feuille) img { width: 100%; height: 100%; object-fit: cover; }

/* en-tête : fixé en haut pendant tout le défilement */
.entete {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 var(--marge);
  background: rgba(8, 37, 127, .96); color: #fff; box-shadow: 0 6px 20px -14px rgba(0, 0, 0, .6);
}
.entete-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.entete-logo img { height: 40px; width: auto; }
.entete-nom { font: 400 20px/1 var(--titres); display: none; }
.entete-nom small { display: block; font: 600 10px/1.4 var(--texte); letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.apercu { font: 600 10.5px/1 var(--texte); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55); }
.entete-resa { margin-left: auto; background: transparent; border-color: rgba(255, 255, 255, .6); padding: 0 14px; }
.menu-bouton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--corail); color: #fff; font: 700 15px/1 var(--texte); cursor: pointer;
}
.barres { display: grid; gap: 4px; width: 18px; }
.barres span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s, opacity .3s; }
.menu-ouvert .barres span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .barres span:nth-child(2) { opacity: 0; }
.menu-ouvert .barres span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.entete-nav {
  position: absolute; left: 0; right: 0; top: 64px; display: none; flex-direction: column; gap: 4px; padding: 16px var(--marge) 24px;
  background: var(--bleu-2); box-shadow: 0 20px 30px -20px rgba(0, 0, 0, .6); max-height: calc(100svh - 64px); overflow-y: auto;
}
.menu-ouvert .entete-nav { display: flex; }
.entete-nav a:not(.bouton) { padding: 12px 0; font: 400 26px/1.1 var(--titres); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.entete-nav a[aria-current] { color: #9FD9E6; }
.menu-resa { margin-top: 14px; background: var(--corail); border-color: var(--corail); }
@media (min-width: 400px) { .entete-nom { display: block; } }
@media (max-width: 379px) { .entete-resa { display: none; } .menu-bouton { margin-left: auto; } }
@media (min-width: 1100px) {
  .entete { height: 76px; }
  .entete-logo img { height: 48px; }
  .menu-bouton, .entete-resa { display: none; }
  .entete-nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 24px; margin-left: auto; padding: 0; background: none; box-shadow: none; max-height: none; overflow: visible; }
  .entete-nav a:not(.bouton) { padding: 6px 0; font: 500 15px/1 var(--texte); border: 0; position: relative; }
  .entete-nav a:not(.bouton)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--sortie); }
  .entete-nav a:not(.bouton):hover::after, .entete-nav a[aria-current]::after { transform: scaleX(1); }
  .entete-nav a[aria-current] { color: #fff; }
  .menu-resa { margin: 0; min-height: 46px; }
  html { scroll-padding-top: 96px; }
}

/* fonds : jamais d'aplat seul */
.fond-bleu, .heros, .selection, .tete-bleue, .equip, .services, .resa, .acces {
  background-color: var(--bleu); background-image: url("/motifs/facade.svg"), radial-gradient(120% 80% at 85% 0%, #1A45C4 0%, transparent 60%), linear-gradient(180deg, var(--bleu) 0%, var(--bleu-2) 100%);
  color: #fff; --filet: rgba(255, 255, 255, .55);
}
.fond-bleu .surtitre, .heros .surtitre, .selection .surtitre, .tete-bleue .surtitre, .equip .surtitre, .services .surtitre, .resa .surtitre, .acces .surtitre { color: #9FD9E6; }
.maison, .tete-page:not(.tete-bleue), .chambre, .rooftop, .matin, .lieux, .regles {
  background-color: var(--sable); background-image: url("/motifs/houle.svg"), radial-gradient(90% 60% at 0% 0%, rgba(255, 253, 248, .9) 0%, transparent 60%);
}
.chambre-inverse, .spa, .faq { background-color: var(--sable-2); background-image: url("/motifs/houle.svg"), radial-gradient(80% 70% at 100% 100%, rgba(31, 163, 191, .14) 0%, transparent 60%); }
.avis, .bar, .equipe, .pied {
  background-color: var(--nuit); background-image: radial-gradient(70% 50% at 20% 0%, rgba(31, 163, 191, .22) 0%, transparent 70%), radial-gradient(60% 50% at 100% 100%, rgba(230, 90, 51, .18) 0%, transparent 70%);
  color: #fff; --filet: rgba(255, 255, 255, .4);
}
.avis .surtitre, .bar .surtitre, .equipe .surtitre { color: #9FD9E6; }

section, article { position: relative; }
.maison, .journee, .selection, .avis, .resa, .equip, .services, .lieux, .regles, .faq, .acces, .rooftop, .bar, .spa, .matin, .detente, .equipe, .chambre { padding: 72px var(--marge); }
@media (min-width: 1100px) { .maison, .journee, .selection, .avis, .resa, .equip, .services, .lieux, .regles, .faq, .acces, .rooftop, .bar, .spa, .matin, .detente, .equipe, .chambre { padding: 120px var(--marge); } }

/* ===== haut de l'accueil ===== */
.heros { padding: 12px var(--marge) 56px; overflow: hidden; }
.heros-in { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 18px; }
.heros-visuel { position: relative; }
.heros-cadre { height: clamp(200px, 34svh, 560px); margin: 9px 9px 0; }
.heros-cadre img { object-position: 50% 60%; }
.js .heros-cadre img { transform: scale(1.07); transition: transform 2.4s var(--sortie); }
.js .ouvert .heros-cadre img { transform: none; }
.heros-note {
  position: absolute; left: 22px; bottom: -14px; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap;
  background: var(--blanc); color: var(--encre); font: 500 14px/1 var(--texte); padding: 10px 14px; border-radius: 999px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5);
}
.heros-note strong { font-weight: 700; }
.etoiles { color: #F2B33D; letter-spacing: .06em; }
.heros-texte { padding-top: 8px; }
.heros h1 { font-size: clamp(29px, 7.6vw, 66px); }
.heros h1 em { color: #9FD9E6; }
.heros .actions { margin-top: 18px; }
.heros-intro { margin-top: 18px; color: rgba(255, 255, 255, .86); max-width: 36em; }
.js .heros-texte > * { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--sortie), transform .8s var(--sortie); }
.js .ouvert .heros-texte > * { opacity: 1; transform: none; }
.js .ouvert .heros-texte > :nth-child(2) { transition-delay: .1s; }
.js .ouvert .heros-texte > :nth-child(3) { transition-delay: .2s; }
.js .ouvert .heros-texte > :nth-child(4) { transition-delay: .3s; }
@media (min-width: 1100px) {
  .heros { padding: 48px var(--marge) 110px; }
  .heros-in { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 64px; }
  .heros-visuel { order: 2; }
  .heros-cadre { height: min(68svh, 620px); }
}

/* ===== la maison ===== */
.maison-in { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 40px; }
.piliers { display: grid; gap: 14px; margin-top: 26px; }
.piliers li { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 16px; background: rgba(255, 253, 248, .75); border-radius: 0 24px; border: 1px solid rgba(11, 47, 163, .12); }
.piliers .ic { grid-row: span 2; width: 34px; height: 34px; color: var(--bleu); }
.piliers strong { font: 400 22px/1.2 var(--titres); }
.piliers span { color: var(--encre-2); font-size: 16px; }
.maison-photos { position: relative; padding-bottom: 60px; }
.mp1 { width: 78%; aspect-ratio: 4 / 5; }
.mp2 { position: absolute; right: 0; bottom: 0; width: 56%; aspect-ratio: 4 / 3; border: 6px solid var(--sable); box-shadow: 0 20px 40px -24px rgba(14, 26, 61, .5); }
@media (min-width: 1100px) { .maison-in { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } }

/* ===== une journée sur le toit : le fond passe du matin à la nuit ===== */
.journee { background: linear-gradient(180deg, #F4E7CF 0%, #F6CDA8 30%, #E98A5F 55%, #7A3E6B 75%, var(--nuit) 100%); overflow: hidden; }
.journee-tete { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.arc { width: min(100%, 420px); height: auto; margin: 6px auto 0; display: block; overflow: visible; }
.arc-trait { fill: none; stroke: var(--corail); stroke-width: 1.6; stroke-dasharray: .012 .018; }
.arc-soleil { fill: #F2B33D; filter: drop-shadow(0 0 8px rgba(242, 179, 61, .9)); }
.moments { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 22px; }
.moment { background: rgba(255, 253, 248, .9); border-radius: 0 40px; padding: 10px 18px 24px; box-shadow: 0 24px 40px -30px rgba(14, 26, 61, .6); }
.moment figure { aspect-ratio: 4 / 3; margin: 9px 9px 18px; }
.moment-heure { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--corail-2); margin-bottom: 10px; }
.moment p:last-child { color: var(--encre-2); }
.moment-nuit { background: rgba(22, 36, 79, .92); color: #fff; --filet: rgba(255, 255, 255, .4); }
.moment-nuit p:last-child { color: rgba(255, 255, 255, .82); }
.moment-nuit .moment-heure { color: #9FD9E6; }
.journee .actions { margin-top: 40px; }
@media (min-width: 900px) {
  .moments { grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
  .moment:nth-child(2) { margin-top: 60px; } .moment:nth-child(3) { margin-top: 120px; } .moment:nth-child(4) { margin-top: 180px; }
}

/* ===== aperçu des chambres ===== */
.selection-tete { max-width: 820px; margin: 0 auto 36px; text-align: center; }
.cartes { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 18px; }
.carte a { display: grid; grid-template-columns: 42% 1fr; gap: 14px; align-items: center; text-decoration: none; padding: 8px; border-radius: 0 34px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); transition: background .3s; }
.carte a:hover { background: rgba(255, 255, 255, .14); }
.carte-photo { aspect-ratio: 1; --rf: 40px; outline-offset: 5px; margin: 6px; }
.carte-texte { display: grid; gap: 6px; }
.carte-ext { display: flex; gap: 6px; align-items: center; font-size: 14px; color: #9FD9E6; line-height: 1.25; }
.carte-ext .ic { width: 20px; height: 20px; }
.carte-nom { font: 400 23px/1.1 var(--titres); }
.carte-pied { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; opacity: .9; }
.carte-prix { font-weight: 700; color: #FFD0BF; }
.selection .actions .bouton-trait-bleu { color: #fff; border-color: rgba(255, 255, 255, .6); }
.selection .actions .bouton:first-child { background: var(--corail); border-color: var(--corail); }
@media (min-width: 700px) { .cartes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
  .cartes { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .carte a { grid-template-columns: 1fr; padding: 10px 10px 22px; }
  .carte-photo { aspect-ratio: 4 / 3; --rf: 70px; }
  .carte-texte { padding: 0 12px; }
  .carte:nth-child(3n+2) { transform: translateY(40px); }
  .selection .actions { margin-top: 70px; }
}

/* ===== avis ===== */
.avis { overflow: hidden; }
.avis-in { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 34px; }
.avis-note { text-align: center; }
.avis-chiffre { font: 400 clamp(110px, 30vw, 180px)/.9 var(--titres); color: #fff; }
.avis-note .etoiles { font-size: 24px; margin: 4px 0 8px; }
.avis-note p:last-child { color: rgba(255, 255, 255, .8); }
.avis-grand { position: relative; }
.avis-photo { aspect-ratio: 4 / 3; }
.avis-photo img { object-position: 50% 40%; }
.avis-grand blockquote { position: relative; margin: -50px 12px 0 28px; padding: 22px 22px 20px; background: var(--blanc); color: var(--encre); border-radius: 0 36px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .7); }
.avis-grand blockquote p { font: 400 21px/1.35 var(--titres); }
.avis-grand cite { display: block; margin-top: 12px; font: 700 14px/1 var(--texte); font-style: normal; color: var(--corail-2); }
.bande { max-width: var(--largeur); margin: 48px auto 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; }
.bande-liste { display: flex; gap: 14px; width: max-content; }
.bande-liste li { scroll-snap-align: start; width: min(78vw, 320px); padding: 20px; border-radius: 24px 0; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.bande-liste li:nth-child(odd) { background: rgba(31, 163, 191, .18); }
.bande-liste p { font-size: 16px; }
.bande-liste cite { display: block; margin-top: 10px; font: 700 14px/1 var(--texte); font-style: normal; color: #9FD9E6; }
@media (min-width: 1100px) {
  .avis-in { grid-template-columns: 340px 1fr; align-items: center; gap: 70px; }
  .avis-grand { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; }
  .avis-grand blockquote { margin: 0 0 0 -70px; padding: 34px; }
  .avis-grand blockquote p { font-size: 26px; }
}

/* ===== réserver en direct ===== */
.resa-carte { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 34px; align-items: center; }
.resa-photo { aspect-ratio: 4 / 3; }
.raisons { display: grid; gap: 12px; margin-top: 6px; }
.raisons li { display: flex; gap: 12px; align-items: flex-start; }
.raisons .ic { color: #9FD9E6; }
@media (min-width: 1100px) { .resa-carte { grid-template-columns: 1fr 1.1fr; gap: 80px; } .resa-photo { aspect-ratio: 4 / 5; } }

/* ===== haut des pages intérieures ===== */
.tete-page { padding: 12px var(--marge) 56px; overflow: hidden; }
.tete-in { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 22px; }
.tete-cadre { height: clamp(200px, 32svh, 540px); order: -1; margin: 9px; }
.tete-page h1 { font-size: clamp(29px, 7.4vw, 58px); }
.tete-intro { margin-top: 14px; color: var(--encre-2); max-width: 38em; }
.tete-bleue .tete-intro { color: rgba(255, 255, 255, .86); }
.tete-page:not(.tete-bleue) .bouton-trait { color: var(--bleu); border-color: var(--bleu); }
.tete-page:not(.tete-bleue) .bouton-trait:hover { background: var(--bleu); color: #fff; }
.tete-bleue h1 em { color: #9FD9E6; }
.js .tete-cadre img { transform: scale(1.07); transition: transform 2.4s var(--sortie); }
.js .ouvert .tete-cadre img { transform: none; }
.js .tete-texte > * { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--sortie), transform .8s var(--sortie); }
.js .ouvert .tete-texte > * { opacity: 1; transform: none; }
.js .ouvert .tete-texte > :nth-child(2) { transition-delay: .1s; }
.js .ouvert .tete-texte > :nth-child(3) { transition-delay: .2s; }
.js .ouvert .tete-texte > :nth-child(4) { transition-delay: .3s; }
@media (min-width: 1100px) {
  .tete-page { padding: 48px var(--marge) 96px; }
  .tete-in { grid-template-columns: 1fr 1.05fr; align-items: center; gap: 64px; }
  .tete-cadre { order: 2; height: min(62svh, 560px); }
}
.sommaire { max-width: var(--largeur); margin: 36px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sommaire a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--blanc); border: 1px solid rgba(11, 47, 163, .2); text-decoration: none; font-weight: 600; font-size: 15px; color: var(--bleu); }
.sommaire .ic { width: 20px; height: 20px; }

/* ===== une chambre ===== */
.chambre { display: grid; gap: 30px; scroll-margin-top: 64px; }
.chambre > * { max-width: var(--largeur); }
.chambre-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ch1 { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
.ch2, .ch3 { aspect-ratio: 4 / 3; }
.chambre h2 { font-size: clamp(32px, 7vw, 52px); }
.chambre-accroche { font: 400 22px/1.35 var(--titres); color: var(--bleu); margin-bottom: 12px; }
.faits { display: grid; gap: 10px; margin-top: 20px; }
.faits li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 0 18px; background: rgba(255, 253, 248, .7); border: 1px solid rgba(11, 47, 163, .12); font-size: 16px; line-height: 1.35; }
.faits .ic { color: var(--bleu); }
.bar .faits li, .equipe .faits li, .detente .faits li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }
.bar .faits .ic, .equipe .faits .ic, .detente .faits .ic { color: #9FD9E6; }
.prix-nuit { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 22px; color: var(--encre-2); }
.prix-nuit strong { font: 400 46px/1 var(--titres); color: var(--corail-2); }
.chambre .actions .bouton:first-child { background: var(--corail); border-color: var(--corail); }
.chambre .bouton-trait { color: var(--bleu); border-color: var(--bleu); }
.chambre .bouton-trait:hover { background: var(--bleu); color: #fff; }
@media (min-width: 1100px) {
  .chambre { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: center; padding-left: max(var(--marge), calc((100vw - var(--largeur)) / 2)); padding-right: max(var(--marge), calc((100vw - var(--largeur)) / 2)); }
  .chambre-inverse .chambre-photos { order: 2; }
  .faits { grid-template-columns: 1fr 1fr; }
}

/* ===== listes d'équipements et de services ===== */
.equip-tete { max-width: 820px; margin: 0 auto 32px; text-align: center; }
.equip-liste { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 10px; }
.equip-liste li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 0 20px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); line-height: 1.35; }
.equip-liste .ic { width: 30px; height: 30px; color: #9FD9E6; }
@media (min-width: 700px) { .equip-liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .equip-liste { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

/* ===== blocs du séjour ===== */
.bloc { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 34px; align-items: center; }
.bloc-photos { position: relative; padding-bottom: 50px; }
.bloc-seule { padding-bottom: 0; }
.b1 { aspect-ratio: 4 / 3; width: 88%; }
.bloc-seule .b1 { width: auto; }
.b2 { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1; border: 6px solid var(--bord, var(--sable)); box-shadow: 0 20px 40px -24px rgba(14, 26, 61, .55); }
.bar .b2, .equipe .b2 { --bord: var(--nuit); }
.spa .b2 { --bord: var(--sable-2); }
@media (min-width: 1100px) {
  .bloc { grid-template-columns: 1.1fr 1fr; gap: 80px; }
  .bloc-inverse .bloc-photos { order: 2; }
}
.detente { background: linear-gradient(160deg, #F6CDA8 0%, #EFA07A 45%, #E98A5F 100%); }
.detente-carte { max-width: 1040px; margin: 0 auto; display: grid; gap: 28px; padding: 22px 18px 30px; border-radius: 0 56px; background: var(--nuit); color: #fff; --filet: rgba(255, 255, 255, .4); box-shadow: 0 40px 60px -40px rgba(14, 26, 61, .8); }
.detente-carte .surtitre { color: #9FD9E6; }
.detente-photo { aspect-ratio: 4 / 3; }
@media (min-width: 1100px) { .detente-carte { grid-template-columns: 1fr 1.2fr; padding: 40px; gap: 56px; align-items: center; } .detente-photo { aspect-ratio: 3 / 4; } }

/* ===== alentours ===== */
.lieux-tete { max-width: 820px; margin: 0 auto 36px; text-align: center; }
.lieux-liste { max-width: 980px; margin: 0 auto; display: grid; gap: 16px; counter-reset: lieu; }
.lieu { position: relative; padding: 22px 20px 22px 22px; border-radius: 0 34px; background: rgba(255, 253, 248, .8); border: 1px solid rgba(11, 47, 163, .14); counter-increment: lieu; }
.lieu::after { content: counter(lieu, decimal-leading-zero); position: absolute; right: 18px; top: 10px; font: 400 44px/1 var(--titres); color: rgba(11, 47, 163, .16); }
.lieu-distance { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--bleu); color: #fff; font: 700 13px/1 var(--texte); letter-spacing: .06em; text-transform: uppercase; }
.lieu-distance .ic { width: 20px; height: 20px; }
.lieu h3 { padding-right: 56px; }
.lieu p:last-child { color: var(--encre-2); }
@media (min-width: 900px) { .lieux-liste { grid-template-columns: 1fr 1fr; gap: 22px; } .lieu:nth-child(even) { transform: translateY(40px); } .lieux { padding-bottom: 160px; } }

/* ===== infos ===== */
.horaires { max-width: var(--largeur); margin: 30px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.horaire { padding: 16px; border-radius: 0 28px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); }
.horaire .ic { width: 30px; height: 30px; color: #9FD9E6; }
.horaire-titre { margin-top: 8px; font: 700 13px/1 var(--texte); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.horaire-heure { font: 400 30px/1.1 var(--titres); margin-top: 6px; }
.cases { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 12px; }
.case { padding: 18px; border-radius: 0 26px; background: rgba(255, 253, 248, .82); border: 1px solid rgba(11, 47, 163, .14); }
.case dt { display: flex; align-items: center; gap: 10px; font: 400 22px/1.2 var(--titres); color: var(--bleu); margin-bottom: 6px; }
.case dd { color: var(--encre-2); }
@media (min-width: 700px) { .cases { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cases { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.faq-liste { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: 0 22px; background: rgba(255, 253, 248, .85); border: 1px solid rgba(11, 47, 163, .14); }
.faq summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--bleu); }
.faq summary::after { content: "+"; margin-left: auto; font: 400 28px/1 var(--titres); color: var(--corail); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 18px 18px 56px; color: var(--encre-2); }
.acces-carte { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 34px; align-items: center; }
.contact-liste { display: grid; gap: 14px; margin-top: 8px; }
.contact-liste dt { display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--texte); letter-spacing: .1em; text-transform: uppercase; color: #9FD9E6; }
.contact-liste dd { margin-left: 36px; font-size: 17px; }
.acces-photo { aspect-ratio: 4 / 3; }
@media (min-width: 1100px) { .acces-carte { grid-template-columns: 1.1fr 1fr; gap: 80px; } }

/* ===== pied ===== */
.pied { position: relative; padding: 64px var(--marge) 110px; overflow: hidden; text-align: left; }
.pied-baleine { position: absolute; right: -30px; top: 30px; width: 220px; height: auto; color: rgba(159, 217, 230, .35); }
.pied-logo { width: 72px; height: auto; margin-bottom: 26px; position: relative; }
.pied-plan { max-width: var(--largeur); margin: 0 auto; display: grid; gap: 28px; position: relative; }
.pied-plan nav, .pied-plan > div { display: grid; gap: 8px; align-content: start; }
.pied-titre { font: 400 24px/1 var(--titres); margin-bottom: 6px; }
.pied-plan a:not(.bouton) { text-decoration: none; opacity: .88; padding: 4px 0; }
.pied-contact { display: flex; align-items: flex-start; gap: 10px; }
.pied-contact .ic { width: 22px; height: 22px; color: #9FD9E6; }
.pied-heure { font-size: 14px; opacity: .75; }
.pied-ligne, .pied-petit { max-width: var(--largeur); margin: 18px auto 0; position: relative; }
.pied-ligne { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.pied-petit { font-size: 13px; opacity: .7; margin-top: 8px; }
@media (min-width: 900px) { .pied { padding-bottom: 56px; } .pied-plan { grid-template-columns: repeat(3, 1fr); } .pied-logo, .pied-ligne, .pied-petit { margin-left: auto; margin-right: auto; } .pied-logo { margin-left: max(0px, calc((100% - var(--largeur)) / 2)); } .pied-baleine { width: 360px; right: 4%; } }

/* barre d'appel collante (téléphone) */
.barre-appel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 8px var(--marge) calc(8px + env(safe-area-inset-bottom)); background: rgba(14, 26, 61, .96); box-shadow: 0 -8px 20px -14px rgba(0, 0, 0, .6); }
.barre-appel .bouton { padding: 0 12px; }
@media (min-width: 1100px) { .barre-appel { display: none; } }

/* apparitions */
.js .r { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--sortie), transform .9s var(--sortie); }
.js .r.vu { opacity: 1; transform: none; }
.js .carte.r { transition-delay: var(--d, 0s); }
@media (min-width: 1100px) { .js .carte:nth-child(3n+2).r.vu { transform: translateY(40px); } .js .lieu:nth-child(even).r.vu { transform: translateY(40px); } }
@media (max-width: 899px) { .js .lieu.r.vu { transform: none; } }
.js .cadre-feuille.r img { transform: scale(1.08); transition: transform 1.8s var(--sortie); }
.js .cadre-feuille.r.vu img { transform: none; }

/* ===== décors qui poussent au défilement (palmes, frangipaniers, baleine, vagues) ===== */
section:has(> .ornes), article:has(> .ornes) { isolation: isolate; }
.ornes { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.orne { position: absolute; display: block; width: 120px; height: 120px; color: rgba(31, 120, 104, .38);
  transform: translate3d(0, calc(var(--p, 0) * var(--amp, 26px)), 0) rotate(calc(var(--p, 0) * var(--tour, 6deg))); will-change: transform; }
.orne svg { display: block; width: 100%; height: 100%; overflow: visible; opacity: 0; transform: scale(.5) rotate(-8deg); transform-origin: inherit; transition: opacity .9s ease-out, transform 1.8s var(--sortie); }
.orne.vu svg { opacity: 1; transform: none; }
html:not(.js) .orne svg { opacity: 1; transform: none; }
.orne-bg { left: -20px; bottom: -6px; transform-origin: 0 100%; }
.orne-bd { right: -20px; bottom: -6px; transform-origin: 100% 100%; --tour: -6deg; }
.orne-bd svg use { transform: scaleX(-1); transform-origin: 50% 50%; transform-box: view-box; }
.orne-hg { left: -20px; top: -6px; transform-origin: 0 0; }
.orne-hg svg use { transform: scaleY(-1); transform-origin: 50% 50%; transform-box: view-box; }
.orne-hd { right: -20px; top: -6px; transform-origin: 100% 0; --tour: -5deg; }
.orne-hd svg use { transform: scale(-1, -1); transform-origin: 50% 50%; transform-box: view-box; }
.orne-baleine { width: 190px; height: 104px; color: rgba(11, 47, 163, .42); --amp: 40px; --tour: 3deg; }
.orne-baleine.orne-hd svg use, .orne-baleine.orne-bd svg use { transform: scaleX(-1); }
.orne-hd.orne-baleine { top: 14px; right: -30px; }
.orne-vagues { color: rgba(11, 47, 163, .22); }
.heros .orne, .selection .orne, .tete-bleue .orne, .equip .orne, .services .orne, .resa .orne, .acces .orne,
.avis .orne, .bar .orne, .equipe .orne { color: rgba(159, 217, 230, .3); --o-fleur: rgba(255, 253, 248, .5); --o-coeur: rgba(242, 179, 61, .6); --o-corps: rgba(159, 217, 230, .08); }
.journee .orne { color: rgba(14, 26, 61, .25); }
@media (min-width: 700px) { .orne { width: 180px; height: 180px; } .orne-baleine { width: 260px; height: 143px; } }
@media (min-width: 1100px) {
  .orne { width: 250px; height: 250px; }
  .orne-baleine { width: 340px; height: 187px; }
  .orne-bg, .orne-hg { left: max(-20px, calc((100vw - var(--largeur)) / 2 - 300px)); }
  .orne-bd, .orne-hd { right: max(-20px, calc((100vw - var(--largeur)) / 2 - 300px)); }
  .orne-hd.orne-baleine { right: max(-30px, calc((100vw - var(--largeur)) / 2 - 330px)); }
}
@media (max-width: 699px) {
  .orne { width: 92px; height: 92px; --amp: 6px; }
  .orne-baleine { width: 130px; height: 72px; --amp: 10px; }
  .orne-bg, .orne-bd { bottom: -30px; }
  .orne-hg, .orne-hd { top: -30px; }
  .orne-hd.orne-baleine { top: 4px; }
  .heros .orne-hd.orne-baleine { top: auto; bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .orne { transform: none !important; will-change: auto; }
  .orne svg { opacity: 1; transform: none; transition: none; }
  .js .r { opacity: 1; transform: none; transition: none; }
  .js .cadre-feuille img, .js .heros-cadre img, .js .tete-cadre img { transform: none; transition: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 1099px) { main { padding-bottom: 0; } .pied { padding-bottom: 110px; } }