    /* @import url("/./public/site/fonts/brill_quarte.css"); */
    @import url("fonts/brill_quarte.css");


        :root {
            /* Palette de couleurs moderne et professionnelle (from CHARLES) */
            --primary-color: #1a5490;
            --primary-hover: #2f6fb3;
            --accent-color: #0ea5e9;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-muted: #94a3b8;

            /* Dark theme (from CHARLES) */
            --dark-bg-primary: #0f172a;
            --dark-bg-secondary: #1e293b;
            --dark-text-primary: #e2e8f0;
            --dark-text-secondary: #cbd5e1;
            --dark-border: #334155;

            /* EVA legacy colors (kept for compatibility) */
            --dark-theme-bg: #22272e;
            --dark-theme-txt: #adbac7;
            --grey-color: #777;
            --lighter-txt-light-theme: #545454;
            --darker-txt-dark-theme: #97A4B0;
            --third-color : #0a84ff;
            --right-width: 35%;
            --btn-tabs-height: 40px;

            /* Spacing & Layout (from CHARLES) */
            --max-content-width: 1250px;
            --sidebar-width: 480px;
            --nav-height: 64px;
            --spacing-xs: 0.3rem;
            --spacing-sm: 0.8rem;
            --spacing-md: 1.2rem;
            --spacing-lg: 2rem;
            --spacing-xl: 3rem;

            /* Typography (from CHARLES) */
            --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
            --font-serif: "Georgia", "Times New Roman", Times, serif;
            --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
                monospace;

            /* Shadows (from CHARLES) */
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

            /* Transitions (from CHARLES) */
            --transition-fast: 150ms ease;
            --transition-base: 250ms ease;
        }

        /* Reset et Base (from CHARLES) */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-serif);
            color: var(--text-primary);
            background-color: #ffffff;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body.dark {
            background-color: var(--dark-bg-primary);
            color: var(--dark-text-primary);
        }

        /*********/
        /* Navigation modernisée (from CHARLES) */
        .cmp_breadcrumbs {
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            height: var(--nav-height);
            background-color: rgba(255, 255, 255, 0.95);
            border-bottom: 1px solid #e2e8f0;
            box-shadow: var(--shadow-sm);
            z-index: 100;
            display: flex;
            align-items: center;
            padding: 0 var(--spacing-md);
            backdrop-filter: blur(8px);
        }

        body.dark nav {
            background-color: rgba(15, 23, 42, 0.95);
            border-bottom-color: var(--dark-border);
        }

        nav li {
            display: inline-block;
            padding: var(--spacing-xs) var(--spacing-sm);
            font-family: var(--font-sans);
            font-size: 0.9rem;
            font-weight: 500;
        }


        /* Boutons de mode (from CHARLES) */
        #mode-color-btns {
            position: fixed;
            top: 10px;
            right: var(--spacing-sm);
            z-index: 110;
        }

        #sun,
        #moon {
            cursor: pointer;
            width: 25px;
            height: 25px;
            border: none;
            background-color: transparent;
            border-radius: 8px;
            transition: background-color var(--transition-fast);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #sun:hover,
        #moon:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        body.dark #sun:hover,
        body.dark #moon:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* Layout principal (from CHARLES) */
        .wrap {
            padding-top: 42px;
            min-height: 100vh;
        }


        .LangMode > a[role="button"] {
            cursor: pointer;
        }

        section.back {
            display: none;
        }

        .obj_article_details,
        .landingPage{
            /* Reset et Base (from CHARLES) */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            max-width: var(--max-content-width);
            margin: 0 auto;
        }


        .article-and-metas {
            position: relative;
            display: flex;
            width: 100%;
            align-items: flex-start;
        }

        /* Contenu principal (from CHARLES) */
        .left-contents {
            flex: 1 1 auto;
            display: flex;
            justify-content: center;
            min-width: 100px;
            overflow-x: hidden;
        }

        .article-wrap {
            max-width: var(--max-content-width);
            margin: 0 auto;
        }

        /* Panneau latéral (from CHARLES) */
        .right-contents {
            flex: 0 0 auto;
            width: var(--sidebar-width);
            max-width: 100%;
            background-color: #fafaf9;
            border-left: 1px solid #e7e5e4;
            font-family: var(--font-sans);
            box-sizing: border-box;
            position: sticky;
            top: 0;
            height: 95vh;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            word-wrap: break-word;
            overflow-wrap: break-word;
            position: sticky;
            top: 64;
        }

        .article-wrap h1,
        .title-sub{
            display: none;
        }

        .right-contents * {
            word-wrap: break-word;
            box-sizing: border-box;
        }


        .right-contents .front,
        .right-contents .content-tab,
        .right-contents .meta-content-tab {
            width: 100%;
            box-sizing: border-box;
        }

        body.dark .right-contents {
            background-color: var(--dark-bg-secondary);
            border-left-color: var(--dark-border);
        }

        /* Titres élégants (from CHARLES) */
        .left-contents h1:not(div.boxed-text *) {
            font-family: var(--font-serif);
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: var(--spacing-lg);
            color: var(--text-primary);
            letter-spacing: -0.02em;
            padding-top: 25px;
            padding-bottom: var(--spacing-lg);
        }

        body.dark .left-contents h1:not(div.boxed-text *) {
            color: var(--dark-text-primary);
        }

        .article-wrap ul, .article-wrap ol {
            margin-left: var(--spacing-lg);
            margin-top: var(--spacing-md);
            margin-bottom: var(--spacing-md);
            line-height: 1.8;
        }

        .article-wrap li {
            margin-bottom: var(--spacing-xs);
            padding-left: var(--spacing-xs);
        }

        section.body, section.front {
            padding-right: 15px;
        }

        section.body {
            padding-right: 50px;
            line-height: normal;
        }

        section.front ol, section.front ol {
            padding-left: 25px;
        }

        /* Onglets (from CHARLES) */
        .front > .button-tabs {
            position: sticky;
            top: 0;
            display: flex;
            background-color: #fafaf9;
            border-bottom: 1px solid #e7e5e4;
            z-index: 10;
            height: var(--btn-tabs-height);
            margin-right: -15px;
            width: calc(100% + 15px);
            overflow-x: auto; /* permet le scroll horizontal */
            overflow-y: hidden; /* cache le scroll vertical */
        }

        .dark .button-tabs {
            background-color: var(--dark-bg-secondary);
            border-bottom-color: var(--dark-border);
        }

        .tab-btn {
            flex: 1 0 auto;
            padding: var(--spacing-sm);
            font-family: var(--font-sans);
            font-size: 0.875rem;
            font-weight: 600;
            background-color: transparent;
            border: none;
            border-right: 1px solid #e7e5e4;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all var(--transition-fast);
            height: var(--btn-tabs-height);
            min-width: fit-content;
        }

        .tab-btn[data-key="toc"] {
            flex: 1;
            white-space: nowrap;
        }

        body.dark .tab-btn {
            color: var(--dark-text-secondary);
            border-right-color: var(--dark-border);
        }

        .tab-btn:hover {
            background-color: rgba(0, 0, 0, 0.03);
            color: var(--text-primary);
        }

        body.dark .tab-btn:hover {
            background-color: rgba(255, 255, 255, 0.05);
            color: var(--dark-text-primary);
        }

        .focus-meta-tab {
            background-color: var(--primary-color);
            color: white;
        }

        .focus-meta-tab:hover {
            background-color: var(--primary-hover);
            color: white;
        }

        .focus-tab {
            background-color: var(--primary-color);
            color: white;
        }

        .focus-tab:hover {
            background-color: var(--primary-hover);
            color: white;
        }

        .content-tab {
            padding: var(--spacing-md);
            font-size: 0.9375rem;
        }

        .content-tab .button-tabs.meta-tabs {
            margin-top: calc(var(--spacing-md) * -1);
            margin-right: calc((var(--spacing-md) + 15px) * -1);
            margin-left: calc(var(--spacing-md) * -1);
            margin-bottom: var(--spacing-lg);
            display: flex;

        }

        .content-tab .bibliography {
            border: none;
        }

        /***** section/h *******/
        section.body p:not(div.boxed-text *, .caption, .credits, .stage, details *, .front-matter *) {
            font-size: 1.0625rem;
            line-height: 1.7;
            margin-top: var(--spacing-md);
            color: var(--text-primary);
            text-align: justify;
            hyphens: auto;
            word-wrap: break-word;
        }

        body.dark section.body p:not(div.boxed-text *, .caption, .credits, details *) {
            color: var(--dark-text-primary);
        }

        .title-sup,
        .z39-98 {
            display: inline-block;
            margin-top: 10px;
            font-size: 1.2rem;
            background-color: var(--dark-theme-txt);
            padding-right: 2rem;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            font-weight: 450;
        }

        /*.title-trl {
            font-family: var(--font-serif);
            font-size: 1.875rem;
            font-weight: 700;
            margin-top: 10px;
            margin-bottom: 10px;
            color: var(--text-primary);
            letter-spacing: -0.01em;
            font-style: italic;
        }*/

        .title-sub {
            font-family: var(--font-serif);
            font-size: 1.875rem;
            font-weight: 700;
            margin-top: 10px;
            margin-bottom: 10px;
            color: var(--text-primary);
            letter-spacing: -0.01em;
        }

        section.body h2:not(div.boxed-text *) {
            font-family: var(--font-serif);
            font-size: 1.875rem;
            font-weight: 700;
            margin-top: var(--spacing-xl);
            margin-bottom: var(--spacing-md);
            color: var(--text-primary);
            line-height: 1.3;
            letter-spacing: -0.01em;
        }

        section.body h3:not(div.boxed-text *) {
            font-family: var(--font-serif);
            font-size: 1.5rem;
            font-weight: 600;
            margin-top: var(--spacing-lg);
            margin-bottom: var(--spacing-sm);
            color: var(--text-primary);
            line-height: 1.4;
        }

        section.body h4:not(div.boxed-text *) {
            font-family: var(--font-sans);
            font-size: 1.25rem;
            font-weight: 600;
            margin-top: var(--spacing-md);
            margin-bottom: var(--spacing-sm);
            color: var(--text-secondary);
        }

        section.body h5 {
            font-family: var(--font-sans);
            font-size: 1.125rem;
            font-weight: 600;
            margin-top: var(--spacing-md);
            margin-bottom: var(--spacing-xs);
            color: var(--text-secondary);
        }

        section.body h6 {
            font-family: var(--font-sans);
            font-size: 1.125rem;
            font-weight: 600;
            margin-top: var(--spacing-md);
            margin-bottom: var(--spacing-xs);
            color: var(--text-secondary);
        }

        section.body p.firstPara:not(div.boxed-text *, details *) {
            margin-top: var(--spacing-xl);
        }

        /***** figure *******/

        figure {
            margin: var(--spacing-xl) 0;
            padding: var(--spacing-md);
            background-color: #f8fafc;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            min-height: 70px;
        }

        body.dark figure {
            background-color: var(--dark-bg-secondary);
            border-color: var(--dark-border);
        }

        figure.fig-formula {
            color: inherit;
            background: transparent;
            margin: 0px 0px;
            min-height: 50px;
            padding-top: 5px;
            padding-bottom: 5px;
            border: none;
        }

        .img {
            height: 1.3em;
            width: auto;
            vertical-align: bottom;
        }

        figure img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: var(--shadow-md);
            padding-bottom: 0px;
            margin-bottom: 7px;
        }

        figure .fig-call-window img, 
        figure .table-call-window img {
            border-radius: 0px;
            box-shadow: none;
        }

        body.dark .caption {
            color: var(--dark-text-secondary);
        }

        .fig-call-window,
        .fig-call-window a,
        .fig-call-window a:visited,
        .table-call-window,
        .table-call-window a,
        .table-call-window a:visited {
            text-decoration: none;
            align-self: flex-end;
            margin-top: -13px;
            margin-right: -6px;
            margin-bottom: -15px;
        }

        /* recensions */

        .bibl-cr + .bibl-cr {
            margin-top: 15px;
        }

        .bibl-cr {
            margin-top: 25px;
        }

        section.review {
            position: relative;
            padding-top: 50px;
        }

        section.review:not(:first-child)::before {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #454545;
            top: 40px;
        }

        /* right pane */
        div[id='figures'] figure {
            border-top: none;
            background-color: inherit;
            border: none;
            margin-top: -15px;
            margin-bottom: var(--spacing-md);
            padding-bottom: var(--spacing-md);
            padding-right: var(--spacing-md);
            padding-left: var(--spacing-md);
            padding-top: var(--spacing-xl);
        }

        div[id='figures'] figure + figure {
            border-top: 4px solid #e2e8f0;
            border-radius: 0px;
            margin-top: var(--spacing-md);
            margin-bottom: var(--spacing-md);
            padding-bottom: var(--spacing-md);
            padding-right: var(--spacing-md);
            padding-left: var(--spacing-md);
            padding-top: var(--spacing-xl);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 70px;
        }

        img {
            width: 100%;
            padding-bottom: 5px;
        }

        /****** théâtre ******/

        .speaker {
            font-weight: bold;
        }

        .stage {
            font-style: italic;
            color: var(--lighter-txt-light-theme);
            font-size: 1.0625rem;
            line-height: 1.7;
            margin-top: var(--spacing-md);
            text-align: justify;
            hyphens: auto;
            word-wrap: break-word;
        }

        .dark .stage {
            font-style: italic;
            color: var(--darker-txt-dark-theme);
        }

        /****** table ******/

        table caption {
            font-style: italic;
            margin-bottom: var(--spacing-sm);
            color: var(--text-secondary);
            font-size: 1.2rem;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            display: table;
            text-indent: initial;
            line-height: normal;
            font-weight: normal;
            font-size: medium;
            font-style: normal;
            color: -internal-quirk-inherit;
            text-align: start;
            border-spacing: 2px;
            white-space: normal;
            font-variant: normal;
            margin: 0 0;
            margin-bottom: 7px;
            font-family: var(--font-sans);
            font-size: 0.9375rem;
            background-color: white;
        }

        table.linguistic {
            display: table;
            margin-top: 1em;
            margin-bottom: 1em;
        }

        table.lg {
            display: table;
            width: 100%;
            margin-top: 1em;
            margin-bottom: 1em;
            border: none;
        }

        td[class='num'] {
            width: 40px;
            border: none;
            padding-left: none;
        }

        td[class='l'] {
            border: none;
            padding-left: none;
        }

        th,
        td {
            padding: var(--spacing-sm);
            text-align: left;
            border-bottom: 1px solid #e2e8f0;
            font-size: 0.9rem;
            padding-left: 2px;
        }

        body.dark th,
        body.dark td {
            border-bottom-color: var(--dark-border);
        }

        th {
            font-weight: 600;
            background-color: #f8fafc;
            color: var(--text-primary);
        }

        body.dark th {
            background-color: var(--dark-bg-secondary);
            color: var(--dark-text-primary);
        }

        blockquote table.lg td,
        blockquote table.lg th {
            font-size: 1.1rem;
            padding-left: 2px;
        }

        table.lg td {
            line-height: 120%;
            font-size: 150%;
        }

        .fig-table label,
        .fig-ill label {
            padding: 10px;
            cursor: pointer;
            margin-bottom: 5px;
            line-height: 1.5;
        }

        .expand {
            color: var(--third-color);
            text-decoration: none;
            margin-right: 0.5em;
            cursor: pointer;
        }

        span[class='expand empty'] {
            color: var(--third-color);
            text-decoration: none;
            margin-right: 0.5em;
            cursor: pointer;
        }

        figure .credits,
        figure .caption {
            margin-top: 8px;
            margin-right: 5px;
            margin-bottom: 5px;
            margin-left: 8px;
            align-self: flex-start;
            line-height: 1.5;
            color: var(--text-primary);
            text-align: justify;
            hyphens: auto;
            word-wrap: break-word;
        }

        label {
            margin-bottom: 15px;
        }

        .caption-right-panel,
        .credits-right-panel {
            text-align: left;
            align-self: flex-start;
            line-height: 1.4;
            margin-top: 10px;
            font-size: 0.85rem;
        }

        .label-right-panel {
            text-align: left;
            align-self: flex-start;
            line-height: 1.4;
            font-weight: bold;
            font-size: 0.85rem;
        }

        .img-righ-panel {
            margin-bottom: 5px;
            margin-top: 5px;
        }

        /*counters*/
        section.body {
            counter-reset: section;
        }

        section.body h2:not(div.boxed-text *) {
            counter-reset: subsection;
        }
        section.body h3:not(div.boxed-text *) {
            counter-reset: subsubsection;
        }
        section.body h4:not(div.boxed-text *) {
            counter-reset: subsubsubsection;
        }

        /* descriptions longues */

        details.floating-note {
            width: 100%;
            margin-left: 9px;
            margin-top: 12px;
        }

        details.floating-note .body {
        font-size: smaller;
        line-height: 1.4em;
        }

        details.floating-note .body ul, details.floating-note .body ol {
            margin-left: var(--spacing-sm);
            margin-top: var(--spacing-sm);
            margin-bottom: var(--spacing-sm);
            line-height: 1.4em;
        }

        details.floating-note p.firstPara {
            margin-top: 20px;
        }
        details.floating-note p {
            margin-top: 6px;
        }

        summary::marker  {
            color: var(--third-color);
            content: "⇱  ";
            font-size: 105%;
        }

        .floating-note[open] summary::marker {
            content: "⇲  "; 
        }

        summary span.idno {
            color: var(--third-color);
            font-family: var(--font-sans);
            font-size: 95%;
        }

        /****** annexe ******/

        .appendix, .right-panel-appendix {
            position: relative;
        }

        section.appendix {
            margin-top: 100px;
        }

        section.body section.appendix > h1 {
            margin-bottom: var(--spacing-xl);
        }

        section.appendix::before {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #454545;
            top: -10px;
        }

        .right-panel-appendix::before {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #454545;
            top: -2px;
        }

        .auteur-annexe {
            font-size: 85%;
        }

        section.body frontinclusion h2.sous-titre-annexe {
            margin-top: -10px;
            font-size: 1.5rem;
            line-height: 100%;
            font-weight: normal;
        }

        bodyInclusion p.firstPara:not(div.boxed-text *) {
            margin-top: 50px;
        }

        /* biblio right panel + collection de recenion */

        .right-contents #refs ul {
            list-style: none;
        }

        .right-contents #refs li {
            margin-left: 1.5em;
            margin-bottom: var(--spacing-md);
            font-size: 0.9375rem;
            line-height: 1.6;
        }

        .right-contents #refs h3 {
            font-size: 1.125rem;
            font-weight: 600;
            margin-top: var(--spacing-lg);
            margin-bottom: var(--spacing-sm);
            color: var(--text-primary);
            padding-top: 10px;
        }

        body.dark .right-contents #refs h3 {
            color: var(--dark-text-primary);
        }

        .right-contents #refs h4 {
            margin-bottom: 10px;
        }

        .review_bibliography p.bibl {
            margin-left: 1.5em;
            text-indent: -1.5em;
            font-size: 90%;
        }

        section.review p.bibl-cr {
            margin-bottom: 50px;
            margin-left: 30px;
        }

        /***** TOC (from CHARLES) *******/

        #toc {
            font-size: 0.9375rem;
        }

        /*#toc li {
            margin-top: var(--spacing-sm);
        }*/

        #toc a {
            color: var(--text-secondary);
            text-decoration: none;
            display: block;
            padding: var(--spacing-xs) var(--spacing-sm);
            border-radius: 6px;
            transition: all var(--transition-fast);
        }

        #toc a:hover {
            color: var(--primary-color);
            background-color: rgba(26, 84, 144, 0.08);
        }

        body.dark #toc a {
            color: var(--dark-text-secondary);
        }

        body.dark #toc a:hover {
            color: var(--accent-color);
            background-color: rgba(14, 165, 233, 0.1);
        }

        #toc a.active {
            color: var(--primary-color);
            background-color: rgba(26, 84, 144, 0.12);
            font-weight: 600;
            padding-left: 5px;
            padding-right: 5px;
        }

        body.dark #toc a.active {
            color: var(--accent-color);
            background-color: rgba(14, 165, 233, 0.15);
        }

        #toc ol {
            list-style-type: none;
        }

        #toc .section2 {
            margin-left: 1rem;
        }

        #toc .section3 {
            margin-left: 2rem;
        }

        #toc .section4 {
            margin-left: 3rem;
        }

        #toc .section5 {
            margin-left: 4rem;
        }

        .toc-floatingText {
            background-color: #ddd;
        }

        /***** REVIEW *******/
        .author-aut,
        .authority_affiliation,
        .authority_mail {
            text-align: right;
        }

        /***** INLINE ELEMENTS (from CHARLES) ******/

        span[class*="fn-call"], sup {
            font-size: 0.75em;
            vertical-align: super;
            line-height: 0;
            font-weight: 600;
        }

        sub {
            font-size: .60em;
        }

        span[class*="fn-call"] {
            color: var(--primary-color);
            cursor: pointer;
            transition: color var(--transition-fast);
        }

        span[class*="fn-call"]:hover {
            color: var(--primary-hover);
        }

        body.dark span[class*="fn-call"] {
            color: var(--accent-color);
        }

        span.bibr-call {
            color: var(--primary-color);
            cursor: pointer;
            text-decoration: none;
            border-bottom: 1px dotted var(--primary-color);
            transition: all var(--transition-fast);
        }

        span.bibr-call:hover {
            color: var(--primary-hover);
            border-bottom-color: var(--primary-hover);
        }

        body.dark span.bibr-call {
            color: var(--accent-color);
            border-bottom-color: var(--accent-color);
        }

        /***** FOOTNOTES (from CHARLES) ******/
        div[id^="footnotes"] ul,
        div[id^="footnotes"] ul {
            list-style-type: none;
        }

        div[id^="footnotes"] li {
            padding-left: var(--spacing-md);
            padding-right: var(--spacing-md);
            padding-top: var(--spacing-sm);
            padding-bottom: var(--spacing-sm);
            background-color: #fafaf9;
            border-left: 3px solid transparent;
            border-radius: 8px;
            transition: all var(--transition-base);
            box-sizing: border-box;
        }

        body.dark div[id^="footnotes"] li {
            background-color: var(--dark-bg-secondary);
        }

        div[id^="footnotes"] li.focus, #refs .ref.focus, #refs li.bibl.focus {
            border-left-color: var(--primary-color);
            background-color: rgba(26, 84, 144, 0.05);
            border-left-color: var(--primary-color);
        }

        body.dark div[id^="footnotes"] li.focus {
            border-left-color: var(--accent-color);
            background-color: rgba(14, 165, 233, 0.08);
        }

        div[id^="footnotes"] li .label {
            color: var(--primary-color);
            font-weight: 600;
            cursor: pointer;
            font-family: var(--font-sans);
            display: inline-block;
            margin-right: 10px;
        }

        body.dark div[id^="footnotes"] .label {
            color: var(--accent-color);
        }

        div[id^="footnotes"] li .label:hover {
            color: var(--grey-color);
        }

        div[id^="footnotes"] li .label:before {
            content: '[';
        }

        div[id^="footnotes"] li .label:after {
            content: '] ';
        }

        /* je crois que les mixed-citation ne concernait que les réfs biblio du right panel en JATS, si oui, à supprimer (car la structure a changé) */
        .mixed-citation {
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 10px;
            border-bottom: 1px solid #888;
        }

        .dark div[id^="footnotes"] li, .dark .mixed-citation {
            border-bottom: 1px solid var(--dark-theme-txt);
        }

        /*********** INDEX **********/
        #index .index-level1 {
            list-style-type: none;
            margin-top: 3%;
            font-weight: bold;
        }

        #index .index-level2 {
            list-style-type: none;
            margin-top: 1%;
            margin-left: 5%;
            font-weight: normal;
        }

        #index .index-level3 {
            list-style-type: none;
            margin-top: 1%;
            margin-left: 5%;
            font-weight: normal;
        }

        .index-anchor {
            color: var(--third-color);
            font-size: 75%;
        }

        .index-link:first-of-type {
            margin-left: 12px;
        }

        /* collapse via toggle-button */
        .index-level2 {
            display: none;
        }

        .toggle-button {
            cursor: pointer;
            color: var(--third-color);
        }

        .expanded .toggle-button::after {
            content: "[-]";
        }

        .collapsed .toggle-button::after {
            content: "[+]";
        }

        /******************************************/

        body.dark .journal-meta {
            background-color: var(--dark-bg-secondary);
        }

        .meta-field {
            margin-bottom: var(--spacing-md);
            font-family: var(--font-sans);
        }

        .meta-field > div:first-child {
            color: var(--grey-color);
            margin-top: 10px;
        }

        .meta-field:before {
            display: block;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            margin-bottom: var(--spacing-xs);
        }

        body.dark .meta-field:before {
            color: var(--dark-text-secondary);
        }

        .abstract {
            margin-top: 6px;
        }

        .correction {
            border: 1px solid black;
            margin-top: 6px;
            padding: 3px;
        }

        .ack {
            font-style: italic;
        }

        .front-matter, .epigraph {
            margin-bottom: 20px;
            font-size: 95%;
        }


        .front-matter:last-of-type {
            margin-bottom: 50px;
        }

        .kwd {
            display: inline-block;
            margin-right: 5px;
        }

        .kwd:after {
            margin-left: 5px;
            content: "·";
        }

        .kwd:last-child::after {
            content: none;
        }

        .underline {
            text-decoration: underline;
        }

        /********* BOXED TEXT (from CHARLES) **********/
        div.boxed-text {
            border: 2px solid var(--primary-color);
            border-radius: 12px;
            padding: var(--spacing-lg);
            margin: var(--spacing-xl) 0;
            background-color: rgba(26, 84, 144, 0.03);
        }

        body.dark div.boxed-text {
            border-color: var(--accent-color);
            background-color: rgba(14, 165, 233, 0.05);
        }

        div.boxed-text h1 {
            font-size: 2.3rem;
            margin-bottom: 10px;
            line-height: normal;
            padding-top: 25px;
        }

        div.boxed-text h2, frontinclusionencadre .titlePage .title-main {
            font-size: 1.8rem;
            margin-bottom: 20px;
            line-height: normal;
            padding-top: 25px;
        }

        frontinclusionencadre .titlePage .title-main {
            font-weight: bold;
        }

        div.boxed-text h3 {
            font-size: 1.6rem;
            margin-bottom: 20px;
            line-height: normal;
            padding-top: 25px;
        }

        div.boxed-text p {
            font-size: 1.2rem;
            margin-top: 10px;
            line-height: 150%;
            word-wrap: break-word;
        }

        div.boxed-text * {
            font-size: 1.2rem;
        }

        /** galleys DL links**/
        div.item.galleys {
            font-size: 0.75rem;
        }
        div.item.galleys h2 {
            display: none;
        }
        div.item.galleys ul {
            list-style-type: none;
        }

        /*********** QUOTE (from CHARLES) *******************/
        disp-quote {
            display: block;
            text-align: right;
        }

        blockquote {
            margin: var(--spacing-lg) 0;
            padding-left: var(--spacing-lg);
            border-left: 4px solid var(--primary-color);
            font-style: italic;
            font-size: 1.0625rem;
            color: var(--text-secondary);
        }

        body.dark blockquote {
            border-left-color: var(--accent-color);
            color: var(--dark-text-secondary);
        }

        .epigraph blockquote {
            font-size: 100%;
        }

        blockquote + blockquote {
            margin-top: 1.7em;
        }

        .quotation2 {
            border-left: 2px solid var(--grey-color);
            padding-left: 5%;
            margin-left: -5%;
        }

        /*********** BR *******************/
        .lb::after {
            content: "\a";
            white-space: pre;
        }

        /*************** DRAG-BAR (from CHARLES) ***************************/
        ul, ol {
            margin-top: 1ex;
            margin-bottom: 1.5ex;
            line-height: 130%;
        }

        iframe {
            border: solid 0.5pt;
        }

        #map {
            height: 400px;
        }

        #drag-bar {
            flex: 0 0 3px;
            cursor: col-resize;
            background-color: #e2e8f0;
            position: relative;
            z-index: 1000;
            transition: background-color var(--transition-fast);
        }


        #drag-bar:hover,
        #drag-bar:active  {
            background-color: var(--primary-color);
        }

        body.dark #drag-bar {
            background-color: var(--dark-border);
        }

        body.dark #drag-bar:hover {
            background-color: var(--accent-color);
        }

        /* signature et auteur de la section*/

        .article-wrap section section p.signature, .article-wrap section section p.author-section-body {
            text-align: right;
        }

        /* Liens (from CHARLES) */
        a {
            color: var(--primary-color);
            text-decoration: none;
            transition: color var(--transition-fast);
        }

        a:hover {
            color: var(--primary-hover);
        }

        body.dark a {
            color: var(--accent-color);
        }

        /* Scrollbar personnalisée (from CHARLES) */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        body.dark ::-webkit-scrollbar-thumb {
            background: var(--dark-border);
        }

        body.dark ::-webkit-scrollbar-thumb:hover {
            background: #475569;
        }

        /* Styles spécifiques pour Mirador dans le panneau latéral (from CHARLES) */
        #mirador-container {
            width: 100%;
            height: calc(100vh - 80px);
            position: relative;
            min-height: 500px;
        }

        /* Assurer que le conteneur Mirador prend toute la hauteur disponible */
        #mirador.content-tab {
            padding: 0;
            height: calc(100vh - 50px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* Adapter le thème Mirador au mode sombre */
        body.dark #mirador-container {
            background-color: var(--dark-theme-bg);
        }

        /* S'assurer que Mirador est visible */
        #mirador-container > div {
            width: 100% !important;
            height: 100% !important;
        }

        /* Responsive (from CHARLES) */
        @media (max-width: 1200px) {
            .right-contents {
                width: 320px;
            }

            .left-contents {
                max-width: calc(100% - 320px);
            }
        }

        @media (max-width: 768px) {
            :root {
                --nav-height: 56px;
            }

            .article-and-metas {
                flex-direction: column;
                display: flex;
                width: 100%;
                overflow: hidden;
            }

            .left-contents,
            .right-contents {
                width: 100%;
                max-width: 100%;
                position: relative;
            }

            .right-contents {
                border-left: none;
                border-top: 1px solid #e2e8f0;
                height: auto;
            }

            body.dark .right-contents {
                border-top-color: var(--dark-border);
            }
        }

        div.idno {
            margin-left: 7px;
            border-left: 1px solid var(--text-secondary);
            padding-left: 5px;
            margin-top: 2px;
            margin-bottom: 2px;
        }

        .obj_article_details .cmp_notification {
            font-family: var(--font-sans);
            font-size: 0.825rem;
            padding: 8px 16px;
            margin-bottom: var(--spacing-lg);
            background: #fff8e1;
            border: 1px solid #ffe082;
            border-radius: 3px;
            color: #4e342e;
            display: none;
            align-items: center;
            gap: 12px;
        }

        .obj_article_details .cmp_notification a {
            font-weight: 600;
            color: inherit;
            text-decoration: underline;
        }

        /* ── Titre ───────────────────────────────────────────────────────────── */

        .obj_article_details h1.page_title {
            font-family: var(--font-serif);
            font-size: 1.75rem;
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: -0.015em;
            color: var(--text-primary);
            margin: 0 0 var(--spacing-lg);
            padding: var(--spacing-lg) 0 var(--spacing-md);
            border-bottom: 1px solid #e2e8f0;
        }

        body.dark .obj_article_details h1.page_title {
            color: var(--dark-text-primary);
            border-bottom-color: var(--dark-border);
        }

        /* ── Layout .row ─────────────────────────────────────────────────────── */

        .obj_article_details .row {
            display: flex;
            gap: var(--spacing-xl);
            align-items: flex-start;
            padding-bottom: var(--spacing-xl);
        }

        .obj_article_details .main_entry {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
            padding-right: var(--spacing-lg);
        }

        .obj_article_details .entry_details {
            flex: 0 0 180px;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            border-left: 1px solid #e2e8f0;
            padding-left: var(--spacing-lg);
        }

        body.dark .obj_article_details .entry_details {
            border-left-color: var(--dark-border);
        }

        /* ── Labels h2 ───────────────────────────────────────────────────────── */

        .obj_article_details .item > h2.label,
        .obj_article_details .sub_item > h2.label {
            font-family: var(--font-sans);
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--text-muted);
            margin-bottom: 4px;
            margin-top: 0;
            padding: 0;
            border: none;
            background: none;
        }

        /* h2 accessible uniquement aux lecteurs d'écran */
        .obj_article_details h2.pkp_screen_reader {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
            border: 0;
        }

        /* ── Auteurs ─────────────────────────────────────────────────────────── */

        .obj_article_details .item.authors ul.authors {
            list-style: none;
            padding: 0;
            margin: 0;
            flex-wrap: wrap;
            gap: 4px 16px;
        }

        .obj_article_details .item.authors ul.authors li {
            font-family: var(--font-sans);
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--text-primary);
            margin: 0;
            padding: 1em;
        }

        body.dark .obj_article_details .item.authors ul.authors li {
            color: var(--dark-text-primary);
        }

        /* ── Résumé ──────────────────────────────────────────────────────────── */

        .obj_article_details .item.abstract p {
            font-family: var(--font-serif);
            font-size: 0.9375rem;
            line-height: 1.7;
            color: var(--text-secondary);
            text-align: justify;
            hyphens: auto;
            margin: 0;
        }

        body.dark .obj_article_details .item.abstract p {
            color: var(--dark-text-secondary);
        }

        /* ── Galleys ─────────────────────────────────────────────────────────── */

        .obj_article_details .item.galleys ul.galleys_links {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .obj_article_details .item.galleys a.obj_galley_link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            width: 100%;
            font-family: var(--font-sans);
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: 5px 12px;
            border: 1.5px solid var(--primary-color);
            border-radius: 2px;
            color: var(--primary-color);
            text-decoration: none;
            transition: background var(--transition-fast), color var(--transition-fast);
            background: transparent;
        }

        .obj_article_details .item.galleys a.obj_galley_link:hover {
            background: var(--primary-color);
            color: #fff;
        }

        body.dark .obj_article_details .item.galleys a.obj_galley_link {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }

        body.dark .obj_article_details .item.galleys a.obj_galley_link:hover {
            background: var(--accent-color);
            color: #fff;
        }

        /* ── Rubrique / issue ────────────────────────────────────────────────── */

        .obj_article_details .item.issue .value {
            font-family: var(--font-sans);
            font-size: 0.875rem;
            color: var(--text-secondary);
        }

        body.dark .obj_article_details .item.issue .value {
            color: var(--dark-text-secondary);
        }

        .obj_article_details{
            border-bottom: 2px solid #718EAC;
        }

        /* ── Responsive ──────────────────────────────────────────────────────── */

        @media (max-width: 768px) {
            .obj_article_details .row {
                flex-direction: column;
                gap: var(--spacing-lg);
            }

            .obj_article_details .main_entry {
                padding-right: 0;
            }

            .obj_article_details .entry_details {
                flex: none;
                border-left: none;
                border-top: 1px solid #e2e8f0;
                padding-left: 0;
                padding-top: var(--spacing-md);
            }

            body.dark .obj_article_details .entry_details {
                border-top-color: var(--dark-border);
            }
        }

        .pkp_structure_footer_wrapper{
        border-top: 2px solid#718EAC;
        margin-top: 2em;
        }

        .filter-bar{
            display: none;
        }

        .LangMode{
            display: none;
        }

        .affiliation{
            display: block;
        }

        .pkp_structure_head{
        font-family: "Merriweather Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
        background-color: white;
        padding: 8px 0 0;
        border-bottom: 2px solid #718EAC;
        font-size: 1rem;
        line-height: 1.5;
            height: inherit;
            align-items: center;
        padding: 0 var(--spacing-md);
        }

        .pkp_site_name{
            padding: 0.8rem;
        }

        .pkp_brand_footer{
            max-width: 10%;
        padding: 20px;
        align-content: center;
        display: flex;
        margin: auto;
        }

        /* ── Linked Data cards ───────────────────────────────────────────────── */

        .linked_data {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: var(--spacing-md);
            background-color: #fafaf9;
            border: 1px solid #e7e5e4;
            border-left: 3px solid var(--primary-color);
            border-radius: 6px;
            margin-bottom: var(--spacing-md);
            box-sizing: border-box;
            transition: box-shadow var(--transition-base), border-color var(--transition-base);
            font-family: var(--font-sans);
        }

        .linked_data:hover {
            box-shadow: var(--shadow-md);
            border-left-color: var(--accent-color);
        }

        body.dark .linked_data {
            background-color: var(--dark-bg-secondary);
            border-color: var(--dark-border);
            border-left-color: var(--accent-color);
        }

        /* Titre du dataset */
        .linked_data .data-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 0 0 2px;
            line-height: 1.3;
        }

        body.dark .linked_data .data-title {
            color: var(--dark-text-primary);
        }

        /* Auteurs — empilés correctement */
        .linked_data .data-author {
            font-size: 0.78rem;
            color: var(--text-secondary);
            margin: 0;
            line-height: 1.5;
        }

        .linked_data .data-author + .data-author {
            margin-top: 0;
        }

        .linked_data .data-author::before {
            content: "";
            display: inline-block;
            width: 0.4em;
            height: 0.4em;
            background-color: var(--accent-color);
            border-radius: 50%;
            margin-right: 5px;
            vertical-align: middle;
            opacity: 0.7;
        }

        /* Date */
        .linked_data .data-date {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-muted);
            text-align: right;
            margin: 0;
            white-space: nowrap;
            align-self: start;
        }

        body.dark .linked_data .data-date {
            color: var(--dark-text-secondary);
        }

        /* Description */
        .linked_data .data-desc {
            font-size: 0.8rem;
            color: var(--text-secondary);
            line-height: 1.55;
            margin: 4px 0 0;
            padding-top: var(--spacing-xs);
            border-top: 1px solid #e7e5e4;
        }

        body.dark .linked_data .data-desc {
            color: var(--dark-text-secondary);
            border-top-color: var(--dark-border);
        }

        /* Citation */
        .linked_data .data-citation {
            font-size: 0.75rem;
            font-style: italic;
            color: var(--text-muted);
            margin: 2px 0 0;
            line-height: 1.5;
            padding: var(--spacing-xs) var(--spacing-sm);
            background: rgba(26, 84, 144, 0.05);
            border-radius: 3px;
        }

        body.dark .linked_data .data-citation {
            color: var(--dark-text-secondary);
            background: rgba(14, 165, 233, 0.08);
        }

        /* Ligne licence + lien côte à côte */
        .linked_data .data-license,
        .linked_data .data-link {
            display: inline;
        }

        .linked_data .data-license + .data-link,
        .linked_data .data-link {
            /* regroupés dans une pseudo-ligne via order + flex sur le parent */
        }

        /* Licence */
        .linked_data .data-license {
            order: 5;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: #fff;
            background-color: var(--primary-color);
            padding: 2px 7px;
            border-radius: 3px;
            margin: 0;
            align-self: center;
            justify-self: start;
            line-height: 1.6;
        }

        body.dark .linked_data .data-license {
            background-color: var(--accent-color);
        }

        /* Lien DOI / URL */
        .linked_data .data-link {
            font-size: 0.75rem;
            margin: 0;
            text-align: right;
            align-self: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .linked_data .data-link a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            transition: color var(--transition-fast);
        }

        .linked_data .data-link a:hover {
            color: var(--accent-color);
            text-decoration: underline;
        }

        body.dark .linked_data .data-link a {
            color: var(--accent-color);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .linked_data .data-date,
            .linked_data .data-link {
                text-align: left;
            }
        }
        /* ── Citation — clic pour copier ─────────────────────────────────────── */

        .linked_data .data-citation {
            cursor: pointer;
            user-select: none;
            position: relative;
            transition: background var(--transition-fast), color var(--transition-fast);
        }

        .linked_data .data-citation:hover {
            background: rgba(26, 84, 144, 0.12);
            color: var(--primary-color);
        }

        body.dark .linked_data .data-citation:hover {
            background: rgba(14, 165, 233, 0.15);
            color: var(--accent-color);
        }

        .linked_data .data-citation::after {
            font-style: normal;
            font-size: 0.7em;
            opacity: 0.45;
            transition: opacity var(--transition-fast);
        }

        .linked_data .data-citation:hover::after {
            opacity: 1;
        }

        .linked_data .data-citation.copied {
            background: rgba(16, 185, 129, 0.12);
            color: #059669;
            font-style: normal;
        }

        .linked_data .data-citation.copied::after {
            content: " ✓";
            opacity: 1;
        }

        .expan button{
        background: none;
        background-color: rgba(0, 0, 0, 0);
        border: none;
        cursor: pointer;
        font-size: inherit;
        order: 5;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #fff;
        background-color: var(--primary-color);
        padding: 2px 7px;
        border-radius: 3px;
        margin: 0;
        margin-top: 0px;
        margin-bottom: 0px;
        align-self: center;
        justify-self: start;
        line-height: 1.6;
        display: flex;
        margin: auto;
        margin-bottom: 1em;
        margin-top: 1em;
        }

        #refs li.bibl {
            padding: var(--spacing-sm) var(--spacing-md);
            border-left: 3px solid transparent;
            border-right: 5px solid transparent;
            border-radius: 8px;
            transition: all var(--transition-base);
            box-sizing: border-box;
        }

        body.dark #refs li.bibl {
            background-color: var(--dark-bg-secondary);
        }

        body.dark #refs li.bibl.focus {
            border-left-color: var(--accent-color);
            background-color: rgba(224, 123, 57, 0.08);
        }

        /* ----------- ajouts MS ------------ */

        :root {
            /* Typography redux = polices du thèmes par défaut */
            --font-sans: "Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",
            "Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
            --font-serif: "Noto Serif",-apple-system,BlinkMacSystemFont,"Segoe UI",
            "Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;;
            --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas,
                monospace;
        }

        /* #refs li.focus { => manquant dans la version xml_2_html mais bien présente ici
            border-left-color: var(--primary-color);
            background-color: rgba(26, 84, 144, 0.05);
            border-right: 5px solid var(--third-color);
        } */

        div[id^="refs"] li {
            padding-left: calc(1.3*var(--spacing-md)); /* quick and dirty fix */
            padding-right: var(--spacing-md);
            padding-top: var(--spacing-sm);
            padding-bottom: var(--spacing-sm);
            background-color: #fafaf9;
            border-left: 3px solid transparent;
            border-radius: 8px;
            transition: all var(--transition-base);
            box-sizing: border-box;
        }

        .dark #refs li.focus {
            border-left-color: var(--accent-color);
            background-color: rgba(14, 165, 233, 0.08);
        }

        body.dark div[id^="refs"] li {
            background-color: var(--dark-bg-secondary);
            border-bottom: 1px solid var(--dark-theme-txt);
        }


        .pkp_site_name .is_img img {
        max-height: 80px; /*  => à retravailler via les media queries */
        max-width: 100%;
        width: auto;
        height: auto;
        }

        .obj_article_details .entry_details {
        flex: 0 0 480px;
        }

        .copyright img {
        max-width: 88px;
        }

        .obj_article_details .entry_details .cover_image {
            max-width: 50%;
        }

        .obj_article_details .item.galleys a.obj_galley_link {  
        max-width: 20vw;     /* vite fait */
        }

        .page.page_article {
        margin-left: 2vw;     /* à revoir */
        }

        /* ------ bouton comment citer : repris du thème par défaut ------- */

        .obj_article_details .citation_display .value {
        font-size: 1rem;
        }

        .obj_article_details .citation_display .csl-left-margin {
        display:none
        }

        .obj_article_details .citation_display [aria-hidden="true"] {
        display:none
        }

        .obj_article_details .citation_display .citation_formats {
        margin-top:1em;
        border:1px solid rgba(0,0,0,0.4);
        border-radius:3px
        }

        .obj_article_details .citation_display .citation_formats_button {
        position:relative;
        background:transparent;
        border:none;
        border-bottom-left-radius:0;
        border-bottom-right-radius:0;
        box-shadow:none;
        padding:0 1em;
        width:100%;
        font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
        font-weight:400;
        color:rgba(0,0,0,0.54);
        text-align:left
        }
        
        .obj_article_details .citation_display .citation_formats_button:after {
        display:inline-block;
        font:normal normal normal 14px/1 FontAwesome;
        font-size:inherit;
        text-rendering:auto;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
        transform:translate(0, 0);
        content:"\f0d7";
        position:absolute;
        top:50%;
        right:1em;
        transform:translateY(-50%)
        }

        .obj_article_details .citation_display .citation_formats_button[aria-expanded="true"]:after {
        content:"\f0d8"
        }

        .obj_article_details .citation_display .citation_formats_button:focus {
        background:#ddd;
        outline:0
        }

        .obj_article_details .citation_display .citation_formats_styles {
        margin:0;
        padding:0;
        list-style:none
        }

        .obj_article_details .citation_display .citation_formats_styles a {
        display:block;
        padding:.5em 1em;
        border-bottom:1px solid #ddd;
        text-decoration:none
        }

        .obj_article_details .citation_display .citation_formats_styles a:focus {
        background:#ddd;
        outline:0
        }

        .obj_article_details .citation_display .citation_formats_styles li:last-child a {
        border-bottom:none
        }

        .obj_article_details .citation_display .citation_formats_list .label {
        padding:1em 1em .25em 1em
        }

        .obj_article_details .citation_display .citation_formats_styles+.label {
        border-top:1px solid #ddd
        }
        
        .obj_article_details .citation_display span {
        margin-right:0.5em
        }

        /* ----- préférences perso -------- */

        section.body h2:not(div.boxed-text *) {
            margin-top: calc(1.5*var(--spacing-md));
        }

        .wrap {
            padding-top: var(--spacing-md);
        }

        /* ------- supprime la bannière qui rentre en conflit avec le fil d'Ariane => déplacer par la suite le logo dans le breadcrumb via le template breadcrumbs_article ? ------  */

        /* ----- réduction des écarts réintroduits par le thème par défaut + suppression des filets idem ---- */

        .obj_article_details .entry_details {
            flex: 0 0 420px;
        }

        .obj_article_details .entry_details .item {
            padding: 0;
        }

        .cmp_breadcrumbs ol {
            margin-bottom: 1.5ex;
        }

        .cmp_breadcrumbs a {
    text-decoration: none;
    }

        .right-contents {
            top: var(--nav-height); /* --- évite la superposition avec le fil d'Ariane --- */
        }

        .row::before, .row::after {
            display: none;
        }

        .obj_article_details .item {
            padding: 0
        }

        .obj_article_details .row {
            border-top: 0;
            border-bottom: 0;
        }

        /* Responsive (from CHARLES) */
        
        @media (max-width: 1200px) {
            .right-contents {
                width: 320px;
            }

            .left-contents {
                max-width: calc(100% - 320px);
            }
        }

        @media (max-width: 768px) {
            :root {
                --nav-height: 56px;
            }

            .article-and-metas {
                flex-direction: column;
                display: flex;
                width: 100%;
                overflow: hidden;
            }

            .left-contents,
            .right-contents {
                width: 100%;
                max-width: 100%;
                position: relative;
            }

            .right-contents {
                border-left: none;
                border-top: 1px solid #e2e8f0;
                height: auto;
            }

            body.dark .right-contents {
                border-top-color: var(--dark-border);
            }
        }

        div.idno {
            margin-left: 7px;
            border-left: 1px solid var(--text-secondary);
            padding-left: 5px;
            margin-top: 2px;
            margin-bottom: 2px;
        }

        .obj_article_details .cmp_notification {
            font-family: var(--font-sans);
            font-size: 0.825rem;
            padding: 8px 16px;
            margin-bottom: var(--spacing-lg);
            background: #fff8e1;
            border: 1px solid #ffe082;
            border-radius: 3px;
            color: #4e342e;
            display: none;
            align-items: center;
            gap: 12px;
        }

        .obj_article_details .cmp_notification a {
            font-weight: 600;
            color: inherit;
            text-decoration: underline;
        }

        /* TODO */

        .pkp_footer_content {
        color: red;
        }

        .dark section.body h3:not(div.boxed-text *) {
            color: red;
        }

        .pkp_block.block_browse::before {
    content: "bloc naviguer à déplacer dans le bloc supérieur ?";
    font-size: 2rem;
    color: red;
    text-transform: uppercase;
    text-align: center;
        }
        
        /* ajouts début juin */

        /* quick fix pour les numéros d'équations non sélectables pour l'instant, cf. https://drafts.csswg.org/selectors-4/#has-pseudo example 17 */

        p:has(+ .fig-formula) {
        float: right;
    }

        /* appels de références et de figures alignées sur les footnotes> */

    /* .bib-ref-call:hover, .fig-call:hover {
    color: var(--primary-hover);
    } */

    .bib-ref-call, .fig-call {
    /* color: var(--primary-color);
    text-decoration: none; */
    cursor: pointer;
    transition: color var(--transition-fast);
    }

        /* équations block plus grosses et plus de padding-top */

        figure.fig-formula {
        color: inherit;
        background: transparent;
        margin: 0px 0px;
        min-height: 50px;
        padding-top: 20px;
        padding-bottom: 5px;
        border: none;
        font-size: calc(1.3 * (var(--spacing-md)));
    }

    /* bloc metadata */

    .obj_article_details h1.page_title {
        border-bottom: 1px solid black;
        margin-top: var(--spacing-md);
        font-size: calc(2 * (var(--font-size)));
        max-width: 40vw;
        margin-bottom: var(--spacing-xs);
    }

    .obj_article_details .main_entry {
        gap: var(--spacing-sm)
    }

    .obj_article_details .item.keywords {
        padding-top: 0;
    }

    .keywords > span {
        line-height: 1.4;
    }

    .obj_article_details .entry_details .copyright p {
        font-family: var(--font-family);
    line-height: var(--current-line-height);
    font-size: calc(0.8 * (var(--font-size)));
        margin-bottom: var(--spacing-xs);
    }

    .obj_article_details .item.keywords .label, 
    .obj_article_details .main_entry .item .label, 
    .obj_article_details .main_entry .item.doi .label, 
    .obj_article_details .entry_details .item .label {
        margin-bottom: 0.2rem;;
    }

    .obj_article_details .item.abstract p {
        color: var(--color)
    }

    .obj_article_details .item > h2.label, .obj_article_details .sub_item > h2.label {
        text-transform: none;
        color: var(--color);
    }


        /* going full CAMBOUIS */

        :root{
    --font-family: 'Brill';
    --galley-family: 'Quarte';
    --header-size:calc(14px + (22 - 14) * ((100vw - 300px) / (1800 - 300)));
    --page-title: calc(40px + (55 - 40) * ((100vw - 300px) / (1800 - 300)));
    --page-subtitle: calc(24px + (34 - 24) * ((100vw - 300px) / (1800 - 300)));
    --font-size: calc(16px + (24 - 16) * ((100vw - 300px) / (1800 - 300)));
    --galley-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1800 - 300)));
    --current-line-height: 1.15em;
    --title-line-height: 0.8em;
    --cancel-button: 'x';
    --color: black;
    --border: 1px solid var(--color);
    --margin-top:10px;
    --margin-bottom:8px;
    --indentation: 53px;
    --custom-margin-left-au-pif: 3vw
    }

    body {
        font-family: var(--font-family);
        font-size: var(--font-size);
        color:var(--color);
        line-height: var(--current-line-height);
        font-size: var(--font-size);
        /* width: 60%; */
        border-right: none;
    }

    .left-contents {
        display: block;
    }

    section.body p:not(div.boxed-text *, .caption, .credits, .stage, details *, .front-matter *){
        font-family: var(--font-family);
        font-size: var(--font-size);
        color:var(--color);
        line-height: var(--current-line-height);
        /* width: 60%; */
        border-right: none;
        text-align: left;
    }

    section.body h2:not(div.boxed-text *) {
        font-family: var(--font-family);
        color:var(--color);
        /* width: 60%; */
        border-right: none;
        text-align: left;
        line-height: var(--title-line-height);
        font-size: var(--page-subtitle);
        display: block;
        font-weight: 700;
        border-bottom: 1px solid black;
        margin-top: calc(4 * var(--margin-top));
        padding-bottom: var(--margin-bottom);
        margin-bottom: var(--margin-top);
        letter-spacing: -0.02em;
    }

    .left-contents figure {
        margin-left: var(--custom-margin-left-au-pif);
        background-color: white;
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }

    .left-contents figure img {
    box-shadow: none;
    }

    .obj_article_details .item.galleys ul.galleys_links {
        margin-bottom: 1rem;
    }

    .obj_article_details .item.galleys a.obj_galley_link {
        border: 1.5px solid var(--color);
        color: var(--color);
        font-size: 1rem;
        padding: 15px 0px;
        width: 50%;
    }

    .obj_article_details .item.galleys a.obj_galley_link:hover {
    background: var(--color);
    }

    table {
        border-collapse: unset;
    }

    a {
    color: var(--color);
    text-decoration: underline;
    transition: color var(--transition-fast);
    }

    a:hover {
    color: white;
    background: var(--color);
    }

    td:not(:first-of-type) {
        border-bottom: solid 1px black !important;
    }

    .article-wrap ul, .article-wrap ol {
        margin-left: var(--spacing-lg);
        margin-top: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        font-family: var(--font-family);
        font-style: normal;
        font-size: var(--font-size);
        color:var(--color);
        line-height: var(--current-line-height);
        /* width: 60%; */
        border-right: none;
        text-align: left;
        margin-left: var(--custom-margin-left-au-pif);
    }

    .article-wrap ol > li::marker {
        font-family: var(--font-family);
    font-size: var(--font-size);
    font-variant-numeric: lining-nums;
    }

    section.body .title, .text, .article-wrap .link{
        color: var(--color);
    }

    section.body a, .content.link{
        font-style: italic;
        color: var(--color);
    }

    section.body a:hover {
    color: white;
    background: var(--color);
    transition: var(--transition-fast);
    }

    section.body > .article-wrap > div a:hover,
    section.body > .article-wrap > div a .link:hover{
        background-color: black;
        color: white;
    }

    .article-wrap .bib-ref-call,
    .article-wrap .footnote-call {
        text-decoration: underline;
        cursor: pointer;
        padding-right: 3px;
        padding-left: 3px;
        border-bottom: 1px solid rgba(11, 157, 217, 0);
    }

    .article-wrap .fig-call {
        text-decoration: underline;
        cursor: pointer;
        border-bottom: 1px solid rgba(11, 157, 217, 0);
    }

    .article-wrap .bib-ref-call:hover,
    .article-wrap .fig-call:hover,
    .article-wrap .footnote-call:hover,
    .article-wrap .fn-call:hover {
        background-color: black;
        color: white;
    }

    span[class*="fn-call"] {
        color: var(--color);
        padding-left: 1px;
        padding-right: 1px;
    }

    summary span.idno {
    color: var(--color);
    font-family: var(--font-family);
    font-size: calc(0.8 * (var(--font-size)));
    }

    table.lg { /* = poème ? */
        font-family: serif;
        font-size: var(--font-serif);
    }

    table.lg td {
        line-height: 100%;
    }

    table.lg > td:not(:first-of-type) {
        text-decoration: none
    }


    .right-contents {
    font-size: calc(var(--font-size) / 1.3);
    line-height: var(--current-line-height);
    color: var(--color);
    border-bottom: none;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border-left: none
    }

    .front > .button-tabs {
        background-color: #fafafa;
    border-bottom: 1px solid black;
        margin-bottom: var(--spacing-xs);
        background-color: white;
    }

    .focus-tab {
        color: rgba(0, 0, 0, 0.9);
    background: #fff;
    }

    .focus-tab:hover {
    background: var(--color);
    color: white;
    }

    .tab-btn {
        font-family: var(--font-family);
        color:var(--color);
        font-size: calc(0.8 * var(--font-size));
        border-right: none;
    background: white;
        padding: 0;
    }

    .tab-btn[data-key="toc"] {
        margin-right: 1%;
    }

    .tab-btn:hover {
    background: var(--color);
    color: white;
    }

    #toc, #toc a {
        font-size: var(--font-size);
        font-style: italic;
        color:var(--color);
        line-height: calc(0.8*var(--current-line-height));
        font-family: var(--font-family);
    }

    #toc a:hover {
    color: white;
    background: var(--color);
    transition: color var(--transition-fast), background var(--transition-fast);
    }

    #toc a.active {
    color: rgba(0, 0, 0, 0.9);
    background: #fff;
    }

    div[id^="footnotes"] li.focus, #refs .ref.focus, #refs li.bibl.focus {
        background-color: var(--color);
        color: white;
        border: none;
    }

    div[id^="footnotes"] {
        font-size: calc(var(--font-size) / 1.3);
        font-family: var(--font-family);
    }

    div[id^="footnotes"] li .label {
        font-size: calc(var(--font-size) / 1.3);
        font-family: var(--font-family);
        color: var(--color);
    }

    div[id^="footnotes"] li .label:before {
        content:''
    }

    div[id^="footnotes"] li .label:after {
        content: ''
    }

    div[id^="footnotes"] li .label:hover {
    color: white;
    background: var(--color);
    }

    #refs li.bibl, div[id^="footnotes"] li {
        list-style: none;
        border: none;
        border-bottom: solid 1px black;
        border-radius: 0;
        background-color: #ffffff;
        font-size: calc(var(--font-size) / 1.3);
        font-family: var(--font-family);
    }

    section.body  .button-tabs  .context-toggles a:hover{

        background-color: var(--color);

        color: white;

    }

    /* maths */

    .fig-formula > mjx-container {
        text-align: center;
    }

    /* https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/#comment-1595733 */

    sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    line-height: 0;
    }

    sub { 
    top: 0.4em; 
    }

        /* fin des ajouts */

    /* fix temporaire le temps de la présentation en CS */

        /* classic trick for ORCID logo */

    a[href*="orcid.org"]::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url("https://orcid.org/sites/default/files/images/orcid_16x16.png");
        background-size: contain;
        background-repeat: no-repeat;
        vertical-align: center;
        margin-right: 4px;
        font-size: 16px
    }

    a[href*="orcid.org"] {
        font-size: 0;
    }


        /* grid layout pour les metadata du workflow */

    .obj_article_details .row {
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
        grid-row-gap: var(--spacing-md);
    grid-template-rows: 200px auto 100px auto auto;
    grid-template-columns: auto 40px auto auto auto auto;
    }

    .obj_article_details .main_entry {
    min-width: 0;
    display: flex;
    padding-right: var(--spacing-lg);
    display: contents;
    }

    .obj_article_details .entry_details {
    border-left: 1px solid #e2e8f0;
    padding-left: var(--spacing-lg);
    display: contents;
    }

    .item.authors {
    grid-row: 1;
    grid-column: 1;
    }

    .abstract {
    margin-top: 6px;
    grid-column: 3 / 7;
    grid-row: 1 / 3;
    }

    div.item.galleys {
  font-size: 0.75rem;
  grid-row: 2;
  grid-column: 1;
  align-self: end;
}

    .item.cover_image {
    grid-column: 2;
    grid-row: 3;
    height: 100%;
    padding-bottom: 0;
    }

    .item.issue {
    /* grid-column: 3 / 5;
    grid-row: 3;
    display: flex; */
    grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
    align-self: start;
    }

    .categories li {
  list-style: none;
}


.item.issue > .sub_item {
  flex-basis: 33%;
  margin-bottom: 10%;
}

    .item.copyright {
    grid-column: 5 / 7;
    grid-row: 3;
    }

    .item.published {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    }

    .item.citation {
    grid-column: 1 / 5;
    grid-row: 3;
    }

    .item.keywords {
        display: none;
    }

    .obj_article_details .item.authors ul.authors {
          gap: 0;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
    }

    .authors {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
}

.name {
  grid-row: 1;
    grid-column: 1;
}

.affiliation {
  grid-row: 2;
    grid-column: 1 / 2;
      font-style: italic;
}

.orcid {
  grid-row: 1;
    grid-column: 2;
  align-self: end;
}



        /* bloc matadata (workflow) */

        .obj_article_details .item.galleys a.obj_galley_link {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 10px 12px;
    border: 2px solid var(--primary-color);
    border-radius: 2px;
    color: var(--primary-color);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    background: transparent;
    margin-top: 5px;
    }

    .obj_article_details h1.page_title {
        max-width: none;
    }

    .obj_article_details .item.galleys ul.galleys_links {
        margin-top: 1.6rem;
    }

    .obj_article_details .item.authors ul.authors li {
        font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    margin-top: 1rem;
    padding: 0;
    display: contents;
    }

        /* bloc .entry_details */

        .sub_item > a > img {
        height: 100%;
        width: auto;
        object-fit: contain;
        padding-bottom: 0;
        display: block;
        margin-left: auto;
        }

        /* #cslCitationFormats { /* en attendant le fix */
        /* display: none; */
        /* } */

        .title_page {
            display: none;
        }

        .wrap {
  padding-top: var(--spacing-xl);
}

.obj_article_details {
    border-bottom: none;
}

.pkp_structure_sidebar.left {
  display: none;
}

.pkp_footer_content {
    color: black;
      text-align: center;
}

/* Barre de filtre figures/tableaux */

.wrap {
    position: relative;
}

#filter-bar {
  display: flex;
  gap: 1px;
  background: #fff;
    flex-direction: row;
    position: absolute;
    top: 0px;
}

#filter-bar button {
  flex: 1;           
  min-width: min-content;     
  padding: 6px 16px;
  background: #fff;
  color: #333;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  text-align: center; 
}

#filter-bar button:hover:not(.active) {
  border-color: #b09a8a;
  background: #faf5f0;
  color: #111;
}

#filter-bar button.active {
  background: black;
  color: #fff;
  box-shadow: 0 2px 6px rgba(181,69,27,0.3);
}

#filter-bar button:hover:not(.active) {
  background: black;
   color: white;
}

.filter-mode-on .hideable {
  display: none;
}

#btn-galley.active {
  background: #b5451b;
  color: #fff;
  border-color: #b5451b;
}


