/*
 * Theme Name:  VeilleRNQ-Facile Child
 * Theme URI:   https://www.veillernq-facile.fr
 * Description: Child theme Astra pour VeilleRNQ-Facile.fr — Charte DSFR (police Inter, palette #223C8F/#E1000F/#18753C)
 * Author:      12H CONSULTING by PORTAGE D'OC
 * Author URI:  https://www.veillernq-facile.fr
 * Template:    astra
 * Version:     1.0.0
 * License:     Proprietary
 * Text Domain: veillernq-facile
 *
 * Éditeur : 12H CONSULTING by PORTAGE D'OC — SIRET 79919884100030
 * Directeurs de la publication : Isabelle POTIER & Franck BENARD
 *
 * Source charte : Spécification VeilleRNQ-Facile v1 — charte DSFR (héritée de BPF-Facile)
 */

/* ════════════════════════════════════════════════════════════════════════════
   POLICE INTER — Google Fonts (DSFR-compatible)
   Source : Spécification BPF-FACILE v6
   Inter est chargée par veillernq-header-footer.css (placé en tête via @import).
   Fallback : system-ui, -apple-system, Arial, sans-serif
   WCAG AA obligatoire | Focus visible obligatoire
   ════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════════
   VARIABLES CSS — DSFR BPF-FACILE
   Source : Spécification BPF-FACILE v6 — "Variables CSS"
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Palette navy VeilleRNQ (SOURCE — remplace le bleu France de l'État) ── */
    --vrnq-blue:           #223C8F; /* navy principal (ex-bleu France #000091)       */
    --vrnq-blue-dark:      #172A66; /* hover / foncé                                 */
    --vrnq-blue-accent:    #3A57C7; /* liens, éléments « mid »                       */
    --vrnq-blue-050:       #ECEFF8; /* fonds très clairs                             */

    /* ── Couleurs principales ────────────────────────────────────────────── */
    --bpf-primary:         var(--vrnq-blue);        /* en-têtes, boutons, liens      */
    --bpf-danger:          #E1000F; /* Rouge — erreurs critiques, alertes urgentes   */
    --bpf-success:         #18753C; /* Vert — succès, validations, badges positifs   */
    --bpf-info:            var(--vrnq-blue-accent); /* notifications, bannières info  */
    --bpf-warning:         #B34000; /* Orange — avertissements, dates proches        */

    /* ── Couleurs secondaires ────────────────────────────────────────────── */
    --bpf-primary-dark:    var(--vrnq-blue-dark);   /* hover sur éléments primaires  */
    --bpf-primary-light:   var(--vrnq-blue-050);    /* fond des encadrés info        */
    --bpf-danger-light:    #FFF0F0; /* Rouge clair — fond des encadrés d'erreur      */
    --bpf-warning-light:   #FFF3E0; /* Orange clair — fond des encadrés warning      */
    --bpf-success-light:   #E8F9EF; /* Vert clair — fond des encadrés de succès      */

    /* ── Couleurs neutres ────────────────────────────────────────────────── */
    --bpf-text:            #161616; /* Texte principal — contraste WCAG AA garanti   */
    --bpf-text-secondary:  #666666; /* Texte secondaire, légendes, placeholders     */
    --bpf-text-disabled:   #999999; /* Texte désactivé                               */
    --bpf-border:          #DDDDDD; /* Bordures, séparateurs                         */
    --bpf-border-focus:    #223C8F; /* Bordure focus — WCAG AA obligatoire           */
    --bpf-bg-light:        #F6F6F6; /* Fond page, fond dashboard                     */
    --bpf-bg-white:        #FFFFFF; /* Fond cards, modals                            */

    /* ── Typographie ─────────────────────────────────────────────────────── */
    --bpf-font-family:     'Inter', system-ui, -apple-system, Arial, sans-serif;
    --bpf-font-size-base:  16px;
    --bpf-font-size-sm:    14px;
    --bpf-font-size-xs:    12px;
    --bpf-line-height:     1.6;

    /* ── Espacement ──────────────────────────────────────────────────────── */
    --bpf-space-xs:   4px;
    --bpf-space-sm:   8px;
    --bpf-space-md:   16px;
    --bpf-space-lg:   24px;
    --bpf-space-xl:   40px;

    /* ── Border radius ───────────────────────────────────────────────────── */
    --bpf-radius-sm:  4px;
    --bpf-radius-md:  6px;
    --bpf-radius-lg:  8px;

    /* ── Ombres ─────────────────────────────────────────────────────────── */
    --bpf-shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.08);
    --bpf-shadow-md:  0 2px 12px rgba(0, 0, 0, 0.10);
    --bpf-shadow-lg:  0 4px 24px rgba(0, 0, 0, 0.12);

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --bpf-transition: 0.2s ease-in-out;

    /* ── Sidebar dashboard ───────────────────────────────────────────────── */
    --bpf-sidebar-width:   260px;
    --bpf-sidebar-bg:      #223C8F;
    --bpf-sidebar-text:    #FFFFFF;
    --bpf-sidebar-hover:   rgba(255, 255, 255, 0.12);
    --bpf-sidebar-active:  rgba(255, 255, 255, 0.20);
}

/* ════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHIE — INTER (DSFR-compatible)
   Source : Spécification BPF-FACILE v6
   WCAG AA : contraste minimum 4.5:1 sur fond blanc pour texte normal
   ════════════════════════════════════════════════════════════════════════════ */

body,
.body-font {
    font-family: var(--bpf-font-family);
    font-size:   var(--bpf-font-size-base);
    color:       var(--bpf-text);
    line-height: var(--bpf-line-height);
    /* Typo : JAMAIS de césure / coupe de mots sur le texte courant. Propriétés héritées
       → se propagent à tout le site. Les URLs longues gèrent leur coupe en inline (exception). */
    -webkit-hyphens: none;
    -ms-hyphens:     none;
    hyphens:         none;
    word-break:      normal;
    overflow-wrap:   normal;
}

/* ── Anti-cesure : filet defensif sur les conteneurs de texte ────────────────
   La regle ci-dessus suffit EN THEORIE : hyphens est une propriete heritee, posee
   sur body elle descend dans toute la page. Ce bloc ne la duplique pas par zele.

   Il couvre le seul cas qu'on ne maitrise pas : une regle du theme PARENT qui
   poserait hyphens sur un conteneur intermediaire. L'heritage perd toujours contre
   une declaration directe, aussi faible soit sa specificite, et le parent n'est pas
   dans ce depot. On redeclare donc explicitement la ou le texte vit vraiment.

   ⚠️ Ce bloc ne peut RIEN contre le trait d'union litteral de « e-mail » : couper
   apres un trait d'union present dans le mot n'est pas une cesure, c'est une
   occasion de retour a la ligne normale, et hyphens:none ne la supprime pas. C'est
   pour cela que « e-mail » porte un trait d'union insecable U+2011 dans les textes
   de l'interface. Aucune propriete CSS ne remplace ce caractere.
   ═══════════════════════════════════════════════════════════════════════════ */
.site-content,
.entry-content,
.ast-container,
.bpf-card,
.vrnq-card,
.bpf-lmodal,
.vrnq-modal {
    -webkit-hyphens: none;
    -ms-hyphens:     none;
    hyphens:         none;
    word-break:      normal;
    overflow-wrap:   normal;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bpf-font-family);
    font-weight: 700;
    color:       var(--bpf-text);
    line-height: 1.3;
}

/* ── Surcharges Flatsome typographie ─────────────────────────────────────── */
.h1, .h2, .h3, .h4,
.ux-cell, .ux-html { font-family: var(--bpf-font-family); }

/* ════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITÉ — FOCUS VISIBLE
   Source : Spécification BPF-FACILE v6 — "Focus visible obligatoire"
   WCAG 2.1 SC 2.4.7 + SC 1.4.3
   ════════════════════════════════════════════════════════════════════════════ */

/* Focus visible sur TOUS les éléments interactifs */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline:        3px solid var(--bpf-primary);
    outline-offset: 2px;
    border-radius:  var(--bpf-radius-sm);
}

/* Suppression du focus pour les interactions souris (pas pour clavier) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   LIENS — COULEUR DSFR
   ════════════════════════════════════════════════════════════════════════════ */

a {
    color:           var(--bpf-primary);
    text-decoration: underline;
    transition:      color var(--bpf-transition);
}

a:hover {
    color:           var(--bpf-primary-dark);
    text-decoration: underline;
}

/* ════════════════════════════════════════════════════════════════════════════
   BOUTONS — DSFR BPF
   ════════════════════════════════════════════════════════════════════════════ */

/* Bouton primaire — Bleu République DSFR */
.bpf-btn,
.button.bpf-btn-primary,
.ux-button.bpf-btn-primary {
    display:          inline-flex;
    align-items:      center;
    gap:              var(--bpf-space-sm);
    background-color: var(--bpf-primary);
    color:            #FFFFFF !important;
    border:           none;
    border-radius:    var(--bpf-radius-sm);
    padding:          10px 20px;
    font-family:      var(--bpf-font-family);
    font-size:        var(--bpf-font-size-sm);
    font-weight:      600;
    line-height:      1.5;
    text-decoration:  none;
    cursor:           pointer;
    transition:       background-color var(--bpf-transition), box-shadow var(--bpf-transition);
}

.bpf-btn:hover,
.button.bpf-btn-primary:hover {
    background-color: var(--bpf-primary-dark);
    color:            #FFFFFF !important;
    text-decoration:  none;
}

/* Bouton danger — Rouge DSFR */
.bpf-btn-danger {
    background-color: var(--bpf-danger) !important;
}
.bpf-btn-danger:hover {
    background-color: #B3000B !important;
}

/* Bouton succès — Vert DSFR */
.bpf-btn-success {
    background-color: var(--bpf-success) !important;
}
.bpf-btn-success:hover {
    background-color: #125C30 !important;
}

/* Bouton secondaire — contour bleu */
.bpf-btn-outline {
    background-color: transparent !important;
    color:            var(--bpf-primary) !important;
    border:           1.5px solid var(--bpf-primary) !important;
}
.bpf-btn-outline:hover {
    background-color: var(--bpf-primary-light) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD — SIDEBAR + LAYOUT
   Source : Spécification BPF-FACILE v6 — "sidebar 260px fixe fond #223C8F"
   ════════════════════════════════════════════════════════════════════════════ */

/* Layout principal */
.bpf-dashboard-layout {
    display:   flex;
    min-height: 100vh;
    background: var(--bpf-bg-light);
}

/* Sidebar navigation */
.bpf-sidebar {
    width:      var(--bpf-sidebar-width);
    min-height: 100vh;
    background: var(--bpf-sidebar-bg);
    color:      var(--bpf-sidebar-text);
    position:   fixed;
    top:        0;
    left:       0;
    z-index:    100;
    display:    flex;
    flex-direction: column;
    overflow-y: auto;
}

.bpf-sidebar-header {
    padding:      var(--bpf-space-lg) var(--bpf-space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.bpf-sidebar-logo {
    color:          #FFFFFF;
    font-family:    var(--bpf-font-family);
    font-size:      18px;
    font-weight:    700;
    text-decoration: none;
    display:        block;
}

/* Badge plan dans la sidebar */
.bpf-plan-badge {
    display:          inline-block;
    font-size:        10px;
    font-weight:      600;
    padding:          2px 8px;
    border-radius:    20px;
    text-transform:   uppercase;
    letter-spacing:   0.05em;
    margin-top:       4px;
}
.bpf-plan-badge--gratuit    { background: rgba(255,255,255,.15); color: #CCC; }
.bpf-plan-badge--independant{ background: #18753C; color: #FFF; }
.bpf-plan-badge--monosite   { background: #3A57C7; color: #FFF; }
.bpf-plan-badge--multisite  { background: #B34000; color: #FFF; }

/* Navigation sidebar */
.bpf-sidebar-nav { flex: 1; padding: var(--bpf-space-md) 0; }

.bpf-sidebar-nav a {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        10px var(--bpf-space-md);
    color:          rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size:      var(--bpf-font-size-sm);
    font-weight:    400;
    transition:     background-color var(--bpf-transition), color var(--bpf-transition);
    border-left:    3px solid transparent;
}

.bpf-sidebar-nav a:hover {
    background-color: var(--bpf-sidebar-hover);
    color:            #FFFFFF;
    text-decoration:  none;
}

.bpf-sidebar-nav a.active,
.bpf-sidebar-nav a[aria-current="page"] {
    background-color: var(--bpf-sidebar-active);
    color:            #FFFFFF;
    font-weight:      600;
    border-left-color: #FFFFFF;
}

/* Zone contenu principal */
.bpf-main-content {
    margin-left: var(--bpf-sidebar-width);
    flex:        1;
    padding:     var(--bpf-space-xl) var(--bpf-space-lg);
    min-height:  100vh;
}

/* ════════════════════════════════════════════════════════════════════════════
   KPI CARDS — DASHBOARD
   Source : Spécification BPF-FACILE v6 — "4 KPI cards (fond blanc, bordure 4px #223C8F)"
   ════════════════════════════════════════════════════════════════════════════ */

.bpf-kpi-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   var(--bpf-space-md);
    margin-bottom:         var(--bpf-space-xl);
}

.bpf-kpi-card {
    background:   var(--bpf-bg-white);
    border-radius: var(--bpf-radius-md);
    border-left:   4px solid var(--bpf-primary);
    padding:       var(--bpf-space-md) var(--bpf-space-lg);
    box-shadow:    var(--bpf-shadow-sm);
    transition:    box-shadow var(--bpf-transition);
}

.bpf-kpi-card:hover   { box-shadow: var(--bpf-shadow-md); }
.bpf-kpi-card--danger  { border-left-color: var(--bpf-danger); }
.bpf-kpi-card--success { border-left-color: var(--bpf-success); }
.bpf-kpi-card--warning { border-left-color: var(--bpf-warning); }

.bpf-kpi-value {
    font-size:   28px;
    font-weight: 700;
    color:       var(--bpf-primary);
    line-height: 1.2;
}

.bpf-kpi-label {
    font-size:  var(--bpf-font-size-xs);
    color:      var(--bpf-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════════════
   BADGES STATUTS — FORMATIONS / EXERCICES
   ════════════════════════════════════════════════════════════════════════════ */

.bpf-badge {
    display:       inline-block;
    padding:       2px 10px;
    border-radius: 20px;
    font-size:     11px;
    font-weight:   600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.bpf-badge--brouillon { background: #F0F0F0; color: var(--bpf-text-secondary); }
.bpf-badge--complete  { background: var(--bpf-primary-light); color: var(--bpf-primary); }
.bpf-badge--validee   { background: var(--bpf-success-light); color: var(--bpf-success); }
.bpf-badge--depose    { background: #E8F9EF; color: #18753C; border: 1px solid #18753C; }
.bpf-badge--actif     { background: var(--bpf-success-light); color: var(--bpf-success); }
.bpf-badge--essai     { background: #EEE; color: #555; }
.bpf-badge--annule    { background: var(--bpf-warning-light); color: var(--bpf-warning); }
.bpf-badge--expire    { background: var(--bpf-danger-light); color: var(--bpf-danger); }

/* ════════════════════════════════════════════════════════════════════════════
   NOTICES / ALERTES
   ════════════════════════════════════════════════════════════════════════════ */

.bpf-notice {
    border-radius: var(--bpf-radius-md);
    padding:       var(--bpf-space-md) var(--bpf-space-lg);
    margin-bottom: var(--bpf-space-md);
    font-size:     var(--bpf-font-size-sm);
}
.bpf-notice-primary { background: var(--bpf-primary-light); border-left: 4px solid var(--bpf-primary); }
.bpf-notice-warning { background: var(--bpf-warning-light); border-left: 4px solid var(--bpf-warning); }
.bpf-notice-danger  { background: var(--bpf-danger-light);  border-left: 4px solid var(--bpf-danger);  }
.bpf-notice-success { background: var(--bpf-success-light); border-left: 4px solid var(--bpf-success); }

/* Encadré non-responsabilité — obligatoire sur la page génération PDF
   Source : Spécification BPF-FACILE v6 — "Fond #FFF3E0, bordure gauche 4px solid #B34000" */
.bpf-non-responsabilite {
    background:   #FFF3E0;
    border-left:  4px solid var(--bpf-warning);
    border-radius: 0 var(--bpf-radius-md) var(--bpf-radius-md) 0;
    padding:      var(--bpf-space-lg) var(--bpf-space-xl);
    margin:       var(--bpf-space-xl) 0 var(--bpf-space-md);
}

/* ════════════════════════════════════════════════════════════════════════════
   COUNTDOWN 30 AVRIL — 3 ÉTATS
   Source : Spécification BPF-FACILE v6 — "Countdown 30 avril 3 états"
   ⚠️ Date limite : 30 AVRIL — Source : Cerfa 10443*17 p.1
   ════════════════════════════════════════════════════════════════════════════ */

.bpf-countdown {
    border-radius:  var(--bpf-radius-md);
    padding:        var(--bpf-space-md) var(--bpf-space-lg);
    margin-bottom:  var(--bpf-space-lg);
    color:          #FFFFFF;
    font-weight:    600;
    font-size:      var(--bpf-font-size-sm);
    display:        flex;
    align-items:    center;
    gap:            var(--bpf-space-md);
}

/* > 30 jours : bleu normal */
.bpf-countdown--normal  { background: var(--bpf-primary); }

/* ≤ 30 jours : orange warning */
.bpf-countdown--warning {
    background: var(--bpf-warning);
    animation:  bpf-pulse-warning 2s ease-in-out infinite;
}

/* = 0 jours : rouge critique */
.bpf-countdown--critical { background: var(--bpf-danger); }

@keyframes bpf-pulse-warning {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.85; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BARRE DE PROGRESSION — COMPLÉTUDE CERFA
   ════════════════════════════════════════════════════════════════════════════ */

.bpf-progress-wrap {
    background:    var(--bpf-border);
    border-radius: 6px;
    height:        10px;
    overflow:      hidden;
}

.bpf-progress-fill {
    height:        100%;
    border-radius: 6px;
    background:    var(--bpf-primary);
    transition:    width 0.4s ease-in-out;
}

.bpf-progress-fill--warning  { background: var(--bpf-warning); }
.bpf-progress-fill--success  { background: var(--bpf-success); }

/* ════════════════════════════════════════════════════════════════════════════
   TABLES — FORMATIONS / STAGIAIRES
   ════════════════════════════════════════════════════════════════════════════ */

.bpf-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--bpf-font-size-sm);
    background:      var(--bpf-bg-white);
    border-radius:   var(--bpf-radius-md);
    overflow:        hidden;
    box-shadow:      var(--bpf-shadow-sm);
}

.bpf-table th {
    background:  var(--bpf-primary);
    color:       #FFFFFF;
    padding:     10px var(--bpf-space-md);
    text-align:  left;
    font-weight: 600;
    font-size:   var(--bpf-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.bpf-table td {
    padding:     10px var(--bpf-space-md);
    border-bottom: 1px solid var(--bpf-border);
    vertical-align: middle;
    color:       var(--bpf-text);
}

.bpf-table tr:last-child td      { border-bottom: none; }
.bpf-table tr:hover td           { background: var(--bpf-bg-light); }
.bpf-table tr.bpf-table-total td { font-weight: 700; color: var(--bpf-primary); background: var(--bpf-primary-light); }

/* ════════════════════════════════════════════════════════════════════════════
   FORMULAIRES — WIZARD GRAVITY FORMS
   ════════════════════════════════════════════════════════════════════════════ */

/* Surcharge styles Gravity Forms pour la charte DSFR */
.bpf-wizard .gform_wrapper,
.bpf-form-saisie-formation .gform_wrapper {
    font-family: var(--bpf-font-family) !important;
}

.bpf-wizard input[type="text"],
.bpf-wizard input[type="email"],
.bpf-wizard input[type="number"],
.bpf-wizard select,
.bpf-wizard textarea {
    border:        1px solid var(--bpf-border);
    border-radius: var(--bpf-radius-sm);
    padding:       8px 12px;
    font-family:   var(--bpf-font-family);
    font-size:     var(--bpf-font-size-sm);
    color:         var(--bpf-text);
    transition:    border-color var(--bpf-transition), box-shadow var(--bpf-transition);
    width:         100%;
    box-sizing:    border-box;
}

.bpf-wizard input:focus,
.bpf-wizard select:focus,
.bpf-wizard textarea:focus {
    outline:       none;
    border-color:  var(--bpf-border-focus);
    box-shadow:    0 0 0 2px rgba(34, 60, 143, 0.20);
}

/* Bouton submit Gravity Forms */
.bpf-wizard .gform_button,
.bpf-wizard input[type="submit"] {
    background:   var(--bpf-primary);
    color:        #FFFFFF;
    border:       none;
    border-radius: var(--bpf-radius-sm);
    padding:      10px 24px;
    font-family:  var(--bpf-font-family);
    font-weight:  600;
    cursor:       pointer;
    transition:   background-color var(--bpf-transition);
}

.bpf-wizard .gform_button:hover { background: var(--bpf-primary-dark); }

/* ════════════════════════════════════════════════════════════════════════════
   TARIFS — TOGGLE MENSUEL/ANNUEL
   Source : Spécification BPF-FACILE v6 — "Toggle annuel : badge 2 mois offerts"
   ════════════════════════════════════════════════════════════════════════════ */

.bpf-tarifs-toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--bpf-space-md);
    margin:          var(--bpf-space-lg) 0;
    font-size:       var(--bpf-font-size-sm);
    font-weight:     600;
}

.bpf-toggle-switch {
    position:         relative;
    display:          inline-block;
    width:            52px;
    height:           28px;
}

.bpf-toggle-switch input          { opacity: 0; width: 0; height: 0; }

.bpf-toggle-slider {
    position:          absolute;
    cursor:            pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color:  var(--bpf-border);
    border-radius:     28px;
    transition:        background-color var(--bpf-transition);
}

.bpf-toggle-slider::before {
    content:           '';
    position:          absolute;
    height:            20px; width: 20px;
    left:              4px; bottom: 4px;
    background-color:  #FFFFFF;
    border-radius:     50%;
    transition:        transform var(--bpf-transition);
}

.bpf-toggle-switch input:checked + .bpf-toggle-slider {
    background-color: var(--bpf-primary);
}

.bpf-toggle-switch input:checked + .bpf-toggle-slider::before {
    transform: translateX(24px);
}

/* Badge "2 mois offerts" */
.bpf-badge-promo {
    display:          inline-block;
    background:       var(--bpf-success);
    color:            #FFFFFF;
    font-size:        11px;
    font-weight:      700;
    padding:          2px 8px;
    border-radius:    20px;
    letter-spacing:   0.03em;
    vertical-align:   middle;
    margin-left:      6px;
}

/* ════════════════════════════════════════════════════════════════════════════
   SURCHARGES FLATSOME — HEADER / FOOTER
   ════════════════════════════════════════════════════════════════════════════ */

/* Forcer Inter sur tous les éléments Flatsome/Astra */
.header, .footer, .nav, .ux-builder { font-family: var(--bpf-font-family) !important; }

/* Couleur primaire Flatsome → DSFR */
.button:not([class*="bpf-"]),
.button.primary { background-color: var(--bpf-primary); }

/* Suppression des styles Flatsome sur les pages dashboard */
.bpf-page .page-title,
.bpf-page .breadcrumbs { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   LITESPEED CACHE — CLASSE CSS NO-CACHE
   Les éléments personnalisés (nom OF, plan, KPIs) doivent être exclus du cache
   ════════════════════════════════════════════════════════════════════════════ */

/* Éléments dynamiques exclus du cache LiteSpeed ESI */
.bpf-dynamic-user,
.bpf-dynamic-plan,
.bpf-dynamic-kpi {
    /* LiteSpeed détecte ces classes pour l'exclusion ESI */
    /* Voir functions.php → veillernq_litespeed_exclusions() */
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — BREAKPOINTS
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .bpf-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
    .bpf-sidebar.open { transform: translateX(0); }
    .bpf-main-content { margin-left: 0; padding: var(--bpf-space-md); }
    .bpf-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .bpf-kpi-grid { grid-template-columns: 1fr; }
    .bpf-table    { font-size: 12px; }
    .bpf-table th, .bpf-table td { padding: 8px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER COLLÉ AU CONTENU (anti vide blanc) — RÈGLE GLOBALE
   ────────────────────────────────────────────────────────────────────────────
   Astra applique flex-grow + min-height:100vh sur la zone de contenu (sticky
   footer) : .site-content s'étire jusqu'en bas du viewport, créant un grand vide
   blanc AU-DESSUS du footer sur les pages à contenu court (404, reset, accessibilité,
   se-désabonner, mon-compte court, etc.). On neutralise ce comportement partout :
   le footer suit immédiatement le contenu. L'espace résiduel éventuel passe SOUS le
   footer (fond de page), jamais entre le contenu et le footer.
   Décision produit assumée (cf. audit espacement vertical). Remplace, en plus
   global, les neutralisations per-page déjà posées (pages app, mon-compte) — sans
   conflit (toutes en !important, même intention).
   NB : si une page TRÈS courte fait remonter le footer trop haut, activer le plancher
   ci-dessous (commenté) — compromis : réintroduit un petit espace sous contenu court.
   ════════════════════════════════════════════════════════════════════════════ */
.site-content,
.site-main,
#primary {
    flex: 0 0 auto !important;
    min-height: 0 !important;
}
/* Plancher anti footer-trop-haut (à décommenter SEULEMENT si le test le montre) :
.site-content { min-height: 60vh !important; }
*/

/* ════════════════════════════════════════════════════════════════════════════
   COMPOSANTS PARTAGÉS DES PAGES PUBLIQUES : bouton de sortie, champ de recherche
   ────────────────────────────────────────────────────────────────────────────
   SOURCE UNIQUE. Ces deux composants vivaient en double, dans le bloc <style>
   interne de 404.php et dans celui de search.php, avec des valeurs identiques
   recopiées à la main. Deux copies d'un même composant finissent toujours par
   diverger : la première retouche n'est faite que d'un côté, et les deux pages
   cessent silencieusement de se ressembler. Ils sont désormais ici, dans la
   feuille du thème enfant, enfilée sur TOUTES les pages du site.

   NOMMAGE : « cta » et non « btn ». `.vrnq-btn`, `.vrnq-btn--primary` et
   `.vrnq-btn--ghost` SONT DÉJÀ PRIS, deux fois, avec des valeurs incompatibles :
   veillernq-blog.php:1209-1213 (primaire = fond BLANC sur bandeau navy) et
   templates/dashboard/veille-home.php:234-243 (géométrie 42px du tableau de
   bord). Les styles du blog sortent en fin de body, donc APRÈS cette feuille :
   réutiliser ces noms ici aurait produit des boutons blancs sur carte blanche
   sur la page de recherche, invisibles, sans la moindre erreur nulle part.
   ════════════════════════════════════════════════════════════════════════════ */

/* Bouton de sortie : primaire navy plein, secondaire bordé. */
.vrnq-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 700;
    padding: 13px 26px;
    border-radius: 12px;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: .15s;
}
.vrnq-cta:hover,
.vrnq-cta:focus { text-decoration: none; transform: translateY(-1px); }

/* Le soulignement des boutons .vrnq-cta est traite dans veillernq-header-footer.css,
   avec la liste canonique « boutons jamais soulignes » qui vit deja la-bas et couvre
   tout le front. Une regle avait d'abord ete posee ICI, a coup de specificite ; elle a
   ete retiree pour ne pas maintenir deux mecanismes concurrents pour le meme geste.
   Le point de fond, lui, reste bon a savoir : `a { text-decoration: underline }` (l. 156)
   fait 0,0,1 et perd contre une classe, mais le theme parent souligne les liens de
   CONTENU avec `.entry-content a`, qui fait 0,1,1 et gagne. Un composant de bouton pose
   dans le contenu de page a donc besoin de plus qu'une simple classe. */

.vrnq-cta--primary { background: #223C8F; color: #fff; box-shadow: 0 8px 20px rgba(34, 60, 143, .25); }
.vrnq-cta--primary:hover { background: #172A66; color: #fff; }

.vrnq-cta--ghost { background: #fff; color: #172A66; border-color: #e6e9f2; }
.vrnq-cta--ghost:hover { border-color: #3A57C7; color: #3A57C7; }

/* Rangée de boutons de sortie, centrée. */
.vrnq-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Champ de recherche : conteneur arrondi unique, saisie à plat, bouton loupe. */
.vrnq-champ-recherche {
    display: flex;
    max-width: 400px;
    margin: 0 auto;
    border: 1.5px solid #e6e9f2;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.vrnq-champ-recherche input {
    flex: 1;
    border: 0;
    padding: 12px 16px;
    font-size: .95rem;
    font-family: inherit;
    outline: none;
    color: #1b2130;
    background: #fff;
}
.vrnq-champ-recherche input:focus { outline: 2px solid #3A57C7; outline-offset: -2px; }
.vrnq-champ-recherche button {
    border: 0;
    background: #ECEFF8;
    color: #223C8F;
    padding: 0 18px;
    font-size: 1rem;
    cursor: pointer;
}
.vrnq-champ-recherche button:hover { background: #dfe5f5; }

/* Variantes : en vedette (action principale d'un écran) et en ligne (aligné à gauche,
   sous un bandeau de résultats, au lieu d'être centré). */
.vrnq-champ-recherche--vedette { box-shadow: 0 8px 24px rgba(34, 60, 143, .10); }
.vrnq-champ-recherche--ligne { margin: 0 0 30px; }

/* ══════════════════════════════════════════════════════════════════════════
   CROIX DE FERMETURE DES MODALES : une seule regle pour tout le site
   ══════════════════════════════════════════════════════════════════════════
   Avant ce bloc, chaque modale portait sa propre couleur de croix, posee en
   `!important` dans son propre fichier, parfois repetee sur cinq etats. Trois
   croix etaient meme peintes en style inline, donc hors de portee de toute
   feuille. Resultat : deux croix seulement viraient au rouge au survol, les
   autres ne signalaient rien, et personne ne pouvait changer la couleur d'un
   seul geste. Les declarations de couleur ont ete RETIREES de chacune de ces
   sources ; elles vivent desormais ici.

   DEUX FAMILLES, parce que le fond derriere la croix n'est pas le meme :
     - fond CLAIR  : croix navy au repos ;
     - fond SOMBRE : croix blanche au repos. Un navy sur le bandeau navy
       `#223C8F` de la modale d'invitation ou du panneau d'aide donnerait une
       croix strictement invisible, donc un dialogue sans sortie visible.
   Les deux familles partagent le meme rouge au survol ET au focus : le signal
   d'interaction est uniforme, la lisibilite au repos est preservee.

   `!important` sur la couleur, et NULLE PART AILLEURS. C'est un dernier
   recours assume : Astra repose `color` sur `button:hover` avec une
   specificite superieure, et c'est precisement ce que les `!important`
   disperses combattaient. Il en reste un, au lieu de six.

   `.vrnq-modal-x` est le selecteur commun a utiliser pour toute nouvelle
   modale ; les classes historiques sont listees pour ne pas avoir a retoucher
   huit gabarits.
   ────────────────────────────────────────────────────────────────────────── */

/* `.bpf-lmodal__close` a quitte ces listes : la modale de connexion est passee sur le
   composant et sa croix porte desormais `.vrnq-modal-x`, deja en tete de chaque liste. */
.vrnq-modal-x,
.bpf-cm-x-of,
.bpf-um-modal__close,
.bpf-im-close,
.bpf-cf-modal__close,
.bpf-help-popover__close {
    cursor: pointer;
    transition: color .15s ease, fill .15s ease, stroke .15s ease, opacity .15s ease;
}

/* Les SVG suivent la couleur du texte, qu'ils soient a remplissage ou a trait. */
.vrnq-modal-x svg { fill: currentColor; }
.bpf-im-close svg      { stroke: currentColor; fill: none; }

/* ── Repos, fond CLAIR ── */
.vrnq-modal-x,
.vrnq-modal-x--light,
.bpf-cm-x-of {
    color: var(--bpf-primary) !important;
}

/* ── Repos, fond SOMBRE ── */
.vrnq-modal-x--dark,
.bpf-um-modal__close,
.bpf-im-close,
.bpf-cf-modal__close,
.bpf-help-popover__close {
    color: #fff !important;
}

/* ── Survol et focus clavier : meme rouge partout ── */
.vrnq-modal-x:hover,
.vrnq-modal-x:focus-visible,
.bpf-cm-x-of:hover,
.bpf-cm-x-of:focus-visible,
.bpf-um-modal__close:hover,
.bpf-um-modal__close:focus-visible,
.bpf-im-close:hover,
.bpf-im-close:focus-visible,
.bpf-cf-modal__close:hover,
.bpf-cf-modal__close:focus-visible,
.bpf-help-popover__close:hover,
.bpf-help-popover__close:focus-visible {
    color: var(--bpf-danger) !important;
}

/* FOCUS TOUJOURS VISIBLE, et pas seulement par la couleur : un daltonien
   deuteranope ne distingue pas le passage du navy au rouge. Le contour reste
   donc le signal principal, la couleur n'en est que le renfort. Les sources
   neutralisaient l'outline en `!important` ; il est retabli ici. */
.vrnq-modal-x:focus-visible,
.bpf-cm-x-of:focus-visible,
.bpf-um-modal__close:focus-visible,
.bpf-im-close:focus-visible,
.bpf-cf-modal__close:focus-visible,
.bpf-help-popover__close:focus-visible {
    outline: 2px solid var(--bpf-danger) !important;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Gabarit : meme boite, meme glyphe, quel que soit le type de croix ──
   Les boites allaient de 26 a 32 pixels et les glyphes de 17 a 24 selon la
   modale, parce que chaque gabarit dimensionnait la sienne : un SVG a 24 ici,
   un SVG a 20 la, une entite a 24, des icones a 18 posees en style inline. Les
   croix se decalaient donc d'un ecran a l'autre, et la surface de clic variait
   du simple au double sur des boutons de fermeture.

   Les tailles ont ete RETIREES de chaque source, comme les couleurs : aucune
   ne concourt plus avec ce bloc, qui n'a donc besoin d'aucun `!important`.

   Le glyphe est fixe a 20px POUR LES TROIS TYPES : un SVG se dimensionne par
   width/height, une icone de fonte par font-size, un caractere par la
   font-size de son bouton. Trois proprietes pour un seul resultat visuel. */

.vrnq-modal-x,
.bpf-cm-x-of,
.bpf-um-modal__close,
.bpf-im-close,
.bpf-cf-modal__close,
.bpf-help-popover__close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    /* Porte le caractere ou l'entite (× de .bpf-cm-x-of et de la croix admin) ;
       sans effet sur un SVG ou une icone de fonte, qui se dimensionnent plus bas. */
    font-size: 20px;
}

.vrnq-modal-x svg,
.bpf-im-close svg,
.bpf-help-popover__close svg {
    width: 20px;
    height: 20px;
}

.vrnq-modal-x i,
.bpf-um-modal__close i,
.bpf-cf-modal__close i,
.bpf-help-popover__close i {
    font-size: 20px;
    line-height: 1;
}

/* NOTE sur `display` : trois sources posent `display:flex !important` pour
   forcer la visibilite du bouton face a Astra. Elles l'emportent donc sur le
   `inline-flex` ci-dessus. C'est SANS CONSEQUENCE visuelle : ces croix sont en
   position absolue, ou flex et inline-flex se rendent a l'identique. Ces
   `!important` ne sont pas retires : ils protegent la visibilite, pas la
   taille, et les toucher rouvrirait un probleme deja resolu. */

/* ══════════════════════════════════════════════════════════════════════════
   COMPOSANT MODALE UNIFIE : DEPLACE
   ══════════════════════════════════════════════════════════════════════════
   Le bloc `.vrnq-modal` vit desormais dans le PLUGIN, a
   `assets/css/vrnq-modal.css`, et non plus ici.

   RAISON : deux modales du composant vivent dans wp-admin (suppression et
   edition d'organisme), ou la feuille du THEME n'est jamais chargee. Tant que
   le composant habitait ici, il leur etait structurellement inatteignable, et
   la seule issue aurait ete d'en recopier cent lignes dans un bloc `<style>`
   d'administration, donc d'avoir deux composants au lieu d'un.

   Le fichier deplace redeclare ses propres jetons de couleur : les variables
   `--bpf-*` sont definies dans le `:root` de CETTE feuille, absente de
   l'administration.

   Les regles de COULEUR et de TAILLE des croix (.vrnq-modal-x) restent ici :
   elles servent les quinze modales du front, migrees ou non.
   ────────────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────────────────────────────────────
   REDUIRE LES ANIMATIONS : GARDE GLOBALE
   ──────────────────────────────────────────────────────────────────────────
   Le systeme d'exploitation expose un reglage « reduire les animations ». Le
   respecter n'est pas une politesse : le mouvement declenche nausees et
   vertiges chez les personnes sujettes aux troubles vestibulaires, et une
   animation qui boucle sans fin est le pire cas.

   POURQUOI UNE REGLE UNIVERSELLE, ET NON UNE LISTE. `vrnq-anim.css` gerait
   deja ses deux blocs, mais des keyframes vivent en clair dans des balises
   `<style>` du plugin, hors de portee de toute feuille : le badge de l'accueil
   (`bpf-float-anim`, 3 s, infinite alternate) tournait donc en boucle malgre le
   reglage. Enumerer les animations aurait condamne a completer la liste a
   chaque ajout, et une omission ne se voit pas : elle ne gene que la personne
   concernee, qui ne la signalera pas. La regle universelle inverse la charge —
   toute animation future est couverte d'office, et seule une exception se
   declare.

   POURQUOI ICI ET NON DANS `vrnq-anim.css`. Cette derniere n'est chargee que
   sur l'accueil, les tarifs et la page de vente (`functions.php`). La garde y
   aurait laisse dehors le tableau de bord, le tunnel, les modales et Claire.
   `style.css` est enfilee sans condition sur tout le front : c'est la seule
   position d'ou « globale » soit vrai.

   PORTEE : le front uniquement. L'administration WordPress ne charge pas la
   feuille du theme ; ses quelques rouets y restent animes, ce qui est sans
   consequence pour le public.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* EXCEPTION : LES INDICATEURS D'ATTENTE CONTINUENT DE TOURNER.
       Un rouet ne decore pas, il informe : il dit « c'est en cours, ne
       recommencez pas ». Fige, il devient un disque immobile, et l'application
       parait plantee au moment precis ou elle travaille — on reclique, on
       relance un paiement. Ce mouvement est REPUTE SUR : quelques pixels, une
       rotation sur place, aucun deplacement dans le champ de vision, ce qui
       n'est pas ce qui declenche le mal des transports visuel. WCAG 2.3.3 vise
       le mouvement NON ESSENTIEL ; celui-ci porte une information.
       On ralentit tout de meme d'un tiers, par egard pour le reglage.

       `[class*="spinner"]` attrape .bpf-spinner, .bpf-im-spinner et
       .fa-spinner d'un seul tenant ; `[style*="spin"]` rattrape les rouets
       poses en style en ligne par le JS (tunnel step1, administration), que
       nul selecteur de classe ne peut viser. Le `!important` de la feuille
       l'emporte sur un style en ligne SANS `!important`, donc l'exception
       tient meme la.

       NE PAS y ajouter d'animation decorative : l'engrenage de la page de
       maintenance, la barre indeterminee de cette meme page, le halo des
       cartes et le badge flottant de l'accueil n'informent de rien et doivent
       rester neutralises. */
    [class*="spinner"],
    [style*="spin"],
    .vrnq-cb__typing span {
        animation-duration: 1.2s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ── Conditions d'abonnement en pastilles : /tarifs/ ET accueil (même bloc HTML) ── */
.bpf-tarifs__facts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 6px}
.bpf-fact{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#1f2d5c;background:#eef1f8;border:1px solid #dfe4f2;border-radius:999px;padding:6px 13px;line-height:1.2}
.bpf-fact i{font-size:12px;color:#223C8F}
/* Accueil seulement : air sous le bandeau d'offre. PADDING et non margin : la marge basse du
   bandeau (.vrnq-promo, 18px) FUSIONNERAIT avec un margin-top, et l'ecart ne bougerait pas. */
.bpf-tarifs__facts--accueil{padding-top:20px;margin-bottom:30px} /* 30px = l'air que donnait la ligne confiance retirée, avant « Comparer les offres » */
/* /tarifs/ seulement : air entre les pastilles et l'encadré jaune (.bpf-tarifs__disclaimer).
   Sélecteur à DEUX classes exprès : la règle `.bpf-tarifs__mentions > *` de page-forfaits.php
   pèse autant que `.bpf-tarifs__facts`, et l'ordre de chargement déciderait seul du gagnant. */
.bpf-tarifs__mentions > .bpf-tarifs__facts{margin-bottom:24px}