/* ═══════════════════════════════════════════════════════════
   Hommages de poche — feuille de style PROPRE à l'appli
   Le socle (/shared/appli-socle.css) porte le reste : reset, barre, boutons, dock, feuilles, listes,
   message passager, clavier, visite, micro, onglets. On y redéfinit ici la teinte de l'appli (un papier
   chaud, un bordeaux, un or sourd) et ce qui ne vaut que pour elle. Rayons et ombres : jamais de littéral
   (--r-*, --sh-* de /shared/jetons.css — controle-jetons.mjs le refuserait).

   ⚠️ La TAILLE DU TEXTE (A, A+, A++) change la taille de base de la page (html, en %) : tout ce qui est en rem suit. Le « chrome »
   (barre du haut, menu rapide, barre du bas) est volontairement écrit en px : s'il grandissait avec le texte, le titre et les
   commandes ne tiendraient plus sur un petit écran, et la commande A++ elle-même disparaîtrait.
   ⚠️ Le texte d'une anecdote est toujours sur un fond clair ou sombre assez contrasté : l'or sert de filet et de titre, jamais
   de fond de texte courant sans vérification (le banc mesure les paires).
   ═══════════════════════════════════════════════════════════ */

:root {
  --ombre-teinte: 74, 46, 24;
  --fond: #fbf6ec; --panneau: #fffdf8; --panneau-2: #f3ead9; --trait: rgba(74, 46, 24, 0.17);
  --encre: #2a1f18; --doux: #66554a;
  --accent: #8a3b2f; --accent-fort: #6a2a21; --accent-clair: #f1e2dc; --sur-accent: #ffffff;
  --or: #7a4f08; --or-vif: #b8841f; --or-clair: #f8edd0; --or-trait: #e2c682;
  --menu-h: 54px;
  --police-lecture: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
}
html[data-theme="sombre"] {
  --ombre-teinte: 0, 0, 0;
  --fond: #17120e; --panneau: #211a15; --panneau-2: #2b221b; --trait: rgba(240, 228, 210, 0.17);
  --encre: #f1e8da; --doux: #bcad9d;
  --accent: #d79a8e; --accent-fort: #ebbfb5; --accent-clair: #3a221d; --sur-accent: #1c100d;
  --or: #e2b861; --or-vif: #d4a547; --or-clair: #302617; --or-trait: #6b5426;
}
html { scroll-padding-top: calc(var(--haut-h) + var(--menu-h) + env(safe-area-inset-top, 0px) + 14px); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

#ecran { padding-bottom: calc(var(--dock-h) + 40px + var(--bas)); }
#toast { bottom: calc(var(--dock-h) + var(--bas) + 16px); }
/* La pastille « 🐞 Contact » du site est posée sous la barre, à droite (jamais dans l'appli emballée) : sur téléphone, on lui laisse sa
   ligne sur l'accueil plutôt que de la poser sur le titre. Dans un portrait, elle disparaît : on lit (le contact reste dans « Plus »). */
@media (max-width: 480px) { html.avec-panneau-bug:not(.lecture) #ecran { padding-top: 62px; } html.avec-panneau-bug.clavier #ecran { padding-top: 18px; } }
html.lecture .ctap-panel { display: none !important; }
/* Deux barres collées (la barre et le menu rapide) : le placement automatique du panneau ne regarde que la première. On le pose nous-mêmes,
   sous les deux ; et pas du tout derrière une feuille (elle recouvrait son ✕) : le contact reste dans « Plus ». */
.ctap-panel { top: calc(var(--haut-h) + var(--menu-h) + env(safe-area-inset-top, 0px) + 8px) !important; }
body.avec-feuille .ctap-panel { display: none !important; }

/* ── la barre du haut : le chrome ne grossit pas avec le texte ───────────── */
.barre h1 { font-size: 18px; }
.barre p { font-size: 12px; }
.barre .logo { font-size: 26px; }
.barre-actions { align-items: center; }
.barre-btn { width: 40px; height: 40px; font-size: 18px; }
.barre-btn.retour { width: 42px; height: 42px; font-size: 22px; background: var(--accent-clair); color: var(--accent-fort); flex: 0 0 auto; }
.barre-titre { gap: 8px; }
@media (max-width: 400px) { .barre h1 { font-size: 16px; } .barre p { display: none; } .barre { padding-left: 12px; padding-right: 12px; gap: 8px; } }

.taille { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--panneau-2); border: 1px solid var(--trait); }
.taille button { min-width: 36px; height: 42px; padding: 0 4px; border-radius: var(--r-pill); font-family: var(--police-titre); font-weight: 700; color: var(--encre); line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.taille button:nth-child(1) { font-size: 15px; }
.taille button:nth-child(2) { font-size: 18px; }
.taille button:nth-child(3) { font-size: 21px; min-width: 42px; }
.taille sup { font-size: .56em; font-weight: 800; position: relative; top: -.3em; vertical-align: baseline; margin-left: 1px; }
.taille button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }

/* ── le menu rapide : collé sous la barre ───────────────────────────────── */
.menu-rapide {
  position: sticky; top: calc(var(--haut-h) + env(safe-area-inset-top, 0px)); z-index: 29;
  height: var(--menu-h); display: flex; align-items: center;
  background: var(--fond); border-bottom: 1px solid var(--trait);
}
.mr-rail {
  display: flex; gap: 8px; align-items: center; flex: 1 1 auto; min-width: 0; height: 100%;
  padding: 0 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mr-rail::-webkit-scrollbar { display: none; }
.menu-rapide.a-gauche .mr-rail { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px); mask-image: linear-gradient(90deg, transparent 0, #000 34px); }
.menu-rapide.a-droite .mr-rail { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%); }
.menu-rapide.a-gauche.a-droite .mr-rail { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); }
.mr-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1.5px solid var(--trait); background: var(--panneau); color: var(--encre);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.mr-ico { font-size: 15px; }
.mr-chip[aria-current="true"], .mr-chip[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.mr-fleche {
  position: absolute; top: 0; bottom: 0; width: 38px; z-index: 2; font-size: 26px; line-height: 1; font-weight: 700; color: var(--accent-fort);
  display: flex; align-items: center; justify-content: center; padding-bottom: 3px;
}
.mr-g { left: 0; justify-content: flex-start; padding-left: 8px; }
.mr-d { right: 0; justify-content: flex-end; padding-right: 8px; }
.mr-progres { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; pointer-events: none; }
.mr-progres i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 0 var(--r-xs) var(--r-xs) 0; }

/* ── le dock : le chrome, lui non plus, ne grossit pas ───────────────────── */
.d-lib { font-size: 11px; }
.dock .d-ico { position: relative; }
.badge { position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--accent); color: var(--sur-accent); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; font-family: var(--police); }

/* ── l'accueil ───────────────────────────────────────────────────────────── */
.accueil-intro { margin: 2px 0 14px; color: var(--doux); font-family: var(--police-lecture); font-size: 1.02rem; line-height: 1.55; }
.recherche { margin: 0 0 14px; }
.recherche input { width: 100%; min-height: 50px; }
.zone-jour { margin: 16px 0 6px; }
.rub-titre { margin: 28px 0 12px; font-family: var(--police-titre); font-size: 1.3rem; line-height: 1.25; color: var(--accent-fort); }
.rub:first-child .rub-titre, #zone-portraits > .rub-titre:first-child { margin-top: 20px; }
.cartes { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) { .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px;
  background: var(--panneau); border: 1px solid var(--trait); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.carte:active { border-color: var(--accent); }
.carte-vign { flex: 0 0 62px; width: 62px; height: 78px; border-radius: var(--r-sm); overflow: hidden; background: var(--accent-clair); display: flex; align-items: center; justify-content: center; }
.carte-vign img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.monogramme { font-family: var(--police-titre); font-weight: 600; color: var(--accent-fort); font-size: 1.35rem; letter-spacing: .02em; }
.carte-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.carte-txt b { font-family: var(--police-titre); font-size: 1.06rem; line-height: 1.25; font-weight: 600; }
.etoile { color: var(--or-vif); }
.carte-dates { font-size: .8rem; color: var(--doux); }
.carte-titre { font-family: var(--police-lecture); font-style: italic; font-size: .92rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carte-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; font-size: .78rem; color: var(--doux); }
.meta-anec { color: var(--or); font-weight: 700; }

.reprise {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 64px; padding: 12px 14px; margin: 0 0 8px;
  background: var(--accent-clair); border: 1.5px solid var(--accent); border-radius: var(--r-lg);
}
.reprise-ico { font-size: 24px; flex: 0 0 auto; width: 32px; text-align: center; }
.reprise-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.reprise-txt b { font-family: var(--police-titre); font-size: 1.05rem; line-height: 1.25; }
.reprise-txt small { font-size: .78rem; color: var(--doux); }
.reprise-fine { margin: 0 0 18px; }

/* ── une anecdote : le cœur de l'appli ───────────────────────────────────── */
.anec, .anec-carte {
  background: var(--or-clair); border: 1px solid var(--or-trait); border-left: 5px solid var(--or-vif);
  border-radius: var(--r-md); padding: 16px 16px 12px; margin: 14px 0; box-shadow: var(--sh-1);
}
.anec-jour { background: linear-gradient(140deg, var(--or-clair), var(--panneau)); box-shadow: var(--sh-2); }
.sur-titre { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--or); margin: 0 0 6px; font-family: var(--police); }
.sur-titre.suite { text-align: center; margin: 22px 0 8px; color: var(--doux); }
.anec-titre { font-family: var(--police-titre); font-size: 1.22rem; line-height: 1.3; font-weight: 600; color: var(--or); margin: 0 0 8px; }
.anec-texte { font-family: var(--police-lecture); font-size: 1.04rem; line-height: 1.65; color: var(--encre); }
.anec-texte p { margin: 0 0 .8em; }
.anec-de { font-size: .88rem; color: var(--doux); margin: 4px 0 2px; }
.anec-de b { color: var(--encre); font-family: var(--police-titre); }
.anec-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.act {
  min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--trait); background: var(--panneau);
  color: var(--encre); font-size: .86rem; font-weight: 600; font-family: var(--police); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
}
.act[aria-pressed="true"] { background: var(--accent-clair); border-color: var(--accent); color: var(--accent-fort); }
.act-lire { margin-left: auto; color: var(--accent-fort); border-color: var(--accent); }
.anec-scene { border-left-color: var(--accent); }
.anec.en-vue { animation: surligne 2.4s ease; }
@keyframes surligne { 0%, 55% { box-shadow: 0 0 0 4px var(--or-vif), var(--sh-2); } 100% { box-shadow: var(--sh-1); } }
@media (prefers-reduced-motion: reduce) { .anec.en-vue { animation: none; outline: 3px solid var(--or-vif); outline-offset: 2px; } }

/* ── un portrait ─────────────────────────────────────────────────────────── */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 6px 0 20px; margin-bottom: 20px; border-bottom: 1px solid var(--trait); }
.hero-vign { width: min(62%, 190px); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); background: var(--accent-clair); flex: 0 0 auto; }
.hero-vign img { display: block; width: 100%; height: auto; }
.hero-vign .monogramme { display: flex; align-items: center; justify-content: center; height: 150px; font-size: 3rem; }
.hero-txt { min-width: 0; }
.hero-txt h2 { font-family: var(--police-titre); font-size: 1.85rem; line-height: 1.15; font-weight: 600; margin: 2px 0 4px; overflow-wrap: anywhere; }
.hero-dates { color: var(--doux); font-size: .92rem; }
.hero-titre { font-family: var(--police-lecture); font-style: italic; font-size: 1.12rem; line-height: 1.45; margin: 8px 0 6px; }
.hero-meta { font-size: .86rem; color: var(--doux); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
@media (min-width: 560px) {
  .hero { flex-direction: row; text-align: left; align-items: flex-start; gap: 22px; }
  .hero-vign { flex-basis: 170px; width: 170px; }
  .hero-actions { justify-content: flex-start; }
}

.portrait-corps { font-family: var(--police-lecture); font-size: 1.08rem; line-height: 1.7; color: var(--encre); }
html[data-police="sans"] .portrait-corps, html[data-police="sans"] .anec-texte, html[data-police="sans"] .accueil-intro, html[data-police="sans"] .hero-titre, html[data-police="sans"] .carte-titre { font-family: var(--police); }
html[data-lecture="grand"] .portrait-corps { line-height: 1.78; }
html[data-lecture="tres-grand"] .portrait-corps { line-height: 1.86; }
.panneau p { margin: 0 0 1.05em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-wrap: pretty; }
.intro p:first-child { font-size: 1.1em; }
.chapitre { margin-top: 1.2em; }
.chapitre h2, .groupe h2 { font-family: var(--police-titre); font-size: 1.45rem; line-height: 1.25; font-weight: 600; color: var(--accent-fort); margin: .15em 0 .7em; text-wrap: balance; }
.groupe h2 { font-size: 1.3rem; color: var(--or); }
.groupe-ch { font-family: var(--police); font-size: .8rem; color: var(--doux); margin: -.4em 0 .6em; }
.chapitre h3 { font-family: var(--police-titre); font-size: 1.12rem; font-weight: 700; margin: 1.5em 0 .5em; }
.panneau blockquote { margin: 1.3em 0; padding: .2em 0 .2em 1em; border-left: 3px solid var(--accent); font-style: italic; }
.panneau ul, .panneau ol { margin: 0 0 1.1em 1.3em; }
.panneau li { margin-bottom: .45em; }
.orne { text-align: center; color: var(--or-vif); font-size: 1.3rem; margin: 1.6em 0 .5em !important; line-height: 1; }
.encart {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 52px; margin: 1.2em 0; padding: 10px 14px;
  background: var(--or-clair); border: 1.5px solid var(--or-trait); border-left: 5px solid var(--or-vif); border-radius: var(--r-md);
  font-family: var(--police); font-size: .92rem; font-weight: 700; color: var(--or);
}
.p-anec { margin: 1.1em 0; padding: .1em 0 .2em 1em; border-left: 4px solid var(--or-vif); }
.p-anec p { margin-bottom: .4em; }
.p-anec-lien {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--or-clair); border: 1.5px solid var(--or-trait); color: var(--or); font-family: var(--police); font-size: .86rem; font-weight: 700;
}
.encart-ico { font-size: 18px; flex: 0 0 auto; }
.encart-txt { flex: 1 1 auto; }
.encart .item-fin { color: var(--or); }
.anec-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.anec-intro { font-family: var(--police-titre) !important; font-style: italic; color: var(--doux); margin: 0 !important; }
.groupe { margin-top: 1.6em; }
.panneau[hidden] { display: none; }
.citations blockquote { font-size: 1.04em; }

.fin-portrait { margin-top: 2.2em; display: grid; gap: 12px; }
.guide-complet { min-height: 50px; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; color: var(--accent-fort); font-weight: 700; padding: 8px 14px; }
.fin-portrait .carte { margin: 0 auto; max-width: 420px; }

/* ── Plus : réglages, partage, signature ─────────────────────────────────── */
.reglage { display: grid; gap: 6px; margin-bottom: 14px; }
.reglage label { font-weight: 700; font-size: .9rem; }
.lien-partage { min-height: 0; font-size: .9rem; }
.signature { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin: 0 0 4px; padding: 2px 12px 8px; border-radius: var(--r-md); color: var(--doux); text-decoration: none; }
.signature:hover, .signature:focus-visible { background: var(--panneau-2); }
.signature img { flex: 0 0 auto; }
.note.note-infos { font-size: .92rem; line-height: 1.5; }
.signature-txt { display: flex; flex-direction: column; line-height: 1.3; font-size: .92rem; }
.signature-txt b { color: var(--encre); font-family: var(--police-titre); font-size: 1.05rem; }
.signature-txt small { font-size: .8rem; }
.maj-appli + .signature { margin-top: 2px; }
.liste-titre { margin: 22px 0 10px; font-size: 1.05rem; font-family: var(--police-titre); }

/* ── Lecture à voix haute : le lecteur flottant et le paragraphe lu ── */
.lecteur {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--dock-h) + var(--bas) + 10px); z-index: 45;
  max-width: 696px; margin: 0 auto; padding: 8px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: space-between;
  background: var(--panneau); border: 1.5px solid var(--accent); border-radius: var(--r-lg); box-shadow: var(--sh-2);
}
.lecteur[hidden] { display: none; }
.lecteur-lib { flex: 1 1 140px; min-width: 0; font-family: var(--police-titre); font-weight: 600; font-size: .95rem; color: var(--accent-fort); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lecteur-cmd { display: flex; gap: 6px; }
.lecteur-btn { min-width: 44px; height: 44px; padding: 0 10px; border-radius: var(--r-pill); background: var(--accent-clair); color: var(--accent-fort); font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; }
.lecteur-btn:active { background: var(--accent); color: var(--sur-accent); }
.lecteur-pp { background: var(--accent); color: var(--sur-accent); }
html.avec-lecteur #ecran { padding-bottom: calc(var(--dock-h) + 150px + var(--bas)); }
html.avec-lecteur #toast { bottom: calc(var(--dock-h) + var(--bas) + 80px); }
.lu { background: var(--or-clair); box-shadow: -6px 0 0 var(--or-clair), 6px 0 0 var(--or-clair); border-radius: var(--r-xs); }

/* ── La carte à partager ── */
.carte-canvas { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 10px; border-radius: var(--r-md); box-shadow: var(--sh-2); }
.carte-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.cit-act { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 14px; min-height: 44px; padding: 0 14px; border-radius: var(--r-pill); border: 1.5px solid var(--trait); background: var(--panneau); color: var(--doux); font-size: .85rem; font-weight: 600; }
li > .cit-act { margin: 4px 0 4px 8px; }

/* ── Photos (libres de droit, chacune avec son crédit) et Liens ── */
.photo { margin: 1.4em 0 0; padding: 0; border: 1.5px solid var(--trait); border-radius: var(--r-lg); background: var(--panneau); overflow: hidden; box-shadow: var(--sh-1); }
.photo-cadre { display: block; width: 100%; padding: 0; background: var(--accent-clair); text-align: center; cursor: zoom-in; }
.photo-cadre:disabled { cursor: default; }
.photo-cadre img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; background: var(--accent-clair); }
.photo-absente { display: block; padding: 28px 18px; font-family: var(--police); font-size: .9rem; color: var(--doux); }
.photo-leg { padding: 12px 14px 14px; font-family: var(--police); font-size: .88rem; line-height: 1.45; }
.photo-legende { display: block; font-family: var(--police-titre); font-size: 1.02rem; font-weight: 600; color: var(--encre); margin-bottom: 4px; }
.photo-credit { display: block; color: var(--doux); }
.photo-credit.manque { font-style: italic; }
.photo-fiche { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: var(--accent-fort); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--accent); }
.photo-grande { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--r-md); background: var(--accent-clair); margin-bottom: 10px; }
.groupe-liens h2 { margin-bottom: .5em; }
ul.liens { list-style: none; margin: 0 !important; padding: 0; display: grid; gap: 10px; }
.lien { margin: 0 !important; padding: 12px 14px; border: 1.5px solid var(--trait); border-radius: var(--r-lg); background: var(--panneau); box-shadow: var(--sh-1); }
.lien-titre { display: block; min-height: 24px; font-family: var(--police-titre); font-size: 1.08rem; font-weight: 600; line-height: 1.3; color: var(--accent-fort); text-decoration: none; overflow-wrap: anywhere; }
.lien-titre::after { content: " ↗"; font-weight: 400; }
.lien-hote { display: block; margin-top: 2px; font-family: var(--police); font-size: .76rem; color: var(--doux); overflow-wrap: anywhere; }
.lien-desc { margin: .5em 0 0 !important; font-family: var(--police); font-size: .92rem; line-height: 1.45; }