/* =====================================================================
   ActuPolice.com — Compléments
   ---------------------------------------------------------------------
   Le strict nécessaire pour remplacer ce que faisaient les
   bibliothèques JavaScript du thème, plus quelques corrections
   d'accessibilité. Rien ici ne modifie l'apparence du site : chaque
   règle reproduit un comportement existant avec moins de code.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Menu mobile
   jQuery ouvrait le menu par slideToggle(), qui écrit display:block en
   style en ligne. Une classe fait la même chose, sans script bloquant.
   --------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
    .vn-main-navigation .vn-menu.vn-menu-ouvert {
        display: block;
    }

    .vn-menu li.menu-item-has-children.vn-sous-menu-ouvert > ul {
        display: block;
    }
}

/* ---------------------------------------------------------------------
   Sous-menus : ouverture au survol, en CSS.
   Remplace Superfish (7,7 Ko).
   --------------------------------------------------------------------- */
@media screen and (min-width: 1001px) {
    .vn-menu li.menu-item-has-children:hover > ul,
    .vn-menu li.menu-item-has-children.vn-sous-menu-ouvert > ul {
        display: block;
    }
}

/* ---------------------------------------------------------------------
   Menu principal toujours visible
   ---------------------------------------------------------------------
   `--ap-entete` est calculée par site.js : elle vaut l'opposé de la
   hauteur du bandeau de date et de la bannière, c'est-à-dire de tout ce
   qui précède le menu dans l'en-tête. L'en-tête défile donc jusqu'à ce
   que le menu touche le haut de l'écran, où il s'immobilise.

   #vn-masthead porte déjà z-index: 999 dans site.css : le menu passe
   au-dessus du contenu, et sous la recherche en surimpression (99999).

   Sans JavaScript, `--ap-entete` vaut 0 : l'en-tête entier reste
   affiché en haut. Correct, seulement plus encombrant.
   --------------------------------------------------------------------- */
@media screen and (min-width: 1001px) {
    #vn-masthead {
        position: sticky;
        top: var(--ap-entete, 0px);
    }

    /* Un lien d'ancre ne doit pas déposer sa cible sous le menu. */
    html {
        scroll-padding-top: calc(var(--ap-menu-hauteur, 0px) + 10px);
    }
}

/* ---------------------------------------------------------------------
   Colonne latérale collante
   Remplace theia-sticky-sidebar.js (15,8 Ko).
   ---------------------------------------------------------------------
   La variable --ap-collant est calculée par site.js : elle vaut
   20 px moins la hauteur des blocs situés au-dessus du titre
   « Actions syndicales ». Ce décalage négatif laisse la colonne défiler
   avec la page jusqu'à ce que ce titre atteigne le haut de l'écran,
   moment où elle se fige.

   Le repli à 20 px est le comportement d'origine : sans JavaScript, la
   colonne se fige dès le premier défilement.
   --------------------------------------------------------------------- */
@media screen and (min-width: 1001px) {
    #secondary.widget-area {
        position: sticky;
        top: var(--ap-collant, 20px);
        align-self: flex-start;
    }
}

/* ---------------------------------------------------------------------
   Suggestions de recherche
   Remplace le plugin SearchWP Live Ajax Search.
   --------------------------------------------------------------------- */
.vn-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    max-height: 60vh;
    overflow-y: auto;
    text-align: left;
}

.vn-suggestions a {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    color: #0e0e0e;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

.vn-suggestions a:last-child {
    border-bottom: none;
}

.vn-suggestions a:hover,
.vn-suggestions a:focus {
    background: #f7f8fa;
    color: var(--viral-news-template-color, #0a0f39);
}

.vn-suggestions a span {
    display: block;
    margin-top: 2px;
    color: #8b929e;
    font-size: 12px;
}

.ht-search-container .search-form {
    position: relative;
}

/* ---------------------------------------------------------------------
   Images : réservation de l'espace avant chargement.
   Les attributs width/height issus de la table `medias` évitent le
   décalage de mise en page pendant le chargement — ce que WordPress ne
   faisait pas sur les vignettes de la liste d'articles.
   --------------------------------------------------------------------- */
.entry-figure img,
.vn-thumb-container img,
.single-featured-img img {
    height: auto;
    max-width: 100%;
}

/* ---------------------------------------------------------------------
   Accessibilité
   --------------------------------------------------------------------- */
:where(a, button, input, textarea, select, summary):focus-visible {
    outline: 2px solid var(--viral-news-template-color, #0a0f39);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------
   Numéros ActuPolice : gabarit « numero-pdf »
   Les 30 pages de numéros utilisaient le plugin PDF Embedder ; le
   lecteur natif du navigateur fait le même travail, sans script.
   --------------------------------------------------------------------- */
.vn-numero-pdf .vn-numero-lecteur {
    width: 100%;
    height: 80vh;
    min-height: 480px;
    border: 1px solid #e5e5e5;
    margin-bottom: 20px;
}

.vn-numero-pdf .vn-numero-telecharger {
    display: inline-block;
    padding: 10px 18px;
    background: var(--viral-news-template-color, #0a0f39);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

.vn-numero-pdf .vn-numero-sommaire {
    margin-bottom: 25px;
}

/* ---------------------------------------------------------------------
   Messages de service (dépôt de commentaire, erreurs de formulaire)
   --------------------------------------------------------------------- */
.vn-message {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-left: 3px solid;
    font-size: 14px;
}

.vn-message-succes {
    background: #eef7f0;
    border-color: #1a7f37;
    color: #14532d;
}

.vn-message-erreur {
    background: #fdf0ef;
    border-color: #b42318;
    color: #7a1c14;
}

.vn-message-info {
    background: #eef2fb;
    border-color: var(--viral-news-template-color, #0a0f39);
    color: #1f2937;
}

/* ---------------------------------------------------------------------
   Champ-piège du formulaire de commentaire.
   Invisible pour l'utilisateur, y compris pour un lecteur d'écran ;
   les robots le remplissent et se trahissent.
   --------------------------------------------------------------------- */
.vn-piege {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------------
   Chapô
   Les articles importés commençaient par un ou plusieurs paragraphes
   habillés d'un <span style="font-size:22px;font-weight:bold;
   color:rgb(102,102,102)"> — un chapeau de presse écrit comme tel, que
   WordPress ne distinguait pas du corps. Le texte vit désormais dans sa
   propre colonne ; ces règles lui rendent exactement l'apparence qu'il
   avait, sans style en ligne.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Taille du texte des articles
   ---------------------------------------------------------------------
   Une seule valeur commande le corps du texte : `--ap-taille-article`,
   écrite par le réglage « Taille du texte des articles » de l'écran
   Apparence. Le site d'origine composait à 14 px.

   Ce qui suit le corps de texte est exprimé en `em`, donc solidaire de
   ce réglage — mais avec un plancher en pixels, pour que descendre la
   valeur ne réduise pas un chapô ou une note en dessous de ce qu'ils
   valaient à 14 px.

   Restent à taille fixe les blocs qui reproduisent un dessin précis :
   la carte d'un article mentionné (14 px, celle de WordPress) et la
   barre de partage. Les changer trahirait ce qu'ils imitent.

   Le sélecteur vise `.vn-article-content > .entry-content`, et non
   `.entry-content` seule : les cartes de l'accueil, des catégories, de
   la recherche et des pages d'auteur enveloppent elles aussi leur
   extrait dans un `.entry-content`. La première écriture grossissait
   donc tout le site, alors que ce réglage ne concerne que le corps d'un
   article ou d'une page ouverte.
   --------------------------------------------------------------------- */
.vn-article-content > .entry-content {
    font-size: var(--ap-taille-article, 22px);
    /* 1,4 comme sur actupolice.com, où chaque paragraphe portait un
       `style="line-height:1.4"` que le purificateur a retiré à l'import.
       Sans lui, le texte retombait sur le 1,8 du thème — 39,6 px entre
       les lignes au lieu de 30,8 : près de 30 % d'air en plus, et un
       rendu bien plus lâche à taille de police égale. */
    line-height: 1.4;
}

/* Les marges entre blocs sont en pixels, jamais en `em`.
   Écrites en `em`, elles enflaient avec le réglage de taille : à 22 px,
   une figure prenait 33 px de marge basse là où le thème d'origine en
   pose 25, et l'article se délayait à mesure qu'on grossissait le texte.
   Le rythme vertical d'une page ne suit pas la taille du corps. */

.entry-content .chapo {
    margin: 0 0 25px;
    color: #666;
    font-size: max(22px, 1em);
    font-weight: 700;
    line-height: 1.4;
}

@media screen and (max-width: 580px) {
    .entry-content .chapo {
        font-size: max(19px, 0.95em);
    }
}

/* ---------------------------------------------------------------------
   Blocs issus du nettoyage du contenu WordPress
   --------------------------------------------------------------------- */
.article-video {
    position: relative;
    margin: 0 0 25px;
    padding-top: 56.25%;   /* 16/9 */
}

.article-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Formats autres que le 16/9, repris de WordPress : un Short YouTube
   est filmé à la verticale et le lecteur doit suivre, faute de quoi
   la vidéo s'affiche minuscule au milieu de deux bandes noires.
   Le nettoyeur pose la classe d'après `wp-embed-aspect-9-16`. */
.article-video-21-9 { padding-top: 42.85%; }
.article-video-18-9,
.article-video-2-1  { padding-top: 50%; }
.article-video-16-9 { padding-top: 56.25%; }
.article-video-4-3  { padding-top: 75%; }
.article-video-1-1  { padding-top: 100%; }
.article-video-9-16 { padding-top: 177.77%; }
.article-video-1-2  { padding-top: 200%; }

/* ---------------------------------------------------------------------
   Galeries d'images
   ---------------------------------------------------------------------
   WordPress écrivait le nombre de colonnes dans une classe
   `columns-7`, retirée à l'import avec les autres classes de
   présentation. Sans elle, la grille s'en remet à la place
   disponible : `auto-fit` ouvre autant de colonnes de 88 px que la
   largeur le permet, et les colonnes vides s'effacent.

   Dans la colonne d'article de 807 px, cela donne 7 colonnes de
   94,7 px — le thème d'origine calculait `14,2857 % − 24 px × 6/7`,
   soit exactement la même chose. Une galerie de trois images occupe
   trois colonnes étirées, comme le faisait `columns-3`.

   Les règles `columns-N` ci-dessous ne servent à rien tant que
   l'import n'est pas rejoué : le nettoyeur conserve désormais ces
   classes, et elles reprendront alors la main sur le calcul
   automatique.
   --------------------------------------------------------------------- */
.article-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 24px;
    margin: 0 0 25px;
}

.article-galerie.columns-1 { grid-template-columns: 1fr; }
.article-galerie.columns-2 { grid-template-columns: repeat(2, 1fr); }
.article-galerie.columns-3 { grid-template-columns: repeat(3, 1fr); }
.article-galerie.columns-4 { grid-template-columns: repeat(4, 1fr); }
.article-galerie.columns-5 { grid-template-columns: repeat(5, 1fr); }
.article-galerie.columns-6 { grid-template-columns: repeat(6, 1fr); }
.article-galerie.columns-7 { grid-template-columns: repeat(7, 1fr); }
.article-galerie.columns-8 { grid-template-columns: repeat(8, 1fr); }

/* Sous 600 px, sept vignettes deviennent illisibles. */
@media screen and (max-width: 600px) {
    .article-galerie,
    .article-galerie[class*="columns-"] {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 12px;
    }
}

.article-galerie figure,
.article-galerie img {
    margin: 0;
    width: 100%;
    height: auto;
}

.article-galerie img {
    display: block;
}

.article-image {
    margin: 0 0 25px;
}

/* ---------------------------------------------------------------------
   Alignement des images
   ---------------------------------------------------------------------
   `.aligncenter` de site.css pose bien `margin-left/right: auto`, mais
   le raccourci `margin` ci-dessus, écrit plus tard et à specificité
   égale, les remettait à zéro : l'image restait collée à gauche.

   Surtout, des marges automatiques ne centrent rien sur un bloc qui
   occupe déjà toute la largeur. WordPress passe la figure en
   `display: table` — elle se rétracte alors à la largeur de l'image —
   avant de la centrer. On reprend la même recette, légende comprise.
   --------------------------------------------------------------------- */
.article-image.aligncenter,
.article-image.alignleft,
.article-image.alignright {
    display: table;
}

.article-image.aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.article-image.alignleft {
    float: left;
    margin: 0 1.5em 1em 0;
}

.article-image.alignright {
    float: right;
    margin: 0 0 1em 1.5em;
}

.article-image.aligncenter > figcaption,
.article-image.alignleft > figcaption,
.article-image.alignright > figcaption {
    display: table-caption;
    caption-side: bottom;
}

.article-citation {
    margin: 0 0 25px;
    padding-left: 18px;
    border-left: 3px solid var(--viral-news-template-color, #0a0f39);
    font-style: italic;
}

.article-lien-externe {
    word-break: break-word;
}

/* ---------------------------------------------------------------------
   Page Archives : le mur des couvertures
   --------------------------------------------------------------------- */
.vn-galerie-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 22px;
    margin: 25px 0;
}

.vn-numero-vignette {
    margin: 0;
    text-align: center;
}

.vn-numero-vignette img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.vn-numero-vignette a:hover img,
.vn-numero-vignette a:focus img {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
}

/* Numéro dont la couverture n'a pas encore été générée. */
.vn-numero-sans-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1.414;      /* proportions A4 */
    padding: 10px;
    background: var(--viral-news-template-color, #0a0f39);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.vn-numero-vignette figcaption {
    margin-top: 8px;
    color: #5b6270;
    font-size: 13px;
}

/* =====================================================================
   Corrections d'affichage — 31/08/2026
   ---------------------------------------------------------------------
   Toutes les valeurs ci-dessous sont relevées sur www.actupolice.com,
   par mesure du style calculé dans le navigateur. Rien n'est inventé :
   chaque règle ramène le site sur la valeur de l'original.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Pastille de date de l'accueil — jour et mois en blanc
   ---------------------------------------------------------------------
   La pastille est déjà en color:#FFF, mais la date est entourée d'un
   lien, et `a { color: #404040 }` reprend la main : du gris foncé sur
   fond bleu nuit. L'original affiche les deux en blanc (jour 28 px,
   mois 14 px).
   --------------------------------------------------------------------- */
.entry-post-info .entry-date a,
.entry-post-info .entry-date a:hover,
.entry-post-info .entry-date a:focus,
.entry-post-info .entry-date a:active {
    color: #FFF;
}

/* ---------------------------------------------------------------------
   2. Taille des icônes
   ---------------------------------------------------------------------
   icones.css fixe `font-size: 24px` sur le ::before, ce qui gèle toutes
   les icônes à la même taille, quel que soit leur contexte. Le thème
   d'origine écrit `font-size: inherit` : chaque icône prend la taille
   du texte qu'elle accompagne. D'où, sur l'original, la pendule du bloc
   catégorie à 10,56 px (0,88 em de 12 px) et le livre des catégories à
   13 px — contre 24 px ici.
   --------------------------------------------------------------------- */
[class^="mdi-"]::before,
[class*=" mdi-"]::before {
    font-size: inherit;
}

/* Les quelques contextes où l'original impose une taille propre. */
.vn-header-search i       { font-size: 24px; }   /* loupe de l'en-tête   */
#vn-back-top i            { font-size: 24px; }   /* retour en haut       */
.vn-header-social-icons i { font-size: 20px; }   /* réseaux sociaux      */
.vn-contact-info i        { font-size: 14px; }   /* coordonnées, pied    */
.vn-top-left-header i     { font-size: 13px; }   /* pendule du bandeau   */
.entry-categories i       { font-size: 13px; margin-right: 5px; }

/* ---------------------------------------------------------------------
   3. Bouton loupe dans le champ de recherche
   ---------------------------------------------------------------------
   site.css masquait le bouton (`display: none`) : le champ n'offrait
   que la touche Entrée. L'original utilise le bloc « Recherche » de
   WordPress, bouton foncé à l'intérieur du cadre. Les mêmes règles
   servent au formulaire de la colonne latérale, à celui de la page de
   recherche et à celui de la page 404, qui partagent ce balisage.
   --------------------------------------------------------------------- */
.search-form {
    display: flex;
    align-items: stretch;
    padding: 4px;
    border: 1px solid #949494;
    background: #FFF;
}

.search-form label {
    display: flex;
    flex-grow: 1;
    margin: 0;
}

.search-field {
    width: 100%;
    padding: 10px;
    border: none;
    background: none;
    font-size: 14px;
    line-height: 1.2;
}

.search-field:focus {
    outline: 2px solid var(--viral-news-template-color, #0a0f39);
    outline-offset: -2px;
}

.widget_search .search-submit,
.search-form .search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 0 18px;
    border: none;
    background: #32373c;
    color: #FFF;
    cursor: pointer;
}

.search-form .search-submit i {
    font-size: 20px;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus {
    background: var(--viral-news-template-color, #0a0f39);
}

/* La recherche en plein écran garde son propre habillage. */
.ht-search-container .search-form {
    border: none;
    padding: 0 90px;
}

.ht-search-container .search-submit {
    min-width: 90px;
    background: none;
}

/* ---------------------------------------------------------------------
   4. Graisse des titres
   ---------------------------------------------------------------------
   site.css écrit `font-weight: var(--viral-news-header-weight, 400)` sur
   h1…h6, et la variable n'est jamais définie : tous les titres sortent
   en maigre. L'original les affiche en 700 — vérifié sur les titres de
   carte, les titres de widget et les titres du bloc catégorie, qui sont
   les trois à 700 là où nous étions à 400.
   --------------------------------------------------------------------- */
:root {
    --viral-news-header-weight: 700;
}

/* ---------------------------------------------------------------------
   Barre de partage (kiwi-article-bar)
   ---------------------------------------------------------------------
   Reprend à l'identique la barre du plugin Kiwi Social Share, en tête
   et en pied du contenu de l'article. Valeurs relevées sur
   www.actupolice.com : boutons de 80 × 30 px minimum, fond #203852,
   #222 au survol, texte blanc, 5 px entre deux boutons, l'ensemble
   centré.

   L'ancienne feuille du plugin déclinait une couleur par réseau ; le
   site les avait toutes ramenées au même bleu nuit par une règle en
   ligne. C'est cette version-là qui est reproduite.
   --------------------------------------------------------------------- */
ul.kiwi-article-bar {
    margin: 0 0 25px;
    padding: 0;
    /* Taille fixe : la barre est un objet d'interface, pas du texte
       d'article. Elle ne doit pas grandir avec le réglage de taille. */
    font-size: 13px;
    line-height: 30px;
    text-align: center;
}

.entry-content > ul.kiwi-article-bar:last-child {
    margin: 25px 0 0;
}

ul.kiwi-article-bar li {
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

ul.kiwi-article-bar li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 30px;
    padding: 0 5px;
    box-sizing: border-box;
    background: #203852;
    color: #FFF;
    transition: background 0.3s;
}

ul.kiwi-article-bar li a:hover,
ul.kiwi-article-bar li a:focus {
    background: #222;
    color: #FFF;
    text-decoration: none;
}

ul.kiwi-article-bar li a svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

@media screen and (max-width: 600px) {
    ul.kiwi-article-bar li a {
        min-width: 46px;
    }
}

/* ---------------------------------------------------------------------
   Mise en forme posée depuis le back-office
   ---------------------------------------------------------------------
   Les classes sont celles de WordPress : c'est ce que portait l'ancien
   site, et la barre d'outils de l'éditeur les réutilise. Les tailles
   sont relatives, donc justes aussi bien dans un paragraphe que dans un
   titre.
   --------------------------------------------------------------------- */
.entry-content .has-text-align-left    { text-align: left; }
.entry-content .has-text-align-center  { text-align: center; }
.entry-content .has-text-align-right   { text-align: right; }
.entry-content .has-text-align-justify { text-align: justify; }

/* Échelle de tailles reprise telle quelle du site d'origine
   (`--wp--preset--font-size--*`). Les valeurs approchées d'avant
   — 0,85em, 1em, 1,3em, 1,6em — tombaient à côté : `large` valait
   18,2 px chez nous contre 25,9 px là-bas, ce qui suffisait à changer
   l'allure d'un bouton ou d'un chapô. Le `rem` vaut 14 px des deux
   côtés, les `clamp()` sont donc directement transposables : la taille
   croît avec la fenêtre entre 1 050 px et sa borne haute. */
:root {
    --ap-taille-small:   0.9rem;
    --ap-taille-medium:  1.05rem;
    --ap-taille-normal:  16px;
    --ap-taille-large:   clamp(1.39rem, 1.39rem + ((1vw - 0.2rem) * 0.836), 1.85rem);
    --ap-taille-x-large: clamp(1.85rem, 1.85rem + ((1vw - 0.2rem) * 1.182), 2.5rem);
    --ap-taille-huge:    42px;
}

.entry-content .has-small-font-size   { font-size: var(--ap-taille-small); }
.entry-content .has-medium-font-size  { font-size: var(--ap-taille-medium); }
.entry-content .has-normal-font-size  { font-size: var(--ap-taille-normal); }
.entry-content .has-large-font-size   { font-size: var(--ap-taille-large); }
.entry-content .has-x-large-font-size { font-size: var(--ap-taille-x-large); line-height: 1.4; }
.entry-content .has-huge-font-size    { font-size: var(--ap-taille-huge); line-height: 1.2; }

/* ---------------------------------------------------------------------
   Palette de couleurs
   ---------------------------------------------------------------------
   Les douze teintes du nuancier WordPress, seules références possibles
   d'une classe `has-vivid-red-background-color`. Sans elles, la couleur
   choisie par l'auteur disparaît sans laisser de trace.
   --------------------------------------------------------------------- */
:root {
    --ap-couleur-black:                  #000000;
    --ap-couleur-cyan-bluish-gray:       #abb8c3;
    --ap-couleur-white:                  #ffffff;
    --ap-couleur-pale-pink:              #f78da7;
    --ap-couleur-vivid-red:              #cf2e2e;
    --ap-couleur-luminous-vivid-orange:  #ff6900;
    --ap-couleur-luminous-vivid-amber:   #fcb900;
    --ap-couleur-light-green-cyan:       #7bdcb5;
    --ap-couleur-vivid-green-cyan:       #00d084;
    --ap-couleur-pale-cyan-blue:         #8ed1fc;
    --ap-couleur-vivid-cyan-blue:        #0693e3;
    --ap-couleur-vivid-purple:           #9b51e0;
}

.entry-content .has-black-color                 { color: var(--ap-couleur-black); }
.entry-content .has-cyan-bluish-gray-color      { color: var(--ap-couleur-cyan-bluish-gray); }
.entry-content .has-white-color                 { color: var(--ap-couleur-white); }
.entry-content .has-pale-pink-color             { color: var(--ap-couleur-pale-pink); }
.entry-content .has-vivid-red-color             { color: var(--ap-couleur-vivid-red); }
.entry-content .has-luminous-vivid-orange-color { color: var(--ap-couleur-luminous-vivid-orange); }
.entry-content .has-luminous-vivid-amber-color  { color: var(--ap-couleur-luminous-vivid-amber); }
.entry-content .has-light-green-cyan-color      { color: var(--ap-couleur-light-green-cyan); }
.entry-content .has-vivid-green-cyan-color      { color: var(--ap-couleur-vivid-green-cyan); }
.entry-content .has-pale-cyan-blue-color        { color: var(--ap-couleur-pale-cyan-blue); }
.entry-content .has-vivid-cyan-blue-color       { color: var(--ap-couleur-vivid-cyan-blue); }
.entry-content .has-vivid-purple-color          { color: var(--ap-couleur-vivid-purple); }

.entry-content .has-black-background-color                 { background-color: var(--ap-couleur-black); }
.entry-content .has-cyan-bluish-gray-background-color      { background-color: var(--ap-couleur-cyan-bluish-gray); }
.entry-content .has-white-background-color                 { background-color: var(--ap-couleur-white); }
.entry-content .has-pale-pink-background-color             { background-color: var(--ap-couleur-pale-pink); }
.entry-content .has-vivid-red-background-color             { background-color: var(--ap-couleur-vivid-red); }
.entry-content .has-luminous-vivid-orange-background-color { background-color: var(--ap-couleur-luminous-vivid-orange); }
.entry-content .has-luminous-vivid-amber-background-color  { background-color: var(--ap-couleur-luminous-vivid-amber); }
.entry-content .has-light-green-cyan-background-color      { background-color: var(--ap-couleur-light-green-cyan); }
.entry-content .has-vivid-green-cyan-background-color      { background-color: var(--ap-couleur-vivid-green-cyan); }
.entry-content .has-pale-cyan-blue-background-color        { background-color: var(--ap-couleur-pale-cyan-blue); }
.entry-content .has-vivid-cyan-blue-background-color       { background-color: var(--ap-couleur-vivid-cyan-blue); }
.entry-content .has-vivid-purple-background-color          { background-color: var(--ap-couleur-vivid-purple); }

/* ---------------------------------------------------------------------
   Boutons d'article
   ---------------------------------------------------------------------
   Le bouton « Qu'a voté votre député ? » est, chez WordPress, trois
   éléments emboîtés : une rangée en flex qui décide de l'alignement,
   une boîte qui décide de la largeur, et le lien qui porte la couleur
   et la forme. Les mesures ci-dessous viennent de `style.min.css` du
   site d'origine — 24 px d'écartement, rayon de 9999 px (une pilule
   quelle que soit la hauteur), remplissage en `em` pour suivre la
   taille du texte.
   --------------------------------------------------------------------- */
.article-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    box-sizing: border-box;
    margin: 0 0 25px;
}

.article-boutons.is-content-justification-left          { justify-content: flex-start; }
.article-boutons.is-content-justification-center        { justify-content: center; }
.article-boutons.is-content-justification-right         { justify-content: flex-end; }
.article-boutons.is-content-justification-space-between { justify-content: space-between; }

.article-bouton-boite {
    display: inline-block;
    margin: 0;
    max-width: none;
}

/* Retrancher l'écartement au prorata, sans quoi deux boutons à 50 %
   plus 24 px de `gap` débordent de la colonne. */
.article-bouton-boite.wp-block-button__width-25  { width: calc(25% - 24px * 0.75); }
.article-bouton-boite.wp-block-button__width-50  { width: calc(50% - 24px * 0.5); }
.article-bouton-boite.wp-block-button__width-75  { width: calc(75% - 24px * 0.25); }
.article-bouton-boite.wp-block-button__width-100 { flex-basis: 100%; width: 100%; }

/* `.article-boutons a` rattrape les articles importés avant que le
   nettoyeur ne garde la classe : le lien reste un bouton, à défaut
   d'être de la bonne couleur.

   `:where()` ne compte pas dans la spécificité — c'est la ruse de
   WordPress, et elle est nécessaire ici : sans elle, ce fond gris
   l'emporterait sur `.has-vivid-red-background-color` écrit plus haut
   dans le fichier, et le bouton ne serait jamais rouge. */
.entry-content :where(.article-boutons a, .article-bouton) {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    border: 0;
    border-radius: 9999px;
    background-color: #32373c;
    color: #fff;
    text-align: center;
    text-decoration: none;
    word-break: break-word;
    cursor: pointer;
}

.entry-content :where(.article-boutons a, .article-bouton):hover {
    text-decoration: none;
}

/* Variante « contour » : la couleur passe du fond au trait. */
.entry-content .article-bouton.is-style-outline {
    border: 2px solid;
    padding: 0.667em 1.333em;
    background-color: transparent;
}

.entry-content .article-bouton.is-style-squared { border-radius: 0; }

/* ---------------------------------------------------------------------
   Article mis en avant
   ---------------------------------------------------------------------
   La case « Mettre en avant » du back-office épingle l'article en tête
   de l'accueil. Le liséré et l'étiquette disent au lecteur que cette
   place est un choix de la rédaction, et non l'ordre chronologique.
   Discret par construction : le reste de la carte ne change pas.
   --------------------------------------------------------------------- */
.vn-archive-post.vn-a-la-une .vn-post-wrapper {
    border-left: 3px solid var(--viral-news-template-color, #0a0f39);
}

.vn-etiquette-une {
    display: inline-block;
    margin: 0 0 10px;
    padding: 2px 8px;
    background: var(--viral-news-template-color, #0a0f39);
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Carte d'un article mentionné
   ---------------------------------------------------------------------
   WordPress affichait cette carte dans une iframe bac-à-sable, avec sa
   propre feuille de style — c'est pourquoi elle ne ressemble à rien
   d'autre sur la page : police système sans empattement, gris ardoise,
   fin liséré. Nous la construisons côté serveur, sans iframe, mais nous
   reprenons ses mesures à l'identique (`wp-embed-template.min.css`) :
   25 px de marge intérieure, titre de 22 px en 600, pied en tableau.

   La police est déclarée ici et non héritée : c'est elle qui distingue
   la carte du texte de l'article, resté en Lato.
   --------------------------------------------------------------------- */
.article-mention-carte {
    margin: 0 0 25px;
}

.entry-content .wp-embed {
    padding: 25px;
    border: 1px solid #dcdcde;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    color: #646970;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.entry-content .wp-embed a {
    color: #646970;
    text-decoration: none;
}

.entry-content .wp-embed a:hover {
    text-decoration: underline;
}

.entry-content .wp-embed p {
    margin: 0;
}

.wp-embed-featured-image {
    margin-bottom: 20px;
}

.wp-embed-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    border: none;
}

/* Image presque carrée : WordPress la range à gauche du texte plutôt
   que de lui donner toute la largeur. */
.wp-embed-featured-image.square {
    float: left;
    max-width: 160px;
    margin-right: 20px;
}

.entry-content p.wp-embed-heading {
    margin: 0 0 15px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}

.entry-content .wp-embed-heading a {
    color: #2c3338;
}

.wp-embed-footer {
    display: table;
    width: 100%;
    margin-top: 30px;
}

.wp-embed-site-title,
.wp-embed-meta {
    display: table-cell;
}

.wp-embed-site-title {
    font-weight: 600;
    line-height: 1.78571;
}

.wp-embed-site-title a {
    position: relative;
    display: inline-block;
    padding-left: 35px;
}

.wp-embed-site-icon {
    position: absolute;
    top: 50%;
    left: 0;
    width: 25px;
    height: 25px;
    border: 0;
    transform: translateY(-50%);
}

.wp-embed-meta {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
}

.wp-embed-comments,
.wp-embed-share {
    display: inline;
}

.wp-embed-comments a,
.wp-embed-share a {
    display: inline-block;
    line-height: 1.78571;
}

.wp-embed-comments + .wp-embed-share {
    margin-left: 10px;
}

/* Les deux pictogrammes de WordPress (jeu « dashicons »), repris tels
   quels en image de fond : deux fichiers de moins à charger. */
.ap-icone-commentaires,
.ap-icone-partage {
    position: relative;
    top: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px;
}

.ap-icone-commentaires {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%23646970%27%2F%3E%3C%2Fsvg%3E");
}

.ap-icone-partage {
    top: 8px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%23646970%27%2F%3E%3C%2Fsvg%3E");
}

.entry-content .wp-embed-share a:hover {
    text-decoration: none;
}

/* Le repli, quand l'article cité est introuvable : le marqueur reste
   un lien, sans habillage de carte. */
.entry-content .article-mention {
    margin: 0 0 25px;
}

/* Confirmation discrète après copie de l'adresse. */
.ap-partage-mention {
    position: relative;
}

.ap-partage-mention.ap-partage-copie::after {
    content: "Adresse copiée";
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    padding: 4px 8px;
    border-radius: 3px;
    background: #2c3338;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

/* =====================================================================
   Blocs de contenu
   ---------------------------------------------------------------------
   Titres, listes, citation, séparateur, tableau et code sont déjà servis
   par la typographie de base de site.css, reprise du thème d'origine :
   rien à ajouter pour eux. Ce qui suit couvre les blocs que le thème ne
   connaissait pas, ou que le nettoyeur traduit en classes maison.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tableau
   ---------------------------------------------------------------------
   `table` de site.css donne la largeur et les marges, mais son reset
   `td, th { padding: 0 }` laisse les cellules collées les unes aux
   autres : aucun des 69 articles ne contenait de tableau, la règle qui
   les habille n'avait donc jamais manqué. Elle est reprise ici du
   noyau de WordPress — `border: 1px solid` sur la couleur courante,
   `padding: .5em`, soit les 7 px mesurés sur actupolice.com.

   S'y ajoute le défilement horizontal : un tableau de six colonnes dans
   une colonne de 807 px déborderait sinon la page entière sur
   téléphone.
   --------------------------------------------------------------------- */
.article-tableau {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.entry-content .article-tableau td,
.entry-content .article-tableau th {
    border: 1px solid;
    padding: .5em;
}

/* Rayures et filets ne vont pas ensemble : WordPress efface les seconds
   dès que les premières sont demandées. */
.entry-content .article-tableau.is-style-stripes td,
.entry-content .article-tableau.is-style-stripes th {
    border-color: transparent;
}

.entry-content .article-tableau th {
    background: #f3f4f6;
    font-weight: 700;
    text-align: left;
}

.entry-content .article-tableau caption {
    padding-bottom: 6px;
    color: #6b7280;
    font-size: 13px;
    text-align: left;
}

/* Rayures : sur un tableau de chiffres, l'œil perd sa ligne sans elles. */
.entry-content .article-tableau.is-style-stripes tbody tr:nth-child(odd) {
    background: #fafbfc;
}

/* ---------------------------------------------------------------------
   Colonnes
   ---------------------------------------------------------------------
   Sous 782 px, WordPress empile les colonnes. On reprend ce seuil : la
   colonne d'article vaut 807 px sur ordinateur, deux colonnes y tiennent
   confortablement ; sur téléphone, aucune.
   --------------------------------------------------------------------- */
.article-colonnes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 25px;
}

.article-colonnes.colonnes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-colonnes.colonnes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-colonnes.colonnes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.article-colonne > :last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 782px) {
    .article-colonnes,
    .article-colonnes[class*="colonnes-"] {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------
   Texte et image côte à côte
   --------------------------------------------------------------------- */
.article-media-texte {
    display: grid;
    grid-template-columns: 50% 1fr;
    gap: 24px;
    align-items: center;
    margin: 0 0 25px;
}

.article-media-texte.media-a-droite {
    grid-template-columns: 1fr 50%;
}

/* L'image est le premier enfant dans le balisage ; à droite, c'est la
   grille qui l'envoie en seconde colonne — l'ordre de lecture d'un
   lecteur d'écran reste celui du document. */
.article-media-texte.media-a-droite > .article-media-texte-media {
    grid-column: 2;
    grid-row: 1;
}

.article-media-texte img {
    display: block;
    width: 100%;
    height: auto;
}

.article-media-texte-contenu > :last-child {
    margin-bottom: 0;
}

@media screen and (max-width: 600px) {
    .article-media-texte,
    .article-media-texte.media-a-droite {
        grid-template-columns: 1fr;
    }

    .article-media-texte.media-a-droite > .article-media-texte-media {
        grid-column: 1;
    }
}

/* ---------------------------------------------------------------------
   Accordéon
   ---------------------------------------------------------------------
   `<details>` fait le travail sans une ligne de JavaScript : ouverture,
   fermeture, accessibilité au clavier et recherche dans la page sont
   celles du navigateur.
   --------------------------------------------------------------------- */
.article-accordeon {
    margin: 0 0 25px;
    border: 1px solid #e3e6eb;
    border-radius: 3px;
    background: #fff;
}

.article-accordeon > summary {
    padding: 12px 16px 12px 38px;
    position: relative;
    cursor: pointer;
    font-family: var(--viral-news-header-family, "Nunito Sans"), sans-serif;
    font-weight: 700;
    list-style: none;
}

/* Le triangle par défaut de Safari et de Chrome, remplacé par un chevron
   qui pivote — le seul moyen d'obtenir la même flèche partout. */
.article-accordeon > summary::-webkit-details-marker { display: none; }

.article-accordeon > summary::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid var(--viral-news-template-color, #0a0f39);
    border-bottom: 2px solid var(--viral-news-template-color, #0a0f39);
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.article-accordeon[open] > summary::before {
    margin-top: -2px;
    transform: rotate(45deg);
}

.article-accordeon > summary:hover {
    background: #f7f8fa;
}

.article-accordeon-contenu {
    padding: 4px 16px 14px;
}

.article-accordeon-contenu > :last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------
   Encadré
   ---------------------------------------------------------------------
   Le liséré porte la couleur, pas le fond : un aplat coloré derrière du
   texte de 14 px passe rarement le contraste, et le fond reste lisible
   à l'impression.
   --------------------------------------------------------------------- */
.article-encadre {
    margin: 0 0 25px;
    padding: 16px 20px;
    border-left: 4px solid var(--viral-news-template-color, #0a0f39);
    background: #f5f6f8;
}

.article-encadre > :last-child { margin-bottom: 0; }

.article-encadre.encadre-info      { border-left-color: #0693e3; background: #eef6fc; }
.article-encadre.encadre-attention { border-left-color: #fcb900; background: #fdf8e9; }
.article-encadre.encadre-alerte    { border-left-color: #cf2e2e; background: #fdf0ef; }
.article-encadre.encadre-succes    { border-left-color: #1a7f37; background: #eef7f0; }

/* `.entry-content` en tête : une règle du thème pose 25 px sous chaque
   paragraphe, et un titre d'encadré collé à son texte a besoin de six. */
.entry-content .article-encadre-titre {
    margin: 0 0 6px;
    font-family: var(--viral-news-header-family, "Nunito Sans"), sans-serif;
    font-size: 15px;
    font-weight: 700;
}

/* ---------------------------------------------------------------------
   Groupe
   ---------------------------------------------------------------------
   Chez WordPress, un groupe n'a d'apparence que si on lui en donne une.
   Il ne sert ici qu'à tenir plusieurs blocs ensemble.
   --------------------------------------------------------------------- */
.article-groupe {
    margin: 0 0 25px;
}

.article-groupe > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------
   Vidéo déposée dans la bibliothèque
   ---------------------------------------------------------------------
   À ne pas confondre avec `.article-video`, qui est le cadre 16/9 d'une
   iframe YouTube : lui donner ce cadre à hauteur nulle ferait disparaître
   le lecteur.
   --------------------------------------------------------------------- */
.article-video-fichier {
    margin: 0 0 25px;
}

.article-video-fichier video {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}

/* ---------------------------------------------------------------------
   Notes de bas de page
   ---------------------------------------------------------------------
   Les numéros ne sont pas écrits dans le contenu : ils sont posés à
   l'affichage, en ordre de lecture (voir Service\NotesArticle). Insérer
   une note au milieu d'un article renumérote donc les suivantes toute
   seule — ce que WordPress faisait dans l'éditeur, et que du HTML figé
   ne saurait pas faire.
   --------------------------------------------------------------------- */
.article-note-appel {
    font-size: 0.7em;
    line-height: 0;
    vertical-align: super;
}

.article-note-appel a {
    padding: 0 1px;
    text-decoration: none;
}

.article-notes {
    margin: 2.5em 0 1.5em;
    padding-top: 1.2em;
    border-top: 1px solid #e3e6eb;
    color: #55595f;
    font-size: max(13px, 0.72em);
    line-height: 1.7;
}

.entry-content .article-notes-titre {
    margin: 0 0 8px;
    font-family: var(--viral-news-header-family, "Nunito Sans"), sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.article-notes ol {
    margin: 0 0 0 25px;
}

.article-notes li + li {
    margin-top: 6px;
}

.article-note-retour {
    margin-left: 4px;
    text-decoration: none;
}

/* =====================================================================
   Fil d'Ariane
   ---------------------------------------------------------------------
   Discret par choix : c'est un repère de navigation, pas un titre. Il
   sert autant au lecteur qu'aux moteurs, qui l'affichent sous le titre
   du résultat à la place de l'URL.
   ===================================================================== */

.fil-ariane {
    margin: 0 0 12px;
    font-family: var(--viral-news-header-family, "Nunito Sans"), sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.fil-ariane ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Le séparateur est décoratif : généré en CSS, il n'est pas lu par les
   lecteurs d'écran et ne se retrouve pas dans un copier-coller. */
.fil-ariane li + li::before {
    content: "›";
    margin-right: 6px;
    color: #9aa0b4;
}

.fil-ariane a {
    color: #6b7185;
    text-decoration: none;
}

.fil-ariane a:hover,
.fil-ariane a:focus {
    color: var(--viral-news-template-color, #0a0f39);
    text-decoration: underline;
}

.fil-ariane [aria-current="page"] {
    color: #9aa0b4;
    /* Un titre d'article peut être long : on l'écourte plutôt que de
       laisser le fil passer sur trois lignes. */
    display: inline-block;
    max-width: 22em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* =====================================================================
   « À lire aussi »
   ---------------------------------------------------------------------
   Quatre articles proches en fin de lecture. Grille fluide : quatre
   colonnes en grand écran, deux sur tablette, une sur téléphone, sans
   point de rupture écrit à la main.
   ===================================================================== */

.a-lire-aussi {
    margin: 35px 0 0;
    padding: 25px 0 0;
    border-top: 3px solid var(--viral-news-template-color, #0a0f39);
}

.a-lire-aussi > h2 {
    margin: 0 0 18px;
    font-family: var(--viral-news-header-family, "Nunito Sans"), sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.a-lire-aussi ul {
    display: grid;
    /* 160 px et non 190 : a la largeur de la colonne d'article, quatre
       colonnes tiennent tout juste - et quatre articles sur quatre
       colonnes ne laissent pas d'orphelin sur une seconde ligne. Sur
       telephone la meme regle en donne deux, et 4 se divise aussi
       par 2. */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 22px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.a-lire-aussi li {
    margin: 0;
}

.a-lire-aussi a {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Le rapport 16/10 est réservé AVANT que l'image arrive : la grille ne
   bouge donc pas au chargement, ce que Google mesure sous le nom de
   décalage cumulé de mise en page. */
.a-lire-aussi img,
.a-lire-aussi-sans-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    margin: 0 0 10px;
    background: #eceef4;
    border-radius: 3px;
}

.a-lire-aussi-texte {
    display: block;
}

.a-lire-aussi-titre {
    display: block;
    font-family: var(--viral-news-header-family, "Nunito Sans"), sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.a-lire-aussi a:hover .a-lire-aussi-titre,
.a-lire-aussi a:focus .a-lire-aussi-titre {
    color: var(--viral-news-template-color, #0a0f39);
    text-decoration: underline;
}

.a-lire-aussi time {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #8b90a3;
}

/* ---------------------------------------------------------------------
   Formats d'image dans le corps d'un article
   ---------------------------------------------------------------------
   La vignette occupe une boîte FIXE — 300 × 200 en paysage,
   225 × 300 en portrait — que l'image remplit en se recadrant au
   centre. `object-fit: cover` fait tout le travail : rien n'est
   déformé, et aucun fichier n'a eu à être découpé, ce qui vaut aussi
   pour les images importées de WordPress.

   Les dimensions sont écrites en dur ici ET en attributs width/height
   sur la balise : le navigateur réserve ainsi la place avant même
   d'avoir l'image, et la page ne saute pas.
   --------------------------------------------------------------------- */
.article-image-vignette {
    display: table;
}

.article-image-vignette > a {
    display: block;
}

.article-image-vignette img {
    display: block;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
}

.article-image-vignette.vignette-paysage img {
    width: 300px;
    /* La proportion plutôt qu'une hauteur figée : dans une colonne
       plus étroite que 300 px — un téléphone, la colonne latérale —
       `max-width: 100%` rétrécit la largeur, et une hauteur en dur
       déformerait alors le cadre au lieu de le réduire. */
    aspect-ratio: 3 / 2;
    height: auto;
}

.article-image-vignette.vignette-portrait img {
    width: 225px;
    aspect-ratio: 3 / 4;
    height: auto;
}

.article-image-moyenne img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

/* Une image cliquable doit se voir : le curseur, et un léger
   rapprochement au survol. Rien de plus — la photo reste le sujet. */
.entry-content a.article-image-zoom img {
    cursor: zoom-in;
    transition: filter .15s ease;
}

.entry-content a.article-image-zoom:hover img,
.entry-content a.article-image-zoom:focus-visible img {
    filter: brightness(.92);
}

/* ---------------------------------------------------------------------
   Visionneuse : l'image originale par-dessus la page
   ---------------------------------------------------------------------
   Sans JavaScript, le lien ouvre le fichier dans un onglet — c'est le
   repli, et il suffit. Avec, l'image s'affiche ici, sans quitter
   l'article.
   --------------------------------------------------------------------- */
.ap-visionneuse {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Les côtés laissent la place aux flèches, le bas à la légende
       et au compteur : l'image ne passe jamais dessous. */
    padding: 60px 84px 52px;
    background: rgba(10, 15, 57, .92);
}

.ap-visionneuse[hidden] {
    display: none;
}

.ap-visionneuse figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

.ap-visionneuse img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    /* 82vh laisse la place à la légende sous l'image. */
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
}

.ap-visionneuse figcaption {
    margin-top: 12px;
    color: #e7e9f2;
    font-size: 14px;
    line-height: 1.4;
}

.ap-visionneuse-fermer {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.ap-visionneuse-fermer:hover,
.ap-visionneuse-fermer:focus-visible {
    background: rgba(255, 255, 255, .24);
}

@media screen and (max-width: 600px) {
    /* Trop étroit pour dégager les côtés : les flèches passent
       par-dessus l'image, à demi transparentes. */
    .ap-visionneuse {
        padding: 56px 12px 48px;
    }

    .ap-visionneuse img {
        max-height: 74vh;
    }
}

/* ---------------------------------------------------------------------
   Galerie : des cases de taille identique
   ---------------------------------------------------------------------
   Une galerie mêle des portraits et des paysages. Laissées à leur
   proportion, les cases d'une même rangée n'ont ni la même hauteur ni
   la même largeur, et la grille se déforme dès la première photo
   verticale.

   Chaque case reçoit donc une proportion FIXE, la même pour toute la
   galerie, que l'image remplit en se recadrant au centre. La grille
   fixe la largeur, `aspect-ratio` en déduit la hauteur : toutes les
   cases sont alors identiques au pixel, quelle que soit l'orientation
   des fichiers.

   Le 3 / 2 s'applique SANS classe : les galeries importées de
   WordPress s'harmonisent elles aussi, sans avoir à les reprendre une
   par une.
   --------------------------------------------------------------------- */
.article-galerie figure {
    /* La case ne se laisse pas étirer par son image. */
    min-width: 0;
}

.article-galerie img,
.article-galerie.galerie-3-2 img {
    aspect-ratio: 3 / 2;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

.article-galerie.galerie-1-1 img {
    aspect-ratio: 1 / 1;
}

.article-galerie.galerie-2-3 img {
    aspect-ratio: 2 / 3;
}

.article-galerie a {
    display: block;
}

/* ---------------------------------------------------------------------
   Visionneuse : navigation d'une image à l'autre
   --------------------------------------------------------------------- */
.ap-visionneuse-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.ap-visionneuse-fleche:hover,
.ap-visionneuse-fleche:focus-visible {
    background: rgba(255, 255, 255, .26);
}

.ap-visionneuse-precedent { left: 12px; }
.ap-visionneuse-suivant   { right: 12px; }

.ap-visionneuse-compteur {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    color: #c9cee4;
    font-size: 13px;
    text-align: center;
    letter-spacing: .04em;
}

@media screen and (max-width: 600px) {
    .ap-visionneuse-fleche {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    .ap-visionneuse-precedent { left: 4px; }
    .ap-visionneuse-suivant   { right: 4px; }
}