@charset "UTF-8";

/* ─────────────────────────────────────────────────────────────────────────
   POLICE INTER, auto-hébergée (aucun appel Google Fonts, aucun cookie tiers).
   Variable font poids 100→900. Fichier local déposé en FTP :
   themes/veillernq-facile-child/fonts/InterVariable.woff2
   ───────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/InterVariable.woff2') format('woff2');
}

/**
 * veillernq-header-footer.css
 * Styles Header & Footer VeilleRNQ-Facile.fr ? Inspir? EDOF Mon Compte Formation
 *
 * Police : Inter (Google Fonts) ? fallback system-ui
 * Palette VeilleRNQ-Facile :
 *   Bleu marine  : #223C8F
 *   Bleu clair   : #3A57C7
 *   Rouge         : #E1000F
 *   Vert          : #18753C
 *   Gris clair    : #F5F5FE
 *   Gris bordure  : #DDDDDD
 *   Texte fonc?   : #1E1E1E
 *
 * @package    VeilleRNQ_Facile
 * @since      1.0.0
 * @copyright  2026 12H CONSULTING by PORTAGE D'OC ? SIRET 79919884100030
 */

/* ?????????????????????????????????????????????????????????????????????????
   RESET & VARIABLES
????????????????????????????????????????????????????????????????????????? */

:root {
    --bpf-blue:        #223C8F;
    --bpf-blue-light:  #3A57C7;
    --bpf-blue-bg:     #F5F5FE;
    --bpf-red:         #E1000F;
    --bpf-green:       #18753C;
    --bpf-grey:        #666666;
    --bpf-grey-light:  #EEEEEE;
    --bpf-grey-border: #DDDDDD;
    --bpf-text:        #1E1E1E;
    --bpf-white:       #FFFFFF;
    --bpf-font:        'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --bpf-max-w:       1200px;
    --bpf-header-h:    120px;   /* Hauteur header principal (logo 100px + ~10px de respiration haut/bas) */
    --bpf-nav-h:       48px;   /* Hauteur nav sous-header */
}

/* ?????????????????????????????????????????????????????????????????????????
   SUPPRESSION ESPACE BLANC AU-DESSUS DE LA BARRE ADMIN WORDPRESS
????????????????????????????????????????????????????????????????????????? */

/* L'espace au-dessus de la barre admin noire vient du margin-top Astra sur body */
html { margin-top: 0 !important; }
body.admin-bar { margin-top: 0 !important; }

/* Repositionne la barre admin coll?e en haut */
#wpadminbar {
    position: fixed !important;
    top: 0 !important;
}

/* Le header BPF se place juste sous la barre admin */
body.admin-bar #bpf-site-header {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar #bpf-site-header {
        top: 46px !important;
    }
}

/* ?????????????????????????????????????????????????????????????????????????
   BODY ? Police Inter globale + r?servation espace header sticky
????????????????????????????????????????????????????????????????????????? */

/* Police globale Inter ? exclut les ic?nes Font Awesome (fa-*, fas, far, fab) */
body, body *:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab) {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
}

body {
    color: var(--bpf-text) !important;
    margin: 0 !important;
}

/* ?????????????????????????????????????????????????????????????????????????
   HEADER WRAPPER
????????????????????????????????????????????????????????????????????????? */

#bpf-site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: var(--bpf-white) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
    font-family: var(--bpf-font) !important;
}

/* Espace entre le bas du header sticky et le contenu de page */
#content.site-content,
.site-content,
#primary.content-area {
    padding-top: 4px !important;
}
/* Ciblage sp?cifique pour overrider veillernq-title-control.php */
.entry-content,
.bpf-page,
#content > .ast-container,
#content > #primary > .entry-content {
    padding-top: 4px !important;
}

/* ?????????????????????????????????????????????????????????????????????????
   BARRE ACCESSIBILIT? (top)
????????????????????????????????????????????????????????????????????????? */

.bpf-topbar {
    display: none !important;
    padding: 0 !important;
}

.bpf-topbar__inner {
    max-width: var(--bpf-max-w) !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    height: 30px !important;
}

.bpf-topbar__link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    color: var(--bpf-blue) !important;
    text-decoration: none !important;
    font-family: var(--bpf-font) !important;
    transition: opacity 0.15s ease !important;
}
.bpf-topbar__link:hover {
    opacity: 0.75 !important;
    text-decoration: underline !important;
}
.bpf-icon-access { flex-shrink: 0 !important; }

/* ?????????????????????????????????????????????????????????????????????????
   HEADER PRINCIPAL
????????????????????????????????????????????????????????????????????????? */

.bpf-header__main {
    background: var(--bpf-white) !important;
    border-bottom: none !important;
}

.bpf-header__inner {
    max-width: var(--bpf-max-w) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    height: var(--bpf-header-h) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 0 !important;
}

.bpf-header__brand {
    display: flex !important;
    align-items: center !important;
    padding: 0 24px !important;
    flex: 1 !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
}

/* Ancien bloc-marque État (.bpf-header__marianne / .bpf-header__rf-text « République
   française ») SUPPRIMÉ, conformité graphique. Le logo vivant = .bpf-header__logo-*. */

/* Masquer s?parateur et tagline (logo seul en header) */
.bpf-header__sep,
.bpf-header__tagline { display: none !important; }

.bpf-header__logo-link { padding-left: 0 !important; }
.bpf-header__sep {
    width: 1px !important;
    height: 52px !important;
    background: var(--bpf-grey-border) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Logo VeilleRNQ-Facile */
.bpf-header__logo-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    padding: 0 0 0 16px !important;
    transition: opacity 0.15s ease !important;
}
.bpf-header__logo-link:hover { opacity: 0.85 !important; }

.bpf-header__logo-img {
    height: 100px !important;
    width: auto !important;
    max-width: 480px !important;   /* logo 1080x233 @100px ≈ 465px de large → 480 évite le rognage */
    object-fit: contain !important;
}

/* Fallback texte logo */
.bpf-header__logo-text {
    display: inline-block !important;
    font-family: var(--bpf-font) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
}
.bpf-header__logo-bpf    { color: var(--bpf-blue) !important; }
.bpf-header__logo-facile { color: var(--bpf-blue-light) !important; }

/* Tagline */
.bpf-header__tagline {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--bpf-grey) !important;
    line-height: 1.4 !important;
    font-family: var(--bpf-font) !important;
    border-left: 2px solid var(--bpf-grey-border) !important;
    padding-left: 12px !important;
}

/* ?? Zone actions droite ?? */
.bpf-header__actions {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    height: var(--bpf-header-h) !important;
    margin-left: auto !important;
    padding-top: 0 !important;
}

.bpf-header__action-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    gap: 7px !important;
    width: 120px !important;
    min-width: 0 !important;
    flex: 0 0 120px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    text-decoration: none !important;
    color: var(--bpf-blue) !important;
    font-family: var(--bpf-font) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border: none !important;
    border-left: 1px solid var(--bpf-grey-border) !important;
    border-radius: 0 !important;
    transition: background 0.2s ease !important;
    cursor: pointer !important;
    background: transparent !important;
    align-self: stretch !important;
    position: relative !important;
}
.bpf-header__action-btn:hover {
    background: var(--bpf-blue-bg) !important;
    text-decoration: none !important;
}

/* ?? Cercle ic?ne ? design rond avec d?grad? et ombre ?? */
.bpf-action-icon {
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(145deg, #172A66 0%, #223C8F 60%, #172A66 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(34,60,143,0.28), 0 1px 2px rgba(0,0,0,0.10) !important;
    transition: box-shadow 0.2s ease, transform 0.15s ease !important;
}
.bpf-header__action-btn:hover .bpf-action-icon {
    box-shadow: 0 4px 14px rgba(34,60,143,0.38), 0 2px 4px rgba(0,0,0,0.12) !important;
    transform: translateY(-1px) !important;
}
.bpf-action-icon svg {
    color: #fff !important;
    fill: #fff !important;
}

/* PICTOS AIDE ET MESSAGES A LA MEME TAILLE (26x26).
   Sans cette regle, chaque picto garde les width/height de son propre attribut SVG :
   22 pour Aide (markup de ce fichier), 18 pour la cloche (markup du PLUGIN,
   class-vrnq-messages.php::render_bell) - soit deux icones visiblement inegales
   dans deux ronds identiques. On fixe la taille en CSS plutot que dans les deux
   markups : un seul endroit a lire, et la cloche n'oblige pas a redeployer le plugin.
   PORTEE VOLONTAIREMENT ETROITE, elle n'attrape ni l'avatar de « Mon compte »
   (silhouette de repli en 22, qui doit rester dans son rond) ni la deconnexion
   (15px gris, action secondaire assumee). */
.bpf-action-icon--aide svg,
.vrnq-cloche .bpf-action-icon svg {
    width: 26px !important;
    height: 26px !important;
    color: #fff !important;
    fill: #fff !important;
}

/* Avatar Mon compte (BUG 2), scopé --avatar, n'affecte pas les autres icônes SVG */
.bpf-action-icon--avatar { overflow: hidden !important; }
.bpf-action-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block;
}

/* ?? Label sous l'ic?ne ?? */
.bpf-action-label {
    color: var(--bpf-blue) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    position: relative !important;   /* V1 : titre EN FLUX (3 titres alignés) + ancre pour l'username absolu */
    width: 100% !important;          /* pleine largeur bouton → username centré sur tout le bloc */
}
.bpf-action-username {
    font-size: 10.5px !important;
    font-weight: 400 !important;
    color: #666 !important;
    display: block !important;
    letter-spacing: 0 !important;
    position: absolute !important;   /* V1 : username SEUL hors flux → déborde sous le titre sans le pousser ni fausser le centrage */
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* ?? Bouton d?connexion : discret ? cercle outline gris, label gris ?? */
.bpf-header__action-btn--logout {
    min-width: 62px !important;
    padding-top: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: 0 !important;
    border-left: 1px solid var(--bpf-grey-border) !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: stretch !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.bpf-header__action-btn--logout .bpf-action-icon {
    width: 34px !important;
    height: 34px !important;
    background: transparent !important;
    border: 1.5px solid #ccc !important;
    box-shadow: none !important;
}
.bpf-header__action-btn--logout .bpf-action-icon svg {
    color: #aaa !important;
    fill: #aaa !important;
    width: 15px !important;
    height: 15px !important;
}
.bpf-header__action-btn--logout .bpf-action-label {
    color: #aaa !important;
    font-weight: 400 !important;
    font-size: 11px !important;
}
.bpf-header__action-btn--logout > svg {
    display: none !important;
}
.bpf-header__action-btn--logout:hover {
    background: rgba(34,60,143,0.05) !important;
}
.bpf-header__action-btn--logout:hover .bpf-action-icon {
    border-color: #223C8F !important;
    transform: none !important;
    box-shadow: none !important;
}
.bpf-header__action-btn--logout:hover .bpf-action-icon svg {
    color: #223C8F !important;
    fill: #223C8F !important;
}
.bpf-header__action-btn--logout:hover .bpf-action-label {
    color: #223C8F !important;
}

/* S?parateur entre boutons */
.bpf-header__action-sep {
    width: 1px !important;
    align-self: stretch !important;
    background: var(--bpf-grey-border) !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* ?????????????????????????????????????????????????????????????????????????
   NAVIGATION PRINCIPALE (sous-header)
????????????????????????????????????????????????????????????????????????? */

.bpf-header__nav {
    background: var(--bpf-white) !important;
    border-bottom: none !important;
    margin-top: 16px !important;
}

.bpf-header__nav-inner {
    max-width: var(--bpf-max-w) !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    height: var(--bpf-nav-h) !important;
    gap: 0 !important;
}

.bpf-nav__list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    height: 100% !important;
}

.bpf-nav__item {
    display: flex !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bpf-nav__link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--bpf-text) !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
    font-family: var(--bpf-font) !important;
    white-space: nowrap !important;
    margin-bottom: -1px !important; /* Chevauche la bordure du container */
}
.bpf-nav__link:hover {
    color: var(--bpf-blue) !important;
    border-bottom-color: var(--bpf-blue-light) !important;
    text-decoration: none !important;
    background: var(--bpf-blue-bg) !important;
}
.bpf-nav__link--active {
    color: var(--bpf-blue) !important;
    font-weight: 700 !important;
    border-bottom-color: var(--bpf-blue) !important;
}

/* ── ENTREE MISE EN EVIDENCE (« Consulter ma veille ») ─────────────────────
   Le geste central du produit ne doit pas peser le meme poids visuel que
   « Aide ». La mise en evidence reste SOBRE : la couleur de marque et la
   graisse, pas un bouton plein. Un bouton dans une barre d'onglets ferait
   lire l'entree comme une action exceptionnelle alors que c'est la
   destination normale, et ecraserait l'etat actif juste a cote.
   L'etat --active garde la priorite : quand on EST sur la page, c'est lui
   qui doit se voir, pas l'invitation a y aller (regle placee apres, et les
   deux classes ne portent que des proprietes compatibles). */
.bpf-nav__link--accent {
    color: var(--bpf-blue) !important;
    font-weight: 700 !important;
}
.bpf-nav__link--accent .bpf-nav__icon {
    opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   ICÔNES INLINE DANS LES MENUS (header sub-nav + footer legal links)
───────────────────────────────────────────────────────────────────────── */
.bpf-nav__icon {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
    line-height: 0 !important;
    opacity: 0.85 !important;
    transition: opacity 0.15s ease !important;
}
.bpf-nav__icon svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}
.bpf-nav__link:hover .bpf-nav__icon,
.bpf-nav__link--active .bpf-nav__icon {
    opacity: 1 !important;
}
.bpf-nav__label {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Footer : icônes plus petites pour rester discrètes en bas de page */
.bpf-footer__legal-links a .bpf-nav__icon svg {
    width: 14px !important;
    height: 14px !important;
}
.bpf-footer__legal-links a .bpf-nav__icon {
    margin-right: 5px !important;
    opacity: 0.7 !important;
}
.bpf-footer__legal-links a:hover .bpf-nav__icon {
    opacity: 1 !important;
}

/* Burger mobile (cach? par d?faut) */
.bpf-nav-burger {
    display: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin-left: auto !important;
}
.bpf-nav-burger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: var(--bpf-blue) !important;
    border-radius: 2px !important;
    transition: all 0.2s ease !important;
}

/* Bannière deadline BPF (30 avril) + bloc logo Qualiopi : retirés pour VeilleRNQ
   (veille continue, sans date butoir ; aucune mention/logo Qualiopi). */

/* ?????????????????????????????????????????????????????????????????????????
   FOOTER ? BARRE HAUTE (liens l?gaux centr?s)
????????????????????????????????????????????????????????????????????????? */

#bpf-site-footer {
    background: var(--bpf-white) !important;
    border-top: 2px solid var(--bpf-grey-border) !important;
    font-family: var(--bpf-font) !important;
    margin-top: 48px !important;
}

.bpf-footer__top {
    border-bottom: 1px solid var(--bpf-grey-border) !important;
    padding: 0 !important;
}
.bpf-footer__top-inner {
    max-width: var(--bpf-max-w) !important;
    margin: 0 auto !important;
    padding: 14px 24px !important;
}

.bpf-footer__legal-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
}
.bpf-footer__legal-links li {
    margin: 0 !important;
    padding: 0 !important;
}
.bpf-footer__legal-links li + li::before {
    content: '|' !important;
    margin: 0 14px !important;
    color: #D1D5DB !important;
    font-size: 13px !important;
    font-weight: 300 !important;
    user-select: none !important;
}
.bpf-footer__legal-links a {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #4B5563 !important;
    text-decoration: none !important;
    font-family: var(--bpf-font) !important;
    transition: color 0.15s !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}
.bpf-footer__legal-links a:hover {
    color: var(--bpf-blue) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    opacity: 1 !important;
    background: transparent !important;
    border-bottom: 0 !important;
    border-bottom-color: transparent !important;
}
.bpf-footer__legal-links a .bpf-nav__label {
    font-weight: 400 !important;
}
.bpf-footer__legal-links .bpf-nav__link,
.bpf-footer__legal-links .bpf-nav__link--active {
    background: transparent !important;
    border-bottom: 0 !important;
    border-bottom-color: transparent !important;
}
.bpf-footer__legal-links .bpf-nav__link--active {
    color: var(--bpf-blue) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
.bpf-footer__legal-links .bpf-nav__link:hover {
    background: transparent !important;
    border-bottom: 0 !important;
    border-bottom-color: transparent !important;
}

/* ?????????????????????????????????????????????????????????????????????????
   FOOTER ? BLOC PRINCIPAL (3 colonnes)
????????????????????????????????????????????????????????????????????????? */

.bpf-footer__main {
    background: #F8F8FF !important;
    border-bottom: 1px solid var(--bpf-grey-border) !important;
}
.bpf-footer__main-inner {
    max-width: var(--bpf-max-w) !important;
    margin: 0 auto !important;
    padding: 40px 24px !important;
    display: grid !important;
    grid-template-columns: 2fr 1fr 1.5fr !important;
    gap: 40px !important;
    align-items: start !important;
}

.bpf-footer__col { }
.bpf-footer__col-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--bpf-blue) !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    font-family: var(--bpf-font) !important;
}

/* Logo footer */
.bpf-footer__logo-img {
    height: 70px !important;
    width: auto !important;
    max-width: unset !important;
    object-fit: contain !important;
    margin-bottom: 12px !important;
    display: block !important;
}

/* Logo footer cliquable, destination conditionnelle (accueil ou tableau de bord) */
.bpf-footer__logo-link {
    display: inline-block !important;
    text-decoration: none !important;
    border: 0 !important;
    outline: 0 !important;
    transition: opacity 0.15s ease !important;
}
.bpf-footer__logo-link:hover,
.bpf-footer__logo-link:focus-visible {
    opacity: 0.85 !important;
    text-decoration: none !important;
}
.bpf-footer__logo-link:focus-visible {
    outline: 2px solid var(--bpf-blue, #223C8F) !important;
    outline-offset: 4px !important;
    border-radius: 4px !important;
}

/* Colonne RF + description */
.bpf-footer__rf {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}
.bpf-footer__rf-text {
    font-size: 11px !important;
    line-height: 1.5 !important;
    color: var(--bpf-text) !important;
    font-family: var(--bpf-font) !important;
}
.bpf-footer__rf-text strong { font-weight: 700 !important; font-size: 11.5px !important; }
.bpf-footer__rf-text em { font-style: italic !important; opacity: 0.7 !important; font-size: 10.5px !important; }

.bpf-footer__desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--bpf-text) !important;
    margin: 0 0 10px !important;
    font-family: var(--bpf-font) !important;
}
.bpf-footer__desc--ref {
    font-size: 12px !important;
    color: var(--bpf-grey) !important;
    border-left: 3px solid var(--bpf-grey-border) !important;
    padding-left: 10px !important;
}
.bpf-footer__desc--disclaimer {
    font-size: 11.5px !important;
    color: var(--bpf-grey) !important;
    border-left: 3px solid #E1000F33 !important;
    padding-left: 10px !important;
    margin-top: 10px !important;
    line-height: 1.55 !important;
}
.bpf-footer__desc--disclaimer a {
    color: var(--bpf-blue) !important;
    text-decoration: underline !important;
}
.bpf-footer__desc--update {
    font-size: 11px !important;
    color: #AAA !important;
    margin-top: 8px !important;
    font-style: italic !important;
}
.bpf-footer__desc strong { color: var(--bpf-blue) !important; }

/* Réseaux sociaux : icônes en SVG inline, couleur héritée par currentColor, donc jamais
   de couleur de marque tierce imposée dans le pied de page. */
/* Intitule du bloc, meme style que « References » et « Sources officielles ».
   La marge haute genereuse detache visiblement les reseaux de la liste de liens
   qui les precede : sans elle, les icones se lisaient comme une entree de plus. */
.bpf-footer__social-title {
    margin-top: 34px !important;
}
.bpf-footer__social {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
}
.bpf-footer__social li { margin: 0 !important; }
.bpf-footer__social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 10px !important;
    border: 1px solid var(--bpf-grey-border) !important;
    color: var(--bpf-blue) !important;
    background: #FFFFFF !important;
    text-decoration: none !important;
    transition: color .15s, border-color .15s, background .15s !important;
}
.bpf-footer__social-link:hover,
.bpf-footer__social-link:focus-visible {
    color: #FFFFFF !important;
    background: var(--bpf-blue) !important;
    border-color: var(--bpf-blue) !important;
}
/* Cible de clic conforme aux 24 px recommandés, sans grossir le carré visible. */
.bpf-footer__social-svg { display: block !important; width: 18px !important; height: 18px !important; }

/* Liens gouvernementaux */
.bpf-footer__gov-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.bpf-footer__gov-list li {
    margin-bottom: 6px !important;
    padding: 0 !important;
}
.bpf-footer__gov-list a {
    font-size: 13px !important;
    color: var(--bpf-blue) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: var(--bpf-font) !important;
}
.bpf-footer__gov-list a:hover { text-decoration: underline !important; }
.bpf-ext-icon { opacity: 0.6 !important; flex-shrink: 0 !important; }

/* Liste r?glementaire */
.bpf-footer__reg-list {
    list-style: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}
.bpf-footer__reg-list li {
    font-size: 11.5px !important;   /* léger -1px : évite que "...23 à 25" déborde sur 2 lignes */
    color: var(--bpf-grey) !important;
    padding: 3px 0 3px 14px !important;
    position: relative !important;
    line-height: 1.4 !important;
    font-family: var(--bpf-font) !important;
}
.bpf-footer__reg-list li::before {
    content: '>' !important;
    position: absolute !important;
    left: 0 !important;
    color: #223C8F !important;
    font-weight: 700 !important;
}
.bpf-footer__reg-list a {
    color: var(--bpf-text) !important;
    text-decoration: none !important;
    font-size: 11.5px !important;   /* aligné sur le li ci-dessus, tient sur une ligne */
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    font-family: var(--bpf-font) !important;
}
.bpf-footer__reg-list a:hover {
    color: var(--bpf-blue) !important;
    text-decoration: underline !important;
}

/* ?????????????????????????????????????????????????????????????????????????
   FOOTER ? BARRE BASSE (mentions l?gales + copyright)
????????????????????????????????????????????????????????????????????????? */

.bpf-footer__bottom {
    /* Fond aligné sur le navy foncé du logo RNQ (--vrnq-blue-dark #172A66).
       Contraste texte blanc sur #172A66 ≈ 13:1 → AAA (bien au-dessus de AA). */
    background: #172A66 !important;
    color: rgba(255,255,255,0.85) !important;
}
.bpf-footer__bottom-inner {
    max-width: var(--bpf-max-w) !important;
    margin: 0 auto !important;
    padding: 10px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

.bpf-footer__bottom-links {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0 !important;
    align-items: center !important;
}
.bpf-footer__bottom-links li { margin: 0 !important; padding: 0 !important; }
.bpf-footer__bottom-links li + li::before {
    content: '|' !important;
    margin: 0 10px !important;
    opacity: 0.35 !important;
}
.bpf-footer__bottom-links a {
    font-size: 12px !important;
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none !important;
    font-family: var(--bpf-font) !important;
    transition: opacity 0.15s !important;
}
.bpf-footer__bottom-links a:hover {
    color: var(--bpf-white) !important;
    text-decoration: underline !important;
}

.bpf-footer__copy {
    font-size: 11.5px !important;
    opacity: 0.55 !important;
    margin: 0 !important;
    font-family: var(--bpf-font) !important;
    text-align: center !important;
}

/* ?????????????????????????????????????????????????????????????????????????
   RESPONSIVE ? TABLETTE (? 900px)
????????????????????????????????????????????????????????????????????????? */

@media (max-width: 900px) {

    .bpf-footer__main-inner {
        grid-template-columns: 1fr 1fr !important;
    }
    .bpf-footer__col--brand {
        grid-column: 1 / -1 !important;
    }

    .bpf-header__tagline {
        display: none !important;
    }
}

/* ?????????????????????????????????????????????????????????????????????????
   RESPONSIVE ? MOBILE (? 640px)
????????????????????????????????????????????????????????????????????????? */

@media (max-width: 640px) {

    /* Header */
    /* FIX 2 : la hauteur du header ne doit pas dependre de la largeur. Sans `nowrap`, le contenu
       de la barre passe a la ligne sous une certaine largeur et le header grandit ; la tagline,
       elle, n a plus la place d etre lue et ne fait que pousser. On fige donc la rangee. */
    .bpf-header__inner {
        flex-wrap: nowrap !important;
        padding: 0 16px !important;
        height: 76px !important;
    }
    :root { --bpf-header-h: 76px; }

    .bpf-header__logo-link {
        padding-left: 10px !important;
        gap: 8px !important;
    }
    /* LOGO AGRANDI DE 36 A 52px. Le lockup complet (carre RNQ + nom + baseline) mesure
       240px de large a cette hauteur : illisible a 36, il se lit a 52.
       LA NETTETE EST ACQUISE, ET MESUREE : l'attribut sizes du logo vaut 100vw, le
       navigateur retient donc la variante 768w pour un affichage de 240px de large.
       A 52px de haut il reste 3,2x la densite necessaire ; aucun sizes a reecrire. */
    /* PLANCHER DE SECURITE SOUS 332px. A 52px de haut le lockup mesure 239,5px ; la
       rangee reserve 50px a gauche (16 du conteneur + 24 de la zone marque + 10 du
       lien), 44px pour le burger et 10px a droite, plus 12px d ecart : 116px au total.
       En dessous de 356px il ne resterait plus assez de place et les deux se
       toucheraient. La borne fait alors retrecir le logo proportionnellement
       (object-fit: contain, herite de la regle de base) au lieu de le laisser mordre
       sur le burger. Au-dessus, elle ne mord jamais : a 360px elle autorise 244px pour
       un logo qui en demande 239,5. */
    .bpf-header__logo-img { height: 52px !important; max-width: calc(100vw - 116px) !important; }
    .bpf-header__logo-text { font-size: 22px !important; }

    /* Actions : masquer le label, garder ic?ne */
    .bpf-action-label { display: none !important; }
    .bpf-header__action-btn {
        min-width: 44px !important;
        padding: 0 10px !important;
    }

    /* Nav burger */
    .bpf-nav-burger { display: flex !important; }

    /* CIBLE TACTILE DE 44px. Le bouton mesurait 38x32 : sous le plancher recommande,
       et c'est la SEULE commande du header en mobile une fois la rangee compactee.
       Les trois barres gardent leur taille, c'est la zone cliquable qui grandit. */
    .bpf-nav-burger {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* HEADER COMPACT « LOGO + BURGER », VISITEUR NON CONNECTE
       DEUX RANGEES DEVIENNENT UNE. Le burger vivait dans une bande de 48px sous le
       logo : la marge negative remonte cette bande DANS la rangee du logo, sans
       toucher au DOM ni au JavaScript du menu. Le panneau deroulant continue de
       s'ancrer sur top:100% de cette meme bande, qui se termine desormais au bas du
       header : il s'ouvre donc exactement sous lui, comme avant.
       Le fond de la bande passe en transparent, sans quoi son blanc, peint apres
       celui du header, recouvrirait le logo.

       LES DEUX BOUTONS D'ACTION SONT MASQUES, et ce n'est pas une perte : mesure a
       375px, « Se connecter » commencait a x=361 pour 120px de large, soit 106px
       HORS DE L'ECRAN. Il etait deja inatteignable. Ses deux libelles (« Aide »,
       « Se connecter ») figurent dans le menu burger, verifie a l'ecran.

       RESERVE AU VISITEUR ANONYME, DELIBEREMENT. Pour un utilisateur connecte, les
       memes boutons portent « Se deconnecter », qui NE FIGURE PAS dans le menu
       burger (veillernq_get_main_menu_items, branche connectee : veille / compte /
       aide). Les masquer aurait supprime la seule sortie de session accessible en
       mobile. La rangee reste donc a deux etages pour lui, comme aujourd'hui. */
    body:not(.logged-in) .bpf-header__actions { display: none !important; }
    body:not(.logged-in) .bpf-header__nav {
        margin-top: calc(0px - var(--bpf-nav-h)) !important;
        background: transparent !important;
    }
    body:not(.logged-in) .bpf-header__nav-inner { padding: 0 10px 0 16px !important; }
    .bpf-header__nav-inner { padding: 0 16px !important; }
    .bpf-header__tagline, .bpf-header__sep { display: none !important; }

    /* FIX 1 : le panneau s ancre au BAS REEL de la rangee de navigation, pas a une constante.
       La valeur precedente, calc(60px + 30px + 48px) = 138px, supposait une hauteur de header
       figee. Des que le header grandit (contenu qui passe a la ligne en tres etroit), le panneau
       restait a 138px et se desalignait : il chevauchait le contenu au lieu de se poser sous le
       header. `top:100%` sur un parent rendu `relative` suit la hauteur reelle, quelle qu elle
       soit, sans aucune mesure JavaScript a maintenir. */
    .bpf-header__nav { position: relative !important; }

    .bpf-nav__list {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        /* FIX 3 : ANNULE le `height:100%` de la regle de bureau (ligne ~426). En absolu dans une
           rangee de 48px, cette hauteur limitait le FOND du panneau a 48px pendant que ses cinq
           entrees, empilees en colonne, debordaient dessous : elles s affichaient donc sans fond,
           par dessus la page. C est la cause de l effet de transparence, distincte du mauvais
           ancrage vertical. */
        height: auto !important;
        left: 0 !important;
        right: 0 !important;
        background: var(--bpf-white) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
        flex-direction: column !important;
        padding: 8px 0 !important;
        z-index: 10000 !important;
        border-top: 2px solid var(--bpf-blue) !important;
    }
    .bpf-nav__list.bpf-nav--open {
        display: flex !important;
    }
    .bpf-nav__link {
        padding: 12px 24px !important;
        border-bottom: none !important;
        border-left: 3px solid transparent !important;
        width: 100% !important;
    }
    .bpf-nav__link--active {
        border-left-color: var(--bpf-blue) !important;
        border-bottom: none !important;
        background: var(--bpf-blue-bg) !important;
    }
    .bpf-nav__link:hover { border-bottom: none !important; }

    /* Footer */
    .bpf-footer__main-inner {
        grid-template-columns: 1fr !important;
        padding: 24px 16px !important;
        gap: 24px !important;
    }
    .bpf-footer__col--brand { grid-column: auto !important; }

    /* MEME LOGO QUE LE HEADER (meme custom_logo, verifie a l'ecran : les deux
       chargent le meme fichier), a la meme echelle mobile. Il valait 70px, soit plus
       haut dans le pied de page que dans l'en-tete. */
    .bpf-footer__logo-img { height: 52px !important; margin-bottom: 14px !important; }

    /* Le pied de page replie ses colonnes : ce bouton est le seul geste qui y reste
       offert. Or de la charte, encre navy, pleine largeur, 48px de haut. */
    .bpf-footer__cta {
        display: block !important;
        margin: 18px 0 4px !important;
        padding: 13px 18px !important;
        background: linear-gradient(160deg, #F0B028 0%, #FFCB4A 100%) !important;
        color: #16244F !important;
        font-family: var(--bpf-font) !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        text-align: center !important;
        text-decoration: none !important;
        border-radius: 10px !important;
        min-height: 48px !important;
        line-height: 22px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .12) !important;
    }
    .bpf-footer__cta:hover,
    .bpf-footer__cta:focus-visible { opacity: .9 !important; text-decoration: none !important; }

    /* Accordeon : le titre devient une commande, il en prend la taille et le curseur. */
    .bpf-footer__acc-sum {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        min-height: 48px !important;
        cursor: pointer !important;
        list-style: none !important;
        padding: 4px 0 !important;
        border-bottom: 1px solid var(--bpf-grey-border) !important;
    }
    .bpf-footer__acc-sum::-webkit-details-marker { display: none !important; }
    .bpf-footer__acc-sum .bpf-footer__col-title { margin: 0 !important; }
    .bpf-footer__acc-chev {
        flex: none !important;
        color: var(--bpf-blue) !important;
        transition: transform .18s ease !important;
    }
    .bpf-footer__acc[open] .bpf-footer__acc-chev { transform: rotate(180deg) !important; }
    .bpf-footer__acc[open] .bpf-footer__acc-sum { border-bottom-color: transparent !important; }
    .bpf-footer__acc > ul { padding-top: 10px !important; }

    .bpf-footer__bottom-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 16px !important;
    }
    .bpf-footer__bottom-links {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: flex-start !important;
    }
    .bpf-footer__bottom-links li + li::before { display: none !important; }

    .bpf-footer__top-inner { padding: 12px 16px !important; }
    .bpf-footer__legal-links { justify-content: flex-start !important; gap: 6px 0 !important; }

    .bpf-header__nav-inner { position: relative !important; }
}

/* ?????????????????????????????????????????????????????????????????????????
   ADMIN BAR COMPENSATION
????????????????????????????????????????????????????????????????????????? */

body.admin-bar #bpf-site-header {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar #bpf-site-header {
        top: 46px !important;
    }
}

/* ?????????????????????????????????????????????????????????????????????????
   BOUTON RETOUR EN HAUT
????????????????????????????????????????????????????????????????????????? */

/* Masque le bouton natif Astra/th?me */
.ast-scroll-top,
#scroll-top,
.scroll-to-top,
[class*="back-to-top"]:not(#bpf-back-to-top) { display: none !important; }

#bpf-back-to-top {
    position: fixed !important;
    bottom: 28px !important;
    right: 28px !important;
    z-index: 9990 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: var(--bpf-blue-light) !important;
    color: var(--bpf-white) !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 10px rgba(34,60,143,.30) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) !important;
    transition: opacity .2s, visibility .2s, transform .2s, background .15s, box-shadow .15s !important;
    line-height: 1 !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
#bpf-back-to-top.bpf-btt--visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
#bpf-back-to-top:hover {
    background: #0050A0 !important;
    box-shadow: 0 4px 14px rgba(0,80,160,.35) !important;
}
@media (max-width: 640px) {
    #bpf-back-to-top { bottom: 16px !important; right: 16px !important; }
}

/* Suppression forc?e du bouton scroll-top Astra (bande bleue parasite) */
.ast-scroll-top,
#ast-scroll-top,
.ast-scroll-top-icon,
[class^="ast-scroll"],
[id^="ast-scroll"],
.scroll-to-top,
#back-to-top,
.back-to-top,
[data-scroll-top],
.site-scroll-top { 
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Suppression nucl?aire barre Astra scroll-top */
#ast-scroll-top { display: none !important; width: 0 !important; height: 0 !important; }

/* Ic?ne liens barre basse footer */
.bpf-bbl-icon {
    vertical-align: middle !important;
    margin-left: 4px !important;
    opacity: 0.75 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    pointer-events: none !important;
}
.bpf-footer__bottom-links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
}

.bpf-footer__bottom-links a:hover .bpf-bbl-text {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Liens barre basse ? espacement et soulignement complet */
.bpf-footer__bottom-links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-decoration: none !important;
    cursor: pointer !important;
}
.bpf-footer__bottom-links a:hover {
    text-decoration: underline !important;
    text-decoration-color: rgba(255,255,255,0.85) !important;
    text-underline-offset: 3px !important;
}
.bpf-footer__bottom-links a:hover .bpf-bbl-text {
    text-decoration: none !important;
}
.bpf-bbl-icon {
    opacity: 0.75 !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   MODALE DE CONNEXION : sous-lot A (login seul, sans anti-bot)
   Portée depuis BPF-Facile (style MAF/EFP Connect), épurée des panneaux
   mot-de-passe-oublié/reset et de tout widget reCAPTCHA/robot.
   ═════════════════════════════════════════════════════════════════════════ */
/* ENVELOPPE : PLUS RIEN ICI. Conteneur, voile, carte, en-tete, croix et animation
   d'entree viennent du composant partage `assets/css/vrnq-modal.css`.

   ⚠️ LE VOILE DE CETTE MODALE CHANGE D'ASPECT, et c'est voulu : il passe du fond
   flou propre a cet ecran au voile commun `rgba(10,20,50,.55)`, celui des neuf autres
   modales deja migrees. C'etait le prix de l'unification, et le seul changement
   visuel de cette migration qu'un visiteur puisse remarquer. */
/* Backdrop de modale UNIFORME : source de vérité unique (référence = modale de connexion :
   fond rgba(0,0,30,.65) + flou blur(12px) saturate(.7)). TOUTES les modales du site partagent ce
   backdrop via cette règle (classe .vrnq-modal-overlay + alias des overlays existants). N'affecte
   QUE le backdrop, jamais le layout/positionnement des modales. */
/* `.bpf-lmodal__backdrop` a quitte cette liste avec la migration de la connexion : le
   composant fait du CONTENEUR le voile, il n'y a plus d'element dedie a habiller. */
.vrnq-modal-overlay,
.bpf-cm-overlay-of,
.bpf-modal-overlay,
.bpf-im-overlay,
.vrnq-cgv-ov,
.vrnq-notice-ov,
.bpf-cf-modal-ov,
.bpf-um-modal-bg,
#bpf-purge-ov,
#vrnq-createorg-ov,
#vrnq-archive-ov {
    background: rgba(0,0,30,.65) !important;
    -webkit-backdrop-filter: blur(12px) saturate(.7) !important;
    backdrop-filter: blur(12px) saturate(.7) !important;
}

/* Z-index de modale UNIFORME : même socle que le fond/flou : TOUTES les modales
   passent AU-DESSUS du header sticky (#bpf-site-header, z-index:9999) pour que le
   backdrop couvre le viewport ENTIER (header compris). ⚠️ On cible les CONTENEURS
   d'overlay, jamais un enfant absolu qui ferait office de voile : le monter au-dessus
   de son panneau frère casserait la modale. La connexion, qui servait de référence
   avec son 9999999, est passée sur le composant `.vrnq-modal` et porte désormais le
   z-index 100000 déclaré par celui-ci, lui aussi au-dessus du header.
   Chaque panneau étant ENFANT DOM de son overlay, il peint toujours au-dessus du
   fond/flou : ce z-index n'affecte QUE l'empilement vs header/page, jamais le layout. */
.vrnq-modal-overlay,
.bpf-cm-overlay-of,
.bpf-modal-overlay,
.bpf-im-overlay,
.vrnq-cgv-ov,
.vrnq-notice-ov,
.bpf-cf-modal-ov,
.bpf-um-modal-bg,
#bpf-purge-ov,
#vrnq-createorg-ov,
#vrnq-archive-ov {
    z-index: 9999999 !important;
}

/* Panel principal */
/* CORPS A BORD PERDU. Le composant met 20px de retrait dans son corps ; ici les deux
   colonnes portent DEJA le leur (40px 32px), et le separateur vertical doit courir d'un
   bord a l'autre de la carte. Un retrait de plus l'aurait laisse flotter au milieu.
   `min-height` remplace la hauteur fixe de 560px de l'ancien panneau : la carte du
   composant se dimensionne sur son contenu sous un plafond de 90vh, une hauteur figee
   l'aurait fait deborder des que le bloc d'erreur Google s'affiche. */
.vrnq-modal .bpf-lmodal__body { padding: 0; }
.vrnq-modal .bpf-lmodal__two-col { min-height: 480px; }

/* ── Layout 2 colonnes ── */
.bpf-lmodal__two-col {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    height: 100%;
    min-height: 100%;
}
.bpf-lmodal__col {
    padding: 40px 32px 36px;
    display: flex; flex-direction: column;
}
.bpf-lmodal__col--left {
    background: #F5F5FA;
    border-right: none;
}
/* Le bouton bleu reste collé en bas de la colonne gauche */
.bpf-lmodal__col--left .bpf-lmodal__big-btn {
    margin-top: auto;
}
/* PLANCHER D'ESPACE AU-DESSUS DU BOUTON, pose sur la liste et non sur le bouton.
   `margin-top:auto` cale le bouton en BAS de la colonne, ce qui est le comportement
   voulu quand il reste de la place. Mais des que le contenu remplit la hauteur, cet
   `auto` se resout a zero et le bouton vient toucher le dernier point de la liste.
   Le remplacer par une valeur fixe aurait supprime le calage en bas ; `max()` n'accepte
   pas `auto`. La marge basse de la liste, elle, s'ajoute a l'`auto` sans jamais s'y
   substituer : les marges ne fusionnent pas entre elements flex. L'ecart est donc
   d'au moins 18px, et de davantage quand la colonne respire. Rien d'autre ne bouge. */
.bpf-lmodal__col--left .bpf-lmodal__benefits {
    margin-bottom: 18px;
}
.bpf-lmodal__divider {
    width: 1px; background: linear-gradient(to bottom, transparent 0%, #E0E0EC 15%, #E0E0EC 85%, transparent 100%);
    margin: 0; align-self: stretch;
}
.bpf-lmodal__col--right {
    background: #fff;
    padding-top: 40px;
}

/* Logo modal : réutilise le custom_logo WordPress (cohérence header/footer) */
.bpf-lmodal__logo-img {
    height: 76px;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 0 24px 0;
    align-self: flex-start;
    object-fit: contain;
    object-position: left center;
}

/* Titres + descriptions colonnes */
.bpf-lmodal__col-title {
    font-size: 1rem; font-weight: 700;
    color: #161616; margin: 0 0 14px;
    line-height: 1.35;
}
/* « Je m'identifie avec mon compte VeilleRNQ » sur UNE ligne des que la place existe.
   Le retour a la ligne vient d'un <br> pose dans le balisage : on le neutralise ici
   plutot que de le retirer, pour qu'il reprenne son role sur mobile etroit, ou la
   colonne se retrecit et ou deux lignes valent mieux qu'un debordement.
   La colonne de droite fait environ 385 px de texte utile (panneau de 900 px, grille
   1fr/auto/1fr, 32 px de marge de chaque cote) ; le titre y tient a .95rem. */
@media (min-width: 601px) {
    .bpf-lmodal__col--right .bpf-lmodal__col-title br { display: none; }
    .bpf-lmodal__col--right .bpf-lmodal__col-title {
        font-size: .95rem;
        white-space: nowrap;
    }
}

/* Rappel discret sous le formulaire : « Inscrit avec Google ? ». Un rappel, pas une
   alerte, d'ou le gris et la petite taille. Il est PERMANENT et ne dit rien de
   personne, contrairement a un message d'erreur qui confirmerait l'existence d'un
   compte a une adresse donnee. */
.bpf-lmodal__google-hint {
    margin: 8px 0 0;
    font-size: .74rem;
    line-height: 1.5;
    color: #6B6B80;
    text-align: center;
}
.bpf-lmodal__col-desc {
    font-size: .82rem; color: #555;
    line-height: 1.6; margin: 0 0 10px;
}

/* Liste de bénéfices avec checkmarks de la charte */
.bpf-lmodal__benefits {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bpf-lmodal__benefits li {
    position: relative;
    padding-left: 26px;
    font-size: .82rem;
    line-height: 1.4;
    color: #333;
}
.bpf-lmodal__benefits li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #18753C;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}
.bpf-lmodal__benefits li strong {
    color: inherit;
    font-weight: 700;
}

/* Classe utilitaire gras + navy de la charte */
.bpf-lmodal__highlight {
    color: #223C8F;
    font-weight: 700;
}

/* Grand bouton style EFP Connect (CTA inscription) */
.bpf-lmodal__big-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px 18px;
    border: 2px solid #223C8F;
    border-radius: 2px;
    color: #223C8F !important;
    text-decoration: none !important;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    transition: background .15s, color .15s;
    background: #fff;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 0;
}
.bpf-lmodal__big-btn--filled {
    background: #223C8F !important;
    color: #fff !important;
}
.bpf-lmodal__big-btn--filled:hover {
    background: #172A66 !important;
}
.bpf-lmodal__big-btn:hover:not(.bpf-lmodal__big-btn--filled) {
    background: #223C8F;
    color: #fff !important;
}
.bpf-lmodal__big-btn:hover svg { fill: #fff; }
.bpf-lmodal__big-btn strong {
    font-weight: 700;
    letter-spacing: .03em;
}

/* ── Formulaire WP natif : style MAF (champs soulignés) ── */
#loginform { margin: 0; display: flex; flex-direction: column; flex: 1; }
#loginform p { margin: 0 0 14px; }
#loginform p.submit { margin-top: auto !important; padding-top: 0; margin-bottom: 0 !important; }
.bpf-lmodal__col--right label {
    font-size: .78rem; font-weight: 700; color: #333;
    display: block; margin-bottom: 4px;
}
.bpf-lmodal__col--right input[type="text"],
.bpf-lmodal__col--right input[type="password"] {
    width: 100% !important;
    padding: 8px 0 8px !important;
    border: none !important;
    border-bottom: 2px solid #AAAACC !important;
    border-radius: 0 !important;
    font-size: .9rem !important;
    color: #161616 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    outline: none !important;
    font-family: inherit !important;
    transition: border-color .15s !important;
}
.bpf-lmodal__col--right input[type="text"]:focus,
.bpf-lmodal__col--right input[type="password"]:focus {
    border-bottom-color: #223C8F !important;
}

/* ── Bouton œil afficher/masquer le mot de passe ── */
.bpf-lmodal__pwd-wrap {
    position: relative;
    display: block;
    width: 100%;
}
.bpf-lmodal__pwd-wrap input[type="password"],
.bpf-lmodal__pwd-wrap input[type="text"] {
    padding-right: 32px !important;
}
.bpf-lmodal__pwd-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    color: #929292;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s;
    box-shadow: none !important;
}
.bpf-lmodal__pwd-toggle:hover {
    color: #223C8F;
    background: transparent !important;
}
.bpf-lmodal__pwd-toggle:focus,
.bpf-lmodal__pwd-toggle:focus-visible {
    outline: 0 !important;
    background: transparent !important;
    color: #223C8F;
}
.bpf-lmodal__pwd-toggle svg { display: block; }

/* Bouton submit "Je m'identifie" */
.bpf-lmodal__col--right input[type="submit"] {
    width: 100% !important;
    padding: 13px 18px !important;
    background: transparent !important;
    color: #223C8F !important;
    border: 2px solid #223C8F !important;
    border-radius: 2px !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    margin-top: 0 !important;
    text-align: center !important;
    font-family: inherit !important;
    letter-spacing: .02em !important;
    transition: background .15s, color .15s !important;
}
.bpf-lmodal__col--right input[type="submit"]:hover {
    background: #223C8F !important;
    color: #fff !important;
}
.bpf-lmodal__col--right .forgetmenot {
    display: flex; align-items: center; gap: 8px;
    font-size: .76rem; color: #666; margin-top: 0;
}
/* Le bouton Google et le separateur « OU » vivent HORS du `<form>`, donc hors de la
   repartition : leurs ecarts sont fixes, et poses genereusement pour que le haut de la
   colonne ne paraisse pas serre a cote du bas qui, lui, s'etale. */
.bpf-lmodal__col--right #vrnq-lmodal-google-btn { margin-bottom: 4px; }

/* ── LA COLONNE DROITE SE REPARTIT SUR TOUTE LA HAUTEUR ──────────────────────
   La colonne etait deja `flex column`, mais son contenu s'empilait en haut et laissait
   un vide sous lui : a cote de la colonne gauche, dont le bouton est cale en bas, les
   deux moities ne se repondaient pas.

   IL MANQUAIT AU FORMULAIRE DE GRANDIR. Tant qu'il se dimensionnait sur son contenu,
   aucune marge automatique posee a l'interieur ne pouvait repartir quoi que ce soit :
   il n'y avait pas d'espace libre a distribuer. `flex:1 1 auto` lui donne la hauteur
   restante, et c'est ce qui rend la suite possible.

   SELECTEUR PAR IDENTIFIANT, faute de mieux : ce formulaire porte `id="loginform"` et
   aucune classe. L'identifiant est de toute facon deja la cle du script de connexion,
   il ne bougera pas sans que ce script bouge avec lui. */
.bpf-lmodal__col--right #loginform {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    /* REPARTITION, et non plus un simple calage en bas. `margin-top:auto` sur le seul
       bouton envoyait TOUT l'espace libre au meme endroit : les champs restaient groupes
       en haut et le vide s'ouvrait d'un bloc juste au-dessus du bouton. `space-between`
       distribue ce meme espace entre TOUS les groupes.

       ⚠️ LES DEUX SONT INCOMPATIBLES, ce n'est pas un choix de style : une marge
       automatique consomme l'espace libre AVANT que `justify-content` n'ait quoi que ce
       soit a repartir. Garder `margin-top:auto` sur le bouton aurait rendu `space-between`
       parfaitement inoperant. Le bouton reste neanmoins en bas, parce qu'il appartient au
       dernier groupe et que `space-between` y colle le dernier element.

       `gap` est un PLANCHER : il garantit la respiration meme quand il n'y a aucun espace
       a distribuer, sur une fenetre courte par exemple. */
    justify-content: space-between;
    gap: 14px;
}
/* MARGES REMISES A ZERO : l'ecart entre groupes vient desormais de `gap` et de la
   repartition. Les laisser s'y ajouterait sans qu'on sache plus qui espace quoi. */
.bpf-lmodal__col--right #loginform > p,
.bpf-lmodal__col--right #loginform > .bpf-lmodal__form-bottom { margin: 0; }

/* LE GROUPE DE BAS RESTE SOUDE. Il est UN element flex, donc UN seul point de
   repartition : le bouton, le lien de secours et la mention Google gardent entre eux
   leurs ecarts d'origine, pendant que l'espace libre s'ouvre AU-DESSUS d'eux. C'est
   exactement ce qu'on ne pouvait pas obtenir tant qu'ils etaient trois freres. */
.bpf-lmodal__col--right .bpf-lmodal__form-bottom { margin: 0; }
.bpf-lmodal__col--right .bpf-lmodal__form-bottom .submit { margin: 0; }

/* LE LABEL RESTE COLLE A SON CHAMP. Chaque couple libelle plus saisie vit dans un MEME
   `<p>`, donc dans un seul element flex : la repartition ne peut pas passer entre eux,
   quelle que soit la hauteur disponible. C'est la raison pour laquelle l'espacement est
   pose sur les `<p>` et jamais a l'interieur. */

/* Zone d'erreur in-modal */
.bpf-lmodal__error {
    background: #FFF0F0; border: 1px solid #F5CACD;
    border-left: 3px solid #E1000F; border-radius: 4px;
    padding: 10px 14px; font-size: .8rem; color: #B42020;
    margin-bottom: 14px; line-height: 1.5;
}
.bpf-lmodal__error[hidden] { display: none !important; }
.bpf-lmodal__error::before { content: '⚠ '; }

/* Lien "Mot de passe oublié ?", sous le submit, centré */
.bpf-lmodal__reset-link {
    display: block;
    margin: 10px 0 0 0;
    font-size: .76rem; color: #223C8F;
    text-decoration: underline; cursor: pointer;
    text-align: center;
}
.bpf-lmodal__reset-link:hover { color: #172A66; }

/* ── Bouton trigger header (le <a> Se connecter est devenu un <button>) ──
   Reset chirurgical : neutralise les styles natifs <button> problématiques
   (bordures haut/bas, outline, decoration) sans casser le séparateur vertical. */
button.bpf-header__action-btn--loginpopup,
button.bpf-header__action-btn--loginpopup:hover,
button.bpf-header__action-btn--loginpopup:focus,
button.bpf-header__action-btn--loginpopup:focus-visible,
button.bpf-header__action-btn--loginpopup:active {
    border-top: 0 !important;
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    cursor: pointer !important;
    line-height: inherit !important;
    vertical-align: top !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
button.bpf-header__action-btn--loginpopup .bpf-action-label,
button.bpf-header__action-btn--loginpopup .bpf-action-icon {
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .bpf-lmodal__two-col { grid-template-columns: 1fr; min-height: auto; }
    .bpf-lmodal__col--left { display: none; }
    .bpf-lmodal__divider { display: none; }
    /* Le plancher de hauteur saute avec la colonne gauche : en une seule colonne, la
       carte n'a plus qu'un formulaire a montrer, et 480px de vide sous lui n'auraient
       servi a rien. Le composant gere deja la largeur et le plafond de hauteur. */
    .vrnq-modal .bpf-lmodal__two-col { min-height: 0; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   BOUTONS : JAMAIS SOULIGNÉS (repos + survol + focus), site-wide.
   Bat les règles de lien de contenu de style.css (`a { text-decoration: underline }`
   / `a:hover { … }`, non-!important) via !important, sur TOUTES les pages front, y
   compris la page custom /reinitialiser-mot-de-passe/ (le formulaire de reset N'EST
   PAS wp-login.php natif, header-footer.css y charge). On ne cible QUE des éléments /
   classes de BOUTON : les liens texte de contenu (a nu) gardent leur soulignement.
   ═════════════════════════════════════════════════════════════════════════════ */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.button,
a[role="button"],
[role="button"],
[class*="bpf-btn"],
[class*="vrnq-btn"],
[class*="vrnq-cta"],
.bpf-resetpage__btn,
.wp-block-button__link,
.ast-button, .ast-custom-button,
button:hover, button:focus,
a.button:hover, a.button:focus,
a[role="button"]:hover, a[role="button"]:focus,
[class*="bpf-btn"]:hover, [class*="bpf-btn"]:focus,
[class*="vrnq-btn"]:hover, [class*="vrnq-btn"]:focus,
[class*="vrnq-cta"]:link, [class*="vrnq-cta"]:visited,
[class*="vrnq-cta"]:hover, [class*="vrnq-cta"]:focus, [class*="vrnq-cta"]:active,
.bpf-resetpage__btn:hover, .bpf-resetpage__btn:focus,
.wp-block-button__link:hover, .wp-block-button__link:focus {
    text-decoration: none !important;
}

/* ── Pill plan/offre : COMPOSANT PARTAGÉ (/tarifs/ + /changer-forfait/ ; le chip du dashboard garde
   sa famille). Fond bleu clair, texte navy, coins pleins ; centré via inline-flex. Texte = helper
   veillernq_display_plan_label, icône = veillernq_display_plan_icon. Pas un lien → aucun souligné. */
.vrnq-plan-pill {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; padding: 7px 14px;
    background: #ECEFF8; color: #172A66; border-radius: 999px;
    font-size: .9rem; font-weight: 600; line-height: 1.4;
}
.vrnq-plan-pill i { flex-shrink: 0; color: #172A66; }
.vrnq-plan-pill:link, .vrnq-plan-pill:visited, .vrnq-plan-pill:hover, .vrnq-plan-pill:focus { text-decoration: none; }

/* ─────────────────────────────────────────────────────────────────────────
   PAGE « MESSAGES » (/mon-espace/messages/)
   Le style des TUILES vit dans le plugin, avec le panneau : la page et la cloche
   doivent montrer exactement le meme message, et deux feuilles pour un seul
   composant auraient fini par diverger. Ici, uniquement le CADRE de la page.
───────────────────────────────────────────────────────────────────────── */
/* LARGEUR ALIGNEE SUR « MON COMPTE ». Mesure faite sur la page reelle : le wrapper de
   Mon compte rend 1440 px avec 40 px de marge interne, soit 1360 px utiles. Le meme
   couple pose ici rend exactement la meme largeur, au pixel — verifie sur la page soeur
   /mon-espace/preuves/. Aucun breakout n est necessaire : la zone de contenu du theme est
   deja pleine largeur sur ces pages, contrairement a ce que le commentaire de Mon compte
   laisse croire pour son propre cas. */
.vrnq-msgpage {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    font-family: var(--bpf-font);
}
@media (max-width: 768px) {
    /* Meme respiration reduite que Mon compte : 40 px de marge sur un telephone mangent
       un cinquieme de l ecran. */
    .vrnq-msgpage { padding: 0 16px; }
}

/* En-tete : pastille, titre, sous-titre */
.vrnq-msgpage__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.vrnq-msgpage__ico {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;                     /* le SVG est en currentColor */
    background: linear-gradient(145deg, #172A66 0%, #223C8F 60%, #172A66 100%);
    box-shadow: 0 2px 8px rgba(34,60,143,0.28), 0 1px 2px rgba(0,0,0,0.10);
}
.vrnq-msgpage__head-txt { display: block; min-width: 0; }
.vrnq-msgpage__titre {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bpf-blue);
}
.vrnq-msgpage__sous {
    display: block;
    margin-top: 3px;
    font-size: .88rem;
    color: #6B6B80;
}

/* Carte : le contenu de la page, quel qu il soit */
.vrnq-msgpage__carte {
    background: #fff;
    border: 1px solid #E9ECF4;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(20,20,50,.08), 0 2px 6px rgba(20,20,50,.04);
}

/* Les tuiles sont des LIENS sur la page : on neutralise le soulignement du theme.
   Tout le reste de leur mise en forme vient du plugin, inchangee. */
.vrnq-msgpage .vrnq-msg-item,
.vrnq-msgpage .vrnq-msg-item:hover,
.vrnq-msgpage .vrnq-msg-item:focus { text-decoration: none; }

/* Pied de carte : compteur a gauche, boutons a droite */
.vrnq-msgpage__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #EEF0F6;
    background: #FAFBFE;
}
.vrnq-msgpage__compte { font-size: .82rem; color: #6B6B80; }
.vrnq-msgpage__boutons { display: inline-flex; gap: 8px; }
.vrnq-msgpage__btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 1px solid var(--bpf-blue);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--bpf-blue);
    background: #fff;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.vrnq-msgpage__btn:hover { background: var(--bpf-blue); color: #fff; text-decoration: none; }
.vrnq-msgpage__btn.is-primaire { background: var(--bpf-blue); color: #fff; }
.vrnq-msgpage__btn.is-primaire:hover { background: #172A66; }
/* MEME REGLE POUR LES BOUTONS DE PAGINATION DES MESSAGES : ce sont des <a> deguises en
   boutons, ils ne doivent jamais porter le trait des liens de texte. Le lien « Retour aux
   messages » plus bas, LUI, garde son soulignement au survol : c est un vrai lien de prose,
   pas une pilule. */
.vrnq-msgpage__btn,
.vrnq-msgpage__btn:link,
.vrnq-msgpage__btn:visited,
.vrnq-msgpage__btn:hover,
.vrnq-msgpage__btn:focus,
.vrnq-msgpage__btn:focus-visible,
.vrnq-msgpage__btn:active { text-decoration: none !important; }
/* Indisponible : rendu en <span>, jamais en lien. Le curseur le dit aussi. */
.vrnq-msgpage__btn.is-off {
    border-color: #DDE1EC;
    color: #A9B2C4;
    background: #fff;
    cursor: default;
}

/* ETAT VIDE : LE MARKUP EST PARTAGE avec le panneau (rendu par render_liste_inner).
   Une seule formulation, un seul balisage, deux respirations : le panneau vit dans 420 px
   et reste compact, la page est une destination et peut s aerer. Seules les dimensions
   sont redites ici, jamais le contenu. */
.vrnq-msgpage .vrnq-msg-vide {
    /* 440 px : reglage a l oeil. Une carte de 320 px laissait une bande blanche entre elle et
       le pied de page, 460 px l etirait au-dela de ce que son contenu justifie. La valeur ne
       concerne QUE le contexte page ; le panneau garde ses 220 px, imposes par sa largeur.
       Une seule valeur a bouger si le reglage doit encore etre affine. */
    min-height: 440px;
    padding: 40px 24px;
    gap: 12px;
    font-size: .88rem;
}
.vrnq-msgpage .vrnq-msg-vide__ico { width: 64px; height: 64px; }
.vrnq-msgpage .vrnq-msg-vide__h { font-size: 1.05rem; }

/* Conserve pour les deux messages de service de la page : « Connectez-vous… » et
   « Message introuvable. », qui ne passent pas par le rendu partage. */
.vrnq-msgpage__vide-t {
    margin: 0;
    padding: 32px 24px;
    text-align: center;
    font-size: .88rem;
    line-height: 1.6;
    color: #8A8A9A;
}

/* Vue detail d un message */
.vrnq-msgpage__retour-l { margin: 0 0 12px; font-size: .84rem; }
.vrnq-msgpage__retour-l a { color: var(--bpf-blue); text-decoration: none; font-weight: 600; }
.vrnq-msgpage__retour-l a:hover { text-decoration: underline; }
.vrnq-msgpage__detail { padding: 24px; }
.vrnq-msgpage__detail-t { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: var(--bpf-blue); }
.vrnq-msgpage__detail-d { margin: 0 0 16px; font-size: .78rem; color: #8A8A9A; }
.vrnq-msgpage__detail-c { font-size: .92rem; line-height: 1.65; color: #1A1A2E; }
.vrnq-msgpage__detail-f { margin: 20px 0 0; }

@media (max-width: 600px) {
    .vrnq-msgpage__titre { font-size: 1.35rem; }
    .vrnq-msgpage__nav { flex-direction: column; align-items: stretch; gap: 10px; }
    .vrnq-msgpage__boutons { justify-content: space-between; }
}

/* ─────────────────────────────────────────────────────────────────────────
   CONTROLE DE TRI DU FIL (« Consulter ma veille »)
   Discret par construction : c est un reglage d affichage, pas une action.
───────────────────────────────────────────────────────────────────────── */
.vrnq-tri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: .82rem;
}
.vrnq-tri__l { color: #6B6B80; }
.vrnq-tri__opt {
    padding: 4px 10px;
    border: 1px solid var(--bpf-grey-border);
    border-radius: 999px;
    color: var(--bpf-blue);
    background: #fff;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.vrnq-tri__opt:hover { border-color: var(--bpf-blue); }
.vrnq-tri__opt.is-actif {
    background: var(--bpf-blue);
    border-color: var(--bpf-blue);
    color: #fff;
    font-weight: 600;
}
/* JAMAIS DE SOULIGNEMENT SUR UNE PUCE, DANS AUCUN ETAT. Ce sont des <a>, donc le theme leur
   posait le trait des liens de texte : un trait sous une pilule se lit comme une faute de
   rendu, pas comme une affordance. Tous les etats sont nommes, sans quoi le soulignement
   revient au survol ou au clavier, la ou personne ne regarde en recettant.

   POURQUOI !important ICI, et pas une montee en specificite. Astra pose
   `.ast-single-post .entry-content a { text-decoration: underline }`, soit (0,2,1), et les
   puces vivent dans ce .entry-content : une chaine d etats en (0,2,0) perdait, ce qu un
   premier depot a montre EN PROD. Qualifier par l ancetre donnerait (0,2,1), soit une
   EGALITE : l arbitrage retomberait alors sur l ordre de chargement, qu un CSS dynamique
   injecte en tete peut inverser sans prevenir. On prefere une regle deterministe a une
   regle elegante qui a deja echoue une fois. Ce fichier compte 668 !important : c est son
   idiome, pas une exception arrachee. */
.vrnq-tri__opt,
.vrnq-tri__opt:link,
.vrnq-tri__opt:visited,
.vrnq-tri__opt:hover,
.vrnq-tri__opt:focus,
.vrnq-tri__opt:focus-visible,
.vrnq-tri__opt:active,
.vrnq-tri__opt.is-actif { text-decoration: none !important; }
/* AVERTISSEMENT DE TRI : ambre, et non gris. Il dit que la liste n est plus dans l ordre
   qu on suppose en la lisant ; le faire discret irait contre sa raison d etre. */
.vrnq-tri__actif {
    flex-basis: 100%;
    padding: 8px 12px;
    border-left: 3px solid #F6A800;
    background: #FFF8EA;
    border-radius: 0 6px 6px 0;
    color: #6B5A2E;
    line-height: 1.5;
}

/* ===========================================================================
   ACCORDEON DU PIED DE PAGE : NEUTRALISE AU-DESSUS DE 640px
   Le repli n'existe qu'en mobile. Au-dela, <details> doit redevenir un simple
   conteneur, et le pied de page retrouver l'aspect qu'il avait AVANT ce lot :
   meme titre, memes marges, meme grille.
   content-visibility:visible sur ::details-content est la seule facon, sans
   JavaScript, d'ouvrir un <details> que le HTML laisse ferme.
   FILET VOLONTAIRE : le <summary> reste visible et cliquable ici. Sur un
   navigateur qui ignore ::details-content, le pied de page s'afficherait
   replie ; l'utilisateur voit alors deux titres et peut les ouvrir. Le masquer
   aurait rendu ces liens invisibles ET inatteignables, sans aucun signe (R26).
   =========================================================================== */
@media (min-width: 641px) {
    .bpf-footer__acc::details-content {
        content-visibility: visible !important;
        block-size: auto !important;
    }
    .bpf-footer__acc-sum {
        display: block !important;
        list-style: none !important;
        padding: 0 !important;
        border: 0 !important;
        min-height: 0 !important;
    }
    .bpf-footer__acc-sum::-webkit-details-marker { display: none !important; }
    .bpf-footer__acc-chev { display: none !important; }
    .bpf-footer__cta      { display: none !important; }
}