/* Socle visuel commun aux trois maquettes — charte du site */
/* ══ PALETTE ET TYPOGRAPHIE — recopiées à l'identique du site
   (WOW_02_la_barre.html, bloc :root). Ne pas les redéfinir ici :
   toute divergence se voit à l'écran. C'est --dim qui avait dérivé,
   d'un crème chaud vers un gris bleuté froid — d'où le sentiment
   que le cap et le pied n'étaient pas de la même famille que la liste. */
:root{
  --void:#04101C;--navy:#0A2540;--sand:#C9B79A;--cream:#F5ECDD;
  --copper:#B08A4A;--copper-hot:#E0B057;
  --dim:rgba(245,236,221,.44);--line:rgba(201,183,154,.18);
  /* Direction E — « Le journal de bord » : la lettre des gazettes maritimes.
     --d titrage et chiffres (une seule graisse, pas d'italique)
     --n accroches, étiquettes, italiques de titrage
     --s texte courant */
  --d:'Fjalla One','Archivo Narrow',Impact,sans-serif;
  --n:'Archivo Narrow','Fjalla One',sans-serif;
  --s:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --e:cubic-bezier(.76,0,.24,1);--eo:cubic-bezier(.165,.84,.44,1);
  --pad:clamp(14px,3vw,40px);
  --heel:0deg;      /* gîte, pilotée par la barre */
  --lit:0;          /* 0 → 1 : proximité du bon plein */
  --rough:1;        /* 0 = mer calme (bon plein) → 1 = gros temps */}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--void);color:var(--cream);
  font-family:var(--s);overflow:hidden;cursor:crosshair}
#sea{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.voile{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 30%,rgba(4,16,28,calc(.35 + var(--rough)*.35)) 100%)}

/* bandeau d'état — commun */
.hud{position:fixed;z-index:40;font-family:var(--n);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);pointer-events:none}
.hud--tl{top:22px;left:26px}
.hud--tr{top:22px;right:26px;text-align:right}
.hud--bl{bottom:22px;left:26px}
.hud b{font-weight:700;color:color-mix(in oklab,var(--sand),var(--copper-hot) calc(var(--lit)*100%))}
.jauge{width:130px;height:2px;background:rgba(201,194,180,.16);margin-top:7px;overflow:hidden}
.jauge i{display:block;height:100%;background:var(--copper-hot);width:0%;transition:width .18s linear}
.marque{font-family:var(--d);font-size:15px;letter-spacing:.22em;color:var(--cream)}
.aide{position:fixed;
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
  right:calc(26px + env(safe-area-inset-right,0px));z-index:40;font-family:var(--n);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-align:right;pointer-events:none;
  opacity:calc(1 - var(--lit)*.55)}

/* porte du CV — discrète, commune aux trois */
.cv{position:fixed;z-index:45;font-family:var(--n);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s}
.cv:hover{color:var(--copper-hot);border-color:var(--copper)}

/* lecteur plein écran — commun */
.scene{position:fixed;inset:0;z-index:90;background:rgba(4,16,28,.94);display:none;
  align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.scene.on{display:flex}
.scene video{width:min(92vw,1500px);max-height:88vh;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.scene .fermer{position:absolute;
  top:calc(24px + env(safe-area-inset-top,0px));
  right:calc(30px + env(safe-area-inset-right,0px));font-family:var(--n);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sand);cursor:pointer;background:none;border:0}

/* le film reste centré et entier quel que soit le cadre */
.scene{padding:24px}
.scene video{object-fit:contain;display:block}

/* ══ RÈGLE TYPOGRAPHIQUE — celle du site :
   « .leg,.logbook__t,.crs__d,.crs__f,.read__l,.lang a{font-family:var(--n);font-weight:600} »
   Toute étiquette, légende ou mention est en Archivo Narrow graisse 600.
   Seuls les NOMS (titres) sont en Fjalla One. Aucune autre famille. */
#cap b, #cap #meteo, #pied, #pied .legal, #liste .cvl, #retour{
  font-family:var(--n);font-weight:600}
#liste .t{font-family:var(--d);font-weight:400}