/* =========================================================
   Librarium — feuille de style
   Direction : éditorial / beau livre moderne
   Titres Fraunces (serif) · texte & interface Hanken Grotesk (sans)
   · citations Spectral · fond papier clair par défaut, sombre soigné.
   ========================================================= */

:root {
  /* ---- Clair (par défaut) : papier crème, encre chaude, accent bordeaux ---- */
  --papier: #faf6ee;        /* fond papier */
  --papier-carte: #fffdf9;  /* cartes / panneaux */
  --encre: #221c14;         /* texte principal */
  --encre-doux: #6e6457;    /* texte secondaire */
  --bordeaux: #8e2c3b;      /* accent : boutons, chiffres clés */
  --bordeaux-fonce: #76232f;/* survol (plus foncé en clair) */
  --laiton: #9a7b3f;        /* accent secondaire (laiton) */
  --laiton-clair: #b89554;
  --vert-meuble: #3f5247;   /* gardé pour quelques accents (objectifs thème) */
  --vert-meuble-fonce: #2e3d34;
  --ligne: rgba(34, 28, 20, 0.12);      /* filets / bordures */
  --ligne-fort: rgba(34, 28, 20, 0.26); /* bordures de champs */

  /* Fonds variabilisés */
  --champ-fond: #faf6ee;    /* fond des champs (inset sur carte blanche) */
  --zone-fond: #f4efe6;     /* zones internes */
  --couv-vide-fond: #e7dfd0;

  /* Ombres douces (style éditorial) */
  --ombre: 0 1px 2px rgba(34,28,20,.04), 0 8px 24px rgba(34,28,20,.06);
  --ombre-couv: 0 2px 4px rgba(34,28,20,.10), 0 12px 26px rgba(34,28,20,.16);
  --rayon: 14px;

  --serif-titre: "Fraunces", Georgia, serif;
  --serif-texte: "Spectral", Georgia, serif;  /* réservé aux citations / passages littéraires */
  --sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  color-scheme: light;  /* menus/calendriers natifs en version claire */
}

/* ---------- Thème sombre (charbon chaud, accent bordeaux éclairci) ---------- */
:root[data-theme="sombre"] {
  --papier: #141109;
  --papier-carte: #1c1810;
  --encre: #f3ecdf;
  --encre-doux: #a89c88;
  --bordeaux: #e0929b;          /* éclairci pour rester lisible sur sombre */
  --bordeaux-fonce: #e9a7af;
  --laiton: #cba45e;
  --laiton-clair: #e2c074;
  --vert-meuble: #6f8a78;
  --vert-meuble-fonce: #2c3b33;
  --ligne: rgba(243, 236, 223, 0.12);
  --ligne-fort: rgba(243, 236, 223, 0.26);
  --champ-fond: #141109;
  --zone-fond: #1b150d;
  --couv-vide-fond: #2f2718;
  --ombre: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.4);
  --ombre-couv: 0 2px 6px rgba(0,0,0,.4), 0 16px 34px rgba(0,0,0,.5);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--sans);
  color: var(--encre);
  line-height: 1.55;
  background-color: var(--papier);
  -webkit-font-smoothing: antialiased;
  padding: 0 1.25rem 4rem;
}

/* ---------- En-tête ---------- */
.site-header {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  padding: 3.5rem 0 2.5rem;
}

.kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--bordeaux);
  margin-right: -0.42em; /* compense le letter-spacing du dernier caractère */
}

.site-header h1 {
  font-family: var(--serif-titre);
  font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144;
  margin: 0.7rem 0 0.5rem;
}

.ornement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  color: var(--laiton);
  font-size: 0.7rem;
  margin: 0.4rem 0;
}

.ornement span {
  display: block;
  width: 70px;
  height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, var(--laiton));
}

.ornement span:last-child {
  --dir: left;
}

.sous-titre {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--encre-doux);
}

/* ---------- Statistiques ---------- */
.stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.4rem;
  margin-top: 2rem;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}

.stat-num {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  color: var(--bordeaux);
}

.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.68rem;
  color: var(--encre-doux);
  margin-top: 0.35rem;
}

/* ---------- Panneaux ---------- */
main {
  max-width: 880px;
  margin: 0 auto;
}

.panneau {
  background: var(--papier-carte);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: 1.8rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--ombre);
}

.titre-section {
  font-family: var(--serif-titre);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  margin-bottom: 1.4rem;
}

/* ---------- Formulaire ---------- */
.form-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.champ-large {
  grid-column: 1 / -1;
}

.champ {
  display: flex;
  flex-direction: column;
}

label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--encre-doux);
  margin-bottom: 0.45rem;
}

input,
select,
textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--encre);
  background: var(--champ-fond);
  border: 1px solid var(--ligne-fort);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bordeaux) 22%, transparent);
}

::placeholder {
  color: var(--encre-doux);
  opacity: 0.7;
}

textarea {
  resize: vertical;
  line-height: 1.65;
}

/* Case à cocher « coup de cœur » du formulaire d'ajout */
.case-favori {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0;
  cursor: pointer;
}
.case-favori input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--bordeaux);
}

/* ---------- Boutons ---------- */
.btn-principal {
  grid-column: 1 / -1;
  justify-self: start;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--surface-bouton-texte, #fff);
  background: var(--bordeaux);
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.7rem;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}

/* En sombre, l'accent est clair : texte foncé sur le bouton pour le contraste. */
:root[data-theme="sombre"] .btn-principal { color: #1a1209; }

.btn-principal:hover {
  filter: brightness(1.08);
}

.btn-principal:active {
  transform: translateY(1px);
}

.btn-discret {
  font-family: var(--sans);
  font-size: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--encre-doux);
  padding: 0.5rem 0;
}

.btn-discret:hover {
  color: var(--encre);
}

.btn-danger {
  color: var(--bordeaux);
}

.btn-danger:hover {
  color: var(--bordeaux-fonce);
  text-decoration: underline;
}

/* ---------- Tête de la bibliothèque + filtres ---------- */
.biblio-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}

.biblio-tete .titre-section {
  margin-bottom: 0;
}

.filtres {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.filtre {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--encre-doux);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.filtre:hover {
  color: var(--encre);
}

.filtre.actif {
  color: var(--bordeaux);
  border-bottom-color: var(--bordeaux);
  font-weight: 600;
}

.message-vide {
  color: var(--encre-doux);
  font-style: italic;
}

/* ---------- Le présentoir (grille de couvertures, sans étagère) ---------- */
.etagere {
  --h-couv: 210px;
  --planche: 20px;   /* gardé : sert d'espace vertical pour la vue tranches */

  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 30px 22px;
  padding: 0.4rem 0 0.6rem;
  background: none;
  border: none;
  box-shadow: none;
}

/* ---------- Une couverture ---------- */
.couverture {
  position: relative;
  width: 140px;
  height: var(--h-couv);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 0.8rem 0.85rem 1rem;
  border-radius: 4px 7px 7px 4px;
  color: #f7efe0;
  cursor: pointer;
  overflow: hidden;

  background: var(--couleur-livre, #555);
  border-left: 5px solid var(--couleur-dos, rgba(0, 0, 0, 0.28));
  box-shadow: var(--ombre-couv);

  /* apparition en cascade au chargement */
  animation: monteCouv 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* léger voile en bas pour la lisibilité du titre sur la couleur */
.couverture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

.couverture:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre-couv), 0 18px 30px rgba(34, 28, 20, 0.18);
}

/* le contenu de la couverture passe au-dessus du voile ::after */
.couv-titre, .couv-auteur, .couv-bas { position: relative; z-index: 1; }

@keyframes monteCouv {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.couv-titre {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.couv-auteur {
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.85;
  margin-top: 0.3rem;
}

.couv-bas {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.note {
  color: var(--laiton-clair);
  font-size: 0.85rem;
  letter-spacing: 1px;
}

/* ---------- Vue « tranches » : livres debout sur l'étagère ---------- */
/* Double classe pour battre la règle mobile « .etagere { justify-content:center } ». */
.etagere.etagere-tranches {
  gap: var(--planche) 0;          /* collés, comme sur une vraie étagère */
  justify-content: flex-start;
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}

.tranche {
  position: relative;
  height: var(--h-couv);
  width: 40px;                    /* largeur standard, identique pour tous */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1px 4px 4px 1px;
  color: #f7efe0;
  cursor: pointer;
  overflow: hidden;
  background: var(--couleur-livre, #555);
  border-left: 3px solid var(--couleur-dos, rgba(0, 0, 0, 0.35));
  box-shadow:
    inset -7px 0 11px -7px rgba(0, 0, 0, 0.6),
    inset 8px 0 10px -8px rgba(255, 255, 255, 0.18),
    0 7px 6px -3px rgba(0, 0, 0, 0.55),
    1px 4px 7px rgba(0, 0, 0, 0.35);
  /* entrée en fondu seulement : laisse le transform libre pour l'inclinaison */
  animation: apparaitTranche 0.4s ease both;
  animation-delay: calc(var(--i, 0) * 35ms);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
@keyframes apparaitTranche {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Quelques livres légèrement penchés, appuyés sur leurs voisins */
.tranche.penche-d {
  transform: rotate(4deg);
  transform-origin: bottom right;
  z-index: 2;
}
.tranche.penche-g {
  transform: rotate(-4deg);
  transform-origin: bottom left;
  z-index: 2;
}
.tranche:hover {
  transform: translateY(-9px) rotate(-0.5deg);
  box-shadow: 3px 14px 20px rgba(0, 0, 0, 0.45);
  z-index: 3;
}
.tranche-texte {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: center;
  max-height: calc(100% - 1.4rem);
  overflow: hidden;
  padding: 0.7rem 0;
  line-height: 1.05;
}
.tranche-titre {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.tranche-auteur {
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.82;
  margin-block-start: 0.6rem;   /* espace AVANT l'auteur dans le sens vertical */
}
.tranche-coeur {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  color: #e85d5d;
  font-size: 0.8rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ---------- Sélecteur d'affichage (Couvertures / Tranches / Liste) ---------- */
.segments-vue {
  display: inline-flex;
  border: 1px solid var(--ligne);
  border-radius: 7px;
  overflow: hidden;
  background: var(--champ-fond);
}
.seg-vue {
  border: none;
  background: transparent;
  color: var(--encre-doux);
  font-family: var(--sans);
  font-size: 0.92rem;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.seg-vue + .seg-vue {
  border-left: 1px solid var(--ligne);
}
.seg-vue:hover {
  color: var(--encre);
}
.seg-vue.actif {
  background: var(--bordeaux);
  color: #fff;
}

/* Bandeau de statut, fine bande en haut de la couverture */
.bandeau {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 1;
}

.bandeau.à-lire    { background: var(--laiton); }
.bandeau.en-cours  { background: #3b8fa6; }
.bandeau.terminé   { background: #4f8a4a; }

/* Marque-page doré : signale qu'une note de lecture existe */
.marque-page {
  position: absolute;
  top: -1px;
  right: 14px;
  width: 14px;
  height: 26px;
  background: var(--laiton-clair);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* ---------- Fiche de lecture (modale) ---------- */
.modale-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500; /* au-dessus du burger (1300) et des boutons flottants (1100) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(28, 20, 12, 0.55);
  backdrop-filter: blur(3px);
  animation: voileIn 0.2s ease both;
}

.modale-overlay[hidden] {
  display: none;
}

@keyframes voileIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fiche {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--papier-carte);
  border: 1px solid var(--ligne);
  border-top: 5px solid var(--bordeaux);
  border-radius: 4px;
  padding: 2.4rem 2.2rem 2rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  animation: ficheIn 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes ficheIn {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fiche-fermer {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--encre-doux);
  cursor: pointer;
}

.fiche-fermer:hover { color: var(--bordeaux); }

.fiche-kicker {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--bordeaux);
}

.fiche-titre {
  font-family: var(--serif-titre);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.1;
  margin: 0.4rem 0 0.1rem;
}

.fiche-auteur {
  font-style: italic;
  color: var(--encre-doux);
  margin-bottom: 1.6rem;
}

.fiche-controles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.3rem;
}

/* étoiles cliquables */
.etoiles-edit {
  display: flex;
  gap: 0.15rem;
  font-size: 1.5rem;
  line-height: 1;
}

.etoiles-edit .etoile {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  cursor: pointer;
  transition: transform 0.12s;
}

.etoiles-edit .etoile:hover {
  transform: scale(1.15);
}

.etoile-fond,
.etoile-avant {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
}

.etoile-fond {
  color: var(--ligne);
}

.etoile-avant {
  color: var(--laiton);
  width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.fiche-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ligne);
}

.fiche-actions .btn-principal {
  justify-self: auto;
}

/* ---------- Barre d'outils : recherche + tri ---------- */
.biblio-outils {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}

.champ-recherche {
  flex: 1 1 240px;
}

.champ-recherche input {
  width: 100%;
}

.champ-tri {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.champ-tri select {
  width: auto;
  min-width: 190px;
}

/* ---------- Couverture réelle sur l'étagère ---------- */
/* Quand un livre a une vraie image, elle remplit la couverture ;
   on garde le bandeau de statut, le marque-page et la note lisibles par-dessus. */
.couverture.avec-image {
  padding: 0;
  background: #2c2014;
}

.couv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* léger voile en bas pour que les étoiles restent lisibles sur l'image */
.couv-voile {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
  pointer-events: none;
  z-index: 1;
}

.couv-bas-sur-image {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.6rem;
  z-index: 2;
}

/* ---------- Fiche : zone couverture ---------- */
.fiche-haut {
  display: flex;
  gap: 1.3rem;
  align-items: stretch;
  margin-bottom: 1.4rem;
}

.fiche-couv {
  flex: 0 0 110px;
  width: 110px;
  height: 165px;
  border-radius: 2px 4px 4px 2px;
  background: var(--couv-vide-fond);
  border: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25);
}

.fiche-couv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fiche-couv-vide {
  font-size: 0.72rem;
  text-align: center;
  color: var(--encre-doux);
  font-style: italic;
  line-height: 1.3;
}

.fiche-couv-cote {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 0.2rem;
}

.couv-aide {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--encre-doux);
  line-height: 1.45;
  margin-top: auto;
}

/* Bouton secondaire (contour, plus discret que le bordeaux plein) */
.btn-secondaire {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bordeaux);
  background: var(--champ-fond);
  border: 1px solid var(--bordeaux);
  border-radius: 3px;
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-secondaire:hover {
  background: var(--bordeaux);
  color: #fbf3e3;
}

.btn-secondaire:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Grille des couvertures proposées */
.couv-resultats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  padding: 1rem;
  background: var(--zone-fond);
  border: 1px solid var(--ligne);
  border-radius: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.couv-resultats[hidden] {
  display: none;
}

.couv-resultats .couv-choix {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 2px;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s, border-color 0.12s;
}

.couv-resultats .couv-choix:hover {
  transform: scale(1.05);
}

.couv-resultats .couv-choix.choisie {
  border-color: var(--bordeaux);
  box-shadow: 0 0 0 3px rgba(124, 45, 45, 0.25);
}

.couv-resultats .couv-info {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--encre-doux);
  text-align: center;
  padding: 0.4rem;
}

.fiche-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.3rem;
}

.fiche-duree {
  grid-column: 1 / -1;
  margin-top: -0.3rem;
  color: var(--laiton-clair);
  font-style: normal;
}

/* ---------- Proposition de genre ---------- */
/* Petit lien-bouton discret (souligné), sous un champ */
.lien-action {
  align-self: flex-start;
  margin-top: 0.45rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-style: italic;
  color: var(--bordeaux);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lien-action:hover { color: var(--bordeaux-fonce); }
.lien-action:disabled { opacity: 0.6; cursor: wait; }

.genre-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.genre-suggestions[hidden] {
  display: none;
}

.petite-info {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--encre-doux);
}

.puce-genre {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--encre);
  background: var(--zone-fond);
  border: 1px solid var(--laiton);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.puce-genre:hover {
  background: var(--laiton);
  color: var(--champ-fond);
}

/* ---------- Suggestions de lectures similaires ---------- */
.suggestions-zone {
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--ligne);
}

.similaires-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}
.similaires-grille[hidden] {
  display: none;
}

.carte-sugg {
  display: flex;
  flex-direction: column;
  background: var(--zone-fond);
  border: 1px solid var(--ligne);
  border-radius: 4px;
  padding: 0.7rem;
  gap: 0.55rem;
}

.sugg-couv {
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--couv-vide-fond);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sugg-couv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sugg-vide {
  font-family: var(--serif-titre);
  font-size: 1.6rem;
  color: var(--encre-doux);
}

.sugg-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 auto;
}

.sugg-titre {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}

.sugg-auteur {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--encre-doux);
}

.sugg-ajouter {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bordeaux);
  background: var(--champ-fond);
  border: 1px solid var(--bordeaux);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.sugg-ajouter:hover {
  background: var(--bordeaux);
  color: var(--champ-fond);
}

.sugg-ajouter:disabled {
  border-color: #4f8a4a;
  color: #4f8a4a;
  background: var(--champ-fond);
  cursor: default;
}

.sugg-resume-btn {
  margin-top: 0 !important;
  align-self: flex-start;
}

.sugg-resume {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--encre-doux);
  background: var(--champ-fond);
  border: 1px solid var(--ligne);
  border-radius: 3px;
  padding: 0.5rem 0.6rem;
  max-height: 160px;
  overflow-y: auto;
}

/* ---------- Bascule thème clair / sombre ---------- */
.bascule-theme {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1100;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: var(--papier-carte);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s;
}

.bascule-theme:hover { transform: scale(1.08); }

/* ---------- Onglets de navigation ---------- */
.onglets {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 880px;
  margin: 0 auto 2rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--ligne);
}

.onglet {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--encre-doux);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.7rem 1.2rem;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.onglet:hover { color: var(--encre); }

.onglet.actif {
  color: var(--bordeaux);
  border-bottom-color: var(--bordeaux);
}

/* ---------- Menu burger (mobile) ---------- */
/* Sur ordinateur le burger, le voile et le titre du menu restent cachés :
   c'est la barre d'onglets horizontale qui sert de navigation. */
.burger,
.menu-voile,
.menu-titre {
  display: none;
}

.burger {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1300;
  width: 42px;
  height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 50%;
  border: 1px solid var(--ligne);
  background: var(--papier-carte);
  cursor: pointer;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Auto-masquage : le burger s'efface quand on descend la page, revient en remontant */
.burger.burger-cache {
  transform: translateY(-80px);
  opacity: 0;
  pointer-events: none;
}

.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--encre);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}

/* Animation des trois traits vers une croix quand le menu est ouvert */
.burger.ouvert span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.burger.ouvert span:nth-child(2) {
  opacity: 0;
}
.burger.ouvert span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.menu-voile.ouvert {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1150;
  background: rgba(0, 0, 0, 0.45);
  animation: voileIn 0.25s ease both; /* @keyframes voileIn défini avec les modales */
}

/* ---------- Barre d'onglets en bas (mobile uniquement) ---------- */
.tabbar { display: none; }

@media (max-width: 720px) {
  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    align-items: stretch;
    justify-content: space-around;
    background: var(--papier-carte);
    border-top: 1px solid var(--ligne);
    box-shadow: 0 -6px 20px -8px rgba(0, 0, 0, 0.5);
    padding-bottom: env(safe-area-inset-bottom);   /* zone home indicator iPhone */
  }
  .tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 0.5rem 0.15rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--encre-doux);
    font-family: var(--sans);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tab svg { width: 24px; height: 24px; display: block; }
  .tab-label { font-size: 0.62rem; letter-spacing: 0.01em; line-height: 1; }
  .tab.actif { color: var(--laiton-clair); }
  .tab.actif .tab-label { font-weight: 600; }

  /* Bouton central « Ajouter » mis en avant (pastille bordeaux qui dépasse) */
  .tab-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -20px;
    border-radius: 50%;
    background: var(--bordeaux);
    color: #fff;
    border: 3px solid var(--papier-carte);
    box-shadow: 0 5px 14px -4px rgba(0, 0, 0, 0.5);
  }
  .tab-ajouter .tab-label { color: var(--encre-doux); }
  .tab-ajouter.actif .tab-fab { background: var(--bordeaux-fonce); }
  .tab-ajouter.actif .tab-label { color: var(--laiton-clair); }

  /* On laisse de la place en bas du contenu pour ne pas passer sous la barre */
  main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* Quand le menu « Plus » (panneau latéral) est ouvert, on efface la barre du bas */
  body.menu-ouvert .tabbar { display: none; }
}

/* ---------- Vues (contenu de chaque onglet) ---------- */
.vue {
  display: none;
  animation: vueIn 0.3s ease both;
}

.vue.active {
  display: block;
}

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

/* Tableau de bord (accueil) : stats + objectif regroupés */
.tableau-bord {
  text-align: center;
}

.tableau-bord .stats {
  margin-top: 0;
}

.tableau-bord .objectif {
  margin-bottom: 0;
}

/* ---------- Genre favori + objectif ---------- */
.genre-favori {
  text-align: center;
  font-style: italic;
  color: var(--encre-doux);
  font-size: 0.95rem;
  margin-top: 0.8rem;
  min-height: 1.2em;
}

.objectif {
  max-width: 420px;
  margin: 1.4rem auto 0;
}

.objectif-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.objectif-texte {
  font-size: 0.9rem;
  color: var(--encre-doux);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.objectif-edit {
  font-size: 0.85rem;
  color: var(--encre-doux);
}

.objectif-edit input {
  width: 4rem;
  padding: 0.2rem 0.4rem;
  display: inline;
}

.objectif-barre {
  height: 8px;
  background: var(--ligne);
  border-radius: 999px;
  overflow: hidden;
}

.objectif-jauge {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--laiton), var(--bordeaux));
  border-radius: 999px;
  transition: width 0.5s ease;
}

.objectif-jauge.atteint {
  background: linear-gradient(to right, #4f8a4a, var(--laiton));
}

/* ---------- Progression d'un livre (fiche) ---------- */
.bloc-progression .progression-champs {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.bloc-progression .champ-mini { flex: 1 1 0; }
.bloc-progression .champ-mini input {
  width: 100%;
}
.progression-barre {
  height: 8px;
  background: var(--ligne);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.progression-jauge {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--laiton), var(--bordeaux));
  border-radius: 999px;
  transition: width 0.5s ease;
}
.fiche-estimation {
  font-style: italic;
}
.sessions-bloc {
  margin-top: 10px;
}
.sessions-bloc summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--bordeaux);
}
.sessions-liste {
  list-style: none;
  padding: 8px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sessions-liste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--encre-douce, var(--encre));
}
.sessions-liste em {
  opacity: 0.7;
  font-style: normal;
}
.session-boutons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.session-edit,
.session-suppr,
.session-ok,
.session-annuler {
  border: none;
  background: none;
  color: var(--bordeaux);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.session-edit {
  color: var(--encre-doux, var(--encre));
  font-size: 0.95rem;
}
.session-edition {
  align-items: center;
}
.session-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.session-form input[type="date"] {
  font-size: 0.82rem;
  padding: 2px 4px;
}
.session-form input[type="number"] {
  width: 56px;
  font-size: 0.82rem;
  padding: 2px 4px;
}

/* ---------- Recommandations IA (onglet Mes envies) ---------- */
.reco-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.reco-texte {
  width: 100%;
  font-family: var(--sans, sans-serif);
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
  margin-bottom: 10px;
}
.reco-actions .btn-copie-ok {
  background: var(--laiton);
  color: #fff;
  border-color: var(--laiton);
}
.reco-message {
  margin-bottom: 12px;
}
.reco-resultats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.reco-carte {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--papier-carte);
  border: 1px solid var(--ligne-fort);
  border-radius: 10px;
}
.reco-carte-corps {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reco-titre {
  font-size: 1rem;
}
.reco-auteur {
  color: var(--encre-doux);
  font-size: 0.88rem;
}
.reco-raison {
  margin: 4px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.reco-ajouter {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- Fluidité (surtout mobile) ---------- */
/* Défilement inertiel iOS + on empêche le "scroll-chaining" (la page derrière
   qui bouge quand on arrive au bout d'une zone qui défile). */
.fiche,
.fiche-auteur,
.onglets,
.similaires-grille,
.couv-resultats,
.genre-suggestions {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-width: 720px) {
  /* Retour tactile instantané : l'élément "s'enfonce" légèrement sous le doigt. */
  .tab {
    transition: transform 0.12s ease, color 0.15s ease;
  }
  .tab:active {
    transform: scale(0.9);
  }
  .onglet:active,
  .btn-principal:active,
  .btn-secondaire:active,
  .seg-vue:active {
    transform: scale(0.97);
  }
  .couverture:active {
    transform: scale(0.97);
  }

  /* Cibles tactiles assez grandes (~40px) pour les petits boutons d'une session. */
  .session-edit,
  .session-suppr,
  .session-ok,
  .session-annuler {
    padding: 8px 9px;
    min-width: 40px;
  }

  /* Pas de flash gris au tap sur les zones cliquables. */
  button,
  .onglet,
  .tab,
  .couverture,
  .tranche,
  .seg-vue {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Respect du réglage système « réduire les animations » (confort / mal des transports). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Bloc lecture (accueil) : série + journal ---------- */
.lecture-tete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 14px;
}
.serie {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.serie-flamme { font-size: 1.4rem; }
.serie-num {
  font-family: var(--serif-titre, serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--bordeaux);
  line-height: 1;
}
.serie-mot { font-size: 0.95rem; }
.serie-info { margin: 0; }
.form-lecture > label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.lecture-champs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lecture-champs select { flex: 1 1 180px; min-width: 0; }
.lecture-champs #lecture-page { flex: 0 1 150px; min-width: 0; }
.lecture-champs .btn-principal { flex: 0 0 auto; }
.lecture-message { margin: 8px 0 0; }
.lecture-bilan { margin: 10px 0 0; font-style: italic; }

@media (max-width: 560px) {
  .lecture-champs { flex-direction: column; align-items: stretch; }
  .lecture-champs select,
  .lecture-champs #lecture-page,
  .lecture-champs .btn-principal { flex: 1 1 auto; width: 100%; }
}

/* ---------- Outils mini (filtres genre / note / tri) ---------- */
.champ-mini {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

.champ-mini select {
  width: auto;
  min-width: 120px;
}

.btn-pioche {
  align-self: flex-end;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--encre);
  background: var(--champ-fond);
  border: 1px solid var(--laiton);
  border-radius: 3px;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-pioche:hover {
  background: var(--laiton);
  color: #fffdf8;
}

/* ---------- Outils de données (export / import) ---------- */
.data-outils {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.data-sep { color: var(--encre-doux); }

/* ---------- Cœur (coup de cœur) ---------- */
.fiche-titre-ligne {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.coeur {
  flex: 0 0 auto;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--bordeaux);
  margin-top: 0.5rem;
  transition: transform 0.12s;
}

.coeur:hover { transform: scale(1.15); }
.coeur.actif { color: var(--bordeaux); }

.coeur-couv {
  position: absolute;
  bottom: 8px;
  right: 9px;
  z-index: 2;
  font-size: 0.95rem;
  color: #e85d5d;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* ---------- Infos du livre (année / pages) ---------- */
.infos-meta {
  font-size: 0.88rem;
  color: var(--encre-doux);
  font-style: italic;
  margin: 0.5rem 0;
}

/* ---------- Graphiques (page Statistiques) ---------- */
/* Histogramme par mois */
.graph-mois {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  height: 200px;
  padding-top: 0.5rem;
}

.gm-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 0.3rem;
}

.gm-bar {
  width: 70%;
  max-width: 36px;
  background: linear-gradient(to top, var(--bordeaux), var(--laiton));
  border-radius: 3px 3px 0 0;
  transition: height 0.4s ease;
}

.gm-val {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--bordeaux);
  min-height: 1em;
}

.gm-label {
  font-size: 0.7rem;
  color: var(--encre-doux);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Barres horizontales (genres, notes) */
.graph-barres {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.barre-ligne {
  display: grid;
  grid-template-columns: 110px 1fr 2rem;
  align-items: center;
  gap: 0.7rem;
}

.barre-label {
  font-size: 0.9rem;
  text-align: right;
  color: var(--encre);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barre-piste {
  height: 16px;
  background: var(--ligne);
  border-radius: 999px;
  overflow: hidden;
}

.barre-rempli {
  height: 100%;
  background: linear-gradient(to right, var(--laiton), var(--bordeaux));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.barre-val {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--bordeaux);
}

/* ---------- Note moyenne (page Statistiques) ---------- */
.stats-moyenne {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--encre);
  margin-bottom: 1.2rem;
}

.stats-moyenne strong {
  font-family: var(--serif-titre);
  font-size: 1.3rem;
  color: var(--bordeaux);
}

.stats-moyenne-sur {
  color: var(--encre-doux);
  font-size: 0.85rem;
  font-style: italic;
}

/* ---------- Objectifs par thème ---------- */
.objtheme-intro {
  margin-bottom: 1rem;
}

.objtheme-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}

.objtheme-form select {
  width: auto;
  min-width: 120px;
}

.objtheme-cible-bloc {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--encre-doux);
}

.objtheme-cible-bloc input {
  width: 4.5rem;
}

.objtheme-item {
  margin-bottom: 1rem;
}

.objtheme-tete {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.objtheme-nom {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 1rem;
  flex: 1 1 auto;
}

.objtheme-compte {
  font-family: var(--serif-titre);
  font-weight: 600;
  color: var(--bordeaux);
  font-size: 0.95rem;
}

.objtheme-suppr {
  background: none;
  border: none;
  color: var(--encre-doux);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}

.objtheme-suppr:hover {
  color: var(--bordeaux);
}

/* ---------- Ajout par ISBN / code-barres ---------- */
.isbn-intro {
  margin-bottom: 1rem;
}

.isbn-barre {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: stretch;
}

.isbn-barre input {
  flex: 1 1 200px;
}

.isbn-barre .btn-secondaire {
  flex: 0 0 auto;
}

.isbn-message {
  margin-top: 0.7rem;
}

/* Zone caméra pendant le scan */
.scan-zone {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--zone-fond);
  border: 1px solid var(--ligne);
  border-radius: 4px;
}

.scan-zone[hidden] {
  display: none;
}

#scan-video {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
  border-radius: 4px;
  border: 1px solid var(--ligne);
}

.scan-aide {
  text-align: center;
}

/* Aperçu du livre trouvé par ISBN */
.isbn-resultat {
  margin-top: 1.3rem;
}

.isbn-resultat[hidden] {
  display: none;
}

.isbn-apercu {
  display: flex;
  gap: 1.3rem;
  padding: 1.1rem;
  background: var(--zone-fond);
  border: 1px solid var(--ligne);
  border-radius: 4px;
}

.isbn-couv {
  flex: 0 0 96px;
  width: 96px;
  height: 144px;
  border-radius: 2px 4px 4px 2px;
  background: var(--couv-vide-fond);
  border: 1px solid var(--ligne);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.25);
}

.isbn-couv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.isbn-couv-vide {
  font-size: 0.72rem;
  text-align: center;
  color: var(--encre-doux);
  font-style: italic;
  line-height: 1.3;
}

.isbn-infos {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.isbn-titre {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.2;
}

.isbn-auteur {
  font-style: italic;
  color: var(--encre-doux);
}

.isbn-meta,
.isbn-genre-prop {
  font-size: 0.85rem;
  color: var(--encre-doux);
}

.isbn-ajout-ligne {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.8rem;
  flex-wrap: wrap;
}

.isbn-ajout-ligne select {
  width: auto;
  min-width: 130px;
}

/* ---------- Citation du jour (accueil) ---------- */
.panneau-citation {
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
}

.panneau-citation:hover {
  border-color: var(--laiton);
}

.panneau-citation[hidden] {
  display: none;
}

.panneau-citation::before {
  content: "\201C"; /* grand guillemet décoratif */
  display: block;
  font-family: var(--serif-titre);
  font-weight: 900;
  font-size: 3rem;
  line-height: 0.6;
  color: var(--laiton);
  margin-bottom: 0.5rem;
}

.citation-kicker {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--bordeaux);
  margin-bottom: 0.8rem;
}

.citation-jour {
  font-family: var(--serif-titre);
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--encre);
  white-space: pre-line;
  max-width: 42rem;
  margin: 0 auto;
}

.citation-jour-source {
  margin-top: 1rem;
  font-style: italic;
  color: var(--encre-doux);
  font-size: 0.95rem;
}

/* ---------- Carnet de citations (onglet) ---------- */
.carnet-recherche {
  margin-bottom: 1.6rem;
  max-width: 420px;
}

.carnet {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.carnet-livre {
  cursor: pointer;
  border-left: 3px solid var(--ligne);
  padding-left: 1.1rem;
  transition: border-color 0.15s;
}

.carnet-livre:hover {
  border-left-color: var(--laiton);
}

.carnet-tete {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.carnet-titre {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--encre);
}

.carnet-auteur {
  font-style: italic;
  color: var(--encre-doux);
  font-size: 0.9rem;
}

.carnet-citations {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.carnet-citation {
  font-family: var(--serif-texte);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--encre);
  white-space: pre-line;
  padding: 0.7rem 1rem;
  background: var(--zone-fond);
  border-radius: 3px;
}

/* ---------- Détail d'un mois (clic sur l'histogramme) ---------- */
.graph-aide {
  margin-bottom: 0.8rem;
}

.gm-col {
  cursor: pointer;
}

.gm-bar {
  transition: height 0.4s ease, filter 0.15s, box-shadow 0.15s;
}

.gm-col:hover .gm-bar {
  filter: brightness(1.18);
}

.gm-col.actif .gm-bar {
  box-shadow: 0 0 0 2px var(--laiton-clair);
}

.gm-col.actif .gm-label {
  color: var(--bordeaux);
  font-weight: 600;
}

.mois-detail {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ligne);
}

.mois-detail[hidden] {
  display: none;
}

.mois-detail-titre {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  text-transform: capitalize;
}

.mois-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mois-livre {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.5rem 0.7rem;
  background: var(--zone-fond);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s;
}

.mois-livre:hover {
  background: var(--champ-fond);
}

.mois-livre-jour {
  font-family: var(--serif-titre);
  font-weight: 600;
  color: var(--laiton);
  min-width: 1.6rem;
  text-align: center;
}

.mois-livre-titre {
  font-weight: 600;
  color: var(--encre);
}

.mois-livre-auteur {
  font-style: italic;
  color: var(--encre-doux);
  font-size: 0.9rem;
}

/* Barres « genre » et « note » cliquables */
.barre-ligne {
  cursor: pointer;
}

.barre-ligne.barre-vide {
  cursor: default;
}

.barre-ligne:not(.barre-vide):hover .barre-rempli {
  filter: brightness(1.18);
}

.barre-ligne.actif .barre-piste {
  box-shadow: 0 0 0 2px var(--laiton-clair);
}

.barre-ligne.actif .barre-label {
  color: var(--bordeaux);
  font-weight: 600;
}

/* ---------- Parcours / Timeline des lectures ---------- */
.parcours-intro {
  margin-bottom: 1.6rem;
}

.tl-annee {
  margin-bottom: 2rem;
}

.tl-annee:last-child {
  margin-bottom: 0;
}

.tl-annee-titre {
  font-family: var(--serif-titre);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--bordeaux);
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
}

.tl-annee-compte {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 400;
  color: var(--encre-doux);
}

.tl-liste {
  list-style: none;
  position: relative;
  margin-left: 0.4rem;
  padding-left: 1.6rem;
  border-left: 2px solid var(--ligne);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.tl-entree {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  cursor: pointer;
}

.tl-entree::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  margin-left: -6px;
  top: 50%;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--laiton);
  box-shadow: 0 0 0 3px var(--papier-carte);
}

.tl-couv {
  flex: 0 0 auto;
  width: 46px;
  height: 69px;
  border-radius: 2px 3px 3px 2px;
  overflow: hidden;
  background: var(--couv-vide-fond);
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
  display: block;
}

.tl-couv img,
.tl-couv-vide {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tl-corps {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.tl-date {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--laiton-clair);
}

.tl-titre {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.2;
}

.tl-auteur {
  font-style: italic;
  color: var(--encre-doux);
  font-size: 0.85rem;
}

.tl-meta {
  font-size: 0.8rem;
  color: var(--encre-doux);
}

.tl-entree:hover .tl-titre {
  color: var(--bordeaux);
}

/* ---------- Bascule étagère / liste + vue liste compacte ---------- */
.bascule-vue {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--encre);
  background: var(--champ-fond);
  border: 1px solid var(--ligne);
  border-radius: 3px;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.bascule-vue:hover {
  border-color: var(--laiton);
  color: var(--laiton-clair);
}

.liste-compacte {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lc-ligne {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.85rem;
  background: var(--zone-fond);
  border: 1px solid var(--ligne);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.12s;
}

.lc-ligne:hover {
  border-color: var(--laiton);
}

.lc-statut {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ligne);
}

.lc-statut.à-lire { background: var(--laiton); }
.lc-statut.en-cours { background: #3b8fa6; }
.lc-statut.terminé { background: #4f8a4a; }

.lc-corps {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.lc-titre {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lc-sous {
  color: var(--encre-doux);
  font-size: 0.85rem;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lc-note {
  flex: 0 0 auto;
  color: var(--laiton);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ---------- Compteurs des filtres + bannière pile à lire ---------- */
.filtre-compte {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.72rem;
  color: var(--encre-doux);
}

.filtre.actif .filtre-compte {
  color: var(--bordeaux);
}

.pile-banniere {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
  padding: 0.8rem 1.1rem;
  background: var(--zone-fond);
  border: 1px solid var(--laiton);
  border-radius: 4px;
}

.pile-banniere[hidden] {
  display: none;
}

#pile-texte {
  font-family: var(--serif-titre);
  font-size: 1.05rem;
  color: var(--encre);
}

/* ---------- Fiche auteur ---------- */
.fiche-auteur {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--ligne);
  text-underline-offset: 3px;
  transition: color 0.12s;
}

.fiche-auteur:hover {
  color: var(--bordeaux);
}

.auteur-bio {
  margin: 0.6rem 0 1.4rem;
}

.auteur-bio-texte {
  line-height: 1.6;
}

.auteur-photo {
  float: right;
  width: 110px;
  margin: 0 0 0.6rem 1rem;
  border-radius: 3px;
  border: 1px solid var(--ligne);
}

.auteur-soustitre {
  font-family: var(--serif-titre);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ligne);
  clear: both;
}

.auteur-livres {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.auteur-livre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.5rem 0.7rem;
  background: var(--zone-fond);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.12s;
}

.auteur-livre:hover {
  background: var(--champ-fond);
}

.auteur-livre-meta {
  color: var(--encre-doux);
  font-size: 0.82rem;
  white-space: nowrap;
}

/* ---------- Écran de connexion + barre de compte ---------- */
.ecran-connexion {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(227, 197, 119, 0.12), transparent 55%),
    var(--papier);
}

.ecran-connexion[hidden] {
  display: none;
}

.connexion-carte {
  max-width: 460px;
  text-align: center;
  background: var(--papier-carte);
  border: 1px solid var(--ligne);
  border-top: 5px solid var(--bordeaux);
  border-radius: 6px;
  padding: 2.6rem 2.2rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

.connexion-titre {
  font-family: var(--serif-titre);
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.05;
  margin: 0.5rem 0 0.8rem;
}

.connexion-texte {
  color: var(--encre-doux);
  line-height: 1.6;
  margin-bottom: 1.6rem;
}

.connexion-btn {
  font-size: 1rem;
  padding: 0.8rem 1.8rem;
}

.connexion-message {
  margin-top: 1rem;
  min-height: 1.2em;
}

.barre-compte {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--encre-doux);
  background: var(--papier-carte);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}

.barre-compte[hidden] {
  display: none;
}

.barre-compte .lien-action {
  margin: 0;
}

/* ---------- Réactif : menu burger + panneau latéral ---------- */
@media (max-width: 720px) {
  .burger { display: none; }   /* remplacé par la barre d'onglets en bas */

  /* La barre d'onglets devient un panneau qui glisse depuis la gauche */
  .onglets {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(80vw, 300px);
    max-width: none;
    margin: 0;
    padding: 4.5rem 1rem 1.5rem;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.2rem;
    background: var(--papier-carte);
    border-bottom: none;
    border-right: 1px solid var(--ligne);
    box-shadow: 6px 0 24px -8px rgba(0, 0, 0, 0.45);
    transform: translateX(-100%);
    transition: transform 0.28s ease;
    z-index: 1200;
    overflow-y: auto;
  }
  .onglets.ouvert { transform: translateX(0); }

  .menu-titre {
    display: block;
    font-family: var(--serif-titre);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre-doux);
    margin: 0 0 0.6rem 0.6rem;
  }

  .onglet {
    text-align: left;
    border-bottom: none;
    border-left: 3px solid transparent;
    border-radius: 4px;
    padding: 0.75rem 0.9rem;
    margin: 0;
    font-size: 1.1rem;
  }
  .onglet.actif {
    border-bottom-color: transparent;
    border-left-color: var(--bordeaux);
    background: var(--zone-fond);
  }

  /* Le compte se range en bas du panneau au lieu de flotter */
  .barre-compte {
    position: static;
    margin-top: auto;
    width: 100%;
    border-radius: 6px;
    justify-content: space-between;
  }

  /* On bloque le défilement de la page quand le menu est ouvert */
  body.menu-ouvert { overflow: hidden; }
}

/* Quand personne n'est connecté (écran de connexion), pas de burger */
body.deconnecte .burger { display: none; }

/* ---------- Réactif ---------- */
@media (max-width: 560px) {
  .form-grille,
  .fiche-controles,
  .fiche-grille {
    grid-template-columns: 1fr;
  }
  .stats { gap: 1.4rem; }
  .panneau { padding: 1.4rem 1rem; }

  /* Couvertures plus petites sur mobile : plusieurs livres par rangée */
  .etagere {
    --h-couv: 124px;
    --planche: 14px;
    justify-content: center;
    gap: 22px 12px;
    padding: 0.3rem 0 0.6rem;
  }
  .couverture {
    width: 80px;
    padding: 0.5rem 0.42rem 0.5rem 0.55rem;
    border-left-width: 4px;
    border-radius: 3px 5px 5px 3px;
  }
  .couv-titre { font-size: 0.72rem; line-height: 1.12; }
  .couv-auteur { font-size: 0.6rem; margin-top: 0.15rem; }
  .couverture .note { font-size: 0.62rem; letter-spacing: 0.5px; }
  .coeur-couv { font-size: 0.8rem; }

  .champ-mini select { min-width: 0; width: 100%; }
  .champ-mini { width: 100%; }
  .btn-pioche { align-self: stretch; }
  .isbn-apercu { flex-direction: column; }
  .isbn-couv { align-self: center; }
  .citation-jour { font-size: 1.15rem; }
}

/* ---------- Carte du monde des auteurs ---------- */
.carte-monde {
  width: 100%;
  margin: 1rem 0 1.4rem;
}
.carte-monde svg {
  width: 100%;
  height: auto;
  display: block;
}
.carte-monde svg g[id] path,
.carte-monde svg g[id] polygon {
  fill: var(--couv-vide-fond);
  stroke: var(--zone-fond);
  stroke-width: 0.4;
  transition: fill 0.25s;
}
/* Fond du SVG (rectangle + océan) : on neutralise le blanc d'origine */
.carte-monde svg #World {
  fill: transparent;
}
.carte-monde svg #Ocean {
  fill: var(--zone-fond);
  stroke: var(--ligne);
  stroke-width: 0.3;
}
/* Pays cliquables (ceux qui ont des auteurs) + pays sélectionné */
.carte-monde svg g.pays-actif {
  cursor: pointer;
}
.carte-monde svg g.pays-selection path,
.carte-monde svg g.pays-selection polygon {
  stroke: var(--bordeaux);
  stroke-width: 1.2;
}

/* ---------- Mes envies ---------- */
.envies-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.envie-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--zone-fond);
  border: 1px solid var(--ligne);
  border-radius: 4px;
}
.envie-couv {
  flex: 0 0 46px;
  width: 46px;
  height: 68px;
  border-radius: 2px 3px 3px 2px;
  overflow: hidden;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.25);
}
.envie-couv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.envie-couv-vide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--serif-titre);
  font-size: 1.3rem;
  color: #fbf3e3;
}
.envie-info {
  flex: 1 1 auto;
  min-width: 0;
}
.envie-item-titre {
  font-family: var(--serif-titre);
  font-weight: 600;
  margin: 0;
}
.envie-item-auteur {
  color: var(--encre-doux);
  font-style: italic;
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
}
.envie-raison {
  color: var(--encre-doux);
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
}
.envie-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.envie-actions button {
  white-space: nowrap;
  font-size: 0.82rem;
  padding: 0.4rem 0.7rem;
}

/* ---------- Défis de lecture ---------- */
.defis-resume {
  color: var(--encre-doux);
  font-style: italic;
  margin: 0 0 1rem;
}

.form-defi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
}
.form-defi[hidden] {
  display: none;
}
.form-defi input {
  flex: 1 1 200px;
  min-width: 0;
}
.form-defi .btn-principal {
  flex: 0 0 auto;
}

.defis-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.defi-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  background: var(--zone-fond);
  border: 1px solid var(--ligne);
  border-radius: 6px;
  transition: opacity 0.2s;
}
.defi-item.reussi {
  border-color: var(--laiton);
}

.defi-medaille {
  flex: 0 0 auto;
  font-size: 1.3rem;
  width: 1.8rem;
  text-align: center;
  color: var(--encre-doux);
}
.defi-item.reussi .defi-medaille {
  color: var(--laiton);
}

.defi-corps {
  flex: 1 1 auto;
  min-width: 0;
}
.defi-titre {
  font-family: var(--serif-titre);
  font-weight: 600;
  margin: 0;
}
.defi-desc {
  color: var(--encre-doux);
  font-size: 0.85rem;
  margin: 0.1rem 0 0.4rem;
}
.defi-corps .objectif-barre {
  margin-top: 0.3rem;
}

.defi-tag {
  display: inline-block;
  font-family: var(--sans, sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bordeaux);
  border: 1px solid var(--bordeaux);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.defi-compte {
  flex: 0 0 auto;
  font-family: var(--serif-titre);
  font-weight: 600;
  color: var(--encre-doux);
  white-space: nowrap;
}

.defi-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.defi-coche {
  font-family: var(--serif-titre);
  font-size: 0.8rem;
  color: var(--encre);
  background: var(--papier-carte);
  border: 1px solid var(--ligne);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.defi-coche:hover {
  border-color: var(--laiton);
}
.defi-coche.fait {
  color: #fbf3e3;
  background: #4f8a4a;
  border-color: #4f8a4a;
}
.defi-suppr {
  background: none;
  border: none;
  color: var(--encre-doux);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}
.defi-suppr:hover {
  color: var(--bordeaux);
}

/* ---- PWA installee (plein ecran) : respecter l'encoche / barre d'etat de l'iPhone ---- */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Les boutons flottants descendent sous l'encoche pour ne pas etre masques. */
  .burger,
  .bascule-theme {
    top: calc(1rem + env(safe-area-inset-top));
  }
}