:root{color-scheme:dark;--bg:#07141d;--panel:#10222e;--panel-deep:#0a1c28;--stroke:#253d4a;--text:#eef5f7;--muted:#a3b8c3;--teal:#5ed5c5;--amber:#f8c576;--red:#f89991;--gap:14px;font-family:Inter,ui-sans-serif,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)}button,a,input{touch-action:manipulation}button,a{ -webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,iframe:focus-visible{outline:3px solid var(--teal);outline-offset:3px}button:disabled{opacity:.45;cursor:default}h1,h2,h3,p{margin:0}h1{font-size:28px;line-height:1.08;font-weight:650;letter-spacing:-1px}h2{font-size:18px;font-weight:600;letter-spacing:-.3px}h3{margin:24px 0 10px;font-size:17px}iframe{display:block;width:100%;height:100%;border:0;background:var(--panel-deep)}[hidden]{display:none!important}.dashboard{height:100dvh;min-height:690px;padding:20px 24px 13px;display:grid;grid-template-rows:68px minmax(0,1fr) 22px;gap:var(--gap);max-width:2600px;margin:auto}.dashboard:has(.network-notice:not([hidden])){grid-template-rows:68px minmax(0,1fr) 22px}.masthead{display:flex;align-items:center;gap:20px;padding-bottom:8px}.brand{display:flex;align-items:center;gap:13px;flex:1;min-width:290px}.brand img{width:57px;height:57px;object-fit:contain}.eyebrow{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1.65px;line-height:1.5;margin-bottom:5px}.title-dot{color:var(--teal)}.clock-wrap{text-align:center;min-width:205px;font-variant-numeric:tabular-nums}.clock-wrap time{font-size:31px;line-height:1.2;letter-spacing:1px;font-weight:500}.clock-wrap p{font-size:11px;color:var(--muted);margin-top:3px}.header-actions{display:flex;align-items:center;gap:7px;justify-content:flex-end;flex:1}.button,.icon-button{height:36px;border:1px solid var(--stroke);border-radius:8px;background:#122631;padding:0 12px;font-size:12px;font-weight:550;white-space:nowrap}.button:hover,.icon-button:hover{background:#1e3a46;border-color:#63828b}.icon-button{font-size:20px;width:37px;padding:0}.button[aria-pressed=true]{border-color:#49988e;background:#13362f;color:#a8f2e4}.text-link{font-size:11px;text-decoration:none;color:var(--muted);white-space:nowrap}.text-link:hover{color:var(--teal);text-decoration:underline}.inline-button{border:0;padding:0;background:none;text-decoration:underline;color:var(--muted);font-size:inherit}.network-notice{padding:8px 12px;border-radius:7px;border:1px solid #816238;background:#3f3021;font-size:12px;color:#ffe1b1}.main-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:var(--gap);min-height:0}.panel{min-width:0;min-height:0;border:1px solid var(--stroke);background:var(--panel);border-radius:13px;overflow:hidden}.panel-heading{padding:17px 19px;display:flex;align-items:center;justify-content:space-between;gap:8px}.panel-heading .eyebrow{font-size:9px}.source-tag{font-size:10px;color:var(--muted);white-space:nowrap}.camera-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto 51px 28px}.camera-view{position:relative;min-height:0;background:#06111a}.camera-view iframe{background:#06111a}.camera-caption{position:absolute;bottom:17px;left:18px;display:flex;gap:11px;align-items:center;padding:9px 12px;background:#07141de0;backdrop-filter:blur(7px);border:1px solid #ffffff24;border-radius:8px;font-size:12px;pointer-events:none}.camera-number{color:var(--teal);font-size:10px;letter-spacing:1.3px;border-right:1px solid #ffffff25;padding-right:11px}.camera-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 16px 4px}.camera-controls{display:flex;gap:6px;align-items:center}.camera-controls .icon-button{height:31px;width:34px;font-size:17px}.rotation-button{height:31px;font-size:11px}.camera-note{font-size:10px;color:var(--muted);padding:3px 17px 8px}.weather-column{display:grid;grid-template-rows:184px minmax(150px,.7fr) minmax(165px,1fr);gap:var(--gap);min-height:0}.compact{padding:13px 16px 8px}.compact h2{font-size:17px}.conditions-grid{display:grid;grid-template-columns:1fr 1fr;padding:0 16px 8px}.condition+ .condition{border-left:1px solid var(--stroke);padding-left:17px}.condition{min-width:0}.metric-label{font-size:9px;font-weight:650;letter-spacing:1.5px;color:var(--muted);margin-bottom:2px}.metric{font-size:31px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-1px}.metric small{font-size:12px;margin-left:5px;color:var(--muted);letter-spacing:0}.metric-detail{font-size:10px;margin-top:5px;color:#d3e0e5}.source-status{font-size:10px;color:var(--muted);line-height:1.45}.condition .source-status{margin-top:5px;font-size:9px}.condition[data-tone=stale] .metric{color:var(--amber)}.condition[data-tone=unknown] .metric{color:var(--muted)}.sun-row{display:flex;align-items:center;gap:14px;padding:7px 16px;border-top:1px solid var(--stroke);font-size:10px;color:var(--muted);white-space:nowrap}.sun-row span:last-child:not(:nth-child(2)){margin-left:auto;color:var(--amber)}.forecast-panel,.windy-panel{display:grid;grid-template-rows:36px minmax(0,1fr) 22px}.widget-heading{display:flex;align-items:center;justify-content:space-between;padding:0 13px;gap:8px}.widget-heading h2{font-size:12px;font-weight:550;letter-spacing:0}.widget-heading .text-link{font-size:10px}.widget-view{min-height:0}.widget-note{padding:4px 13px 3px;font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-dot{height:6px;width:6px;flex:none;background:var(--muted);border-radius:50%}.page-footer{display:flex;align-items:center;justify-content:space-between;color:#89a5b2;font-size:9px;gap:12px}.page-footer>span:first-child{letter-spacing:.4px}body.night .dashboard{filter:brightness(.77) saturate(.9)}body.tv-mode .embed-surface iframe:not(#cameraFrame){pointer-events:none}body.cursor-hidden,body.cursor-hidden button,body.cursor-hidden a{cursor:none}.skip-link{position:fixed;top:-80px;left:15px;padding:10px 15px;background:var(--teal);color:#06231f;z-index:9;border-radius:0 0 7px 7px}.skip-link:focus{top:0}dialog{background:#102531;color:var(--text);border:1px solid #405965;border-radius:16px;max-width:650px;width:calc(100% - 34px);padding:25px;box-shadow:0 25px 90px #0009}dialog::backdrop{background:#0009;backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.dialog-header h2{font-size:25px}dialog p,dialog li{font-size:13px;line-height:1.65;color:#c3d6df}dialog ul{padding-left:19px}dialog li{margin-bottom:9px}dialog .disclaimer{padding:14px;background:#20353d;border-left:2px solid var(--amber);margin-top:15px}.dialog-privacy{margin-top:14px;color:var(--muted)!important;font-size:11px!important}
.weather-column{grid-template-rows:194px minmax(0,.7fr) minmax(0,1fr)}
@media(max-height:850px) and (min-width:1121px){:root{--gap:10px}.dashboard{padding:12px 18px 10px;grid-template-rows:58px minmax(0,1fr) 20px}.dashboard:has(.network-notice:not([hidden])){grid-template-rows:58px minmax(0,1fr) 20px}.brand img{height:49px;width:49px}.brand h1{font-size:26px}.clock-wrap time{font-size:28px}.weather-column{grid-template-rows:164px minmax(0,.8fr) minmax(0,1fr)}.conditions-panel .eyebrow{display:none}.compact{padding:10px 14px 8px}.conditions-grid{padding:0 14px 8px}.metric{font-size:28px}.condition .source-status{line-height:1.25}.sun-row{padding:6px 14px}.panel-heading:not(.compact){padding:13px 16px}.camera-panel{grid-template-rows:auto minmax(0,1fr) auto 48px 25px}.widget-heading{height:32px}.forecast-panel,.windy-panel{grid-template-rows:32px minmax(0,1fr) 20px}.widget-note{font-size:8px}}
@media(min-height:950px) and (min-width:1200px){.dashboard{padding:24px 28px 17px;grid-template-rows:78px minmax(0,1fr) 24px;gap:18px}.dashboard:has(.network-notice:not([hidden])){grid-template-rows:78px minmax(0,1fr) 24px}.brand img{height:65px;width:65px}h1{font-size:33px}.eyebrow{font-size:11px}.clock-wrap time{font-size:37px}.clock-wrap p{font-size:12px}.button{height:40px;font-size:13px}.icon-button{height:40px;width:40px}.weather-column{grid-template-rows:214px minmax(0,.8fr) minmax(0,1fr)}.panel-heading{padding:22px}.compact{padding:15px 18px 10px}.metric{font-size:38px}.metric-detail{font-size:12px}.condition .source-status{font-size:10px}.sun-row{font-size:11px;padding:8px 18px}.conditions-grid{padding:0 18px 10px}.page-footer{font-size:10px}}
@media(max-width:1120px){.dashboard{height:auto;min-height:100dvh;grid-template-rows:auto auto auto;padding:15px;gap:14px}.dashboard:has(.network-notice:not([hidden])){grid-template-rows:auto auto auto}.masthead{flex-wrap:wrap;gap:14px}.brand{min-width:240px}.clock-wrap{min-width:180px}.header-actions{flex-basis:100%;justify-content:flex-start}.main-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}.camera-panel{min-height:600px;grid-template-rows:auto minmax(340px,1fr) auto auto auto}.camera-toolbar{flex-wrap:wrap;padding-bottom:8px}.camera-note{line-height:1.4;padding-bottom:10px}.weather-column{grid-template-rows:190px 210px 270px}.page-footer{align-items:flex-start;line-height:1.5}.panel-heading{flex-wrap:wrap}.conditions-panel .panel-heading{flex-wrap:nowrap}.camera-panel .panel-heading .source-tag{display:none}}
@media(max-width:740px){.dashboard{padding:12px;gap:12px}.masthead{gap:12px}.brand{min-width:0;flex:1}.brand img{height:46px;width:46px}.brand .eyebrow{font-size:7px;letter-spacing:1px}.brand h1{font-size:25px}.clock-wrap{min-width:0;text-align:right}.clock-wrap time{font-size:22px}.clock-wrap p{font-size:9px;max-width:128px;line-height:1.4}.header-actions{gap:6px}.header-actions .button{font-size:11px}.main-grid{grid-template-columns:minmax(0,1fr)}.camera-panel{min-height:0;grid-template-rows:auto auto auto}.camera-view{aspect-ratio:16/10}.camera-toolbar{padding:10px 12px 7px}.camera-toolbar .text-link{font-size:10px}.camera-note{font-size:9px}.weather-column{grid-template-rows:190px 265px 345px}.page-footer{flex-direction:column;gap:3px;padding-bottom:8px}.camera-caption{bottom:12px;left:12px;font-size:10px}.panel-heading{padding:14px}.compact{padding:13px 16px 8px}.source-tag{font-size:9px}}
@media(max-width:1120px){.weather-column{grid-template-rows:204px 210px 270px}}
@media(max-width:740px){.weather-column{grid-template-rows:204px 265px 345px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Frame the 16:9 player itself; its internal video cannot use our object-fit. */
.camera-view{overflow:hidden}
.camera-view iframe{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.camera-caption{z-index:1}
.camera-fit-button{height:31px;font-size:11px}
.camera-controls{flex-wrap:wrap}
.camera-source{display:grid;gap:4px;text-align:right;font-size:9px;color:var(--muted)}
.camera-source a{text-decoration:none}
.camera-source [data-stale=true]{color:var(--amber)}
.camera-empty{position:absolute;inset:0;display:grid;place-content:center;padding:28px;text-align:center;line-height:1.6;color:var(--muted);font-size:14px}
.camera-caption{max-width:calc(100% - 36px)}
.camera-caption #cameraLabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camera-number{flex-shrink:0;white-space:nowrap}
.camera-quality{font-size:9px;color:var(--muted);white-space:nowrap;border-left:1px solid #ffffff25;padding-left:10px}
@media(max-width:740px){.camera-caption{flex-wrap:wrap;gap:6px}.camera-quality{flex-basis:100%;border-left:0;padding-left:0}}

/* 2.0.15: la webcam occupe toute la colonne de gauche (flotte retirée le 08/11/2026) ; la météo garde la colonne de droite. */
.dashboard{grid-template-rows:68px minmax(0,1fr) 22px}
.dashboard:has(.network-notice:not([hidden])){grid-template-rows:68px minmax(0,1fr) 22px}
/* 2.0.28 : la bande « Escale » n'occupe que la colonne des webcams ; la météo monte jusqu'à l'en-tête (demande de la Direction, 08/11/2026). */
.main-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bande weather" "camera weather"}
.camera-panel{grid-area:camera}

.weather-column{grid-area:weather;grid-template-rows:164px minmax(0,1.15fr) minmax(0,1fr)}
.conditions-panel .compact{padding:10px 14px 7px}
.conditions-panel .conditions-grid{padding:0 14px 7px}
.conditions-panel .metric{font-size:30px}
.conditions-panel .metric-detail{font-size:10px;margin-top:4px}
.conditions-panel .source-status{font-size:9px;line-height:1.3}
.conditions-panel .sun-row{padding:6px 14px}


@media(max-height:850px) and (min-width:1121px){
  .dashboard{grid-template-rows:58px minmax(0,1fr) 20px}
  .dashboard:has(.network-notice:not([hidden])){grid-template-rows:58px minmax(0,1fr) 20px}
  .main-grid{grid-template-rows:auto minmax(0,1fr)}
  .weather-column{grid-template-rows:142px minmax(0,1.15fr) minmax(0,1fr)}
  .conditions-panel .compact{padding:8px 12px 5px}
  .conditions-panel .compact h2{font-size:15px}
  .conditions-panel .metric{font-size:25px}
  .conditions-panel .metric-label{font-size:8px}
  .conditions-panel .source-status{font-size:8px}
  .conditions-panel .sun-row{font-size:9px;padding:5px 12px}
}
@media(min-height:950px) and (min-width:1200px){
  .dashboard{grid-template-rows:78px minmax(0,1fr) 24px}
  .dashboard:has(.network-notice:not([hidden])){grid-template-rows:78px minmax(0,1fr) 24px}
  .main-grid{grid-template-rows:auto minmax(0,1fr)}
  .weather-column{grid-template-rows:176px minmax(0,1.15fr) minmax(0,1fr)}
  .conditions-panel .metric{font-size:34px}
  .conditions-panel .source-status{font-size:10px}
}
@media(max-width:1120px){
  .dashboard{grid-template-rows:auto auto auto}
  .dashboard:has(.network-notice:not([hidden])){grid-template-rows:auto auto auto}
  .main-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto minmax(530px,1fr)}
  .camera-panel{min-height:0;grid-template-rows:auto minmax(300px,1fr) auto auto auto}
  .weather-column{grid-template-rows:164px minmax(360px,1fr) minmax(320px,1fr)}
}
@media(max-width:740px){
  .main-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"bande" "camera" "weather"}
  .camera-panel{grid-template-rows:auto auto auto}
  .camera-view{aspect-ratio:16/9}
  .weather-column{grid-template-rows:164px minmax(360px,auto) 360px}
}
/* Preserve readable forecast rows: a short window scrolls the page as a whole. */
@media(min-width:1121px){
  .dashboard{height:max(100dvh,971px);min-height:100dvh;grid-template-rows:68px minmax(820px,1fr) 22px}
  .dashboard:has(.network-notice:not([hidden])){height:max(100dvh,calc(971px + var(--gap) + 36px));grid-template-rows:68px minmax(820px,1fr) 22px}
  .weather-column{grid-template-rows:164px minmax(372px,1.15fr) minmax(252px,1fr)}
}
@media(max-height:850px) and (min-width:1121px){
  .dashboard{height:max(100dvh,906px);grid-template-rows:58px minmax(786px,1fr) 20px}
  .dashboard:has(.network-notice:not([hidden])){height:max(100dvh,calc(906px + var(--gap) + 36px));grid-template-rows:58px minmax(786px,1fr) 20px}
  .weather-column{grid-template-rows:142px minmax(372px,1.15fr) minmax(252px,1fr)}
}
@media(min-height:950px) and (min-width:1200px){
  .dashboard{height:max(100dvh,1061px);grid-template-rows:78px minmax(882px,1fr) 24px}
  .dashboard:has(.network-notice:not([hidden])){height:max(100dvh,calc(1061px + var(--gap) + 36px));grid-template-rows:78px minmax(882px,1fr) 24px}
  .weather-column{grid-template-rows:176px minmax(418px,1.15fr) minmax(252px,1fr)}
}

/* 2.0.16-2.0.17 : bouton de réservation (point 3, 08/11/2026) : accent turquoise, sous la webcam en pleine largeur de la colonne (2.0.17, demande de la Direction : il chevauchait les horloges dans l en-tête). */
.button-accent{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:var(--teal);color:var(--bg);border-color:var(--teal);font-weight:650;padding:0 14px}
.button-accent:hover{background:#7fe3d5;border-color:#7fe3d5;color:var(--bg)}
.briefing-book a{color:var(--teal);font-weight:600;text-decoration:none}
.briefing-book a:hover{text-decoration:underline}

/* 2.0.19 : seul le logo est un lien vers www.serialdivers.com (demande de la Direction du 08/11/2026) ; le titre reste du texte. */
.brand-logo{display:flex;flex:none;color:inherit;text-decoration:none;border-radius:8px}
.brand-logo:hover img,.brand-logo:focus-visible img{filter:brightness(1.15)}
.brand-logo:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* 2.0.20 : conformité au lecteur YouTube (point 6 b, 08/11/2026) : rien par-dessus le lecteur, la légende passe sous la vidéo ; « Image entière » par défaut ; le lecteur reste cliquable en mode TV. */
.camera-caption{position:static;bottom:auto;left:auto;z-index:auto;margin:8px 16px 0;max-width:none;background:transparent;border:0;border-radius:0;padding:0;backdrop-filter:none;pointer-events:auto}
@media(max-width:740px){.camera-caption{margin:8px 12px 0}}

/* 2.0.21 : bande d'accès à la page d'escale, sous le bouton de réservation (08/11/2026). */

/* 2.0.22 : bande « Escale à Saint-Barth » pleine largeur sous l'en-tête (demande de la Direction du 08/11/2026) ; l'avis réseau partage sa ligne. */
.bandeaux{display:grid;gap:8px;grid-area:bande;align-self:start}
.appel-escale{display:block;padding:10px 16px;border-radius:10px;background:var(--teal);color:var(--bg);font-size:16px;font-weight:650;letter-spacing:.2px;text-align:center;text-decoration:none}
.appel-escale:hover,.appel-escale:focus-visible{background:#7fe3d5;color:var(--bg)}
@media(max-width:740px){.appel-escale{font-size:14px;padding:11px 12px;text-align:left}}

/* 2.0.30 : le bouton de langue est un lien vers l'adresse de l'autre langue (référencement). */
.button-lien{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:inherit}