/* Layout : appli une colonne (480 px max, centrée sur ordinateur) — barre de marque collante en haut,
   barre d'onglets fixe en bas, quatre vues qui se remplacent, barre « total + envoyer » sur la vue Réserver. */
:root{
  --sand:#F3F8F7;        /* fond de l'appli, sable légèrement lagon */
  --surface:#FFFFFF;     /* cartes */
  --surface-2:#E4F0EE;   /* champs, puces */
  --frame:#D5E7E3;       /* autour de la colonne, sur grand écran */
  --ink:#0B2A33;         /* bleu de la passe */
  --ink-soft:#4A666E;
  --lagoon:#0E7C7B;      /* actions */
  --lagoon-ink:#FFFFFF;
  --lagoon-soft:#D3EEEA;
  --teak:#A44A1F;        /* bois du pont : chiffres et repères */
  --line:#CFE0DD;
  --board:#0A2530;       /* barre de marque */
  --board-fg:#E9F6F4;
  --board-dim:#8FB3B4;
  --wa:#15803D; --wa-ink:#FFFFFF; /* contraste 5:1 avec le texte blanc */
  --shadow:0 1px 2px rgba(11,42,51,.06),0 6px 20px rgba(11,42,51,.07);
  --display:"Gloock","Georgia","Times New Roman",serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Consolas",monospace;
  --tab-h:64px;
  --cta-h:76px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sand:#06191F; --surface:#0C252D; --surface-2:#12333C; --frame:#020B0F;
    --ink:#E3F2F0; --ink-soft:#9DBCBF; --lagoon:#3FCFC4; --lagoon-ink:#03201E; --lagoon-soft:#123A3C;
    --teak:#EE9466; --line:#1C3B44; --board:#030F14; --board-fg:#E9F6F4; --board-dim:#86A9AA;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --sand:#06191F; --surface:#0C252D; --surface-2:#12333C; --frame:#020B0F;
  --ink:#E3F2F0; --ink-soft:#9DBCBF; --lagoon:#3FCFC4; --lagoon-ink:#03201E; --lagoon-soft:#123A3C;
  --teak:#EE9466; --line:#1C3B44; --board:#030F14; --board-fg:#E9F6F4; --board-dim:#86A9AA;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25); color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--frame);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--lagoon);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:22px;height:22px;flex:none}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.app{max-width:480px;margin-inline:auto;min-height:100vh;min-height:100dvh;background:var(--sand);position:relative}
@media (min-width:520px){.app{box-shadow:0 0 0 1px var(--line),0 20px 60px rgba(11,42,51,.12)}}

/* Barre de marque */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--board);color:var(--board-fg)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:46px;height:auto}
.brand span{font-family:var(--display);font-size:1.3rem;letter-spacing:.02em}
.lang{display:inline-flex;border:1.5px solid rgba(233,246,244,.45);border-radius:999px;overflow:hidden}
.lang button{all:unset;cursor:pointer;font:500 .78rem/1 var(--mono);letter-spacing:.08em;padding:9px 12px;color:var(--board-fg)}
.lang button[aria-pressed="true"]{background:var(--board-fg);color:var(--board)}
.lang button:focus-visible{outline:3px solid var(--board-fg);outline-offset:-3px}

/* Vues */
.view{padding:18px 16px calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 28px);display:grid;gap:26px;animation:enter .25s ease}
.view.with-cta{padding-bottom:calc(var(--tab-h) + var(--cta-h) + env(safe-area-inset-bottom,0px) + 28px)}
@keyframes enter{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.view-title{font-size:2rem}
.view-title:focus{outline:none}
.lede{color:var(--ink-soft)}
.block{display:grid;gap:12px}
.block-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.block-h h2{font-size:1.5rem}
.label{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teak)}
.muted{color:var(--ink-soft);font-size:.9rem}
.card{background:var(--surface);border-radius:20px;box-shadow:var(--shadow)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Accueil */
.hero{position:relative;border-radius:24px;overflow:hidden;min-height:360px;display:grid;align-content:end;color:#fff;isolation:isolate;background:var(--board)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(4,30,44,.15) 0%,rgba(4,30,44,.35) 40%,rgba(4,30,44,.88) 100%)}
.hero-in{padding:22px 20px 20px;display:grid;gap:12px}
.hero .label{color:#fff;opacity:.9}
.hero h1{font-size:2.35rem}
.hero p{opacity:.94;font-size:.98rem}
.facts{display:flex;flex-wrap:wrap;gap:6px}
.facts span{font-size:.78rem;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 20px;border-radius:999px;border:0;font:600 1rem/1.1 var(--body);text-decoration:none;cursor:pointer;transition:transform .12s ease,filter .2s ease,background .2s ease}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--lagoon);color:var(--lagoon-ink)}
.btn-light{background:#fff;color:#0B2A33}
.btn-wa{background:var(--wa);color:var(--wa-ink)}
.btn-wide{width:100%}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.quick a{display:grid;justify-items:center;gap:7px;padding:13px 4px;text-decoration:none;font-weight:600;font-size:.78rem;min-width:0}
/* Note TripAdvisor : bulles pleines */
.bubbles{display:inline-flex;gap:3px;color:var(--lagoon);flex:none}
.bubbles i{width:11px;height:11px;border-radius:50%;background:currentColor}
.bubbles.lg i{width:16px;height:16px}
.rating{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;justify-self:start;padding:7px 10px 7px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:600;font-size:.84rem}
.rating .bubbles{color:#fff}
.rating .bubbles i{width:9px;height:9px}
.rating .ico{width:16px;height:16px}
.rating:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* Payer en ligne (TripAdvisor) */
.pay{padding:16px;display:grid;gap:14px}
.pay-top{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.pay-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--lagoon-soft);color:var(--lagoon)}
.pay p{font-size:.9rem;color:var(--ink-soft);margin-top:2px}
.pay .btn .ico{width:18px;height:18px}
/* « Meilleur prix en direct » sous le bouton TripAdvisor (Viator), dont le prix inclut le service de paiement en ligne */
.direct{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:12px 14px;border-radius:14px;background:rgba(164,74,31,.08);border:1px solid rgba(164,74,31,.25);font-size:.86rem;line-height:1.45;color:var(--ink-soft)}
@supports (background:color-mix(in srgb,red 10%,transparent)){.direct{background:color-mix(in srgb,var(--teak) 9%,transparent);border-color:color-mix(in srgb,var(--teak) 28%,transparent)}}
.direct .ico{width:20px;height:20px;color:var(--teak);margin-top:1px}
.direct b{display:block;color:var(--ink);font-weight:600}
/* Avis */
.score{display:flex;align-items:center;gap:16px;padding:18px}
.score strong{font-family:var(--display);font-weight:400;font-size:3.6rem;line-height:1}
.score p{font-weight:600;margin-top:6px;line-height:1.35}
.score p.muted{font-weight:400;margin-top:2px}
.reviews{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.review{padding:16px;display:grid;gap:8px}
.review-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.review .when{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft)}
.review .quote{font-family:var(--display);font-size:1.3rem;line-height:1.2}
.review .who{font-weight:600;font-size:.88rem;color:var(--ink-soft)}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 0;padding:0}
.tags li{font-size:.78rem;padding:4px 10px;border-radius:999px;background:var(--surface-2)}
.small{font-size:.8rem}
.btn .ico{flex:none}
.btn-wide .ico{width:18px;height:18px}
/* Réseaux */
.social{display:grid;gap:8px}
.social a{display:flex;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;font-weight:600}
.social .ico{color:var(--lagoon)}
.quick .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--lagoon-soft);color:var(--lagoon)}
.quick .ic.wa{background:var(--wa);color:#fff}
.tours{display:grid;gap:10px}
.tour{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:84px minmax(0,1fr) 18px;align-items:center;gap:14px;padding:10px 12px 10px 10px;transition:transform .12s ease}
.tour img{width:84px;height:84px;border-radius:14px;object-fit:cover;background:var(--surface-2)}
.tour .t{display:grid;gap:3px;min-width:0}
.tour .top{display:grid;gap:0}
.tour .n{font-family:var(--display);font-size:1.25rem;line-height:1.15}
.tour .time{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);white-space:nowrap}
.tour .d{font-size:.84rem;line-height:1.35;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tour .p{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.tour .p strong{font-family:var(--mono);font-weight:500;font-size:1rem;white-space:nowrap;color:var(--teak)}
.tour .p small{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);white-space:nowrap}
.tour .chev{width:18px;height:18px;color:var(--ink-soft)}
.tour:focus-visible{outline:3px solid var(--lagoon);outline-offset:2px}
.tour:active{transform:scale(.99)}
.note{font-size:.88rem;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start}
.note .ico{width:18px;height:18px;color:var(--lagoon);margin-top:2px}

/* Réserver */
.step{display:grid;gap:12px;scroll-margin-top:80px}
fieldset.step{border:0;margin:0;padding:0;min-width:0}
legend.step-h{padding:0;margin-bottom:12px}
.step-h{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.02rem}
.step-h i{font-style:normal;font-family:var(--mono);font-size:.78rem;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--board);color:var(--board-fg)}
.step-h .opt-tag{margin-left:auto;font-weight:400;font-size:.8rem;color:var(--ink-soft)}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choice{position:relative;display:grid;gap:4px;padding:14px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice b{font-size:1.02rem}
.choice span{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft)}
.choice strong{font-family:var(--mono);font-weight:500;font-size:.92rem;margin-top:4px}
.choice .ico{position:absolute;top:12px;right:12px;width:20px;height:20px;color:var(--lagoon);opacity:0;transition:opacity .15s ease}
.choice.is-on{border-color:var(--lagoon);background:var(--lagoon-soft)}
.choice.is-on .ico{opacity:1}
.choice:has(input:focus-visible){outline:3px solid var(--lagoon);outline-offset:2px}
.channels{grid-template-columns:repeat(3,minmax(0,1fr))}
.channels .choice{justify-items:center;text-align:center;padding:14px 6px 12px;gap:6px}
.channels .choice b{font-size:.88rem}
.choice .chi{position:static;opacity:1;width:26px;height:26px;color:var(--lagoon)}
.ch-wa .chi{color:var(--wa)}
.days{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;margin-inline:-16px;padding:2px 16px 6px;scrollbar-width:none;overscroll-behavior-x:contain}
.days::-webkit-scrollbar{display:none}
.day{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:62px;padding:9px 0 10px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);display:grid;justify-items:center;gap:1px;scroll-snap-align:start}
.day small{font-size:.72rem;color:var(--ink-soft);text-transform:capitalize}
.day b{font-family:var(--mono);font-weight:500;font-size:1.3rem;line-height:1.2}
.day[aria-pressed="true"]{background:var(--lagoon);border-color:var(--lagoon);color:var(--lagoon-ink)}
.day[aria-pressed="true"] small{color:inherit;opacity:.85}
.day:focus-visible{outline:3px solid var(--lagoon);outline-offset:2px}
.other{display:flex;align-items:center;gap:12px}
.other label{font-size:.9rem;color:var(--ink-soft);flex:none}
.field{font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;min-height:50px;width:100%;min-width:0}
.field:focus{outline:none;border-color:var(--lagoon);box-shadow:0 0 0 3px var(--lagoon-soft)}
.flash{animation:flash 1s ease}
@keyframes flash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 4px var(--teak)}}
.flash .days,.flash.step{border-radius:16px}
.steppers{display:grid}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.stepper + .stepper{border-top:1px solid var(--line)}
.stepper .what{display:grid;min-width:0}
.stepper .what span{font-family:var(--mono);font-size:.76rem;color:var(--ink-soft)}
.ctrl{display:flex;align-items:center;gap:6px}
.ctrl button{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink);transition:background .15s ease}
.ctrl button:active{background:var(--lagoon-soft)}
.ctrl button:disabled{opacity:.35;cursor:default}
.ctrl button:focus-visible{outline:3px solid var(--lagoon);outline-offset:2px}
.ctrl output{font-family:var(--mono);font-size:1.25rem;min-width:2ch;text-align:center}
.preview{padding:4px 14px}
.preview summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding-block:10px;font-weight:600;font-size:.95rem}
.preview summary::-webkit-details-marker{display:none}
.preview summary::after{content:"+";font-family:var(--mono);color:var(--teak);font-size:1.2rem}
.preview[open] summary::after{content:"–"}
.preview .msg{font-size:.9rem;line-height:1.5;background:var(--surface-2);border-radius:12px;padding:12px;white-space:pre-wrap;word-break:break-word}
.linkbtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:12px 0;font-weight:600;font-size:.9rem;color:var(--lagoon)}
.linkbtn .ico{width:18px;height:18px}
.linkbtn:focus-visible{outline:3px solid var(--lagoon);outline-offset:2px}

/* Barre total + envoyer (vue Réserver) */
.cta{position:fixed;z-index:25;left:50%;transform:translateX(-50%);width:min(100%,480px);bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));min-height:var(--cta-h);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--board);color:var(--board-fg);box-shadow:0 -8px 24px rgba(4,30,44,.18)}
.cta .tot{display:grid;line-height:1.2;min-width:0}
.cta .tot small{font-size:.74rem;color:var(--board-dim)}
.cta .tot strong{font-family:var(--mono);font-weight:500;font-size:1.25rem;white-space:nowrap}
.cta .tot span{font-family:var(--mono);font-size:.74rem;color:var(--board-dim)}
.cta .btn{flex:none;padding-inline:18px}
.cta .btn.btn-dm{background:var(--lagoon);color:var(--lagoon-ink)}
.cta .btn.wait{background:var(--board-fg);color:var(--board)}

/* Le bateau */
/* Photos en mosaïque bord à bord : elles apparaissent presque ensemble à l'ouverture de l'onglet */
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-inline:-16px;margin-top:-18px}
.mosaic img{width:100%;height:auto;max-width:100%;aspect-ratio:1;object-fit:cover;background:var(--surface-2);animation:pop .6s cubic-bezier(.2,.7,.2,1) both}
.mosaic img:first-child,.mosaic img:last-child{grid-column:1 / -1;aspect-ratio:16 / 10}
.mosaic img:nth-child(2){animation-delay:.04s}.mosaic img:nth-child(3){animation-delay:.08s}.mosaic img:nth-child(4){animation-delay:.12s}
.mosaic img:nth-child(5){animation-delay:.16s}.mosaic img:nth-child(6){animation-delay:.2s}.mosaic img:nth-child(7){animation-delay:.24s}.mosaic img:nth-child(8){animation-delay:.28s}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
/* Point de rendez-vous : petite « carte marine » */
.meet{display:grid;grid-template-columns:92px minmax(0,1fr);overflow:hidden;border:2px solid var(--lagoon)}
.meet-map{display:grid;place-items:center;color:var(--lagoon);background:repeating-radial-gradient(circle at 50% 50%,transparent 0 10px,color-mix(in srgb,var(--lagoon) 26%,transparent) 10px 11px),var(--surface-2)}
.meet-map .pin{width:34px;height:34px}
.meet-body{padding:14px 14px 10px;display:grid;gap:5px;min-width:0}
.meet-body .label{color:var(--lagoon)}
.meet-name{font-family:var(--display);font-weight:400;font-size:1.35rem;line-height:1.15}
.meet-body p{font-size:.88rem;color:var(--ink-soft)}
.meet-body .gps{font-family:var(--mono);font-size:.74rem;color:var(--ink)}
.meet-btns{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;margin-top:4px}
.meet-btns .btn{min-height:44px;padding:10px 16px;font-size:.92rem}
.meet-btns .ico{width:18px;height:18px}
.specs{display:grid;grid-template-columns:auto 1fr;margin:0;padding:4px 16px}
.specs dt,.specs dd{margin:0;padding-block:11px;border-bottom:1px solid var(--line)}
.specs dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding-right:16px;padding-top:14px}
.specs dt:nth-last-of-type(1),.specs dd:last-of-type{border-bottom:0}
.spots{list-style:none;margin:0;padding:4px 16px;display:grid}
.spots li{display:grid;gap:2px;padding-block:12px;border-bottom:1px solid var(--line)}
.spots li:last-child{border-bottom:0}
.spots b{font-weight:600}
.spots p{font-size:.92rem;color:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.9rem}

/* Infos */
.faq{padding:2px 16px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;padding-block:15px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.2rem;color:var(--teak);line-height:1.3}
.faq details[open] summary::after{content:"–"}
.faq p{padding-bottom:16px;color:var(--ink-soft);font-size:.95rem}
.contact{padding:16px;display:grid;gap:12px}
.contact .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:4px}
.contact .row div{display:grid;min-width:0}
.contact .row small{font-size:.78rem;color:var(--ink-soft)}
.contact .row b{font-family:var(--mono);font-weight:500;word-break:break-word}
.contact .row a.ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--lagoon-soft);color:var(--lagoon)}
.install{padding:16px;display:grid;gap:10px;background:var(--board);color:var(--board-fg)}
.install p{color:var(--board-dim);font-size:.92rem}
.install .quick-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.install .linkbtn{color:var(--board-fg)}
.links{list-style:none;margin:0;padding:4px 16px;display:grid}
.links li + li{border-top:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;align-items:center;padding-block:14px;text-decoration:none;font-weight:600}
.links .ico{width:18px;height:18px;color:var(--ink-soft)}
.legal{font-size:.8rem;color:var(--ink-soft);text-align:center}

/* Barre d'onglets */
.tabs{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,480px);display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs button{all:unset;box-sizing:border-box;cursor:pointer;height:var(--tab-h);display:grid;justify-items:center;align-content:center;gap:3px;font-size:.72rem;font-weight:600;color:var(--ink-soft);position:relative}
.tabs button[aria-current="page"]{color:var(--lagoon)}
.tabs button[aria-current="page"]::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--lagoon)}
.tabs button:focus-visible{outline:3px solid var(--lagoon);outline-offset:-4px;border-radius:12px}

/* Message bref */
.toast{position:fixed;z-index:40;left:50%;transform:translate(-50%,10px);bottom:calc(var(--tab-h) + var(--cta-h) + env(safe-area-inset-bottom,0px) + 12px);width:max-content;max-width:calc(min(100vw,480px) - 32px);text-align:center;padding:11px 16px;border-radius:14px;background:var(--ink);color:var(--sand);font-size:.92rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
.noscript{padding:24px 16px;display:grid;gap:12px}