/* --------------------------------------------------------------------------
   Le National — feuille de style du site public
   Palette reprise de l'ancien site : bleu #243B81, rouge #C1272D.
   -------------------------------------------------------------------------- */

:root {
    --bleu: #2c3481;
    --bleu-fonce: #1a2c61;
    --rouge: #c1272d;
    --rouge-vif: #ec1b25;
    --encre: #16181d;
    --gris: #5b6472;
    --gris-clair: #e6e8ec;
    --fond: #f4f5f7;
    --blanc: #fff;
    --rayon: 3px;
    --ombre: 0 1px 4px rgba(0, 0, 0, .12);
    --titre: 'Philosopher', Georgia, 'Times New Roman', serif;
    --texte: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit l'emporter sur tout `display` déclaré ailleurs. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 15px;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--rouge); }

.conteneur { width: min(1160px, 100% - 32px); margin-inline: auto; }

.visuellement-cache {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Bandeau de contact -------------------------------------------------- */

.bandeau-contact { background: var(--rouge-vif); color: var(--blanc); font-size: 13px; }
.bandeau-contact__interieur {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 6px 0; flex-wrap: wrap;
}
.bandeau-contact__courriel { display: inline-flex; align-items: center; gap: 8px; color: var(--blanc); }
.bandeau-contact__courriel:hover { color: var(--blanc); text-decoration: underline; }
.bandeau-contact__droite { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.bandeau-contact__compte { display: flex; align-items: center; gap: 14px; }
.bandeau-contact__compte a { color: var(--blanc); font-size: 12px; }
.bandeau-contact__compte a:hover { color: rgba(255, 255, 255, .75); }
.bandeau-contact__compte form { margin: 0; }
.bandeau-contact__compte button {
    border: 0; background: none; color: rgba(255, 255, 255, .85);
    font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline;
}
.bandeau-contact__compte button:hover { color: var(--blanc); }

.bandeau-contact__reseaux { display: flex; align-items: center; gap: 14px; }
.bandeau-contact__reseaux a { color: var(--blanc); display: inline-flex; }
.bandeau-contact__reseaux a:hover { color: rgba(255, 255, 255, .75); }

/* --- En-tête ------------------------------------------------------------- */

.entete { background: var(--blanc); border-bottom: 3px solid var(--rouge-vif); }

.entete__principale {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 24px; padding: 18px 0;
}
.entete__logo { justify-self: center; }
.entete__logo img { max-width: 100%; height: auto; }
.entete__principale .recherche { justify-self: end; }

@media (max-width: 980px) {
    .entete__principale { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
    .entete__principale .recherche { justify-self: center; }
}

/* --- Webradio ------------------------------------------------------------ */

.radio { display: flex; align-items: center; gap: 10px; }

.radio__bouton {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    border: 5px solid var(--bleu); background: var(--blanc); color: var(--rouge-vif);
    display: grid; place-items: center; cursor: pointer; padding: 0;
    transition: background .15s, color .15s;
}
.radio__bouton:hover { background: var(--bleu); color: var(--blanc); }
.radio__icone { display: grid; place-items: center; margin-left: 2px; }
.radio.est-en-lecture .radio__icone { margin-left: 0; }
.radio.est-en-lecture .radio__bouton { background: var(--bleu); color: var(--blanc); }

.radio__infos { display: flex; flex-direction: column; line-height: 1.25; }
.radio__nom { font-size: 14px; color: var(--bleu); font-weight: 600; white-space: nowrap; }
.radio__etat { font-size: 11px; color: var(--gris); min-height: 14px; }
.radio__etat.est-erreur { color: var(--rouge-vif); }

.radio__volume { display: flex; align-items: center; gap: 6px; }
.radio__muet {
    border: 0; background: none; color: var(--bleu); cursor: pointer;
    padding: 4px; display: inline-flex; border-radius: var(--rayon);
}
.radio__muet:hover { color: var(--rouge-vif); }

/* Curseur de volume : piste remplie jusqu'à --remplissage. */
.radio__curseur {
    -webkit-appearance: none; appearance: none; width: 74px; height: 4px;
    border-radius: 2px; cursor: pointer; background: var(--gris-clair);
    background-image: linear-gradient(var(--bleu), var(--bleu));
    background-size: var(--remplissage, 80%) 100%;
    background-repeat: no-repeat;
}
.radio__curseur::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 13px; height: 13px;
    border-radius: 50%; background: var(--bleu); border: 0; cursor: pointer;
}
.radio__curseur::-moz-range-thumb {
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--bleu); border: 0; cursor: pointer;
}
.radio__curseur::-moz-range-progress { background: var(--bleu); height: 4px; border-radius: 2px; }
.radio__curseur:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

@media (max-width: 560px) { .radio__volume { display: none; } }

/* Navigation sans rechargement : le contenu s'estompe pendant le chargement. */
main { transition: opacity .12s ease; }
body.est-en-chargement main { opacity: .55; }
body.est-en-chargement { cursor: progress; }

.recherche { display: flex; gap: 0; }
.recherche input {
    border: 1px solid var(--gris-clair); border-right: 0; padding: 9px 12px;
    min-width: 260px; font: inherit; border-radius: var(--rayon) 0 0 var(--rayon);
}
.recherche button {
    border: 0; background: var(--bleu); color: var(--blanc); padding: 9px 18px;
    font: inherit; cursor: pointer; border-radius: 0 var(--rayon) var(--rayon) 0;
}
.recherche button:hover { background: var(--rouge); }
.recherche--page { margin: 12px 0; }

.navigation { background: var(--bleu); }
.navigation__interieur { display: flex; flex-wrap: wrap; align-items: center; }
.navigation__liens { display: flex; flex-wrap: wrap; }
.navigation__lien {
    color: rgba(255, 255, 255, .9); padding: 12px 16px; font-size: 13px;
    font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
}
.navigation__lien:hover, .navigation__lien.est-actif { background: var(--rouge); color: var(--blanc); }

/* Bouton et en-tête du menu : inutiles tant que la barre tient en largeur. */
.navigation__bascule, .navigation__entete, .navigation__voile { display: none; }

.navigation__hamburger,
.navigation__hamburger::before,
.navigation__hamburger::after {
    display: block; width: 20px; height: 2px; border-radius: 2px;
    background: var(--blanc); transition: transform .2s, opacity .2s;
}
.navigation__hamburger { position: relative; }
.navigation__hamburger::before,
.navigation__hamburger::after { content: ''; position: absolute; left: 0; }
.navigation__hamburger::before { top: -6px; }
.navigation__hamburger::after { top: 6px; }

.navigation__bascule[aria-expanded="true"] .navigation__hamburger { background: transparent; }
.navigation__bascule[aria-expanded="true"] .navigation__hamburger::before { transform: translateY(6px) rotate(45deg); }
.navigation__bascule[aria-expanded="true"] .navigation__hamburger::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
    .navigation__bascule {
        display: flex; align-items: center; gap: 11px;
        background: none; border: 0; cursor: pointer;
        color: var(--blanc); font: inherit; font-size: 13px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .6px; padding: 13px 16px;
    }

    /* La navigation sort de l'écran et revient en glissant. */
    .navigation__liens {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
        width: 280px; max-width: 84vw; background: var(--bleu-fonce);
        flex-direction: column; flex-wrap: nowrap; overflow-y: auto;
        transform: translateX(-100%); transition: transform .25s ease;
    }
    .navigation__liens.est-ouvert { transform: translateX(0); box-shadow: 6px 0 24px rgba(0, 0, 0, .35); }

    .navigation__entete {
        display: flex; align-items: center; justify-content: space-between;
        margin: 0; padding: 15px 16px; font-size: 12px; font-weight: 700;
        letter-spacing: 1.4px; text-transform: uppercase;
        color: rgba(255, 255, 255, .55);
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    .navigation__fermer {
        background: none; border: 0; color: var(--blanc);
        font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px;
    }

    .navigation__lien {
        padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07);
        letter-spacing: .3px;
    }

    .navigation__voile {
        display: block; position: fixed; inset: 0; z-index: 55;
        background: rgba(10, 14, 38, .55); opacity: 0; transition: opacity .2s;
    }
    .navigation__voile.est-visible { opacity: 1; }

    body.menu-ouvert { overflow: hidden; }
}

/* --- Fil « dernière heure » ---------------------------------------------- */

.fil {
    display: flex; align-items: center; gap: 12px; background: var(--blanc);
    box-shadow: var(--ombre); margin-top: 20px; overflow: hidden;
}
.fil__etiquette {
    background: var(--rouge); color: var(--blanc); padding: 10px 14px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; white-space: nowrap;
}
/* Fenetre du fil : les bords s'estompent au lieu de couper le texte net. */
.fil__fenetre {
    flex: 1; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
/*
   La piste contient deux fois la liste : glisser de la moitie de sa largeur
   ramene exactement au point de depart, d'ou une boucle sans saut. La duree
   est calculee par le script pour garder la meme vitesse de lecture quelle
   que soit la longueur des titres.
*/
.fil__piste {
    display: flex; width: max-content;
    animation: fil-defile var(--fil-duree, 45s) linear infinite;
}
.fil__liste { display: flex; margin: 0; padding: 0; list-style: none; }
.fil__liste li { display: flex; align-items: center; padding: 10px 0; }
/* Chaque breve est suivie d'un point : l'ecart reste identique entre les deux copies. */
.fil__liste li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rouge); margin: 0 22px; flex: none; }
.fil__item { white-space: nowrap; font-size: 14px; color: var(--encre); }
.fil__item:hover, .fil__item:focus-visible { color: var(--rouge); text-decoration: underline; }

/* Survol ou focus clavier : le fil s'arrete pour qu'on puisse cliquer. */
.fil:hover .fil__piste,
.fil:focus-within .fil__piste { animation-play-state: paused; }

@keyframes fil-defile {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Mouvement reduit demande par le systeme : liste fixe, a faire defiler a la main. */
@media (prefers-reduced-motion: reduce) {
    .fil__piste { animation: none; }
    .fil__fenetre { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .fil__liste[aria-hidden] { display: none; }
}

/* --- Grille principale --------------------------------------------------- */

.grille-principale {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 32px; margin: 24px 0 48px;
    align-items: start;
}

/*
   La colonne latérale suit le défilement tant qu'elle tient dans l'écran.
   `align-items: start` sur la grille est indispensable : sans lui, la colonne
   s'étire sur toute la hauteur et `sticky` n'a aucun effet.
*/
.grille-principale__aside { position: sticky; top: 16px; }

/* Trop haute pour l'écran : on la laisse défiler normalement. */
@media (max-height: 720px) { .grille-principale__aside { position: static; } }

@media (max-width: 900px) {
    .grille-principale { grid-template-columns: 1fr; }
    .grille-principale__aside { position: static; }
}

.section-titre {
    font-family: var(--titre); font-size: 20px; margin: 32px 0 16px;
    border-bottom: 2px solid var(--bleu); padding-bottom: 0;
}
.section-titre a { color: inherit; }
.section-titre > * , .section-titre {
    display: block;
}
.section-titre::after {
    content: ''; display: block; height: 0;
}

/* --- Cartes d'article ---------------------------------------------------- */

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }

.carte { background: var(--blanc); box-shadow: var(--ombre); display: flex; flex-direction: column; }
.carte__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.carte__corps { padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 6px; }

.carte__rubrique {
    align-self: flex-start; background: var(--bleu); color: var(--blanc);
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; padding: 3px 8px;
}
.carte__rubrique:hover { background: var(--rouge); color: var(--blanc); }

.carte__surtitre { margin: 0; font-size: 11px; text-transform: uppercase; color: var(--rouge); font-weight: 700; }
.carte__titre { margin: 0; font-family: var(--titre); font-size: 17px; line-height: 1.3; }
.carte__titre a { color: var(--encre); }
.carte__titre a:hover { color: var(--bleu); }
.carte__extrait { margin: 0; font-size: 13px; color: var(--gris); }
.carte__meta { margin: 0; font-size: 11px; color: var(--gris); display: flex; flex-wrap: wrap; gap: 10px; }
.carte__auteur { font-weight: 600; color: var(--encre); }

.carte--vedette .carte__titre { font-size: 28px; }
.carte--vedette .carte__image img { aspect-ratio: 16 / 9; }

.carte--compacte { flex-direction: row; gap: 12px; }
.carte--compacte .carte__image { flex: 0 0 108px; }
.carte--compacte .carte__image img { aspect-ratio: 1 / 1; }
.carte--compacte .carte__corps { padding: 10px 12px 10px 0; }
.carte--compacte .carte__titre { font-size: 15px; }

.carte--liste { flex-direction: row; gap: 16px; margin-bottom: 18px; }
.carte--liste .carte__image { flex: 0 0 260px; }
.carte--liste .carte__image img { height: 100%; aspect-ratio: 16 / 10; }
@media (max-width: 640px) {
    .carte--liste, .carte--compacte { flex-direction: column; }
    .carte--liste .carte__image, .carte--compacte .carte__image { flex-basis: auto; }
    .carte--compacte .carte__corps { padding: 10px 12px 14px; }
}

/* --- Mosaïque de une ----------------------------------------------------- */

.mosaique {
    display: grid; gap: 4px; margin: 20px 0 28px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 254px 192px;
}
.mosaique .tuile--grande { grid-column: span 2; grid-row: span 2; }
.mosaique .tuile--moyenne { grid-column: span 2; }
.mosaique .tuile--petite { grid-column: span 1; }

.tuile { position: relative; overflow: hidden; background: var(--bleu-fonce); }
.tuile__lien { display: block; height: 100%; }
.tuile__image {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.tuile:hover .tuile__image { transform: scale(1.05); }

/* Dégradé sombre : le titre reste lisible quelle que soit la photo. */
.tuile__voile {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .35) 42%, transparent 70%);
}
.tuile__texte {
    position: absolute; inset-inline: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    padding: 16px;
}
.tuile__titre {
    font-family: var(--titre); color: var(--blanc); font-weight: 700;
    line-height: 1.22; font-size: 17px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tuile--grande .tuile__titre { font-size: 27px; -webkit-line-clamp: 4; }
.tuile--moyenne .tuile__titre { font-size: 20px; }
.tuile--petite .tuile__titre { font-size: 14px; -webkit-line-clamp: 2; }
.tuile__meta { font-size: 11px; color: rgba(255, 255, 255, .75); }
.tuile--petite .tuile__meta { display: none; }

@media (max-width: 900px) {
    .mosaique { grid-template-rows: 240px 170px 150px; }

    /* Le `span 2` du bureau laisserait les petites tuiles sans hauteur. */
    .mosaique .tuile--grande { grid-column: span 4; grid-row: span 1; }
    .mosaique .tuile--moyenne { grid-column: span 4; }
    .mosaique .tuile--petite { grid-column: span 2; }
    .tuile--grande .tuile__titre { font-size: 21px; }
}

/* --- Étiquette de rubrique ----------------------------------------------- */

.etiquette-rubrique-titre {
    margin: 0 0 14px; border-bottom: 2px solid var(--gris-clair);
    line-height: 0;
}
.etiquette-rubrique {
    display: inline-block; background: var(--rouge-vif); color: var(--blanc);
    font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
    padding: 7px 16px; line-height: 1.2;
}
.etiquette-rubrique:hover { background: var(--bleu); color: var(--blanc); }
.etiquette-rubrique--sur-image { font-size: 10px; padding: 4px 9px; letter-spacing: .5px; }

/* --- Bandes de rubriques -------------------------------------------------- */

.bande-duo {
    display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: 24px; margin-bottom: 32px;
}
/* En dessous, la colonne de droite deviendrait trop étroite pour ses cartes. */
@media (max-width: 1100px) { .bande-duo { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 1100px) { .bande-duo .bloc-rubrique { margin-bottom: 32px; } }

.bloc-rubrique {
    background: var(--blanc); box-shadow: var(--ombre);
    padding: 16px 18px 18px; margin-bottom: 32px;
}
.bande-duo .bloc-rubrique { margin-bottom: 0; }

.bloc-rubrique__liste { display: flex; flex-direction: column; }
.bloc-rubrique__colonne { display: flex; flex-direction: column; gap: 18px; }
.bloc-rubrique__grille {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px;
}

.bloc-rubrique__suite {
    display: inline-block; margin-top: 16px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.bloc-rubrique__suite::after { content: ' →'; }

/* --- Article en liste ----------------------------------------------------- */

.article-liste {
    display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px;
    padding: 14px 0; border-bottom: 1px solid var(--gris-clair);
}
.article-liste:last-child { border-bottom: 0; padding-bottom: 0; }
.article-liste:first-child { padding-top: 0; }
.article-liste__image { display: block; overflow: hidden; background: var(--gris-clair); }
.article-liste__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; }
.article-liste:hover .article-liste__image img { transform: scale(1.06); }

.article-liste__titre { margin: 0 0 5px; font-family: var(--titre); font-size: 16px; line-height: 1.3; }
.article-liste__titre a { color: var(--encre); }
.article-liste__titre a:hover { color: var(--rouge-vif); }
.article-liste__meta {
    margin: 0 0 6px; font-size: 11px; color: var(--gris);
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.article-liste__rubrique { color: var(--rouge-vif); font-weight: 700; text-transform: uppercase; font-size: 10px; }
.article-liste__extrait { margin: 0; font-size: 13px; color: var(--gris); line-height: 1.55; }

@media (max-width: 560px) {
    .article-liste { grid-template-columns: 108px minmax(0, 1fr); gap: 10px; }
    .article-liste__extrait { display: none; }
}

/* --- Article en carte ----------------------------------------------------- */

/* Colonne flex : la méta se cale en bas, les cartes s'alignent entre elles. */
.article-carte { display: flex; flex-direction: column; height: 100%; }

.article-carte__image {
    display: block; position: relative; overflow: hidden; background: var(--gris-clair);
}
.article-carte__image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .4s ease; }
.article-carte:hover .article-carte__image img { transform: scale(1.06); }

/* Badge posé sur la photo : il ne pousse plus le titre vers le bas. */
.article-carte__rubrique {
    position: absolute; left: 0; bottom: 0;
    background: var(--rouge-vif); color: var(--blanc);
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    text-transform: uppercase; padding: 4px 9px;
}

.article-carte__titre {
    margin: 10px 0 6px; font-family: var(--titre); font-size: 15px; line-height: 1.32;
    /* Trois lignes au plus : toutes les cartes gardent la même hauteur. */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-carte__titre a { color: var(--encre); }
.article-carte__titre a:hover { color: var(--rouge-vif); }

.article-carte__meta {
    margin: auto 0 0; padding-top: 8px; font-size: 11px; color: var(--gris);
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}

/* --- Articles similaires --------------------------------------------------- */

.similaires {
    background: var(--blanc); box-shadow: var(--ombre);
    padding: 24px 26px 26px; margin-top: 28px;
}

.similaires__entete {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    border-bottom: 2px solid var(--bleu); padding-bottom: 10px; margin-bottom: 20px;
}
.similaires__titre { font-family: var(--titre); font-size: 21px; margin: 0; }
.similaires__lien { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.similaires__lien::after { content: ' →'; }

.similaires__grille {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
}
@media (max-width: 900px) { .similaires__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) {
    .similaires { padding: 18px 14px 20px; }
    .similaires__grille { grid-template-columns: 1fr; gap: 18px; }
}

/* --- Encart publicitaire --------------------------------------------------- */

.publicite {
    background: var(--blanc); box-shadow: var(--ombre);
    padding: 10px; margin-bottom: 24px; text-align: center;
}
.publicite__mention {
    margin: 0 0 8px; font-size: 10px; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--gris);
}
.publicite img { width: 100%; height: auto; }

/* Au fil du texte : l'encart doit respirer, sinon il se lit comme un paragraphe. */
.publicite--article { margin: 32px 0; }
.publicite--article img { max-width: 620px; }

/* Bandeau d'accueil : pleine largeur de la colonne, entre deux rubriques. */
.publicite--accueil { margin: 4px 0 28px; }
.publicite--accueil img { max-width: 100%; }

/* --- Classement « les plus lus » ------------------------------------------ */

.encart__classement { list-style: none; margin: 0; padding: 0; counter-reset: rang; }
.encart__classement li {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 0; border-bottom: 1px solid var(--gris-clair);
}
.encart__classement li:last-child { border-bottom: 0; }
.encart__rang {
    flex: 0 0 24px; font-family: var(--titre); font-size: 20px;
    font-weight: 700; color: var(--rouge-vif); line-height: 1;
}
.encart__classement a { font-size: 13px; color: var(--encre); line-height: 1.4; }
.encart__classement a:hover { color: var(--rouge-vif); }
.bouton-lien { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; }
.bouton-lien::after { content: ' →'; }

.bouton {
    display: inline-block; background: var(--bleu); color: var(--blanc);
    padding: 8px 18px; font-size: 13px; font-weight: 600; border: 0;
    border-radius: var(--rayon); cursor: pointer; font-family: inherit;
}
.bouton:hover { background: var(--rouge); color: var(--blanc); }

.message-vide { background: var(--blanc); padding: 24px; color: var(--gris); box-shadow: var(--ombre); }

/* --- Colonne latérale ---------------------------------------------------- */

.encart { background: var(--blanc); box-shadow: var(--ombre); padding: 16px; margin-bottom: 24px; }
.encart__titre {
    margin: 0 0 12px; font-family: var(--titre); font-size: 16px;
    border-bottom: 2px solid var(--bleu); padding-bottom: 8px;
}
.encart__couverture { border: 1px solid var(--gris-clair); }
.encart__legende { font-size: 12px; color: var(--gris); margin: 10px 0; }
.encart__liste { list-style: none; margin: 0; padding: 0; }
.encart__liste li { border-bottom: 1px solid var(--gris-clair); }
.encart__liste li:last-child { border-bottom: 0; }
.encart__liste a { display: block; padding: 8px 0; font-size: 14px; }

/* --- En-tête de rubrique ------------------------------------------------- */

.entete-rubrique { border-bottom: 3px solid var(--bleu); margin-bottom: 24px; padding-bottom: 8px; }
.entete-rubrique__titre { font-family: var(--titre); font-size: 30px; margin: 0; }
.entete-rubrique__compte { margin: 4px 0 0; font-size: 13px; color: var(--gris); }

/* --- Article ------------------------------------------------------------- */

.article { background: var(--blanc); box-shadow: var(--ombre); padding: 28px; }
.article__rubrique {
    background: var(--bleu); color: var(--blanc); font-size: 10px; font-weight: 700;
    text-transform: uppercase; padding: 4px 10px; display: inline-block;
}
.article__surtitre { margin: 14px 0 0; text-transform: uppercase; color: var(--rouge); font-weight: 700; font-size: 14px; }
.article__titre { font-family: var(--titre); font-size: 34px; line-height: 1.2; margin: 8px 0 12px; }
.article__meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--gris); margin: 0 0 20px; }
.article__figure { margin: 0 0 20px; }
.article__chapeau { font-size: 18px; font-weight: 600; color: var(--bleu-fonce); font-family: var(--titre); }
.article__corps { font-size: 16px; line-height: 1.85; text-align: justify; }
.article__corps img { margin: 20px auto; }
.article__corps h2, .article__corps h3 { font-family: var(--titre); }
.article__corps blockquote {
    border-left: 3px solid var(--rouge); margin: 20px 0; padding: 4px 20px;
    color: var(--gris); font-style: italic;
}

.partage { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.partage__lien {
    color: var(--blanc); font-size: 12px; font-weight: 600; padding: 7px 14px;
    border-radius: var(--rayon);
}
.partage__lien:hover { color: var(--blanc); opacity: .85; }
.partage__lien--facebook { background: #3b5998; }
.partage__lien--twitter { background: #16181d; }
.partage__lien--whatsapp { background: #25d366; }
.partage__lien--courriel { background: var(--gris); }

/* --- Commentaires -------------------------------------------------------- */

.commentaires {
    background: var(--blanc); box-shadow: var(--ombre);
    padding: 28px; margin-top: 28px;
}

.commentaires__entete { border-bottom: 2px solid var(--bleu); padding-bottom: 12px; margin-bottom: 22px; }
.commentaires__titre { font-family: var(--titre); font-size: 22px; margin: 0; }
.commentaires__charte { margin: 4px 0 0; font-size: 13px; color: var(--gris); }
.commentaires__vide {
    background: var(--fond); padding: 22px; text-align: center;
    color: var(--gris); font-size: 14px; border-radius: var(--rayon);
}

/* Champ piège à robots : retiré du flux sans être « display:none »,
   que certains automates savent détecter. */
.champ-piege {
    position: absolute; left: -9999px; width: 1px; height: 1px;
    overflow: hidden; opacity: 0;
}

/* --- Formulaire ---------------------------------------------------------- */

.formulaire-commentaire {
    background: var(--fond); border: 1px solid var(--gris-clair);
    border-radius: 6px; padding: 18px; margin-bottom: 28px;
}

.formulaire-commentaire__reponse {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: rgba(44, 52, 129, .07); border-left: 3px solid var(--bleu);
    padding: 8px 12px; font-size: 13px; margin-bottom: 12px; border-radius: 0 var(--rayon) var(--rayon) 0;
}
.formulaire-commentaire__reponse button {
    border: 0; background: none; color: var(--rouge); cursor: pointer;
    font: inherit; font-size: 12px; text-decoration: underline;
}

.formulaire-commentaire__zone { display: flex; gap: 14px; }
.formulaire-commentaire__champs { flex: 1; min-width: 0; }

.formulaire-commentaire textarea {
    width: 100%; border: 1px solid var(--gris-clair); border-radius: var(--rayon);
    padding: 12px; font: inherit; resize: vertical; background: var(--blanc);
    min-height: 96px;
}
.formulaire-commentaire textarea:focus,
.formulaire-commentaire input[type="text"]:focus {
    outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(44, 52, 129, .12);
}

.formulaire-commentaire__identite { margin-top: 10px; }
.formulaire-commentaire__nom input {
    width: 100%; max-width: 280px; border: 1px solid var(--gris-clair);
    border-radius: var(--rayon); padding: 10px 12px; font: inherit; background: var(--blanc);
}

.formulaire-commentaire__connu { margin: 0; font-size: 13px; color: var(--gris); }
.formulaire-commentaire__connu strong { color: var(--encre); }

.formulaire-commentaire__pied {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-top: 14px; flex-wrap: wrap;
}
.formulaire-commentaire__compteur { font-size: 12px; color: var(--gris); font-variant-numeric: tabular-nums; }

.formulaire-commentaire__message { font-size: 13px; margin: 10px 0 0; }
.formulaire-commentaire__message.est-succes { color: #1b7f4b; }
.formulaire-commentaire__message.est-erreur { color: var(--rouge); }

/* --- Fil ----------------------------------------------------------------- */

.fil-commentaire { padding: 18px 0; border-bottom: 1px solid var(--gris-clair); }
.fil-commentaire:last-child { border-bottom: 0; }
.fil-commentaire__reponses {
    margin: 6px 0 0 46px; padding-left: 18px;
    border-left: 2px solid var(--gris-clair);
}
.fil-commentaire__formulaire:not(:empty) { margin: 14px 0 0 46px; }

.commentaire { display: flex; gap: 14px; }
.commentaire--reponse { padding: 14px 0 4px; }

/* La teinte vient du nom : chaque personne garde sa couleur. */
.commentaire__pastille {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
    background: hsl(var(--teinte, 230) 46% 42%);
    color: var(--blanc); display: grid; place-items: center;
    font-weight: 700; font-size: 15px; user-select: none;
}
.formulaire-commentaire__pastille { flex-basis: 36px; }

.commentaire__corps { flex: 1; min-width: 0; }
.commentaire__meta {
    margin: 0 0 5px; font-size: 12px; color: var(--gris);
    display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.commentaire__nom { font-size: 14px; color: var(--encre); }
.commentaire__texte { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

.commentaire__actions { margin: 8px 0 0; display: flex; gap: 14px; align-items: center; }
.commentaire__repondre {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--bleu);
}
.commentaire__repondre:hover { color: var(--rouge); text-decoration: underline; }
.commentaire__compte-reponses { font-size: 12px; color: var(--gris); }

@media (max-width: 560px) {
    .commentaires { padding: 18px 14px; }
    .fil-commentaire__reponses { margin-left: 14px; padding-left: 12px; }
    .fil-commentaire__formulaire:not(:empty) { margin-left: 0; }
    .formulaire-commentaire__zone { gap: 10px; }
    .formulaire-commentaire__pastille { display: none; }
}

/* Invitation à se connecter, à la place du formulaire. */
.commentaires__invitation {
    background: var(--fond); border: 1px dashed var(--gris-clair);
    border-radius: 6px; padding: 22px; margin-bottom: 28px; text-align: center;
}
.commentaires__invitation p { margin: 0; }
.commentaires__invitation-actions {
    display: flex; gap: 18px; align-items: center; justify-content: center; margin-top: 14px !important;
}

/* --- Comptes lecteurs ---------------------------------------------------- */

.compte { max-width: 480px; margin: 32px auto 56px; }
.compte--large { max-width: 900px; }

.compte__carte {
    background: var(--blanc); box-shadow: var(--ombre);
    padding: 28px; border-radius: 6px;
}

.compte__entete {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--blanc); box-shadow: var(--ombre);
    padding: 20px 24px; border-radius: 6px; margin-bottom: 20px;
}
.compte__entete form { margin-left: auto; }
.compte__pastille { flex: 0 0 48px; width: 48px; height: 48px; font-size: 20px; }

.compte__titre { font-family: var(--titre); font-size: 26px; margin: 0 0 6px; }
.compte__soustitre { font-family: var(--titre); font-size: 18px; margin: 0 0 16px; }
.compte__intro { margin: 0 0 20px; font-size: 14px; color: var(--gris); }
.compte__entete .compte__intro { margin: 0; }

.compte__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 780px) { .compte__grille { grid-template-columns: 1fr; } }

.compte__formulaire { display: flex; flex-direction: column; gap: 14px; }
.compte__bouton { align-self: flex-start; padding: 11px 26px; }

.champ-compte { display: flex; flex-direction: column; gap: 5px; }
.champ-compte label { font-size: 13px; font-weight: 600; }
.champ-compte input {
    border: 1px solid var(--gris-clair); border-radius: var(--rayon);
    padding: 11px 12px; font: inherit; width: 100%;
}
.champ-compte input:focus {
    outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(44, 52, 129, .12);
}
.champ-compte__aide { margin: 0; font-size: 12px; color: var(--gris); }
.champ-compte__case { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; }

.compte__liens { margin: 20px 0 0; font-size: 13px; text-align: center; color: var(--gris); }
.compte__liens span { margin: 0 6px; }

.compte__alerte { padding: 12px 14px; border-radius: var(--rayon); margin-bottom: 18px; font-size: 14px; }
.compte__alerte--erreur { background: #fdeaea; border-left: 3px solid var(--rouge); color: #8f1d22; }
.compte__alerte--succes { background: #e6f4ec; border-left: 3px solid #1b7f4b; color: #14603a; }
.compte__alerte ul { margin: 6px 0 0; padding-left: 20px; }
.compte__alerte p { margin: 0; }

.compte__liste { list-style: none; margin: 0; padding: 0; }
.compte__commentaire { padding: 14px 0; border-bottom: 1px solid var(--gris-clair); }
.compte__commentaire:last-child { border-bottom: 0; }
.compte__commentaire-texte { margin: 0 0 6px; }
.compte__commentaire-meta {
    margin: 0; font-size: 12px; color: var(--gris);
    display: flex; gap: 12px; flex-wrap: wrap;
}

/* --- Kiosque et liseuse -------------------------------------------------- */

/* Couverture : cadre à proportions fixes, avec repli si le fichier manque. */
.couverture {
    display: block; position: relative; overflow: hidden;
    aspect-ratio: 3 / 4; background: var(--gris-clair);
    border: 1px solid var(--gris-clair);
}
.couverture img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.couverture.est-absente { background: linear-gradient(160deg, var(--bleu) 0%, var(--bleu-fonce) 100%); }
.couverture.est-absente img { display: none; }
.couverture.est-absente::after {
    content: attr(data-numero); position: absolute; inset: 0;
    display: grid; place-items: center; padding: 12px; text-align: center;
    color: rgba(255, 255, 255, .92); font-family: var(--titre);
    font-size: 20px; font-weight: 700; letter-spacing: .5px;
}

.couverture__voile {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(36, 59, 129, .82); color: var(--blanc);
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    opacity: 0; transition: opacity .18s;
}
.couverture:hover .couverture__voile, .couverture:focus-visible .couverture__voile { opacity: 1; }

/* --- Kiosque : édition en vedette ---------------------------------------- */

.kiosque-une {
    display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 40px; align-items: center; margin: 24px 0 8px; padding: 36px 40px;
    background:
        radial-gradient(circle at 88% 12%, rgba(236, 27, 37, .28) 0%, transparent 46%),
        linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 62%, #101b3d 100%);
    color: var(--blanc);
    position: relative; overflow: hidden;
}

/* Filet rouge en haut, rappel du bandeau de l'en-tête. */
.kiosque-une::before {
    content: ''; position: absolute; inset-inline: 0; top: 0;
    height: 4px; background: var(--rouge-vif);
}

.kiosque-une__couverture { perspective: 1000px; }

.kiosque-une .couverture--vedette {
    border: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
    transform: rotate(-2deg); transition: transform .35s ease, box-shadow .35s ease;
}
.kiosque-une .couverture--vedette:hover {
    transform: rotate(0deg) translateY(-6px);
    box-shadow: 0 26px 56px rgba(0, 0, 0, .55);
}

.kiosque-une__surtitre {
    display: flex; align-items: center; gap: 12px; margin: 0 0 10px;
    font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}
.kiosque-une__pastille {
    background: var(--rouge-vif); color: var(--blanc); padding: 4px 12px;
    letter-spacing: 1px; font-weight: 700; border-radius: 2px;
}

.kiosque-une__date {
    font-family: var(--titre); font-size: 40px; line-height: 1.1;
    margin: 0 0 16px; text-transform: capitalize; color: var(--blanc);
}

.kiosque-une__reperes {
    display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none;
    margin: 0 0 18px; padding: 0 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    font-size: 13px; color: rgba(255, 255, 255, .78);
}
.kiosque-une__reperes strong { color: var(--blanc); font-size: 15px; }

.kiosque-une__accroche {
    margin: 0 0 24px; max-width: 46ch;
    font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .85);
}

.kiosque-une__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.bouton--vedette {
    background: var(--rouge-vif); font-size: 15px; padding: 13px 34px; letter-spacing: .3px;
}
.bouton--vedette:hover { background: var(--blanc); color: var(--bleu-fonce); }

.kiosque-une__lien { color: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; }
.kiosque-une__lien:hover { color: var(--blanc); text-decoration: underline; }

@media (max-width: 820px) {
    .kiosque-une {
        grid-template-columns: 1fr; justify-items: center;
        text-align: center; gap: 28px; padding: 30px 24px;
    }
    .kiosque-une__couverture { max-width: 230px; }
    .kiosque-une__date { font-size: 30px; }
    .kiosque-une__surtitre, .kiosque-une__reperes, .kiosque-une__actions { justify-content: center; }
    .kiosque-une__accroche { max-width: none; }
}

/* --- Kiosque : grille des éditions --------------------------------------- */

.kiosque { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.kiosque__edition {
    background: var(--blanc); box-shadow: var(--ombre); padding: 10px; text-align: center;
    transition: transform .18s, box-shadow .18s;
}
.kiosque__edition:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, .16); }
.kiosque__label { margin: 10px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.kiosque__date { margin: 2px 0 4px; font-size: 12px; color: var(--gris); text-transform: capitalize; }
.kiosque__numero { margin: 0 0 6px; font-size: 11px; color: var(--gris); }

/* --- Liseuse plein écran (moteur wow_book) -------------------------------- */

/*
   Hauteur réellement visible (dvh). Sur téléphone, 100vh compte aussi la
   zone cachée derrière la barre d'adresse : le bas du journal y disparaissait.
   100vh reste en repli pour les navigateurs qui ignorent dvh.
*/
body.liseuse-plein {
    margin: 0; height: 100vh; height: 100dvh; overflow: hidden;
    background: #e6e6e6;
}
.liseuse-plein .liseuse { position: relative; height: 100vh; height: 100dvh; }

/* La scène couvre l'écran ; wow_book y pose la barre d'outils puis le livre. */
.liseuse__scene {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    display: flex; align-items: center; justify-content: center;
}
.liseuse .wowbook-container {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    background: transparent !important;
}

/*
   Zone du livre, sous la barre d'outils : wow_book met le journal à
   l'échelle de ce qui reste une fois ces marges ôtées. La marge du bas
   laisse la place au lien de retour, absent en plein écran.
*/
.liseuse .wowbook-book-container { padding: 14px 10px 56px; }
.liseuse .wowbook-container:fullscreen .wowbook-book-container { padding-bottom: 14px; }

/*
   Téléphone tenu droit : une page à la fois, sur toute la largeur. Avec une
   marge, la page voisine dépassait d'autant sur le bord droit.
*/
@media (max-width: 600px) and (orientation: portrait) {
    .liseuse .wowbook-book-container { padding-left: 0; padding-right: 0; }
}

.liseuse__livre { visibility: hidden; }
.liseuse.est-prete .liseuse__livre { visibility: visible; }

.liseuse__attente {
    display: flex; align-items: center; gap: 12px;
    color: var(--gris); font-size: 14px;
}
.liseuse__attente.est-erreur { color: var(--rouge-vif); }
.liseuse__roue {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .15); border-top-color: var(--bleu);
    animation: liseuse-tourne .8s linear infinite;
}
@keyframes liseuse-tourne { to { transform: rotate(360deg); } }

/* Retour au kiosque, discret en bas de page. */
.liseuse__retour {
    position: fixed; left: 14px; bottom: 12px; z-index: 60;
    background: rgba(0, 0, 0, .55); color: var(--blanc);
    font-size: 12px; padding: 7px 14px; border-radius: 999px;
    text-transform: capitalize;
}
.liseuse__retour:hover { background: var(--bleu); color: var(--blanc); }

/*
   Barre d'outils : le bandeau rouge du site, sur toute la largeur. Elle reste
   dans le flux : wow_book déduit sa hauteur de la place laissée au livre.
*/
.liseuse .wowbook-toolbar-container {
    position: relative; z-index: 2;
    background: var(--rouge-vif); box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
.liseuse .wowbook-toolbar { background: transparent; border: 0; }
.liseuse .wowbook-toolbar a { color: rgba(255, 255, 255, .9); }
.liseuse .wowbook-toolbar a:hover { color: var(--blanc); }

/* Téléphone : les huit boutons tiennent sur une seule ligne, même à 320 px. */
@media (max-width: 480px) {
    .liseuse .wowbook-toolbar .wowbook-control {
        width: 11vw; min-width: 0; max-width: 48px; font-size: 20px;
    }
}

.pied { background: var(--bleu-fonce); color: rgba(255, 255, 255, .8); margin-top: 48px; }
/* Trois blocs : coordonnées, logo, réseaux. `auto-fit` en créerait un quatrième, vide. */
.pied__grille {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px; padding: 44px 0;
}
@media (max-width: 900px) { .pied__grille { grid-template-columns: 1fr; gap: 32px; text-align: left; } }
@media (max-width: 900px) { .pied__reseaux { justify-content: flex-start; } }
.pied__titre {
    font-family: var(--titre); color: var(--blanc); margin: 0 0 12px;
    font-size: 15px; text-transform: uppercase; letter-spacing: 1px;
}
.pied__titre--infolettre { margin-top: 26px; }
.pied__texte { font-size: 13px; margin: 0 0 14px; }

.pied__bloc--centre { text-align: center; }
.pied__logo { display: inline-block; background: var(--blanc); padding: 8px 12px; }
.pied__logo img { max-width: 230px; }

.pied__liste { list-style: none; margin: 20px 0 0; padding: 0; columns: 2; }
.pied__liste a { color: rgba(255, 255, 255, .8); font-size: 13px; line-height: 2; }
.pied__liste a:hover { color: var(--blanc); }

/* Coordonnées : une icône d'enveloppe devant chaque adresse. */
.pied__contacts { list-style: none; margin: 0; padding: 0; }
.pied__contacts li { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.pied__contacts svg { flex: 0 0 auto; opacity: .7; }
.pied__contacts a { color: rgba(255, 255, 255, .88); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.pied__contacts a:hover { color: var(--blanc); text-decoration: underline; }

.pied__reseaux { display: flex; gap: 10px; }
.pied__reseaux a {
    width: 38px; height: 38px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .12); color: var(--blanc);
    transition: background .15s;
}
.pied__reseaux a:hover { background: var(--rouge-vif); color: var(--blanc); }

.infolettre { display: flex; flex-wrap: wrap; gap: 8px; }
.infolettre input {
    flex: 1 1 160px; border: 0; padding: 9px 12px; font: inherit; border-radius: var(--rayon);
}
.infolettre button {
    border: 0; background: var(--rouge); color: var(--blanc); padding: 9px 18px;
    font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--rayon);
}
.infolettre__message { flex: 1 0 100%; font-size: 12px; margin: 4px 0 0; }
.infolettre__message.est-succes { color: #8ff0b8; }
.infolettre__message.est-erreur { color: #ffb3b3; }

.pied__bas { border-top: 1px solid rgba(255, 255, 255, .15); font-size: 12px; padding: 14px 0; }

/* --- Pagination (Bootstrap 5) -------------------------------------------- */

.pagination { display: flex; list-style: none; gap: 4px; padding: 0; margin: 28px 0; flex-wrap: wrap; }
.page-link {
    display: block; padding: 7px 13px; background: var(--blanc);
    border: 1px solid var(--gris-clair); color: var(--bleu); font-size: 13px;
}
.page-item.active .page-link { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.page-item.disabled .page-link { color: var(--gris); opacity: .5; }

/* Mot de passe : bouton « Afficher » dans le champ, et verification de la confirmation. */
.mdp { position: relative; display: flex; }
.mdp input { flex: 1; min-width: 0; padding-right: 88px; }
.mdp__bouton {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; border-radius: 4px; padding: 6px 9px; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--bleu);
}
.mdp__bouton:hover, .mdp__bouton:focus-visible { background: #eef0fa; outline: none; }
.champ-compte__correspondance { margin: 0; font-size: 12px; font-weight: 600; min-height: 0; }
.champ-compte__correspondance.est-ok { color: #1b7f4b; }
.champ-compte__correspondance.est-ko { color: var(--rouge); }