/* ---------------------------------------------------------------- LE LIVRE (contrat v0.106)
   DEUX vues, et c'est une CLASSE qui décide, pas seulement la largeur — sinon on ne peut pas
   choisir (Samuel, 9 sept. : « faudrait une vue mobile et une vue livre »).
     · .vue-livre   : les pages à l'échelle. Double page au-delà de 1500 px, une page en
                      dessous — sous 1500 px la demi-page tombe à 750 px et le corps à 13 px.
     · .vue-lecture : le texte COULE, les photos prennent la largeur. On arrête de simuler
                      la feuille : sur un téléphone, une page à l'échelle donne du 9 px.
   Le défaut est posé par le JS selon la largeur ; le lecteur peut basculer.
   Le conteneur de requête est le CADRE, jamais la feuille : un élément ne peut pas être son
   propre conteneur, et les cqi retomberaient sur le viewport. */
.livre{display:flex;flex-direction:column;gap:14px;max-width:min(1680px,96vw);margin:0 auto;
  padding:0 16px}
.lv-table{background:#22262a;border-radius:8px;padding:clamp(12px,3vw,32px);display:flex;
  justify-content:center}
.lv-cadre{container-type:inline-size;width:100%}
.lv-cadre.court{width:100%}
@media (min-width:1501px){ .vue-livre .lv-cadre.court{width:50%} }
/* La couverture N'EST PAS une page comme les autres : dans un vrai livre elle est
   physiquement différente — plus grande, cartonnée. Elle prend donc toute la largeur,
   et sur la page publique elle déborde jusqu'aux bords de l'écran. */
.lv-page-couv{aspect-ratio:auto;height:clamp(360px,68vh,760px);font-size:clamp(13px,1.25vw,21px)}
.lv-table-couv{padding:0}
.lv-clair .lv-table-couv{width:100vw;margin-left:calc(50% - 50vw)}
.lv-clair .lv-page-couv{box-shadow:none}
.lv-feuille{background:#fff;color:#141518;width:100%;position:relative;
  box-shadow:0 18px 44px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.3)}
/* Sur la page publique (fond clair), le présentoir s'efface : le papier suffit. */
.lv-clair .lv-table{background:transparent;padding:0}
.lv-clair .lv-feuille{box-shadow:0 10px 30px rgba(20,22,26,.16),0 1px 3px rgba(20,22,26,.1)}
.lv-cliquable{cursor:pointer}
.lv-cliquable:focus-visible{outline:3px solid var(--acc,#ff385c);outline-offset:3px}
.lv-cliquable:hover{box-shadow:0 22px 54px rgba(0,0,0,.5),0 0 0 2px var(--acc,#ff385c)}
.lv-pliure{position:absolute;inset:0 calc(50% - 14px);pointer-events:none;z-index:3;
  background:linear-gradient(90deg,rgba(20,21,24,0),rgba(20,21,24,.09) 42%,
  rgba(20,21,24,.17) 50%,rgba(20,21,24,.09) 58%,rgba(20,21,24,0))}
.lv-photo{background-color:#e9ecee;position:relative;overflow:hidden;min-height:0}
/* Une <img> et non un background-image : c'est la seule façon d'avoir loading="lazy".
   Sans ça, 42 photos pleine taille partent d'un coup et le navigateur fige (9 sept.). */
.lv-photo>img{width:100%;height:100%;object-fit:cover;display:block}
.lv-surimp{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:4em 2.6em 2.4em;color:#fff;
  text-shadow:0 1px 14px rgba(8,10,12,.55);
  background:linear-gradient(0deg,rgba(10,12,14,.92),rgba(10,12,14,.66) 40%,
  rgba(10,12,14,.2) 76%,rgba(10,12,14,0))}
.lv-surimp h3{font-weight:800;font-size:2.6em;line-height:1.04;margin:.3em 0 0;
  letter-spacing:-.02em;color:#fff}
.lv-quand{font-size:.95em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.82}
/* La couverture : la photo prend la page au complet, le titre se pose dessus. Elle
   remplace le héros de la page publique — un seul objet, pas deux façons de l'ouvrir. */
.lv-couv{position:absolute;inset:0}
.lv-couv .lv-photo{width:100%;height:100%}
.lv-couv .lv-surimp{padding:4.5em 2.6em 2.4em}
.lv-marque{font-size:.88em;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  opacity:.76;margin-bottom:.5em}
.lv-couv h3{font-size:3em;line-height:1.02}
.lv-couv .lv-quand{margin-top:.8em;text-transform:none;letter-spacing:.01em;font-size:1em}
.lv-page{display:grid;grid-template-rows:1.35fr 1fr;height:100%;min-height:0}
.lv-page.lv-texte-seul{grid-template-rows:1fr}
.lv-pied{padding:2em 2.4em;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.lv-texte-seul .lv-pied{padding:2.6em 3em;justify-content:center}
.lv-fil{font-size:.9em;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc,#ff385c)}
.lv-pub{background:var(--acc-doux,#ffeff2);color:var(--acc,#ff385c);border-radius:4px;
  padding:.1em .5em;letter-spacing:.06em}
.lv-date{font-size:.88em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#9aa0a5;margin-top:.35em}
.lv-feuille h4{font-weight:800;font-size:1.95em;line-height:1.06;margin:.4em 0 0;
  letter-spacing:-.015em}
.lv-texte-seul h4{font-size:2.4em}
.lv-recit{font-size:1.06em;line-height:1.62;color:#3a3f44;margin:.9em 0 0;max-width:42em}
.lv-texte-seul .lv-recit{font-size:1.16em;line-height:1.7}
.lv-recit p{margin:0 0 .7em}
.lv-recit p:last-child{margin-bottom:0}
.lv-folio{position:absolute;bottom:1.5em;right:2.2em;font-size:.9em;font-weight:700;
  color:#9aa0a5;z-index:2}
/* la mosaïque prend la double page ; colonnes toujours PAIRES pour que le pli tombe dans
   une gouttière, et la case double reste sur la page de gauche */
.lv-mosaique{grid-column:1/-1;display:grid;grid-template-columns:repeat(var(--col),1fr);
  grid-auto-rows:1fr;gap:.5em;padding:.5em;background:#fff;height:100%;min-height:0}
.lv-mosaique .lv-photo{min-height:0}
.lv-mosaique .lv-large{grid-column:span 2}
.lv-attente-txt{display:flex;flex-direction:column;justify-content:center;padding:2.6em 3em;
  min-height:0}
.lv-attente-txt p{font-size:1.1em;line-height:1.6;color:#3a3f44;margin:.5em 0 0;max-width:26em}
.lv-invite{color:var(--acc,#ff385c);font-weight:700}
.lv-attente-grille{display:grid;grid-template-columns:repeat(10,1fr);gap:.45em;
  align-content:center;padding:2.2em 2.6em}
.lv-attente-grille span{aspect-ratio:1/1;background:#eceef0;border-radius:2px}
.lv-fin{display:flex;align-items:center;justify-content:center}
.lv-chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:3em;text-align:center}
.lv-chiffres b{display:block;font-size:3em;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums}
.lv-chiffres span{font-size:.95em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#9aa0a5}

/* ------------------------------- VUE LIVRE : les pages à l'échelle ------------------------ */
.vue-livre .lv-simple{aspect-ratio:1.414/1;font-size:1.8cqi}
.vue-livre .lv-double{aspect-ratio:2.828/1;font-size:.86cqi;display:grid;
  grid-template-columns:1fr 1fr}
@media (max-width:1500px){
  /* la demi-page tomberait sous 750 px et le corps sous 13 px : on déplie en UNE page,
     et le texte y gagne — il passe à 20 px. Jamais de glissement horizontal. */
  .vue-livre .lv-double{grid-template-columns:1fr;aspect-ratio:auto;font-size:1.72cqi;gap:1px;
    background-color:#e6e8ea}
  .vue-livre .lv-pliure{display:none}
  .vue-livre .lv-double>.lv-demi{aspect-ratio:1.414/1;background-color:#fff}
  .vue-livre .lv-mosaique{aspect-ratio:1.414/1}
}

/* ------------------------------- VUE LECTURE : le texte coule ----------------------------- */
.vue-lecture{padding:0;gap:0}
.vue-lecture .lv-table{padding:0;background:transparent;margin:0}
.vue-lecture .lv-cadre,.vue-lecture .lv-cadre.court{width:100%}
.vue-lecture .lv-feuille{box-shadow:none}
.vue-lecture .lv-simple{aspect-ratio:1.414/1;font-size:2.6cqi}
.vue-lecture .lv-double{display:block;aspect-ratio:auto;font-size:16px}
.vue-lecture .lv-pliure,.vue-lecture .lv-folio{display:none}
.vue-lecture .lv-page{display:block;height:auto}
.vue-lecture .lv-demi{aspect-ratio:auto}
.vue-lecture .lv-photo{aspect-ratio:1.414/1}
.vue-lecture .lv-pied,.vue-lecture .lv-texte-seul .lv-pied{padding:22px 18px 30px;display:block}
.vue-lecture .lv-fil,.vue-lecture .lv-date{font-size:11.5px}
.vue-lecture .lv-feuille h4,.vue-lecture .lv-texte-seul h4{font-size:23px;margin-top:6px}
.vue-lecture .lv-recit,.vue-lecture .lv-texte-seul .lv-recit{font-size:16px;line-height:1.65;
  max-width:none;margin-top:14px}
.vue-lecture .lv-mosaique{display:grid;grid-template-columns:repeat(2,1fr);aspect-ratio:auto;
  height:auto;gap:2px;padding:0}
.vue-lecture .lv-mosaique .lv-photo{aspect-ratio:1/1}
.vue-lecture .lv-mosaique .lv-large{grid-column:span 2;aspect-ratio:1.414/1}
.vue-lecture .lv-attente-txt{padding:22px 18px;font-size:16px}
.vue-lecture .lv-attente-grille{grid-template-columns:repeat(8,1fr);padding:0 18px 22px}
.vue-lecture .lv-chiffres b{font-size:38px}
.vue-lecture .lv-chiffres span{font-size:11.5px}
/* chaque journée reprend son souffle : un filet, pas une plaque */
.vue-lecture .lv-table+.lv-table{border-top:1px solid #e6e8ea}

/* ------------------------------- le sélecteur de vue -------------------------------------- */
.lv-vues{display:flex;gap:4px;justify-content:center;margin:14px auto;padding:4px;
  background:rgba(120,128,136,.14);border-radius:999px;width:max-content}
.lv-vues button{border:0;background:none;font-family:inherit;font-size:13px;font-weight:700;
  padding:7px 16px;border-radius:999px;cursor:pointer;color:inherit;opacity:.62}
.lv-vues button[aria-pressed="true"]{background:#fff;opacity:1;
  box-shadow:0 1px 3px rgba(20,22,26,.18)}
.lv-vues button:focus-visible{outline:2px solid var(--acc,#ff385c);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}