/*
 * Le Génie Français — feuille de style « Édition de musée »
 * Le papier pour lire, la nuit pour les couvertures, l'or pour les filets.
 * Pages générées par outils/generer-pages.mjs ; maquettes de référence dans le canvas
 * « Le Génie Français — Refonte » (claude.ai/artifact/1MafpHo3rT5t6Sgtt7kwGS).
 */

:root {
    --nuit: #111c33;
    --nuit-claire: #1a2847;
    --nuit-profonde: #0d1629;
    --papier: #f5f0e6;
    --papier-mat: #fbf8f1;
    --or: #d4af37;
    --or-sombre: #c9a227;
    /* Or foncé pour le texte doré sur papier : l'or vif n'y atteint pas 4,5:1 */
    --or-bruni: #7d6115;
    --ardoise: #4d5670;
    --rouge: #a8322a;
    --filet: rgba(17, 28, 51, .14);
    --filet-leger: rgba(17, 28, 51, .1);
    --marge: 96px;
    --police-titre: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --police-surtitre: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --police-citation: 'Cormorant Garamond', Garamond, Georgia, serif;
    --police-texte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ombre-planche: 0 1px 2px rgba(17, 28, 51, .06), 0 30px 60px -30px rgba(17, 28, 51, .45);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--police-texte);
    color: var(--nuit);
    background-color: var(--papier);
    background-image: radial-gradient(rgba(17, 28, 51, .045) .6px, transparent .8px);
    background-size: 5px 5px;
    -webkit-font-smoothing: antialiased;
}

body.page-nuit {
    color: var(--papier);
    background-color: var(--nuit);
    background-image:
        radial-gradient(rgba(212, 175, 55, .05) .6px, transparent .8px),
        radial-gradient(900px 520px at 80% -8%, rgba(212, 175, 55, .09), rgba(212, 175, 55, 0) 70%);
    background-size: 5px 5px, 100% 100%;
}

main { flex-grow: 1; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--or-bruni); }
.page-nuit a:hover, .nuit a:hover { color: var(--or); }

img { display: block; max-width: 100%; }

sup { font-size: .55em; line-height: 0; }
/* Dans les capitales espacées, l'exposant « e » se colle au chiffre romain */
.surtitre sup, .fil sup { font-size: .72em; letter-spacing: 0; margin-left: -.24em; margin-right: .28em; }

:focus-visible { outline: 2px solid var(--or-sombre); outline-offset: 3px; }

.elz { font-variant-numeric: oldstyle-nums; }

.visuellement-cache {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Typographie commune ---------- */

.surtitre {
    font-family: var(--police-surtitre);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--or-bruni);
}
.page-nuit .surtitre, .nuit .surtitre { color: var(--or); }
.surtitre-discret { color: var(--ardoise); }
.page-nuit .surtitre-discret, .nuit .surtitre-discret { color: rgba(245, 240, 230, .6); }

.chapo {
    margin: 0;
    font-family: var(--police-citation);
    font-style: italic;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.3;
    color: var(--nuit-claire);
}
.page-nuit .chapo, .nuit .chapo { color: rgba(245, 240, 230, .9); }

.italique-annee {
    font-family: var(--police-titre);
    font-style: italic;
    font-weight: 500;
    color: var(--or-bruni);
    font-variant-numeric: oldstyle-nums;
}
.page-nuit .italique-annee, .nuit .italique-annee { color: var(--or); }

.titre-salle {
    margin: 0;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 76px;
    line-height: 1;
}

.intro-salle {
    margin: 0;
    font-family: var(--police-citation);
    font-style: italic;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.35;
    color: var(--nuit-claire);
}
.nuit .intro-salle { color: rgba(245, 240, 230, .85); }

.lien-souligne {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(17, 28, 51, .3);
}
.nuit .lien-souligne, .page-nuit .lien-souligne { border-bottom-color: rgba(212, 175, 55, .6); }

.fleuron { display: flex; align-items: center; justify-content: center; gap: 14px; }
.fleuron::before, .fleuron::after { content: ""; width: 64px; height: 1px; background: var(--or-sombre); }
.fleuron span { width: 7px; height: 7px; border: 1px solid var(--or-sombre); transform: rotate(45deg); }
.nuit .fleuron::before, .nuit .fleuron::after, .page-nuit .fleuron::before, .page-nuit .fleuron::after { background: var(--or); }
.nuit .fleuron span, .page-nuit .fleuron span { border-color: var(--or); }

.tricolore { display: flex; height: 3px; flex-shrink: 0; }
.tricolore span { flex: 1; }
.tricolore span:nth-child(1) { background: #002395; }
.tricolore span:nth-child(2) { background: var(--papier); }
.tricolore span:nth-child(3) { background: #ED2939; }

.icone { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Boutons ---------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 28px;
    border: 1px solid var(--nuit);
    background: var(--nuit);
    color: var(--papier);
    font-family: var(--police-texte);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.bouton:hover { background: var(--nuit-claire); color: var(--papier); }
.bouton-contour { background: transparent; color: var(--nuit); border-color: rgba(17, 28, 51, .3); }
.bouton-contour:hover { background: transparent; color: var(--or-bruni); border-color: var(--or-sombre); }
.nuit .bouton-contour, .page-nuit .bouton-contour { color: var(--papier); border-color: var(--papier); }
.nuit .bouton-contour:hover, .page-nuit .bouton-contour:hover { color: var(--or); border-color: var(--or); }
.bouton-papier { background: var(--papier); color: var(--nuit); border-color: var(--papier); }
.bouton-papier:hover { background: var(--papier-mat); color: var(--nuit); }

.bouton-texte {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 6px;
    border: none;
    border-bottom: 1px solid rgba(17, 28, 51, .3);
    background: none;
    color: inherit;
    font-family: var(--police-texte);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}
.bouton-texte:hover { color: var(--or-bruni); }
.page-nuit .bouton-texte, .nuit .bouton-texte { border-bottom-color: rgba(245, 240, 230, .35); }
.page-nuit .bouton-texte:hover, .nuit .bouton-texte:hover { color: var(--or); }

/* ---------- En-tête ---------- */

.entete {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 28px var(--marge);
    border-bottom: 1px solid var(--filet);
}
.page-nuit .entete, .entete.sur-nuit { border-bottom-color: rgba(212, 175, 55, .2); color: var(--papier); }

.marque { display: flex; align-items: center; gap: 16px; }
.monogramme {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--or-sombre);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .06em;
}
.sur-nuit .monogramme, .page-nuit .monogramme { border-color: var(--or); }
.marque-textes { display: flex; flex-direction: column; gap: 4px; }
.marque-nom { font-family: var(--police-surtitre); font-weight: 600; font-size: 15px; letter-spacing: .28em; }
.marque-devise { font-family: var(--police-citation); font-style: italic; font-size: 16px; color: var(--ardoise); }
.sur-nuit .marque-devise, .page-nuit .marque-devise { color: rgba(245, 240, 230, .7); }

.nav-principale {
    display: flex;
    align-items: center;
    gap: 36px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.nav-principale a { padding: 6px 0 5px; border-bottom: 1px solid transparent; white-space: nowrap; }
.nav-principale a[aria-current="page"] { border-bottom-color: var(--or-sombre); }
.sur-nuit .nav-principale a[aria-current="page"], .page-nuit .nav-principale a[aria-current="page"] { border-bottom-color: var(--or); }
.nav-separateur { width: 1px; height: 18px; background: rgba(212, 175, 55, .5); }

.bouton-menu {
    display: none;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    border: 1px solid rgba(17, 28, 51, .2);
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}
.sur-nuit .bouton-menu, .page-nuit .bouton-menu { border-color: rgba(245, 240, 230, .4); }
.bouton-menu .icone { width: 20px; height: 20px; }

.menu-mobile {
    position: absolute;
    top: calc(100% + 1px);
    left: 0; right: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    padding: 8px 20px 20px;
    background: var(--papier);
    border-bottom: 1px solid var(--nuit);
    box-shadow: 0 24px 40px -20px rgba(17, 28, 51, .35);
}
.menu-mobile[hidden] { display: none; }
.menu-mobile a {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid var(--filet-leger);
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 21px;
    color: var(--nuit);
}
.menu-mobile a:last-child { border-bottom: none; }

/* ---------- Fil d'Ariane ---------- */

.fil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px var(--marge);
    border-bottom: 1px solid rgba(17, 28, 51, .08);
    font-family: var(--police-surtitre);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ardoise);
}
.fil ol { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.fil li + li::before { content: "·"; margin-right: 14px; }
.fil-numero { color: var(--or-bruni); white-space: nowrap; }

/* ---------- Planches (photos encadrées) et frontispices ---------- */

.planche { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.planche-cadre {
    display: block;
    padding: 18px;
    background: var(--papier-mat);
    border: 1px solid rgba(17, 28, 51, .08);
    box-shadow: var(--ombre-planche);
}
.planche-cadre img { width: 100%; height: 560px; object-fit: cover; }
.planche-legende { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 4px; }
.planche-legende .surtitre { font-size: 11px; letter-spacing: .26em; color: var(--ardoise); white-space: nowrap; }
.planche-legende em { text-align: right; }
.planche-legende em { font-family: var(--police-citation); font-size: 17px; color: var(--ardoise); }
.page-nuit .planche-cadre { background: var(--nuit-claire); border-color: rgba(212, 175, 55, .45); box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .8); }
.page-nuit .planche-legende .surtitre, .page-nuit .planche-legende em { color: rgba(245, 240, 230, .65); }

.frontispice {
    position: relative;
    height: 560px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
    color: var(--papier);
    background-color: var(--nuit);
    background-image: repeating-radial-gradient(circle at 50% 44%, rgba(212, 175, 55, 0) 0 9px, rgba(212, 175, 55, .11) 9px 10px);
}
.frontispice::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(212, 175, 55, .38);
    pointer-events: none;
}
.frontispice-coin {
    position: absolute;
    top: 34px;
    font-family: var(--police-surtitre);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--or);
}
.frontispice-coin.gauche { left: 36px; }
.frontispice-coin.droite { right: 36px; }
.medaillon-grand {
    position: relative;
    width: 210px; height: 210px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--nuit);
    border: 1px solid var(--or);
    box-shadow: 0 0 0 9px var(--nuit), 0 0 0 10px rgba(212, 175, 55, .55);
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 124px;
    line-height: 1;
    color: var(--or);
}
.medaillon-grand span { margin-top: -10px; }
.frontispice-romain {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    font-family: var(--police-surtitre);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: .46em;
    padding-left: .46em;
}
.frontispice-titre {
    position: absolute;
    bottom: 30px;
    left: 40px; right: 40px;
    text-align: center;
    font-family: var(--police-citation);
    font-style: italic;
    font-size: 18px;
    color: rgba(245, 240, 230, .72);
}

.medaillon {
    width: 72px; height: 72px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--nuit);
    box-shadow: 0 0 0 5px var(--papier), 0 0 0 6px rgba(201, 162, 39, .6);
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 34px;
    color: var(--or);
}

/* ---------- Fiche invention ---------- */

.fiche-tete {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 88px;
    align-items: start;
    padding: 72px var(--marge) 0;
}
.fiche-identite { display: flex; flex-direction: column; gap: 28px; padding-top: 36px; }
.surtitre-filet { display: flex; align-items: center; gap: 16px; font-size: 13px; letter-spacing: .32em; }
.surtitre-filet .trait { width: 44px; height: 1px; background: var(--or-sombre); }
.fiche-titre {
    margin: 0;
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 128px;
    line-height: .95;
    letter-spacing: -.02em;
    overflow-wrap: break-word;
    hyphens: auto;
}
.fiche-titre.titre-moyen { font-size: 100px; }
.fiche-titre.titre-long { font-size: 80px; line-height: 1; }
.fiche-titre.titre-tres-long { font-size: 64px; line-height: 1.04; }
.fiche-annee { display: block; margin-top: 6px; font-size: 46px; }
.fiche-signature { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding-top: 8px; }
.artisans { display: flex; flex-direction: column; gap: 6px; }
.artisans .surtitre { font-size: 11px; color: var(--ardoise); }
.artisans-noms { font-size: 16px; font-weight: 500; }
.signature-separateur { width: 1px; height: 44px; background: rgba(17, 28, 51, .18); }
.badge-record {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid var(--or-sombre);
    color: var(--or-bruni);
    font-family: var(--police-surtitre);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .24em;
    text-transform: uppercase;
}
.page-nuit .badge-record { color: var(--or); border-color: rgba(212, 175, 55, .6); }

.fiche-corps {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 96px;
    padding: 112px var(--marge) 0;
}
.notice { border-top: 1px solid var(--nuit); }
.notice h2 { margin: 0; padding: 16px 0 20px; font-size: 12px; color: var(--nuit); }
.notice dl { margin: 0; }
.notice-ligne {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid rgba(17, 28, 51, .12);
    font-size: 14px;
}
.notice-ligne:last-child { border-bottom: 1px solid rgba(17, 28, 51, .12); }
.notice-ligne dt { color: var(--ardoise); }
.notice-ligne dd { margin: 0; font-weight: 500; text-align: right; }
.notice-ligne .italique-annee { font-size: 17px; color: var(--nuit); }
.notice-ligne .distinction { color: var(--or-bruni); }

.histoire { display: flex; flex-direction: column; max-width: 700px; }
.histoire h2 { margin: 0 0 22px; }
.histoire-texte { margin: 0; font-size: 18px; line-height: 1.85; color: var(--nuit-claire); }
/* Lettrine en ::first-letter : le texte reste intact pour les moteurs de recherche */
.histoire-texte::first-letter {
    float: left;
    padding: 10px 14px 0 0;
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 92px;
    line-height: .78;
    color: var(--or-bruni);
}
.portee {
    margin: 56px 0 0;
    padding: 34px 0 38px;
    border-top: 1px solid var(--or-sombre);
    border-bottom: 1px solid var(--or-sombre);
}
.portee .surtitre { margin: 0; font-family: var(--police-surtitre); font-style: normal; font-weight: 600; font-size: 11px; line-height: 1.4; color: var(--ardoise); }
.portee p {
    margin: 14px 0 0;
    font-family: var(--police-titre);
    font-style: italic;
    font-weight: 500;
    font-size: 40px;
    line-height: 1.2;
}

.cartouche-zone { display: flex; justify-content: center; padding: 112px var(--marge) 0; }
.cartouche-cadre { width: 100%; max-width: 880px; padding: 7px; border: 1px solid var(--or-sombre); }
.cartouche {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 52px 80px 56px;
    border: 1px solid rgba(201, 162, 39, .45);
    background: rgba(251, 248, 241, .7);
}
.cartouche h2 { display: flex; align-items: center; gap: 16px; margin: 0; font-size: 13px; letter-spacing: .32em; }
.cartouche h2::before, .cartouche h2::after { content: ""; width: 56px; height: 1px; background: var(--or-sombre); }
.cartouche p {
    margin: 0;
    text-align: center;
    font-family: var(--police-citation);
    font-style: italic;
    font-weight: 500;
    font-size: 27px;
    line-height: 1.45;
}

.actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px; padding: 64px var(--marge) 0; }

.voisins {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    margin: 96px var(--marge) 0;
    border-top: 1px solid var(--nuit);
    border-bottom: 1px solid var(--filet);
}
.voisins-separateur { background: var(--filet); }
.voisin { display: flex; flex-direction: column; gap: 8px; padding: 36px 40px 36px 0; }
.voisin.suivant { align-items: flex-end; text-align: right; padding: 36px 0 36px 40px; }
.voisin-sens { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .28em; color: var(--ardoise); }
.voisin-titre { font-family: var(--police-titre); font-weight: 700; font-size: 32px; line-height: 1.15; }
.voisin .italique-annee { font-size: 20px; }

.salle-voisine { display: flex; flex-direction: column; gap: 48px; padding: 112px var(--marge) 128px; }
.salle-voisine-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.salle-voisine-tete h2 { margin: 12px 0 0; font-family: var(--police-titre); font-weight: 700; font-size: 48px; }
.suggestions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.suggestion { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid var(--or-sombre); }
.suggestion .surtitre { font-size: 11px; letter-spacing: .26em; color: var(--ardoise); }
.suggestion-titre { font-family: var(--police-titre); font-weight: 700; font-size: 25px; line-height: 1.2; }
.suggestion-resume { font-family: var(--police-citation); font-style: italic; font-size: 19px; line-height: 1.35; color: var(--ardoise); }

/* ---------- Pied de page ---------- */

.pied { display: flex; flex-direction: column; background: var(--nuit); color: var(--papier); }
.pied-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    padding: 72px var(--marge) 56px;
}
.pied-marque { display: flex; flex-direction: column; gap: 16px; }
.pied-marque .marque-nom { font-size: 16px; letter-spacing: .3em; }
.pied-devise { font-family: var(--police-citation); font-style: italic; font-size: 22px; color: rgba(245, 240, 230, .75); }
.pied-compte { font-size: 13px; letter-spacing: .06em; color: rgba(245, 240, 230, .6); }
.pied-liste { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.pied-liste .surtitre { font-size: 11px; color: var(--or); }
.pied-texte { font-family: var(--police-citation); font-style: italic; font-size: 20px; line-height: 1.4; color: rgba(245, 240, 230, .8); }
.pied .lien-or { color: var(--or); font-size: 14px; }
.pied-bas {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 22px var(--marge);
    border-top: 1px solid rgba(212, 175, 55, .2);
    font-family: var(--police-surtitre);
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(245, 240, 230, .55);
}

/* ---------- Toast ---------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 120;
    transform: translateX(-50%) translateY(90px);
    padding: 12px 22px;
    background: var(--nuit);
    color: var(--papier);
    border: 1px solid var(--or-sombre);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 30px rgba(17, 28, 51, .35);
    transition: transform .35s ease;
}
.toast.visible { transform: translateX(-50%) translateY(0); }
.page-nuit .toast { background: var(--papier); color: var(--nuit); }

/* ---------- Encyclopédie ---------- */

.catalogue-tete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 120px;
    align-items: end;
    padding: 96px var(--marge) 64px;
}
.catalogue-titre { margin: 0; font-family: var(--police-titre); font-weight: 800; font-size: 104px; line-height: .95; letter-spacing: -.02em; }
.catalogue-tete .chapo { max-width: 640px; font-size: 29px; line-height: 1.35; }
.catalogue-intro { display: flex; flex-direction: column; gap: 22px; }
.sommaire { border-top: 1px solid var(--nuit); }
.sommaire h2 { margin: 0; padding: 16px 0 12px; font-size: 12px; color: var(--nuit); }
.sommaire ol { margin: 0; padding: 0; list-style: none; }
.sommaire a { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-top: 1px solid var(--filet-leger); }
.sommaire li:last-child a { border-bottom: 1px solid var(--filet-leger); }
.sommaire-siecle { font-family: var(--police-titre); font-style: italic; font-size: 20px; }
.sommaire-points { flex-grow: 1; border-bottom: 1px dotted rgba(17, 28, 51, .35); transform: translateY(-5px); }
.sommaire-compte { font-family: var(--police-titre); font-size: 19px; color: var(--or-bruni); font-variant-numeric: oldstyle-nums; }

.domaines { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 0 var(--marge) 72px; }
.domaines .surtitre { margin-right: 12px; font-size: 11px; color: var(--ardoise); }
.puce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(17, 28, 51, .25);
    background: transparent;
    color: var(--nuit);
    font-family: var(--police-texte);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.puce:hover { border-color: var(--or-sombre); }
.puce[aria-pressed="true"] { background: var(--nuit); color: var(--papier); border-color: var(--nuit); }
.puce-compte { font-family: var(--police-titre); font-style: italic; font-size: 14px; opacity: .75; font-variant-numeric: oldstyle-nums; }

.siecles { padding: 0 var(--marge) 96px; }
.siecle {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 80px;
    padding: 56px 0 64px;
    border-top: 1px solid var(--nuit);
    scroll-margin-top: 24px;
}
.siecle[hidden] { display: none; }
.siecle-tete { display: flex; flex-direction: column; gap: 10px; }
.siecle-romain { margin: 0; font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: 88px; line-height: .95; }
.siecle-devise { font-family: var(--police-citation); font-style: italic; font-size: 21px; color: var(--nuit-claire); }
.siecle-compte { font-family: var(--police-citation); font-style: italic; font-size: 19px; color: var(--ardoise); }
.siecle-bornes { font-family: var(--police-titre); font-style: italic; font-size: 17px; color: var(--ardoise); font-variant-numeric: oldstyle-nums; }
.entrees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-content: start; margin: 0; padding: 0; list-style: none; }
.entrees li[hidden] { display: none; }
.entree {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid var(--filet-leger);
}
.entree-numero { font-family: var(--police-surtitre); font-weight: 600; font-size: 11px; letter-spacing: .18em; color: var(--ardoise); }
.entree-corps { display: flex; flex-direction: column; gap: 6px; }
.entree-titre { font-family: var(--police-titre); font-weight: 700; font-size: 21px; line-height: 1.2; }
.entree-domaine { display: flex; align-items: center; gap: 8px; font-family: var(--police-surtitre); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--or-bruni); }
.entree-domaine .icone { width: 17px; height: 17px; stroke-width: 1.4; }
.entree .italique-annee { font-size: 20px; }
.entree:hover .entree-titre { color: var(--or-bruni); }

/* ---------- Accueil ---------- */

.hero {
    position: relative;
    min-height: 800px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--nuit);
    color: var(--papier);
}
.hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.hero-voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 28, 51, .75) 0%, rgba(17, 28, 51, .12) 36%, rgba(17, 28, 51, .5) 68%, rgba(17, 28, 51, .97) 100%);
}
.hero > .tricolore, .hero > .entete { position: relative; z-index: 2; }
.hero .entete { border-bottom: none; }
.hero-contenu {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 28px;
    padding: 0 var(--marge) 92px;
}
.hero-contenu .surtitre { font-size: 13px; letter-spacing: .4em; }
.hero-titre { margin: 0; font-family: var(--police-titre); font-weight: 800; font-size: 150px; line-height: .9; letter-spacing: -.02em; }
.hero-devise { margin: 0; font-family: var(--police-citation); font-style: italic; font-weight: 500; font-size: 34px; color: rgba(245, 240, 230, .88); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; padding-top: 12px; }
.hero-jour { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; }
.hero-jour .icone { width: 20px; height: 20px; stroke: var(--or); }
.hero-jour em { font-family: var(--police-titre); font-size: 18px; color: var(--or); }
.hero-legende { position: absolute; right: var(--marge); bottom: 96px; font-family: var(--police-surtitre); font-weight: 600; font-size: 11px; letter-spacing: .3em; color: rgba(245, 240, 230, .6); }

.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 80px var(--marge); border-bottom: 1px solid rgba(17, 28, 51, .12); }
.chiffre { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 24px; text-align: center; }
.chiffre + .chiffre { border-left: 1px solid var(--filet); }
.chiffre-valeur { font-family: var(--police-titre); font-weight: 700; font-size: 88px; line-height: 1; font-variant-numeric: oldstyle-nums; }
.chiffre .surtitre { font-size: 12px; letter-spacing: .28em; }
.chiffre-detail { font-family: var(--police-citation); font-style: italic; font-size: 19px; color: var(--ardoise); }

.salle { display: flex; flex-direction: column; gap: 64px; padding: 128px var(--marge) 120px; scroll-margin-top: 0; }
.salle.nuit { background: var(--nuit); color: var(--papier); }
.salle-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: end; }
.salle-tete-gauche { display: flex; flex-direction: column; gap: 14px; }
.salle-tete-droite { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

.joyaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 64px; margin: 0; padding: 0; list-style: none; }
.joyau { display: flex; flex-direction: column; gap: 16px; }
.joyau .planche-cadre { padding: 14px; box-shadow: 0 1px 2px rgba(17, 28, 51, .06), 0 26px 50px -30px rgba(17, 28, 51, .45); }
.joyau .planche-cadre img { height: 300px; }
.joyau-legende { display: flex; justify-content: space-between; align-items: baseline; }
.joyau-legende .surtitre { font-size: 11px; letter-spacing: .26em; color: var(--ardoise); }
.joyau-legende .italique-annee { font-size: 19px; }
.joyau-titre { font-family: var(--police-titre); font-weight: 700; font-size: 30px; }
.joyau-resume { margin-top: -6px; font-family: var(--police-citation); font-style: italic; font-size: 19px; line-height: 1.35; color: var(--ardoise); }
.joyau:hover .joyau-titre { color: var(--or-bruni); }

.portrait-ovale {
    display: block;
    width: 168px; height: 216px;
    margin-bottom: 10px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--or);
    box-shadow: 0 0 0 6px var(--nuit), 0 0 0 7px rgba(212, 175, 55, .4);
}
.portrait-ovale img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) sepia(.15); }
.portrait-dates { font-family: var(--police-surtitre); font-weight: 600; font-size: 11px; letter-spacing: .2em; color: var(--or); }

/* Panthéon de l'accueil : les seize génies en grands portraits encadrés */
.galerie-genies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px 32px; margin: 0; padding: 0; list-style: none; }
.genie-carte { display: flex; flex-direction: column; gap: 8px; color: var(--papier); }
.genie-carte-cadre { display: block; margin-bottom: 10px; padding: 10px; background: var(--nuit-claire); border: 1px solid rgba(212, 175, 55, .45); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .8); }
.genie-carte-cadre img { width: 100%; aspect-ratio: 13 / 16; height: auto; object-fit: cover; object-position: center 22%; filter: grayscale(.25) sepia(.12); transition: filter .3s; }
.genie-carte:hover .genie-carte-cadre img { filter: none; }
.genie-carte-nom { font-family: var(--police-titre); font-weight: 700; font-size: 24px; line-height: 1.15; }
.genie-carte:hover .genie-carte-nom { color: var(--or); }
.genie-carte-titre { font-family: var(--police-citation); font-style: italic; font-size: 19px; line-height: 1.3; color: rgba(245, 240, 230, .82); }
.genie-carte-citation { font-family: var(--police-citation); font-style: italic; font-size: 17px; line-height: 1.4; color: rgba(245, 240, 230, .6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Chronologie de l'accueil : toutes les inventions, avec une frise collante des siècles */
.chrono { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 56px; align-items: start; }
.frise { position: sticky; top: 32px; }
.frise ol { position: relative; display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; list-style: none; }
.frise ol::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 1px; background: var(--or-sombre); }
.frise a { position: relative; display: flex; align-items: center; gap: 14px; }
.frise-pastille {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--papier);
    border: 1px solid var(--or-sombre);
    font-family: var(--police-titre);
    font-weight: 700;
    font-size: 22px;
    font-variant-numeric: lining-nums;
    color: var(--nuit);
    transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.frise-libelle { font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: 20px; color: var(--ardoise); white-space: nowrap; }
.frise a:hover .frise-pastille { border-color: var(--nuit); }
.frise a[aria-current="true"] .frise-pastille { background: var(--nuit); border-color: var(--nuit); color: var(--or); transform: scale(1.08); box-shadow: 0 0 0 5px var(--papier), 0 0 0 6px rgba(201, 162, 39, .6); }
.frise a[aria-current="true"] .frise-libelle { color: var(--nuit); }
.chrono-siecles { display: flex; flex-direction: column; gap: 96px; }
.siecle-bloc { scroll-margin-top: 24px; }
.siecle-bloc-tete { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 36px; margin-bottom: 36px; padding-bottom: 22px; border-bottom: 1px solid var(--nuit); }
.siecle-bloc-romain { margin: 0; font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: 64px; line-height: 1; }
.siecle-bloc-infos { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.cartes-inventions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.carte-invention {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--papier-mat);
    border: 1px solid rgba(17, 28, 51, .1);
    box-shadow: 0 1px 2px rgba(17, 28, 51, .05);
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative;
}
.carte-invention:hover { color: inherit; transform: translateY(-3px); border-color: var(--or-sombre); box-shadow: 0 22px 40px -26px rgba(17, 28, 51, .45); }
.ci-vignette { display: block; height: 150px; overflow: hidden; border-bottom: 1px solid rgba(17, 28, 51, .08); }
.ci-vignette img { width: 100%; height: 100%; object-fit: cover; }
.ci-gravure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-top: 26px; /* laisse la place au badge Record en coin */
    background-color: var(--nuit);
    background-image: repeating-radial-gradient(circle at 50% 40%, rgba(212, 175, 55, 0) 0 6px, rgba(212, 175, 55, .12) 6px 7px);
}
.ci-gravure .medaillon { width: 62px; height: 62px; font-size: 30px; box-shadow: 0 0 0 4px var(--nuit), 0 0 0 5px rgba(212, 175, 55, .55); }
.ci-romain { font-family: var(--police-surtitre); font-weight: 600; font-size: 11px; letter-spacing: .34em; padding-left: .34em; color: var(--papier); }
.ci-corps { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; }
.ci-meta { display: flex; align-items: center; gap: 10px; font-family: var(--police-surtitre); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--or-bruni); }
.ci-meta span:first-child { color: var(--ardoise); }
/* Badge en coin de vignette : le laurier seul était illisible dans la ligne N° · domaine */
.ci-record {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px 4px 7px;
    background: var(--papier-mat);
    border: 1px solid var(--or-sombre);
    color: var(--or-bruni);
    font-family: var(--police-surtitre);
    font-weight: 600;
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px -6px rgba(17, 28, 51, .5);
}
.ci-record .icone { width: 15px; height: 15px; }
.ci-titre { margin-top: 4px; font-family: var(--police-titre); font-weight: 700; font-size: 21px; line-height: 1.2; }
.carte-invention:hover .ci-titre { color: var(--or-bruni); }
.ci-annee { font-size: 18px; }
.ci-artisans { font-family: var(--police-citation); font-style: italic; font-size: 16px; color: var(--ardoise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-resume { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--nuit-claire); }

/* Curiosités de l'accueil : trois anecdotes en cartouches */
.curiosites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.curiosite {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
    padding: 34px 32px;
    border: 1px solid var(--or-sombre);
    outline: 1px solid rgba(201, 162, 39, .4);
    outline-offset: -8px;
    background: rgba(251, 248, 241, .7);
}
.curiosite-texte { flex-grow: 1; font-family: var(--police-citation); font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.45; color: var(--nuit); }
.curiosite .lien-souligne { align-self: flex-start; }
.curiosite:hover .lien-souligne { color: var(--or-bruni); border-bottom-color: var(--or-sombre); }

.occasions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 56px; margin: 0; padding: 0; list-style: none; }
.occasion { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--nuit); }
.occasion .italique-annee { font-size: 22px; }
.occasion-titre { margin: 0; font-family: var(--police-titre); font-weight: 700; font-size: 27px; line-height: 1.2; }
.occasion-sous-titre { font-family: var(--police-citation); font-style: italic; font-size: 20px; color: var(--nuit-claire); }
.occasion-texte { margin: 0; font-size: 15px; line-height: 1.75; color: var(--nuit-claire); }
.occasion-consequence { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid rgba(201, 162, 39, .5); font-family: var(--police-citation); font-style: italic; font-size: 19px; color: var(--or-bruni); }

.rubriques { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 var(--marge) 128px; border-top: 1px solid var(--nuit); border-bottom: 1px solid var(--filet); }
.rubrique { display: flex; flex-direction: column; gap: 16px; padding: 56px 48px; }
.rubrique:first-child { padding-left: 0; }
.rubrique:last-child { padding-right: 0; }
.rubrique + .rubrique { border-left: 1px solid var(--filet); }
.pastille-icone {
    width: 56px; height: 56px; flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--or-sombre);
    display: flex; align-items: center; justify-content: center;
    color: var(--or-bruni);
}
.pastille-icone .icone { width: 24px; height: 24px; stroke-width: 1.2; }
.nuit .pastille-icone, .page-nuit .pastille-icone { border-color: rgba(212, 175, 55, .6); color: var(--or); }
.rubrique-titre { font-family: var(--police-titre); font-weight: 700; font-size: 32px; }
.rubrique-texte { font-family: var(--police-citation); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--nuit-claire); }
.rubrique-lien { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--or-bruni); }

.epilogue { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 128px var(--marge); text-align: center; background: var(--nuit); color: var(--papier); }
.epilogue p { margin: 0; max-width: 980px; }
.epilogue-constat { font-family: var(--police-citation); font-style: italic; font-size: 26px; line-height: 1.45; color: rgba(245, 240, 230, .8); }
.epilogue-question { font-family: var(--police-titre); font-style: italic; font-weight: 500; font-size: 52px; line-height: 1.15; }
.epilogue .hero-actions { justify-content: center; }

/* ---------- Panthéon ---------- */

.genies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 80px; padding: 0 var(--marge) 112px; margin: 0; list-style: none; }
.genie { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 36px; padding: 48px 0; border-top: 1px solid var(--nuit); scroll-margin-top: 24px; }
.genie .portrait-ovale { width: 150px; height: 194px; box-shadow: 0 0 0 6px var(--papier), 0 0 0 7px rgba(201, 162, 39, .55); border-color: var(--or-sombre); }
.genie-corps { display: flex; flex-direction: column; gap: 10px; }
.genie-nom { margin: 0; font-family: var(--police-titre); font-weight: 700; font-size: 32px; line-height: 1.1; }
.genie-dates { font-family: var(--police-surtitre); font-weight: 600; font-size: 12px; letter-spacing: .22em; color: var(--or-bruni); }
.genie-titre { font-family: var(--police-citation); font-style: italic; font-size: 21px; color: var(--nuit-claire); }
.genie-citation { margin: 8px 0 4px; padding: 16px 0; border-top: 1px solid rgba(201, 162, 39, .55); border-bottom: 1px solid rgba(201, 162, 39, .55); font-family: var(--police-citation); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.35; }
.genie-realisations { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--nuit-claire); }
.genie-realisations li::before { content: "◆"; margin-right: 8px; font-size: 8px; vertical-align: 2px; color: var(--or-sombre); }
.genie-anecdote { margin: 4px 0 0; font-size: 15px; line-height: 1.75; color: var(--nuit-claire); }
.genie-nobel { display: inline-flex; align-items: center; gap: 8px; font-family: var(--police-surtitre); font-weight: 600; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--or-bruni); }
.genie-liens { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.genie-liens a { border-bottom: 1px solid rgba(17, 28, 51, .3); padding-bottom: 2px; }

/* ---------- Almanach ---------- */

.almanach-tete { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 64px var(--marge) 0; text-align: center; }
.almanach-tete .surtitre { font-size: 13px; letter-spacing: .4em; padding-left: .4em; }
.almanach-date { font-family: var(--police-titre); font-style: italic; font-weight: 500; font-size: 46px; font-variant-numeric: oldstyle-nums; }
.almanach-oeuvre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; padding: 64px var(--marge) 0; }
.almanach-oeuvre .planche-cadre img { height: 600px; }
.almanach-oeuvre .frontispice { height: 600px; }
.almanach-texte { display: flex; flex-direction: column; gap: 24px; }
.almanach-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.almanach-titre { margin: 0; font-family: var(--police-titre); font-weight: 800; font-size: 84px; line-height: 1; letter-spacing: -.015em; overflow-wrap: break-word; }
.almanach-titre.titre-moyen { font-size: 72px; }
.almanach-titre.titre-long { font-size: 60px; }
.almanach-titre.titre-tres-long { font-size: 48px; line-height: 1.05; }
.almanach-texte .fiche-annee { font-size: 42px; margin-top: 4px; }
.almanach-texte .chapo { font-size: 29px; }
.almanach-artisans { font-size: 15px; font-weight: 500; color: rgba(245, 240, 230, .8); }
.almanach-artisans .surtitre { margin-right: 14px; font-size: 11px; }
.almanach-histoire { margin: 8px 0 0; font-size: 17px; line-height: 1.85; color: rgba(245, 240, 230, .84); }
.almanach-anecdote { margin-top: 8px; padding: 6px; border: 1px solid rgba(212, 175, 55, .6); }
.almanach-anecdote > div { display: flex; flex-direction: column; gap: 14px; padding: 28px 36px 30px; border: 1px solid rgba(212, 175, 55, .3); }
.almanach-anecdote p { margin: 0; font-family: var(--police-citation); font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.45; }
.almanach-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; padding-top: 12px; }
.almanach-infos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 96px var(--marge) 0; border-top: 1px solid rgba(212, 175, 55, .45); border-bottom: 1px solid rgba(212, 175, 55, .2); }
.almanach-info { display: flex; align-items: center; gap: 22px; padding: 40px; }
.almanach-info:first-child { padding-left: 0; }
.almanach-info:last-child { padding-right: 0; }
.almanach-info + .almanach-info { border-left: 1px solid rgba(212, 175, 55, .2); }
.almanach-info-textes { display: flex; flex-direction: column; gap: 6px; }
.almanach-info-textes .surtitre { font-size: 11px; letter-spacing: .28em; }
.almanach-info-valeur { font-family: var(--police-titre); font-size: 28px; font-variant-numeric: oldstyle-nums; }
.almanach-info-detail { font-family: var(--police-citation); font-style: italic; font-size: 18px; color: rgba(245, 240, 230, .7); }
.serie-jauge { display: flex; gap: 6px; }
.serie-jauge span { width: 18px; height: 3px; background: rgba(245, 240, 230, .2); }
.serie-jauge span.allume { background: var(--or); }
.almanach-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin: 72px var(--marge) 0; padding: 26px 0; border-top: 1px solid rgba(212, 175, 55, .2); font-family: var(--police-surtitre); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: rgba(245, 240, 230, .55); }
.almanach-pied a { display: inline-flex; align-items: center; gap: 10px; color: rgba(245, 240, 230, .75); }

/* ---------- Quiz ---------- */

.quiz { display: flex; justify-content: center; padding: 72px var(--marge) 96px; }
.quiz-colonne { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: 36px; }
.quiz-colonne.centre { align-items: center; text-align: center; }
.quiz-entete { display: flex; flex-direction: column; gap: 14px; }
.quiz-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.quiz-score { display: flex; align-items: baseline; gap: 12px; }
.quiz-score .surtitre { font-size: 11px; color: var(--ardoise); }
.quiz-score strong { font-family: var(--police-titre); font-weight: 700; font-size: 28px; font-variant-numeric: oldstyle-nums; }
.progression { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; }
.progression span { height: 3px; background: rgba(17, 28, 51, .14); }
.progression span.fait { background: var(--or-sombre); }
.progression span.courant { background: var(--nuit); }
.quiz-question { display: flex; flex-direction: column; gap: 14px; }
.quiz-question .surtitre { color: var(--nuit); }
.quiz-intitule { margin: 0; font-family: var(--police-citation); font-style: italic; font-weight: 500; font-size: 44px; line-height: 1.2; }
.choix-liste { display: flex; flex-direction: column; gap: 12px; }
.choix {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 20px;
    width: 100%;
    min-height: 72px;
    padding: 12px 24px 12px 16px;
    border: 1px solid rgba(17, 28, 51, .24);
    background: transparent;
    color: var(--nuit);
    text-align: left;
    font-family: var(--police-titre);
    font-weight: 600;
    font-size: 23px;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.choix:hover:not(:disabled) { border-color: var(--or-sombre); background: rgba(201, 162, 39, .06); }
.choix:disabled { cursor: default; }
.choix-lettre {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--or-sombre);
    color: var(--or-bruni);
    font-family: var(--police-surtitre);
    font-size: 15px;
    font-weight: 700;
}
.choix .icone { width: 22px; height: 22px; }
.choix.bonne { background: var(--nuit); color: var(--papier); border-color: var(--nuit); }
.choix.bonne .choix-lettre { background: var(--or); color: var(--nuit); border-color: var(--or); }
.choix.bonne .icone { stroke: var(--or); stroke-width: 1.6; }
.choix.mauvaise { background: rgba(168, 50, 42, .06); color: var(--rouge); border-color: var(--rouge); }
.choix.mauvaise .choix-lettre { color: var(--rouge); border-color: var(--rouge); }
.choix.mauvaise .icone { stroke: var(--rouge); stroke-width: 1.6; }
.choix.eteinte { opacity: .45; }
.verdict { display: flex; flex-direction: column; gap: 22px; padding-top: 26px; border-top: 1px solid var(--or-sombre); }
.verdict[hidden] { display: none; }
.verdict-texte { margin: 0; font-family: var(--police-citation); font-size: 24px; line-height: 1.45; color: var(--nuit-claire); }
.verdict-texte strong { font-family: var(--police-titre); font-weight: 700; color: var(--nuit); }
.verdict-texte strong.faux { color: var(--rouge); }
.verdict-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.quiz-accueil-titre { margin: 0; font-family: var(--police-titre); font-weight: 800; font-size: 72px; line-height: 1.02; }
.quiz-accueil-texte { margin: 0; max-width: 640px; font-family: var(--police-citation); font-style: italic; font-size: 26px; line-height: 1.4; color: var(--nuit-claire); }
.resultat-score { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.resultat-score strong { font-family: var(--police-titre); font-weight: 800; font-size: 180px; line-height: .85; font-variant-numeric: oldstyle-nums; }
.resultat-score span { font-family: var(--police-titre); font-style: italic; font-weight: 500; font-size: 56px; color: var(--or-bruni); font-variant-numeric: oldstyle-nums; }
.resultat-honneur { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.resultat-honneur .icone { width: 40px; height: 40px; stroke-width: 1; color: var(--or-bruni); }
.resultat-titre { font-family: var(--police-surtitre); font-weight: 700; font-size: 24px; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; }
.resultat-message { margin: 0; max-width: 620px; font-family: var(--police-citation); font-style: italic; font-weight: 500; font-size: 28px; line-height: 1.35; color: var(--nuit-claire); }
.paliers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; margin: 34px 0 0; padding: 26px 0 0; list-style: none; border-top: 1px solid rgba(17, 28, 51, .16); }
.palier { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .55; }
.palier strong { font-family: var(--police-titre); font-style: italic; font-weight: 500; font-size: 22px; font-variant-numeric: oldstyle-nums; }
.palier span { font-family: var(--police-surtitre); font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.palier.atteint { opacity: 1; margin-top: -27px; padding-top: 22px; border-top: 2px solid var(--or-sombre); color: var(--or-bruni); }

/* ---------- Page 404 ---------- */

.introuvable { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 120px var(--marge); text-align: center; }
.introuvable-code { font-family: var(--police-titre); font-style: italic; font-weight: 600; font-size: 160px; line-height: 1; color: rgba(125, 97, 21, .35); font-variant-numeric: oldstyle-nums; }

/* ---------- Adaptation aux écrans ---------- */

@media (max-width: 1280px) {
    .cartes-inventions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    :root { --marge: 64px; }
    .nav-principale { gap: 24px; }
    .hero-titre { font-size: 124px; }
    }

@media (max-width: 1100px) {
    .fiche-titre { font-size: 100px; }
    .fiche-titre.titre-moyen { font-size: 84px; }
    .fiche-titre.titre-long { font-size: 68px; }
    .fiche-titre.titre-tres-long { font-size: 54px; }
    .catalogue-tete { grid-template-columns: minmax(0, 1fr); gap: 56px; }
    .catalogue-tete .sommaire { max-width: 520px; }
}

@media (max-width: 900px) {
    .chrono { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .frise { top: 0; z-index: 20; margin: 0 calc(-1 * var(--marge)); padding: 10px var(--marge); background: var(--papier); border-bottom: 1px solid var(--filet); }
    .frise ol { flex-direction: row; gap: 8px; overflow-x: auto; scrollbar-width: none; }
    .frise ol::before { display: none; }
    .frise a { gap: 8px; padding: 4px 14px 4px 4px; border: 1px solid var(--filet); border-radius: 999px; background: var(--papier-mat); }
    .frise-pastille { width: 34px; height: 34px; font-size: 15px; }
    .frise-libelle { font-size: 16px; }
    .frise a[aria-current="true"] .frise-pastille { transform: none; box-shadow: none; }
    .frise a[aria-current="true"] { border-color: var(--nuit); }
    .chrono-siecles { gap: 72px; }
    .cartes-inventions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .galerie-genies { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .curiosites { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    :root { --marge: 40px; }
    .nav-principale { display: none; }
    .bouton-menu { display: flex; }
    .marque-devise { display: none; }
    .fiche-tete, .fiche-corps, .almanach-oeuvre, .salle-tete { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .fiche-identite { padding-top: 0; }
    .fiche-corps { padding-top: 72px; }
    .fiche-corps .notice { order: 2; }
    .histoire { max-width: none; }
    .suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .siecle { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .entrees { grid-template-columns: minmax(0, 1fr); }
    .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .chiffre:nth-child(3) { border-left: none; }
    .joyaux, .occasions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                .rubriques { grid-template-columns: minmax(0, 1fr); }
    .rubrique, .rubrique:first-child, .rubrique:last-child { padding: 36px 0; }
    .rubrique + .rubrique { border-left: none; border-top: 1px solid var(--filet); }
    .genies { grid-template-columns: minmax(0, 1fr); }
    .almanach-infos { grid-template-columns: minmax(0, 1fr); }
    .almanach-info, .almanach-info:first-child, .almanach-info:last-child { padding: 28px 0; }
    .almanach-info + .almanach-info { border-left: none; border-top: 1px solid rgba(212, 175, 55, .2); }
    .pied-colonnes { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .hero-legende { display: none; }
}

@media (max-width: 640px) {
    .siecle-bloc-romain { font-size: 44px; }
    .siecle-bloc-tete { margin-bottom: 24px; gap: 8px 20px; }
    .cartes-inventions { gap: 12px; }
    .ci-vignette { height: 104px; }
    .ci-gravure { gap: 8px; padding-top: 20px; }
    .ci-gravure .medaillon { width: 44px; height: 44px; font-size: 22px; }
    .ci-romain { font-size: 9px; letter-spacing: .26em; }
    .ci-corps { gap: 4px; padding: 12px 12px 14px; }
    .ci-meta { font-size: 9px; letter-spacing: .14em; gap: 6px; }
    .ci-meta span:nth-child(2) { display: none; }
    .ci-record { top: 7px; right: 7px; padding: 3px 7px 3px 5px; font-size: 8.5px; }
    .ci-record-suite { display: none; }
    .ci-titre { font-size: 17px; }
    .ci-annee { font-size: 16px; }
    .ci-artisans, .ci-resume { display: none; }
    .galerie-genies { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
    .genie-carte-cadre { padding: 6px; }
    .genie-carte-nom { font-size: 19px; }
    .genie-carte-titre { font-size: 16px; }
    .genie-carte-citation { display: none; }
    .curiosite { padding: 26px 22px; }
    .curiosite-texte { font-size: 20px; }
    :root { --marge: 24px; }
    .entete { padding: 16px 20px; }
    .monogramme { width: 40px; height: 40px; font-size: 14px; }
    .marque { gap: 12px; }
    .marque-nom { font-size: 12px; letter-spacing: .24em; }
    .fil { padding: 14px 20px; font-size: 10px; letter-spacing: .22em; }
    .fil ol li:nth-child(2) { display: none; }
    .fiche-tete { padding-top: 40px; gap: 32px; }
    .fiche-identite { gap: 18px; }
    .surtitre-filet { font-size: 11px; letter-spacing: .28em; }
    .fiche-titre { font-size: clamp(44px, 16vw, 64px); line-height: 1; }
    .fiche-titre.titre-moyen { font-size: clamp(40px, 12.5vw, 52px); }
    .fiche-titre.titre-long { font-size: clamp(34px, 10vw, 42px); line-height: 1.05; }
    .fiche-titre.titre-tres-long { font-size: clamp(30px, 8.6vw, 36px); line-height: 1.08; }
    .fiche-annee { font-size: 32px; }
    .chapo { font-size: 25px; }
    .planche-cadre { padding: 12px; }
    .planche-cadre img, .frontispice { height: 300px; }
    .frontispice { gap: 20px; background-image: repeating-radial-gradient(circle at 50% 42%, rgba(212, 175, 55, 0) 0 7px, rgba(212, 175, 55, .11) 7px 8px); }
    .frontispice::before { inset: 10px; }
    .frontispice-coin { top: 24px; font-size: 10px; letter-spacing: .26em; }
    .frontispice-coin.gauche { left: 24px; }
    .frontispice-coin.droite { right: 24px; }
    .medaillon-grand { width: 124px; height: 124px; font-size: 74px; box-shadow: 0 0 0 6px var(--nuit), 0 0 0 7px rgba(212, 175, 55, .55); }
    .medaillon-grand span { margin-top: -6px; }
    .frontispice-romain { font-size: 16px; letter-spacing: .42em; gap: 12px; }
    .frontispice-titre { display: none; }
    .signature-separateur { display: none; }
    .fiche-signature { gap: 16px; flex-direction: column; align-items: flex-start; }
    .fiche-corps { padding-top: 56px; gap: 48px; }
    .histoire-texte { font-size: 17px; line-height: 1.8; }
    .histoire-texte::first-letter { font-size: 72px; padding: 8px 10px 0 0; }
    .portee { margin-top: 40px; padding: 26px 0 30px; }
    .portee p { font-size: 29px; }
    .cartouche-zone { padding: 56px 20px 0; }
    .cartouche-cadre { padding: 5px; }
    .cartouche { padding: 34px 22px 36px; gap: 18px; }
    .cartouche h2 { font-size: 11px; letter-spacing: .28em; }
    .cartouche h2::before, .cartouche h2::after { width: 28px; }
    .cartouche p { font-size: 22px; }
    .actions { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 40px; }
    .actions .bouton-texte { justify-content: center; border: 1px solid rgba(17, 28, 51, .28); }
    .voisins { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
    .voisins-separateur { display: none; }
    .voisin, .voisin.suivant { padding: 24px 0; }
    .voisin + .voisins-separateur + .voisin { border-top: 1px solid var(--filet); }
    .voisin-titre { font-size: 25px; }
    .salle-voisine { padding: 72px var(--marge) 80px; gap: 24px; }
    .salle-voisine-tete { flex-direction: column; align-items: flex-start; }
    .salle-voisine-tete h2 { font-size: 36px; }
    .suggestions { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .suggestion { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 3px; align-items: center; padding: 18px 0; border-top: 1px solid rgba(201, 162, 39, .6); }
    .suggestion .medaillon { grid-row: span 2; width: 56px; height: 56px; font-size: 26px; box-shadow: 0 0 0 4px var(--papier), 0 0 0 5px rgba(201, 162, 39, .6); }
    .suggestion .surtitre { align-self: end; font-size: 10px; }
    .suggestion-titre { align-self: start; font-size: 21px; }
    .suggestion-resume { display: none; }
    .pied-colonnes { padding: 48px var(--marge) 40px; }
    .pied-bas { padding: 18px var(--marge); font-size: 10px; letter-spacing: .22em; }
    .catalogue-tete { padding-top: 56px; gap: 40px; }
    .catalogue-titre { font-size: clamp(36px, 10.5vw, 56px); }
    .catalogue-tete .chapo { font-size: 23px; }
    .domaines { padding-bottom: 48px; gap: 8px; }
    .domaines .surtitre { width: 100%; }
    .puce { padding: 0 14px; }
    .siecle { padding: 40px 0 48px; }
    .siecle-romain { font-size: 64px; }
    .entree { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
    .entree-titre { font-size: 19px; }
    .hero { min-height: 720px; }
    .hero-contenu { gap: 20px; padding-bottom: 48px; }
    .hero-contenu .surtitre { font-size: 11px; letter-spacing: .34em; }
    .hero-titre { font-size: 68px; line-height: .95; }
    .hero-devise { font-size: 24px; line-height: 1.3; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 8px; }
    .hero-jour { justify-content: center; min-height: 44px; font-size: 14px; }
    .chiffres { padding: 48px var(--marge); }
    .chiffre { padding: 0 8px; }
    .chiffre-valeur { font-size: 56px; }
    .chiffre .surtitre { font-size: 10px; letter-spacing: .22em; }
    .chiffre-detail { display: none; }
    .salle { padding: 72px var(--marge); gap: 32px; }
    .titre-salle { font-size: 44px; }
    .intro-salle { font-size: 21px; }
    .joyaux { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * var(--marge)); padding-right: var(--marge); padding-bottom: 8px; }
    .joyaux > li { flex: 0 0 272px; scroll-snap-align: start; }
    .joyau .planche-cadre { padding: 10px; }
    .joyau .planche-cadre img { height: 220px; }
    .joyau-titre { font-size: 24px; }
                            .occasions { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
    .rubriques { margin-bottom: 72px; }
    .rubrique { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; padding: 26px 0; }
    .rubrique .pastille-icone { width: 48px; height: 48px; }
    .rubrique-titre { font-size: 24px; align-self: center; }
    .rubrique-texte { width: 100%; font-size: 19px; }
    .rubrique-lien { display: none; }
    .epilogue { padding: 80px var(--marge); }
    .epilogue-constat { font-size: 21px; }
    .epilogue-question { font-size: 34px; }
    .genie { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 40px 0; }
    .genie .portrait-ovale { width: 120px; height: 156px; }
    .genie-nom { font-size: 28px; }
    .almanach-tete { padding-top: 40px; }
    .almanach-tete .surtitre { font-size: 11px; letter-spacing: .3em; }
    .almanach-date { font-size: 30px; }
    .almanach-oeuvre { padding-top: 40px; gap: 32px; }
    .almanach-oeuvre .planche-cadre img, .almanach-oeuvre .frontispice { height: 320px; }
    .almanach-titre { font-size: clamp(38px, 12vw, 52px); }
    .almanach-titre.titre-moyen, .almanach-titre.titre-long { font-size: clamp(32px, 10vw, 42px); }
    .almanach-titre.titre-tres-long { font-size: clamp(28px, 8.6vw, 34px); }
    .almanach-texte .chapo { font-size: 23px; }
    .almanach-anecdote > div { padding: 22px 20px 24px; }
    .almanach-anecdote p { font-size: 20px; }
    .almanach-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .almanach-infos { margin-top: 56px; }
    .almanach-pied { margin-top: 48px; flex-direction: column; align-items: flex-start; }
    .quiz { padding: 40px var(--marge) 64px; }
    .quiz-colonne { gap: 28px; }
    .progression { gap: 4px; }
    .quiz-intitule { font-size: 30px; }
    .choix { grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 14px; min-height: 64px; padding: 10px 14px 10px 12px; font-size: 19px; }
    .choix-lettre { width: 36px; height: 36px; font-size: 13px; }
    .verdict-texte { font-size: 21px; }
    .verdict-actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .quiz-accueil-titre { font-size: 44px; }
    .quiz-accueil-texte { font-size: 21px; }
    .resultat-score strong { font-size: 120px; }
    .resultat-score span { font-size: 40px; }
    .resultat-titre { font-size: 17px; letter-spacing: .22em; }
    .resultat-message { font-size: 23px; }
    .paliers { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .palier { flex-direction: row; justify-content: center; gap: 12px; }
    .palier.atteint { margin-top: 0; padding-top: 10px; border-top: none; border-bottom: 1px solid var(--or-sombre); padding-bottom: 10px; }
    .introuvable-code { font-size: 110px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .toast { transition: none; }
}