/**
 * SYSTEME DE BOUTONS UNIFIE  .vrnq-b
 *
 * Une seule feuille pour tous les boutons d'ACTION du site, front et administration.
 * Elle remplace 301 regles eparpillees dans 25 fichiers, dont 21 blocs `<style>` inline.
 *
 * ── POURQUOI `.vrnq-b` ET NON `.vrnq-btn` ────────────────────────────────────
 * `.vrnq-btn` EXISTE DEJA, avec deux definitions incompatibles (veille-home.php et
 * veillernq-blog.php). Et surtout, `veillernq-header-footer.css` cible
 * `[class*="vrnq-btn"]` et `[class*="bpf-btn"]` PAR SOUS-CHAINE : tout nom contenant
 * « btn » heriterait de ces regles en `!important` sans qu'on l'ait demande. Deux
 * lettres de moins suppriment le probleme.
 *
 * ── LES QUATRE ETATS SONT ECRITS EN ENTIER, TOUJOURS ─────────────────────────
 * Repos, survol, actif, focus, plus desactive. Chacun redit FOND, BORDURE et TEXTE.
 * Ce n'est pas du zele : le theme parent habille `button:hover`, `button:focus` et
 * `button:active` avec sa propre couleur d'accent, et il gagne sur tout etat qu'on ne
 * declare pas. C'est ce qui avait rendu illisible la pastille de palier, ou le titre
 * restait navy et le prix GRIS sur un fond bleu pose par Astra.
 *
 * ⚠️ AUCUN `opacity` NI `filter` POUR UNE COULEUR D'ETAT. Les deux delavent le fond ET
 * le texte ensemble : le rapport de contraste calcule sur les couleurs declarees n'est
 * alors plus celui qui s'affiche. Seule exception, `:disabled` : un controle desactive
 * est explicitement hors du critere de contraste WCAG, et l'opacite y est la convention
 * qui le signale.
 *
 * ── CONTRASTES ───────────────────────────────────────────────────────────────
 * Les dix-sept etats de ce fichier ont ete calcules, pas estimes. Minimum 4,99:1
 * (rouge plein sous texte blanc), maximum 15,11:1. Tous AA au moins.
 */

/* ── JETONS REDECLARES SUR `:root` ───────────────────────────────────────────
   INDISPENSABLE, et pas une precaution. Cinq zones du site declarent leurs propres
   variables et ne partagent pas les memes noms : `.vsg` (board), `.bpfa` (compte),
   `.bpf-home` (accueil), `.vrnq-cb` (chatbot), et l'administration qui n'a ni le
   `:root` du theme enfant ni sa feuille. Un bouton qui lirait `var(--c-blue)` ou
   `var(--vsg-navy)` sortirait sans couleur des qu'il quitte sa zone.
   Les valeurs sont celles de la charte, elles doivent bouger avec elle. */
:root {
    --vrnq-b-navy:        #223C8F;
    --vrnq-b-navy-h:      #172A66;   /* survol : plus fonce, jamais plus clair */
    --vrnq-b-navy-a:      #132352;   /* pression */
    --vrnq-b-navy-bg:     #ECEFF8;   /* fond de survol du fantome */
    --vrnq-b-navy-bg-a:   #DCE3F5;   /* fond de pression du fantome */
    --vrnq-b-danger:      #E1000F;
    --vrnq-b-danger-h:    #B80010;
    --vrnq-b-danger-a:    #9C000E;
    --vrnq-b-danger-ink:  #B0000F;   /* rouge en TEXTE sur blanc : 7,36:1 */
    --vrnq-b-blanc:       #FFFFFF;
    /* VOILES BLANCS DU FOND SOMBRE. Les seuls jetons que la variante « on-dark » ajoute :
       tout le reste lui vient des couleurs deja declarees, le blanc et les deux teintes
       navy claires, employees a l'envers. Un fantome pose sur du navy ne peut pas prendre un
       fond opaque au survol sans devenir un bouton plein : c'est un voile qu'il lui faut,
       assez marque pour se voir, assez discret pour rester un contour. */
    --vrnq-b-od-voile:    rgba(255, 255, 255, .12);
    --vrnq-b-od-voile-a:  rgba(255, 255, 255, .20);
}

/* ══════════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════════
   Geometrie reprise TELLE QUELLE de `.vrnq-modal__btn` : rayon 10, retrait 10/18,
   graisse 600, 14px, bordure de 1px toujours declaree. Les boutons des modales et
   ceux des ecrans doivent etre le meme objet, sinon l'unification s'arrete a la porte
   de la premiere modale.

   `border` est declaree meme quand elle est transparente : sans elle, une variante a
   contour serait 2px plus haute que sa voisine pleine, et deux boutons cote a cote ne
   s'aligneraient pas.

   SPECIFICITE : la base est ecrite en (0,1,0), les etats en (0,2,0) grace aux
   pseudo-classes, et les variantes montent d'autant. Voir le bloc « ARMURE » plus bas
   pour ce qui doit passer devant le theme parent. */
.vrnq-b {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    /* CIBLE TACTILE DE 44px, et ce n'est pas un choix esthetique.
       Le systeme etait calibre sur `.vrnq-modal__btn`, haut de 36px, ce qui convient dans
       une modale ou l'on vise au pointeur. Mais `.bpf-btn`, la famille du compte, portait
       deja `min-height:44px` avec un commentaire qui l'assume comme un choix
       d'accessibilite : c'est la recommandation de taille de cible au doigt. Convertir le
       compte sans reprendre ce plancher aurait RETRECI vingt-deux boutons.
       On garde donc le plus exigeant des deux. Les boutons des modales ne bougent pas,
       ils portent une autre classe. */
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    /* UN LIBELLE DE BOUTON NE SE COUPE PAS. Sans cela, « + Proposer une idee » se replie
       en deux lignes des que la rangee se resserre, et le bouton se deforme au lieu de
       passer a la ligne suivante. C'est au CONTENEUR de replier ses elements, pas au
       bouton de replier son texte. Manque revele par le premier ecran converti. */
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* AUCUN SOULIGNEMENT, DANS AUCUN ETAT.
   ⚠️ TRIPLE CLASSE, ET NE PAS LA REDUIRE. Ce n'est pas une precaution, c'est une mesure.

   La moitie de ces boutons sont des `<a>`, et le theme parent souligne les liens du
   contenu de page. J'avais estime son selecteur a `.entry-content a`, soit (0,1,1), et
   deux classes suffisaient donc a passer devant. C'ETAIT SOUS-EVALUE : Astra ecrit
   `.ast-single-post .entry-content a`, qui pese (0,2,1). Face a `.vrnq-b:link` a (0,2,0),
   l'element `a` fait la difference et le theme gagne. Resultat visible : « Changer mon
   forfait » sortait souligne dans l'espace compte.

   Trois classes pesent (0,3,0), et (0,4,0) avec une pseudo-classe : au-dessus de (0,2,1)
   comme de toute variante a `:not()` qu'Astra emploierait ailleurs. Gagne par SPECIFICITE
   et jamais par `!important`, convention du projet, meme approche que b4d60ec sur les
   onglets du board.

   TOUS LES ETATS sont listes parce que ces boutons sont des liens : `:link` et `:visited`
   ne sont pas decoratifs ici, ce sont les deux etats qu'un `<a href>` occupe reellement au
   repos, et le theme les cible tous les deux.

   LES COULEURS, elles, n'ont pas ce probleme : le bloc « ARMURE » plus bas les ecrit deja
   en (0,3,0), donc au-dessus de (0,2,1). Seul le soulignement etait reste en dessous. */
.vrnq-b.vrnq-b.vrnq-b,
.vrnq-b.vrnq-b.vrnq-b:link,
.vrnq-b.vrnq-b.vrnq-b:visited,
.vrnq-b.vrnq-b.vrnq-b:hover,
.vrnq-b.vrnq-b.vrnq-b:focus,
.vrnq-b.vrnq-b.vrnq-b:focus-visible,
.vrnq-b.vrnq-b.vrnq-b:active { text-decoration: none; }

/* FOCUS CLAVIER, IDENTIQUE SUR TOUTES LES VARIANTES.
   Un contour, et pas seulement un changement de couleur : un daltonien deuteranope ne
   distingue pas le passage du navy au rouge. Meme raison que le bloc des croix de
   modale dans style.css. */
.vrnq-b:focus-visible {
    outline: 2px solid var(--vrnq-b-navy);
    outline-offset: 2px;
}

/* DESACTIVE : seul emploi autorise de l'opacite dans cette feuille. */
.vrnq-b:disabled,
.vrnq-b[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
}

/* ── Tailles ── */
/* La petite taille descend a 32px : elle sert aux actions de rang secondaire posees dans
   une rangee dense (une ligne de tableau, une carte de facture), ou 44px ecraserait la
   rangee. Elle reste au-dessus du minimum AA de 24px. */
.vrnq-b--sm  { padding: 6px 12px;  font-size: 13px; border-radius: 8px; min-height: 32px; }
.vrnq-b--lg  { padding: 13px 24px; font-size: 15px; }
/* Pleine largeur : utile dans une carte de prix ou un pied de formulaire etroit. */
.vrnq-b--bloc { display: flex; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE 1  --primary  ·  l'action principale
   repos 9,95:1   survol 13,47:1   actif 15,11:1
   ══════════════════════════════════════════════════════════════════════════ */
.vrnq-b--primary,
.vrnq-b--primary:link,
.vrnq-b--primary:visited {
    background-color: var(--vrnq-b-navy);
    border-color: var(--vrnq-b-navy);
    color: var(--vrnq-b-blanc);
}
.vrnq-b--primary:hover,
.vrnq-b--primary:focus,
.vrnq-b--primary:focus-visible {
    background-color: var(--vrnq-b-navy-h);
    border-color: var(--vrnq-b-navy-h);
    color: var(--vrnq-b-blanc);
}
.vrnq-b--primary:active {
    background-color: var(--vrnq-b-navy-a);
    border-color: var(--vrnq-b-navy-a);
    color: var(--vrnq-b-blanc);
}

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE 2  --ghost  ·  l'action secondaire, « Annuler » en tete
   repos 9,95:1   survol 8,65:1   actif 7,74:1
   ══════════════════════════════════════════════════════════════════════════ */
.vrnq-b--ghost,
.vrnq-b--ghost:link,
.vrnq-b--ghost:visited {
    background-color: var(--vrnq-b-blanc);
    border-color: var(--vrnq-b-navy);
    color: var(--vrnq-b-navy);
}
.vrnq-b--ghost:hover,
.vrnq-b--ghost:focus,
.vrnq-b--ghost:focus-visible {
    background-color: var(--vrnq-b-navy-bg);
    border-color: var(--vrnq-b-navy);
    color: var(--vrnq-b-navy);
}
.vrnq-b--ghost:active {
    background-color: var(--vrnq-b-navy-bg-a);
    border-color: var(--vrnq-b-navy);
    color: var(--vrnq-b-navy);
}

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE 3  --danger  ·  le destructif assume
   repos 4,99:1   survol 6,90:1   actif 8,68:1
   Le rouge plein sous texte blanc est le plancher du systeme. Il passe AA, et
   c'est le rouge de la charte : on ne le change pas pour gagner du contraste.
   ══════════════════════════════════════════════════════════════════════════ */
.vrnq-b--danger,
.vrnq-b--danger:link,
.vrnq-b--danger:visited {
    background-color: var(--vrnq-b-danger);
    border-color: var(--vrnq-b-danger);
    color: var(--vrnq-b-blanc);
}
.vrnq-b--danger:hover,
.vrnq-b--danger:focus,
.vrnq-b--danger:focus-visible {
    background-color: var(--vrnq-b-danger-h);
    border-color: var(--vrnq-b-danger-h);
    color: var(--vrnq-b-blanc);
}
.vrnq-b--danger:active {
    background-color: var(--vrnq-b-danger-a);
    border-color: var(--vrnq-b-danger-a);
    color: var(--vrnq-b-blanc);
}
/* Le contour de focus passe au ROUGE sur les variantes rouges : un contour navy
   au bord d'un aplat rouge se lit mal, et il enverrait le mauvais signal. */
.vrnq-b--danger:focus-visible,
.vrnq-b--danger-ghost:focus-visible {
    outline-color: var(--vrnq-b-danger-a);
}

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE 4  --danger-ghost  ·  destructif de second rang, ou action sensible
   repos 7,36:1   survol 4,99:1   actif 6,90:1
   Le texte au repos est #B0000F et non #E1000F : le rouge de la charte sur blanc
   ne fait que 4,53:1, tout juste AA et fragile au moindre ecart de rendu. La
   version foncee monte a 7,36 sans changer de famille.
   ══════════════════════════════════════════════════════════════════════════ */
.vrnq-b--danger-ghost,
.vrnq-b--danger-ghost:link,
.vrnq-b--danger-ghost:visited {
    background-color: var(--vrnq-b-blanc);
    border-color: var(--vrnq-b-danger);
    color: var(--vrnq-b-danger-ink);
}
.vrnq-b--danger-ghost:hover,
.vrnq-b--danger-ghost:focus,
.vrnq-b--danger-ghost:focus-visible {
    background-color: var(--vrnq-b-danger);
    border-color: var(--vrnq-b-danger);
    color: var(--vrnq-b-blanc);
}
.vrnq-b--danger-ghost:active {
    background-color: var(--vrnq-b-danger-h);
    border-color: var(--vrnq-b-danger-h);
    color: var(--vrnq-b-blanc);
}

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE 5  --lien  ·  une action mineure, sans poids visuel
   repos 9,95:1   survol 13,47:1   actif 15,11:1
   NON SOULIGNEE, contrairement a un lien de texte : c'est un BOUTON, il se
   designe par sa position et son libelle. La regle « les liens inline gardent
   leur soulignement » ne vise pas les boutons.
   ══════════════════════════════════════════════════════════════════════════ */
.vrnq-b--lien,
.vrnq-b--lien:link,
.vrnq-b--lien:visited {
    background-color: transparent;
    border-color: transparent;
    color: var(--vrnq-b-navy);
    padding-left: 4px;
    padding-right: 4px;
}
.vrnq-b--lien:hover,
.vrnq-b--lien:focus,
.vrnq-b--lien:focus-visible {
    background-color: transparent;
    border-color: transparent;
    color: var(--vrnq-b-navy-h);
}
.vrnq-b--lien:active {
    background-color: transparent;
    border-color: transparent;
    color: var(--vrnq-b-navy-a);
}

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE 6  --icone  ·  un glyphe seul, sans libelle
   repos 9,95:1   survol 4,99:1
   32px de boite pour 20px de glyphe : la surface de clic reste au-dessus du
   minimum confortable, meme quand le glyphe est petit.
   ⚠️ UN BOUTON-ICONE EXIGE UN `aria-label`. Sans libelle visible, c'est la seule
   chose qui le nomme. La feuille ne peut pas l'imposer, le balisage doit le porter.
   ══════════════════════════════════════════════════════════════════════════ */
.vrnq-b--icone {
    width: 32px;
    height: 32px;
    min-height: 0;   /* le carre de 32px prime sur le plancher de la base */
    padding: 0;
    gap: 0;
    border-radius: 8px;
    background-color: transparent;
    border-color: transparent;
    color: var(--vrnq-b-navy);
    font-size: 20px;
}
.vrnq-b--icone svg { width: 20px; height: 20px; }
.vrnq-b--icone:hover,
.vrnq-b--icone:focus,
.vrnq-b--icone:focus-visible {
    background-color: transparent;
    border-color: transparent;
    color: var(--vrnq-b-danger);
}
.vrnq-b--icone:active {
    background-color: transparent;
    border-color: transparent;
    color: var(--vrnq-b-danger-h);
}

/* ══════════════════════════════════════════════════════════════════════════
   ARMURE  ·  passer devant le theme parent et le reset du compte
   ══════════════════════════════════════════════════════════════════════════
   NE PAS APLATIR CES SELECTEURS. Le doublement de classe n'est pas une coquette,
   c'est ce qui rend le systeme utilisable dans les cinq zones du site.

   TROIS ADVERSAIRES, tous rencontres et documentes ailleurs dans le projet :

   1. `.entry-content a` du theme parent, (0,1,1). Il recolore et souligne tout lien
      pose dans le contenu de page. Une classe simple, (0,1,0), perd. C'est ce qui
      faisait sortir les onglets du board en navy souligne (corrige en b4d60ec).

   2. `button:hover` / `:focus` / `:active` du theme parent. Il repeint tout etat non
      declare. Corrige au cas par cas jusqu'ici (7ba892d) ; ici, tous les etats sont
      declares, et l'armure garantit qu'ils gagnent.

   3. Le reset `.bpfa * { margin:0; padding:0 }` de la page « Mon compte », (0,1,0),
      emis INLINE DANS LE CORPS donc APRES cette feuille. A egalite de specificite, le
      dernier arrive gagne : le retrait des boutons y serait annule, et ils tomberaient
      a 16px de haut. C'est exactement ce qui est arrive au composant modale (ec87917).

   La classe doublee pese (0,2,0), les etats (0,3,0) : au-dessus des trois. */
.vrnq-b.vrnq-b {
    padding: 10px 18px;
    min-height: 44px;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    margin: 0;
}
.vrnq-b.vrnq-b--sm  { padding: 6px 12px;  font-size: 13px; border-radius: 8px; min-height: 32px; }
.vrnq-b.vrnq-b--lg  { padding: 13px 24px; font-size: 15px; }
.vrnq-b.vrnq-b--icone { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 8px; }

/* Les couleurs de chaque variante, redites au meme poids que la geometrie.
   Ecrire l'armure sur la seule geometrie aurait laisse le theme reprendre la main sur
   la couleur, ce qui est precisement le defaut le plus visible. */
.vrnq-b.vrnq-b--primary,
.vrnq-b.vrnq-b--primary:link,
.vrnq-b.vrnq-b--primary:visited { background-color: var(--vrnq-b-navy); border-color: var(--vrnq-b-navy); color: var(--vrnq-b-blanc); }
.vrnq-b.vrnq-b--primary:hover,
.vrnq-b.vrnq-b--primary:focus,
.vrnq-b.vrnq-b--primary:focus-visible { background-color: var(--vrnq-b-navy-h); border-color: var(--vrnq-b-navy-h); color: var(--vrnq-b-blanc); }
.vrnq-b.vrnq-b--primary:active { background-color: var(--vrnq-b-navy-a); border-color: var(--vrnq-b-navy-a); color: var(--vrnq-b-blanc); }

.vrnq-b.vrnq-b--ghost,
.vrnq-b.vrnq-b--ghost:link,
.vrnq-b.vrnq-b--ghost:visited { background-color: var(--vrnq-b-blanc); border-color: var(--vrnq-b-navy); color: var(--vrnq-b-navy); }
.vrnq-b.vrnq-b--ghost:hover,
.vrnq-b.vrnq-b--ghost:focus,
.vrnq-b.vrnq-b--ghost:focus-visible { background-color: var(--vrnq-b-navy-bg); border-color: var(--vrnq-b-navy); color: var(--vrnq-b-navy); }
.vrnq-b.vrnq-b--ghost:active { background-color: var(--vrnq-b-navy-bg-a); border-color: var(--vrnq-b-navy); color: var(--vrnq-b-navy); }

.vrnq-b.vrnq-b--danger,
.vrnq-b.vrnq-b--danger:link,
.vrnq-b.vrnq-b--danger:visited { background-color: var(--vrnq-b-danger); border-color: var(--vrnq-b-danger); color: var(--vrnq-b-blanc); }
.vrnq-b.vrnq-b--danger:hover,
.vrnq-b.vrnq-b--danger:focus,
.vrnq-b.vrnq-b--danger:focus-visible { background-color: var(--vrnq-b-danger-h); border-color: var(--vrnq-b-danger-h); color: var(--vrnq-b-blanc); }
.vrnq-b.vrnq-b--danger:active { background-color: var(--vrnq-b-danger-a); border-color: var(--vrnq-b-danger-a); color: var(--vrnq-b-blanc); }

.vrnq-b.vrnq-b--danger-ghost,
.vrnq-b.vrnq-b--danger-ghost:link,
.vrnq-b.vrnq-b--danger-ghost:visited { background-color: var(--vrnq-b-blanc); border-color: var(--vrnq-b-danger); color: var(--vrnq-b-danger-ink); }
.vrnq-b.vrnq-b--danger-ghost:hover,
.vrnq-b.vrnq-b--danger-ghost:focus,
.vrnq-b.vrnq-b--danger-ghost:focus-visible { background-color: var(--vrnq-b-danger); border-color: var(--vrnq-b-danger); color: var(--vrnq-b-blanc); }
.vrnq-b.vrnq-b--danger-ghost:active { background-color: var(--vrnq-b-danger-h); border-color: var(--vrnq-b-danger-h); color: var(--vrnq-b-blanc); }

.vrnq-b.vrnq-b--lien,
.vrnq-b.vrnq-b--lien:link,
.vrnq-b.vrnq-b--lien:visited { background-color: transparent; border-color: transparent; color: var(--vrnq-b-navy); }
.vrnq-b.vrnq-b--lien:hover,
.vrnq-b.vrnq-b--lien:focus,
.vrnq-b.vrnq-b--lien:focus-visible { background-color: transparent; border-color: transparent; color: var(--vrnq-b-navy-h); }
.vrnq-b.vrnq-b--lien:active { background-color: transparent; border-color: transparent; color: var(--vrnq-b-navy-a); }

.vrnq-b.vrnq-b--icone,
.vrnq-b.vrnq-b--icone:link,
.vrnq-b.vrnq-b--icone:visited { background-color: transparent; border-color: transparent; color: var(--vrnq-b-navy); }
.vrnq-b.vrnq-b--icone:hover,
.vrnq-b.vrnq-b--icone:focus,
.vrnq-b.vrnq-b--icone:focus-visible { background-color: transparent; border-color: transparent; color: var(--vrnq-b-danger); }
.vrnq-b.vrnq-b--icone:active { background-color: transparent; border-color: transparent; color: var(--vrnq-b-danger-h); }

/* Le repli mobile : un pied a deux boutons longs passe en colonne plutot que de
   deborder. Meme comportement que le pied du composant modale. */
/* ══════════════════════════════════════════════════════════════════════════
   MODIFICATEUR  --on-dark  ·  les memes boutons, poses sur un fond navy
   ══════════════════════════════════════════════════════════════════════════
   Le dernier trou du systeme. Sur un bandeau navy, `--primary` disparait (navy sur navy) et
   `--ghost` aussi (contour et texte navy). Les deux surfaces concernees existaient donc
   depuis toujours en styles a part : le hero de l'accueil et les bandeaux de l'administration.

   ── POURQUOI UN MODIFICATEUR COMBINABLE ET NON DEUX VARIANTES DE PLUS ────────
   `--primary-on-dark` et `--ghost-on-dark` auraient double la liste des roles, et il aurait
   fallu la doubler encore le jour ou `--danger` se poserait sur du sombre. Le fond n'est pas
   un ROLE, c'est un CONTEXTE : il se combine au role plutot qu'il ne le remplace. On ecrit
   donc `.vrnq-b .vrnq-b--primary .vrnq-b--on-dark`, et les tailles restent orthogonales.

   ── SPECIFICITE : TRIPLE CLASSE, NE PAS APLATIR ──────────────────────────────
   L'armure du systeme pese deja (0,2,0) au repos et (0,3,0) sur les etats. Un modificateur
   ecrit simplement, a egalite, ne l'emporterait que par l'ordre du fichier : vrai aujourd'hui,
   fragile des qu'on deplace un bloc. Triple classe le porte a (0,3,0) et (0,4,0), donc
   au-dessus, quel que soit l'ordre.

   ── CONTRASTES, CALCULES ─────────────────────────────────────────────────────
   primary : navy sur blanc 9,95 · sur #ECEFF8 9,12 · sur #DCE3F5 8,44
   ghost   : blanc sur navy 9,95, et le voile ne fait qu'eclaircir a peine le fond
   Les quatre etats sont declares en entier, fond, bordure et texte, comme partout ailleurs :
   le theme parent repeint tout etat qu'on lui laisse. */

/* ── primary sur fond sombre : l'inverse exact du primary clair ── */
.vrnq-b.vrnq-b--primary.vrnq-b--on-dark,
.vrnq-b.vrnq-b--primary.vrnq-b--on-dark:link,
.vrnq-b.vrnq-b--primary.vrnq-b--on-dark:visited {
    background-color: var(--vrnq-b-blanc);
    border-color: var(--vrnq-b-blanc);
    color: var(--vrnq-b-navy);
}
.vrnq-b.vrnq-b--primary.vrnq-b--on-dark:hover,
.vrnq-b.vrnq-b--primary.vrnq-b--on-dark:focus,
.vrnq-b.vrnq-b--primary.vrnq-b--on-dark:focus-visible {
    /* Le survol s'ASSOMBRIT toujours, comme sur fond clair : c'est le fond du bouton qui se
       teinte de navy, pas le bouton qui palit. La regle « jamais d'opacite pour un etat »
       vaut ici aussi, et elle est plus visible encore sur un fond sombre. */
    background-color: var(--vrnq-b-navy-bg);
    border-color: var(--vrnq-b-navy-bg);
    color: var(--vrnq-b-navy);
}
.vrnq-b.vrnq-b--primary.vrnq-b--on-dark:active {
    background-color: var(--vrnq-b-navy-bg-a);
    border-color: var(--vrnq-b-navy-bg-a);
    color: var(--vrnq-b-navy);
}

/* ── ghost sur fond sombre : contour blanc, fond voile ── */
.vrnq-b.vrnq-b--ghost.vrnq-b--on-dark,
.vrnq-b.vrnq-b--ghost.vrnq-b--on-dark:link,
.vrnq-b.vrnq-b--ghost.vrnq-b--on-dark:visited {
    background-color: transparent;
    border-color: var(--vrnq-b-blanc);
    color: var(--vrnq-b-blanc);
}
.vrnq-b.vrnq-b--ghost.vrnq-b--on-dark:hover,
.vrnq-b.vrnq-b--ghost.vrnq-b--on-dark:focus,
.vrnq-b.vrnq-b--ghost.vrnq-b--on-dark:focus-visible {
    background-color: var(--vrnq-b-od-voile);
    border-color: var(--vrnq-b-blanc);
    color: var(--vrnq-b-blanc);
}
.vrnq-b.vrnq-b--ghost.vrnq-b--on-dark:active {
    background-color: var(--vrnq-b-od-voile-a);
    border-color: var(--vrnq-b-blanc);
    color: var(--vrnq-b-blanc);
}

/* ⚠️ CONTOUR DE FOCUS EN BLANC, SUR LES DEUX. Le systeme le dessine en navy, ce qui convient
   partout ailleurs puisqu'il vit sur fond clair. Ici il se poserait sur du navy : invisible.
   Un utilisateur au clavier perdrait la trace de son curseur au moment ou il en a besoin.
   Seule la couleur change, le contour reste : c'est lui le signal, pas la teinte, et un
   daltonien ne distingue pas mieux le navy du blanc que le navy du rouge. */
.vrnq-b.vrnq-b--on-dark:focus-visible {
    outline-color: var(--vrnq-b-blanc);
}

@media (max-width: 560px) {
    .vrnq-b.vrnq-b--lg { padding: 12px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .vrnq-b { transition: none; }
}