@font-face{font-family:'Alegreya';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/alegreya-lat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:'Alegreya';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/alegreya-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+20A0-20AB}
@font-face{font-family:'AlegreyaSC';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/alegreyasc-lat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:'AlegreyaSC';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/alegreyasc-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+20A0-20AB}

*{box-sizing:border-box}
body{margin:0;background:#e8c99a;color:#3b2a1c;font-family:'Alegreya',Georgia,serif;
  font-size:17px;line-height:1.6}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.34;z-index:0;
  background-image:radial-gradient(circle at 12% 18%,rgba(255,255,255,.55) 0 2px,transparent 3px),
  radial-gradient(circle at 71% 62%,rgba(120,70,30,.30) 0 2px,transparent 3px),
  radial-gradient(circle at 42% 88%,rgba(255,255,255,.40) 0 1px,transparent 2px);
  background-size:180px 180px,240px 240px,120px 120px}
.feuillet{position:relative;z-index:1;max-width:1120px;margin:0 auto;background:#efdcbb;
  padding:0 46px 44px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 26px rgba(90,55,20,.14)}
.feuillet:before,.feuillet:after{content:"";position:absolute;top:160px;bottom:56px;width:18px;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2296%22%20viewBox%3D%220%200%2018%2096%22%3E%3Cpath%20d%3D%22M9%200%20L9%2096%22%20stroke%3D%22%23b8763a%22%20stroke-width%3D%221%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M9%2020%20c%20-7%204%20-7%2014%200%2018%20c%207%20-4%207%20-14%200%20-18z%22%20fill%3D%22%236d6a35%22%20opacity%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2258%22%20r%3D%223%22%20fill%3D%22%239c3a22%22%20opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22M9%2074%20c%20-5%203%20-5%2010%200%2013%20c%205%20-3%205%20-10%200%20-13z%22%20fill%3D%22%238a5322%22%20opacity%3D%22.6%22%2F%3E%3C%2Fsvg%3E");background-repeat:repeat-y;opacity:.85}
.feuillet:before{left:16px}.feuillet:after{right:16px}
.frise{height:22px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%2226%22%20viewBox%3D%220%200%20120%2026%22%3E%3Cpath%20d%3D%22M0%2013%20C%2015%202%2030%202%2045%2013%20C%2060%2024%2075%2024%2090%2013%20C%20100%205%20110%205%20120%2013%22%20fill%3D%22none%22%20stroke%3D%22%23b8763a%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M22%208%20c%205%20-7%2013%20-8%2017%20-4%20c%20-5%207%20-13%208%20-17%204z%22%20fill%3D%22%236d6a35%22%2F%3E%3Cpath%20d%3D%22M81%2018%20c%205%207%2013%208%2017%204%20c%20-5%20-7%20-13%20-8%20-17%20-4z%22%20fill%3D%22%236d6a35%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2219%22%20r%3D%222.6%22%20fill%3D%22%239c3a22%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2213%22%20r%3D%222.2%22%20fill%3D%22%238a5322%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%2213%22%20r%3D%222.2%22%20fill%3D%22%238a5322%22%2F%3E%3C%2Fsvg%3E");background-repeat:repeat-x;background-size:auto 22px}
.frise.bas{transform:scaleY(-1)}

/* ---- Barre haute : rappel du curseur et recherche, collée en haut à droite ---- */
.bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:14px;
  background:rgba(239,220,187,.97);border-bottom:1px solid rgba(140,100,60,.4);
  margin:0 -46px;padding:8px 46px;backdrop-filter:blur(3px)}
.bar .marque{font-family:'AlegreyaSC',Georgia,serif;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:#3b2a1c;white-space:nowrap}
.bar .marque i{font-style:normal;color:#7a5c3e;font-size:11px;display:block;
  letter-spacing:.24em}
.bar .sp{flex:1}
#curseur{font-family:'AlegreyaSC',Georgia,serif;font-size:13px;letter-spacing:.06em;
  padding:7px 14px;cursor:pointer;background:#f4e3c6;color:#3b2a1c;
  border:1px solid #8a5322;white-space:nowrap}
#curseur b{color:#9c3a22;font-weight:400}
.rech{position:relative}
.rech input{font-family:'Alegreya',Georgia,serif;font-size:15px;padding:7px 12px 7px 30px;
  width:210px;background:#fbf3e2;color:#3b2a1c;border:1px solid rgba(140,100,60,.5)}
.rech svg{position:absolute;left:9px;top:9px;pointer-events:none}
.rech input:focus{outline:2px solid #b8763a;outline-offset:-1px}

/* ---- En-tete : volontairement court, il ne doit pas manger le premier ecran ---- */
header{text-align:center;padding:14px 0 10px}
h1{font-family:'AlegreyaSC',Georgia,serif;font-size:clamp(25px,3.6vw,38px);letter-spacing:.05em;
  margin:0;line-height:1.06;font-weight:400}
.auteur{font-style:italic;color:#7a5c3e;font-size:14px;margin-top:2px}
.promesse{font-size:14.5px;color:#7a5c3e;margin:7px auto 0;max-width:720px}
.promesse b{color:#3b2a1c;font-weight:400;border-bottom:1px solid #b8763a}

/* ---- Filtres par maison, en jetons, pour ne pas voler de hauteur ---- */
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:10px 0 12px}
.chip{font-family:'AlegreyaSC',Georgia,serif;font-size:12.5px;letter-spacing:.08em;
  padding:5px 12px 5px 9px;cursor:pointer;background:#f4e3c6;color:#3b2a1c;
  border:1px solid rgba(140,100,60,.45);display:inline-flex;align-items:center;gap:7px}
/* La pastille est la LÉGENDE du code couleur des tondi : sans elle, la couleur du jonc
   serait décorative au lieu d'être lisible. */
.chip:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--mc);
  box-shadow:0 0 0 1px var(--mcd)}
.chip[aria-pressed=true]{background:var(--mc);color:#fff8ea;border-color:var(--mcd)}
.chip[aria-pressed=true]:before{background:#fff8ea;box-shadow:0 0 0 1px var(--mcd)}

/* ---- La galerie : dense, c'est elle qui doit occuper le premier ecran ---- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px 8px}
/* Valeurs de repli : un tondo sans maison reste doré au lieu de disparaître. */
.pc{text-align:center;--mc:#b8763a;--mcl:#e0bd77;--mcd:#8a5322}
.pc[hidden]{display:none}
.pw{position:relative;width:100%;aspect-ratio:220/232}
.pw img{position:absolute;left:19.09%;top:15.52%;width:61.82%;height:58.62%;border-radius:50%;
  object-fit:cover;box-shadow:0 0 0 1.5px rgba(70,44,14,.5),0 4px 10px rgba(80,48,18,.25)}
.pw .creux{position:absolute;left:19.09%;top:15.52%;width:61.82%;height:58.62%;
  border-radius:50%;background:radial-gradient(circle at 40% 34%,#e3d0ac,#cbb489);
  box-shadow:inset 0 2px 8px rgba(90,60,25,.28)}
.tondo{position:absolute;inset:0;width:100%;height:100%}
.pc.vide .tondo{opacity:.42}
.pn{font-family:'AlegreyaSC',Georgia,serif;font-size:17px;font-weight:600;line-height:1.12;margin-top:-2px;
  letter-spacing:.03em}
.pm{font-size:11px;color:var(--mcd);letter-spacing:.1em;text-transform:uppercase;margin-top:1px}
.vide .pn{color:#7a5c3e;opacity:.5}
#vide-note{grid-column:1/-1;text-align:center;font-size:13px;color:#7a5c3e;
  margin:2px 0 0;font-style:italic}
#rien{display:none;text-align:center;color:#7a5c3e;padding:18px 0}

.cdl{display:block;margin:26px auto 6px}
h2{font-family:'AlegreyaSC',Georgia,serif;font-size:14px;letter-spacing:.24em;
  text-transform:uppercase;color:#3b2a1c;text-align:center;margin:4px 0 4px;font-weight:400}
.sous{text-align:center;color:#7a5c3e;font-size:14px;margin:0 auto 16px;max-width:640px}

.vols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.v{display:flex;gap:11px;align-items:center;background:#f4e3c6;
  border:1px solid rgba(140,100,60,.3);padding:9px 11px;text-decoration:none;color:inherit;
  cursor:pointer;text-align:left;font-family:inherit;font-size:inherit}
.v[aria-current=true]{border-color:#8a5322;box-shadow:inset 0 0 0 1px #b8763a;
  background:rgba(184,118,58,.14)}
.rom{flex:0 0 38px;height:38px;display:grid;place-items:center;font-family:'AlegreyaSC',Georgia,serif;
  font-size:16px;color:#9c3a22;background:rgba(184,118,58,.16);
  box-shadow:inset 0 0 0 1px #8a5322,inset 0 0 0 3px rgba(255,245,225,.5)}
.v i{font-style:normal;font-size:15.5px;display:block;line-height:1.2}
.v span{font-size:12px;color:#7a5c3e}

/* ---- Bloc « un personnage vous manque », en bas, comme sur les deux autres codex ---- */
.manque{display:flex;gap:18px;align-items:flex-start;margin-top:26px;padding:16px 18px;
  background:rgba(255,250,240,.66);border:1px solid rgba(140,100,60,.4)}
.lettrine{flex:0 0 76px;height:76px;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2294%22%20height%3D%2294%22%20fill%3D%22%23b8763a%22%20opacity%3D%22.16%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%2294%22%20height%3D%2294%22%20fill%3D%22none%22%20stroke%3D%22%238a5322%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2282%22%20height%3D%2282%22%20fill%3D%22none%22%20stroke%3D%22%23b8763a%22%20stroke-width%3D%221%22%20opacity%3D%22.7%22%2F%3E%3Cpath%20d%3D%22M7%207%20c%2014%202%2020%208%2022%2022%20c%20-14%20-2%20-20%20-8%20-22%20-22z%22%20fill%3D%22%236d6a35%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M89%2089%20c%20-14%20-2%20-20%20-8%20-22%20-22%20c%2014%202%2020%208%2022%2022z%22%20fill%3D%22%236d6a35%22%20opacity%3D%22.55%22%2F%3E%3Ccircle%20cx%3D%2289%22%20cy%3D%227%22%20r%3D%224%22%20fill%3D%22%239c3a22%22%20opacity%3D%22.75%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2289%22%20r%3D%224%22%20fill%3D%22%239c3a22%22%20opacity%3D%22.75%22%2F%3E%3C%2Fsvg%3E");background-size:cover;
  display:grid;place-items:center;font-family:'AlegreyaSC',Georgia,serif;font-size:44px;
  line-height:1;color:#9c3a22}
.manque h3{font-family:'AlegreyaSC',Georgia,serif;font-size:17px;letter-spacing:.04em;
  margin:0 0 4px;font-weight:400}
.manque p{margin:0 0 9px;font-size:14.5px;color:#7a5c3e}
.sugg-f{display:flex;gap:8px;flex-wrap:wrap}
.sugg-f input[type=text]{font-family:'Alegreya',Georgia,serif;font-size:15px;padding:8px 11px;
  flex:1;min-width:200px;background:#fbf3e2;border:1px solid rgba(140,100,60,.5);color:#3b2a1c}
.sugg-f button{font-family:'AlegreyaSC',Georgia,serif;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;padding:8px 20px;cursor:pointer;color:#fff8ea;
  background:linear-gradient(180deg,#b8763a,#8a5322);border:1px solid #6f4a1c}
.piege{position:absolute;left:-9999px}

.note{margin-top:22px;padding:14px 16px;background:rgba(255,250,240,.5);
  border:1px solid rgba(140,100,60,.32);font-size:14px;color:#7a5c3e}
.note h4{font-family:'AlegreyaSC',Georgia,serif;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;margin:12px 0 3px;color:#3b2a1c;font-weight:400}
.note b{color:#3b2a1c}
footer{margin-top:22px;text-align:center;font-size:12.5px;color:#7a5c3e}
.retour{position:fixed;bottom:12px;left:12px;font-size:12.5px;background:#f4e3c6;
  border:1px solid #b8763a;padding:6px 11px;text-decoration:none;color:#3b2a1c;z-index:9}

/* ---- Pop-up d'accueil : un FRONTISPICE, pas une liste de boutons ----------------------
   C'est le premier écran que voit un visiteur, avant même le codex. Il doit donner le ton
   de l'ouvrage, pas ressembler à une boîte de dialogue de navigateur. D'où la mise en page
   de page de titre : filets, frise, titre gravé, volumes numérotés en chiffres enluminés,
   et une sortie explicite pour qui n'a rien lu. */
.ob{position:fixed;inset:0;z-index:20;background:rgba(58,38,16,.66);display:none;
  align-items:center;justify-content:center;padding:14px;overflow:auto}
.ob.on{display:flex}
.dialog{position:relative;background:#efdcbb;max-width:640px;width:100%;max-height:96dvh;
  overflow:auto;border:1px solid #8a5322;box-shadow:0 24px 60px rgba(50,30,10,.55);
  outline:6px solid rgba(184,118,58,.18);outline-offset:-14px}
.dialog .frise{margin:0}
.dialog .in{padding:16px 30px 24px;text-align:center}
.surtitre{font-family:'AlegreyaSC',Georgia,serif;font-size:10.5px;letter-spacing:.34em;
  text-transform:uppercase;color:#7a5c3e;margin-top:4px}
.dialog h2{font-family:'AlegreyaSC',Georgia,serif;font-size:clamp(23px,4.4vw,31px);
  letter-spacing:.05em;margin:5px 0 2px;font-weight:400;color:#3b2a1c;
  text-transform:none;text-align:center}
.dialog .rule{height:0;margin:11px auto 12px;max-width:280px;border-top:1px solid #b8763a;
  position:relative}
.dialog .rule:after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;
  margin-left:-4px;transform:rotate(45deg);background:#b8763a}
.dialog p.expl{font-size:14.5px;color:#7a5c3e;margin:0 0 15px;text-align:center}
.tlist{display:grid;gap:5px;text-align:left}
.topt{display:flex;align-items:center;gap:12px;width:100%;background:#f4e3c6;
  cursor:pointer;border:1px solid rgba(140,100,60,.38);padding:7px 12px;
  font-family:inherit;color:inherit;transition:border-color .12s,background .12s}
.topt:hover,.topt:focus-visible{border-color:#8a5322;background:rgba(184,118,58,.16);
  outline:none}
.topt .rom{flex:0 0 38px;height:38px;display:grid;place-items:center;
  font-family:'AlegreyaSC',Georgia,serif;font-size:16px;color:#9c3a22;
  background:rgba(184,118,58,.16);
  box-shadow:inset 0 0 0 1px #8a5322,inset 0 0 0 3px rgba(255,245,225,.5)}
.topt .t{display:block;font-family:'AlegreyaSC',Georgia,serif;font-size:16.5px;
  line-height:1.2;letter-spacing:.02em}
.topt .d{display:block;font-size:12.5px;color:#7a5c3e;font-style:italic}
.plus{margin-top:13px;font-size:13.5px;color:#7a5c3e;background:none;border:none;
  cursor:pointer;text-decoration:underline;font-family:inherit;padding:4px}
.plus:hover{color:#3b2a1c}
.dialog .cdl{margin:14px auto 0}

@media(max-width:900px){.feuillet{padding:0 20px 36px}.bar{margin:0 -20px;padding:8px 20px}
  .feuillet:before,.feuillet:after{display:none}.vols{grid-template-columns:1fr}}
@media(max-width:640px){.bar{flex-wrap:wrap}.bar .marque{width:100%}.bar .sp{display:none}
  .rech input{width:100%}.rech{flex:1}
  .gal{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .manque{flex-direction:column;align-items:center;text-align:center}}

/* Bandeau d'accroche, comme sur les deux autres codex : l'auteur en surtitre, le titre,
   puis la promesse en une ligne. C'est elle qui dit au visiteur ce que fait le site. */
header .auteur{font-family:'AlegreyaSC',Georgia,serif;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;font-style:normal;color:#7a5c3e;margin-bottom:2px}
header .tag{font-family:'AlegreyaSC',Georgia,serif;font-size:clamp(16px,2.1vw,20px);
  letter-spacing:.03em;color:#9c3a22;margin-top:4px}

/* Le curseur est annoncé par son étiquette, même vocabulaire que les autres codex. */
.curctl{display:flex;align-items:center;gap:8px;white-space:nowrap}
.curctl .lab{font-family:'AlegreyaSC',Georgia,serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:#7a5c3e}

/* ---- La carte : encadrement arrondi, comme sur les deux autres codex ------------------
   Sylvain, 08/08 : « les encadrements étaient arrondis, ce que je ne retrouve pas sur le
   vieux royaume ». Ici le tondo posait sur le parchemin nu, sans carte. */
.pc{background:#f7ead1;border:1px solid rgba(201,160,94,.75);border-radius:12px;
  padding:4px 4px 7px;
  box-shadow:0 1px 2px rgba(90,60,25,.10),inset 0 0 0 3px rgba(201,160,94,.26)}

/* Habillage de la carte, demandé le 08/08 « comme sur les Martyrs », où un filet doré
   sépare le nom du rôle. Ici le filet porte le losange de la DA et prend la couleur de la
   maison, donc il redit le code couleur du tondo au lieu d'ajouter un motif de plus. */
.pc .fil{height:0;max-width:58%;margin:3px auto 3px;border-top:1px solid var(--mc);
  position:relative;opacity:.8}
.pc .fil:after{content:"";position:absolute;left:50%;top:-3.5px;width:7px;height:7px;
  margin-left:-3.5px;transform:rotate(45deg);background:var(--mc)}

/* ---- Angles arrondis sur toute la page (08/08) ---------------------------------------
   « il faut aussi arrondir les angles des encadrements sur la page comme pour les autres ».
   Valeurs alignées sur les deux autres codex : jetons en pilule, champs et boutons à 9 px,
   blocs à 12 ou 14. La lettrine reste carrée, une lettrine enluminée l'est toujours. */
.chip{border-radius:999px}
.rech input,#curseur,.sugg-f input[type=text],.sugg-f button{border-radius:9px}
.v,.topt{border-radius:10px}
.rom{border-radius:8px}
.manque{border-radius:14px}
.note,.dialog{border-radius:12px}

/* Le portrait suit le rayon du tondo : ces pourcentages SE DÉDUISENT de rp et de la boîte,
   ils ne se règlent pas à l'œil. Voir TONDO_PARAMS. */
.pw img,.pw .creux{left:12.73%;top:9.48%;width:74.55%;height:70.69%}

/* ---- Deux rangées visibles dans le premier écran (demande de Sylvain, 07/08) ----------
   La maquette tenait 7 portraits par rangée ; il en veut 5, « ou 6 éventuellement », comme
   sur les deux autres codex, ET deux rangées sans défiler. Les deux contraintes tirent en
   sens inverse : à 5 par rangée sur un feuillet de 1120 px, une carte fait 205 px de large
   et le tondo étant en 220x232, une rangée coûte environ 260 px, donc 520 px pour deux, ce
   qui ne tient plus sous la barre et le bandeau sur un portable. À 6 par rangée la carte
   tombe à 171 px, la rangée à environ 210 px, et les deux rangées tiennent.
   ⚠️ Calcul, pas mesure : je ne rends pas la page ici. auto-fill avec minmax(X) et un
   écart g donne floor((W+g)/(X+g)) colonnes ; pour W=1028 et g=8, X=158 donne 6 colonnes
   et il en faudrait plus de 165 pour retomber à 5.
   ⚠️ La valeur est SUBSTITUÉE dans la feuille importée, pas surchargée ici : deux
   déclarations laisseraient le contrôle de densité mesurer la première, donc pas celle qui
   s'applique. */
header{padding:10px 0 6px}
.promesse{font-size:13.5px;margin-top:5px}

/* Compteur et entrée alphabétique sur la MÊME ligne que les filtres : une ligne autonome
   coûtait 28 px de hauteur, pris sur la deuxième rangée de portraits. Fait par un conteneur
   commun et non par une marge négative, qui se serait chevauchée dès que les jetons
   passent sur deux lignes. */
.filtres{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  margin:8px 0 10px}
.filtres .chips{margin:0;flex:1 1 auto}
.cpt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;white-space:nowrap;
  font-size:13px;color:#7a5c3e;margin:0}
.cpt b{font-family:'AlegreyaSC',Georgia,serif;font-weight:400;color:#3b2a1c;
  letter-spacing:.06em}
.cpt a{color:#8a5322}
.pc a{text-decoration:none;color:inherit;display:block}

/* Pied de page : la mention de fan tient le cadre juridique, les liens relient les codex. */
footer .liens{margin-top:5px}
footer a{color:#7a5c3e;margin:0 7px}

/* Index alphabétique : une ligne par personnage, la forme qu'un moteur parcourt le mieux. */
.alpha{margin:8px 0 0;padding:0;list-style:none}
.alpha li{display:flex;gap:12px;align-items:baseline;padding:7px 2px;
  border-bottom:1px solid rgba(140,100,60,.25)}
.alpha .n{font-family:'AlegreyaSC',Georgia,serif;font-size:17px;letter-spacing:.02em;
  flex:0 0 250px}
.alpha .n a{color:#3b2a1c;text-decoration:none}
.alpha .r{font-size:14px;color:#7a5c3e;flex:1}
.alpha .m{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mcd)}
@media(max-width:640px){.alpha li{flex-wrap:wrap}.alpha .n{flex:1 0 100%}
  /* Ce codex n'avait aucune adaptation de typo (audit mobile du 14/08) : le texte y
     gardait ses tailles de bureau, dont un rôle d'index à 14px et une maison à 11px. */
  .alpha .r{font-size:15.5px}.alpha .m{font-size:12.5px}
  .promesse{font-size:15px}.cpt{font-size:14px}
  header .auteur{font-size:12px;letter-spacing:.18em}}
/* iOS Safari zoome la page dès qu'on met le curseur dans un champ sous 16px, et ne dézoome
   pas ensuite. Sélecteur qualifié par la balise, pour passer devant la règle de base. */
@media(max-width:820px){.rech input,input.rech-i,.sugg-f input[type=text],#curseur{font-size:16px}}

/* ---- Page de personnage (salve 1, 07/09) ---------------------------------------------
   Le gabarit est celui des deux autres codex, décliné dans la DA d'ocre : fil d'Ariane,
   en-tête portrait plus identité, paragraphe d'introduction, frise des volumes, renvois.
   ⚠️ Le paragraphe d'introduction est FRÈRE du bloc d'en-tête, jamais dedans : `text-align`
   s'hérite, donc centrer un en-tête centrerait son texte courant sans qu'aucune
   déclaration fautive n'apparaisse dans cette feuille (contrôle `textes_centres`). */
.bread{font-size:12.5px;color:#7a5c3e;margin:10px 0 2px}
.bread a{color:#8a5322;text-decoration:none}
.bread span{color:#7a5c3e}
.fiche{max-width:760px;margin:0 auto}
.fhd{display:flex;gap:18px;align-items:flex-start;margin:6px 0 4px}
.fhd .pw{flex:0 0 200px}
.fhi{flex:1 1 auto;min-width:0;padding-top:8px}
.fhi h1{margin:0;font-family:'AlegreyaSC',Georgia,serif;font-size:clamp(26px,4vw,36px);
  letter-spacing:.01em;color:#3b2a1c;line-height:1.12}
.fal{font-family:'AlegreyaSC',Georgia,serif;font-size:15px;letter-spacing:.04em;
  color:#7a5c3e;margin-top:3px}
.fmaison{display:inline-block;margin-top:8px;padding:2px 11px;border-radius:999px;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mcd);
  border:1px solid var(--mc);background:rgba(255,255,255,.42)}
.fapp{font-size:13px;color:#7a5c3e;margin-top:9px}
.fmort{font-size:13px;color:#9c3a22;margin:6px 0 0}
.intro{font-size:16.5px;line-height:1.62;margin:14px 0 4px;color:#3b2a1c;text-align:left}
.fiche h2{font-family:'AlegreyaSC',Georgia,serif;font-size:19px;letter-spacing:.06em;
  color:#8a5322;margin:22px 0 6px;font-weight:400}
.tl{list-style:none;margin:0;padding:0}
.tl li{padding:11px 2px 11px 14px;border-left:2px solid var(--mc);margin-bottom:9px;
  font-size:15px;line-height:1.55;background:rgba(255,255,255,.30);border-radius:0 10px 10px 0}
.tl .tn{display:block;font-family:'AlegreyaSC',Georgia,serif;font-size:14px;
  letter-spacing:.08em;color:#8a5322;margin-bottom:3px}
.tl li.absent{opacity:.55;font-style:italic;border-left-color:rgba(140,100,60,.35)}
.tl li.lock{color:#7a5c3e;font-style:italic;border-left-style:dashed}
.rel a{display:inline-block;margin:0 9px 7px 0;color:#8a5322;font-size:14.5px}
@media(max-width:640px){
  .fhd{flex-direction:column;align-items:center}
  .fhd .pw{flex:0 0 auto;width:210px}
  .fhi{padding-top:0;text-align:center}
  .fiche .intro{font-size:16.5px}
  .tl li{font-size:15.5px}
  .bread{font-size:13.5px}}