/* OTOHIME — un voile d'eau, le temps qu'il faut.

   Direction : rien de géométrique, rien de concentrique, rien qui ressemble à
   une horloge. Un champ de couleur qui dérive, une goutte qui se déforme sans
   jamais se répéter. Tout le chromatisme vient de JavaScript : les palettes
   posent leurs valeurs sur ces variables, la feuille ne fait que les employer.

   La couleur n'est pas un décor ici : elle se règle. Voir `LUMIERES` dans
   app.js pour les palettes et leurs références. */

:root{
  /* Valeurs de départ, écrasées par la palette au chargement. */
  --texte:#1a2422;
  --brume:#4d5f5d;
  --brume-faible:#8b9997;
  --lisere:rgba(26,36,34,.13);
  --lisere-fort:rgba(26,36,34,.28);
  --surface:rgba(255,255,255,.5);
  --surface-2:rgba(255,255,255,.24);
  --creux:rgba(26,36,34,.07);
  --ombre:rgba(40,60,58,.14);
  --chair-1:#ffffff;
  --chair-2:#e6f0ea;
  --chair-3:#c2d8d2;
  --liseré:rgba(255,255,255,.62);
  --coeur:#ffffff;
  --voile-feuille:rgba(250,250,248,.9);
  --grain-mode:multiply;
  --grain-op:.05;

  --safe-t:env(safe-area-inset-top);
  --safe-b:env(safe-area-inset-bottom);
  --lisser:cubic-bezier(.4,.14,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  background:var(--papier,#f2ede6);
  color:var(--texte);
  overflow:hidden;overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transition:color 1.6s var(--lisser),background 2.4s var(--lisser);
}

/* ── LE CHAMP ──────────────────────────────────────────────────────────────
   Six sources de couleur dérivent sur un canvas de 64 × 128 pixels, que le
   navigateur étire en plein écran. L'interpolation bilinéaire de l'étirement
   fait tout le dégradé, pour presque rien : 8 192 pixels calculés par image
   au lieu de plusieurs centaines de milliers. Le flou finit de lisser, le
   grain casse les bandes que produit un affichage sur huit bits. */
.champ{position:fixed;inset:-14%;width:128%;height:128%;z-index:0;
  pointer-events:none;filter:blur(18px) saturate(1.06);
  transition:opacity 2.4s var(--lisser)}

/* Le grain n'est pas une texture décorative : c'est ce qui dissout les bandes
   qu'un dégradé affiche toujours sur huit bits. Il est posé en `overlay` et
   jamais en `multiply` : une multiplication détruit le tramage au lieu de
   l'ajouter. Dans les noirs, un pas de quantification double la luminance
   émise, c'est là que le grain compte le plus, d'où l'opacité doublée. */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--grain-mode);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Pénombre : au bout de quelques secondes, l'interface s'efface. Il ne reste
   que la lumière et la forme, c'est-à-dire la seule chose qu'on soit venu
   regarder. Rien de lisible par-dessus l'épaule, et rien à consommer.
   La luminosité, elle, ne baisse pas ici : c'est la palette qui s'en charge,
   et la nocturne est déjà cent fois plus sombre qu'une claire. */
body.penombre .entete,body.penombre .pieds,body.penombre .etat{opacity:.1}

/* ── scène ── */
.scene{position:fixed;top:0;left:0;right:0;height:100dvh;height:var(--h,100dvh);z-index:2;
  display:flex;flex-direction:column;
  padding:calc(var(--safe-t) + 14px) 22px calc(var(--safe-b) + 14px)}

.entete{flex:none;display:flex;align-items:center;justify-content:center;position:relative;
  height:38px;transition:opacity 1.4s var(--lisser)}
.marque{font-weight:200;font-size:19px;letter-spacing:.52em;text-indent:.52em;
  color:var(--texte);opacity:.72;transition:color 1.6s var(--lisser)}
.reglages-ouvre{position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border:none;background:none;cursor:pointer;color:var(--brume-faible);
  display:grid;place-items:center;border-radius:50%;transition:color .25s}
.reglages-ouvre svg{width:21px;height:21px}
.reglages-ouvre:active{color:var(--texte)}

/* ── LA FORME ──────────────────────────────────────────────────────────────
   Le contour est recalculé à chaque image : rayon de base plus la somme de
   quatre ondulations de périodes irrationnelles entre elles. Elles ne se
   remettent jamais en phase, donc la silhouette ne repasse jamais deux fois
   par la même. C'est la même idée que pour le son. */
.forme-zone{flex:1;min-height:0;display:grid;place-items:center;padding:8px 0}
.forme{position:relative;border:none;padding:0;background:none;cursor:pointer;
  width:min(84vw,min(54dvh,360px));aspect-ratio:1;display:grid;place-items:center;
  transition:transform .55s var(--lisser);-webkit-tap-highlight-color:transparent}
.forme:active{transform:scale(.972)}
.silhouette{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lueur{fill:var(--chair-2);opacity:.36;transition:opacity 1.2s var(--lisser)}
.forme.coule .lueur{opacity:.62}
.corps{filter:drop-shadow(0 14px 34px var(--ombre))}
/* La nuit, une ombre portée devient une tache sale sur un fond sombre : la
   lueur derrière la forme suffit à la détacher. */
:root[data-nuit] .corps{filter:none}
:root[data-nuit] .lueur{opacity:.22}
:root[data-nuit] .forme.coule .lueur{opacity:.4}
.liseré{fill:none;stroke:var(--liseré);stroke-width:1.1;opacity:.85}

/* le cœur : le seul point plein, immobile. Il se retire quand ça coule. */
.coeur{position:relative;z-index:3;width:11px;height:11px;border-radius:50%;
  background:var(--coeur);opacity:.9;
  box-shadow:0 0 14px 2px color-mix(in srgb, var(--coeur) 60%, transparent);
  transition:transform .8s var(--lisser),opacity .8s var(--lisser)}
.forme.coule .coeur{transform:scale(.4);opacity:.35}

/* ── état ── */
.etat{flex:none;text-align:center;min-height:20px;margin-bottom:14px;
  font-size:12.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--brume-faible);font-weight:500;font-variant-numeric:tabular-nums;
  transition:color .8s var(--lisser),opacity 1.4s var(--lisser)}
.etat.actif{color:var(--brume)}

/* ── pieds ── */
.pieds{flex:none;display:flex;gap:7px;transition:opacity 1.4s var(--lisser)}
.pied{flex:1;min-width:0;border:none;cursor:pointer;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--lisere);
  border-radius:17px;padding:12px 8px 13px;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .2s var(--lisser),box-shadow .25s,background 1.6s var(--lisser)}
.pied:active{transform:scale(.965);box-shadow:inset 0 0 0 1px var(--lisere-fort)}
.pied-cle{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brume-faible);font-weight:600}
.pied-val{font-size:14.5px;font-weight:400;letter-spacing:.02em;color:var(--texte);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ── FEUILLE ───────────────────────────────────────────────────────────────*/
.feuille{position:fixed;inset:0;z-index:9;display:flex;align-items:flex-end}
.feuille[hidden]{display:none}
.feuille-fond{position:absolute;inset:0;background:var(--ombre);
  opacity:0;transition:opacity .32s var(--lisser)}
.feuille.ouverte .feuille-fond{opacity:1}
.feuille-corps{position:relative;width:100%;max-height:90%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-radius:28px 28px 0 0;padding:12px 22px calc(var(--safe-b) + 22px);
  display:flex;flex-direction:column;gap:14px;
  background:var(--voile-feuille);
  box-shadow:0 -14px 40px var(--ombre),inset 0 1px 0 var(--lisere);
  transform:translateY(100%);transition:transform .34s var(--lisser)}
.feuille.ouverte .feuille-corps{transform:translateY(0)}
.poignee{width:38px;height:4px;border-radius:3px;background:var(--brume-faible);opacity:.4;align-self:center}
.feuille-fermer{position:absolute;top:14px;right:16px;width:36px;height:36px;border:none;background:none;
  color:var(--brume-faible);cursor:pointer;border-radius:50%;display:grid;place-items:center}
.feuille-fermer svg{width:20px;height:20px}
.feuille-fermer:active{background:var(--creux)}
.feuille-titre{font-size:23px;font-weight:300;letter-spacing:.1em;color:var(--texte);margin-top:2px}
.feuille-chapo{font-size:13px;line-height:1.6;color:var(--brume);font-weight:400;margin-top:-6px}
.feuille-contenu{display:flex;flex-direction:column;gap:9px}

.option{width:100%;text-align:left;border:none;cursor:pointer;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--lisere);
  border-radius:17px;padding:14px 15px;display:flex;align-items:center;gap:13px;
  transition:background .22s,box-shadow .22s,transform .18s var(--lisser)}
.option:active{transform:scale(.985)}
.option.on{background:var(--surface);box-shadow:inset 0 0 0 1px var(--lisere-fort)}
.option-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.option-nom{font-size:15.5px;font-weight:500;letter-spacing:.02em;color:var(--texte)}
.option-desc{font-size:12px;line-height:1.45;color:var(--brume-faible);font-weight:400}
.option.on .option-desc{color:var(--brume)}
.option-marque{flex:none;width:18px;height:18px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--lisere-fort);position:relative}
.option.on .option-marque::after{content:"";position:absolute;inset:4px;border-radius:50%;
  background:var(--texte);opacity:.85}
/* pastille de palette : trois couleurs de la lumière, en dégradé */
.option-lueur{flex:none;width:26px;height:26px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--lisere-fort),0 2px 8px var(--ombre)}

.rangee{display:flex;gap:5px;background:var(--creux);border-radius:15px;padding:5px}
.rangee button{flex:1;min-width:0;border:none;background:transparent;cursor:pointer;
  color:var(--brume-faible);font-size:13px;font-weight:500;padding:11px 4px;border-radius:11px;
  letter-spacing:.02em;transition:background .22s,color .22s}
.rangee button.on{background:var(--surface);color:var(--texte);box-shadow:0 1px 4px var(--ombre)}
.rangee button:active{transform:scale(.96)}

.niveau{display:flex;flex-direction:column;gap:9px}
.niveau-tete{display:flex;align-items:baseline;justify-content:space-between}
.niveau-nom{font-size:14px;color:var(--texte);font-weight:500}
.niveau-val{font-size:13px;color:var(--brume);font-variant-numeric:tabular-nums;letter-spacing:.04em}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:34px;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:4px;
  background:linear-gradient(90deg,var(--texte) var(--pct,50%),var(--creux) var(--pct,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  margin-top:-10px;background:var(--chair-1);
  box-shadow:0 2px 10px var(--ombre),inset 0 0 0 1px var(--lisere-fort)}
input[type=range]::-moz-range-track{height:6px;border-radius:4px;background:var(--creux)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border:none;border-radius:50%;
  background:var(--chair-1);box-shadow:0 2px 10px var(--ombre)}

.note{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--lisere);
  border-radius:17px;padding:15px 16px;display:flex;flex-direction:column;gap:7px}
.note h3{font-size:14.5px;font-weight:600;letter-spacing:.03em;color:var(--texte)}
.note p{font-size:13px;line-height:1.62;color:var(--brume);font-weight:400}

.separateur{display:flex;align-items:center;gap:10px;margin:5px 0 -1px;
  color:var(--brume-faible);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.separateur::before,.separateur::after{content:"";flex:1;height:1px;background:var(--lisere)}

.bouton{border:none;cursor:pointer;width:100%;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--lisere-fort);color:var(--texte);
  font-size:14.5px;font-weight:500;letter-spacing:.05em;padding:15px 18px;border-radius:40px;
  transition:transform .2s var(--lisser),background .2s}
.bouton:active{transform:scale(.97)}
.bouton small{display:block;font-size:11.5px;color:var(--brume-faible);letter-spacing:.02em;
  margin-top:3px;font-weight:400}

/* Mouvement réduit : plus aucune dérive de position ni d'échelle, seulement
   une variation d'opacité et de teinte. Le champ reste, il cesse de bouger. */
@media (prefers-reduced-motion:reduce){
  .forme{transition:none}
  .champ{filter:blur(30px)}
}

@media (min-height:800px){
  .marque{font-size:21px}
  .etat{margin-bottom:18px}
}