/* ==========================================================================
   SAVANT — academyofastrology.org

   Un site dont la matiere est le texte long et la table de reference. La
   page doit donc faire une chose : se retirer. Ce qui precede tenait sur
   douze aplats de couleur franche en haut de page, une encre differente par
   signe et des numeros devant chaque entree du menu — trois ornements qui
   passaient devant ce qu ils ornaient.

   Les decisions, et ce qui les fonde :

   * UNE SEULE ENCRE D ACCENT, un brun de reliure (#92400E), qui porte les
     liens, les filets forts et les en-tetes de table. Une couleur qui
     revient toujours au meme endroit finit par vouloir dire quelque chose ;
     quatre couleurs qui tournent ne veulent rien dire.

   * UN PAPIER, pas un blanc. #FDFBF6 sous un texte #1C1917 : le contraste
     reste au-dessus de 15:1, et la page cesse d eblouir sur les textes de
     quatre mille signes qui sont la regle ici.

   * LA MESURE AVANT LA LARGEUR. Le corps tient dans 36rem — de soixante-cinq
     a soixante-quinze signes par ligne en Crimson Pro. Le reste de l ecran
     sert de marge, et les tables larges debordent dans cette marge plutot
     que de retrecir le texte.

   * DEUX GARALDES. Cormorant Garamond titre, Crimson Pro fait lire. Les deux
     portent le latin etendu : il faut l allemand, le portugais et l italien.
     Les glyphes astrologiques viennent de Noto Sans Symbols 2, declaree en
     recours dans chaque pile — le contenu en est plein, et une cellule de
     table des dignites qui tombe en tofu rend la table inutilisable.

   Contraste verifie : encre 15.9:1, encre-douce 6.1:1, accent 7.4:1 sur le
   papier. Tous au-dessus de 4.5:1.
   ========================================================================== */

:root {
    --papier:      #FDFBF6;
    --carte:       #FFFFFF;
    --encre:       #1C1917;
    --encre-douce: #57534E;
    --accent:      #92400E;
    --accent-vif:  #B45309;
    --filet:       #E0D9CB;
    --filet-fin:   #EFE9DD;
    --surlignage:  #FBF3E4;

    --titre: "Cormorant Garamond", "Noto Sans Symbols 2", "Segoe UI Symbol", Georgia, "Times New Roman", serif;
    --texte: "Crimson Pro", "Noto Sans Symbols 2", "Segoe UI Symbol", Georgia, "Times New Roman", serif;
    --sans:  ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:  ui-monospace, "Cascadia Mono", Consolas, "Noto Sans Symbols 2", "Liberation Mono", monospace;

    --marge:  clamp(1.1rem, 4vw, 3rem);
    --mesure: 36rem;

    /* Une echelle d espacement de 4 px, comme le veut Material : toute marge
       du site est un multiple de --pas. */
    --pas: .25rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --papier:      #17150F;
        --carte:       #1F1C15;
        --encre:       #F0EAE0;
        --encre-douce: #BAB1A3;
        --accent:      #E0A458;
        --accent-vif:  #F0BC7A;
        --filet:       #3A3428;
        --filet-fin:   #29241B;
        --surlignage:  #2A2318;
    }
}

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

html {
    background: var(--papier);
    /* 100 % = 16 px : jamais de taille de base en dessous, sous peine de
       zoom automatique sur iOS et de corps illisible partout. */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 1.1875rem;          /* 19 px : la taille de lecture du site */
    line-height: 1.65;
    font-variant-numeric: oldstyle-nums proportional-nums;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    /* Aucune page ne doit defiler lateralement, quelle que soit la largeur
       d une table de reference. */
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   LE LIEN D EVITEMENT
   Il ne se voit qu au clavier, mais il doit alors se voir vraiment : c est
   la premiere chose qu un lecteur au clavier rencontre sur chaque page.
   -------------------------------------------------------------------------- */
.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: calc(var(--pas) * 3) calc(var(--pas) * 5);
    background: var(--accent);
    color: #FFFFFF;
    font-family: var(--sans);
    font-size: .9375rem;
    text-decoration: none;
}
.skip:focus {
    left: var(--marge);
    top: calc(var(--pas) * 2);
    outline: 3px solid var(--encre);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   LE BANDEAU DE DEVELOPPEMENT
   Il n appartient pas au site : il reste gris, petit, et ne prend jamais
   l oeil.
   -------------------------------------------------------------------------- */
.bandeau-dev {
    padding: calc(var(--pas) * 1.5) var(--marge);
    background: var(--filet-fin);
    border-bottom: 1px solid var(--filet);
    color: var(--encre-douce);
    font-family: var(--sans);
    font-size: .75rem;
}
.bandeau-dev a { color: var(--encre-douce); }
.bandeau-dev .actif { color: var(--encre); font-weight: 600; }
.bandeau-dev :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   LE FRONTON
   Le nom de l ecole, sa devise, les langues. Rien d autre : pas de sceau,
   pas de bande, pas de cercle.
   -------------------------------------------------------------------------- */
.fronton {
    border-bottom: 1px solid var(--filet);
    background: var(--papier);
}

.fronton-corps {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--pas) * 4);
    max-width: 78rem;
    margin: 0 auto;
    padding: calc(var(--pas) * 10) var(--marge) calc(var(--pas) * 6);
}

.enseigne { text-decoration: none; color: inherit; display: block; }
.enseigne-nom {
    display: block;
    font-family: var(--titre);
    font-size: clamp(1.75rem, 4.5vw, 2.75rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.01em;
}
.enseigne-mot {
    display: block;
    margin-top: calc(var(--pas) * 1.5);
    max-width: 34rem;
    color: var(--encre-douce);
    font-size: .9375rem;
    font-style: italic;
    line-height: 1.45;
}
.enseigne:hover .enseigne-nom { color: var(--accent); }

/* Le selecteur de langue. Six langues : elles tiennent sur une ligne en
   petites capitales, et la langue servie est en aplat. */
.langues { font-family: var(--sans); font-size: .8125rem; }
.langues :is(a, span) {
    display: inline-block;
    padding: calc(var(--pas)) calc(var(--pas) * 2);
    border-radius: 2px;
    color: var(--encre-douce);
    text-decoration: none;
    letter-spacing: .04em;
}
.langues a:hover { color: var(--accent); background: var(--surlignage); }
.langues .actif { background: var(--encre); color: var(--papier); font-weight: 600; }

/* --------------------------------------------------------------------------
   LA BARRE DE NAVIGATION
   Des mots, pas des cases : une ligne de liens espaces, la rubrique courante
   soulignee de son encre. Sous 48rem, elle se replie derriere un bouton.
   -------------------------------------------------------------------------- */
.barre {
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 var(--marge);
}

.barre ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(var(--pas) * 7);
    margin: 0;
    padding: 0;
    list-style: none;
}

.barre a {
    display: inline-block;
    padding: calc(var(--pas) * 3) 0 calc(var(--pas) * 3.5);
    border-bottom: 2px solid transparent;
    color: var(--encre-douce);
    font-family: var(--sans);
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-decoration: none;
    transition: color .2s ease-out, border-color .2s ease-out;
}
.barre a:hover { color: var(--encre); border-bottom-color: var(--filet); }
.barre a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.barre a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.depli { display: none; }
.depli-mot { font-family: var(--sans); }

@media (max-width: 48rem) {
    .depli {
        display: flex;
        align-items: center;
        gap: calc(var(--pas) * 2);
        width: 100%;
        /* 44 px de haut : la cible tactile minimale d Apple. */
        min-height: 2.75rem;
        margin: calc(var(--pas) * 2) 0;
        padding: calc(var(--pas) * 2) 0;
        border: 0;
        background: none;
        color: var(--encre);
        font-family: var(--sans);
        font-size: .9375rem;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }
    .depli:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .depli-signe::before { content: "+"; font-size: 1.25rem; line-height: 1; }
    .depli[aria-expanded="true"] .depli-signe::before { content: "\2212"; }

    .barre ul { display: none; flex-direction: column; gap: 0; padding-bottom: calc(var(--pas) * 3); }
    .barre ul.ouvert { display: flex; }
    .barre a {
        display: block;
        min-height: 2.75rem;
        padding: calc(var(--pas) * 3) 0;
        border-bottom: 1px solid var(--filet-fin);
    }
    .barre a[aria-current="page"] { border-bottom-color: var(--accent); }
}

/* La marque de langue d une entree de menu restee dans une autre langue.
   Elle n est pas decorative : elle previent le lecteur avant le clic. */
.hors-langue {
    margin-left: calc(var(--pas));
    padding: 0 calc(var(--pas));
    border: 1px solid var(--filet);
    border-radius: 2px;
    color: var(--encre-douce);
    font-size: .625rem;
    letter-spacing: .06em;
    vertical-align: .1em;
}

/* --------------------------------------------------------------------------
   LE CORPS
   Une colonne de lecture centree, et rien qui la traverse — sauf ce qui est
   trop large pour elle, qui deborde alors des deux cotes.
   -------------------------------------------------------------------------- */
/* La colonne de lecture est centree, pas collee a gauche : sur un ecran de
   1440 px, une colonne fer a gauche laisse un tiers de la page vide, et
   l oeil n a aucune raison de faire le trajet. Le conteneur vaut donc la
   mesure, et ce qui doit etre plus large en sort — voir plus bas. */
main {
    max-width: var(--mesure);
    margin: 0 auto;
    padding: calc(var(--pas) * 14) var(--marge) calc(var(--pas) * 24);
}

main > * { max-width: none; }

main > .page-head { margin-bottom: calc(var(--pas) * 12); }

/* CE QUI SORT DE LA COLONNE. Une table de dignites ne tient pas dans
   trente-six rems et ne doit pas obliger le texte a retrecir : elle deborde
   des deux cotes, centree sur la meme mediane, et defile seule quand meme
   cela ne suffit pas. Jamais la page. */
main :is(table, figure, pre) {
    /* Ne jamais reecrire la marge de ces trois-la avec le raccourci
       `margin` : il remet margin-left a zero, la translation part alors
       de la gauche du conteneur et la table sort de l ecran. */
    /* `width: max-content` plutot qu une largeur fixe : une table de sept
       lignes ne doit pas occuper soixante-deux rems pour n en remplir que
       vingt, sans quoi elle parait decalee a gauche alors qu elle est
       centree. Elle prend donc la largeur de son contenu, plafonnee. */
    width: max-content;
    max-width: min(62rem, calc(100vw - 2 * var(--marge)));
    margin-left: 50%;
    transform: translateX(-50%);
}

h1, h2, h3, h4 {
    font-family: var(--titre);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.005em;
    text-wrap: balance;
}

h1 {
    margin: 0 0 calc(var(--pas) * 5);
    font-size: clamp(2rem, 5.5vw, 3.25rem);
}

h2 {
    margin: calc(var(--pas) * 16) 0 calc(var(--pas) * 4);
    padding-top: calc(var(--pas) * 4);
    border-top: 1px solid var(--filet);
    font-size: clamp(1.5rem, 3.2vw, 2rem);
}

h3 {
    margin: calc(var(--pas) * 10) 0 calc(var(--pas) * 3);
    font-size: 1.375rem;
    font-weight: 600;
}

h4 {
    margin: calc(var(--pas) * 8) 0 calc(var(--pas) * 2);
    font-family: var(--sans);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--encre-douce);
}

main p { margin: 0 0 calc(var(--pas) * 5); }

.lede {
    color: var(--encre-douce);
    font-size: 1.3125rem;
    line-height: 1.55;
}

.meta {
    margin-bottom: calc(var(--pas) * 6);
    color: var(--encre-douce);
    font-family: var(--sans);
    font-size: .8125rem;
    letter-spacing: .02em;
}
.meta .sep { margin: 0 calc(var(--pas) * 2); opacity: .5; }
.meta .cat { color: var(--accent); font-weight: 600; }

main a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .15em;
    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
    transition: text-decoration-color .2s ease-out, color .2s ease-out;
}
main a:hover { color: var(--accent-vif); text-decoration-color: currentColor; }
main a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* UN TITRE QUI EST UN LIEN. Les pages d index mettent leurs titres de
   section dans une ancre — « <h2><a href=...> » — et la regle generale des
   liens les tirait alors en brun souligne. Un titre n a pas besoin d etre
   peint pour qu on voie qu il mene quelque part : il reste a l encre du
   texte et ne prend la couleur qu au survol et au clavier. */
main :is(h1, h2, h3, h4) a {
    color: inherit;
    text-decoration: none;
}
main :is(h1, h2, h3, h4) a:hover {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .12em;
}
main :is(h1, h2, h3, h4) a:focus-visible { color: var(--accent); }

main strong, main b { font-weight: 700; }
main em, main i { font-style: italic; }
main small { font-size: .8125rem; color: var(--encre-douce); }
main sup, main sub { font-size: .7em; line-height: 0; }
main abbr[title] { text-decoration: underline dotted; cursor: help; }

code {
    padding: 0 calc(var(--pas));
    background: var(--surlignage);
    border-radius: 2px;
    font-family: var(--mono);
    font-size: .875em;
}

pre {
    margin-block: calc(var(--pas) * 6);
    padding: calc(var(--pas) * 5);
    background: var(--carte);
    border: 1px solid var(--filet);
    border-radius: 2px;
    overflow-x: auto;
}
pre code { padding: 0; background: none; font-size: .875rem; line-height: 1.6; }

hr {
    max-width: 8rem;
    margin: calc(var(--pas) * 16) 0;
    border: 0;
    border-top: 1px solid var(--filet);
}

figure { margin-block: calc(var(--pas) * 10); }
figure img { display: block; border: 1px solid var(--filet); }
figcaption {
    margin-top: calc(var(--pas) * 3);
    max-width: var(--mesure);
    color: var(--encre-douce);
    font-family: var(--sans);
    font-size: .8125rem;
    line-height: 1.5;
}

dl { margin: calc(var(--pas) * 6) 0; }
dt { font-weight: 700; margin-top: calc(var(--pas) * 4); }
dd { margin: calc(var(--pas)) 0 0 calc(var(--pas) * 6); color: var(--encre-douce); }

/* --------------------------------------------------------------------------
   LES LISTES
   Une puce discrete, alignee dans la marge, qui ne concurrence pas le texte.
   -------------------------------------------------------------------------- */
main :is(.prose, .docs, .introuvable) ul:not(.doc-list, .introuvable-pistes, .post-list),
main :is(.prose, .docs, .introuvable) ol {
    margin: 0 0 calc(var(--pas) * 5);
    padding: 0;
    list-style: none;
}

main :is(.prose, .docs, .introuvable) ul:not(.doc-list, .introuvable-pistes, .post-list) > li,
main :is(.prose, .docs, .introuvable) ol > li {
    position: relative;
    margin-bottom: calc(var(--pas) * 2.5);
    padding-left: calc(var(--pas) * 6);
}

main :is(.prose, .docs, .introuvable) ul:not(.doc-list, .introuvable-pistes, .post-list) > li::before {
    content: "";
    position: absolute;
    left: calc(var(--pas) * 1.5);
    top: .62em;
    width: .3125rem;
    height: .3125rem;
    background: var(--accent);
    border-radius: 50%;
}

main :is(.prose, .docs, .introuvable) ol { counter-reset: n; }
main :is(.prose, .docs, .introuvable) ol > li { counter-increment: n; }
main :is(.prose, .docs, .introuvable) ol > li::before {
    content: counter(n) ".";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 600;
}

main li > ul, main li > ol { margin-top: calc(var(--pas) * 2.5); }

blockquote {
    margin: calc(var(--pas) * 10) 0;
    padding-left: calc(var(--pas) * 6);
    border-left: 2px solid var(--accent);
    color: var(--encre-douce);
    font-style: italic;
}

blockquote > :last-child { margin-bottom: 0; }
blockquote :is(cite, footer) {
    display: block;
    margin-top: calc(var(--pas) * 3);
    font-family: var(--sans);
    font-size: .8125rem;
    font-style: normal;
    letter-spacing: .02em;
}
blockquote :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   LES TABLES DE REFERENCE
   Ce sont elles la matiere du site : tables de dignites, heures planetaires,
   etoiles fixes. Elles debordent la mesure et defilent horizontalement quand
   l ecran ne suffit pas — mais jamais la page entiere.
   -------------------------------------------------------------------------- */
main table {
    margin-block: calc(var(--pas) * 8);
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: .875rem;
    /* Des chiffres de meme chasse : sans cela, une colonne de degres danse
       d une ligne a l autre. */
    font-variant-numeric: lining-nums tabular-nums;
    display: block;
    overflow-x: auto;
}

main caption {
    margin-bottom: calc(var(--pas) * 3);
    color: var(--encre-douce);
    font-family: var(--sans);
    font-size: .8125rem;
    text-align: left;
}

main thead th {
    padding: calc(var(--pas) * 2.5) calc(var(--pas) * 3);
    border-bottom: 2px solid var(--accent);
    color: var(--accent);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

main :is(tbody, tfoot) :is(th, td) {
    padding: calc(var(--pas) * 2.5) calc(var(--pas) * 3);
    border-bottom: 1px solid var(--filet-fin);
    text-align: left;
    vertical-align: top;
}

main :is(thead, tbody, tfoot) > tr > :first-child { padding-left: 0; }
main tbody > tr > :first-child { font-weight: 600; white-space: nowrap; }
main tbody tr:hover > * { background: var(--surlignage); }
main tfoot :is(th, td) { border-bottom: 0; color: var(--encre-douce); font-size: .8125rem; }
main tfoot > tr:first-child > * { border-top: 1px solid var(--filet); }

/* --------------------------------------------------------------------------
   LES LISTES DE PAGES ET DE DOCUMENTS
   -------------------------------------------------------------------------- */
.post-list, .doc-list, .related > ul, .introuvable-pistes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-list > li {
    padding: calc(var(--pas) * 6) 0;
    border-bottom: 1px solid var(--filet-fin);
}
.post-list h2 {
    max-width: none;
    margin: 0 0 calc(var(--pas) * 2);
    padding: 0;
    border: 0;
    font-size: 1.5rem;
}
.post-list h2 a { color: var(--encre); text-decoration: none; }
.post-list h2 a:hover { color: var(--accent); }
.post-list time {
    display: block;
    margin-bottom: calc(var(--pas) * 2);
    color: var(--encre-douce);
    font-family: var(--sans);
    font-size: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.post-list p { margin: 0; max-width: 40rem; color: var(--encre-douce); font-size: 1.0625rem; }

.doc-list > li { padding: calc(var(--pas) * 4) 0; border-bottom: 1px solid var(--filet-fin); }
.doc-list a { font-weight: 600; }
.doc-meta {
    margin-top: calc(var(--pas));
    color: var(--encre-douce);
    font-family: var(--sans);
    font-size: .75rem;
    font-variant-numeric: lining-nums tabular-nums;
}
.doc-meta .sep { margin: 0 calc(var(--pas) * 1.5); opacity: .5; }

.related { margin-top: calc(var(--pas) * 16); }
.related > h2 { margin-top: 0; }
.related li { padding: calc(var(--pas) * 2) 0; }

.pager {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--pas) * 2);
    margin-top: calc(var(--pas) * 10);
    font-family: var(--sans);
    font-size: .875rem;
}
.pager :is(a, span) {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 calc(var(--pas) * 4);
    border: 1px solid var(--filet);
    border-radius: 2px;
    text-decoration: none;
}
.pager span { color: var(--encre-douce); background: var(--filet-fin); }
.pager a:hover { border-color: var(--accent); color: var(--accent); }

main > .empty, .listing > .empty {
    padding: calc(var(--pas) * 10) 0;
    color: var(--encre-douce);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   LA PAGE INTROUVABLE
   Elle explique et propose : un 404 qui ne dit que son numero fait revenir
   le lecteur en arriere.
   -------------------------------------------------------------------------- */
.introuvable-code {
    display: block;
    color: var(--accent);
    font-family: var(--sans);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
}
.introuvable > h1:first-of-type { margin-top: calc(var(--pas) * 2); }

.introuvable-adresse {
    padding: calc(var(--pas) * 3) calc(var(--pas) * 4);
    background: var(--surlignage);
    border-left: 2px solid var(--filet);
    overflow-wrap: anywhere;
}
.introuvable-adresse code { background: none; padding: 0; }
.introuvable-note { color: var(--encre-douce); font-size: .9375rem; }
.introuvable-pistes > li { padding: calc(var(--pas) * 2) 0; }

/* --------------------------------------------------------------------------
   LE PIED
   -------------------------------------------------------------------------- */
.pied {
    margin-top: calc(var(--pas) * 20);
    border-top: 1px solid var(--filet);
    background: var(--papier);
    font-family: var(--sans);
    font-size: .875rem;
}

.pied-corps {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--pas) * 10);
    justify-content: space-between;
    max-width: 78rem;
    margin: 0 auto;
    padding: calc(var(--pas) * 12) var(--marge) calc(var(--pas) * 8);
}

.pied-nom { margin: 0; font-family: var(--titre); font-size: 1.375rem; font-weight: 600; }
.pied-mot { margin: calc(var(--pas)) 0 0; max-width: 28rem; color: var(--encre-douce); font-size: .8125rem; }

.pied-nav ul { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2) calc(var(--pas) * 6); margin: 0; padding: 0; list-style: none; }
.pied a { color: var(--encre-douce); text-decoration: none; }
.pied a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .15em; }
.pied :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.pied-bas {
    max-width: 78rem;
    margin: 0 auto;
    padding: calc(var(--pas) * 5) var(--marge) calc(var(--pas) * 10);
    border-top: 1px solid var(--filet-fin);
    color: var(--encre-douce);
    font-size: .75rem;
}

/* --------------------------------------------------------------------------
   PETITS ECRANS
   -------------------------------------------------------------------------- */
@media (max-width: 40rem) {
    body { font-size: 1.125rem; }              /* 18 px, jamais moins */
    main { padding-top: calc(var(--pas) * 10); }
    h2 { margin-top: calc(var(--pas) * 12); }
    .fronton-corps { padding-top: calc(var(--pas) * 7); }
    .pied-corps { gap: calc(var(--pas) * 7); }
}

/* --------------------------------------------------------------------------
   MOUVEMENT REDUIT
   Le site n anime rien d essentiel ; on coupe donc tout sans rien perdre.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   IMPRESSION
   Les tables de reference se tirent sur papier : c est un usage reel du
   site, et la navigation n a rien a y faire.
   -------------------------------------------------------------------------- */
@media print {
    .fronton, .pied, .bandeau-dev, .skip { display: none; }
    html, body { background: #FFFFFF; color: #000000; }
    main { max-width: none; padding: 0; }
    main :is(table, figure, pre) { width: auto; margin-left: 0; transform: none; }
    main a { color: #000000; text-decoration: underline; }
    main table { display: table; font-size: .75rem; }
    main thead th { border-bottom: 1.5pt solid #000000; color: #000000; }
}