/* Styles propres à l'appli. Tout le reste vient de kit.css (jetons, composants). */
*, *::before, *::after { box-sizing: border-box; }
:root { --rail: 15rem; --largeur: 52rem; }
body { margin: 0; padding-bottom: 7rem; overflow-x: hidden; }
[hidden] { display: none !important; }
.kit-fond { position: fixed; inset: 0; z-index: -1; }
a:not([class]) { color: inherit; }

/* --- Barre du haut --- */
.barre { position: sticky; top: 0; z-index: 5; padding-top: env(safe-area-inset-top); }
.barre h1 { margin: 0; font-size: 1.25rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-ligne-corps { min-width: 0; }
.kit-ligne-titre, .kit-ligne-sous-titre { overflow-wrap: anywhere; }
#actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.avatar-lien { display: inline-flex; border-radius: 50%; text-decoration: none; }
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #1c1d24; font-weight: 700; flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }

/* --- Page --- */
main { max-width: 44rem; margin: 0 auto; padding: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; align-content: start; }
.section { margin: 1rem 0 0; font-size: .95rem; font-weight: 600; color: var(--couleur-texte2); letter-spacing: .01em; }
.ligne-erreur { flex-wrap: wrap; }
.ligne-erreur .kit-ligne-corps { flex: 1 1 14rem; }
.ligne-erreur .actions-ligne { display: flex; gap: .25rem; align-items: center; margin-left: auto; }
.salut { margin: .25rem 0 0; }
.formulaire, .connexion { display: grid; gap: .75rem; }
.ligne-action { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.ligne-action .kit-champ { flex: 1; min-width: 0; }
.champ-langue { flex: 0 0 4rem !important; text-align: center; }
.pleine-largeur { width: 100%; display: inline-flex; gap: .5rem; justify-content: center; align-items: center; }
.kit-bouton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-decoration: none; }
.kit-bouton[data-role="danger"] { background: var(--couleur-danger); color: #fff; }
.etiquette { display: inline-flex; align-items: center; padding: .15rem .65rem; font-size: .8rem; line-height: 1.4; white-space: nowrap; }
.erreur-texte { color: var(--couleur-danger); font-size: .9rem; overflow-wrap: anywhere; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.zone { display: grid; gap: .6rem; margin-top: .4rem; }
.zone > .section { margin: .6rem 0 0; }
.sortie { display: grid; margin-top: 1rem; }
.chevron { color: var(--couleur-texte3); display: inline-flex; }
.ligne-icone { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--couleur-accent-doux); color: var(--couleur-accent); flex: none; }
.ligne-bouton { width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.ligne-bouton:disabled { opacity: .5; cursor: default; }
.ligne-bouton[data-role="danger"] .ligne-icone { background: var(--couleur-danger-doux); color: var(--couleur-danger); }
a.kit-ligne { text-decoration: none; color: inherit; }
.rond { width: 18px; height: 18px; border: 2px solid var(--couleur-texte3); border-radius: 50%; box-sizing: border-box; }

/* --- Barre de progression --- */
.barre-progres { display: block; height: 4px; border-radius: 2px; background: var(--surface-creuse); overflow: hidden; margin-top: .35rem; }
.barre-progres-plein { display: block; height: 100%; background: var(--couleur-accent); border-radius: 2px; transition: width .5s var(--mouvement-courbe); }

/* --- Navigation basse (rail latéral sur grand écran) --- */
.onglets { position: fixed; left: .75rem; right: .75rem; bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 5; display: flex; justify-content: space-around; padding: .35rem; border-radius: var(--rayon-panneau); max-width: 36rem; margin: 0 auto; }
.onglet { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem .75rem; border-radius: var(--rayon-controle); text-decoration: none; font-size: .72rem; color: var(--couleur-texte2); transition: background var(--mouvement-moyen) var(--mouvement-courbe), color var(--mouvement-moyen) var(--mouvement-courbe); }
.onglet[aria-current="page"] { background: var(--couleur-accent-doux); color: var(--couleur-accent); font-weight: 600; }
.onglet-icone { position: relative; display: inline-flex; }
.point { position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--couleur-accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (min-width: 900px) {
  body { padding-bottom: 2rem; padding-left: var(--rail); }
  .onglets { left: .75rem; right: auto; top: 4.5rem; bottom: auto; flex-direction: column; justify-content: flex-start; gap: .25rem; width: calc(var(--rail) - 1.5rem); margin: 0; max-width: none; }
  .onglet { flex-direction: row; gap: .7rem; font-size: .92rem; padding: .65rem .8rem; white-space: nowrap; }
  .onglet > span:last-child { overflow: hidden; text-overflow: ellipsis; }
  main { max-width: var(--largeur); }
  /* La barre couvre toute la largeur, son titre s'aligne sur le contenu centré à droite du rail. */
  .barre { margin-left: calc(-1 * var(--rail)); padding-left: calc(var(--rail) + max(0px, (100vw - var(--rail) - var(--largeur)) / 2) + 1rem); padding-right: max(1rem, calc((100vw - var(--rail) - var(--largeur)) / 2 + 1rem)); }
}

/* --- Connexion --- */
.hors-appli .barre, .hors-appli .onglets { display: none; }
.hors-appli { padding-left: 0; }
.connexion { margin-top: 10vh; text-align: center; }
.connexion-logo { display: flex; justify-content: center; }
.connexion-titre { margin: 0; }
.connexion .kit-texte-2 { margin: 0; }

/* --- Accueil --- */
.bandeau { display: flex; align-items: center; gap: .75rem; text-decoration: none; padding: .75rem 1rem; }
.reprise { position: relative; overflow: hidden; display: flex; gap: 1rem; align-items: center; text-decoration: none; padding: 1rem; }
.reprise > * { position: relative; z-index: 1; }
.reprise > .kit-pochette { position: absolute; z-index: 0; }
.reprise-couv { width: 6rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .6rem; box-shadow: var(--ombre-flottante); background: var(--surface-creuse); flex: none; }
.reprise-texte { display: grid; gap: .3rem; justify-items: start; min-width: 0; }
.reprise-titre { font-size: 1.15rem; line-height: 1.2; }
.reprise-bouton { margin-top: .3rem; }
.rangee { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; margin-inline: -1rem; padding-inline: 1rem; scroll-snap-type: x proximity; scrollbar-width: none; }
.rangee::-webkit-scrollbar { display: none; }
.rangee .tuile { flex: 0 0 8rem; scroll-snap-align: start; }

/* --- Listes --- */
.ligne-serie { align-items: center; }
.mini-couv { width: 2.75rem; height: 4rem; object-fit: cover; border-radius: .4rem; background: var(--surface-creuse); flex: none; }
.mini-couv.sans-image, .tuile-image img.sans-image, .reprise-couv.sans-image, .entete-couv.sans-image { visibility: hidden; }
.chapitre a { text-decoration: none; color: inherit; }
.chapitre.lu .kit-ligne-titre { color: var(--couleur-texte3); }

/* --- Bibliothèque --- */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .9rem; }
.tuile { text-decoration: none; color: inherit; display: grid; gap: .3rem; align-content: start; }
.tuile-image { position: relative; aspect-ratio: 2 / 3; border-radius: var(--rayon-rangee, .75rem); overflow: hidden; background: var(--surface-creuse); box-shadow: var(--ombre-carte); }
.tuile-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tuile-badge { position: absolute; top: .4rem; right: .4rem; }
.tuile-progres { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 .4rem .4rem; }
.tuile-progres .barre-progres { background: rgb(0 0 0 / .35); }
.tuile-titre { font-size: .9rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tuile-sous { font-size: .78rem; }

/* --- Série --- */
.entete-serie { position: relative; overflow: hidden; display: flex; gap: 1rem; padding: 1rem; align-items: flex-end; }
.entete-serie > * { position: relative; z-index: 1; }
.entete-serie > .kit-pochette { position: absolute; z-index: 0; }
.entete-couv { width: 7rem; aspect-ratio: 2 / 3; object-fit: cover; border-radius: .6rem; box-shadow: var(--ombre-flottante); background: var(--surface-creuse); flex: none; }
.entete-texte { display: grid; gap: .6rem; justify-items: start; min-width: 0; flex: 1; }
.entete-texte .barre-progres { width: 100%; }

/* --- Profil et comptes --- */
.profil-tete { display: grid; gap: .9rem; justify-items: center; text-align: center; }
.profil-champs { display: grid; gap: .4rem; width: 100%; max-width: 20rem; }
.profil-champs .kit-champ { text-align: center; font-weight: 600; }
.palette { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.pastille-couleur { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform var(--mouvement-court) var(--mouvement-courbe); }
.pastille-couleur[aria-pressed="true"] { border-color: var(--couleur-texte); transform: scale(1.12); }
.detail-tete { display: flex; align-items: center; gap: .9rem; }
.secret { display: grid; gap: .25rem; }
.secret code { font-size: 1.2rem; user-select: all; word-break: break-all; }

/* --- Téléchargements --- */
.direct { display: grid; gap: .6rem; }
.direct-entete { display: flex; justify-content: space-between; align-items: center; }
.direct-titre { white-space: normal; }
.attente-recherche { display: flex; align-items: center; gap: .6rem; padding: 1rem; color: var(--couleur-texte2); }

/* --- Feuilles --- */
.feuille-racine { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.feuille-racine .kit-voile { z-index: 0; }
.feuille { position: relative; z-index: 1; width: calc(100% - 1rem); max-width: 32rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; max-height: 85dvh; overflow: auto; margin-bottom: calc(.5rem + env(safe-area-inset-bottom)) !important; }
.feuille-poignee { width: 2.5rem; height: 4px; border-radius: 2px; background: var(--couleur-trait-fort); margin: -.25rem auto 0; }
.feuille-titre { margin: 0; font-size: 1.15rem; }
.feuille-actions { justify-content: flex-end; }

/* --- Lecteur : plein écran, sans barre ni navigation --- */
.lecture .barre, .lecture .onglets { display: none; }
.lecture { padding-bottom: 0; padding-left: 0; }
.lecture main { max-width: none; padding: 0; gap: 0; }
.lecteur-barre { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; }
.lecteur-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecteur-info { font-variant-numeric: tabular-nums; color: var(--couleur-texte2); font-size: .85rem; }
.lecteur { display: grid; justify-items: center; }
.lecteur img { width: 100%; max-width: 48rem; display: block; scroll-margin-top: 3.2rem; }
.lecteur img:not(.pret):not(.page-seule) { min-height: 70vh; background: var(--surface-creuse); }
.lecteur-fin { display: grid; gap: 1rem; justify-items: center; padding: 2rem 1rem calc(3rem + env(safe-area-inset-bottom)); text-align: center; }
.lecteur-pied { display: flex; gap: .75rem; }
.lecture-pages { overflow: hidden; height: 100dvh; }
.lecture-pages .lecteur { height: calc(100dvh - 3.2rem); align-items: center; touch-action: pan-y; user-select: none; background: #000; }
.lecture-pages .lecteur img.page-seule { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.barre-cachee .lecteur-barre { display: none; }
.barre-cachee .lecteur { height: 100dvh; }

/* --- Message bref : tombe du haut, sous la zone sûre --- */
#toast { position: fixed; z-index: 40; top: calc(.75rem + env(safe-area-inset-top)); left: 50%; translate: -50% 0; width: max-content; max-width: min(28rem, calc(100vw - 2rem));
  text-align: center; overflow-wrap: anywhere; pointer-events: none; }
.kit-segments { max-width: 100%; }
.kit-segments > button { flex: 1; }
.kit-ligne-titre, .kit-ligne-sous-titre { white-space: normal; text-overflow: clip; }