/* ══════════════════════════════════════════════════════════════
   ALIZÉ CHARTER — feuille de style partagée
   Toutes les pages utilisent ce fichier unique.
   Shopify : uploader dans Assets et appeler
   {{ 'style.css' | asset_url | stylesheet_tag }}
   ══════════════════════════════════════════════════════════════ */

:root{
  --navy:#0A2A43;
  --blue:#0B6FB8;
  --blue-d:#08558D;
  --blue-l:#EAF4FB;
  --coral:#FF6B3D;
  --coral-d:#E8541F;
  --green:#1FA97A;
  --grey:#5B7186;
  --line:#E2E9F0;
  --bg:#F6F9FC;
  --star:#FFB020;
  --r:14px;
  --sh:0 2px 4px rgba(10,42,67,.04), 0 12px 28px rgba(10,42,67,.07);
  --sh-h:0 6px 12px rgba(10,42,67,.07), 0 22px 44px rgba(10,42,67,.13);
  --pad:clamp(16px,4vw,60px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--navy);font-family:"Inter",system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:"Poppins",sans-serif;font-weight:600;line-height:1.18;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(28px,4.2vw,52px);font-weight:700}
h2{font-size:clamp(24px,2.9vw,38px)}
h3{font-size:clamp(18px,1.5vw,21px)}
p{margin:0}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--pad)}
.wrap--wide{max-width:1400px}
.sec{padding:clamp(44px,6.5vw,80px) 0}
.sec--grey{background:var(--bg)}
.sec--tight{padding-block:clamp(32px,4vw,52px)}
.eyebrow{font-family:"Poppins";font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.lead{color:var(--grey);font-size:clamp(15px,1.2vw,17px);max-width:64ch}
.hd-block{margin-bottom:clamp(26px,3.5vw,42px)}
.hd-block h2{margin:10px 0 12px}
.center{text-align:center}
.center .lead{margin-inline:auto}
.mt0{margin-top:0}

/* ─── boutons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:10px;font-family:"Poppins";font-weight:600;font-size:15px;transition:background .2s,transform .18s,box-shadow .2s,border-color .2s,color .2s;white-space:nowrap}
.btn--cta{background:var(--coral);color:#fff;box-shadow:0 6px 16px rgba(255,107,61,.32)}
.btn--cta:hover{background:var(--coral-d);transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,107,61,.4)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-d);transform:translateY(-2px)}
.btn--ghost{border:1.5px solid var(--line);background:#fff;color:var(--navy)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--white{background:#fff;color:var(--navy)}
.btn--white:hover{transform:translateY(-2px)}
.btn--line-w{border:1.5px solid rgba(255,255,255,.5);color:#fff}
.btn--line-w:hover{background:rgba(255,255,255,.14)}
.btn--sm{padding:10px 18px;font-size:14px}
.btn--full{width:100%}

/* ─── étoiles ─── */
.stars{display:inline-flex;gap:2px}
.stars svg{width:14px;height:14px;fill:var(--star)}

/* ═══ BANDEAU HAUT ═══ */
.top{background:var(--navy);color:#CFE0EC;font-size:13.5px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:9px}
.top__l{display:flex;gap:22px;align-items:center}
.top b{color:#fff;font-weight:600}
.top__stars{display:flex;align-items:center;gap:7px}
@media(max-width:820px){.top__l span:nth-child(2){display:none}}
@media(max-width:560px){.top__stars{display:none}}

/* ═══ EN-TÊTE ═══ */
.hdr{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .25s}
.hdr.stuck{box-shadow:0 4px 20px rgba(10,42,67,.08)}
.hdr .wrap{display:flex;align-items:center;gap:22px;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;font-family:"Poppins";font-weight:700;font-size:20px;letter-spacing:-.02em}
.logo svg{width:30px;height:30px;flex:0 0 30px}
.logo small{display:block;font-family:"Inter";font-weight:500;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:-3px}
.nav{display:flex;gap:20px;margin-left:auto;font-size:15px;font-weight:500}
.nav a{padding:8px 0;position:relative;color:#22415C}
.nav a::after{content:"";position:absolute;left:0;bottom:2px;height:2px;width:0;background:var(--blue);border-radius:2px;transition:width .25s}
.nav a:hover{color:var(--blue)}
.nav a:hover::after,.nav a.on::after{width:100%}
.nav a.on{color:var(--blue);font-weight:600}
.hdr__cta{display:flex;gap:10px;align-items:center}
.hdr__tel{display:flex;align-items:center;gap:8px;font-family:"Poppins";font-weight:600;color:var(--blue)}
.hdr__tel svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:1.8}
.burger{display:none;width:26px;height:18px;position:relative;margin-left:auto}
.burger i{position:absolute;left:0;width:100%;height:2px;background:var(--navy);border-radius:2px;transition:.3s}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:8px}.burger i:nth-child(3){bottom:0}
body.menu .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu .burger i:nth-child(2){opacity:0}
body.menu .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:1240px){
  .nav{position:fixed;inset:0;background:#fff;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:22px;transform:translateX(100%);transition:transform .35s ease;padding:80px 30px}
  body.menu .nav{transform:none}
  .nav a{padding:14px}
  .hdr__cta .btn,.hdr__tel span{display:none}
  .burger{display:block;z-index:2}
}

/* ═══ FIL D'ARIANE ═══ */
.crumb{background:var(--bg);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--grey)}
.crumb .wrap{display:flex;align-items:center;gap:9px;padding-block:12px;flex-wrap:wrap}
.crumb a:hover{color:var(--blue)}
.crumb span[aria-current]{color:var(--navy);font-weight:500}
.crumb i{font-style:normal;opacity:.5}

/* ═══ HÉROS ═══ */
.hero{position:relative;min-height:clamp(540px,74vh,720px);display:flex;align-items:center;overflow:hidden}
.hero--page{min-height:clamp(280px,34vh,400px)}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,28,48,.84) 0%,rgba(6,28,48,.56) 45%,rgba(6,28,48,.2) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;color:#fff;padding-block:clamp(36px,6vw,66px)}
.hero__pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);padding:7px 15px;border-radius:100px;font-size:13.5px;font-weight:500;margin-bottom:18px}
.hero h1{max-width:17ch;text-shadow:0 2px 24px rgba(0,0,0,.28)}
.hero__p{margin-top:16px;max-width:52ch;font-size:clamp(15.5px,1.3vw,18px);color:#DDE9F2}
.hero__tags{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:14.5px;font-weight:500}
.hero__tags span{display:flex;align-items:center;gap:8px}
.hero__tags svg{width:17px;height:17px;stroke:#6FD3A0;fill:none;stroke-width:2.4}

/* ═══ MOTEUR DE RECHERCHE ═══ */
.search{position:relative;z-index:3;margin:-46px auto 0;max-width:1240px;padding-inline:var(--pad)}
.search__box{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:14px;display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:900px){.search__box{grid-template-columns:1.3fr 1fr 1fr auto;align-items:end}}
.sf{display:grid;gap:5px;padding:6px 12px;border-radius:10px;transition:background .2s}
.sf:hover{background:var(--blue-l)}
.sf label{font-family:"Poppins";font-weight:600;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.sf__in{display:flex;align-items:center;gap:9px}
.sf__in svg{width:18px;height:18px;stroke:var(--blue);fill:none;stroke-width:1.8;flex:0 0 18px}
.sf select,.sf input{border:0;background:none;font-family:"Inter";font-size:15.5px;font-weight:500;color:var(--navy);width:100%;padding:3px 0}
.sf select:focus,.sf input:focus{outline:none}
.search__btn{padding:16px 30px}
@media(min-width:900px){.sf+.sf{border-left:1px solid var(--line)}}

/* ═══ RÉASSURANCE ═══ */
.trust{display:grid;gap:22px;grid-template-columns:repeat(2,1fr);padding-block:clamp(32px,4.5vw,52px)}
@media(min-width:900px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust__i{display:flex;gap:14px;align-items:flex-start}
.trust__i svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.6;flex:0 0 26px;margin-top:2px}
.trust__i b{display:block;font-family:"Poppins";font-weight:600;font-size:15.5px}
.trust__i span{font-size:14px;color:var(--grey);line-height:1.45;display:block;margin-top:2px}

/* ═══ GRILLES ═══ */
.grid3{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:720px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1060px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid2{display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:820px){.grid2{grid-template-columns:repeat(2,1fr)}}

/* ═══ CARTE BATEAU ═══ */
.boat{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .28s,box-shadow .28s,border-color .28s}
.boat:hover{transform:translateY(-6px);box-shadow:var(--sh-h);border-color:transparent}
.boat__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--blue-l)}
.boat__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.boat:hover .boat__img img{transform:scale(1.07)}
.badge{position:absolute;top:12px;left:12px;background:#fff;color:var(--navy);font-family:"Poppins";font-weight:600;font-size:12px;padding:6px 12px;border-radius:100px;box-shadow:0 2px 10px rgba(10,42,67,.16)}
.badge--hot{background:var(--coral);color:#fff}
.badge--new{background:var(--green);color:#fff}
.fav{position:absolute;top:10px;right:10px;width:36px;height:36px;background:rgba(255,255,255,.92);border-radius:50%;display:grid;place-items:center;transition:background .2s}
.fav svg{width:18px;height:18px;stroke:var(--navy);fill:none;stroke-width:1.8;transition:.2s}
.fav.on svg,.fav:hover svg{stroke:var(--coral);fill:var(--coral)}
.boat__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.boat__loc{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--grey)}
.boat__loc svg{width:14px;height:14px;stroke:var(--grey);fill:none;stroke-width:1.9;flex:0 0 14px}
.boat h3{margin:7px 0 10px}
.rate{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--grey);margin-bottom:14px}
.rate b{background:var(--blue);color:#fff;font-family:"Poppins";font-size:12.5px;padding:3px 8px;border-radius:6px}
.specs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.spec{display:flex;align-items:center;gap:6px;background:var(--bg);border-radius:8px;padding:6px 11px;font-size:13px;font-weight:500;color:#33546F}
.spec svg{width:14px;height:14px;stroke:var(--blue);fill:none;stroke-width:1.8;flex:0 0 14px}
.boat__foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.price small{display:block;font-size:12px;color:var(--grey);line-height:1.2}
.price b{font-family:"Poppins";font-weight:700;font-size:23px;color:var(--coral);letter-spacing:-.02em}
.price i{font-style:normal;font-size:13px;color:var(--grey);font-weight:500}

/* ═══ CATALOGUE : FILTRES ═══ */
.cat{display:grid;gap:28px;grid-template-columns:1fr;align-items:start}
@media(min-width:1000px){.cat{grid-template-columns:282px minmax(0,1fr);gap:34px}}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
@media(min-width:1000px){.filters{position:sticky;top:96px}}
.filters h3{font-size:17px;margin-bottom:4px}
.fgrp{border-top:1px solid var(--line);padding-top:16px;margin-top:16px}
.fgrp h4{font-size:13px;font-family:"Poppins";letter-spacing:.05em;text-transform:uppercase;color:var(--grey);margin-bottom:11px}
.chk{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14.5px;cursor:pointer;color:#33546F}
.chk input{width:17px;height:17px;accent-color:var(--blue);cursor:pointer;flex:0 0 17px}
.chk span{flex:1}
.chk em{font-style:normal;color:#9AAEBE;font-size:13px}
.rng{width:100%;accent-color:var(--blue);margin-top:6px}
.rng__val{display:flex;justify-content:space-between;font-size:13.5px;color:var(--grey);margin-top:4px}
.rng__val b{color:var(--navy);font-family:"Poppins"}
.cat__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.cat__count{font-size:15px;color:var(--grey)}
.cat__count b{color:var(--navy);font-family:"Poppins"}
.sort{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--grey)}
.sort select{border:1.5px solid var(--line);border-radius:9px;padding:9px 12px;font-family:"Inter";font-size:14.5px;color:var(--navy);background:#fff}
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--blue-l);color:var(--blue-d);border-radius:100px;padding:6px 13px;font-size:13.5px;font-weight:500}
.pill button{line-height:1;font-size:16px;opacity:.7}
.pill button:hover{opacity:1}
.empty{border:1.5px dashed var(--line);border-radius:var(--r);padding:44px 24px;text-align:center;color:var(--grey)}
.list{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:640px){.list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1300px){.list{grid-template-columns:repeat(3,1fr)}}
.pager{display:flex;gap:8px;justify-content:center;margin-top:34px}
.pager a,.pager span{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;font-weight:600;font-size:14.5px;background:#fff}
.pager .on{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ═══ FICHE BATEAU ═══ */
.gal{display:grid;gap:10px;grid-template-columns:1fr;position:relative}
.gal button{position:relative;overflow:hidden;border-radius:12px;background:var(--blue-l);aspect-ratio:16/10}
@media(min-width:760px){
  .gal{grid-template-columns:1.7fr 1fr 1fr;grid-template-rows:1fr 1fr;height:clamp(320px,40vw,470px)}
  .gal button{aspect-ratio:auto;height:100%}
  .gal button:first-child{grid-column:1;grid-row:1 / span 2}
}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gal button:hover img{transform:scale(1.05)}
.gal__more{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.94);border-radius:9px;padding:8px 14px;font-family:"Poppins";font-weight:600;font-size:13.5px;box-shadow:0 2px 10px rgba(10,42,67,.18)}
.det{display:grid;gap:32px;grid-template-columns:1fr;align-items:start;margin-top:30px}
@media(min-width:1000px){.det{grid-template-columns:minmax(0,1fr) 372px;gap:44px}}
.det__title{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start}
.keyfacts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:24px 0}
@media(min-width:640px){.keyfacts{grid-template-columns:repeat(4,1fr)}}
.keyfacts div{background:#fff;padding:16px 18px}
.keyfacts svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.7;margin-bottom:7px}
.keyfacts b{display:block;font-family:"Poppins";font-weight:600;font-size:16px}
.keyfacts span{font-size:13px;color:var(--grey)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:22px}
.tabs button{padding:13px 18px;font-family:"Poppins";font-weight:600;font-size:15px;color:var(--grey);border-bottom:3px solid transparent;white-space:nowrap;transition:.2s}
.tabs button:hover{color:var(--navy)}
.tabs button.on{color:var(--blue);border-color:var(--blue)}
.tabp{display:none}
.tabp.on{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.equip{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){.equip{grid-template-columns:1fr 1fr}}
.equip li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:#33546F}
.equip li svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:2.6;flex:0 0 18px;margin-top:3px}

/* encart réservation */
.bk{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:22px}
@media(min-width:1000px){.bk{position:sticky;top:96px}}
.bk__price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bk__price b{font-family:"Poppins";font-weight:700;font-size:32px;color:var(--navy);letter-spacing:-.03em}
.bk__price span{color:var(--grey);font-size:14px}
.bk__note{font-size:13.5px;color:var(--grey);margin-top:4px}
.bk .fld{margin-top:14px}
.bk__sum{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;display:grid;gap:9px;font-size:14.5px}
.bk__sum div{display:flex;justify-content:space-between;gap:12px;color:#33546F}
.bk__sum .tot{border-top:1px solid var(--line);padding-top:11px;font-family:"Poppins";font-weight:700;font-size:18px;color:var(--navy)}
.bk__ok{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--green);font-weight:500;margin-top:14px}
.bk__ok svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2.6}
.opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:14.5px;cursor:pointer;margin-top:9px;transition:border-color .2s,background .2s}
.opt:hover{border-color:var(--blue)}
.opt input{accent-color:var(--blue);width:17px;height:17px;flex:0 0 17px}
.opt span{flex:1}
.opt span b{display:block;font-family:"Poppins";font-weight:600;font-size:14.5px;margin-bottom:2px}
.opt span small{display:block;color:var(--grey);font-size:12.5px;line-height:1.35}
.opt>b{font-family:"Poppins";font-weight:600;font-size:14px;white-space:nowrap}

/* calendrier */
.cal{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:#fff}
.cal__hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal__hd b{font-family:"Poppins";font-weight:600;font-size:16px;text-transform:capitalize}
.cal__nav{display:flex;gap:6px}
.cal__nav button{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;transition:.2s}
.cal__nav button:hover{border-color:var(--blue);color:var(--blue)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal__grid i{font-style:normal;text-align:center;font-size:11.5px;font-weight:600;color:var(--grey);text-transform:uppercase;padding-bottom:5px}
.cal__d{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;font-size:14px;font-weight:500;background:var(--bg);color:#9AAEBE}
.cal__d.free{background:#E8F7F1;color:#12805C;cursor:pointer;font-weight:600}
.cal__d.free:hover{background:var(--green);color:#fff}
.cal__d.busy{background:#FDECE6;color:#C0522C;text-decoration:line-through}
.cal__d.sel{background:var(--blue);color:#fff}
.cal__lg{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--grey)}
.cal__lg span{display:flex;align-items:center;gap:7px}
.cal__lg i{width:12px;height:12px;border-radius:4px;display:block}

/* ═══ FORMULES ═══ */
.plans{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:820px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:#fff;display:flex;flex-direction:column;position:relative;transition:box-shadow .25s,transform .25s}
.plan:hover{box-shadow:var(--sh);transform:translateY(-4px)}
.plan--best{border:2px solid var(--blue);box-shadow:var(--sh)}
.plan__flag{position:absolute;top:-13px;left:24px;background:var(--blue);color:#fff;font-family:"Poppins";font-weight:600;font-size:12px;padding:5px 13px;border-radius:100px}
.plan h3{margin-bottom:4px}
.plan__hrs{font-size:14px;color:var(--grey)}
.plan__price{font-family:"Poppins";font-weight:700;font-size:34px;margin:16px 0 4px;letter-spacing:-.03em}
.plan__price span{font-size:14px;font-weight:500;color:var(--grey);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:18px 0 24px;display:grid;gap:11px;font-size:14.5px}
.plan li{display:flex;gap:10px;align-items:flex-start;color:#33546F}
.plan li svg{width:17px;height:17px;stroke:var(--green);fill:none;stroke-width:2.6;flex:0 0 17px;margin-top:3px}
.plan .btn{margin-top:auto}

/* tableau comparatif */
.tblw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table.cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:14.5px}
table.cmp th,table.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
table.cmp thead th{background:var(--bg);font-family:"Poppins";font-weight:600;font-size:14px}
table.cmp thead th:not(:first-child){text-align:center}
table.cmp td:not(:first-child){text-align:center}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp tbody tr:hover{background:#FBFDFF}
table.cmp td:first-child{color:#33546F;font-weight:500}
.yes{color:var(--green);font-weight:700}
.no{color:#C3CEDA}
.hl{background:#F2F9FE}

/* ═══ DESTINATIONS ═══ */
.dest{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.dest{grid-template-columns:repeat(4,1fr)}}
.dest a{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;display:block}
.dest img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.dest a:hover img{transform:scale(1.09)}
.dest a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,28,48,.86) 6%,rgba(6,28,48,.08) 62%)}
.dest__t{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff}
.dest__t b{font-family:"Poppins";font-weight:600;font-size:19px;display:block}
.dest__t span{font-size:13.5px;color:#CFE0EC}
.isle{display:grid;gap:26px;grid-template-columns:1fr;align-items:center;padding:clamp(22px,3vw,30px);border:1px solid var(--line);border-radius:var(--r);background:#fff}
@media(min-width:860px){.isle{grid-template-columns:1fr 1.15fr;gap:36px}.isle--rev .isle__im{order:2}}
.isle__im{border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.isle__im img{width:100%;height:100%;object-fit:cover}
.isle__meta{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 16px}

/* ═══ ÉTAPES / TIMELINE ═══ */
.steps{display:grid;gap:26px;grid-template-columns:1fr;counter-reset:s}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding-left:62px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-4px;width:46px;height:46px;border-radius:50%;background:var(--blue-l);color:var(--blue);font-family:"Poppins";font-weight:700;font-size:19px;display:grid;place-items:center}
.step p{color:var(--grey);font-size:15px;margin-top:7px}
.tl{position:relative;padding-left:34px;border-left:2px solid var(--line);display:grid;gap:26px}
.tl__i{position:relative}
.tl__i::before{content:"";position:absolute;left:-43px;top:5px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.tl__h{font-family:"Poppins";font-weight:700;color:var(--blue);font-size:14.5px;letter-spacing:.04em}
.tl__i h3{margin:3px 0 6px}
.tl__i p{color:var(--grey);font-size:15px;max-width:62ch}

/* ═══ INCLUS ═══ */
.incl{display:grid;gap:clamp(28px,4vw,54px);align-items:center;grid-template-columns:1fr}
@media(min-width:920px){.incl{grid-template-columns:1fr 1fr}}
.incl__img{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--sh)}
.incl__img img{width:100%;height:100%;object-fit:cover}
.incl ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:13px;grid-template-columns:1fr}
@media(min-width:560px){.incl ul{grid-template-columns:1fr 1fr}}
.incl li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:#33546F}
.incl li svg{width:19px;height:19px;stroke:var(--green);fill:none;stroke-width:2.6;flex:0 0 19px;margin-top:2px}

/* ═══ AVIS ═══ */
.rev__score{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 20px;margin-bottom:26px}
.rev__score b{font-family:"Poppins";font-weight:700;font-size:32px;letter-spacing:-.03em}
.rev__score small{display:block;font-size:13px;color:var(--grey)}
.revs{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:760px){.revs{grid-template-columns:repeat(3,1fr)}}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.rev p{font-size:14.8px;color:#33546F;margin:12px 0 16px}
.rev__who{display:flex;align-items:center;gap:11px;font-size:13.5px}
.rev__av{width:38px;height:38px;border-radius:50%;background:var(--blue-l);color:var(--blue);display:grid;place-items:center;font-family:"Poppins";font-weight:600;flex:0 0 38px}
.rev__who b{display:block;font-family:"Poppins";font-weight:600;font-size:14.5px}
.rev__who span{color:var(--grey)}

/* ═══ ÉQUIPE ═══ */
.team{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:620px){.team{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.team{grid-template-columns:repeat(4,1fr)}
  .team--3{grid-template-columns:repeat(3,1fr)}}
.mate{text-align:center}
.mate__im{aspect-ratio:1;border-radius:var(--r);overflow:hidden;margin-bottom:14px;background:var(--blue-l)}
.mate__im img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mate:hover .mate__im img{transform:scale(1.06)}
.mate b{font-family:"Poppins";font-weight:600;font-size:17px;display:block}
.mate span{color:var(--blue);font-size:14px;font-weight:500}
.mate p{font-size:14px;color:var(--grey);margin-top:7px}
.figs{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.figs{grid-template-columns:repeat(4,1fr)}}
.figs div{background:#fff;padding:26px 22px;text-align:center}
.figs b{display:block;font-family:"Poppins";font-weight:700;font-size:clamp(28px,3.4vw,42px);color:var(--blue);letter-spacing:-.03em}
.figs span{font-size:14px;color:var(--grey)}

/* ═══ FORMULAIRE / DEVIS ═══ */
.quote{background:var(--navy);color:#fff;border-radius:clamp(0px,3vw,20px);overflow:hidden}
.quote__in{display:grid;grid-template-columns:1fr}
@media(min-width:940px){.quote__in{grid-template-columns:1fr 1.05fr}}
.quote__l{padding:clamp(30px,4.5vw,56px)}
.quote__l h2{color:#fff}
.quote__l p{color:#BCD2E3;margin-top:14px;max-width:44ch}
.quote__pts{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.quote__pts li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#DDE9F2}
.quote__pts svg{width:19px;height:19px;stroke:#6FD3A0;fill:none;stroke-width:2.5;flex:0 0 19px;margin-top:2px}
.quote__adv{display:flex;align-items:center;gap:14px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.quote__adv img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.quote__adv b{display:block;font-family:"Poppins";font-weight:600}
.quote__adv span{font-size:13.5px;color:#BCD2E3}
.quote__f{background:#fff;color:var(--navy);padding:clamp(26px,4vw,44px)}
.form{display:grid;gap:16px}
.fld{display:grid;gap:6px}
.fld label{font-family:"Poppins";font-weight:600;font-size:12.5px;letter-spacing:.04em;color:var(--grey)}
.fld input,.fld select,.fld textarea{border:1.5px solid var(--line);border-radius:10px;padding:12px 13px;font-family:"Inter";font-size:15px;color:var(--navy);background:#fff;transition:border-color .2s,box-shadow .2s}
.fld textarea{resize:vertical;min-height:78px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,111,184,.13)}
.r2{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:560px){.r2{grid-template-columns:1fr 1fr}}
.est{background:var(--blue-l);border-radius:10px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.est span{font-size:13.5px;color:var(--grey);font-weight:500}
.est b{font-family:"Poppins";font-weight:700;font-size:24px;color:var(--blue)}
.note{font-size:12.5px;color:var(--grey);text-align:center}
.note.err{color:var(--coral-d);font-weight:600}

/* formulaire multi-étapes */
.wiz__bar{display:flex;gap:8px;margin-bottom:24px}
.wiz__bar div{flex:1;display:grid;gap:7px;font-size:12.5px;font-weight:600;color:var(--grey);font-family:"Poppins"}
.wiz__bar i{display:block;height:4px;border-radius:3px;background:var(--line);transition:background .3s}
.wiz__bar .on i{background:var(--blue)}
.wiz__bar .on{color:var(--blue)}
.wiz__st{display:none}
.wiz__st.on{display:grid;gap:16px;animation:fade .3s ease}
.wiz__nav{display:flex;gap:12px;margin-top:4px}
.wiz__nav .btn{flex:1}
.choice{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:520px){.choice{grid-template-columns:1fr 1fr}}
.choice label{border:1.5px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;transition:border-color .2s,background .2s;display:flex;gap:11px;align-items:flex-start}
.choice label:hover{border-color:var(--blue)}
.choice input{accent-color:var(--blue);margin-top:3px;flex:0 0 17px;width:17px;height:17px}
.choice b{font-family:"Poppins";font-weight:600;font-size:15px;display:block}
.choice small{color:var(--grey);font-size:13px}
.choice input:checked+span b{color:var(--blue)}

/* ═══ FAQ ═══ */
.faq{max-width:860px;margin-inline:auto}
.q{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.q.on{border-color:var(--blue);box-shadow:var(--sh)}
.q>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 20px;text-align:left;font-family:"Poppins";font-weight:600;font-size:16px}
.q__ic{width:22px;height:22px;flex:0 0 22px;position:relative}
.q__ic::before,.q__ic::after{content:"";position:absolute;top:50%;left:3px;right:3px;height:2px;background:var(--blue);border-radius:2px;transition:transform .3s}
.q__ic::after{transform:rotate(90deg)}
.q.on .q__ic::after{transform:rotate(0)}
.q__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.q__a p{padding:0 20px 20px;color:var(--grey);font-size:15px}
.faq__search{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:12px 16px;max-width:520px;margin:0 auto 26px;background:#fff}
.faq__search svg{width:19px;height:19px;stroke:var(--grey);fill:none;stroke-width:2}
.faq__search input{border:0;flex:1;font-family:"Inter";font-size:15px;color:var(--navy)}
.faq__search input:focus{outline:none}
.fcats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.fcat{border:1.5px solid var(--line);background:#fff;border-radius:100px;padding:8px 17px;font-size:14px;font-weight:500;transition:.2s}
.fcat:hover{border-color:var(--blue);color:var(--blue)}
.fcat.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ═══ BANDEAU CTA ═══ */
.cta{position:relative;overflow:hidden;border-radius:clamp(0px,3vw,20px)}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,28,48,.9),rgba(6,28,48,.55))}
.cta__in{position:relative;z-index:2;padding:clamp(34px,5vw,64px);color:#fff;max-width:640px}
.cta__in h2{color:#fff}
.cta__in p{color:#DDE9F2;margin:14px 0 24px}
.cta__btns{display:flex;gap:12px;flex-wrap:wrap}

/* ═══ CONTACT ═══ */
.cinfo{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:680px){.cinfo{grid-template-columns:repeat(3,1fr)}}
.cinfo div{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:#fff}
.cinfo svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.7;margin-bottom:10px}
.cinfo b{font-family:"Poppins";font-weight:600;display:block;margin-bottom:5px}
.cinfo p,.cinfo a{color:var(--grey);font-size:14.5px}
.cinfo a:hover{color:var(--blue)}
.map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:16/7;position:relative;background:var(--blue-l)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* ═══ PIED ═══ */
.ft{background:var(--navy);color:#B9CEDF;padding-top:clamp(44px,6vw,70px);font-size:14.5px}
.ft__nl{background:rgba(255,255,255,.06);border-radius:var(--r);padding:26px;display:grid;gap:18px;align-items:center;margin-bottom:40px}
@media(min-width:820px){.ft__nl{grid-template-columns:1.2fr 1fr}}
.ft__nl h3{color:#fff}
.ft__nl p{color:#9FBBD1;font-size:14.5px;margin-top:6px}
.nlf{display:flex;gap:10px;flex-wrap:wrap}
.nlf input{flex:1;min-width:180px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);border-radius:10px;padding:13px 15px;color:#fff;font-family:"Inter";font-size:15px}
.nlf input::placeholder{color:#8FAEC6}
.nlf input:focus{outline:none;border-color:#8CC6EA}
.ft__g{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:760px){.ft__g{grid-template-columns:1.5fr 1fr 1fr 1.2fr}}
.ft h4{color:#fff;font-size:15px;margin-bottom:16px}
.ft ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ft a:hover{color:#fff}
.ft .logo{color:#fff}
.ft .logo small{color:#8FAEC6}
.ft__pay{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.ft__pay span{background:rgba(255,255,255,.09);border-radius:6px;padding:6px 11px;font-size:12px;font-weight:600;color:#DDE9F2}
.ft__bot{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px}

/* barre mobile fixe */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;background:#fff;border-top:1px solid var(--line);padding:10px var(--pad);display:none;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -4px 18px rgba(10,42,67,.1)}
.sticky b{font-family:"Poppins";font-weight:700;color:var(--coral);font-size:19px}
.sticky small{display:block;font-size:12px;color:var(--grey)}
@media(max-width:720px){.sticky{display:flex}body{padding-bottom:72px}}

/* visionneuse */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,20,34,.94);display:none;place-items:center;padding:4vw}
.lb.on{display:grid}
.lb img{max-width:min(1200px,94vw);max-height:86vh;border-radius:12px;object-fit:contain}
.lb__x{position:absolute;top:20px;right:22px;color:#fff;font-size:15px;font-weight:600}
.lb__ar{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;font-size:22px}
.lb__ar:hover{background:rgba(255,255,255,.3)}
.lb__p{left:2vw}.lb__n{right:2vw}

/* révélation */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}html{scroll-behavior:auto}
}
/* ─── routeur ─── */


/* ─── vitrine 3 photos (accueil) ─── */
.showcase{display:grid;gap:10px;grid-template-columns:1fr}
.showcase>div{border-radius:var(--r);overflow:hidden;background:var(--blue-l);aspect-ratio:16/10}
@media(min-width:760px){
  .showcase{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;height:clamp(320px,38vw,460px)}
  .showcase>div{aspect-ratio:auto;height:100%}
  .showcase__main{grid-column:1;grid-row:1 / span 2}
}
.showcase img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.showcase>div:hover img{transform:scale(1.06)}

/* ─── plan du pont ─── */
.deckwrap{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:18px}
.deck{width:100%;height:auto;display:block;max-width:560px;margin-inline:auto}

/* ─── mosaïque photos ─── */
.mosaic{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.mosaic{grid-template-columns:repeat(3,1fr)}}
.mosaic button{aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--blue-l)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mosaic button:hover img{transform:scale(1.08)}

/* ─── menu du jour ─── */
.menucards{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:860px){.menucards{grid-template-columns:1fr 1.3fr 1fr;align-items:start}}
.menucard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.menucard--main{border:2px solid var(--blue);box-shadow:var(--sh)}
.menucard__h{font-family:"Poppins";font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.menucard ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:12px}
.menucard li{font-size:15px;color:#33546F;padding-bottom:12px;border-bottom:1px dashed var(--line)}
.menucard li:last-child{border-bottom:0;padding-bottom:0}

/* ─── calculette ─── */
.calc{display:grid;gap:22px;grid-template-columns:1fr;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px)}
@media(min-width:820px){.calc{grid-template-columns:1.4fr 1fr;gap:44px;align-items:center}}
.calc__ctl{display:grid;gap:20px}
.calc__out{background:var(--blue-l);border-radius:12px;padding:24px;text-align:center}
.calc__out span{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.calc__out b{display:block;font-family:"Poppins";font-weight:700;font-size:30px;color:var(--navy);letter-spacing:-.02em;margin-top:4px}
.calc__out strong{display:block;font-family:"Poppins";font-weight:700;font-size:38px;color:var(--blue);letter-spacing:-.03em;margin-top:4px}

/* ══════════════════════════════════════════════════════════
   CARROUSELS TACTILES — actifs uniquement sous 760 px
   Défilement natif avec accrochage (scroll-snap) : aucun
   décalage possible, et le geste reste fluide sur mobile.
   ══════════════════════════════════════════════════════════ */
.swipe__dots{display:none}
@media(max-width:759px){
  .swipe{
    display:flex!important;
    grid-template-columns:none!important;
    height:auto!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:12px;
    margin-inline:calc(-1 * var(--pad));
    padding-inline:var(--pad);
    scroll-padding-inline:var(--pad);
    scrollbar-width:none;
  }
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{flex:0 0 84%;scroll-snap-align:center;height:auto!important}
  .swipe>.gal__more{display:none}
  .swipe .rev,.swipe .mate{height:100%}
  .mosaic.swipe>button{flex:0 0 70%;aspect-ratio:1}
  .dest.swipe>a{flex:0 0 68%}
  .swipe__dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
  .swipe__dots button{width:7px;height:7px;border-radius:50%;background:#C3CEDA;transition:width .25s,background .25s}
  .swipe__dots button.on{background:var(--blue);width:22px;border-radius:4px}
}

/* ══════════════════════════════════════════════════════════
   AJUSTEMENTS RESPONSIVE
   ══════════════════════════════════════════════════════════ */
/* menu mobile : accès au devis et au téléphone */
.nav__cta,.nav__tel{display:none}
@media(max-width:1240px){
  .nav__cta{display:inline-flex!important;margin-top:18px;background:var(--coral);color:#fff;
    padding:15px 30px;border-radius:10px;font-family:"Poppins";font-weight:600;font-size:17px}
  .nav__cta::after{display:none!important}
  .nav__tel{display:block!important;font-size:17px!important;color:var(--blue);font-weight:600;margin-top:4px}
}

/* réassurance : 4 blocs illisibles sur petit écran */
@media(max-width:600px){
  .trust{grid-template-columns:1fr;gap:16px}
  .trust__i svg{width:22px;height:22px;flex:0 0 22px}
}

/* formulaire multi-étapes : les 3 libellés débordaient */
@media(max-width:520px){
  .wiz__bar div{font-size:11px}
  .wiz__nav{flex-direction:column-reverse}
  .choice{grid-template-columns:1fr}
}
@media(max-width:430px){.wiz__bar div span{display:none}
  .wiz__bar div{font-size:12px;text-align:center}}

/* carte d'accès : trop écrasée en 16/7 sur mobile */
@media(max-width:760px){.map{aspect-ratio:4/3}}

/* tableau comparatif : signaler le défilement */
.tblhint{display:none}
@media(max-width:760px){
  .tblhint{display:block;font-size:13px;color:var(--grey);margin-bottom:10px}
  .tblw{position:relative}
  .tblw::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),#fff)}
}

/* ── Garde-fou anti-débordement horizontal ──────────────────
   clip (et non hidden) : ne casse pas position:sticky        */
html,body{overflow-x:clip;max-width:100%}
.wrap,.det,.dethead,.det>*,.dethead>*{min-width:0}
.dethead{margin-top:30px}
.det{margin-top:26px}

/* fiche bateau : titre pleine largeur, puis réservation avant les onglets.
   align-items:stretch + width:100% : sans ça la colonne se dimensionnait sur
   son contenu le plus large (le tableau) et débordait de l'écran.          */
@media(max-width:999px){
  .det{display:flex;flex-direction:column;align-items:stretch;gap:26px}
  .det>*{flex:0 0 auto;width:100%;max-width:100%;min-width:0}
  .det .bk{order:-1;position:static}
  .opt{flex-wrap:wrap}
}

/* ── Confinement : rien ne peut plus élargir son conteneur ── */
.tabp,.tblw,.cal,.tabs{min-width:0;max-width:100%}
.cal__grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.cal__d{min-width:0;font-size:13.5px}

/* fiche technique : 2 colonnes, elle tient sans défilement */
table.cmp--spec{min-width:0}
table.cmp--spec td{padding:12px 14px}
table.cmp--spec td:first-child{width:45%}

/* tableau comparatif : la 1re colonne reste visible pendant le défilement */
table.cmp thead th:first-child,table.cmp tbody td:first-child{
  position:sticky;left:0;z-index:2;background:#fff}
table.cmp thead th:first-child{background:var(--bg)}
table.cmp tbody tr.hl td:first-child{background:#F2F9FE}
@media(max-width:760px){
  table.cmp{min-width:520px;font-size:13.5px}
  table.cmp th,table.cmp td{padding:11px 12px}
}

/* onglets : dégradé indiquant qu'il en reste à droite */
@media(max-width:900px){
  .tabwrap{position:relative}
  .tabwrap::after{content:"";position:absolute;top:0;right:0;bottom:3px;width:36px;
    pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff)}
}
@media(max-width:620px){
  .det__title{flex-direction:column;align-items:flex-start;gap:12px}
  .det__title .rate{margin:0}
  .keyfacts{grid-template-columns:repeat(2,1fr)}
  .keyfacts div{padding:14px}
  .keyfacts b{font-size:15px}
  .keyfacts span{font-size:12px}
}

/* titres et blocs serrés sur les très petits écrans */
@media(max-width:480px){
  .det__title{gap:10px}
  .plan__price{font-size:30px}
  .calc__out strong{font-size:32px}
  .rev__score b{font-size:27px}
  .figs div{padding:20px 14px}
  .hdr .wrap{gap:12px}
  .logo{font-size:17px}
  .logo svg{width:26px;height:26px;flex:0 0 26px}
  .logo small{font-size:9px;letter-spacing:.1em}
  .bk{padding:18px}
  .bk__price b{font-size:27px}
  .sec{padding-block:38px}
}

/* onglets : accrochage au défilement horizontal */
@media(max-width:760px){
  .tabs{scroll-snap-type:x proximity;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{scroll-snap-align:start;padding:12px 14px;font-size:14.5px}
}

/* ══════════════════════════════════════════════════════════════
   1. Panneau mobile : hauteur déduite de son contenu
   Il s'ouvre juste sous l'en-tête, sans supposer sa hauteur.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1279px){
  body .nav{
    position:absolute;top:100%;left:0;right:0;bottom:auto;
    height:auto;max-height:calc(100vh - 60px);
    box-shadow:0 18px 32px rgba(20,50,45,.14);
  }
  body.admin-bar .nav{max-height:calc(100vh - 92px)}
}

/* ══════════════════════════════════════════════════════════════
   2. Rectangle bleu au toucher
   Les navigateurs mobiles surlignent la zone touchée. On supprime
   ce surlignage et on le remplace par un retour discret.
   ══════════════════════════════════════════════════════════════ */
a,button,label,input,select,textarea,.btn,summary{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
}
@media(hover:none){
  a:active,.btn:active,button:active,label:active{opacity:.72;transition:opacity .1s}
}

/* ══════════════════════════════════════════════════════════════
   3. Vitrine de l'accueil : proportions rétablies
   La hauteur est de nouveau maîtrisée, tout en gardant la
   protection qui empêchait les images de déborder.
   ══════════════════════════════════════════════════════════════ */
@media(min-width:760px){
  body .showcase{height:clamp(300px,31vw,410px);grid-template-rows:1fr 1fr}
  body .showcase>div{height:100%;min-height:0;min-width:0;overflow:hidden;aspect-ratio:auto}
  body .gal{height:clamp(300px,36vw,440px);grid-template-rows:1fr 1fr}
  body .gal button{height:100%;min-height:0;min-width:0;overflow:hidden;aspect-ratio:auto}
}

/* ══════════════════════════════════════════════════════════════
   MENU — l'entrée Urgences se distingue, le bandeau rouge ayant
   été retiré du haut de page.
   ══════════════════════════════════════════════════════════════ */
.nav a[data-nav="urgences"]{color:var(--alert);font-weight:700}
.nav a[data-nav="urgences"]:hover{color:#BE3733}
.nav a[data-nav="urgences"]::after{background:var(--alert)}
.nav a[data-nav="urgences"]::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--alert);margin-right:8px;vertical-align:middle}

/* ══════════════════════════════════════════════════════════════
   PANNEAU MOBILE ancré sous l'en-tête
   Positionné par rapport à l'en-tête lui-même : il commence
   toujours exactement sous lui, quel que soit le défilement,
   sans mesure en JavaScript.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1279px){
  body .nav{
    position:absolute;top:100%;left:0;right:0;bottom:auto;
    height:calc(100vh - 72px);
  }
  body.admin-bar .nav{height:calc(100vh - 104px)}
}

/* ══════════════════════════════════════════════════════════════
   FLUIDITÉ SUR MOBILE
   Les sections hors écran ne sont plus calculées tant qu'on ne
   les approche pas, et les animations sont raccourcies.
   ══════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .sec{content-visibility:auto;contain-intrinsic-size:auto 700px}
  .rv{transition-duration:.35s}
  .boat:hover,.svc:hover,.plan:hover,.mate:hover,.urg-num:hover{transform:none}
  .showcase img,.gal img,.dest img,.mosaic img{transition:none}
  .hdr{transition:none}
}

/* ══════════════════════════════════════════════════════════════
   CORRECTIF STRUCTUREL — grilles d'images
   Les grilles imposaient une hauteur au conteneur et demandaient
   aux images de la remplir. Selon le navigateur, les images
   refusaient de se réduire et débordaient sur la section suivante,
   recouvrant son contenu et ses liens.
   La hauteur est désormais déduite des images elles-mêmes : le
   conteneur ne peut plus être dépassé.
   ══════════════════════════════════════════════════════════════ */
@media(min-width:760px){
  body .showcase{height:auto;grid-template-rows:auto auto;align-items:stretch}
  body .showcase>div{height:auto;min-height:0;min-width:0;overflow:hidden}
  body .showcase__side{aspect-ratio:16/10}
  body .showcase__main{aspect-ratio:auto;height:100%}

  body .gal{height:auto;grid-template-rows:auto auto;align-items:stretch}
  body .gal button{height:auto;min-height:0;min-width:0;overflow:hidden;aspect-ratio:16/10}
  body .gal button:first-child{aspect-ratio:auto;height:100%}

  body .mosaic button{min-height:0;min-width:0;overflow:hidden}
}
body .showcase img,body .gal img,body .mosaic img{
  display:block;width:100%;height:100%;object-fit:cover;min-height:0;min-width:0}

/* ══════════════════════════════════════════════════════════
   MENU MOBILE SANS JAVASCRIPT
   Une case à cocher masquée porte l'état ouvert/fermé. Le menu
   fonctionne donc même si le script ne se charge pas, et il
   démarre sous l'en-tête, dont la hauteur est fixée ici.
   ══════════════════════════════════════════════════════════ */
.nav-toggle{display:none}

@media(max-width:1279px){
  .hdr .wrap{min-height:44px}

  .nav{
    position:fixed;top:72px;left:0;right:0;bottom:0;
    z-index:80;background:#fff;border-top:1px solid var(--line);
    display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;
    gap:2px;padding:26px clamp(22px,7vw,44px) 40px;overflow-y:auto;
    transform:translateX(100%);transition:transform .3s ease;
    visibility:hidden;pointer-events:none;
  }
  .admin-bar .nav{top:104px}

  /* ouverture : pilotée par la case à cocher */
  .nav-toggle:checked ~ .nav{transform:none;visibility:visible;pointer-events:auto}

  /* les trois traits deviennent une croix */
  .nav-toggle:checked ~ .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle:checked ~ .burger i:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  .burger{display:block;z-index:90;cursor:pointer}
  .hdr__cta .btn{display:none}
}

@media(max-width:600px){.admin-bar .nav{top:72px}}

/* ══════════════════════════════════════════════════════════
   Débordement des grilles à hauteur imposée
   Un élément de grille a min-height:auto : il refuse de se
   réduire sous la taille de son contenu. Firefox applique la
   règle strictement, les images débordent alors du conteneur
   et recouvrent la section suivante. On autorise la réduction
   et on confine ce qui dépasserait malgré tout.
   ══════════════════════════════════════════════════════════ */
@media(min-width:760px){
  .showcase,.gal,.mosaic{overflow:hidden}
  .showcase>*,.gal>*,.mosaic>*{min-height:0;min-width:0;overflow:hidden}
  .showcase img,.gal img,.mosaic img{display:block;min-height:0;min-width:0}
}

/* respiration entre la liste des animaux et la fiche ouverte */
#ec-pets{margin-bottom:0}
#ec-detail{margin-top:clamp(28px,4vw,42px)}
#ec-inbox{margin-top:clamp(28px,4vw,42px)}
#ec-pets h2{margin-bottom:16px}



/* ══════════════════════════════════════════════════════════
   THÈME VÉTÉRINAIRE — surcharge des variables du gabarit
   Pour rhabiller le site pour un autre cabinet, il suffit
   de modifier les six couleurs ci-dessous.
   ══════════════════════════════════════════════════════════ */
:root{
  --navy:#14322D;        /* texte principal */
  --blue:#157F72;        /* couleur de marque (vert soin) */
  --blue-d:#0F6459;
  --blue-l:#E7F4F1;
  --brand:#157F72;
  --brand-l:#E7F4F1;
  --coral:#F59E2C;       /* boutons d'action (ambre) */
  --coral-d:#DE8A15;
  --alert:#D64541;       /* urgences */
  --grey:#5E7570;
  --line:#E3EBE9;
  --bg:#F5F9F8;
  --r:18px;
}
/* boutons d'action : texte sombre sur ambre, bien plus lisible */
.btn--cta{background:var(--coral);color:#14322D;box-shadow:0 6px 16px rgba(245,158,44,.32)}
.btn--cta:hover{background:var(--coral-d);color:#14322D;box-shadow:0 10px 24px rgba(245,158,44,.42)}
.btn--alert{background:var(--alert);color:#fff}
.btn--alert:hover{background:#BE3733;color:#fff}
.hero__pill{background:rgba(255,255,255,.18)}

/* typographie : Nunito pour les titres, plus chaleureuse */
h1,h2,h3,h4,.logo,.btn,.eyebrow,.nav,.plan__price,.figs b,.keyfacts b,.rev__score b,
.calc__out b,.calc__out strong,.bk__price b,.badge,.tl__h,.plan__flag,.fcat,.q>button,
.menucard__h,.wiz__bar div,.fld label,.sf label,.dest__t b,.mate b,.spec,.rate b,
.price b,.ft h4,.trust__i b,.stat b,.svc h3,.urg-num b,.tox__i b,.slot
{font-family:"Nunito",system-ui,sans-serif}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.015em}

/* ── En-tête : logo à gauche, menu centré, bouton à droite ── */
.hdr__tel,.hdr__tel span{white-space:nowrap}
@media(min-width:1241px){
  /* le menu est positionné sur l'axe de la page, indépendamment
     de la largeur du logo et du bloc de droite : centrage exact */
  .hdr .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;
    max-width:1240px;gap:20px}
  .nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;gap:28px}
  .hdr__cta{margin-left:auto;gap:18px}
}

/* ── Portraits illustrés de l'équipe ── */
.mate__im img{object-position:center 22%}

/* ── Icônes de service : contours, jamais de coche générique ── */
.svc__ic svg,.trust__i svg,.keyfacts svg,.sf__in svg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.trust__i svg{stroke-width:1.7}
.svc__ic svg{stroke-width:2}
.keyfacts svg{stroke-width:1.8}

/* ── Bandeau du haut : le numéro y est mis en avant ── */
.top__tel{display:inline-flex;align-items:center;gap:7px;color:#fff}
.top__tel svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.9;flex:0 0 15px}
.top__tel b{font-family:"Nunito",sans-serif;font-weight:700;letter-spacing:.01em}
.top__tel:hover b{text-decoration:underline}
.hdr__tel{display:none}

/* ── En-tête : logo à gauche, menu centré, bouton à droite ── */
@media(min-width:1280px){
  .hdr .wrap{position:relative;display:flex;align-items:center;justify-content:space-between;
    max-width:1240px;gap:20px}
  .nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;gap:30px}
  .hdr__cta{margin-left:auto}
}


/* ── Cartes de service : filet de couleur au lieu d'un pictogramme ── */
.svc{border-top:3px solid var(--brand)}
.svc h3{margin-bottom:2px}

/* ── Tableaux : empilés en fiches sur mobile, jamais coupés ── */
@media(max-width:760px){
  table.cmp--spec{min-width:0!important}
  .cmp--stack{min-width:0!important;border-collapse:separate;border-spacing:0}
  .cmp--stack thead{display:none}
  .cmp--stack,.cmp--stack tbody,.cmp--stack tr,.cmp--stack td{display:block;width:100%}
  .cmp--stack tr{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden}
  .cmp--stack tr.hl{background:#fff}
  .cmp--stack td{border:0;padding:10px 16px;text-align:left;display:flex;
    justify-content:space-between;align-items:baseline;gap:16px}
  .cmp--stack td:first-child{background:var(--bg);font-weight:700;color:var(--navy);
    border-bottom:1px solid var(--line);display:block}
  .cmp--stack td[data-l]::before{content:attr(data-l);color:var(--grey);font-weight:600;
    font-size:13.5px;text-align:left}
  .cmp--stack td+td{border-bottom:1px dashed var(--line)}
  .cmp--stack tr td:last-child{border-bottom:0}
  .tblhint{display:none!important}
  .tblw{border:0;background:transparent;overflow:visible}
  .tblw::after{display:none}
}

/* ── Bandeau du haut et pied de page : vert éclairci ── */
.top{background:#1F5F53;color:#CDE3DE;border-bottom:0}
.top b,.top__tel{color:#fff}
.top__tel svg{stroke:#fff}
.ft{background:#1F5F53;color:#C4DCD6}
.ft__nl{background:rgba(255,255,255,.10)}

/* ── Bandeaux du haut sur mobile : une seule ligne, jamais deux ── */
.urg-bar__short{display:none}
@media(max-width:820px){
  .urg-bar__full{display:none}
  .urg-bar__short{display:inline}
  .urg-bar .wrap{justify-content:center;padding-block:8px}
  .top .wrap{justify-content:center;padding-block:7px}
  .top__adr,.top__hrs,.top__stars{display:none}
  .top__tel{font-size:13.5px}
}
@media(max-width:1000px) and (min-width:821px){.top__adr{display:none}}


/* ── Bandeau urgences ── */
.urg-bar{background:var(--alert);color:#fff;font-size:13.5px}
.urg-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:9px;flex-wrap:wrap}
.urg-bar a{text-decoration:underline;font-weight:600}
.urg-bar__link{white-space:nowrap}
@media(max-width:700px){.urg-bar__link{display:none}.urg-bar .wrap{justify-content:center;text-align:center}}

/* ── Page urgences ── */
.urg-hero{background:linear-gradient(135deg,#B93732,#D64541);color:#fff;padding:clamp(40px,6vw,72px) 0}
.urg-hero h1{color:#fff;max-width:20ch}
.urg-hero p{color:#FBE4E2;max-width:62ch;margin-top:14px;font-size:clamp(15.5px,1.3vw,17.5px)}
.urg-tag{display:inline-block;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);
  padding:6px 14px;border-radius:100px;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:16px}
.urg-nums{display:grid;gap:14px;grid-template-columns:1fr;margin-top:28px}
@media(min-width:760px){.urg-nums{grid-template-columns:1fr 1fr;max-width:760px}}
.urg-num{background:#fff;color:var(--navy);border-radius:var(--r);padding:18px 22px;display:block;
  transition:transform .2s,box-shadow .2s}
.urg-num:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.urg-num span{display:block;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.urg-num b{display:block;font-size:clamp(23px,2.6vw,30px);margin:4px 0 2px;letter-spacing:-.02em}
.urg-num small{color:var(--grey);font-size:13px}
.urg-num--night b{color:var(--alert)}

.urg-box{background:#FDECEB;border:1px solid #F5C6C3;border-radius:12px;padding:16px}
.urg-box b{display:block;color:var(--alert);font-family:"Nunito",sans-serif;font-weight:700;margin-bottom:4px}
.urg-box p{font-size:13.5px;color:var(--grey);margin-bottom:12px}

/* liste « à ne pas faire » */
.equip--no li{color:#8A4340}
.no-ic{width:18px;height:18px;flex:0 0 18px;border-radius:50%;background:#FDECEB;color:var(--alert);
  display:grid;place-items:center;font-size:11px;font-weight:700;margin-top:3px}

/* toxiques */
.tox{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.tox{grid-template-columns:repeat(4,1fr)}}
.tox__i{background:#fff;border:1px solid var(--line);border-left:3px solid var(--alert);
  border-radius:10px;padding:14px 16px}
.tox__i b{display:block;font-size:15px}
.tox__i span{font-size:12.5px;color:var(--grey)}

/* ── Cartes de service ── */
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh-h);border-color:transparent}
.svc__ic{width:44px;height:44px;border-radius:12px;background:var(--brand-l);display:grid;place-items:center;margin-bottom:16px}
.svc__ic svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:2.6}
.svc p{color:var(--grey);font-size:14.8px;margin:10px 0 18px}
.svc__link{margin-top:auto;color:var(--brand);font-weight:600;font-size:14.5px}
.svc__link:hover{text-decoration:underline}

/* ── Créneaux horaires ── */
.slots-box{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:22px;margin-top:22px}
.slots{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.slot{border:1.5px solid var(--line);border-radius:10px;padding:12px 8px;font-weight:600;font-size:15px;
  text-align:center;transition:.18s;background:#fff}
.slot:hover{border-color:var(--brand);color:var(--brand)}
.slot.on{background:var(--brand);border-color:var(--brand);color:#fff}
.slot[disabled]{background:var(--bg);color:#AFC0BC;border-color:var(--line);cursor:not-allowed;text-decoration:line-through}

/* la fiche « clinique » n'a pas de prix : ajustement de l'encart */
.bk h3{font-size:19px}


/* ══════════════════════════════════════════════════════════════
   BLOC FINAL — MENU MOBILE
   Placé en dernier et préfixé de « body » pour primer sur toutes
   les déclarations précédentes. Le menu est piloté par une case à
   cocher masquée : il fonctionne sans JavaScript.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  body .nav {
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    z-index: 80;
    background: #fff;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2px;
    padding: 26px clamp(22px, 7vw, 44px) 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
    visibility: hidden;
    pointer-events: none;
  }
  body .nav a { width: 100%; text-align: left; padding: 15px 0; font-size: 20px;
                border-bottom: 1px solid var(--line); }
  body .nav a::after { display: none; }
  body .nav .nav__cta { width: auto; margin-top: 24px; padding: 13px 24px;
                        font-size: 15px; border-bottom: 0; border-radius: 10px; }
  body .nav .nav__tel { margin-top: 14px; border-bottom: 0; padding: 0; font-size: 16px; }

  /* ouverture, pilotée par la case à cocher */
  body .nav-toggle:checked ~ .nav { transform: none; visibility: visible; pointer-events: auto; }

  /* les trois traits deviennent une croix */
  body .nav-toggle:checked ~ .burger i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body .nav-toggle:checked ~ .burger i:nth-child(2) { opacity: 0; }
  body .nav-toggle:checked ~ .burger i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  body .burger { display: block; z-index: 90; cursor: pointer; }
  body .hdr .wrap { min-height: 44px; }
  body .hdr__cta .btn { display: none; }
}

/* décalage dû à la barre d'administration WordPress */
.admin-bar .hdr { top: 32px; }
@media (max-width: 1279px) { body.admin-bar .nav { top: 104px; } }
@media screen and (max-width: 782px) { .admin-bar .hdr { top: 46px; } }
@media screen and (max-width: 600px) {
  .admin-bar .hdr { top: 0; }
  body.admin-bar .nav { top: 72px; }
}