/* Police unifiee "Cairo" pour toute l'application (remplace les polices
   heterogenes definies page par page : Segoe UI, Tahoma, Inter, Verdana...).
   On importe la police ici pour garantir qu'elle est chargee meme sur les
   pages qui ne la lient pas deja elles-memes. Les elements <i>/icones
   (Font Awesome, Bootstrap Icons) sont volontairement exclus du selecteur
   ci-dessous pour ne pas casser leurs glyphes. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

html, body,
div, span, p,
h1, h2, h3, h4, h5, h6,
label, a, li, ul, ol,
table, th, td,
button, input, select, textarea, option,
small, strong, b, em, u {
  font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* ============ Smartphones (<= 768px) : texte 16px, titres 20px ============
   - Texte de base : 16px partout (html/body en px pour les tailles en rem
     de Bootstrap/Tailwind, + tous les éléments de texte).
   - Titres (h1-h6 et classes *title*) : 20px.
   Sont épargnés (tailles déjà calibrées ou non textuelles) : icônes (<i>, svg,
   Font Awesome, Bootstrap Icons, emoji), canvas, cartes des listes (.rc-*),
   mini-tableaux des cartes, colonne fixe « Numéro de travail » (.wn-panel),
   infobulles, exposants/indices, code.
   La spécificité de ces règles est volontairement faible (:where) : toute
   règle plus précise déjà marquée !important (bandeaux compacts des listes,
   filtres, cartes…) reste prioritaire. */
@media screen and (max-width: 768px) {
  html { font-size: 16px !important; }
  body { font-size: 16px !important; }

  /* Avec des textes plus grands, les rangées flex (Bootstrap .d-flex / Tailwind .flex)
     ne doivent plus dépasser de l'écran : elles passent à la ligne par défaut.
     Spécificité nulle (:where) : un flex-wrap défini par la page reste prioritaire. */
  body :where(.d-flex, .flex):where(:not(.flex-column):not(.flex-col):not(.flex-nowrap):not(:has(> [class*="w-1/"], > .w-50, > .w-25, > .w-75, > [class*="basis-"]))) { flex-wrap: wrap; }
  body :where(input, select, textarea) { max-width: 100%; }

  body *:not(:where(
    i, svg, svg *, canvas, script, style, code, pre, kbd, sup, sub,
    .fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, [class*="fa-"],
    .bi, [class^="bi-"], [class*=" bi-"], .material-icons, .emoji-icon,
    .menu-tile-icon, .menu-tile-icon *,
    .rc-card, .rc-card *, .rc-cards *, .mini-table, .mini-table *,
    .wn-panel, .wn-panel *, .sidebar-tooltip, .dt-button-collection *
  )) {
    font-size: 16px !important;
  }

  body :is(h1, h2, h3, h4, h5, h6, [class*="title" i]):not(:where(
    i, svg, svg *, .fa, .fas, .far, .fab, .fa-solid, [class*="fa-"], .bi, .emoji-icon,
    .menu-tile-icon, .menu-tile-icon *,
    .rc-card, .rc-card *, .rc-cards *, .mini-table, .mini-table *,
    .wn-panel, .wn-panel *, .sidebar-tooltip
  )) {
    font-size: 20px !important;
  }
}

/* ============ Smartphones : libellé et champ sur la MÊME ligne ============
   Tout bloc « <label> suivi d'un champ (input/select/textarea, y compris avec
   l'icône micro) » passe de « libellé au-dessus » à « libellé + champ côte à
   côte » (libellé ~40% de la largeur, champ = le reste). Sens de lecture
   respecté (RTL : libellé à droite). Exclus : formulaires de filtres des listes
   (.filter-group), écran de connexion, cases/boutons radio, groupes de champs
   Bootstrap (.input-group). Nécessite :has() (Chrome/WebView Android >= 105) ;
   sinon les formulaires restent empilés comme avant. */
@media screen and (max-width: 768px) {
  body :where(div, p, li, fieldset):has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
  }
  body :where(div, p, li, fieldset):has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) > label {
    flex: 0 0 40%;
    max-width: 48%;
    min-width: 0;
    margin: 0 !important;
    overflow-wrap: anywhere;
  }
  body :where(div, p, li, fieldset):has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) > label + * {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 100%;
  }
  body :where(div, p, li, fieldset):has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):has(> label + textarea):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) { align-items: flex-start; }
  /* Colonnes Bootstrap à moitié de largeur : pleine largeur pour laisser la place à la ligne libellé + champ */
  body :where(.col-6, .col-sm-6, .col-md-6, .col-lg-6, .col-4, .col-md-4, .col-3, .col-md-3):has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

/* ============ Formulaires au premier plan (toutes tailles d'écran) ============
   1) Formulaires en page : au-dessus du reste du contenu (en-têtes collants des
      tableaux, colonne fixe, cartes, boutons flottants...). Spécificité nulle
      (:where) : un position / z-index défini par la page sur le formulaire
      (ex. carte .sidebar-card en position: sticky) reste prioritaire.
   2) Modales / boîtes de dialogue : au-dessus de TOUT (y compris des formulaires
      en page) ; le fond assombri de Bootstrap juste en dessous.
   3) Éléments rattachés au <body> qui doivent rester visibles PAR-DESSUS une
      modale (listes déroulantes select2, calendriers, menus DataTables,
      autocomplétion, infobulles, message vocal). */
:where(form, .form-container, .form-section, .sidebar-card):not(:where(
  .modal *, .modall *, .modal-dialog *, [role="dialog"] *, dialog *, .rc-card *, .wn-panel *
)) {
  position: relative;
  z-index: 1500;
}

.modal, .modall, .modal-overlay, .video-modal, .parametres-modal, [role="dialog"], .swal2-container { z-index: 100000 !important; }
.modal-backdrop { z-index: 99999 !important; }

.select2-container--open, .select2-dropdown, .flatpickr-calendar.open,
.dt-button-collection, .ui-autocomplete, .ui-datepicker, .autocomplete-suggestions,
.tooltip, .popover, #haloub-voice-toast { z-index: 100010 !important; }

/* --- Un seul groupe « libellé + champ » par ligne sur mobile ---------------
   Évite 2 (ou 4 éléments) côte à côte : chaque groupe occupe toute la ligne,
   que la rangée soit en flex (elle passe à la ligne), en grille (le groupe
   s'étend sur toutes les colonnes) ou en flottants/inline-block. */
@media screen and (max-width: 768px) {
  body :where(div, form, fieldset, section, aside, main):has(> :where(div, p, li, fieldset) > label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) { flex-wrap: wrap !important; }
  body :where(div, p, li, fieldset):has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) {
    min-width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-grow: 1 !important;
    grid-column: 1 / -1 !important;
    float: none !important;
    box-sizing: border-box;
  }
}

/* --- Arabe (RTL) : libellé À DROITE du champ sur mobile ----------------------
   Certaines pages forcent « direction: ltr » sur <body> (ex. SaisieVel) : le
   libellé se retrouvait alors à gauche. On impose le sens RTL sur chaque
   groupe « libellé + champ » quand l'application est en arabe (i18n.js pose
   <html dir="rtl">) : le libellé, premier élément, est à droite. */
@media screen and (max-width: 768px) {
  html[dir="rtl"] body :where(div, p, li, fieldset):has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) { direction: rtl; }
  html[dir="rtl"] body :where(div, p, li, fieldset):has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) > label { text-align: start; }
}

/* --- Groupes « libellé + PLUSIEURS champs » (ex. Min / Max) sur mobile ------
   Le libellé prend sa largeur naturelle et tous les champs se partagent le
   reste de la ligne à parts égales (au lieu de ne redimensionner que le
   premier champ). */
@media screen and (max-width: 768px) {
  body :where(div, p, li, fieldset):has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):has(> label ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap) ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) > label { flex: 0 0 auto; max-width: 42%; }
  body :where(div, p, li, fieldset):has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):has(> label ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap) ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) > label ~ :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap) { flex: 1 1 0; min-width: 0; width: auto; }
}

/* --- Interligne des formulaires de saisie : 2px sur mobile --------------------
   L'espace vertical entre deux lignes « libellé + champ » est ramené à 2px :
   seule la marge basse du groupe (2px) subsiste, l'écart (gap) de la rangée qui
   les contient est supprimé pour ne pas s'y ajouter (.mb-3, .form-group,
   .form-groupp... sont écrasés). */
@media screen and (max-width: 768px) {
  body :where(div, form, fieldset, section, aside, main):has(> :where(div, p, li, fieldset) > label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) { row-gap: 0 !important; }
  body :where(div, p, li, fieldset):has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea, .haloub-voice-field-wrap)):not(:where(.filter-group, .login-field, .form-check, .form-check-inline, .input-group, .rc-card, .rc-card *, .wn-panel, .wn-panel *, .mini-table, .mini-table *)) { margin-top: 0 !important; margin-bottom: 2px !important; }
}

/* --- Barre de filtres « .modern-filter-bar » (consommables, medicaments) : mobile --------
   Ligne 1 : recherche + bouton de réinitialisation ; ligne 2 : mois | année (50/50) ;
   ligne 3 : « Du [date] Au [date] » sur une seule ligne. Marges réduites. */
@media screen and (max-width: 768px) {
  .modern-filter-bar { padding: 8px !important; gap: 6px 8px !important; margin-bottom: 8px !important; flex-wrap: wrap !important; align-items: center !important; }
  .modern-filter-bar > .input-group { order: 1; max-width: none !important; width: auto !important; flex: 1 1 calc(100% - 44px) !important; min-width: 0 !important; }
  .modern-filter-bar > .btn-icon { order: 2; margin: 0 !important; flex: 0 0 auto !important; }
  .modern-filter-bar > select { order: 3; flex: 1 1 calc(50% - 8px) !important; width: auto !important; min-width: 0 !important; }
  .modern-filter-bar > .d-flex { order: 4; flex: 1 1 100% !important; min-width: 0 !important; flex-wrap: nowrap !important; gap: 6px !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
  .modern-filter-bar > .d-flex input { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
  .modern-filter-bar .modern-input { padding: 4px 8px !important; }
}

/* --- Formulaire de saisie repliable (bouton « Saisir les infos… » / .mobile-toggle-btn) ------
   Sur mobile, le formulaire de la carte .sidebar-card est MASQUÉ par défaut ; le bouton
   l'affiche (classe .show-form, posée par toggleMobileForm()) et le masque de nouveau.
   Cette règle est prioritaire (!important) pour que les mises en page génériques
   « libellé + champ » (display:flex) ne réaffichent pas les champs quand la carte est repliée. */
@media screen and (max-width: 768px) {
  .sidebar-card:has(> .mobile-toggle-btn):not(.show-form) :is(.field, .btn-submit, div[style*="grid-template-columns"]) { display: none !important; }
}

/* --- Ligne de titre du formulaire repliable (« Ajouter un événement… », avec filet) ---
   Sur mobile elle n'apporte rien (le bouton indique déjà l'action) et prend de la place :
   supprimée. Seule exception : quand le compteur de sélection (.badge) est affiché, on
   garde la ligne réduite à ce compteur, sans texte ni filet. */
@media screen and (max-width: 768px) {
  .sidebar-card:has(> .mobile-toggle-btn) > .form-title:not(:has(> .badge:not([style*="display: none"]))) { display: none !important; }
  .sidebar-card:has(> .mobile-toggle-btn) > .form-title { border: 0 !important; padding: 0 !important; margin: 0 0 6px !important; font-size: 0 !important; }
  .sidebar-card:has(> .mobile-toggle-btn) > .form-title::before { content: none !important; display: none !important; }
  .sidebar-card:has(> .mobile-toggle-btn) > .form-title > :not(.badge) { display: none !important; }
  .sidebar-card:has(> .mobile-toggle-btn) > .form-title > .badge { font-size: 14px !important; margin: 0 !important; }
}

/* ============ Champs de saisie : fond gris clair + contour vert sombre (tous écrans) ============
   Champs texte, recherche, nombre, date/heure, e-mail, mot de passe…, zones de texte et listes
   déroulantes (<select>), ainsi que les outils de saisie : Select2, sélecteur de date jQuery UI,
   listes de suggestions (autocomplete). Non modifiés : cases à cocher, radios, fichiers, curseurs,
   couleurs, boutons. Champs en lecture seule / désactivés : même famille de couleurs, en plus
   atténué. Thème sombre : fonds conservés (force-dark.css / design.css), contour vert plus clair
   pour rester visible. */
:root {
  --haloub-field-bg: #eceff0;
  --haloub-field-bg-focus: #e2e7e8;
  --haloub-field-border: #1b5e3a;
  --haloub-field-border-focus: #0f4d2a;
  --haloub-field-ring: rgba(27, 94, 58, 0.22);
  --haloub-field-off-bg: #e3e6e7;
  --haloub-field-off-border: #8fb3a0;
}

/* Champs modifiables */
html:not([data-theme="dark"]) :is(
  input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="month"], input[type="week"], textarea, select
):not([readonly]):not(:disabled) {
  background-color: var(--haloub-field-bg) !important;
  border: 1.5px solid var(--haloub-field-border) !important;
}
html:not([data-theme="dark"]) :is(
  input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="month"], input[type="week"], textarea, select
):not([readonly]):not(:disabled):focus {
  background-color: var(--haloub-field-bg-focus) !important;
  border-color: var(--haloub-field-border-focus) !important;
  box-shadow: 0 0 0 3px var(--haloub-field-ring) !important;
  outline: none !important;
}
/* Lecture seule / désactivés */
html:not([data-theme="dark"]) :is(
  input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="month"], input[type="week"], textarea, select
):is([readonly], :disabled) {
  background-color: var(--haloub-field-off-bg) !important;
  border: 1.5px solid var(--haloub-field-off-border) !important;
}

/* Select2 (liste déroulante avec recherche) */
html:not([data-theme="dark"]) :is(
  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple,
  .select2-container--classic .select2-selection--single,
  .select2-container--classic .select2-selection--multiple,
  .select2-container--bootstrap-5 .select2-selection
) {
  background-color: var(--haloub-field-bg) !important;
  border: 1.5px solid var(--haloub-field-border) !important;
}
html:not([data-theme="dark"]) :is(
  .select2-container--focus .select2-selection,
  .select2-container--open .select2-selection
) {
  background-color: var(--haloub-field-bg-focus) !important;
  border-color: var(--haloub-field-border-focus) !important;
  box-shadow: 0 0 0 3px var(--haloub-field-ring) !important;
}

/* Calendriers (jQuery UI / flatpickr / daterangepicker) */
html:not([data-theme="dark"]) :is(
  .ui-datepicker, .flatpickr-calendar, .datepicker-dropdown, .daterangepicker
) {
  background-color: var(--haloub-field-bg) !important;
  border: 1.5px solid var(--haloub-field-border) !important;
}

/* Thème sombre : seulement le contour (vert plus clair) */
html[data-theme="dark"] :is(
  input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], input[type="email"], input[type="password"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="month"], input[type="week"], textarea, select,
  .select2-container--default .select2-selection--single,
  .select2-container--default .select2-selection--multiple,
  .ui-datepicker, .flatpickr-calendar, .datepicker-dropdown, .daterangepicker
):not([readonly]):not(:disabled) {
  border: 1.5px solid #4c9f70 !important;
}

/* --- Planning circulaire (PLCL, PLCL0, PLCLG, PLCLV) : barre de boutons sur UNE ligne défilable --------
   Sur mobile, les boutons ronds (légende, recherche avancée, vidéo, liste, modifier, observation,
   alertes, événements…) ne passent plus à la ligne : ils restent sur une seule rangée qu'on fait
   défiler horizontalement au doigt. */
@media screen and (max-width: 768px) {
  .modern-controls .cont-btn {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding: 2px 2px 6px !important;
  }
  .modern-controls .cont-btn > .control-btn { flex: 0 0 auto !important; }
}

/* --- Planning circulaire (PLCL, PLCL0, PLCLG, PLCLV) : petits cercles / carrés des animaux ---------
   Le texte des numéros dans les petits cercles (.petit-cercle1) et carrés (.petit-carre1) est réduit
   de 30 % sur mobile : 16px (texte de base) x 0,7 = 11,2px. S'applique aussi aux éléments internes. */
@media screen and (max-width: 768px) {
  .grand-cercle :is(.petit-cercle1, .petit-carre1),
  .grand-cercle :is(.petit-cercle1, .petit-carre1) * { font-size: 11.2px !important; }
}

/* --- Planning circulaire : glissement tactile horizontal de la roue ------------------------------
   Le navigateur ne gère que le défilement VERTICAL (et le pincement) dans la roue ; le glissement
   horizontal est géré par le JavaScript de la page (touchmove), toujours actif. Sans cela, le pan
   natif horizontal prenait le pas sur les petits cercles (touch-action: manipulation) et ne se
   déclenchait pas de façon fiable. */
.circle-container, .circle-container * { touch-action: pan-y pinch-zoom !important; }

/* ============ Listes (suggestions, autocomplétion, Select2, listes déroulantes) : blanc sur bleu sombre ============
   Listes de suggestions (.autocomplete-suggestions), autocomplétion jQuery UI (.ui-autocomplete / .ui-menu),
   liste Select2 et liste native des <select> (options). Contour vert sombre conservé (champs de saisie). */
:root {
  --haloub-list-bg: #0b2a5b;
  --haloub-list-item-hover: #1f5bb5;
  --haloub-list-item-selected: #163f80;
  --haloub-list-line: rgba(255, 255, 255, 0.22);
}
:is(.autocomplete-suggestions, .autocomplete-list, .ui-autocomplete, .ui-menu, .select2-dropdown) {
  background: var(--haloub-list-bg) !important;
  color: #fff !important;
  border: 1.5px solid var(--haloub-field-border) !important;
}
:is(.autocomplete-suggestions, .autocomplete-list, .ui-autocomplete, .ui-menu, .select2-dropdown) :is(
  .suggestion, .autocomplete-suggestion, .autocomplete-item, .ui-menu-item, .ui-menu-item-wrapper, .select2-results__option,
  .autocomplete-suggestions > div
) {
  background: transparent !important;
  color: #fff !important;
  border-color: transparent !important;
  border-bottom: 1px solid var(--haloub-list-line) !important;
}
:is(.autocomplete-suggestions, .autocomplete-list, .ui-autocomplete, .ui-menu, .select2-dropdown) :is(
  .suggestion:hover, .autocomplete-suggestion:hover, .autocomplete-item:hover, .autocomplete-selected, .ui-menu-item-wrapper:hover,
  .ui-menu-item:hover, .ui-state-active, .ui-state-focus, .ui-menu-item .ui-state-active,
  .select2-results__option--highlighted, .select2-results__option[aria-selected="true"].select2-results__option--highlighted,
  .autocomplete-suggestions > div:hover
) {
  background: var(--haloub-list-item-hover) !important;
  color: #fff !important;
}
.select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
  background: var(--haloub-list-item-selected) !important;
  color: #fff !important;
}
/* Liste native des <select> (fenêtre déroulante : navigateurs de bureau ; le sélecteur natif mobile l'ignore) */
select option, select optgroup {
  background-color: var(--haloub-list-bg);
  color: #fff;
}
select option:checked, select option:hover {
  background-color: var(--haloub-list-item-hover);
  color: #fff;
}