/* ---------------------------------------------------------------------------
   KinaLuna — prototype d'onboarding
   Un adulte fatigué, un téléphone, une pièce mal éclairée.
   Un seul accent : la lampe de chevet. Rien d'autre n'est coloré.
--------------------------------------------------------------------------- */

:root {
  --jour: #e9e7f1;
  --encre: #26233f;
  --nuit: #14122b;
  --lait: #f1eef8;
  --lampe: #e9b872;

  /* état courant, bascule jour -> nuit */
  --fond: var(--jour);
  --texte: var(--encre);
  --discret: color-mix(in srgb, var(--encre) 55%, transparent);
  --trait: color-mix(in srgb, var(--encre) 14%, transparent);
  --pose: color-mix(in srgb, var(--encre) 5%, transparent);

  /* quatre tailles, pas une de plus */
  --t-titre: clamp(1.6rem, 6.2vw, 2.15rem);
  --t-texte: 1.0625rem;
  --t-bouton: 1rem;
  --t-petit: 0.8125rem;

  --bascule: 800ms;
  --fondu: 250ms;
  --marge: clamp(1.25rem, 6vw, 2rem);
}

body.nuit {
  --fond: var(--nuit);
  --texte: var(--lait);
  --discret: color-mix(in srgb, var(--lait) 52%, transparent);
  --trait: color-mix(in srgb, var(--lait) 16%, transparent);
  --pose: color-mix(in srgb, var(--lait) 7%, transparent);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-texte);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--bascule) ease-in-out, color var(--bascule) ease-in-out;
  overscroll-behavior: none;
}

h1, h2, .fraunces {
  font-family: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 12;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: var(--t-titre); }
h2 { font-size: calc(var(--t-titre) * 0.78); }

p { margin: 0; }

/* --- ossature ------------------------------------------------------------ */

#app {
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.ecran {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  padding: 5rem var(--marge) 2.5rem;
  max-width: 34rem;
  width: 100%;
  margin: 0 auto;
  animation: entree var(--fondu) ease-out both;
}

.ecran--centre { text-align: center; align-items: center; }

@keyframes entree {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.sous-titre { color: var(--discret); }

/* --- retour --------------------------------------------------------------- */

.retour {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  left: 0.5rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--discret);
  font-size: 1.4rem; line-height: 1;
  border-radius: 50%;
  transition: color 150ms;
}
.retour:hover { color: var(--texte); }

/* --- plein ecran (tournage, ?plein) --------------------------------------- */

/* En miroir de .retour, dans le coin oppose : les deux ne se croisent jamais.
   Tres discret et sans fond : il apparait dans le cadre pendant qu'on filme,
   autant qu'il n'y attire pas l'oeil. */
.plein-ecran {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top));
  right: 0.5rem;
  z-index: 50;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--discret);
  opacity: 0.45;
  border-radius: 50%;
  transition: opacity 150ms, color 150ms;
}
.plein-ecran svg { width: 18px; height: 18px; }
.plein-ecran:hover, .plein-ecran:focus-visible { opacity: 1; color: var(--texte); }

.plein-ecran__note {
  position: fixed;
  top: calc(max(0.75rem, env(safe-area-inset-top)) + 46px);
  right: 0.5rem;
  z-index: 50;
  max-width: min(20rem, calc(100vw - 1rem));
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 0.6rem;
  background: var(--texte);
  color: var(--fond);
  font-size: 0.78rem; line-height: 1.35;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.plein-ecran__note--visible { opacity: 0.94; transform: none; }

/* --- actions -------------------------------------------------------------- */

.bouton {
  font: inherit;
  font-size: var(--t-bouton);
  font-weight: 500;
  min-height: 52px;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--lampe);
  color: #2b2109;
  cursor: pointer;
  width: 100%;
  transition: opacity 180ms, transform 180ms;
}
.bouton:active { transform: scale(0.985); }
.bouton:disabled { opacity: 0.32; cursor: default; }

.lien {
  background: none; border: 0; padding: 0.6rem 0;
  font: inherit; font-size: var(--t-petit);
  color: var(--discret); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.lien:hover { color: var(--texte); }

/* --- pastilles ------------------------------------------------------------ */

.pastilles { display: flex; flex-direction: column; gap: 0.55rem; }
.pastilles--grille {
  flex-direction: row; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-start;
}
/* Deux options côte à côte : garçon / fille */
.pastilles--paire { flex-direction: row; gap: 0.6rem; }
.pastilles--paire .pastille { flex: 1; justify-content: center; text-align: center; }

.pastille {
  font: inherit;
  min-height: 52px;
  padding: 0.8rem 1.15rem;
  text-align: left;
  background: var(--pose);
  color: var(--texte);
  border: 1px solid var(--trait);
  border-radius: 14px;
  cursor: pointer;
  display: flex; align-items: center; gap: 0.6rem;
  transition: border-color 160ms, background-color 160ms;
}
.pastille:hover { border-color: color-mix(in srgb, var(--texte) 30%, transparent); }

/* Sélection : un trait doublé par une ombre interne plutôt qu'une bordure plus
   épaisse, qui décalerait le texte d'un pixel au moment du tap. */
.pastille[aria-pressed="true"] {
  border-color: var(--lampe);
  background: color-mix(in srgb, var(--lampe) 20%, transparent);
  box-shadow: inset 0 0 0 1px var(--lampe);
  font-weight: 500;
}
.pastille--age {
  min-width: 52px; width: 52px; height: 52px;
  justify-content: center; padding: 0; border-radius: 50%;
  font-size: 1.05rem;
}
.pastille--surprise { font-style: italic; color: var(--discret); }

/* Personnages : l'étiquette et le prénom sur la même ligne. */
.pastilles--perso .ligne { display: flex; align-items: stretch; gap: 0.5rem; }
.pastilles--perso .pastille { flex: 1; }
.pastilles--perso .ligne--nommee .pastille { flex: 1 1 55%; }

/* --- champs --------------------------------------------------------------- */

.champ {
  font: inherit;
  font-size: 1.15rem;
  width: 100%;
  padding: 0.9rem 0.25rem;
  background: none;
  color: var(--texte);
  border: 0;
  border-bottom: 1.5px solid var(--trait);
  border-radius: 0;
  transition: border-color 200ms;
}
.champ:focus { outline: none; border-bottom-color: var(--lampe); }
.champ::placeholder { color: color-mix(in srgb, var(--texte) 32%, transparent); }

/* annotation manuscrite : le prénom d'un personnage, à côté de son étiquette */
.champ--inline {
  flex: 1 1 45%;
  min-width: 5.5rem;
  width: auto;
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  min-height: 52px;
  background: var(--pose);
  border: 1px dashed var(--trait);
  border-radius: 14px;
  transition: border-color 200ms;
}
.champ--inline:focus { border-color: var(--lampe); border-style: solid; }

.erreur { color: var(--texte); font-size: var(--t-petit); }
.finalite { color: var(--discret); font-size: var(--t-petit); line-height: 1.5; }

/* --- la lueur -------------------------------------------------------------
   Un anneau fin, un halo qui déborde, un cœur diffus au centre.
   Tout est piloté par --eclat : le mode « voix » n'a qu'à faire varier
   cette seule valeur pour que l'ensemble respire avec la narration.
--------------------------------------------------------------------------- */

.lueur {
  --taille: min(58vw, 210px);
  --eclat: 0.85;
  width: var(--taille);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  position: relative;
}
.lueur--petite { --taille: 64px; }

.lueur__corps {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
}

/* le débordement lumineux, très large et très doux */
.lueur__halo {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--lampe) 26%, transparent) 0%,
    color-mix(in srgb, var(--lampe) 13%, transparent) 42%,
    transparent 68%
  );
  opacity: var(--eclat);
}

/* l'anneau lui-même : un trait, et sa lumière de part et d'autre */
.lueur__anneau {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--lampe) 90%, transparent);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--lampe) 55%, transparent),
    0 0 46px color-mix(in srgb, var(--lampe) 26%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--lampe) 28%, transparent);
  opacity: var(--eclat);
}

/* un second anneau, décalé et plus discret : ça donne de la profondeur */
.lueur__anneau--fin {
  inset: 2%;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--lampe) 34%, transparent);
  box-shadow: 0 0 26px color-mix(in srgb, var(--lampe) 18%, transparent);
  opacity: calc(var(--eclat) * 0.7);
}

/* le cœur, jamais net : c'est une lueur, pas une bille */
.lueur__coeur {
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    color-mix(in srgb, var(--lampe) 80%, transparent) 0%,
    color-mix(in srgb, var(--lampe) 38%, transparent) 55%,
    transparent 78%
  );
  opacity: var(--eclat);
}

/* --- progression ---------------------------------------------------------- */

.progression {
  height: 2px;
  width: 100%;
  background: var(--trait);
  border-radius: 2px;
  overflow: hidden;
}
.progression__barre {
  height: 100%;
  width: 0%;
  background: var(--lampe);
  transition: width 320ms linear;
}

/* --- l'attente ------------------------------------------------------------ */

/* La barre de fabrication : un peu plus épaisse que celle de l'écoute, et sans
   transition CSS — sa position est peinte image par image en JavaScript, une
   interpolation par-dessus une autre donnerait un flottement. */
.progression--attente {
  height: 3px;
  border-radius: 999px;
  background: var(--trait);
}
.progression--attente .progression__barre {
  transition: none;
  border-radius: 999px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--lampe) 60%, transparent);
}

.fil-attente {
  min-height: 3.2em;
  transition: opacity 300ms ease-out;
}

/* Ce qui vient d'arriver se pose au lieu d'apparaître : le flou qui se lève
   dit « c'est nouveau » sans qu'on ait à l'écrire. */
@keyframes revele {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* --- le lecteur ----------------------------------------------------------- */

.ecran--lecteur { gap: 1.25rem; }

.minutage {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: -0.9rem;
  color: var(--discret);
  font-size: var(--t-petit);
  font-variant-numeric: tabular-nums;
}

.commandes {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.bouton--lecture { flex: 1; }

.commande {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--pose);
  color: var(--texte);
  border: 1px solid var(--trait);
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms, opacity 160ms;
}
.commande:hover:not(:disabled) { border-color: color-mix(in srgb, var(--texte) 30%, transparent); }
.commande:disabled { opacity: 0.28; cursor: default; }

/* --- pied ----------------------------------------------------------------- */

.pied {
  padding: 1.5rem var(--marge) max(1.5rem, env(safe-area-inset-bottom));
  text-align: center;
  display: flex; gap: 1.25rem; justify-content: center;
}
.pied a { color: var(--discret); font-size: var(--t-petit); text-decoration: none; }
.pied a:hover { text-decoration: underline; }

/* Sur l'écran de fin, ce bloc n'est plus une note de bas de page : c'est ce
   qu'on est venu lire. Puces à la couleur de la lampe, respiration entre les
   lignes, texte un peu moins effacé que le reste. */
.promesses { border-top: 1px solid var(--trait); padding-top: 1.4rem; text-align: left; width: 100%; }
.promesses h2 { font-size: 1.05rem; margin-bottom: 0.9rem; }
.promesses ul { margin: 0; padding-left: 0; list-style: none; }
.promesses li {
  position: relative;
  margin-bottom: 0.7rem;
  padding-left: 1.15rem;
  color: color-mix(in srgb, var(--texte) 78%, transparent);
  line-height: 1.5;
}
.promesses li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lampe);
}

/* --- accessibilité -------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--lampe);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Le desktop doit être lisible, pas beau. */
@media (min-width: 40rem) {
  .ecran { padding-top: 6rem; }
}