/* Couche de lisibilité — ajustements propres aux pages canoniques (GM02, 2026-10-13, complétée le 2026-10-14).
   Les tailles de caractères sont relevées par inc/lisibilite.php ; ici seulement ce qui permet au texte
   agrandi de tenir sans être coupé : hauteurs fixes rendues extensibles, défilement rétabli. */

/* Lectures conseillées (ordinateur) : composition « un seul écran » (hauteurs en vh, overflow masqué).
   Avec un texte lisible, la page défile et chaque bloc prend la hauteur de son contenu. */
html[data-qm3-route="/lectures-conseillees/"], html[data-qm3-route="/lectures-conseillees/"] body { height: auto !important; min-height: 100% !important; overflow: visible !important; }
html[data-qm3-route="/lectures-conseillees/"] .library { height: auto !important; overflow: visible !important; }
html[data-qm3-route="/lectures-conseillees/"] .grid { height: auto !important; grid-auto-rows: auto !important; grid-template-rows: none !important; row-gap: 18px !important; }
html[data-qm3-route="/lectures-conseillees/"] .book-card { height: auto !important; }
html[data-qm3-route="/lectures-conseillees/"] .hero, html[data-qm3-route="/lectures-conseillees/"] .hero-inner { height: auto !important; min-height: 20vh !important; padding-block: 18px !important; }
html[data-qm3-route="/lectures-conseillees/"] .library-kicker { height: auto !important; min-height: 58px !important; flex-basis: auto !important; }

/* Fiches de lecture : bandeau « Lectures conseillées » de hauteur fixe (216 / 190 px). */
html[data-qm3-type="fiche"] .canon-hero, html[data-qm3-type="fiche"] .canon-hero-inner { height: auto !important; min-height: 216px; padding-block: 18px; }
@media (max-width: 900px) { html[data-qm3-type="fiche"] .canon-hero, html[data-qm3-type="fiche"] .canon-hero-inner { min-height: 190px; } }

/* Toutes les pages canoniques : les petits caractères sans règle propre (small) gardent un plancher lisible. */
html[data-qm3-route] small { font-size: max(15px, 0.85em); }

/* Contrastes (WCAG AA ≥ 4,5:1) : les étiquettes dorées sur fond clair sont assombries dans la même teinte. */
html[data-qm3-type="fiche"] .hero-inner p.kicker { color: #6f5118; }
html[data-qm3-route] .combat-kicker, html[data-qm3-route] .political-caption-kicker,
html[data-qm3-route] .photo-section-label { color: #765a20; }
html[data-qm3-route="/la-pierre-de-rosette/"] p.overline { color: #6f4a12; }
html[data-qm3-route^="/emissions/"] .meta { color: #765a20; }
html[data-qm3-route="/boutique/"] .section-head > p { color: #5f544a; }
/* SSK : légende de l'affiche sur fond sombre (texte hérité sombre à l'origine), bandeau d'en-tête sans coupe. */
html[data-qm3-route="/ssk.html"] .poster-wrap figcaption { color: #d4cabb; padding: 12px 22px; }
html[data-qm3-route="/ssk.html"] .ssk-hero-v3, html[data-qm3-route="/ssk.html"] .ssk-hero-copy { height: auto !important; min-height: 306px !important; }
html[data-qm3-route="/ssk.html"] .ssk-hero-copy { padding-block: 18px !important; }

/* La vie de Muntu : la liste « Principes » est du texte courant (classe .sources héritée du gabarit). */
html[data-qm3-route="/articles/la-vie-de-muntu.html"] .documentation .sources span { font-size: 17px; line-height: 1.55; }

/* ---- Compléments du 2026-10-14 : le texte agrandi doit tenir sans couper ni déborder ---- */

/* Boutons d'en-tête (« Espace membre », « Faire un don ») : toujours sur une ligne. */
@media (min-width: 721px) { html[data-qm3-route] .member, html[data-qm3-route] .qm-donate-button, html[data-qm3-route] .donate { white-space: nowrap; } }
@media (max-width: 720px) { html[data-qm3-route] .member, html[data-qm3-route] .qm-donate-button, html[data-qm3-route] .donate { min-width: 0; max-width: 100%; text-align: center; } }

/* Tablettes et fenêtres moyennes : iPadOS reçoit la composition ordinateur. Le menu agrandi passe à la ligne
   au lieu de pousser « Faire un don » / « Espace membre » hors de l'écran (défilement horizontal). */
@media (min-width: 721px) and (max-width: 1180px) {
  html[data-qm3-route="/lectures-conseillees/"] header { height: auto !important; min-height: 78px; }
  html[data-qm3-route="/lectures-conseillees/"] .header-inner { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 16px !important; width: 94vw !important; }
  html[data-qm3-route="/lectures-conseillees/"] nav.main { flex-wrap: wrap; column-gap: 18px !important; row-gap: 0; }
  html[data-qm3-route="/lectures-conseillees/"] nav.main a { padding: 12px 0 10px !important; }
}
@media (min-width: 801px) and (max-width: 1180px) {
  html[data-qm3-route="/boutique/"] .header-inner { gap: 16px; }
  html[data-qm3-route="/boutique/"] header nav { flex-wrap: wrap; column-gap: 18px; row-gap: 4px; padding-block: 8px; }
}

/* Articles canoniques (bureau) : la colonne « Repères » (chronologie) s'élargit pour que le texte agrandi
   garde des lignes de lecture, la colonne principale reste ≈ 75–85 signes. */
@media (min-width: 1100px) {
  html[data-qm3-route^="/articles/"] .main { width: min(1220px, 88vw) !important; grid-template-columns: minmax(0, 1fr) 360px !important; }
  html[data-qm3-route^="/articles/"] .timeline-item { grid-template-columns: 70px 1fr !important; }
  html[data-qm3-route="/ssk.html"] .main { width: min(1240px, 90vw) !important; grid-template-columns: minmax(0, 1fr) 340px !important; }
  html[data-qm3-route="/ssk.html"] .timeline-item { grid-template-columns: 64px 1fr !important; }
}

/* Sous-titre du logo (« LA FAMILLE MUNTU ») : élément de marque en capitales espacées, relevé de 7–9 px à 13 px
   (au-delà, il entre en collision avec le bouton d'en-tête sur téléphone). */
html[data-qm3-route] .brand small, html[data-qm3-route] header .logo small, html[data-qm3-route] .footer-brand-sub { font-size: 13px !important; letter-spacing: .14em !important; }

/* Ikemba (composition téléphone) : le menu bureau, déjà rogné sous le logo à l'origine, est masqué comme le prévoit
   la règle mobile du gabarit (nav { display: none }) ; la navigation reste dans le pied de page. */
@media (max-width: 760px) { html[data-qm3-route="/ikemba/"] .site-header nav { display: none !important; } }

/* Contrastes complémentaires (2026-10-14) : étiquettes or/ocre posées sur fond clair, passées au bronze #765a20
   (même teinte, ≥ 5:1 sur papier). Les mêmes étiquettes sur fond sombre gardent leur or d'origine. */
html[data-qm3-route^="/articles/"] .hero p.kicker, html[data-qm3-route="/ikemba/"] .hero p.kicker,
html[data-qm3-route] .contact-kicker, html[data-qm3-route] .info-label,
html[data-qm3-composition="bureau"][data-qm3-route="/ssk.html"] .eyebrow, html[data-qm3-route="/ssk.html"] .text-interlude-kicker,
html[data-qm3-route="/ssk.html"] .premium-intro-eyebrow,
html[data-qm3-route^="/articles/"] .documentation .eyebrow,
html[data-qm3-route="/ikemba/"] .documentation .eyebrow { color: #765a20 !important; }

/* GM03 — SSK (version déployée, composition bureau) sur téléphone : le fil d'Ariane agrandi (15 px) passe à la ligne
   au lieu de déborder sur le bandeau (hauteur fixe de 31 px à l'origine). */
html[data-qm3-route="/ssk.html"][data-qm3-composition="bureau"] .crumb, html[data-qm3-route="/ssk.html"][data-qm3-composition="bureau"] .crumb-inner { height: auto !important; min-height: 31px; }
html[data-qm3-route="/ssk.html"][data-qm3-composition="bureau"] .crumb-inner { flex-wrap: wrap; column-gap: 6px; padding-block: 6px; }

/* GM03 — liens sans destination rendus en texte simple (Boutique, retours « ← … ») : même aspect, non cliquables. */
html[data-qm3-route] .qm3-lien-inactif { cursor: default; opacity: .75; }
html[data-qm3-route] .footer-links .qm3-lien-inactif { display: block; color: #d6cec2; font-size: 16px; line-height: 1.95; }

/* GM03 — tablettes et petits portables (721–1180 px, composition ordinateur) : le menu agrandi des en-têtes canoniques
   passe à la ligne ; la colonne du logo et le bouton de droite ne sont plus poussés hors de l'écran (débordement mesuré
   de 6 à 112 px à 1 024 px). Mêmes éléments, même ordre, mêmes couleurs. */
@media (min-width: 721px) and (max-width: 1180px) {
  html[data-qm3-route] .site-header, html[data-qm3-route] header:has(> .header-inner) { height: auto !important; min-height: 72px; }
  html[data-qm3-route] .header-inner { height: auto !important; min-height: 66px; grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 14px !important; padding-block: 8px !important; }
  html[data-qm3-route] .header-inner > nav { flex-wrap: wrap !important; justify-content: center; column-gap: 16px !important; row-gap: 2px !important; min-width: 0; }
}