/* BO de poche — mobile d'abord (390 px), zones tactiles de 44 px minimum.
   Toutes les couleurs sont des variables, redéfinies sous [data-theme="nuit"]. */

/* --- Polices locales (SIL OFL, voir fonts/OFL-*.txt) ------------------ */

@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url("fonts/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 500; font-display: swap; src: url("fonts/nunito-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url("fonts/nunito-latin-700-normal.woff2") format("woff2"); }

:root {
  --fond: #E3EEE2;
  --surface: #FFFFFF;
  --texte: #263A2F;
  --texte-doux: #4E6656;
  --accent: #F4A587;
  --bouton: #263A2F;
  --bouton-texte: #FFFFFF;
  --succes: #7FB58E;
  --ligne: color-mix(in srgb, var(--texte) 12%, transparent);
  --ombre: 0 6px 20px color-mix(in srgb, var(--texte) 10%, transparent);

  /* Fenêtre de train */
  --ciel-haut: #BFDCEB;
  --ciel-bas: #F7E6CC;
  --astre: #FFE7A3;
  --colline-loin: #A9C79A;
  --colline-pres: #7FA872;
  --cadre: #FFFFFF;
  --tablette: #D9B98F;

  --police-titre: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --police-texte: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rayon: 20px;
  --tactile: 44px;
  color-scheme: light;
}

[data-theme="nuit"] {
  --fond: #3B3563;
  --surface: #4A4377;
  --texte: #F4EFFF;
  --texte-doux: #CFC7EA;
  --accent: #F7B49A;
  --bouton: #F7B49A;
  --bouton-texte: #2E2A45;
  --succes: #9ED1AE;
  --ombre: 0 6px 20px rgb(15 10 35 / 35%);

  --ciel-haut: #1F1A3D;
  --ciel-bas: #4A3F7A;
  --astre: #F4EBC8;
  --colline-loin: #3A3366;
  --colline-pres: #2B2650;
  --cadre: #5A528C;
  --tablette: #7A5A42;
  color-scheme: dark;
}

body { transition: background-color 0.6s ease, color 0.6s ease; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.5;
}

button, input { font: inherit; color: inherit; }

/* Comme une appli : pas de double-tap qui zoome, pas de texte sélectionné par erreur. */
button, a, label, .grimoire-place { touch-action: manipulation; -webkit-user-select: none; user-select: none; }

.app {
  --barre: 64px; /* hauteur de la barre d'onglets, hors encoche */
  max-width: 430px;
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top) + 16px)
    16px
    calc(env(safe-area-inset-bottom) + var(--barre) + 32px);
}

.ecran { display: flex; flex-direction: column; gap: 16px; animation: entrer 0.25s ease-out; }
.ecran[hidden] { display: none; }
@keyframes entrer { from { opacity: 0; transform: translateY(6px); } }

/* Retour tactile : tout ce qui se touche s'enfonce un peu. */
.bouton, .pastille, .rond, .reprendre, .onglet, .morceau-choix, .segments button, .historique a {
  transition: transform 0.12s ease, background-color 0.2s ease;
}
:is(.bouton, .pastille, .rond, .reprendre, .onglet, .morceau-choix, .segments button, .historique a):active:not(:disabled) {
  transform: scale(0.96);
}

/* --- Barre d'onglets -------------------------------------------------- */

.onglets {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 430px;
  margin: 0 auto;
  padding: 6px 12px calc(env(safe-area-inset-bottom) + 6px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--ligne);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -4px 20px color-mix(in srgb, var(--texte) 8%, transparent);
}
.onglet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  margin: 0 6px;
  border: 0;
  border-radius: 18px;
  background: none;
  color: var(--texte-doux);
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 0.75rem;
  cursor: pointer;
}
.onglet svg { width: 24px; height: 24px; }
.onglet[aria-current="page"] {
  color: var(--texte);
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}

/* --- Titres et textes ------------------------------------------------- */

.entete { display: flex; align-items: center; justify-content: space-between; min-height: var(--tactile); }
.marque, .titre {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.marque { font-size: 1.5rem; }
.titre { font-size: 1.5rem; text-align: center; }
.titre--grand { font-size: 2rem; line-height: 1.15; }
.sous-titre { margin: -8px 0 0; text-align: center; color: var(--texte-doux); }
.accroche { margin: 0; text-align: center; color: var(--texte-doux); }
.description { margin: 0; text-align: center; color: var(--texte-doux); }
.etiquette {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 1rem;
}


/* --- Reprendre ta lecture --------------------------------------------- */

.reprendre {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 14px 20px;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.reprendre[hidden] { display: none; }
.reprendre-titre { font-size: 0.8125rem; color: var(--texte-doux); }
.reprendre-livre { grid-row: 2; font-family: var(--police-titre); font-weight: 600; }
.reprendre-fleche { grid-row: 1 / 3; grid-column: 2; font-size: 1.75rem; color: var(--texte-doux); }

/* --- Réglages --------------------------------------------------------- */

.reglage-groupe { border: 0; margin: 0; min-width: 0; }
.reglage-groupe legend { float: left; width: 100%; }
.sous-etiquette {
  display: block;
  clear: both;
  margin: 18px 0 8px;
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--texte-doux);
}
.segments {
  clear: both;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--texte) 8%, transparent);
}
.segments--2 { grid-template-columns: repeat(2, 1fr); border-radius: 24px; }
.segments button {
  min-height: var(--tactile);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--police-titre);
  font-weight: 500;
  cursor: pointer;
}
.segments button[aria-checked="true"] { background: var(--surface); box-shadow: var(--ombre); }
[data-theme="nuit"] .segments button[aria-checked="true"] { background: var(--accent); color: var(--bouton-texte); }
.aide { margin: 10px 0 0; font-size: 0.875rem; color: var(--texte-doux); text-align: center; }

.interrupteur {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ligne);
  cursor: pointer;
}
.interrupteur-texte { flex: 1; }
.interrupteur .sous-etiquette { margin: 0; color: var(--texte); }
.interrupteur .aide { margin: 2px 0 0; text-align: left; }
.interrupteur input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  width: 52px;
  height: 32px;
  margin: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--texte) 18%, transparent);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.interrupteur input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
  transition: transform 0.2s ease;
}
.interrupteur input:checked { background: var(--succes); }
.interrupteur input:checked::after { transform: translateX(20px); }
#reglages-message { margin-top: 12px; min-height: 0; }

/* --- Historique ------------------------------------------------------- */

.historique { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.historique li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding-right: 16px;
  border-radius: var(--rayon);
  background: var(--surface);
  box-shadow: var(--ombre);
  transition: transform 0.12s ease;
}
.historique li:has(.ouvrir-playlist:active) { transform: scale(0.98); }
.ouvrir-playlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 0 16px 20px;
  border: 0;
  border-radius: var(--rayon) 0 0 var(--rayon);
  background: none;
  text-align: left;
  cursor: pointer;
}
.historique .livre { font-family: var(--police-titre); font-weight: 600; }
.historique .ambiance { color: var(--texte-doux); font-size: 0.9375rem; }
.historique .date { color: var(--texte-doux); font-size: 0.8125rem; }
.historique a {
  display: grid;
  place-items: center;
  min-height: var(--tactile);
  padding: 0 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--texte);
  font-family: var(--police-titre);
  font-weight: 600;
  text-decoration: none;
}

/* --- Grimoire --------------------------------------------------------- */

.scene { display: grid; place-items: center; padding-top: 8px; position: relative; }
[data-grimoire] { cursor: pointer; }
.scene--petite .grimoire { width: 120px; height: 120px; }

/* Fenêtre de train : le paysage défile derrière la vitre, le grimoire est assis sur la tablette. */
.fenetre {
  position: relative;
  height: 210px;
  border: 10px solid var(--cadre);
  border-radius: 36px;
  overflow: hidden;
  box-shadow: var(--ombre), inset 0 0 0 2px color-mix(in srgb, var(--texte) 8%, transparent);
  transition: border-color 0.6s ease;
}
.paysage {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--ciel-haut), var(--ciel-bas));
  transition: background 0.6s ease;
}
.astre {
  position: absolute;
  top: 22px;
  right: 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--astre);
  box-shadow: 0 0 24px color-mix(in srgb, var(--astre) 70%, transparent);
}
[data-theme="nuit"] .astre {
  /* Croissant de lune */
  background: transparent;
  box-shadow: inset -9px 3px 0 0 var(--astre), 0 0 18px -6px var(--astre);
}
.etoiles {
  position: absolute;
  inset: 0 0 40% 0;
  opacity: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 99%, transparent),
    radial-gradient(1px 1px at 30% 48%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 46% 18%, #fff 99%, transparent),
    radial-gradient(1px 1px at 62% 40%, #fff 99%, transparent),
    radial-gradient(1.5px 1.5px at 74% 62%, #fff 99%, transparent),
    radial-gradient(1px 1px at 88% 30%, #fff 99%, transparent),
    radial-gradient(1px 1px at 20% 70%, #fff 99%, transparent);
  transition: opacity 0.6s ease;
}
[data-theme="nuit"] .etoiles { opacity: 0.85; }

.collines {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  background-repeat: repeat-x;
  animation: defiler linear infinite;
}
.collines--loin {
  height: 90px;
  background-image: radial-gradient(60px 46px at 60px 100%, var(--colline-loin) 98%, transparent 100%);
  background-size: 120px 100%;
  animation-duration: 40s;
}
.collines--pres {
  height: 64px;
  background-image: radial-gradient(48px 36px at 40px 100%, var(--colline-pres) 98%, transparent 100%),
                    linear-gradient(var(--colline-pres), var(--colline-pres));
  background-size: 90px 100%, 100% 14px;
  background-position: 0 0, 0 100%;
  animation-duration: 16s;
}
@keyframes defiler { to { transform: translateX(-50%); } }

.tablette {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background: var(--tablette);
  box-shadow: 0 -2px 0 color-mix(in srgb, #000 12%, transparent);
}
.grimoire-place {
  position: relative;
  display: grid;
  place-items: center;
}
.fenetre .grimoire-place { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); }

/* --- Animations du grimoire ------------------------------------------- */

.grimoire-corps { transform-box: fill-box; transform-origin: 50% 100%; }
.grimoire--eveille .grimoire-corps { animation: respirer 4s ease-in-out infinite; }
.grimoire--endormi .grimoire-corps { animation: balancer 2.4s ease-in-out infinite; }
.grimoire--joyeux .grimoire-corps { animation: sautiller 0.9s ease-out 2; }

@keyframes respirer { 50% { transform: translateY(-3px) scaleY(1.01); } }
@keyframes balancer { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes sautiller { 40% { transform: translateY(-10px); } 70% { transform: translateY(0) scaleY(0.97); } }

/* Chaque pièce tourne ou s'étire autour de son propre centre. */
.grimoire-paupieres ellipse,
.grimoire-pied,
.grimoire-ecouteur,
.grimoire-tenue,
.grimoire-pompon,
.grimoire-etoile { transform-box: fill-box; transform-origin: 50% 50%; }
.grimoire-paupieres ellipse { transform-origin: 50% 0; transform: scaleY(0); }
.grimoire-yeux-fermes { opacity: 0; }
.grimoire-tenue { transform-origin: 50% 100%; animation: enfiler 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Éveillé : il cligne des yeux et jette un coup d'œil de temps en temps. */
.grimoire--eveille .grimoire-paupieres ellipse { animation: cligner 5s ease-in-out infinite; }
.grimoire--eveille .grimoire-pupilles { animation: regarder 9s ease-in-out infinite; }

/* Endormi : les paupières tombent doucement, puis il écoute en rythme. */
.grimoire--endormi .grimoire-paupieres ellipse { transform: scaleY(1); animation: fermer 1.2s ease-in 0.2s backwards; }
.grimoire--endormi .grimoire-yeux-fermes { opacity: 1; animation: apparaitre 0.3s ease-out 1.3s backwards; }
.grimoire--endormi .grimoire-pied--g { animation: taper 1.2s ease-in-out infinite; }
.grimoire--endormi .grimoire-pied--d { animation: taper 1.2s ease-in-out 0.6s infinite; }
.grimoire--endormi .grimoire-ecouteur { animation: battre 0.6s ease-out infinite; }

/* Joyeux : il agite les bras. */
.grimoire-bras--g { transform-box: view-box; transform-origin: 82px 156px; }
.grimoire-bras--d { transform-box: view-box; transform-origin: 158px 156px; }
.grimoire--joyeux .grimoire-bras--g { animation: agiter 0.45s ease-in-out 4 alternate; }
.grimoire--joyeux .grimoire-bras--d { animation: agiter 0.45s ease-in-out 4 alternate-reverse; }

/* Petits détails de tenue */
.grimoire-pompon { animation: rebondir 2.4s ease-in-out infinite; }
.grimoire-etoile { animation: scintiller 2.8s ease-in-out infinite; }
.grimoire-lumiere { animation: briller 1.6s ease-in-out infinite; }

@keyframes cligner { 0%, 92%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
@keyframes regarder { 0%, 40%, 100% { transform: translateX(0); } 48%, 58% { transform: translateX(-1.5px); } 66%, 76% { transform: translateX(1.5px); } }
@keyframes fermer { from { transform: scaleY(0); } 60% { transform: scaleY(0.55); } }
@keyframes apparaitre { from { opacity: 0; } }
@keyframes taper { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-3px) rotate(-10deg); } }
@keyframes battre { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.06); } }
@keyframes agiter { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
@keyframes enfiler { from { transform: translateY(-14px) scale(0.8); opacity: 0; } }
@keyframes rebondir { 50% { transform: translateY(-2px); } }
@keyframes scintiller { 50% { transform: scale(0.75) rotate(20deg); opacity: 0.7; } }
@keyframes briller { 50% { opacity: 0.55; } }

/* Notes qui s'envolent pendant la génération */
.notes { position: absolute; inset: 0; pointer-events: none; }
.notes i {
  position: absolute;
  bottom: 40%;
  left: 50%;
  font-style: normal;
  font-size: 1.375rem;
  color: var(--accent);
  opacity: 0;
  animation: envol 3.6s ease-out infinite;
}
.notes i:nth-child(1) { --x: -70px; animation-delay: 0s; }
.notes i:nth-child(2) { --x: 60px; animation-delay: 0.7s; color: var(--succes); }
.notes i:nth-child(3) { --x: -40px; animation-delay: 1.4s; }
.notes i:nth-child(4) { --x: 80px; animation-delay: 2.1s; color: var(--succes); }
.notes i:nth-child(5) { --x: -90px; animation-delay: 2.8s; }
@keyframes envol {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), -110px) rotate(-12deg); }
}

/* Lucioles : seulement la nuit */
.lucioles { position: absolute; inset: 0; pointer-events: none; display: none; }
[data-theme="nuit"] .lucioles { display: block; }
.lucioles i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #FFE9A0;
  box-shadow: 0 0 8px 2px rgb(255 226 140 / 70%);
  opacity: 0;
  animation: luciole 5s ease-in-out infinite;
}
.lucioles i:nth-child(1) { left: 14%; top: 62%; animation-delay: 0s; }
.lucioles i:nth-child(2) { left: 30%; top: 40%; animation-delay: 1.2s; }
.lucioles i:nth-child(3) { left: 68%; top: 55%; animation-delay: 2.1s; }
.lucioles i:nth-child(4) { left: 82%; top: 35%; animation-delay: 3.3s; }
.lucioles i:nth-child(5) { left: 52%; top: 22%; animation-delay: 4s; }
@keyframes luciole {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  30%, 60% { opacity: 1; }
  50% { transform: translate(8px, -10px); }
}

/* Quand on le touche : un saut, une toupie ou un coucou des deux bras, et quelques notes. */
[data-reaction="saut"] .grimoire-corps { animation: bond 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 2; }
[data-reaction="toupie"] .grimoire-corps { animation: toupie 0.9s ease-in-out; }
[data-reaction="coucou"] .grimoire-corps { animation: respirer 0.5s ease-in-out 3; }
[data-reaction="coucou"] .grimoire-bras--g { animation-duration: 0.25s; animation-iteration-count: 8; }
[data-reaction="coucou"] .grimoire-bras--d { animation-duration: 0.25s; animation-iteration-count: 8; }
@keyframes bond { 35% { transform: translateY(-22px) scaleY(1.04); } 70% { transform: translateY(0) scale(1.05, 0.94); } }
@keyframes toupie {
  20% { transform: rotate(-12deg); }
  45% { transform: rotate(10deg) scale(1.04); }
  70% { transform: rotate(-6deg); }
}
.notes--eclat i { bottom: 55%; animation: envol 1.3s ease-out forwards; }
.notes--eclat i:nth-child(1) { --x: -60px; animation-delay: 0s; }
.notes--eclat i:nth-child(2) { --x: 50px; animation-delay: 0.12s; color: var(--succes); }
.notes--eclat i:nth-child(3) { --x: -10px; animation-delay: 0.24s; }

/* Réduire les animations : tout s'arrête */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .notes { display: none; }
  [data-theme="nuit"] .lucioles i { opacity: 0.8; }
}

/* --- Cartes et formulaire --------------------------------------------- */

.carte {
  background: var(--surface);
  border-radius: var(--rayon);
  padding: 20px;
  box-shadow: var(--ombre);
}

.formulaire { display: flex; flex-direction: column; gap: 20px; }

input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid var(--ligne);
  border-radius: 14px;
  background: var(--fond);
  font-size: 1.0625rem; /* ≥ 16 px : pas de zoom automatique sur iPhone */
  outline: none;
}
input[type="text"]:focus { border-color: var(--texte); background: var(--surface); }

.durees { border: 0; margin: 0; padding: 0; min-width: 0; }
.pastilles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pastille {
  min-height: var(--tactile);
  border: 2px solid var(--ligne);
  border-radius: 999px;
  background: transparent;
  font-family: var(--police-titre);
  font-weight: 500;
  cursor: pointer;
}
.pastille[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
}

.reglage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
}
.reglage[hidden] { display: none; }
.reglage output {
  min-width: 6ch;
  text-align: center;
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.375rem;
}
.rond {
  width: var(--tactile);
  height: var(--tactile);
  border-radius: 50%;
  border: 2px solid var(--ligne);
  background: transparent;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}
.rond:disabled { opacity: 0.35; cursor: default; }

/* --- Boutons ---------------------------------------------------------- */

.bouton {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--bouton);
  color: var(--bouton-texte);
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.125rem;
  cursor: pointer;
}
a.bouton {
  display: grid;
  place-items: center;
  text-decoration: none;
}
.bouton--secondaire {
  background: transparent;
  color: var(--texte);
  border: 2px solid var(--bouton);
}
.bouton:disabled { opacity: 0.4; cursor: default; }
.bouton[hidden], a.bouton[hidden] { display: none; }
.message[hidden] { display: none; }

.lien {
  align-self: center;
  min-height: var(--tactile);
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--texte-doux);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.lien[hidden] { display: none; }

.actions { display: flex; flex-direction: column; gap: 10px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- Génération ------------------------------------------------------- */

.etapes { list-style: none; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.etapes li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--texte-doux);
}
.etapes li::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ligne);
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 700;
}
.etapes li.en-cours { color: var(--texte); font-weight: 700; animation: respirer-texte 1.6s ease-in-out infinite; }
.etapes li.en-cours::before {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent);
  border-width: 3px;
  animation: tourner 0.9s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }
@keyframes respirer-texte { 50% { opacity: 0.6; } }
.etapes li.faite { color: var(--texte); }
.etapes li.faite::before {
  content: "✓";
  border-color: var(--succes);
  background: var(--succes);
  color: var(--surface);
}
.message { margin: 0; min-height: 1.5em; text-align: center; font-size: 0.9375rem; color: var(--texte-doux); }

/* --- Résultat --------------------------------------------------------- */

.badge {
  align-self: center;
  margin: -4px 0 0;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--texte) 8%, transparent);
  color: var(--texte-doux);
}
.badge--publiee { background: var(--succes); color: var(--surface); }
[data-theme="nuit"] .badge--publiee { color: var(--bouton-texte); }
.aide[hidden] { display: none; }
.actions .aide { margin: -4px 0 4px; }

.tags { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 35%, var(--surface));
  font-size: 0.875rem;
  font-weight: 600;
}

.frise {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 64px;
  margin-bottom: 16px;
}
/* Une barre par morceau, haute comme sa durée. Une seule couleur ; en gris, les déjà entendus. */
.frise span {
  flex: 1;
  min-width: 2px;
  border-radius: 3px 3px 1px 1px;
  background: var(--accent);
}
.frise span.deja { background: color-mix(in srgb, var(--texte-doux) 45%, transparent); }
.legende {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 16px;
  font-size: 0.8125rem;
  color: var(--texte-doux);
}
.legende i {
  flex: none;
  width: 8px;
  height: 16px;
  border-radius: 3px 3px 1px 1px;
  background: color-mix(in srgb, var(--texte-doux) 45%, transparent);
}

.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; }
.chiffres div { text-align: center; }
.chiffres dt { font-size: 0.8125rem; color: var(--texte-doux); }
.chiffres dd { margin: 0; font-family: var(--police-titre); font-weight: 600; font-size: 1.375rem; }

.avertissement {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 25%, var(--surface));
  font-size: 0.9375rem;
}
.avertissement[hidden] { display: none; }

.premiers { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.premiers li::marker { color: var(--texte-doux); font-weight: 700; }
.premiers .artiste { display: block; font-size: 0.875rem; color: var(--texte-doux); }
.premiers .duree { float: right; font-size: 0.875rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; }

/* Changer un morceau d'un tap, ajout à la playlist du livre. */
[hidden] { display: none !important; }
.premiers li { display: flex; align-items: center; gap: 8px; border-radius: 12px; transition: opacity 0.2s ease; }
.morceau-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.morceau-texte .duree { margin-left: 10px; }
.morceau-choix {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0 -8px;
  padding: 8px;
  width: calc(100% + 16px);
  border: 0;
  border-radius: 14px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.coche {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ligne);
  border-radius: 50%;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.morceau-choix[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.morceau-choix[aria-pressed="true"] .coche { border-color: var(--accent); background: var(--accent); }
.morceau-choix[aria-pressed="true"] .coche::after { content: "✓"; font-size: 0.8125rem; font-weight: 700; color: var(--texte); }
.aide--liste { margin: -4px 0 12px; text-align: left; }
.selection-barre {
  position: sticky;
  z-index: 5;
  bottom: calc(env(safe-area-inset-bottom) + var(--barre) + 24px);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: var(--bouton);
  color: var(--bouton-texte);
  box-shadow: var(--ombre);
  animation: entrer 0.2s ease-out;
}
.selection-compteur { flex: 1; margin: 0; font-weight: 700; }
.selection-barre .lien { color: inherit; opacity: 0.8; padding: 0 10px; }
.bouton--petit { width: auto; min-height: var(--tactile); padding: 0 20px; font-size: 1rem; background: var(--accent); color: var(--texte); }
.recap-duree { display: block; margin-top: 6px; }
.details-quota { color: var(--texte-doux); font-size: 0.875rem; text-align: center; }
.details-quota summary { cursor: pointer; min-height: 44px; padding: 10px; }
.badge-nouveau { display: inline-block; margin: 4px 0 0 8px; padding: 2px 8px; border-radius: 999px; background: var(--succes); color: #263A2F; font-size: 0.75rem; font-weight: 700; }
.morceau--nouveau { animation: nouveau-morceau 1.2s ease-out; }
#edition-info { margin-bottom: 8px; }
@keyframes nouveau-morceau { from { background: color-mix(in srgb, var(--succes) 35%, var(--surface)); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .morceau--nouveau { animation: none; } }

/* --- Livre connu, recherche, retour, Google, toast ------------------- */

.aide--champ { margin: -12px 0 0; text-align: left; color: var(--texte); }
#ecran-historique input[type="search"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid var(--ligne);
  border-radius: 999px;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 1.0625rem; /* ≥ 16 px : pas de zoom automatique sur iPhone */
  outline: none;
}
#ecran-historique input[type="search"]:focus { border-color: var(--texte); }

.retour {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--tactile);
  margin: -8px 0 -16px -8px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--texte-doux);
  font-family: var(--police-titre);
  font-weight: 500;
  cursor: pointer;
}
.retour span:first-child { font-size: 1.5rem; line-height: 1; }

.statut-google { margin: 0; color: var(--texte-doux); }
.statut-google--ok { color: var(--texte); font-weight: 600; }
#google-connecter { margin-top: 12px; }
#google-reglages-message { margin-top: 10px; }
.alerte-google { margin: 0; }
.alerte-google p { margin: 0; }
.alerte-google .lien { padding: 0; min-height: 36px; color: var(--texte); font-weight: 700; }
.lien--discret { font-size: 0.875rem; opacity: 0.8; }

.toast {
  position: fixed;
  z-index: 20;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 88px);
  max-width: 398px;
  margin: 0 auto;
  padding: 12px 18px;
  border-radius: 16px;
  background: var(--bouton);
  color: var(--bouton-texte);
  text-align: center;
  font-weight: 600;
  box-shadow: var(--ombre);
  animation: entrer 0.2s ease-out;
}

/* --- Connexion (mode serveur) ---------------------------------------- */

.app--connexion { min-height: 100dvh; display: grid; align-content: center; padding-bottom: calc(env(safe-area-inset-bottom) + 32px); }
.connexion { gap: 18px; }
a.bouton--google { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--surface); color: var(--texte); border: 2px solid var(--ligne); box-shadow: var(--ombre); }
.google-compte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--ligne); font-size: 0.9375rem; color: var(--texte-doux); }
.google-compte strong { color: var(--texte); overflow-wrap: anywhere; }
.google-compte .lien { padding: 0; }

.livre-reconnu { margin: -10px 0 0; text-align: center; font-size: 0.875rem; color: var(--texte-doux); }
.livre-reconnu .lien { min-height: 32px; padding: 0 6px; font-size: 0.875rem; }

.interrupteur--seul { margin-top: 0; padding-top: 0; border-top: 0; clear: both; }
#notifications-test { padding: 0; margin-top: 10px; }
#notifications-message { margin-top: 8px; min-height: 0; }