/* ============================================================
   OUT — ambiance « romantique douce »
   Toutes les couleurs sont ici : en changer une la change partout.
   ============================================================ */
:root {
  --fond: #FBF6F1;          /* crème */
  --carte: #FFFFFF;
  --texte: #3B2A2F;         /* brun-prune très foncé, plus doux que le noir */
  --texte-doux: #8A7479;
  --bordeaux: #8C2F4B;      /* couleur des actions */
  --bordeaux-fonce: #6E2239;
  --rose: #F3DCDF;          /* rose poudré */
  --rose-moyen: #E7B9C1;
  --bordure: #EDE1DC;
  --ombre: 0 2px 10px rgba(92, 45, 60, .08);
  --rayon: 16px;
  --police-titre: "Playfair Display", Georgia, "Times New Roman", serif;
  --police-texte: "Nunito", -apple-system, "Segoe UI", Roboto, sans-serif;
  --hauteur-nav: 64px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

/* ---------- livre ouvert coupé en deux, en fond de l'accueil ----------
   À GAUCHE de l'écran : la moitié DROITE du livre, reliure collée au bord gauche.
   À DROITE de l'écran : la moitié GAUCHE du livre, reliure collée au bord droit.
   Une page se soulève à gauche, s'envole par le bord gauche de l'écran… et revient
   par le bord droit pour se poser sur l'autre moitié, comme si l'écran s'enroulait autour du livre.
   Chaque moitié affiche la moitié utile du dessin (background-size 200 % + position gauche/droite). */
.livre-fond {
  position: fixed; top: 54%; z-index: -1; pointer-events: none;
  width: min(44vw, 300px, 39vh); aspect-ratio: 350 / 610;   /* 39vh : jamais plus haut que l'écran */
  transform: translateY(-50%);
  background: url("livre.svg?v=6") no-repeat;
  background-size: 200% 100%;
  perspective: 900px;                /* profondeur de la 3D : plus petit = page qui « sort » davantage */
}
.moitie-droite { left: 0;  background-position: right center; }
.moitie-gauche { right: 0; background-position: left center; }

.page-qui-tourne {
  position: absolute; inset: 0;
  background-repeat: no-repeat; background-size: 200% 100%;
  animation-duration: 9s; animation-iteration-count: infinite;
}
/* à gauche de l'écran : la page pivote sur le bord gauche (la reliure) et part vers la gauche */
.moitie-droite .page-qui-tourne {
  background-image: url("page-droite.svg?v=6"); background-position: right center;
  transform-origin: left center;
  animation-name: page-qui-part;
}
/* à droite de l'écran : la même page arrive par le bord droit et se pose */
.moitie-gauche .page-qui-tourne {
  background-image: url("page-gauche.svg?v=6"); background-position: left center;
  transform-origin: right center;
  animation-name: page-qui-arrive;
}

/* la page attend, se soulève et s'envole (accélère)… */
@keyframes page-qui-part {
  0%, 30%   { transform: rotateY(0deg); animation-timing-function: ease-in; }
  50%, 100% { transform: rotateY(-90deg); }
}
/* …puis, pile au même moment, surgit de l'autre bord et se pose (ralentit).
   Le recommencement est invisible : chaque page posée est identique au dessin du livre en dessous. */
@keyframes page-qui-arrive {
  0%, 50%   { transform: rotateY(90deg); animation-timing-function: ease-out; }
  70%, 100% { transform: rotateY(0deg); }
}

/* réglage iPhone « Réduire les animations » activé : le livre reste immobile */
@media (prefers-reduced-motion: reduce) {
  .page-qui-tourne { animation: none; }
  .moitie-gauche .page-qui-tourne { display: none; }
}

a { color: var(--bordeaux); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- structure ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1.2rem; padding-top: calc(.7rem + env(safe-area-inset-top));
  background: var(--fond);   /* opaque : le motif de fond ne passe pas derrière le bandeau */
  border-bottom: 1px solid var(--bordure);
}
.logo {
  font-family: var(--police-titre); font-weight: 700; font-size: 1.6rem;
  letter-spacing: .12em; color: var(--bordeaux);
}
.logo:hover { text-decoration: none; }
.logo span { color: var(--rose-moyen); }
.retour {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: -.4rem; border-radius: 50%;
  font-size: 2rem; line-height: 1; color: var(--bordeaux);
}
.retour:hover { background: var(--rose); text-decoration: none; }
/* en haut à droite : « Se connecter » ou « Mon compte » */
.lien-compte {
  margin-left: auto; padding: .35rem .9rem; border-radius: 999px;
  border: 1.5px solid var(--rose-moyen); color: var(--bordeaux); font-size: .88rem; font-weight: 700;
}
.lien-compte:hover { background: var(--rose); text-decoration: none; }

.contenu {
  max-width: 720px; margin: 0 auto;
  padding: 1.2rem 1.2rem calc(var(--hauteur-nav) + 2rem + env(safe-area-inset-bottom));
}

/* ---------- barre de navigation en bas ---------- */
.nav-bas {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-around;
  height: calc(var(--hauteur-nav) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--carte);
  border-top: 1px solid var(--bordure);
  box-shadow: 0 -2px 12px rgba(92, 45, 60, .06);
}
.onglet {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--texte-doux); font-size: .75rem; font-weight: 600;
}
.onglet:hover { text-decoration: none; color: var(--bordeaux); }
.onglet svg { width: 24px; height: 24px; }
.onglet.actif { color: var(--bordeaux); }
.onglet .pastille {
  position: absolute; top: 8px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bordeaux); color: white; font-size: .7rem; line-height: 18px; text-align: center;
}

/* ---------- titres & textes ---------- */
h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; line-height: 1.2; margin: 0 0 .6rem; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; margin-top: 1.8rem; }
.sous-titre { color: var(--texte-doux); margin: 0 0 1.4rem; }
.discret { color: var(--texte-doux); font-size: .9rem; }
.centre { text-align: center; }

/* ---------- accueil ---------- */
.accroche { text-align: center; padding: 1.5rem 0 .5rem; }
.accroche h1 { font-size: 2.2rem; }
/* phrase qui tient toujours sur une ligne : le texte rétrécit un peu sur les petits écrans */
.une-ligne { white-space: nowrap; font-size: clamp(.8rem, 4vw, 1.05rem); }

/* ---------- cartes ---------- */
.carte {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 1rem 1.1rem; margin-bottom: .8rem;
}
.liste-cartes { list-style: none; margin: 0; padding: 0; }
.ligne {
  display: flex; align-items: center; gap: .8rem;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: .85rem 1rem; margin-bottom: .7rem;
  color: var(--texte);
}
a.ligne:hover { text-decoration: none; border-color: var(--rose-moyen); }
.ligne .corps { flex: 1; min-width: 0; }
.ligne .nom { font-weight: 700; font-size: 1.05rem; }
.ligne .details { color: var(--texte-doux); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; }
.ligne .fleche { color: var(--rose-moyen); font-size: 1.3rem; }
.initiale {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rose); color: var(--bordeaux);
  font-family: var(--police-titre); font-weight: 700; font-size: 1.2rem;
}

/* ---------- boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.3rem; border-radius: 999px; border: 1.5px solid var(--bordeaux);
  background: var(--bordeaux); color: white;
  font-family: var(--police-texte); font-size: 1rem; font-weight: 700; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.bouton:hover { background: var(--bordeaux-fonce); border-color: var(--bordeaux-fonce); text-decoration: none; }
.bouton.secondaire { background: transparent; color: var(--bordeaux); }
.bouton.secondaire:hover { background: var(--rose); }
.bouton.petit { padding: .4rem .9rem; font-size: .85rem; }
.bouton.large { width: 100%; }
.bouton-texte {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--texte-doux); font-family: var(--police-texte); font-size: .88rem; text-decoration: underline;
}
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
.actions form { margin: 0; }

/* ---------- champs ---------- */
.champ {
  display: block; width: 100%; margin: .3rem 0 1rem;
  padding: .8rem 1rem; border: 1.5px solid var(--bordure); border-radius: 12px;
  background: var(--carte); color: var(--texte);
  font-family: var(--police-texte); font-size: 1rem;   /* 16px : évite le zoom automatique de l'iPhone */
}
.champ:focus { outline: none; border-color: var(--rose-moyen); box-shadow: 0 0 0 3px var(--rose); }
label.etiquette { display: block; font-weight: 700; font-size: .92rem; }

/* recherche + suggestions */
.recherche { position: relative; margin: 1.2rem 0; }
.recherche .champ { margin: 0; padding: 1rem 3.4rem 1rem 1.2rem; border-radius: 999px; font-size: 1.05rem; box-shadow: var(--ombre); }
.recherche .loupe {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--bordeaux); color: white; display: flex; align-items: center; justify-content: center;
}
.recherche .loupe svg { width: 20px; height: 20px; }
.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 10;
  list-style: none; margin: 0; padding: .3rem 0;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: 0 8px 24px rgba(92, 45, 60, .14); overflow: hidden;
}
.suggestions a { display: block; padding: .75rem 1.2rem; color: var(--texte); }
.suggestions a:hover, .suggestions a:focus { background: var(--rose); text-decoration: none; }
.suggestions .nb { color: var(--texte-doux); font-size: .85rem; }

/* ---------- puces (langues, raccourcis) ---------- */
.puces { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 1rem; }
.puce {
  display: inline-block; padding: .35rem .9rem; border-radius: 999px;
  background: var(--rose); color: var(--bordeaux); font-size: .88rem; font-weight: 600;
}
a.puce:hover, button.puce:hover { text-decoration: none; background: var(--rose-moyen); }
button.puce { border: none; cursor: pointer; font-family: var(--police-texte); }

/* menu déroulant des langues (fiche livre) */
.choix-langue { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem;
                color: var(--texte-doux); font-size: .9rem; }
.choix-langue select {
  padding: .4rem 2rem .4rem .8rem; border-radius: 999px; border: 1.5px solid var(--rose-moyen);
  background: var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238C2F4B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right .7rem center;
  color: var(--bordeaux); font-family: var(--police-texte); font-weight: 700; font-size: 1rem;
  -webkit-appearance: none; appearance: none;
}
.puce.active { background: var(--bordeaux); color: white; }

/* cases à cocher en forme de puces */
.cases { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0 1.4rem; }
.case input { position: absolute; opacity: 0; pointer-events: none; }
.case span {
  display: inline-block; padding: .55rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--bordure); background: var(--carte); font-weight: 600; font-size: .95rem;
}
.case span small { color: var(--texte-doux); font-weight: 400; }
.case input:checked + span { background: var(--bordeaux); border-color: var(--bordeaux); color: white; }
.case input:checked + span small { color: var(--rose); }
.case input:focus-visible + span { box-shadow: 0 0 0 3px var(--rose-moyen); }

/* ---------- page auteur ---------- */
.bandeau-auteur { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.bandeau-auteur .initiale { width: 64px; height: 64px; font-size: 1.8rem; }
.bandeau-auteur h1 { margin: 0; }
.statut-suivi { color: var(--bordeaux); font-weight: 700; margin: 0; }

.tableau-defilant { overflow-x: auto; margin: 1rem 0; border-radius: var(--rayon); box-shadow: var(--ombre); }
.tableau {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden;
  font-size: .93rem;
}
.tableau th {
  background: var(--rose); color: var(--bordeaux); text-align: left; white-space: nowrap;
  padding: .7rem .9rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
}
.tableau td { padding: .75rem .9rem; border-top: 1px solid var(--bordure); vertical-align: top; }
.tableau td:not(:first-child) { white-space: nowrap; }
.tableau td:first-child a { color: var(--texte); font-weight: 700; }
.tableau tr:hover td { background: #FDF9F7; }
.a-venir { display: inline-block; margin-left: .3rem; padding: 0 .5rem; border-radius: 999px;
           background: var(--rose); color: var(--bordeaux); font-size: .72rem; font-weight: 700; }

/* ---------- mini-fenêtre (dialog) ---------- */
dialog.fenetre {
  width: min(92vw, 420px); max-height: 80vh; overflow: auto;
  border: none; border-radius: 20px; padding: 1.4rem;
  background: var(--fond); color: var(--texte); box-shadow: 0 12px 40px rgba(59, 42, 47, .25);
}
dialog.fenetre::backdrop { background: rgba(59, 42, 47, .45); }
dialog.fenetre h3 { font-size: 1.2rem; }

/* ---------- fiche livre ---------- */
.fiche { display: flex; gap: 1.2rem; align-items: flex-start; margin: 1rem 0; }
.couverture {
  flex: none; width: 38%; max-width: 190px; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(59, 42, 47, .28);
}
.couverture-vide {
  flex: none; width: 38%; max-width: 190px; aspect-ratio: 2 / 3; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 2.5rem;
  background: var(--rose); color: var(--bordeaux);
}
.fiche h1 { font-size: 1.6rem; margin-bottom: .3rem; }
.fiche .infos p { margin: .35rem 0; }
.resume { line-height: 1.7; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.note {
  background: var(--rose); color: var(--bordeaux-fonce); border-radius: 12px;
  padding: .6rem .9rem; font-size: .88rem; margin: .5rem 0 1rem;
}

/* ---------- alertes ---------- */
.nouveau {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px; margin-left: .4rem;
  background: var(--bordeaux); color: white; font-size: .7rem; font-weight: 700; vertical-align: middle;
}

/* ---------- états vides & pied de page ---------- */
.vide { text-align: center; padding: 2.5rem 1rem; color: var(--texte-doux); }
.vide .grand { font-size: 2.6rem; display: block; margin-bottom: .5rem; }
.pied { margin-top: 2rem; padding-top: 1rem; border-top: 1px dashed var(--bordure);
        color: var(--texte-doux); font-size: .88rem; }
.pied a { color: var(--texte-doux); text-decoration: underline; }

/* ---------- écrans larges (ordinateur) ---------- */
@media (min-width: 760px) {
  h1 { font-size: 2.3rem; }
  .accroche h1 { font-size: 2.8rem; }
  .couverture, .couverture-vide { width: 200px; }
}

/* ---------- téléphone : pas de livre, mais un personnage qui se promène ----------
   Le livre ne s'affiche que sur les écrans larges (ordinateur, tablette).
   Sur téléphone, un petit personnage lit en marchant sur le bandeau du bas :
   il sort par la droite et réapparaît à gauche. */
.promenade {
  position: fixed; left: 0; right: 0; z-index: 31; pointer-events: none;
  bottom: calc(var(--hauteur-nav) + env(safe-area-inset-bottom));   /* posé sur le bord du bandeau */
  height: 44px; overflow: hidden;                                     /* coupe le personnage aux bords de l'écran */
}
.promeneur {
  position: absolute; bottom: -1px; left: 0; width: 32px; height: 44px;
  animation: balade 30s linear infinite;          /* durée de la traversée : plus grand = plus lent */
}
.promeneur svg { width: 100%; height: 100%; animation: sautille .55s ease-in-out infinite alternate; }
.jambe { transform-origin: 20px 36px; animation: pas .55s ease-in-out infinite alternate; }
.jambe-b { animation-direction: alternate-reverse; }

@keyframes balade  { from { transform: translateX(-40px); } to { transform: translateX(100vw); } }
@keyframes sautille { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@keyframes pas     { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }

@media (max-width: 759px) {
  .livre-fond { display: none; }                  /* téléphone : pas de livre */
  .accroche { padding-top: 17vh; }                /* titre + recherche plus au centre de l'écran */
}
@media (min-width: 760px) {
  .promenade { display: none; }                   /* ordinateur : pas de personnage */
}
@media (prefers-reduced-motion: reduce) {
  .promeneur { animation: none; left: 16px; }
  .promeneur svg, .jambe { animation: none; }
}

/* ---------- encart « installer l'app » (accueil, téléphone) ---------- */
.installer { position: relative; display: flex; gap: .9rem; align-items: center; margin-top: 1.5rem; }
.installer[hidden] { display: none; }        /* « hidden » doit l'emporter sur display: flex */
.installer-icone { width: 52px; height: 52px; border-radius: 12px; flex: none; }
.installer p { margin: .3rem 0 0; }
.installer .fermer {
  position: absolute; top: .3rem; right: .5rem; border: none; background: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; color: var(--texte-doux);
}
.partager svg { width: 18px; height: 18px; vertical-align: -3px; color: var(--bordeaux); }
@media (min-width: 760px) {
  .installer { display: none; }               /* ordinateur : pas d'encart */
}