:root{--navy:#071d35;--sea:#087f8c;--aqua:#54d1cc;--paper:#f7fafb;--line:#d7e4e8;--danger:#ad3e48}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 75% 100%,#cbe5e5,transparent 48%),linear-gradient(145deg,#e9f3f5,#f7fafb);color:var(--navy);font:16px system-ui,-apple-system,Segoe UI,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:15px max(6vw,25px);background:linear-gradient(105deg,#06182e,#0b3857);color:white;box-shadow:0 2px 18px #00192d22}header strong{font-size:1.25rem;letter-spacing:.02em}header strong:before{content:'✦';display:inline-grid;place-items:center;margin-right:11px;width:32px;height:32px;border:1px solid #78c5c5;border-radius:50%;color:var(--aqua)}header span{display:block;margin-left:44px;color:#a6c3d2;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}header a:last-child{padding:8px 12px;border:1px solid #66889d;border-radius:7px;text-decoration:none;font-size:.78rem}a{color:inherit}main{max-width:1200px;margin:auto;padding:38px 6vw}.hero{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;min-height:175px;padding:30px 36px;margin-bottom:24px;border-radius:18px;background:linear-gradient(115deg,#082842,#087484);color:white;box-shadow:0 19px 42px #09354c27}.hero:after{content:'✦';position:absolute;right:7%;font-size:8rem;color:#9ce2df1c}.hero h1{position:relative;margin:0;font-size:clamp(1.3rem,3vw,2.15rem);letter-spacing:-.04em}.eyebrow{position:relative;color:#067b87;letter-spacing:.15em;font-size:.68rem;font-weight:800;margin:0 0 8px}.hero .eyebrow{color:#a7eeea}.muted,.hint{position:relative;color:#d0e2e8}.hero button{position:relative;background:#edfffc;color:#075261}button{appearance:none;border:0;border-radius:8px;background:var(--sea);color:white;padding:11px 15px;font-weight:750;cursor:pointer;transition:transform .15s}button:hover{transform:translateY(-2px)}.grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:23px}#map{height:470px;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:#dcebed;display:grid;place-items:center}.map-awaiting{position:relative;background:linear-gradient(#071d35 0 53%,#0c6075 53%)!important}.boat-scene{position:relative;width:100%;height:100%;overflow:hidden;color:white}.boat-scene p{position:absolute;top:61%;left:0;right:0;text-align:center;font-size:.8rem;letter-spacing:.08em;color:#d6f1f0}.moon{position:absolute;top:16%;right:19%;width:46px;height:46px;border-radius:50%;background:#f7e8b5;box-shadow:0 0 34px #f7e8b580}.star{position:absolute;color:#a4e8e4}.s1{top:17%;left:20%;animation:twinkle 2s ease-in-out infinite}.s2{top:29%;left:43%;animation:twinkle 2.7s .4s ease-in-out infinite}.boat{position:absolute;top:48%;left:44%;width:110px;height:38px;border-radius:0 0 60px 60px;background:#f3e2bd;transform:rotate(-3deg);animation:float 3.8s ease-in-out infinite}.boat:before{content:'';position:absolute;left:45px;bottom:37px;border-left:1px solid #c9ba9c;height:73px}.boat span{position:absolute;left:46px;bottom:38px;border-bottom:44px solid #d97254;border-left:38px solid transparent}.boat b{position:absolute;left:14px;bottom:37px;border-bottom:30px solid #f4f8ed;border-right:30px solid transparent}.waves{position:absolute;left:-10%;width:120%;height:55px;border-radius:50%;border-top:4px solid #69c6c775;animation:drift 6s linear infinite}.w1{top:65%}.w2{top:74%;animation-delay:-2s}.cards{display:grid;grid-template-columns:1fr 1fr;gap:13px}.cards article,.history{background:#fff;border:1px solid var(--line);box-shadow:0 8px 23px #12334b0e}.cards{align-content:start}.cards article{position:relative;min-height:88px;border-radius:14px;padding:15px 18px;overflow:hidden;border-left:3px solid var(--aqua)}.cards .wide{grid-column:1/-1}.sig b{font-size:1.05rem}.gauges{display:grid;gap:14px;margin-top:14px}.gh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.82rem;font-weight:700}.gh em{font-style:normal;font-size:.8rem}.bar{height:9px;margin:6px 0 4px;border-radius:6px;background:#e4edf0;overflow:hidden}.bar u{display:block;height:100%;width:0;border-radius:6px;transition:width .6s,background .6s}.g p{margin:0;font-size:.7rem;color:#6f8a97}.cards small{display:block;color:#6f8a97;font-size:.67rem;text-transform:uppercase;letter-spacing:.09em}.cards b{display:block;margin-top:9px;font-size:1.3rem;word-break:break-word}.danger{background:#fff0f1;color:var(--danger)}.history{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding:22px 25px;border-radius:16px}.history p{margin:5px 0;max-width:610px;color:#58727e}.history input{padding:10px;border:1px solid var(--line);border-radius:8px}.auth{display:grid;place-items:center;background:linear-gradient(135deg,#06182e,#087480)}.login-card{width:min(92vw,430px);padding:32px;background:white;border-radius:18px;box-shadow:0 15px 50px #00121c77}.login-card form{display:grid;gap:15px;margin-top:22px}.login-card label{display:grid;gap:6px;font-weight:650}.login-card input{padding:12px;border:1px solid var(--line);border-radius:8px;font:inherit}.error{color:var(--danger);font-weight:700}@keyframes float{50%{transform:rotate(2deg) translateY(-7px)}}@keyframes drift{to{transform:translateX(8%)}}@keyframes twinkle{50%{opacity:.2;transform:scale(.55)}}@media(max-width:720px){main{padding:22px 20px}.grid{grid-template-columns:1fr}#map{height:350px}.hero{align-items:flex-start;flex-direction:column}.history{align-items:stretch;padding:20px}.history>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:8px}.history input{grid-column:1/-1;width:100%}.history button{min-height:46px;font-size:.77rem}.cards article{min-height:80px}.boat{left:36%}}

/* --- refonte visuelle --- */
:root{--card-shadow:0 1px 2px #0b2a4012,0 10px 28px #0b2a4012;--r:18px}
body{background:radial-gradient(ellipse at 85% 0,#d5ecee,transparent 45%),radial-gradient(ellipse at 0 100%,#dde9f3,transparent 50%),#f3f8fa}
main{max-width:1180px;padding:30px 5vw 48px}
.hero{min-height:150px;border-radius:var(--r);padding:28px 34px;background:linear-gradient(120deg,#06223a,#0a5f73 70%,#0b8a94);box-shadow:0 18px 40px #08324a30}
.hero h1{font-size:clamp(1.5rem,3.4vw,2.4rem);font-variant-numeric:tabular-nums}
.hero .muted{margin:6px 0 0;color:#cfe6ec}
.live{margin-left:10px;padding:3px 9px;border-radius:20px;background:#ffffff1f;color:#fff;letter-spacing:.05em;font-weight:700}
.live:not(.old){color:#8ff0c2}.live.old{color:#ffd28a}
.grid{gap:20px;align-items:stretch}
#map{height:100%;min-height:520px;border-radius:var(--r);border:0;box-shadow:var(--card-shadow)}
.cards{gap:12px;grid-auto-rows:min-content}
.cards article{border:0;border-left:0;border-radius:var(--r);padding:16px 18px;min-height:0;box-shadow:var(--card-shadow);background:#fff}
.cards small{display:flex;align-items:center;gap:8px;font-size:.68rem;font-weight:700;letter-spacing:.09em;color:#58727e}
.cards small i{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#e6f5f5;font-style:normal;font-size:.9rem;letter-spacing:0}
.cards b{margin-top:10px;font-size:1.45rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cards .sig b{font-size:1rem;letter-spacing:0}
.gauges{gap:16px;margin-top:16px}
.bar{height:10px;margin:7px 0 5px;background:linear-gradient(90deg,#d6454f33 0 25%,#e89b2d33 25% 50%,#7cbf4a33 50% 75%,#1fa97133 75%)}
.gh span{color:var(--navy)}
.history{border:0;border-radius:var(--r);box-shadow:var(--card-shadow);margin-top:20px}
.history>div:last-child{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
button{border-radius:10px}
@media(max-width:720px){#map{min-height:340px;height:340px}main{padding:20px 16px 40px}.hero{padding:24px}}

header{padding:14px max(5vw,calc((100vw - 1180px)/2 + 5vw));background:linear-gradient(100deg,#05182d,#093a58 60%,#0a5568)}
header strong{display:flex;align-items:center}header strong:before{content:'⚓';background:#ffffff12;border-color:#ffffff30;font-size:1rem;color:#8fe3e0}
header span{margin-left:43px;margin-top:-4px}
header a:last-child{background:#ffffff10;border-color:#ffffff30;transition:background .15s}header a:last-child:hover{background:#ffffff22}
.history{align-items:center}.history .eyebrow{color:#087f8c}
.history input{background:#f7fafb}
.danger{background:#fff0f1;color:var(--danger);border:1px solid #f3c9cd}
.hero:after{content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#9ce2df33,transparent 70%)}
.hero button{padding:12px 18px;box-shadow:0 4px 14px #0003}
.auth{background:radial-gradient(ellipse at 70% 10%,#0b8a94aa,transparent 55%),linear-gradient(145deg,#05182d,#0a5568)}
.login-card{border-radius:22px;padding:36px 34px}.login-card h1{margin:0 0 4px;font-size:1.6rem}.login-card>p{margin:0;color:#58727e}
.login-card input:focus,.history input:focus{outline:2px solid var(--aqua);border-color:transparent}
.login-card button{padding:13px;font-size:1rem}
.history>div:last-child>div:first-child{flex:1 0 100%}.history>div:last-child{width:100%}
@media(max-width:720px){.history>div:last-child{display:grid;grid-template-columns:1fr 1fr}.history>div:last-child>div:first-child{grid-column:1/-1}.history input{grid-column:1/-1}header span{margin-left:43px}}
@media(max-width:720px){.hero{gap:18px}}
.updated{position:relative;align-self:flex-end;font-size:.75rem;color:#bfdce3;white-space:nowrap}@media(max-width:720px){.updated{align-self:flex-start}}
.map-awaiting{background:linear-gradient(145deg,#e4eff2,#f3f8fa)!important}.map-loading{display:grid;place-items:center;gap:12px;color:#58727e;font-size:.85rem}.map-loading p{margin:0}.map-loading span{width:34px;height:34px;border:3px solid #cfe3e6;border-top-color:var(--sea);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.hist-info{flex:1 0 100%;margin:4px 0 0!important;font-size:.82rem;color:#087f8c!important;font-weight:600;order:5}.hist-info:empty{display:none}