/* ============================================================================
   livre — LA PAGE DU LIVRE « MISSION CANADA », DANS LES DEUX LANGUES.
   (12/10/2026, refonte de la prise en main — lot 3)

   Mesure du 12/10, avant : au téléphone, la couverture remplissait TOUT le
   premier écran ; le titre arrivait à 751 px, le prix et le bouton bien plus
   bas. Une étiquette « Notre livre » au-dessus du titre, une autre « L'offre »,
   deux boutons rouges l'un sous l'autre, et le choix entre le livre seul et le
   livre + consultation se lisait comme deux encarts sans rapport.

   Téléphone : le titre d'abord, puis une vignette de la couverture à côté du
   prix ; les deux formules l'une sous l'autre ; une barre « Commander » fixe en
   bas, qui n'apparaît qu'une fois les formules dépassées et s'efface devant
   l'appel final. Ordinateur : la couverture reste en vue à gauche pendant la
   lecture, les deux formules côte à côte.
   Tout passe par les variables de css/styles.css — le thème nuit suit seul.
   ============================================================================ */

/* Les prix posés par js/iv-pay.js arrivent avec un <small> pour la devise :
   on le garde à la taille du texte, sinon il tombe sous 14 px sur téléphone. */
[data-ivpay-prix] small { font-size: 1em; }

/* 11/09/2026 (Alex) : la vraie 1re de couverture, à la place de celle dessinée
   en CSS, avec les coins et l'ombre de l'ancien cadre. */
.livre-cover-photo { display: block; width: 300px; max-width: 100%; }
.livre-cover-photo img { display: block; width: 100%; height: auto;
  border-radius: var(--r-sm) var(--r) var(--r) var(--r-sm); box-shadow: var(--shadow); }

.livre-section { padding-top: var(--sp-6); }
.livre-hero.livre-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.livre-hero > * { margin: 0; min-width: 0; }
.livre-hero > .livre-titre-page { order: -2; font-size: var(--fs-h2); letter-spacing: var(--tracking-title); line-height: 1.18; text-wrap: balance; }
.livre-hero > .livre-cover-wrap {
  order: -1; flex-direction: row; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
}
.livre-hero .livre-cover-wrap .livre-cover-photo { width: 92px; flex: none; }
.livre-faits { display: flex; flex-direction: column; gap: 2px; }
.livre-faits p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.livre-faits b { color: var(--ink); font-weight: 600; }
.livre-faits .livre-faits-prix { font-family: Sora, sans-serif; font-size: var(--fs-xl); font-weight: 700; color: var(--navy-dark); line-height: 1.2; }
.livre-faits .livre-faits-prix b { color: inherit; font-weight: 700; }
.livre-hero > .livre-pitch { margin: 0; }
.livre-hero > .livre-atouts { margin-top: var(--sp-1); }

/* Les deux formules : un choix, pas deux encarts. */
.livre-achat { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); scroll-margin-top: 96px; }
.livre-option {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
}
.livre-option.principale { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); box-shadow: var(--shadow-sm); }
.livre-option h2 { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--navy-dark); line-height: 1.35; text-wrap: balance; }
.livre-option .livre-option-prix { margin: 0; font-family: Sora, sans-serif; font-size: var(--fs-xl); font-weight: 700; color: var(--red-dark); line-height: 1.2; font-variant-numeric: tabular-nums; }
.livre-option .livre-option-prix s { margin-left: var(--sp-2); font-size: var(--fs-base); font-weight: 500; color: var(--muted); }
.livre-option p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.livre-option .btn { margin-top: auto; width: 100%; justify-content: center; }
.livre-option > p:last-of-type { margin-bottom: var(--sp-2); }
.livre-hero > .livre-livraison { font-size: var(--fs-sm); color: var(--muted); }
.livre-hero > .livre-bonplan {
  display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r); background: var(--amber-light); color: var(--amber-ink); font-size: var(--fs-sm); line-height: 1.55;
}
.livre-bonplan svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.livre-bonplan a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.livre-hero > .livre-voir-sommaire {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; justify-self: start;
  font-weight: 600; font-size: var(--fs-sm); color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px;
}
.livre-voir-sommaire svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 900px) {
  .livre-section { padding-top: var(--sp-8); }
  .livre-hero.livre-hero { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: var(--sp-8); row-gap: var(--sp-4); }
  .livre-hero > * { grid-column: 2; }
  .livre-hero > .livre-titre-page, .livre-hero > .livre-cover-wrap { order: 0; }
  .livre-hero > .livre-cover-wrap {
    grid-column: 1; grid-row: 1 / span 9; flex-direction: column; align-items: center;
    padding: 0; border: 0; background: none; position: sticky; top: 100px;
  }
  .livre-hero .livre-cover-wrap .livre-cover-photo { width: 300px; }
  .livre-faits { align-items: center; text-align: center; }
  .livre-achat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Les chapitres : une liste compacte au téléphone (avant : deux colonnes de
   cartes de 160 px). */
@media (max-width: 699px) {
  .livre-chapitres.services-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .livre-chapitres .service-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--sp-3); padding: var(--sp-4); align-items: start; }
  .livre-chapitres .service-card .service-icon { grid-row: span 2; width: 48px; height: 48px; margin: 0; }
  .livre-chapitres .service-card h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); }
  .livre-chapitres .service-card p { margin: 0; font-size: var(--fs-sm); }
}

/* La barre « Commander », au téléphone seulement (js/livre.js la montre). */
.livre-barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--line-strong);
  transform: translateY(0); transition: transform .28s var(--ease-out), visibility .28s;
}
.livre-barre[hidden] { display: flex; transform: translateY(110%); visibility: hidden; }
.livre-barre-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.livre-barre-txt b:first-child { font-family: Sora, sans-serif; font-size: var(--fs-base); color: var(--navy-dark); }
.livre-barre-txt span { font-size: var(--fs-sm); color: var(--muted); }
.livre-barre-txt span b { color: var(--red-dark); }
.livre-barre .btn { flex: none; width: auto; min-height: 44px; }
body.livre-barre-ouverte .wa-float { bottom: 88px; }
@media (min-width: 768px) { .livre-barre { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .livre-barre { transition: none; } }