/* SELECTEUR D'ORGANISME  .vrnq-orgdd
 *
 * Un declencheur a pastille (« avatar switcher ») pose PAR-DESSUS un <select> natif, et un
 * menu qui liste les organismes du compte. Markup du declencheur : VeilleRNQ_Auth::
 * org_switcher_select(). Comportement et menu : veillernq-org-dropdown.js.
 *
 * ── UNE SEULE SOURCE POUR TROIS ECRANS ───────────────────────────────────────
 * « Mes veilles », « Mon compte » et « Dossier de preuve » rendent le MEME markup par la
 * MEME fonction et lisent cette MEME feuille. Il n'existe aucune variante par page, et il
 * ne doit pas en apparaitre : une regle ecrite dans le <style> d'un ecran ferait diverger
 * ce composant exactement comme les neuf surcharges retirees du dossier de preuve.
 *
 * ── RIEN N'ATTEND LE SCRIPT ──────────────────────────────────────────────────
 * L'enveloppe, la boite, la pastille et le nom sont rendus par le SERVEUR. Le script se
 * contente d'y accrocher le menu et les ecouteurs. C'est ce qui fait qu'au chargement rien
 * ne saute : avant, le declencheur etait construit en JavaScript et l'oeil voyait d'abord
 * un <select> gris, puis la boite se substituait a lui.
 */

/* L'enveloppe ancre le menu, pose en absolu. Elle vient du serveur, pas du script.

   ⚠️ `overflow: visible`, ET LA CLASSE EST DOUBLEE POUR L'OBTENIR. NE PAS APLATIR.
   C'est ce qui rend le menu visible, et son absence le faisait disparaitre entierement.

   Le mecanisme : les trois ecrans enveloppent ce composant dans `.vrnq-chip-meta--org`, qui
   habille TOUS ses descendants `span` par `.vrnq-chip-meta--org span { overflow: hidden }`,
   soit (0,1,1). Or cette enveloppe EST un `<span>`. Elle heritait donc d'un clipping, et
   comme elle mesure 40px de haut alors que le menu s'ouvre A PARTIR de `top: 100% + 6px`,
   le menu tombait INTEGRALEMENT hors de la zone visible : il etait bien dans le DOM, la
   classe `is-open` etait bien posee, `aria-expanded` passait bien a « true », l'opacite
   montait bien a 1, et il ne s'affichait rien. Un clic sans reponse et sans erreur.

   La regle de l'ecran vise `span` avec un element, donc (0,1,1) : une classe simple a
   (0,1,0) perdait. Doublee, l'enveloppe pese (0,2,0) et passe devant.

   La protection vit ICI, dans le composant, et non dans la feuille du tableau de bord : elle
   doit suivre le selecteur partout ou on le posera, y compris dans un conteneur qui n'existe
   pas encore. Un menu ne peut pas dependre de ce que son hote veut bien lui laisser. */
.vrnq-orgdd.vrnq-orgdd { position: relative; display: inline-block; overflow: visible; }

/* <select> natif hors de l'ecran, JAMAIS `display:none` : il reste un controle de
   formulaire vivant, focusable, et c'est lui qui porte l'evenement `change` sur lequel le
   handler de bascule est branche. Le masquer pour de bon romprait la chaine. */
.vrnq-orgdd__native {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   DECLENCHEUR  ·  etat ferme
   ══════════════════════════════════════════════════════════════════════════ */
.vrnq-orgdd__btn {
	display: inline-flex; align-items: center; gap: 10px;
	height: 40px;
	/* Retrait ASYMETRIQUE : 8px a gauche pour que la pastille respire au lieu de toucher le
	   bord, 12px a droite pour degager le chevron, 5px en haut et en bas pour centrer la
	   pastille de 30px dans les 40px de hauteur. Une valeur unique collerait la pastille au
	   bord ou ferait flotter le chevron.
	   La gauche est passee de 5 a 8px : a 5px la pastille se lisait comme posee contre le
	   contour, et non comme placee dedans. */
	padding: 5px 12px 5px 8px;
	max-width: 280px;
	border: 1px solid #D7DEEE; border-radius: 10px;
	background: #FFFFFF;
	font: inherit; color: #1F2430;
	cursor: pointer;
	-webkit-user-select: none; user-select: none;   /* pas de selection de texte a l'ouverture */
	transition: border-color .15s ease, box-shadow .15s ease;
}
/* ⚠️ TOUS LES ETATS SONT ECRITS, ET LE FOND EST REDIT A CHAQUE FOIS. Le theme parent peint
   les <button> par `button:hover` / `button:focus` a (0,1,1) : un etat non declare repart en
   bleu Astra. C'est le defaut qui avait deja ete corrige ici, il ne doit pas revenir. */
/* ⚠️ LE RETRAIT EST REDIT ICI, A (0,2,0), ET CE N'EST PAS UNE REDONDANCE.
   La page « Mon compte » ouvre par un reset `.bpfa * { margin:0; padding:0 }`, emis INLINE
   DANS LE CORPS donc APRES cette feuille, et qui pese (0,1,0) comme une simple classe. A
   egalite, le dernier arrive gagne : le declencheur y perdait TOUT son retrait, la pastille
   venait toucher le contour et le chevron le bord oppose. Le composant paraissait mal regle
   alors que la feuille disait la bonne valeur, et seulement sur cet ecran.
   Le menu etait deja protege de la sorte quelques lignes plus bas ; le bouton ne l'etait pas.
   Meme defaut et meme parade que le composant modale. */
.vrnq-orgdd .vrnq-orgdd__btn { padding: 5px 12px 5px 8px; }

.vrnq-orgdd .vrnq-orgdd__btn,
.vrnq-orgdd .vrnq-orgdd__btn:link,
.vrnq-orgdd .vrnq-orgdd__btn:visited { background: #FFFFFF; border-color: #D7DEEE; color: #1F2430; }
.vrnq-orgdd .vrnq-orgdd__btn:hover,
.vrnq-orgdd .vrnq-orgdd__btn[aria-expanded="true"] {
	background: #FFFFFF; color: #1F2430;
	border-color: #B9C4E4;
	box-shadow: 0 2px 8px rgba(34, 60, 143, .10);
}
.vrnq-orgdd .vrnq-orgdd__btn:active { background: #FFFFFF; color: #1F2430; }
.vrnq-orgdd .vrnq-orgdd__btn:focus  { background: #FFFFFF; color: #1F2430; }
.vrnq-orgdd .vrnq-orgdd__btn:focus-visible {
	background: #FFFFFF; color: #1F2430;
	outline: 2px solid #223C8F; outline-offset: 1px;
}

/* PASTILLE : l'initiale de l'organisme, en capitale, sur un carre navy. Elle remplace
   l'icone de batiment, identique d'un organisme a l'autre et donc sans valeur distinctive :
   d'un coup d'oeil, la lettre dit LEQUEL est actif. */
.vrnq-orgdd__av {
	flex: 0 0 auto;
	width: 30px; height: 30px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 8px;
	background: #223C8F; color: #fff;
	font-size: 13px; font-weight: 700; line-height: 1;
	/* Une capitale isolee se lit mieux avec un peu d'air entre les lettres voisines ; ici
	   elle est seule, mais l'interlettrage evite qu'elle paraisse collee au bord gauche. */
	letter-spacing: .01em;
}

.vrnq-orgdd__name {
	min-width: 0;                                   /* autorise le retrecissement du flex-item */
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: 14px; font-weight: 600; color: #1F2430;
}

/* ⚠️ (0,2,0) ET NON (0,1,0), NE PAS APLATIR. Le chip qui enveloppe ce composant sur les
   trois ecrans habille TOUS ses `<i>` descendants par `.vrnq-chip-meta i`, soit (0,1,1) :
   il gagnait sur une simple classe et imposait au chevron sa taille de .74rem et son
   opacite de .85. Le chevron sortait donc plus petit et delave que prevu, alors que la
   feuille disait autre chose. Meme piege pour l'icone du pied, traitee plus bas. */
.vrnq-orgdd .vrnq-orgdd__caret {
	flex: 0 0 auto;
	font-size: 14px; color: #9AA3B8; opacity: 1;
	transition: transform .18s cubic-bezier(.23, 1, .32, 1);
}
.vrnq-orgdd.is-open .vrnq-orgdd__caret { transform: rotate(180deg); }

/* ══════════════════════════════════════════════════════════════════════════
   CHIP STATIQUE  ·  ce que voit un compte qui n'est pas sur l'offre Reseau
   ══════════════════════════════════════════════════════════════════════════
   MEME BOITE, MEME PASTILLE, MEME NOM que le declencheur, moins le chevron et moins tout
   etat. Il ne s'ouvre pas, il ne survole pas, il ne prend pas le focus : c'est une etiquette,
   pas un bouton. Lui donner un curseur de main ou une ombre au survol promettrait un menu qui
   n'existe pas, et c'est precisement le genre de promesse qui fait cliquer dans le vide.

   POURQUOI LA MEME FORME QUE LE SELECTEUR. Les deux occupent le meme emplacement sur les trois
   ecrans, et repondent a la meme question : pour quel organisme cet ecran est-il ouvert. Un
   client Reseau et un client solo doivent lire cette reponse au meme endroit, et de la meme
   maniere. Seule change la possibilite d'en changer.

   `cursor: default` est explicite : sans lui, le curseur reste celui du texte, et l'etiquette
   se lit comme une zone selectionnable au milieu d'une barre d'actions.

   ⚠️ CLASSE DOUBLEE POUR LE RETRAIT. La page « Mon compte » ouvre par `.bpfa * { padding:0 }`,
   emis dans le corps donc apres cette feuille : a (0,1,0) le retrait y serait annule et la
   pastille toucherait le bord, defaut deja rencontre sur le declencheur. */
.vrnq-orgdd-statique.vrnq-orgdd-statique {
	display: inline-flex; align-items: center; gap: 10px;
	height: 40px;
	padding: 5px 12px 5px 8px;
	max-width: 280px;
	margin: 0;
	border: 1px solid #D7DEEE; border-radius: 10px;
	background: #FFFFFF;
	font: inherit; color: #1F2430;
	cursor: default;
}

/* ══════════════════════════════════════════════════════════════════════════
   MENU  ·  etat ouvert
   ══════════════════════════════════════════════════════════════════════════ */
.vrnq-orgdd__list {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
	width: 300px;
	/* La largeur est FIXE, mais jamais au-dela du viewport : sur un telephone, un panneau de
	   300px ancre a gauche d'un declencheur deja decale deborderait par la droite. */
	max-width: calc(100vw - 32px);
	max-height: 360px; overflow-y: auto;
	margin: 0; padding: 0; list-style: none;
	background: #FFFFFF;
	border: 1px solid #D7DEEE; border-radius: 12px;
	box-shadow: 0 18px 46px rgba(10, 20, 50, .18);
	transform-origin: top left;
	opacity: 0; transform: scale(.97) translateY(-2px);
	/* `visibility` ET `pointer-events`, pas seulement l'opacite : un panneau a `opacity:0`
	   reste cliquable et capte les clics destines a ce qui se trouve dessous. */
	visibility: hidden; pointer-events: none;
	transition: opacity .18s cubic-bezier(.23, 1, .32, 1),
	            transform .18s cubic-bezier(.23, 1, .32, 1),
	            visibility 0s linear .18s;
}
.vrnq-orgdd.is-open .vrnq-orgdd__list {
	opacity: 1; transform: scale(1) translateY(0);
	visibility: visible; pointer-events: auto; transition-delay: 0s;
}

/* OUVERTURE VERS LE HAUT. Le script pose `is-up` quand le panneau ne tient pas sous le
   declencheur ET qu'il y a davantage de place au-dessus : sur un selecteur situe bas dans la
   page, le menu sortait sous la ligne de flottaison et il fallait faire defiler pour
   atteindre les derniers organismes.

   `transform-origin` bascule avec lui : l'animation doit partir du bord par lequel le
   panneau apparait, sinon il semble surgir du mauvais cote. */
.vrnq-orgdd.is-up .vrnq-orgdd__list {
	top: auto; bottom: calc(100% + 6px);
	transform-origin: bottom left;
}

/* ⚠️ RETRAITS REDITS A (0,2,0), NE PAS APLATIR CES SELECTEURS. La page « Mon compte » ouvre
   par un reset `.bpfa * { margin:0; padding:0 }` qui pese (0,1,0) et qui est emis INLINE
   DANS LE CORPS, donc APRES cette feuille. A egalite, le dernier arrive gagne : le menu y
   perdait tous ses retraits et se tassait, alors qu'il restait correct sur les deux autres
   ecrans. Meme defaut et meme parade que le composant modale. */
.vrnq-orgdd .vrnq-orgdd__head {
	margin: 0; padding: 12px 14px 8px;
	font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
	color: #6B7280;
}
.vrnq-orgdd .vrnq-orgdd__opt { padding: 9px 14px; margin: 0; }
.vrnq-orgdd .vrnq-orgdd__foot { padding: 6px; margin: 0; }
.vrnq-orgdd .vrnq-orgdd__search-wrap { padding: 0 10px 8px; margin: 0; }

.vrnq-orgdd__opt {
	display: flex; align-items: center; gap: 10px;
	cursor: pointer;
	font-size: 14px; color: #1F2430; line-height: 1.35;
	transition: background-color .12s ease;
}
/* ⚠️ SANS CETTE LIGNE, LA RECHERCHE NE FILTRE RIEN. Le script masque les options qui ne
   correspondent pas en posant l'attribut `hidden`, et le navigateur y repond par un
   `display:none` de sa feuille par defaut. Mais la regle ci-dessus declare `display:flex`,
   et une declaration d'auteur passe devant celle du navigateur : les lignes « masquees »
   resteraient a l'ecran. Le script ferait son travail, le compteur de resultats serait
   juste, et rien ne bougerait, sans la moindre erreur pour le signaler.
   (Meme piege que le bouton de recontact du chatbot, pour la meme raison.) */
.vrnq-orgdd__opt[hidden],
.vrnq-orgdd__empty[hidden] { display: none; }

/* Survol ET parcours au clavier peints pareil : la fleche du bas doit montrer exactement ce
   que le curseur montrerait. Deux teintes differentes donneraient deux surbrillances a
   l'ecran des qu'on melange souris et clavier. */
.vrnq-orgdd__opt:hover,
.vrnq-orgdd__opt.is-active { background: #F5F8FF; }
.vrnq-orgdd__opt[aria-selected="true"] { background: #F0F4FF; }

/* Pastille du menu : meme objet que celle du declencheur, un cran plus petit. */
.vrnq-orgdd__opt-av {
	flex: 0 0 auto;
	width: 26px; height: 26px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 7px;
	background: #223C8F; color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1;
}
.vrnq-orgdd__opt-label {
	flex: 1; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	font-size: 14px; font-weight: 600; color: #1F2430;
}
/* Coche de l'organisme ACTIF. Un caractere et non une icone de fonte : le menu doit rester
   lisible si la police d'icones met du temps a arriver, ou n'arrive pas. */
.vrnq-orgdd__opt-check {
	flex: 0 0 auto;
	font-size: 16px; line-height: 1; color: #223C8F;
}

/* FILIATION RESEAU. Les icones de role ont cede la place aux pastilles, mais le rattachement
   d'une fille a sa mere est une information METIER, pas une decoration : sans ce retrait, un
   reseau de douze organismes se lit comme une liste plate et le client perd la structure
   qu'il a lui-meme declaree. Le libelle complet reste porte par `title` et `aria-label`. */
.vrnq-orgdd .vrnq-orgdd__opt--fille { padding-left: 30px; }

/* ── Recherche, au-dela de huit organismes (cf. le script) ── */
.vrnq-orgdd__search {
	width: 100%; box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid #D7DEEE; border-radius: 8px;
	background: #fff;
	font: inherit; font-size: 13.5px; color: #1F2430;
}
.vrnq-orgdd__search::placeholder { color: #9AA3B8; opacity: 1; }
.vrnq-orgdd__search:focus,
.vrnq-orgdd__search:focus-visible {
	outline: none;
	border-color: #223C8F;
	box-shadow: 0 0 0 3px rgba(34, 60, 143, .14);
}
/* Aucun resultat : on le DIT. Un menu qui se vide sans un mot laisse croire a une panne. */
.vrnq-orgdd__empty {
	padding: 10px 14px 14px;
	font-size: 13px; font-style: italic; color: #6B7280;
}

/* ── Pied : « Ajouter un organisme » ──
   Le script ne pose ce pied QUE si le vrai bouton d'ajout existe sur la page, et il se
   contente de lui transmettre le clic. Aucune logique n'est recopiee ici : les nonces, la
   modale et le formulaire restent ou ils sont. */
.vrnq-orgdd__foot { border-top: 1px solid #EEF1F7; }
.vrnq-orgdd .vrnq-orgdd__add,
.vrnq-orgdd .vrnq-orgdd__add:hover,
.vrnq-orgdd .vrnq-orgdd__add:focus,
.vrnq-orgdd .vrnq-orgdd__add:active {
	display: flex; align-items: center; gap: 9px;
	width: 100%; box-sizing: border-box;
	padding: 9px 10px;
	border: 0; border-radius: 8px;
	background: transparent;
	font: inherit; font-size: 13.5px; font-weight: 600; color: #223C8F;
	text-align: left; cursor: pointer;
	transition: background-color .12s ease;
}
.vrnq-orgdd .vrnq-orgdd__add:hover,
.vrnq-orgdd .vrnq-orgdd__add:focus { background: #F0F4FF; }
/* Meme parade que pour le chevron : `.vrnq-chip-meta i` (0,1,1) rapetissait ce « + » et le
   delavait. Redit a (0,3,0), au-dessus de toute atteinte. */
.vrnq-orgdd .vrnq-orgdd__add i { font-size: 12px; opacity: 1; color: #223C8F; }
.vrnq-orgdd .vrnq-orgdd__add:focus-visible { outline: 2px solid #223C8F; outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
	.vrnq-orgdd__list { transform: none; transition: opacity .12s ease, visibility 0s linear .12s; }
	.vrnq-orgdd.is-open .vrnq-orgdd__list { transform: none; }
	.vrnq-orgdd__btn, .vrnq-orgdd__caret, .vrnq-orgdd__opt { transition: none; }
}

/* IMPRESSION : un selecteur ne s'imprime pas. Le dossier de preuve masquait deja le sien par
   une regle propre a son ecran ; celle-ci vaut pour les trois, et pour le menu s'il se
   trouvait ouvert au moment ou l'on imprime. */
@media print {
	.vrnq-orgdd__btn,
	.vrnq-orgdd__list { display: none !important; }
}