/* Retraite Maurice — ce qui est commun à toutes les pages : menu déroulant, pied de page, accessibilité */
.skip{position:absolute;left:16px;top:-60px;z-index:300;padding:10px 18px;border-radius:999px;background:var(--navy);color:#fff;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:6px}

/* ---------------------------------------------------------------- menu (gabarits/blocs/menu.html, commun.js) */
.nav{transition:padding .4s,background .4s,box-shadow .4s,transform .45s cubic-bezier(.25,1,.35,1)}
.nav.cache{transform:translateY(-110%)}
.nav ul li{list-style:none}
.btn-sm{padding:11px 20px;font-size:14.5px}
.nav .caret{display:inline-block;width:6px;height:6px;margin-left:9px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.55;transition:transform .35s cubic-bezier(.25,1,.35,1),opacity .3s}
.nav .nav-e.ouvert>a .caret{transform:translateY(1px) rotate(225deg);opacity:.9}
/* page prévue, pas encore créée : ligne pâlie + petite mention grise */
.bientot{display:inline-block;margin-left:7px;padding:2px 6px;border-radius:6px;background:#eef3f8;color:#7d93a8;font-size:9.5px;font-style:normal;font-weight:700;letter-spacing:.08em;text-transform:uppercase;vertical-align:2px;line-height:1.3}
.nav .soon{color:#7d93a8!important}.nav .soon .sub-ic{filter:grayscale(1);opacity:.55}
/* à droite : petits liens + bouton */
.nav-droite{display:flex;align-items:center;gap:18px}
.nav-lien{font-size:14px;font-weight:500;color:var(--navy-d);opacity:.8;white-space:nowrap;transition:opacity .2s,color .2s}.nav-lien:hover{opacity:1;color:var(--blue)}
body.on-photo .nav:not(.scrolled) .nav-lien{color:#fff;opacity:.92}
.nav .nav-mini,.nav-bas{display:none}

/* liens des panneaux (ordi et mobile) */
.nav .sub-col>a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;font-size:15px;line-height:1.25;color:var(--navy-d);white-space:nowrap;background:none;transition:background .2s,color .2s}
.nav .sub-col>a:hover{background:var(--ice);color:var(--navy-d)}
.nav .sub small{display:block;margin-top:1px;font-size:12px;color:#6d86a0}
.nav .sub-ic{flex:0 0 36px;height:36px;border-radius:12px;background:var(--ice);display:grid;place-items:center;font-size:17px;transition:transform .35s cubic-bezier(.3,1.5,.5,1),background .25s,box-shadow .25s}
.nav .sub-col>a:hover .sub-ic{transform:scale(1.1) rotate(-6deg);background:#fff;box-shadow:0 6px 14px -6px rgba(15,58,107,.35)}
.nav .sub-h{display:block;padding:6px 12px 6px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.nav .sub-plus{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.nav .sub-plus>span{padding:0 8px 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.nav .sub-plus a{padding:7px 11px;border-radius:999px;font-size:14px;color:var(--navy-d);background:none;transition:background .2s}
.nav .sub-plus a:hover{background:var(--ice)}
.nav .sub-plus .sub-tout{margin-left:auto;font-weight:600;color:var(--blue)}

/* ordi : pastille qui glisse, un seul fond blanc qui se déforme d'un panneau à l'autre */
@media(min-width:981px){
  .nav .nav-liste{position:relative}
  .nav .nav-liste>li.nav-e{position:static}
  .nav .nav-liste>li>a{position:relative;z-index:1;white-space:nowrap}
  .nav .nav-liste.pastille-ok>li>a{background:none!important;color:var(--navy-d);transition:color .3s}
  .nav .nav-liste.pastille-ok>li>a.hot{color:#fff}
  .nav-pastille{position:absolute;top:0;left:0;width:0;height:0;border-radius:999px;background:var(--navy);opacity:0;pointer-events:none;z-index:0;box-shadow:0 8px 18px -10px rgba(15,58,107,.8)}
  .nav-liste.pastille-ok .nav-pastille{transition:transform .5s cubic-bezier(.3,1.25,.45,1),width .5s cubic-bezier(.3,1.25,.45,1),opacity .25s}
  .nav-fond{position:absolute;top:calc(100% + 12px);left:0;width:0;height:0;border-radius:26px;background:#fff;border:1px solid rgba(28,125,179,.1);box-shadow:0 50px 90px -40px rgba(15,58,107,.55),0 14px 34px -24px rgba(15,58,107,.35);opacity:0;pointer-events:none;z-index:2;transform-origin:50% 0;transition:opacity .2s}
  .nav.deplie .nav-fond{opacity:1}
  .nav.anime .nav-fond{transition:opacity .2s,transform .45s cubic-bezier(.25,1,.35,1),width .45s cubic-bezier(.25,1,.35,1),height .45s cubic-bezier(.25,1,.35,1)}
  .nav .sub{position:absolute;top:calc(100% + 12px);left:0;z-index:3;width:max-content;padding:14px;opacity:0;visibility:hidden;transform:translate(var(--dx,0px),8px);transition:opacity .2s,transform .35s cubic-bezier(.25,1,.35,1),visibility 0s .35s}
  .nav .sub.vu{opacity:1;visibility:visible;transform:none;transition:opacity .3s .06s,transform .45s cubic-bezier(.25,1,.35,1),visibility 0s}
  .nav .sub::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
  .nav .sub-in{display:grid;grid-template-columns:repeat(var(--c,1),auto);gap:2px 10px;align-items:start}
  .nav .sub-col{min-width:270px}
  .nav .sub-plus{grid-column:1/-1;margin-top:8px;padding-top:10px;border-top:1px solid rgba(15,58,107,.07)}
  /* les lignes arrivent en cascade */
  .nav .sub .sub-col>a,.nav .sub-carte,.nav .sub-plus{opacity:0;transform:translateY(10px);transition:opacity .3s,transform .45s cubic-bezier(.25,1,.35,1),background .2s,color .2s}
  .nav .sub.vu .sub-col>a,.nav .sub.vu .sub-carte,.nav .sub.vu .sub-plus{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 22ms + 60ms),calc(var(--i,0) * 22ms + 60ms),0s,0s}
  /* la carte mise en avant */
  .nav .sub-carte{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;width:250px;min-height:236px;margin-left:6px;border-radius:20px;overflow:hidden;isolation:isolate;color:#fff;background:var(--navy);white-space:normal}
  .nav .sub-carte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.05);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
  .nav .sub-carte::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,36,68,0) 20%,rgba(9,36,68,.55) 55%,rgba(9,36,68,.92))}
  .nav .sub-carte:hover img{transform:scale(1.14)}
  .nav .sub-carte-txt{display:flex;flex-direction:column;gap:5px;padding:18px}
  .nav .sub-carte small{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sun1)}
  .nav .sub-carte b{font-size:19px;line-height:1.15;font-weight:700}
  .nav .sub-carte-txt>span{font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.85)}
  .nav .sub-carte .sub-prix{margin-top:4px;color:#fff}
  .nav .sub-prix b{font-size:26px;color:var(--sun1);font-variant-numeric:tabular-nums}
  .nav .sub-carte .sub-btn{align-self:flex-start;margin-top:8px;padding:8px 15px;border-radius:999px;background:linear-gradient(135deg,#fbbf3c,#f48a1f);color:#fff;font-size:13.5px;font-weight:600;box-shadow:0 10px 20px -10px rgba(244,138,31,.9);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
  .nav .sub-carte:hover .sub-btn{transform:translateX(4px)}
  .nav .sub-meteo{display:flex;align-items:baseline;gap:4px;margin-top:6px;font-size:13px;color:#fff!important}
  .nav .sub-meteo i{font-style:normal;font-size:28px;font-weight:700;color:var(--sun1)}
  .nav .sub-meteo i[data-meteo="mer"]{margin-left:14px}
  .nav .sub-carte.ile{background:radial-gradient(120% 90% at 50% 30%,#3fc6dd 0%,#1c7db3 55%,#0f3a6b 100%);justify-content:space-between}
  .nav .sub-carte.ile::after{display:none}
  .nav .sub-carte.ile svg{width:62%;margin:20px auto 0;overflow:visible;filter:drop-shadow(0 14px 18px rgba(0,30,60,.35))}
  /* mini-cartes du menu : régions (Vivre à Maurice), lieux par thème (La carte) ; le lien survolé allume sa région ou son thème */
  .nav .sub-carte.ile svg{width:76%;margin:14px auto 0;filter:drop-shadow(0 14px 18px rgba(0,30,60,.4))}
  .ile-menu .ile-recif{stroke-width:3.5;stroke-dasharray:6 12}
  .ile-menu .ile-reg{stroke:#fff;stroke-width:4;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.3,1.5,.5,1),filter .3s,opacity .3s}
  .ile-menu .ile-reg.on{transform:translateY(-12px) scale(1.04);filter:brightness(1.22) saturate(1.3) drop-shadow(0 10px 8px rgba(0,30,60,.45))}
  .ile-menu.filtre .ile-reg:not(.on){opacity:.5}
  .ile-pin circle:last-child{fill:#fff;stroke:#0f3a6b;stroke-width:4;transition:fill .3s}
  .ile-halo{fill:#fbbf3c;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .3s,transform .45s cubic-bezier(.3,1.5,.5,1)}
  .ile-pin.on .ile-halo{opacity:.75;transform:scale(1)}
  .ile-pin.on circle:last-child{fill:#f48a1f}
  .ile-lieux .ile-terre{fill:#fbf6ea;stroke:#fff;stroke-width:4;stroke-linejoin:round}
  .ile-trait{fill:none;stroke-width:13;stroke-linecap:round;transition:opacity .35s,stroke-width .35s cubic-bezier(.3,1.5,.5,1)}
  .ile-menu.filtre .ile-trait{opacity:.12}
  .ile-menu.filtre .ile-trait.on{opacity:1;stroke-width:22}
  /* à l'ouverture du panneau : l'île monte, les régions se posent une à une, les lieux s'allument thème par thème */
  .nav .sub.vu .ile-menu{animation:ile-monte .8s cubic-bezier(.25,1,.35,1) backwards .12s}
  .nav .sub.vu .ile-menu .ile-reg{animation:ile-pose .7s cubic-bezier(.3,1.5,.5,1) backwards calc(.25s + var(--i) * .09s)}
  .nav .sub.vu .ile-menu .ile-pin circle:last-child{animation:ile-pop .5s cubic-bezier(.3,1.8,.5,1) backwards calc(.6s + var(--i) * .09s);transform-box:fill-box;transform-origin:center}
  .nav .sub.vu .ile-trait{animation:ile-eau .5s ease-out backwards calc(.35s + var(--i) * .07s)}
  .nav .sub-carte.ile .sub-carte-txt{padding-top:6px}
}
@media(min-width:981px) and (max-width:1480px){.nav .nav-liste>li>a{padding-inline:12px}}
@media(max-width:1380px){.nav-lien{display:none}}
/* petit écran d'ordi : 6 entrées sur une ligne, sans slogan ; grands panneaux sans carte */
@media(min-width:981px) and (max-width:1180px){
  .nav,.nav.scrolled{padding-inline:20px;gap:12px}
  .nav ul{gap:0}
  .nav .nav-liste>li>a{padding:8px 9px;font-size:13.5px}
  .nav .nav-liste>li>a .bientot,.nav .caret,.nav .brand i{display:none}
  .nav .btn-sm{padding:10px 16px;font-size:13.5px;white-space:nowrap}
  .nav .sub.mega .sub-carte{display:none}
}

/* mobile : plein écran, accordéon, rendez-vous et téléphone en bas */
@media(max-width:980px){
  html.menu-ouvert{overflow:hidden}
  .nav-pastille,.nav-fond,.nav-droite,.nav .sub-carte{display:none!important}
  .nav.open{background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none}
  .nav.open .brand{color:var(--navy)!important}.nav.open .brand i{color:var(--sky)!important}
  /* fondus blancs : la liste passe dessous en haut (logo) et en bas (rendez-vous) */
  .nav.open::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% + 18px);background:linear-gradient(#fff 72%,rgba(255,255,255,0));pointer-events:none}
  .nav.open .brand,.nav.open .burger{position:relative;z-index:1}
  .nav-bas::before{content:"";position:absolute;left:-16px;right:-16px;bottom:-30px;height:130px;z-index:-1;background:linear-gradient(rgba(255,255,255,0),#fff 55%);pointer-events:none}
  .nav ul.nav-liste{position:fixed;inset:0;z-index:-1;display:block;height:100vh;height:100dvh;margin:0;padding:96px 22px 130px;overflow-y:auto;overscroll-behavior:contain;border:0;border-radius:0;background:radial-gradient(120% 60% at 100% 0%,#e8f4fd 0%,#fff 55%);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:0;visibility:hidden;pointer-events:none;transform:none;transition:opacity .35s,visibility 0s .35s}
  .nav.open ul.nav-liste{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s}
  .nav-liste>li{border-bottom:1px solid rgba(15,58,107,.08);opacity:0;transform:translateY(14px);transition:opacity .4s,transform .5s cubic-bezier(.25,1,.35,1)}
  .nav.open .nav-liste>li{opacity:1;transform:none;transition-delay:calc(var(--n,1) * 45ms + 60ms)}
  .nav .nav-liste>li>a{display:flex;align-items:center;justify-content:space-between;padding:17px 4px;border-radius:0;background:none!important;font-size:21px;font-weight:600;color:var(--navy-d)!important}
  .nav .nav-liste>li>a.on{color:var(--blue)!important}
  .nav .caret{width:9px;height:9px;opacity:.7}
  .nav .sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.25,1,.35,1)}
  .nav .nav-e.ouvert .sub{grid-template-rows:1fr}
  .nav .sub-in{min-height:0;overflow:hidden}
  .nav .sub-col{padding-bottom:8px}
  .nav .sub-col>a{padding:10px 4px;font-size:16px;white-space:normal}
  .nav .sub-h{padding:10px 4px 4px}
  .nav .sub-plus{gap:6px;padding:2px 0 16px}
  .nav .sub-plus>span{width:100%;padding:6px 4px 2px}
  .nav .sub-plus a{background:var(--ice);font-size:14px}
  .nav .sub-plus .sub-tout{width:100%;margin:6px 0 0;padding:12px 16px;text-align:center;background:#fff;border:1px solid rgba(28,125,179,.2)}
  .nav .nav-mini{display:block;border:0}
  .nav .nav-liste>li.nav-mini>a{padding:12px 4px;font-size:16px;font-weight:500;color:#4d6a86!important}
  .nav .nav-liste>li.nav-mini:first-of-type{margin-top:14px}
  .nav-bas{display:flex;gap:10px;position:fixed;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom));opacity:0;visibility:hidden;transform:translateY(24px);transition:opacity .3s,transform .45s cubic-bezier(.25,1,.35,1),visibility 0s .45s}
  .nav.open .nav-bas{opacity:1;visibility:visible;transform:none;transition:opacity .3s .25s,transform .5s cubic-bezier(.25,1,.35,1) .25s,visibility 0s}
  .nav .nav-bas .btn{display:flex;flex:1;justify-content:center;align-items:center;gap:8px;padding:16px 20px;font-size:16px}
  .nav-tel{flex:0 0 56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:21px;box-shadow:0 12px 24px -12px rgba(15,58,107,.55)}
  .burger span{transition:background .2s}
  .burger span::before,.burger span::after{transition:top .3s,transform .3s cubic-bezier(.3,1.4,.5,1)}
  .nav.open .burger span{background:transparent}
  .nav.open .burger span::before{top:0;transform:rotate(45deg)}
  .nav.open .burger span::after{top:0;transform:rotate(-45deg)}
}
@media(prefers-reduced-motion:reduce){.nav,.nav *{transition:none!important}}

/* pied de page (blocs/pied.html) : on finit sous l'eau, comme le rideau d'entrée de l'accueil.
   Surface : 3 vagues (svg deux fois plus larges que l'écran, qui glissent d'une demi-largeur en boucle) et un voilier qui dérive ;
   dessous le « fond lagon » (caustiques, rayons, bulles de commun.js) sur un dégradé qui descend vers le bleu nuit.
   La vague de devant a exactement la couleur du haut du dégradé : pas de raccord visible. */
.foot{position:relative;isolation:isolate;margin-top:150px;color:#d9ecf7}
.foot.vt-lagon{background:linear-gradient(180deg,#1d9ec6 0%,#1584b4 16%,#0b5384 46%,#062a4f 78%,#041d38 100%)}
.foot-surface{position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:84px;overflow:hidden;pointer-events:none}
.foot-vague{position:absolute;left:0;bottom:0;width:200%;height:100%;animation:footVague 22s linear infinite}
.foot-vague.v3{fill:rgba(142,234,230,.45);animation-duration:34s;animation-direction:reverse}
.foot-vague.v2{fill:rgba(63,208,212,.6);animation-duration:15s}
.foot-vague.v1{fill:#1d9ec6}
@keyframes footVague{to{transform:translateX(-50%)}}
.foot-bateau{position:absolute;bottom:22px;left:0;width:46px;animation:footDerive 80s linear infinite}
.foot-bateau svg{display:block;width:100%;transform-origin:50% 90%;animation:footTangue 3.4s ease-in-out infinite}
.foot-bateau .voile{fill:#fff}.foot-bateau .voile2{fill:#fdf3e1}.foot-bateau .coque{fill:var(--sun3)}
@keyframes footDerive{from{transform:translateX(-60px)}to{transform:translateX(calc(100vw + 60px))}}
@keyframes footTangue{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-6px) rotate(5deg)}}
.foot-in{position:relative;padding-top:18px}

/* haut : marque, preuve, appel gratuit et numéros */
.foot-haut{display:flex;align-items:center;gap:22px 28px;flex-wrap:wrap}
.foot .brand{color:#fff}.foot .brand i{color:var(--sun1)}
.foot .brand svg{filter:drop-shadow(0 6px 14px rgba(4,29,56,.35))}
.foot .foot-proof{margin:0;padding-left:26px;border-left:1px solid rgba(255,255,255,.25);font-size:14.5px;line-height:1.35;max-width:190px;color:#e3f4fb}
.foot .foot-proof b{display:block;font-size:22px;letter-spacing:-.01em;color:var(--sun1)}
.foot-contact{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.foot-contact .btn{padding:13px 24px}
.foot-pill{display:flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:600;font-size:15px;backdrop-filter:blur(6px);transition:background .3s,transform .3s}
.foot-pill:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.foot-pill svg{width:34px;height:34px;padding:8px;border-radius:50%;background:rgba(255,255,255,.16);fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.foot-pill small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#bfe9f5;line-height:1.2}
.foot-pill span{line-height:1.25;white-space:nowrap}

/* la lettre, en verre */
.foot .cp-lettre{margin:30px 0 0;padding:20px 26px;background:rgba(4,29,56,.32);border-color:rgba(255,255,255,.16);backdrop-filter:blur(8px)}
.foot .cp-lettre-t b{font-size:19px}
.foot .cp-lettre-t span,.foot .cp-lettre .cp-accord{color:#bcd6ea}

/* le plan du site : 4 colonnes serrées ; sur mobile, chaque colonne se replie (commun.js retire « open ») */
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding:34px 0 30px}
.fcol summary{list-style:none;pointer-events:none}
.fcol summary::-webkit-details-marker{display:none}
.foot-h{color:#fff;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;font-weight:700}
.fcol a{display:block;width:fit-content;padding:4px 0;color:#b9d4e8;font-size:14.5px;transition:color .2s,transform .25s}
.fcol a:hover{color:#fff;transform:translateX(4px)}
.foot .bientot{background:rgba(255,255,255,.08);color:#8fa9c4}

/* bas : mentions et remontée */
.legal{position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;padding:16px 40px;border-top:1px solid rgba(255,255,255,.1);background:rgba(2,16,32,.35);font-size:13px;color:#8fb0cc}
.legal a{color:inherit}.legal a:hover{color:#fff}
.legal .foot-remonte{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600}
.foot-remonte span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.5),rgba(255,255,255,.06) 60%);animation:footBulle 2.6s ease-in-out infinite}
@keyframes footBulle{50%{transform:translateY(-4px)}}

/* entrée : les blocs montent l'un après l'autre quand le pied arrive à l'écran (commun.js pose « anim » puis « vu ») */
.foot.anim:not(.vu) .foot-entre{opacity:0;transform:translateY(26px)}
.foot.vu .foot-entre{transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * .09s + .1s)}

@media(max-width:980px){
  .fcols{grid-template-columns:1fr 1fr;gap:22px 28px}
  .foot-contact{margin-left:0;width:100%}
}
@media(max-width:640px){
  .foot{margin-top:110px}
  .foot-surface{height:60px}
  .foot-bateau{width:36px;bottom:14px}
  .foot-haut{gap:16px}
  .foot .foot-proof{flex-basis:100%;max-width:none;padding:0;border:0;font-size:14px}
  .foot .foot-proof b{display:inline;font-size:16px}
  .foot-contact .btn{width:100%}
  .foot-pill{flex:1;min-width:0;gap:8px;padding:6px 10px 6px 6px;font-size:13.5px}
  .foot-pill svg{width:28px;height:28px;padding:6px}
  .foot .cp-lettre{margin-top:22px;padding:18px}
  .foot .cp-lettre-t span{font-size:14px}
  .fcols{grid-template-columns:1fr;gap:0;padding:18px 0 22px}
  .fcol{border-bottom:1px solid rgba(255,255,255,.12)}
  .fcol summary{pointer-events:auto;cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin:0;padding:15px 0}
  .fcol summary::after{content:"+";font-size:20px;font-weight:400;letter-spacing:0;transition:transform .3s}
  .fcol[open] summary::after{transform:rotate(45deg)}
  .fcol>div{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding-bottom:12px}
  .legal{padding:16px 20px;justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){.foot-vague,.foot-bateau,.foot-bateau svg,.foot-remonte span{animation:none}.foot.anim .foot-entre{opacity:1;transform:none}}


/* bandeau cookies (base.html, commun.js) */
.cookies{position:fixed;z-index:90;left:50%;bottom:18px;width:min(760px,calc(100% - 32px));display:flex;align-items:center;gap:18px;padding:16px 18px 16px 22px;border-radius:22px;background:rgba(255,255,255,.97);border:1px solid rgba(15,58,107,.1);box-shadow:0 30px 60px -30px rgba(10,37,71,.55);backdrop-filter:blur(10px);transform:translate(-50%,30px);opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .4s}
.cookies.vu{transform:translate(-50%,0);opacity:1}
.cookies p{flex:1;font-size:14px;line-height:1.5;color:#41607f;margin:0}
.cookies p a{color:#1c7db3;text-decoration:underline}
.cookies div{display:flex;gap:8px;flex-shrink:0}
@media(max-width:640px){.cookies{flex-direction:column;align-items:stretch;gap:12px;bottom:12px}.cookies div .btn{flex:1}}

/* « fond lagon » : le fond du loader de l'accueil — sous l'eau, rayons, lumière qui danse, bulles (commun.js) ; calques : macro s.lagon() de blocs/sections.html.
   Pour couper une page trop unie, une à deux fois par page, jamais deux sections de suite (ETAT.md, Décisions). */
.vt-lagon{background:radial-gradient(120% 85% at 50% -12%,#8eeae6 0%,#2fb8d2 20%,#1584b4 44%,#0b5384 70%,#062a4f 100%)}
.vt-caus{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.85}
.vt-rays{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;overflow:hidden}
.vt-rays i{position:absolute;top:-12%;left:50%;height:125%;transform-origin:50% 0;background:linear-gradient(180deg,rgba(255,252,225,.42),rgba(255,255,255,0) 70%);filter:blur(16px);animation:iRay 6s ease-in-out infinite alternate}
.vt-bulles{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.vt-bulles i{position:absolute;bottom:-30px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.85),rgba(255,255,255,.06) 55%);animation:vtBulle linear forwards}
@keyframes iRay{from{transform:translateX(-50%) rotate(var(--r));opacity:.25}to{transform:translateX(-50%) rotate(calc(var(--r) + 5deg));opacity:.85}}
@keyframes vtBulle{to{transform:translate(var(--dx),calc(-1 * var(--h, 1200px)))}}
.vt-lagon .kicker{color:#e9fbfa}
.vt-lagon .vt-head p{color:#e3f4fb}
@media(prefers-reduced-motion:reduce){.vt-rays i{animation:none}.vt-bulles{display:none}}
.vt-lagon>.vt-caus,.vt-lagon>.vt-rays,.vt-lagon>.vt-bulles{border-radius:inherit}
.el-right.vt-lagon{isolation:isolate}
.el-right.vt-lagon::after{display:none}

/* ---- mini-carte de l'île (gabarits/blocs/ile.html, comportement commun.js) ----
   la mer bouge toujours (ondes, récif qui file, bateau) ; l'entrée se joue une fois, quand la carte arrive à l'écran (classe « vu ») */
.ile{display:block;width:100%;height:auto;overflow:visible}
.ile-recif{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:5 9;stroke-linecap:round;opacity:.95;animation:ile-file 50s linear infinite}
@keyframes ile-file{to{stroke-dashoffset:-280}}
.ile-onde{fill:none;stroke:#3fd0d4;stroke-width:1.6;transform-box:fill-box;transform-origin:center;opacity:0;animation:ile-onde 7s ease-out infinite}
.ile-onde.o2{animation-delay:-3.5s}
@keyframes ile-onde{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.16);opacity:0}}
.ile-ilots{stroke:#fff;stroke-width:1}
.ile-cote{fill:none;stroke:#0a2547;stroke-width:1.3;stroke-opacity:.3;stroke-dasharray:1;stroke-linejoin:round}
.ile-bateau path{fill:#fff}
.ile-bateau .sillage{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;opacity:.75}
.ile-pts circle{stroke:#fff;stroke-width:.9;transform-box:fill-box;transform-origin:center}
@keyframes ile-trace{from{stroke-dashoffset:1}}
@keyframes ile-eau{from{opacity:0;transform:scale(.88)}}
@keyframes ile-monte{from{opacity:0;transform:translateY(16px) scale(.94)}}
@keyframes ile-pose{from{opacity:0;transform:translateY(-14px) scale(.9)}}
@keyframes ile-pop{from{opacity:0;transform:scale(0)}}
@keyframes ile-goutte{0%{opacity:0;transform:translateY(-16px) scale(.4)}60%{opacity:1}}
@keyframes ile-plonge{0%{opacity:0;transform:translateY(-46px)}}
.ile.anim:not(.vu) :is(.ile-lagon,.ile-recif,.ile-reg,.ile-ilots,.ile-pts circle,.pin-in,.ile-bateau){opacity:0}
.ile.anim:not(.vu) .ile-cote{stroke-dashoffset:1}
.ile.vu .ile-lagon{transform-box:fill-box;transform-origin:center;animation:ile-eau 1.2s ease-out backwards}
.ile.vu .ile-recif{animation:ile-eau 1.2s ease-out backwards .3s,ile-file 50s linear infinite}
.ile.vu .ile-cote{animation:ile-trace 2.2s cubic-bezier(.6,0,.3,1) backwards .15s}
.ile.vu .ile-reg{transform-box:fill-box;transform-origin:center;animation:ile-pose .9s cubic-bezier(.3,1.4,.5,1) backwards calc(.7s + var(--i) * .15s)}
.ile.vu .ile-ilots{animation:ile-eau .8s ease-out backwards 1.4s}
.ile.vu .ile-pts circle{animation:ile-goutte .7s cubic-bezier(.3,1.5,.5,1) backwards calc(1.5s + var(--d) * 1.8s)}
.ile.vu .pin-in{animation:ile-plonge .8s cubic-bezier(.3,1.6,.5,1) backwards calc(3.1s + var(--i) * .14s)}
.ile.vu .ile-bateau{animation:ile-eau 1s ease-out backwards 2s}
.ile.fini :is(.ile-lagon,.ile-cote,.ile-reg,.ile-ilots,.ile-pts circle,.pin-in,.ile-bateau){animation:none}
.ile.fini .ile-recif{animation:ile-file 50s linear infinite}
/* le nom du lieu survolé, et le clic qui l'ouvre sur la grande carte */
.ile-bulle{position:absolute;z-index:3;left:0;top:0;padding:6px 12px;border-radius:999px;background:#0a2547;color:#fff;font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none;
  box-shadow:0 10px 24px -10px rgba(10,37,71,.7);opacity:0;transform:translate(-50%,calc(-100% - 10px)) scale(.9);transition:opacity .2s,transform .25s cubic-bezier(.3,1.5,.5,1)}
.ile-bulle.on{opacity:1;transform:translate(-50%,calc(-100% - 14px))}
.ile-bulle i{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;vertical-align:1px}
.ile circle.survol{stroke:#0a2547;stroke-width:2;transform:scale(1.8);transition:transform .2s}
@media(prefers-reduced-motion:reduce){.ile *{animation:none!important}.ile-bateau{display:none}}
/* carte zoomée (pages régions et villes) : l'île entière grossit jusqu'à la région, les autres pâlissent ;
   les tailles sont multipliées par --u pour rester les mêmes à l'écran quel que soit le zoom */
.ile-zoomee{overflow:hidden;aspect-ratio:1}
.ile-zoomee.vu .ile-zoom{transition:transform 2.2s cubic-bezier(.65,0,.25,1) .2s}
.ile-zoomee.anim:not(.vu) .ile-zoom{transform:var(--z0)}
.ile-zoomee.anim:not(.vu) :is(.ile-lagon,.ile-recif,.ile-reg,.ile-ilots){opacity:1}
.ile-zoomee.vu :is(.ile-lagon,.ile-recif,.ile-reg,.ile-ilots,.ile-cote){animation:none}
.ile-zoomee .ile-recif{stroke-width:calc(var(--u) * 2px);stroke-dasharray:calc(var(--u) * 5px) calc(var(--u) * 9px)}
.ile-zoomee .ile-onde{stroke-width:calc(var(--u) * 1.6px)}
.ile-zoomee .ile-reg{stroke:#fff;stroke-width:calc(var(--u) * 1.8px);stroke-linejoin:round;transition:filter 1.2s 1.6s}
.ile-zoomee .ile-reg:not(.ici){filter:saturate(.2) brightness(1.45)}
.ile-zoomee.anim:not(.vu) .ile-reg:not(.ici){filter:none}
.ile-zoomee .ile-cote{stroke-width:calc(var(--u) * 1.3px)}
.ile-zoomee .ile-pts circle{stroke-width:calc(var(--u) * .9px)}
.ile-zoomee.vu .ile-pts circle{animation-delay:calc(2.3s + var(--d) * 1.4s)}
.ile-zoomee .ile-bateau{display:none}
.ile-loc .ring{fill:#f48a1f;opacity:.5;transform-box:fill-box;transform-origin:center;animation:ping 2.6s ease-out infinite}
.ile-loc .dot{fill:#fff;stroke:#0f3a6b;stroke-width:calc(var(--u) * 2.6px)}
.ile-loc text{font:600 calc(var(--u) * 14px) Outfit,sans-serif;fill:var(--navy-d,#0a2547);paint-order:stroke;stroke:#fff;stroke-width:calc(var(--u) * 4px);stroke-linejoin:round}
.ile-loc .dot{transform-box:fill-box;transform-origin:center;transition:fill .3s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.ile-loc text{transition:fill .3s}
.ile-loc.on .dot{fill:#f48a1f;transform:scale(1.45)}
.ile-loc.on text{fill:#c2410c}
.ile.anim:not(.vu) .ile-loc-in,.ile.anim:not(.vu) .ile-ici{opacity:0}
.ile.vu .ile-loc-in{animation:ile-plonge-u .8s cubic-bezier(.3,1.6,.5,1) backwards calc(3s + var(--i) * .12s)}
.ile.vu .ile-ici .ile-loc-in{animation-delay:2.4s}
@keyframes ile-plonge-u{0%{opacity:0;transform:translateY(calc(var(--u) * -40px))}}
.ile-ici .ring{fill:#f48a1f;opacity:.5;transform-box:fill-box;transform-origin:center;animation:ping 2.4s ease-out infinite}
.ile-ici .ring.r2{animation-delay:-1.2s}
.ile-goutte{fill:#e2531b;stroke:#fff;stroke-width:calc(var(--u) * 2.5px);filter:drop-shadow(0 calc(var(--u) * 6px) calc(var(--u) * 5px) rgba(10,37,71,.35))}
@keyframes ping{from{transform:scale(.6);opacity:.9}to{transform:scale(2.6);opacity:0}}
.ile.fini :is(.ile-loc-in){animation:none}
/* pages villes : les trajets, des traits qui partent de la ville ; celui qui est allumé passe en orange et un point le parcourt */
.ile-trajet{fill:none;stroke:#0f3a6b;stroke-width:calc(var(--u) * 2.6px);stroke-linecap:round;stroke-dasharray:1;opacity:.45;transition:stroke .3s,opacity .3s,stroke-width .3s}
.ile-trajet.on{stroke:#f48a1f;opacity:1;stroke-width:calc(var(--u) * 4.2px)}
.ile.anim:not(.vu) .ile-trajet{stroke-dashoffset:1}
.ile.vu .ile-trajet{animation:ile-trace 1.3s cubic-bezier(.6,0,.3,1) backwards calc(2.6s + var(--i) * .22s)}
.ile.fini .ile-trajet{animation:none}
.ile-voiture{fill:#fff;stroke:#f48a1f;stroke-width:calc(var(--u) * 3px);filter:drop-shadow(0 calc(var(--u) * 3px) calc(var(--u) * 3px) rgba(10,37,71,.4))}

/* page ouverte dans la fenêtre « Appel gratuit » de contact.js (classe posée par base.html) : le formulaire seul */
.en-cadre .nav,.en-cadre .foot,.en-cadre .cookies,.en-cadre .skip,.en-cadre .readbar,.en-cadre .fo-txt,.en-cadre .fo-lire{display:none!important}
.en-cadre .fo-hero,.en-cadre .fo-merci{padding:24px 0 32px}
.en-cadre .fo-rdv .fo-grille{grid-template-columns:minmax(0,640px);justify-content:center}
.en-cadre .fo-rdv .fo-carte{position:relative;top:auto}