/* --------------------------------------------------------------------------
   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', 'Philosopher Secours', Georgia, 'Times New Roman', serif;
    --texte: 'Open Sans', 'Open Sans Secours', Arial, -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); }

/* Bouton des alertes : une pastille claire, pour qu'on le remarque. */
.bandeau-contact__alertes {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
    background: rgba(255, 255, 255, .12); color: var(--blanc);
    font: inherit; font-size: 12px; font-weight: 600; padding: 3px 11px; cursor: pointer;
}
.bandeau-contact__alertes:hover { background: var(--blanc); color: var(--rouge-vif); }

.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; }
/*
   Toujours sur une ligne : si le menu passait sur deux lignes avant que le
   script ne range la fin sous « Plus », toute la page sauterait (Google le
   compte comme un decalage de mise en page).
*/
.navigation__liens { display: flex; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
.navigation__lien { white-space: nowrap; }
.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); }

/* « Plus » : les rubriques qui ne tiennent pas sur la ligne. */
.navigation__plus { position: relative; }
.navigation__plus-bouton { border: 0; background: none; cursor: pointer; font-family: inherit; }
.navigation__plus-liste {
    display: none; position: absolute; top: 100%; right: 0; z-index: 60;
    min-width: 220px; flex-direction: column;
    background: var(--bleu-fonce); box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
}
.navigation__plus.est-ouvert .navigation__plus-liste { display: flex; }
.navigation__plus-liste .navigation__lien { border-bottom: 1px solid rgba(255, 255, 255, .08); }

/* 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__texte { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--gris); }
.encart--alertes { border-top: 3px solid var(--rouge-vif); }

/* --- Télévision en direct (haut de la colonne) --------------------------- */

.encart--tele { padding: 0; overflow: hidden; background: #0d1030; }
.tele__titre {
    display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px;
    background: var(--bleu-fonce); color: var(--blanc);
    font-family: var(--titre); font-size: 15px; line-height: 1.2;
}
.tele__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tele__direct {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    background: var(--rouge-vif); color: var(--blanc); border-radius: 2px; padding: 3px 8px;
    font-family: var(--texte); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.tele__point { width: 7px; height: 7px; border-radius: 50%; background: var(--blanc); animation: tele-pouls 1.6s ease-in-out infinite; }
@keyframes tele-pouls { 50% { opacity: .25; } }

.tele__ecran { position: relative; aspect-ratio: 16 / 9; background: #000; }
.tele__video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.tele__lancer {
    position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    color: var(--blanc); font: inherit;
    background:
        radial-gradient(circle at 50% 42%, rgba(236, 27, 37, .28), transparent 55%),
        linear-gradient(160deg, var(--bleu-fonce) 0%, #0d1030 62%, #2a0b10 100%);
}
.tele__cercle {
    width: 58px; height: 58px; border-radius: 50%; padding-left: 3px;
    display: flex; align-items: center; justify-content: center;
    background: var(--rouge-vif); box-shadow: 0 0 0 7px rgba(236, 27, 37, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tele__lancer:hover .tele__cercle,
.tele__lancer:focus-visible .tele__cercle { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(236, 27, 37, .25); }
.tele__invite { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.tele__etat {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 6px 10px;
    font-size: 12px; color: var(--blanc); background: rgba(0, 0, 0, .6); pointer-events: none;
}
.tele__etat:empty { display: none; }
.tele__etat.est-erreur { background: rgba(193, 39, 45, .92); }

@media (prefers-reduced-motion: reduce) {
    .tele__point { animation: none; }
    .tele__cercle { transition: none; }
}

/* --- Panneau des alertes ------------------------------------------------- */

.alertes {
    width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
    border: 0; border-radius: 6px; padding: 28px 26px 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3); color: var(--encre);
}
.alertes::backdrop { background: rgba(16, 20, 40, .55); }
.alertes__fermer-form { margin: 0; }
.alertes__fermer {
    position: absolute; top: 10px; right: 12px; border: 0; background: none;
    font-size: 26px; line-height: 1; color: var(--gris); cursor: pointer; padding: 4px 8px;
}
.alertes__fermer:hover { color: var(--rouge-vif); }
.alertes__icone {
    width: 44px; height: 44px; margin: 0 0 12px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--rouge-vif); color: var(--blanc);
}
.alertes__icone svg { width: 22px; height: 22px; }
.alertes__titre { margin: 0 0 8px; font-family: var(--titre); font-size: 22px; }
.alertes__intro { margin: 0 0 18px; font-size: 14px; line-height: 1.55; color: var(--gris); }

.alertes__rubriques { border: 0; margin: 0; padding: 0; }
.alertes__rubriques legend { font-size: 13px; font-weight: 700; margin-bottom: 10px; padding: 0; }
.alertes__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.alertes__rubrique {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    border: 1px solid var(--gris-clair); border-radius: var(--rayon);
    padding: 9px 11px; font-size: 14px;
}
.alertes__rubrique:has(input:checked) { border-color: var(--bleu); background: rgba(44, 52, 129, .06); }
.alertes__rubrique input { width: 17px; height: 17px; margin: 0; accent-color: var(--bleu); }
.alertes__tout { margin: 10px 0 0; display: flex; gap: 16px; }
.alertes__tout button {
    border: 0; background: none; padding: 0; font: inherit; font-size: 12px;
    color: var(--bleu); text-decoration: underline; cursor: pointer;
}

.alertes__message { min-height: 1.4em; margin: 16px 0 0; font-size: 13px; color: #1d7a3a; }
.alertes__message.est-erreur { color: var(--rouge-vif); }
.alertes__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.alertes__activer { padding: 11px 22px; font-size: 14px; }
.alertes__desactiver {
    border: 0; background: none; padding: 0; font: inherit; font-size: 13px;
    color: var(--gris); text-decoration: underline; cursor: pointer;
}
.alertes__desactiver:hover { color: var(--rouge-vif); }

.alertes__aide {
    background: var(--fond); border-radius: var(--rayon); padding: 12px 14px;
    margin: 0 0 16px; font-size: 13px; line-height: 1.55;
}
.alertes__aide p { margin: 0 0 6px; }
.alertes__aide ol { margin: 0; padding-left: 20px; }
.alertes__aide--alerte { background: #fdecec; color: #8a1c1c; }

@media (max-width: 420px) {
    .alertes { padding: 24px 18px 20px; }
    .alertes__grille { grid-template-columns: 1fr; }
}
.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; }

/* --- Lecture à voix haute ------------------------------------------------ */

.ecoute {
    display: flex; align-items: center; gap: 14px;
    margin: -8px 0 22px; padding: 12px 14px;
    background: var(--fond); border-left: 4px solid var(--bleu); border-radius: var(--rayon);
}
.ecoute__bouton {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    border: 4px solid var(--bleu); background: var(--blanc); color: var(--rouge-vif);
    display: grid; place-items: center; cursor: pointer; padding: 0;
    transition: background .15s, color .15s;
}
.ecoute__bouton:hover, .ecoute.est-en-lecture .ecoute__bouton { background: var(--bleu); color: var(--blanc); }
.ecoute__icone { display: grid; place-items: center; margin-left: 2px; }
.ecoute.est-en-lecture .ecoute__icone { margin-left: 0; }

.ecoute__infos { flex: 1; min-width: 0; }
.ecoute__libelle {
    margin: 0 0 7px; font-size: 13px; color: var(--bleu-fonce);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.ecoute__duree { color: var(--gris); font-size: 12px; }
.ecoute__piste {
    position: relative; height: 6px; border-radius: 3px; background: var(--gris-clair);
    cursor: pointer; overflow: hidden;
}
.ecoute__piste:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }
.ecoute__progression {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: var(--rouge-vif); border-radius: 3px; transition: width .4s linear;
}

.ecoute__vitesse {
    flex: 0 0 auto; min-width: 48px; height: 30px; padding: 0 8px;
    border: 1px solid var(--bleu); border-radius: 15px; background: var(--blanc);
    color: var(--bleu); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.ecoute__vitesse:hover { background: var(--bleu); color: var(--blanc); }
.ecoute__arret {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; padding: 0;
    border: 1px solid var(--gris); background: var(--blanc); cursor: pointer;
    display: grid; place-items: center;
}
.ecoute__arret span { width: 10px; height: 10px; background: var(--gris); border-radius: 1px; }
.ecoute__arret:hover { border-color: var(--rouge-vif); }
.ecoute__arret:hover span { background: var(--rouge-vif); }

/* Passage en cours de lecture, surligné discrètement. */
.est-lu-a-voix-haute {
    background: linear-gradient(transparent 55%, rgba(236, 27, 37, .14) 55%);
    transition: background .3s;
}

@media (max-width: 480px) {
    .ecoute { gap: 10px; padding: 10px; }
    .ecoute__libelle { font-size: 12px; }
}
.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,
.champ-compte textarea {
    border: 1px solid var(--gris-clair); border-radius: var(--rayon);
    padding: 11px 12px; font: inherit; width: 100%;
}
.champ-compte textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.champ-compte textarea[aria-invalid="true"] { border-color: var(--rouge-vif); }
.champ-compte__erreur { margin: 0; font-size: 13px; color: var(--rouge-vif); }
.champ-compte input:focus,
.champ-compte textarea: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; }

/*
   Attente du chargement : posée au-dessus de la scène, et non à côté du
   livre. Le livre est déjà là, invisible mais large : en simple élément de
   la rangée, le message se retrouvait collé au bord gauche.
*/
/*
   Attente du chargement : la marque du journal sur toute la page, barre
   d'outils comprise (z-index au-dessus). Elle s'efface quand l'édition est
   prête, plutôt que de disparaître d'un coup.
*/
.liseuse__attente {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 5;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 26px;
    padding: 0 24px; text-align: center;
    background: var(--bleu);
    color: rgba(255, 255, 255, .92); font-size: 14px;
    transition: opacity .35s ease;
}
.liseuse__attente.est-finie { opacity: 0; }
.liseuse__attente.est-erreur { color: #ffd9db; }

/*
   La marque bat doucement — une pulsation de taille, et non d'opacité :
   en transparence, le rouge du pavé se délavait sur le bleu.
*/
.liseuse__marque {
    width: min(280px, 62vw); height: auto;
    animation: liseuse-respire 2s ease-in-out infinite;
}
.liseuse__message { margin: 0; }

@keyframes liseuse-respire {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Mouvement réduit demandé : la marque reste simplement affichée. */
@media (prefers-reduced-motion: reduce) {
    .liseuse__marque { animation: none; }
}

/* 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 dix boutons tiennent sur une seule ligne, même à 320 px. */
@media (max-width: 480px) {
    .liseuse .wowbook-toolbar .wowbook-control {
        width: 8.8vw; min-width: 0; max-width: 46px; font-size: 18px;
    }
}

.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); }

/* --- Annonces (rubriques de type « annonces ») ----------------------------- */

.annonces-liste { background: var(--blanc); box-shadow: var(--ombre); padding: 4px 24px; }
.bloc-rubrique__annonces { margin-bottom: 8px; }

.annonce-carte { padding: 22px 0; border-bottom: 1px solid var(--gris-clair); }
.annonce-carte:last-child { border-bottom: 0; }
.annonce-carte__categorie {
    display: inline-block; margin-bottom: 4px;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--bleu);
}
.annonce-carte__categorie:hover { color: var(--rouge-vif); }
.annonce-carte__titre { margin: 0 0 6px; font-family: var(--titre); font-size: 20px; line-height: 1.3; }
.annonce-carte__titre a { color: var(--encre); }
.annonce-carte__titre a:hover { color: var(--rouge-vif); }
.annonce-carte__date { margin: 0 0 10px; font-size: 12px; color: var(--gris); }
.annonce-carte__extrait { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: #2b2f36; }
.annonce-carte__bouton {
    display: inline-block; padding: 7px 14px; border-radius: 4px;
    background: #e3e5ea; color: var(--encre); font-size: 13px; font-weight: 600;
}
.annonce-carte__bouton:hover { background: var(--bleu); color: var(--blanc); }

/* Sur l'accueil, la bande d'annonces reste compacte. */
.bloc-rubrique--annonces .annonce-carte { padding: 16px 0; }
.bloc-rubrique--annonces .annonce-carte__titre { font-size: 17px; }
.bloc-rubrique--annonces .annonce-carte__extrait { font-size: 14px; margin-bottom: 10px; }

.annonces-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.annonces-filtres__lien {
    padding: 6px 12px; border-radius: 999px; font-size: 13px;
    background: var(--blanc); color: var(--encre); box-shadow: var(--ombre);
}
.annonces-filtres__lien:hover { color: var(--rouge-vif); }
.annonces-filtres__lien.est-actif { background: var(--bleu); color: var(--blanc); }

@media (max-width: 600px) {
    .annonces-liste { padding: 2px 16px; }
    .annonce-carte__titre { font-size: 18px; }
}

/* --- Page introuvable (404) ------------------------------------------------ */

.introuvable {
    max-width: 900px; margin: 48px auto; padding: 48px 40px 40px;
    background: var(--blanc); box-shadow: var(--ombre); border-radius: 6px;
    border-top: 4px solid var(--rouge-vif); text-align: center;
}
.introuvable__code {
    margin: 0; font-family: var(--titre); font-weight: 700; line-height: 1;
    font-size: clamp(96px, 18vw, 170px); letter-spacing: 4px; color: var(--bleu);
}
.introuvable__titre { margin: 8px 0 14px; font-family: var(--titre); font-size: 26px; }
.introuvable__texte { max-width: 680px; margin: 0 auto 26px; font-size: 16px; line-height: 1.7; color: #2b2f36; }

.introuvable__recherche { display: flex; max-width: 520px; margin: 0 auto 22px; }
.introuvable__recherche input {
    flex: 1; min-width: 0; padding: 11px 14px; font: inherit;
    border: 1px solid var(--gris-clair); border-right: 0; border-radius: var(--rayon) 0 0 var(--rayon);
}
.introuvable__recherche input:focus { outline: 0; border-color: var(--bleu); }
.introuvable__recherche .bouton { border-radius: 0 var(--rayon) var(--rayon) 0; padding: 11px 20px; }

.introuvable__actions { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0 0 28px; }
.introuvable__actions .bouton { padding: 11px 22px; font-size: 14px; }
.introuvable__lien { font-size: 14px; font-weight: 600; }
.introuvable__lien::after { content: ' →'; }

.introuvable__rubriques {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    padding-top: 24px; border-top: 1px solid var(--gris-clair);
}
.introuvable__rubriques a {
    padding: 6px 13px; border-radius: 999px; font-size: 13px;
    background: var(--fond); color: var(--encre);
}
.introuvable__rubriques a:hover { background: var(--bleu); color: var(--blanc); }

@media (max-width: 600px) {
    .introuvable { margin: 24px 0; padding: 32px 18px 28px; }
    .introuvable__titre { font-size: 22px; }
    .introuvable__texte { font-size: 15px; }
}

/* --- Page Contactez-nous --------------------------------------------------- */

.contact-entete {
    position: relative; overflow: hidden; margin-bottom: 28px; padding: 32px 32px 28px;
    border-radius: 6px; color: var(--blanc);
    background:
        radial-gradient(circle at 92% 12%, rgba(236, 27, 37, .35), transparent 42%),
        linear-gradient(135deg, var(--bleu) 0%, var(--bleu-fonce) 100%);
}
.contact-entete::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rouge-vif);
}
.contact-entete__surtitre {
    margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.contact-entete__titre { margin: 0 0 10px; font-family: var(--titre); font-size: 34px; line-height: 1.15; }
.contact-entete__texte { margin: 0; max-width: 620px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .88); }

.contact-bloc { margin-bottom: 34px; }
.contact-bloc__titre {
    margin: 0 0 18px; padding-bottom: 10px; position: relative;
    font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--encre);
}
.contact-bloc__titre::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px;
    border-radius: 2px; background: var(--rouge-vif);
}

.contact-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.contact-service {
    background: var(--blanc); box-shadow: var(--ombre); border-radius: 6px;
    padding: 18px 20px; border-left: 3px solid var(--bleu);
    transition: transform .15s ease, box-shadow .15s ease;
}
.contact-service:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.contact-service__nom { margin: 0 0 10px; font-family: var(--titre); font-size: 18px; color: var(--bleu); }
.contact-service__ligne {
    display: flex; align-items: center; gap: 10px; padding: 5px 0;
    font-size: 14px; color: var(--encre); overflow-wrap: anywhere;
}
.contact-service__ligne:hover { color: var(--rouge-vif); }
.contact-service__icone {
    flex: none; width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(44, 52, 129, .08); color: var(--bleu);
}
.contact-service__ligne:hover .contact-service__icone { background: var(--rouge-vif); color: var(--blanc); }

.contact-adresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.contact-adresse {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--blanc); box-shadow: var(--ombre); border-radius: 6px; padding: 18px 20px;
}
.contact-adresse__icone {
    flex: none; width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--rouge-vif); color: var(--blanc);
}
.contact-adresse__texte { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.contact-adresse__carte { font-size: 13px; font-weight: 600; }
.contact-adresse__carte::after { content: " ↗"; }

.contact-formulaire {
    background: var(--blanc); box-shadow: var(--ombre); border-radius: 6px; padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
}
.contact-formulaire__ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-champ { display: flex; flex-direction: column; gap: 6px; }
.contact-champ label { font-size: 13px; font-weight: 600; }
.contact-champ label span { color: var(--rouge-vif); }
.contact-champ input,
.contact-champ select,
.contact-champ textarea {
    width: 100%; font: inherit; font-size: 15px; color: var(--encre);
    padding: 11px 13px; border: 1px solid #d5d9e0; border-radius: 6px; background: var(--blanc);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-champ textarea { resize: vertical; min-height: 150px; line-height: 1.55; }
.contact-champ input:focus,
.contact-champ select:focus,
.contact-champ textarea:focus { outline: 0; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(44, 52, 129, .14); }
.contact-champ.est-invalide input,
.contact-champ.est-invalide select,
.contact-champ.est-invalide textarea { border-color: var(--rouge-vif); }

.contact-formulaire__erreurs {
    margin: 0; padding: 11px 14px; border-radius: 6px;
    background: #fdecec; color: #8a1c1c; font-size: 14px;
}
.contact-formulaire__pied { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.contact-formulaire__note { margin: 0; font-size: 12px; color: var(--gris); }
.contact-formulaire__bouton {
    border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700;
    padding: 12px 30px; border-radius: 999px; color: var(--blanc);
    background: var(--bleu); box-shadow: 0 4px 12px rgba(44, 52, 129, .3);
    transition: background .15s ease, transform .15s ease;
}
.contact-formulaire__bouton:hover { background: var(--rouge-vif); transform: translateY(-1px); }

.contact-merci {
    display: flex; gap: 14px; align-items: center; margin-bottom: 16px;
    padding: 16px 18px; border-radius: 6px; background: #e8f6ee; color: #14532d;
}
.contact-merci__icone {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #1d7a3a; color: var(--blanc); font-weight: 700;
}
.contact-merci__titre { margin: 0; font-weight: 700; }
.contact-merci__texte { margin: 2px 0 0; font-size: 14px; }

@media (max-width: 640px) {
    .contact-entete { padding: 24px 20px 22px; }
    .contact-entete__titre { font-size: 27px; }
    .contact-services, .contact-formulaire__ligne { grid-template-columns: 1fr; }
    .contact-formulaire { padding: 18px; }
    .contact-formulaire__bouton { width: 100%; }
}
.pied__lien-contact {
    display: inline-block; margin-top: 14px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35); color: var(--blanc); font-size: 13px; font-weight: 600;
}
.pied__lien-contact:hover { background: var(--rouge-vif); border-color: var(--rouge-vif); color: var(--blanc); }

/* « Écrire à la rédaction » : pastille blanche sur la bande rouge, pour ressortir. */
.bandeau-contact__ecrire {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 12px; border-radius: 999px;
    background: var(--blanc); color: var(--rouge-vif);
    font-size: 12px; font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.bandeau-contact__ecrire:hover { background: var(--bleu); color: var(--blanc); }
@media (max-width: 600px) { .bandeau-contact__ecrire span { display: none; } .bandeau-contact__ecrire { padding: 5px 8px; } }

/* --- Conditions generales d'utilisation ------------------------------------ */

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

.cgu__sommaire {
    margin: 24px 0 8px; padding: 18px 22px; border-radius: 6px;
    background: var(--fond); border-left: 3px solid var(--rouge-vif);
}
.cgu__sommaire-titre {
    margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--gris);
}
.cgu__sommaire ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.cgu__sommaire li { margin-bottom: 6px; font-size: 14px; break-inside: avoid; }
.cgu__sommaire a { color: var(--encre); }
.cgu__sommaire a:hover { color: var(--rouge-vif); }

.cgu__section { padding: 22px 0 6px; border-bottom: 1px solid var(--gris-clair); scroll-margin-top: 20px; }
.cgu__section:last-child { border-bottom: 0; }
.cgu__titre {
    display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
    font-family: var(--titre); font-size: 21px; color: var(--encre);
}
.cgu__titre span {
    flex: none; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bleu); color: var(--blanc); font-family: var(--texte); font-size: 14px; font-weight: 700;
}
.cgu p, .cgu li { font-size: 15.5px; line-height: 1.75; color: #2b2f36; }
.cgu p { margin: 0 0 14px; }

.cgu__liste { margin: 0 0 14px; padding: 0; list-style: none; }
.cgu__liste li { position: relative; padding-left: 22px; margin-bottom: 12px; }
.cgu__liste li::before {
    content: ""; position: absolute; left: 4px; top: 11px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--rouge-vif);
}
.cgu__points { margin: 0 0 14px; padding-left: 0; list-style: none; counter-reset: point; }
.cgu__points li { counter-increment: point; position: relative; padding-left: 38px; margin-bottom: 10px; }
.cgu__points li::before {
    content: "(" counter(point, lower-roman) ")"; position: absolute; left: 0; top: 0;
    font-weight: 700; color: var(--bleu);
}

.cgu__contact {
    display: flex; flex-direction: column; gap: 4px; margin: 4px 0 16px;
    padding: 18px 22px; border-radius: 6px; font-style: normal; font-size: 15px; line-height: 1.6;
    background: rgba(44, 52, 129, .05); border-left: 3px solid var(--bleu);
}
.cgu__contact strong { font-family: var(--titre); font-size: 17px; color: var(--bleu); }
.cgu__contact-lien { margin-top: 6px; font-weight: 600; }
.cgu__contact-lien::after { content: " →"; }

@media (max-width: 640px) {
    .cgu { padding: 4px 18px 20px; }
    .cgu__sommaire ol { columns: 1; }
    .cgu__titre { font-size: 18px; }
}

.pied__bas .conteneur { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pied__liens-legaux { display: flex; gap: 18px; flex-wrap: wrap; }
.pied__liens-legaux a { color: rgba(255, 255, 255, .8); }
.pied__liens-legaux a:hover { color: var(--blanc); text-decoration: underline; }
.cgu__intro { margin: 24px 0 0 !important; }
.cgu a { font-weight: 600; }

/* Bande du haut : bouton d'ecriture et date du jour, a gauche. */
.bandeau-contact__gauche { display: flex; align-items: center; gap: 16px; }
.bandeau-contact__date {
    font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(255, 255, 255, .92);
    padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .35);
}
.bandeau-contact__date-courte { display: none; }
@media (max-width: 760px) {
    .bandeau-contact__date-longue { display: none; }
    .bandeau-contact__date-courte { display: inline; }
}

/*
   Pagination : Laravel ajoute un bloc « Précédent / Suivant » prévu pour les
   petits écrans (classe d-sm-none de Bootstrap, que le site n'utilise pas).
   Il faisait doublon avec la liste numérotée, qui a déjà ses flèches ‹ ›.
*/
nav .d-sm-none { display: none !important; }

/* --- Cloche flottante des alertes (bas gauche) ----------------------------- */

.cloche-flottante {
    position: fixed; left: 20px; bottom: 20px; z-index: 80;
    width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--blanc);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--bleu); color: var(--blanc);
    box-shadow: 0 6px 18px rgba(20, 28, 80, .35);
    transition: transform .2s ease, background .2s ease;
}
.cloche-flottante svg { width: 24px; height: 24px; transform-origin: 50% 10%; }
.cloche-flottante:hover, .cloche-flottante:focus-visible { background: var(--rouge-vif); transform: scale(1.07); }
.cloche-flottante:hover svg { animation: cloche-sonne .6s ease; }

/* Pas encore abonne : un anneau qui pulse attire l'oeil, sans gener. */
.cloche-flottante::before {
    content: ""; position: absolute; inset: -3px; border-radius: 50%;
    border: 2px solid var(--bleu); animation: cloche-anneau 2.4s ease-out infinite; pointer-events: none;
}
.cloche-flottante__pastille {
    position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--rouge-vif); border: 2px solid var(--blanc);
}

/* Abonne : plus d'anneau, pastille verte cochee. */
.cloche-flottante.est-abonne::before { display: none; }
.cloche-flottante.est-abonne .cloche-flottante__pastille { background: #1d9b4f; width: 18px; height: 18px; top: -4px; right: -4px; }
.cloche-flottante.est-abonne .cloche-flottante__pastille::after {
    content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: var(--blanc); font-size: 10px; font-weight: 700; line-height: 1;
}

@keyframes cloche-anneau { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes cloche-sonne { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }

@media (max-width: 600px) {
    .cloche-flottante { left: 14px; bottom: 14px; width: 48px; height: 48px; }
    .cloche-flottante svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
    .cloche-flottante::before, .cloche-flottante:hover svg { animation: none; }
}
@media print { .cloche-flottante { display: none; } }

/* --- Remonter en haut (bas droite) ------------------------------------------ */

.remonter {
    position: fixed; right: 20px; bottom: 20px; z-index: 80;
    width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--blanc);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: var(--bleu-fonce); color: var(--blanc);
    box-shadow: 0 6px 18px rgba(20, 28, 80, .35);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.remonter.est-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.remonter:hover, .remonter:focus-visible { background: var(--rouge-vif); }
.remonter:hover svg { transform: translateY(-2px); }
.remonter svg { transition: transform .2s ease; }

@media (max-width: 600px) {
    .remonter { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}
@media print { .remonter { display: none; } }
.alertes__aide-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 12px 0 0 !important; }
.alertes__aide-actions .bouton-lien { margin-top: 0; }

/* --- Lecture réservée aux lecteurs connectés ----------------------------- */

/* Le dernier paragraphe de l'aperçu s'efface : la coupure ne surprend pas. */
.article__corps--apercu > :last-child {
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}

.mur-lecture {
    border: 1px solid var(--bleu);
    border-radius: var(--rayon);
    background: var(--blanc);
    padding: 26px 24px 28px;
    margin: 4px 0 28px;
    text-align: center;
}

.mur-lecture__logo { margin: 0 0 18px; }
.mur-lecture__logo img { width: 190px; height: auto; margin: 0 auto; }

.mur-lecture__texte {
    margin: 0 auto 18px;
    max-width: 420px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bleu-fonce);
}

.mur-lecture__action { margin: 0; }
.mur-lecture__action .bouton { min-width: 220px; padding: 11px 24px; font-size: 14px; }

.mur-lecture__pied { margin: 16px 0 0; font-size: 14px; color: var(--gris); }
.mur-lecture__pied a { font-weight: 600; text-decoration: underline; }

@media (max-width: 560px) {
    .mur-lecture { padding: 22px 16px 24px; }
    .mur-lecture__action .bouton { min-width: 0; width: 100%; }
}

/* --- Connexion avec un compte Google ------------------------------------- */

/* « ou » posé sur un trait, entre le mot de passe et Google. */
.compte__separateur {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0; color: var(--gris); font-size: 13px;
}
.compte__separateur::before,
.compte__separateur::after {
    content: ""; flex: 1; height: 1px; background: var(--gris-clair);
}

/* Bouton blanc à bordure grise : la présentation demandée par Google. */
.bouton-google {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%; padding: 11px 18px;
    background: var(--blanc); color: #3c4043;
    border: 1px solid #dadce0; border-radius: var(--rayon);
    font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
}
.bouton-google:hover { background: #f8f9fa; border-color: #c6c9cd; color: #3c4043; }
.bouton-google__logo { flex: 0 0 18px; }

.compte__note {
    margin: 14px 0 0; font-size: 13px; line-height: 1.55; color: var(--gris);
    text-align: center;
}

/* --- Suivre la chaîne WhatsApp ------------------------------------------- */

.suivre-whatsapp { margin: 18px 0 4px; text-align: center; }

.suivre-whatsapp__bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 11px 26px; border-radius: 999px;
    background: #25d366; color: var(--blanc);
    font-size: 14px; font-weight: 700;
}
.suivre-whatsapp__bouton:hover { background: #1da851; color: var(--blanc); }

@media (max-width: 560px) {
    .suivre-whatsapp__bouton { width: 100%; }
}

/* --- Favoris ------------------------------------------------------------- */

/* Bouton posé dans la barre de partage : sobre, il ne concurrence pas les réseaux. */
.partage__favori {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; font-size: 12px; font-weight: 600;
    background: var(--blanc); color: var(--gris);
    border: 1px solid var(--gris-clair); border-radius: var(--rayon);
    font-family: inherit; cursor: pointer;
}
.partage__favori:hover { border-color: var(--bleu); color: var(--bleu); }
.partage__favori.est-actif { background: var(--bleu); border-color: var(--bleu); color: var(--blanc); }
.partage__favori.est-actif svg path { fill: currentColor; }
.partage__favori svg { flex: 0 0 16px; }

/* Liste « Mes favoris ». */
.favoris__liste { list-style: none; margin: 0; padding: 0; }

.favoris__article {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 16px 0; border-top: 1px solid var(--gris-clair);
}
.favoris__article:first-child { border-top: 0; padding-top: 0; }

.favoris__image { flex: 0 0 160px; }
.favoris__image img { width: 160px; height: 107px; object-fit: cover; border-radius: var(--rayon); }

.favoris__texte { flex: 1 1 auto; min-width: 0; }
.favoris__rubrique {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--rouge);
}
.favoris__titre { font-family: var(--titre); font-size: 18px; margin: 4px 0 6px; line-height: 1.3; }
.favoris__titre a { color: var(--encre); }
.favoris__titre a:hover { color: var(--rouge); }
.favoris__apercu {
    margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: var(--gris);
}
.favoris__meta { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; font-size: 12px; color: var(--gris); }

.favoris__retrait { flex: 0 0 auto; }

/* Retrait : discret au repos, franchement rouge quand la main s'en approche. */
.favoris__retirer {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px;
    background: var(--blanc); color: var(--gris);
    border: 1px solid var(--gris-clair);
    font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.favoris__retirer:hover { background: #fdeeee; border-color: var(--rouge); color: var(--rouge); }
.favoris__retirer svg { flex: 0 0 15px; }

@media (max-width: 560px) {
    .favoris__article { flex-wrap: wrap; }
    .favoris__image { flex: 0 0 90px; }
    .favoris__image img { width: 90px; height: 60px; }
    .favoris__retrait { width: 100%; }
}

/* --- Menu « Mon compte » du bandeau rouge -------------------------------- */

.menu-compte { position: relative; }

.menu-compte__bouton {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; list-style: none; padding: 2px 0;
}
.menu-compte__bouton::-webkit-details-marker { display: none; }
.menu-compte__bouton::after { content: "▾"; font-size: 10px; opacity: .8; }
.menu-compte[open] .menu-compte__bouton::after { content: "▴"; }

.menu-compte__panneau {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
    min-width: 240px; padding: 8px;
    background: var(--blanc); color: var(--encre);
    border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.menu-compte__nom {
    margin: 4px 10px 8px; padding-bottom: 8px;
    border-bottom: 1px solid var(--gris-clair);
    font-weight: 700; font-size: 13px; color: var(--encre);
}

.menu-compte__panneau .menu-compte__lien {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: var(--rayon);
    background: none; color: var(--encre); text-align: left;
    font-family: inherit; font-size: 13px; cursor: pointer;
}
.menu-compte__panneau .menu-compte__lien:hover { background: var(--fond); color: var(--bleu); }
.menu-compte__panneau .menu-compte__lien--sortie { color: var(--rouge); }
.menu-compte__panneau .menu-compte__lien--sortie:hover { background: #fdeeee; color: var(--rouge); }
.menu-compte__panneau form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--gris-clair); }

/* --- Espace du lecteur : menu à gauche, contenu à droite ------------------ */

.espace {
    display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px;
    margin: 28px 0 56px; align-items: start;
}
@media (max-width: 780px) { .espace { grid-template-columns: 1fr; gap: 18px; } }

.espace__menu {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--blanc); box-shadow: var(--ombre);
    border-radius: 6px; padding: 10px;
}
.espace__menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--gris-clair); }

.espace__lien {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 11px 12px; border: 0; border-radius: var(--rayon);
    background: none; color: var(--bleu); text-align: left;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.espace__lien:hover { background: var(--fond); }
.espace__lien.est-actif { background: var(--fond); color: var(--encre); }
.espace__lien--sortie { color: var(--rouge); }
.espace__lien--sortie:hover { background: #fdeeee; }

.espace__titre {
    font-family: var(--titre); font-size: 26px; margin: 0 0 20px;
    display: inline-block; border-bottom: 3px solid var(--bleu); padding-bottom: 6px;
}

.espace__profil { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.espace__pastille { flex: 0 0 64px; width: 64px; height: 64px; font-size: 24px; }
.espace__nom { font-family: var(--titre); font-size: 22px; font-weight: 700; margin: 0; }
.espace__courriel { margin: 2px 0 0; font-size: 14px; color: var(--bleu); }
.espace__depuis { margin: 4px 0 0; font-size: 13px; color: var(--gris); }

.espace__chiffres {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px; margin-bottom: 22px;
}
.espace__chiffre {
    background: var(--blanc); box-shadow: var(--ombre); border-radius: 6px;
    padding: 16px 18px; border-left: 3px solid var(--bleu); color: inherit;
}
a.espace__chiffre:hover { border-left-color: var(--rouge); color: inherit; }
.espace__chiffre-valeur {
    display: block; font-family: var(--titre); font-size: 26px;
    font-weight: 700; color: var(--bleu-fonce); line-height: 1.1;
}
.espace__chiffre-libelle { display: block; margin-top: 2px; font-size: 12px; color: var(--gris); }

.espace__carte {
    background: var(--blanc); box-shadow: var(--ombre);
    border-radius: 6px; padding: 24px; margin-bottom: 20px;
}
.espace__soustitre { font-family: var(--titre); font-size: 18px; margin: 0 0 14px; }
.espace__texte { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.espace__texte--discret { color: var(--gris); font-size: 13px; }

.espace__etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.espace__etiquette {
    background: var(--fond); border: 1px solid var(--gris-clair);
    border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600;
}

.espace__formulaire { display: flex; flex-direction: column; gap: 16px; }
.espace__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 680px) { .espace__grille { grid-template-columns: 1fr; } }
.espace__formulaire .compte__bouton { align-self: flex-start; }

/* --- Kiosque : retrouver une édition par numéro ou par date -------------- */

.recherche-journal {
    display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
    margin: 14px 0 6px;
}

.recherche-journal__champ { display: flex; flex-direction: column; gap: 5px; }
.recherche-journal__champ label { font-size: 12px; font-weight: 600; color: var(--gris); }
.recherche-journal__champ input {
    padding: 9px 12px; font-size: 14px; font-family: inherit;
    border: 1px solid var(--gris-clair); border-radius: var(--rayon);
    background: var(--blanc); color: var(--encre); min-width: 190px;
}
.recherche-journal__champ input:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }

.recherche-journal__actions { display: flex; align-items: center; gap: 14px; }
.recherche-journal__actions .bouton { padding: 10px 22px; }
.recherche-journal__reinitialiser { font-size: 13px; font-weight: 600; }

@media (max-width: 560px) {
    .recherche-journal { flex-direction: column; align-items: stretch; }
    .recherche-journal__champ input { min-width: 0; width: 100%; }
    .recherche-journal__actions .bouton { flex: 1; }
}

/* --- Liseuse : panneau des pages (bouton en damier) ---------------------- */

/*
   Colonne de vignettes à gauche, sous la barre d'outils. wow_book la pose en
   haut à gauche de la scène : on la redescend pour ne pas couvrir le bouton
   qui l'a ouverte.
*/
.liseuse .wowbook-thumbnails {
    /*
       Le panneau occupe toute la scène, du haut au bas de l'écran, et laisse
       la barre d'outils par-dessus (z-index plus bas) : la marge haute
       descend les vignettes sous la barre, et la flèche du bas tombe
       toujours au-dessus du pli.
    */
    position: absolute; top: 0; bottom: 0; height: auto; z-index: 1;
    padding: 52px 6px 6px;
    /* Largeur posée ici : deux vignettes par ligne, et wow_book n'en calcule pas d'autre. */
    width: 232px;
    background: rgba(16, 18, 23, .94);
    box-shadow: 2px 0 14px rgba(0, 0, 0, .35);
}
.liseuse .wowbook-thumbnails .wowbook-wrapper { position: relative; height: 100%; }

/* La liste défile entre les deux flèches, qui gardent leur place. */
/*
   La liste défile à la molette et au doigt, en plus des deux flèches : si
   l'une d'elles se retrouvait hors de l'écran, le panneau reste utilisable.
*/
.liseuse .wowbook-thumbnails .wowbook-clipper {
    position: absolute; top: 34px; bottom: 34px; left: 0; right: 0;
    height: auto; margin: 0;
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent;
}
.liseuse .wowbook-thumbnails .wowbook-clipper::-webkit-scrollbar { width: 6px; }
.liseuse .wowbook-thumbnails .wowbook-clipper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .35); border-radius: 3px;
}
.liseuse .wowbook-thumbnails ul { text-align: center; font-size: 0; }

.liseuse .wowbook-thumbnail {
    margin: 4px; border-radius: 2px; overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .5);
    outline: 2px solid transparent; outline-offset: -2px;
    transition: outline-color .15s;
}
/* Page de droite : la marge du greffon casserait l'alignement des colonnes. */
.liseuse .wowbook-thumbnail.wowbook-right { margin-right: 4px; }
.liseuse .wowbook-thumbnail:hover { outline-color: var(--rouge-vif); }

/*
   Flèches de défilement : posées en haut et en bas du panneau, sur un fond
   plein pour qu'on les voie par-dessus les vignettes.
*/
.liseuse .wowbook-thumbnails .wowbook-button {
    background-color: rgba(255, 255, 255, .1); color: var(--blanc);
    width: 100%; height: 30px; line-height: 30px; font-size: 14px;
    border-radius: 3px;
}
.liseuse .wowbook-thumbnails .wowbook-button:hover { background-color: rgba(255, 255, 255, .22); }
.liseuse .wowbook-thumbnails .wowbook-back { top: 2px; }
.liseuse .wowbook-thumbnails .wowbook-next { top: auto; bottom: 2px; }
.liseuse .wowbook-thumbnails .wowbook-button.wowbook-disabled { opacity: .3; }

@media (max-width: 600px) {
    .liseuse .wowbook-thumbnails { width: 172px; }
}

/* --- Liseuse : fenêtre de téléchargement des pages ----------------------- */

.telecharger {
    width: min(1000px, 92vw); max-height: 88vh;
    padding: 0; border: 0; border-radius: 6px;
    background: var(--blanc); color: var(--encre);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
    overflow: hidden;
}
.telecharger::backdrop { background: rgba(0, 0, 0, .6); }

.telecharger__entete {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 20px; border-bottom: 1px solid var(--gris-clair);
}
.telecharger__titre { font-family: var(--titre); font-size: 19px; margin: 0; }
.telecharger__entete form { margin: 0; }
.telecharger__fermer {
    border: 0; background: none; font-size: 26px; line-height: 1;
    color: var(--gris); cursor: pointer; padding: 0 4px;
}
.telecharger__fermer:hover { color: var(--rouge); }

.telecharger__aide { margin: 0; padding: 12px 20px 0; font-size: 13px; color: var(--gris); }

/* La grille défile ; l'en-tête reste en place. */
.telecharger__grille {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px; padding: 16px 20px 22px;
    max-height: calc(88vh - 110px); overflow-y: auto;
}

.telecharger__page {
    display: block; position: relative; color: var(--encre);
    border: 1px solid var(--gris-clair); border-radius: 3px; overflow: hidden;
    background: var(--fond);
}
.telecharger__page:hover { border-color: var(--bleu); color: var(--encre); }
.telecharger__page img { width: 100%; height: auto; display: block; }

.telecharger__legende {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 6px 10px; font-size: 12px; font-weight: 600;
    background: rgba(16, 18, 23, .78); color: var(--blanc);
}

@media (max-width: 600px) {
    .telecharger__grille { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
    .telecharger__titre { font-size: 16px; }
}