@import url('css/fonts.css');

/* ============================================================
   TOKENS DESIGN — Palette enluminée
   navy #1a1a4a · or #c9a55a · ivoire #fdfdf6
   ============================================================ */
:root {
    --navy: #1a1a4a;
    --navy-deep: #0e0e2e;
    --navy-soft: rgba(26, 26, 74, 0.08);
    --gold: #c9a55a;
    --gold-soft: #e3c98a;
    --gold-deep: #8a6f2a;
    --ivory: #fdfdf6;
    --paper: #f7f3e8;
    --ink: #1d1d2e;
    --ink-soft: #4a4a5e;

    /* Livre d'heures (accueil et pages) */
    --velin: #f5efe0;
    --rubrique: #a8322a;          /* texte coloré sur vélin (≈ 5,8:1) ; jamais d'or pour du texte sur fond clair */
    --filet: rgba(201, 165, 90, 0.55);
    --lettrine-fond: #23336e;     /* couleur liturgique du jour, posée par MainLayout */
    --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.62 0 0 0 0 0.5 0 0 0 0 0.3 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)'/%3E%3C/svg%3E");
}

/* ============================================================
   BODY & TYPO DE BASE
   ============================================================ */
body {
    background-color: var(--ivory);
    color: var(--ink);
    font-family: 'Lora', serif;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    font-weight: 400;
    color: var(--navy);
    line-height: 1.25;
}

h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); padding: 12px 0; }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); padding: 8px 0; }

h1:focus { outline: none; }

/* Accueil : ancres et éléments atteints au clavier ne passent pas sous la barre fixe (80 px). */
html:has(.homepage-wrapper) { scroll-padding-top: 88px; }

/* ============================================================
   FOCUS ET DÉFILEMENT
   ============================================================ */
/* Autres pages : un élément atteint au clavier (Tab, Maj+Tab) s'arrête sous la barre fixe (80 px)
   au lieu de passer dessous. Spécificité nulle : les scroll-margin-top propres aux pages (ancres,
   sommaires) l'emportent. L'accueil est exclu : son scroll-padding-top s'y ajouterait. */
:where(html:not(:has(.homepage-wrapper)) main :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]))) {
    scroll-margin-top: 96px;
}

/* Cible d'un lien d'ancre, rendue focalisable par navbar-utils.js (tabindex=-1) : le focus y est posé
   pour que la lecture au clavier reparte de là, sans contour autour de la section. */
[data-cible-ancre]:focus { outline: none; }

/* ============================================================
   BORDURE ENLUMINÉE (legacy + boutons)
   ============================================================ */
.bordure {
    border: 3px solid transparent;
    border-image: url(images/bordure-bouton2.png) 5;
}

/* ============================================================
   BOUTONS — Style enluminé or/navy
   ============================================================ */
.btn-primary {
    color: var(--ivory);
    background-color: var(--navy);
    border: 1px solid var(--navy);
    font-family: 'Lato', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.7rem 1.4rem;
    border-radius: 0;
    box-shadow: inset 0 0 0 3px var(--navy), inset 0 0 0 4px var(--gold);
    transition: background-color 0.25s, border-color 0.25s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
    color: var(--ivory) !important;
    background-color: #23235c !important;
    border-color: #23235c !important;
    box-shadow: inset 0 0 0 3px #23235c, inset 0 0 0 4px var(--gold) !important;
}
.btn-primary:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

.btn-outline-secondary {
    color: var(--navy);
    border-color: var(--gold);
    background: transparent;
    border-radius: 0;
    transition: background-color 0.3s, color 0.3s;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--navy);
    background-color: rgba(201, 165, 90, 0.15);
    border-color: var(--gold);
}

/* ============================================================
   FOLIO DE VÉLIN — fond commun des pages (MainLayout : main.site-velin)
   Même grammaire que l'accueil : vélin, rubriques rouges, lettrine d'or
   sur la couleur liturgique du jour (--lettrine-fond), filets d'or.
   La page de lecture plein écran (EmptyLayout) n'est pas concernée.
   ============================================================ */
.site-velin {
    min-height: calc(100vh - 80px);
    background-color: var(--velin);
    background-image: var(--grain);
}

.page-content-wrapper {
    position: relative;
    width: 100%;
    min-height: 60vh;
}
/* Ancien décor (icône assombrie sous un voile) : retiré. */
.page-bg,
.page-overlay { display: none; }

/* Le folio : le texte posé directement sur le vélin, sans panneau. */
.page-content {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 44px 8px 96px;
    color: var(--ink);
}
@media (min-width: 768px) {
    .page-content { padding: 56px 32px 112px; }
}

/* Rubrique : petite ligne rouge au-dessus d'un titre (« ¶ La Bible »). */
.rubrique {
    display: block;
    margin: 0 0 0.6rem;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.02rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--rubrique);
}

/* Titre de page : aligné à gauche, petite lettrine d'or sur la couleur du jour,
   filet d'or dessous. ::first-letter garde le titre entier pour les lecteurs d'écran.
   Pour s'en passer : class="sans-lettrine". */
.page-content h1 {
    display: flow-root;
    margin: 0 0 2rem;
    padding: 0.2em 0 1.1rem;
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    line-height: 1.15;
    text-align: left;
    text-wrap: balance;
    border-bottom: 1px solid var(--filet);
}
.page-content h1::first-letter {
    float: left;
    margin: -0.17em 0.14em 0 0;
    padding: 0.14em 0.2em 0.1em;
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.12em;
    line-height: 1;
    color: var(--gold);
    background: var(--lettrine-fond);
    border: 3px double var(--gold);
}
/* Titre qui passe à la ligne : lettrine tombante sur deux lignes, sinon la 2e ligne se met en retrait
   sous la petite lettrine. La boîte va du haut des capitales de la 1re ligne à la ligne de base de la 2e,
   sans toucher la 3e, qui repart à la marge. Hauteur : 1,6 × (0,12 + 1 + 0,17) em + filets ≈ 2,06 em,
   moins que deux lignes (2,3 em).
   Le choix se fait dans le navigateur, qui compte les lignes (js/lettrine-titre.js, data-lettrine).
   Avant la mesure, le serveur pose une estimation par la longueur (Page.razor, Compendium.razor) :
   titre-long partout, titre-moyen sur téléphone (< 480 px) ; en dur pour un titre fixe à saut de ligne. */
.page-content h1.titre-long:not([data-lettrine])::first-letter,
.page-content h1[data-lettrine="tombante"]::first-letter {
    margin: 0.12em 0.12em 0 0;
    padding: 0 0.16em 0.17em;
    font-size: 1.6em;
    line-height: 1;
}
@media (max-width: 479.98px) {
    .page-content h1.titre-moyen:not([data-lettrine])::first-letter {
        margin: 0.12em 0.12em 0 0;
        padding: 0 0.16em 0.17em;
        font-size: 1.6em;
        line-height: 1;
    }
}
.page-content h1.sans-lettrine::first-letter {
    float: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
}

/* Titre de section à petite lettrine (class="lettrine-h2"), le même sur toutes les pages, accueil
   compris : rubrique rouge au-dessus, lettrine d'or sur la couleur du jour. Le padding-top laisse
   la place au cadre, qui dépasse en haut de 0,19 em : ~10 px sous la rubrique. Une feuille de page
   qui vise tous ses h2 (padding, taille) doit exclure ceux-ci : h2:not(.lettrine-h2).
   ::first-letter garde le titre entier pour les lecteurs d'écran. */
.site-velin .lettrine-h2 {
    display: flow-root;
    margin: 0;
    padding: 0.2em 0 0;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(1.9rem, 3vw, 2.6rem);
    line-height: 1.12;
    color: var(--navy);
    text-wrap: balance;
}
.site-velin .lettrine-h2::first-letter {
    float: left;
    margin: -0.17em 0.14em 0 0;
    padding: 0.14em 0.2em 0.1em;
    font-family: 'Playfair Display', serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.12em;
    line-height: 1;
    color: var(--gold);
    background: var(--lettrine-fond);
    border: 3px double var(--gold);
}
.site-velin .lettrine-h2.sans-lettrine::first-letter {
    float: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
}

@media (forced-colors: active) {
    .page-content h1::first-letter,
    .site-velin .lettrine-h2::first-letter { color: CanvasText; }
}

.page-content a:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Sous-titres */
.page-content h2,
.page-content h3 {
    color: var(--navy);
}

/* Images dans le contenu */
.page-content img {
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 1.25rem 0;
    border-radius: 2px;
}

/* ============================================================
   CONTENU D'UN ARTICLE (.post-content)
   Le HTML vient de deux époques : l'éditeur Quill et l'ancien Blogger
   (texte nu coupé de <br>, styles en ligne collés d'ailleurs). Page.razor
   marque les intertitres (.intertitre) et retire les paragraphes vides ;
   ici, tout est ramené à la page de livre : Lora, intertitres Playfair,
   images au double filet d'or, citations en glose, tableaux à filets.
   ============================================================ */
.post-content {
    display: flow-root;            /* contient les images flottantes */
    font-family: 'Lora', serif;
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--ink);
    overflow-wrap: break-word;
}
.post-content p {
    margin: 0 0 1.15em;
}
/* Rien au-dessus du premier bloc (image ou titre) : l'en-tête de l'article a sa marge. */
.post-content > :first-child,
.post-content > :first-child > img:first-child,
.post-content > :first-child > a:first-child > img { margin-top: 0; }

/* ---- Intertitres ---- */
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content .intertitre {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    color: var(--navy);
    text-wrap: balance;
}
/* h2 : précédé du losange d'or des lettrines de l'accueil. */
.post-content h2 {
    margin: 2.4em 0 0.7em;
    padding: 0;
    font-size: clamp(1.5rem, 1.25rem + 0.9vw, 1.85rem);
    line-height: 1.22;
}
.post-content h2::before {
    content: "";
    display: block;
    width: 64px;
    height: 9px;
    margin-bottom: 0.75rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='9'%3E%3Cpath d='M4.5 0.5 8.5 4.5 4.5 8.5 0.5 4.5Z' fill='%23c9a55a'/%3E%3Cpath d='M8 4.5H64' stroke='%23c9a55a' stroke-width='1'/%3E%3C/svg%3E") left center / 64px 9px no-repeat;
}
/* h3 : une rubrique, en rouge italique comme dans les livres liturgiques. */
.post-content h3 {
    margin: 1.9em 0 0.5em;
    padding: 0;
    font-style: italic;
    font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4rem);
    line-height: 1.3;
    color: var(--rubrique);
}
.post-content h4,
.post-content h5 {
    margin: 1.8em 0 0.5em;
    padding: 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.45;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.post-content h2:first-child,
.post-content h3:first-child { margin-top: 0; }
/* Titre juste sous une image : la marge de l'image tient déjà lieu d'espace. */
.post-content :is(img, .separator, p:has(> img)) + h2 { margin-top: 1.4em; }
/* Les tailles fixées dans l'éditeur (« font-size: medium ») ne s'appliquent pas aux titres. */
.post-content :is(h2, h3, h4) [style*="font-size"] { font-size: inherit !important; }

/* Ligne ou paragraphe entièrement en gras : intertitre des anciens articles. */
.post-content .intertitre {
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: 400;
}
.post-content p.intertitre { margin: 2em 0 0.55em; }
.post-content b.intertitre {
    display: block;
    margin: 1.6em 0 0.3em;
}
.post-content .intertitre strong,
.post-content .intertitre b { font-weight: 400; }

.post-content strong,
.post-content b { font-weight: 700; }

/* ---- Liens ---- */
.post-content a {
    color: var(--navy);
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s;
}
.post-content a:hover {
    color: var(--navy);
    text-decoration-color: var(--rubrique);
}
.post-content a:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 2px;
}
/* Références bibliques (a.bible-ref, aperçu au clic) : mises en forme dans css/bible-ref.css seulement. */

/* ---- Images : double filet d'or, jamais agrandies au-delà de leur taille ---- */
.post-content img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 1.8em auto;
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
    border-radius: 0;
    box-sizing: border-box;
}
.post-content a:has(> img) { text-decoration: none; }
/* Image flottante (anciens articles) : garde son côté, assez de marge pour le texte. */
.post-content [style*="float: left"] img,
.post-content [style*="float:left"] img { margin: 0.4em 1.4em 1em 0; }
.post-content [style*="float: right"] img,
.post-content [style*="float:right"] img { margin: 0.4em 0 1em 1.4em; }

.post-content iframe {
    display: block;
    max-width: 100%;
    margin: 1.8em auto;
    padding: 5px;
    background: var(--ivory);
    border: 3px double var(--gold);
    box-sizing: border-box;
}
.post-content iframe[src*="youtube"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* ---- Citations : une glose, avec le filet d'or de l'accueil ---- */
.post-content blockquote {
    margin: 1.8em 0;
    padding: 0.15em 0 0.15em 1.5em;
    border-left: 1px solid var(--gold);
    background: none;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.06rem;
    line-height: 1.75;
    color: var(--ink);
}
.post-content blockquote :is(i, em) { font-style: italic; }
.post-content blockquote p:last-child { margin-bottom: 0; }

/* ---- Listes ---- */
.post-content ul,
.post-content ol {
    margin: 0 0 1.25em;
    padding-left: 1.6em;
}
.post-content li {
    margin-bottom: 0.45em;
    padding-left: 0.2em;
}
.post-content li::marker {
    color: var(--rubrique);
    font-family: 'Playfair Display', serif;
}
/* Quill 2 range les puces dans un <ol> : on leur rend leur puce. */
.post-content li[data-list="bullet"] { list-style-type: disc; }
.post-content .ql-ui { display: none; }

/* ---- Alignements et retraits de l'éditeur (les classes de Quill hors éditeur) ---- */
.post-content .ql-align-center { text-align: center; }
.post-content .ql-align-right { text-align: right; }
.post-content .ql-align-justify { text-align: justify; }
.post-content .ql-indent-1 { padding-left: 3em; }
.post-content .ql-indent-2 { padding-left: 6em; }
.post-content .ql-indent-3 { padding-left: 9em; }

.post-content hr {
    height: 9px;
    margin: 2.6em auto;
    border: 0;
    opacity: 1;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0.5 8.5 4.5 4.5 8.5 0.5 4.5Z' fill='%23c9a55a'/%3E%3C/svg%3E") center / 9px 9px no-repeat,
        linear-gradient(var(--filet), var(--filet)) center / 100% 1px no-repeat;
}

/* ---- Tableaux de données : filets d'or horizontaux, en-tête en petites capitales ----
   Page.razor pose chaque tableau sans image dans un cadre (.tableau) qui défile sur téléphone ;
   ceux de l'éditeur y deviennent des fiches (.tableau-fiches, voir RESPONSIVE). */
.post-content .tableau { margin: 2em 0; }
.post-content .tableau > table { margin: 0; }
.post-content table {
    width: 100%;
    max-width: 100%;
    margin: 2em 0;
    border: 0;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.55;
}
.post-content td,
.post-content th {
    padding: 0.65rem 0.75rem;
    vertical-align: top;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--filet);
}
.post-content tr > :first-child { padding-left: 0; }
.post-content th,
.post-content table:not(:has(img)) > tbody > tr:first-child > td[data-row] {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    vertical-align: bottom;
    border-bottom: 3px double var(--gold);
}

/* Tableau qui porte une image (légende de Blogger ou de l'éditeur) : une figure, pas un tableau. */
.post-content table:has(img) {
    width: auto;
    margin: 2em auto;
    font-size: inherit;
}
.post-content table:has(img) td {
    padding: 0;
    border: 0;
    text-align: center;
    vertical-align: top;
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
}
.post-content table:has(img) img { margin: 0 auto; }
/* La légende : sous l'image, en italique. */
.post-content .tr-caption,
.post-content table:has(img) td:not(:has(img)) {
    padding: 0.7rem 0.5rem 0;
    font-style: italic;
    font-size: 0.9rem !important;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* ---- Styles collés d'autres sites, ramenés au folio ---- */
.post-content [style*="font-family"] { font-family: inherit !important; }
.post-content [style*="line-height"] { line-height: inherit !important; }
.post-content :is([style*="font-size: 10px"], [style*="font-size: 11px"], [style*="font-size: 12px"],
    [style*="font-size: 13px"], [style*="font-size: 14px"], [style*="font-size: 15px"], [style*="font-size: 16px"],
    [style*="font-size: 10pt"], [style*="font-size: 11pt"], [style*="font-size: 12pt"],
    [style*="font-size: 10.0pt"], [style*="font-size: 11.0pt"], [style*="font-size: 12.0pt"]) { font-size: inherit !important; }
.post-content :is([style*="background-color: white"], [style*="background: white"],
    [style*="background-color: rgb(255, 255, 255)"], [style*="background-color: #ffffff"],
    [style*="background-color: #FFFFFF"], [style*="background-color: transparent"]) { background: transparent !important; }
/* Rouge vif → rouge des rubriques ; gris pâles → encre douce (contraste sur le vélin). */
.post-content :is([style*="color: red"], [style*="color: #ff0000"], [style*="color: #FF0000"], [style*="color: rgb(255, 0, 0)"]) { color: var(--rubrique) !important; }
.post-content :is([style*="color: grey"], [style*="color: gray"], [style*="color: #888888"], [style*="color: #999999"],
    [style*="color: #9197a3"], [style*="color: #606060"], [style*="color: rgb(176, 176, 176)"]) { color: var(--ink-soft) !important; }
.post-content a[style*="color"] { color: var(--navy) !important; }

/* ---- « L'Évangile du dimanche avec les Pères » (#PageEvangile, anciens articles) ----
   Texte de l'Évangile, versets numérotés en rouge, puis les commentaires des Pères
   en gloses, chacun signé d'un médaillon. */
.post-content :is(#UpdatePanel1, #Contenu, #PageEvangile) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    font-size: inherit !important;
}
.post-content .EvangileTexte { font-size: inherit !important; margin: 0 !important; }
.post-content .EvangileNoVerset {
    margin: 0 0.15em 0 0.3em !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700;
    font-size: 0.62em !important;
    vertical-align: 0.45em;
}
.post-content .CommentaireBoite { margin: 1.1em 0 2.2em !important; }
.post-content .CommentaireUnCommentaire {
    margin: 0 0 1.1em !important;
    padding: 0.1em 0 0.1em 1.2em !important;
    background: none !important;
    border: 0 !important;
    border-left: 1px solid var(--gold) !important;
}
.post-content .CommentaireUnCommentaire table { width: 100%; margin: 0; font-size: inherit; }
.post-content .CommentaireUnCommentaire td {
    padding: 0 !important;
    margin: 0 !important;
    border: 0;
    text-align: left;
    vertical-align: top;
    font-style: normal;
    font-size: inherit !important;
    color: inherit;
}
.post-content .CommentaireUnCommentaire td:has(> img) { width: 64px; padding-right: 14px !important; }
.post-content .CommentaireUnCommentaire img {
    width: 52px !important;
    height: 52px !important;
    margin: 0.25em 0 0 !important;
    padding: 2px !important;
    object-fit: cover;
    object-position: 50% 20%;
    border: 1px solid var(--gold) !important;
    border-radius: 50%;
}
.post-content .CommentaireNomAuteur {
    margin: 0 0 0.1em !important;
    font-family: 'Playfair Display', serif !important;
    font-style: italic;
    font-size: 1rem !important;
    color: var(--rubrique) !important;
}
.post-content .CommentaireTexte {
    margin: 0 !important;
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
}

/* Container global */
/* clip et non hidden : hidden ferait de <main> un conteneur de défilement et neutraliserait
   tous les position: sticky du site (chapelet, compendium, conciles, politique). */
.container-fluid {
    max-width: 100vw;
    overflow-x: clip;
}

/* Verset (numérotation) */
.verse_number {
    font-size: x-small;
    color: var(--gold-deep);
    font-weight: 700;
}

/* ============================================================
   FORMULAIRES — inputs, textarea
   Un seul champ pour tout le site (recherche, contact, compendium) :
   vélin clair, bord en or foncé (4,2:1 sur le vélin, au-delà des 3:1
   exigés pour la limite d'un champ), filet d'or intérieur pour le décor.
   Texte indicatif en encre douce, sans transparence (8,4:1 sur l'ivoire).
   Les feuilles des pages ne règlent que la taille et l'espacement.
   ============================================================ */
.form-control,
.form-select {
    color: var(--ink);
    font-family: 'Lora', serif;
    background-color: var(--ivory);
    border: 1px solid var(--gold-deep);
    border-radius: 0;
    box-shadow: inset 0 0 0 3px var(--ivory), inset 0 0 0 4px var(--filet);
    transition: border-color 0.2s;
}
/* Petits champs (tableaux d'administration) : trop serrés pour le filet intérieur. */
.form-control-sm,
.form-select-sm { box-shadow: none; }
@media (hover: hover) {
    .form-control:hover,
    .form-select:hover { border-color: var(--navy); }
}
/* Focus : le contour navy du site ; le filet intérieur reste (Bootstrap le remplacerait par un halo bleu). */
.form-control:focus,
.form-select:focus {
    color: var(--ink);
    background-color: var(--ivory);
    border-color: var(--navy);
    box-shadow: inset 0 0 0 3px var(--ivory), inset 0 0 0 4px var(--filet);
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}
.form-control-sm:focus,
.form-select-sm:focus { box-shadow: none; }
.form-control::placeholder {
    color: var(--ink-soft);
    font-style: italic;
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .form-control,
    .form-select { transition: none; }
}

/* ============================================================
   RESPONSIVE (contenu d'un article)
   ============================================================ */
@media (max-width: 767.98px) {
    .post-content { font-size: 1.0625rem; line-height: 1.72; }
    .post-content blockquote { padding-left: 1.1em; font-size: 1rem; }
    .post-content ul,
    .post-content ol { padding-left: 1.3em; }
    .post-content .ql-indent-1 { padding-left: 1.5em; }
    .post-content .ql-indent-2 { padding-left: 3em; }
    .post-content .ql-indent-3 { padding-left: 4.5em; }
    /* Tableau de données : il garde des colonnes lisibles et défile dans son cadre. */
    .post-content .tableau { overflow-x: auto; }
    .post-content .tableau > table { font-size: 0.88rem; }
    .post-content .tableau > table:not(.tableau-fiches):has(> tbody > tr > :nth-child(3)) { width: max(100%, 26rem); max-width: none; }
    .post-content .tableau > table:not(.tableau-fiches):has(> tbody > tr > :nth-child(4)) { width: max(100%, 34rem); }
    .post-content .tableau > table:not(.tableau-fiches):has(> tbody > tr > :nth-child(5)) { width: max(100%, 40rem); }
    .post-content td,
    .post-content th { padding: 0.55rem 0.5rem; }
    /* Tableau de l'éditeur : une fiche par rangée, le nom de chaque colonne au-dessus de sa valeur. */
    .post-content .tableau-fiches,
    .post-content .tableau-fiches > tbody,
    .post-content .tableau-fiches > tbody > tr,
    .post-content .tableau-fiches > tbody > tr > td {
        display: block;
        width: auto;
    }
    .post-content .tableau > .tableau-fiches { font-size: 0.95rem; }
    .post-content .tableau-fiches > tbody > tr:first-child { display: none; }
    .post-content .tableau-fiches > tbody > tr {
        padding: 0.9rem 0 1rem;
        border-bottom: 1px solid var(--filet);
    }
    .post-content .tableau-fiches > tbody > tr:nth-child(2) { border-top: 3px double var(--gold); }
    .post-content .tableau-fiches td {
        padding: 0;
        border: 0;
    }
    .post-content .tableau-fiches td:first-child {
        margin-bottom: 0.4rem;
        font-family: 'Playfair Display', serif;
        font-size: 1.15rem;
        line-height: 1.3;
        color: var(--navy);
    }
    .post-content .tableau-fiches td:first-child :is(strong, b) { font-weight: 400; }
    .post-content .tableau-fiches td + td { margin-top: 0.55rem; }
    .post-content .tableau-fiches td + td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.1rem;
        font-family: 'Lato', sans-serif;
        font-style: normal;
        font-weight: 700;
        font-size: 0.68rem;
        line-height: 1.4;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
    /* Images flottantes des anciens articles : centrées, la colonne est trop étroite. */
    .post-content [style*="float"]:has(img) {
        float: none !important;
        margin-inline: auto !important;
    }
    .post-content [style*="float"] img { margin: 1.4em auto; }
    .post-content .CommentaireUnCommentaire { padding-left: 0.9em !important; }
    .post-content .CommentaireUnCommentaire td:has(> img) { width: 50px; padding-right: 10px !important; }
    .post-content .CommentaireUnCommentaire img { width: 40px !important; height: 40px !important; }
}
/* Tableau plus large que l'écran : une rubrique invite à le faire glisser. */
@media (max-width: 599.98px) {
    .post-content .tableau-large:not(:has(> .tableau-fiches))::before {
        content: "Faites glisser le tableau →" / "";
        position: sticky;
        left: 0;
        display: block;
        margin-bottom: 0.4rem;
        font-family: 'Playfair Display', serif;
        font-style: italic;
        font-size: 0.9rem;
        color: var(--rubrique);
    }
}