/* Mise en page : une colonne façon Concret. Barre du haut collante (marque + menu texte souligné),
   sommaire de sections en pastilles floutées, cartes blanches à filet fin. Une seule couleur d'accent : le bleu de mer. */
:root{
  --bg:#f6f6f3; --panel:#ffffff; --ink:#1c1d22; --muted:#55575f; --line:#e2e2dc; --soft:#ecece6; --grid:#ecece6;
  --sea:#1f5f8b;            /* accent : bleu de mer, comme le bleu de Concret mais plus marin */
  --band:rgba(31,95,139,.08);
  --here:#1a7a43; --bad:#a83232;
  --c-event:#b4543c; --c-act:#2f5bd3; --c-food:#86569b; --c-cine:#3a3c44; --c-sea:#1d7f86; --c-market:#5d7f2b; --buoy:#b0812a; --taupe:#8a7466;
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#15161a;--panel:#1d1f24;--ink:#ececea;--muted:#a4a6ad;--line:#2e3037;--soft:#25272d;--grid:#2a2c32;
  --sea:#7fb2dd;--band:rgba(127,178,221,.10);--here:#4cc27f;--bad:#ff7070;
  --c-event:#ec8a6e;--c-act:#7a9cff;--c-food:#c49be0;--c-cine:#c9cad0;--c-sea:#56c4c9;--c-market:#a6c86a;--buoy:#d9b25a;--taupe:#c4ae9f;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15161a;--panel:#1d1f24;--ink:#ececea;--muted:#a4a6ad;--line:#2e3037;--soft:#25272d;--grid:#2a2c32;
  --sea:#7fb2dd;--band:rgba(127,178,221,.10);--here:#4cc27f;--bad:#ff7070;
  --c-event:#ec8a6e;--c-act:#7a9cff;--c-food:#c49be0;--c-cine:#c9cad0;--c-sea:#56c4c9;--c-market:#a6c86a;--buoy:#d9b25a;--taupe:#c4ae9f;color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:20;background:var(--bg)}
.wrap{max-width:860px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.12}
h2.sec{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.count{font-size:11.5px;font-weight:600;background:var(--soft);color:var(--muted);border-radius:999px;padding:1px 8px;letter-spacing:0;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .mono{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:6px}

/* ---------- barre du haut (comme Concret) ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:12;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;justify-content:space-between;height:50px;gap:12px}
.brand a.home{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);min-width:0}
.brand .word{font-family:var(--serif);font-size:22px;font-weight:500;white-space:nowrap;letter-spacing:-.005em}
.brand svg.wave{width:28px;height:18px;fill:var(--sea);flex:none}
.iconbtn{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;text-decoration:none;color:var(--ink);flex:none}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
nav.tabs{display:flex;justify-content:space-between;gap:2px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:0 max(10px,env(safe-area-inset-left,0px)) 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 24px),transparent)}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{flex:none;display:flex;align-items:center;min-height:46px;padding:0 6px;text-decoration:none;color:var(--muted);font-size:15px;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s}
nav.tabs a[aria-current="page"]{color:var(--ink);font-weight:700;border-bottom-color:var(--sea)}
nav.tabs a svg{display:none}

main{padding-block:16px 56px}
.view{display:grid;gap:18px}
.vhead{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap}
.lede{color:var(--muted);margin:6px 0 0;max-width:60ch;font-size:15px}
.block{display:grid;gap:10px}

/* ---------- sommaire de sections (comme le « jump » de Concret) ---------- */
.subnav{position:sticky;z-index:9;background:var(--bg);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:8px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav button{flex:none;white-space:nowrap;border:1px solid var(--line);background:var(--panel);border-radius:999px;min-height:40px;padding:0 13px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.subnav button.on{background:var(--sea);color:var(--panel);border-color:var(--sea)}
.subnav button .n{font-size:11.5px;font-weight:500;opacity:.6;margin-left:5px;font-variant-numeric:tabular-nums}
[data-sub]{scroll-margin-top:110px}

/* ---------- contrôles ---------- */
.seg{display:flex;background:var(--soft);border-radius:10px;padding:3px;gap:2px;min-width:0}
.seg button{flex:1 1 0;border:0;background:transparent;border-radius:8px;min-height:38px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;padding:0 6px;min-width:0;transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(20,22,30,.12),0 0 0 1px var(--line)}
.seg.wrap button{white-space:normal;min-height:44px;padding:7px 4px;line-height:1.2}
.seglab{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:-4px}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:999px;min-height:40px;padding:0 30px 0 13px;font-size:14px;font-weight:600;max-width:100%}
.pill.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pill select{-webkit-appearance:none;appearance:none;position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.pill::after{content:"";position:absolute;right:13px;top:50%;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.7}
.tog{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:999px;min-height:40px;padding:0 14px;font-size:14px;font-weight:600;cursor:pointer}
.tog[aria-pressed="true"]{background:var(--sea);color:var(--panel);border-color:var(--sea)}
.tog svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scroller{display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));padding-block:1px}
.scroller::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;white-space:nowrap;border:1px solid var(--line);background:var(--panel);border-radius:999px;min-height:40px;padding:0 14px;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--sea);color:var(--panel);border-color:var(--sea)}
.chip .n{font-size:11.5px;font-weight:500;opacity:.65;font-variant-numeric:tabular-nums}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
.resline{font-size:13px;color:var(--muted)}

/* ---------- cartes ---------- */
.list{display:grid;gap:8px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:8px}
.card{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:3px 12px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px 13px 12px;text-decoration:none;color:var(--ink);min-width:0;transition:border-color .15s}
a.card:active,.card:has(a.cover:active){transform:scale(.995)}
@media (hover:hover){.card:has(a.cover):hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}}
.card .ic{grid-row:1 / span 3;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c)}
.card .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card .tt{font-size:16.5px;font-weight:650;letter-spacing:-.01em;line-height:1.28;min-width:0}
.card .rt{grid-column:3;grid-row:1;display:flex;align-items:center;gap:5px}
.card .mt{grid-column:2 / span 2;font-size:14.5px;color:var(--muted);min-width:0}
.card .mt b{color:var(--ink);font-weight:600}
.card .ds{grid-column:2 / span 2;font-size:14.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .xt{grid-column:2 / span 2;display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;align-items:center}
.card a.cover{color:inherit;text-decoration:none}
.card a.cover::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card .xt,.card .rt{position:relative;z-index:1}
.datepill{grid-row:1 / span 3;width:36px;border-radius:10px;background:color-mix(in srgb,var(--c) 11%,transparent);color:var(--c);display:grid;justify-items:center;padding:5px 0;line-height:1}
.datepill i{font-style:normal;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.datepill b{font-family:var(--serif);font-size:19px;font-weight:500;margin-top:2px;font-variant-numeric:tabular-nums}
.share{display:inline-flex;gap:6px;align-items:center}
.sh{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer}
.sh svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sh.wa{color:var(--here);border-color:color-mix(in srgb,var(--here) 35%,var(--line))}
.shbtn{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;cursor:pointer;color:var(--muted);flex:0 0 auto}
.shbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-weight:600;font-size:14px;z-index:30;box-shadow:0 6px 20px rgba(0,0,0,.18);animation:pop .2s ease-out}
@keyframes pop{from{opacity:0;transform:translate(-50%,6px)}}
.chev{color:var(--muted);font-size:18px;line-height:1}
.dist{font-size:13px;font-weight:600;border-radius:999px;padding:2px 8px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.dist.here{background:var(--sea);border-color:var(--sea);color:var(--panel)}
.badge{font-size:12px;font-weight:600;border-radius:6px;padding:2px 8px;background:var(--soft);color:var(--ink)}
.badge.kid{background:color-mix(in srgb,var(--c-act) 13%,transparent);color:var(--c-act)}
.badge.hot{background:color-mix(in srgb,var(--c-event) 14%,transparent);color:var(--c-event)}
.badge.free,.badge.open{background:color-mix(in srgb,var(--here) 13%,transparent);color:var(--here)}
.badge.warn{background:color-mix(in srgb,var(--buoy) 15%,transparent);color:var(--buoy)}
.links{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:14px;font-weight:600}
.links a{color:var(--sea);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.empty{border:1px dashed var(--line);border-radius:var(--r);padding:16px;color:var(--muted);text-align:center}
.note{font-size:13px;color:var(--muted);margin:0}
details>summary{cursor:pointer;list-style:none}
details>summary::-webkit-details-marker{display:none}

/* ---------- photos ---------- */
.hero{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:5/2;min-height:170px;max-width:100%;background:#cdb894}
.hero img,.banner img{display:block;width:100%;height:100%;object-fit:cover}
.hero .cap{position:absolute;z-index:1;right:10px;top:8px;font-size:11px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.88);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hero::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(180deg,transparent,rgba(8,16,24,.55))}
.hero .ttl{position:absolute;z-index:1;left:14px;bottom:12px;right:14px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero .ttl b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(24px,6.5vw,34px);line-height:1.05}
.hero .ttl span{font-size:13px;font-weight:600;opacity:.95}
.banner{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:5/2;max-width:100%;background:#cdb894}

/* ---------- séjour ---------- */
.planner{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:12px;min-width:0}
.when{display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;background:var(--band);border-radius:12px;padding:13px 14px;cursor:pointer;text-align:left;width:100%}
.when .d{font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-.01em}
.when .s{font-size:13px;color:var(--sea);font-weight:600}
.when svg{width:20px;height:20px;stroke:var(--sea);fill:none;stroke-width:1.8;flex:0 0 auto}
.editor{display:grid;gap:10px;padding:2px}
.planner .scroller{margin-inline:-14px;padding-inline:14px}
.dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dates label{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted);min-width:0}
input[type=date],input[type=time],input[type=text],input[type=search],select.f,textarea{-webkit-appearance:none;appearance:none;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 10px;min-height:44px;font-size:16px;color:var(--ink);width:100%;min-width:0;max-width:100%}
.shorts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.short{display:grid;justify-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 4px;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600;text-align:center;cursor:pointer;line-height:1.25}
.short .si{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c)}
.short .si svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 6px 9px;text-align:center;text-decoration:none;color:var(--ink);min-width:0}
.tile b{display:block;font-family:var(--serif);font-size:28px;font-weight:400;line-height:1.05;font-variant-numeric:tabular-nums}
.tile span{font-size:12px;color:var(--muted);font-weight:600}

.install{display:grid;grid-template-columns:44px minmax(0,1fr) 36px;grid-template-areas:"ic t x" "ic d x" "go go go";gap:3px 12px;align-items:start;background:var(--band);border:1px solid color-mix(in srgb,var(--sea) 28%,var(--line));border-radius:14px;padding:13px 8px 13px 14px}
.install .ii{grid-area:ic;width:44px;height:44px;border-radius:11px;background:#1f5f8b;display:grid;place-items:center}
.install .ii svg{width:26px;height:17px;fill:#fff}
.install b{grid-area:t;font-size:15.5px;font-weight:650;line-height:1.3}
.install .d{grid-area:d;font-size:14px;color:var(--muted)}
.install .go{grid-area:go;display:flex;margin-top:9px}
.install .go .btn{flex:1}
.install .x{grid-area:x;border:0;background:none;color:var(--muted);font-size:24px;width:36px;height:36px;cursor:pointer;line-height:1;margin-top:-6px}
@media (min-width:600px){.install{grid-template-columns:44px minmax(0,1fr) auto 36px;grid-template-areas:"ic t go x" "ic d go x"}.install .go{margin:0;align-self:center}}

/* jour par jour */
.dayc{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dayc .dh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dayc .dn{font-family:var(--serif);font-weight:500;font-size:19px}
.dayc .dn::first-letter{text-transform:uppercase}
.dayc .tide{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.dayc .db{padding:9px 14px 11px;display:grid;gap:8px}
.line{display:grid;grid-template-columns:24px 1fr;gap:9px;align-items:start;font-size:14.5px}
.line .k{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--c)}
.line .k svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.line .v b{font-weight:600}
.line .v a{color:var(--sea)}

/* ciné */
.film{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;display:grid;gap:7px}
.film .ft{font-family:var(--serif);font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.times{display:flex;gap:8px;flex-wrap:wrap}
.time{display:grid;justify-items:center;gap:2px}
.time b{font-size:16px;font-weight:600;border:1.5px solid var(--ink);border-radius:8px;padding:5px 10px;min-width:64px;text-align:center;font-variant-numeric:tabular-nums}
.time span{font-size:11.5px;color:var(--muted);font-weight:600}

/* mer */
.daynav{display:flex;align-items:center;gap:6px}
.daynav button{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--panel);font-size:22px;cursor:pointer;flex:0 0 auto;color:var(--ink)}
.daynav label{flex:1;position:relative;min-width:0}
.daynav .lbl{display:flex;align-items:center;justify-content:center;height:46px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-weight:600;font-size:15px}
.daynav input{position:absolute;inset:0;opacity:0;width:100%}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wd{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 0;text-align:center;cursor:pointer;min-width:0;color:var(--ink)}
.wd .d{font-size:10.5px;color:var(--muted);text-transform:uppercase;font-weight:600}
.wd .c{font-family:var(--serif);font-size:19px;font-variant-numeric:tabular-nums}
.wd.gm{background:color-mix(in srgb,var(--buoy) 16%,var(--panel))}
.wd.sel{border:2px solid var(--sea)}
.chart{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 6px 4px;overflow-x:auto}
.chart svg{display:block;width:100%;min-width:320px;height:auto}
.extrema{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.ex{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ex .k{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ex .v{font-family:var(--serif);font-size:26px;font-variant-numeric:tabular-nums}

/* carte */
.mapbox{background:color-mix(in srgb,var(--c-sea) 10%,var(--panel));border:1px solid var(--line);border-radius:14px;overflow:hidden}
.mapbox svg{display:block;width:100%;height:auto}
.land{fill:var(--bg);stroke:var(--taupe);stroke-width:1}
.pin{cursor:pointer} .pin circle{stroke:var(--panel);stroke-width:2}

/* formulaires, boutons */
form.card2{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:10px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
label.f{display:grid;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted)}
.btn{border:0;background:var(--ink);color:var(--bg);border-radius:999px;min-height:44px;padding:0 20px;cursor:pointer;font-weight:600;justify-self:start;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px}
.btn.sea{background:var(--sea);color:var(--panel)}
.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line);min-height:38px;font-size:14px;padding:0 14px}
.status{font-size:13px;color:var(--muted)}
.pratique{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.num{text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:1px}
.num b{font-size:19px;font-weight:600;user-select:all;font-variant-numeric:tabular-nums}
.num span{font-size:12.5px;color:var(--muted);font-weight:600}
.legal{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:4px 16px;font-size:14.5px;line-height:1.55}
.legal p{margin:12px 0}

/* installer */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.steps li::before{content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--sea);color:var(--panel);display:grid;place-items:center;font-family:var(--serif);font-size:20px}
.steps b{font-weight:650}
.steps p{margin:2px 0 0;color:var(--muted);font-size:14px}
.kbd{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--soft);border-radius:8px;padding:1px 8px;font-weight:600;color:var(--ink);white-space:nowrap}
.kbd svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.osseg{max-width:420px}
.callout{margin:0;padding:11px 13px;border-left:3px solid var(--sea);background:var(--band);border-radius:0 10px 10px 0;font-size:14.5px}

/* recherche */
.searchbox{position:relative}
.searchbox input{padding-left:42px;min-height:50px;font-size:17px;border-radius:14px;background:var(--panel)}
.searchbox svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2}

footer{border-top:1px solid var(--line);padding-block:18px 32px;font-size:13px;color:var(--muted);display:grid;gap:7px}
footer a{color:var(--sea);font-weight:600;text-decoration:none}

/* transitions entre onglets */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(main){animation:vt-out .14s ease-in both}
  ::view-transition-new(main){animation:vt-in .2s ease-out both}
  #main{view-transition-name:main}
  .view.enter{animation:vt-in .2s ease-out both}
}
@keyframes vt-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
@media (max-width:380px){.tiles b{font-size:24px}.brand .word{font-size:20px}nav.tabs a{padding:0 7px;font-size:14.5px}}

/* ---------- ajouts après relecture ---------- */
.fsum{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);font-weight:600;text-align:left;cursor:pointer}
.fsum svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.fsum .ft{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.fsum .fs{font-weight:500;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planner .fsum{min-height:0}
details.dayc>summary{cursor:pointer;list-style:none}
details.dayc>summary .chev{transition:transform .2s}
details.dayc[open]>summary .chev{transform:rotate(180deg)}
details.dayc:not([open])>summary{border-bottom:0}
.cinrow{display:grid;gap:5px;padding-top:6px;border-top:1px solid var(--line)}
.cinrow .cn{font-size:13.5px;font-weight:600;color:var(--muted)}
.cinrow .times{gap:6px}
.tm{font-size:16px;font-weight:600;background:var(--soft);border-radius:8px;padding:5px 11px;font-variant-numeric:tabular-nums}
.iconrow{display:flex;gap:12px;align-items:center}
.iconrow img{border-radius:12px;flex:none}
.steps b .kbd{margin-right:4px}
.shbtn,.sh,.install .x{position:relative}
.shbtn::before,.install .x::before{content:"";position:absolute;inset:-6px}
.card,.dayc,.film{content-visibility:auto;contain-intrinsic-size:auto 160px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero img,:root:not([data-theme="light"]) .banner img{filter:brightness(.88)}}
:root[data-theme="dark"] .hero img,:root[data-theme="dark"] .banner img{filter:brightness(.88)}
@media (max-width:360px){nav.tabs{justify-content:flex-start}}

/* ================= refonte navigation (façon Concret) ================= */
:root{--fd-brume:#e6e9f6;--fd-ciel:#e6f1f6;--fd-peche:#fbeee2}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--fd-brume:#262940;--fd-ciel:#1d2a30;--fd-peche:#2e2620}}
:root[data-theme="dark"]{--fd-brume:#262940;--fd-ciel:#1d2a30;--fd-peche:#2e2620}
body{font-size:16.5px}
.brand{height:54px}
.brand .acts{display:flex;align-items:center;gap:8px}
.menubtn{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 15px 0 12px;border-radius:999px;border:1.5px solid var(--ink);background:var(--panel);font-weight:700;font-size:15.5px;color:var(--ink);cursor:pointer}
.menubtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}
nav.tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0 calc(-1 * max(8px,env(safe-area-inset-left,0px)));padding:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
nav.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;padding:4px 2px 6px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;text-align:center;line-height:1.1}
nav.tabs a svg{display:block;width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
nav.tabs a span{white-space:nowrap}
nav.tabs a[aria-current="page"]{color:var(--sea);font-weight:800;border-bottom-color:var(--sea);background:color-mix(in srgb,var(--sea) 7%,transparent)}
nav.tabs a[aria-current="page"] svg{stroke-width:2.2}
@media (max-width:360px){nav.tabs a{font-size:12px}}
h1{font-size:34px}
h2.sec{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink)}
h2.sec .count{font-family:var(--sans)}
.hero2{background:var(--fd-ciel);border-radius:18px;padding:16px 14px;display:grid;gap:10px}
.hero2 .h-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.hero2 h1{font-size:38px;line-height:1}
.hero2 .cap{font-size:12.5px;font-weight:700;color:var(--sea);background:var(--panel);border-radius:999px;padding:3px 10px}
.h-date{margin:-4px 0 0;font-size:16px;font-weight:700;color:var(--sea)}
.tide-now{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tide-now div{background:var(--panel);border-radius:12px;padding:9px 10px;display:grid;gap:2px;min-width:0}
.tide-now .lab{font-size:13px;color:var(--muted);font-weight:600}
.tide-now b{font-family:var(--serif);font-size:22px;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.h-note{margin:0;font-size:15px}
.h-note a,.tline a,.note a,.mini a{color:var(--sea);font-weight:700}
.stayline{display:flex;align-items:center;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;font-size:16px;padding:0 2px}
.lnk{border:0;background:none;color:var(--sea);font-weight:700;font-size:16px;min-height:44px;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.band{border-radius:18px;padding:16px 12px 12px;display:grid;gap:10px;margin-inline:calc(-1 * 4px)}
.band.peche{background:var(--fd-peche)} .band.brume{background:var(--fd-brume)} .band.ciel{background:var(--fd-ciel)}
.band .card{border-color:transparent}
.tline{margin:0;font-size:15.5px}
.more{color:var(--sea);font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;font-size:16px}
.mini{background:var(--panel);border-radius:14px;padding:11px 13px;display:grid;gap:2px}
.mini h3{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.mini h3 svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.mini p{margin:4px 0}
.mini .row{display:grid;gap:1px;padding:9px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);min-height:44px}
.mini .row:first-of-type{border-top:0}
.mini .row b{font-size:16.5px}
.mini .row span{font-size:14.5px;color:var(--muted)}
.ideas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.idea{display:grid;gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;text-decoration:none;color:var(--ink);min-height:96px}
.idea .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c);margin-bottom:4px}
.idea .ic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.idea b{font-size:16px} .idea span{font-size:14px;color:var(--muted)}
.chip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}
.seg.segnav{max-width:360px}
.seg.segnav a{flex:1 1 0;display:grid;place-items:center;min-height:42px;border-radius:8px;font-size:15px;font-weight:700;color:var(--muted);text-decoration:none}
.seg.segnav a[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px rgba(20,22,30,.12),0 0 0 1px var(--line)}
.days .chip{min-width:84px;justify-content:center}
/* menu (panneau à droite, comme Concret) */
.mn-voile{position:fixed;inset:0;z-index:50;background:rgba(10,12,18,.5);display:flex;justify-content:flex-end;animation:mnf .15s ease-out}
.mn-panneau{background:var(--bg);width:min(100%,420px);height:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:max(14px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) 16px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box;animation:mns .2s ease-out}
@keyframes mnf{from{opacity:0}} @keyframes mns{from{transform:translateX(24px)}}
@media (prefers-reduced-motion: reduce){.mn-voile,.mn-panneau{animation:none}}
.mn-haut{display:flex;justify-content:space-between;align-items:center;padding:2px 2px 6px}
.mn-haut b{font-family:var(--serif);font-size:24px;font-weight:500}
.mn-ferme{font:inherit;font-size:15px;font-weight:700;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px;min-height:42px;padding:0 16px;cursor:pointer}
.mn-g{margin:12px 2px 0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mn-it,.mn-inst{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;text-decoration:none;color:var(--ink);min-height:56px}
.mn-it.on{border-color:var(--sea);box-shadow:inset 3px 0 0 var(--sea)}
.mn-it b,.mn-inst b{display:block;font-size:16.5px}
.mn-it span span,.mn-inst span span{display:block;font-size:14px;color:var(--muted)}
.mn-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--sea) 11%,transparent);color:var(--sea)}
.mn-ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mn-inst{background:var(--fd-ciel);border-color:color-mix(in srgb,var(--sea) 30%,var(--line))}
.mn-inst .ii{width:40px;height:40px;border-radius:11px;background:#1f5f8b;display:grid;place-items:center}
.mn-inst .ii svg{width:24px;height:15px;fill:#fff}

.mn-panneau>*{flex-shrink:0}

/* ================= retouches : typo plus fine, photo d'accueil ================= */
body{font-size:16px;letter-spacing:-.003em}
h1{font-weight:400;letter-spacing:-.01em}
h2.sec{font-weight:400;font-size:24px;letter-spacing:-.005em}
.brand .word{font-weight:400;font-size:22px}
.menubtn{border:1px solid var(--line);font-weight:600;font-size:15px;min-height:40px;box-shadow:0 1px 2px rgba(20,22,30,.06)}
.iconbtn{width:40px;height:40px}
nav.tabs a{font-weight:500;font-size:12.5px;min-height:56px;gap:4px}
nav.tabs a svg{width:22px;height:22px;stroke-width:1.5}
nav.tabs a[aria-current="page"]{font-weight:600;background:none;border-bottom-width:2px}
nav.tabs a[aria-current="page"] svg{stroke-width:1.9}
.card .tt{font-weight:600;font-size:16px;letter-spacing:-.012em}
.card .mt{font-size:14px}
.card .mt b{font-weight:500}
.card .ds{font-size:14.5px;color:color-mix(in srgb,var(--ink) 88%,var(--muted))}
.datepill i{font-weight:600}
.badge{font-weight:500;font-size:12.5px}
.chip,.tog,.subnav button{font-weight:500;font-size:14.5px}
.chip[aria-pressed="true"]{font-weight:600}
.seg button{font-weight:500;font-size:14.5px}
.seg button[aria-pressed="true"]{font-weight:600}
.seg.segnav a{font-weight:500}
.seg.segnav a[aria-pressed="true"]{font-weight:600}
.dist{font-weight:500}
.btn{font-weight:600}
.lnk,.more{font-weight:600}
.count{font-weight:500}
.mn-it b,.mn-inst b{font-weight:600;font-size:16px}
.mn-haut b{font-weight:400}
.idea b{font-weight:600;font-size:15.5px}
.mini h3{font-weight:600}
.mini .row b{font-weight:600;font-size:16px}
.fsum{font-weight:500}
.fsum .ft{display:grid;gap:1px}
.fsum .ft{font-weight:600;font-size:15px}
.fsum .fs{font-weight:400}
.stayline,.lnk{font-size:15.5px}
.tide-now .lab{font-weight:500;font-size:12.5px}
.tide-now b{font-size:21px;font-weight:400}
.h-note{font-size:14.5px}
.hero2{padding:8px 8px 14px;gap:12px}
.hero2>:not(.hphoto){margin-inline:6px}
.hphoto{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/8;max-width:100%;background:#cdb894}
.hphoto img{display:block;width:100%;height:100%;object-fit:cover}
.hphoto::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(180deg,transparent,rgba(8,16,24,.6))}
.hphoto .hov{position:absolute;z-index:1;left:14px;right:14px;bottom:12px;color:#fff}
.hphoto h1{color:#fff;font-size:36px;line-height:1;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.hphoto .h-date{color:#fff;margin:4px 0 0;font-weight:500;font-size:15.5px;opacity:.95}
.hphoto .cap{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--panel) 88%,transparent);border-radius:999px;padding:3px 10px;text-shadow:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hphoto img{filter:brightness(.9)}}
.pp-maj{position:fixed;z-index:40;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;border:0;border-radius:14px;padding:12px 14px;background:var(--ink);color:var(--bg);font:inherit;font-size:15px;text-align:left;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:pop .2s ease-out}
.pp-maj b{flex:none;background:var(--sea);color:#fff;border-radius:999px;padding:8px 14px;font-weight:600}