/**
 * COMPOSANT MODALE UNIFIE  .vrnq-modal
 *
 * Charge sur le FRONT et dans l'ADMINISTRATION. Deux modales du composant vivent dans
 * wp-admin, ou la feuille du theme n'est jamais chargee : loger le composant dans le theme
 * les aurait laissees sans style, ou aurait impose d'en recopier cent lignes dans un bloc
 * `<style>` d'administration, donc d'avoir deux composants au lieu d'un.
 *
 * JETONS REDECLARES ci-dessous : les variables --bpf-* sont definies dans le `:root` du theme
 * enfant, qui n'existe pas en administration. Les valeurs sont celles de la charte, et elles
 * doivent bouger avec elle.
 */

:root {
    --vrnq-modal-navy:      #223C8F;
    --vrnq-modal-navy-dark: #172A66;
    --vrnq-modal-danger:    #E1000F;
    --vrnq-modal-warn:      #B34000;
    --vrnq-modal-ok:        #18753C;
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPOSANT MODALE UNIFIE  .vrnq-modal
   ══════════════════════════════════════════════════════════════════════════
   Le site compte dix-sept modales et autant d'implementations : trois familles
   d'en-tete, quatorze largeurs differentes, cinq sans croix, quatre sans Echap.
   Ce bloc pose la peau commune ; le lot A n'y migre que DEUX pilotes, les
   quinze autres gardant leur style propre tant qu'elles ne sont pas reprises.

   TOUT EST SCOPE SOUS `.vrnq-modal`, sans exception. Une regle qui deborderait
   sur les classes historiques deplacerait quinze modales non migrees, ce que ce
   lot s'interdit.

   ── POURQUOI LE PREFIXE DESCENDANT `.vrnq-modal .vrnq-modal__x` ────────────
   NE PAS APLATIR CES SELECTEURS. Le prefixe n'est pas un tic d'ecriture, c'est
   une ARMURE, et la retirer casse le composant sans rien casser d'evident.

   Ecrit `.vrnq-modal__footer`, le composant pese (0,1,0). La page « Mon compte »
   ouvre par un reset `.bpfa * { box-sizing:border-box; margin:0; padding:0 }`
   (class-bpf-account.php, `render_styles`), qui pese lui aussi (0,1,0) et qui
   est emis INLINE DANS LE CORPS, donc APRES cette feuille chargee dans l'en-tete.
   A egalite de specificite, le dernier arrive gagne : toute modale rendue DANS
   `.bpfa` perdait ses paddings d'en-tete, de corps, de pied et de boutons. Le
   pied tombait a zero et les boutons a 16px de haut, en texte nu dans un coin.

   Ce qui rendait le defaut illisible : « Ajouter un organisme » est injectee par
   `document.body.appendChild`, donc HORS de `.bpfa`, et restait impeccable. Deux
   modales du meme composant, l'une correcte et l'autre plate, selon leur seule
   POSITION DANS LE DOM.

   Le prefixe porte le composant a (0,2,0) et le met hors de portee du reset,
   quel que soit l'ordre des feuilles. Les MODIFICATEURS sont prefixes AUSSI, et
   c'est indispensable : laisser `.vrnq-modal__header--danger` a (0,1,0) sous une
   base montee a (0,2,0) aurait repeint en navy tous les en-tetes rouges.
   ────────────────────────────────────────────────────────────────────────── */

.vrnq-modal__overlay.vrnq-modal__overlay {
    position: fixed;
    inset: 0;
    /* Au-dessus de la barre d'administration de WordPress, qui est fixee en haut a
       z-index 99999 : en dessous, le voile la laisserait apparaitre par-dessus lui pour
       tout utilisateur connecte disposant de la barre. */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: rgba(10, 20, 50, .55);
}
.vrnq-modal__overlay.vrnq-modal__overlay[hidden] { display: none; }

.vrnq-modal {
    position: relative;
    width: 100%;
    max-width: 560px;                 /* md, defaut */
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(10, 20, 50, .35);
    overflow: hidden;
    /* ── ROBUSTESSE AU CONTENU LONG ──────────────────────────────────────────
       90vh et non `calc(100vh - 40px)` : sur mobile, les barres de navigation
       mangent une part de 100vh que le navigateur ne deduit pas toujours, et la
       carte depassait alors sous le pli. 90vh laisse de la marge des deux cotes.

       La carte est une COLONNE STRICTE : en-tete et pied ne se compriment
       jamais, seul le corps defile. Sans cela, un corps long pousse le pied hors
       de la carte, ou pire le laisse chevaucher le contenu, ce qui s'est vu sur
       l'invitation d'utilisateur et ses cartes de role. */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.vrnq-modal--sm { max-width: 440px; }
.vrnq-modal--lg { max-width: 720px; }
/* xl : reservee aux dispositions a DEUX COLONNES, la connexion pour l'instant. Au-dela de
   720px une colonne unique donne des lignes de texte trop longues a lire. */
.vrnq-modal--xl { max-width: 880px; }

/* ── En-tete ──
   `padding-right` reserve la place de la croix, posee en absolu dans l'angle :
   sans cette reserve, un titre long passerait dessous. */
.vrnq-modal .vrnq-modal__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    padding-right: 48px;
    background: var(--bpf-primary, var(--vrnq-modal-navy));
    color: #fff;
    /* Toujours visible : `flex-shrink:0` explicite en plus de la base `flex`, certaines
       feuilles de theme reposant `flex` sur les enfants directs d'un conteneur. */
    flex: 0 0 auto;
    flex-shrink: 0;
}
.vrnq-modal .vrnq-modal__header--danger { background: var(--bpf-danger, var(--vrnq-modal-danger)); }
/* Poses SEMANTIQUES declarees maintenant, employees plus tard : la palette du
   composant doit etre complete des le depart, sinon chaque migration inventera
   sa propre couleur, ce qui est exactement le point de depart qu'on corrige. */
.vrnq-modal .vrnq-modal__header--warn { background: var(--bpf-warning, var(--vrnq-modal-warn)); }
.vrnq-modal .vrnq-modal__header--ok   { background: var(--bpf-success, var(--vrnq-modal-ok)); }

.vrnq-modal .vrnq-modal__icon {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .16);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    color: #fff;
}
.vrnq-modal .vrnq-modal__heads { flex: 1; min-width: 0; }
.vrnq-modal .vrnq-modal__eyebrow {
    font-size: 10.5px; font-weight: 700; letter-spacing: .7px;
    text-transform: uppercase; color: rgba(255, 255, 255, .75); line-height: 1.2;
}
.vrnq-modal .vrnq-modal__title {
    font-size: 17px; font-weight: 700; line-height: 1.25;
    margin: 0; color: #fff;
}

/* ── Croix ──
   La classe .vrnq-modal-x porte deja couleur et taille depuis le lot precedent.
   Ici, UNIQUEMENT le positionnement, et SCOPE au composant : ecrire ce `position`
   sur `.vrnq-modal-x` seule deplacerait les croix des quinze modales non migrees,
   dont plusieurs positionnent la leur en style inline. */
.vrnq-modal .vrnq-modal-x,
.vrnq-modal .vrnq-modal__close {
    position: absolute;
    top: 8px;
    right: 8px;
    /* Boite 28 et glyphe 16, contre 32 et 20 pour le reste du site. Une croix de
       fermeture posee DANS un bandeau colore, a cote d'une icone de 34px et d'un
       titre, n'a pas le meme poids visuel qu'une croix isolee sur fond blanc : a
       20px elle rivalisait avec l'icone de tete. La surface de clic reste au-dessus
       du minimum confortable.

       SCOPE au composant : les croix des quinze modales non migrees gardent leurs
       32 et 20 px, poses par le bloc commun plus haut. */
    width: 28px;
    height: 28px;
    font-size: 16px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    z-index: 2;
}
.vrnq-modal .vrnq-modal-x svg { width: 16px; height: 16px; }
.vrnq-modal .vrnq-modal-x i   { font-size: 16px; }

/* COULEUR ET SURVOL, redeclares ICI et scopes au composant, pour qu'il soit AUTONOME.
   La regle commune des croix vit dans la feuille du theme, absente de l'administration :
   sans ces trois lignes, la croix des modales d'administration serait sans couleur. Sur le
   front, elles disent la meme chose que la regle commune, l'une ne contredit donc pas
   l'autre, et la specificite superieure du selecteur descendant rend l'ordre indifferent. */
.vrnq-modal .vrnq-modal-x { color: #fff; cursor: pointer; transition: color .15s ease, opacity .15s ease; }
.vrnq-modal .vrnq-modal-x:hover,
.vrnq-modal .vrnq-modal-x:focus-visible { color: var(--bpf-danger, var(--vrnq-modal-danger)); }
.vrnq-modal .vrnq-modal-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* SURVOL SANS FOND. Seul le X change, la regle commune le faisant virer au rouge
   --bpf-danger : sur le bandeau navy, ce rouge se detache franchement et un aplat
   translucide n'ajoutait qu'un rectangle de plus dans un angle deja charge.

   EXCEPTION sur l'en-tete rouge, ou ce meme rouge serait invisible. La croix y
   reste blanche et c'est une baisse d'opacite qui porte le signal. Le contour de
   focus passe au blanc pour la meme raison de contraste. */
.vrnq-modal .vrnq-modal__header--danger .vrnq-modal-x:hover,
.vrnq-modal .vrnq-modal__header--danger .vrnq-modal-x:focus-visible {
    color: #fff !important;
    opacity: .72;
}
.vrnq-modal .vrnq-modal__header--danger .vrnq-modal-x:focus-visible {
    outline-color: #fff !important;
    opacity: 1;
}

/* ── Corps ── */
/* LE CORPS EST LE SEUL A DEFILER. `min-height:0` est indispensable : un enfant flex a
   `min-height:auto` par defaut et refuse de se reduire sous la taille de son contenu, ce
   qui rend `overflow-y` inoperant et fait deborder la carte au lieu du corps. C'est le
   piege classique du defilement en colonne flex. */
.vrnq-modal .vrnq-modal__body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.vrnq-modal .vrnq-modal__msg { font-size: 14px; color: #1f2430; margin: 0 0 6px; line-height: 1.6; }
.vrnq-modal .vrnq-modal__sub { font-size: 13px; color: #6b7280; margin: 0; line-height: 1.55; }

.vrnq-modal .vrnq-modal__field { margin-bottom: 14px; }
.vrnq-modal .vrnq-modal__field:last-child { margin-bottom: 0; }
.vrnq-modal .vrnq-modal__field label {
    display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: #1f2430;
}
.vrnq-modal .vrnq-modal__req { color: var(--bpf-danger, var(--vrnq-modal-danger)); }
.vrnq-modal .vrnq-modal__field input,
.vrnq-modal .vrnq-modal__field select,
.vrnq-modal .vrnq-modal__field textarea {
    width: 100%; border: 1px solid #d7deee; border-radius: 10px;
    padding: 10px 12px; font-size: 14px; font-family: inherit;
    background: #fff; color: #1f2430;
}
.vrnq-modal .vrnq-modal__field textarea { resize: vertical; }
.vrnq-modal .vrnq-modal__field input:focus,
.vrnq-modal .vrnq-modal__field select:focus,
.vrnq-modal .vrnq-modal__field textarea:focus {
    outline: 0; border-color: var(--bpf-primary, var(--vrnq-modal-navy));
    box-shadow: 0 0 0 3px rgba(34, 60, 143, .12);
}
.vrnq-modal .vrnq-modal__row { display: flex; gap: 12px; }
.vrnq-modal .vrnq-modal__row > * { flex: 1; min-width: 0; }

/* ── Pied ── */
.vrnq-modal .vrnq-modal__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* `wrap` plutot qu'un debordement : a deux boutons longs sur une carte etroite, ils
       passent a la ligne au lieu de se chevaucher. Le `gap` vaut alors aussi en vertical. */
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid #eef1f7;
    background: #fbfcfe;
    flex: 0 0 auto;
    flex-shrink: 0;
}
.vrnq-modal .vrnq-modal__btn {
    border-radius: 10px; padding: 10px 18px;
    font-size: 14px; font-weight: 600; font-family: inherit;
    cursor: pointer; border: 1px solid transparent;
}
.vrnq-modal .vrnq-modal__btn:focus-visible { outline: 2px solid var(--bpf-primary, var(--vrnq-modal-navy)); outline-offset: 2px; }

/* UN <a> PORTANT .vrnq-modal__btn DOIT RESSEMBLER A UN BOUTON.
   La regle ci-dessus pose le rayon, le padding et la police, mais ni `display` ni
   `text-decoration` : sur un <button> c'est sans consequence, sur un <a> qui reste
   `inline` le padding ne pousse pas la ligne. Le bouton paraissait coince, mal aligne
   dans le pied en flex, et Astra le soulignait par-dessus.
   Trois modales sont concernees — deconnexion (users-manager), et les deux CTA de la
   modale message — d'ou une regle sur le COMPOSANT plutot que trois correctifs locaux.
   `a.` suffit a viser les seuls liens : les <button> gardent exactement leur rendu.
   Le soulignement est retire sur le bouton SEUL, jamais sur les <a> du corps : un lien
   dans une phrase doit rester souligne, c'est ce qui le distingue du texte. */
.vrnq-modal a.vrnq-modal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1.2;
}
.vrnq-modal a.vrnq-modal__btn:hover,
.vrnq-modal a.vrnq-modal__btn:focus,
.vrnq-modal a.vrnq-modal__btn:focus-visible { text-decoration: none; }
/* ⚠️ `display` REDONNE LA MAIN A [hidden]. La feuille du navigateur pose
   `[hidden] { display: none }` a (0,1,0) ; la regle ci-dessus est a (0,2,1) et la
   battrait : un bouton masque par l'attribut redeviendrait VISIBLE. Le pied de la
   modale message masque justement « Repondre » quand le message n'autorise pas de
   reponse — sans cette ligne, il apparaitrait partout et promettrait ce que le
   produit ne tient pas. Meme parade que `.vrnq-modal__overlay[hidden]` plus haut. */
.vrnq-modal a.vrnq-modal__btn[hidden] { display: none; }
.vrnq-modal .vrnq-modal__btn:disabled { opacity: .55; cursor: not-allowed; }
/* SURVOLS ECRITS EN ENTIER, fond, bordure et texte a chaque fois. Astra repose `background`
   et `color` sur `button:hover` avec une specificite superieure : une regle de survol qui ne
   redit pas les trois proprietes laisse le theme en changer une, et le bouton fantome virait
   au gris avec un texte delave. Rien n'est laisse a l'heritage. */
.vrnq-modal .vrnq-modal__btn--ghost {
    background: #fff;
    border-color: var(--bpf-primary, var(--vrnq-modal-navy));
    color: var(--bpf-primary, var(--vrnq-modal-navy));
}
.vrnq-modal .vrnq-modal__btn--ghost:hover,
.vrnq-modal .vrnq-modal__btn--ghost:focus-visible {
    background: #f2f5fc;
    border-color: var(--bpf-primary, var(--vrnq-modal-navy));
    color: var(--bpf-primary, var(--vrnq-modal-navy));
}

.vrnq-modal .vrnq-modal__btn--primary {
    background: var(--bpf-primary, var(--vrnq-modal-navy));
    border-color: var(--bpf-primary, var(--vrnq-modal-navy));
    color: #fff;
}
.vrnq-modal .vrnq-modal__btn--primary:hover,
.vrnq-modal .vrnq-modal__btn--primary:focus-visible {
    background: var(--vrnq-blue-dark, var(--vrnq-modal-navy-dark));
    border-color: var(--vrnq-blue-dark, var(--vrnq-modal-navy-dark));
    color: #fff;
}

.vrnq-modal .vrnq-modal__btn--danger {
    background: var(--bpf-danger, var(--vrnq-modal-danger));
    border-color: var(--bpf-danger, var(--vrnq-modal-danger));
    color: #fff;
}
/* Assombrissement explicite plutot qu'un `filter: brightness()` : le filtre cree un contexte
   d'empilement et s'applique aussi au contour de focus, qu'il ternissait. */
.vrnq-modal .vrnq-modal__btn--danger:hover,
.vrnq-modal .vrnq-modal__btn--danger:focus-visible {
    background: #B80010;
    border-color: #B80010;
    color: #fff;
}

@media (max-width: 560px) {
    .vrnq-modal .vrnq-modal__footer { flex-direction: column-reverse; }
    .vrnq-modal .vrnq-modal__btn { width: 100%; }
    .vrnq-modal .vrnq-modal__row { flex-direction: column; gap: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    .vrnq-modal { animation: vrnqModalIn .18s ease-out; }
    @keyframes vrnqModalIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}