/* ==========================================================================
   BASE : tokens, fond, HUD (encart, calendrier, grand nom), guide,
   commandes, chargement, balayage de transition.
   ========================================================================== */

:root{
  --abyss:#040a2c;      /* fond des profondeurs */
  --deep:#0b23a8;       /* bleu sombre */
  --tide:#1f63ff;       /* bleu électrique */
  --foam:#8ff0ff;       /* écume */
  --cyan:#4fdcff;       /* texte du menu non sélectionné */
  --cyan-band:#86e6f8;  /* bandeau des sous-titres */
  --paper:#f4f7ff;      /* blanc de la lame */
  --ink:#05060f;        /* noir */
  --grey:#8b8e9c;       /* gris du grand nom */
  --blade:#ff1238;      /* rouge de sélection */
  --magenta:#ff4fc0;    /* éclat rose */

  --panel:rgba(6,11,36,.86);
  --veil:rgba(4,10,44,.9);
  --veil-soft:rgba(4,10,44,.5);
  --veil-blue:rgba(9,36,150,.82);
  --veil-mono:rgba(16,16,22,.92);
  --veil-mono-soft:rgba(16,16,22,.55);
  --line:rgba(143,240,255,.3);
  --line-faint:rgba(143,240,255,.15);
  --ghost:rgba(210,220,245,.13);
  --field:rgba(143,240,255,.07);
  --grid:rgba(255,255,255,.13);
  --shadow:rgba(4,10,44,.65);

  --f-display:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --ease-out:cubic-bezier(.2,.9,.3,1);
  --gutter:clamp(16px,3vw,44px);
  color-scheme:dark;
}

/* L'Heure Sombre : entre 0 h et 1 h, ou avec #heure-sombre dans l'adresse */
:root.dark-hour{
  --abyss:#020f08; --deep:#0b3d24; --tide:#2a9c5c; --foam:#c6ffb0;
  --cyan:#a9ff8a; --cyan-band:#b9f5a3; --magenta:#e4ff5c;
  --veil:rgba(2,16,9,.9); --veil-soft:rgba(2,16,9,.5); --veil-blue:rgba(8,48,28,.86);
  --panel:rgba(3,18,10,.88); --line:rgba(198,255,176,.28); --line-faint:rgba(198,255,176,.14);
  --field:rgba(198,255,176,.07); --shadow:rgba(2,16,9,.65);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--abyss);color:var(--paper);font:400 16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--foam);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.app{position:fixed;inset:0;overflow:hidden;
  background:
    radial-gradient(circle at 78% 34%, var(--paper) 0 5%, var(--line) 5.5%, transparent 20%),
    linear-gradient(to top, var(--abyss), var(--deep) 62%, var(--tide));}
.sea{position:absolute;inset:0;width:100%;height:100%;display:block}
.no-gl .sea{display:none}

/* ---------- Grand nom vertical (bord gauche) ---------- */
.bigname{position:absolute;z-index:1;inset:0 auto 0 0;width:42vw;overflow:hidden;pointer-events:none}
.bigname span{position:absolute;left:-.14em;bottom:-.04em;writing-mode:vertical-rl;white-space:nowrap;
  font:italic 900 min(19vw,36vh)/.8 var(--f-display);letter-spacing:-.03em;text-transform:uppercase}
.bn-main{color:var(--ink);transform:rotate(180deg)}
.bn-ghost{color:var(--grey);opacity:.75;transform:rotate(180deg) translate(-.09em,.2em)}

/* ---------- HUD : encart d'identité + calendrier ---------- */
.hud{position:absolute;inset:0;z-index:4;pointer-events:none}
.idbox{position:absolute;top:calc(env(safe-area-inset-top,0px) + clamp(16px,4.5vh,52px));left:clamp(64px,9vw,170px);
  padding:.45rem 2.2rem .55rem .85rem;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.id-name{margin:0;font:italic 500 clamp(1.7rem,2.7vw,2.5rem)/1 var(--f-display);letter-spacing:-.01em}
.id-role{margin:.2rem 0 0;font:italic 700 .82rem/1 var(--f-display);letter-spacing:.02em}

.cal{position:absolute;top:calc(env(safe-area-inset-top,0px) + clamp(16px,3.4vh,36px));right:var(--gutter);
  display:grid;justify-items:end;gap:.25rem;transform:rotate(-4deg);transform-origin:right top}
.cal-top{display:flex;align-items:flex-end;gap:.4rem}
.cal-date{font:italic 900 clamp(2.6rem,5.2vw,4rem)/.8 var(--f-display);letter-spacing:-.01em;color:var(--paper);
  text-shadow:.05em .05em 0 var(--deep);font-variant-numeric:tabular-nums;transform:skewX(-6deg)}
.cal-day{font:italic 800 clamp(1.1rem,2vw,1.45rem)/1.15 var(--f-display);letter-spacing:.06em;background:var(--paper);color:var(--ink);
  padding:0 .5em;clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);margin-bottom:.1em}
.cal-day.is-sun{color:var(--blade)}
.cal-day.is-sat{color:var(--tide)}
.cal-moonrow{display:flex;align-items:center;gap:.45rem}
.cal-moon{width:1.5rem;height:1.5rem}
.moon-dark{fill:var(--ink);stroke:var(--foam);stroke-width:1.2}
.moon-lit{fill:var(--paper)}
.cal-phase{font:italic 700 .95rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--foam);text-shadow:0 1px 0 var(--shadow)}
.cal-slot{font:italic 800 1.05rem/1.2 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:var(--foam);padding:.05em .6em .05em .9em;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}
.dark-hour .cal-slot{animation:pulse 1.6s ease-in-out infinite}

/* ---------- Guide (bas droite) ---------- */
.guide{position:absolute;z-index:30;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + clamp(52px,8vh,74px));
  display:grid;justify-items:start;padding-right:var(--gutter);max-width:min(36rem,92vw);pointer-events:none}
.guide-text{margin:0;font:italic 700 clamp(1.35rem,2.3vw,2.2rem)/1 var(--f-display);letter-spacing:-.01em;color:var(--paper);
  text-shadow:0 2px 0 var(--shadow);transform:skewX(-6deg)}
.guide-row{display:flex;align-items:flex-end;gap:.35rem;width:calc(100% + var(--gutter));margin-top:.1rem}
.guide-label{font:italic 700 .78rem/1 var(--f-display);letter-spacing:.02em;color:var(--paper)}
.guide-row::after{content:"";flex:1;height:2px;background:var(--paper);margin-bottom:.12rem}
.guide.swap .guide-text{animation:guideIn .25s var(--ease-out)}

/* ---------- Commandes ---------- */
.prompts{position:absolute;z-index:30;right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(12px,2.4vh,24px));
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.3rem 1rem}
.pr{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .1rem;background:none;border:0;cursor:pointer;
  font:italic 700 clamp(1.05rem,1.6vw,1.45rem)/1 var(--f-display);color:var(--paper);text-shadow:0 1px 0 var(--shadow)}
.key{display:inline-grid;place-items:center;min-width:1.55em;height:1.45em;padding:0 .35em;border:2px solid currentColor;border-radius:4px;
  font:700 .62em/1 var(--f-body);font-style:normal;letter-spacing:.02em;text-shadow:none}
.snd{position:absolute;z-index:30;left:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(12px,2.4vh,24px));
  display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .1rem;background:none;border:0;cursor:pointer;
  font:italic 800 .9rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);text-shadow:0 1px 0 var(--shadow)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;height:100%;background:var(--foam);transform-origin:bottom;transform:scaleY(.25)}
.snd[aria-pressed="true"] .eq i{animation:eq 1s ease-in-out infinite}
.snd[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.35s}
.snd[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-.7s}
@media (hover:none){
  .pr .key{display:none}
  .pr[data-act="confirm"],.pr[data-act="cycle"]{display:none}
}

/* ---------- Chargement ---------- */
.loader{position:fixed;inset:0;z-index:100;background-color:var(--tide);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:30px 30px}
.loader.out{animation:ldOut .8s ease forwards;pointer-events:none}
.loader.out .ld-box{opacity:0;transition:opacity .08s}
.ld-box{position:absolute;right:clamp(16px,6vw,100px);bottom:clamp(36px,11vh,120px);display:grid;justify-items:end;gap:.7rem}
.ld-text{font:italic 900 clamp(1.9rem,4.2vw,3rem)/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase;color:var(--paper);text-shadow:.06em .06em 0 var(--deep)}
.ld-text span{animation:blink 1.1s steps(1) infinite}
.ld-text span:nth-child(2){animation-delay:.18s}
.ld-text span:nth-child(3){animation-delay:.36s}
.ld-row{display:flex;align-items:center;gap:.9rem}
.ld-bar{width:clamp(150px,19vw,250px);height:7px;background:var(--shadow);transform:skewX(-24deg);overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:var(--paper)}
.ld-pct{min-width:3.4ch;text-align:right;font:italic 900 1.7rem/1 var(--f-display);color:var(--paper);font-variant-numeric:tabular-nums}

/* ---------- Balayage de transition ---------- */
.wipe{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.wipe i{position:absolute;top:-35%;bottom:-35%;left:-35vw;width:170vw;transform:translateX(-120%) skewX(-18deg)}
.wipe i:nth-child(1){background:var(--tide);--d:0ms}
.wipe i:nth-child(2){background:var(--paper);--d:40ms}
.wipe i:nth-child(3){background:var(--deep);--d:80ms}
.wipe.in i{transform:translateX(0) skewX(-18deg);transition:transform .22s cubic-bezier(.7,0,.4,1) var(--d)}
.wipe.out i{transform:translateX(120%) skewX(-18deg);transition:transform .26s cubic-bezier(.6,0,.3,1) var(--d)}
.wipe.out i:nth-child(1){--d:80ms}
.wipe.out i:nth-child(3){--d:0ms}
.wipe.rev{transform:scaleX(-1)}
.wipe.reset i{transition:none!important}

/* ---------- Animations partagées ---------- */
@keyframes ldOut{0%{background-color:var(--tide)}22%{background-color:var(--paper);background-image:none}55%{opacity:1;background-color:var(--paper);background-image:none}100%{opacity:0;background-color:var(--paper);background-image:none}}
@keyframes guideIn{from{opacity:0;transform:translateX(18px) skewX(-6deg)}to{opacity:1;transform:skewX(-6deg)}}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{50%{opacity:.55}}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes rowIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes pdIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important}
}

@media (max-width:640px){
  .bigname span{font-size:min(30vw,26vh)}
  .idbox{left:clamp(56px,16vw,90px);padding:.35rem 1.2rem .4rem .7rem}
  .id-name{font-size:1.45rem}
  .cal-date{font-size:2.3rem}
  .cal-phase{font-size:.8rem}
  .cal-slot{font-size:.9rem}
  .guide-text{font-size:1.2rem}
  .on-screen .guide{display:none}
}