/* ==========================================================================
   Festina Lente — feuille de style unique
   Design « Cabinet de lecture » : papier clair, Garamond, petites capitales,
   filets fins. Aucune animation pour l'instant (elles viendront plus tard).
   ========================================================================== */

/* --- Polices (fichiers locaux dans le dossier Fonts/) --- */
@font-face { font-family: "Cormorant Garamond"; src: url("Fonts/CormorantGaramond-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("Fonts/CormorantGaramond-MediumItalic.woff") format("woff"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("Fonts/CormorantGaramond-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant SC"; src: url("Fonts/CormorantSC-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant SC"; src: url("Fonts/CormorantSC-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("Fonts/EBGaramond-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("Fonts/EBGaramond-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("Fonts/EBGaramond-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

/* --- Couleurs et polices --- */
:root {
    --papier: #F3EEEA;
    --beige: #EBE3D5;
    --beige-fonce: #d8d1c6;
    --brun: #776B5D;
    --brun-clair: #a39787;
    --encre: #2b2620;
    --texte-doux: #4a4239;
    --gris-brun: #5e5448;
    --filet: #c9bfb0;

    --titre: "Cormorant Garamond", Garamond, Georgia, serif;
    --capitales: "Cormorant SC", "Cormorant Garamond", Garamond, Georgia, serif;
    --texte: "EB Garamond", Garamond, Georgia, serif;
}

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

html { scroll-behavior: auto; background: var(--papier); }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 19px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

a { color: var(--gris-brun); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--encre); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--brun); outline-offset: 3px; }

p { margin: 0 0 1em; }

.bold, strong { font-weight: 500; color: var(--encre); }

.wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.lien-evitement {
    position: absolute;
    left: -9999px;
}
.lien-evitement:focus {
    left: 16px;
    top: 16px;
    z-index: 10;
    background: var(--encre);
    color: var(--papier);
    padding: 8px 14px;
}

main { flex: 1 0 auto; }

/* --- En-tête du site --- */
.site-entete { border-bottom: 1px solid var(--filet); }
.site-entete .wrap {
    padding-top: 14px;
    padding-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
}
.marque {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--encre);
}
.marque img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px double var(--brun);
    background: var(--brun);
}
.marque span {
    font-family: var(--capitales);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.nav-site {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    font-family: var(--capitales);
    font-size: 18px;
    letter-spacing: 0.05em;
}
.nav-site a { text-decoration: none; }
.nav-site a:hover, .nav-site a[aria-current="page"] { color: var(--encre); }

/* --- Pied de page --- */
.site-pied { background: var(--encre); color: var(--beige-fonce); margin-top: 40px; }
.site-pied .wrap {
    padding-top: 32px;
    padding-bottom: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    font-size: 16px;
}
.site-pied .pied-nom { font-family: var(--capitales); font-size: 20px; letter-spacing: 0.08em; color: var(--beige); }
.site-pied a { color: var(--beige-fonce); }
.site-pied a:hover { color: var(--papier); }
.pied-liens { display: flex; gap: 6px 22px; flex-wrap: wrap; font-family: var(--capitales); font-size: 16px; letter-spacing: 0.06em; }
.pied-mention { flex-basis: 100%; font-size: 15px; color: var(--brun-clair); }

/* --- Petits titres en capitales --- */
.surtitre, .petit-titre {
    margin: 0 0 8px;
    font-family: var(--capitales);
    font-size: 17px;
    letter-spacing: 0.16em;
    color: var(--brun);
}

/* --- Ouverture d'un cahier --- */
.ouverture {
    padding-top: 72px;
    padding-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 36px;
}
.ouverture-num {
    font-family: var(--titre);
    font-size: 200px;
    line-height: 0.8;
    font-weight: 500;
    color: var(--beige-fonce);
}
.ouverture-texte { flex: 1 1 420px; min-width: 0; padding-bottom: 10px; }
.ouverture h1 {
    margin: 0;
    font-family: var(--titre);
    font-weight: 500;
    font-size: 84px;
    line-height: 1;
}
.chapeau {
    margin: 18px 0 0;
    max-width: 680px;
    font-size: 21px;
    font-style: italic;
    color: var(--texte-doux);
}

/* --- Corps d'un cahier : sommaire + texte --- */
.cahier {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 56px;
    padding-bottom: 80px;
}
.sommaire-cahier {
    flex: 1 1 200px;
    max-width: 250px;
    position: sticky;
    top: 24px;
    border-top: 2px solid var(--brun);
    padding-top: 14px;
    font-size: 17px;
    line-height: 1.4;
}
.sommaire-cahier ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sommaire-cahier a { text-decoration: none; }
.cahier-texte {
    flex: 999 1 560px;
    min-width: 0;
    counter-reset: planche;
}

.partie { scroll-margin-top: 24px; }
.partie + .partie { margin-top: 64px; }
.partie h2 {
    margin: 0 0 26px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--filet);
    font-family: var(--titre);
    font-weight: 600;
    font-size: 40px;
    line-height: 1.15;
}
.partie h3 {
    margin: 40px 0 12px;
    font-family: var(--titre);
    font-weight: 600;
    font-size: 29px;
    line-height: 1.2;
}
.partie h4 {
    margin: 28px 0 8px;
    font-family: var(--capitales);
    font-size: 20px;
    letter-spacing: 0.06em;
}
.partie ul, .partie ol { padding-left: 24px; margin: 0 0 1em; }
.partie li { margin-bottom: 6px; }

.lettrine::first-letter {
    float: left;
    font-family: var(--titre);
    font-size: 92px;
    line-height: 0.78;
    padding: 8px 10px 0 0;
    color: var(--brun);
}

/* Navigation entre cahiers */
.suite {
    margin-top: 72px;
    padding-top: 22px;
    border-top: 2px solid var(--brun);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 18px;
}
.suite { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; }
.suite a { text-decoration: none; display: block; }
.suite a:first-child { justify-self: start; }
.suite a.suite-sommaire { justify-self: center; text-align: center; }
.suite a:last-child { justify-self: end; text-align: right; }
.suite .suite-label {
    display: block;
    font-family: var(--capitales);
    font-size: 15px;
    letter-spacing: 0.12em;
    color: var(--brun);
}
.suite .suite-titre {
    font-family: var(--titre);
    font-size: 26px;
    color: var(--encre);
}

/* Note de sources en fin de cahier */
.mini {
    margin-top: 48px;
    padding-top: 14px;
    border-top: 1px solid var(--filet);
    font-size: 15px;
    font-style: italic;
    color: var(--texte-doux);
}

/* ==========================================================================
   Composants des rubriques
   ========================================================================== */

/* Texte à gauche, schéma ou image à droite */
.rub_duo {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 36px;
    align-items: center;
    margin: 8px 0 24px;
}
.rub_duo > :first-child { margin-top: 0; }

/* Planches (schémas) — numérotées automatiquement */
.rub_figure {
    margin: 32px auto;
    max-width: 440px;
    background: var(--beige);
    border: 1px solid var(--filet);
    padding: 22px;
    counter-increment: planche;
}
.rub_figure svg { width: 100%; height: auto; display: block; }
.rub_figure figcaption {
    margin-top: 12px;
    font-size: 16px;
    font-style: italic;
    color: var(--texte-doux);
    text-align: center;
}
.rub_figure figcaption::before {
    content: "Planche " counter(planche) " — ";
    font-family: var(--capitales);
    font-style: normal;
    letter-spacing: 0.08em;
    color: var(--brun);
}
.rub_duo .rub_figure { margin: 0 auto; }

/* Texte dans les schémas */
.rub_figure .t1 { font: 500 19px var(--texte); fill: var(--encre); }
.rub_figure .t2 { font: 400 15px var(--texte); fill: var(--gris-brun); }
.rub_figure .tsym { font: 500 30px var(--texte); fill: var(--encre); }
.rub_figure .clair { fill: var(--beige); }
.rub_figure .clair2 { fill: var(--beige-fonce); }

/* Photographies */
.rub_photo { margin: 28px auto; max-width: 440px; }
.rub_photo img {
    display: block;
    width: 100%;
    border: 1px solid var(--filet);
    background: var(--beige);
    padding: 6px;
}
.rub_photo figcaption {
    margin-top: 8px;
    font-size: 15px;
    font-style: italic;
    color: var(--texte-doux);
    text-align: center;
}
.rub_duo .rub_photo { margin: 0 auto; }
.rub_galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 22px;
    margin: 24px 0;
}
.rub_galerie .rub_photo { margin: 0; max-width: none; }
.rub_galerie .rub_photo img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Tableaux */
.rub_table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 17px;
}
.rub_table th {
    font-family: var(--capitales);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 8px 16px 8px 0;
    border-bottom: 2px solid var(--brun);
    white-space: nowrap;
}
.rub_table td {
    padding: 9px 16px 9px 0;
    border-bottom: 1px solid var(--filet);
    vertical-align: top;
}
.rub_table code { font-family: var(--texte); font-size: 17px; letter-spacing: 0.02em; }

/* Encadrés */
.rub_encart {
    background: var(--beige);
    border: 1px solid var(--filet);
    padding: 20px 26px 8px;
    margin: 28px 0;
}
.rub_encart > p:first-child {
    font-family: var(--capitales);
    font-size: 19px;
    letter-spacing: 0.1em;
    color: var(--brun);
    margin-bottom: 10px;
}
.rub_compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin: 24px 0;
}
.rub_compare .rub_encart { margin: 0; }

/* Citation et formule */
.rub_citation {
    margin: 28px 0;
    padding-left: 24px;
    border-left: 2px solid var(--brun);
    font-family: var(--titre);
    font-style: italic;
    font-size: 25px;
    line-height: 1.4;
    color: var(--texte-doux);
}
.rub_citation .mini { border: 0; margin: 8px 0 0; padding: 0; font-family: var(--texte); }
.rub_formule {
    width: fit-content;
    max-width: 100%;
    margin: 26px auto;
    padding: 16px 26px;
    background: var(--encre);
    color: var(--papier);
    font-size: 24px;
    letter-spacing: 0.04em;
    text-align: center;
}

/* Frises chronologiques */
.rub_frise, .cahier-texte ul.rub_frise {
    list-style: none;
    margin: 24px 0;
    padding: 0 0 0 26px;
    border-left: 2px solid var(--brun);
}
.rub_frise li { position: relative; margin-bottom: 16px; }
.rub_frise li::before {
    content: "";
    position: absolute;
    left: -27px; /* milieu du filet : 26px de retrait + 1px (moitié du filet de 2px) */
    transform: translateX(-50%);
    top: 9px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--papier);
    border: 2px solid var(--brun);
}
.rub_date {
    font-family: var(--capitales);
    font-size: 19px;
    letter-spacing: 0.06em;
    color: var(--brun);
}

/* Lexiques */
.rub_lexique { margin: 18px 0 24px; }
.rub_lexique dt {
    padding-top: 10px;
    border-top: 1px solid var(--filet);
    font-family: var(--capitales);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.rub_lexique dd { margin: 2px 0 12px; color: var(--texte-doux); }

/* ==========================================================================
   Page d'accueil
   ========================================================================== */
.accueil-une {
    padding-top: 88px;
    padding-bottom: 72px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px 56px;
}
.accueil-une-texte { flex: 999 1 520px; min-width: 0; }
.accueil-une h1 {
    margin: 0;
    font-family: var(--titre);
    font-weight: 500;
    font-size: 76px;
    line-height: 1.02;
}
.accueil-une .chapeau { font-style: normal; max-width: 560px; margin-top: 26px; }
.accueil-logo { flex: 1 1 300px; display: flex; justify-content: center; }
.accueil-logo img {
    width: 360px;
    border-radius: 50%;
    border: 6px double var(--brun);
    padding: 10px;
    background: var(--beige);
}
.bouton {
    display: inline-block;
    margin-top: 34px;
    padding: 14px 28px;
    background: var(--brun);
    color: var(--papier);
    text-decoration: none;
    font-family: var(--capitales);
    font-size: 19px;
    letter-spacing: 0.08em;
}

.fleuron {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--brun);
    font-family: var(--titre);
    font-size: 28px;
}
.fleuron::before, .fleuron::after { content: ""; flex: 1; height: 1px; background: var(--filet); }

.accueil-sommaire {
    padding-top: 56px;
    padding-bottom: 72px;
    display: flex;
    flex-wrap: wrap;
    gap: 32px 56px;
    scroll-margin-top: 16px;
}
.accueil-sommaire-intro { flex: 1 1 260px; }
.accueil-sommaire-intro h2, .accueil-outils h2 {
    margin: 0;
    font-family: var(--titre);
    font-weight: 500;
    font-size: 48px;
    line-height: 1.05;
}
.accueil-sommaire-intro p { margin-top: 18px; color: var(--texte-doux); }
.toc {
    flex: 999 1 560px;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--filet);
}
.toc li { border-bottom: 1px solid var(--filet); }
.toc a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 18px;
    padding: 15px 4px;
    text-decoration: none;
    color: var(--encre);
}
.toc-num { width: 46px; font-family: var(--capitales); color: var(--brun); }
.toc-titre { font-family: var(--titre); font-size: 28px; font-weight: 600; line-height: 1.2; }
.toc-points { flex: 1; min-width: 40px; border-bottom: 1px dotted var(--brun-clair); transform: translateY(-6px); }
.toc-desc { font-style: italic; color: var(--gris-brun); }

.accueil-outils { padding-bottom: 96px; }
.accueil-outils-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-top: 2px solid var(--brun);
    padding-top: 16px;
    margin-bottom: 28px;
}
.accueil-outils h2 { font-size: 36px; }
.accueil-outils-entete p { margin: 0; font-style: italic; color: var(--gris-brun); }
.outils {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    gap: 28px;
}
.outil {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    padding: 28px;
    background: var(--beige);
    border: 1px solid var(--filet);
    text-decoration: none;
    color: var(--encre);
}
.outil:hover { border-color: var(--brun); color: var(--encre); }
.outil-signe {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--brun);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--titre);
    font-size: 28px;
    color: var(--brun);
}
.outil-titre { display: block; font-family: var(--titre); font-size: 30px; font-weight: 600; line-height: 1.1; }
.outil-texte { display: block; margin-top: 8px; color: var(--texte-doux); }

/* Pages en préparation */
.en-preparation {
    max-width: 680px;
    padding: 28px 30px;
    background: var(--beige);
    border: 1px solid var(--filet);
    margin-bottom: 96px;
}

/* ==========================================================================
   Calculateur de signatures
   ========================================================================== */
.calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: 48px;
    align-items: start;
    padding-bottom: 96px;
}
.calc-saisie { min-width: 0; }
.calc-exemples { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 28px; }
.calc-exemples .petit-titre { margin: 0 6px 0 0; }
.calc button { font-family: var(--texte); font-size: 17px; cursor: pointer; }
.calc-puce {
    min-height: 40px; padding: 6px 16px;
    background: transparent; border: 1px solid var(--brun-clair); border-radius: 999px;
    color: var(--gris-brun);
}
.calc-puce:hover { border-color: var(--encre); color: var(--encre); }
.calc-lien {
    min-height: 40px; padding: 6px 4px;
    background: none; border: 0; color: var(--gris-brun);
    text-decoration: underline; text-underline-offset: 3px;
}
.calc-lien:hover { color: var(--encre); }

.calc-bloc { margin: 0 0 36px; padding: 0; border: 0; min-width: 0; }
.calc-bloc legend { display: block; width: 100%; border-top: 2px solid var(--brun); padding: 14px 0 6px; font-family: var(--titre); font-weight: 600; font-size: 28px; line-height: 1.2; }
.calc-aide { margin: 8px 0 14px; font-size: 16px; color: var(--texte-doux); font-style: italic; }

.calc-champs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; margin: 10px 0; }
.calc-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.calc-champ > span { font-size: 15px; color: var(--texte-doux); line-height: 1.3; }
.calc input[type="text"], .calc input[type="number"], .calc select {
    min-height: 44px; padding: 6px 10px;
    font: 18px var(--texte); color: var(--encre);
    background: var(--papier); border: 1px solid var(--brun-clair); border-radius: 2px;
    max-width: 100%;
}
.calc input.court { width: 92px; }
.calc input:focus-visible, .calc select:focus-visible { outline: 2px solid var(--brun); outline-offset: 1px; }
.calc-case { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; }
.calc-case input { width: 20px; height: 20px; accent-color: var(--brun); flex: none; }

.calc-groupes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.calc-groupe { padding: 16px 18px 6px; background: var(--beige); border: 1px solid var(--filet); }
.calc-groupe-tete { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.calc-groupe-num { font-family: var(--titre); font-size: 40px; line-height: 0.9; color: var(--brun-clair); min-width: 28px; }
.calc-type { flex: 1 1 240px; }
.calc-type select { width: 100%; }
.calc-groupe-actions { display: flex; gap: 6px; }
.calc .calc-icone {
    width: 44px; height: 44px;
    background: var(--papier); border: 1px solid var(--brun-clair); border-radius: 2px;
    color: var(--gris-brun); font-size: 20px; line-height: 1;
}
.calc-icone:hover:not(:disabled) { color: var(--encre); border-color: var(--encre); }
.calc-icone:disabled { opacity: 0.35; cursor: default; }
.calc-modifs { margin: 6px 0 4px; }
.calc-modifs summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-size: 16px; color: var(--gris-brun); list-style: none; }
.calc-modifs summary::before { content: "▸"; margin-right: 8px; color: var(--brun); }
.calc-modifs[open] summary::before { content: "▾"; }
.calc-modifs summary::-webkit-details-marker { display: none; }
.calc-modifs ul { list-style: none; margin: 4px 0 8px; padding: 0 0 0 14px; border-left: 2px solid var(--filet); display: flex; flex-direction: column; gap: 10px; }
.calc-modif { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.calc-erreur { margin: 0 0 10px; font-size: 16px; color: #8a3b22; }
.calc-erreur:empty { display: none; }
.calc .calc-ajouter {
    margin-top: 16px; min-height: 48px; width: 100%;
    background: transparent; border: 1px dashed var(--brun); color: var(--gris-brun);
    font-family: var(--capitales); font-size: 18px; letter-spacing: 0.06em;
}
.calc-ajouter:hover { background: var(--beige); color: var(--encre); }

.calc-resultat {
    position: sticky; top: 24px;
    padding: 26px 28px;
    background: var(--beige); border: 1px solid var(--filet); border-top: 4px solid var(--brun);
}
.calc-resultat .petit-titre { margin: 0 0 8px; }
.calc-formule { margin: 0 0 14px; font-family: var(--titre); font-size: 30px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.calc-formule sup { font-size: 0.6em; }
.calc-vide { font-size: 18px; font-style: italic; color: var(--texte-doux); font-family: var(--texte); }
.calc .calc-copier {
    min-height: 44px; padding: 8px 18px;
    background: var(--brun); color: var(--papier); border: 0;
    font-family: var(--capitales); letter-spacing: 0.06em;
}
.calc-copier:hover { background: var(--encre); }
.calc-totaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 22px 0 6px; }
.calc-totaux div { border-top: 1px solid var(--filet); padding: 8px 0; }
.calc-totaux dt { font-family: var(--capitales); font-size: 15px; letter-spacing: 0.06em; color: var(--brun); }
.calc-totaux dd { margin: 0; font-family: var(--titre); font-size: 28px; line-height: 1.2; }
.calc-detail { font-family: var(--texte); font-size: 15px; color: var(--texte-doux); }
.calc-verif, .calc-alerte { margin: 10px 0 18px; padding: 10px 14px; font-size: 16px; border-left: 3px solid var(--brun-clair); background: var(--papier); }
.calc-verif.ok { border-left-color: #5b7a4a; }
.calc-verif.ecart, .calc-alerte { border-left-color: #8a3b22; }
.calc-resume {
    margin: 18px 0 22px; padding: 16px 0 0;
    border-top: 1px solid var(--filet);
    font-size: 18px; line-height: 1.6; color: var(--encre);
}
.calc-resume::first-letter { font-family: var(--titre); font-size: 2.4em; float: left; line-height: 0.85; padding: 4px 8px 0 0; color: var(--brun); }
.calc-lecture { margin: 0 0 16px; padding-left: 20px; font-size: 16px; color: var(--texte-doux); }
.calc-lecture li { margin-bottom: 4px; }
[hidden] { display: none !important; }
.calc-mini { display: none; }

/* ==========================================================================
   Index des termes
   ========================================================================== */
.index {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    padding-bottom: 96px;
}
.index-outils {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-top: 2px solid var(--brun);
    padding-top: 14px;
}
.index-recherche { display: block; }
.index-recherche .petit-titre { display: block; margin: 0 0 8px; }
.index-recherche input {
    width: 100%;
    min-height: 46px;
    padding: 8px 12px;
    font: 18px var(--texte);
    color: var(--encre);
    background: var(--papier);
    border: 1px solid var(--brun-clair);
    border-radius: 2px;
}
.index-recherche input:focus-visible { outline: 2px solid var(--brun); outline-offset: 1px; }
.index-compte { margin: 8px 0 16px; font-size: 15px; font-style: italic; color: var(--texte-doux); }
.index-alphabet {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 18px;
    font-family: var(--capitales);
    font-size: 19px;
    text-align: center;
}
.index-alphabet a, .index-alphabet span { display: block; padding: 6px 0; line-height: 1.2; }
.index-alphabet a { text-decoration: none; color: var(--encre); }
.index-alphabet a:hover { background: var(--beige); }
.index-alphabet span, .index-alphabet a.eteinte { color: var(--filet); pointer-events: none; }
.index-filtres { border-top: 1px solid var(--filet); padding-top: 6px; }
.index-filtres summary {
    min-height: 40px; display: flex; align-items: center; cursor: pointer;
    font-family: var(--capitales); letter-spacing: 0.08em; color: var(--brun); list-style: none;
}
.index-filtres summary::-webkit-details-marker { display: none; }
.index-filtres summary::after { content: "▾"; margin-left: 8px; font-size: 14px; }
.index-filtres:not([open]) summary::after { content: "▸"; }
.index-filtre { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 16px; line-height: 1.25; cursor: pointer; }
.index-filtre input { width: 18px; height: 18px; accent-color: var(--brun); flex: none; }
.index-filtre-num { font-family: var(--titre); font-weight: 600; color: var(--brun); min-width: 30px; }
.index-tout {
    margin-top: 10px; min-height: 40px; padding: 4px 0;
    background: none; border: 0; cursor: pointer;
    font: 16px var(--texte); color: var(--gris-brun);
    text-decoration: underline; text-underline-offset: 3px;
}
.index-tout:hover { color: var(--encre); }

.index-liste { min-width: 0; max-width: 760px; }
.lettre { margin-bottom: 18px; }
.lettre h2 {
    margin: 0 0 4px;
    font-family: var(--titre);
    font-weight: 500;
    font-size: 72px;
    line-height: 1;
    color: var(--brun);
    border-bottom: 1px solid var(--filet);
    scroll-margin-top: 16px;
}
.lettre { scroll-margin-top: 16px; }
.terme { padding: 18px 0 16px; border-bottom: 1px solid var(--beige-fonce); scroll-margin-top: 16px; }
.terme:target { background: var(--beige); box-shadow: -14px 0 0 var(--beige), 14px 0 0 var(--beige); }
.terme h3 {
    margin: 0;
    font-family: var(--capitales);
    font-weight: 600;
    font-size: 25px;
    letter-spacing: 0.03em;
    line-height: 1.2;
}
.terme-var { margin: 2px 0 0; font-size: 16px; color: var(--texte-doux); }
.terme-sens { margin: 8px 0 0; padding: 0; list-style: none; }
.terme-sens.plusieurs { counter-reset: sens; }
.terme-sens.plusieurs > li { counter-increment: sens; position: relative; padding-left: 28px; }
.terme-sens.plusieurs > li::before {
    content: counter(sens) ".";
    position: absolute; left: 0; top: 0;
    font-family: var(--titre); font-weight: 600; font-size: 20px; color: var(--brun);
}
.terme-sens > li + li { margin-top: 10px; }
.terme-sens p { margin: 0; }
.terme-precision { font-style: italic; color: var(--gris-brun); }
.terme-liens { margin-top: 6px !important; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.terme-cahier {
    display: inline-flex; align-items: baseline; gap: 6px;
    padding: 2px 10px;
    border: 1px solid var(--filet);
    border-radius: 999px;
    font-size: 15px;
    text-decoration: none;
    color: var(--gris-brun);
}
.terme-cahier span { font-family: var(--titre); font-weight: 600; color: var(--brun); }
.terme-cahier:hover { border-color: var(--brun); color: var(--encre); }
.terme-voir { margin: 8px 0 0; font-size: 16px; color: var(--texte-doux); }
.index-rien { padding: 24px; background: var(--beige); border: 1px solid var(--filet); font-style: italic; }

/* ==========================================================================
   Animations
   ========================================================================== */
/* Défilement doux, activé seulement après le chargement : une page ouverte
   sur une ancre (Index.html#sommaire) s'y place directement, sans glisser. */
@media (prefers-reduced-motion: no-preference) {
    html.defilement-doux { scroll-behavior: smooth; }
}
:root { --douceur: cubic-bezier(0.22, 0.7, 0.2, 1); }

/* Trait qui se déploie sous les liens de navigation */
.nav-site a, .sommaire-cahier a, .site-pied a, .suite-titre, .toc-titre, .outil-titre {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    padding-bottom: 2px;
    transition: background-size 0.45s var(--douceur), color 0.25s ease;
}
.nav-site a:hover, .nav-site a:focus-visible, .nav-site a[aria-current="page"],
.sommaire-cahier a:hover, .sommaire-cahier a:focus-visible,
.site-pied a:hover,
.suite a:hover .suite-titre, .suite a:focus-visible .suite-titre,
.toc a:hover .toc-titre, .toc a:focus-visible .toc-titre,
.outil:hover .outil-titre, .outil:focus-visible .outil-titre {
    text-decoration: none;
    background-size: 100% 1px;
}

/* Liens dans le texte : un trait discret au repos, un trait plein qui le recouvre au survol */
.cahier-texte p a, .cahier-texte li a, .cahier-texte td a, .dec-contenu p > a, .dec-contenu dd a, .dec-contenu td a, .terme-voir a, .calc-aide a, .en-preparation a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--brun-clair), var(--brun-clair));
    background-repeat: no-repeat;
    background-position: 0 100%, 0 100%;
    background-size: 0% 1px, 100% 1px;
    padding-bottom: 1px;
    transition: background-size 0.45s var(--douceur), color 0.25s ease;
}
.cahier-texte p a:hover, .cahier-texte li a:hover, .cahier-texte td a:hover, .dec-contenu p > a:hover, .dec-contenu dd a:hover, .dec-contenu td a:hover, .terme-voir a:hover, .calc-aide a:hover, .en-preparation a:hover {
    background-size: 100% 1px, 100% 1px;
}

/* Table des matières et cartes d'outils */
.toc-num { transition: transform 0.4s var(--douceur), color 0.25s ease; }
.toc a:hover .toc-num { transform: translateX(6px); color: var(--encre); }
.toc-points { transition: border-color 0.3s ease; }
.toc a:hover .toc-points { border-color: var(--brun); }
.outil { transition: border-color 0.3s ease, transform 0.4s var(--douceur), box-shadow 0.4s var(--douceur); }
.outil:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -16px rgba(43, 38, 32, 0.45); }
.terme-cahier, .calc-puce, .calc-icone, .calc-copier, .calc-ajouter { transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease; }

/* Bouton « Commencer la lecture » */
.bouton {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.2s ease, box-shadow 0.4s var(--douceur);
}
.bouton::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--encre);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.bouton:hover, .bouton:focus-visible { background: var(--brun); color: var(--papier); box-shadow: 0 12px 26px -14px rgba(43, 38, 32, 0.6); }
.bouton:hover::before, .bouton:focus-visible::before { transform: scaleX(1); }
.bouton:active { transform: translateY(1px); }
.bouton-fleche { display: inline-block; transition: transform 0.45s var(--douceur); }
.bouton:hover .bouton-fleche, .bouton:focus-visible .bouton-fleche { transform: translateX(6px); }

/* Apparition du titre : on attend que les polices soient prêtes (classe « pret » posée par site.js),
   pour que le mouvement se voie à chaque fois, quel que soit le temps de chargement. */
@media (prefers-reduced-motion: no-preference) {
    html.anim:not(.pret) :is(.accueil-une-texte > *, .ouverture-texte > *, .ouverture-num, .accueil-logo) { opacity: 0; }
    html.pret :is(.accueil-une-texte > *, .ouverture-texte > *, .ouverture-num, .accueil-logo) {
        animation: apparition 0.9s var(--douceur) both;
    }
    html.pret .accueil-une-texte > :nth-child(2), html.pret .ouverture-texte > :nth-child(2) { animation-delay: 0.12s; }
    html.pret .accueil-une-texte > :nth-child(3), html.pret .ouverture-texte > :nth-child(3) { animation-delay: 0.24s; }
    html.pret .accueil-logo { animation-delay: 0.2s; }
    html.pret .ouverture-num { animation-name: apparition-num; animation-duration: 1.2s; }
    .bouton .bouton-fleche { animation: invite 2.4s ease-in-out 1.4s 2; }
}
@keyframes apparition { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes apparition-num { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes invite { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }

/* Retour en haut de page, avec la progression de lecture autour */
.haut-de-page {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 20;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--papier);
    color: var(--brun);
    cursor: pointer;
    box-shadow: 0 8px 22px -12px rgba(43, 38, 32, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.45s var(--douceur), visibility 0s linear 0.45s, background-color 0.3s ease, color 0.3s ease;
}
.haut-de-page.visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.haut-de-page:hover, .haut-de-page:focus-visible { background: var(--brun); color: var(--papier); }
.haut-de-page svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.haut-de-page .anneau-fond { fill: none; stroke: var(--filet); stroke-width: 2; }
.haut-de-page .anneau { fill: none; stroke: var(--brun); stroke-width: 2; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.haut-de-page:hover .anneau, .haut-de-page:focus-visible .anneau { stroke: var(--papier); }
.haut-de-page .fleche { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--douceur); }
.haut-de-page:hover .fleche { transform: translateY(-2px); }

/* Sommaire qui suit la lecture */
.sommaire-cahier li { position: relative; }
.sommaire-cahier a { display: inline; color: var(--gris-brun); }
.sommaire-cahier a.en-cours { color: var(--encre); background-size: 100% 1px; }
.sommaire-cahier li::before {
    content: "";
    position: absolute;
    left: -14px; top: 0.25em; bottom: 0.25em;
    width: 3px;
    background: var(--brun);
    transform: scaleY(0);
    transition: transform 0.4s var(--douceur);
}
.sommaire-cahier li:has(a.en-cours)::before { transform: scaleY(1); }

/* Termes techniques reliés à l'index, et leur bulle */
:is(.cahier-texte, .dec-contenu) a.terme-lien {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--brun), var(--brun)), radial-gradient(circle, var(--brun-clair) 0.8px, transparent 1.2px);
    background-repeat: no-repeat, repeat-x;
    background-position: 0 100%, 0 100%;
    background-size: 0% 1px, 4px 2px;
    padding-bottom: 1px;
    cursor: help;
}
:is(.cahier-texte, .dec-contenu) a.terme-lien:hover, :is(.cahier-texte, .dec-contenu) a.terme-lien:focus-visible { background-size: 100% 1px, 4px 2px; color: var(--encre); }
.bulle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 40;
    max-width: 340px;
    padding: 14px 16px 12px;
    background: var(--encre);
    color: var(--beige);
    font-size: 16px;
    line-height: 1.5;
    box-shadow: 0 14px 30px -14px rgba(43, 38, 32, 0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.3s var(--douceur), visibility 0s linear 0.3s;
    cursor: pointer;
}
.bulle.dessous { transform: translateY(-6px); }
.bulle.visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bulle strong { display: block; margin-bottom: 4px; font-family: var(--capitales); font-weight: 600; font-size: 18px; letter-spacing: 0.04em; color: var(--papier); }
.bulle span { display: block; }
.bulle em { display: block; margin-top: 8px; font-size: 14px; color: var(--brun-clair); }

/* Planches agrandissables */
.zoomable { cursor: zoom-in; transition: transform 0.4s var(--douceur), box-shadow 0.4s var(--douceur); }
.rub_photo img.zoomable:hover, .rub_galerie img.zoomable:hover { box-shadow: 0 12px 26px -16px rgba(43, 38, 32, 0.6); }
.rub_figure > svg.zoomable:hover { transform: scale(1.015); }
.zoomable:focus-visible { outline: 2px solid var(--brun); outline-offset: 4px; }
.visionneuse {
    width: 100vw; height: 100vh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: transparent;
}
.visionneuse::backdrop { background: rgba(28, 24, 20, 0.88); }
.visionneuse[open] { animation: fondu 0.3s ease both; }
.visionneuse[open]::backdrop { animation: fondu 0.3s ease both; }
.visionneuse-cadre {
    box-sizing: border-box;
    width: 100%; height: 100%;
    padding: 56px 72px 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.visionneuse-image {
    display: flex; align-items: center; justify-content: center;
    max-width: min(1100px, 100%);
    max-height: calc(100vh - 140px);
    background: var(--beige);
    padding: 18px;
    animation: monte 0.4s var(--douceur) both;
}
.visionneuse-image img { display: block; max-width: 100%; max-height: calc(100vh - 176px); width: auto; height: auto; }
.visionneuse-image svg { display: block; width: min(80vw, 760px); height: auto; max-height: calc(100vh - 176px); }
.visionneuse-image svg .t1 { font: 500 19px var(--texte); fill: var(--encre); }
.visionneuse-image svg .t2 { font: 400 15px var(--texte); fill: var(--gris-brun); }
.visionneuse-image svg .tsym { font: 500 30px var(--texte); fill: var(--encre); }
.visionneuse-image svg .clair { fill: var(--beige); }
.visionneuse-image svg .clair2 { fill: var(--beige-fonce); }
.visionneuse-legende { margin: 0; max-width: 760px; text-align: center; font-style: italic; color: var(--beige-fonce); }
.visionneuse button {
    position: fixed;
    width: 52px; height: 52px;
    border: 1px solid rgba(235, 227, 213, 0.4);
    border-radius: 50%;
    background: rgba(43, 38, 32, 0.6);
    color: var(--papier);
    font: 30px/1 var(--titre);
    cursor: pointer;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.visionneuse button:hover, .visionneuse button:focus-visible { background: var(--brun); border-color: var(--papier); }
.visionneuse-fermer { top: 16px; right: 16px; }
.visionneuse-prec { left: 16px; top: 50%; transform: translateY(-50%); }
.visionneuse-suiv { right: 16px; top: 50%; transform: translateY(-50%); }
@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes monte { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

/* Planche animée : le pliage */
.rub_figure.pliage {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(220px, 1fr);
    gap: 18px 26px;
    align-items: center;
}
.pliage figcaption { grid-column: 1 / -1; margin-top: 0; }
.pliage-scene { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.pliage-stage { position: absolute; perspective: 1400px; }
.pliage-papier, .pliage-face {
    position: absolute;
    overflow: hidden;
    background-color: #faf6ef;
    background-image:
        repeating-linear-gradient(90deg, transparent 0 21px, rgba(119, 107, 93, 0.22) 21px 22px),
        repeating-linear-gradient(0deg, transparent 0 2px, rgba(119, 107, 93, 0.05) 2px 3px);
    border: 1px solid var(--brun-clair);
    box-sizing: border-box;
}
.pliage-papier { box-shadow: 0 6px 16px -10px rgba(43, 38, 32, 0.5); }
.pliage-papier.epaisseur-1 { box-shadow: 2px 2px 0 -1px #eee6d8, 0 6px 16px -10px rgba(43, 38, 32, 0.5); }
.pliage-papier.epaisseur-2 { box-shadow: 2px 2px 0 -1px #eee6d8, 4px 4px 0 -1px #e2d9ca, 0 8px 18px -10px rgba(43, 38, 32, 0.5); }
.pliage-papier.epaisseur-3 { box-shadow: 2px 2px 0 -1px #eee6d8, 4px 4px 0 -1px #e2d9ca, 6px 6px 0 -1px #d8cfbf, 0 10px 20px -10px rgba(43, 38, 32, 0.55); }
.pliage-filigrane-marque {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(119, 107, 93, 0.75);
    background: radial-gradient(circle, rgba(119, 107, 93, 0.35) 0 22%, transparent 24%);
}
.pliage-contremarque {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--capitales);
    color: rgba(119, 107, 93, 0.75);
    letter-spacing: 0.08em;
}
.pliage-ligne { position: absolute; border: 0 dashed var(--brun); transition: opacity 0.3s ease; }
.pliage-ligne.verticale { top: 0; bottom: 0; border-left-width: 1.5px; }
.pliage-ligne.horizontale { left: 0; right: 0; border-top-width: 1.5px; }
.en-mouvement .pliage-ligne { opacity: 0; }
.pliage-rabat { position: absolute; transform-style: preserve-3d; z-index: 2; }
.pliage-rabat.axe-Y { transform-origin: left center; }
.pliage-rabat.axe-X { transform-origin: center top; }
.pliage-rabat.axe-Y.replie { transform: rotateY(-180deg); }
.pliage-rabat.axe-X.replie { transform: rotateX(180deg); }
.pliage-face { inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pliage-face.arriere { background-color: #f1ebe1; background-image: repeating-linear-gradient(90deg, transparent 0 21px, rgba(119, 107, 93, 0.16) 21px 22px); }
.axe-Y .pliage-face.arriere { transform: rotateY(180deg); }
.axe-X .pliage-face.arriere { transform: rotateX(180deg); }
.pliage-format { margin: 0; font-family: var(--titre); font-size: 34px; font-weight: 600; line-height: 1.1; }
.pliage-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.pliage-chiffres div { border-top: 1px solid var(--filet); padding-top: 4px; }
.pliage-chiffres dt { font-family: var(--capitales); font-size: 14px; letter-spacing: 0.06em; color: var(--brun); }
.pliage-chiffres dd { margin: 0; font-family: var(--titre); font-size: 28px; line-height: 1.1; }
.pliage-explication { margin: 0 0 14px; font-size: 16px; line-height: 1.5; color: var(--texte-doux); min-height: 4.5em; }
.pliage-boutons { display: flex; gap: 8px; flex-wrap: wrap; }
.pliage button {
    min-height: 44px; padding: 6px 14px;
    font: 17px var(--texte);
    color: var(--gris-brun);
    background: var(--papier);
    border: 1px solid var(--brun-clair);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.pliage button.principal { background: var(--brun); color: var(--papier); border-color: var(--brun); font-family: var(--capitales); letter-spacing: 0.06em; }
.pliage button:hover:not(:disabled) { border-color: var(--encre); color: var(--encre); }
.pliage button.principal:hover:not(:disabled) { background: var(--encre); color: var(--papier); }
.pliage button:disabled { opacity: 0.4; cursor: default; }
.pliage-etapes { display: flex; gap: 6px; margin-top: 10px; }
.pliage-etapes button { min-height: 36px; padding: 2px 10px; font-size: 15px; border-radius: 999px; }
.pliage-etapes button[aria-pressed="true"] { background: var(--beige-fonce); color: var(--encre); border-color: var(--brun); }

/* Bouton de retour à la lecture (index des termes) */
.zoomable:focus:not(:focus-visible) { outline: none; }
.retour-lecture {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 110px);
    padding: 12px 20px 12px 16px;
    background: var(--encre);
    color: var(--beige);
    text-decoration: none;
    border-radius: 999px;
    box-shadow: 0 12px 28px -14px rgba(43, 38, 32, 0.75);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.5s var(--douceur), background-color 0.25s ease;
}
.retour-lecture.visible { opacity: 1; transform: none; }
.retour-lecture:hover, .retour-lecture:focus-visible { background: var(--brun); color: var(--papier); }
.retour-fleche { font-size: 22px; line-height: 1; transition: transform 0.4s var(--douceur); }
.retour-lecture:hover .retour-fleche { transform: translateX(-4px); }
.retour-titre { display: block; font-family: var(--capitales); font-size: 17px; letter-spacing: 0.04em; color: var(--papier); line-height: 1.25; }
.retour-sous { display: block; font-size: 14px; font-style: italic; color: var(--beige-fonce); line-height: 1.3; }

/* Cahiers voisins, en haut de chaque cahier */
.cahiers-voisins {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px 24px;
    padding-top: 18px;
    padding-bottom: 14px;
    background: linear-gradient(var(--beige-fonce), var(--beige-fonce)) center bottom / calc(100% - 48px) 1px no-repeat;
    font-family: var(--capitales);
    font-size: 17px;
    letter-spacing: 0.04em;
}
.cahiers-voisins a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-height: 32px;
    padding: 4px 0;
    color: var(--gris-brun);
    text-decoration: none;
    transition: color 0.25s ease;
}
.cahiers-voisins a:hover, .cahiers-voisins a:focus-visible { color: var(--encre); }
.cahiers-voisins a > span[aria-hidden] { transition: transform 0.4s var(--douceur); }
.cahiers-voisins .haut-prec:hover > span[aria-hidden] { transform: translateX(-4px); }
.cahiers-voisins .haut-suiv:hover > span[aria-hidden] { transform: translateX(4px); }
.haut-num { font-family: var(--titre); font-weight: 600; color: var(--brun); }
.haut-prec { justify-self: start; }
.haut-suiv { justify-self: end; text-align: right; }
.haut-position { font-family: var(--texte); font-style: italic; font-size: 15px; letter-spacing: 0; color: var(--brun-clair); }


/* Page Crédits */
.credits-liste { padding-left: 22px; }
.credits-liste li { margin-bottom: 8px; }
.credits-liste ul { margin-top: 6px; padding-left: 20px; }
.a-preciser { font-style: italic; color: #8a3b22; background: #f6e7df; padding: 0 6px; }
.credits code { font-size: 0.9em; background: var(--beige); padding: 1px 5px; }

/* Page Ressources */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ress-nav { border-top: 1px solid var(--filet); padding-top: 12px; }
.ress-nav .petit-titre { margin-bottom: 6px; }
.ress-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 16px; line-height: 1.35; }
.ress-nav a { text-decoration: none; color: var(--gris-brun); }
.ress-nav a:hover { color: var(--encre); }
.ress-nav li.eteinte a { color: var(--filet); pointer-events: none; }
.ress-nb { font-size: 13px; color: var(--brun-clair); }
.ress-avertissement { margin: 0 0 8px; font-size: 15px; font-style: italic; color: var(--texte-doux); }
.ress-cat { padding-top: 22px; scroll-margin-top: 16px; }
.ress-cat h2 { margin: 0 0 6px; font-family: var(--titre); font-weight: 600; font-size: 34px; line-height: 1.15; border-bottom: 1px solid var(--filet); padding-bottom: 6px; }
.ress-intro { margin: 8px 0 4px; color: var(--texte-doux); }
.ress-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.ress { padding: 14px 0 12px; border-bottom: 1px solid var(--beige-fonce); }
.ress h3 { margin: 0; font-family: var(--titre); font-weight: 600; font-size: 22px; line-height: 1.25; }
.ress h3 a { color: var(--encre); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size 0.45s var(--douceur); }
.ress h3 a:hover, .ress h3 a:focus-visible { background-size: 100% 1px; }
.ress-externe { display: inline-block; margin-left: 0.25em; color: var(--brun); }
.icone-externe { width: 0.62em; height: 0.62em; vertical-align: 0.05em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.outil-signe .icone-externe { width: 34px; height: 34px; vertical-align: middle; stroke-width: 0.8; }
.ress h3 .a-preciser { margin-left: 8px; font-family: var(--texte); font-weight: 400; font-size: 14px; vertical-align: middle; }
.ress-inst { margin: 2px 0 0; font-family: var(--capitales); font-size: 15px; letter-spacing: 0.03em; color: var(--brun); }
.ress-desc { margin: 4px 0 0; font-size: 17px; }
.ress-url { margin: 2px 0 0; font-size: 14px; color: var(--brun-clair); }

/* Outil « Décrire un exemplaire » */
.dec-barre { height: 6px; background: var(--beige-fonce); border-radius: 3px; overflow: hidden; margin: 4px 0 6px; }
.dec-barre span { display: block; height: 100%; width: 0; background: var(--brun); transition: width 0.5s var(--douceur); }
.dec-nav { border-top: 1px solid var(--filet); padding-top: 10px; margin-top: 8px; }
.dec-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 15.5px; line-height: 1.3; }
.dec-nav a { text-decoration: none; color: var(--gris-brun); display: flex; gap: 8px; }
.dec-nav a:hover { color: var(--encre); }
.dec-nav a.faite { color: var(--brun-clair); text-decoration: line-through; text-decoration-thickness: 1px; }
.dec-nav-num { flex: none; min-width: 20px; font-family: var(--titre); font-weight: 600; color: var(--brun); }
.dec-nav-partie { margin-top: 8px; font-family: var(--capitales); font-size: 14px; letter-spacing: 0.08em; color: var(--brun); }
.dec-pdf { display: inline-block; margin-top: 16px; font-family: var(--capitales); letter-spacing: 0.04em; }
.dec-contenu { max-width: 820px; }
.dec-intro h2, .dec-exemples h2 { margin: 36px 0 8px; font-family: var(--titre); font-weight: 600; font-size: 32px; border-bottom: 1px solid var(--filet); padding-bottom: 6px; }
.dec-ordre li { margin-bottom: 6px; }
.dec-partie { margin: 56px 0 4px; font-family: var(--titre); font-weight: 500; font-size: 44px; line-height: 1.1; color: var(--encre); border-top: 2px solid var(--brun); padding-top: 14px; scroll-margin-top: 16px; }
.dec-partie-intro { margin: 0 0 8px; font-style: italic; color: var(--texte-doux); }
.etape { padding: 22px 0 18px; border-bottom: 1px solid var(--filet); scroll-margin-top: 16px; transition: opacity 0.3s ease; }
.etape-tete { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.etape-num { font-family: var(--titre); font-size: 44px; line-height: 0.9; color: var(--beige-fonce); min-width: 40px; transition: color 0.3s ease; }
.etape h3 { margin: 0; flex: 1 1 260px; font-family: var(--titre); font-weight: 600; font-size: 28px; line-height: 1.2; }
.etape-fait { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 12px; border: 1px solid var(--filet); border-radius: 999px; font-family: var(--capitales); font-size: 15px; letter-spacing: 0.05em; color: var(--gris-brun); cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease; }
.etape-fait input { width: 18px; height: 18px; accent-color: var(--brun); }
.etape.faite .etape-fait { background: var(--beige); border-color: var(--brun); color: var(--encre); }
.etape.faite .etape-num { color: var(--brun); }
.etape-grille { margin: 12px 0 0; display: grid; gap: 8px; }
.etape-grille div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
.etape-grille dt { font-family: var(--capitales); font-size: 15px; letter-spacing: 0.05em; color: var(--brun); padding-top: 3px; }
.etape-grille dd { margin: 0; }
.dec-piege dd { color: var(--texte-doux); }
.dec-piege dt { color: #8a3b22; }
.dec-exemple { margin: 14px 0 0; padding: 14px 18px; background: var(--beige); border-left: 3px solid var(--brun); }
.dec-exemple p { margin: 0; }
.dec-exemple p + p { margin-top: 8px; }
.dec-exemple-titre { font-family: var(--capitales); font-size: 14px; letter-spacing: 0.1em; color: var(--brun); margin-bottom: 4px !important; }
.dec-exemple code, .dec-tableau code { font-family: var(--texte); font-size: 0.95em; background: var(--papier); padding: 1px 6px; border: 1px solid var(--filet); white-space: normal; overflow-wrap: anywhere; }
.dec-calc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; }
.dec-calc .calc-puce { text-decoration: none; font-size: 15px; min-height: 34px; display: inline-flex; align-items: center; }
.etape-liens { margin-top: 12px !important; font-size: 15px; }
.etape-liens > span { color: var(--texte-doux); font-style: italic; }
.etape .rub_table { margin-top: 14px; }
.dec-tableau { overflow-x: auto; }
.dec-tableau th[scope="row"] { text-align: left; font-family: var(--capitales); font-weight: 500; font-size: 15px; color: var(--brun); white-space: nowrap; }
.dec-telecharger { margin: 48px 0 0; padding: 22px 26px; background: var(--beige); border: 1px solid var(--filet); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.dec-telecharger p { margin: 0; }
.dec-telecharger .bouton { margin-top: 0; }
@media (max-width: 640px) {
    .etape-grille div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .dec-partie { font-size: 34px; }
}

/* ==========================================================================
   Frise chronologique
   ========================================================================== */
.frise-page { padding-bottom: 96px; }
.frise-intro { max-width: 760px; margin-bottom: 40px; }
.frise-avert {
    padding: 14px 18px;
    background: var(--beige);
    border-left: 3px solid var(--brun);
    font-size: 17px;
    color: var(--texte-doux);
}
.frise-observe, .frise-zone { border-top: 2px solid var(--brun); padding-top: 16px; margin-bottom: 56px; }
.frise-observe-tete, .frise-zone-tete { margin-bottom: 18px; }
.frise-observe h2, .frise-zone h2 { margin: 0 0 6px; font-size: 36px; }
.frise-observe-tete p { margin: 0; max-width: 760px; color: var(--texte-doux); }
.frise-groupes { columns: 3 300px; column-gap: 32px; }
.frise-groupe { break-inside: avoid; margin-bottom: 18px; }
.frise-groupe summary {
    min-height: 40px; display: flex; align-items: center; gap: 6px; cursor: pointer;
    font-family: var(--capitales); font-size: 18px; letter-spacing: 0.08em; color: var(--brun);
    list-style: none; border-bottom: 1px solid var(--filet);
}
.frise-groupe summary::-webkit-details-marker { display: none; }
.frise-groupe summary::after { content: "▾"; margin-left: auto; font-size: 14px; }
.frise-groupe:not([open]) summary::after { content: "▸"; }
.frise-groupe-compte { font-family: var(--texte); letter-spacing: 0; color: var(--encre); }
.frise-groupe-note { margin: 6px 0 2px; font-size: 15px; font-style: italic; color: var(--gris-brun); }
.frise-case { display: flex; align-items: flex-start; gap: 9px; padding: 5px 0; font-size: 17px; line-height: 1.3; cursor: pointer; }
.frise-case input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brun); flex: none; }
.frise-case:hover span { color: var(--encre); text-decoration: underline; text-decoration-color: var(--filet); text-underline-offset: 3px; }
.frise-resultat {
    position: relative; z-index: 5;
    margin-top: 10px; padding: 14px 20px;
    background: var(--beige); border: 1px solid var(--filet);
    font-size: 17px;
}
.frise-resultat.actif { position: sticky; bottom: 0; background: var(--encre); color: var(--papier); border-color: var(--encre); }
.frise-resultat p { margin: 0 0 6px; }
.frise-resultat p:last-child { margin-bottom: 0; }
.frise-resultat-vide { font-style: italic; color: var(--gris-brun); }
.frise-res-titre {
    display: inline-block; min-width: 110px; margin-right: 8px;
    font-family: var(--capitales); font-size: 15px; letter-spacing: 0.1em; color: var(--beige-fonce);
}
.frise-res-ok strong { font-family: var(--titre); font-size: 24px; font-weight: 600; color: var(--papier); }
.frise-res-ans, .frise-res-note { color: var(--beige-fonce); font-size: 16px; }
.frise-res-conflit { color: #f3c9b8; }
.frise-res-conflit .frise-res-titre { color: #f3c9b8; }
.frise-res-voir a { color: var(--beige); font-size: 16px; }
.frise-res-voir a:hover { color: var(--papier); }

.frise-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 16px; color: var(--gris-brun); }
.frise-leg-periode { display: inline-block; width: 28px; height: 8px; background: var(--brun); border-radius: 4px; }
.frise-leg-date { display: inline-block; width: 10px; height: 10px; margin-left: 12px; background: var(--encre); transform: rotate(45deg); }
.frise-leg-coupure { display: inline-block; width: 0; height: 18px; margin-left: 12px; border-left: 2px dashed var(--brun-clair); }
.frise-defile { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; }
.frise { position: relative; min-width: 960px; padding: 34px 0 10px; }
.frise-axe { position: absolute; top: 0; left: 0; right: 0; height: 28px; border-bottom: 1px solid var(--brun); }
.frise-grad {
    position: absolute; bottom: 6px; transform: translateX(-50%);
    font-family: var(--titre); font-size: 16px; font-weight: 600; color: var(--brun); white-space: nowrap;
}
.frise-grad:first-child { transform: none; }
.frise-grad:last-child { transform: translateX(-100%); }
.frise-grad.coupure::after { content: "//"; position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); font-size: 13px; letter-spacing: -2px; color: var(--brun-clair); background: var(--papier); padding: 0 2px; }
.frise-filet { position: absolute; top: 28px; bottom: 0; width: 0; margin-left: -1px; border-left: 1px solid rgba(119, 107, 93, 0.16); }
.frise-filet.coupure { border-left: 2px dashed var(--brun-clair); }
.frise-bande {
    position: absolute; top: 28px; bottom: 0;
    background: rgba(119, 107, 93, 0.16);
    border-left: 2px solid var(--brun); border-right: 2px solid var(--brun);
    pointer-events: none;
    transition: left 0.5s var(--douceur), width 0.5s var(--douceur);
}
.frise-ligne { position: relative; margin-top: 10px; }
.frise-nom {
    position: sticky; left: 0; display: inline-block;
    margin: 0; padding-right: 8px;
    font-family: var(--capitales); font-size: 15px; letter-spacing: 0.1em; line-height: 1.3; color: var(--gris-brun);
}
.frise-piste { position: relative; border-bottom: 1px solid var(--filet); }
.frise-vos .frise-nom { color: var(--encre); font-weight: 600; }
.frise-vos .frise-piste { border-bottom: 1px solid var(--brun); }
.frise-el {
    position: absolute; height: 18px; padding: 0; margin: 0; border: 0; cursor: pointer;
    background: none; color: var(--texte-doux);
    display: flex; align-items: center;
    font: 14.5px/1 var(--texte);
    transition: opacity 0.4s ease;
}
.frise-el.date { width: 0; }
.frise-marque {
    display: block; width: 100%; height: 9px;
    background: var(--brun); border-radius: 5px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.frise-el.date .frise-marque { flex: none; width: 11px; height: 11px; margin-left: -5.5px; background: var(--encre); border-radius: 1px; transform: rotate(45deg); }
.frise-el.date.approx .frise-marque { background: var(--papier); box-shadow: inset 0 0 0 2px var(--encre); }
.frise-el.periode.approx .frise-marque { background: repeating-linear-gradient(90deg, var(--brun) 0 7px, var(--brun-clair) 7px 9px); }
.frise-el.periode.ouvert .frise-marque { border-radius: 5px 0 0 5px; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.frise-etiq { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); white-space: nowrap; text-shadow: 0 0 2px var(--papier), 0 0 4px var(--papier), 0 0 6px var(--papier); }
.frise-el.date .frise-etiq { left: 10px; }
.frise-el.etiq-gauche .frise-etiq { left: auto; right: calc(100% + 6px); }
.frise-el.date.etiq-gauche .frise-etiq { right: 10px; }
.frise-el:hover, .frise-el.actif { color: var(--encre); z-index: 3; }
.frise-el:hover .frise-etiq, .frise-el.actif .frise-etiq { text-decoration: underline; text-underline-offset: 3px; background: var(--papier); }
.frise-el:hover .frise-marque, .frise-el.actif .frise-marque { background: var(--encre); box-shadow: 0 0 0 2px var(--papier), 0 0 0 3px var(--encre); }
.frise-el.date:hover .frise-marque, .frise-el.date.actif .frise-marque { background: var(--brun); }
.frise-el:focus-visible { outline: none; }
.frise-el:focus-visible .frise-etiq { outline: 2px solid var(--encre); outline-offset: 2px; }
.frise-el.hors { opacity: 0.25; }
.frise-el.fabrication .frise-marque { background: var(--encre); }
.frise-el.exemplaire .frise-marque { background: repeating-linear-gradient(135deg, var(--brun) 0 4px, var(--brun-clair) 4px 7px); }
.frise-el.conflit { color: #8a3b22; }
.frise-el.conflit .frise-marque { background: #8a3b22; }
.frise-vos .frise-el { color: var(--encre); }
.frise-bande-reliure {
    position: absolute; top: 0; bottom: 0;
    background: repeating-linear-gradient(135deg, rgba(119, 107, 93, 0.22) 0 4px, transparent 4px 8px);
    border-left: 1px solid var(--brun); border-right: 1px solid var(--brun);
    pointer-events: none;
}
.frise-bulle {
    position: absolute; z-index: 6; width: 300px; max-width: calc(100% - 8px);
    padding: 14px 16px;
    background: var(--papier); border: 1px solid var(--brun);
    box-shadow: 0 10px 28px -12px rgba(43, 38, 32, 0.45);
    font-size: 16px; line-height: 1.4;
}
.frise-bulle p { margin: 0 0 6px; }
.frise-bulle-dates { font-size: 15px; font-style: italic; color: var(--brun); }
.frise-bulle-titre { font-family: var(--titre); font-size: 21px; font-weight: 600; line-height: 1.15; color: var(--encre); }
.frise-bulle-texte { color: var(--texte-doux); }
.frise-bulle-lien { font-size: 15px; }
.frise-glisser { display: none; margin: 4px 0 0; text-align: center; font-size: 15px; font-style: italic; color: var(--gris-brun); }

/* Cahier XI : périodes et frise des grandes étapes */
.periode-dates { margin: -6px 0 18px; font-family: var(--titre); font-size: 22px; font-style: italic; color: var(--brun); }
.periode-liens { margin-top: 18px !important; }
.periode-liens > span { font-size: 16px; font-style: italic; color: var(--gris-brun); align-self: center; }
.frise-etapes { border-top: 0; padding-top: 0; margin: 24px 0 8px; }
.frise-etapes .frise { min-width: 880px; }
.frise-etapes .frise-legende { margin-bottom: 14px; }

/* ==========================================================================
   Écrans étroits
   ========================================================================== */
@media (max-width: 900px) {
    .rub_duo { grid-template-columns: minmax(0, 1fr); }
    .sommaire-cahier { position: static; max-width: none; }
    .calc { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .calc-resultat { position: static; scroll-margin-top: 16px; }
    .index { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .ress-nav { display: none; }
    .dec-nav { display: none; }
    .avec-barre .haut-de-page { bottom: 74px; }
    .retour-lecture { left: 16px; bottom: 16px; padding: 10px 16px 10px 14px; }
    .retour-sous { display: none; }
    .haut-position { display: none; }
    .cahiers-voisins { grid-template-columns: 1fr 1fr; }
    .suite { grid-template-columns: 1fr 1fr; }
    .suite a.suite-sommaire { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
    .cahiers-voisins { font-size: 15px; }
    .rub_figure.pliage { grid-template-columns: minmax(0, 1fr); }
    .sommaire-cahier li::before { display: none; }
    .visionneuse-cadre { padding: 64px 12px 84px; }
    .visionneuse-image { padding: 10px; }
    .visionneuse-image svg { width: 92vw; }
    .visionneuse-prec, .visionneuse-suiv { top: auto; bottom: 16px; transform: none; }
    .haut-de-page { right: 16px; bottom: 16px; }
    .index-outils {
        position: sticky; top: 0; z-index: 4;
        max-height: none; overflow: visible;
        margin: 0 -24px; padding: 12px 24px 8px;
        background: var(--papier);
        border-top: 0; border-bottom: 1px solid var(--filet);
    }
    .index-recherche .petit-titre { display: none; }
    .index-compte { margin: 6px 0 8px; }
    .index-alphabet { display: flex; overflow-x: auto; gap: 0; margin-bottom: 6px; scrollbar-width: none; }
    .index-alphabet a, .index-alphabet span { flex: none; min-width: 34px; padding: 6px 0; }
    .index-filtres > div { max-height: 45vh; overflow-y: auto; }
    .lettre h2 { font-size: 56px; scroll-margin-top: 190px; }
    .lettre, .terme { scroll-margin-top: 190px; }
    .calc-mini {
        display: flex; align-items: baseline; gap: 12px;
        position: sticky; bottom: 0; z-index: 5;
        margin: 0 -24px; padding: 12px 24px;
        background: var(--encre); color: var(--papier);
        font-family: var(--titre); font-size: 21px; line-height: 1.3;
        text-decoration: none; overflow-wrap: anywhere;
    }
    .calc-mini:hover { color: var(--papier); }
    .calc-mini .calc-vide { color: var(--beige-fonce); font-size: 16px; }
    .frise-groupes { columns: auto; }
    .frise-glisser { display: block; }
    .frise-resultat { margin: 10px -24px 0; border-left: 0; border-right: 0; }
    .calc-mini-label { flex: none; font-family: var(--capitales); font-size: 14px; letter-spacing: 0.08em; color: var(--beige-fonce); }
}
@media (max-width: 640px) {
    body { font-size: 18px; }
    .nav-site { gap: 4px 18px; font-size: 17px; }
    .ouverture { padding-top: 40px; }
    .ouverture-num { font-size: 110px; }
    .ouverture h1 { font-size: 54px; }
    .partie h2 { font-size: 33px; }
    .partie h3 { font-size: 25px; }
    .accueil-une { padding-top: 48px; }
    .accueil-une h1 { font-size: 48px; }
    .accueil-logo img { width: 240px; }
    .toc-points { display: none; }
    .toc-desc { flex-basis: 100%; padding-left: 64px; }
    .rub_figure { padding: 14px; }
}

/* Respect du réglage « réduire les animations » pour les futures animations */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Remarque en introduction */
.note { font-size: 16px; font-style: italic; color: var(--texte-doux); }