/* =============================================================================
   La Sultane — Kiosque, lecteur feuilletable (maquette v1, mission M3)
   HTML/CSS/JS natif, ZÉRO dépendance, ZÉRO requête externe (règle du chantier).
   Coque bi-format §1.5 : une page est une IMAGE (archives) ou un FRAGMENT HTML
   (numéros natifs, M16) — la coque, le geste de tourne et les zones sont communs.
   HABILLAGE LA SULTANE (directive Houda 2026-07-19, « la liseuse doit être
   brandée ») : encre bordeaux profonde, vrai logo doré iridescent (recette
   maquette validée), typos de la charte auto-hébergées, boutons à contour
   iridescent — remplace l'habillage neutre provisoire de M3.
   ============================================================================= */

/* Typos de la charte (copies locales de la maquette validée, licences dans
   fonts/licences/) : Space Mono = étiquettes/compteur, Alegreya Sans = texte.
   Loverica sert le SVG du logo (texte vivant du bloc maquette). */
@font-face { font-family: "Loverica"; src: url("fonts/loverica-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("fonts/space-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --fond: #190b10;            /* encre bordeaux presque noire : NOTRE nuit, pas un charbon gris */
  --fond-2: #241017;
  --encre: #F2E7D8;           /* papier chaud */
  --encre-douce: #C2A99B;     /* taupe rosé */
  --bordeaux: #7B1D35;
  --or: #B08D57;
  --or-clair: #EAD3A0;
  --or-sombre: #8A6A2F;
  --accent: var(--or);
  --f-mono: "Space Mono", ui-monospace, SFMono-Regular, monospace;
  --f-texte: "Alegreya Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --barre-h: 3.6rem;
  --rayon: 3px;
  --ombre-page: 0 1.5rem 3rem rgba(0, 0, 0, .55);
  --z-zones: 5;
  --z-barre: 40;
  --z-panneau: 50;
  --z-loupe: 60;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-texte);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

.kl { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }

/* --- Barre supérieure ----------------------------------------------------- */
.kl-barre {
  height: var(--barre-h);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 .75rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0));
  z-index: var(--z-barre);
}
/* La marque : le VRAI logo (SVG maquette, doré iridescent + reflet).
   Depuis le 2026-08-02, c'est un LIEN vers l'accueil du site — Houda : « le logo,
   au niveau de la liseuse, cliquer dessus aurait dû ramener sur le site ». Cible
   tactile pleine hauteur de barre (≥ 44 px : la barre fait 3.25rem), pas de
   soulignement (c'est une image), et le doigt ne déclenche pas le zoom double-tape. */
.kl-marque {
  display: flex; align-items: center; flex: 0 0 auto;
  min-height: 2.75rem; min-width: 2.75rem;
  text-decoration: none; color: inherit;
  border-radius: var(--rayon);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.kl-marque svg { height: 2.3rem; width: auto; display: block;
  /* Le logo est un mot LATIN : en édition arabe, le dir="rtl" du lecteur
     réordonnait ses lettres hors du cadre de découpe — il n'en restait qu'une
     couronne et trois copeaux (le bug vécu par le SITE le 2026-08-02, même
     cause, même remède que global.css .brand__svg). Attrapé par la recette
     superviseur du lot logo latin, le jour même. */
  direction: ltr;
}
/* Le lien se voit : au survol la marque s'éclaire un peu, au clavier elle porte
   l'anneau doré comme tous les boutons de la barre. */
.kl-marque:hover { filter: brightness(1.12); }
.kl-marque:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.kl-numero {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-inline-end: auto;
  padding-inline-start: .35rem;
}
.kl-numero small { color: var(--encre-douce); opacity: .75; letter-spacing: .08em; }

/* Le choix de LANGUE (numéros trilingues) : FR · AR · EN, l'active en or. */
.kl-langues { display: flex; align-items: center; gap: 2px; margin-inline: .35rem; flex: 0 0 auto; }
.kl-langue {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 2px 2px 0 0;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--encre-douce);
  padding: .5rem .45rem .35rem;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.kl-langue:hover { color: var(--encre); }
.kl-langue[aria-pressed="true"] { color: var(--or-clair); border-bottom-color: var(--or); }
.kl-langue:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

.kl-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: .85rem;
  line-height: 1;
  padding: .5rem .6rem;
  border-radius: var(--rayon);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.25rem;
  min-width: 2.25rem;
  justify-content: center;
}
.kl-btn:hover { background: rgba(234,211,160,.08); }
.kl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kl-btn[aria-pressed="true"] { background: rgba(176,141,87,.16); }
.kl-btn svg { width: 1.15rem; height: 1.15rem; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Contour doré IRIDESCENT au survol (recette maquette « vaut pour tout le
   futur site » : anneau conic-gradient qui tourne, or profond → champagne →
   rosé → bordeaux), sur les boutons de la barre et les flèches. */
@property --ls-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.kl-btn, .kl-nav { position: relative; isolation: isolate; }
.kl-btn::before, .kl-nav::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  z-index: -1;
  --ls-angle: 0deg;
  background: conic-gradient(from var(--ls-angle),
    #8A6A2F 0%, var(--or) 16%, #E7CFA0 32%, var(--or) 48%,
    #C89A8A 62%, #7B1D35 76%, var(--or) 90%, #8A6A2F 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .22s ease;
  animation: ls-iridesce 5s linear infinite;
}
.kl-btn:hover::before, .kl-btn:focus-visible::before, .kl-btn[aria-pressed="true"]::before,
.kl-nav:hover::before, .kl-nav:focus-visible::before {
  opacity: 1;
  animation-duration: 2.2s;
}
@keyframes ls-iridesce { to { --ls-angle: 360deg; } }

/* --- Scène (le magazine) -------------------------------------------------- */
.kl-scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem clamp(.5rem, 4vw, 3.5rem);
  perspective: 2400px;
  perspective-origin: center 45%;
  touch-action: pan-y;
  /* En édition arabe, l'INTERFACE passe dir=rtl (barre, panneaux) mais la
     géométrie du feuilletage reste pilotée par `sens` dans lecteur.js : on
     fige donc la scène en ltr, sinon les deux inversions se doubleraient. */
  direction: ltr;
}

/* Le double-feuillet : deux demi-pages côte à côte, la reliure au centre. */
.kl-feuillet {
  position: relative;
  display: flex;
  height: 100%;
  max-height: 100%;
  transform-style: preserve-3d;
}
/* PAGE SEULE — la tourne est un FONDU en place (M39-bis, loi §8 « changement de
   page sans artefact visuel »). Le pli de coin est juste pour la DOUBLE page : en
   page seule il posait la page voisine à plat À CÔTÉ, montrant fugitivement une
   vraie double page (vécu Houda #105, prouvé à la sonde). En page seule on croise
   donc l'ancienne et la nouvelle AU MÊME emplacement — jamais deux pages côte à
   côte. Le voile porte un clone figé de la page qui part, et s'efface par-dessus. */
.kl-fond-voile {
  position: absolute;
  z-index: 9;
  pointer-events: none;
  opacity: 1;
  transition: opacity .19s ease;
}
@media (prefers-reduced-motion: reduce) { .kl-fond-voile { transition: none; } }
.kl-page {
  position: relative;
  height: 100%;
  background: var(--fond-2);
  box-shadow: var(--ombre-page);
  overflow: hidden;
}
.kl-page img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
/* Moitié VIDE d'un spread (face de la couverture, dos de la dernière page) :
   le slot garde sa largeur pour que la géométrie de la tourne ne saute pas. */
.kl-page.vide { background: transparent; box-shadow: none; }
.kl-feuillet.double .kl-page.vide::before,
.kl-feuillet.double .kl-page.vide::after { display: none; }
/* Dégradés de dos des pages, relevés au repos sur la démo Nat Geo (courbure
   du papier vers la reliure) : page de droite 80 % de large depuis la reliure,
   page de gauche 57 % — noir léger contre la reliure, filet de lumière, fondu. */
.kl-feuillet.double .kl-page.gauche { box-shadow: var(--ombre-page); }
.kl-feuillet.double .kl-page.gauche::after,
.kl-feuillet.double .kl-page.droite::before,
.kl-page.seule::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  pointer-events: none;
  z-index: 3;
}
.kl-feuillet.double .kl-page.gauche::after {
  right: 0; width: 57%;
  background: linear-gradient(to left, rgba(0,0,0,.15), rgba(255,255,255,.1) 16%, rgba(255,255,255,.1) 18%, rgba(0,0,0,0));
}
.kl-feuillet.double .kl-page.droite::before,
.kl-page.seule::before {
  left: 0; width: 80%;
  background: linear-gradient(to right, rgba(0,0,0,.17), rgba(255,255,255,.06) 15%, rgba(255,255,255,.06) 16%, rgba(0,0,0,0));
}

/* --- Pages NATIVES §1.5 (numéros codés, fragments HTML — câblé M26) --------
   Le fragment remplit la page ; ses styles (couleurs, polices, gabarits) sont
   portés par le base.css DU NUMÉRO, chargé dans la page partageable. La règle
   image générique ci-dessus (`.kl-page img { width:auto }`) ne doit PAS écraser
   le dimensionnement des images natives → on la neutralise dans une page HTML
   (base.css garde la main via ses sélecteurs plus spécifiques : .cv-img, .pn-img…). */
.kl-page-html { background: var(--fond-2); }
.kl-page-html .kl-fragment { width: 100%; height: 100%; }
/* ⚠ La feuille n'est PLUS étirée à 100 % : elle a désormais les dimensions du
   gabarit natif (900 × 1273, A4) et se met à l'échelle par `--k`. L'étirer la
   faisait se RECOMPOSER à chaque largeur de fenêtre — d'où une troisième colonne
   qui sortait du cadre et un texte dont la taille suivait l'écran (constaté par
   Houda le 2026-07-19). Le fragment, lui, occupe bien toute la page. */
.kl-page-html img { width: 100%; height: auto; }
/* Échec de chargement d'un fragment : message doux + réessayer, jamais silencieux. */
.kl-fragment-erreur { display: flex; align-items: center; justify-content: center; height: 100%; background: #f7f2ea; }
.kl-frag-msg { text-align: center; color: #6b5f50; padding: 1.5rem; }
.kl-frag-msg p { margin: 0 0 1rem; }
.kl-frag-reessai { background: #7B1D35; color: #fff; border: 0; border-radius: 8px;
  padding: .55rem 1.1rem; font-size: .95rem; cursor: pointer; }
.kl-frag-reessai:hover { filter: brightness(1.08); }

/* --- Zones cliquables (liens PDF + URLs détectées + zones manuelles) ------ */
/* La COUCHE ne capte rien : posée par-dessus la feuille (z-index 5), pleine et
   opaque aux clics, elle interceptait les liens d'une feuille HTML — notamment
   le SOMMAIRE cliquable (M39). Seules les zones réelles captent (pointer-events
   auto ci-dessous) ; ailleurs, le clic atteint le contenu (lien) ou la page (tourne). */
.kl-zones { position: absolute; inset: 0; z-index: var(--z-zones); pointer-events: none; }
.kl-zone {
  position: absolute;
  display: block;
  pointer-events: auto;
  border-radius: 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 140ms, box-shadow 140ms;
  padding: 0;
}
.kl-zone:hover,
.kl-zone:focus-visible {
  background: rgba(176,141,87,.20);
  box-shadow: 0 0 0 1.5px rgba(176,141,87,.65) inset;
  outline: none;
}
/* Petit repère de découvrabilité quand on demande à « voir les liens ». */
.kl-scene.montre-zones .kl-zone { background: rgba(176,141,87,.12); box-shadow: 0 0 0 1px rgba(176,141,87,.4) inset; }

/* --- La feuille qui tourne : PLI DE COIN, clone FlippingBook/Nat Geo ------ */
/* Architecture relevée à la sonde sur online.flippingbook.com/view/372486/
   (2026-07-19) : le masque de la feuille est une BANDE en diagonale de page
   pivotée sur le pli (son bord côté coin EST le pli) ; dedans, le recto est
   contre-tourné (immobile à l'écran), le verso tourne de 2θ et son coin suit
   le pointeur. lecteur.js pose les matrices et les dégradés à chaque frame ;
   tout est en transform-origin 0 0 (matrices complètes, zéro dérive). */
.kl-tourne {
  position: absolute;
  left: 0; top: 0;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}
.kl-tourne-face {
  position: absolute;
  left: 0; top: 0;
  overflow: hidden;
  transform-origin: 0 0;
  background: var(--fond-2);
  will-change: transform;
}
.kl-tourne-face img,
.kl-tourne-face .kl-face-html {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.kl-tourne-face .kl-face-html { overflow: hidden; }
.kl-tourne-face .kl-face-html .kl-fragment { width: 100%; height: 100%; }
/* Dégradé de dos statique d'une face volante (posé en inline par lecteur.js). */
.kl-dos-page { position: absolute; top: 0; bottom: 0; pointer-events: none; z-index: 3; }
/* Clips en coordonnées du feuillet : l'ombre portée sur la page révélée
   (`.dessous`, sous le masque) et l'ombre intérieure côté reliure (dans le
   masque) ne débordent jamais du livre. */
.kl-tourne-clip {
  position: absolute;
  left: 0; top: 0;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 0 0;
}
.kl-tourne-clip.dessous { z-index: 6; }
/* Bandes de dégradé alignées sur le pli (fond posé en inline à chaque frame). */
.kl-bande {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform, background;
}

/* --- Flèches de navigation (discrètes — le geste principal est la SOURIS :
   clic sur la page ou drag du coin ; la flèche reste pour qui la veut) ------ */
.kl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 2.5rem; height: 3.5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--encre-douce);
  opacity: .38;
  display: grid; place-items: center;
  cursor: pointer;
  transition: opacity .18s ease, color .18s ease, transform .18s ease;
}
.kl-nav:hover { opacity: 1; color: var(--or-clair); }
.kl-nav.prec:hover { transform: translateY(-50%) translateX(-2px); }
.kl-nav.suiv:hover { transform: translateY(-50%) translateX(2px); }
.kl-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
.kl-nav[disabled] { opacity: .1; pointer-events: none; }
.kl-nav.prec { left: .3rem; }
.kl-nav.suiv { right: .3rem; }
.kl-nav svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --- Plein écran (M39-quater) : commande au COIN BAS-DROIT ------------------
   Convention universelle des lecteurs (YouTube, lecteurs iOS/Android, Video.js
   à right/bottom ~10px). Ancrée DANS la scène → toujours au-dessus de la
   pagination (qui vit dans .kl-pied, la rangée du dessous) : aucun chevauchement
   possible, dans toutes les langues (la scène est figée en ltr, donc le coin est
   physiquement à droite en fr comme en ar). Fond translucide pour rester lisible
   par-dessus une page claire comme un fond sombre. */
.kl-plein {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 20;
  background: rgba(20, 11, 13, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.kl-plein:hover { background: rgba(20, 11, 13, .74); }
/* En plein écran, la racine devient l'élément peint : sans fond explicite le
   navigateur remplit de noir autour. On pose NOTRE nuit bordeaux. */
.kl:fullscreen, .kl:-webkit-full-screen { background: var(--fond); }

/* Message maison quand l'atelier ne peut pas confirmer le back-office (M39-ter,
   reprise file:) : un bandeau dans la charte, centré bas, au-dessus de tout et
   visible en plein écran (il vit dans .kl). Pas un alert() brut. fr/ar/en, l'écrit
   suit le dir de la racine (rtl en arabe). Auto-effacé après quelques secondes. */
.kl-toast-editeur {
  position: absolute;
  left: 50%;
  bottom: 5rem;
  transform: translateX(-50%) translateY(.6rem);
  max-width: min(90%, 34rem);
  z-index: var(--z-loupe);
  background: var(--fond-2);
  color: var(--encre);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: .8rem 1.1rem;
  font-size: .92rem;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.kl-toast-editeur.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Les pages elles-mêmes sont cliquables (tourner) : la main le dit. */
.kl-feuillet .kl-page { cursor: pointer; }
.kl-feuillet .kl-page.vide { cursor: default; }

/* --- Pied : progression --------------------------------------------------- */
.kl-pied {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .4rem .9rem calc(.4rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
}
.kl-compteur {
  font-family: var(--f-mono);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--encre-douce);
  min-width: 5.5rem;
  white-space: nowrap;
}
/* Piste de progression : filet bordeaux → or, curseur champagne.
   En édition arabe, elle se remplit de droite à gauche (le dir hérité du
   lecteur inverse le curseur ; le dégradé suit). */
.kl-piste { flex: 1 1 auto; height: 1.5rem; display: flex; align-items: center; cursor: pointer; }
.kl[dir="rtl"] .kl-piste input { background: linear-gradient(to left, var(--bordeaux), var(--or)); }
.kl-piste input {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--bordeaux), var(--or));
  outline-offset: 4px;
  cursor: pointer;
}
.kl-piste input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--or-clair);
  border: 1px solid var(--or-sombre);
  box-shadow: 0 0 8px -2px rgba(234,211,160,.85);
  cursor: pointer;
}
.kl-piste input::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--or-clair);
  border: 1px solid var(--or-sombre);
  box-shadow: 0 0 8px -2px rgba(234,211,160,.85);
  cursor: pointer;
}
.kl-piste input:focus-visible { outline: 2px solid var(--or); }

/* --- Panneaux (vignettes + sommaire) ------------------------------------- */
.kl-panneau {
  position: absolute;
  z-index: var(--z-panneau);
  background: rgba(25,11,16,.97);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(234,211,160,.14);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.5);
  display: none;
}
.kl-panneau.ouvert { display: block; }

/* Vignettes : tiroir bas horizontal */
.kl-vignettes {
  left: 0; right: 0; bottom: 0;
  max-height: 42%;
  padding: .6rem;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.kl-vignette {
  display: inline-block;
  vertical-align: bottom;
  margin: 0 .3rem;
  padding: 0;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  border-radius: 2px;
}
.kl-vignette img { display: block; height: 8.5rem; width: auto; }
.kl-vignette figcaption { font-family: var(--f-mono); font-size: .66rem; color: var(--encre-douce); text-align: center; padding-top: .15rem; }
.kl-vignette[aria-current="true"] { border-color: var(--or); }
.kl-vignette:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Sommaire : tiroir latéral */
.kl-sommaire {
  top: var(--barre-h); bottom: 0; left: 0;
  width: min(21rem, 82vw);
  padding: .5rem 0;
  overflow-y: auto;
}
.kl-sommaire h2 { font-family: var(--f-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--or); padding: .5rem 1rem; margin: 0; }
.kl-toc-item {
  display: flex; justify-content: space-between; gap: .75rem;
  width: 100%;
  text-align: start;
  background: transparent; border: 0; color: var(--encre);
  font: inherit; font-size: .95rem;
  padding: .5rem 1rem;
  cursor: pointer;
}
.kl-toc-item:hover { background: rgba(123,29,53,.28); }
.kl-toc-item .p { font-family: var(--f-mono); font-size: .78rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.kl-toc-item.niv-2 { padding-left: 1.9rem; font-size: .84rem; }
.kl-toc-item.niv-3 { padding-left: 2.8rem; font-size: .82rem; color: var(--encre-douce); }

/* --- Menu de lecture (M39) : sommaire, option de lecture, langue, aller à ---
   Tiroir sobre déroulé sous la barre, à droite, dans la charte de la liseuse. */
.kl-menu {
  top: var(--barre-h); right: .4rem;
  width: min(20rem, 92vw);
  padding: .35rem 0 .5rem;
  border-radius: 0 0 var(--rayon) var(--rayon);
  overflow-y: auto;
  max-height: calc(100dvh - var(--barre-h) - .5rem);
}
.kl[dir="rtl"] .kl-menu { right: auto; left: .4rem; }
.kl-menu-sec { padding: .5rem .9rem; border-top: 1px solid rgba(234,211,160,.08); }
.kl-menu-sec:first-child { border-top: 0; }
.kl-menu-sec h3 {
  font-family: var(--f-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--or); margin: 0 0 .5rem;
}
.kl-menu-modes { display: flex; gap: .4rem; }
.kl-menu-choix {
  flex: 1 1 auto;
  appearance: none; background: transparent;
  border: 1px solid rgba(176,141,87,.35); border-radius: var(--rayon);
  color: var(--encre); font: inherit; font-size: .82rem;
  padding: .5rem .5rem; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.kl-menu-choix:hover { background: rgba(234,211,160,.08); }
.kl-menu-choix[aria-pressed="true"] { background: rgba(176,141,87,.2); border-color: var(--or); color: var(--or-clair); }
.kl-menu-choix:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kl-menu-aller { display: flex; gap: .4rem; }
.kl-menu-page {
  flex: 1 1 auto; min-width: 0;
  appearance: none; background: rgba(0,0,0,.25);
  border: 1px solid rgba(176,141,87,.35); border-radius: var(--rayon);
  color: var(--encre); font: inherit; font-size: .9rem; padding: .45rem .6rem;
}
.kl-menu-page:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kl-menu-go {
  appearance: none; background: var(--bordeaux); border: 0; border-radius: var(--rayon);
  color: var(--encre); font-family: var(--f-mono); font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .45rem .8rem; cursor: pointer;
}
.kl-menu-go:hover { filter: brightness(1.12); }
.kl-menu-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kl-menu-langues { display: flex; gap: .3rem; }
/* Les entrées en toutes lettres du menu (« Voir le sommaire », et depuis le
   2026-08-02 les deux portes de sortie). Cible tactile de 44 px de haut : ce
   menu se lit au doigt, sur un téléphone, la plupart du temps. */
.kl-menu-lien {
  appearance: none; background: transparent; border: 0;
  color: var(--encre); font: inherit; font-size: .88rem;
  padding: .3rem 0; cursor: pointer; text-align: start; width: 100%;
  display: flex; align-items: center; min-height: 2.75rem;
  text-decoration: none;
  touch-action: manipulation;
}
.kl-menu-lien:hover { color: var(--or-clair); }
.kl-menu-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Les portes de sortie : un chevron discret dit « on part d'ici ». Il suit le
   sens de lecture (il pointe à gauche en français, à droite en arabe). */
.kl-menu-ailleurs .kl-menu-lien::before {
  content: "←"; color: var(--or); margin-inline-end: .5rem;
  font-family: var(--f-mono); flex: 0 0 auto;
}
.kl[dir="rtl"] .kl-menu-ailleurs .kl-menu-lien::before { content: "→"; }

/* --- Compteur SAISISSABLE en place (M39-bis, loi §8) --------------------- */
.kl-compteur { display: inline-flex; align-items: baseline; gap: .1rem; }
.kl-compteur-champ {
  width: 2.7em;
  appearance: none; -webkit-appearance: none; -moz-appearance: textfield;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(176,141,87,.4); border-radius: 4px;
  color: var(--or-clair);
  font: inherit; font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  text-align: center; padding: .05rem .1rem; cursor: text;
}
.kl-compteur-champ::-webkit-outer-spin-button,
.kl-compteur-champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kl-compteur-champ:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }
.kl-compteur-paire, .kl-compteur-total { color: var(--encre-douce); }

/* --- Partage (M39-bis, loi §8 « partage à hauteur du papier ») ----------- */
.kl-partage {
  top: var(--barre-h); right: .4rem;
  width: min(21rem, 92vw);
  padding: .35rem 0 .5rem;
  border-radius: 0 0 var(--rayon) var(--rayon);
  overflow-y: auto;
  max-height: calc(100dvh - var(--barre-h) - .5rem);
}
.kl[dir="rtl"] .kl-partage { right: auto; left: .4rem; }
.kl-part-btn {
  display: block; width: 100%; text-align: start;
  appearance: none; background: transparent;
  border: 1px solid rgba(176,141,87,.35); border-radius: var(--rayon);
  color: var(--encre); font: inherit; font-size: .9rem;
  padding: .55rem .7rem; margin-bottom: .4rem; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.kl-part-btn:last-child { margin-bottom: 0; }
.kl-part-btn:hover { background: rgba(234,211,160,.08); border-color: var(--or); color: var(--or-clair); }
.kl-part-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kl-part-plage { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.kl-part-lab { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--encre-douce); }
.kl-part-de, .kl-part-a {
  width: 3.4em; appearance: none; -moz-appearance: textfield;
  background: rgba(0,0,0,.25); border: 1px solid rgba(176,141,87,.35);
  border-radius: var(--rayon); color: var(--encre);
  font: inherit; font-size: .85rem; padding: .35rem .3rem; text-align: center;
}
.kl-part-de::-webkit-outer-spin-button, .kl-part-de::-webkit-inner-spin-button,
.kl-part-a::-webkit-outer-spin-button, .kl-part-a::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kl-part-de:focus-visible, .kl-part-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kl-part-retour { padding: .4rem .9rem 0; margin: 0; color: var(--or-clair); font-size: .82rem; }

/* --- Loupe / agrandissement du texte (plein écran) ----------------------- */
.kl-loupe {
  position: fixed; inset: 0;
  z-index: var(--z-loupe);
  background: rgba(8,6,5,.96);
  display: none;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.kl-loupe.ouvert { display: block; }
.kl-loupe.saisit { cursor: grabbing; }
.kl-loupe-vue { position: absolute; inset: 0; }
.kl-loupe img,
.kl-loupe-feuille {
  position: absolute; top: 0; left: 0;
  max-width: none;
  transform-origin: 0 0;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}
/* La feuille clonée garde sa taille fixe (dimensions posées par lecteur.js selon
   le ratio de la page — A4 par défaut) — NOTRE échelle la porte. */
.kl-loupe-feuille { width: 900px; height: 1273px; background: var(--fond-2); overflow: hidden; }
/* Dans la loupe, motion.js ne joue pas : on force les révélations à l'état vu,
   sinon le texte cloné resterait invisible (opacity:0). */
.kl-loupe-feuille .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.kl-loupe-barre { position: fixed; top: .75rem; right: .75rem; z-index: 2; display: flex; gap: .3rem; }
.kl-loupe-aide {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  font-size: .78rem; color: var(--encre-douce);
  background: rgba(0,0,0,.5); padding: .35rem .7rem; border-radius: 999px;
  pointer-events: none;
}

/* --- Mobile : simple page, chrome compacté -------------------------------- */
@media (max-width: 820px), (orientation: portrait) {
  .kl-scene { padding: .5rem; }
  .kl-nav { display: none; }               /* on tourne au swipe/tape */
  .kl-vignette img { height: 6rem; }
  .kl-barre { padding: 0 .5rem; gap: .25rem; }
  .kl-marque svg { height: 1.85rem; }
  .kl-btn { min-width: 2.1rem; min-height: 2.1rem; padding: .4rem .45rem; }
  /* Barre étroite (M39) : le choix de langue vit dans le MENU sur mobile — sans
     ça, la barre débordait et le bouton MENU sortait de l'écran (masqué par
     overflow:hidden, donc injoignable). La langue reste accessible dans le menu. */
  .kl-barre .kl-langues { display: none; }
}
/* Écran étroit : le logo dit déjà la marque, le numéro s'efface (mais reste
   l'écarteur flex qui pousse les boutons à droite). */
@media (max-width: 560px) {
  .kl-numero { visibility: hidden; max-width: 0; padding: 0; }
  /* Le bouton d'atelier « Modifier cette page » (M39-ter) est un outil DESKTOP :
     l'atelier feuille du back-office s'utilise sur grand écran, jamais sur un
     téléphone. Sur écran étroit on le retire — il ferait déborder la barre (loi
     §8 « jamais de contenu coupé au bord », vécu : logo arabe + 7e bouton = 415
     px pour 390). Il ne vit de toute façon qu'en contexte local. */
  .kl-editer { display: none; }
}
/* (Règle retirée le 2026-08-02 : elle réduisait le logo ARABE — calligraphie
   6,7:1 qui débordait sur mobile. Le logo arabe est abandonné sur décision de
   Houda, le logo latin (3,8:1) sert les trois éditions et tient à toutes les
   largeurs — mesuré à 390 par la recette superviseur. La réduire encore en
   arabe aurait fait un logo plus petit qu'en français, sans raison.) */

/* --- Respect du mouvement réduit ------------------------------------------ */
/* Le JS ne crée pas de feuille en mouvement réduit (rendu direct) ; ceci
   n'est qu'un filet si une feuille existait déjà au moment du changement.
   Le reflet du logo (animateTransform SVG) et l'anneau iridescent s'immobilisent. */
@media (prefers-reduced-motion: reduce) {
  .kl-bande, .kl-tourne-clip { display: none; }
  .kl-marque .logo-sheen { display: none; }
  .kl-btn::before, .kl-nav::before { animation: none; }
}

/* --- Repli sans JavaScript ------------------------------------------------ */
.kl-noscript {
  padding: 2rem 1rem;
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}
.kl-noscript img { width: 100%; max-width: 42rem; height: auto; margin: .5rem 0; box-shadow: var(--ombre-page); }

/* ----- Page réservée (couture monétisation §3b.4, câblée par M12) ----------
   Au-delà de l'extrait gratuit : invite d'achat douce, jamais l'image (jamais
   servie sans droit côté serveur). Ton éditorial, pas punitif. */
.kl-page-verrou { display: flex; align-items: center; justify-content: center;
  background: #f7f2ea; border: 1px solid #e8dfce; }
.kl-verrou { max-width: 22rem; text-align: center; padding: 2rem 1.6rem; color: #2b2622; }
.kl-verrou-titre { font-size: 1.15rem; font-weight: 700; color: #7B1D35; margin-bottom: .5rem; }
.kl-verrou-txt { font-size: .92rem; color: #6b5f50; margin: 0 0 1.2rem; }
.kl-verrou-btn { display: inline-block; background: #7B1D35; color: #fff;
  text-decoration: none; padding: .6rem 1.2rem; border-radius: 8px; font-size: .95rem; }

/* ----- LE MARQUE-PAGE : le petit mot de la reprise (M73) -------------------
   Houda : « quand une lectrice s'arrête sur une page, avons-nous un marque-page
   qui la ramène là où elle s'est arrêtée ? ». On la ramène — et on le DIT, d'un
   mot discret, jamais d'une fenêtre modale : la lecture n'est pas interrompue,
   rien n'est à cliquer pour continuer. Le mot s'efface tout seul (9 s) et la
   lectrice peut le fermer avant. Une seule sortie offerte, la seule utile :
   recommencer au début.
   Posé en `fixed` juste au-dessus de la pagination (.kl-pied), centré : il vaut
   pour la TOURNE (posé dans .kl) comme pour le DÉROULÉ (ruban.js, posé dans
   <body> — la feuille du lecteur est chargée sur les deux). En édition arabe,
   dir="rtl" sur la racine suffit : l'ordre des éléments s'inverse tout seul. */
.kl-reprise {
  position: fixed;
  left: 50%;
  bottom: calc(3.4rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: var(--z-panneau);
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: min(92vw, 34rem);
  padding: .5rem .5rem .5rem .9rem;
  border: 1px solid rgba(176, 141, 87, .38);
  border-radius: 999px;
  background: rgba(25, 11, 16, .93);
  box-shadow: 0 .5rem 1.6rem rgba(0, 0, 0, .5);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: .86rem;
  line-height: 1.3;
  opacity: 1;
  transition: opacity 320ms ease, transform 320ms ease;
}
.kl-reprise-off { opacity: 0; transform: translateX(-50%) translateY(.4rem); }
.kl-reprise-txt { color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kl-reprise-debut {
  flex: 0 0 auto;
  background: none;
  border: 1px solid rgba(176, 141, 87, .5);
  border-radius: 999px;
  color: var(--or-clair);
  font: inherit;
  font-size: .82rem;
  padding: .28rem .8rem;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.kl-reprise-debut:hover { background: rgba(176, 141, 87, .16); border-color: var(--or); }
.kl-reprise-x {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: var(--encre-douce);
  font-size: 1.15rem;
  line-height: 1;
  padding: .1rem .4rem;
  cursor: pointer;
  border-radius: 50%;
}
.kl-reprise-x:hover { color: var(--encre); }
.kl-reprise-debut:focus-visible, .kl-reprise-x:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
/* Écran étroit : le mot passe sur deux lignes plutôt que de rogner le texte. */
/* Écran étroit : le mot passe sur deux lignes plutôt que de rogner le texte —
   une largeur posée, sinon le bouton et la croix se renvoient chacun à leur
   ligne et le mot s'empile sur trois étages (mesuré en sonde, mobile 390). */
@media (max-width: 480px) {
  .kl-reprise { flex-wrap: wrap; justify-content: center; width: min(92vw, 24rem);
    border-radius: 14px; padding: .55rem .7rem; text-align: center; }
  .kl-reprise-txt { white-space: normal; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kl-reprise { transition: opacity 320ms ease; }
  .kl-reprise-off { transform: translateX(-50%); }
}