/* Identité de priston.net depuis 2006 : bandeau parchemin orné, colonne bleue au logo, page claire illustrée. */
:root {
  --bleu: #053a74;
  --bleu-fonce: #032a55;
  --bleu-clair: #cfe0f5;
  --parchemin: #e8d6bb;
  --page: #fbf7ef;
  --carte: #ffffff;
  --bord: #dccbb0;
  --texte: #2a1d10;
  --doux: #7a6650;
  --brun: #6b3f17;
  --or: #b9822a;
  --alerte: #b3261e;
  --rayon: 10px;
  --titre: 'Cinzel', Georgia, serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--page); color: var(--texte);
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
a { color: var(--bleu); }
a:hover { color: var(--brun); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bandeau : la frise du site d'origine. */
.entete { position: relative; display: flex; align-items: center; gap: 16px; min-height: 112px; padding: 34px 20px 30px;
  background: var(--parchemin) url(/image/wallpaper035.jpg) center top / auto 145px repeat-x; }
.marque { font-family: var(--titre); font-weight: 700; font-size: clamp(26px, 5vw, 38px); color: var(--texte); text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.6); margin: 0 auto 0 0; }
.marque span { color: var(--brun); }
.langues { display: flex; gap: 4px; font-size: 13px; font-weight: 600; }
.langues a, .langues span { color: var(--texte); text-decoration: none; padding: 3px 7px; border-radius: 6px; }
.langues span { background: rgba(255,255,255,.55); }
.langues a:hover { background: rgba(255,255,255,.35); }

/* Corps : colonne bleue au logo, puis la page. */
.corps { flex: 1; display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.colonne { background: var(--bleu) url(/frame/img2.jpg) left top no-repeat; padding: 132px 0 24px; border-right: 3px double #8fb0d8; }
.colonne ul { list-style: none; margin: 0; padding: 0 10px 0 14px; display: grid; gap: 2px; }
.colonne li a { display: block; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; padding: 5px 8px 5px 18px; border-radius: 6px; position: relative; }
.colonne li a::before { content: ''; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #d9a441; }
.colonne li a:hover { background: rgba(255,255,255,.12); }
.colonne li a[aria-current] { background: #fff; color: var(--bleu); }
.colonne .separe { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.2); }
.colonne .separe a { font-weight: 400; color: var(--bleu-clair); }

main { min-width: 0; padding: 20px clamp(16px, 3vw, 36px) 32px; max-width: 1080px; }
.page-illustree { background: url(/home/morion027.jpg) right -40px top -60px / 900px auto no-repeat fixed; }

@media (max-width: 760px) {
  .entete { min-height: 0; padding: 28px 16px 24px; background-size: auto 120px; }
  .corps { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .colonne { padding: 8px 0; border-right: 0; border-bottom: 3px double #8fb0d8; background-image: none; }
  .colonne ul { display: flex; overflow-x: auto; gap: 4px; padding: 0 12px; scrollbar-width: none; }
  .colonne ul::-webkit-scrollbar { display: none; }
  .colonne li a { white-space: nowrap; font-size: 14px; }
  .colonne .separe { margin: 0; padding: 0; border: 0; }
  .page-illustree { background: none; }
}

.pied { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; padding: 18px 16px; color: #e3ecf8; font-size: 13px;
  background: var(--bleu-fonce); }
.pied a { color: #fff; }

.titre-page { font-family: var(--titre); font-size: clamp(22px, 4vw, 30px); margin: 4px 0 16px; color: var(--brun); }
h2 { font-family: var(--titre); font-size: 19px; margin: 28px 0 10px; color: var(--brun); }
.note { color: var(--doux); margin: 0 0 8px; }

/* Plan du site */
.liste { list-style: none; padding: 0; margin: 0; columns: 2 280px; column-gap: 24px; }
.liste li { break-inside: avoid; padding: 3px 0; overflow-wrap: anywhere; }
.liste small { color: var(--doux); font-size: 12px; }

/* Composants communs aux sections : tableaux de données, filtres, fiches. */
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { padding: 7px 10px; text-align: left; border-bottom: 1px solid #efe4d2; white-space: nowrap; vertical-align: middle; }
.tableau th { position: sticky; top: 0; background: var(--bleu); color: #fff; font-weight: 600; font-size: 13px; z-index: 1; }
.tableau tbody tr:nth-child(even) { background: #fbf6ec; }
.tableau tbody tr:hover { background: #f3e7cf; }
.tableau .num { text-align: right; }
.tableau img { vertical-align: middle; max-height: 44px; }
.filtres { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.filtres a, .filtres button { font: inherit; font-size: 14px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); text-decoration: none; cursor: pointer; }
.filtres a[aria-current], .filtres button[aria-pressed=true] { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.recherche { width: 100%; max-width: 360px; font: inherit; font-size: 16px; padding: 8px 12px; border: 1px solid var(--bord); border-radius: 8px; background: #fffdf8; margin: 0 0 12px; }
.fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.fiche { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; min-width: 0; }
.fiche h3 { margin: 0 0 6px; font-size: 16px; color: var(--bleu); }
.chapeau { max-width: 720px; color: var(--texte); }
.sources { color: var(--doux); font-size: 12px; margin-top: 24px; }

/* Pages de 2006 encore habillées du gabarit, en attendant leur réécriture. */
.ancien { overflow-x: auto; }
.ancien img { max-width: 100%; height: auto; }
.ancien table { max-width: 100%; border-color: var(--bord); }
.ancien font[size="7"], .ancien font[size="6"] { font-size: 28px; }
.ancien a { color: var(--bleu); }