/* =====================================================================
   Tramavia — « Le Manuscrit enluminé » (validé par Stéphane, 2026-11-10)
   Chargée après style.css : redessine Bootstrap et les pages sans
   toucher au JavaScript. Maquettes : docs/maquettes/manuscrit/.
   Toute couleur passe par une variable : les thèmes clair, sombre
   (« à la chandelle ») et sépia changent seulement les variables.
   ===================================================================== */

:root {
    --ms-fond: #E8DFC6;          /* table de travail autour du folio */
    --ms-velin: #F6F0DC;         /* la page */
    --ms-velin-creux: #EFE6CC;   /* champs, zones en retrait */
    --ms-encre: #1A1410;
    --ms-gris: #5E5140;          /* texte secondaire (contraste 6:1 sur le vélin) */
    --ms-filet: rgba(26, 20, 16, .22);
    --ms-bleu: #1D5C7A;
    --ms-bleu-fonce: #13435A;
    --ms-or: #C6A15B;            /* décor seulement, jamais du texte sur fond clair */
    --ms-or-texte: #8A6A2A;      /* texte doré lisible */
    --ms-bordeaux: #7A1E1E;
    --ms-bordeaux-fonce: #5A1414;
    --ms-sur-bleu: #F6F0DC;      /* texte posé sur un bouton bleu ou bordeaux */
    /* Fonds des éléments pleins (boutons, signets, rubans) : les mêmes dans tous les thèmes,
       avec un texte ivoire ; en sombre, seules les couleurs de TEXTE s'éclaircissent. */
    --ms-bleu-fond: #1D5C7A;
    --ms-bleu-fond-fonce: #13435A;
    --ms-bordeaux-fond: #7A1E1E;
    --ms-bordeaux-fond-fonce: #5A1414;
    --ms-sur-fond: #F6F0DC;
    --ms-ombre: 0 30px 60px rgba(60, 40, 10, .18);

    --font-titre: 'Cormorant Garamond', 'Garamond', serif;
    --font-capitales: 'Cormorant SC', 'Cormorant Garamond', serif;
    --font-page: 'EB Garamond', 'Garamond', Georgia, serif;
    --font-interface: 'Work Sans', -apple-system, 'Segoe UI', sans-serif;

    --folio-largeur: 1180px;
}

/* Mode sombre : le manuscrit lu à la chandelle */
[data-theme="sombre"] {
    --ms-fond: #120D0A;
    --ms-velin: #241B14;
    --ms-velin-creux: #2E241B;
    --ms-encre: #E8DFCE;
    --ms-gris: #B9AD95;
    --ms-filet: rgba(232, 223, 206, .2);
    --ms-bleu: #6FA8C4;
    --ms-bleu-fonce: #8DBDD5;
    --ms-or-texte: #D9B977;
    --ms-bordeaux: #D97C7C;
    --ms-bordeaux-fonce: #E89A9A;
    --ms-sur-bleu: #120D0A;
    --ms-ombre: 0 30px 60px rgba(0, 0, 0, .55);
}

/* Mode sépia : vieux papier pour la lecture prolongée */
[data-theme="sepia"] {
    --ms-fond: #D6C49C;
    --ms-velin: #E8D9B8;
    --ms-velin-creux: #E0CEA8;
    --ms-encre: #3A2818;
    --ms-gris: #5A4230;
    --ms-filet: rgba(58, 40, 24, .25);
}

/* ------- La table et le folio ------------------------------------------- */

body {
    background: var(--ms-fond);
    color: var(--ms-encre);
}

.folio {
    max-width: var(--folio-largeur);
    margin: 34px auto 48px;
    background: var(--ms-velin);
    border: 1px solid var(--ms-or);
    outline: 6px double var(--ms-or);
    outline-offset: 10px;
    box-shadow: var(--ms-ombre);
    position: relative;
}
.folio.folio-large { --folio-largeur: 1320px; }
.folio.folio-plein { --folio-largeur: none; margin: 0; outline: 0; border: 0; box-shadow: none; }

@media (max-width: 1400px) {
    .folio { margin-left: 22px; margin-right: 22px; }
}
@media (max-width: 640px) {
    .folio { margin: 10px 8px 24px; outline-width: 3px; outline-offset: 4px; }
}

/* ------- En-tête (menu) -------------------------------------------------- */

.folio .navbar {
    background: transparent;
    border-bottom: 1px solid rgba(198, 161, 91, .6);
    padding: 18px 0;
    box-shadow: none;
    backdrop-filter: none;
}
.folio .navbar.sticky-top { background: var(--ms-velin); }

.marque {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ms-bleu) !important;
    text-decoration: none;
}
/* Logo sur fond transparent (logo-color-mark-transparent.png) */
.marque img {
    width: auto;
    height: 38px;
}
.marque span {
    font-family: var(--font-capitales);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .14em;
}
/* Sur fond sombre, le fil bleu du logo serait trop foncé : médaillon ivoire */
[data-theme="sombre"] .marque img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    padding: 4px;
    border-radius: 50%;
    background: #F3EEDB;
    box-shadow: 0 0 0 2px var(--ms-or);
}

.folio .navbar .nav-link {
    font-family: var(--font-capitales);
    font-size: 19px;
    letter-spacing: .02em;
    color: var(--ms-encre);
}
.folio .navbar .nav-link:hover,
.folio .navbar .nav-link:focus { color: var(--ms-bordeaux); }
.folio .navbar .nav-link.active,
.folio .navbar .nav-link[aria-current="page"] {
    color: var(--ms-bleu);
    border-bottom: 1px solid var(--ms-or);
}
.folio .navbar .nav-lang { display: flex; align-items: center; white-space: nowrap; }
.folio .navbar .nav-lang a { font-family: var(--font-interface); font-size: 14px; }
.folio .navbar .btn-primary { font-family: var(--font-capitales); font-size: 19px; letter-spacing: .04em; white-space: nowrap; }
.folio .navbar .nav-link { white-space: nowrap; padding-left: .55rem; padding-right: .55rem; }
.folio .navbar .navbar-nav.ms-xl-4 { margin-left: 1rem !important; }
@media (max-width: 1340px) {
    .folio .navbar .nav-link { font-size: 17px; padding-left: .4rem; padding-right: .4rem; }
}
/* « Scriptorium » perd son ancien encadré d'ex-libris : même lien que les autres */
.folio .navbar .nav-ex-libris {
    border: 0;
    background: transparent;
    font-family: var(--font-capitales) !important;
    font-style: normal !important;
    color: var(--ms-encre) !important;
    box-shadow: none;
}
.folio .navbar-toggler { border-color: var(--ms-filet); }
.nav-ex-libris::before { content: none; }

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

.fil-ariane {
    padding: 14px 0 0;
    font-family: var(--font-capitales);
    font-size: 17px;
    color: var(--ms-gris);
}
.fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.fil-ariane li + li::before { content: '›'; margin-right: 10px; color: var(--ms-or-texte); }
.fil-ariane a { color: var(--ms-gris); text-decoration: none; }
.fil-ariane a:hover { color: var(--ms-bordeaux); }
.fil-ariane [aria-current="page"] { color: var(--ms-encre); }

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

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-titre);
    color: var(--ms-encre);
}
.text-muted { color: var(--ms-gris) !important; }
a { color: var(--ms-bleu); }
a:hover { color: var(--ms-bordeaux); }

.rubrique {
    font-family: var(--font-capitales);
    color: var(--ms-bordeaux);
    letter-spacing: .08em;
}
.fleuron {
    text-align: center;
    color: var(--ms-or);
    font-size: 26px;
    letter-spacing: 1em;
    margin: 18px 0;
}
.lettrine {
    float: left;
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 4.6em;
    line-height: .8;
    padding: 6px 10px 0 0;
    color: var(--ms-bleu);
}
.marginalia {
    font-family: var(--font-titre);
    font-style: italic;
    color: var(--ms-bleu);
    padding-left: 16px;
    border-left: 2px solid var(--ms-or);
}
.table-points { display: flex; flex-direction: column; gap: 12px; }
.table-points > * { display: flex; align-items: baseline; gap: 10px; }
.table-points .points { flex: 1; border-bottom: 2px dotted var(--ms-filet); }
.cadre-encre { border: 1px solid var(--ms-filet); background: transparent; }

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

.btn {
    font-family: var(--font-interface);
    font-weight: 500;
    border-radius: 2px;
}
.btn-primary {
    background: var(--ms-bleu-fond);
    border-color: var(--ms-bleu-fond);
    color: var(--ms-sur-fond);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--ms-bleu-fond-fonce) !important;
    border-color: var(--ms-bleu-fond-fonce) !important;
    color: var(--ms-sur-fond) !important;
}
.btn-outline-primary { color: var(--ms-bleu); border-color: var(--ms-bleu); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--ms-bleu-fond); border-color: var(--ms-bleu-fond); color: var(--ms-sur-fond);
}
.btn-outline-secondary, .btn-outline-dark, .btn-light, .btn-secondary {
    color: var(--ms-encre);
    border-color: var(--ms-encre);
    background: transparent;
}
.btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-light:hover, .btn-secondary:hover {
    background: var(--ms-encre);
    border-color: var(--ms-encre);
    color: var(--ms-velin);
}
.btn-danger { background: var(--ms-bordeaux-fond); border-color: var(--ms-bordeaux-fond); color: var(--ms-sur-fond); }
.btn-danger:hover, .btn-danger:focus { background: var(--ms-bordeaux-fond-fonce); border-color: var(--ms-bordeaux-fond-fonce); color: var(--ms-sur-fond); }
.btn-outline-danger { color: var(--ms-bordeaux); border-color: var(--ms-bordeaux); background: transparent; }
.btn-outline-danger:hover { background: var(--ms-bordeaux-fond); color: var(--ms-sur-fond); }
.btn-link { color: var(--ms-bleu); }

/* ------- Champs ---------------------------------------------------------- */

.form-control, .form-select {
    background-color: var(--ms-velin-creux);
    border: 1px solid var(--ms-filet);
    border-radius: 2px;
    color: var(--ms-encre);
    font-family: var(--font-interface);
}
.form-control:focus, .form-select:focus {
    background-color: var(--ms-velin);
    border-color: var(--ms-bleu);
    box-shadow: 0 0 0 3px rgba(29, 92, 122, .18);
    color: var(--ms-encre);
}
.form-control::placeholder { color: var(--ms-gris); opacity: .8; }
.form-label { font-family: var(--font-capitales); font-size: 17px; color: var(--ms-encre); letter-spacing: .03em; }
.form-check-input:checked { background-color: var(--ms-bleu); border-color: var(--ms-bleu); }
.form-text { color: var(--ms-gris); }

/* ------- Cadres, fenêtres, menus, tableaux, messages --------------------- */

.card {
    background: transparent;
    border: 1px solid var(--ms-filet);
    border-radius: 2px;
    box-shadow: none;
    color: var(--ms-encre);
}
.card-header { background: transparent; border-bottom: 1px solid var(--ms-filet); font-family: var(--font-capitales); }

.modal-content {
    background: var(--ms-velin);
    color: var(--ms-encre);
    border: 1px solid var(--ms-or);
    outline: 4px double var(--ms-or);
    outline-offset: 5px;
    border-radius: 2px;
}
.modal-header, .modal-footer { border-color: rgba(198, 161, 91, .5); }
.modal-title { font-family: var(--font-capitales); color: var(--ms-bordeaux); letter-spacing: .06em; }
[data-theme="sombre"] .btn-close { filter: invert(1) grayscale(1); }

.dropdown-menu {
    background: var(--ms-velin);
    border: 1px solid var(--ms-or);
    border-radius: 2px;
    box-shadow: 0 12px 28px rgba(60, 40, 10, .18);
}
.dropdown-item { color: var(--ms-encre); font-family: var(--font-titre); font-size: 18px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ms-velin-creux); color: var(--ms-bordeaux); }
.dropdown-divider { border-color: rgba(198, 161, 91, .5); }

.table { --bs-table-bg: transparent; --bs-table-color: var(--ms-encre); border-color: var(--ms-filet); }
.table thead th { font-family: var(--font-capitales); color: var(--ms-bordeaux); font-weight: 600; }

.alert { border-radius: 2px; border: 1px solid var(--ms-filet); background: var(--ms-velin-creux); color: var(--ms-encre); }
.alert-info { border-left: 4px solid var(--ms-bleu); }
.alert-success { border-left: 4px solid #4E6B4A; }
.alert-warning { border-left: 4px solid var(--ms-or); }
.alert-danger { border-left: 4px solid var(--ms-bordeaux); }

.badge.bg-secondary, .badge.text-bg-secondary { background: var(--ms-velin-creux) !important; color: var(--ms-encre) !important; border: 1px solid var(--ms-filet); }

.nav-tabs { border-bottom-color: var(--ms-filet); }
.nav-tabs .nav-link { font-family: var(--font-capitales); font-size: 18px; color: var(--ms-gris); }
.nav-tabs .nav-link.active { background: var(--ms-velin); color: var(--ms-bleu); border-color: var(--ms-filet) var(--ms-filet) var(--ms-velin); }

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

.folio .colophon-footer {
    background: transparent;
    border-top: 1px solid rgba(198, 161, 91, .6);
    margin-top: 40px;
    padding: 40px 0 34px;
}
.colophon-logo { color: var(--ms-or); }
.colophon-explicit {
    margin-top: 22px;
    font-family: var(--font-capitales);
    font-size: 17px;
    letter-spacing: .12em;
    color: var(--ms-gris);
}

/* ------- Bouton de capture rapide ---------------------------------------- */

.fab-idee {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ms-bordeaux-fond) !important;
    border-color: var(--ms-bordeaux-fond) !important;
    color: var(--ms-sur-fond) !important;
}
.fab-idee svg { width: 24px; height: 24px; }
.icone-trait { width: 1em; height: 1em; vertical-align: -.12em; }

/* ------- Signets de cuir : les sous-pages d'un ouvrage ------------------ */

.signets {
    margin: 0 auto 18px;
    padding: 0 24px;
    max-width: 1320px;
    overflow-x: auto;           /* sur téléphone, la rangée défile dans sa boîte, jamais la page */
    scrollbar-width: thin;
}
.signets ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 6px;
    min-width: max-content;
}
.signets .signet {
    display: block;
    padding: 10px 14px 18px;
    background: var(--ms-bordeaux-fond);
    color: var(--ms-sur-fond);
    font-family: var(--font-capitales);
    font-size: 16px;
    letter-spacing: .04em;
    text-decoration: none;
    white-space: nowrap;
    /* languette qui pend : encoche en V au bas */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
    transition: padding .3s ease, background .3s ease;
}
.signets .signet:hover, .signets .signet:focus { background: var(--ms-bordeaux-fond-fonce); color: var(--ms-sur-fond); padding-bottom: 24px; }
.signets .signet.actif { background: var(--ms-bleu-fond); padding-bottom: 26px; }

/* ------- Accueil (maquette Manuscrit.dc.html) ---------------------------- */

.acc-incipit {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
    padding: 56px 56px 30px;
    font-family: var(--font-page);
}
.lettrine-enluminee {
    flex: 0 0 230px;
    height: 260px;
    position: relative;
    background: var(--ms-bleu-fond);
    color: var(--ms-or);
    border: 5px solid var(--ms-or);
    box-shadow: inset 0 0 0 2px var(--ms-velin), inset 0 0 0 4px var(--ms-or);
}
.lettrine-enluminee svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lettrine-enluminee span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 220px;
    line-height: 1;
    color: #F6F0DC;
    text-shadow: 3px 3px 0 var(--ms-or);
}
.acc-incipit-texte { flex: 1 1 520px; min-width: 0; }
.acc-surtitre { margin: 0 0 6px; font-size: 20px; letter-spacing: .2em; }
.acc-titre {
    margin: 0;
    font-weight: 600;
    font-size: clamp(48px, 6.4vw, 96px);
    line-height: .98;
}
.acc-bleu { color: var(--ms-bleu); }
.acc-bordeaux { color: var(--ms-bordeaux); }
.acc-chapeau { margin: 26px 0 0; font-size: 22px; max-width: 620px; }
.acc-boutons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.acc-bouton { font-family: var(--font-capitales) !important; font-size: 21px !important; letter-spacing: .06em; }

.acc-texte {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 30px 56px 20px;
    font-family: var(--font-page);
    font-size: 19px;
    line-height: 1.7;
}
.acc-texte .rubrique { font-size: 22px; letter-spacing: .04em; }
.acc-colonnes {
    flex: 999 1 560px;
    min-width: 0;
    columns: 2 300px;
    column-gap: 46px;
    column-rule: 1px solid rgba(198, 161, 91, .5);
}
.acc-colonnes p { margin: 0 0 18px; break-inside: avoid-column; }
.acc-marges { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.acc-marges .marginalia { margin: 0; font-size: 19px; line-height: 1.45; }

.acc-table, .acc-colophon { padding: 50px 56px 20px; font-family: var(--font-page); }
.acc-h2 {
    margin: 0 0 30px;
    text-align: center;
    font-family: var(--font-capitales);
    font-weight: 600;
    font-size: 40px;
    letter-spacing: .1em;
}
.acc-table-liste { max-width: 760px; margin: 0 auto; font-size: 21px; }
.acc-verbe { color: var(--ms-gris); }

.acc-colophon { padding-bottom: 60px; }
.acc-colophon .acc-h2 { margin-bottom: 8px; }
.acc-colophon-sous { margin: 0 auto 36px; text-align: center; font-style: italic; color: var(--ms-gris); }
.acc-formules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
    border-top: 1px solid var(--ms-or);
    border-bottom: 1px solid var(--ms-or);
}
.acc-formule { padding: 26px 18px; text-align: center; border-right: 1px solid rgba(198, 161, 91, .5); }
.acc-formule:last-child { border-right: 0; }
.acc-formule-vedette { background: rgba(198, 161, 91, .14); }
.acc-formule-nom { margin: 0; font-family: var(--font-capitales); font-size: 24px; color: var(--ms-bleu); }
.acc-formule-vedette .acc-formule-nom { color: var(--ms-bordeaux); }
.acc-formule-prix { margin: 4px 0; font-family: var(--font-titre); font-size: 44px; font-weight: 600; }
.acc-formule-slogan { margin: 0; font-size: 16px; font-style: italic; }
.acc-colophon-lien { margin: 26px 0 0; text-align: center; font-family: var(--font-capitales); font-size: 20px; }
.acc-fin { margin: 30px 0 0; text-align: center; }

@media (max-width: 640px) {
    .acc-incipit, .acc-texte, .acc-table, .acc-colophon { padding-left: 20px; padding-right: 20px; }
    .acc-incipit { gap: 28px; padding-top: 34px; }
    .lettrine-enluminee { flex-basis: 150px; height: 170px; margin: 0 auto; }
    .lettrine-enluminee span { font-size: 140px; }
    .acc-h2 { font-size: 30px; }
    .acc-table-liste { font-size: 18px; }
}

/* ------- Briques de page réutilisables (pages publiques et internes) ---- */

.ms-page { font-family: var(--font-page); font-size: 19px; line-height: 1.7; color: var(--ms-encre); }
.ms-section { padding: 36px 56px; }
.ms-entete { text-align: center; padding: 56px 56px 20px; }
.ms-surtitre { margin: 0 0 6px; font-family: var(--font-capitales); color: var(--ms-bordeaux); font-size: 20px; letter-spacing: .2em; }
.ms-h1 { margin: 0; font-family: var(--font-titre); font-weight: 600; font-size: clamp(44px, 5.6vw, 84px); line-height: 1; }
.ms-h1 em, .ms-h1 .bleu { color: var(--ms-bleu); }
.ms-sous-titre { margin: 14px 0 0; font-family: var(--font-titre); font-style: italic; font-size: 26px; color: var(--ms-gris); }
.ms-h2 { margin: 4px 0 14px; font-family: var(--font-titre); font-weight: 600; font-size: 38px; line-height: 1.1; }
.ms-h2-capitales { margin: 0 0 24px; text-align: center; font-family: var(--font-capitales); font-weight: 600; font-size: 38px; letter-spacing: .1em; }
.ms-capitulum { margin: 0; font-family: var(--font-capitales); color: var(--ms-bordeaux); font-size: 18px; letter-spacing: .16em; }
.ms-texte-marge { display: flex; flex-wrap: wrap; gap: 40px; }
.ms-texte-marge > .ms-texte { flex: 999 1 560px; min-width: 0; }
.ms-texte-marge > .ms-marge { flex: 1 1 230px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.ms-marge .marginalia { margin: 0; font-size: 19px; line-height: 1.45; }
.ms-marge .marginalia b, .ms-marge .marginalia strong { font-style: normal; font-family: var(--font-capitales); color: var(--ms-bordeaux); }
.ms-deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px 56px; }
.ms-trois-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0; border-top: 1px solid var(--ms-or); border-bottom: 1px solid var(--ms-or); }
.ms-trois-colonnes > * { padding: 26px 26px 28px; border-right: 1px solid rgba(198, 161, 91, .5); }
.ms-trois-colonnes > *:last-child { border-right: 0; }
.ms-chiffre { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: 44px; line-height: 1; color: var(--ms-bleu); }
.ms-citation { margin: 18px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ms-bordeaux); font-family: var(--font-titre); font-style: italic; font-size: 24px; color: var(--ms-bordeaux); }
.ms-colophon { text-align: center; padding: 30px 56px 60px; }
.ms-cul-de-lampe p { margin: 0; font-style: italic; }
.ms-cul-de-lampe p:nth-child(1) { font-size: 22px; }
.ms-cul-de-lampe p:nth-child(2) { font-size: 20px; }
.ms-cul-de-lampe p:nth-child(3) { font-size: 18px; }
.ms-cul-de-lampe p:nth-child(4) { font-size: 16px; }
.ms-page .lettrine { font-size: 4.2em; }
.ms-bouton-capitales { font-family: var(--font-capitales) !important; font-size: 21px !important; letter-spacing: .06em; }
@media (max-width: 640px) {
    .ms-section, .ms-entete, .ms-colophon { padding-left: 20px; padding-right: 20px; }
    .ms-h2, .ms-h2-capitales { font-size: 30px; }
}

/* ------- Tarifs (maquette Tarifs.dc.html) -------------------------------- */

.ms-page .tarifs-toggle-groupe { background: var(--ms-velin-creux); border: 1px solid var(--ms-filet); border-radius: 2px; }
.ms-page .tarifs-toggle-bouton { border-radius: 2px; color: var(--ms-encre); font-family: var(--font-capitales); font-size: 18px; }
.ms-page .tarifs-toggle-bouton.est-actif { background: var(--ms-bleu-fond); color: var(--ms-sur-fond); }
.ms-page .tarifs-badge-remise { background: var(--ms-velin); color: var(--ms-bordeaux); border-radius: 2px; }
.ms-page .tier-onglets { border-bottom-color: var(--ms-or); }
.ms-page .tier-onglet { font-family: var(--font-capitales); font-size: 20px; color: var(--ms-gris); }
.ms-page .tier-onglet.est-actif { color: var(--ms-bordeaux); border-bottom-color: var(--ms-bordeaux); }
.ms-page .tier {
    background: var(--ms-velin);
    border: 1px solid var(--ms-filet);
    border-radius: 2px;
    box-shadow: none;
    font-family: var(--font-page);
}
.ms-page .tier.est-mis-en-avant { border: 1px solid var(--ms-or); outline: 4px double var(--ms-or); outline-offset: 5px; }
.ms-page .tier .nom { font-family: var(--font-capitales); color: var(--ms-bleu); font-weight: 600; }
.ms-page .tier.est-mis-en-avant .nom { color: var(--ms-bordeaux); }
.ms-page .tier .tagline { font-family: var(--font-titre); font-style: italic; color: var(--ms-gris); }
.ms-page .tier .prix-principal { font-family: var(--font-titre); font-weight: 600; color: var(--ms-encre); }
.ms-page .tier-ruban { background: var(--ms-bordeaux-fond); color: var(--ms-sur-fond); font-family: var(--font-capitales); letter-spacing: .08em; border-radius: 0; }
.ms-page .tier ul li::marker { color: var(--ms-or); }

/* ------- Aide : sommaire et articles ------------------------------------- */

.aide-sommaire-rubrique { max-width: 860px; margin: 0 auto 34px; }
.aide-sommaire-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.aide-sommaire-ligne { display: flex; align-items: baseline; gap: 10px; color: var(--ms-encre); text-decoration: none; font-size: 21px; }
.aide-sommaire-ligne:hover { color: var(--ms-bordeaux); }
.aide-sommaire-ligne .points { flex: 1; border-bottom: 2px dotted var(--ms-filet); }
.aide-sommaire-resume { margin: 2px 0 0; font-style: italic; font-size: 16px; color: var(--ms-gris); }

.aide-sidebar-sommaire { display: block; margin-bottom: 1rem; font-family: var(--font-capitales); font-size: 18px; color: var(--ms-bleu); text-decoration: none; }
.aide-sidebar .aide-sidebar-cat-titre { font-family: var(--font-capitales); text-transform: none; font-size: 17px; letter-spacing: .08em; color: var(--ms-bordeaux); border-bottom-color: rgba(198, 161, 91, .6); }
.aide-sidebar .aide-sidebar-lien { color: var(--ms-encre); font-family: var(--font-titre); font-size: 18px; }
.aide-sidebar .aide-sidebar-lien:hover { background: var(--ms-velin-creux); color: var(--ms-bordeaux); }
.aide-sidebar .aide-sidebar-lien.actif { background: var(--ms-velin-creux); color: var(--ms-bleu); border-left-color: var(--ms-bleu); }
.aide-contenu { font-family: var(--font-page); font-size: 19px; color: var(--ms-encre); }
.aide-contenu h1 { font-weight: 600; font-size: 2.6rem; color: var(--ms-encre); }
.aide-contenu .aide-categorie { font-family: var(--font-capitales); text-transform: none; font-size: 18px; color: var(--ms-bordeaux); }
.aide-contenu .aide-resume { color: var(--ms-gris); border-bottom-color: rgba(198, 161, 91, .6); }
.aide-html > p:first-of-type::first-letter {
    float: left; font-family: var(--font-titre); font-weight: 700; font-size: 4.2em; line-height: .8; padding: 6px 10px 0 0; color: var(--ms-bleu);
}
.aide-html h2, .aide-html h3 { color: var(--ms-encre); }
.aide-html h2 { border-bottom-color: rgba(198, 161, 91, .6); }
.aide-html a { color: var(--ms-bleu); }
.aide-html code { color: var(--ms-bordeaux); background: var(--ms-velin-creux); border-color: var(--ms-filet); }
.aide-html pre, .aide-html th { background: var(--ms-velin-creux); }
.aide-html blockquote { border-left-color: var(--ms-bordeaux); color: var(--ms-encre); background: var(--ms-velin-creux); }
.aide-html th, .aide-html td { border-color: var(--ms-filet); }

/* ------- Bibliothèque et série (maquettes Bibliotheque / Serie) --------- */

.ms-page .biblio-entete { background: transparent; border: 0; }
.ms-page .biblio-filtres input[type="search"], .ms-page .biblio-filtres select {
    background: var(--ms-velin-creux); border: 1px solid var(--ms-filet); border-radius: 2px; color: var(--ms-encre);
}
.ms-page .biblio-carte { background: var(--ms-velin); border: 1px solid var(--ms-filet); border-radius: 2px; box-shadow: none; }
.ms-page .biblio-carte:hover { border-color: var(--ms-or); box-shadow: 0 10px 24px rgba(60, 40, 10, .12); }
.ms-page .biblio-carte-titre, .ms-page .serie-hero-titre, .ms-page .tome-titre { font-family: var(--font-titre); font-weight: 600; color: var(--ms-encre); }
.ms-page .biblio-carte-auteur, .ms-page .serie-hero-auteur { font-family: var(--font-titre); font-style: italic; color: var(--ms-gris); }
.ms-page .biblio-carte-genre, .ms-page .biblio-total, .ms-page .tome-num { font-family: var(--font-capitales); color: var(--ms-bordeaux); letter-spacing: .06em; }
.ms-page .biblio-carte-serie-ribbon { background: var(--ms-bordeaux-fond); color: var(--ms-sur-fond); font-family: var(--font-capitales); }
.ms-page .biblio-pagination a, .ms-page .biblio-pagination span { border-radius: 2px; }
.ms-page .biblio-pagination .courante { background: var(--ms-bleu-fond); color: var(--ms-sur-fond); }
.ms-page .serie-hero, .ms-page .tome-bloc { border-color: var(--ms-filet); }
.ms-page .serie-hero-cover, .ms-page .tome-cover { outline: 1px solid var(--ms-or); outline-offset: 3px; }

/* Téléphone : un tableau d'aide large défile dans sa boîte ; la recherche passe à la ligne */
.aide-html table { display: block; overflow-x: auto; }
.ms-page .biblio-ligne-recherche { flex-wrap: wrap; }
.ms-page .biblio-ligne-recherche input[type="search"] { min-width: 0; flex: 1 1 200px; }
.ms-page .biblio-ligne-recherche button[type="submit"] { background: var(--ms-bleu-fond); color: var(--ms-sur-fond); border-color: var(--ms-bleu-fond); border-radius: 2px; font-family: var(--font-capitales); }

/* ------- Pages légales : mise en page de traité -------------------------- */

.ms-table-articles { max-width: 720px; margin: 10px auto 20px; font-size: 19px; }
.ms-table-articles a { color: var(--ms-encre); text-decoration: none; }
.ms-table-articles a:hover { color: var(--ms-bordeaux); }
.ms-traite-corps { max-width: 820px; margin: 0 auto; }
.ms-traite-corps .ms-capitulum { margin-top: 34px; scroll-margin-top: 110px; }
.ms-traite-corps .ms-h2 { font-size: 32px; }
.ms-traite-corps > .ms-h2:first-of-type + p::first-letter {
    float: left; font-family: var(--font-titre); font-weight: 700; font-size: 4.2em; line-height: .8; padding: 6px 10px 0 0; color: var(--ms-bleu);
}
.ms-traite-corps ul li::marker { color: var(--ms-or); }
.ms-traite .ms-entete .text-muted { font-family: var(--font-titre); font-size: 20px; }

/* ------- Pages de compte : l'ex-libris ------------------------------------ */

.ms-exlibris {
    margin: 40px auto 30px;
    max-width: 520px;
    background: var(--ms-velin);
    border: 1px solid var(--ms-or);
    outline: 1px solid var(--ms-or);
    outline-offset: 6px;
    font-family: var(--font-page);
}
.ms-exlibris-entete { text-align: center; padding: 30px 30px 0; }
.ms-exlibris-entete .ms-h2 { margin: 0; }
.ms-exlibris-entete .fleuron { margin: 10px 0 0; }
.ms-exlibris .card-body { padding: 18px 36px 34px; }
.ms-exlibris .btn-primary { width: 100%; padding: 12px; font-family: var(--font-capitales); font-size: 20px; letter-spacing: .06em; }
.ms-exlibris hr { border-color: var(--ms-or); opacity: .6; }
.ms-exlibris { border-radius: 2px !important; }

/* ------- Anciennes couleurs de Tramavia -> palette « Manuscrit » ---------
   Les feuilles des pages internes (scriptorium.css, editeur.css, plan.css…)
   lisent --tramavia-* : on les fait pointer vers la nouvelle palette, par thème.
   L'or foncé devient l'or lisible (#8A6A2A) et la marge un gris assez contrasté. */
html:not([data-theme="sombre"]):not([data-theme="sepia"]) {
    --tramavia-ivoire: #F6F0DC;
    --tramavia-ivoire-doux: #EFE6CC;
    --tramavia-parchemin: #E5DABB;
    --tramavia-or-fonce: #8A6A2A;
    --tramavia-marge: #5E5140;
    --tramavia-encre-douce: #3A3228;
    --tramavia-or-pale: #EADFBF;   /* utilisée par scriptorium.css sans être définie ailleurs */
    --tramavia-encre-pale: #4A3E2F;  /* idem : utilisée par plusieurs pages, jamais définie */
}
html[data-theme="sepia"] {
    --tramavia-or-pale: #DCC79A;
    --tramavia-encre-pale: #4A3624;
    --tramavia-or-fonce: #7A5C22;
    --tramavia-marge: #5A4230;
}
html[data-theme="sombre"] {
    --tramavia-or-pale: #3A2F22;
    --tramavia-encre-pale: #C8BDA5;
    --tramavia-bleu: #6FA8C4;        /* texte bleu lisible sur le fond sombre */
    --tramavia-bordeaux: #D97C7C;    /* texte bordeaux lisible sur le fond sombre */
    --tramavia-ivoire: #241B14;
    --tramavia-ivoire-doux: #2E241B;
    --tramavia-or-fonce: #D9B977;
    --tramavia-marge: #B9AD95;
}

/* Fonds blancs codés en dur dans l'éditeur : en sombre, ils prennent le vélin creux */
html[data-theme="sombre"] .arbre-input,
html[data-theme="sombre"] .glanage-suggestion,
html[data-theme="sombre"] .marginalia-note { background: var(--ms-velin-creux); color: var(--ms-encre); border-color: var(--ms-filet); }

/* Thème sombre : le bouton du menu replié (trois traits gris foncés de Bootstrap) devient clair,
   et une case cochée garde un fond bleu profond */
[data-theme="sombre"] .navbar-toggler-icon { filter: invert(1) brightness(1.4); }
[data-theme="sombre"] .form-check-input:checked { background-color: var(--ms-bleu-fond); border-color: var(--ms-bleu-fond); }

/* =====================================================================
   Éléments communs alignés sur les maquettes (2026-11-10, 2e passe).
   Référence : Ouvrage.dc.html (signets, bouton de capture), Plan.dc.html
   (fil d'Ariane), toutes les maquettes (pied « Explicit »), Portraits.dc.html
   et suivantes (fenêtres). Ces règles viennent APRÈS les premières et les
   remplacent.
   ===================================================================== */

/* Signets : à 48 px du bord, sur plusieurs lignes au besoin (jamais coupés) */
.signets { padding: 0 48px; margin: 0 0 18px; max-width: none; overflow: visible; }
.signets ul { flex-wrap: wrap; gap: 6px; min-width: 0; }
.signets .signet {
    padding: 12px 15px 22px;
    font-size: 17px;
    letter-spacing: .04em;
    line-height: 1.1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.signets .signet:hover, .signets .signet:focus { padding-bottom: 26px; }
.signets .signet.actif { padding-bottom: 30px; }

/* Fil d'Ariane : bandeau de toute la largeur du folio, filet doré dessous,
   page courante en bordeaux */
.fil-ariane-bandeau {
    padding: 12px 48px;
    font-family: var(--font-capitales);
    font-size: 17px;
    letter-spacing: .05em;
    color: var(--ms-gris);
    border-bottom: 1px solid rgba(198, 161, 91, .6);
}
.fil-ariane-bandeau .fil-ariane { padding: 0; font-size: inherit; }
.fil-ariane li + li::before { content: '›'; margin: 0 6px 0 0; color: var(--ms-or); }
.fil-ariane [aria-current="page"] { color: var(--ms-bordeaux); }

/* Fenêtres (modales) de tout le site : vélin, double filet d'or, titre en
   Garamond, filets pointillés (dessin des maquettes « fenêtre ouverte ») */
.modal .modal-content {
    background: var(--ms-velin);
    border: 1px solid var(--ms-or);
    outline: 4px double var(--ms-or);
    outline-offset: 5px;
    border-radius: 0;
    box-shadow: 0 18px 40px rgba(60, 40, 10, .18);
    font-family: var(--font-page);
    color: var(--ms-encre);
}
.modal .modal-header { padding: 16px 22px; border-bottom: 1px dashed rgba(198, 161, 91, .7); }
.modal .modal-title {
    margin: 0;
    font-family: var(--font-titre);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--ms-encre);
}
.modal .btn-close {
    width: auto; height: auto; margin: 0; padding: 2px 8px;
    background: none; border: 1px solid transparent; opacity: 1; filter: none;
    color: var(--ms-gris); font-family: var(--font-interface); font-size: 15px; line-height: 1.5;
}
.modal .btn-close::before { content: '\2715'; }
.modal .btn-close:hover { color: var(--ms-bordeaux); }
.modal .btn-close:focus { box-shadow: none; outline: 2px solid var(--ms-bleu); }
[data-theme="sombre"] .modal .btn-close { filter: none; }
.modal .modal-body { padding: 18px 22px 6px; font-size: 18px; }
.modal .modal-footer {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;
    padding: 14px 22px; border-top: 1px dashed rgba(198, 161, 91, .7);
}
.modal .modal-footer > * { margin: 0; }
.modal .modal-footer .btn { padding: 10px 20px; font-size: 15px; line-height: 1.4; }
.modal .modal-title .fleur-titre { color: var(--ms-or); margin-right: 6px; }

/* Bouton de capture rapide : rond, bleu, bordé d'or (Ouvrage.dc.html) */
.fab-idee {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: var(--ms-bleu-fond) !important;
    border: 2px solid var(--ms-or) !important;
    box-shadow: 0 8px 20px rgba(60, 40, 10, .22) !important;
}
.fab-idee:hover { background: var(--ms-bleu-fond-fonce) !important; }

/* Pied de page des maquettes : astérisme et « Explicit » seulement ;
   les liens légaux restent, en une ligne discrète dessous */
.folio .pied-explicit { border-top: 1px solid rgba(198, 161, 91, .6); padding: 30px 20px 34px; text-align: center; margin-top: 40px; }
.pied-explicit .asterisme { margin: 0 0 18px; font-size: 26px; color: var(--ms-or); }
.pied-explicit .explicit { margin: 0; font-family: var(--font-capitales); font-size: 17px; letter-spacing: .12em; color: var(--ms-gris); }
.pied-explicit .pied-liens { margin: 14px 0 0; font-family: var(--font-capitales); font-size: 14px; letter-spacing: .06em; }
.pied-explicit .pied-liens a { color: var(--ms-gris); text-decoration: none; }
.pied-explicit .pied-liens a:hover { color: var(--ms-bordeaux); }
.pied-explicit .pied-liens span { color: var(--ms-or); margin: 0 6px; }
@media (max-width: 640px) {
    .signets { padding: 0 16px; }
    .fil-ariane-bandeau { padding: 12px 20px; }
}

/* =====================================================================
   3e passe (comparaison page par page avec les maquettes)
   ===================================================================== */

/* Folio centré, à 40 px du haut (maquettes) ; marges de côté seulement si
   l'écran est plus étroit que le folio */
.folio { margin: 40px auto 48px; }
@media (max-width: 1400px) { .folio.folio-large { margin-left: 22px; margin-right: 22px; } }
@media (max-width: 1240px) { .folio { margin-left: 22px; margin-right: 22px; } }
@media (max-width: 640px) { .folio { margin: 10px 8px 24px; } }

/* En-tête : marque en petites capitales (seul le T est grand), liens à 19 px encre */
.folio .navbar-brand, .marque span { text-transform: none !important; }
.folio .navbar { padding: 24px 0; }
.folio .navbar .nav-link { font-size: 19px; color: var(--ms-encre); }
@media (max-width: 1340px) { .folio .navbar .nav-link { font-size: 19px; } }
.folio .navbar .nav-entrer { color: var(--ms-bordeaux); }
.folio .navbar .dropdown-toggle::after { border-top-width: .28em; border-right-width: .24em; border-left-width: .24em; vertical-align: .18em; margin-left: .35em; }
.folio .navbar #navbarUser { color: var(--ms-bordeaux); }
.folio .navbar .nav-lang a { font-family: var(--font-capitales); font-size: 16px; color: var(--ms-gris); }
.folio .navbar .nav-lang a.actif-langue { color: var(--ms-bleu); }
.nav-lang-sep { color: var(--ms-or); }

/* Titres : pas d'espacement resserré (style.css le resserrait) */
h1, .h1 { letter-spacing: 0; }

/* Pied : seulement « Explicit » (chaque page porte déjà son ⁂) ; liens légaux discrets */
.folio .pied-explicit { border-top: 0; margin-top: 0; padding: 20px 20px 40px; }
.pied-explicit .asterisme { display: none; }

/* Bouton de capture : dans la page, en bas à droite, plume ✒ */
.fab-rangee { display: flex; justify-content: flex-end; padding: 10px 48px 0; }
.fab-idee { position: static !important; right: auto !important; bottom: auto !important; font-size: 24px; line-height: 1; }

/* Signets : ils pendent du filet doré du fil d'Ariane (2 px), sans vide */
.fil-ariane-bandeau { border-bottom: 2px solid var(--ms-or); }
.fil-ariane-bandeau + main > .signets:first-child,
.fil-ariane-bandeau + main .signets { margin-top: 0; }
.signets { margin-top: -2px; }
/* Livre-jeu : une seule rangée qui défile, signets plus petits, double filet doré */
.signets.signets-jeu { border-top: 3px double var(--ms-or); padding: 0 44px; overflow-x: auto; }
.signets.signets-jeu ul { flex-wrap: nowrap; gap: 5px; min-width: max-content; }
.signets.signets-jeu .signet { padding: 11px 11px 19px; font-size: 16px; letter-spacing: .03em; line-height: 1.15; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%); }
.signets.signets-jeu .signet.actif { padding-bottom: 27px; }
@media (max-width: 640px) { .fab-rangee { padding: 10px 16px 0; } .signets.signets-jeu { padding: 0 12px; } }

/* Menu connecté plus long : 17 px sous 1340 px de large (sinon il déborde) */
@media (max-width: 1340px) { .folio.folio-large .navbar .nav-link { font-size: 17px; padding-left: .4rem; padding-right: .4rem; } }

/* 4e passe : mesures prises sur les maquettes (APropos.dc.html, Ouvrage.dc.html) */
.folio .navbar { padding: 18px 0; }               /* en-tête de 86 px comme la maquette (98 avant) */
.signets { margin-bottom: 0; }                     /* les signets touchent le contenu, sans vide */
/* style.css mettait un trait transparent de 1 px sous chaque lien (+1 px aux boutons et liens en bloc) */
a, a:hover { border-bottom: 0; }

/* ------- En-têtes des maquettes (5e passe) --------------------------------
   Public : padding 24px 56px. Connecté : six variantes reconnues par le nom
   de l'auteur (.nom-hd, .nom-monde, .nom-jeu, .nom-atelier, .nom-compte, .nom-livres). */
.folio .navbar > .container { max-width: none; padding: 0 56px; }
.folio .navbar { padding: 24px 0; }
.folio .navbar:has(.nom-auteur) { padding: 20px 0; }
.folio .navbar:has(.nom-compte), .folio .navbar:has(.nom-livres) { padding: 22px 0; }
.folio .navbar:has(.nom-hd) > .container, .folio .navbar:has(.nom-atelier) > .container,
.folio .navbar:has(.nom-compte) > .container, .folio .navbar:has(.nom-livres) > .container { padding: 0 48px; }
.folio .navbar:has(.nom-jeu) > .container { padding: 0 44px; }
.folio .navbar .navbar-nav.ms-xl-4 { margin-left: 34px !important; }
.folio .navbar .nav-link { padding-left: 0; padding-right: 0; margin-right: 24px; }
.folio .navbar .navbar-nav:last-child .nav-link { margin-right: 0; }

/* « ▾ » des maquettes au lieu du triangle de Bootstrap */
.folio .navbar .dropdown-toggle::after { border: 0; content: '▾'; font-size: 13px; color: var(--ms-gris); vertical-align: 0; margin-left: .3em; }
.folio .navbar:has(.nom-compte) .dropdown-toggle::after { color: var(--ms-or-texte); }
/* Rubrique active : soulignée d'or, couleur encre (Fils.dc.html) */
.folio .navbar .nav-link.active { color: var(--ms-encre); border-bottom: 1px solid var(--ms-or); }

/* Nom de l'auteur */
.folio .navbar .nom-auteur { font-family: var(--font-capitales); font-size: 19px; display: flex; align-items: center; gap: 10px; }
.folio .navbar .nom-hd { color: var(--ms-encre); }
.folio .navbar .nom-monde { color: var(--ms-bleu); font-weight: 600; }
.folio .navbar .nom-compte { color: var(--ms-bleu); }
.folio .navbar .nom-jeu, .folio .navbar .nom-atelier, .folio .navbar .nom-livres { color: var(--ms-bordeaux); }
.pastille-initiales {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ms-bleu-fond); border: 2px solid var(--ms-or); box-shadow: inset 0 0 0 1px #F6F0DC;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-titre); font-weight: 700; font-size: 15px; color: #F6F0DC;
}

/* Langue */
.folio .navbar .nav-lang { display: flex; align-items: center; gap: 4px; font-family: var(--font-interface); font-size: 14px; color: var(--ms-gris); }
.folio .navbar .nav-lang a { font-family: var(--font-interface); font-size: 14px; color: var(--ms-gris); text-decoration: none; padding: 0; }
.folio .navbar .nav-lang a.actif-langue { color: var(--ms-encre); font-weight: 500; }
.folio .navbar .nav-lang-hd, .folio .navbar .nav-lang-jeu { font-size: 13px; letter-spacing: .08em; }
.folio .navbar .nav-lang-hd a, .folio .navbar .nav-lang-jeu a { font-size: 13px; }
.folio .navbar .nav-lang-hd a.actif-langue, .folio .navbar .nav-lang-jeu a.actif-langue { color: var(--ms-bleu); }
.folio .navbar .nav-lang-sep { color: var(--ms-gris); }
.folio .navbar .nav-lang-hd .nav-lang-sep { color: var(--ms-or); }
.folio .navbar .navbar-nav.align-items-xl-center { gap: 22px; }
.folio .navbar:has(.nom-hd) .navbar-nav.align-items-xl-center, .folio .navbar:has(.nom-jeu) .navbar-nav.align-items-xl-center { gap: 18px; }
.folio .navbar:has(.nom-compte) .navbar-nav.align-items-xl-center, .folio .navbar:has(.nom-livres) .navbar-nav.align-items-xl-center,
.folio .navbar:has(.nom-atelier) .navbar-nav.align-items-xl-center { gap: 26px; }
@media (max-width: 1199px) { .folio .navbar > .container { padding: 0 20px !important; } .folio .navbar .nav-link { margin-right: 0; } }
/* L'en-tête passe sur deux lignes quand la place manque (Plan.dc.html : 128 px), comme les maquettes */
@media (min-width: 1200px) {
    .folio .navbar > .container { flex-wrap: wrap; row-gap: 14px; }
    .folio .navbar .navbar-collapse { flex-wrap: wrap; row-gap: 14px; justify-content: space-between; }
    .folio .navbar .navbar-nav.me-auto { flex-wrap: wrap; row-gap: 6px; }
}
@media (max-width: 1340px) { .folio.folio-large .navbar .nav-link { font-size: 19px; padding-left: 0; padding-right: 0; } }
/* style.css impose aux liens du menu padding .5rem 1rem et couleur avec !important : neutralisé */
.folio .navbar .nav-link { padding: 4px 0 !important; color: var(--ms-encre) !important; }
.folio .navbar .nav-link:hover, .folio .navbar .nav-link:focus { color: var(--ms-bordeaux) !important; }
.folio .navbar .nav-entrer { color: var(--ms-bordeaux) !important; }
.folio .navbar .nom-hd { color: var(--ms-encre) !important; }
.folio .navbar .nom-monde, .folio .navbar .nom-compte { color: var(--ms-bleu) !important; }
.folio .navbar .nom-jeu, .folio .navbar .nom-atelier, .folio .navbar .nom-livres { color: var(--ms-bordeaux) !important; }
.folio .navbar .nav-lang a { padding: 0 !important; }
/* Grand écran : la marque, le menu et le bloc du nom sont trois éléments d'une même rangée ;
   si la place manque, seul le bloc du nom passe à la ligne, à gauche (Plan.dc.html) */
@media (min-width: 1200px) {
    .folio .navbar .navbar-collapse { display: contents !important; }
    .folio .navbar > .container { flex-wrap: wrap; justify-content: space-between; row-gap: 14px; column-gap: 0; }
    .folio .navbar .navbar-nav.me-auto { margin-right: auto !important; }
}
/* Mesures de Portraits.dc.html : logo 58 × 32, « ▾ » à 4 px du mot, nom sans écart avant le « ▾ » */
.marque img { width: 58px !important; height: 32px !important; object-fit: contain; }
.folio .navbar .dropdown-toggle::after { margin-left: 4px !important; width: auto; }
.folio .navbar .nom-auteur { gap: 0; }
.folio .navbar .nom-auteur .pastille-initiales { margin-right: 10px; }
.folio .navbar .nav-link { letter-spacing: 0; }
.folio .navbar .navbar-brand { margin-right: 0; }
/* Hauteur de l'en-tête des maquettes : aucune marge verticale autour des liens ni de la marque */
.folio .navbar .nav-link { padding: 0 !important; line-height: 1.5; }
.folio .navbar .navbar-brand { padding-top: 0; padding-bottom: 0; }

/* =====================================================================
   Signets : une variante par famille de pages, reprise de SA maquette
   (Portraits / Fils / Plan / Ouvrage / Reliure .dc.html)
   ===================================================================== */
.signets .signet:hover, .signets .signet:focus { padding-bottom: inherit; }
.signets ul { align-items: flex-start; }

/* Famille « ouvrage » (Ouvrage.dc.html) : 17 px, encoche à 80 % */
.signets-ouvrage { padding: 0 48px; margin-top: 0; }
.signets-ouvrage ul { gap: 6px; }
.signets-ouvrage .signet, .signets-ouvrage .signet:hover, .signets-ouvrage .signet:focus { padding: 12px 15px 22px; font-size: 17px; letter-spacing: .04em; line-height: 1.1; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.signets-ouvrage .signet.actif { padding-bottom: 30px; }

/* Famille « editeur » (Plan, Tableau, AuteurLecture) : liseré doré en haut de chaque signet */
.signets-editeur { padding: 0 48px; margin-top: -1px; }
.signets-editeur ul { gap: 8px 6px; }
.signets-editeur .signet, .signets-editeur .signet:hover, .signets-editeur .signet:focus { padding: 10px 13px 20px; font-size: 16px; letter-spacing: .05em; line-height: 1.2; border-top: 3px solid var(--ms-or); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%); }
.signets-editeur .signet.actif { padding-bottom: 30px; }

/* Famille « livres » (Reliure, StatsLecture) : ombre intérieure en haut */
.signets-livres { padding: 0 48px; margin-top: -1px; }
.signets-livres ul { gap: 4px 6px; }
.signets-livres .signet, .signets-livres .signet:hover, .signets-livres .signet:focus { padding: 9px 13px 20px; font-size: 16px; letter-spacing: .04em; line-height: 1.2; box-shadow: inset 0 2px 0 rgba(0,0,0,.18); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%); }
.signets-livres .signet.actif { padding-bottom: 30px; }

/* Famille « monde » (Portraits, Atlas, Chronique…) : filet d'encre, signets 18 px gras, boutons à droite */
.signets-monde { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 8px; padding: 0 56px; margin-top: 0; border-top: 3px solid var(--ms-encre); }
.signets-monde ul { gap: 0 8px; }
.signets-monde .signet, .signets-monde .signet:hover, .signets-monde .signet:focus { padding: 12px 16px 22px; font-size: 18px; font-weight: 600; letter-spacing: .06em; line-height: 1.2; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%); }
.signets-monde .signet.actif { padding-bottom: 30px; box-shadow: inset 0 0 0 3px var(--ms-bleu-fond), inset 0 0 0 4px rgba(246,240,220,.35); }
.signets-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.signets-actions form { margin: 0; }
.signets-bouton { display: inline-block; padding: 6px 14px; background: transparent; color: var(--ms-encre); border: 1px solid var(--ms-encre); border-radius: 2px; font-family: 'Work Sans', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer; }
.signets-bouton:hover, .signets-bouton:focus { background: var(--ms-encre); color: var(--ms-velin); }

/* Famille « jeu » (Tissage, Fils, Progression…) : une rangée qui défile, double filet doré */
.signets.signets-jeu { margin-top: 0; padding: 0 44px 6px; border-top: 3px double var(--ms-or); overflow-x: auto; }
.signets-jeu ul { flex-wrap: nowrap; gap: 5px; min-width: max-content; }
.signets-jeu .signet, .signets-jeu .signet:hover, .signets-jeu .signet:focus { padding: 11px 11px 19px; font-size: 16px; font-weight: 500; letter-spacing: .03em; line-height: 1.15; box-shadow: inset 0 3px 0 rgba(0,0,0,.18); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%); }
.signets-jeu .signet.actif { padding-bottom: 30px; }
.signets-jeu .signet-exporter-li { margin-left: 14px; }
@media (max-width: 640px) {
    .signets-ouvrage, .signets-editeur, .signets-livres, .signets-monde { padding: 0 16px; }
    .signets.signets-jeu { padding: 0 12px 6px; }
}

/* =====================================================================
   Fil d'Ariane : une variante par famille de pages (variantes.json des maquettes)
   ===================================================================== */
.fil-ariane-bandeau { padding: 12px 48px; font-size: 17px; border-bottom: 0; }
.fil-ariane-bandeau .fil-ariane li + li::before { color: var(--ms-or); margin: 0 6px 0 0; }
.fil-ariane-bandeau .fil-ariane ol { gap: 4px 6px; }
.fil-ariane-bandeau .fil-ariane a { color: var(--ms-gris); }
.fil-ariane-bandeau .fil-ariane [aria-current="page"] { color: var(--ms-bordeaux); }
/* trait : Plan, Tableau, AuteurLecture, Importer */
.fil-trait { border-bottom: 1px solid rgba(198, 161, 91, .6); }
/* pointillé : Profil, Préférences, Ma lecture, Abonnement */
.fil-pointille { border-bottom: 1px dotted rgba(198, 161, 91, .9); }
/* monde : Portraits, Atlas, Chronique, Idées, Mes personnages — 56 px, sans filet, page courante à l'encre */
.fil-monde { padding: 14px 56px; }
.fil-monde .fil-ariane li + li::before { color: var(--ms-or-texte); margin: 0 8px 0 0; }
.fil-monde .fil-ariane ol { gap: 4px 8px; }
.fil-monde .fil-ariane [aria-current="page"] { color: var(--ms-encre); }
/* jeu : pages du livre-jeu — 44 px, liens bordeaux, page courante à l'encre */
.fil-jeu { padding: 14px 44px 12px; }
.fil-jeu .fil-ariane li + li::before { color: var(--ms-or-texte); margin: 0 8px 0 0; }
.fil-jeu .fil-ariane ol { gap: 4px 8px; }
.fil-jeu .fil-ariane a { color: var(--ms-bordeaux); }
.fil-jeu .fil-ariane [aria-current="page"] { color: var(--ms-encre); }
/* ouvrage : « ← Scriptorium › Titre › Manuscrit », tout en gris, filet doré de 2 px */
.fil-ouvrage { border-bottom: 2px solid var(--ms-or); letter-spacing: .06em; }
.fil-ouvrage .fil-ariane li + li::before { color: var(--ms-gris); margin: 0 4px 0 0; }
.fil-ouvrage .fil-ariane ol { gap: 4px 4px; }
.fil-ouvrage .fil-ariane [aria-current="page"] { color: var(--ms-gris); }
.fil-ouvrage .fil-ariane li:first-child a::before { content: '← '; }
/* Fil dans la page (MesVentes, MesAchats, Reliure, StatsLecture, SerieAtelier, CommandePapier) */
.mp-pad { padding-left: 48px; padding-right: 48px; }
.mp-fil-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding-top: 22px; }
.mp-fil-ligne .fil-ariane { padding: 0; font-size: 18px; letter-spacing: .05em; }
.mp-fil-ligne .fil-ariane ol { gap: 4px 5px; }
.mp-fil-ligne .fil-ariane li + li::before { margin: 0 5px 0 0; color: var(--ms-or-texte); }
.mp-fil-ligne .fil-ariane a { color: var(--ms-gris); }
.mp-fil-ligne .fil-ariane [aria-current="page"] { color: var(--ms-encre); }
@media (max-width: 640px) {
    .fil-ariane-bandeau, .fil-monde, .fil-jeu { padding-left: 16px; padding-right: 16px; }
    .mp-pad { padding-left: 16px; padding-right: 16px; }
}

/* Pied : liens légaux discrets sous l'« Explicit » (plus petits, gris adouci) */
.pied-explicit .pied-liens { margin: 10px 0 0; font-size: 13px; letter-spacing: .08em; opacity: .75; }
.pied-explicit .pied-liens span { margin: 0 8px; }
.pied-explicit .pied-liens a:hover, .pied-explicit .pied-liens a:focus { opacity: 1; color: var(--ms-bordeaux); }

/* =====================================================================
   Fenêtres communes de layout.html (confirmation, saisie, capture rapide) :
   dessin des maquettes Idees.dc.html et MesPersonnages.dc.html, sur tout le site
   ===================================================================== */
:root { --ms-champ-fenetre: #FFFDF6; }
[data-theme="sombre"] { --ms-champ-fenetre: #1E1711; }
[data-theme="sepia"] { --ms-champ-fenetre: #F3E7CC; }
/* Fenêtres communes de layout.html (saisie, capture rapide) vues sur ces pages :
   étiquette et champ au dessin de la maquette (le texte et les icônes restent ceux du layout). */
#modalSaisieGlobale .form-label {
    display: block;
    margin: 0 0 6px;
    font-family: var(--font-interface);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ms-gris);
}
#modalSaisieGlobale .form-control, #modalCaptureIdee .form-control {
    padding: 9px 12px;
    border: 1px solid var(--ms-or);
    border-radius: 2px;
    background-color: var(--ms-champ-fenetre);
    font-family: var(--font-interface);
    font-size: 15px;
    line-height: normal;
    color: var(--ms-encre);
}
#modalSaisieGlobale .modal-body { padding: 18px 22px 10px; }     /* MesPersonnages : « Renommer » */
/* Fenêtre de confirmation (confirmerAction) : message seul, 18 px, marges égales */
#modalConfirmationGlobale .modal-body { padding: 18px 22px; font-size: 18px; }

/* Capture rapide (Idees.dc.html) : texte en Garamond de page, bouton d'audio
   bordeaux avec son micro, lien « Boîte à idées » à gauche du bouton bleu. */
#modalCaptureIdee .modal-body { padding-bottom: 8px; }
#modalCaptureIdee .modal-body .mb-3 { margin-bottom: 0 !important; }
#modalCaptureIdee #audio-preview-container { margin-top: 12px; }
#modalCaptureIdee #idee-contenu { font-family: var(--font-page) !important; font-size: 18px; }  /* le layout le met en Lora en ligne */
/* Maquette : zone de texte en ligne (inline-block), d'où l'espace sous elle avant le bouton d'audio */
#modalCaptureIdee #idee-contenu { display: inline-block; vertical-align: baseline; }
#modalCaptureIdee .modal-body .d-flex.gap-2 { gap: 10px !important; margin-top: 12px; margin-bottom: 0 !important; }
#modalCaptureIdee #btn-dictation {
    display: inline-block;
    padding: 6px 14px;
    font-family: var(--font-interface);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    color: var(--ms-bordeaux);
    background: transparent;
    border: 1px solid var(--ms-bordeaux);
    border-radius: 2px;
}
#modalCaptureIdee #btn-dictation:hover { background: var(--ms-bordeaux-fond); border-color: var(--ms-bordeaux-fond); color: var(--ms-sur-fond); }
/* micro : 14 px abaissé de 2 px ; l'espace du gabarit entre micro et texte tient lieu des 4 px de la maquette */
#modalCaptureIdee #btn-dictation svg { width: 14px; height: 14px; margin: 0; vertical-align: -2px; }
#modalCaptureIdee .modal-footer { justify-content: space-between; }
#modalCaptureIdee .modal-footer .btn-link {
    padding: 0;
    border: 0;
    border-radius: 0;
    font-family: var(--font-interface);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
    color: var(--ms-bleu);
    text-decoration: underline !important;
}


/* gris : MesLivres et OuvrageNouveau — tout en gris, filet pointillé doré pâle */
.fil-gris { border-bottom: 1px dotted rgba(198, 161, 91, .6); letter-spacing: .06em; }
.fil-gris .fil-ariane li + li::before { color: var(--ms-gris); margin: 0 4px 0 0; }
.fil-gris .fil-ariane ol { gap: 4px 4px; }
.fil-gris .fil-ariane [aria-current="page"] { color: var(--ms-gris); }