/**
 * veillernq-dashboard.css — Charte DSFR complète pour le dashboard BPF-Facile.fr
 *
 * Couverture :
 *   - Layout principal (sidebar + zone contenu)
 *   - KPI cards (fond blanc, bordure gauche 4px)
 *   - Badges statuts (plans, formations, abonnements)
 *   - Tables formations / stagiaires
 *   - Countdown 30 avril (3 états couleur)
 *   - Barres de progression (complétude Cerfa)
 *   - Notices / alertes DSFR
 *   - Formulaires wizard (surcharges Gravity Forms)
 *   - Responsive (1024px / 640px)
 *
 * Source charte : Spécification BPF-FACILE v6 — "CHARTE GRAPHIQUE — DSFR"
 * Variables CSS définies dans bpf-facile-child/style.css
 *
 * ⚠️ DATE LIMITE BPF : 30 AVRIL — Source : Cerfa 10443*17 p.1
 *
 * @package    VeilleRNQ_Facile
 * @since      1.0.0
 * @copyright  2026 12H CONSULTING by PORTAGE D'OC — SIRET 79919884100030
 */

/* ════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════════════════════════ */

.bpf-page,
.bpf-page * {
    box-sizing: border-box;
}

.bpf-page {
    font-family: var(--bpf-font-family, 'Inter', system-ui, -apple-system, Arial, sans-serif);
    font-size: var(--bpf-font-size-base, 16px);
    color: var(--bpf-text, #161616);
    line-height: var(--bpf-line-height, 1.6);
}

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

.bpf-dashboard-layout {
    display: flex;
    min-height: 100vh;
    background: var(--bpf-bg-light, #F6F6F6);
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.bpf-sidebar {
    width: var(--bpf-sidebar-width, 260px);
    min-height: 100vh;
    background: var(--bpf-primary, #223C8F);
    color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 0.3s ease;
}

.bpf-sidebar-header {
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.bpf-sidebar-logo {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    display: block;
    letter-spacing: -0.3px;
}

.bpf-sidebar-logo:hover { color: #ffffff; text-decoration: none; }

.bpf-sidebar-of-name {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Navigation sidebar ──────────────────────────────────────────────── */
.bpf-sidebar-nav {
    flex: 1;
    padding: 12px 0;
    list-style: none;
    margin: 0;
}

.bpf-sidebar-nav li { margin: 0; }

.bpf-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    border-left: 3px solid transparent;
    transition: background-color 0.18s, color 0.18s, border-left-color 0.18s;
}

.bpf-sidebar-nav a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
}

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

.bpf-sidebar-nav a .bpf-nav-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Séparateur sidebar ──────────────────────────────────────────────── */
.bpf-sidebar-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 8px 16px;
}

/* ── Zone contenu principal ──────────────────────────────────────────── */
.bpf-main-content {
    margin-left: var(--bpf-sidebar-width, 260px);
    flex: 1;
    padding: 32px 28px;
    min-height: 100vh;
    background: var(--bpf-bg-light, #F6F6F6);
}

/* ── Bouton hamburger mobile ─────────────────────────────────────────── */
.bpf-sidebar-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 300;
    background: var(--bpf-primary, #223C8F);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

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

.bpf-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}

.bpf-kpi-card {
    background: #ffffff;
    border-left: 4px solid var(--bpf-primary, #223C8F);
    border-radius: var(--bpf-radius-md, 6px);
    padding: 16px 20px;
    box-shadow: var(--bpf-shadow-sm, 0 1px 4px rgba(0,0,0,.07));
    transition: box-shadow 0.2s;
    position: relative;
}

.bpf-kpi-card:hover {
    box-shadow: 0 4px 16px rgba(34, 60, 143, 0.12);
}

.bpf-kpi-card--danger  { border-left-color: var(--bpf-danger, #E1000F); }
.bpf-kpi-card--success { border-left-color: var(--bpf-success, #18753C); }
.bpf-kpi-card--warning { border-left-color: var(--bpf-warning, #B34000); }
.bpf-kpi-card--info    { border-left-color: var(--bpf-info, #3A57C7); }

.bpf-kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bpf-text-secondary, #666666);
    margin-bottom: 6px;
}

.bpf-kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--bpf-primary, #223C8F);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.bpf-kpi-card--danger  .bpf-kpi-value { color: var(--bpf-danger, #E1000F); }
.bpf-kpi-card--success .bpf-kpi-value { color: var(--bpf-success, #18753C); }
.bpf-kpi-card--warning .bpf-kpi-value { color: var(--bpf-warning, #B34000); }

.bpf-kpi-sub {
    font-size: 12px;
    color: var(--bpf-text-secondary, #666666);
    margin-top: 4px;
}

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

.bpf-countdown {
    border-radius: var(--bpf-radius-md, 6px);
    padding: 14px 20px;
    margin-bottom: 24px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.5;
}

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

/* ≤ 30 jours : orange warning + icône pulsante */
.bpf-countdown--warning { background: var(--bpf-warning, #B34000); }

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

/* Icône pulsante CSS pour état warning */
.bpf-countdown-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFE066;
    flex-shrink: 0;
    animation: bpf-pulse-dot 1.2s ease-in-out infinite;
}

@keyframes bpf-pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.6); opacity: 0.6; }
}

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

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

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

.bpf-progress-fill--warning { background: var(--bpf-warning, #B34000); }
.bpf-progress-fill--success { background: var(--bpf-success, #18753C); }
.bpf-progress-fill--danger  { background: var(--bpf-danger, #E1000F); }

/* ════════════════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════════════════ */

.bpf-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.6;
}

/* Statuts formations */
.bpf-badge--brouillon   { background: #F0F0F0; color: var(--bpf-text-secondary, #666); }
.bpf-badge--complete    { background: var(--bpf-primary-light, #ECEFF8); color: var(--bpf-primary, #223C8F); }
.bpf-badge--validee     { background: var(--bpf-success-light, #E8F9EF); color: var(--bpf-success, #18753C); }
.bpf-badge--depose      { background: #E8F9EF; color: #18753C; border: 1px solid #18753C; }
.bpf-badge--annule      { background: var(--bpf-warning-light, #FFF3E0); color: var(--bpf-warning, #B34000); }
.bpf-badge--expire      { background: var(--bpf-danger-light, #FFF0F0); color: var(--bpf-danger, #E1000F); }

/* Statuts abonnements */
.bpf-badge--actif       { background: var(--bpf-success-light, #E8F9EF); color: var(--bpf-success, #18753C); }
.bpf-badge--essai       { background: #E8F0FB; color: var(--bpf-info, #3A57C7); }

/* Plans */
.bpf-badge--gratuit     { background: rgba(255,255,255,.15); color: #555; border: 1px solid #CCC; }
.bpf-badge--independant { background: var(--bpf-success, #18753C); color: #fff; }
.bpf-badge--monosite    { background: var(--bpf-info, #3A57C7); color: #fff; }
.bpf-badge--multisite   { background: var(--bpf-warning, #B34000); color: #fff; }

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

.bpf-table-wrap {
    background: #ffffff;
    border-radius: var(--bpf-radius-md, 6px);
    box-shadow: var(--bpf-shadow-sm, 0 1px 4px rgba(0,0,0,.07));
    overflow: hidden;
    margin-bottom: 24px;
}

.bpf-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bpf-border, #DDDDDD);
    flex-wrap: wrap;
    gap: 8px;
}

.bpf-table-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--bpf-primary, #223C8F);
    margin: 0;
}

.bpf-table-scroll { overflow-x: auto; }

.bpf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #ffffff;
}

.bpf-table th {
    background: var(--bpf-primary, #223C8F);
    color: #ffffff;
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border-bottom: 2px solid var(--bpf-primary, #223C8F);
}

.bpf-table th:first-child { border-radius: 0; }

.bpf-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #F0F0F0;
    vertical-align: middle;
    color: var(--bpf-text, #161616);
}

.bpf-table tr:last-child td    { border-bottom: none; }
.bpf-table tr:nth-child(even) td { background: #FAFAFA; }
.bpf-table tr:hover td           { background: #F4F4FD; }

.bpf-table tr.bpf-table-total td {
    font-weight: 700;
    color: var(--bpf-primary, #223C8F);
    background: var(--bpf-primary-light, #ECEFF8);
    border-top: 2px solid var(--bpf-primary, #223C8F);
}

/* ── Cellule code NSF ────────────────────────────────────────────────── */
.bpf-nsf-code {
    font-family: 'Courier New', monospace;
    background: #F0F0FB;
    color: var(--bpf-primary, #223C8F);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* ── Montants ────────────────────────────────────────────────────────── */
.bpf-amount {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

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

.bpf-notice {
    border-radius: var(--bpf-radius-md, 6px);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.55;
}

.bpf-notice-primary { background: #ECEFF8; border-left: 4px solid var(--bpf-primary, #223C8F); }
.bpf-notice-warning { background: #FFF3E0; border-left: 4px solid var(--bpf-warning, #B34000); }
.bpf-notice-danger  { background: #FFF0F0; border-left: 4px solid var(--bpf-danger, #E1000F);  }
.bpf-notice-success { background: #E8F9EF; border-left: 4px solid var(--bpf-success, #18753C); }
.bpf-notice-info    { background: #E8F0FB; border-left: 4px solid var(--bpf-info, #3A57C7);    }

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

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

/* Surcharges GF pour charte DSFR */
.bpf-wizard .gform_wrapper,
.bpf-form-saisie-formation .gform_wrapper {
    font-family: var(--bpf-font-family, 'Inter', system-ui, Arial, sans-serif) !important;
    max-width: 100% !important;
}

.bpf-wizard .gform_page_footer,
.bpf-wizard .gform_footer {
    border-top: 1px solid var(--bpf-border, #DDDDDD);
    padding-top: 20px;
    margin-top: 20px;
}

.bpf-wizard .gform_button,
.bpf-wizard input[type="submit"] {
    background: var(--bpf-primary, #223C8F) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--bpf-radius-sm, 4px) !important;
    padding: 10px 24px !important;
    font-family: var(--bpf-font-family, inherit) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background-color 0.18s !important;
}

.bpf-wizard .gform_button:hover,
.bpf-wizard input[type="submit"]:hover {
    background: #172A66 !important;
}

/* Étapes wizard */
.bpf-wizard .gf_step { color: var(--bpf-primary, #223C8F); }
.bpf-wizard .gf_step_active { font-weight: 700; }

/* Champs focus */
.bpf-wizard input:focus,
.bpf-wizard select:focus,
.bpf-wizard textarea:focus {
    outline: 3px solid var(--bpf-primary, #223C8F) !important;
    outline-offset: 2px !important;
    border-color: var(--bpf-primary, #223C8F) !important;
}

/* NSF Chained Select */
.bpf-nsf-serie,
.bpf-nsf-code,
.bpf-nsf-libelle {
    border: 1px solid var(--bpf-border, #DDDDDD);
    border-radius: var(--bpf-radius-sm, 4px);
    padding: 8px 12px;
    font-size: 14px;
    width: 100%;
    transition: border-color 0.18s;
}

.bpf-nsf-libelle { background: #F8F8FB; color: var(--bpf-text-secondary, #666); }

/* ════════════════════════════════════════════════════════════════════════
   PAGE GÉNÉRATION BPF — RÉCAPITULATIF CADRES
   ════════════════════════════════════════════════════════════════════════ */

.bpf-cadre-card {
    background: #ffffff;
    border-radius: var(--bpf-radius-md, 6px);
    overflow: hidden;
    box-shadow: var(--bpf-shadow-sm, 0 1px 4px rgba(0,0,0,.07));
    transition: box-shadow 0.2s;
}

.bpf-cadre-card:hover { box-shadow: 0 2px 10px rgba(34,60,143,.08); }

.bpf-cadre-card--ok { border: 1px solid #D9E4FF; }
.bpf-cadre-card--ko { border: 1px solid #F0C0C0; }

.bpf-cadre-header {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bpf-cadre-header--ok { background: var(--bpf-primary, #223C8F); }
.bpf-cadre-header--ko { background: var(--bpf-danger, #E1000F); }

/* Bouton Générer PDF — désactivé/actif */
#bpf-btn-generer-pdf {
    background: #CCCCCC;
    color: #777777;
    border: none;
    border-radius: var(--bpf-radius-sm, 4px);
    padding: 12px 24px;
    font-family: var(--bpf-font-family, inherit);
    font-size: 15px;
    font-weight: 700;
    cursor: not-allowed;
    transition: background 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#bpf-btn-generer-pdf.active {
    background: var(--bpf-primary, #223C8F);
    color: #ffffff;
    cursor: pointer;
}

#bpf-btn-generer-pdf.active:hover { background: #172A66; }
#bpf-btn-generer-pdf.loading { background: #172A66; color: #ffffff; cursor: wait; }

/* Spinner génération PDF */
.bpf-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(34, 60, 143, 0.2);
    border-top-color: var(--bpf-primary, #223C8F);
    border-radius: 50%;
    animation: bpf-spin 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes bpf-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════
   CARTES TARIFS — PAGE DE VENTE
   ════════════════════════════════════════════════════════════════════════ */

.bpf-tarif-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 28px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    position: relative;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.bpf-tarif-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(34,60,143,.1); }
.bpf-tarif-card--highlight { border: 2px solid var(--bpf-primary, #223C8F); }

/* ════════════════════════════════════════════════════════════════════════
   TOGGLE TARIFS MENSUEL/ANNUEL
   ════════════════════════════════════════════════════════════════════════ */

.bpf-tarifs-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 24px 0 40px;
    font-size: 14px;
    font-weight: 700;
}

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

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

.bpf-toggle-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #DDDDDD;
    border-radius: 28px;
    transition: background 0.2s;
}

.bpf-toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    bottom: 4px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.bpf-toggle-switch input:checked + .bpf-toggle-slider { background: var(--bpf-primary, #223C8F); }
.bpf-toggle-switch input:checked + .bpf-toggle-slider::before { transform: translateX(24px); }
.bpf-toggle-switch input:focus-visible + .bpf-toggle-slider {
    outline: 3px solid var(--bpf-primary, #223C8F);
    outline-offset: 2px;
}

/* Badge "2 mois offerts" */
.bpf-badge-promo {
    display: inline-block;
    background: var(--bpf-success, #18753C);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    letter-spacing: 0.03em;
}

/* ════════════════════════════════════════════════════════════════════════
   LIENS D'ACTION
   ════════════════════════════════════════════════════════════════════════ */

.bpf-link { color: var(--bpf-primary, #223C8F); text-decoration: underline; }
.bpf-link:hover { color: #172A66; }

.bpf-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--bpf-radius-sm, 4px);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.18s;
}

.bpf-btn-sm--primary { background: var(--bpf-primary, #223C8F); color: #fff; border-color: var(--bpf-primary, #223C8F); }
.bpf-btn-sm--primary:hover { background: #172A66; color: #fff; }
.bpf-btn-sm--outline-primary { background: transparent; color: var(--bpf-primary, #223C8F); border-color: var(--bpf-primary, #223C8F); }
.bpf-btn-sm--outline-primary:hover { background: #ECEFF8; }
.bpf-btn-sm--success { background: var(--bpf-success, #18753C); color: #fff; }
.bpf-btn-sm--success:hover { background: #125C30; color: #fff; }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .bpf-sidebar {
        transform: translateX(-100%);
    }

    .bpf-sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,.18);
    }

    .bpf-main-content {
        margin-left: 0;
        padding: 20px 16px;
    }

    .bpf-sidebar-toggle {
        display: flex;
    }

    .bpf-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bpf-kpi-grid {
        grid-template-columns: 1fr;
    }

    .bpf-table th,
    .bpf-table td {
        padding: 8px 10px;
        font-size: 12px;
    }

    .bpf-main-content {
        padding: 16px 12px;
    }
}

/* Overlay mobile (ferme la sidebar au clic en dehors) */
.bpf-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 150;
}

.bpf-sidebar-overlay.active {
    display: block;
}

/* ── Chips méta (contexte structure / plan…) — SOURCE UNIQUE partagée ─────────
   Chargé sur /mon-espace/ (accueil) ET /mon-compte/ (bandeau structure Option B).
   Déplacé depuis le <style> inline de veille-home.php pour être strictement identique
   aux deux emplacements. Les styles de sélecteur natif (#vrnq-org-switch / #bpfa-org-switch)
   restent PROPRES à chaque page (id spécifique). */
/* CLASSE DOUBLEE, ET NE PAS L'APLATIR. Ce chip est rendu sur « Mes veilles » ET dans la
   barre du compte. Or la page « Mon compte » ouvre par un reset `.bpfa * { padding:0 }`
   qui pese (0,1,0) comme une simple classe, et qui est emis INLINE DANS LE CORPS, donc
   APRES cette feuille. A egalite, le dernier arrive gagne : le retrait du chip y tombait
   a zero et le selecteur d'organisme apparaissait ecrase. Meme defaut et meme correctif
   que le composant modale (ec87917). Doublee, la classe pese (0,2,0) et passe devant.
   Sur « Mes veilles », ou le reset n'existe pas, le rendu est rigoureusement identique. */
.vrnq-chip-meta.vrnq-chip-meta { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; min-height: 32px; border-radius: 999px; box-sizing: border-box; font-size: .8rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.vrnq-chip-meta i { font-size: .74rem; opacity: .85; }
.vrnq-chip-meta--org { background: #F8F9FB; color: #333; font-weight: 600; border: 1.5px solid #E5E5EA; max-width: 340px; }
.vrnq-chip-meta--org span { overflow: hidden; text-overflow: ellipsis; }

/* ── LE CHIP S'EFFACE QUAND IL PORTE LE SELECTEUR D'ORGANISME ────────────────
   Le selecteur apporte desormais SA PROPRE boite : fond blanc, bordure #D7DEEE, rayon 10.
   Laisser le chip par-dessus donnerait deux boites emboitees, une pilule grise autour d'un
   rectangle blanc. Le chip redevient donc un simple conteneur : il garde sa place dans la
   rangee, il n'a plus d'apparence.

   POURQUOI `:has()` ET NON UNE CLASSE POSEE SUR LES TROIS ECRANS. Les trois surfaces qui
   affichent ce selecteur rendent le meme chip ; les modifier une par une, c'est trois
   fichiers a garder d'accord, et la porte ouverte a la variante par page que ce composant a
   deja payee cher. `:has()` deduit la meme chose depuis le contenu, en un seul endroit.

   ET POURQUOI CE N'EST PAS UN RISQUE : `:has()` est un selecteur, evalue au rendu comme
   n'importe quel autre. Sur un navigateur qui l'ignorerait, la regle est simplement sautee
   et le chip garde son fond : deux boites, c'est inelegant mais parfaitement utilisable.
   Aucune fonction n'en depend.

   L'ICONE DE BATIMENT tombe avec le reste, et c'est voulu : elle etait la meme pour tous
   les organismes, donc muette, et la pastille a initiale qui la remplace, elle, dit lequel
   est actif. */
/* DEUX OCCUPANTS POSSIBLES POUR CE SLOT, ET IL S'EFFACE DEVANT LES DEUX : le selecteur pour
   un compte Reseau, le chip statique pour les autres. Tous deux apportent leur propre boite
   blanche ; si l'enveloppe gardait la sienne, on verrait une pilule grise autour d'un
   rectangle blanc. Oublier le second selecteur ne casserait rien de fonctionnel, mais
   donnerait deux boites emboitees aux comptes non-Reseau, c'est-a-dire a la majorite. */
.vrnq-chip-meta--org:has(.vrnq-orgdd),
.vrnq-chip-meta--org:has(.vrnq-orgdd-statique) {
	padding: 0; min-height: 0; max-width: none;
	background: none; border: 0; border-radius: 0;
}
.vrnq-chip-meta--org:has(.vrnq-orgdd) > i,
.vrnq-chip-meta--org:has(.vrnq-orgdd-statique) > i { display: none; }
.vrnq-chip-meta--plan { background: rgba(34,60,143,.08); color: #223C8F; border: 1.5px solid rgba(34,60,143,.4); }
/* Chip « annee en cours » — meme forme que les autres chips meta, ton NEUTRE a dessein :
   il informe d'un cadrage, il n'annonce ni un plan ni un role. Plus discret que le chip
   plan (fond navy) pour ne pas concurrencer l'organisme, qui reste l'information de tete. */
.vrnq-chip-meta--annee { background: #F4F5F9; color: #5C5C7A; border: 1.5px solid #E1E4EF; }

/* ── LIENS DE NAVIGATION DE LA LISTE — BOUTON À CONTOUR ─────────────────────────────
   « Voir mes veilles précédentes », « Revenir à l'essentiel », « … et N autres » font des
   gestes voisins : un seul traitement, défini ICI et nulle part ailleurs (trois styles
   inline divergents, c'était trois occasions de diverger encore).
   Contour plutôt que souligné : c'est une ACTION, pas une note de bas de page. */
/* ⚠️ JAMAIS DE SOULIGNEMENT SUR UN LIEN PRÉSENTÉ EN BOUTON — le contour est l'affordance,
   le souligné en ajouterait une seconde et ferait lire le bouton comme du texte cliquable.

   POURQUOI !important, ET PAS UNE MONTÉE EN SPÉCIFICITÉ. Astra pose
   `.ast-single-post .entry-content a { text-decoration: underline }`, soit (0,2,1), et ces
   liens vivent dans ce `.entry-content` : `.vrnq-lien-nav` (0,1,0) et sa chaîne d'états
   (0,2,0) PERDENT. Qualifier par l'ancêtre donnerait (0,2,1), donc une ÉGALITÉ dont
   l'arbitrage retomberait sur l'ordre de chargement — qu'un CSS injecté en tête peut
   inverser sans prévenir. Le fichier du thème enfant a déjà tranché ce cas exact pour
   `.vrnq-tri__opt` (veillernq-header-footer.css, ~l. 1839), après un premier dépôt qui
   avait échoué EN PROD. On reprend la même parade plutôt qu'une règle élégante qui a
   déjà perdu une fois.

   TOUS LES ÉTATS SONT NOMMÉS. En omettre un (:visited, :focus, :active) laisse le
   souligné revenir précisément là où personne ne regarde en recettant. */
.vrnq-lien-nav,
.vrnq-lien-nav:link,
.vrnq-lien-nav:visited,
.vrnq-lien-nav:hover,
.vrnq-lien-nav:focus,
.vrnq-lien-nav:focus-visible,
.vrnq-lien-nav:active { text-decoration: none !important; color: #223C8F; }
.vrnq-lien-nav { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1.5px solid #223C8F; border-radius: 22px; background: transparent; font-size: .82rem; font-weight: 600; line-height: 1; transition: background .15s ease; }
.vrnq-lien-nav:hover, .vrnq-lien-nav:focus { background: #ECEFF8; }
.vrnq-lien-nav i { font-size: .72rem; }

/* Cartes au-delà du cap de rendu : masquées jusqu'au clic, RENDUES quand même.
   ⚠️ Le masquage est CSS, pas un `hidden` serveur : sans JavaScript le lien reste une vraie
   navigation vers « ?tout=1 », où le serveur les rend toutes. Le contenu n'est donc jamais
   hors d'atteinte, quoi qu'il arrive au script. */
.vrnq-fold-reste { display: none; }
.vrnq-fold-reste.is-ouvert { display: block; }