/* =====================================================================
   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;
}