/* ============================================================
   برنامج الأحرار 2026-2031 — Landing
   Vocabulaire graphique repris du Book VA_DEF.pdf :
   · ouvertures de chapitre à double titre (kicker + titre)
   · encadrés crème à bandeau doré « ما الذي يقدمه الإجراء »
   · colonnes de triangles ascendants en marge
   · titres courants (runheads) et folios en carré coloré
   · code couleur par engagement : cyan / navy / or
   ============================================================ */

:root {
  --cyan: #00ADEF;
  --cyan-mid: #5ECBF5;
  --cyan-pale: #E9F7FE;
  --navy: #0B2D6E;
  --navy-deep: #071C46;
  --gold: #F4C430;
  --cream: #FDF6E3;
  --cream-line: #EBD9A4;
  --lilac-pale: #ECE9F6;
  --green: #12A672;
  --white: #fff;
  --paper: #F6F9FB;
  --ink: #16213E;
  --ink-soft: #4C5A6E;
  --rule: rgba(11, 45, 110, .12);

  /* Couleur d'accent, redéfinie par chapitre */
  --accent: var(--cyan);

  --font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --wrap: min(1080px, 90vw);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --head-h: 76px;
}

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

/* +1px : l'en-tête collant ajoute une bordure basse à sa hauteur déclarée */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 1px); }

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--navy); text-decoration: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
b, strong { font-weight: 800; color: var(--navy); }

.wrap { width: var(--wrap); margin-inline: auto; }

/* Chiffres, dates et pourcentages : lecture latine */
.num { unicode-bidi: isolate; direction: ltr; }
.range { white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; inset-inline-start: 1rem; z-index: 999;
  background: var(--gold); color: var(--navy);
  padding: .6rem 1.2rem; font-weight: 800;
}
.skip-link:focus { top: .75rem; }

/* ─────────── En-tête ─────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; min-height: var(--head-h);
}

.brand { display: flex; align-items: center; }
/* Signature horizontale composée à partir du logo officiel vertical :
   voir assets/build-header-logo.py. La hauteur pilote la largeur. */
/* La signature est large : elle doit se réduire sur petits écrans pour laisser
   la place au bouton hamburger sans déborder. 34px reste lisible pour l'arabe. */
.brand-logo { height: clamp(34px, 8.5vw, 48px); width: auto; flex: none; }

.nav { display: flex; gap: 1.4rem; }

.nav a {
  position: relative;
  font-size: .84rem; font-weight: 700; color: var(--navy);
  padding-block: .35rem; white-space: nowrap;
}
.nav a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0;
  height: 2px; background: var(--cyan);
  transform: scaleX(0); transition: transform .22s var(--ease);
}
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; background: none; border: 0; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--navy);
  transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─────────── Couverture ───────────
   La bannière porte déjà sa propre bande cyan : fond neutre pour
   ne pas la noyer dans un second aplat de la même couleur. */
.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: clamp(2rem, 5vw, 3.5rem) 1rem clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1.75rem, 4vw, 2.5rem);
}

.hero-cover { width: min(1150px, 100%); }
.hero-cover picture { display: block; }
.hero-cover img { width: 100%; box-shadow: 0 18px 48px rgba(4, 30, 60, .18); }

.hero-actions {
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem; width: min(1150px, 100%);
}

.hero-label {
  font-size: .78rem; font-weight: 800; letter-spacing: .14em;
  color: var(--ink-soft);
}

.hero-btns {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
}

/* Boutons de consultation des deux versions du programme */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.5rem;
  font-family: inherit; font-size: .95rem; font-weight: 800;
  border: 2px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-ico { width: 19px; height: 19px; flex: none; }
.btn-meta {
  font-size: .72rem; font-weight: 700; opacity: .72;
  padding-inline-start: .5rem;
  border-inline-start: 1px solid currentColor;
}

.btn--solid { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--cyan); border-color: var(--cyan); color: var(--white); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--navy); color: var(--white); }

.hero-cue {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--ink-soft); font-weight: 800; font-size: .85rem;
  padding: .35rem .5rem;
  transition: color .25s var(--ease);
}
.hero-cue svg { width: 17px; height: 17px; animation: nudge 2.4s var(--ease) infinite; }
.hero-cue:hover { color: var(--cyan); }

@keyframes nudge {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(4px); }
}

/* ─────────── Feuillets (pages du book) ─────────── */
.sheet { padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.sheet--pale { background: var(--paper); }
.sheet--navy { background: var(--navy); color: rgba(255, 255, 255, .86); }

/* Couleur d'accent et panneau d'ouverture par chapitre.
   --panel / --panel-num relevés au pixel dans le PDF. */
.chapter--intro {
  --accent: var(--cyan);
  --panel: #00AAE8; --panel-num: #2DB9EC; --panel-ink: var(--white);
}
.chapter--c1 {
  --accent: var(--cyan);
  --panel: #00AAE8; --panel-num: #2DB9EC; --panel-ink: var(--white);
}
.chapter--c2 {
  --accent: var(--navy);
  --panel: #211F68; --panel-num: #484783; --panel-ink: var(--white);
}
.chapter--c3 {
  --accent: var(--gold);
  --panel: #FEC800; --panel-num: #D1A52D; --panel-ink: var(--navy);
}

/* Le chapitre porte son ouverture à fond perdu : pas de retrait en tête */
.chapter { padding-top: 0; }

/* Titre courant, comme en haut des pages du book */
.runhead {
  font-size: .7rem; font-weight: 800; color: var(--navy);
  letter-spacing: .02em;
  padding-bottom: .6rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}
.runhead--light { color: var(--cyan-mid); border-bottom-color: rgba(255, 255, 255, .18); }

/* ─────────── Ouverture de chapitre pleine largeur ───────────
   Reprise des pages 53 / 87 / 147 du book : photo à fond perdu et
   panneau de couleur portant le chiffre géant en filigrane.
   Couleurs relevées directement dans le PDF. */
.copener {
  display: grid;
  grid-template-columns: minmax(220px, 28%) 1fr;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* C'est le panneau qui fixe la hauteur de la rangée : la photo la remplit
   ensuite en recadrant, quel que soit le format du fichier source. */
.copener-panel {
  position: relative; overflow: hidden;
  min-height: clamp(300px, 40vw, 480px);
  background: var(--panel);
  padding: clamp(1.4rem, 2.6vw, 2.25rem);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(.5rem, 1.6vw, 1.1rem);
}

/* Deux rangées de triangles pointant vers le bas, en tête de panneau */
.copener-tris {
  display: block; width: min(9.5rem, 100%); height: 1.55rem;
  background: url("../assets/tri-down-gold.svg") no-repeat right top / contain;
}
.chapter--c3 .copener-tris { background-image: url("../assets/tri-down-navy.svg"); }

/* Chiffre en filigrane : même teinte que le panneau, luminosité contrastée */
.copener-num {
  font-size: clamp(5rem, 11vw, 9.5rem);
  font-weight: 900; line-height: .82;
  color: var(--panel-num);
  unicode-bidi: isolate; direction: ltr; text-align: start;
}

.copener-kicker {
  font-size: clamp(1.05rem, 2.1vw, 1.45rem);
  font-weight: 900; color: var(--panel-ink);
  margin-top: auto;
}

.copener-title {
  font-size: clamp(1.25rem, 2.5vw, 1.85rem);
  font-weight: 700; line-height: 1.4;
  color: var(--panel-ink);
}

.copener-photo { position: relative; overflow: hidden; }
.copener-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.copener-folio {
  position: absolute; bottom: .85rem; inset-inline-end: 1rem;
  font-size: .72rem; font-weight: 800;
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

/* Variante sans photo, pour la section Bilan déjà en navy */
.copener-flat {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  display: flex; flex-direction: column; gap: .6rem;
}
.copener-flat .copener-kicker { color: var(--cyan-mid); margin-top: 0; }
.copener-flat .copener-title { color: var(--white); font-weight: 900; }

/* Corps de texte en deux colonnes */
.cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: start;
}

.col-text > p { margin-bottom: 1rem; }
.col-text > p:last-child { margin-bottom: 0; }

.drop { font-size: 1.12rem; font-weight: 700; color: var(--navy); line-height: 1.7; }

/* Sous-titre en cyan, comme dans le book */
.sub-h {
  font-size: 1.05rem; font-weight: 800; color: var(--cyan);
  margin-bottom: .9rem;
}
.chapter--c3 .sub-h { color: #C79A08; }

/* Liste des mesures avec renvoi de page */
.measures { list-style: none; }

.measures > li {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem .9rem;
  border-inline-start: 3px solid var(--accent);
  background: var(--cyan-pale);
  margin-bottom: .4rem;
}
.chapter--c2 .measures > li { background: var(--lilac-pale); }
.chapter--c3 .measures > li { background: var(--cream); }

.m-n {
  flex: none; width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  background: var(--accent); color: var(--white);
  font-size: .8rem; font-weight: 900;
}
.chapter--c3 .m-n { color: var(--navy); }

.m-name { flex: 1; font-size: .95rem; font-weight: 800; color: var(--navy); }
.m-ref { font-size: .74rem; font-weight: 700; color: var(--ink-soft); }

/* Encadré crème à bandeau doré — dispositif clé du book */
.callout {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border: 1px solid var(--cream-line);
}

.callout-head {
  background: var(--gold); color: var(--navy);
  padding: .6rem 1.25rem;
  font-size: 1rem; font-weight: 900;
}

.callout-body { background: var(--cream); padding: 1.25rem 1.4rem; }
.callout-body > p { margin-bottom: .8rem; font-size: .95rem; }
.callout-body > p:last-child { margin-bottom: 0; }

.callout-lead {
  font-size: 1.05rem; font-weight: 900; color: var(--navy);
}

/* Bandeau de citation navy */
.quote-bar {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--navy); color: var(--white);
  padding: 1.4rem 1.75rem;
  border-inline-start: 5px solid var(--gold);
}
.quote-bar p { font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 800; line-height: 1.6; }
.quote-bar em { color: var(--gold); font-style: normal; }

/* Pied de feuillet : folio + mention + colombe */
.sheet-foot {
  display: flex; align-items: center; gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}

.sheet-foot img { opacity: .8; }
.sheet-foot--light { border-top-color: rgba(255, 255, 255, .18); }

.folio {
  flex: none;
  min-width: 2rem; height: 2rem; padding-inline: .35rem;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 900;
}
.folio--cyan { background: var(--cyan); color: var(--white); }
.folio--navy { background: var(--navy); color: var(--white); }
.folio--gold { background: var(--gold); color: var(--navy); }

.foot-brand {
  flex: 1;
  font-size: .74rem; font-weight: 700; color: var(--ink-soft);
}
.sheet-foot--light .foot-brand { color: rgba(255, 255, 255, .6); }

/* ─────────── Structure : 3 / 12 ─────────── */
.struct-head {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1.25rem; margin-bottom: 2rem;
}

.counters { display: flex; gap: .6rem; }

.counter {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .55rem 1.1rem; font-size: .9rem; font-weight: 800;
}
.counter b { font-size: 1.6rem; font-weight: 900; line-height: 1; }
.counter--navy { background: var(--navy); color: var(--white); }
.counter--navy b { color: var(--gold); }
.counter--gold { background: var(--gold); color: var(--navy); }
.counter--gold b { color: var(--navy); }

.struct-line { font-size: 1rem; color: var(--ink-soft); }

.map { list-style: none; display: grid; gap: .85rem; }

.map-row {
  display: grid; grid-template-columns: 15rem 1fr;
  border-inline-start: 5px solid var(--accent);
  background: var(--white);
  box-shadow: 0 1px 0 var(--rule);
}
.map-row--c1 { --accent: var(--cyan); }
.map-row--c2 { --accent: var(--navy); }
.map-row--c3 { --accent: var(--gold); }

.map-label {
  display: flex; align-items: center;
  padding: .9rem 1.1rem;
  font-size: .95rem; font-weight: 900; line-height: 1.45;
  color: var(--navy); background: var(--cyan-pale);
  transition: background .2s var(--ease);
}
.map-row--c2 .map-label { background: var(--lilac-pale); }
.map-row--c3 .map-label { background: var(--cream); }
.map-label:hover { background: var(--gold); color: var(--navy); }

.map-items { display: grid; grid-template-columns: repeat(4, 1fr); }

.map-items > span {
  display: flex; align-items: center; justify-content: center;
  padding: .8rem .5rem; text-align: center;
  font-size: .84rem; font-weight: 700; color: var(--ink-soft);
  border-inline-start: 1px solid var(--rule);
}
.map-items > span:first-child { border-inline-start: 0; }

/* ─────────── Chiffres clés ─────────── */
.figures {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255, 255, 255, .16);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.figure-cell { background: var(--navy); padding: 1.5rem 1.15rem; }

.figure-n {
  display: block;
  font-size: clamp(2rem, 4.4vw, 2.9rem); font-weight: 900;
  line-height: 1; color: var(--gold);
  /* .num impose direction:ltr, qui alignerait le chiffre à gauche
     alors que sa légende reste à droite en RTL */
  text-align: right;
}

.figure-cell dd { margin: .5rem 0 0; }
.figure-cell dd b { display: block; font-size: .88rem; color: var(--cyan-mid); }
.figure-cell dd span { display: block; font-size: .81rem; line-height: 1.55; color: rgba(255, 255, 255, .72); }

/* ─────────── Graphique ─────────── */
.cols--navy .col-text > p { margin-bottom: 1.35rem; }
.sheet--navy b { color: var(--white); }

.chart {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 1.4rem;
}

.chart-head { display: block; margin-bottom: 1.1rem; }
.chart-title { display: block; font-size: 1.1rem; font-weight: 900; color: var(--white); }
.chart-sub { display: block; font-size: .8rem; font-weight: 700; color: var(--cyan-mid); }

.chart-plot { display: flex; align-items: flex-end; gap: .4rem; height: 180px; padding-top: 2.5rem; }

.col-b {
  position: relative; flex: 1; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
}

.bar { display: block; height: var(--v); background: var(--green); border-radius: 2px 2px 0 0; }
.col-b--peak .bar { background: var(--gold); }

.yr { display: block; margin-top: .4rem; font-size: .66rem; font-weight: 700; text-align: center; color: rgba(255, 255, 255, .65); }

.peak-badge {
  position: absolute; left: 50%; bottom: var(--v);
  transform: translate(-50%, -.55rem);
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: var(--gold); color: var(--navy);
  border: 2px solid var(--navy); border-radius: 50%;
  font-size: .74rem; font-weight: 900;
}

.chart-foot {
  margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .83rem; font-weight: 700; color: var(--cyan-mid);
}

/* Liste à chevrons dorés */
.chev { list-style: none; display: grid; gap: 1rem; }

.chev > li {
  position: relative; padding-inline-start: 1.3rem;
  font-size: .93rem; line-height: 1.75;
}
.chev > li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: .7em;
  width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg);
}
.chev b { display: block; color: var(--gold); font-size: .98rem; }

/* ─────────── Clôture (dernière page du book) ─────────── */
.closing {
  background: var(--navy-deep); color: var(--white);
  padding: clamp(3.5rem, 8vw, 5.5rem) 0;
  text-align: center;
}

.closing-kicker {
  font-size: .8rem; font-weight: 800; letter-spacing: .2em;
  color: var(--cyan-mid); margin-bottom: 1rem;
}

.closing-slogan {
  font-size: clamp(1.9rem, 6vw, 3.4rem); font-weight: 900;
  line-height: 1.3; color: var(--white);
  margin-bottom: 1.75rem;
}

.closing-stat {
  max-width: 34rem; margin-inline: auto;
  font-size: .92rem; color: rgba(255, 255, 255, .75);
}
.closing-stat strong {
  display: block; font-size: 1.9rem; font-weight: 900;
  color: var(--gold); margin-bottom: .25rem;
}

/* ─────────── Pied de page ─────────── */
.site-footer { background: var(--navy); color: var(--white); padding: 2.5rem 0; }

.footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}

.footer-logo { width: 100px; }
.footer-mid { text-align: center; }
.footer-years { display: block; font-size: 1.3rem; font-weight: 900; color: var(--gold); }
.footer-name { font-size: .86rem; font-weight: 700; color: rgba(255, 255, 255, .7); }
.footer-slogan { font-size: 1.02rem; font-weight: 800; color: var(--cyan-mid); }

/* ─────────── Apparition au défilement ─────────── */
.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .reveal.visible { opacity: 1; transform: none; }

/* ─────────── Adaptatif ─────────── */
@media (max-width: 1000px) {
  .nav { gap: 1rem; }
  .nav a { font-size: .78rem; }
}

@media (max-width: 900px) {
  .nav {
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 16px 32px rgba(11, 45, 110, .1);
    max-height: 0; overflow: hidden;
    transition: max-height .3s var(--ease);
  }
  .nav a { padding: .85rem 5vw; font-size: .9rem; }
  .nav a::after { display: none; }
  .nav.open { max-height: 70vh; }
  .nav-toggle { display: flex; }

  .copener { grid-template-columns: 1fr; }
  .copener-panel { min-height: 0; padding: clamp(1.5rem, 5vw, 2rem); gap: .5rem; }
  .copener-num { font-size: clamp(4.5rem, 19vw, 8rem); }
  .copener-kicker { margin-top: .35rem; }
  /* En pile, la photo n'a plus de rangée pour la dimensionner */
  .copener-photo { height: clamp(210px, 46vw, 320px); }
  .cols { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .map-row { grid-template-columns: 1fr; }
  .map-items { grid-template-columns: repeat(2, 1fr); }
  .map-items > span:nth-child(odd) { border-inline-start: 0; }
  .map-items > span:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .hero-btns { flex-direction: column; align-items: stretch; width: 100%; }
  .btn { justify-content: center; padding: .8rem 1rem; }
  .figures, .map-items { grid-template-columns: 1fr; }
  .map-items > span { border-inline-start: 0; }
  .map-items > span + span { border-top: 1px solid var(--rule); }
  .chart-plot { gap: .2rem; }
  .yr { font-size: .58rem; }
  .footer-inner { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ─────────── Lecteur flipbook ─────────── */
body.flipbook-open { overflow: hidden; }

.flipbook {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: .75rem;
  background: rgba(7, 28, 70, .72);
  backdrop-filter: blur(8px);
}

.flipbook[hidden] { display: none !important; }

.flipbook-panel {
  display: flex; flex-direction: column;
  width: min(1180px, 100%);
  height: min(920px, 100%);
  background: #0a1f4a;
  color: var(--white);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.flipbook-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex: none;
  padding: .7rem 1rem;
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.flipbook-title {
  font-size: .95rem; font-weight: 800;
  line-height: 1.3; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.flipbook-bar-actions { display: flex; gap: .35rem; flex: none; }

.flipbook-icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 0; border-radius: 0;
  background: transparent; color: var(--white);
  cursor: pointer;
}
.flipbook-icon-btn svg { width: 22px; height: 22px; }
.flipbook-icon-btn:hover,
.flipbook-icon-btn:focus-visible { background: rgba(0, 173, 239, .25); color: var(--white); }
.flipbook-icon-btn:disabled {
  opacity: .35; cursor: default;
}
.flipbook-icon-btn:disabled:hover { background: transparent; }

.flipbook-zoom-label {
  font-size: .72rem; font-weight: 800;
  min-width: 2.6rem; text-align: center;
}
.flipbook-zoom-reset { width: auto; min-width: 40px; padding-inline: .35rem; }

.flipbook-stage {
  flex: 1; min-height: 0;
  display: flex;
  padding: 0;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.06), transparent 60%),
    #071833;
}

.flipbook-zoom-viewport {
  flex: 1; min-height: 0; min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  place-items: center;
  padding: .75rem;
  cursor: default;
}
.flipbook-zoom-viewport.is-zoomed { cursor: grab; }
.flipbook-zoom-viewport.is-panning { cursor: grabbing; }

.flipbook-zoom-sizer {
  position: relative;
  flex: none;
}

.flipbook-zoom-layer {
  transform-origin: 0 0;
  will-change: transform;
}

.flipbook-book {
  margin: 0 auto;
  flex: none;
  overflow: hidden;
}

.flipbook-book .stf__item,
.flipbook-book .stf__block {
  background: #fff;
}

.flipbook-page-sheet {
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

.flipbook-page-sheet img {
  display: block;
  width: 100%;
  height: 100%;
  /* Never stretch — letterbox if the slot drifts by a pixel */
  object-fit: contain;
  object-position: center;
  background: #fff;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.flipbook-progress {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; gap: .85rem;
  background: rgba(7, 28, 70, .88);
  padding: 2rem; text-align: center;
}
.flipbook-progress[hidden] { display: none !important; }
.flipbook-panel { position: relative; }

.flipbook-progress-track {
  width: min(320px, 70vw); height: 6px;
  background: rgba(255, 255, 255, .15);
  overflow: hidden; margin-inline: auto;
}
.flipbook-progress-bar {
  height: 100%; width: 0;
  background: var(--cyan);
  transition: width .2s linear;
}
.flipbook-progress-txt {
  font-size: .9rem; font-weight: 700; color: rgba(255,255,255,.9);
}

.flipbook-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; flex: none;
  padding: .65rem 1rem .85rem;
  background: rgba(255, 255, 255, .06);
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.flipbook-nav {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px;
  border: 2px solid rgba(255, 255, 255, .35);
  background: transparent; color: var(--white);
  cursor: pointer;
}
.flipbook-nav svg { width: 22px; height: 22px; }
.flipbook-nav:hover,
.flipbook-nav:focus-visible {
  border-color: var(--cyan); background: var(--cyan); color: var(--white);
}

.flipbook-page {
  min-width: 5.5rem; text-align: center;
  font-size: .9rem; font-weight: 800;
  color: rgba(255, 255, 255, .85);
}

@media (max-width: 560px) {
  .flipbook { padding: 0; }
  .flipbook-panel { width: 100%; height: 100%; }
  .flipbook-title { font-size: .82rem; }
  .flipbook-nav { width: 44px; height: 44px; }
}