/* ═══════════════════════════════════════════════════════════════
   Îles · écran ambiant — feuille de style
   Le design du prototype est la référence : ne pas le « moderniser ».
   ═══════════════════════════════════════════════════════════════ */

:root{
  --gres:#B5483A;     /* falaises de grès rouge */
  --lagune:#4F9BA6;   /* eau de la lagune */
  --ecume:#EAF0EF;    /* texte principal */
  --sable:#D9C8A8;    /* accents chauds */
  --goemon:#1F4744;   /* mer profonde */
  --nuit:#0B1B2B;

  /* palette dynamique (selon l'heure) — mises à jour en JS */
  --sky-top:#0B1B2B;
  --sky-bot:#1E3A4F;
  --sea-top:#2A6C74;
  --sea-bot:#0E2D33;
  --wave-line:rgba(234,240,239,.55);

  --safe:5vw; /* overscan TV */
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--nuit);overflow:hidden;cursor:none}
body{
  font-family:var(--body);color:var(--ecume);
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 100%);
  transition:background 4s ease;
}
body.pointer{cursor:auto}

/* ── Mer (signature) ─────────────────────────────────── */
#sea{position:fixed;inset:0;width:100%;height:100%;display:block}

/* ── Grille d'écran ──────────────────────────────────── */
.screen{
  position:relative;z-index:2;height:100%;
  padding:var(--safe) var(--safe);
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  grid-template-columns:1fr auto;
  gap:2vh 4vw;
}

/* Bandeau haut */
.topbar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline}
.date{font-family:var(--mono);font-size:1.6vw;letter-spacing:.08em;text-transform:uppercase;color:var(--sable)}
.clock{font-family:var(--display);font-weight:300;font-size:4.2vw;letter-spacing:-.02em;line-height:1}
.clock small{font-size:1.6vw;color:var(--sable);margin-left:.4vw;font-family:var(--mono)}

/* En lecture */
.np{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:1.2vw;margin-top:-1vh;
    opacity:0;animation:npin 1.2s ease forwards}
.np[hidden]{display:none}
@keyframes npin{to{opacity:1}}
.np-art{width:4.2vw;height:4.2vw;border-radius:.4vw;object-fit:cover;background:var(--goemon);
        box-shadow:0 .6vh 2vh rgba(0,0,0,.4)}
.np-txt{line-height:1.15}
.np-title{font-family:var(--display);font-weight:500;font-size:1.9vw;letter-spacing:-.02em}
.np-artist{font-family:var(--mono);font-size:1.1vw;letter-spacing:.1em;text-transform:uppercase;color:var(--sable)}
.np-bar{margin-left:auto;width:18vw;height:2px;background:color-mix(in srgb,var(--ecume) 20%,transparent);border-radius:2px}
.np-bar i{display:block;height:100%;width:0;background:var(--sable);border-radius:2px;transition:width 1s linear}
.np-start{grid-column:1/-1;grid-row:2;font-family:var(--mono);font-size:1.2vw;letter-spacing:.08em;color:var(--sable);
          opacity:.8;margin-top:-1vh}
.np-start[hidden]{display:none}
.np-start b{color:var(--ecume)}

/* Héros */
.hero{grid-row:3;align-self:start;margin-top:2vh}
.eyebrow{font-family:var(--mono);font-size:1.5vw;letter-spacing:.14em;text-transform:uppercase;color:var(--sable);margin-bottom:1vh}
.big{
  font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 96;
  font-size:15vw;line-height:.86;letter-spacing:-.045em;color:var(--ecume);
}
.big .unit{font-weight:300;font-size:.38em;letter-spacing:0;margin-left:.08em;color:var(--sable)}
.sub{font-size:2.3vw;font-weight:300;margin-top:2vh;color:color-mix(in srgb,var(--ecume) 78%,transparent)}
.sub b{font-weight:500;color:var(--ecume)}
.hero.swap{animation:swap .9s cubic-bezier(.2,.7,.2,1)}
@keyframes swap{0%{opacity:0;transform:translateY(1.2vh)}100%{opacity:1;transform:none}}

/* Colonne droite : conditions */
.side{grid-row:3;align-self:start;margin-top:2vh;display:grid;gap:3.2vh;min-width:20vw}
.stat{display:grid;grid-template-columns:auto 1fr;gap:0 1.4vw;align-items:baseline;border-left:1px solid var(--wave-line);padding-left:1.4vw}
.stat .k{font-family:var(--mono);font-size:1.15vw;letter-spacing:.14em;text-transform:uppercase;color:var(--sable);grid-column:1/-1;margin-bottom:.4vh}
.stat .v{font-family:var(--display);font-weight:500;font-size:3.6vw;line-height:1;letter-spacing:-.03em}
.stat .u{font-size:1.5vw;font-weight:300;color:color-mix(in srgb,var(--ecume) 70%,transparent)}
.vane{display:inline-block;width:1.6vw;height:1.6vw;vertical-align:middle;margin-left:.6vw;transition:transform 2s ease}

/* Pied : CTMA + caméra */
.foot{grid-column:1/-1;grid-row:4;display:flex;justify-content:space-between;align-items:flex-end;gap:4vw}
.ferry{display:flex;gap:2vw;align-items:baseline;min-width:0;overflow:hidden;
  max-width:calc(100% - 32vw)}   /* la caméra occupe 28vw + l'écart */
.ferry .k{font-family:var(--mono);font-size:1.15vw;letter-spacing:.14em;text-transform:uppercase;color:var(--sable)}
.ferry .v{font-family:var(--display);font-size:2.6vw;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.ferry{flex-wrap:nowrap;min-width:0}
.ferry .v span{font-weight:300;color:color-mix(in srgb,var(--ecume) 70%,transparent)}
.ferry .then{font-family:var(--mono);font-size:1.15vw;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ecume) 55%,transparent);white-space:nowrap}
.ferry .dot{width:.7vw;height:.7vw;border-radius:50%;background:var(--gres);display:inline-block;margin-right:.6vw;box-shadow:0 0 0 .35vw color-mix(in srgb,var(--gres) 30%,transparent)}

.cam{
  width:28vw;aspect-ratio:16/9;border-radius:.6vw;overflow:hidden;position:relative;
  background:#000;box-shadow:0 2vh 6vh rgba(0,0,0,.45);
}
.cam img,.cam iframe,.cam .fake{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.cam .fake{background:
    radial-gradient(120% 60% at 50% 100%,#1b3b45 0%,transparent 60%),
    linear-gradient(180deg,#5d7d8a 0%,#9db2b8 45%,#2b5560 46%,#17343b 100%);
  filter:saturate(.7) contrast(1.05)}
.cam .label{
  position:absolute;left:1.2vw;bottom:1vh;font-family:var(--mono);font-size:1.05vw;letter-spacing:.1em;text-transform:uppercase;
  color:#EAF0EF;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.cam .label::before{content:"";display:inline-block;width:.55vw;height:.55vw;border-radius:50%;background:var(--gres);margin-right:.6vw;animation:blink 2.2s infinite}
@keyframes blink{50%{opacity:.25}}
.cam.fade{animation:camfade 1.2s ease}
@keyframes camfade{0%{opacity:0}100%{opacity:1}}

/* Sources en retard — discret mais honnête */
.stale{
  position:fixed;left:var(--safe);bottom:.8vh;z-index:5;
  font-family:var(--mono);font-size:.95vw;letter-spacing:.08em;
  color:var(--sable);opacity:.75}
.stale[hidden]{display:none}
.stale::before{content:"";display:inline-block;width:.5vw;height:.5vw;border-radius:50%;
  background:var(--sable);margin-right:.6vw;vertical-align:middle}

/* Aide (disparaît) */
.hint{position:fixed;right:1vw;bottom:.6vh;z-index:5;font-family:var(--mono);font-size:.9vw;color:color-mix(in srgb,var(--ecume) 35%,transparent);opacity:1;transition:opacity 2s;}
.hint.gone{opacity:0}

/* ═══ Panneau de configuration ═══════════════════════════════════
   Navigable à la télécommande : tout élément actionnable est
   focusable et son focus est VISIBLE de loin (c'est une TV).
   ═══════════════════════════════════════════════════════════════ */
.panel{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:rgba(6,14,22,.92);backdrop-filter:blur(6px);
  font-family:var(--body);color:#EAF0EF;cursor:auto;
}
.panel[hidden]{display:none}
.panel-box{
  width:min(58vw,900px);max-height:82vh;overflow-y:auto;
  background:#0E2530;border:1px solid rgba(234,240,239,.14);
  border-radius:1vw;padding:3vh 3vw;
}
.panel h2{font-family:var(--display);font-weight:500;font-size:2.6vw;letter-spacing:-.02em;margin-bottom:.4vh}
.panel .lede{font-size:1.3vw;color:#D9C8A8;margin-bottom:3vh;font-weight:300}
.panel label{display:block;font-family:var(--mono);font-size:1.05vw;letter-spacing:.12em;
  text-transform:uppercase;color:#D9C8A8;margin:2.2vh 0 .8vh}
.panel input[type=text],.panel input[type=password],.panel input[type=url]{
  width:100%;font-family:var(--body);font-size:1.5vw;padding:1.2vh 1.2vw;
  background:#0A1B24;color:#EAF0EF;border:2px solid rgba(234,240,239,.2);border-radius:.5vw;
}
.panel input:focus,.panel button:focus,.panel .genre:focus{
  outline:none;border-color:#4F9BA6;box-shadow:0 0 0 .35vh rgba(79,155,166,.55);
}
.panel .row{display:flex;gap:1.2vw;margin-top:3vh;flex-wrap:wrap}
.panel button{
  font-family:var(--body);font-size:1.4vw;font-weight:500;padding:1.2vh 2vw;
  background:#4F9BA6;color:#06131A;border:2px solid transparent;border-radius:.5vw;cursor:pointer;
}
.panel button.ghost{background:transparent;color:#EAF0EF;border-color:rgba(234,240,239,.3)}
.panel button[disabled]{opacity:.5;cursor:default}

.msg{margin-top:2.4vh;font-size:1.25vw;line-height:1.5;padding:1.4vh 1.4vw;border-radius:.5vw;border-left:3px solid}
.msg[hidden]{display:none}
.msg.ok{background:rgba(79,155,166,.14);border-color:#4F9BA6}
.msg.err{background:rgba(181,72,58,.16);border-color:#B5483A}
.msg.info{background:rgba(217,200,168,.12);border-color:#D9C8A8}
.msg code{font-family:var(--mono);font-size:.9em;opacity:.85}

.genres{display:grid;gap:.8vh;margin-top:1.6vh;max-height:34vh;overflow-y:auto}
.genre{
  display:flex;justify-content:space-between;align-items:baseline;gap:1vw;
  font-family:var(--body);font-size:1.4vw;text-align:left;
  padding:1.1vh 1.2vw;background:#0A1B24;color:#EAF0EF;
  border:2px solid rgba(234,240,239,.14);border-radius:.5vw;cursor:pointer;
}
.genre .n{font-family:var(--mono);font-size:1.05vw;color:#D9C8A8}
.genre[aria-selected=true]{border-color:#D9C8A8;background:#12303C}
.genre[aria-selected=true]::after{content:"✓";color:#D9C8A8;margin-left:.6vw}

@media (prefers-reduced-motion:reduce){.hero.swap,.cam.fade{animation:none}}

/* ═══════════════════════════════════════════════════════════════
   Rail de navigation — convention Android TV.
   Replié en icônes, se déplie au focus EN SURIMPRESSION : la mise
   en page ne bouge pas, sinon la mer et le héros sautent à chaque
   déplacement de la télécommande.
   ═══════════════════════════════════════════════════════════════ */
.rail{
  position:fixed;left:0;top:0;bottom:0;z-index:20;
  width:6vw;padding:var(--safe) 0;
  display:flex;flex-direction:column;justify-content:center;gap:1.2vh;
  background:linear-gradient(90deg,rgba(6,14,22,.55) 0%,transparent 100%);
  transition:width .35s cubic-bezier(.2,.7,.2,1),background .35s ease;
  overflow:hidden;
}
.rail:focus-within,.rail.open{
  width:19vw;
  background:linear-gradient(90deg,rgba(6,14,22,.94) 0%,rgba(6,14,22,.86) 70%,transparent 100%);
}
.rail.hidden{opacity:0;pointer-events:none;transition:opacity 1.2s ease}

.rail-item{
  display:flex;align-items:center;gap:1.2vw;flex-shrink:0;
  width:100%;padding:1.4vh 0 1.4vh 1.6vw;
  background:transparent;border:0;border-left:.35vw solid transparent;
  color:color-mix(in srgb,var(--ecume) 62%,transparent);
  font-family:var(--body);font-size:1.5vw;font-weight:400;text-align:left;
  white-space:nowrap;cursor:pointer;
}
.rail-item .ico{
  flex:0 0 auto;width:2.6vw;height:2.6vw;display:grid;place-items:center;
  font-size:1.9vw;line-height:1;
}
.rail-item .lbl{opacity:0;transition:opacity .25s ease}
.rail:focus-within .lbl,.rail.open .lbl{opacity:1}

.rail-item:focus{outline:none}
.rail-item:focus,.rail-item:hover{
  color:var(--ecume);border-left-color:var(--lagune);
  background:linear-gradient(90deg,rgba(79,155,166,.22) 0%,transparent 100%);
}
.rail-item[aria-current=true]{color:var(--ecume);border-left-color:var(--sable)}
.rail-item[aria-current=true] .ico{color:var(--sable)}

/* Le contenu se décale de la largeur du rail replié, jamais de plus. */
.screen{padding-left:calc(var(--safe) + 6vw)}

/* ── Vues ────────────────────────────────────────────────────── */
.view{display:contents}
.view[hidden]{display:none}

/* Les vues de détail partagent une mise en page simple : titre + contenu
   qui défile. Elles occupent toute la grille du .screen. */
.detail{grid-column:1/-1;grid-row:3/5;display:flex;flex-direction:column;min-height:0;margin-top:1vh}
.detail h1{
  font-family:var(--display);font-weight:500;font-size:4.4vw;line-height:1;
  letter-spacing:-.03em;margin-bottom:.6vh;
}
.detail .lede{font-family:var(--mono);font-size:1.2vw;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sable);margin-bottom:3vh}
.detail .body{flex:1;min-height:0;overflow-y:auto;padding-right:1vw}

/* Grille de cartes (météo, marées) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17vw,1fr));gap:2vh 2vw}
.card{
  border-left:1px solid var(--wave-line);padding:0 0 0 1.4vw;
}
.card .k{font-family:var(--mono);font-size:1.1vw;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sable);display:block;margin-bottom:.8vh}
.card .v{font-family:var(--display);font-weight:500;font-size:3.4vw;line-height:1;letter-spacing:-.03em;display:block}
.card .u{font-size:.42em;font-weight:300;color:color-mix(in srgb,var(--ecume) 70%,transparent);margin-left:.15em}
.card .n{font-size:1.3vw;font-weight:300;color:color-mix(in srgb,var(--ecume) 72%,transparent);margin-top:.8vh;display:block}

/* Listes (marées, transport) */
.rows{display:flex;flex-direction:column;gap:.4vh}
.row-item{
  display:grid;grid-template-columns:8vw 1fr auto;gap:1.5vw;align-items:baseline;
  padding:1.4vh 1vw;border-bottom:1px solid color-mix(in srgb,var(--ecume) 10%,transparent);
}
.row-item .t{font-family:var(--display);font-size:2.4vw;font-weight:500;letter-spacing:-.02em}
.row-item .d{font-size:1.5vw;font-weight:300}
.row-item .d b{font-weight:500}
.row-item .m{font-family:var(--mono);font-size:1.15vw;letter-spacing:.08em;text-transform:uppercase;text-align:right}
/* Les symboles d'unité ne se mettent JAMAIS en majuscule : « M » est le
   préfixe méga, « m » est le mètre. */
.row-item .m.unit{text-transform:none;letter-spacing:.04em}
.row-item.past{opacity:.42}
.row-item .m.ontime{color:var(--lagune)}
.row-item .m.delayed{color:var(--sable)}
.row-item .m.cancelled{color:var(--gres)}
.row-item .m.unconfirmed{color:color-mix(in srgb,var(--ecume) 55%,transparent)}

/* Courbe de marée */
.tide-chart{width:100%;height:26vh;display:block;margin:1vh 0 3vh}

/* Grille de caméras */
.cam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(24vw,1fr));gap:2vh 1.5vw}
.cam-tile{position:relative;aspect-ratio:16/9;border-radius:.5vw;overflow:hidden;background:#0A1B24;
  border:1px solid color-mix(in srgb,var(--ecume) 12%,transparent)}
.cam-tile img,.cam-tile iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.cam-tile .cap{position:absolute;left:0;right:0;bottom:0;padding:1.2vh 1vw;
  background:linear-gradient(0deg,rgba(6,14,22,.85),transparent);
  font-family:var(--mono);font-size:1vw;letter-spacing:.08em;text-transform:uppercase}
.cam-tile .cap.err{color:var(--gres)}

/* Diaporama plein cadre */
.slideshow{position:relative;flex:1;min-height:0;border-radius:.6vw;overflow:hidden;background:#08151C}
.slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity 1.6s ease}
.slideshow img.on{opacity:1}
.slideshow .cap{position:absolute;left:0;right:0;bottom:0;padding:1.6vh 1.5vw;
  background:linear-gradient(0deg,rgba(6,14,22,.8),transparent);
  font-family:var(--mono);font-size:1.05vw;letter-spacing:.1em;text-transform:uppercase;color:var(--sable)}

/* Invitation à configurer, quand un service n'est pas branché */
.empty{
  display:grid;place-items:center;text-align:center;flex:1;min-height:0;gap:2vh;
  color:color-mix(in srgb,var(--ecume) 70%,transparent);
}
.empty .big-i{font-size:5vw;opacity:.5}
.empty p{font-size:1.6vw;font-weight:300;max-width:40vw;line-height:1.5}
.empty b{color:var(--ecume);font-weight:500}