@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Petit+Formal+Script&family=Creepster&family=Grenze+Gotisch&family=Bowlby+One+SC&family=Faster+One&family=Pacifico&family=Pinyon+Script&family=Limelight&family=Righteous&family=Spectral+SC&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Exo+2:ital,wght@0,100..900;1,100..900&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Russo+One&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Righteous&display=swap');



@font-face {
    font-family: "Diploma";
    src: url("/assets/fonts/Diploma/Diploma.ttf?v=1791200250") format("truetype");
}

/* iA Writer Duo */

@font-face {
    font-family: "iA Writer Duo";
    src: url("/assets/fonts/ia-writer-duo-latin/ia-writer-duo-latin-400-normal.woff2?v=1791200251") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Duo";
    src: url("/assets/fonts/ia-writer-duo-latin/ia-writer-duo-latin-400-italic.woff2?v=1791200250") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Duo";
    src: url("/assets/fonts/ia-writer-duo-latin/ia-writer-duo-latin-700-normal.woff2?v=1791200252") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Duo";
    src: url("/assets/fonts/ia-writer-duo-latin/ia-writer-duo-latin-700-italic.woff2?v=1791200251") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* iA Writer Mono */

@font-face {
    font-family: "iA Writer Mono";
    src: url("/assets/fonts/ia-writer-mono-latin/ia-writer-mono-latin-400-normal.woff2?v=1791200253") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Mono";
    src: url("/assets/fonts/ia-writer-mono-latin/ia-writer-mono-latin-400-italic.woff2?v=1791200252") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Mono";
    src: url("/assets/fonts/ia-writer-mono-latin/ia-writer-mono-latin-700-normal.woff2?v=1791200253") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Mono";
    src: url("/assets/fonts/ia-writer-mono-latin/ia-writer-mono-latin-700-italic.woff2?v=1791200253") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* iA Writer Quattro */

@font-face {
    font-family: "iA Writer Quattro";
    src: url("/assets/fonts/ia-writer-quattro-latin/ia-writer-quattro-latin-400-normal.woff2?v=1791200254") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Quattro";
    src: url("/assets/fonts/ia-writer-quattro-latin/ia-writer-quattro-latin-400-italic.woff2?v=1791200254") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Quattro";
    src: url("/assets/fonts/ia-writer-quattro-latin/ia-writer-quattro-latin-700-normal.woff2?v=1791200255") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Quattro";
    src: url("/assets/fonts/ia-writer-quattro-latin/ia-writer-quattro-latin-700-italic.woff2?v=1791200255") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* IBM Plex Sans */

@font-face {
    font-family: "IBM Plex Sans";
    src: url("/assets/fonts/ibm-plex-sans-latin/ibm-plex-sans-latin-400-normal.woff2?v=1791200255") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("/assets/fonts/ibm-plex-sans-latin/ibm-plex-sans-latin-600-normal.woff2?v=1791200256") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("/assets/fonts/ibm-plex-sans-latin/ibm-plex-sans-latin-700-normal.woff2?v=1791200256") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Newsreader — graisses variables */

@font-face {
    font-family: "Newsreader";
    src: url("/assets/fonts/newsreader-latin-standard/newsreader-latin-standard-normal.woff2?v=1791200256") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Newsreader";
    src: url("/assets/fonts/newsreader-latin-standard/newsreader-latin-standard-italic.woff2?v=1791200256") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

/* Testa — lecture blanche, noir et rouge ; navigation, index et adaptations.
   Les modules littéraires restent dans leur couche ; le CSS édité dans les
   articles reste prioritaire, comme avant cette refonte. */
@layer reset,
layout,
navigation,
content,
index,
modules,
utilities,
responsive,
lecture;

@layer reset {
    :root {
        --main-color: #101010;
        --main-color-clair: #fff;
        --faux-noir: #101010;
        --secondary-color: #f01818;
        --paper: #fff;
        --primary-color: var(--main-color);
        --muted: #595959;
        --line: #b8b8b8;
        --serif: "Newsreader", Georgia, serif;
        --sans-serif: "iA Writer Quattro", sans-serif;
        --mono: "iA Writer Mono", monospace;
        --titre: 2rem;
        --article: 1.4rem;
        --colonne: 1rem;
        --reading-width: 40.625rem;
        --gutter: clamp(1.125rem, 4vw, 3.5rem);
        font-size: 16px;
        color: var(--main-color);
        background: var(--paper);
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        scrollbar-color: var(--muted) var(--paper);
    }

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

    body {
        margin: 0;
        font-family: var(--serif);
    }

    a {
        color: inherit;
        text-decoration: none;
        text-underline-offset: .2em;
    }

    a:hover {
        color: var(--secondary-color);
    }

    :focus-visible {
        outline: 2px solid var(--secondary-color);
        outline-offset: 4px;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
        color: inherit;
    }

    button,
    summary {
        cursor: pointer;
    }

    button {
        border-radius: 0;
    }

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

    img,
    video {
        height: auto;
    }

    img {
        vertical-align: middle;
    }

    img.emoji {
        width: 1em;
        height: 1em;
        vertical-align: -.15em;
    }

    audio {
        width: 100%;
        max-width: 100%;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    th,
    td {
        vertical-align: top;
    }

    p {
        margin: 0;
    }

    ul,
    ol {
        margin-block: 0;
        padding-inline-start: 1.8em;
    }

    small {
        font-size: .8em;
    }

    sub,
    sup {
        font-size: .75em;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sup {
        top: -.5em;
    }

    sub {
        bottom: -.25em;
    }

    details {
        margin-block: 0;
    }

    fieldset {
        min-width: 0;
    }
}

@layer layout {
    #cadre-site {
        max-width: 100rem;
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    #lecture,
    .site-contenu {
        min-width: 0;
    }

    .site-entete {
        display: flex;
        gap: 2rem;
        align-items: center;
        padding: 1rem 0;
        min-height: 5rem;
        margin-top: 0;
    }

    .site-rubriques {
        display: flex;
        flex-wrap: wrap;
        gap: 1.2rem;
        font: 400 .8125rem/1.5 var(--sans-serif);
        padding: 1rem 0 1.5rem;
    }

    #bouton-menu {
        list-style: none;
        width: fit-content;
        font: 400 .75rem/1.4 var(--sans-serif);
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: .8rem;
    }

    #bouton-menu::-webkit-details-marker {
        display: none;
    }

    details#navigation-menu[open] summary#bouton-menu {
        display: none;
    }

    details#navigation-menu:not([open]) {
        min-width: 5rem;
        min-height: 44px;

        >#bouton-menu {
            position: fixed;
            top: 0;
            left: var(--gutter, 1rem);
            z-index: 30;
            min-height: 44px;
            padding: .6rem .75rem;
            box-sizing: border-box;
            background: var(--paper, #fff);
            color: var(--main-color, #111);
        }
    }

    #navigation-menu[open] #bouton-menu {
        color: var(--secondary-color);
    }

    .article {
        position: relative;
        max-width: 61.25rem;
        margin-inline: auto;
        padding: 4rem 0 4rem;
    }

    .article-entete {
        margin: 0 6% 4.625rem 15%;
    }

    .article-grille {
        display: block;
        min-width: 0;
    }

    .article-grille>.article-contenu {
        max-width: var(--reading-width);
        margin-inline: auto;
        min-width: 0;
    }

    .vue-article .lecture-barre {
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .5rem 1.5rem;
        width: 100%;
        box-sizing: border-box;
        margin: 0 0 3rem;
        padding: .6rem 1rem;
        background: var(--paper, #fff);
        color: var(--main-color, #111);
        border-bottom: 1px solid var(--line, #ddd);
        font: 400 .75rem/1.5 var(--sans-serif);

        body:has(#navigation-menu: not([open])) & {
            padding-inline-start: 6rem;
        }
    }

    .lecture-barre-titre {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .lecture-barre-titre[hidden] {
        display: none;
    }

    .vue-article .lecture-barre .lecture-reperes {
        position: static;
        flex: 1 1 auto;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        font: inherit;
    }

    .lecture-barre .lecture-reperes ol {
        margin-block: 0;
    }

    @media screen and (max-width: 700px) {
        .vue-article .lecture-barre {
            margin-inline: 0;
        }

        .lecture-barre-titre {
            flex-basis: 100%;
        }
    }

    .vue-article .lecture-reperes {
        margin-inline: 0;
    }

    .lecture-reperes summary {
        color: var(--main-color);
        width: fit-content;
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 1rem;
        list-style: none;
    }

    .lecture-reperes ol {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        padding: 0;
        list-style: none;
    }

    .lecture-reperes li+li {
        margin-top: 0;
    }

    .lecture-reperes a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        overflow-wrap: anywhere;
    }

    .lecture-reperes a[aria-current] {
        color: var(--secondary-color);
        text-decoration: underline;
    }

    .lecture-position {
        color: var(--secondary-color);
        font-size: .6875rem;
    }

    .lecture-commandes {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        font: 400 .85rem/1.5 var(--sans-serif);
        margin: 0 0 2rem;
    }

    .lecture-commandes button {
        padding: .4rem 0;
        min-height: 44px;
        border: 0;
        background: transparent;
    }

    .article-modifier {
        position: absolute;
        right: 0;
        top: 1.5rem;
        color: var(--muted);
        font: .75rem var(--sans-serif);
    }

    .site-pied {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1rem;
        border-top: 1px solid var(--main-color);
        padding: 1.5rem 0 2rem;
        font: 400 .85rem/1.5 var(--sans-serif);
        color: var(--muted);
    }

    #retour-haut {
        display: none;
        position: fixed;
        z-index: 15;
        right: 1rem;
        bottom: 1rem;
        padding: .5rem;
        background: var(--paper);
        color: var(--muted);
        font: 1.8rem/1 var(--sans-serif);
    }
}

@layer navigation {
    #navigation-laterale {
        position: fixed;
        inset: 0 auto 0 max(var(--gutter), calc((100vw - 120rem) / 2 + var(--gutter)));
        z-index: 20;
        width: 25rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1rem .75rem 2rem;
        background: var(--paper);
        color: var(--main-color);
        border-right: 1px solid var(--line);
        scrollbar-width: thin;
    }

    .navigation-fermer {
        position: absolute;
        right: 1.25rem;
        top: 1rem;
        padding: .4rem .7rem;
        border: 0;
        background: transparent;
        font: 1.75rem/1 var(--sans-serif);
    }

    #identite-site {
        padding: 1.2rem 3rem 2rem 0;
        font: 400 1.35rem/1.3 var(--sans-serif);
    }

    #navigation-laterale .navigation-bloc {
        padding: 1.3rem 0;
        border-top: 1px solid var(--line);
        font-family: var(--sans-serif);
    }

    #navigation-laterale .navigation-titre {
        font: 400 1rem/1.5 var(--sans-serif);
        margin: 0 0 1rem;
        color: var(--secondary-color);
        display: inline;
        padding-right: .75rem;
    }

    #navigation-laterale .tous {
        font: 400 .85rem/1.5 var(--sans-serif);
        margin: 0 0 1rem;
        color: var(--muted);
        display: inline;
    }

    aside ul li a {
        font: 400 .85rem/1.5 var(--sans-serif);
        ;
    }

    #navigation-laterale ul {
        list-style: none;
        padding: 0;
    }

    #navigation-laterale li {
        padding: .35rem 0;
        line-height: 1.4;
    }

    #navigation-laterale li ul {
        padding: .5rem 0 .5rem 1rem;
    }

    #navigation-laterale small {
        font: .6875rem var(--sans-serif);
        color: var(--muted);
    }

    #navigation-laterale .sous-titre {
        display: block;
        font: 400 .8125rem/1.45 var(--serif);
        color: var(--muted);
        margin: .25rem 0 .5rem;
        font-style: italic;
    }

    #navigation-footer {
        color: var(--muted);
        font: 400 .75rem / 1.5 var(--sans-serif);
        text-align: right;
        margin-top: 3rem;
    }

    .navigation-sous-menu {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .menu_lien_descr {
        display: inline;
        font-size: .8125rem;
        color: var(--muted);
    }

    .external_link>a::after {
        content: " ↗";
        color: var(--secondary-color);
    }

    #index_lien {
        margin-left: .5rem;
    }

    #recherche-formulaire .recherche-champ {
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--main-color);
        padding: .6rem 0;
        background: transparent;
        font-family: var(--sans-serif);
    }

    .search-kinds {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: .75rem;
        font-size: .875rem;
        font-family: var(--sans-serif);
    }

    .search-kinds input {
        accent-color: var(--secondary-color);
    }

    .recherche-envoyer {
        margin-top: .75rem;
        background: transparent;
        border: 0;
        border-bottom: 1px solid currentColor;
        padding: .3rem 0;
        font: .75rem var(--sans-serif);
    }

    #couves_menu {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding-block: 1rem;
    }

    #couves_menu img {
        width: 85px;
        height: 115px;
        object-fit: contain;
    }
}

@layer content {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--sans-serif);
        font-weight: 400;
        color: var(--main-color);
    }

    .article-contenu p {
        font-family: var(--serif);
    }

    .article-reperage {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: flex-start;
        font: 400 .85rem/1.5 var(--sans-serif);
        color: var(--main-color);
    }

    .article-type {
        color: var(--main-color);
    }

    .article-serie {
        display: inline-block;
        margin-left: 1.8rem;
        vertical-align: top;
        font: 400 1.4rem/1.4 var(--sans-serif);
        letter-spacing: 0;
        padding-top: 1.2rem;
        color: var(--secondary-color);
    }

    .article-titre {
        font: 400 clamp(1.6rem, 5vw, 4rem)/1.14 var(--sans-serif);
        color: var(--main-color);
        letter-spacing: -.065em;
        text-align: left;
        margin: 1.6rem 0 0;
        overflow-wrap: break-word;
    }

    .article-titre-serie {
        font-size: clamp(4.75rem, 12vw, 8.875rem);
        line-height: 1.14;
        letter-spacing: -.085em;
    }

    .article-titre-serie span {
        display: inline-block;
    }

    .article-contenu,
    .article-resume {
        font: 400 var(--article)/1.8 var(--serif);
        color: var(--main-color);
        text-align: justify;
        hyphens: auto;
        overflow-wrap: break-word;
    }

    .article-contenu a {
        color: var(--secondary-color);
    }

    .article-contenu a:hover {
        text-decoration: underline;
    }

    .article-contenu> :where(p, ul, ol, table, blockquote, figure, audio, video, iframe, div)+:where(p, ul, ol, table, blockquote, figure, audio, video, iframe, div) {
        margin-top: 1.4em;
    }

    .article-contenu :where(h2, h3) {
        margin: 4rem 0 1.75rem;
        padding-top: 0;
        text-align: left;
        scroll-margin-top: 1.5rem;
    }

    .article-contenu h2 {
        font-size: 1.8rem;
        line-height: 1.2;
    }

    .article-contenu h3 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .article-contenu h4 {
        margin-top: 3rem;
        font-size: 1.3rem;
    }

    .article-contenu li+li {
        margin-top: .25em;
    }

    .article-contenu table {
        width: 100%;
        font-size: .9em;
    }

    .article-contenu th,
    .article-contenu td {
        padding: .5rem;
        border-bottom: 1px solid var(--line);
    }

    .article-contenu pre {
        max-width: 100%;
        overflow: auto;
    }

    .article-contenu blockquote {
        margin: 2rem 0;
        padding-left: 1.5rem;
        border-left: 1px solid var(--secondary-color);
        font-size: .95em;
        text-align: left;
    }

    .article-contenu p.exergue {
        font: italic .95rem/1.65 var(--serif);
        color: var(--main-color);
        text-align: left;
        margin: 0 0 3rem 30%;
    }

    p.reference_exergue {
        text-align: right;
        font: .85rem/1.5 var(--sans-serif);
        margin-bottom: 2rem;
    }

    .type-entendu .article-contenu {
        font-style: italic;
        text-align: left;
    }

    .type-citation .article-contenu {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 10rem;
        gap: 2rem;
        text-align: left;
    }

    .citation-texte {
        min-width: 0;
        font-size: 1.4rem;
        line-height: 1.4;
    }

    .citation-texte>p+p {
        margin-top: 1em;
    }

    .ref {
        font: 400 .75rem/1.6 var(--sans-serif);
        text-align: left;
        border-top: 1px solid var(--secondary-color);
        padding-top: .8rem;
    }

    .reference-element {
        display: block;
        margin-bottom: .7rem;
    }

    .ref a {
        color: var(--muted);
    }

    .ref .reference-auteur {
        color: var(--secondary-color);
        font: 400 1.0625rem/1.4 var(--sans-serif);
    }

    .ref .reference-titre {
        color: var(--main-color);
        font: 400 .95rem/1.5 var(--sans-serif);
    }

    .ref .reference-pages {
        color: var(--main-color);
    }

    .oeuvre_ital {
        font-style: italic;
    }

    .type-citation .article-grille {
        display: block;
    }

    .type-citation .article-entete {
        margin-bottom: 3rem;
    }

    .image-gauche {
        float: left;
        margin: 1rem 1.5rem 1rem 0;
    }

    .image-droite {
        float: right;
        margin: 1rem 0 1rem 1.5rem;
    }

    .image-centree,
    .image-portrait-centree {
        display: block;
        max-width: 100%;
        margin: 3rem auto;
    }

    .image-sans-alignement {
        margin-block: 1.5rem;
    }

    .image-legendee {
        max-width: 100%;
        margin: 3rem 0;
    }

    .image-legendee img {
        display: block;
    }

    .image-legende,
    .legendeimg {
        margin-top: .75rem;
        color: var(--muted);
        font: .85rem/1.5 var(--sans-serif);
        text-align: left;
    }

    .footnotes {
        margin-top: 4rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--line);
        font: .875rem/1.55 var(--sans-serif);
        text-align: left;
    }

    .footnotes li+li {
        margin-top: 1rem;
    }

    .footnote a {
        padding: .2rem;
        color: var(--secondary-color);
    }

    .note-locale {
        background: var(--paper);
        color: var(--main-color);
        border-top: 1px solid var(--secondary-color);
        border-bottom: 1px solid var(--line);
        padding: 1rem 0;
        margin: 1rem 0 2rem;
        font: 400 .875rem/1.55 var(--sans-serif);
        text-align: left;
    }

    .note-locale button {
        float: right;
        margin-left: .75rem;
        padding: .3rem;
        border: 0;
        background: transparent;
    }

    .depliant {
        color: var(--secondary-color);
        cursor: pointer;
    }

    .depliant-contenu {
        margin-top: 1rem;
    }

    .article-contenu details {
        margin-block: 2rem;
        border-block: 1px solid var(--line);
    }

    .article-contenu summary {
        font: .8125rem/1.5 var(--sans-serif);
        padding: .9rem 0;
        text-align: left;
    }

    .article-suite {
        display: block;
        width: fit-content;
        margin: 2rem 0 0 auto;
        border-bottom: 1px solid currentColor;
        font: .8125rem/1.5 var(--sans-serif);
    }

    .pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        margin: 3rem 1rem;
        font: .875rem var(--sans-serif);
    }

    a[aria-current=page] {
        color: var(--secondary-color);
        text-decoration: underline;
    }

    .archives-entete {
        padding: 4rem 0 3rem;
        font-family: var(--sans-serif);
    }

    .archives-entete h1 {
        font-size: clamp(2.6rem, 6vw, 4.5rem);
        letter-spacing: -.06em;
        line-height: 1.14;
        margin: 1rem 0;
    }

    .archives-entete>span {
        font: 400 .85rem/1.5 var(--sans-serif);
        color: var(--muted);
    }












    .archives .article {
        border-top: 1px solid var(--line);
    }

    .aucun-resultat,
    .resultat {
        margin: 3rem 0;
    }
}

@layer index {
    #bandeau_index {
        padding: 3rem 0 2rem;
        border-bottom: 1px solid var(--line);
        font: 400 1rem/1.5 var(--sans-serif);
    }

    #bandeau_index>a {
        color: var(--secondary-color);
        font-size: 2rem;
    }

    #bandeau_index form {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-top: 1.5rem;
    }

    #bandeau_index input,
    #RechercheAuteurs {
        border: 0;
        border-bottom: 1px solid var(--main-color);
        padding: .6rem 0;
        background: transparent;
        min-width: 0;
        max-width: 100%;
    }

    #bandeau_index button {
        border: 0;
        background: transparent;
        border-bottom: 1px solid currentColor;
        padding: .5rem 0;
        font: .75rem var(--sans-serif);
    }

    .citation-index {
        display: grid;
        grid-template-columns: 14rem minmax(0, 1fr);
        gap: 3rem;
        padding: 3rem 0;
    }

    .citation-index>div {
        min-width: 0;
    }

    #RechercheAuteurs {
        width: 100%;
        font-size: 1rem;
    }

    #entrees_index_auteurs {
        list-style: none;
        padding: 1rem 0 0;
        margin: 0;
    }

    .index_entree {
        padding: .45rem 0;
        font: .875rem/1.4 var(--sans-serif);
    }

    .index_entree.active {
        color: var(--secondary-color);
    }

    .citation-index .article {
        padding: 1.5rem 0 4rem;
        border-top: 1px solid var(--line);
    }

    .citation-index .article-entete {
        margin: 0 0 3rem;
    }

    .citation-index .article-grille {
        display: block;
    }

    .citation-index .type-citation .article-contenu {
        grid-template-columns: minmax(0, 1fr) 9rem;
        gap: 1.5rem;
    }

    .citation-index .citation-texte {
        font-size: 1.25rem;
    }
}

@layer responsive {
    @media(max-width: 1100px) {
        .article-grille {
            display: block;
        }

        .article-entete {
            margin-inline: 12% 5%;
        }

        .type-citation .article-grille {
            display: block;
        }

        .citation-index {
            grid-template-columns: 11rem minmax(0, 1fr);
            gap: 2rem;
        }

        .citation-index .type-citation .article-contenu {
            grid-template-columns: 1fr;
        }
    }

    @media(max-width:700px) {
        :root {
            --article: 1rem;
            --gutter: 1.125rem;
        }

        .site-entete {
            flex-wrap: wrap;
            gap: 1.2rem;
            padding-block: .7rem;
        }

        .site-rubriques {
            gap: 1.2rem;
        }

        .article {
            padding: 2.5rem 0 4rem;
        }

        .article-entete {
            margin: 0 0 2.5rem;
        }

        .article-grille,
        .type-citation .article-grille {
            display: block;
        }

        .lecture-reperes {
            position: static;
            padding: 0;
            margin-top: 1.7rem;
        }

        .lecture-reperes ol {
            display: flex;
            flex-wrap: wrap;
            gap: 0;
        }

        .lecture-reperes li+li {
            margin-top: 0;
        }

        .lecture-position {
            font-size: .6875rem;
        }

        .article-titre {
            font-size: clamp(2.4rem, 10vw, 4rem);
        }

        .article-titre-serie {
            font-size: clamp(4.25rem, 16vw, 7rem);
        }

        .article-contenu table {
            display: block;
            overflow-x: auto;
        }

        .article-contenu p.exergue {
            margin-left: 15%;
        }

        .article-contenu {
            text-align: left;
        }

        .type-citation .article-contenu {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .citation-texte {
            font-size: 1.45rem;
        }

        .ref {
            max-width: 100%;
        }

        .image-gauche,
        .image-droite {
            max-width: 45%;
            margin: 1rem;
        }

        .image-gauche {
            margin-left: 0;
        }

        .image-droite {
            margin-right: 0;
        }




        .citation-index {
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        #entrees_index_auteurs {
            max-height: 14rem;
            overflow-y: auto;
        }

        .citation-index .type-citation .article-contenu {
            display: flex;
        }
    }

    @media(pointer:coarse) {

        #bouton-menu,
        .site-rubriques a,
        .lecture-commandes button,
        .lecture-reperes a {
            min-height: 44px;
            display: inline-flex;
            align-items: center;
        }
    }

    @media print {
        :root {
            --paper: #fff;
            --main-color: #000;
        }

        #navigation-menu,
        .site-rubriques,
        #retour-haut,
        .lecture-reperes,
        .lecture-commandes,
        .article-modifier,
        .site-pied,
        .note-locale {
            display: none;
        }

        #cadre-site {
            padding: 0;
        }

        .article {
            padding: 2rem 0;
        }

        .article-entete {
            margin-inline: 0;
        }

        .article-grille {
            display: block;
        }

        .article-contenu {
            font-size: 11pt;
            line-height: 1.6;
        }

        h1,
        h2,
        h3 {
            break-after: avoid;
        }

        figure,
        img,
        blockquote {
            break-inside: avoid;
        }
    }
}

@layer modules {
    div#pages-roses {
        width: 75%;
        margin: 0 auto;
        padding: 1rem 2rem;
        border-top: 1px solid var(--main-color);
        background: #fff0f0;
    }

    div#pages-roses li {
        list-style-type: none;
        margin: 1rem 0 1rem 0;
    }

    div#pages-roses li::before {
        content: "– ";
    }

    div.archives-rubrique {
        width: stretch;
        float: right;
        position: absolute;
        color: var(--main-color);
        top: 0;
        right: 0;
        font-size: 75%;
        margin: 0px 10px 5px 30px;
        font-family: var(--sans-serif);
        text-transform: uppercase;
        line-height: 1.25;
        display: none;
    }

    h1#geistgeist {
        font-family: monospace;
        font-size: 12px;
        color: black;
        opacity: 0.75;
        font-weight: 300;
        text-align: center;
    }

    h3.se_faire_des_tableaux {
        font-size: 1.25rem;
        font-family: var(--sans-serif);
        padding-left: 2rem;
        margin-top: 3rem;
        text-decoration: none;
    }

    iframe#Gonfle {
        border: none;
    }

    l-g,
    div.langue-originale {
        font-size: 80%;
        line-height: 121%;
        background: #f3f3f3;
        padding: 0.5rem 1rem;
        display: block;
        font-family: var(--sans-serif);
        margin-top: 2rem;
    }

    ol .dquo {
        padding-left: 0.5rem;
    }

    p.tiret:before {
        content: "- ";
        margin-left: -1rem;
        padding-right: 0.2rem;
    }

    span.h7 {
        background: var(--main-color);
        color: #fff;
        padding: 0 6px 0 2px;
        margin-right: 5px;
        line-height: 1.25;
    }

    span.pub2:before {
        content: "anywehre dans les plis du game";
        font-family: "Pacifico", cursive;
        font-size: 2.5rem;
        text-shadow: #ff4cb9 3px 3px 4px;
        display: block;
        line-height: 0.5;
        font-style: oblique;
        margin-left: 6rem;
        color: #2d0042;
        position: absolute;
    }

    span.pub3:before {
        content: "ton style, ton kink, ton pas vraiment";
        display: block;
        line-height: 1;
        font-size: 2rem;
        text-shadow: #2d0042 2px 1px 1px;
        transform: skew(-8deg, 0deg);
        position: absolute;
        font-variant: all-petite-caps;
        color: #ff4cb9;
        font-style: oblique;
        font-family: "Bowlby One SC", cursive;
        margin-left: 4rem;
    }

    span.pub:before {
        content: "jouir avec son temps";
        position: absolute;
        --interval: 1s;
        will-change: filter, color;
        filter: saturate(70%);
        animation: flicker steps(100) var(--interval) 1s infinite;
        color: #fff;
        font-variant: all-petite-caps;
        font-size: 3.75rem;
        text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 20px #f800ff, 0 0 10px #f800ff, 0 0 25px #f800ff, 0 0 50px #f800ff, 0 0 15px #f800ff;
        font-family: "Faster One", cursive;
        display: block;
        transform: rotate(2deg);
        margin-left: 3rem;
    }

    span.tab {
        width: 2rem;
        display: inline-block;
    }

    sup.footnote {
        vertical-align: 90%;
        font-size: 60%;
        line-height: 100%;
        padding-left: 1px;
    }

    svg#club {
        position: relative;
        width: 100%;
        height: 420px;
        background-image: var(--media-club-background, url("https://testanonpertinente.net/wp-content/uploads/2021/03/club01_retouche.jpg"));
        background-repeat: no-repeat;
        background-size: 100%;
    }

    text#leclub {
        background: #ffffff;
        background-size: 0.2em 100%;
        font-family: var(--sans-serif);
        font-weight: 800;
        text-transform: uppercase;
        margin: 0;
    }

    textarea.genres,
    input.genres {
        background-color: inherit;
        border: none;
        font-size: inherit;
        outline: none;
        resize: none;
        padding: 0;
        color: inherit;
        max-width: 45%;
    }

    tr.se_faire_des_tableaux {
        padding: 0rem 0.5rem;
        letter-spacing: -0.075rem;
        vertical-align: top;
        font-family: var(--sans-serif);
        font-weight: 300;
        font-size: 1rem;
        line-height: 1.5rem;
    }

    ul.club_liste {
        list-style-type: none;
    }

    #anthropopathes p {
        display: block;
        margin: 4rem auto;
        text-align: justify;
    }

    #anthropopathes p::first-letter {
        display: inline-block;
        color: #f32121;
        font-family: "Righteous", cursive;
        hyphens: none;
        float: left;
        font-size: 5em;
        margin-right: 0.25rem;
        line-height: 1;
        padding: 0 1.5rem 0 0.5rem;
        text-transform: uppercase;
    }

    #anthropopathes span[style*="none"]+span.tab,
    #anthropopathes span[style*="none"]+span.tab+span.tab,
    #anthropopathes span[style*="none"]+span.tab+span.tab+span.tab,
    #anthropopathes span[style*="none"]+span.tab+span.tab+span.tab+span.tab,
    #anthropopathes span[style*="none"]+span.tab+span.tab+span.tab+span.tab+span.tab,
    #anthropopathes span[style*="none"]+span.tab+span.tab+span.tab+span.tab+span.tab+span.tab {
        display: none;
    }

    #cajoue_a {
        stroke-dasharray: 1190 1192;
        stroke-dashoffset: 1191;
        animation: cajoue_draw 184ms linear 169ms forwards, cajoue_fade 1ms linear 2700ms forwards;
    }

    #cajoue_a_contour {
        stroke-dasharray: 2292 2294;
        stroke-dashoffset: 2293;
        animation: cajoue_draw 355ms linear 1340ms forwards, cajoue_contourfade 1ms linear 2700ms forwards;
    }

    #cajoue_c {
        stroke-dasharray: 1090 1092;
        stroke-dashoffset: 1091;
        animation: cajoue_draw 169ms linear 0ms forwards, cajoue_fade 1ms linear 2700ms forwards;
    }

    #cajoue_c_contour {
        stroke-dasharray: 2270 2272;
        stroke-dashoffset: 2271;
        animation: cajoue_draw 352ms linear 988ms forwards, cajoue_contourfade 1ms linear 2700ms forwards;
    }

    #cajoue_e {
        stroke-dasharray: 952 954;
        stroke-dashoffset: 953;
        animation: cajoue_draw 147ms linear 840ms forwards, cajoue_fade 1ms linear 2700ms forwards;
    }

    #cajoue_e_contour {
        stroke-dasharray: 1961 1963;
        stroke-dashoffset: 1962;
        animation: cajoue_draw 304ms linear 2695ms forwards, cajoue_contourfade 1ms linear 2700ms forwards;
    }

    #cajoue_j {
        stroke-dasharray: 762 764;
        stroke-dashoffset: 763;
        animation: cajoue_draw 118ms linear 354ms forwards, cajoue_fade 1ms linear 2700ms forwards;
    }

    #cajoue_j_contour {
        stroke-dasharray: 1603 1605;
        stroke-dashoffset: 1604;
        animation: cajoue_draw 248ms linear 1696ms forwards, cajoue_contourfade 1ms linear 2700ms forwards;
    }

    #cajoue_o {
        stroke-dasharray: 1129 1131;
        stroke-dashoffset: 1130;
        animation: cajoue_draw 175ms linear 472ms forwards, cajoue_fade 1ms linear 2700ms forwards;
    }

    #cajoue_o_contour {
        stroke-dasharray: 2262 2264;
        stroke-dashoffset: 2263;
        animation: cajoue_draw 351ms linear 1945ms forwards, cajoue_contourfade 1ms linear 2700ms forwards;
    }

    #cajoue_svg {
        width: 100%;
        animation: bounceIn .5s forwards 2800ms;
    }

    #cajoue_u {
        stroke-dasharray: 1238 1240;
        stroke-dashoffset: 1239;
        animation: cajoue_draw 192ms linear 647ms forwards, cajoue_fade 1ms linear 2700ms forwards;
    }

    #cajoue_u_contour {
        stroke-dasharray: 2568 2570;
        stroke-dashoffset: 2569;
        animation: cajoue_draw 398ms linear 2296ms forwards, cajoue_contourfade 1ms linear 2700ms forwards;
    }

    #coupleetpaireaudio,
    #lechamaneaudio,
    #leleopardchretienaudio,
    #coupleetpaireaudio,
    #cestquileplusfortaudio,
    #ledramedelamouraudio,
    #avoirpiedaudio {
        width: 45%;
    }

    #notre_but {
        width: fit-content;
        margin: 3rem auto;
        font-family: var(--serif);
        font-size: 80%;
        text-align-last: justify;
    }

    #article-1687 a.apercu-lien[title*="mitonne"]::before,
    #article-1839 a.apercu-lien[title*="question si"]::before {
        content: "Épisode suivant";
        background: var(--main-color);
        color: #fff;
        padding: 0 5px;
        float: right;
        font-size: 70%;
    }

    #article-1839 a.apercu-lien[title*="amadoua"]::before,
    #article-2067 a.apercu-lien[title*="mitonne"]::before {
        content: "Épisode précédent";
        background: var(--main-color);
        color: #fff;
        padding: 0 5px;
        float: right;
        font-size: 70%;
    }

    #article-3686 .depatouille_item {
        font-family: var(--sans-serif);
        font-weight: 800;
        font-style: italic;
        padding-right: 0.5rem;
    }

    #article-6537 p {
        display: table;
    }

    #article-6537 .depliant-contenu {
        font-family: var(--sans-serif);
        line-height: 120%;
    }

    #article-6537 p[data-rang="0"] {
        margin-left: -30px;
        font-size: 100%;
        opacity: 1;
    }

    #article-6537 p[data-rang="1"] {
        font-size: 100%;
        opacity: 1;
    }

    #article-6537 p[data-rang="1"] span.prefnum {
        font-size: 100%;
    }

    #article-6537 p[data-rang="2"] {
        padding-left: 30px;
        font-size: 98%;
        opacity: 0.98;
    }

    #article-6537 p[data-rang="2"] span.prefnum {
        font-size: 90%;
    }

    #article-6537 p[data-rang="3"] {
        padding-left: 60px;
        font-size: 96%;
        opacity: 0.96;
    }

    #article-6537 p[data-rang="3"] span.prefnum {
        font-size: 80%;
    }

    #article-6537 p[data-rang="4"] {
        padding-left: 90px;
        font-size: 94%;
        opacity: 0.94;
    }

    #article-6537 p[data-rang="4"] span.prefnum {
        font-size: 70%;
    }

    #article-6537 p[data-rang="5"] {
        padding-left: 120px;
        font-size: 92%;
        opacity: 0.92;
    }

    #article-6537 p[data-rang="5"] span.prefnum {
        font-size: 60%;
    }

    #article-6537 span.prefnum {
        display: table-cell;
        vertical-align: middle;
        padding-right: 2rem;
        opacity: 0.5;
    }

    #article-8510 table {
        margin: 0;
    }

    #article-9418 .fadants {
        animation: load 10ms infinite;
        display: none;
    }

    #article-9418 div#header {
        display: block;
        margin: 8rem auto 0 auto;
        width: fit-content;
    }

    #article-9418 div#header h1 {
        margin-bottom: 0;
        text-transform: uppercase;
        font-family: "Righteous", cursive;
        font-size: 5rem;
        color: #f32121;
        margin-top: 6rem;
        font-weight: 400;
    }

    #article-9418 div#options {
        display: block;
        width: 100%;
        margin: 0 auto;
        position: sticky;
        top: 0;
        background: #fff;
        text-align: center;
        z-index: 10;
        padding: 3rem 0 2rem 0;
    }

    #article-9418 div#options .checkmark {
        position: absolute;
        top: 0;
        left: 0.75rem;
        height: 1rem;
        width: 1rem;
        background-color: #eee;
    }

    #article-9418 div#options input.selected:checked+span {
        color: #f32121;
    }

    #article-9418 div#options label {
        cursor: pointer;
        font-size: 1rem;
    }

    #article-9418 div#options label.disposition {
        display: none;
        position: relative;
        padding: 0 0 0 2rem;
        cursor: pointer;
        font-size: 0.9rem;
        user-select: none;
        line-height: 1;
        animation: load 5s infinite;
    }

    #article-9418 div#options label.disposition:hover input~.checkmark {
        background-color: #ccc;
    }

    #article-9418 div#options label.disposition input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    #article-9418 div#options label.disposition input:checked~.checkmark {
        background-color: #f32121;
    }

    #article-9418.type-article h1.article-titre {
        margin-bottom: 0;
        text-transform: uppercase;
        font-family: "Righteous", cursive;
        font-size: 3rem;
        color: #f32121;
        font-weight: 400;
    }

    #article-9418.type-article h1.article-titre::first-letter {
        font-size: 5rem;
    }

    article.cajoue .article-titre {
        font-family: var(--sans-serif);
        font-weight: 400;
    }

    article.cajoue .barre path {
        transform: translateY(4px);
    }

    article.cajoue .cajoue {
        text-transform: uppercase;
        font-family: "Bangers";
        background: linear-gradient(#000, #ea2525, orange, #FFF) text;
        transform: rotate(-5deg) skew(-23deg, 4deg) translate(7px, 12px);
        font-size: 35px;
        line-height: 0;
        opacity: 0;
    }

    article.cajoue .cajoue.animate {
        animation: bounceIn 1s forwards;
        opacity: 0;
        display: inline-block;
    }

    article.cajoue .cajoue_multichoix {
        font-family: var(--sans-serif);
        font-size: 80%;
        line-height: 120%;
        margin: 3rem 2rem;
    }

    article.cajoue .checkbox-list {
        list-style: none;
        padding: 0;
        margin: -2rem 2rem;
    }

    article.cajoue .checkbox-list input[type="checkbox"] {
        display: none;
    }

    article.cajoue .checkbox-list input[type="checkbox"]+label {
        position: relative;
        padding-left: 0;
        cursor: pointer;
    }

    article.cajoue .checkbox-list input[type="checkbox"]+label::before {
        content: "";
        position: absolute;
        left: -30px;
        top: 50%;
        transform: translate(10%, -45%);
        width: 15px;
        height: 15px;
        border: 2px solid var(--secondary-color);
    }

    article.cajoue .checkbox-list input[type="checkbox"]:checked+label:after {
        content: "✓";
        position: absolute;
        left: -26px;
        top: 57%;
        transform: translateY(-50%);
        color: var(--secondary-color);
    }

    article.cajoue .checkbox-list input[type="checkbox"]:checked+label:before {
        background-color: white;
    }

    article.cajoue .checkbox-list li {
        margin-bottom: 10px;
    }

    article.cajoue .deux,
    article.cajoue .trois {
        display: block;
        padding-left: 1rem;
        border-left: 1px solid #eaeaea;
    }

    article.cajoue .essentiel {
        display: flex;
        flex-direction: column;
        margin: 3rem 0;
        padding: 1rem 0;
        max-width: 100%;
        border-block: 1px solid var(--secondary-color);
        opacity: 1;
        transform-origin: center;
    }

    article.cajoue .essentiel.is-visible {
        animation: flipIn .7s ease-out forwards;
    }

    article.cajoue .essentiel .essentiel_t {
        display: block;
        color: var(--secondary-color);
        font: 400 .85rem/1.5 var(--sans-serif);
        text-align: left;
        margin-bottom: 1rem;
    }

    article.cajoue .essentiel .essentiel_c {
        display: block;
        font: 400 1.3rem/1.6 var(--sans-serif);
        color: var(--main-color);
        text-align: left;
        hyphens: none;
    }

    article.cajoue .experience {
        display: block;
        font: 400 var(--article)/1.8 var(--serif);
        text-align: left;
        margin: 4rem -3rem 4rem 0;
        padding: 0 0 0 1rem;
        color: var(--main-color);
    }

    article.cajoue .experience span {
        display: inline-block;
    }

    article.cajoue .explode {
        color: var(--secondary-color);
    }

    article.cajoue .formation {
        display: block;
        font-family: cursive;
        margin: 0 4rem;
    }

    article.cajoue .formation.question {
        text-align: center;
        font-size: 1.75rem;
        width: 50%;
        margin: 5rem auto;
        font-family: "Spectral SC";
        line-height: 100%;
    }

    article.cajoue .hiddenText {
        transition: all 1s ease-out;
        opacity: 0;
    }

    span.hybris {
        font-family: var(--sans-serif);
        font-size: 1em;
        font-weight: 400;
        font-style: normal;
        text-transform: uppercase;
        color: var(--secondary-color);
    }

    article.cajoue .integree {
        display: inline;
    }

    article.cajoue .intercalaire {
        font-family: var(--sans-serif);
        margin: 12rem 0;
        padding: 1rem;
        line-height: 140%;
        font-size: 22px;
    }

    article.cajoue .intercalaire h3 {
        padding-top: 0;
    }

    article.cajoue .intercalaire p,
    article.cajoue .intercalaire ol {
        padding-bottom: 0;
        margin-bottom: 0;
        padding-top: 0;
        margin-top: 0;
    }

    .mention.detache {
        display: block;
        width: fit-content;
        padding-left: 2rem;
    }

    article.cajoue .no-drop {
        background: var(--secondary-color);
    }

    article.cajoue .note-marginale {
        font-size: 70%;
        line-height: 130%;
        display: block;
        width: 60%;
        margin: 0 auto;
    }

    article.cajoue .over {
        opacity: 0.3;
    }

    article.cajoue h2,
    article.cajoue h3 {
        text-align: center;
    }

    article.cajoue h3 {
        font: 400 1.5rem/1.3 var(--sans-serif);
        text-align: left;
        color: var(--secondary-color);
        padding-top: .75rem;
        border: 0;
        width: 100%;
        margin: 4rem 0 1.5rem;
    }

    article.cajoue table td {
        line-height: 30px;
    }

    article.cajoue table td+td {
        padding-left: 10rem;
    }

    article.cajoue table td:first-of-type {
        text-align: right;
    }

    #tableau_1 {
        background: url("/se_faire_des_tableaux_img/Borel_1.png");
        background-position: -19rem -32rem;
        background-size: 157%;
    }

    #tableau_2 {
        background: url("/se_faire_des_tableaux_img/Borel_3.png");
        background-position: 0rem -4rem;
        background-size: 103%;
    }

    #tableau_3 {
        background: url("/se_faire_des_tableaux_img/Borel_3.jpg");
        background-position: 0rem -13rem;
        background-size: 103%;
    }

    #textegeistgeist {
        font-family: var(--sans-serif);
        color: gold;
        font-size: 30px;
        text-align: center;
        padding-top: 2rem;
        text-shadow: 1px 1px 1px black;
    }

    .apres {
        position: relative;
        margin-left: 13ch;
    }

    .apres2 {
        position: relative;
        margin-left: 19ch;
    }

    .audio:after {
        content: "🎶";
        color: var(--secondary-color);
        cursor: progress;
        display: inline-block;
        padding-right: 5px;
    }

    .audio:hover:after {
        transform: rotate(20deg);
    }

    .audioquersch:active:after {
        transform: rotate(20deg);
        color: blue;
    }

    .audioquersch:after {
        content: "🎶";
        color: var(--secondary-color);
        cursor: progress;
        display: inline-block;
        padding-right: 0;
        padding-left: 5px;
    }

    .audioquersch:hover:after {
        transform: rotate(20deg);
    }

    .blink {
        -o-transition: all 3s ease-in-out;
        transition: all 3s ease-in-out;
        animation: blink 3s normal infinite ease-in-out;
    }

    .blink2 {
        -o-transition: all 3.2s ease-in-out;
        transition: all 3.2s ease-in-out;
        animation: blink 3.2s normal infinite ease-in-out;
    }

    .blink2 span {
        display: inline-block;
    }

    .blink3 {
        -o-transition: all 3.5s ease-in-out;
        transition: all 3.5s ease-in-out;
        animation: blink 3.5s normal infinite ease-in-out;
    }

    .blink3 span {
        display: inline-block;
    }

    .blink4 {
        -o-transition: all 3.9s ease-in-out;
        transition: all 3.9s ease-in-out;
        animation: blink 3.9s normal infinite ease-in-out;
    }

    .blink4 span {
        display: inline-block;
    }

    .blink span {
        display: inline-block;
    }

    .cle[draggable="true"]:hover {
        background: #ffe8e8;
    }

    .club_devise {
        font-family: var(--serif);
        font-weight: 300;
        font-style: italic;
        text-align: center;
    }

    .club_lexico {
        border: 1px solid black;
        padding: 1rem;
        font-size: 80%;
        line-height: 130%;
        margin: 1rem auto 5rem;
        background: #f4f4f4;
    }

    .club_poeme {
        font-family: var(--serif);
        font-weight: 300;
        font-style: italic;
        margin-top: 2rem;
    }

    .deux_exergues {
        text-align: justify;
        font-size: 0.9rem;
        width: 90%;
        margin: auto;
        color: #444;
        hyphens: initial;
    }

    .diff-masonry {
        margin: 1em 0;
        padding: 0;
        column-gap: 0.25em;
        font-size: 0.85em;
        line-height: 1.5rem;
    }

    .diffitem {
        display: inline-block;
        padding: 0;
        margin: 0 0 0em;
        width: 100%;
        filter: grayscale(70%);
        counter-increment: diffitem;
        opacity: 0.8;
    }

    .diffitem::before {
        content: "#"counter(diffitem);
        position: absolute;
        font-size: 150%;
        color: #fff;
        opacity: 0.8;
        padding-left: 4px;
    }

    .diffitem:hover {
        cursor: progress;
        opacity: 1;
    }

    .divTable {
        display: table;
        width: 100%;
    }

    .divTableBody {
        display: table-row-group;
    }

    .divTableCell,
    .divTableHead {
        border-right: 1px solid #ccc;
        display: table-cell;
        padding: 5px;
        font-size: 1rem;
    }

    .divTableCell:first-of-type {
        width: 60%;
    }

    .divTableCell:not(:nth-child(1)) {
        text-align: center;
    }

    .divTableFoot {
        background-color: #eee;
        display: table-footer-group;
        font-weight: bold;
    }

    .divTableHeading {
        background-color: #eee;
        display: table-header-group;
        font-weight: bold;
    }

    .divTableRow {
        display: table-row;
    }

    .divTableRow:first-child {
        font-family: var(--sans-serif);
    }

    .divTableRow:nth-child(even) {
        background: #eaeaea82;
    }

    .accueil .club_lexico {
        display: none;
    }

    .accueil .club_para {
        margin-top: 2rem;
    }

    .accueil .article-9418 .anthropopathes_resume {
        display: block;
    }

    .leclub {
        fill: #ffffff0a;
        stroke-width: 2;
        stroke-linejoin: butt;
        stroke-dasharray: 6 4;
        stroke-dashoffset: 0;
        animation: club 6s infinite linear;
        font-size: 10rem;
    }

    .leclub:nth-child(5n + 1) {
        stroke: #ffffff;
        animation-delay: -1.2s;
    }

    .leclub:nth-child(5n + 3) {
        stroke: #ffffff;
        animation-delay: -3.6s;
    }

    .leclub:nth-child(5n + 4) {
        stroke: #ffff64;
        animation-delay: -4.8s;
    }

    .leclub:nth-child(5n + 5) {
        stroke: #fff;
        animation-delay: -6s;
    }

    .left td {
        text-align: left;
    }

    .legendeimg {
        font-size: 1rem;
    }

    .legovil-masonry {
        column-count: 4;
        margin: 1em 0;
        padding: 0;
        column-gap: 0.25em;
        font-size: 0.85em;
        line-height: 1.5rem;
    }

    .legovil-masonry.epqch {
        column-count: 2;
    }

    .legovilitem {
        display: inline-block;
        padding: 0;
        margin: 0 0 0em;
        width: 100%;
    }

    .louche-masonry {
        margin: 1em 0;
        padding: 0;
        column-gap: 0.25em;
        font-size: 0.85em;
    }

    .loucheitem {
        display: inline-block;
        padding: 0.18em 0.1em;
        margin: 0 0 0em;
        width: 100%;
        counter-increment: loucheitem;
        opacity: 0.8;
    }

    .loucheitem::before {
        content: "#"counter(loucheitem);
        position: absolute;
        font-size: 2rem;
        color: var(--main-color);
        opacity: 0.8;
        padding-left: 1rem;
        padding-top: 1rem;
    }

    .loucheitem:hover {
        cursor: progress;
        opacity: 1;
    }

    .masonry-layout {
        column-count: 2;
        column-gap: 0;
        font-size: 80%;
        line-height: 1rem;
        color: #444;
        text-align: justify;
        text-shadow: 1px 1px #fff;
        margin: 1.3rem 0 10px 0;
    }

    .masonry-layout__panel {
        break-inside: avoid;
        padding: 1rem;
        margin: 0 5px 10px 5px;
        box-shadow: 5px 5px 11px rgba(204, 204, 204, 0.3);
        display: inline-grid;
    }

    .masonry-layout__panel-content {
        padding: 0 10px 0 10px;
    }

    .petitbloc:nth-of-type(1) {
        background-color: rgba(170, 221, 51, 0.2);
    }

    .petitbloc:nth-of-type(2) {
        background-color: rgba(224, 107, 151, 0.2);
    }

    .petitbloc:nth-of-type(3) {
        background-color: rgba(204, 193, 235, 0.3);
    }

    .petitbloc:nth-of-type(4) {
        background-color: rgba(246, 209, 85, 0.3);
    }

    .petitbloc:nth-of-type(5) {
        background-color: rgba(146, 193, 235, 0.2);
    }

    .petitbloc:nth-of-type(6) {
        background-color: rgba(239, 174, 146, 0.4);
    }

    .article-9418 .anthropopathes_resume {
        display: none;
    }

    .ref.nom_revue {
        font-style: italic;
    }

    .ref.nom_revue+.ref.numero::after {
        content: ")";
    }

    .ref.nom_revue+.ref.numero::before {
        content: "(";
    }

    .ref.prenom_auteur2::before,
    .ref.prenom_auteur3::before,
    .ref.prenom_auteur4::before {
        content: ", ";
        position: relative;
    }

    .se_faire_des_tableaux td {
        width: 1%;
        text-align: right;
        padding: 0 0.25rem;
        border: 1px solid #dddddd;
    }

    .vue-article .club_para {
        margin-top: 5rem;
    }

    .vue-article .club_para:not(.last)::after {
        content: "*";
        display: block;
        margin: 5rem 0 0 20%;
    }

    .spin2 span {
        float: left;
        text-indent: 1ch;
        width: 19ch;
        text-overflow: ellipsis;
        position: absolute;
        opacity: 0;
        overflow: hidden;
        animation: rotation 3s linear infinite;
        -o-animation: rotation 3s linear infinite;
    }

    .spin2 span:nth-child(2) {
        animation-delay: 1s;
    }

    .spin2 span:nth-child(3) {
        animation-delay: 2s;
    }

    .spin span {
        float: left;
        text-indent: 1ch;
        width: 13ch;
        text-overflow: ellipsis;
        position: absolute;
        opacity: 0;
        overflow: hidden;
        animation: rotation 3s linear infinite;
        -o-animation: rotation 3s linear infinite;
    }

    .spin span:nth-child(2) {
        animation-delay: 1s;
    }

    .spin span:nth-child(3) {
        animation-delay: 2s;
    }

    .text:nth-child(5n + 2) {
        stroke: #fff;
        animation-delay: -2.4s;
    }

    @keyframes flipIn {
        0% {
            transform: rotateY(-360deg);
            opacity: 0;
        }

        100% {
            transform: rotateY(0deg);
            opacity: 1;
        }
    }

    @keyframes blink {
        25% {
            opacity: 0;
        }

        50% {
            opacity: 0;
        }

        75% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes bounceIn {
        0% {
            opacity: 0;
            transform: scale3d(.3, .3, .3) rotate(-5deg) skew(-23deg, 4deg) translate(7px, 3px);
        }

        0%,
        20%,
        40%,
        60%,
        80%,
        100% {
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        }

        20% {
            transform: scale3d(1.1, 1.1, 1.1) rotate(0deg) skew(-12deg, -4deg) translate(7px, 3px);
        }

        40% {
            transform: scale3d(.9, .9, .9) rotate(5deg) skew(0deg, 0deg) translate(2px, 3px);
        }

        100% {
            opacity: 1;
            transform: scale3d(1, 1, 1) rotate(0deg) skew(0deg, 4deg) translate(2px, 3px);
        }
    }

    @keyframes cajoue_contourfade {
        100% {
            fill: #000;
        }
    }

    @keyframes cajoue_draw {
        100% {
            stroke-dashoffset: 0;
        }
    }

    @keyframes cajoue_fade {
        98% {
            fill: url("#fond-degrade");
            fill-opacity: 1;
        }

        99% {
            fill-opacity: 0;
        }

        100% {
            fill: url("#fond-degrade");
            fill-opacity: 1;
        }
    }

    @keyframes cligne {
        0% {
            opacity: 0;
            color: var(--secondary-color);
        }

        5% {
            opacity: 1;
            color: var(--primary-color);
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes club {
        100% {
            stroke-dashoffset: -400;
        }
    }

    @keyframes coucouche {
        from {
            transform: translateY(0%);
            opacity: 1;
        }

        to {
            transform: translateY(-100%);
            opacity: 0;
        }
    }

    @keyframes evanou {
        0% {
            text-shadow: -7px 8px 0 rgba(225, 222, 194, 0);
            color: rgba(225, 222, 194, 0);
        }

        89% {
            color: rgba(225, 222, 194, 0);
        }

        90% {
            color: rgba(225, 222, 194, 1);
        }

        99% {
            color: rgba(225, 222, 194, 1);
        }

        100% {
            text-shadow: -7px 8px 0 rgba(225, 222, 194, 0.05);
            color: rgba(225, 222, 194, 1);
        }
    }

    @keyframes experience_background {
        0% {
            background-position: -400px 300px;
        }

        100% {
            background-position: 400px -300px;
        }
    }

    @keyframes flicker {
        50% {
            color: #fff;
            filter: saturate(200%) hue-rotate(20deg);
        }
    }

    @keyframes rotateAnimation {
        0% {
            transform: rotate3d(0, 1, 0, 0deg);
        }

        100% {
            transform: rotate3d(0, 1, 0, 360deg);
        }
    }

    @keyframes rotation {
        0% {
            opacity: 0;
        }

        2% {
            opacity: 0;
            transform: translateY(-30px);
        }

        5% {
            opacity: 1;
            transform: translateY(0px);
        }

        17% {
            opacity: 1;
            transform: translateY(0px);
        }

        20% {
            opacity: 0;
            transform: translateY(30px);
        }

        80% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    @keyframes smoke {
        0% {
            background-position: 80% 0%;
        }

        100% {
            background-position: 0% 40%;
        }
    }
}

@layer modules {
    .rubrique-concordance.article {
        max-width: 100%;
        padding-inline: clamp(1rem, 3vw, 3rem);
    }

    .rubrique-concordance table {
        display: block;
        width: 100%;
        font: 400 1rem/1.6 var(--sans-serif);
    }

    .rubrique-concordance table tbody {
        display: block;
        width: 100%;
    }

    .rubrique-concordance table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(8rem, .85fr) minmax(0, 1fr);
        width: 100%;
        align-items: baseline;
        border-bottom: 1px solid var(--line);
    }

    .rubrique-concordance table td {
        display: block;
        min-width: 0;
        border: 0;
        padding: .35rem .65rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
    }

    .rubrique-concordance table td:first-of-type {
        text-align: right;
        direction: rtl;
        mask-image: linear-gradient(to right, transparent, #000 20%);
    }

    .rubrique-concordance table td:nth-of-type(2) {
        text-align: center;
        color: var(--secondary-color);
        font-weight: 600;
        white-space: nowrap;
    }

    .rubrique-concordance table td:last-of-type {
        text-align: left;
        mask-image: linear-gradient(to left, transparent, #000 20%);
    }

    .rubrique-concordance table a {
        color: inherit;
    }

    .rubrique-concordance table a:hover {
        color: var(--secondary-color);
    }

    .rubrique-concordance table tr:hover {
        background: rgb(230 0 0 / 5%);
    }

}

@layer utilities {
    .tags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .6rem;
        margin: 1.5rem 0;
        font: .9rem var(--sans-serif);
    }

    .tags span {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
    }

    .tags input {
        width: 11rem;
        max-width: 100%;
    }

    .tags button {
        border: 1px solid var(--line);
        background: var(--paper);
        padding: .2rem .4rem;
    }

    body.vue-citation:has(.tags) .quali {
        background: #ffff9f;
    }

    #quali-button {
        position: absolute;
        z-index: 30;
        border: 1px solid var(--main-color);
        padding: .4rem .7rem;
        background: #ffff9f;
        font: 1rem var(--sans-serif);
    }

    #testa-toast {
        position: fixed;
        z-index: 50;
        right: 1rem;
        bottom: 1rem;
        max-width: calc(100% - 2rem);
        padding: .85rem 1.25rem;
        background: var(--main-color);
        color: var(--paper);
        font: 1rem/1.4 var(--sans-serif);
    }

    .texte-accessible {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .texte-accessible:focus {
        position: fixed;
        z-index: 100;
        width: auto;
        height: auto;
        padding: 1rem;
        margin: 0;
        clip-path: none;
        background: var(--paper);
    }
}

@layer responsive {
    @media (max-width: 800px) {

        .exergue_masonry,
        .masonry-layout {
            column-count: 1;
        }

        .diff-masonry,
        .legovil-masonry,
        .louche-masonry {
            column-count: 2;
        }

        .deux_exergues {
            width: 100%;
            font-size: .9rem;
        }

        #article-9794 .article-contenu p {
            width: 100%;
            margin: 1rem 0;
        }

        #article-9418.type-article h1.article-titre {
            font-size: 20px;
        }

        svg.rough-annotation path {
            stroke-width: 0.5px;
        }

        article.cajoue .cajoue {
            font-size: 2.5rem;
        }

        article.cajoue .checkbox-list input[type="checkbox"]+label::before {
            transform: translate(0%, -45%);
        }

        article.cajoue .formation.question {
            font-size: 1.75rem;
        }

        article.cajoue h3.cajoue {
            font-size: 1.3rem;
        }

        .lppg_chapitre {
            width: 100%;
            margin: .5rem 0;
        }
    }

    @media (min-width: 1100px) {

        .diff-masonry,
        .legovil-masonry {
            column-count: 4;
        }

        .louche-masonry {
            column-count: 3;
        }
    }

    @media (max-width: 800px) {
        .rubrique-concordance table {
            font-size: .85rem;
        }

        .rubrique-concordance table tr {
            grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 1fr) minmax(0, 1fr);
        }

        .rubrique-concordance table td {
            padding-inline: .3rem;
        }
    }
}

/* Compositions d’article — réglages enregistrés dans le HTML. */
.article-contenu .composition {
    width: min(100%, var(--composition-largeur, 100%));
    margin-block: 2rem;
    margin-inline: auto;
}

.article-contenu .composition>.composition-grille {
    display: grid;
    grid-template-columns: var(--composition-colonnes, 1fr);
    gap: var(--composition-ecart, 2rem);
    align-items: var(--composition-alignement, start);
}

.article-contenu .composition-zone {
    min-width: 0;
    overflow-wrap: anywhere;
}

.article-contenu .composition-zone> :first-child {
    margin-top: 0;
}

.article-contenu .composition-zone> :last-child {
    margin-bottom: 0;
}

.article-contenu .composition[data-disposition="duo-bas"]>.composition-grille>.composition-zone:last-child {
    grid-column: 1 / -1;
}

.article-contenu .composition-image {
    margin: 0;
    width: 100%;
}

.article-contenu .composition-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: var(--composition-format, auto);
    object-fit: var(--composition-cadrage, contain);
    object-position: center;
}

.article-contenu .composition-legende {
    margin-top: .6rem;
    font-size: .85em;
    line-height: 1.4;
}

@media (max-width: 700px) {
    .article-contenu .composition {
        width: 100%;
    }

    .article-contenu .composition[data-mobile="empiler"]>.composition-grille {
        grid-template-columns: minmax(0, 1fr);
    }

    .article-contenu .composition[data-mobile="empiler"]>.composition-grille>.composition-zone {
        grid-column: auto;
    }
}

@layer lecture {
    .lecture-reperes[open] {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .lecture-reperes summary::-webkit-details-marker {
        display: none;
    }

    .titre-premier {
        translate: 0 .06em;
    }

    .titre-fragment {
        position: relative;
    }

    .titre-fragment::after,
    .titre-fragment::before {
        content: attr(data-echo) / "";
        position: absolute;
        inset: 0;
        background: var(--paper);
        pointer-events: none;
        color: var(--main-color);
    }

    .titre-fragment::after {
        clip-path: polygon(0 48%, 100% 48%, 100% 58%, 0 58%);
        translate: 9px -1px;
    }

    .titre-fragment::before {
        clip-path: polygon(0 26%, 100% 26%, 100% 29%, 0 29%);
        translate: -5px 0;
    }

    .lecture-numerotee>.lecture-numero {
        position: relative;
        left: -7rem;
        width: 5rem;
        height: 0;
        margin: 4.5rem 0 0;
        padding: 0;
        border: 0;
        font: 400 .75rem/1.4 var(--sans-serif);
        color: var(--main-color);
        text-align: left;
        white-space: nowrap;
    }

    .lecture-numero::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        background: var(--main-color);
        margin-right: .75rem;
        vertical-align: middle;
    }

    .lecture-numerotee .lecture-bloc {
        position: relative;
    }

    .lecture-numerotee>.lecture-bloc[data-section="2"],
    .lecture-numerotee>.lecture-numero[data-section="2"] {
        translate: -3rem 0;
    }

    .lecture-numerotee>.lecture-bloc[data-section="3"],
    .lecture-numerotee>.lecture-numero[data-section="3"] {
        translate: 2rem 0;
    }

    .lecture-numerotee>.lecture-bloc[data-section="6"],
    .lecture-numerotee>.lecture-numero[data-section="6"] {
        translate: 3rem 0;
    }

    .lecture-numero[data-section="3"]::before {
        background: var(--secondary-color);
    }

    .experience-lecture {
        position: relative;
    }

    .experience-commandes {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 1.5rem;
    }

    .experience-commandes button {
        background: transparent;
        border: 0;
        color: var(--main-color);
        min-height: 44px;
        padding: .4rem 0;
        font: 400 .75rem/1.4 var(--sans-serif);
    }

    .experience-lecture::before {
        content: "";
        position: absolute;
        left: -4rem;
        top: 5.2rem;
        width: 2.5rem;
        height: 1px;
        background: var(--secondary-color);
    }

    .experience .mot-deforme {
        position: relative;
        display: inline-block;
        translate: 0 var(--mot-dy, 0px);
        rotate: var(--mot-angle, 0deg);
    }

    .mot-deforme[data-fracture]::after {
        content: attr(data-echo) / "";
        position: absolute;
        inset: 0;
        background: var(--paper);
        clip-path: polygon(0 44%, 100% 44%, 100% 54%, 0 54%);
        translate: 3px 0;
        pointer-events: none;
    }

    .lecture-calme .titre-fragment::after,
    .lecture-calme .titre-fragment::before,
    .lecture-calme .mot-deforme::after,
    .experience-calme .mot-deforme::after {
        content: none;
    }

    .lecture-calme .titre-premier,
    .lecture-calme .experience .mot-deforme,
    .experience-calme .mot-deforme {
        translate: none;
        rotate: none;
        transform: none;
    }

    .lecture-calme .article-contenu :is(.experience, .essentiel, .formation, .animate) {
        animation: none;
        transition: none;
        transform: none;
        opacity: 1;
    }

    .lecture-calme .article-contenu .experience span {
        transform: none;
    }

    @media(max-width:1100px) {
        .lecture-numerotee>.lecture-numero {
            left: -4rem;
            width: 3rem;
        }

        .lecture-numerotee>.lecture-bloc[data-section="2"],
        .lecture-numerotee>.lecture-numero[data-section="2"] {
            translate: -1rem 0;
        }

        .lecture-numerotee>.lecture-bloc[data-section="3"],
        .lecture-numerotee>.lecture-numero[data-section="3"],
        .lecture-numerotee>.lecture-bloc[data-section="6"],
        .lecture-numerotee>.lecture-numero[data-section="6"] {
            translate: 1rem 0;
        }

        .experience-lecture::before {
            left: -2rem;
            width: 1.25rem;
        }
    }

    @media(max-width:700px) {
        .article-grille>.lecture-numerotee {
            margin-left: 2.5rem;
        }

        .lecture-numerotee>.lecture-numero {
            left: -2.5rem;
            width: 2rem;
            font-size: .6875rem;
        }

        .lecture-numero::before {
            width: 3px;
            height: 3px;
            margin-right: .4rem;
        }

        .lecture-numerotee>.lecture-bloc[data-section],
        .lecture-numerotee>.lecture-numero[data-section] {
            translate: none;
        }

        .article-titre .article-serie {
            margin-left: 1rem;
            padding-top: .6rem;
        }

        .lecture-reperes[open] {
            display: block;
        }

        .lecture-reperes a {
            min-width: 39px;
        }

        .experience-commandes button {
            font-size: .6875rem;
        }

        .experience-lecture::before {
            left: -1.8rem;
            top: 5rem;
            width: 1rem;
        }
    }

    @media(min-width:1101px) {
        #cadre-site:has(#navigation-menu[open]) {
            padding-inline-start: calc(var(--gutter) + 18.5rem);
        }

        @media(max-width:1440px) {
            body:has(#navigation-menu[open]) .article-grille>.lecture-numerotee {
                max-width: min(var(--reading-width), calc(100% - 8rem));
            }

            body:has(#navigation-menu[open]) .lecture-numerotee>.lecture-numero {
                left: -3rem;
                width: 2.5rem;
            }

            body:has(#navigation-menu[open]) .lecture-numerotee>.lecture-bloc[data-section="2"],
            body:has(#navigation-menu[open]) .lecture-numerotee>.lecture-numero[data-section="2"] {
                translate: -1rem 0;
            }

            body:has(#navigation-menu[open]) .lecture-numerotee>.lecture-bloc[data-section="3"],
            body:has(#navigation-menu[open]) .lecture-numerotee>.lecture-numero[data-section="3"],
            body:has(#navigation-menu[open]) .lecture-numerotee>.lecture-bloc[data-section="6"],
            body:has(#navigation-menu[open]) .lecture-numerotee>.lecture-numero[data-section="6"] {
                translate: 1rem 0;
            }
        }
    }

    @media(max-width:1100px) {
        .site-entete {
            flex-wrap: wrap;
        }

        #navigation-menu[open] {
            flex-basis: 100%;
            order: 3;
        }

        #navigation-laterale {
            position: relative;
            inset: auto;
            width: 100%;
            overflow: visible;
            padding: 1rem 0 2rem;
            border: 0;
        }

        .navigation-fermer {
            right: 0;
            top: .5rem;
        }
    }

    @media(prefers-reduced-motion:reduce) {
        .article-contenu :is(.experience, .essentiel, .formation, .animate) {
            animation: none;
            transition: none;
            transform: none;
            opacity: 1;
        }

        .experience .mot-deforme {
            translate: none;
            rotate: none;
        }
    }

    @media print {

        .experience-commandes {
            display: none;
        }

        .lecture-numerotee>.lecture-numero {
            left: 0;
            height: auto;
            margin: 2rem 0 1rem;
        }

        .lecture-numerotee>.lecture-bloc[data-section],
        .lecture-numerotee>.lecture-numero[data-section] {
            translate: none;
        }
    }
}


@layer utilities {}

@layer responsive {
    @media(max-width: 1100px) {
        article.cajoue .experience {
            margin-right: 0;
        }
    }

    @media(max-width:700px) {
        article.cajoue .experience {
            margin: 2rem 0;
            font-size: 1.1875rem;
            padding-left: 0;
        }

        article.cajoue h3 {
            font-size: 1.3rem;
        }
    }
}

/* Native hidden state must also win against an article's authored display. */
[hidden] {
    display: none !important;
}
/* Article 695 */
:where(body.page-article-695) .audio:after{
    content:"♫";
	color: red;
	cursor: progress;
}

/* Article 913 */
:where(body.page-article-913) .audio:after{
    content:"♫";
	color: red;
	cursor: progress;
}

/* Article 2067 */
:where(body.page-article-2067) .audio:after{
    content:"♫";
	color: red;
	cursor: progress;
}

/* Article 2209 */
:where(body.page-article-2209) .bilingue{
    display: flex;
}
:where(body.page-article-2209) .bilingue .col{
    width: 50%;
	-webkit-transition: all .5s;
	overflow: hidden;
	-moz-transition: width 0.4s ease;
	-webkit-transition: width 0.4s ease;
	white-space: -moz-pre-space;
	text-overflow: ellipsis;
	padding: 0 5px;
	display: inline-flex;
	font-size: 80%;
	line-height: 150%;
}
:where(body.page-article-2209) div.bilingue > div:hover{
    width: auto;
    overflow: clip;
}

/* Article 2211 */
:where(body.page-article-2211) .bilingue{
    display: flex;
}
:where(body.page-article-2211) .bilingue .col{
    width: 50%;
	-webkit-transition: all .5s;
	overflow: hidden;
	-moz-transition: width 0.4s ease;
	-webkit-transition: width 0.4s ease;
	white-space: -moz-pre-space;
	text-overflow: ellipsis;
	padding: 0 5px;
	display: inline-flex;
	font-size: 80%;
	line-height: 150%;
}
:where(body.page-article-2211) div.bilingue > div:hover{
    width: auto;
    overflow: clip;
}

/* Article 2884 */
:where(body.page-article-2884) .audio:after{
    content:"♫";
	color: red;
	cursor: progress;
}

/* Article 3686 */
:where(body.page-article-3686) .depatouille_item{
    font-weight: 600;
    font-style: italic;
    padding-right: .5rem;
}

/* Article 8345 */
:where(body.page-article-8345) .wrapper{
    width: 95%;
    margin: 3em auto;
}
:where(body.page-article-8345) .diff-masonry{
    margin: 1em 0;
    padding: 0;
    -moz-column-gap: 0.25em;
    -webkit-column-gap: 0.25em;
    column-gap: 0.25em;
    font-size: .85em;
}
:where(body.page-article-8345) .diffitem{
    display: inline-block;
    padding: 0.18em 0.1em;
    margin: 0 0 0em;
    width: 100%;
    filter: grayscale(70%);
	-webkit-filter: grayscale(70%);
	counter-increment: diffitem;
	opacity: 0.8;
}
:where(body.page-article-8345) .diffitem:hover{
cursor: progress;
	opacity: 1;
}
:where(body.page-article-8345) .diffitem::before{    
	content: "#" counter(diffitem);
    position: absolute;
    font-size: 150%;
    color: white;
    opacity: 0.8;
    padding-left: 4px;
}
@media only screen and (min-width: 400px){:where(body.page-article-8345) .diff-masonry{
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (min-width: 700px){:where(body.page-article-8345) .diff-masonry{
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
@media only screen and (min-width: 900px){:where(body.page-article-8345) .diff-masonry{
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}
@media only screen and (min-width: 1100px){:where(body.page-article-8345) .diff-masonry{
        -moz-column-count: 6;
        -webkit-column-count: 6;
        column-count: 6;
    }
}
:where(body.page-article-8345) }







.divTable{
	display: table;
	width: 100%;
}
:where(body.page-article-8345) .divTableRow{
	display: table-row;
}
:where(body.page-article-8345) .divTableRow:first-child{
font-weight: 600;
}
:where(body.page-article-8345) .divTableRow:nth-child(even){
    background: #eaeaea82;
}
:where(body.page-article-8345) .divTableCell:not(:nth-child(1)){
  text-align:center;
}
:where(body.page-article-8345) .divTableCell,
:where(body.page-article-8345) .divTableHead{
	border-right: 1px solid #ccc;
	display: table-cell;
	padding: 5px;
	font-size: 13px;
}
:where(body.page-article-8345) .divTableHeading{
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
:where(body.page-article-8345) .divTableFoot{
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
:where(body.page-article-8345) .divTableBody{
	display: table-row-group;
}

/* Article 8510 */
:where(body.page-article-8510) .deux_exergues{
    text-align: justify;
    font-size: 0.9rem;
	width: 90%;
    margin: auto;
	color: #555;
}
:where(body.page-article-8510) table.deux_exergues,
:where(body.page-article-8510) .deux_exergues td{
    border: none !important;
	padding: 0rem 1rem;
	margin-bottom: 2rem;
	line-height: 1.25rem;
}
:where(body.page-article-8510) blockquote.no_border{
    padding: 1rem 5rem;
    text-align: justify;
    border: none;
    margin: auto;
    line-height: 1.25;
    margin-bottom: 2rem;
}
:where(body.page-article-8510) tr.se_faire_des_tableaux{
    padding: 0rem 0.5rem;
    letter-spacing: -0.075rem;
    vertical-align: top;
    font-family: monospace;
    font-size: 1rem;
	line-height: 1.5rem;
}
:where(body.page-article-8510) .se_faire_des_tableaux td{
    width: 1% !important;
	text-align: right;
	padding: 0 0.25rem;
	border: 1px solid #dddddd;
}
:where(body.page-article-8510) h3.se_faire_des_tableaux{
    font-size: 1.5rem;
    text-decoration: underline;
    font-weight: 600;
    padding-left: 2rem;
	margin-top: 3rem;
}
:where(body.page-article-8510) .left td{
    text-align: left;
}
:where(body.page-article-8510) #tableau_1{
    background: url(/se_faire_des_tableaux_img/Borel_1.png);
    background-position: -19rem -32rem;
    background-size: 157%;
}
:where(body.page-article-8510) #tableau_2{
    background: url(/se_faire_des_tableaux_img/Borel_3.png);
    background-position: 0rem -4rem;
    background-size: 103%;
}
:where(body.page-article-8510) #tableau_3{
    background: url(/se_faire_des_tableaux_img/Borel_3.jpg);
    background-position: 0rem -13rem;
    background-size: 103%;
}
:where(body.page-article-8510) table{
margin-bottom: 1rem !important;
}
:where(body.page-article-8510) #article-8510 table{
font-size: 1rem;}

/* Article 8981 */
:where(body.page-article-8981) a#maintextlink,
:where(body.page-article-8981) a#buyordownloadlink,
:where(body.page-article-8981) a#sharelink{
color : #d18339 !important;
}

/* Article 9176 */
body.page-article-9176 ol{
padding-left: 0;
}
body.page-article-9176 ol li{
    margin: 1rem 0 0rem 0;
}
body.page-article-9176 ol li li{
    padding-left: 2.5rem;
}
body.page-article-9176 ol{ 
	counter-reset: item 
}
body.page-article-9176 ol li{
    display: block;
    padding-left: 2.5rem;
}
body.page-article-9176 ol > li:before{ 
	content: counters(item, ".") ". "; 
	counter-increment: item;
	opacity: 75%; 
	font-size: 75%;}
body.page-article-9176 img,
body.page-article-9176 iframe{
margin: 2rem 0 2rem 0;
}
body.page-article-9176 ol li ul li{
    border: none;
    padding-left: 0;
}
:where(body.page-article-9176) ul.dialogue li + li{
    margin-top: 0 !important;
}

/* Article 9242 */
:where(body.page-article-9242) .divTable{
	display: table;
	width: 100%;
}
:where(body.page-article-9242) .divTableRow{
	display: table-row;
}
:where(body.page-article-9242) .divTableRow:first-child{
font-weight: 600;
}
:where(body.page-article-9242) .divTableRow:nth-child(even){
    background: #eaeaea82;
}
:where(body.page-article-9242) .divTableCell:not(:nth-child(1)){
  text-align:center;
}
:where(body.page-article-9242) .divTableCell,
:where(body.page-article-9242) .divTableHead{
	border-right: 1px solid #ccc;
	display: table-cell;
	padding: 5px;
	font-size: 13px;
}
:where(body.page-article-9242) .divTableHeading{
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
:where(body.page-article-9242) .divTableFoot{
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
:where(body.page-article-9242) .divTableBody{
	display: table-row-group;
}

/* Article 9253 */
:where(body.page-article-9253) p:last-of-type{
    margin-bottom: 3rem;
}
:where(body.page-article-9253) div.epqqch::after{
    content: "—";
    text-align: center;
    display: block;
	color: #ccc;
}
:where(body.page-article-9253) div.epqqch{
    margin-bottom: 3rem;
    margin-top: 3rem;
}
:where(body.page-article-9253) p.dialogue:before{
    content: "- ";
}
:where(body.page-article-9253) p.iencli,
:where(body.page-article-9253) p.questionnaire{
    font-style: italic;
}
:where(body.page-article-9253) p.dialogue:last-of-type{
    margin-bottom: 3rem;
}
:where(body.page-article-9253) p.dialogue{
    margin: 0;
}
:where(body.page-article-9253) div.epqqch:first-of-type{
    margin-top: 8rem !important;
}
:where(body.page-article-9253) div.epqqch.credits{
    font-size: 90%;
    line-height: 130%;
}

/* Article 9418 */


/* Article 9714 */
:where(body.page-article-9714) .legovil-masonry.epqch{
	column-count: 2;
	-moz-column-count: 2;
    -webkit-column-count: 2;
}

/* Article 13021 */
:where(body.page-article-13021) .propositions-logiques{
    font-family: monospace;
    padding-left: 2rem;
    line-height: 1.5;
	font-size: 85%;
}
:where(body.page-article-13021) .poeme-de-dette{
	text-align: center;
	font-size: 90%;
	color: olivedrab;
	line-height: 1rem;
}

/* Article 13104 */
:where(body.page-article-13104) .image-centree{
margin: 2rem auto !important;
}

/* Article 15010 */
:where(body.page-article-15010) table#variation_efficacite{
    width: 100%;
    border: 1px solid black;
}
:where(body.page-article-15010) table#variation_efficacite td{
    padding: 1rem;
    vertical-align: baseline;
    border: 1px solid black;
    text-align: left;
}
:where(body.page-article-15010) table#variation_efficacite td:first-of-type{
    width: 35%;
}

/* Article 19317 */
:where(body.page-article-19317) .bilingue{
    display: flex;
}
:where(body.page-article-19317) .bilingue .col{
    width: 50%;
	-webkit-transition: all .5s;
	overflow: hidden;
	-moz-transition: width 0.4s ease;
	-webkit-transition: width 0.4s ease;
	white-space: -moz-pre-space;
	text-overflow: ellipsis;
	padding: 0 5px;
	display: inline-flex;
	font-size: 80%;
	line-height: 150%;
}
:where(body.page-article-19317) div.bilingue > div:hover{
    width: auto;
    overflow: clip;
}

/* Article 19551 */
:where(body.page-article-19551) .relations{
  border-collapse: collapse;
  margin: 1.5rem auto;
  font-family: Arial, sans-serif;
}
:where(body.page-article-19551) .relations td:first-child,
:where(body.page-article-19551) .relations td:last-child{
  padding: 0.7rem 1rem;
  white-space: nowrap;       /* garde les segments compacts */
}
:where(body.page-article-19551) .relations td.rail{
  width: 140px;              /* longueur du rail (ajuste au besoin)   */
  position: relative;        /* pour placer le rail et le curseur     */
  padding: 0;
}
:where(body.page-article-19551) .relations td.rail::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;               /* épaisseur du rail                     */
  background: #d9d9d9;
  transform: translateY(-50%);
}
:where(body.page-article-19551) .relations td.rail::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 6px;               /* taille du curseur                     */
  height: 6px;
  background: #007acc;       /* mets #0077cc pour un bleu corporate   */
  border-radius: 6px;        /* 50% si tu préfères un rond            */
  transform: translateY(-50%);
  animation: article-19551-cursor-slide 2.8s linear infinite;
}
@keyframes article-19551-cursor-slide{
  0%   { left: 5px;                  }
  48%  { left: calc(100% - 10px); }  /* arrive à droite                */
  52%  { left: calc(100% - 10px); }  /* petite pause                   */
  100% { left: 5px;                  }  /* retourne à gauche             */
}

/* Article 20663 */
:where(body.page-article-20663) .periodic{
    position: relative;
    height: 200px;
    margin-right: -1px;
    text-shadow: none;
    font-family: var(--sans-serif-regular);
    line-height: 10px;
    margin: 2rem 0;
}
:where(body.page-article-20663) .periodic-row{
    clear: both;
    height: 35%;
}
:where(body.page-article-20663) .cell{
    float: left;
    position: relative;
    width: 10%;
    height: 100%;
}
:where(body.page-article-20663) .element{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 1px;
    right: 1px;
    box-sizing: border-box;
    box-shadow: none;
    border: 1px solid black;
    text-align: center;
    cursor: default;
    pointer-events: none;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
    background: white;
}
:where(body.page-article-20663) .cell:hover .element{
    border-color: black;
    -webkit-transform: scale(3,3);
    -ms-transform: scale(3,3);
    transform: scale(3,3);
    z-index: 1;
    background: white;
}
:where(body.page-article-20663) .at_num,
:where(body.page-article-20663) .at_details{
    position: absolute;
    font-size: 4px;
    color: black;
    opacity: 0;
}
:where(body.page-article-20663) .at_num{
    top: 4px;
    right: 5px;
}
:where(body.page-article-20663) .symbol{
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    margin-top: -4px;
    font-size: 9px;
    line-height: 1;
    height: 9px;
    color: black;
}
:where(body.page-article-20663) .at_details{
    bottom: 4px;
    left: 0px;
    right: 0px;
}
:where(body.page-article-20663) .cell:nth-child(1) .element{
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
:where(body.page-article-20663) .cell:nth-child(18) .element{
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
:where(body.page-article-20663) .periodic-row:nth-child(10) .cell .element{
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
:where(body.page-article-20663) .periodic-row:nth-child(1) .cell:nth-child(1) .element{
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}
:where(body.page-article-20663) .periodic-row:nth-child(1) .cell:nth-child(18) .element{
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
}
:where(body.page-article-20663) .periodic-row:nth-child(10) .cell:nth-child(18) .element{
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
@media (min-width: 600px){:where(body.page-article-20663) .periodic{
        height: 145px;
        margin-right: -2px;
    }
:where(body.page-article-20663) .element{
        right: 2px;
        bottom: 2px;
    }
:where(body.page-article-20663) .at_num,
:where(body.page-article-20663) .at_details{
        font-size: 4px;
        opacity: 1;
    }
:where(body.page-article-20663) .symbol{
        margin-top: -17px;
        font-size: 16px;
        font-weight: bold;
        line-height: 30px;
        height: 30px;
        color: black;
    }
}
@media (min-width: 800px){:where(body.page-article-20663) .periodic{
        height: 170px;
    }
:where(body.page-article-20663) .symbol{
        font-size: 20px;
    }
}
@media (min-width: 992px){:where(body.page-article-20663) .periodic{
        height: 210px;
    }
:where(body.page-article-20663) .at_num,
:where(body.page-article-20663) .at_details{
        font-size: 5px;
    }
:where(body.page-article-20663) .symbol{
        font-size: 24px;
    }
}
@media (min-width: 1200px){:where(body.page-article-20663) .periodic{
        height: 250px;
    }
:where(body.page-article-20663) .at_num,
:where(body.page-article-20663) .at_details{
        font-size: 6px;
    }
:where(body.page-article-20663) .symbol{
        font-size: 30px;
    }
}
:where(body.page-article-20663) .skills-octagon-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem auto;
    padding: 1rem;
    max-width: 300px; /* Limite de largeur */
	font-family: Arial, sans-serif;
}
:where(body.page-article-20663) .skills-octagon{
    position: relative;
    width: 200px;
    height: 200px;
	padding: 3rem;
}
:where(body.page-article-20663) .octagon{
    width: 100%;
    height: 100%;
}
:where(body.page-article-20663) .octagon-outline{
    fill: none;
    stroke: #ccc;
    stroke-width: 2;
}
:where(body.page-article-20663) .octagon-attributes{
    fill: rgba(0, 255, 0, 0.3);
    stroke: #00ff00;
    stroke-width: 1;
}
:where(body.page-article-20663) .skill-label{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--angle)) translate(120px) rotate(calc(-1 * var(--angle)));
    transform-origin: center;
    font-size: 12px;
    text-align: center;
    color: #333;
}

/* Article 22303 */
:where(body.page-article-22303) table#emploidutemps,
:where(body.page-article-22303) table#emploidutemps tr,
:where(body.page-article-22303) table#emploidutemps td{
    color: black;
    border: 1px solid black;
    padding: 1rem;
    font-size: 1rem;
}

/* Article 22310 */
:where(body.page-article-22310) .book-post{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
  padding: 2rem;
  max-width: 900px;
  margin: 2rem auto;
  background-color: white;
  box-shadow: 0 4px 8px #ccc;
  border-radius: 8px;
}
:where(body.page-article-22310) .book-image img{
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease;
}
:where(body.page-article-22310) .book-image:hover img{
  transform: scale(1.05);
}
:where(body.page-article-22310) .book-details{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
:where(body.page-article-22310) .book-title{
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
:where(body.page-article-22310) .book-title a{
  text-decoration: none;
}
:where(body.page-article-22310) .book-title a:hover{
  text-decoration: underline;
}
:where(body.page-article-22310) .chapter-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
:where(body.page-article-22310) .chapter-list li{
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
:where(body.page-article-22310) .chapter-list a{
  text-decoration: none;
  transition: color 0.3s ease;
}
:where(body.page-article-22310) .chapter-list a:hover{
  text-decoration: underline;
}

/* Article 23152 */
:where(body.page-article-23152) .vex-mosaic{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    margin: 2rem 0;
}
:where(body.page-article-23152) .vex-mosaic figure{
    margin: 0;
    overflow: hidden;
}
:where(body.page-article-23152) .vex-mosaic figure:nth-child(1){
    grid-column: span 7;
    grid-row: span 2;
}
:where(body.page-article-23152) .vex-mosaic figure:nth-child(2),
:where(body.page-article-23152) .vex-mosaic figure:nth-child(3){
    grid-column: span 5;
}
:where(body.page-article-23152) .vex-mosaic figure:nth-child(n+4){
    grid-column: span 4;
}
:where(body.page-article-23152) .vex-mosaic img{
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
}
:where(body.page-article-23152) .vex-mosaic figure:nth-child(1) img{
    min-height: 448px;
}
@media (max-width: 700px){:where(body.page-article-23152) .vex-mosaic{
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
:where(body.page-article-23152) .vex-mosaic figure{
        grid-column: span 1;
        grid-row: auto;
    }
:where(body.page-article-23152) .vex-mosaic figure:first-child{
        grid-column: span 2;
    }
:where(body.page-article-23152) .vex-mosaic img{
        width: 100%;
        height: 100%;
        min-height: 0;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
:where(body.page-article-23152) .vex-mosaic figure:first-child img{
        aspect-ratio: 16 / 10;
    }
}


:root{--media-club-background:url("/media/bibliotheque/club01_retouche-3997bc9ed1-f038934a64.jpg");--media-cajoue-background:url("/media/bibliotheque/motif_topography_cajoue_noir-8002addcb0-4fa2c753ca.png");}