/* Système typographique des fiches (panneau latéral #panel, fiche « Détails » #details, infobulle #xlTip). Chargé en dernier :
   une seule échelle pour tous les textes de lore, en cinq rôles.
   1. Titre de page : Cinzel gras (grandes capitales gravées). Morpheus reste réservé aux noms peints sur la carte.
   2. Titre de section : Cinzel, petit, doré, espacé, suivi d'un filet.
   3. Titre d'élément (carte, étape de frise, récit) : Spectral semi-gras, jamais en petites capitales.
   4. Étiquette (surtitre, ère, libellé d'un repère) : Barlow capitales, 11,5 px.
   5. Texte courant : Spectral normal, interligne 1,65, ~75 signes par ligne au plus. */
:root{
  --t-text:#d6cdb9;      /* texte courant */
  --t-strong:#efe6d3;    /* chapô, valeurs */
  --t-soft:#a89f8b;      /* texte secondaire */
  --t-line:rgba(120,90,40,.26);  /* filets entre les lignes */
  --t-measure:75ch;
}

/* ---------- 1. Titres de page ---------- */
#details .dt-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.6vw,46px);line-height:1.08;letter-spacing:.03em;text-wrap:balance;}
#details .dt-zone-sep b{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.15;letter-spacing:.03em;color:var(--gold-hi);}
#panel .ptitle{line-height:1.08;letter-spacing:.03em;}
#panel .era-t h3{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.2;letter-spacing:.04em;}
#panel .era-emb b{font-family:var(--display);font-weight:700;font-size:17px;}

/* ---------- 2. Titres de section ---------- */
#panel .sec h3,#panel .lb-sec h3,#details .dt-sec h3{font-family:var(--display);font-weight:600;font-size:14px;line-height:1.3;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);}
#panel .sec h3,#panel .lb-sec h3{margin:26px 0 14px;}
#details .dt-sec h3{margin:0 0 16px;}
#details .dt-sec h4{margin:24px 0 12px;font-family:var(--ui);font-weight:600;font-size:12px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}

/* ---------- 3. Titres d'éléments ---------- */
#details .dt-tl b,#details .dt-card b,#details .dt-why summary,#panel .story b,#details .story b,#panel .tl b,#panel .fac h4,
#panel .ev-txt h4,#panel .icard-txt h4,#panel .evp-zone b,#xlTip b{font-family:var(--body);font-weight:600;letter-spacing:0;color:var(--gold-hi);}
#details .dt-tl b{margin:3px 0 8px;font-size:19px;line-height:1.3;}
#details .dt-card b{font-size:16.5px;line-height:1.3;}
#details .dt-why summary{display:flex;align-items:center;font-size:17px;line-height:1.35;}
#details .dt-why summary::before{flex:none;font-family:var(--ui);font-weight:600;}
#details .dt-why[open] summary::before{transform:none;background:var(--gold);color:#071120;}
#panel .story b,#details .story b{align-items:baseline;margin-bottom:8px;font-size:17px;line-height:1.3;}
#panel .story b span,#details .story b span{font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;text-align:right;}
#panel .tl b{margin:3px 0 6px;font-size:17px;line-height:1.3;}
#panel .fac h4{font-size:19px;line-height:1.25;}
#panel .ev-txt h4{font-size:18px;line-height:1.3;}
#panel .icard-txt h4{font-size:19px;line-height:1.25;}
#panel .evp-zone b{font-size:16px;line-height:1.25;}
#panel .evp-step b{font-size:15px;line-height:1.35;}
#xlTip b{font-size:17px;line-height:1.3;}
/* Noms de listes (lieux liés, relations, régions) : même police d'interface, même taille partout. */
#panel .lb-pn b,#panel .rg-txt b,#panel .lb-person b{font-family:var(--ui);font-weight:600;font-size:15.5px;line-height:1.25;color:var(--gold-hi);}
#panel .lb-pn em,#panel .rg-txt i,#panel .lb-person em,#panel .lb-cap em{font-family:var(--body);font-size:13.5px;line-height:1.35;color:var(--t-soft);}

/* ---------- 4. Étiquettes ---------- */
#panel .eyebrow,#details .dt-kicker,#panel .facts dt,#details .facts dt,#panel .lb-facts dt,#details .dt-era,#panel .tl .yr,#panel .lb-era b,
#panel .era-t small,#details .dt-zone-sep small,#panel .evp-step small{font-family:var(--ui);font-weight:600;font-size:11.5px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;}
#panel .eyebrow a,#details .dt-kicker a{text-decoration:none;}
#panel .eyebrow a:hover,#details .dt-kicker a:hover{color:var(--gold-hi);}
#details .dt-card small{margin-top:3px;font-family:var(--ui);font-weight:600;font-size:11px;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
#details .dt-era{color:var(--gold);}
#panel .lb-era small{font-size:12px;letter-spacing:.04em;color:var(--t-soft);}
#details .dt-note{font-size:13.5px!important;line-height:1.5;color:var(--t-soft)!important;}
#details .dt-note b{display:inline;margin:0 8px 0 0;font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}

/* ---------- 5. Texte courant ---------- */
#panel .prose{font-size:16px;line-height:1.65;color:var(--t-text);}
#panel .prose p{margin:0 0 14px;}
#panel .prose p:last-child{margin-bottom:0;}
#panel .story p,#details .story p,#panel .tl p,#panel .fac p,#panel .ev-txt p,#panel .icard-txt p,#panel .lb-tl p,#panel .lb-aff li,#panel .lb-members{font-family:var(--body);font-size:15.5px;line-height:1.6;color:var(--t-text);}
#details .dt-sec p{font-size:16.5px;line-height:1.68;color:var(--t-text);margin:0 0 14px;}
#details .dt-card p{margin:8px 0 0;font-size:15px;line-height:1.55;}
#details .dt-card.side > p{margin-top:12px;}
/* Largeur de ligne lisible : seuls les paragraphes qui ne contournent pas une image sont bornés. */
#details .dt-sec > p,#details .dt-sec > .prose p,#details .dt-why > p,#details .dt-tl li:not(:has(.dt-fig)) > p,#details .dt-place:not(:has(.dt-fig)) > p,#details .dt-lead,#details .dt-zone-sep p,#details .story p{max-width:var(--t-measure);}
#details .dt-lead{margin:20px 34px 8px;font-size:18.5px;line-height:1.6;color:var(--t-strong);}
#details .dt-zone-sep p{font-size:17px;line-height:1.6;color:var(--t-strong);}
#details .dt-sub,#panel .psub{font-family:var(--body);font-style:italic;font-size:17px;line-height:1.4;}
/* Chapô d'un personnage ou d'une faction : romain, l'italique sur dix lignes fatigue. */
#panel .lb-lede{margin:0 28px 6px;font-style:normal;font-size:16.5px;line-height:1.65;color:var(--t-strong);opacity:1;}
#panel .evp-lead{font-size:16.5px;line-height:1.6;font-style:italic;color:var(--t-strong);}
/* Lettrines : même dessin partout, posée sur deux lignes. */
#panel .prose:not(.more):not(.lb-bio) p:first-child::first-letter,#panel .evp-story p:first-child::first-letter{float:left;margin:5px 8px 0 0;font-family:var(--display);font-weight:700;font-size:3.05em;line-height:.8;color:var(--gold);text-shadow:none;}
#panel .evp-story p:first-child::first-letter{color:var(--era);}
#panel .lb-bio p:first-child::first-letter{all:unset;}

/* ---------- Repères : libellé / valeur alignés sur la même ligne de base, filet entre les lignes ---------- */
#panel .facts,#details .facts{grid-template-columns:minmax(96px,max-content) minmax(0,1fr);gap:0;font-size:15.5px;align-items:baseline;}
#panel .facts dt,#details .facts dt,#panel .facts dd,#details .facts dd{padding:8px 0;border-bottom:1px solid var(--t-line);}
#panel .facts dt,#details .facts dt{padding-right:18px;color:var(--gold);align-self:stretch;}
#panel .facts dd,#details .facts dd{margin:0;line-height:1.5;color:var(--t-strong);}
#panel .facts dt:last-of-type,#details .facts dt:last-of-type,#panel .facts dd:last-of-type,#details .facts dd:last-of-type{border-bottom:0;}
#panel .lb-facts dd{font-size:15.5px;line-height:1.35;color:var(--t-strong);}
#panel .lb-facts dd a{border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(200,170,110,.45);}

/* ---------- Liens internes : soulignement fin et discret, posé sous le texte ---------- */
a.xl{border-bottom:0;color:#e8dfca;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(200,170,110,.42);text-decoration-skip-ink:auto;transition:color .15s,text-decoration-color .15s;}
a.xl:hover,a.xl:focus-visible{color:#fff;background:none;text-decoration-color:var(--gold);}
.xl.tip{border-bottom:0;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(10,200,185,.55);}
.xl.tip:hover,.xl.tip:focus-visible{color:#fff;text-decoration-color:var(--teal);}
#details .dt-sec a:not(.xl):not(.dt-cite),#panel .lsrc a,#panel .evp-src a{color:var(--gold-hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(200,170,110,.42);}
#details .dt-sec a:not(.xl):not(.dt-cite):hover,#panel .lsrc a:hover,#panel .evp-src a:hover{color:#fff;text-decoration-color:var(--gold);}

/* ---------- Boutons et renvois ---------- */
/* Le bouton de fiche de zone s'aligne sur le texte de la section au lieu d'hériter de la marge du panneau. */
#details .dt-sec .cta{margin:0;}
#details .dt-sec p:has(> .cta){margin:20px 0 6px;}
#panel .cta,#details .cta{font-size:11.5px;letter-spacing:.16em;line-height:1.35;text-align:left;}
/* Renvois aux sources : pastille chiffrée juste sous le paragraphe qu'elle source. */
#details .dt-sec p:has(+ .dt-cite){margin-bottom:6px;}
#details .dt-cite{display:inline-grid;place-items:center;min-width:18px;height:18px;margin:0 4px 0 0;padding:0 4px;box-sizing:border-box;border:1px solid rgba(200,170,110,.35);border-radius:9px;
  font-family:var(--ui);font-weight:600;font-size:11px;line-height:1;vertical-align:baseline;color:var(--gold);text-decoration:none;transition:border-color .15s,color .15s;}
#details .dt-cite:hover{border-color:var(--gold);color:#fff;}
#panel .lsrc,#panel .lb-credit,#panel .evp-src{font-family:var(--ui);font-size:13px;line-height:1.55;letter-spacing:.01em;color:var(--t-soft);}
#details .dt-src{font-size:14px;line-height:1.7;color:var(--t-soft);}

/* ---------- Alignements et retraits ---------- */
#details .dt-sec{padding:22px 34px 12px;}
#details .dt-tl li{padding-bottom:22px;}
#details .dt-tl li:last-child{padding-bottom:6px;}
#details .dt-card{padding:14px 16px;}
#details .dt-card i:not(.dt-th){margin:-14px -16px 12px;}
/* Cartes à vignette : le contenu reste en haut quand la rangée est plus haute que la carte. */
#details .dt-card.side{align-content:start;}
#details .dt-why summary{padding:12px 16px;}
#details .dt-why > p{padding:0 16px;}
#details .dt-why > p:last-of-type{margin-bottom:12px;}
#details .dt-why > .dt-cite{margin:0 0 14px 16px;}
/* Page d'un événement : le récit n'a pas de second retrait sous le chapô. */
#panel .evp{padding:0 28px 22px;}
#panel .evp .prose,#panel .evp .evp-story,#panel .evp .sec{padding-left:0;padding-right:0;}
#panel .evp-lead{margin:2px 0 18px;padding-left:14px;}
#panel .lb-sec,#panel .sec{padding:4px 28px 4px;}
#panel .lb-bio-sec .prose{padding:0;}
/* Infobulle des liens. */
#xlTip p{font-size:14.5px;line-height:1.5;color:var(--t-text);}

/* ---------- Téléphone ---------- */
@media (max-width:700px){
  #details .dt-sec{padding:18px 18px 10px;}
  #details .dt-hero-txt{padding-left:18px;padding-right:18px;}
  #details .dt-lead{margin:16px 18px 6px;font-size:17px;line-height:1.6;}
  #details .dt-zone-sep{margin-left:18px;margin-right:18px;}
  #details .dt-sec p{font-size:16px;line-height:1.65;}
  #details .dt-tl b{font-size:18px;}
  /* Libellé au-dessus de la valeur : la colonne de libellés mangerait la moitié de la largeur. */
  #details .facts{grid-template-columns:minmax(0,1fr);}
  #details .facts dt{padding:10px 0 0;border-bottom:0;}
  #details .facts dd{padding:2px 0 10px;}
}
@media (max-width:520px){
  #panel .prose{padding:0 20px;}
  #panel .sec,#panel .lb-sec{padding-left:20px;padding-right:20px;}
  #panel .phead{padding:0 20px;}
  #panel .divider{margin-left:20px;margin-right:20px;}
  #panel .lb-lede{margin-left:20px;margin-right:20px;}
  #panel .lb-facts{margin-left:20px;margin-right:20px;}
  #panel .lb-credit{margin-left:20px;margin-right:20px;}
  #panel .filters{padding:0 20px;}
  #panel .fac{margin-left:20px;margin-right:20px;}
  #panel .cta{margin-left:20px;margin-right:20px;}
  #panel .sec .cta{margin-left:0;margin-right:0;}
  #panel .evp{padding:0 20px 18px;}
  #panel .evp .prose,#panel .evp .sec{padding-left:0;padding-right:0;}
}

/* ---------- Pleine page (11/11) : colonne de 920 px, mais lignes de texte bornées à ~72 signes ---------- */
body.panel-full #pbody .prose p,body.panel-full #pbody .story p,body.panel-full #pbody .tl p,body.panel-full #pbody .lb-tl p,body.panel-full #pbody .evp-story p,
body.panel-full #pbody .fac p,body.panel-full #pbody .ev-txt p,body.panel-full #pbody .lb-lede,body.panel-full #pbody .evp-lead{max-width:72ch;}
body.panel-full #pbody .prose,body.panel-full #pbody .story p,body.panel-full #pbody .lb-tl p,body.panel-full #pbody .evp-story p{font-size:17px;line-height:1.7;}
/* Noms en gras liés dans le texte : le lien garde la graisse, soulignement plus visible. */
b > a.xl,strong > a.xl{font-weight:inherit;text-decoration-color:rgba(200,170,110,.6);}