/* memoire-pied-20260916-r1.css : lot v2-memoire-pied-r1 (16/09/2026, Claude). Stéphane, deux captures de l'accueil :
   « retire d'ici et met dans le pied de page avec pophover explicatif pour ne pas surcharger » (le réglage Affichage),
   puis « met juste en dessus du footer et retire la mention v1 .. tout doit être dans la v2 (donc page à refaire si
   besoin) .. explique en 3 ou 4 colonnes ce qu'est la mémoire du monde, le domaine public et l'utilité d'y accéder ».
   Trois gestes, une seule feuille (servie seule, et ajoutée en fin de la fusion de l'accueil) :
   ① la bande « La mémoire du monde » sort de <main> pour se poser JUSTE AU-DESSUS DU PIED : l'éditorial et le
     magazine s'ajoutent en fin de <main> APRÈS chargement (magazine-20260916-r8.js), un ordre dans <main> ne tient
     donc pas. Hors de <main>, elle reprend la largeur du contenu (1140, marges 24 px sous 1190, 16 px sous 761) ;
   ② le réglage « Affichage » quitte le contenu pour la barre basse du pied, avec un ⓘ qui ouvre l'explication ;
   ③ la page /patrimoine/ de la V2 (classes pat-*).
   Aucune couleur en dur hors celles déjà servies : jetons --bg --surface --ink --muted --line --accent --soft. */

/* ── ① LA BANDE, JUSTE AU-DESSUS DU PIED ──────────────────────────────────────────────────────────────────────
   Elle garde la classe .memory : fond --soft, rayon et signatures des neuf thèmes (html[data-style] .memory) la
   suivent sans rien réécrire. .memory.memoire bat .memory (base en ligne, flex) : la bande devient un bloc. */
section.memory.memoire{display:block;max-width:1140px;margin:40px auto 12px;padding:30px 32px 28px}
.memoire-tete{display:flex;align-items:center;justify-content:space-between;gap:20px 30px}
.memoire-tete h2{margin:6px 0}
.memoire .memoire-tete p{max-width:640px}
.memoire-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 30px;margin:26px 0 0;padding:24px 0 0;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.memoire-col{min-width:0}
.memoire-col h3{margin:0 0 7px;font-size:15.5px;line-height:1.3;letter-spacing:-.1px;color:var(--ink)}
.memoire-col h3::before{content:"";display:block;width:26px;height:3px;margin:0 0 11px;border-radius:2px;background:var(--accent)}
.memoire .memoire-col p{max-width:none;font-size:14px;line-height:1.6}
.memoire-liens{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0}
.memoire-liens li{margin:0;padding:0}
.memoire-liens a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600}
.memoire-liens a:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:1190px){section.memory.memoire{margin-left:24px;margin-right:24px}}
@media (max-width:1023px){.memoire-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  section.memory.memoire{margin:32px 16px 8px;padding:24px 20px}
  .memoire-tete{flex-direction:column;align-items:flex-start;gap:16px}
  .memoire-cols{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:22px;padding-top:20px}
  .memoire-liens{gap:6px}
  .memoire-liens a{padding:0 14px;font-size:13.5px}
}

/* ── ② LE RÉGLAGE « AFFICHAGE » DANS LA BARRE BASSE DU PIED ─────────────────────────────────────────────────────
   Libellé, liste (44 px, comme l'ancien .data-settings) et un ⓘ de 44 px qui ouvre l'explication.
   ⚠️ EXCEPTION À LA RÈGLE « UN POPOVER S'OUVRE CENTRÉ SOUS SON ICÔNE » (CLAUDE.md, 10/08), écrite ici comme la
   règle le demande : le panneau s'ouvre CENTRÉ SUR L'ICÔNE mais AU-DESSUS d'elle. Le bouton vit dans la dernière
   rangée de la page : dessous, il n'y a que la fin du document (le panneau agrandirait la page et resterait hors
   de l'écran) et, au téléphone, la capsule de navigation fixée en bas. Le centrage reste la règle (left:50% sur
   l'ancre, translateX(-50%)) ; la bornure aux bords de la fenêtre ne fait que le rapprocher (--aff-dx, posé par
   affichage-20260916-r1.js AVANT la première peinture), et la pointe reste sous l'icône. Il s'ouvre une fois :
   aucun replacement tant que la largeur de la fenêtre ne change pas. */
.aff{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto}
.aff label{color:var(--muted);font-size:12.5px}
.aff select{min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.aff select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.aff-ancre{position:relative;display:inline-flex}
.aff-pop{position:absolute;z-index:40;bottom:calc(100% + 6px);left:50%;width:min(340px,calc(100vw - 16px));transform:translateX(calc(-50% + var(--aff-dx,0px)));
  padding:16px 18px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);text-align:start;
  font-size:13px;line-height:1.5;box-shadow:0 18px 40px -12px rgba(20,24,51,.35),0 2px 6px rgba(20,24,51,.12)}
.aff-pop::after{content:"";position:absolute;top:100%;left:calc(50% - var(--aff-dx,0px));width:12px;height:12px;margin:-6px 0 0 -6px;
  background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.aff-pop-titre{margin:0 0 8px;font-weight:700;font-size:14px;color:var(--ink)}
.aff-pop dl{margin:0}
.aff-pop dt{margin:8px 0 1px;font-weight:650;color:var(--ink)}
.aff-pop dd{margin:0;color:var(--muted)}
.aff-pop #data-notice{margin:12px 0 0;padding:9px 11px;border-radius:9px;background:var(--soft);color:var(--ink)}
.aff-pop .aff-pop-note{margin:8px 0 0;color:var(--muted);font-size:12px}
@media (max-width:760px){
  .aff{flex-basis:100%;margin-inline-start:0}
  .aff select{font-size:16px}
}

/* ── ③ LA PAGE /patrimoine/ ──────────────────────────────────────────────────────────────────────────────────── */
.pat{padding:18px 0 48px}
.pat-retour{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:14px;font-weight:600}
.pat-retour:hover{color:var(--ink)}
.pat-tete{padding:10px 0 8px;max-width:760px}
.pat-tete h1{max-width:760px}
.pat-chapo{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--muted)}
.pat h2{margin:44px 0 16px;font-size:25px;letter-spacing:-.5px;line-height:1.2}
.pat-grille{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0}
.pat-grille li{margin:0;padding:0;min-width:0}
.pat-carte{display:flex;flex-direction:column;gap:6px;height:100%;min-height:44px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink)}
.pat-carte strong{font-size:17px;line-height:1.3}
.pat-carte strong::after{content:" →";color:var(--accent)}
.pat-carte span{font-size:14px;line-height:1.55;color:var(--muted)}
.pat-carte:hover{border-color:var(--accent)}
.pat-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px}
.pat-cols article{min-width:0}
.pat-cols h3{margin:0 0 8px;font-size:18px;line-height:1.3}
.pat-cols h3::before{content:"";display:block;width:28px;height:3px;margin:0 0 12px;border-radius:2px;background:var(--accent)}
.pat-cols p,.pat-sources p{margin:0;font-size:15.5px;line-height:1.7;max-width:62ch}
.pat-sources p{color:var(--ink)}
.pat-faq details{border-top:1px solid var(--line)}
.pat-faq details:last-child{border-bottom:1px solid var(--line)}
.pat-faq summary{display:flex;align-items:center;min-height:52px;padding:10px 0;font-weight:650;font-size:16px;cursor:pointer}
.pat-faq details p{margin:0 0 16px;max-width:70ch;font-size:15px;line-height:1.65;color:var(--muted)}
@media (max-width:1023px){.pat-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .pat{padding-top:8px}
  .pat-chapo{font-size:16px}
  .pat h2{margin-top:34px;font-size:22px}
  .pat-grille,.pat-cols{grid-template-columns:minmax(0,1fr)}
  .pat-cols{gap:24px}
}