:root{color-scheme:dark;--bg:#081321;--panel:#111f2f;--panel2:#15293a;--line:#263a4e;--muted:#91a5b7;--text:#eef6fc;--cyan:#4cd4dc;--blue:#53aee8;--green:#55d8ae;--amber:#f8c36f;--red:#fa8585;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-size:15px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.hidden{display:none!important}.muted{color:var(--muted);font-size:13px;line-height:1.6}.error{color:var(--red);min-height:20px;font-size:13px}.message{min-height:20px;color:var(--green);font-size:13px}.eyebrow{letter-spacing:.17em;font-size:10px;color:var(--cyan);font-weight:800}
.app-shell{max-width:850px;margin:0 auto}.topbar{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:11px;padding:14px 19px;background:rgba(8,19,33,.95);border-bottom:1px solid rgba(255,255,255,.07);backdrop-filter:blur(15px)}.brand-mark,.logo{border-radius:14px;background:linear-gradient(145deg,#22c4cb,#165d91);display:grid;place-items:center;color:#fff;font-size:33px;font-weight:700;width:44px;height:44px;flex-shrink:0}.brand-text{display:flex;flex-direction:column;gap:2px}.brand-text strong{font-size:16px;letter-spacing:-.03em}.brand-text strong span,.heading h1 span{color:var(--cyan)}.brand-text small{font-size:11px;color:var(--muted)}.icon-button{margin-left:auto;background:#1c3042;border:1px solid #2b4458;color:#eaf8ff;border-radius:11px;width:39px;height:39px;font-size:26px;line-height:1}
main{padding:0 16px 118px}.heading{padding:29px 3px 22px;position:relative}.heading h1{font-size:32px;line-height:1.13;letter-spacing:-.045em;margin:9px 0 8px;font-weight:780}.heading p{margin:0;color:var(--muted);font-size:13px}.heading .date-pill{position:absolute;right:0;top:29px}.date-pill{padding:7px 10px;background:#122638;border-radius:10px;color:#bddeed;border:1px solid #2b4254;font-size:11px}.wave{color:#f9be69!important}.freshness{font-size:12px;color:var(--muted);margin-bottom:14px;min-height:16px}.freshness.bad{color:#ffb884}.feature{border-radius:23px;padding:22px;background:radial-gradient(circle at 88% 8%,rgba(99,240,250,.19),transparent 42%),linear-gradient(125deg,#145779,#0c354d 60%,#0a273b);border:1px solid #347c9b;box-shadow:0 12px 30px rgba(0,0,0,.17);margin-bottom:13px;min-height:225px}.feature-top,.feature-footer,.section-row{display:flex;align-items:center;justify-content:space-between;gap:9px}.kicker{color:#c6f1ff;font-weight:750;letter-spacing:.07em;font-size:10px}.pill{display:inline-block;padding:6px 9px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap;background:#203747;color:#dbeefa}.pill.ok{background:#184c44;color:#8cf0c2}.pill.warning{background:#644326;color:#ffd996}.pill.bad{background:#61323c;color:#ffb9bb}.feature-title{font-size:27px;font-weight:800;letter-spacing:-.045em;margin-top:31px;line-height:1.1;min-height:33px}.feature-desc{font-size:14px;color:#d0edfa;margin:9px 0 28px;min-height:20px}.feature-footer{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;color:#b8deeb;font-size:12px}
.mini-grid,.weather-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.mini-card{padding:16px 12px;display:flex;align-items:flex-start;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:17px;min-height:113px}.mini-icon{width:34px;height:34px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;background:#173c53;color:var(--blue);font-size:25px}.mini-icon.amber{background:#43351f;color:var(--amber)}.mini-icon.mint{background:#153c37;color:var(--green)}.mini-icon.purple{background:#303551;color:#a4c7ff}.mini-card>div:last-child{min-width:0}.mini-card small{color:var(--muted);font-size:11px;display:block}.mini-card strong{display:block;font-size:17px;line-height:1.2;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-card div>span:last-child{display:block;font-size:11px;color:var(--muted);margin-top:6px}
.card{margin-top:13px;padding:19px;border:1px solid var(--line);border-radius:19px;background:var(--panel)}.section-title{font-weight:740;letter-spacing:-.02em;font-size:16px}.port-card .port-status{font-size:25px;margin-top:15px;font-weight:800}.port-status.open{color:var(--green)}.port-status.closed{color:#ffc16c}.count-line{font-size:14px;font-weight:650;color:#cbdbe8;margin-top:12px}.text-button{background:transparent;border:0;color:var(--cyan);font-size:12px;font-weight:650}.chart{width:100%;height:166px;margin-top:17px;overflow:hidden}.chart.big{height:282px}.chart svg{width:100%;height:100%;overflow:visible}.chart .chart-label{font-size:11px;fill:#9ab4c6}.chart .gridline{stroke:#355064;stroke-width:1;stroke-dasharray:2 6}.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:15px;font-size:10px;color:#9bb4c5}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:3px}.dot.ocean{background:#36afc9}.dot.gold{background:#f5c46f}.dot.coral{background:#ef8e8b}.segmented{display:flex;gap:4px;background:#0b1b29;padding:4px;border:1px solid #2b4150;border-radius:12px;margin-top:15px}.segmented button{flex:1;border:0;background:transparent;color:#a4bfd0;padding:9px;border-radius:9px;font-weight:650}.segmented button.active{background:#215576;color:#f5fcff}
.score-card{display:flex;align-items:center;justify-content:space-around;min-height:220px}.score-ring{width:146px;height:146px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:conic-gradient(var(--cyan) 0%,#22394b 0%)}.score-ring:before{content:"";position:absolute;inset:13px;background:var(--panel);border-radius:50%}.score-ring strong,.score-ring span{position:relative}.score-ring strong{font-size:40px;line-height:1}.score-ring span{font-size:13px;color:var(--muted)}.score-caption{padding-left:14px;max-width:155px}.reason-list{margin-top:14px;display:grid;gap:10px}.reason{background:#0b1a28;border:1px solid #293e50;border-radius:12px;padding:12px;display:flex;justify-content:space-between;align-items:start;gap:13px;font-size:12px;line-height:1.5}.reason b{color:var(--cyan);white-space:nowrap}.weather-grid{margin-top:0}.weather-card{border:1px solid var(--line);padding:18px 13px;background:var(--panel);border-radius:19px;min-height:150px;display:flex;flex-direction:column;gap:9px}.weather-card>span{color:var(--blue);font-size:26px}.weather-card small{color:var(--muted);font-size:12px}.weather-card strong{font-size:26px;letter-spacing:-.04em;margin-top:auto}
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:10;height:calc(73px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;align-items:start;padding:9px max(12px,calc((100% - 770px)/2)) env(safe-area-inset-bottom);background:#0e1d2b;border-top:1px solid #2c4254;box-shadow:0 -9px 26px rgba(0,0,0,.22)}.tabbar button{border:0;background:transparent;color:#7e9eb2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;min-width:60px;padding:3px 6px}.tabbar button span{font-size:26px;line-height:25px}.tabbar button small{font-size:10px}.tabbar button.active{color:var(--cyan)}
.form{display:flex;flex-direction:column;gap:8px;margin-top:19px}.form label{font-size:12px;color:#b7cbd9;font-weight:650;margin-top:8px}.form input{background:#071b2a;border:1px solid #2b4b60;border-radius:10px;padding:13px;color:white;width:100%;outline:none}.form input:focus{border-color:var(--cyan)}.primary{border:0;border-radius:11px;background:#42c7cd;color:#062331;padding:13px 15px;margin-top:15px;font-weight:800;text-align:center}.primary:disabled{opacity:.5;cursor:wait}.logout-button{width:100%;border:1px solid #32475a;border-radius:11px;color:#e1eefa;background:#1b2c3d;padding:14px;margin-top:19px;font-weight:650}.login-screen{min-height:100vh;display:grid;place-items:center;padding:28px 17px;background:radial-gradient(circle at 50% 5%,#134f64,transparent 55%),#071320}.login-card{width:min(100%,420px);border:1px solid #2f4c5d;background:rgba(13,31,46,.98);padding:30px;border-radius:24px;text-align:center}.logo.large{margin:0 auto 21px;width:67px;height:67px;border-radius:18px;font-size:45px}.login-card h1{font-size:31px;margin:9px 0 7px;letter-spacing:-.04em}.login-card h1 span{color:var(--cyan)}.login-card>p{color:var(--muted);font-size:13px}.login-card .form{text-align:left;margin-top:28px}.login-card .form .primary{display:flex;justify-content:space-between}.login-foot{font-size:11px!important;margin-top:25px}
@media(min-width:760px){main{padding-left:28px;padding-right:28px}.feature{min-height:235px}.mini-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.feature-title{font-size:37px}.heading h1{font-size:39px}}
@media(prefers-reduced-motion:no-preference){.page{animation:enter .2s ease}@keyframes enter{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}
/* Barneville Live 1.1 — marées interactives et gestion simplifiée du compte invité */
.interactive-chart{height:255px;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
.interactive-chart svg{touch-action:none;outline:none}
.interactive-chart svg:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:9px}
.tide-inspector{margin:4px 0 8px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid #2a596d;border-radius:13px;background:#102a3a}
.tide-inspector>div{display:flex;flex-direction:column;gap:4px}.tide-inspector strong{font-size:16px;white-space:nowrap}.tide-inspector .inspector-label,.tide-inspector .inspector-height span{font-size:11px;color:#b1cad9}.tide-inspector .inspector-height{align-items:flex-end}.tide-inspector .inspector-height strong{font-size:28px;color:#70d9f4;letter-spacing:-.03em}.chart-hint{color:#9bb5c7;font-size:11px;line-height:1.5;margin:7px 0 14px}.extreme-heading{margin:22px 0 9px;font-size:13px;font-weight:740}.highlow-list{font-size:12px}.extreme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.extreme-pill{border:1px solid #30495a;background:#0b2131;border-radius:11px;color:var(--text);padding:11px 10px;text-align:left;display:flex;flex-direction:column;gap:5px;min-width:0}.extreme-pill span{font-size:10px;color:#9eb9c9}.extreme-pill strong{font-size:13px;white-space:nowrap}.extreme-pill:active{border-color:#5ad7e1;background:#123f51}
.data-freshness{margin:16px 4px;color:var(--muted);font-size:12px}.guest-overview{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.guest-overview>div{padding:13px;border-radius:12px;background:#0d2b3b;border:1px solid #274b5e}.guest-overview small{display:block;color:#aac5d6;font-size:11px}.guest-overview strong{display:block;font-size:19px;margin-top:8px;overflow-wrap:anywhere}.admin-line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);padding:3px 0 12px}.secondary-button{border:1px solid #35566b;border-radius:10px;background:#193346;color:#c9e8f5;padding:12px 14px;font-size:12px;font-weight:700}.secondary-button:hover{background:#23475d}.admin-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.admin-actions .secondary-button{min-height:50px}.admin-subhead{margin-top:18px;border-top:1px solid #29475a;padding-top:22px}.password-row{display:flex;gap:8px}.password-row input{min-width:0;flex:1}.generated-box{border-radius:13px;border:1px solid #4d9a85;background:#12362f;padding:13px;margin-top:12px;display:flex;flex-direction:column;gap:8px}.generated-box small{font-size:11px;color:#b5e7d5}.generated-box code{font-size:16px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;user-select:all}.generated-box button{align-self:flex-start}.admin-note{margin:16px 0 0}
@media(max-width:355px){.tide-inspector strong{font-size:13px}.tide-inspector .inspector-height strong{font-size:23px}.admin-actions{grid-template-columns:1fr}.extreme-grid{grid-template-columns:1fr}.extreme-pill strong{font-size:14px}}

.tide-inspector .inspector-height small{font-size:10px;color:#abdaca;margin-top:2px;white-space:nowrap}

/* V1.2 — Design nautique premium : langage graphique vectoriel cohérent. */
:root{--bg:#09131c;--panel:#101e2a;--panel2:#162a38;--line:#2b3d4a;--muted:#9daeba;--text:#edf4f5;--cyan:#80ccd0;--blue:#84b3cd;--green:#8cd7b6;--amber:#dfbe87;--red:#e8a09c}
body{background:radial-gradient(ellipse 900px 430px at 50% -270px,#20435a 0%,transparent 95%),var(--bg);font-feature-settings:'tnum' 1}
.svg-sprite{position:absolute!important;width:0!important;height:0!important;overflow:hidden!important;pointer-events:none}
.ico{width:20px;height:20px;display:inline-block;vertical-align:middle;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7}
.brand-mark .ico,.logo.large .ico{width:29px;height:29px;stroke-width:1.5}
.logo.large .ico{width:38px;height:38px}
.topbar{background:rgba(9,19,28,.97);border-bottom-color:#263a45}
.brand-mark,.logo{border:1px solid #428492;background:linear-gradient(145deg,#234f65,#11313f);color:#d2f6f2;box-shadow:inset 0 1px 0 #ffffff12}
.brand-text strong{font-weight:730;letter-spacing:-.025em}
.brand-text strong span,.heading h1 span{color:#a0d7d8}
.heading h1{font-weight:735;letter-spacing:-.036em}
.heading h1 .ico{width:32px;height:32px}
.heading .wave .ico{color:#dfbe87}
.icon-button{background:transparent;border-color:#304953;display:grid;place-items:center;border-radius:13px}
.icon-button .ico{width:20px;height:20px}
.card,.mini-card,.weather-card{border-color:#263e4c;background:linear-gradient(155deg,#122434,#101e2a);box-shadow:0 7px 20px #050b1128}
.feature{background:radial-gradient(circle at 89% -25%,rgba(129,206,204,.26),transparent 64%),linear-gradient(132deg,#21546a,#153749 59%,#102b3b);border:1px solid #37738a;box-shadow:0 18px 38px #01090f33;}
.kicker{display:inline-flex;align-items:center;gap:6px;letter-spacing:.085em;font-weight:750;color:#e0f7f6}
.kicker .ico{width:16px;height:16px}
.feature-footer>span{display:inline-flex;align-items:center;gap:5px}
.feature-footer .ico{width:15px;height:15px;color:#e3cb9d}
.mini-icon{font-size:inherit;border:1px solid #ffffff0a}
.mini-icon .ico{width:20px;height:20px;stroke-width:1.65}
.section-title{display:inline-flex;align-items:center;gap:9px}
.section-title .ico{color:var(--cyan);width:19px;height:19px}
.port-card .port-status{font-size:23px}
.port-status:before{content:'';display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;vertical-align:middle;background:#9caab4}
.port-status.open:before{background:var(--green);box-shadow:0 0 0 5px #8cd7b61b}
.port-status.closed:before{background:var(--amber);box-shadow:0 0 0 5px #dfbe871b}
.weather-card>span .ico{width:29px;height:29px;stroke-width:1.4}
.tabbar{background:#0e1e2aee;border-top-color:#2b414e}
.tabbar button{gap:5px}
.tabbar button span{height:26px;display:flex;align-items:center;justify-content:center}
.tabbar button .ico{width:23px;height:23px;stroke-width:1.6}
.tabbar button.active{color:#9be3e0}
.tabbar button.active .ico{stroke-width:2}
.tabbar button small{font-size:11px}
.login-card{background:linear-gradient(150deg,#112839,#101c28);border-color:#34535d;box-shadow:0 22px 65px #01080d66}
.primary{background:linear-gradient(125deg,#98dedb,#71c8c9);color:#071e27;box-shadow:0 5px 14px #020c162d}
.secondary-button{background:#1b3442;border-color:#3c5965;color:#e5f0f2}
.secondary-button:hover{background:#244454}
.form label{color:#bbcbd3}
.form input{background:#0b1d29;border:1px solid #365361}
.form input::placeholder{color:#7f95a2}
.pill.ok{background:#1c413f;color:#b1e5cf}
.pill.bad{background:#54333b;color:#f1b1a6}
.pill.warning{background:#53442d;color:#e8cf9e}
.freshness:not(.bad):before{content:'';display:inline-block;width:7px;height:7px;margin-right:8px;background:var(--green);border-radius:50%}

/* Console d'administration : hiérarchie claire, accès invités et comptes personnels. */
.admin-workspace{margin-top:4px}
.admin-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 2px 10px}
.admin-heading h2{font-size:25px;font-weight:740;margin:7px 0 5px;letter-spacing:-.04em}
.admin-heading p{font-size:12px;color:var(--muted);margin:0;line-height:1.5}
.admin-shield{width:46px;height:46px;border-radius:15px;border:1px solid #305968;background:#133441;display:grid;place-items:center;color:#a3d9d8}
.admin-shield .ico{width:24px;height:24px}
.admin-card{padding:19px 19px 17px;margin:14px 0;border-radius:19px}
.admin-card-title{align-items:start}
.admin-head-inline{display:flex;align-items:start;gap:13px;min-width:0}
.admin-head-inline>.ico{width:21px;height:21px;color:#a1d4d5;margin-top:1px}
.admin-head-inline h3{font-size:17px;margin:0 0 5px;font-weight:730;letter-spacing:-.02em}
.admin-head-inline p{font-size:12px;color:var(--muted);line-height:1.5;margin:0;max-width:440px}
.guest-overview{margin:18px 0 8px}
.guest-overview>div{background:#0c2331;border-color:#304955}
.guest-overview strong{font-size:18px}
.account-actions-line{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:16px}
.quiet-button{border:1px solid #375260;border-radius:10px;background:transparent;color:#c5dfeb;font-size:12px;font-weight:650;padding:9px 12px;line-height:1.2}
.quiet-button:hover{background:#203946}
.account-actions-line .quiet-button{border:0;padding:4px}
.form.compact-form{margin-top:12px;gap:6px}
.compact-form label{margin:6px 0 3px}
.inline-field{display:flex;align-items:stretch;gap:8px}
.inline-field input{min-width:0;flex:1}
.inline-field .secondary-button{min-width:92px}
.action-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.action-row .primary{margin-top:0}
.action-row .secondary-button{min-height:43px}
.account-footer-actions{display:flex;gap:9px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:17px;margin-top:12px}
.account-footer-actions .quiet-button{flex:1;min-width:125px}
.admin-accordion{border:1px solid #304957;border-radius:12px;margin-top:16px;background:#102431}
.admin-accordion>summary{padding:14px 15px;color:#cde9eb;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;font-weight:680;font-size:13px}
.admin-accordion>summary::-webkit-details-marker{display:none}
.admin-accordion>summary>.ico{width:18px;height:18px}
.admin-accordion>summary>span{margin-left:auto;font-size:20px;line-height:1;color:#80c5ca}
.admin-accordion[open]>summary>span{transform:rotate(45deg)}
.admin-accordion .form{padding:0 15px 17px;margin-top:0}
.admin-accordion .form .muted{margin:6px 0 0}
.users-list{display:grid;gap:0;margin-top:18px}
.user-list-item{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:11px 0;border-top:1px solid #2c4350}
.user-list-primary{display:flex;align-items:center;gap:12px;min-width:0}
.user-avatar{width:39px;height:39px;flex-shrink:0;border-radius:12px;background:#233f4d;color:#b8e5e2;display:grid;place-items:center;font-weight:750}
.user-list-primary strong{display:block;font-size:14px;font-weight:700;overflow-wrap:anywhere}
.user-list-primary small{display:block;color:#9eb3c0;font-size:11px;margin-top:5px}
.user-list-item .quiet-button{flex-shrink:0}
.no-users{padding:12px 0;margin:0}
.edit-user-panel{background:#0c2634;border:1px solid #3d6370;border-radius:15px;padding:16px;margin-top:17px}
.edit-user-panel h4{margin:0;font-size:15px}
.edit-user-panel .inline-field input{font-size:13px}
.edit-danger{border-top:1px solid #2d4c5b;padding-top:15px;margin-top:20px;gap:7px}
.danger-button{background:#3e2933;border:1px solid #a15c69;color:#f5c3c4;padding:12px 14px;font-size:12px;font-weight:680;border-radius:10px}
.personal-card{margin-top:20px}
.personal-card .section-title{font-size:15px}
.app-version{margin-top:23px;text-align:center;font-size:10px;color:#7c96a5;letter-spacing:.11em}
.logout-button{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:15px}
.logout-button .ico{height:18px;width:18px}
.generated-box{background:#17362f;border-color:#3f8c83}
.generated-box code{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.75}
.message:empty{min-height:0;margin:0}
.tide-inspector{background:#102b38;border-color:#3c6473}
@media(min-width:760px){.admin-workspace{max-width:760px}.admin-card{padding:24px}.admin-head-inline p{font-size:13px}.admin-heading h2{font-size:28px}}
@media(max-width:390px){.admin-card{padding:15px}.admin-head-inline{gap:9px}.inline-field .secondary-button{min-width:78px;padding-left:8px;padding-right:8px}.action-row button{flex:1}.user-list-item .quiet-button{padding:9px 10px}}