/**
 * Auxi-DV — modern-design.css
 * ---------------------------------------------------------------------------
 * Partie 2 : couche « glass » sans modifier style.css (import ci-dessous).
 * Partie 1 : styles auparavant inline dans private/view/layout/header.php
 *   → .auxi-noscript-warning, .u-hidden (voir section « Extractions layout »).
 * Téléphonie : renforts visuels ; détail verre dans assets/js/main.js (#ys-tel-popup-glass-css).
 * Icônes SVG outline : --auxi-icon-stroke (1.5) ailleurs ; menu général → --menu-tile-icon-stroke-base + modificateurs radial / parallèle.
 */

@import url("./style.css");

/* ── Override immédiat style.css : .template_accueil { background-color: #F1F5F9 }
   Cette règle dans style.css est le vrai coupable du fond gris sur la page d'accueil.
   On la neutralise ici, juste après l'import, avant toute autre règle. ── */
.template_accueil {
  background-color: #B9D4EC !important;
}
.template_accueil.menu-general {
  background: linear-gradient(160deg, #CFE3F3 0%, #B9D4EC 50%, #A6C7E6 100%) !important;
}

/* Typographie globale (Inter — chargée dans layout/header.php) */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  padding-top: var(--auxi-header-offset);
}

/* Navbar en sticky : plus de bande vide — le bandeau occupe le flux en tête de page */
body:has(header .auxi-navbar-compact) {
  padding-top: 0;
}

/* ---------------------------------------------------------------------------
   Extractions layout (header.php) — identique à l’ancien inline
   --------------------------------------------------------------------------- */
.auxi-noscript-warning {
  text-align: center;
  padding: 20px;
  background-color: #ffcccc;
  color: #cc0000;
}

/**
 * Masquage par défaut de #infosEnTete — sans !important pour rester
 * compatible avec jQuery .show() / .hide() (assets/js/main.js).
 * La marque #logo (texte APP_NAME) reste affichée en permanence.
 */
.u-hidden {
  display: none;
}

/* ---------------------------------------------------------------------------
   Variables (codes hex repris de assets/css/style.css)
   --------------------------------------------------------------------------- */
:root {
  /* Verre renforcé (données métier) — lisibilité assurée par blur ≥ 10px */
  --glass-bg-strong: rgba(255, 255, 255, 0.52);
  --glass-blur: 14px;
  --glass-blur-data: 16px;
  --glass-border: rgba(0, 0, 0, 0.06);
  --radius-pill: 50px;
  --radius-card: 20px;
  --radius-tel-popup: 32px;

  /* Bouton auth « Se connecter » : marine assombri ~10 % (contraste texte blanc renforcé) */
  --accent-auth-submit-start: #15306e;
  --accent-auth-submit-end: #1e3a8a;
  /* Focus champs auth : bord marine (border) + halo très diffus, sans anneau dur */
  --auth-input-focus-border: #1e3a8a;
  --auth-input-focus-glow:
    0 0 8px rgba(30, 58, 138, 0.2),
    0 0 22px rgba(30, 58, 138, 0.12);
  /* Liens auth : bleu foncé — contraste WCAG AA sur fond blanc / verre */
  --auth-form-link: #1e3a8a;
  --auth-form-link-hover: #15306e;
  /* Pour rgba(var(--accent-rgb), α) — halo focus, etc. */
  --accent-rgb: 30, 58, 138;
  /* Alias charte (spec glass / hover bleu léger) */
  --accent-on-glass: #1e3a8a;
  /* Orange historique : ne pas utiliser pour l’UI métier (préférer --accent-color). Réservé sémantique avertissement si besoin. */
  /* Hauteur de référence sous navbar fixe (alignée sur .auxi-navbar-compact) — ~10 % de moins que 2.5rem */
  --auxi-header-offset: 2.25rem;
  /* Respiration verticale zone métier (ex. menu général) + marge pilule SMS ↔ dock */
  --auxi-main-respiration-y: 40px;
  /* Icônes SVG outline type Lucide / tuiles menu — conserver ce trait pour toute nouvelle icône outline */
  --bootstrap-primary: #1e3a8a;
  --text-night: #0f172a;
  --text-muted: #64748b;
  --footer-green: #6e8c03;
  --champs-oblig-bg: #DCE9F7;
  --champs-oblig-text: #1e3a8a;
  /* Variables pour le groupement métier des tuiles */
  /* Fond subtil pour tuiles importantes */
  /* Séparateur de groupe */
  /* Élévation premium — ombre diffuse et légère */
  --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  /* Grand panneau formulaire (carte blanche) — ombre très diffuse, pas de contour dur */
  --shadow-form-panel:
    0 20px 56px -24px rgba(15, 23, 42, 0.065),
    0 10px 28px -14px rgba(15, 23, 42, 0.045),
    0 2px 12px -6px rgba(15, 23, 42, 0.035);
  --shadow-form-panel-hover:
    0 22px 52px -20px rgba(15, 23, 42, 0.09),
    0 12px 28px -14px rgba(15, 23, 42, 0.065),
    0 4px 14px -6px rgba(15, 23, 42, 0.05);
  --border-premium: #f1f5f9;
  --shadow-telephony: 0 24px 56px rgba(15, 23, 42, 0.1), 0 10px 28px rgba(51, 65, 85, 0.08);
  --z-telephony: 2147483640;
  /* Barre téléphonie bas d’écran (dock) — noir translucide ~80 % */
  /* Barre téléphonie (dock) — alignée header / slate-900 */
  --tel-dock-bg: #0f172a;
  --tel-dock-bg-mid: #132337;
  --tel-dock-border-top: rgba(255, 255, 255, 0.1);
  --tel-dock-height: 3.35rem;
  --tel-dock-sms-above: 2.75rem;
  --tel-dock-content-gap: 0.75rem;
  --tel-dock-action-bg: rgba(255, 255, 255, 0.1);
  --tel-dock-action-border: rgba(255, 255, 255, 0.14);
  --tel-dock-composer-glow: 0 0 0 1px rgba(147, 197, 253, 0.35), 0 0 22px rgba(59, 130, 246, 0.45);

  /* Formulaires (connexion, activation, MDP…) — aligné menu général */
  --form-glass-bg: rgba(255, 255, 255, 0.7);
  --form-glass-blur: 15px;
  --form-glass-radius: 24px;
  --form-input-radius: 12px;
  /* Design system champs — lisibilité / contraste WCAG (main, modales, .card.texture, formulaires .template) */
  /* Libellés : anthracite légèrement renforcé — uniforme sur toute l’app */
  --ds-form-label: #152032;
  --ds-form-label-size: 0.875rem;
  /* Cartes formulaire (.formulaire-fiche, pages .template) : padding homogène haut / bas */
  --ds-form-card-padding: 1.25rem;
  --ds-input-radius: 8px;
  --ds-input-border: #E2E8F0;
  --ds-input-shadow-idle: 0 1px 2px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  /* Focus type Tailwind ring-2 ring-blue-500 */
  --ds-input-focus-glow: 0 0 0 3px rgba(30, 58, 138, 0.14), 0 0 0 1px rgba(30, 58, 138, 0.08);
  --ds-ring-brand: var(--ds-brand);
  /* Menu général refonte */
  --page-pearl: #F1F5F9;
  --menu-accent: #1e293b;
  --menu-tile-radius: 16px;
  --shadow-lg-menu: 0 8px 28px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  /* Menu général / harmonisation auth — bordure tuiles & accents (≈ bleu « Se connecter ») */
  --auxi-tile-border-auth: #1e3a8a;
  /* Menu général : bordure repos / survol (#1e3a8a) + ombre survol plus diffuse */
    0 14px 44px -10px rgba(30, 58, 138, 0.35),
    0 10px 32px -12px rgba(15, 23, 42, 0.18),
    0 4px 16px -4px rgba(30, 58, 138, 0.15);
  /* Bouton menu profil : aligné sur le dégradé auth (legacy #15306e retiré du ring tuiles) */
  --ds-input-min-height: calc(1.5em + 1rem + 2px);
  --ds-input-fixed-height: calc(1.5em + 1rem + 2px);
  --ds-input-pad-y: 0.5rem;
  --ds-input-pad-x: 0.875rem;
  --ds-input-transition: all 0.3s ease;
  --ds-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --form-border-light: rgba(255, 255, 255, 0.72);
  /* Fond applicatif officiel (accueil + espaces métier) — pas d’images stock.
     Slate-200 (#E2E8F0) : contraste net avec les cartes blanches (demande métier
     « manque de contraste, fond trop proche du blanc »). N'affecte PAS --page-pearl,
     donc les en-têtes de tableaux (#F1F5F9) restent inchangés. */
  --auxi-app-bg-gradient: linear-gradient(180deg, #E2E8F0 0%, #E2E8F0 100%);
  --auxi-app-bg-pattern-opacity: 0; /* fonds plats : texture quadrillée désactivée */
  --auxi-breadcrumb-bg: rgba(255, 255, 255, 0.82);
  --auxi-breadcrumb-border: 1px solid rgba(226, 232, 240, 0.95);
  --auxi-breadcrumb-sep-color: #94a3b8;
  /* Panneau filtres / widgets latéraux : aligné colonne « Aujourd’hui » (menu général) */
  --auxi-widget-panel-shadow: var(--shadow-float);
  --auxi-widget-panel-border: 1px solid rgba(148, 163, 184, 0.28);
  /* Icônes sections filtres : marine tuiles (action) */
  /* Badge compteur résultats (âge anniversaires) */
  --auxi-result-badge-text: #1e293b;
  /* Pilule : fond marine très clair (rappel badges « Aujourd’hui » / âge) */
  --auxi-result-badge-bg: rgba(30, 41, 59, 0.06);
  --auxi-result-badge-border: 1px solid rgba(30, 41, 59, 0.15);
  /* En-têtes tableaux = bleu nuit barre de navigation (Indigo) */
  /* Dégradé proche de .template_accueil / .accueil (lightblue) pour transition post-login */
  /* Bleu ciel unique de l'appli (accueil front + back, connexion, réinit/modif MDP).
     Teinte de référence = ancien dégradé du menu général back-office.
     ─────────────────────────────────────────────────────────────────────────
     2026-06 : nuance re-calée sur la famille du marine (--ds-brand #1e3a8a) —
     hue cyan→bleu + légère désaturation, clarté inchangée (changement volontairement
     peu perceptible, pour une charte plus cohérente/moderne).
     ROLLBACK éventuel — restaurer l'ancien cyan/turquoise en remplaçant, ICI ET dans
     les occurrences en dur (background-color #B9D4EC et les linear-gradient(160deg,…)
     ailleurs dans ce fichier), les stops actuels par :
       ANCIEN dégradé : linear-gradient(160deg, #C5E8F4 0%, #ADD8E6 50%, #9ACFDF 100%)
       ANCIEN background-color de repli : #ADD8E6
     ───────────────────────────────────────────────────────────────────────── */
  --app-sky-gradient: linear-gradient(160deg, #CFE3F3 0%, #B9D4EC 50%, #A6C7E6 100%);
}

@media (max-width: 991.98px) {
  :root {
    --auxi-header-offset: 2.75rem;
  }
}

/* ---------------------------------------------------------------------------
   Hiérarchie : données métier (main) vs outil téléphonie
   --------------------------------------------------------------------------- */
main {
  position: relative;
  z-index: 1;
}

/* Footer global : conservé pour le JS (#footer) — plus de bandeau copyright / version */
#footer.auxi-footer-minimal {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  border: none !important;
  visibility: hidden;
}

/* Page de connexion : mentions légales en pied de zone bleue */
.container-fluid.backg:has(#connexion) {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--auxi-header-offset));
  min-height: calc(100dvh - var(--auxi-header-offset)); /* Safari/iOS : hauteur visible réelle */
}

.container-fluid.backg:has(#connexion) #connexion {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.container-fluid.backg:has(#connexion) #connexion > .row {
  flex: 1 0 auto;
  align-items: center;
}

.login-page-legal {
  flex-shrink: 0;
  opacity: 1;
  letter-spacing: 0.3px;
  font-size: 0.8rem !important;
  /* Gris plus dense sur fond dégradé — lisibilité renforcée (tous écrans) */
  color: #334155 !important;
  font-weight: 500;
}

#ntf-active-call.ys-tel-popup {
  z-index: var(--z-telephony) !important;
}

/* Téléphonie : gris-bleu désaturé, secondaire vis-à-vis des données métier */
#ntf-active-call.ys-tel-popup .ys-tel-popup-inner {
  background: rgba(226, 232, 240, 0.55) !important;
  backdrop-filter: blur(16px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(118%) !important;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  box-shadow: var(--shadow-telephony) !important;
  border-radius: var(--radius-tel-popup) !important;
}

#ntf-active-call.ys-tel-popup .ys-tel-chrome {
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

/* ---------------------------------------------------------------------------
   Dock téléphonie (softphone) — barre fixe bas d’écran, design system slate-900
   --------------------------------------------------------------------------- */
body:has(#ys-tel-dock) main {
  padding-bottom: calc(
    var(--tel-dock-height) + var(--tel-dock-content-gap) + env(safe-area-inset-bottom, 0px)
  );
}

/* Menu général + pilule SMS : respiration basse alignée sur le haut (voir --auxi-main-respiration-y) */
body:has(#ys-tel-dock):has(#afficherRappelSMS) main {
  padding-bottom: calc(
    var(--tel-dock-height) + var(--tel-dock-sms-above) + var(--tel-dock-content-gap) +
      var(--auxi-main-respiration-y) + env(safe-area-inset-bottom, 0px)
  );
}

#ys-tel-dock.ys-tel-dock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  min-height: var(--tel-dock-height);
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0.4rem max(10px, env(safe-area-inset-left, 0px)) max(0px, env(safe-area-inset-bottom, 0px))
    max(10px, env(safe-area-inset-right, 0px));
  color: #f8fafc;
  font-size: 0.8125rem;
  line-height: 1.3;
  background: linear-gradient(180deg, var(--tel-dock-bg-mid) 0%, var(--tel-dock-bg) 100%) !important;
  border-top: 1px solid var(--tel-dock-border-top) !important;
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#ys-tel-dock.ys-tel-dock .ys-tel-dock-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
}

#ys-tel-dock.ys-tel-dock .ys-tel-dock-center {
  flex: 1 1 0;
  min-width: 1rem;
}

#ys-tel-dock.ys-tel-dock .ys-tel-dock-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  flex: 0 1 auto;
  justify-content: flex-end;
}

#ys-tel-dock.ys-tel-dock .ys-tel-dock-pill {
  color: #e2e8f0;
  font-size: 0.75rem;
}

#ys-tel-dock.ys-tel-dock .ys-tel-dock-pill strong {
  color: #fff;
  font-weight: 600;
}

/* Boutons secondaires (Historique, Composer, Autre appel) */
#ys-tel-dock.ys-tel-dock .ys-tel-dock-action--secondary {
  border-radius: 12px !important;
  color: #fff !important;
  background: var(--tel-dock-action-bg) !important;
  border: 1px solid var(--tel-dock-action-border) !important;
  box-shadow: none;
  padding: 0.35rem 0.65rem !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

#ys-tel-dock.ys-tel-dock .ys-tel-dock-action--secondary:hover,
#ys-tel-dock.ys-tel-dock .ys-tel-dock-action--secondary:focus {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}

#ys-tel-dock.ys-tel-dock .ys-tel-dock-composer {
  box-shadow: var(--tel-dock-composer-glow);
}

#ys-tel-dock.ys-tel-dock .ys-tel-dock-composer:hover,
#ys-tel-dock.ys-tel-dock .ys-tel-dock-composer:focus {
  box-shadow:
    0 0 0 1px rgba(186, 230, 253, 0.45),
    0 0 28px rgba(59, 130, 246, 0.55);
}

/* Volume + zoom : pictos discrets à droite */
#ys-tel-dock.ys-tel-dock .ys-tel-dock-ico-btn {
  border-radius: 10px !important;
  color: #e2e8f0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  line-height: 1;
  min-width: 2rem;
  padding: 0.25rem 0.35rem !important;
}

#ys-tel-dock.ys-tel-dock .ys-tel-dock-ico-btn:hover,
#ys-tel-dock.ys-tel-dock .ys-tel-dock-ico-btn:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

#ys-tel-dock.ys-tel-dock .ys-tel-dock-vol-group {
  gap: 0.15rem;
}

#ys-tel-dock.ys-tel-dock .ys-tel-dock-zoom {
  gap: 0.25rem;
  margin-left: 0.15rem;
  padding-left: 0.35rem;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 767px) {
  :root {
    --tel-dock-height: 5.75rem;
  }

  #ys-tel-dock.ys-tel-dock {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    min-height: 0;
  }

  #ys-tel-dock.ys-tel-dock .ys-tel-dock-left,
  #ys-tel-dock.ys-tel-dock .ys-tel-dock-right {
    justify-content: space-between;
    width: 100%;
  }

  #ys-tel-dock.ys-tel-dock .ys-tel-dock-center {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Navigation principale — glass sur les contrôles (disposition inchangée)
   --------------------------------------------------------------------------- */
.navbar.navbar-dark.bg-dark {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .btn {
  border-radius: var(--radius-pill);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .btn:hover,
.navbar-dark .navbar-nav .btn:focus {
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
/* Bandeau compact : marque texte + titre fiche (#infosEnTete) + menu profil sur une ligne (lg+) — sticky en tête */
.navbar.navbar-dark.bg-dark.navbar-expand-lg.auxi-navbar-compact {
  position: -webkit-sticky; /* Safari/iOS < 13 */
  position: sticky;
  top: 0;
  z-index: 1030;
  width: 100%;
  padding-top: 0.1875rem;
  padding-bottom: 0.1875rem;
  min-height: 0;
}

.navbar.auxi-navbar-compact .auxi-navbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 0.25rem;
  column-gap: 0.5rem;
}

@media (min-width: 992px) {
  .navbar.auxi-navbar-compact .auxi-navbar-inner {
    flex-wrap: nowrap;
  }
}

.navbar.auxi-navbar-compact .auxi-navbar-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  min-width: 0;
}

.navbar.auxi-navbar-compact .auxi-app-brand {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #fff !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin: 0;
  display: inline-flex;
  align-items: center;
}

.navbar.auxi-navbar-compact #infosEnTete:not(.u-hidden) {
  font-size: 0.9375rem;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
}

.navbar.auxi-navbar-compact .navbar-toggler {
  padding: 0.2rem 0.45rem;
}

.navbar.auxi-navbar-compact .navbar-nav .nav-item {
  display: flex;
  align-items: center;
}

/* Bouton menu profil : même dégradé, rayon et ombre que « Se connecter » (#submit-login) */
.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white {
  padding: 0.35rem 0.85rem !important;
  font-size: 0.9375rem !important;
  line-height: 1.25 !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: var(--form-input-radius) !important;
  border: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  color: #fff !important;
  background-image: linear-gradient(135deg, var(--accent-auth-submit-start) 0%, var(--accent-auth-submit-end) 100%) !important;
  background-color: transparent !important;
  /* Micro-ombre type tuiles menu (relief pro, cohérent avec --shadow-float) */
  box-shadow:
    var(--shadow-float),
    0 2px 10px -2px rgba(30, 58, 138, 0.14),
    0 1px 4px rgba(15, 23, 42, 0.06) !important;
  transition:
    box-shadow 0.2s ease-in-out,
    filter 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white:hover,
.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white:focus {
  color: #fff !important;
  background-image: linear-gradient(135deg, var(--accent-auth-submit-start) 0%, var(--accent-auth-submit-end) 100%) !important;
  background-color: transparent !important;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08) !important;
  filter: brightness(0.96);
  transform: translateY(-1px);
}

.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white:focus {
  outline: none;
}

.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white:focus-visible {
  outline: 2px solid var(--auxi-tile-border-auth) !important;
  outline-offset: 2px;
}

.navbar.auxi-navbar-compact .nav-item.dropdown.show > .dropdown-toggle.btn-white,
.navbar.auxi-navbar-compact .nav-item.dropdown.show > .dropdown-toggle.btn-white:focus,
.navbar.auxi-navbar-compact .nav-item.dropdown.show > .dropdown-toggle.btn-white:hover {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  color: #fff !important;
  background-image: linear-gradient(135deg, var(--accent-auth-submit-start) 0%, var(--accent-auth-submit-end) 100%) !important;
  filter: brightness(0.93);
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 2px 8px rgba(0, 0, 0, 0.28),
    0 2px 10px rgba(0, 0, 0, 0.12) !important;
}

.navbar.auxi-navbar-compact .nav-item.dropdown.show > .dropdown-toggle.btn-white:focus-visible {
  outline: none !important;
}

.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white .fa,
.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white i {
  color: #fff !important;
}

/* Chevron profil : pivote à 180° quand le menu est ouvert (.show = Bootstrap) */
.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white .auxi-nav-profile-chevron {
  display: inline-block;
  transition: transform 0.22s ease;
  transform-origin: 50% 55%;
}

.navbar.auxi-navbar-compact .nav-item.dropdown.show > .dropdown-toggle.btn-white .auxi-nav-profile-chevron {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Menu déroulant utilisateur (#menuUtilisateur) — sobre, aéré (type M365)
   --------------------------------------------------------------------------- */

/* Menu utilisateur — surface CLAIRE, alignée navbar/cartes (tokens --ds-*) */
.navbar.auxi-navbar-compact #menuUtilisateur + .dropdown-menu {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  border: var(--ds-border);
  margin-top: 0.35rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  min-width: 13rem;
  background-color: #ffffff !important;
}

.navbar.auxi-navbar-compact #menuUtilisateur + .dropdown-menu a.dropdown-item {
  padding: 12px 16px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ds-gray-700) !important;
  background-color: transparent !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar.auxi-navbar-compact #menuUtilisateur + .dropdown-menu a.dropdown-item i {
  margin-right: 12px !important;
  width: 1.15em;
  text-align: center;
  color: var(--ds-brand) !important;
}

.navbar.auxi-navbar-compact #menuUtilisateur + .dropdown-menu a.dropdown-item:hover,
.navbar.auxi-navbar-compact #menuUtilisateur + .dropdown-menu a.dropdown-item:focus {
  background-color: var(--ds-brand-light) !important;
  color: var(--ds-brand-hover) !important;
}

.navbar.auxi-navbar-compact #menuUtilisateur + .dropdown-menu a.dropdown-item:hover i,
.navbar.auxi-navbar-compact #menuUtilisateur + .dropdown-menu a.dropdown-item:focus i {
  color: var(--ds-brand-hover) !important;
}

.navbar.auxi-navbar-compact #menuUtilisateur + .dropdown-menu .dropdown-divider {
  height: 0;
  margin: 0.35rem 0;
  overflow: hidden;
  border-top: var(--ds-border) !important;
  opacity: 1;
  background: transparent;
}

/* Statut invité : indicateur neutre (gris ardoise / bleu nuit), pas lecture « alerte » */
.navbar.auxi-navbar-compact .auxi-nav-guest-status.nav-link.btn {
  color: #e2e8f0 !important;
  background: rgba(51, 65, 85, 0.55) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  font-weight: 500;
  font-size: 0.875rem;
  box-shadow: none;
}

.navbar.auxi-navbar-compact .auxi-nav-guest-status .auxi-nav-guest-status__icon {
  color: #cbd5e1 !important;
}

.navbar.auxi-navbar-compact .auxi-nav-guest-status.nav-link.btn:hover,
.navbar.auxi-navbar-compact .auxi-nav-guest-status.nav-link.btn:focus {
  color: #f8fafc !important;
  background: rgba(71, 85, 105, 0.65) !important;
  border-color: rgba(203, 213, 225, 0.45) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.navbar.auxi-navbar-compact .auxi-nav-guest-status.nav-link.btn:focus-visible {
  outline: 2px solid rgba(147, 197, 253, 0.85);
  outline-offset: 2px;
}

/* Fil d'Ariane sous header fixe — lisibilité / hiérarchie */
#fiche-creation-breadcrumb {
  font-size: 0.9375rem;
}

a.fiche-rc-bc-link,
a.fiche-rc-bc-link:link,
a.fiche-rc-bc-link:visited {
  color: var(--ds-brand) !important;
  font-weight: 600;
  text-decoration: none !important;
}

a.fiche-rc-bc-link:hover,
a.fiche-rc-bc-link:focus,
a.fiche-rc-bc-link:focus-visible {
  color: #854F0B !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

.fiche-rc-bc-sep {
  color: #64748b !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Tableaux métier — conteneur verre, cellules nettes (sans flou sur le texte)
   --------------------------------------------------------------------------- */
main .table-responsive {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-data)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--glass-blur-data)) saturate(135%);
  border-radius: var(--radius-card);
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

/* Recherche missions / fiches / affectation : le bloc résultats occupe toute la largeur restante à droite des filtres */
@media (min-width: 768px) {
  .container-fluid.template > .row:has(#zone-filtre):has(#zone-resultat) {
    justify-content: flex-start;
  }

  .container-fluid.template > .row:has(#zone-filtre):has(#zone-resultat) > #zone-resultat.col-md-10 {
    flex: 1 1 0%;
    max-width: none;
    width: auto;
    min-width: 0;
  }
}

/* Permettre au tableau de respirer (scroll horizontal si besoin) — surcharge overflow:hidden des tableaux métier */
main .container-fluid.template #zone-resultat .table-responsive,
main #zone-resultat .table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

#zone-resultat .table-responsive > .table {
  width: 100%;
}

/* Colonnes triables « Dernier contact » / « Localité » (recherche fiche / affectation auxiliaire) */
#zone-resultat th:has(#filtreTabDernierContact),
#zone-resultat th:has(#filtreTabLocalite) {
  min-width: 11rem;
}

/* Tableaux : aucune bordure intérieure rigide — uniquement séparateurs horizontaux */
main .table-responsive table,
main .table-responsive table th,
main .table-responsive table td {
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
}

main table th {
  background-color: rgba(242, 242, 242, 0.95);
  color: var(--text-night);
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: none;
  transition: background-color 0.15s ease-in-out;
}

main table td {
  background-color: rgba(255, 255, 255, 0.98);
  color: var(--text-night);
  border-bottom: 1px solid var(--glass-border) !important;
  transition: background-color 0.15s ease-in-out;
}

main table tr.tabline:hover td,
main .table-hover tbody tr:hover td {
  background-color: #f4f6f8;
}

/* ---------------------------------------------------------------------------
   Fiches / panneaux cartes (Localisation, Observations, etc.)
   --------------------------------------------------------------------------- */
/* Cartes fiche : verre un peu plus translucide */
.fiche .card,
.panneau-fiche .card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-data)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--glass-blur-data)) saturate(130%);
  border-radius: var(--radius-card);
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
}

.fiche .card-header,
.panneau-fiche .card-header,
.fiche .card-footer,
.panneau-fiche .card-footer {
  background-color: rgba(247, 247, 247, 0.78);
  border-color: var(--glass-border) !important;
}

/* WCAG : titres de section (text-secondary / liens) plus lisibles sur fond verre */
.fiche .card-header .card-title,
.fiche .card-header h4,
.panneau-fiche .card-header .card-title,
.panneau-fiche .card-header h4 {
  color: #1e293b !important;
}

.fiche .card-header .text-secondary,
.panneau-fiche .card-header .text-secondary {
  color: #1e293b !important;
}

.fiche .card-header .text-secondary i,
.panneau-fiche .card-header .text-secondary i {
  color: var(--accent-on-glass) !important;
}

/* Menu général (accueil back-office) — fond lightblue dégradé subtil, tuiles blanches */
.template_accueil {
  background-color: #B9D4EC !important;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Correction : le .container Bootstrap limite la largeur et impose un fond blanc implicite.
   On force le conteneur template_accueil à occuper toute la largeur du viewport
   et à afficher le fond marine même quand Bootstrap applique un max-width. */
.container.template_accueil.menu-general,
.container-fluid.template_accueil.menu-general {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: linear-gradient(160deg, #CFE3F3 0%, #B9D4EC 50%, #A6C7E6 100%) !important;
}

/* Menu général : fond lightblue garanti sur tout le viewport.
   Technique pseudo-élément fixed : couvre tout le viewport en z-index négatif,
   sans dépendre des wrappers app extérieurs à ce fichier. */
body:has(.template_accueil.menu-general) {
  background: linear-gradient(160deg, #CFE3F3 0%, #B9D4EC 50%, #A6C7E6 100%) !important;
}

html:has(.template_accueil.menu-general) {
  background: linear-gradient(160deg, #CFE3F3 0%, #B9D4EC 50%, #A6C7E6 100%) !important;
}

body:has(.template_accueil.menu-general)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(160deg, #CFE3F3 0%, #B9D4EC 50%, #A6C7E6 100%);
  pointer-events: none;
}

body:has(.template_accueil.menu-general) > main {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--auxi-header-offset));
  background: transparent !important;
}

/* Fond transparent sur le main global — l'accueil gère son propre fond
   via .template_accueil.menu-general */
body:has(.template_accueil.menu-general) > main,
body:has(.template_accueil.menu-general) > main.auxi-data-workspace,
body:has(.template_accueil.menu-general) main:not(#main-content) {
  background: transparent !important;
  background-color: transparent !important;
}

body:has(#ys-tel-dock):has(.template_accueil.menu-general) > main {
  min-height: calc(
    100dvh - var(--auxi-header-offset) - var(--tel-dock-height) - var(--tel-dock-content-gap) -
      env(safe-area-inset-bottom, 0px)
  );
}

.template_accueil.menu-general {
  position: relative;
  background: linear-gradient(160deg, #CFE3F3 0%, #B9D4EC 50%, #A6C7E6 100%) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: calc(100dvh - var(--auxi-header-offset));
  width: 100%;
  padding-top: clamp(0.75rem, 2.5vh, var(--auxi-main-respiration-y));
  padding-bottom: clamp(0.75rem, 2.5vh, var(--auxi-main-respiration-y));
  /* Traits SVG menu : base + modificateurs radial / parallèle (masse visuelle homogène) */
  /* Largeur fixe d’une colonne tuile sur grille 1120px / 4 (gaps inclus) — centrage sans étirement */
  /* Icônes tuiles non actives : gris assez foncé (~7:1 sur fond blanc tuile, WCAG AA) */
  --menu-tile-icon-accent: var(--ds-brand);
}

/* Motif géométrique très discret sur le fond menu général (fixe au défilement) */
.template_accueil.menu-general::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--auxi-app-bg-pattern-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 24h48M24 0v48M12 12l24 24M36 12L12 36' stroke='%2364748b' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
  background-size: 48px 48px;
  background-repeat: repeat;
  background-attachment: fixed;
}

.template_accueil.menu-general.auxi-front-home-shell {
  /* Fond bleu ciel partagé avec la page de connexion (cohérence connexion ↔ accueil).
     Dégradé porté par la coquille (classe rendue côté serveur → pas de flash au chargement),
     même traitement que .backg de la connexion : min-height pour couvrir l'écran sous le header. */
  background: var(--app-sky-gradient) !important;
  min-height: calc(100vh - var(--auxi-header-offset));
  min-height: calc(100dvh - var(--auxi-header-offset)); /* Safari/iOS : hauteur visible réelle */
}

.template_accueil.menu-general.auxi-front-home-shell::before {
  opacity: 0.006;
}

html.auxi-front-home-active,
body.auxi-front-home-active {
  /* Aplat ciel de repli (overscroll / marges) : même famille que le dégradé, aucune couture. */
  background: #DCE9F7 !important;
}

body.auxi-front-home-active > main {
  background: transparent !important;
}

/* Accessibilité : sur le fond bleu ciel, le gris muted Bootstrap (#94A3B8, déjà
   sous le seuil AA sur l'ancien fond) devient illisible. On l'assombrit au token
   --ds-gray-700 (#475569) → contraste AA garanti (>=4.77) sur toute la plage du dégradé. */
.template_accueil.menu-general.auxi-front-home-shell .text-muted {
  color: var(--ds-gray-700) !important;
}

.template_accueil.menu-general.auxi-front-home-shell main.auxi-front-home {
  padding-top: clamp(0.75rem, 2.5vh, var(--auxi-main-respiration-y));
  padding-bottom: clamp(0.75rem, 2.5vh, var(--auxi-main-respiration-y));
}











.template_accueil.menu-general > main,
.template_accueil.menu-general > footer {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* Tous les enfants directs du template_accueil sont transparents
   pour laisser voir le fond marine du conteneur parent */
.template_accueil.menu-general > * {
  background: transparent !important;
}

.template_accueil.menu-general main#main-content {
  background: transparent !important;
  background-color: transparent !important;
}







.template_accueil main#main-content h2.text-center,
.template_accueil main#main-content h2 {
  color: var(--menu-accent);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
}

/* Bloc titre + grille + widget : même largeur max que la grille (titre centré sur l’ensemble) */


/* Titre menu général : centré sur la largeur combinée tuiles + colonne droite */


/* Panneau aside anniversaires supprimé — module déplacé en modale (Action 8) */

/* Libellé « Anniversaires du jour » : même famille typographique que les libellés des tuiles */
.menu-general .menu-general-birthdays__label-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
}

.menu-general .menu-general-birthdays__title-icon {
  flex-shrink: 0;
  color: var(--menu-tile-icon-accent, #475569);
}

.menu-general .menu-general-birthdays__svg {
  display: block;
}

.menu-general .menu-general-birthdays__section-label {
  margin: 0;
  padding: 0;
  color: #1e3a8a !important;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.menu-general .menu-general-birthdays__scroll {
  margin: 0 -0.15rem;
  padding: 0 0.15rem;
  max-height: none;
  overflow: visible;
  overscroll-behavior: contain;
}

/* Plus de 10 noms : zone défilante, barre fine */
.menu-general .menu-general-birthdays__scroll.menu-general-birthdays__scroll--many {
  max-height: calc(10 * (0.8125rem * 1.45 + 0.65rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.42) transparent;
}

.menu-general .menu-general-birthdays__scroll.menu-general-birthdays__scroll--many::-webkit-scrollbar {
  width: 5px;
}

.menu-general .menu-general-birthdays__scroll.menu-general-birthdays__scroll--many::-webkit-scrollbar-track {
  background: transparent;
}

.menu-general .menu-general-birthdays__scroll.menu-general-birthdays__scroll--many::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.4);
  border-radius: 999px;
}

.menu-general .menu-general-birthdays__scroll.menu-general-birthdays__scroll--many::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.45);
}

.menu-general .menu-general-birthdays__list {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #334155;
}

.menu-general .menu-general-birthdays__item {
  padding: 0.32rem 0;
  border-bottom: 1px solid #f1f1f1;
}

.menu-general .menu-general-birthdays__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Anniversaires : [Nom prénom] | [badge âge marine] | [groupe boutons actions] — hauteur homogène */
.menu-general .menu-general-birthdays__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto max-content;
  align-items: center;
  column-gap: 0.32rem;
  row-gap: 0.2rem;
  min-height: 2.15rem;
}

.menu-general .menu-general-birthdays__actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.28rem;
  flex-shrink: 0;
}

/* Une seule ligne + ellipsis (toutes largeurs / longueurs de nom) */
.menu-general .menu-general-birthdays__name {
  display: block;
  max-width: 100%;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
  min-width: 0;
  text-align: center;
  line-height: 1.3;
}

.menu-general .menu-general-birthdays__pipe {
  color: #cbd5e1;
  font-weight: 300;
  font-size: 0.78rem;
  line-height: 1;
  user-select: none;
  padding: 0 0.04rem;
  flex-shrink: 0;
}

.menu-general .menu-general-birthdays__age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.16rem 0.52rem;
  min-height: 1.55rem;
  min-width: 2.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--auxi-result-badge-text);
  background: var(--auxi-result-badge-bg);
  border: var(--auxi-result-badge-border);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

/* Âge absent : même emplacement, style « désactivé » gris clair (alignement conservé) */
.menu-general .menu-general-birthdays__age-badge--missing {
  color: #94a3b8;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.14);
  border: 1px dashed rgba(148, 163, 184, 0.5);
  box-shadow: none;
}

.menu-general .menu-general-birthdays__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  min-width: 2.35rem;
  min-height: 1.85rem;
}

.menu-general .menu-general-birthdays__slot .menu-general-birthdays__action-btn {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.35rem;
}

.menu-general .menu-general-birthdays__slot-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 1.65rem;
  border-radius: 0.25rem;
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  border: 1px dashed rgba(148, 163, 184, 0.45);
  font-size: 0.85rem;
  line-height: 1;
  cursor: default;
}

.menu-general .menu-general-birthdays__slot-inner--disabled {
  opacity: 1;
  color: #94a3b8;
  background: #ffffff;
  border: 1px dashed rgba(148, 163, 184, 0.4);
}

.menu-general .menu-general-birthdays__slot-inner--disabled i {
  color: #94a3b8;
}

.menu-general .menu-general-birthdays__action-btn {
  padding: 0.22rem 0.42rem;
  line-height: 1;
  /* Marine de la charte (--ds-brand : #1e3a8a) — aligné sur les boutons d'action de l'app. */
  color: #1e3a8a !important;
  border-color: rgba(30, 58, 138, 0.25) !important;
  background-color: rgba(30, 58, 138, 0.08) !important;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.menu-general .menu-general-birthdays__action-btn:hover:not(.inactif):not(.disabled),
.menu-general .menu-general-birthdays__action-btn:focus-visible:not(.inactif):not(.disabled) {
  color: #15306e !important;
  border-color: rgba(30, 58, 138, 0.45) !important;
  background-color: rgba(30, 58, 138, 0.15) !important;
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.12);
}

.menu-general .menu-general-birthdays__action-btn:focus-visible:not(.inactif):not(.disabled) {
  outline: 2px solid #1e3a8a;
  outline-offset: 2px;
}

.menu-general .menu-general-birthdays__mail-trigger.inactif,
.menu-general .menu-general-birthdays__call-trigger.inactif {
  cursor: not-allowed;
  pointer-events: auto;
  opacity: 1;
  color: #94a3b8 !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  border-style: dashed !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
}

.menu-general .menu-general-birthdays__mail-trigger.inactif i,
.menu-general .menu-general-birthdays__call-trigger.inactif i {
  color: #94a3b8;
}

/* 1–3 tuiles : flex + justify-content center (ligne incomplète centrée) */


@keyframes menu-general-tile-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



















/* Exactement 4 tuiles : grille 2×2 (repeat(2, 1fr)) */




/* Grille 3 colonnes harmonieuse */




/* Centrage dernière ligne incomplète — grid-column explicite sur les tuiles orphelines.
   Cas 2 orphelines sur 3 colonnes (ex : 8 tuiles → lignes 3+3+2) :
   - avant-dernière tuile (nth-last-child(2)) de type 3n+1 → forcer col 2
   - dernière tuile (nth-last-child(1)) de type 3n+2 → forcer col 3
   Sans ::after (perturberait nth-last-child). Fonctionne avec PHP conditionnels. */


/* Cas 1 orpheline sur 3 colonnes (ex : 7 tuiles → lignes 3+3+1) : centrer en col 2 */






/* >4 tuiles : bento 4 → 3 → 2 colonnes ; ≤479px : 1 colonne (mobile) */








/* ≤479px : grilles 2×2 / bento en 1 colonne ; flex 1–3 tuiles pleine largeur ; titres centrés */



/* ---------------------------------------------------------------------------
   Groupement métier des tuiles - Compatible avec design moderne existant
   --------------------------------------------------------------------------- */

/* Bordure gauche colorée selon catégorie (remplace border-left par défaut) */










/* Fond blanc pur pour toutes les tuiles y compris highlight */


/* Animation fade-in tuiles importantes : gérée par menu-general-tile-fade-in via .menu-general-grid--enter (Action 9 — fadeInUp redondant supprimé) */

/* Transition fluide lors du hover */


/* Séparateur visuel entre groupes (compatible avec grille CSS) */



/* Hover : intensifier la bordure de catégorie */










/* Mobile : réduire les effets pour performance et lisibilité */


/* Breakpoints intermédiaires pour responsive parfait */







/* Tuiles menu général : bordure gris clair → marine #1e3a8a au survol, transition 0,2s */






/* Barre top colorée par catégorie au hover */















/* Carré 32×32px : toutes les icônes alignées sur la même grille optique */




/* Couleur icon-wrap selon catégorie métier — spécificité maximale */









/* Hover : icon-wrap s'illumine légèrement */








/* Focus visible clavier : ring marine propre, sans outline navigateur (Action 7) */






/* Force stroke via currentColor sur tous les paths SVG des icônes */




/* Traits : base commune + rayons courts (admin) plus épais / traits parallèles (liste, compta) plus fins */


/* Icônes à rayons courts (admin) : légèrement plus épais pour compenser la densité visuelle */


/* Icônes parallèles (liste, compta) : 2 suffit, les lignes parallèles ne nécessitent pas de surcompensation */


/* Icône groupe (sorties collectives) : non-scaling-stroke pour cohérence sur le transform scale */








/* ---------------------------------------------------------------------------
   Suggestions #suggestions (style.css) — alignement glass
   --------------------------------------------------------------------------- */
#suggestions {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-data)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--glass-blur-data)) saturate(135%);
  color: #000000;
  border: 1px solid rgba(30, 58, 138, 0.25);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}

#suggestions li:hover {
  background-color: rgba(30, 58, 138, 0.08);
}

.suggestion-active {
  background-color: var(--bootstrap-primary) !important;
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   accessible-autocomplete — remplace le fond sombre / bleu GDS par la charte
   --------------------------------------------------------------------------- */
.autocomplete__menu {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur-data)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--glass-blur-data)) saturate(135%);
  color: var(--text-night) !important;
  border: 1px solid rgba(30, 58, 138, 0.25) !important;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow-float);
}

.autocomplete__option--odd {
  background-color: rgba(255, 255, 255, 0.65) !important;
}

.autocomplete__option:hover,
.autocomplete__option--focused {
  background-color: var(--ds-brand-hover) !important;
  border-color: var(--ds-brand-hover) !important;
  color: #ffffff !important;
}

.autocomplete__input,
.autocomplete__hint {
  border-color: rgba(30, 58, 138, 0.35) !important;
  border-radius: 12px !important;
}

.autocomplete__input--focused {
  outline: 3px solid rgba(253, 208, 0, 0.95) !important;
  box-shadow: inset 0 0 0 2px var(--ds-brand) !important;
}

/* ---------------------------------------------------------------------------
   Capsules & bouton Appeler (téléphonie + boutons métier principaux)
   --------------------------------------------------------------------------- */
.bouton-primaire:not(.disabled),
.bouton-secondaire:not(.disabled),
#ys-dial-submit.btn-primary {
  border-radius: var(--radius-pill) !important;
}

/* Dégradé réservé aux boutons métier + Appeler (évite les modales Bootstrap hors main) */
.bouton-primaire:not(.disabled),
#ys-dial-submit.btn-primary {
  background-image: linear-gradient(135deg, var(--ds-brand) 0%, var(--ds-brand-hover) 100%);
  border-color: var(--ds-brand-hover) !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.28);
}

.bouton-primaire:not(.disabled):hover,
#ys-dial-submit.btn-primary:hover {
  background-color: var(--ds-brand-hover) !important;
  background-image: none;
  border-color: var(--ds-brand-hover) !important;
  filter: brightness(0.97);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(30, 58, 138, 0.42), 0 4px 12px rgba(30, 58, 138, 0.22);
}

.bouton-primaire:not(.disabled):focus,
#ys-dial-submit.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.35);
}

.bouton-secondaire:not(.disabled) {
  border-radius: var(--radius-pill) !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* ---------------------------------------------------------------------------
   Icônes d’action cliquables : marine identitaire (contact, édition, ajout...)
   --------------------------------------------------------------------------- */
main :is(a, button).bouton-contact:not(.disabled):not(.btn-secondary),
main :is(a, button)#boutonInfosUtilisateurs:not(.disabled),
main :is(a, button).update.btn:not(.disabled):not(.btn-secondary):not(.btn-light):not(.btn-outline-white),
main :is(a, button).creer-mail:not(.disabled):not(.btn-secondary),
main :is(a, button).creer-SMS:not(.disabled):not(.btn-secondary),
main :is(a, button).envoi-appel:not(.disabled):not(.btn-secondary),
main :is(a, button).historique-utilisateur.btn:not(.disabled) {
  background-color: #f8faff !important;
  border: 1px solid rgba(30, 58, 138, 0.18) !important;
  color: var(--ds-brand) !important;
  box-shadow: 0 1px 4px rgba(30, 58, 138, 0.07);
}

main :is(a, button).bouton-contact:not(.disabled):not(.btn-secondary) i,
main :is(a, button)#boutonInfosUtilisateurs:not(.disabled) i,
main :is(a, button).update.btn:not(.disabled):not(.btn-secondary):not(.btn-light):not(.btn-outline-white) i,
main :is(a, button).creer-mail:not(.disabled):not(.btn-secondary) i,
main :is(a, button).creer-SMS:not(.disabled):not(.btn-secondary) i,
main :is(a, button).envoi-appel:not(.disabled):not(.btn-secondary) i,
main :is(a, button).historique-utilisateur.btn:not(.disabled) i {
  color: var(--ds-brand) !important;
}

/* Format action iconique : pastille arrondie (cercle/carré arrondi) */
main :is(a, button).bouton-contact:not(.disabled),
main :is(a, button)#boutonInfosUtilisateurs:not(.disabled),
main :is(a, button).update.btn.btn-sm:not(.disabled):not(.btn-outline-white),
main :is(a, button).historique-utilisateur.btn:not(.disabled) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  min-height: 2.1rem;
  border-radius: 999px !important;
}

/* Fiche contact : bouton mail plus discret, aligné visuellement à la ligne email */
main #infosContact #creer-mail.bouton-contact:not(.disabled) {
  min-width: 1.8rem;
  min-height: 1.8rem;
  padding: 0.18rem 0.4rem !important;
}

main #infosContact #creer-mail.bouton-contact:not(.disabled) i {
  margin-right: 0 !important;
  font-size: 0.85rem;
}

/* Hover/focus universel actions : marine assombri ~10 % */
main :is(a, button).bouton-contact:not(.disabled):hover,
main :is(a, button).bouton-contact:not(.disabled):focus,
main :is(a, button)#boutonInfosUtilisateurs:not(.disabled):hover,
main :is(a, button)#boutonInfosUtilisateurs:not(.disabled):focus,
main :is(a, button).update.btn:not(.disabled):not(.btn-light):not(.btn-outline-white):hover,
main :is(a, button).update.btn:not(.disabled):not(.btn-light):not(.btn-outline-white):focus,
main :is(a, button).creer-mail:not(.disabled):hover,
main :is(a, button).creer-mail:not(.disabled):focus,
main :is(a, button).creer-SMS:not(.disabled):hover,
main :is(a, button).creer-SMS:not(.disabled):focus,
main :is(a, button).envoi-appel:not(.disabled):hover,
main :is(a, button).envoi-appel:not(.disabled):focus,
main :is(a, button).historique-utilisateur.btn:not(.disabled):hover,
main :is(a, button).historique-utilisateur.btn:not(.disabled):focus {
  background-color: #BFDBFE !important;
  border-color: rgba(30, 58, 138, 0.3) !important;
  filter: none;
}


/* ── Bouton supprimer ⊖ dans tableau compta : rouge discret ─────────────────*/
.btn-action-icon {
  background:    transparent !important;
  border:        none !important;
  color:         #A32D2D !important;
  padding:       0.2rem 0.4rem !important;
  border-radius: 50% !important;
  transition:    background 0.15s ease, color 0.15s ease !important;
}
.btn-action-icon:hover {
  background:    #FAE3E3 !important;
  color:         #7f2222 !important;
}

/* Icônes de titre / illustration non cliquables : gris filaire (pas de marine) */
main .card-header .card-title > i,
main .card-header h4 > i,
main .card-header h5 > i,
main h5[role="heading"] > i:not([role="button"]),
main h6[role="heading"] > i:not([role="button"]) {
  color: var(--text-muted) !important;
}

/* Champs obligatoires — couleurs d’origine conservées */
.champs-obligatoires {
  background-color: var(--champs-oblig-bg) !important;
}

.champs-obligatoires-text {
  color: var(--champs-oblig-text) !important;
}

/* Pied de page — teinte identique */
.piedPage {
  background-color: var(--footer-green);
}

/* =============================================================================
   FORMULAIRES AUTH & CARTES .texture — cohérence /connexion ↔ accueil
   ============================================================================= */

/* Fond page : même esprit bleu clair que le menu général (sans image cookies) */
.container-fluid.backg:has(#connexion),
.container-fluid.backg.backgLogin {
  background-image: none !important;
  background: var(--app-sky-gradient) !important;
  min-height: calc(100vh - var(--auxi-header-offset));
  min-height: calc(100dvh - var(--auxi-header-offset)); /* Safari/iOS : hauteur visible réelle */
}

/* Hero d'identité (page de connexion) : logo de l'association + nom + ligne applicative.
   Hiérarchie : association (héros) > Auxi-DV (outil) > « Se connecter » (action). */
.auxi-auth-hero {
  text-align: center;
  margin: 0 auto 1.5rem;
  max-width: 560px;
}
.auxi-auth-hero__logo {
  display: inline-block;
  width: clamp(92px, 15vw, 124px);
  height: auto;
  /* Marine officiel du logo (#05377B) : contraste ~10.4 sur le bleu ciel (AAA).
     Le SVG inliné utilise fill="currentColor", donc on pilote la teinte ici. */
  color: #05377B;
}
.auxi-auth-hero__logo svg {
  display: block;
  width: 100%;
  height: auto;
}
.auxi-auth-hero__title {
  margin: .65rem 0 .15rem;
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  line-height: 1.15;
  color: #1e293b; /* encre, AAA sur le bleu ciel */
}
.auxi-auth-hero__subtitle {
  margin: 0;
  font-size: .95rem;
  font-weight: 500;
  color: #475569; /* gris dense, AA sur le bleu ciel */
}

/* Logo de l'association sur l'accueil (au-dessus du titre existant). Décoratif :
   le <h2> « Les Auxiliaires des Aveugles » porte déjà le nom (pas de doublon). */
.auxi-home-logo {
  display: block;
  width: clamp(80px, 12vw, 112px);
  height: auto;
  margin: 0 auto .5rem;
  color: #05377B; /* marine officiel du logo, AAA sur le bleu ciel */
}
.auxi-home-logo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Carte centrale glass (connexion, reset MDP, activation…) */
.card.texture {
  background: var(--form-glass-bg) !important;
  backdrop-filter: blur(var(--form-glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--form-glass-blur)) saturate(140%);
  border-radius: var(--form-glass-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  /* Ombre très diffuse, faible opacité — carte « flottante » douce */
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.05),
    0 12px 36px rgba(0, 0, 0, 0.045),
    0 4px 12px rgba(0, 0, 0, 0.04);
  /* Calque composite : ombres plus fluides (GPU) — une carte auth à la fois */
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* Bandeau retour auth (erreur / succès / avertissement) — même rayon que les champs */
.auxi-auth-feedback-banner {
  width: 100%;
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    max-height 0.35s ease,
    margin 0.35s ease;
}

.auxi-auth-feedback-banner.is-visible {
  opacity: 1;
  max-height: 12rem;
  margin: 15px 0;
  pointer-events: auto;
}

.auxi-auth-feedback-banner__surface {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border-radius: var(--form-input-radius);
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}



.auxi-auth-feedback-banner--error .auxi-auth-feedback-banner__surface {
  background-color: var(--ds-danger);
  color: #fff;
}

.auxi-auth-feedback-banner--success .auxi-auth-feedback-banner__surface {
  background-color: var(--ds-success);
  color: #fff;
}

.auxi-auth-feedback-banner--warning .auxi-auth-feedback-banner__surface {
  background-color: #BA7517;
  color: #fff;
}

@media (max-width: 599.98px) {
  .auxi-auth-feedback-banner__surface {
    font-size: 13px;
  }
}

/* Titres des cartes auth : alignés sur h2 « Menu général » (Bootstrap, ~2rem / 500) */
#connexion #dialogTitle,
#connexion #modal-dialogTitle {
  font-size: 2rem;
  font-weight: 500 !important;
  line-height: 1.2;
  color: #0f172a;
  letter-spacing: -0.02em;
}

/* Champs : coins arrondis + bordure blanche translucide */
.card.texture .form-control,
#connexion .form-control {
  border-radius: var(--form-input-radius) !important;
  border: 1px solid var(--form-border-light) !important;
  background-color: rgba(255, 255, 255, 0.88);
  box-shadow: var(--ds-input-shadow-idle);
  transition:
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}

.card.texture .form-control:focus,
#connexion .form-control:focus {
  border: 1px solid var(--auth-input-focus-border) !important;
  background-color: #fff;
  box-shadow: var(--auth-input-focus-glow);
  outline: none !important;
}

/* Champs auth : conteneur flex — enveloppe / cadenas / œil centrés verticalement avec le champ */
#connexion #formPassword .input-group,
#connexion .auxi-auth-field-group.input-group,
.card.texture .auxi-auth-field-group.input-group,
main .card.texture .auxi-auth-field-group.input-group {
  border-radius: var(--form-input-radius);
  overflow: hidden;
  border: 1px solid var(--form-border-light);
  background: rgba(255, 255, 255, 0.88);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  box-shadow: none;
  transition:
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

/* Dans un groupe à icônes : le focus se lit sur le conteneur (:focus-within) */
#connexion .auxi-auth-field-group.input-group .form-control:focus,
.card.texture .auxi-auth-field-group.input-group .form-control:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: #fff;
}

#connexion .auxi-auth-field-group.input-group:focus-within,
.card.texture .auxi-auth-field-group.input-group:focus-within,
main .card.texture .auxi-auth-field-group.input-group:focus-within {
  border: 1px solid var(--auth-input-focus-border) !important;
  box-shadow: var(--auth-input-focus-glow) !important;
  outline: none !important;
  overflow: visible;
}

#connexion .auxi-auth-field-group.input-group .form-control,
.card.texture .auxi-auth-field-group.input-group .form-control {
  border: none !important;
  border-radius: 0 !important;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  min-height: var(--ds-input-fixed-height);
  height: auto;
  padding-top: 0.5625rem;
  padding-bottom: 0.5625rem;
  padding-left: 112px;
  line-height: 1.45;
  font-size: 1rem;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

#connexion .auxi-auth-field-group.input-group .input-group-text,
.card.texture .auxi-auth-field-group.input-group .input-group-text {
  border: none !important;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 0 !important;
}

/* Icônes enveloppe / cadenas / clé — prepend : centrage vertical dans la hauteur du champ */
#connexion .auxi-auth-field-group .input-group-prepend,
.card.texture .auxi-auth-field-group .input-group-prepend {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

#connexion .auxi-auth-field-group .input-group-prepend .input-group-text,
.card.texture .auxi-auth-field-group .input-group-prepend .input-group-text {
  display: flex !important;
  flex-direction: row;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch;
  height: auto;
  min-height: var(--ds-input-fixed-height);
  flex: 0 0 32px;
  min-width: 32px;
  max-width: 32px;
  width: 32px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  color: #64748b;
  border-right: none !important;
}

/* Champs mot de passe : puces alignées sur l’axe optique du cadenas (même ligne centrale que la zone icône) */
#connexion #pwd_input,
#connexion #current_pwd_input,
.card.texture #pwd_input,
.card.texture #current_pwd_input {
  font-size: 1.2rem;
  line-height: var(--ds-input-fixed-height);
  padding-top: 0;
  padding-bottom: 0;
  min-height: var(--ds-input-fixed-height);
}

/* Icônes gauche : même boîte optique (enveloppe / cadenas) pour un retrait identique depuis le bord du groupe */
#connexion .auxi-auth-field-group .input-group-prepend .input-group-text i,
.card.texture .auxi-auth-field-group .input-group-prepend .input-group-text i {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.9375rem;
  box-sizing: border-box;
}

/* Glyphe œil (append) : centrage de base */
#connexion .auxi-auth-field-group .input-group-append .input-group-text i,
.card.texture .auxi-auth-field-group .input-group-append .input-group-text i {
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Œil + puces : léger décalage vers le bas (glyphe Font Awesome trop haut dans la ligne) */
#connexion .auxi-auth-field-group.input-group input[type="password"] ~ .input-group-append .auxi-auth-reveal-toggler i,
.card.texture .auxi-auth-field-group.input-group input[type="password"] ~ .input-group-append .auxi-auth-reveal-toggler i {
  transform: translateY(2px);
}
.card.texture .auxi-auth-field-group .input-group-append .input-group-text.auxi-auth-reveal-host,
#connexion .auxi-auth-field-group .input-group-append .input-group-text.auxi-auth-reveal-host {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch !important;
  min-height: var(--ds-input-fixed-height);
  height: auto;
  padding: 0;
  background: rgba(255, 255, 255, 0.72);
}

.card.texture .auxi-auth-field-group .input-group-append,
#connexion .auxi-auth-field-group .input-group-append {
  display: flex;
  align-items: stretch;
  justify-content: center;
  align-self: stretch;
}

.card.texture .auxi-auth-reveal-toggler,
#connexion .auxi-auth-reveal-toggler {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: stretch;
  flex: 0 0 auto;
  min-height: var(--ds-input-fixed-height);
  height: auto;
  width: auto;
  min-width: 2.75rem;
  padding-left: 0.5rem !important;
  padding-right: 15px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #475569 !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    opacity 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    transform 0.15s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}

/* Annule le halo jaune / bleu Bootstrap sur le bouton œil (.btn) — pas :focus-visible (halo marine dédié) */
.card.texture .auxi-auth-reveal-toggler.btn:focus,
#connexion .auxi-auth-reveal-toggler.btn:focus {
  box-shadow: none !important;
}
.card.texture .auxi-auth-reveal-toggler i,
#connexion .auxi-auth-reveal-toggler i {
  color: inherit;
  transition:
    color 0.2s ease-in-out,
    transform 0.15s ease-in-out;
}

.card.texture .auxi-auth-reveal-toggler:hover,
#connexion .auxi-auth-reveal-toggler:hover,
.card.texture .auxi-auth-reveal-toggler:hover i,
#connexion .auxi-auth-reveal-toggler:hover i {
  opacity: 1;
  color: #1e3a8a !important;
  background-color: rgba(30, 58, 138, 0.06) !important;
}

/* Champ mot de passe au focus : icône œil en marine bouton (pas de liseré jaune Bootstrap) */
.card.texture .auxi-auth-field-group.input-group:focus-within .auxi-auth-reveal-toggler,
#connexion .auxi-auth-field-group.input-group:focus-within .auxi-auth-reveal-toggler,
.card.texture .auxi-auth-field-group.input-group:focus-within .auxi-auth-reveal-toggler i,
#connexion .auxi-auth-field-group.input-group:focus-within .auxi-auth-reveal-toggler i {
  color: #1e3a8a !important;
}

.card.texture .auxi-auth-reveal-toggler:focus:not(:focus-visible),
#connexion .auxi-auth-reveal-toggler:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Focus clavier œil : halo marine très léger + icône marine (même spécificité que .btn:focus Bootstrap) */
.card.texture .auxi-auth-reveal-toggler.btn:focus-visible,
#connexion .auxi-auth-reveal-toggler.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22), 0 0 8px rgba(30, 58, 138, 0.18) !important;
  color: #1e3a8a !important;
}

.card.texture .auxi-auth-reveal-toggler.btn:focus-visible i,
#connexion .auxi-auth-reveal-toggler.btn:focus-visible i {
  color: #1e3a8a !important;
}

/* Espacement entre bloc e-mail et libellé mot de passe */
#connexion #login-form > .form-group:first-of-type {
  margin-bottom: 1.75rem;
}

/* Liens d’aide sous les cartes auth : pas de soulignement (hors :hover), bleu WCAG AA */
#connexion a.auxi-auth-text-link,
#connexion a.auxi-auth-text-link:link,
#connexion a.auxi-auth-text-link:visited,
.card.texture a.auxi-auth-text-link,
.card.texture a.auxi-auth-text-link:link,
.card.texture a.auxi-auth-text-link:visited {
  color: var(--auth-form-link) !important;
  font-weight: 600;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-underline-offset: 0.2em;
  opacity: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition:
    opacity 0.2s ease-in-out,
    color 0.2s ease-in-out,
    text-decoration-color 0.2s ease-in-out;
}

#connexion a.auxi-auth-text-link:not(:hover),
.card.texture a.auxi-auth-text-link:not(:hover) {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

#connexion a.auxi-auth-text-link:hover,
.card.texture a.auxi-auth-text-link:hover {
  color: var(--auth-form-link-hover) !important;
  text-decoration: underline !important;
  text-decoration-line: underline !important;
  text-decoration-color: currentColor;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  opacity: 1;
}

#connexion a.auxi-auth-text-link:focus:not(:hover),
.card.texture a.auxi-auth-text-link:focus:not(:hover) {
  text-decoration: none !important;
}

#connexion a.auxi-auth-text-link:focus,
.card.texture a.auxi-auth-text-link:focus {
  outline: none !important;
  box-shadow: none !important;
}

#connexion a.auxi-auth-text-link:focus-visible,
.card.texture a.auxi-auth-text-link:focus-visible {
  outline: 2px solid var(--ds-ring-brand) !important;
  outline-offset: 2px;
  border-radius: 2px;
  opacity: 1;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* Bouton principal « Se connecter » : rayon = champs, texte centré, ombre diffuse neutre */
.card.texture input.btn-primary[type="submit"],
.card.texture button.btn-primary[type="submit"],
#connexion #submit-login {
  border-radius: var(--form-input-radius) !important;
  border: none !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #fff !important;
  background-image: linear-gradient(135deg, var(--accent-auth-submit-start) 0%, var(--accent-auth-submit-end) 100%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: var(--ds-input-fixed-height);
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  line-height: 1.25;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    filter 0.2s ease-in-out,
    transform 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
}

.card.texture input.btn-primary[type="submit"]:not(:disabled):hover,
.card.texture button.btn-primary[type="submit"]:not(:disabled):hover,
#connexion #submit-login:not(:disabled):hover {
  filter: brightness(0.95);
  background-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    filter 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.card.texture input.btn-primary[type="submit"]:not(:disabled):active,
.card.texture button.btn-primary[type="submit"]:not(:disabled):active,
#connexion #submit-login:not(:disabled):active {
  filter: brightness(0.9);
  opacity: 0.97;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
  transform: scale(0.98);
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    filter 0.2s ease-in-out,
    transform 0.12s ease-in-out,
    opacity 0.12s ease-in-out;
}

.card.texture input.btn-primary[type="submit"]:not(:disabled):focus,
.card.texture input.btn-primary[type="submit"]:not(:disabled):focus-visible,
.card.texture button.btn-primary[type="submit"]:not(:disabled):focus,
.card.texture button.btn-primary[type="submit"]:not(:disabled):focus-visible,
#connexion #submit-login:not(:disabled):focus,
#connexion #submit-login:not(:disabled):focus-visible {
  outline: 2px solid #1e3a8a !important;
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.4),
    0 4px 22px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    filter 0.2s ease-in-out,
    transform 0.2s ease-in-out,
    outline-color 0.2s ease-in-out;
}

/* Autres actions dans la carte (ex. vérification 2FA) : rayon aligné sur les champs */
.card.texture .btn-success {
  border-radius: var(--form-input-radius) !important;
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
  transition:
    box-shadow 0.2s ease-in-out,
    filter 0.2s ease-in-out,
    transform 0.2s ease-in-out;
}

.card.texture .btn-success:hover {
  box-shadow: 0 8px 20px rgba(40, 167, 69, 0.45);
  filter: brightness(1.02);
}

/* Boutons secondaires pleine largeur (MDP / activation / reset) — rayon aligné sur les champs */
.card.texture .btn-secondary.btn-block {
  border-radius: var(--form-input-radius) !important;
}

.card.texture label.form-label {
  color: var(--ds-form-label);
  font-size: var(--ds-form-label-size);
  font-weight: 600;
}

/* =============================================================================
   Design System — formulaires (propagation : main + modales)
   Champs alignés sur fiche-création ; exclusions : barre téléphonie, cookies
   ============================================================================= */
.required-star {
  margin-left: 0.15rem !important;
}

main label.form-label,
.modal-body label.form-label,
.modal-content label.form-label {
  color: var(--ds-form-label);
  font-size: var(--ds-form-label-size);
  font-weight: 600;
  margin-bottom: 0.35rem !important;
}

main .form-group:has([required]) > label.form-label,
.modal-body .form-group:has([required]) > label.form-label {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.15rem;
  row-gap: 0.15rem;
  width: 100%;
  box-sizing: border-box;
}

main .form-group:has([required]) > label.form-label,
.modal-body .form-group:has([required]) > label.form-label {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
}
main .form-group:has([required]) > label.form-label::after,
.modal-body .form-group:has([required]) > label.form-label::after {
  content: "*";
  color: var(--ds-danger) !important;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
  display: inline !important;
  margin: 0 !important;
}

/* Ligne code postal + ville : alignement bas des champs (même principe que .fiche-cp-ville-wrap) */
main .row:has(#codePostal),
.modal-body .row:has(#codePostal) {
  align-items: flex-end !important;
}

main input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]),
main textarea.form-control,
main select.form-control,
.modal-body input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]),
.modal-body textarea.form-control,
.modal-body select.form-control {
  border-radius: var(--ds-input-radius) !important;
  border: 1px solid var(--ds-input-border) !important;
  background-color: #fff;
  min-height: var(--ds-input-min-height);
  height: var(--ds-input-fixed-height);
  padding: var(--ds-input-pad-y) var(--ds-input-pad-x);
  line-height: 1.5;
  box-sizing: border-box;
  box-shadow: var(--ds-input-shadow-idle);
  transition: var(--ds-input-transition);
}

main textarea.form-control,
.modal-body textarea.form-control {
  height: auto !important;
  min-height: 5.5rem;
}

main .panneau-fiche input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
main .panneau-fiche select.form-control,
.modal-body .panneau-fiche input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.modal-body .panneau-fiche select.form-control {
  height: auto !important;
  min-height: var(--ds-input-min-height);
}

main input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):focus,
main textarea.form-control:focus,
main select.form-control:focus,
.modal-body input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):focus,
.modal-body textarea.form-control:focus,
.modal-body select.form-control:focus {
  border-color: var(--ds-ring-brand) !important;
  box-shadow: var(--ds-input-focus-glow);
  outline: 0;
}

/* Select : même silhouette que les inputs + chevron brand marine */
main select.form-control,
.modal-body select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  background-image: var(--ds-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 14px 14px;
  background-color: #fff;
}

/* Groupes append/prepend : contour unique + focus halo (métier + modales ; pas cartes .texture auth) */
main .container-fluid.template .input-group:not(.bootstrap-touchspin):not(.input-group-merge),
main .container-fluid.template form .input-group:not(.bootstrap-touchspin):not(.input-group-merge),
main .panneau-fiche .input-group:not(.bootstrap-touchspin):not(.input-group-merge),
main .panneau-fiche form .input-group:not(.bootstrap-touchspin):not(.input-group-merge),
main .container-fluid.mt-4 .input-group:not(.bootstrap-touchspin):not(.input-group-merge),
.modal-body .input-group:not(.bootstrap-touchspin):not(.input-group-merge) {
  border-radius: var(--ds-input-radius);
  overflow: hidden;
  border: 1px solid var(--ds-input-border);
  background-color: #fff;
  box-shadow: var(--ds-input-shadow-idle);
  transition: var(--ds-input-transition);
}

main .container-fluid.template .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within,
main .container-fluid.template form .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within,
main .panneau-fiche .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within,
main .panneau-fiche form .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within,
main .container-fluid.mt-4 .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within,
.modal-body .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within {
  border-color: var(--ds-ring-brand);
  box-shadow: var(--ds-input-focus-glow);
}

main .container-fluid.template .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control,
main .container-fluid.template .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .btn,
main .container-fluid.template form .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control,
main .container-fluid.template form .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .btn,
main .panneau-fiche .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control,
main .panneau-fiche .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .btn,
main .panneau-fiche form .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control,
main .panneau-fiche form .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .btn,
main .container-fluid.mt-4 .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control,
main .container-fluid.mt-4 .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .btn,
.modal-body .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control,
.modal-body .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .btn {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

main .container-fluid.template .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control:focus,
main .container-fluid.template form .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control:focus,
main .panneau-fiche .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control:focus,
main .panneau-fiche form .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control:focus,
main .container-fluid.mt-4 .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control:focus,
.modal-body .input-group:not(.bootstrap-touchspin):not(.input-group-merge) .form-control:focus {
  box-shadow: none !important;
}

main .container-fluid.template .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within .form-control:focus,
main .container-fluid.template form .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within .form-control:focus,
main .panneau-fiche .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within .form-control:focus,
main .panneau-fiche form .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within .form-control:focus,
main .container-fluid.mt-4 .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within .form-control:focus,
.modal-body .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within .form-control:focus {
  box-shadow: none !important;
}

main .container-fluid.template .input-group:not(.bootstrap-touchspin):not(.input-group-merge) select.form-control:focus,
main .container-fluid.template form .input-group:not(.bootstrap-touchspin):not(.input-group-merge) select.form-control:focus,
main .panneau-fiche .input-group:not(.bootstrap-touchspin):not(.input-group-merge) select.form-control:focus,
main .panneau-fiche form .input-group:not(.bootstrap-touchspin):not(.input-group-merge) select.form-control:focus,
main .container-fluid.mt-4 .input-group:not(.bootstrap-touchspin):not(.input-group-merge) select.form-control:focus,
.modal-body .input-group:not(.bootstrap-touchspin):not(.input-group-merge) select.form-control:focus {
  box-shadow: none !important;
}

/* Cartes auth (.texture) : groupes mot de passe — bordure verre (priorité sur règles .template ci-dessus) */
main .card.texture .input-group {
  border-radius: var(--form-input-radius);
  overflow: hidden;
  border: 1px solid var(--form-border-light);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--ds-input-shadow-idle);
  transition:
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}

main .card.texture .input-group:focus-within {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: var(--ds-input-focus-glow);
}

main .card.texture .input-group .form-control {
  border: none !important;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none !important;
}

main .card.texture .input-group .form-control:focus {
  box-shadow: none !important;
}

main .card.texture .input-group .input-group-text,
main .card.texture .input-group-append .btn {
  border: none !important;
}

/* Boutons Bootstrap primaires (hors outline) : survol type capsule métier */
main .btn.btn-primary:not(:disabled):not(.disabled):not(.btn-outline-primary):hover,
.modal-body .btn.btn-primary:not(:disabled):not(.disabled):not(.btn-outline-primary):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 86, 179, 0.35), 0 4px 10px rgba(0, 86, 179, 0.18);
  transition: all 0.3s ease;
}

/* Soumission auth dans main : survol / actif (assombrissement + ombre floue), priorité sur la règle .btn-primary ci-dessus */
main .card.texture input.btn-primary[type="submit"]:not(:disabled):not(.disabled):hover,
main .card.texture button.btn-primary[type="submit"]:not(:disabled):not(.disabled):hover,
main #connexion #submit-login:not(:disabled):not(.disabled):hover {
  filter: brightness(0.95) !important;
  background-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-1px) !important;
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    filter 0.2s ease-in-out,
    transform 0.2s ease-in-out !important;
}

main .card.texture input.btn-primary[type="submit"]:not(:disabled):not(.disabled):active,
main .card.texture button.btn-primary[type="submit"]:not(:disabled):not(.disabled):active,
main #connexion #submit-login:not(:disabled):not(.disabled):active {
  filter: brightness(0.9) !important;
  opacity: 0.97 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09) !important;
  transform: scale(0.98) !important;
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    filter 0.2s ease-in-out,
    transform 0.12s ease-in-out,
    opacity 0.12s ease-in-out !important;
}

/* Focus bouton auth (carte + main) : anneau indigo, sans halo jaune Bootstrap */
main .card.texture input.btn-primary[type="submit"]:not(:disabled):focus,
main .card.texture input.btn-primary[type="submit"]:not(:disabled):focus-visible,
main .card.texture button.btn-primary[type="submit"]:not(:disabled):focus,
main .card.texture button.btn-primary[type="submit"]:not(:disabled):focus-visible,
main #connexion #submit-login:not(:disabled):focus,
main #connexion #submit-login:not(:disabled):focus-visible {
  outline: 2px solid #1e3a8a !important;
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px rgba(99, 102, 241, 0.4),
    0 4px 22px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition:
    background-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    filter 0.2s ease-in-out,
    transform 0.2s ease-in-out,
    outline-color 0.2s ease-in-out !important;
}

main .btn.btn-primary:not(:disabled):not(.disabled):not(.btn-outline-primary),
.modal-body .btn.btn-primary:not(:disabled):not(.disabled):not(.btn-outline-primary) {
  transition: all 0.3s ease;
}

/* Cartes auth (.texture) dans main : glass au-dessus des champs métier génériques */
main .card.texture input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="submit"]),
main .card.texture textarea.form-control,
main .card.texture select.form-control {
  border-radius: var(--form-input-radius) !important;
  border: 1px solid var(--form-border-light) !important;
  background-color: rgba(255, 255, 255, 0.88);
  box-shadow: var(--ds-input-shadow-idle);
  transition:
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
}

main .card.texture input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="file"]):not([type="submit"]):focus,
main .card.texture textarea.form-control:focus,
main .card.texture select.form-control:focus {
  border-color: rgba(255, 255, 255, 0.95) !important;
  background-color: #fff;
  box-shadow: var(--ds-input-focus-glow);
  outline: 0;
}

/* =============================================================================
   Page fiche-recherche-creation — validation, recherche, champs
   (scope : body:has(#valider-recherche-creation-fiche) pour éviter les collisions)
   ============================================================================= */

body:has(#valider-recherche-creation-fiche) .container-fluid.fiche-rc-entete.template,
body:has(#valider-recherche-creation-fiche) .fiche-rc-entete {
  background-color: var(--page-pearl) !important;
  background-image: none !important;
}

body:has(#valider-recherche-creation-fiche) .fiche-rc-card.formulaire-fiche {
  background-color: #fff !important;
  border: 1px solid var(--border-premium) !important;
  border-radius: var(--menu-tile-radius) !important;
  box-shadow: var(--shadow-form-panel) !important;
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

body:has(#valider-recherche-creation-fiche) .fiche-rc-card.formulaire-fiche:hover,
body:has(#valider-recherche-creation-fiche) .fiche-rc-card.formulaire-fiche:focus-within {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.28) !important;
  box-shadow: var(--shadow-form-panel-hover) !important;
}

body:has(#valider-recherche-creation-fiche) .fiche-rc-bc-link {
  color: var(--menu-accent) !important;
}

body:has(#valider-recherche-creation-fiche) .fiche-rc-page-title.text-secondary {
  color: var(--menu-accent) !important;
}

@media (min-width: 768px) {
  body:has(#valider-recherche-creation-fiche) .fiche-rc-search-btn {
    width: auto;
    min-width: 3rem;
  }
}

body:has(#valider-recherche-creation-fiche) .fiche-rc-results-wrap.template {
  background-color: var(--page-pearl) !important;
}

/* Colonne résultats : flux centré pour message de succès, tout en gardant le tableau pleine largeur */
body:has(#valider-recherche-creation-fiche) .container-fluid.border.template > .row > .col-md-9 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body:has(#valider-recherche-creation-fiche) .container-fluid.border.template > .row > .col-md-9 > :not(#info-resultat) {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}

/* Message de succès « aucun doublon » — capsule glass, sans bordure sombre */
body:has(#valider-recherche-creation-fiche) #info-resultat:has([role="alert"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.65rem 1.35rem;
  max-width: 100%;
  border: none !important;
  border-radius: 50px;
  background: rgba(200, 250, 200, 0.4) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

body:has(#valider-recherche-creation-fiche) #info-resultat:has([role="alert"]) .text-success,
body:has(#valider-recherche-creation-fiche) #info-resultat:has([role="alert"]) i {
  color: #166534 !important;
}

/* Bouton loupe — charte bleue accent (priorité sur les styles inline orange) */
body:has(#valider-recherche-creation-fiche) #envoi-recherche-creation {
  border-radius: 12px !important;
  background-color: var(--ds-brand) !important;
  background-image: linear-gradient(135deg, var(--ds-brand) 0%, var(--ds-brand-hover) 100%) !important;
  border: 1px solid var(--ds-brand-hover) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(30, 58, 138, 0.28);
  transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.15s ease;
}

body:has(#valider-recherche-creation-fiche) #envoi-recherche-creation:hover,
body:has(#valider-recherche-creation-fiche) #envoi-recherche-creation:focus {
  background-color: var(--ds-brand-hover) !important;
  background-image: none !important;
  border-color: var(--ds-brand-hover) !important;
  filter: brightness(1.02);
  box-shadow: 0 6px 18px rgba(30, 58, 138, 0.38);
  transform: translateY(-1px);
}

body:has(#valider-recherche-creation-fiche) #envoi-recherche-creation .fa-search,
body:has(#valider-recherche-creation-fiche) #envoi-recherche-creation i {
  color: #fff !important;
}

/* Bouton « Créer une fiche » — capsule + ombre au survol (complète .bouton-primaire) */
body:has(#valider-recherche-creation-fiche) #valider-recherche-creation-fiche.bouton-primaire:not(.disabled) {
  border-radius: 50px !important;
  box-shadow: 0 4px 14px rgba(30, 58, 138, 0.32);
  transition: box-shadow 0.2s ease, transform 0.15s ease, filter 0.2s ease;
}

body:has(#valider-recherche-creation-fiche) #valider-recherche-creation-fiche.bouton-primaire:not(.disabled):hover {
  box-shadow: 0 8px 22px rgba(30, 58, 138, 0.45);
  transform: translateY(-1px);
}

/* Quand le bandeau de succès est affiché, centrer aussi le CTA principal */
body:has(#valider-recherche-creation-fiche) .container-fluid.border.template .col-md-9:has(#info-resultat [role="alert"]) .btn-group.d-flex.justify-content-end {
  justify-content: center !important;
}

/* Prénom + date : bordures fines + focus ring bleu */
body:has(#valider-recherche-creation-fiche) #champ-recherche-creation,
body:has(#valider-recherche-creation-fiche) #dateNaissance-creation {
  border-radius: var(--ds-input-radius) !important;
  border: 1px solid var(--ds-input-border) !important;
  background-color: #fff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

body:has(#valider-recherche-creation-fiche) #champ-recherche-creation:focus,
body:has(#valider-recherche-creation-fiche) #dateNaissance-creation:focus {
  border-color: var(--ds-ring-brand) !important;
  background-color: #fff;
  box-shadow: var(--ds-input-focus-glow);
  outline: 0;
}

body:has(#valider-recherche-creation-fiche) #search-form .input-group {
  border-radius: var(--ds-input-radius);
  overflow: hidden;
  border: 1px solid var(--ds-input-border);
  background: #fff;
  box-shadow: var(--ds-input-shadow-idle);
  transition: var(--ds-input-transition);
}

body:has(#valider-recherche-creation-fiche) #search-form .input-group:focus-within {
  border-color: var(--ds-ring-brand);
  box-shadow: var(--ds-input-focus-glow);
}

body:has(#valider-recherche-creation-fiche) #search-form .input-group .form-control {
  border: none !important;
  border-radius: 0 !important;
  background: transparent;
}

body:has(#valider-recherche-creation-fiche) #search-form #effacer-recherche-creation {
  border: none !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.65);
  color: #475569;
}

body:has(#valider-recherche-creation-fiche) #search-form #effacer-recherche-creation:hover,
body:has(#valider-recherche-creation-fiche) #search-form #effacer-recherche-creation:focus {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ds-brand-hover);
}

/* =============================================================================
   Page fiche-creation — formulaire aligné design system (scope #form-creation-fiche)
   ============================================================================= */

/* Carte principale : profondeur type menu général + léger verre */
body:has(#form-creation-fiche) .col-md-8 > .card.rounded.formulaire-fiche {
  box-shadow: var(--shadow-form-panel);
  border: 1px solid var(--border-premium);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  min-height: 0;
  height: auto;
  transition:
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

body:has(#form-creation-fiche) .col-md-8 > .card.rounded.formulaire-fiche:hover,
body:has(#form-creation-fiche) .col-md-8 > .card.rounded.formulaire-fiche:focus-within {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: var(--shadow-form-panel-hover);
}

/* Cartes « formulaire » (création / recherche fiche, etc.) : même padding sur les 4 côtés */
main .container-fluid.template .card.rounded.formulaire-fiche > .card-body {
  padding: var(--ds-form-card-padding);
}

/* Barre Retour / Suivant : même écart vertical que entre les lignes du formulaire (voir .etape > .row) */
body:has(#form-creation-fiche) .fiche-creation-actions {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* Bande 2 + 8 + 2 = même largeur que la ligne Civilité + Nom (2 + 4 + 4 + 2). Grille auto | 1fr | auto : tout l’espace libre entre les deux boutons pour des lignes verticales visuelles alignées sur les bords du bloc champs. */
body:has(#form-creation-fiche) .fiche-creation-actions-bar {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0.5rem, 1fr) minmax(0, max-content);
  align-items: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body:has(#form-creation-fiche) .fiche-creation-actions-start {
  grid-column: 1;
  justify-self: start;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

body:has(#form-creation-fiche) .fiche-creation-actions-end {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 0;
}

body:has(#form-creation-fiche) .fiche-creation-actions-start button,
body:has(#form-creation-fiche) .fiche-creation-actions-end button {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* Priorité sur min-width capsule — évite débordement sur petites largeurs */
body:has(#form-creation-fiche) .fiche-creation-actions #btnAnnuler,
body:has(#form-creation-fiche) .fiche-creation-actions #btnPrecedent,
body:has(#form-creation-fiche) .fiche-creation-actions #btnSuivant,
body:has(#form-creation-fiche) .fiche-creation-actions #btnEnregistrer {
  min-width: 0;
}

/* Coordonnées (2/2) : espace minimal sous le bloc téléphone + barre d’actions collée au contenu */
body:has(#form-creation-fiche) #form-creation-fiche #etape2 > .row:last-child {
  margin-bottom: 0 !important;
}

body:has(#form-creation-fiche) #form-creation-fiche #etape2 > .row:last-child .form-group {
  margin-bottom: 0 !important;
}

body:has(#form-creation-fiche) #form-creation-fiche #etape2 > .row:last-child .feedback.form-text:empty {
  margin-bottom: 0;
  min-height: 0;
}

body.fiche-creation-etape2:has(#form-creation-fiche) .fiche-creation-actions {
  margin-top: 0 !important;
}

/* Coordonnées : bloc « description personnalisée » moins haut pour rapprocher tout le bloc téléphone des boutons */
body.fiche-creation-etape2:has(#form-creation-fiche) #form-creation-fiche #input-description-telephone-block {
  margin-top: 0.5rem !important;
}

/* Fil d'Ariane fiche-création — contraste renforcé (priorité sur a / .active de style.css) */
#fiche-creation-breadcrumb a.fiche-creation-bc-link,
#fiche-creation-breadcrumb a.fiche-creation-bc-link:link,
#fiche-creation-breadcrumb a.fiche-creation-bc-link:visited {
  color: #475569 !important;
  font-weight: 600;
}

#fiche-creation-breadcrumb a.fiche-creation-bc-link:hover,
#fiche-creation-breadcrumb a.fiche-creation-bc-link:focus,
#fiche-creation-breadcrumb a.fiche-creation-bc-link:focus-visible,
#fiche-creation-breadcrumb a.fiche-creation-bc-link:active {
  color: #1e293b !important;
  text-decoration: none !important;
}

#fiche-creation-breadcrumb a.fiche-creation-bc-link.active {
  color: #334155 !important;
  font-weight: 600 !important;
}

body:has(#form-creation-fiche) .container-fluid.template > .row:first-child .mt-4.mb-3 a {
  color: #475569 !important;
  font-weight: 600;
}

body:has(#form-creation-fiche) .container-fluid.template > .row:first-child .mt-4.mb-3 a:hover,
body:has(#form-creation-fiche) .container-fluid.template > .row:first-child .mt-4.mb-3 a:focus {
  color: #1e293b !important;
  text-decoration: none !important;
}

body:has(#form-creation-fiche) .container-fluid.template > .row:first-child .mt-4.mb-3 > span.text-secondary[aria-hidden="true"] {
  color: #64748b !important;
  font-weight: 600;
}

body:has(#form-creation-fiche) .container-fluid.template > .row:first-child .mt-4.mb-3 > span[role="heading"] {
  color: var(--menu-accent) !important;
  font-weight: 700 !important;
}

/* Badge 1/2 — même alignement gauche que les titres de champs (annule tout centrage implicite) */
body:has(#form-creation-fiche) #form-creation-fiche .etape > .row.mb-2 h6.card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  width: 100%;
  text-align: left;
  color: var(--menu-accent) !important;
}

body:has(#form-creation-fiche) #form-creation-fiche .etape > .row.mb-2 h6.card-title .badge {
  margin-left: 0;
  margin-right: 0.5rem;
}

/* Titre section « Coordonnées » (badge 2/2) */
body:has(#form-creation-fiche) #form-creation-fiche #etape2 .row.mb-2 h6.card-title.text-secondary,
body:has(#form-creation-fiche) #form-creation-fiche #etape2 .row.mb-2 h6.card-title {
  color: var(--menu-accent) !important;
}

/* Même titre si :has(body) non supporté */
#form-creation-fiche #etape2 .row.mb-2 h6.card-title.text-secondary,
#form-creation-fiche #etape2 .row.mb-2 h6.card-title {
  color: var(--menu-accent) !important;
}

/* Aération entre blocs Identité / Classification / Dates */
body:has(#form-creation-fiche) #form-creation-fiche .etape > .row {
  margin-bottom: 1.5rem !important;
}

body:has(#form-creation-fiche) #form-creation-fiche .etape > .row:last-child {
  margin-bottom: 0 !important;
}

/* Labels fiche-création : alignés sur le design system global (--ds-form-label) */
body:has(#form-creation-fiche) #form-creation-fiche label.form-label,
#form-creation-fiche label.form-label {
  margin-bottom: 0.35rem !important;
  color: var(--ds-form-label);
  font-size: var(--ds-form-label-size);
  font-weight: 600;
}

/* Astérisques obligatoires — espacement lisible : gap sur le label + marge sur ::after en secours */
body:has(#form-creation-fiche) #form-creation-fiche .form-group:has([required]) > label.form-label,
#form-creation-fiche .form-group:has([required]) > label.form-label {
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

body:has(#form-creation-fiche) #form-creation-fiche .form-group:has([required]) > label.form-label::after {
  content: "*";
  color: var(--ds-danger) !important;
  font-weight: 700;
  margin-left: 0.15rem !important;
  padding-left: 0;
  display: inline !important;
}

body:has(#form-creation-fiche) #form-creation-fiche label.form-label .required-star,
#form-creation-fiche label.form-label .required-star {
  margin-left: 0.15rem !important;
  display: inline-block;
}

#form-creation-fiche .required-star {
  margin-left: 0.15rem !important;
  display: inline-block;
}

body:has(#form-creation-fiche) #form-creation-fiche label.form-label em,
#form-creation-fiche label.form-label em {
  margin-left: 0.15rem !important;
  display: inline-block !important;
}

/* Champs : même border-radius, padding, hauteur fixe (sauf textarea) */
body:has(#form-creation-fiche) #form-creation-fiche input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]),
body:has(#form-creation-fiche) #form-creation-fiche select.form-control,
#form-creation-fiche input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]),
#form-creation-fiche select.form-control {
  border-radius: var(--ds-input-radius) !important;
  border: 1px solid var(--ds-input-border) !important;
  background-color: #fff;
  min-height: var(--ds-input-fixed-height);
  height: var(--ds-input-fixed-height);
  padding: var(--ds-input-pad-y) var(--ds-input-pad-x);
  line-height: 1.5;
  box-sizing: border-box;
  box-shadow: var(--ds-input-shadow-idle);
  transition: var(--ds-input-transition);
}

body:has(#form-creation-fiche) #form-creation-fiche textarea.form-control,
#form-creation-fiche textarea.form-control {
  border-radius: var(--ds-input-radius) !important;
  border: 1px solid var(--ds-input-border) !important;
  background-color: #fff;
  min-height: 5.5rem;
  height: auto !important;
  padding: var(--ds-input-pad-y) var(--ds-input-pad-x);
  line-height: 1.5;
  box-sizing: border-box;
  box-shadow: var(--ds-input-shadow-idle);
  transition: var(--ds-input-transition);
}

body:has(#form-creation-fiche) #form-creation-fiche .form-control:focus,
body:has(#form-creation-fiche) #form-creation-fiche select.form-control:focus,
body:has(#form-creation-fiche) #form-creation-fiche textarea.form-control:focus {
  border-color: var(--ds-ring-brand) !important;
  box-shadow: var(--ds-input-focus-glow);
  outline: 0;
}

body:has(#form-creation-fiche) #form-creation-fiche .form-control:disabled,
body:has(#form-creation-fiche) #form-creation-fiche .form-control[disabled],
body:has(#form-creation-fiche) #form-creation-fiche select.form-control:disabled {
  border-color: rgba(0, 0, 0, 0.1) !important;
  background-color: #f1f5f9 !important;
  color: #64748b;
}

body:has(#form-creation-fiche) #form-creation-fiche .form-control[readonly] {
  border-color: rgba(0, 0, 0, 0.1) !important;
  background-color: #f8fafc;
  color: #334155;
}

/* Placeholders — gris uniforme, fondu au focus */
body:has(#form-creation-fiche) #form-creation-fiche input.form-control::placeholder,
body:has(#form-creation-fiche) #form-creation-fiche textarea.form-control::placeholder {
  color: rgba(0, 0, 0, 0.4);
  opacity: 1;
  transition: opacity 0.2s ease, color 0.2s ease;
}

body:has(#form-creation-fiche) #form-creation-fiche input.form-control::-webkit-input-placeholder,
body:has(#form-creation-fiche) #form-creation-fiche textarea.form-control::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
  opacity: 1;
  transition: opacity 0.2s ease, color 0.2s ease;
}

body:has(#form-creation-fiche) #form-creation-fiche input.form-control::-moz-placeholder,
body:has(#form-creation-fiche) #form-creation-fiche textarea.form-control::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  opacity: 1;
  transition: opacity 0.2s ease, color 0.2s ease;
}

body:has(#form-creation-fiche) #form-creation-fiche input.form-control:focus::placeholder,
body:has(#form-creation-fiche) #form-creation-fiche textarea.form-control:focus::placeholder {
  opacity: 0;
  color: transparent;
}

body:has(#form-creation-fiche) #form-creation-fiche input.form-control:focus::-webkit-input-placeholder,
body:has(#form-creation-fiche) #form-creation-fiche textarea.form-control:focus::-webkit-input-placeholder {
  opacity: 0;
  color: transparent;
}

body:has(#form-creation-fiche) #form-creation-fiche input.form-control:focus::-moz-placeholder,
body:has(#form-creation-fiche) #form-creation-fiche textarea.form-control:focus::-moz-placeholder {
  opacity: 0;
  color: transparent;
}

/* Groupes avec append : un seul contour arrondi + focus sur le groupe */
body:has(#form-creation-fiche) #form-creation-fiche .input-group {
  border-radius: var(--ds-input-radius);
  overflow: hidden;
  border: 1px solid var(--ds-input-border);
  background-color: #fff;
  box-shadow: var(--ds-input-shadow-idle);
  transition: var(--ds-input-transition);
}

body:has(#form-creation-fiche) #form-creation-fiche .input-group:focus-within {
  border-color: var(--ds-ring-brand);
  box-shadow: var(--ds-input-focus-glow);
}

body:has(#form-creation-fiche) #form-creation-fiche .input-group .form-control,
body:has(#form-creation-fiche) #form-creation-fiche .input-group .btn {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Hauteur des champs dans les groupes (alignée sur select / date pleine largeur) */
body:has(#form-creation-fiche) #form-creation-fiche .input-group input.form-control:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body:has(#form-creation-fiche) #form-creation-fiche .input-group select.form-control {
  min-height: var(--ds-input-fixed-height);
  height: var(--ds-input-fixed-height);
}

body:has(#form-creation-fiche) #form-creation-fiche .input-group .form-control:focus {
  box-shadow: none !important;
}

body:has(#form-creation-fiche) #form-creation-fiche .input-group:focus-within .form-control:focus {
  box-shadow: none !important;
}

body:has(#form-creation-fiche) #form-creation-fiche .input-group .btn-outline-secondary {
  background: rgba(248, 250, 252, 0.95);
  color: #475569;
}

body:has(#form-creation-fiche) #form-creation-fiche .input-group .btn-outline-secondary:hover,
body:has(#form-creation-fiche) #form-creation-fiche .input-group .btn-outline-secondary:focus {
  background: #fff;
  color: var(--ds-brand-hover);
}

/* Boutons « effacer » dans le formulaire — fondu d’opacité au survol */
body:has(#form-creation-fiche) #form-creation-fiche .effacer.btn {
  opacity: 1;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

body:has(#form-creation-fiche) #form-creation-fiche .effacer.btn:hover:not(:disabled),
body:has(#form-creation-fiche) #form-creation-fiche .effacer.btn:focus:not(:disabled) {
  opacity: 0.88;
}

/* Select : apparence native retirée + chevron accent à droite */
body:has(#form-creation-fiche) #form-creation-fiche select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.5rem;
  background-image: var(--ds-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 14px 14px;
  background-color: #fff;
}

body:has(#form-creation-fiche) #form-creation-fiche .input-group select.form-control {
  border-radius: 0 !important;
  background-color: transparent;
}

body:has(#form-creation-fiche) #form-creation-fiche .input-group:focus-within select.form-control:focus {
  box-shadow: none !important;
}

/* Boutons navigation — capsules identiques */
body:has(#form-creation-fiche) #btnAnnuler,
body:has(#form-creation-fiche) #btnSuivant,
body:has(#form-creation-fiche) #btnPrecedent,
body:has(#form-creation-fiche) #btnEnregistrer {
  min-width: 10.5rem;
  border-radius: 50px !important;
  padding: 0.55rem 1.35rem !important;
  font-weight: 600;
  opacity: 1;
  transition: all 0.3s ease;
}

body:has(#form-creation-fiche) #btnSuivant,
body:has(#form-creation-fiche) #btnEnregistrer,
body:has(#form-creation-fiche) #btnAnnuler,
body:has(#form-creation-fiche) #btnPrecedent {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* Retour / Précédent : même style secondaire (icône flèche à gauche dans le HTML) */
body:has(#form-creation-fiche) #btnAnnuler.bouton-primaire:not(.disabled),
body:has(#form-creation-fiche) #btnPrecedent.bouton-primaire:not(.disabled) {
  background: rgba(var(--accent-rgb), 0.2) !important;
  background-image: none !important;
  color: var(--ds-brand-hover) !important;
  border: 1px solid rgba(var(--accent-rgb), 0.38) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

body:has(#form-creation-fiche) #btnAnnuler.bouton-primaire:not(.disabled):hover,
body:has(#form-creation-fiche) #btnAnnuler.bouton-primaire:not(.disabled):focus,
body:has(#form-creation-fiche) #btnPrecedent.bouton-primaire:not(.disabled):hover,
body:has(#form-creation-fiche) #btnPrecedent.bouton-primaire:not(.disabled):focus {
  background: rgba(var(--accent-rgb), 0.28) !important;
  filter: none;
  box-shadow: 0 4px 14px rgba(30, 58, 138, 0.18);
  transform: translateY(-2px);
  opacity: 1;
}

body:has(#form-creation-fiche) #btnAnnuler i,
body:has(#form-creation-fiche) #btnPrecedent i {
  color: var(--ds-brand-hover) !important;
}

body:has(#form-creation-fiche) #btnAnnuler .fa-arrow-left,
body:has(#form-creation-fiche) #btnPrecedent .fa-arrow-left {
  font-size: 1.05rem;
  -webkit-text-stroke: 0.45px currentColor;
}

/* Suivant / Enregistrer : même dégradé + ombre nette (flou contenu, peu de débordement latéral) */
body:has(#form-creation-fiche) #btnSuivant.bouton-primaire:not(.disabled),
body:has(#form-creation-fiche) #btnEnregistrer.bouton-primaire:not(.disabled) {
  background-image: linear-gradient(180deg, var(--ds-brand) 0%, #15306e 52%, var(--ds-brand-hover) 100%) !important;
  box-shadow:
    0 3px 10px -3px rgba(30, 58, 138, 0.42),
    0 1px 4px -1px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body:has(#form-creation-fiche) #btnSuivant i,
body:has(#form-creation-fiche) #btnEnregistrer i {
  color: #fff !important;
}

body:has(#form-creation-fiche) #btnSuivant.bouton-primaire:not(.disabled):hover,
body:has(#form-creation-fiche) #btnSuivant.bouton-primaire:not(.disabled):focus,
body:has(#form-creation-fiche) #btnEnregistrer.bouton-primaire:not(.disabled):hover,
body:has(#form-creation-fiche) #btnEnregistrer.bouton-primaire:not(.disabled):focus {
  box-shadow:
    0 5px 12px -3px rgba(30, 58, 138, 0.5),
    0 2px 6px -1px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
  transform: translateY(-2px);
  opacity: 0.98;
}

/* Colonne droite étape 2 : même axe vertical pour Secteur et bloc Description */
body:has(#form-creation-fiche) #form-creation-fiche #etape2 .fiche-step2-right-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body:has(#form-creation-fiche) #form-creation-fiche #etape2 .fiche-step2-right-col > .form-group {
  width: 100%;
}

/* Champ libre « Saisissez une description » : espace sous le select */
body:has(#form-creation-fiche) #form-creation-fiche #input-description-telephone-block {
  margin-top: 15px;
}

/* Code postal / ville : ligne horizontale — CP 120px, ville flex:1 ; pas de flex-grow vertical sur .input-group */
body:has(#form-creation-fiche) #form-creation-fiche .fiche-cp-ville-wrap,
#form-creation-fiche .fiche-cp-ville-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}

body:has(#form-creation-fiche) #form-creation-fiche .fiche-cp-ville-wrap .fiche-cp-field,
body:has(#form-creation-fiche) #form-creation-fiche .fiche-cp-ville-wrap .fiche-ville-field,
#form-creation-fiche .fiche-cp-ville-wrap .fiche-cp-field,
#form-creation-fiche .fiche-cp-ville-wrap .fiche-ville-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 0;
  box-sizing: border-box;
}

body:has(#form-creation-fiche) #form-creation-fiche .fiche-cp-ville-wrap .fiche-cp-field,
#form-creation-fiche .fiche-cp-ville-wrap .fiche-cp-field {
  flex: 0 0 120px;
  width: 120px;
  max-width: 120px;
  min-width: 120px;
  overflow-x: clip;
  overflow-y: visible;
}

body:has(#form-creation-fiche) #form-creation-fiche .fiche-cp-ville-wrap .fiche-ville-field,
#form-creation-fiche .fiche-cp-ville-wrap .fiche-ville-field {
  flex: 1 1 0%;
  min-width: 0;
}

/* L’input-group ne doit pas consommer la hauteur restante en colonne (régression « carré » ville) */
body:has(#form-creation-fiche) #form-creation-fiche .fiche-cp-ville-wrap .fiche-cp-field .input-group,
body:has(#form-creation-fiche) #form-creation-fiche .fiche-cp-ville-wrap .fiche-ville-field .input-group,
#form-creation-fiche .fiche-cp-ville-wrap .fiche-cp-field .input-group,
#form-creation-fiche .fiche-cp-ville-wrap .fiche-ville-field .input-group {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

body:has(#form-creation-fiche) #form-creation-fiche .fiche-cp-ville-wrap .fiche-ville-field .input-group .form-control,
body:has(#form-creation-fiche) #form-creation-fiche .fiche-cp-ville-wrap .fiche-cp-field .input-group .form-control,
#form-creation-fiche .fiche-cp-ville-wrap .fiche-ville-field .input-group .form-control,
#form-creation-fiche .fiche-cp-ville-wrap .fiche-cp-field .input-group .form-control {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  align-self: center;
}

/* CP : léger resserrement horizontal (colonne 120px) ; hauteur = règles .form-control globales */
body:has(#form-creation-fiche) #form-creation-fiche .fiche-cp-ville-wrap #codePostal,
#form-creation-fiche .fiche-cp-ville-wrap #codePostal {
  padding-left: 0.65rem !important;
  padding-right: 0.65rem !important;
}

/* Menu suggestions d’adresses (API) — glassmorphism, toutes pages (création fiche, localisation modale, etc.) */
.address-autocomplete-wrap.position-relative .address-feedback {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1100;
  width: 100%;
  margin-top: 4px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* momentum scroll iOS (liste de suggestions) */
  list-style: none;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  max-height: 320px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.address-autocomplete-wrap.position-relative .address-feedback:not(:empty) {
  opacity: 1;
  pointer-events: auto;
}

.address-feedback .address-suggestion-item {
  display: block;
  padding: 12px 15px;
  font-size: 0.9rem;
  line-height: 1.35;
  color: #444;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 0 !important;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.address-feedback .address-suggestion-item:last-child {
  border-bottom: none !important;
}

.address-feedback .address-suggestion-item:hover,
.address-feedback .address-suggestion-item.active {
  background-color: rgba(var(--accent-rgb), 0.1) !important;
  color: #444 !important;
}

.address-feedback .address-suggestion-street {
  display: block;
  color: #444;
  font-weight: 500;
}

.address-feedback .address-suggestion-meta {
  display: block;
  margin-top: 0.2rem;
  color: #444;
}

.address-feedback .address-suggestion-cp {
  color: #555;
  font-weight: 500;
}

.address-feedback .address-suggestion-city {
  color: var(--ds-brand);
  font-weight: 700;
}

.address-feedback .address-suggestion-item:hover .address-suggestion-city,
.address-feedback .address-suggestion-item.active .address-suggestion-city {
  color: var(--ds-brand-hover);
}


body:has(#form-creation-fiche) #btnAnnuler:active,
body:has(#form-creation-fiche) #btnSuivant:active,
body:has(#form-creation-fiche) #btnPrecedent:active,
body:has(#form-creation-fiche) #btnEnregistrer:active {
  transform: scale(0.98);
  transition-duration: 0.08s;
}

/* =============================================================================
   Premium UI — barre de statut menu général (pilule), icônes calendrier outline
   ============================================================================= */

.template_accueil footer.mt-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 1.25rem;
  margin-top: 2rem !important;
  background: transparent !important;
  border: none !important;
}

/* Statut SMS : ancré au-dessus du dock avec la même respiration verticale que le haut du contenu */
body:has(#ys-tel-dock) .template_accueil footer.mt-5 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(
    var(--tel-dock-height) + var(--auxi-main-respiration-y) + env(safe-area-inset-bottom, 0px)
  );
  z-index: 2147481998;
  margin-top: 0 !important;
  padding-top: 0.35rem;
  padding-bottom: 0.25rem;
  pointer-events: none;
}

.template_accueil footer #afficherRappelSMS {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0.45rem 1.35rem;
  max-width: min(100%, 42rem);
  background: #DCE9F7;
  color: #1e3a8a !important;
  border-radius: 9999px;
  box-shadow: 0 4px 20px -2px rgba(30, 58, 138, 0.08);
  font-size: 0.8125rem;
  line-height: 1.35;
}

/* Ligne icône + texte : axe vertical centré (icône et « Statut : » alignés) */
.template_accueil footer #afficherRappelSMS .auxi-accueil-statut-sms__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: left;
  min-height: 1.35em;
}

.template_accueil footer #afficherRappelSMS .auxi-accueil-statut-sms__icon {
  flex-shrink: 0;
  margin: 0 15px 0 0 !important;
  padding: 0;
  line-height: 1;
  position: static;
  vertical-align: middle;
  font-size: 1.05em;
  color: var(--auxi-tile-border-auth) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.25em;
}

.template_accueil footer #afficherRappelSMS .auxi-accueil-statut-sms__label {
  font-weight: bold;
}

.template_accueil footer #afficherRappelSMS .auxi-accueil-statut-sms__text {
  line-height: 1.35;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.25em;
}

body:has(#ys-tel-dock) .template_accueil footer #afficherRappelSMS {
  pointer-events: auto;
  background: rgba(248, 250, 252, 0.98) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow:
    0 -4px 18px rgba(15, 23, 42, 0.08),
    0 4px 20px -2px rgba(0, 0, 0, 0.06) !important;
}

.template_accueil footer #afficherRappelSMS.text-muted {
  color: #475569 !important;
}

/* Font Awesome calendrier dans les libellés — glyphe → SVG outline (trait 1.5, style Lucide) */
main label.form-label i.fas.fa-calendar-day::before,
main label.form-label i.fas.fa-calendar-alt::before,
main label.form-label i.fas.fa-calendar::before,
.modal-body label.form-label i.fas.fa-calendar-day::before,
.modal-body label.form-label i.fas.fa-calendar-alt::before,
.modal-body label.form-label i.fas.fa-calendar::before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.125em;
  margin-right: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

main label.form-label i.fas.fa-calendar-day,
main label.form-label i.fas.fa-calendar-alt,
main label.form-label i.fas.fa-calendar,
.modal-body label.form-label i.fas.fa-calendar-day,
.modal-body label.form-label i.fas.fa-calendar-alt,
.modal-body label.form-label i.fas.fa-calendar {
  font-size: 0 !important;
  width: 1rem;
  height: 1rem;
  display: inline-block;
  vertical-align: -0.15em;
  overflow: visible;
  margin-right: 0.35rem;
}

/* Modale « Confirmation d’appel » (envoiAppel) : apparition légère type scale-up */
#modal.modale-envoi-appel-scale .modal-dialog {
  transform-origin: 50% 28%;
  animation: auxiModalEnvoiAppelScaleIn 0.32s ease-out both;
}

@keyframes auxiModalEnvoiAppelScaleIn {
  from {
    transform: scale(0.94);
    opacity: 0.9;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #modal.modale-envoi-appel-scale .modal-dialog {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Modales Bootstrap — harmonisation SaaS Premium (globale)
   --------------------------------------------------------------------------- */
.modal-backdrop.show {
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
}

.modal.fade .modal-dialog {
  transform: translateY(-10px) scale(0.985);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.modal.show .modal-dialog {
  transform: translateY(0) scale(1);
}

.modal-content {
  border-radius: var(--menu-tile-radius, 12px) !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  box-shadow: 0 26px 58px -18px rgba(15, 23, 42, 0.28), 0 10px 24px -12px rgba(15, 23, 42, 0.22) !important;
  overflow: hidden;
  max-height: calc(100vh - 3.5rem);
  display: flex;
  flex-direction: column;
}

.modal-content .modal-header,
.modal-content .modal-header.bg-light,
.modal-content .modal-header.bg-info,
.modal-content .modal-header.bg-secondary,
.modal-content .modal-header.bg-warning,
.modal-content .modal-header.bg-danger {
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
  color: #1e3a8a !important;
}

.modal-content .modal-header .modal-title,
.modal-content .modal-header h4,
.modal-content .modal-header h5 {
  color: #1e3a8a !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  margin-bottom: 10px !important;
}

.modal-content .modal-body {
  background: #ffffff;
  padding-top: 1.35rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* momentum scroll iOS dans le corps des modales */
  max-width: 100%;
  padding-bottom: 1.5rem;
  flex: 1 1 auto;
}

.modal-content .modal-body > * {
  max-width: 100%;
}

.modal-content .modal-body > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.modal-content .modal-footer {
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  background: #f8faff;
  position: -webkit-sticky; /* Safari/iOS < 13 */
  position: sticky;
  bottom: 0;
  /* Safe-area iPhone (encoche / barre home) pour que les boutons ne soient pas
     rognés en bas. Le clavier virtuel iOS reste géré par le scroll du modal-body. */
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 2;
}

/* Modales caractéristiques (Rôle / Groupe / Natures) : zéro débordement horizontal */
.modal-body.auxi-modal-body--caracteristiques #infosCaracteristiques {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
  max-width: 100%;
}

.modal-body.auxi-modal-body--caracteristiques #infosCaracteristiques .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex-wrap: wrap;
  gap: 0;
}
.modal-body.auxi-modal-body--caracteristiques #infosCaracteristiques [class*="col-"] {
  max-width: 33.33%;
  flex-basis: 33.33%;
  flex-grow: 0;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-bottom: 0.5rem;
}

.modal-body.auxi-modal-body--caracteristiques .form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Modale Rôle : badges de catégorie stables + grille souple */
.modal-body.auxi-modal-body--role #infosCaracteristiques h6.card-title {
  margin-bottom: 0.75rem;
  text-align: center;
}

.modal-body.auxi-modal-body--role #infosCaracteristiques .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Modales Natures : seulement scroll vertical, colonnes contenues */
.modal-body.auxi-modal-body--natures .column-fill-container {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Labels / obligatoires : lisibilité maximale */
.modal-body label,
.modal-body .form-label {
  color: var(--ds-form-label) !important;
}

.modal-body .required-star,
.modal-body label .required-star,
.modal-body label em {
  color: #A32D2D !important;
}

/* Champs formulaire : rayon + focus marine */
.modal-body input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.modal-body textarea.form-control,
.modal-body select.form-control {
  border-radius: var(--menu-tile-radius, 12px) !important;
}

.modal-body input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus,
.modal-body textarea.form-control:focus,
.modal-body select.form-control:focus {
  border-color: var(--ds-brand) !important;
  box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.18) !important;
}

/* Boutons footer : primaire marine / secondaire gris outline */
.modal-footer .btn.btn-primary:not(:disabled),
.modal-footer .btn.btn-info:not(:disabled),
.modal-footer .btn.bouton-primaire:not(:disabled) {
  background: var(--ds-brand) !important;
  border-color: var(--ds-brand) !important;
  color: #fff !important;
}

/* Footer modale : symétrie stricte Annuler / Enregistrer */
.modal-footer .btn {
  min-width: 9.5rem;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-footer .btn.btn-primary:not(:disabled):hover,
.modal-footer .btn.btn-primary:not(:disabled):focus,
.modal-footer .btn.btn-info:not(:disabled):hover,
.modal-footer .btn.btn-info:not(:disabled):focus,
.modal-footer .btn.bouton-primaire:not(:disabled):hover,
.modal-footer .btn.bouton-primaire:not(:disabled):focus {
  background: var(--ds-brand-hover) !important;
  border-color: var(--ds-brand-hover) !important;
  filter: brightness(0.9);
}

.modal-footer .btn.btn-secondary:not(:disabled),
.modal-footer .btn.btn-outline-secondary:not(:disabled),
.modal-footer .btn.closeModal:not(:disabled) {
  background: #f8fafc !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}

.modal-footer .btn.btn-secondary:not(:disabled):hover,
.modal-footer .btn.btn-secondary:not(:disabled):focus,
.modal-footer .btn.btn-outline-secondary:not(:disabled):hover,
.modal-footer .btn.btn-outline-secondary:not(:disabled):focus,
.modal-footer .btn.closeModal:not(:disabled):hover,
.modal-footer .btn.closeModal:not(:disabled):focus {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #334155 !important;
}

/* Icônes de boutons (modales) : blanches sur primaire, gris sur secondaire */
.modal-footer .btn.btn-primary i,
.modal-footer .btn.btn-info i,
.modal-footer .btn.bouton-primaire i {
  color: #ffffff !important;
}

.modal-footer .btn.btn-secondary i,
.modal-footer .btn.btn-outline-secondary i,
.modal-footer .btn.closeModal i {
  color: #475569 !important;
}

/* Modales legacy : mêmes règles même hors .modal-footer */
.modal .btn.btn-primary:not(:disabled),
.modal .btn.btn-info:not(:disabled),
.modal .btn.bouton-primaire:not(:disabled),
.modal .btn.btn-outline-info:not(:disabled),
.modal .btn.btn-outline-white:not(:disabled),
.modal .btn[id*="valider"]:not(:disabled),
.modal .btn[id*="Valider"]:not(:disabled),
.modal .btn[id*="edition"]:not(:disabled),
.modal .btn[id*="Edition"]:not(:disabled),
.modal .btn[id*="annulation"]:not(:disabled),
.modal .btn[id*="Annulation"]:not(:disabled),
.modal .btn[id*="envoi"]:not(:disabled),
.modal .btn[id*="Envoi"]:not(:disabled),
.modal .btn[id*="export"]:not(:disabled),
.modal .btn[id*="Export"]:not(:disabled),
.modal .btn[id*="impression"]:not(:disabled),
.modal .btn[id*="Impression"]:not(:disabled) {
  background: var(--ds-brand) !important;
  border-color: var(--ds-brand) !important;
  color: #fff !important;
}

.modal .btn.btn-primary:not(:disabled):hover,
.modal .btn.btn-primary:not(:disabled):focus,
.modal .btn.btn-info:not(:disabled):hover,
.modal .btn.btn-info:not(:disabled):focus,
.modal .btn.bouton-primaire:not(:disabled):hover,
.modal .btn.bouton-primaire:not(:disabled):focus,
.modal .btn.btn-outline-info:not(:disabled):hover,
.modal .btn.btn-outline-info:not(:disabled):focus,
.modal .btn.btn-outline-white:not(:disabled):hover,
.modal .btn.btn-outline-white:not(:disabled):focus,
.modal .btn[id*="valider"]:not(:disabled):hover,
.modal .btn[id*="valider"]:not(:disabled):focus,
.modal .btn[id*="Valider"]:not(:disabled):hover,
.modal .btn[id*="Valider"]:not(:disabled):focus {
  background: var(--ds-brand-hover) !important;
  border-color: var(--ds-brand-hover) !important;
  color: #fff !important;
  filter: brightness(0.9);
}

.modal .btn.btn-primary i,
.modal .btn.btn-info i,
.modal .btn.bouton-primaire i,
.modal .btn.btn-outline-info i,
.modal .btn.btn-outline-white i {
  color: #fff !important;
}

/* Annuler/Fermer prioritaire en secondaire, même si legacy classé .btn-info */
.modal .btn.closeModal:not([id*="valider"]):not([id*="Valider"]):not([id*="envoi"]):not([id*="Envoi"]) {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

.modal .btn.closeModal:not([id*="valider"]):not([id*="Valider"]):not([id*="envoi"]):not([id*="Envoi"]):hover,
.modal .btn.closeModal:not([id*="valider"]):not([id*="Valider"]):not([id*="envoi"]):not([id*="Envoi"]):focus {
  background: #f1f5f9 !important;
  border-color: #94a3b8 !important;
  color: #334155 !important;
}

.modal .btn.closeModal:not([id*="valider"]):not([id*="Valider"]):not([id*="envoi"]):not([id*="Envoi"]) i {
  color: #475569 !important;
}

/* Modale incompatibilités : ligne cliquable + action "+" miniature */
.modal .auxi-incompat-selection-table tbody tr.auxi-incompat-row {
  cursor: pointer;
}

.modal .auxi-incompat-selection-table tbody tr.auxi-incompat-row:hover {
  background-color: #f8f9fa !important;
}

.modal .auxi-incompat-selection-table .auxi-incompat-action-cell {
  width: 3rem;
  min-width: 3rem;
}

.modal .auxi-incompat-selection-table .auxi-incompat-add-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-brand) !important;
  background: transparent !important;
  color: var(--ds-brand) !important;
  line-height: 1;
}

.modal .auxi-incompat-selection-table .auxi-incompat-add-btn i {
  color: var(--ds-brand) !important;
  font-size: 0.8rem;
}

.modal .auxi-incompat-selection-table .auxi-incompat-add-btn:hover,
.modal .auxi-incompat-selection-table .auxi-incompat-add-btn:focus {
  background: var(--ds-brand) !important;
  border-color: var(--ds-brand) !important;
}

.modal .auxi-incompat-selection-table .auxi-incompat-add-btn:hover i,
.modal .auxi-incompat-selection-table .auxi-incompat-add-btn:focus i {
  color: #fff !important;
}

/* =============================================================================
   Espace « gestion de données » (main.auxi-data-workspace)
   Charte : --auxi-app-bg-gradient, motif --auxi-app-bg-pattern-opacity, marine
   --ds-brand / --ds-brand-hover, pas d’orange UI ni bannières photos.
   ============================================================================= */

/* Fond accueil sur tout le viewport : évite aplats blancs au-dessus/sous le contenu */
html:has(main.auxi-data-workspace) {
  background: var(--auxi-app-bg-gradient) !important;
  min-height: 100%;
}

/* Accueil back-office (menu général) : même bleu ciel que tout le reste, via le token unique.
   Doit venir APRÈS la règle générique ci-dessus pour avoir la priorité. */
html:has(.template_accueil.menu-general):not(:has(.auxi-front-home-shell)) {
  background: var(--app-sky-gradient) !important;
}

body:has(main.auxi-data-workspace) {
  position: relative;
  background: transparent;
  min-height: 100dvh;
}

body:has(main.auxi-data-workspace)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--auxi-app-bg-pattern-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 24h48M24 0v48M12 12l24 24M36 12L12 36' stroke='%2364748b' stroke-width='0.5' fill='none'/%3E%3C/svg%3E");
  background-size: 48px 48px;
  background-repeat: repeat;
  background-attachment: fixed;
}

body:has(main.auxi-data-workspace) > header {
  position: relative;
  z-index: 1030;
}

main.auxi-data-workspace {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100dvh - var(--auxi-header-offset));
  padding-bottom: clamp(1rem, 3vh, 2.5rem);
  background: transparent !important;
  z-index: 1;
}

body:has(#ys-tel-dock) > main.auxi-data-workspace {
  min-height: calc(
    100dvh - var(--auxi-header-offset) - var(--tel-dock-height) - var(--tel-dock-content-gap) -
      env(safe-area-inset-bottom, 0px)
  );
}

main.auxi-data-workspace > * {
  position: relative;
  z-index: 1;
}

/* Recherche (sorties collectives, etc.) : la rangée contenant le formulaire et sa
   pick-list de suggestions (#suggestions) doit passer AU-DESSUS du bloc résultats.
   Sans cela, les enfants directs de main ayant tous z-index:1, le bloc résultats
   (plus bas dans le DOM) recouvre la liste #suggestions — piégée dans le contexte
   d'empilement de sa rangée — malgré son z-index:1000 interne. */
main.auxi-data-workspace > .row:has(#search-form) {
  z-index: 5;
}

/* Cartes / grilles : verre plus léger pour laisser voir le dégradé global */
main.auxi-data-workspace .container-fluid.border.template {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255, 255, 255, 0.55) !important;
  border-radius: var(--menu-tile-radius, 12px) !important;
  box-shadow: var(--shadow-lg-menu) !important;
}

/* Bandeau recherche (fiche / missions) : sans photo, verre léger */
main.auxi-data-workspace .entete.enteteRecherche,
main.auxi-data-workspace #zone-recherche.entete {
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  color: var(--text-night);
}

/* Bandeau titre (administration, comptabilité, reporting, etc.) : même verre */
main.auxi-data-workspace > .container-fluid.entete {
  background-image: none !important;
  background-color: rgba(255, 255, 255, 0.42) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
  color: var(--text-night);
}

/* Onglets (compta / admin) : actif = marine identitaire */
main.auxi-data-workspace .nav-tabs .nav-link.active,
main.auxi-data-workspace .nav-tabs .nav-item.show .nav-link {
  color: #1e3a8a !important;
  font-weight: 600;
  border-color: #dee2e6 #dee2e6 #fff;
}

/* Fil d’Ariane : fond blanc léger, texte bleu nuit, séparateur discret */
main.auxi-data-workspace .auxi-breadcrumb-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.4rem;
  padding: 0.4rem 0.95rem;
  margin-bottom: 0.35rem;
  max-width: 100%;
  background: var(--auxi-breadcrumb-bg);
  border: var(--auxi-breadcrumb-border);
  border-radius: var(--menu-tile-radius);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

main.auxi-data-workspace .auxi-breadcrumb-link,
main.auxi-data-workspace .entete a#retour,
main.auxi-data-workspace .entete a[href^="/fiche-recherche"],
main.auxi-data-workspace .entete a[href^="/mission-individuelle-recherche"],
main.auxi-data-workspace .entete a[href^="/fiche?"],
main.auxi-data-workspace .entete a[href^="/organigramme"] {
  color: var(--ds-brand) !important;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
}

main.auxi-data-workspace .auxi-breadcrumb-link:hover,
main.auxi-data-workspace .auxi-breadcrumb-link:focus,
main.auxi-data-workspace .entete a#retour:hover,
main.auxi-data-workspace .entete a[href^="/fiche-recherche"]:hover,
main.auxi-data-workspace .entete a[href^="/mission-individuelle-recherche"]:hover {
  color: #475569 !important;
  text-decoration: underline;
}

main.auxi-data-workspace .auxi-breadcrumb-sep {
  color: var(--auxi-breadcrumb-sep-color) !important;
  font-weight: 400;
  opacity: 0.9;
}

main.auxi-data-workspace .auxi-breadcrumb-bar .auxi-recherche-hero__title {
  color: var(--text-night);
  font-weight: 600;
  margin: 0;
}

main.auxi-data-workspace .auxi-recherche-hero__title {
  color: var(--text-night) !important;
}


main.auxi-data-workspace [tabindex="0"][role="heading"]:focus,
main.auxi-data-workspace [tabindex="0"][role="heading"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Barre de recherche : groupe aux coins = tuiles (--menu-tile-radius) */
main.auxi-data-workspace #search-form.auxi-search-input-group {
  border-radius: var(--menu-tile-radius);
  overflow: hidden;
  border: 1px solid var(--ds-input-border);
  box-shadow: var(--ds-input-shadow-idle);
  background: #fff;
}

main.auxi-data-workspace #search-form.auxi-search-input-group .form-control {
  border-radius: 0 !important;
  border: none !important;
}

main.auxi-data-workspace #search-form.auxi-search-input-group .form-control:first-of-type,
main.auxi-data-workspace #search-form.auxi-search-input-group > .form-control {
  border-top-left-radius: var(--menu-tile-radius) !important;
  border-bottom-left-radius: var(--menu-tile-radius) !important;
}

main.auxi-data-workspace #search-form.auxi-search-input-group #effacer-recherche {
  border-radius: 0 !important;
}

/* Barre type « une seule input-group » (ex. recherche auxiliaire mission) */
main.auxi-data-workspace #search-form.auxi-search-input-group.input-group {
  border-radius: var(--menu-tile-radius);
  overflow: hidden;
  border: 1px solid var(--ds-input-border);
  box-shadow: var(--ds-input-shadow-idle);
  background: #fff;
}

main.auxi-data-workspace #search-form.auxi-search-input-group.input-group .form-control {
  border-radius: 0 !important;
  border: none !important;
}

main.auxi-data-workspace #search-form.auxi-search-input-group.input-group #effacer-recherche {
  border-radius: 0 !important;
}

/* Loupe / bouton d’action recherche (fiche, mission, front) */
main.auxi-data-workspace #envoi-recherche,
main.auxi-data-workspace .auxi-btn-submit-search {
  border-radius: 0 var(--menu-tile-radius) var(--menu-tile-radius) 0 !important;
  background-image: linear-gradient(135deg, #1e3a8a 0%, #15306e 100%) !important;
  border: 1px solid #15306e !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(30, 58, 138, 0.28);
  transition: box-shadow 0.2s ease, filter 0.2s ease, transform 0.15s ease;
}

/* Bouton recherche seul dans un bloc (ex. période personnalisée front office) : coins complets */
main.auxi-data-workspace .form-group > #envoi-recherche.auxi-btn-submit-search {
  border-radius: var(--menu-tile-radius) !important;
}

main.auxi-data-workspace #envoi-recherche:hover,
main.auxi-data-workspace #envoi-recherche:focus,
main.auxi-data-workspace .auxi-btn-submit-search:hover,
main.auxi-data-workspace .auxi-btn-submit-search:focus {
  background-color: #15306e !important;
  background-image: none !important;
  border-color: #15306e !important;
  filter: brightness(1.02);
  box-shadow: 0 6px 18px rgba(30, 58, 138, 0.38);
  color: #fff !important;
}

main.auxi-data-workspace #envoi-recherche i,
main.auxi-data-workspace .auxi-btn-submit-search i {
  color: #fff !important;
}

/* Colonne filtres : même esprit que « Aujourd’hui », verre léger (moins d’aplat blanc) */
main.auxi-data-workspace .panneau-filtres-recherche,
main.auxi-data-workspace .auxi-filters-panel {
  border-radius: var(--menu-tile-radius) !important;
  box-shadow: var(--auxi-widget-panel-shadow) !important;
  border: var(--auxi-widget-panel-border) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

main.auxi-data-workspace .auxi-filters-panel label i,
main.auxi-data-workspace .panneau-filtres-recherche label i {
  color: #1e293b !important;
}

main.auxi-data-workspace .auxi-filters-panel__title,
main.auxi-data-workspace h5:has(.fa-filter) {
  color: #1e293b !important;
}

main.auxi-data-workspace .auxi-filters-panel__title .fa-filter,
main.auxi-data-workspace h5:has(.fa-filter) .fa-filter {
  color: #1e293b !important;
}

/* Titres de sections filtres (colonne gauche) : noir professionnel */
main.auxi-data-workspace .auxi-filters-panel label.font-weight-bold,
main.auxi-data-workspace .panneau-filtres-recherche label.font-weight-bold {
  color: #1e293b !important;
}

main.auxi-data-workspace .auxi-filters-panel label.font-weight-bold.text-dark,
main.auxi-data-workspace .panneau-filtres-recherche label.font-weight-bold.text-dark {
  color: #1e293b !important;
}

/* Titres de filtres : icône entonnoir en accent marine (sélecteur stable par
   l'icône, remplace l'ancien hack un ancien ciblage par style inline devenu sans objet). */
main h5 i.fa-filter {
  color: #1e3a8a !important;
}

/* Tableaux listes (admin, reporting…) : en-tête beige DS2026 */
main.auxi-data-workspace .table.table-striped thead.thead-light th,
main.auxi-data-workspace .table.table-striped thead th {
  background-color: #f8faff !important;
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid #bfdbfe !important;
  border-color: #bfdbfe !important;
}

main.auxi-data-workspace .table.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(248, 250, 252, 0.95) !important;
}

main.auxi-data-workspace .table.table-striped tbody tr:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.98) !important;
}

/* Hover lignes tableau — fond marine très pâle brand, curseur pointer */
main.auxi-data-workspace .table tbody tr:hover,
main.auxi-data-workspace .table-hover tbody tr:hover,
main.auxi-data-workspace .table.table-striped tbody tr:hover {
  background-color: rgba(30, 58, 138, 0.05) !important;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

main.auxi-data-workspace .table tbody tr:hover td,
main.auxi-data-workspace .table-hover tbody tr:hover td,
main.auxi-data-workspace .table.table-striped tbody tr:hover td {
  background-color: rgba(30, 58, 138, 0.05) !important;
  color: #1e293b !important;
}

/* Hover dans modal (RechercheAuxiliaire) */
.modal-body .table tbody tr:hover,
.modal-body .table-hover tbody tr:hover {
  background-color: rgba(30, 58, 138, 0.05) !important;
  cursor: pointer;
}

.modal-body .table tbody tr:hover td {
  background-color: rgba(30, 58, 138, 0.05) !important;
}

/* Compteur résultats — pilule brand premium */
main.auxi-data-workspace #info-resultat-recherche,
main.auxi-data-workspace #info-resultat-recherche.auxi-result-count-badge,
main.auxi-data-workspace .auxi-result-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.2rem 0.75rem;
  min-height: 1.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--auxi-result-badge-text);
  background: var(--auxi-result-badge-bg);
  border: var(--auxi-result-badge-border);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  margin-bottom: 0.5rem;
}
/* Icône fa-circle verte devant badge compteur → couleur brand */
main.auxi-data-workspace #info-resultat-recherche .fa-circle,
main.auxi-data-workspace .auxi-result-count-badge .fa-circle,
main.auxi-data-workspace #info-resultat-recherche i.fas,
main.auxi-data-workspace .auxi-result-count-badge i.fas {
  color: #1e3a8a !important;
  font-size: 0.7rem !important;
  vertical-align: middle;
}


/* Tableaux recherche fiche (+ homogénéisation thead) */
main.auxi-data-workspace #tableFicheRecherche thead.thead-light th,
main.auxi-data-workspace #tableFicheRecherche thead th {
  background-color: #f8faff !important;
  color: #1e293b !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid #bfdbfe !important;
  border-color: #bfdbfe !important;
}

main.auxi-data-workspace #tableFicheRecherche.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(248, 250, 252, 0.95) !important;
}

main.auxi-data-workspace #tableFicheRecherche.table-striped tbody tr:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.98) !important;
}

main.auxi-data-workspace #tableFicheRecherche tbody tr:hover {
  background-color: rgba(224, 242, 254, 0.55) !important;
}

/* Lignes de résultats focusables au clavier : indicateur de focus visible (RGAA). */
main.auxi-data-workspace #tableFicheRecherche tbody tr:focus-visible {
  background-color: rgba(224, 242, 254, 0.75) !important;
  outline: 2px solid #1e3a8a;
  outline-offset: -2px;
}

/* Boutons recherche numéro bordereau (comptabilité) — même bleu marine #1e3a8a */
main.auxi-data-workspace .btn-envoi-numero-bordereau,
main.auxi-data-workspace button[id^="envoi-recherche-"] {
  border-radius: 0 var(--menu-tile-radius) var(--menu-tile-radius) 0 !important;
  background-image: linear-gradient(135deg, #1e3a8a 0%, #15306e 100%) !important;
  border: 1px solid #15306e !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(30, 58, 138, 0.22);
}

main.auxi-data-workspace .btn-envoi-numero-bordereau:hover,
main.auxi-data-workspace .btn-envoi-numero-bordereau:focus,
main.auxi-data-workspace button[id^="envoi-recherche-"]:hover,
main.auxi-data-workspace button[id^="envoi-recherche-"]:focus {
  background-color: #15306e !important;
  background-image: none !important;
  border-color: #15306e !important;
  color: #fff !important;
}

main.auxi-data-workspace .btn-envoi-numero-bordereau i,
main.auxi-data-workspace button[id^="envoi-recherche-"] i {
  color: #fff !important;
}

/* Pagination tableaux : langage visuel aligné boutons circulaires d'action */
.bouton-pagination {
  width: auto !important;
  height: auto !important;
  min-width: unset !important;
  min-height: unset !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  border: none !important;
  background: transparent !important;
  color: var(--text-muted) !important;
  font-size: 0.82rem;
  font-weight: 500;
  box-shadow: none !important;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.bouton-pagination i {
  color: var(--text-muted) !important;
  font-size: 0.8rem;
  transition: transform 0.15s ease;
}


.nav-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
  padding: 0.5rem 0;
}
/* Les boutons de pagination individuels restent masqués par le style inline display:none
   jusqu'à ce que JS les affiche — on ne force pas leur visibilité */
.nav-btns .bouton-pagination[style*="display:none"],
.nav-btns .bouton-pagination[style*="display: none"] {
  display: none !important;
}

.nav-btns .bouton-pagination + #pagination-info-recherche,
.nav-btns #pagination-info-recherche + .bouton-pagination {
  margin-left: 0.35rem;
}

.nav-btns #pagination-info-recherche,
.nav-btns #pagination-info-recherche-creation,
.nav-btns [id^="pagination-info"] {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0 0.6rem;
}

.bouton-pagination.disabled,
.bouton-pagination:disabled {
  background: transparent !important;
  border: none !important;
  color: #CBD5E1 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

.bouton-pagination.disabled i,
.bouton-pagination:disabled i {
  color: #94a3b8 !important;
}

.bouton-pagination:not(.disabled):not(:disabled):hover,
.bouton-pagination:not(.disabled):not(:disabled):focus {
  background: #F8FAFC !important;
  border: none !important;
  color: var(--ds-brand) !important;
  box-shadow: none !important;
}
.bouton-pagination:not(.disabled):not(:disabled):hover i,
.bouton-pagination:not(.disabled):not(:disabled):focus i {
  color: var(--ds-brand) !important;
}

.bouton-pagination:not(.disabled):not(:disabled):hover .fa-angle-left,
.bouton-pagination:not(.disabled):not(:disabled):focus .fa-angle-left {
  transform: translateX(-2px);
}

.bouton-pagination:not(.disabled):not(:disabled):hover .fa-angle-right,
.bouton-pagination:not(.disabled):not(:disabled):focus .fa-angle-right {
  transform: translateX(2px);
}

/* ── Pagination : neutraliser bouton-primaire pill sur bouton-pagination ──────
   Spécificité (0,3,0) > bouton-primaire:not(.disabled) (0,2,0)
   S'applique à toutes les pages de recherche (même structure HTML) */
.bouton-primaire.bouton-pagination:not(.disabled),
.bouton-primaire.bouton-pagination:not(.disabled):hover {
  border-radius: 6px !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #64748b !important;
  transform: none !important;
  filter: none !important;
}

.bouton-primaire.bouton-pagination:not(.disabled):hover {
  background-color: #f1f5f9 !important;
  color: var(--ds-brand) !important;
}

.bouton-primaire.bouton-pagination:not(.disabled) i,
.bouton-primaire.bouton-pagination:not(.disabled):hover i {
  color: inherit !important;
}

/* Texte info pagination : gris slate sobre */
.nav-btns #pagination-info-recherche,
.nav-btns #pagination-info-recherche-creation,
.nav-btns [id^="pagination-info"] {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 500;
}

/* Colonnes numériques/monétaires : lecture verticale immédiate */
table th.auxi-numeric-col,
table td.auxi-numeric-col {
  text-align: right !important;
  padding-right: 1.5rem !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Fiche — lignes de tableaux missions (ouverture détail) : cohérence avec les autres listes cliquables */
main.auxi-data-workspace #tbody-missions-dv tr.auxi-fiche-mission-row,
main.auxi-data-workspace #tbody-missions-auxi tr.auxi-fiche-mission-row,
main.auxi-data-workspace #tbody-missions-collectives tr.auxi-fiche-mission-row {
  cursor: pointer;
}

main.auxi-data-workspace #tbody-missions-dv tr.auxi-fiche-mission-row:hover,
main.auxi-data-workspace #tbody-missions-auxi tr.auxi-fiche-mission-row:hover,
main.auxi-data-workspace #tbody-missions-collectives tr.auxi-fiche-mission-row:hover,
main.auxi-data-workspace #tbody-missions-dv tr.auxi-fiche-mission-row:focus-visible,
main.auxi-data-workspace #tbody-missions-auxi tr.auxi-fiche-mission-row:focus-visible,
main.auxi-data-workspace #tbody-missions-collectives tr.auxi-fiche-mission-row:focus-visible {
  background-color: rgba(224, 242, 254, 0.55) !important;
  outline: none;
}

/* Fiche — colonne « ouvrir » (chevron) : même principe visuel que le + incompatibilités */
main.auxi-data-workspace .auxi-fiche-mission-action-cell,
.auxi-mission-assign-selection-table .auxi-fiche-mission-action-cell {
  width: 3rem;
  min-width: 3rem;
  vertical-align: middle;
}

.auxi-mission-assign-selection-table .auxi-fiche-mission-action-cell.auxi-mission-call-fiche-cell {
  width: auto;
  min-width: 5.75rem;
  white-space: nowrap;
}

.auxi-mission-assign-selection-table .auxi-mission-call-fiche-wrap {
  gap: 0.35rem;
}

main.auxi-data-workspace .auxi-fiche-mission-open-btn,
.auxi-mission-assign-selection-table .auxi-mission-affecter-btn,
.auxi-mission-assign-selection-table .auxi-mission-phone-btn,
.auxi-mission-assign-selection-table .auxi-fiche-mission-open-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ds-brand) !important;
  background: transparent !important;
  color: var(--ds-brand) !important;
  line-height: 1;
}

main.auxi-data-workspace .auxi-fiche-mission-open-btn i,
.auxi-mission-assign-selection-table .auxi-mission-affecter-btn i,
.auxi-mission-assign-selection-table .auxi-mission-phone-btn i,
.auxi-mission-assign-selection-table .auxi-fiche-mission-open-btn i {
  font-size: 0.8rem;
}

main.auxi-data-workspace .auxi-fiche-mission-open-btn:hover,
main.auxi-data-workspace .auxi-fiche-mission-open-btn:focus-visible,
.auxi-mission-assign-selection-table .auxi-mission-affecter-btn:hover,
.auxi-mission-assign-selection-table .auxi-mission-affecter-btn:focus-visible,
.auxi-mission-assign-selection-table .auxi-mission-phone-btn:hover,
.auxi-mission-assign-selection-table .auxi-mission-phone-btn:focus-visible,
.auxi-mission-assign-selection-table .auxi-fiche-mission-open-btn:hover,
.auxi-mission-assign-selection-table .auxi-fiche-mission-open-btn:focus-visible {
  background: var(--ds-brand) !important;
  border-color: var(--ds-brand) !important;
  color: #fff !important;
}

main.auxi-data-workspace .auxi-fiche-mission-open-btn:hover i,
main.auxi-data-workspace .auxi-fiche-mission-open-btn:focus-visible i,
.auxi-mission-assign-selection-table .auxi-mission-affecter-btn:hover i,
.auxi-mission-assign-selection-table .auxi-mission-affecter-btn:focus-visible i,
.auxi-mission-assign-selection-table .auxi-mission-phone-btn:hover i,
.auxi-mission-assign-selection-table .auxi-mission-phone-btn:focus-visible i,
.auxi-mission-assign-selection-table .auxi-fiche-mission-open-btn:hover i,
.auxi-mission-assign-selection-table .auxi-fiche-mission-open-btn:focus-visible i {
  color: #fff !important;
}

.auxi-mission-assign-selection-table .auxi-mission-affecter-btn-disabled,
.auxi-mission-assign-selection-table .auxi-mission-affecter-btn-disabled:hover,
.auxi-mission-assign-selection-table .auxi-mission-affecter-btn-disabled:focus-visible {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent !important;
  color: var(--ds-brand) !important;
}

.auxi-mission-assign-selection-table tbody tr.auxi-mission-assign-row {
  cursor: default;
}

.auxi-mission-assign-selection-table tbody tr.auxi-mission-assign-row:hover,
.auxi-mission-assign-selection-table tbody tr.auxi-mission-assign-row:focus-visible {
  background-color: rgba(224, 242, 254, 0.45) !important;
}

.auxi-mission-assign-selection-table tbody tr.auxi-mission-assign-row.auxi-last-opened-row {
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.14) 0%, rgba(30, 58, 138, 0.04) 100%) !important;
  box-shadow: inset 4px 0 0 rgba(30, 58, 138, 0.9);
}

.auxi-mission-assign-selection-table tbody tr.auxi-mission-assign-row.auxi-last-opened-row:hover,
.auxi-mission-assign-selection-table tbody tr.auxi-mission-assign-row.auxi-last-opened-row:focus-visible {
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.18) 0%, rgba(30, 58, 138, 0.08) 100%) !important;
}

.auxi-mission-assign-selection-table .auxi-mission-open-fiche-tab.auxi-last-opened-btn {
  border-color: rgba(30, 58, 138, 0.95) !important;
  background: rgba(30, 58, 138, 0.18) !important;
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.28);
}

.auxi-mission-assign-selection-table .auxi-mission-open-fiche-tab.auxi-last-opened-btn i {
  color: rgba(41, 41, 122, 0.98) !important;
}



/* =============================================================================
   HARMONISATION UI 2026 — Invisible Borders · Soft Tints · Flat Pagination
   ============================================================================= */

/* ── Border-radius universel : cartes standard Bootstrap ───────────────────── */
main .card:not(.texture) {
  border-radius: 14px !important;
}
main .card-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 14px 14px 0 0 !important;
}
main .card-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 0 0 14px 14px !important;
}

/* ── Toute carte sans classe spécifique : ombre douce + sans bordure ──────── */
main .card:not(.texture) {
  border: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* ── Fil d'ariane : gris neutre, marine au survol (sélecteur stable par
      aria-label, remplace l'ancien hack un ancien ciblage par style inline). ──────────────────── */
main a[aria-label^="Fil d'ariane"],
main a[aria-label*="Fil d'ariane :"] {
  color: #5b6878 !important; /* RGAA : AA sur workspace gris (5.19) */
}
main a[aria-label^="Fil d'ariane"]:hover,
main a[aria-label*="Fil d'ariane :"]:hover {
  color: #1e3a8a !important;
  text-decoration: underline;
}

/* ── Pagination : libellés textuels via pseudo-éléments ─────────────────── */
.bouton-pagination[aria-label*="précédents"]::after,
#btn-pagination-prev-recherche::after,
#btn-pagination-prev::after {
  content: " Précédent";
  font-size: 0.82rem;
  font-weight: 500;
}

.bouton-pagination[aria-label*="suivants"]::after,
#btn-pagination-next-recherche::after,
#btn-pagination-next::after {
  content: " Suivant";
  font-size: 0.82rem;
  font-weight: 500;
}

/* ── Radier / Déradier / Anonymiser : actions rares — style discret ambre ── */
a#radier,
button#radier {
  background-color: #FAEEDA !important;
  border: 1px solid rgba(180, 83, 9, 0.22) !important;
  color: #854F0B !important;
  box-shadow: 0 1px 4px rgba(180, 83, 9, 0.08) !important;
  font-weight: 500;
}

a#radier i,
button#radier i {
  color: #BA7517 !important;
}

a#radier:hover,
button#radier:hover {
  background-color: #FAEEDA !important;
  border-color: rgba(180, 83, 9, 0.4) !important;
  color: #854F0B !important;
}

a#deradier,
button#deradier {
  background-color: #DCFCE7 !important;
  border: 1px solid rgba(22, 101, 52, 0.22) !important;
  color: var(--ds-success-text) !important;
  box-shadow: 0 1px 4px rgba(22, 101, 52, 0.08) !important;
  font-weight: 500;
}

a#deradier i,
button#deradier i {
  color: var(--ds-success) !important;
}

a#deradier:hover,
button#deradier:hover {
  background-color: var(--ds-success-bg) !important;
  border-color: rgba(22, 101, 52, 0.4) !important;
}

a#anonymiser,
button#anonymiser {
  background-color: #F8FAFC !important;
  border: 1px solid rgba(100, 116, 139, 0.28) !important;
  color: #475569 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
  font-weight: 500;
}

a#anonymiser i,
button#anonymiser i {
  color: #64748b !important;
}

/* ── #acces (Donner/Retirer accès Web) : action peu fréquente — style ardoise */
a#acces.confirmation:not(.acces-actif),
button#acces.confirmation:not(.acces-actif) {
  background-color: #F1F5F9 !important;
  border: 1px solid rgba(71, 85, 105, 0.25) !important;
  color: #334155 !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
  font-weight: 500;
}

a#acces.acces-actif,
button#acces.acces-actif {
  background-color: #FAE3E3 !important;
  border: 1px solid rgba(220, 38, 38, 0.22) !important;
  color: #7f2222 !important;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.08) !important;
}

a#acces.acces-actif i,
button#acces.acces-actif i {
  color: #A32D2D !important;
}

/* ── Fiche création : uniformité des gaps de colonnes ───────────────────── */
main .panneau-fiche .row,
main .formulaire-fiche .row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}

main .panneau-fiche .row > [class*="col-"],
main .formulaire-fiche .row > [class*="col-"] {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* ── Icônes filaires plus fines : fa-fw + légère atténuation ─────────────── */
main .card-header i.fas,
main .card-header i.far,
main .card-header i.fab {
  opacity: 0.82;
}

/* ── Bouton primaire : ombre plus subtile (moins agressif) ───────────────── */
.bouton-primaire:not(.disabled):not(.bouton-pagination) {
  box-shadow: 0 2px 10px rgba(30, 58, 138, 0.2) !important;
}

/* =============================================================================
   HARMONISATION UI 2026 — Global overrides (shadow · inputs · checkbox · breadcrumb)
   ============================================================================= */

/* ── 1. Élévation vaporeuse universelle — toutes les cartes main ────────────
   Remplace toutes les bordures grises par une ombre très diffuse.
   La carte se "devine" par son relief, pas par son trait.               ────── */
main .card:not(.texture),
main .panneau-fiche,
main .table-responsive,
main .panneau-filtres-recherche,
main .formulaire-fiche {
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

/* Panels latéraux (filtres) : même traitement */
main [class*="panneau-"],
main [class*="widget-panel"] {
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

/* ── 2. Border-radius cartes : 14px partout ─────────────────────────────── */
main .card:not(.texture) {
  border-radius: 14px !important;
}

/* ── 3. Inputs & Selects : bordures très subtiles + focus lueur colorée ──── */
main input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):focus,
main textarea.form-control:focus,
main select.form-control:focus,
.modal-body input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="file"]):focus,
.modal-body textarea.form-control:focus,
.modal-body select.form-control:focus {
  border-color: #E2E8F0 !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12), 0 0 0 1px rgba(30, 58, 138, 0.06) !important;
  outline: 0;
}

/* ── 4. Checkboxes : arrondis 4px + aspect logiciel moderne ────────────────
   Les navigateurs modernes supportent border-radius sur input[type=checkbox].  */
main input[type="checkbox"],
.modal-body input[type="checkbox"] {
  border-radius: 4px !important;
  accent-color: var(--ds-brand);
  cursor: pointer;
  width: 1rem;
  height: 1rem;
}

main input[type="checkbox"]:focus,
.modal-body input[type="checkbox"]:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.14) !important;
}

/* ── Checkboxes et radios globaux — accent-color brand sur toute l'app ───────
   Couvre les panneaux filtres (.panneau-filtres-recherche, .auxi-filters-panel)
   et tous les formulaires. Natif CSS, aucun hack, support navigateurs modernes. */
input[type="checkbox"] {
  accent-color: var(--ds-brand);
  cursor: pointer;
  flex-shrink: 0;
}

input[type="radio"] {
  accent-color: var(--ds-brand);
  cursor: pointer;
  flex-shrink: 0;
}

/* Taille harmonisée sur les panneaux filtres */
.panneau-filtres-recherche input[type="checkbox"],
.auxi-filters-panel input[type="checkbox"],
.panneau-filtres-recherche input[type="radio"],
.auxi-filters-panel input[type="radio"] {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
}

/* Focus ring brand sur les checkboxes hors main/modal */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

/* ── 5. Icônes header de carte : trait fin (opacité réduite) ────────────────
   Font Awesome ne supporte pas stroke-width CSS.
   On simule un trait "Light" via opacité 0.75 + légère réduction de taille.   */
main .card-header i.fas,
main .card-header i.far,
main .card-header i.fab,
main .card-title i.fas,
main .card-title i.far,
main .card-title i.fab,
main h4 > i.fas,
main h5 > i.fas,
main h6 > i.fas {
  opacity: 0.78;
  font-size: 0.92em;
}

/* ── 6. Fil d'ariane — séparateurs « / » au lieu de « > » ──────────────────
   On cible les <span aria-hidden> qui suivent directement une <a> dans le
   breadcrumb (.entete). Ce sont uniquement les séparateurs.                    */
main .entete a + span[aria-hidden="true"],
main [class*="breadcrumb"] a + span[aria-hidden="true"] {
  margin: 0 0.1rem;
}

/* Lien actif (dernier élément) — gris foncé #475569 */
main .entete span.text-secondary:not([aria-hidden="true"]),
main .entete > span:last-child {
  color: #475569 !important;
  font-weight: 500;
  font-size: 0.8rem;
}

/* Liens cliquables breadcrumb — marine de marque (WCAG AAA 9.45:1, lisibilité) */
main .entete a[aria-label*="Fil d'ariane"],
main .entete a[href^="/"] {
  color: var(--ds-brand) !important;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

main .entete a[aria-label*="Fil d'ariane"]:hover,
main .entete a[href^="/"]:hover {
  color: var(--ds-brand-hover) !important;
  text-decoration: underline;
}

/* ── 7. Séparateur breadcrumb auxi-breadcrumb-sep : style direct ───────────  */
.auxi-breadcrumb-sep {
  font-size: 0.78rem !important;
  color: #94A3B8 !important;
  font-weight: 300;
  margin: 0 0.2rem;
  user-select: none;
}

/* ── 8. Pagination — icônes nues sur fond transparent, hover gris perle ──── */
.bouton-pagination i {
  color: #94a3b8 !important;
  font-size: 0.82rem;
  transition: color 0.2s ease;
}

.bouton-pagination.disabled i,
.bouton-pagination:disabled i {
  color: #cbd5e1 !important;
}

/* ── 9. Input-group : même bordure subtile ──────────────────────────────────  */
main .container-fluid.template .input-group:not(.bootstrap-touchspin):not(.input-group-merge),
main .panneau-fiche .input-group:not(.bootstrap-touchspin):not(.input-group-merge),
.modal-body .input-group:not(.bootstrap-touchspin):not(.input-group-merge) {
  border-color: #E2E8F0 !important;
}

main .container-fluid.template .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within,
main .panneau-fiche .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within,
.modal-body .input-group:not(.bootstrap-touchspin):not(.input-group-merge):focus-within {
  border-color: #E2E8F0 !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12), 0 0 0 1px rgba(30, 58, 138, 0.06) !important;
}

/* =============================================================================
   ANNIVERSAIRES DU JOUR — Boutons Soft-Action (pastille légère, sans bordure)
   Spécificité : (0,4,0) > sélecteurs génériques (0,2,2) → gagne même sur !important
   ============================================================================= */

.menu-general .menu-general-birthdays__slot .menu-general-birthdays__action-btn:not(.inactif):not(.disabled) {
  background-color: rgba(30, 58, 138, 0.1) !important;
  border: none !important;
  box-shadow: none !important;
  color: #1e3a8a !important;
  border-radius: 8px !important;
  padding: 0.22rem 0.4rem !important;
  transition: background-color 0.2s ease !important;
}

.menu-general .menu-general-birthdays__slot .menu-general-birthdays__action-btn:not(.inactif):not(.disabled) i {
  color: #1e3a8a !important;
  opacity: 1 !important;
  font-size: 0.88rem;
}

.menu-general .menu-general-birthdays__slot .menu-general-birthdays__action-btn:not(.inactif):not(.disabled):hover,
.menu-general .menu-general-birthdays__slot .menu-general-birthdays__action-btn:not(.inactif):not(.disabled):focus-visible {
  background-color: rgba(30, 58, 138, 0.2) !important;
  border: none !important;
  box-shadow: none !important;
  color: #15306e !important;
}

.menu-general .menu-general-birthdays__slot .menu-general-birthdays__action-btn:not(.inactif):not(.disabled):hover i,
.menu-general .menu-general-birthdays__slot .menu-general-birthdays__action-btn:not(.inactif):not(.disabled):focus-visible i {
  color: #15306e !important;
}


/* =============================================================================
   MICRO-ANIMATIONS — Shimmer · Logo Éclat · Barre de progression AJAX
   ============================================================================= */

/* ── @keyframes ─────────────────────────────────────────────────────────────── */

@keyframes auxi-shimmer {
  0%   { background-position: -400% 0; }
  100% { background-position:  400% 0; }
}

@keyframes auxi-logo-shine {
  0%   { transform: translateX(-220%) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateX(420%)  skewX(-18deg); opacity: 0; }
}

/* auxi-progress keyframes gérés via JS (NProgress-style) */

/* ── 1. Shimmer : classe utilitaire + auto sur .is-loading ──────────────────── */

.skeleton-shimmer {
  background: linear-gradient(
    105deg,
    #F1F5F9 25%,
    #FFFFFF 50%,
    #F1F5F9 75%
  ) !important;
  background-size: 400% 100% !important;
  animation: auxi-shimmer 1.5s linear infinite !important;
  color: transparent !important;
  border-radius: 4px;
  user-select: none;
  pointer-events: none;
}

/* Overlay shimmer sur les conteneurs de tableaux */
main .table-responsive.is-loading,
main #tableau-resultats.is-loading {
  position: relative;
  min-height: 6rem;
}

main .table-responsive.is-loading::after,
main #tableau-resultats.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  background: linear-gradient(
    105deg,
    rgba(241, 245, 249, 0.96) 25%,
    rgba(255, 255, 255, 0.92) 50%,
    rgba(241, 245, 249, 0.96) 75%
  );
  background-size: 400% 100%;
  animation: auxi-shimmer 1.5s linear infinite;
  pointer-events: none;
}

/* Shimmer sur les cartes menu en attente */
.menu-tile.is-loading {
  position: relative;
  overflow: hidden;
}

.menu-tile.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    rgba(241, 245, 249, 0.9) 25%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(241, 245, 249, 0.9) 75%
  );
  background-size: 400% 100%;
  animation: auxi-shimmer 1.5s linear infinite;
  z-index: 1;
  pointer-events: none;
}

/* Shimmer sur les champs en attente */
main .form-control.is-loading,
.modal-body .form-control.is-loading {
  background: linear-gradient(
    105deg,
    #F1F5F9 25%,
    #FFFFFF 50%,
    #F1F5F9 75%
  ) !important;
  background-size: 400% 100% !important;
  animation: auxi-shimmer 1.5s linear infinite !important;
  color: transparent !important;
  pointer-events: none;
}

/* ── 2. Logo Auxi-DV : éclat périodique (sweep 0.8 s toutes les 5 s) ─────── */

.auxi-app-brand {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.auxi-app-brand::after {
  content: '';
  position: absolute;
  top: -10%;
  left: 0;
  width: 38%;
  height: 120%;
  background: linear-gradient(
    90deg,
    transparent           0%,
    rgba(255,255,255,0.3) 50%,
    transparent           100%
  );
  transform: skewX(-18deg) translateX(-220%);
  pointer-events: none;
  opacity: 0;
}

/* Éclat one-shot : déclenché via classe JS */
.auxi-app-brand.shine-once::after {
  animation: auxi-logo-shine 0.8s ease-out forwards;
}

/* ── 3. Barre de progression AJAX — 2 px, marine, en haut du viewport ───── */

#auxi-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2147483647;
  pointer-events: none;
  overflow: hidden;
  display: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

#auxi-progress-bar__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--ds-brand);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(30, 58, 138, 0.35);
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   FLICKER — Vacillement des flammes de bougies (anniversaires du jour)
   Opacité entre 0.70 et 1.0, timings premiers pour éviter la périodicité.
   ============================================================================= */

@keyframes auxi-candle-flicker {
  0%   { opacity: 1;    }
  7%   { opacity: 0.90; }
  14%  { opacity: 0.98; }
  23%  { opacity: 0.75; }
  31%  { opacity: 0.95; }
  40%  { opacity: 0.83; }
  47%  { opacity: 1;    }
  56%  { opacity: 0.72; }
  63%  { opacity: 0.92; }
  71%  { opacity: 0.86; }
  79%  { opacity: 0.97; }
  87%  { opacity: 0.78; }
  93%  { opacity: 0.94; }
  100% { opacity: 0.88; }
}

.menu-general-birthdays__flame {
  animation: auxi-candle-flicker 2.3s linear infinite;
  transform-origin: bottom center;
  will-change: opacity;
}

/* Respecter la préférence de l'utilisateur pour les animations réduites */
@media (prefers-reduced-motion: reduce) {
  .menu-general-birthdays__flame {
    animation: none;
  }
}


/* =============================================================================
   BOUTONS ACTION (+ / − / crayon) — taille, hit-target, focus cohérent
   Audit UX : orange browser focus ring remplacé par glow marine partout
   ============================================================================= */

/* ── Icônes légèrement agrandies dans tous les boutons action ─────────────── */
.btn .fa-plus-circle,
.btn .fa-plus,
.btn .fa-minus,
.btn .fa-minus-circle,
.btn .fa-edit,
.btn .fa-pencil,
.btn .fa-pencil-alt,
.btn .fa-pen,
.btn .fa-trash-alt,
.btn .fa-trash {
  font-size: 1.1em;
  vertical-align: -0.1em;
}

/* ── Boutons icône seule dans les card-header : hit-target + 20 % ─────────── */
.card-header .btn.update,
.card-header .btn.rounded,
.card-header a.btn,
.card-header button.btn {
  min-width:  2rem;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.52rem;
}

/* ── Focus ring marine — suppression du halo orange/jaune navigateur ─────── */

/* Tous les boutons Bootstrap + nos classes custom */
.btn:focus:not(:focus-visible),
.btn.update:focus:not(:focus-visible),
.bouton-primaire:focus:not(:focus-visible),
.bouton-secondaire:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.btn:focus-visible,
.btn.update:focus-visible,
.bouton-primaire:focus-visible,
.bouton-secondaire:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ds-input-focus-glow, rgba(30, 58, 138, 0.28)) !important;
}

/* Cas boutons btn-sm icon-only (card-header) */
.card-header .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2.5px var(--ds-input-focus-glow, rgba(30, 58, 138, 0.28)) !important;
}

/* ── Symétrie icône dispo : check-circle vert / times-circle rouge ─────────── */
.fa-check-circle.text-success { font-size: 1.05em; }
.fa-times-circle.text-danger  { font-size: 1.05em; }


/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM 2026 — AUXI-DV
   Palette #1e3a8a · Inter · Flat · SaaS Premium
   Toutes les règles de cette section écrasent les couches antérieures.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Variables Design System ────────────────────────────────────────────── */
:root {
  --ds-brand:            #1e3a8a;
  --ds-brand-hover:      #15306e;
  --ds-brand-light:      #f8faff;
  --ds-brand-border:     #BFDBFE;

  --ds-success:          #15803D;
  --ds-success-bg:       #DCFCE7;
  --ds-success-border:   #BBF7D0;
  --ds-success-text:     #166534;

  --ds-danger:           #A32D2D;
  --ds-danger-bg:        #FAE3E3;
  --ds-danger-border:    #E8B2B2;
  --ds-danger-hover:     #7f2222;

  --ds-warning:          #BA7517;
  --ds-warning-bg:       #FAEEDA;
  --ds-warning-border:   #E5C07A;
  --ds-warning-text:     #854F0B;

  --ds-info:             #185FA5;
  --ds-info-bg:          #DCE9F7;
  --ds-info-border:      #A3C4EA;

  --ds-white:            #FFFFFF;
  --ds-gray-50:          #FAFAF9;
  --ds-gray-100:         #F1F5F9;
  --ds-gray-200:         #E2E8F0;
  --ds-gray-300:         #E2E8F0;
  --ds-gray-400:         #B4B2A9;
  --ds-gray-500:         #94A3B8;
  --ds-gray-700:         #475569;
  --ds-gray-900:         #1A1A1A;

  --ds-r-sm:             8px;
  --ds-r-md:             12px;
  --ds-r-pill:           99px;

  --ds-border-color:     #E2E8F0;
  --ds-border:           1px solid #E2E8F0;
  --ds-border-input:     0.5px solid #E2E8F0;

  --ds-focus-ring:       0 0 0 2px #ffffff, 0 0 0 4px #1e3a8a;

  --ds-sp-sm:            12px;
  --ds-sp-md:            16px;
}

/* ── 1. Typographie — Inter 14px/400 corps, 500 labels ─────────────────────── */
body,
.modal-content, .modal-body,
.card, .card-body, .card-header,
.table, .table td, .table th,
.form-control, .btn, .dropdown-item, .nav-link {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
body {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--ds-gray-900) !important;
  font-weight: 400 !important;
}
h1, h2, h3, h4, h5, h6,
.card-title, .modal-title, th, label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 500 !important;
}

/* ── 2. TOPBAR — fond blanc, hauteur 52px, logo marine ─────────────────────── */
.navbar.navbar-dark.bg-dark,
.navbar.navbar-dark.bg-dark.navbar-expand-lg.auxi-navbar-compact {
  background:          var(--ds-white) !important;
  background-image:    none !important;
  backdrop-filter:     none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom:       var(--ds-border) !important;
  box-shadow:          none !important;
  min-height:          52px !important;
  max-height:          52px !important;
  padding-top:         0 !important;
  padding-bottom:      0 !important;
}

/* Textes nav-link sur fond blanc */
.navbar-dark .navbar-nav .nav-link,
.navbar.auxi-navbar-compact .navbar-nav .nav-link {
  color: var(--ds-gray-700) !important;
  border-radius: var(--ds-r-sm) !important;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar.auxi-navbar-compact .navbar-nav .nav-link:hover {
  color: var(--ds-brand) !important;
  background-color: var(--ds-brand-light) !important;
  box-shadow: none !important;
}

/* Logo */
span#logo.auxi-app-brand,
.auxi-app-brand {
  color:       var(--ds-brand) !important;
  font-weight: 500 !important;
  font-size:   1.1rem !important;
}
/* Shine one-shot : conserve la valeur de couleur après animation */
.auxi-app-brand.shine-once::after { animation: auxi-logo-shine 0.8s ease-out forwards; }

/* Infos fiche en-tête */
#infosEnTete,
.navbar.auxi-navbar-compact #infosEnTete:not(.u-hidden) {
  color:     var(--ds-gray-500) !important;
  font-size: 13px !important;
}

/* Bouton utilisateur — avatar marine clair */
.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white,
.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white:hover,
.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white:focus,
.navbar.auxi-navbar-compact .nav-item.dropdown.show > .dropdown-toggle.btn-white,
.navbar.auxi-navbar-compact .nav-item.dropdown.show > .dropdown-toggle.btn-white:hover,
.navbar.auxi-navbar-compact .nav-item.dropdown.show > .dropdown-toggle.btn-white:focus {
  background-image:    none !important;
  background-color:    var(--ds-brand-light) !important;
  color:               var(--ds-brand-hover) !important;
  border:              0.5px solid var(--ds-brand-border) !important;
  border-radius:       var(--ds-r-sm) !important;
  font-weight:         400 !important;
  box-shadow:          none !important;
  filter:              none !important;
  transform:           none !important;
}
.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white .fa,
.navbar.auxi-navbar-compact .nav-item.dropdown > .dropdown-toggle.btn-white i,
.navbar.auxi-navbar-compact .nav-item.dropdown.show > .dropdown-toggle.btn-white i {
  color: var(--ds-brand-hover) !important;
}

/* Hamburger mobile */
.navbar-dark .navbar-toggler {
  border-color: var(--ds-gray-300) !important;
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(30, 58, 138,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Navbar non connecté */
.auxi-nav-guest-status {
  color:        var(--ds-gray-500) !important;
  border-color: var(--ds-gray-300) !important;
}

/* ── 3. TABLES — thead premium brand, Sentence case ────────────────────── */
.table thead th,
.table .thead-light th,
.table .thead-dark th,
table.table > thead > tr > th {
  background-color:  #f8faff !important;
  color:             #1e293b !important;
  font-size:         12px !important;
  font-weight:       600 !important;
  text-transform:    none !important;
  letter-spacing:    0.01em !important;
  border-bottom:     1px solid #bfdbfe !important;
  border-color:      #bfdbfe !important;
}
.table tbody tr > td {
  border-color:    var(--ds-border-color) !important;
  padding:         8px 12px !important;
  vertical-align:  middle !important;
  font-size:       14px !important;
}
.table-striped tbody tr:nth-of-type(odd) > td,
.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--ds-white) !important;
}
.table-striped tbody tr:nth-of-type(even) > td,
.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--ds-gray-50) !important;
}
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover {
  background-color: var(--ds-brand-light) !important;
  cursor: pointer;
}
.table,
.table-bordered {
  border-color: var(--ds-border-color) !important;
  border: var(--ds-border) !important;
}

/* ── 4. CARTES — border 0.5px, radius 12px, no shadow ──────────────────────── */
.card {
  border:        var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow:    0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10) !important;
}
.card-header {
  background-color: var(--ds-gray-50) !important;
  border-bottom:    var(--ds-border) !important;
  padding:          var(--ds-sp-sm) var(--ds-sp-md) !important;
}
.card-body {
  padding: var(--ds-sp-md) var(--ds-sp-md) !important;
}
/* Titres de section — 18px non-uppercase, hiérarchie correcte vs contenu */
.card-header h4.card-title,
.card-header h3.card-title,
.card-header h2.card-title,
.card-header .card-title {
  font-size:      18px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color:          #1e293b !important;
  font-weight:    500 !important;
  margin-bottom:  0 !important;
}

/* ── 5. BOUTONS — radius max 8px, palette cohérente ────────────────────────── */
.btn,
[class*="bouton-"] {
  border-radius: var(--ds-r-sm) !important;
  font-size:     14px !important;
  font-weight:   400 !important;
  transition:    background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
}
/* Primary */
.btn-primary {
  background-color: var(--ds-brand) !important;
  border-color:     var(--ds-brand) !important;
  color:            var(--ds-white) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ds-brand-hover) !important;
  border-color:     var(--ds-brand-hover) !important;
}
/* Outline primary */
.btn-outline-primary {
  border:  0.5px solid var(--ds-brand) !important;
  color:   var(--ds-brand) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--ds-brand-light) !important;
  color:      var(--ds-brand-hover) !important;
}
/* Outline secondary */
.btn-outline-secondary {
  border:  0.5px solid var(--ds-gray-300) !important;
  color:   var(--ds-gray-700) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover {
  background-color: var(--ds-gray-100) !important;
  border-color:     var(--ds-gray-400) !important;
  color:            var(--ds-gray-900) !important;
}
/* Info */
.btn-info {
  background-color: var(--ds-info) !important;
  border-color:     var(--ds-info) !important;
  color:            var(--ds-white) !important;
}
.btn-info:hover { background-color: #15306e !important; }
.btn-outline-info {
  border: 0.5px solid var(--ds-info) !important;
  color:  var(--ds-info) !important;
  background: transparent !important;
}
/* Danger */
.btn-danger {
  background-color: var(--ds-danger) !important;
  border-color:     var(--ds-danger) !important;
}
.btn-outline-danger {
  border: 0.5px solid var(--ds-danger) !important;
  color:  var(--ds-danger) !important;
  background: transparent !important;
}
/* Bouton action crayon ghost 28px */
.card-header .btn.update,
.card-header a.btn {
  min-width:      2rem;
  min-height:     2rem;
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  background:     transparent !important;
  border:         0.5px solid var(--ds-gray-300) !important;
  color:          var(--ds-gray-700) !important;
  border-radius:  var(--ds-r-sm) !important;
  box-shadow:     none !important;
  padding:        0.25rem 0.45rem !important;
}
.card-header .btn.update:hover,
.card-header a.btn:hover {
  background-color: var(--ds-brand-light) !important;
  border-color:     var(--ds-brand-border) !important;
  color:            var(--ds-brand) !important;
}
/* Focus ring marine unifié */
.btn:focus-visible,
.btn.update:focus-visible {
  outline:    none !important;
  box-shadow: var(--ds-focus-ring) !important;
}
.btn:focus:not(:focus-visible),
.btn.update:focus:not(:focus-visible) {
  outline:    none !important;
  box-shadow: none !important;
}

/* ── 6. INPUTS & FORMULAIRES ────────────────────────────────────────────────── */
.form-control,
select.form-control {
  border:           var(--ds-border-input) !important;
  border-radius:    var(--ds-r-sm) !important;
  font-size:        14px !important;
  height:           40px !important;
  min-height:       40px !important;
  padding:          8px 12px !important;
  background-color: var(--ds-white) !important;
  color:            var(--ds-gray-900) !important;
  box-shadow:       none !important;
  transition:       border-color 0.12s ease, box-shadow 0.12s ease !important;
}
textarea.form-control {
  height:     auto !important;
  min-height: 88px !important;
  resize:     vertical;
}
.form-control:focus,
select.form-control:focus {
  border-color: var(--ds-brand) !important;
  box-shadow:   var(--ds-focus-ring) !important;
  outline:      none !important;
}
.form-control::placeholder { color: var(--ds-gray-400) !important; }

/* ── 7. ONGLETS — underline style ───────────────────────────────────────────── */
.nav-tabs {
  border-bottom: var(--ds-border) !important;
}
.nav-tabs .nav-link,
.nav-tabs .nav-item .nav-link {
  border:        none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color:         var(--ds-gray-500) !important;
  font-weight:   400 !important;
  padding:       8px 14px !important;
  background:    transparent !important;
  transition:    color 0.15s ease, border-color 0.15s ease !important;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-item .nav-link:hover {
  color:            var(--ds-brand) !important;
  background:       transparent !important;
  border-bottom:    2px solid transparent !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item .nav-link.active {
  color:         var(--ds-brand) !important;
  border-bottom: 2px solid var(--ds-brand) !important;
  background:    transparent !important;
  font-weight:   500 !important;
}

/* ── 8. MODALES ──────────────────────────────────────────────────────────────── */
.modal-dialog         { max-width: 480px !important; }
.modal-dialog.modal-lg{ max-width: 720px !important; }
.modal-dialog.modal-xl{ max-width: 960px !important; }

.modal-content {
  border:        var(--ds-border) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow:    0 8px 24px rgba(0,0,0,0.08) !important;
  overflow:      hidden;
}
.modal-header,
.modal-header.bg-info,
.modal-header.bg-dark,
.modal-header.bg-primary,
.modal-header.bg-secondary {
  background-color: var(--ds-white) !important;
  background-image: none !important;
  color:            var(--ds-gray-900) !important;
  border-bottom:    var(--ds-border) !important;
  padding:          16px 24px !important;
}
.modal-header *,
.modal-header.bg-info *,
.modal-header.bg-dark * {
  color: var(--ds-gray-900) !important;
}
.modal-title {
  font-size:   15px !important;
  font-weight: 500 !important;
  color:       var(--ds-gray-900) !important;
}
.modal-body {
  padding:   20px 24px !important;
  font-size: 14px !important;
  color:     var(--ds-gray-700) !important;
}
.modal-footer {
  border-top: var(--ds-border) !important;
  padding:    14px 24px !important;
  background: var(--ds-white) !important;
}
.modal-backdrop { background-color: rgba(0,0,0,0.4) !important; }
/* Fermer modal (×) */
.modal-header .close,
.modal-header button.close {
  color: var(--ds-gray-500) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.modal-header .close:hover { color: var(--ds-gray-900) !important; }

/* ── 9. BADGES & STATUTS ─────────────────────────────────────────────────────── */
.badge {
  border-radius: var(--ds-r-pill) !important;
  font-size:     12px !important;
  font-weight:   500 !important;
  padding:       2px 9px !important;
}
.badge-success {
  background-color: var(--ds-success-bg) !important;
  color:            var(--ds-success-text) !important;
  border:           0.5px solid var(--ds-success-border) !important;
}
.badge-danger {
  background-color: var(--ds-danger-bg) !important;
  color:            var(--ds-danger) !important;
  border:           0.5px solid var(--ds-danger-border) !important;
}
.badge-warning {
  background-color: var(--ds-warning-bg) !important;
  color:            var(--ds-warning-text) !important;
  border:           0.5px solid var(--ds-warning-border) !important;
}
.badge-info {
  background-color: var(--ds-info-bg) !important;
  color:            var(--ds-info) !important;
  border:           0.5px solid var(--ds-info-border) !important;
}
.badge-light {
  background-color: var(--ds-brand-light) !important;
  color:            var(--ds-brand-hover) !important;
  border:           0.5px solid var(--ds-brand-border) !important;
}
/* Couleurs sémantiques texte */
.text-success { color: var(--ds-success-text) !important; }
.text-danger  { color: var(--ds-danger) !important; }
.text-warning { color: var(--ds-warning-text) !important; } /* RGAA : texte ambre lisible (6.73) au lieu de --ds-warning (3.72) */
.text-info    { color: var(--ds-info) !important; }
/* Accessibilité : --ds-gray-500 (#94A3B8) ne contraste qu'à 2.34 (échec AA). On
   passe à un gris-bleu plus dense (#5B6878 → AA >=4.5 sur blanc et fonds clairs)
   tout en restant visiblement secondaire. (Pas de .text-muted sur fond sombre dans l'appli.) */
.text-muted   { color: #5B6878 !important; }
.text-secondary { color: var(--ds-gray-500) !important; }

/* ── 10. ALERTES ─────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--ds-r-sm) !important;
  border-width:  0.5px !important;
  padding:       10px 14px !important;
  font-size:     14px !important;
}
.alert-success {
  background-color: var(--ds-success-bg) !important;
  border-color:     var(--ds-success-border) !important;
  color:            var(--ds-success-text) !important;
}
.alert-danger, .alert-error {
  background-color: var(--ds-danger-bg) !important;
  border-color:     var(--ds-danger-border) !important;
  color:            var(--ds-danger) !important;
}
.alert-warning {
  background-color: var(--ds-warning-bg) !important;
  border-color:     var(--ds-warning-border) !important;
  color:            var(--ds-warning-text) !important;
}
.alert-info {
  background-color: var(--ds-info-bg) !important;
  border-color:     var(--ds-info-border) !important;
  color:            var(--ds-info) !important;
}

/* ── 11. PAGINATION ──────────────────────────────────────────────────────────── */
.bouton-pagination,
[id^="btn-pagination-"] {
  width:           36px !important;
  height:          36px !important;
  min-width:       36px !important;
  padding:         0 !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  border:          0.5px solid var(--ds-gray-300) !important;
  border-radius:   var(--ds-r-sm) !important;
  background:      transparent !important;
  color:           var(--ds-gray-700) !important;
  box-shadow:      none !important;
  transition:      background 0.12s ease, border-color 0.12s ease, color 0.12s ease !important;
}
.bouton-pagination:not(:disabled):hover,
[id^="btn-pagination-"]:not(:disabled):hover {
  background:   var(--ds-brand-light) !important;
  border-color: var(--ds-brand-border) !important;
  color:        var(--ds-brand) !important;
}
.bouton-pagination:disabled,
.bouton-pagination.disabled,
[id^="btn-pagination-"]:disabled {
  opacity:        0.4 !important;
  cursor:         not-allowed !important;
  pointer-events: none !important;
}

/* ── 12. BREADCRUMB ──────────────────────────────────────────────────────────── */



.auxi-breadcrumb-sep,
.fiche-rc-bc-sep               { color: var(--ds-gray-400) !important; margin: 0 4px !important; }

/* ── 13. DROPDOWNS ───────────────────────────────────────────────────────────── */
.dropdown-menu {
  border:        var(--ds-border) !important;
  border-radius: var(--ds-r-sm) !important;
  box-shadow:    0 4px 16px rgba(0,0,0,0.06) !important;
  padding:       4px 0 !important;
  font-size:     14px !important;
}
.dropdown-item {
  padding:    10px 14px !important;
  font-size:  13px !important;
  color:      var(--ds-gray-700) !important;
  transition: background 0.1s ease !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ds-brand-light) !important;
  color:            var(--ds-brand-hover) !important;
}
.dropdown-divider { border-top: var(--ds-border) !important; margin: 4px 0 !important; }

/* ── 14. MENU GÉNÉRAL — cartes tuiles ───────────────────────────────────────── */


/* Icône des tuiles */
.menu-tile-icon { color: var(--ds-brand) !important; }
/* Widget anniversaires header */
.menu-general-birthdays {
  background-color: var(--ds-brand-light) !important;
  border:           0.5px solid var(--ds-brand-border) !important;
  border-radius:    var(--ds-r-sm) !important;
}
.menu-general-birthdays__section-label {
  color:       var(--ds-brand-hover) !important;
  font-size:   13px !important;
  font-weight: 500 !important;
}

/* ── 15. STATUTS mission (pills) ─────────────────────────────────────────────── */
td span.text-success,
td .text-success {
  display:          inline-block;
  background-color: var(--ds-success-bg) !important;
  color:            var(--ds-success-text) !important;
  border:           0.5px solid var(--ds-success-border) !important;
  border-radius:    var(--ds-r-pill) !important;
  padding:          1px 8px !important;
  font-size:        12px !important;
}
td span.text-danger,
td .text-danger {
  display:          inline-block;
  background-color: var(--ds-danger-bg) !important;
  color:            var(--ds-danger) !important;
  border:           0.5px solid var(--ds-danger-border) !important;
  border-radius:    var(--ds-r-pill) !important;
  padding:          1px 8px !important;
  font-size:        12px !important;
}

/* ── 16. TAGS CARACTÉRISTIQUES ───────────────────────────────────────────────── */
.badge.badge-light.border,
span.badge.badge-light {
  background-color: var(--ds-brand-light) !important;
  color:            var(--ds-brand-hover) !important;
  border:           0.5px solid var(--ds-brand-border) !important;
  border-radius:    var(--ds-r-pill) !important;
  font-size:        12px !important;
  padding:          2px 10px !important;
}

/* ── 17. BARRE HISTORIQUE / COMPOSER ─────────────────────────────────────────── */
#auxi-yeastar-bar,
.ys-widget-bar {
  background:  var(--ds-white) !important;
  border-top:  var(--ds-border) !important;
  box-shadow:  none !important;
}

/* ── 18. OBSERVATIONS — bloc monospace ───────────────────────────────────────── */
.card-body pre,
.card-body .pre-like {
  background:    var(--ds-gray-100) !important;
  border:        none !important;
  border-left:   3px solid var(--ds-gray-400) !important;
  border-radius: 0 !important;
  padding:       12px 16px !important;
  font-family:   'Consolas', 'Monaco', ui-monospace, monospace !important;
  font-size:     13px !important;
  color:         var(--ds-gray-900) !important;
  line-height:   1.5 !important;
}

/* ── 19. BARRE DE PROGRESSION AJAX (mis à jour palette) ──────────────────────── */
#auxi-progress-bar__fill {
  background: var(--ds-brand) !important;
  box-shadow: 0 0 8px rgba(30, 58, 138, 0.35) !important;
}

/* ── 20. SCROLLBAR (subtile) ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ds-gray-100); }
::-webkit-scrollbar-thumb {
  background:    var(--ds-gray-300);
  border-radius: var(--ds-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--ds-gray-400); }

/* ── 21. bouton-primaire : fond brand (complément) ──────────────────────────── */
a.bouton-primaire, button.bouton-primaire,
.btn.bouton-primaire {
  background-color: var(--ds-brand) !important;
  border-color:     var(--ds-brand) !important;
  color:            var(--ds-white) !important;
}
a.bouton-primaire:hover, button.bouton-primaire:hover,
.btn.bouton-primaire:hover {
  background-color: var(--ds-brand-hover) !important;
  border-color:     var(--ds-brand-hover) !important;
}

/* ── Pagination : override final — vient après toutes les règles bouton-primaire
   Spécificité (0,2,1) même niveau mais position finale = gagne sur ds-brand */
button.bouton-primaire.bouton-pagination:not(.disabled),
a.bouton-primaire.bouton-pagination:not(.disabled),
.btn.bouton-primaire.bouton-pagination:not(.disabled) {
  background-color: transparent !important;
  background-image: none !important;
  border:           none !important;
  border-radius:    6px !important;
  box-shadow:       none !important;
  color:            #64748b !important;
  transform:        none !important;
  filter:           none !important;
  padding:          0.3rem 0.75rem !important;
  font-size:        0.82rem !important;
  font-weight:      500 !important;
  display:          inline-flex !important;
  align-items:      center !important;
  gap:              0.3rem;
}

button.bouton-primaire.bouton-pagination:not(.disabled):hover,
a.bouton-primaire.bouton-pagination:not(.disabled):hover,
.btn.bouton-primaire.bouton-pagination:not(.disabled):hover {
  background-color: #f1f5f9 !important;
  color:            var(--ds-brand) !important;
  border:           none !important;
  box-shadow:       none !important;
}

button.bouton-primaire.bouton-pagination:not(.disabled) i,
a.bouton-primaire.bouton-pagination:not(.disabled) i,
.bouton-pagination:not(.disabled) i {
  color: #64748b !important;
}

button.bouton-primaire.bouton-pagination:not(.disabled):hover i,
a.bouton-primaire.bouton-pagination:not(.disabled):hover i,
.bouton-pagination:not(.disabled):hover i {
  color: var(--ds-brand) !important;
}

/* ── 22. Neutralisation text-white enfants sur modal-header blanchi ──────────── */
.modal-header .text-white,
.modal-header.bg-info .text-white,
.modal-header.bg-dark .text-white {
  color: var(--ds-gray-900) !important;
}

/* ── 23. SMS statut positif (bandeau vert) ───────────────────────────────────── */
.sms-statut-ok,
[class*="sms-ok"],
.alert-sms-success {
  background:    var(--ds-success-bg) !important;
  border:        0.5px solid var(--ds-success-border) !important;
  color:         var(--ds-success-text) !important;
  border-radius: var(--ds-r-sm) !important;
  padding:       10px 14px !important;
}

/* ── 24. Input-group : cohérence hauteur 40px ────────────────────────────────── */
.input-group > .form-control,
.input-group > .form-control:focus {
  height:     40px !important;
  min-height: 40px !important;
}
.input-group .btn,
.input-group .input-group-text {
  height:     40px !important;
  min-height: 40px !important;
  border:     var(--ds-border-input) !important;
}

/* ── 25. Bouton "Radier" : ghost danger ──────────────────────────────────────── */
#radierPersonne, #btnRadiation,
[id*="radier"], [id*="Radier"] {
  background:    transparent !important;
  border:        0.5px solid var(--ds-danger) !important;
  color:         var(--ds-danger) !important;
  border-radius: var(--ds-r-sm) !important;
  font-weight:   400 !important;
}
[id*="radier"]:hover, [id*="Radier"]:hover {
  background-color: var(--ds-danger-bg) !important;
}

/* ── 26. Theming bouton-outline-white (navbar / cartes) ──────────────────────── */
.btn-outline-white,
.btn.btn-outline-white,
button.btn-outline-white,
a.btn-outline-white {
  background:    #ffffff !important;
  border:        1px solid #bfdbfe !important;
  color:         #1e3a8a !important;
  border-radius: var(--ds-r-sm) !important;
  font-weight:   500 !important;
  box-shadow:    none !important;
}
.btn-outline-white:hover,
.btn.btn-outline-white:hover,
button.btn-outline-white:hover {
  background-color: #f8faff !important;
  border-color:     #1e3a8a !important;
  color:            #1e3a8a !important;
}

/* ── 27. Suppression box-shadow décoratif partout (hors focus-ring) ──────────── */
.card-header,
.card-body,
.table-responsive,
.dropdown-menu,
.navbar,
.btn:not(:focus-visible),
.form-control:not(:focus) {
  box-shadow: none !important;
}

/* ── 28. Accessibilité : indicateur de focus clavier (a, button, [tabindex]) ─── */
a:focus-visible,
[tabindex]:focus-visible,
select:focus-visible {
  outline:    none !important;
  box-shadow: var(--ds-focus-ring) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DS2026 — Avatar initiales + Pill-toggle radios
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fix text-white dans topbar blanchi ─────────────────────────────────────── */
#infosEnTete .text-white,
.navbar.auxi-navbar-compact #infosEnTete .text-white,
.navbar #infosEnTete span.text-white {
  color: var(--ds-gray-700) !important;
}

/* ── Avatar initiales — fiche personne ──────────────────────────────────────── */
.auxi-persona-header {
  display:     none !important;
}
.auxi-persona-avatar {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      var(--ds-brand-light);
  color:           var(--ds-brand);
  font-family:     'Inter', sans-serif;
  font-size:       15px;
  font-weight:     500;
  letter-spacing:  0.03em;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  user-select:     none;
}
.auxi-persona-meta       { display: flex; flex-direction: column; gap: 1px; }
.auxi-persona-name       { font-size: 15px; font-weight: 500; color: var(--ds-gray-900); line-height: 1.3; }
.auxi-persona-role       { font-size: 12px; color: var(--ds-gray-500); }

/* ── Pill-toggle radios — toutes pages ──────────────────────────────────────── */

/* 1. Cacher le bouton radio natif tout en le gardant focusable */
input[type="radio"].form-check-input {
  position:     absolute;
  width:        1px;
  height:       1px;
  margin:       -1px;
  padding:      0;
  overflow:     hidden;
  clip:         rect(0, 0, 0, 0);
  white-space:  nowrap;
  border:       0;
  opacity:      0;
}

/* Conteneur inline-flex pour espacer les pills */
.form-check.form-check-inline {
  display:     inline-flex;
  align-items: center;
  padding-left: 0;
  margin-right: 6px;
}

/* 2. Label → pill */
input[type="radio"].form-check-input + .form-check-label {
  display:        inline-block;
  padding:        5px 14px;
  border:         0.5px solid var(--ds-gray-300);
  border-radius:  var(--ds-r-pill);
  color:          var(--ds-gray-700);
  background:     var(--ds-white);
  cursor:         pointer;
  font-size:      13px;
  font-weight:    400;
  line-height:    1.5;
  user-select:    none;
  margin-left:    0;
  transition:     border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* 3. Hover */
input[type="radio"].form-check-input + .form-check-label:hover {
  border-color:     var(--ds-brand-border);
  background-color: var(--ds-brand-light);
}

/* 4. Sélectionné */
input[type="radio"].form-check-input:checked + .form-check-label {
  background-color: var(--ds-brand-light);
  border-color:     var(--ds-brand);
  color:            var(--ds-brand-hover);
  font-weight:      500;
}

/* 5. Focus clavier → ring marine sur le label */
input[type="radio"].form-check-input:focus-visible + .form-check-label {
  box-shadow:   var(--ds-focus-ring);
  border-color: var(--ds-brand);
  outline:      none;
}

/* 6. Désactivé */
input[type="radio"].form-check-input:disabled + .form-check-label {
  opacity:       0.45;
  cursor:        not-allowed;
  border-color:  var(--ds-gray-300);
  background:    var(--ds-gray-50);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DS2026 — Composants restants : Recherche, Stepper, Pills dispo,
             Greeting, Badge manquant, Radier
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Barre de recherche 48px ─────────────────────────────────────────────── */
.auxi-search-input-group .form-control,
#champ-recherche {
  height:     48px !important;
  min-height: 48px !important;
  font-size:  15px !important;
  border-radius: 10px 0 0 10px !important;
  border-right: none !important;
}
.auxi-btn-submit-search {
  width:            48px !important;
  height:           48px !important;
  min-width:        48px !important;
  background-color: var(--ds-brand) !important;
  border-color:     var(--ds-brand) !important;
  color:            var(--ds-white) !important;
  border-radius:    0 10px 10px 0 !important;
  display:          inline-flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  font-size:        16px !important;
}
.auxi-btn-submit-search:hover { background-color: var(--ds-brand-hover) !important; }
.auxi-btn-submit-search:focus-visible {
  outline:    none !important;
  box-shadow: var(--ds-focus-ring) !important;
}
/* Bouton effacer */
#effacer-recherche,
[id^="effacer-"] {
  height:           48px !important;
  min-height:       48px !important;
  border-color:     var(--ds-border-color) !important;
  background-color: var(--ds-white) !important;
  color:            var(--ds-gray-400) !important;
}
#effacer-recherche:hover { color: var(--ds-gray-700) !important; }

/* ── 2. Stepper linéaire ────────────────────────────────────────────────────── */
.auxi-stepper {
  width:         100%;
  padding:       4px 0 8px;
}
.auxi-stepper__track {
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  margin:          0 auto;
  max-width:       340px;
}
.auxi-stepper__step {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  flex-shrink:    0;
}
.auxi-stepper__dot {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      var(--ds-gray-200);
  color:           var(--ds-gray-500);
  font-size:       12px;
  font-weight:     500;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          2px solid var(--ds-gray-300);
  transition:      background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.auxi-stepper__step--active .auxi-stepper__dot {
  background:   var(--ds-brand) !important;
  border-color: var(--ds-brand) !important;
  color:        var(--ds-white) !important;
}
.auxi-stepper__step--done .auxi-stepper__dot {
  background:   var(--ds-brand-border) !important;
  border-color: var(--ds-brand) !important;
  color:        var(--ds-brand-hover) !important;
}
.auxi-stepper__label {
  font-size:   12px;
  color:       var(--ds-gray-500);
  white-space: nowrap;
  line-height: 1.3;
}
.auxi-stepper__step--active .auxi-stepper__label {
  color:       var(--ds-brand) !important;
  font-weight: 500;
}
.auxi-stepper__step--done .auxi-stepper__label {
  color: var(--ds-brand);
}
.auxi-stepper__bar {
  flex:          1;
  height:        2px;
  background:    var(--ds-gray-200);
  margin:        12px 10px 0;
  min-width:     50px;
  border-radius: 2px;
}
.auxi-stepper__bar--done { background: var(--ds-brand) !important; }

/* ── 3. Pills disponibilités ─────────────────────────────────────────────────── */
.auxi-dispo-pill {
  display:       inline-block;
  padding:       2px 10px;
  border-radius: var(--ds-r-pill);
  font-size:     12px;
  font-weight:   500;
  line-height:   1.5;
  white-space:   nowrap;
}
.auxi-dispo-pill--oui {
  background: var(--ds-success-bg);
  color:      var(--ds-success-text);
  border:     0.5px solid var(--ds-success-border);
}
.auxi-dispo-pill--non {
  background: var(--ds-danger-bg);
  color:      var(--ds-danger);
  border:     0.5px solid var(--ds-danger-border);
}

/* ── 4. Greeting contextuel menu général ─────────────────────────────────────── */



/* ── 5. Badge "Information manquante" — pill amber ───────────────────────────── */
.auxi-badge-manquant {
  display:       inline-block;
  background:    var(--ds-warning-bg);
  color:         var(--ds-warning-text);
  border:        0.5px solid var(--ds-warning-border);
  border-radius: var(--ds-r-pill);
  font-size: 12px;
  font-weight:   400;
  padding:       2px 10px;
  line-height:   1.5;
}

/* ── 6. Bouton Radier — ghost danger affiné ──────────────────────────────────── */
a#radier,
button#radier,
#radier.btn {
  background:    transparent !important;
  border:        0.5px solid var(--ds-danger) !important;
  color:         var(--ds-danger) !important;
  border-radius: var(--ds-r-sm) !important;
  font-weight:   400 !important;
}
a#radier:hover, #radier.btn:hover {
  background-color: var(--ds-danger-bg) !important;
}
/* Déradier / Anonymiser — info ghost */
a#deradier, a#anonymiser,
#deradier.btn, #anonymiser.btn {
  background-color: transparent !important;
  background-image: none !important;
  border:           0.5px solid var(--ds-info) !important;
  color:            var(--ds-info) !important;
  border-radius:    var(--ds-r-sm) !important;
}
a#deradier:hover, a#anonymiser:hover {
  background-color: var(--ds-info-bg) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIONS DS2026 — Blocs 1→4
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── BLOC 1a : Breadcrumb — supprimer l'encadré pill ───────────────────────── */
main.auxi-data-workspace .auxi-breadcrumb-bar,
.auxi-breadcrumb-bar,
.auxi-breadcrumb-bar.active,
main [class*="breadcrumb-bar"] {
  background:    none !important;
  border:        none !important;
  border-radius: 0   !important;
  box-shadow:    none !important;
  padding:       0   !important;
}
/* Liens breadcrumb — bleu marine, lisible */
.auxi-breadcrumb-link,
.auxi-breadcrumb-link:visited,
main .entete a[aria-label*="Fil d'ariane"],
.fiche-creation-bc-link,
[class*="breadcrumb"] a {
  color:           var(--ds-brand) !important;
  text-decoration: none !important;
  font-size:       0.875rem !important;
  font-weight:     500 !important;
}
[class*="breadcrumb"] a:hover { text-decoration: underline !important; }
/* Séparateur et page courante */
.auxi-breadcrumb-sep,
[class*="breadcrumb"] .text-secondary { color: #B4B2A9 !important; margin: 0 4px; font-size: 0.875rem; }
[class*="breadcrumb"] span[aria-hidden="true"] { color: #B4B2A9 !important; font-size: 0.875rem; }

/* ── BLOC 1b : Bouton loupe — carré 48×48px radius 8px ─────────────────────── */
.auxi-btn-submit-search,
#envoi-recherche,
button.auxi-btn-submit-search {
  width:         48px !important;
  height:        48px !important;
  min-width:     48px !important;
  border-radius: 8px !important; /* PAS 99px */
  background-color: var(--ds-brand) !important;
  border-color:  var(--ds-brand) !important;
  color:         #fff !important;
  flex-shrink:   0 !important;
}
.auxi-btn-submit-search:hover { background-color: var(--ds-brand-hover) !important; }

/* ── BLOC 1c : Inputs dans les modales — restaurer border 0.5px ─────────────── */
.modal .form-control,
.modal input[type="text"],
.modal input[type="date"],
.modal input[type="number"],
.modal input[type="email"],
.modal input[type="tel"],
.modal select,
.modal textarea {
  border:           0.5px solid #E2E8F0 !important;
  border-radius:    8px !important;
  height:           40px !important;
  padding:          0 12px !important;
  font-size:        14px !important;
  background-color: #fff !important;
  box-shadow:       none !important;
}
.modal .form-control:focus,
.modal input:focus,
.modal select:focus {
  border-color: var(--ds-brand) !important;
  box-shadow:   0 0 0 3px rgba(30, 58, 138,0.15) !important;
  outline:      none !important;
}
.modal textarea { height: auto !important; padding: 10px 12px !important; }

/* ── BLOC 2a/2b : thead dark — forcer #F1F5F9 partout incl. modales ─────────── */
table thead tr,
.modal table thead tr,
[role="dialog"] table thead tr,
.table thead tr,
.modal .table thead tr {
  background-color: #f8faff !important;
}
table thead th,
.modal table thead th,
[role="dialog"] table thead th,
.table thead th,
.modal .table thead th {
  background-color: #f8faff !important;
  color:            #1e293b !important;
  font-size:        12px !important;
  font-weight:      600 !important;
  text-transform:   none !important;
  letter-spacing:   0.01em !important;
  border-bottom:    1px solid #bfdbfe !important;
}

/* ── BLOC 3a : Overlay modal — rgba(0,0,0,0.4) strict ──────────────────────── */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade.show {
  background-color: rgba(0, 0, 0, 0.4) !important;
  opacity:          1 !important;
  z-index:         1050 !important;
}


.modal {
  z-index: 1055 !important;
}

.modal-dialog {
  z-index: 1056 !important;
}
/* ── BLOC 3b : Typographie modales ─────────────────────────────────────────── */
.modal-title {
  font-size:   15px !important;
  font-weight: 500 !important;
  color:       var(--ds-gray-900) !important;
  text-align:  left !important;
  margin-bottom: 16px !important;
}
.modal .form-label,
.modal label {
  font-size:     13px !important;
  color:         var(--ds-gray-600) !important;
  font-weight:   400 !important;
  margin-bottom: 4px !important;
}
.modal .btn-primary {
  height: 40px; padding: 0 20px;
  border: none; border-radius: 8px;
  background: var(--ds-brand) !important;
  color: #fff !important; font-size: 14px;
}
.modal .btn-info {
  height: 40px; padding: 0 20px;
  border: none; border-radius: 8px;
  background: var(--ds-info) !important;
  color: #fff !important; font-size: 14px;
}
.modal .btn-danger {
  height: 40px; padding: 0 20px;
  border: none; border-radius: 8px;
  background: var(--ds-danger) !important;
  color: #fff !important; font-size: 14px;
}

/* ── BLOC 4a : Inputs — radius 8px partout (hors pills) ────────────────────── */
input[type="text"]:not(.form-check-input),
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  border-radius: 8px !important;
}
/* Redonner radius différent aux groupes input-group (bords externes seulement) */
.input-group > .form-control:first-child,
.input-group > input:first-child { border-radius: 8px 0 0 8px !important; }
.input-group > .form-control:last-child,
.input-group > input:last-child { border-radius: 0 8px 8px 0 !important; }

/* ── BLOC 4c : Onglets — un seul signal (underline uniquement) ──────────────── */
.nav-tabs .nav-link {
  border:     none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color:      var(--ds-gray-500) !important;
  padding:    8px 14px !important;
  font-size:  14px !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link[aria-selected="true"] {
  border:        none !important;
  border-bottom: 2px solid var(--ds-brand) !important;
  color:         var(--ds-brand) !important;
  font-weight:   500 !important;
  background:    transparent !important;
  box-shadow:    none !important;
}
.nav-tabs .nav-link:hover:not(.active) {
  border-bottom-color: var(--ds-brand-border) !important;
  color:               var(--ds-brand) !important;
}

/* ── BLOC 4d : Caractéristiques — pills flex ────────────────────────────────── */
.tableau-resultat-caracteristiques {
  display: block !important;
  overflow: visible !important;
}
 
/* Garder le tableau comme tableau */
.tableau-resultat-caracteristiques table {
  border: none !important;
  background: transparent !important;
  display: table !important; /* Au lieu de display: block */
}
 
/* Garder l'en-tête avec les boutons de modification */
.tableau-resultat-caracteristiques thead tr:first-child {
  display: table-row !important; /* Au lieu de display: flex */
  gap: 8px !important;
  padding-bottom: 8px !important;
  background: transparent !important;
  border: none !important;
}
 
.tableau-resultat-caracteristiques thead tr:first-child th {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: inherit !important;
}
 
/* AFFICHER la deuxième ligne d'en-tête (titres des colonnes) */
.tableau-resultat-caracteristiques thead tr:nth-child(2) {
  display: table-row !important; /* Au lieu de display: none */
}
 
/* Garder le corps du tableau comme tableau */
.tableau-resultat-caracteristiques tbody {
  display: table-row-group !important; /* Au lieu de display: flex */
  padding: 8px 0 !important;
  background: transparent !important;
}
 
/* Garder les lignes comme lignes de tableau */
.tableau-resultat-caracteristiques tbody tr {
  display: table-row !important; /* Au lieu de display: contents */
}
 
/* Moderniser les cellules SANS les transformer en pills */
.tableau-resultat-caracteristiques tbody td {
  display: table-cell !important; /* Au lieu de display: inline-block */
  background: #f8faff !important; /* Garder la couleur moderne */
  color: #1e293b !important; /* Noir professionnel */
  font-size: 14px !important; /* Légèrement plus grand pour lisibilité */
  padding: 8px 12px !important; /* Plus d'espace */
  border-radius: 4px !important; /* Coins légèrement arrondis (pas 99px) */
  border: 1px solid #BFDBFE !important; /* Bordure plus visible */
  white-space: nowrap !important;
  vertical-align: middle !important;
}
 
/* Optionnel : Ajouter un style pour les cellules vides */
.tableau-resultat-caracteristiques tbody td:empty {
  background: transparent !important;
  border: none !important;
}

/* ── BLOC 4e : Bouton utilisateur topbar — styles avatar ────────────────────── */
#menuUtilisateur.auxi-user-btn,
.auxi-user-btn {
  display:     inline-flex !important;
  align-items: center !important;
  gap:         8px !important;
  border:      1px solid #BFDBFE !important;
  border-radius: 8px !important;
  padding:     5px 12px !important;
  background:  transparent !important;
  color:       var(--ds-brand) !important;
  font-weight: 500 !important;
  font-size:   13px !important;
}
.auxi-user-btn:hover { background: #f8faff !important; }
.auxi-user-avatar {
  width:           28px !important;
  height:          28px !important;
  border-radius:   50% !important;
  background:      #f8faff !important;
  color:           var(--ds-brand) !important;
  font-size: 12px !important;
  font-weight:     500 !important;
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  flex-shrink:     0 !important;
  letter-spacing:  0.03em !important;
  user-select:     none !important;
}
.auxi-user-name {
  font-size:   13px !important;
  color:       var(--ds-brand) !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CORRECTIONS C1/C2/C3 — renforts
   ═══════════════════════════════════════════════════════════════════════════ */

/* C1 — thead-dark : forcer beige même si Bootstrap gagne */
.thead-dark,
.thead-dark > tr,
table .thead-dark,
table .thead-dark > tr {
  background-color: #F1F5F9 !important;
  color:            #475569 !important;
}
.thead-dark th,
.thead-dark > tr > th,
table .thead-dark th {
  background-color: #F1F5F9 !important;
  color:            #475569 !important;
  border-color:     #E2E8F0 !important;
}

/* C2 — inputs radius 8px strict — override Bootstrap .rounded-left / .rounded-right-0 */
.input-group .form-control,
.input-group input.form-control {
  border-radius: 0 !important; /* géré par les boutons du groupe */
}
.input-group > .form-control:first-child,
.input-group > input:first-child {
  border-radius: 8px 0 0 8px !important;
}
.input-group > .form-control:last-child,
.input-group > input:last-child {
  border-radius: 0 8px 8px 0 !important;
}
/* Inputs seuls (hors input-group) */
input.form-control:not(.form-check-input) {
  border-radius: 8px !important;
}
/* S'assurer que rounded-left / rounded-right-0 ne sur-écrivent pas dans les inputs */
input.form-control.rounded-left { border-radius: 8px 0 0 8px !important; }
input.form-control.rounded-right { border-radius: 0 8px 8px 0 !important; }
input.form-control.rounded       { border-radius: 8px !important; }

/* C3 — astérisque obligatoire inline pour form-creation-fiche ::after */
#form-creation-fiche .form-group:has([required]) > label.form-label::after,
body:has(#form-creation-fiche) #form-creation-fiche .form-group:has([required]) > label.form-label::after {
  content:     "*" !important;
  color:       var(--ds-danger) !important;
  font-size:   12px !important;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
  display:     inline-flex !important;
  align-self:  center !important;
  margin:      0 !important;
}

/* ── Breadcrumb page courante (sans lien) ────────────────────────────────── */


/* ── Breadcrumb hors auxi-data-workspace (ex. page d'accueil) ──────────── */



/* ══════════════════════════════════════════════════════════════════════════
   MODALES DE CONFIRMATION — overlay noir semi-transparent + card blanche
   S'applique à toutes les modales de confirmation de l'application.
   ══════════════════════════════════════════════════════════════════════════ */

/* Backdrop : noir standard semi-transparent (renfort absolu) */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.fade.show {
  background-color: rgba(0, 0, 0, 0.45) !important;
  opacity:          1 !important;
}

/* Card de la modale */
.modal-content {
  background:    #ffffff !important;
  border-radius: 12px !important;
  border:        0.5px solid #E2E8F0 !important;
  box-shadow:    0 4px 32px rgba(0, 0, 0, 0.12) !important;
  padding:       0 !important;
}

/* Entête colorée : annuler bg-info / bg-warning / bg-danger sur modal-header */
.modal-header.bg-info,
.modal-header.bg-warning,
.modal-header.bg-danger,
.modal-header.bg-success,
.modal-header[style*="background-color"] {
  background-color: #F1F5F9 !important;
  border-bottom:    0.5px solid #E2E8F0 !important;
  border-radius:    12px 12px 0 0 !important;
}

/* Texte entête : toujours sombre quelle que soit la couleur passée */
.modal-header.bg-info *,
.modal-header.bg-warning *,
.modal-header.bg-danger *,
.modal-header.bg-success *,
.modal-header[style*="background-color"] * {
  color: #475569 !important;
}

/* Message corps de modale */
.modal-body p,
.modal-body > p:first-child {
  font-size:     14px !important;
  color:         #334155 !important;
  line-height:   1.6 !important;
}

/* Boutons de confirmation */
.modal-footer .btn-outline-white,
.modal-footer .btn-white {
  height:        40px !important;
  padding:       0 20px !important;
  border:        0.5px solid #E2E8F0 !important;
  border-radius: 8px !important;
  background:    transparent !important;
  color:         #475569 !important;
  font-size:     14px !important;
}
.modal-footer .btn-primary,
.modal-footer .btn-success,
.modal-footer #validerCheck,
.modal-footer [id^="valider"],
.modal-footer [id^="continuer"] {
  height:        40px !important;
  padding:       0 20px !important;
  border:        none !important;
  border-radius: 8px !important;
  background:    #1e3a8a !important;
  color:         #ffffff !important;
  font-size:     14px !important;
}
.modal-footer .btn-danger {
  height:        40px !important;
  padding:       0 20px !important;
  border:        none !important;
  border-radius: 8px !important;
  background:    #7f2222 !important;
  color:         #ffffff !important;
  font-size:     14px !important;
}

/* Thead de TOUS les tableaux dans auxi-data-workspace — renfort final */
main.auxi-data-workspace thead th,
main.auxi-data-workspace .table thead th,
main.auxi-data-workspace .table-striped thead th,
main.auxi-data-workspace table thead tr th {
  background-color: #f8faff !important;
  color:            #475569 !important;
  border-color:     #E2E8F0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDRE 1 — BREADCRUMB : couleurs, séparateurs, comportement lien / span
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Lien "Accueil" cliquable (toutes les pages sauf accueil) ── */
.auxi-breadcrumb-bar a,
.auxi-breadcrumb-bar a[href="/"],
.auxi-breadcrumb-bar .breadcrumb-link,
.auxi-breadcrumb-bar .auxi-breadcrumb-link,
.auxi-breadcrumb-bar .fiche-creation-bc-link,
.auxi-breadcrumb-bar .fiche-rc-bc-link,
.breadcrumb-link,
a.breadcrumb-link {
  color:           #1e3a8a !important;
  font-size:       0.875rem !important;
  text-decoration: none !important;
  font-weight:     500 !important;
}
.auxi-breadcrumb-bar a:hover,
.auxi-breadcrumb-bar .breadcrumb-link:hover,
a.breadcrumb-link:hover {
  text-decoration: underline !important;
  color:           #1e3a8a !important;
}

/* ── Séparateur "/" ── */
.breadcrumb-separator,
.auxi-breadcrumb-sep,
.auxi-breadcrumb-bar .text-secondary,
.auxi-breadcrumb-bar .text-white,
.auxi-breadcrumb-bar span[aria-hidden="true"] {
  color:  #B4B2A9 !important;
  margin: 0 6px !important;
  font-size: 13px !important;
}

/* ── Page courante : non cliquable, gris ── */
.breadcrumb-current,
.auxi-breadcrumb-bar > span:last-child:not([aria-hidden]) {
  color:       #94A3B8 !important;
  font-size:   13px !important;
  font-weight: 400 !important;
  cursor:      default !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDRE 2 — MODALES : overlay noir standard + card blanche + en-têtes neutres
   ══════════════════════════════════════════════════════════════════════════ */

/* Overlay (backdrop Bootstrap) — règle absolue */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.show,
.modal-backdrop.fade.show {
  background-color: rgba(0, 0, 0, 0.45) !important;
  opacity:          1 !important;
}

/* Card blanche */
.modal-content {
  background:    #ffffff !important;
  border-radius: 12px !important;
  border:        0.5px solid #E2E8F0 !important;
  box-shadow:    0 4px 32px rgba(0, 0, 0, 0.10) !important;
  padding:       0 !important;
}

/* En-têtes colorées : supprimer bg-info / bg-warning / bg-danger / bg-success */
.modal-header,
.modal-header.bg-info,
.modal-header.bg-warning,
.modal-header.bg-danger,
.modal-header.bg-success,
.modal-header.text-white,
.modal-header[style*="background"] {
  background-color: #F1F5F9 !important;
  border-bottom:    0.5px solid #E2E8F0 !important;
  border-radius:    12px 12px 0 0 !important;
  padding:          16px 20px !important;
}

/* Texte des en-têtes colorées → toujours sombre */
.modal-header *,
.modal-header.bg-info *,
.modal-header.bg-warning *,
.modal-header.bg-danger *,
.modal-header.bg-success *,
.modal-header.text-white *,
.modal-header[style*="background"] * {
  color: #475569 !important;
}

/* Corps de modale */
.modal-body p {
  font-size:   14px !important;
  color:       #334155 !important;
  line-height: 1.6 !important;
}

/* Bouton Annuler / Fermer */
.modal-footer .btn-secondary,
.modal-footer .btn-outline-secondary,
.modal-footer .btn-light,
.modal-footer .btn-outline-white,
.modal-footer .btn-white {
  height:        40px !important;
  padding:       0 20px !important;
  border:        0.5px solid #E2E8F0 !important;
  border-radius: 8px !important;
  background:    transparent !important;
  color:         #475569 !important;
  font-size:     14px !important;
  box-shadow:    none !important;
}

/* Bouton Confirmer / Valider / Continuer */
.modal-footer .btn-primary,
.modal-footer .btn-success,
.modal-footer [id^="valider"],
.modal-footer [id^="continuer"],
.modal-footer #validerCheck {
  height:        40px !important;
  padding:       0 20px !important;
  border:        none !important;
  border-radius: 8px !important;
  background:    #1e3a8a !important;
  color:         #ffffff !important;
  font-size:     14px !important;
}

/* Bouton destructeur (Supprimer, Radier…) */
.modal-footer .btn-danger {
  height:        40px !important;
  padding:       0 20px !important;
  border:        none !important;
  border-radius: 8px !important;
  background:    var(--ds-danger) !important;
  color:         #ffffff !important;
  font-size:     14px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDRE 3 — THEAD GLOBAL : beige #F1F5F9 sur TOUS les tableaux sans exception
   ══════════════════════════════════════════════════════════════════════════ */

/* Règle universelle — couvre tout contexte, toute page, toute modale */
thead,
thead tr,
table thead,
table > thead,
.table thead,
.modal-body table thead,
main thead {
  background-color: #f8faff !important;
}

thead th,
thead > tr > th,
table thead th,
table > thead > tr > th,
.table thead th,
.modal-body table thead th,
main thead th {
  background-color: #f8faff !important;
  color:            #1e293b !important;
  font-size:        12px !important;
  font-weight:      600 !important;
  text-transform:   none !important;
  letter-spacing:   0.01em !important;
  padding:          10px 12px !important;
  border-bottom:    1px solid #bfdbfe !important;
  border-color:     #bfdbfe !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDRE 4 — INPUTS TEXTE : border-radius 8px (pas les pill-toggles)
   ══════════════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="url"] {
  border-radius: 8px !important;
  border:        0.5px solid #E2E8F0 !important;
  height:        40px !important;
  padding:       0 12px !important;
  font-size:     14px !important;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus {
  border-color: #1e3a8a !important;
  box-shadow:   0 0 0 3px rgba(30, 58, 138, 0.15) !important;
  outline:      none !important;
}

/* Exclure les pill-toggles (rester en rounded-full) */
input.pill-toggle,
input[type="radio"].pill-toggle,
.btn-group-toggle input {
  border-radius: 99px !important;
}

/* input-group : gérer les coins arrondis intérieurs */
.input-group input[type="text"],
.input-group input[type="date"],
.input-group input[type="search"] {
  border-radius: 8px 0 0 8px !important;
}
.input-group input[type="text"]:last-child,
.input-group input[type="date"]:last-child {
  border-radius: 0 8px 8px 0 !important;
}
.input-group input[type="text"]:only-child,
.input-group input:only-child {
  border-radius: 8px !important;
}

/* ── breadcrumb-link : couvre aussi les pages front-office sans auxi-breadcrumb-bar */
a.breadcrumb-link,
.breadcrumb-link[href],
.fiche-creation-bc-link[href],
.fiche-rc-bc-link[href],
.auxi-breadcrumb-link[href] {
  color:           #1e3a8a !important;
  font-size:       0.875rem !important;
  font-weight:     500 !important;
  text-decoration: none !important;
}
a.breadcrumb-link:hover,
.breadcrumb-link[href]:hover {
  text-decoration: underline !important;
}

/* Supprime le contour de focus UNIQUEMENT sur les cibles de focus PROGRAMMATIQUE
   (tabindex="-1" : titres de modale, en-têtes focalisés par JS). Les éléments réellement
   interactifs/tabulables (tabindex="0", liens, champs…) CONSERVENT un focus visible (a11y). */
[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, .modal-title:focus {
    outline: none !important;
    box-shadow: none !important;
}
/* Modale Groupe : grille 3 colonnes avec modal-groupe-grid */
.modal-groupe-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px 20px !important;
    align-items: center !important;
    margin: 20px 0 !important;
}

.modal-groupe-grid label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    cursor: pointer;
}

/* Modale Rôle : grille 3 colonnes avec modal-role-grid */
.modal-role-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px 20px !important;
    align-items: center !important;
    margin: 20px 0 !important;
}

.modal-role-grid label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    cursor: pointer;
}

/* Modale Nature/NatureCollective : grille 3 colonnes avec modal-nature-grid */
.modal-nature-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px 15px !important;
    align-items: center !important;
    margin: 20px 0 !important;
}

.modal-nature-grid label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    cursor: pointer;
}

/* Élément déclencheur date du jour - Design SAAS Premium 2025 */
.menu-general-date-trigger {
  padding: 0;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
}

.menu-general-date-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1.6rem;
  border-radius: 14px;
  background: linear-gradient(135deg, #15306e 0%, #15306e 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  transition: all 0.25s ease;
  box-shadow:
    0 4px 16px rgba(30, 58, 138, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
  border: none;
  cursor: pointer;
}

.menu-general-date-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(30, 58, 138, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.15) inset;
  filter: brightness(1.05);
}

.menu-general-date-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.35);
}



.menu-general-date-text {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

/* Modale Anniversaires - Design SAAS Premium 2025 */
#modalAnniversaires .modal-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#modalAnniversaires .modal-header {
  border-bottom: 1px solid #E2E8F0;
  padding: 1.5rem;
  /* Dégradé neutre/marine clair (charte) au lieu du bleu-violet d'origine. */
  background: linear-gradient(135deg, #f8faff 0%, #eef2f7 100%);
  border-radius: 16px 16px 0 0;
}

#modalAnniversaires .modal-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

#modalAnniversaires .modal-title-icon {
  color: #1e3a8a;
}

#modalAnniversaires .modal-body {
  padding: 1.5rem;
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* momentum scroll iOS */
}

#modalAnniversaires .modal-footer {
  border-top: 1px solid #e5e7eb;
  padding: 1rem 1.5rem;
  background: #f9fafb;
  border-radius: 0 0 16px 16px;
}

/* Rendre les tuiles cliquables sur toute leur surface */




/* ── Badge résultats : texte noir professionnel, icône bleue conservée ── */
.auxi-result-success {
  color: #1e293b !important;
  font-weight: 600;
}

.auxi-result-icon {
  color: #1e3a8a !important;
  font-size: 0.85rem;
}

/* Pilule autour du badge compteur */
#info-resultat-recherche:has(.auxi-result-success),
.auxi-result-count-badge:has(.auxi-result-success) {
  color: #1e293b !important;
}

/* ── Spécificité renforcée thead — écrase Bootstrap 4 .thead-light ── */
body .table thead th,
body .table .thead-light th,
body .table .thead-dark th,
body table.table > thead > tr > th,
body main.auxi-data-workspace .table thead th,
body main.auxi-data-workspace table thead th {
  background-color: #f8faff !important;
  color:            #1e293b !important;
  font-size:        12px !important;
  font-weight:      600 !important;
  text-transform:   none !important;
  letter-spacing:   0.01em !important;
  border-bottom:    1px solid #bfdbfe !important;
  border-color:     #bfdbfe !important;
}

/* ── Checkboxes dans labels : alignement flex pour labels multiligne ─────────
   Couvre tous les fichiers de recherche (SectionFicheRecherche,
   SectionMissionIndividuelleRecherche, SectionMissionIndividuelleRechercheAuxiliaire,
   SectionMissionIndividuelleRechercheDepuisFicheAuxiliaire).
   Pattern : <label><input type="checkbox"> Texte long...</label>
   flex-start + margin-top micro-décalage = checkbox alignée sur la 1ère ligne. */
.form-check label:has(input[type="checkbox"]),
.form-check .form-check-label:has(input[type="checkbox"]),
.form-check .form-group-label:has(input[type="checkbox"]),
.panneau-filtres-recherche .form-check label,
.auxi-filters-panel .form-check label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.45rem;
  cursor: pointer;
  line-height: 1.45;
}

.form-check label:has(input[type="checkbox"]) input[type="checkbox"],
.form-check .form-check-label input[type="checkbox"],
.form-check .form-group-label input[type="checkbox"],
.panneau-filtres-recherche .form-check label input[type="checkbox"],
.auxi-filters-panel .form-check label input[type="checkbox"] {
  margin-top: 0.18rem !important;
  margin-right: 0 !important;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════════════════════
   G1-A5 — Règles d'apparence tuiles pour le nouveau SectionIndex.php
   Contexte : .template_accueil.menu-general sans .menu-general-grid
   Ciblage direct sur .card.thing.menu-tile dans le container principal.
   UNIQUEMENT règles d'apparence — aucune règle de width/height/grid/flex.
   ══════════════════════════════════════════════════════════════════════════════ */

/* A. Carte tuile — fond, bordure, ombre, position */
.template_accueil.menu-general .card.thing.menu-tile {
  position: relative !important;
  border-radius: var(--menu-tile-radius) !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid rgba(196, 194, 224, 0.55) !important;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  min-height: 130px !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease !important;
  transform: translateY(0);
  cursor: pointer;
  outline: none;
}

/* B. Hover — élévation + barre top bleu marine cohérent avec lightblue */
.template_accueil.menu-general .card.thing.menu-tile:hover,
.template_accueil.menu-general .card.thing.menu-tile:focus-within:has(.menu-tile-link:focus-visible) {
  border: 1.5px solid rgba(30, 58, 138, 0.35) !important;
  border-top: 3px solid #1e3a8a !important;
  box-shadow:
    0 14px 44px rgba(30, 58, 138, 0.2),
    0 4px 16px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-3px) !important;
  background-color: #ffffff !important;
}

/* C. Active */
.template_accueil.menu-general .card.thing.menu-tile:active {
  transform: translateY(-1px) !important;
  transition-duration: 0.08s !important;
}

/* D. Lien couvrant toute la tuile */
.template_accueil.menu-general .card.thing.menu-tile .lien-accueil.menu-tile-link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 0.6rem !important;
  padding: 0.75rem 0.5rem 0.65rem !important;
  text-decoration: none !important;
  outline: none !important;
  border-radius: var(--menu-tile-radius) !important;
  color: inherit !important;
}

/* E. Focus clavier — ring bleu marine RGAA */
.template_accueil.menu-general .card.thing.menu-tile .lien-accueil.menu-tile-link:focus {
  outline: none !important;
  box-shadow: none !important;
}
.template_accueil.menu-general .card.thing.menu-tile .lien-accueil.menu-tile-link:focus-visible {
  outline: 2px solid #1e3a8a !important;
  outline-offset: 3px !important;
}

/* F. Icon-slot — fond teinté bleu cohérent avec fond lightblue */
.template_accueil.menu-general .card.thing.menu-tile .menu-tile-icon-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  flex-shrink: 0 !important;
  border-radius: 14px !important;
  background: rgba(30, 58, 138, 0.12) !important;
  padding: 14px !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

/* G. Hover icon-slot */
.template_accueil.menu-general .card.thing.menu-tile:hover .menu-tile-icon-slot {
  transform: scale(1.08) !important;
  background: rgba(30, 58, 138, 0.18) !important;
}

/* H. Icône SVG — bleu marine cohérent avec lightblue */
.template_accueil.menu-general .card.thing.menu-tile .menu-tile-icon {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  color: #1e3a8a !important;
  stroke: #1e3a8a !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

/* I. Paths SVG — stroke bleu marine */
.template_accueil.menu-general .card.thing.menu-tile .menu-tile-icon path,
.template_accueil.menu-general .card.thing.menu-tile .menu-tile-icon circle,
.template_accueil.menu-general .card.thing.menu-tile .menu-tile-icon rect,
.template_accueil.menu-general .card.thing.menu-tile .menu-tile-icon line,
.template_accueil.menu-general .card.thing.menu-tile .menu-tile-icon polyline {
  stroke: #1e3a8a !important;
  stroke-width: 2 !important;
}

/* J. Label texte — conserve font-size, color, font-weight existants */
.template_accueil.menu-general .card.thing.menu-tile .menu-tile-label {
  line-height: 1.3;
}

/* K. Animation d'entrée échelonnée */
.template_accueil.menu-general .card.thing.menu-tile {
  animation: menu-general-tile-fade-in 0.35s ease-out both;
}
.template_accueil.menu-general .card.thing.menu-tile:nth-child(1) { animation-delay: 0.03s; }
.template_accueil.menu-general .card.thing.menu-tile:nth-child(2) { animation-delay: 0.07s; }
.template_accueil.menu-general .card.thing.menu-tile:nth-child(3) { animation-delay: 0.11s; }
.template_accueil.menu-general .card.thing.menu-tile:nth-child(4) { animation-delay: 0.15s; }
.template_accueil.menu-general .card.thing.menu-tile:nth-child(5) { animation-delay: 0.19s; }
.template_accueil.menu-general .card.thing.menu-tile:nth-child(6) { animation-delay: 0.23s; }
.template_accueil.menu-general .card.thing.menu-tile:nth-child(7) { animation-delay: 0.27s; }
.template_accueil.menu-general .card.thing.menu-tile:nth-child(8) { animation-delay: 0.31s; }

@media (prefers-reduced-motion: reduce) {
  .template_accueil.menu-general .card.thing.menu-tile {
    animation: none !important;
  }
}

/* Règles full-span supprimées — toutes les tuiles sont maintenant identiques */

/* ── Titre Menu général : noir #1e293b — contraste 12:1 AAA sur fond lightblue ─
   Lisibilité maximale, universel, adapté au contexte métier quotidien */
.template_accueil.menu-general h2[role="heading"] {
  color: #1e293b !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* ── Labels tuiles : font-weight 500 pour netteté optimale ──────────────────*/
.template_accueil.menu-general .card.thing.menu-tile .card-title,
.template_accueil.menu-general .card.thing.menu-tile .menu-tile-label,
.template_accueil.menu-general .card.thing.menu-tile .lien-accueil {
  font-weight: 500 !important;
}

/* ── Colonne de tri active : fond bleu marine très pâle + bordure bottom ──────
   La classe th-sorted est ajoutée par JS sur handleTableSorting()
   S'applique sur toutes les pages avec tableau triable */
main.auxi-data-workspace th.th-sorted,
.modal-body th.th-sorted {
  background-color: #DCE9F7 !important;
  border-bottom: 2px solid #1e3a8a !important;
  color: #1e293b !important;
  font-weight: 700 !important;
}

main.auxi-data-workspace th.th-sorted .filtreTab,
.modal-body th.th-sorted .filtreTab {
  color: #1e3a8a !important;
}

/* ── "Pas encore contacté(e)" : text-warning orange → gris muted dans fiche ──
   ChargerFicheController.php injecte text-warning sur ce texte.
   Dans le contexte fiche, le gris est plus professionnel que l'orange. */
#infosContact .text-warning,
#infosContact p.text-warning {
  color: #64748b !important;
  font-style: italic;
}

/* ── Pagination tableau compta : boutons sobres ─────────────────────────────*/
#section-pagination-cotisations .bouton-pagination,
#section-pagination-compta .bouton-pagination,
[id^="section-pagination-"] .bouton-pagination {
  font-size: 0.82rem;
  color: #64748b;
}
[id^="section-pagination-"] .bouton-pagination:disabled,
[id^="section-pagination-"] .bouton-pagination.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Bouton supprimer ⊖ dans col-actions tableau compta ─────────────────────
   Généré côté serveur PHP — ciblé via .col-actions */
.col-actions .btn,
.col-actions button,
td.col-actions .btn,
td.col-actions button,
th.col-actions,
.col-actions {
  text-align: center;
}
td.col-actions .btn,
td.col-actions button {
  background:    transparent !important;
  border:        none !important;
  color:         #A32D2D !important;
  padding:       0.25rem 0.5rem !important;
  border-radius: 50% !important;
  box-shadow:    none !important;
  transition:    background 0.15s ease, color 0.15s ease !important;
}
td.col-actions .btn:hover,
td.col-actions button:hover {
  background:    #FAE3E3 !important;
  color:         #7f2222 !important;
}
td.col-actions .btn i,
td.col-actions button i {
  color: #A32D2D !important;
  font-size: 1.1rem !important;
}

/* ── Pagination tableaux compta : icônes fa-angle visibles ──────────────────
   text-white sur fond transparent = invisible. On force la couleur. */
#section-pagination-produits .bouton-pagination i,
#section-pagination-abonnements .bouton-pagination i,
#section-pagination-reglements .bouton-pagination i,
#section-pagination-cotisations .bouton-pagination i,
#section-pagination-frais .bouton-pagination i,
[id^="section-pagination-"] .bouton-pagination i {
  color: #64748b !important;
}
[id^="section-pagination-"] .bouton-pagination:not(.disabled):not(:disabled) i {
  color: #1e3a8a !important;
}

/* ── Bouton ⊖ dans tableau compta — icône fa-minus-circle ───────────────────
   Généré par /fiche-tableaux, ciblé via l'icône et le contexte tableau */
#tbody-produits td:last-child .btn,
#tbody-produits td:last-child button,
#tbody-produits td:last-child a,
#tbody-abonnements td:last-child .btn,
#tbody-abonnements td:last-child button,
#tbody-reglements td:last-child .btn,
#tbody-reglements td:last-child button,
#tbody-cotisations td:last-child .btn,
#tbody-cotisations td:last-child button,
#tbody-frais td:last-child .btn,
#tbody-frais td:last-child button {
  background:    transparent !important;
  border:        none !important;
  color:         #A32D2D !important;
  padding:       0.25rem 0.5rem !important;
  border-radius: 50% !important;
  box-shadow:    none !important;
  transition:    background 0.15s ease !important;
}
#tbody-produits td:last-child .btn:hover,
#tbody-abonnements td:last-child .btn:hover,
#tbody-reglements td:last-child .btn:hover,
#tbody-cotisations td:last-child .btn:hover,
#tbody-frais td:last-child .btn:hover {
  background: #FAE3E3 !important;
}
#tbody-produits td:last-child i,
#tbody-abonnements td:last-child i,
#tbody-reglements td:last-child i,
#tbody-cotisations td:last-child i,
#tbody-frais td:last-child i {
  color: #A32D2D !important;
  font-size: 1.1rem !important;
}

/* ── Valeurs dans l'onglet Caractéristiques : noir professionnel ─────────────
   Bootstrap .card-link donne une couleur bleue aux valeurs (Donateur, Auxiliaire...)
   Dans ce contexte ce sont des données, pas des liens — noir obligatoire.
   Spécificité maximale pour écraser Bootstrap ET nos règles .update */
main #pane_tab-caracteristiques .card-link,
main #pane_tab-caracteristiques a.card-link,
main #pane_tab-caracteristiques td a,
main #pane_tab-caracteristiques a.update,
main #pane_tab-caracteristiques a.update.card-link,
main #pane_tab-caracteristiques a.update.btn-outline-white,
main #tbody-caracteristiques a,
main #tbody-caracteristiques a.card-link,
main #tbody-caracteristiques a.update,
main #tbody-caracteristiques a.update.card-link,
main #tbody-caracteristiques a.update.btn-outline-white,
main #tbody-caracteristiques td a {
  color: #1e293b !important;
  text-decoration: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-weight: normal !important;
}
main #pane_tab-caracteristiques a:hover,
main #tbody-caracteristiques a:hover {
  color: #1e3a8a !important;
  text-decoration: underline !important;
  background-color: transparent !important;
}

/* ── OVERRIDE FINAL : Donateur/Auxiliaire en noir dans caractéristiques ──────
   Position finale dans le fichier = priorité cascade garantie
   Sélecteur attribut [class*=] pour couvrir toutes les combinaisons de classes */
main a[class*="card-link"][class*="update"],
main a[class*="card-link"][class*="update"]:link,
main a[class*="card-link"][class*="update"]:visited {
  color: #1e293b !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-decoration: none !important;
}
main a[class*="card-link"][class*="update"]:hover {
  color: #1e3a8a !important;
  background: transparent !important;
  text-decoration: underline !important;
}

/* ── Valeurs données dans tbody-caracteristiques : noir garanti ──────────────
   auxi-data-tbody ajoutée dans ChargerFicheController.php
   Spécificité (0,3,1) écrase Bootstrap ET nos règles .update */
main #tbody-caracteristiques.auxi-data-tbody a,
main #tbody-caracteristiques.auxi-data-tbody a:link,
main #tbody-caracteristiques.auxi-data-tbody a:visited,
main #tbody-caracteristiques.auxi-data-tbody a.card-link,
main #tbody-caracteristiques.auxi-data-tbody a.update {
  color: #1e293b !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-decoration: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ── FIX CLICABILITÉ MODALES : garantir pointer-events sur tous les éléments ─
   Bootstrap 4 : s'assurer qu'aucun de nos éléments ne bloque les clics */
.modal.show,
.modal.show .modal-dialog,
.modal.show .modal-content,
.modal.show .modal-header,
.modal.show .modal-body,
.modal.show .modal-footer {
  pointer-events: auto !important;
}

.modal.show .modal-dialog {
  pointer-events: auto !important;
  position: relative !important;
}

/* Le backdrop capte les clics en dehors — on le désactive pour static */
.modal.show[data-backdrop="static"] ~ .modal-backdrop,
.modal-backdrop.show {
  pointer-events: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   CHARTE 2025 — Couverture des défauts Bootstrap 4
   Éléments sans règle explicite qui héritaient du bleu #007bff de Bootstrap.
   Accent marine unique #1e3a8a / focus accessible.
   ═══════════════════════════════════════════════════════════════════════ */
/* Liens génériques (hors boutons / nav / pagination) */
a:not(.btn):not(.nav-link):not(.page-link) { color: #1e3a8a; }
a:not(.btn):not(.nav-link):not(.page-link):hover,
a:not(.btn):not(.nav-link):not(.page-link):focus { color: #15306e; }

/* Cases à cocher / radios / switches Bootstrap (état coché + focus) */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #1e3a8a !important;
  border-color: #1e3a8a !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #1e3a8a !important;
}

/* Pagination Bootstrap (page active + liens) */
.page-item.active .page-link {
  background-color: #1e3a8a !important;
  border-color: #1e3a8a !important;
  color: #ffffff !important;
}
.page-link { color: #1e3a8a; }
.page-link:hover { color: #15306e; }

/* ═══════════════════════════════════════════════════════════════════
   TOASTS — feedback non-bloquant (remplacent les modales d'information)
   ═══════════════════════════════════════════════════════════════════ */
.auxi-toast-region {
  position: fixed; top: 1rem; right: 1rem; z-index: 1080;
  display: flex; flex-direction: column; gap: .5rem;
  max-width: min(420px, calc(100vw - 2rem)); pointer-events: none;
}
.auxi-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .6rem;
  background: #ffffff; border: 1px solid #E2E8F0; border-left: 4px solid #1e3a8a;
  border-radius: 10px; padding: .7rem .9rem;
  box-shadow: 0 8px 24px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.08);
  color: #1e293b; font-size: 14px; line-height: 1.45;
  opacity: 0; transform: translateX(16px);
  transition: opacity .22s ease, transform .22s ease;
}
.auxi-toast--show { opacity: 1; transform: translateX(0); }
.auxi-toast__icon { font-size: 18px; margin-top: 1px; flex: 0 0 auto; }
.auxi-toast__msg { flex: 1 1 auto; word-break: break-word; }
.auxi-toast__close {
  flex: 0 0 auto; background: none; border: none; font-size: 20px; line-height: 1;
  color: #94A3B8; cursor: pointer; padding: 0 .15rem; margin: -2px -2px 0 0;
}
.auxi-toast__close:hover { color: #475569; }
.auxi-toast--succes        { border-left-color: var(--ds-success); }
.auxi-toast--succes .auxi-toast__icon { color: var(--ds-success); }
.auxi-toast--avertissement { border-left-color: var(--ds-warning); }
.auxi-toast--avertissement .auxi-toast__icon { color: var(--ds-warning); }
.auxi-toast--erreur        { border-left-color: var(--ds-danger); }
.auxi-toast--erreur .auxi-toast__icon { color: var(--ds-danger); }

/* ═══════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS — transitions & feedback homogènes (item 6)
   ═══════════════════════════════════════════════════════════════════ */
.btn, .bouton-primaire, .bouton-secondaire, .btn-outline-white,
.nav-link, .page-link, .list-group-item-action {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .1s ease;
}
a:not(.btn):not(.nav-link):not(.page-link) { transition: color .15s ease; }

/* Enfoncement subtil au clic (feedback tactile) */
.btn:not(:disabled):not(.disabled):active,
.bouton-primaire:not(.disabled):active,
.list-group-item-action:active {
  transform: translateY(1px);
}

/* Survol de ligne de tableau homogène sur toutes les tables */
.table tbody tr { transition: background-color .12s ease; }

/* ═══════════════════════════════════════════════════════════════════
   ITEM 4 — En-tête de tableau collant (zone résultats, desktop ≥768px)
   La zone résultats reçoit son propre défilement vertical avec un plafond
   GÉNÉREUX : ne se déclenche QUE sur les listes longues ; les listes courtes
   ne changent pas. L'en-tête (fond opaque #f8faff + bordure #bfdbfe déjà
   définis plus haut) reste alors visible pendant le défilement des lignes.
   Réversible : retirer ce bloc suffit à revenir au défilement pleine page.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  main .container-fluid.template #zone-resultat .table-responsive,
  main #zone-resultat .table-responsive {
    max-height: calc(100vh - 230px);
    max-height: calc(100dvh - 230px); /* Safari/iOS : hauteur visible réelle */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* momentum scroll iOS */
  }
  main #zone-resultat .table-responsive thead th,
  main #zone-resultat .table-responsive thead.thead-light th {
    position: -webkit-sticky; /* Safari/iOS < 13 */
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

/* Fix sticky (item 4) : la règle `.table { overflow:hidden }` de style.css (coins
   arrondis) fait de la <table> un conteneur de défilement, ce qui PIÈGE le thead
   sticky (il colle au sommet de la table au lieu du wrapper). On rend la table
   overflow:visible dans la zone résultats — les coins restent arrondis grâce au
   wrapper .table-responsive (border-radius + overflow). */
main #zone-resultat .table-responsive > table,
main #zone-resultat .table-responsive table {
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ITEM 5 — État vide soigné (résultats de recherche). Sans bouton CTA.
   Injecté par chargerInfosTableau() (branche "empty"), partagé par toutes
   les pages de recherche (fiche, mission ind./coll., comptabilité).
   ═══════════════════════════════════════════════════════════════════ */
.auxi-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  max-width: 460px;
  margin: 1.5rem auto;
}
.auxi-empty-state__icon {
  font-size: 2.75rem;
  color: #CBD5E1;
  margin-bottom: 0.75rem;
  display: block;
}
.auxi-empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: #334155;
  margin: 0 0 0.35rem;
}
.auxi-empty-state__hint {
  font-size: 0.875rem;
  color: #5b6878; /* RGAA : AA sur blanc (5.68) — etait #94A3B8 (2.56, echec) */
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SKELETONS de chargement — lignes de tableau fantômes (item 7)
   Injectées par chargerInfosTableau() pendant le chargement d'une recherche,
   à la place du spinner. Barres animées réutilisant .skeleton-shimmer.
   Décoratives (aria-hidden) ; l'annonce lecteur d'écran est gérée par
   messageRevueEcran + aria-busy sur le tbody.
   ═══════════════════════════════════════════════════════════════════ */
tr.auxi-skel-row > td {
  padding: 14px 12px !important;
  border: 0 !important;
  background: transparent !important;
}
.auxi-skel-bar {
  display: block;
  height: 12px;
  width: 80%;
  border-radius: 6px;
}
tr.auxi-skel-row > td:nth-child(odd)  .auxi-skel-bar { width: 55%; }
tr.auxi-skel-row > td:nth-child(3n)   .auxi-skel-bar { width: 42%; }
tr.auxi-skel-row > td:first-child     .auxi-skel-bar { width: 30%; }

/* ════════════════════════════════════════════════════════════════════════════
   CORRECTIONS RESPONSIVE — mobile / tablette uniquement (ajout 2026-06)
   Bloc append-only : ne modifie aucune règle desktop existante. Tout est scopé
   par media query (max-width / pointer:coarse), donc le rendu desktop (≥ md /
   souris) reste rigoureusement identique. Surcharge par position en fin de
   fichier (même spécificité, déclaré plus tard → l'emporte).
   ════════════════════════════════════════════════════════════════════════════ */

/* R1 — Anti-zoom iOS : 16px minimum sur les champs au focus, UNIQUEMENT sur
   appareils tactiles (souris = inchangé, reste à 14px). */
@media (hover: none) and (pointer: coarse) {
  .form-control,
  select.form-control,
  textarea.form-control,
  input.form-control {
    font-size: 16px !important;
  }
}

/* R8 — Tableaux : autoriser le scroll horizontal quand le contenu déborde
   (overflow:hidden tronquait silencieusement hors #zone-resultat). Sur desktop,
   si le tableau tient, aucune barre n'apparaît → rendu identique. */
main .table-responsive {
  overflow-x: auto;
  overflow-y: visible;
}

/* R3 — Pagination : permettre le retour à la ligne sur petit écran (desktop :
   la barre tient sur une ligne, donc wrap sans effet visuel). */
@media (max-width: 767.98px) {
  .nav-btns { flex-wrap: wrap; }
}

/* R14 — Modale XL : repli sur la largeur visible (desktop large : min = 960px,
   donc inchangé). */
.modal-dialog.modal-xl { max-width: min(960px, 96vw) !important; }

/* R18 — Titre de connexion fluide (cap à 2rem = valeur desktop actuelle). */
#connexion #dialogTitle,
#connexion #modal-dialogTitle {
  font-size: clamp(1.4rem, 5vw, 2rem);
}

/* R16 — Anniversaires : nom tronqué proprement + grille resserrée sur mobile. */
.menu-general .menu-general-birthdays__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* R2 / R5 / R10 / R21 — Réglages < 576px (xs) */
@media (max-width: 575.98px) {
  /* R2 — Grilles des modales Groupe / Rôle / Nature : 3 → 2 colonnes,
     labels sécables pour ne pas déborder. */
  .modal-groupe-grid,
  .modal-role-grid,
  .modal-nature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .modal-groupe-grid label,
  .modal-role-grid label,
  .modal-nature-grid label {
    white-space: normal !important;
  }

  /* R5 — Groupe de boutons de navigation Sécurité : autoriser le wrap plutôt
     que le débordement horizontal. */
  .btn-group[aria-label="Sections sécurité"] {
    flex-wrap: wrap;
  }

  /* R10 — Code postal / Ville : empilement vertical sur mobile étroit. */
  .fiche-cp-ville-wrap { flex-wrap: wrap !important; }
  .fiche-cp-field {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* R21 — Stepper : pleine largeur disponible. */
  .auxi-stepper__track { max-width: 100%; }

  /* R12 — Champs/selects contraints par un max-width INLINE en px : on les laisse
     s'étendre sur mobile uniquement (le style inline reste intact sur desktop, donc
     le rendu desktop est inchangé). Cible les .form-control et .input-group qui
     portent un style max-width. */
  .form-control[style*="max-width"],
  .input-group[style*="max-width"] {
    max-width: 100% !important;
  }

  /* R17 — Le padding-top fixe de 40px du body (hérité d'une navbar fixe) gaspille
     de la hauteur sur petit écran (la navbar est désormais sticky, en flux). On le
     réduit sur mobile uniquement ; desktop conservé à 40px. */
  body { padding-top: 8px; }
}

/* ============================================================================
   Module Organigramme — refonte esthétique (tuiles regroupées + code couleur
   aligné sur les marqueurs de la carte, KPI, pastilles de rôle, carte sticky).
   Tout est scopé sous .auxi-organigramme pour ne pas déborder ailleurs.
   ========================================================================== */

/* Couleurs des types d'implantation = couleurs des marqueurs Leaflet */
.auxi-organigramme {
  --org-c-siege: #A32D2D;        /* rouge  */
  --org-c-delegations: #185FA5;  /* bleu   */
  --org-c-antennes: #BA7517;     /* doré   */
  --org-c-sections: #993556;     /* rose   */
  --org-c-eca: #534AB7;          /* violet */
  --org-ink: #1e3a8a;
  --org-accent: #5c59f3;
}

/* Intertitres de famille de tuiles */
.auxi-organigramme .org-group-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 .7rem .15rem;
}
.auxi-organigramme .org-group-title--spaced { margin-top: 1.6rem; }

/* Tuiles d'accordéon */
.auxi-organigramme .org-tile {
  border: 1px solid var(--glass-border, rgba(0,0,0,.06)) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.72);
  box-shadow: 0 6px 18px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.03);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.auxi-organigramme .org-tile .card-header {
  background: transparent;
  border-bottom: none;
  padding: 0;
}
.auxi-organigramme .org-tile .custom-btn {
  color: var(--org-ink);
  font-weight: 600;
  padding: .8rem 1rem;
  width: 100%;
}
.auxi-organigramme .org-tile .custom-btn:hover { color: #15306e; }
.auxi-organigramme .org-tile-label { display: inline-flex; align-items: center; gap: 10px; }

/* Pastille d'icône (squircle teinté) — signature SaaS premium */
.auxi-organigramme .org-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(92,89,243,.10);
  transition: transform .2s ease;
}
.auxi-organigramme .org-ico i { color: var(--org-accent); font-size: 1rem; }
.auxi-organigramme .org-tile .custom-btn:hover .org-ico { transform: scale(1.06); }

/* Badge de comptage (nombre de rattachements du type), masqué tant que vide */
.auxi-organigramme .org-count {
  font-size: .72rem; font-weight: 700;
  color: #475569; background: rgba(15,23,42,.06);
  padding: 1px 9px; border-radius: 20px;
  font-variant-numeric: tabular-nums;
}
.auxi-organigramme .org-count:empty { display: none; }

/* Chevron : rotation douce plutôt qu'un simple swap d'icône */
.auxi-organigramme .org-chevron { transition: transform .25s ease; }
.auxi-organigramme .org-tile .custom-btn[aria-expanded="true"] .org-chevron {
  transform: rotate(180deg);
}

/* Profondeur : lift léger au survol */
.auxi-organigramme .org-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(30,58,138,.10), 0 2px 8px rgba(0,0,0,.04);
}

/* Tuile active (ouverte) : fond accent léger + anneau indigo */
.auxi-organigramme .org-tile .custom-btn[aria-expanded="true"] {
  background: rgba(92,89,243,.06);
}
.auxi-organigramme .org-tile:has(.collapse.show) {
  box-shadow: 0 0 0 1.5px rgba(92,89,243,.32), 0 12px 28px rgba(30,58,138,.12);
}

/* Pastille (légende) */
.auxi-organigramme .org-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; margin-right: 10px; flex: 0 0 auto;
  background: #94a3b8;
}

/* Bordure gauche + teinte d'icône/pastille par type (implantations territoriales) */
.auxi-organigramme .org-tile--siege        { border-left: 3px solid var(--org-c-siege) !important; }
.auxi-organigramme .org-tile--delegations  { border-left: 3px solid var(--org-c-delegations) !important; }
.auxi-organigramme .org-tile--antennes     { border-left: 3px solid var(--org-c-antennes) !important; }
.auxi-organigramme .org-tile--sections     { border-left: 3px solid var(--org-c-sections) !important; }
.auxi-organigramme .org-tile--eca          { border-left: 3px solid var(--org-c-eca) !important; }
.auxi-organigramme .org-tile--siege        .org-ico { background: rgba(163,45,45,.10); }
.auxi-organigramme .org-tile--delegations  .org-ico { background: rgba(24,95,165,.10); }
.auxi-organigramme .org-tile--antennes     .org-ico { background: rgba(186,117,23,.12); }
.auxi-organigramme .org-tile--sections     .org-ico { background: rgba(153,53,86,.10); }
.auxi-organigramme .org-tile--eca          .org-ico { background: rgba(83,74,183,.10); }
.auxi-organigramme .org-tile--siege        .org-ico i { color: var(--org-c-siege); }
.auxi-organigramme .org-tile--delegations  .org-ico i { color: var(--org-c-delegations); }
.auxi-organigramme .org-tile--antennes     .org-ico i { color: var(--org-c-antennes); }
.auxi-organigramme .org-tile--sections     .org-ico i { color: var(--org-c-sections); }
.auxi-organigramme .org-tile--eca          .org-ico i { color: var(--org-c-eca); }
.org-dot--siege       { background: #A32D2D !important; }
.org-dot--delegations { background: #185FA5 !important; }
.org-dot--antennes    { background: #BA7517 !important; }
.org-dot--sections    { background: #993556 !important; }
.org-dot--eca         { background: #534AB7 !important; }

/* Légende de la carte */
.auxi-organigramme .org-legend {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  margin: 0 0 .75rem; padding: .5rem .75rem;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--glass-border, rgba(0,0,0,.06));
  border-radius: 10px;
  font-size: .82rem; color: #475569;
}
.auxi-organigramme .org-legend li { display: inline-flex; align-items: center; }
.auxi-organigramme .org-legend .org-dot { margin-right: 7px; }

/* Carte du panneau droit + sticky sur grand écran */
.auxi-organigramme .org-map-card {
  border: 1px solid var(--glass-border, rgba(0,0,0,.06)) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.72);
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.auxi-organigramme .org-map-card .card-header {
  background: transparent; border-bottom: 1px solid var(--glass-border, rgba(0,0,0,.06));
  color: var(--org-ink); font-weight: 600;
}
.auxi-organigramme .org-map-card .card-header i { color: var(--org-accent); }
@media (min-width: 992px) {
  .auxi-organigramme .org-map-card { position: sticky; top: 1rem; }
}

/* Indicateur de chargement (spinner) */
.auxi-organigramme .org-loading,
#modal-content-placeholder .org-loading {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1.25rem 0; color: #64748b; font-size: .9rem;
}
.org-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(92,89,243,.25);
  border-top-color: #5c59f3;
  display: inline-block;
  animation: orgSpin .7s linear infinite;
}
@keyframes orgSpin { to { transform: rotate(360deg); } }

/* Grille de KPI (Informations générales / statistiques de la modale) */
.org-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.org-kpi {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 12px;
  padding: .7rem .8rem;
}
.org-kpi__label { font-size: .78rem; color: #64748b; line-height: 1.25; }
.org-kpi__value { font-size: 1.45rem; font-weight: 700; color: #1e3a8a; margin-top: .15rem; font-variant-numeric: tabular-nums; }

/* Liste de personnes (membres / responsables) : avatar + nom + rôles en pills */
.org-people { list-style: none; margin: 0; padding: 0; }
.org-person {
  display: flex; align-items: center; gap: 12px;
  padding: .55rem .25rem;
  border-top: 1px solid rgba(0,0,0,.06);
}
.org-person:first-child { border-top: none; }
.org-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #e8e6f8; color: #3936d8;
  font-size: .8rem; font-weight: 700;
}
.org-person__body { flex: 1 1 auto; min-width: 0; }
.org-person__name { color: #185FA5; font-weight: 600; text-decoration: none; }
.org-person__name:hover { text-decoration: underline; }
.org-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.org-pill {
  font-size: .72rem; line-height: 1.2;
  background: #eef0ff; color: #26215c;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap;
}
.org-person__action { flex: 0 0 auto; }

/* Modale de détails : sections à sous-titres + chips de contact */
.org-section { margin-bottom: 1.1rem; }
.org-section + .org-section { border-top: 1px solid rgba(0,0,0,.07); padding-top: 1rem; }
.org-section__title {
  display: flex; align-items: center; gap: .5rem;
  font-size: .95rem; font-weight: 700; color: var(--accent-color, #5c59f3);
  margin-bottom: .65rem; text-transform: uppercase; letter-spacing: .03em;
}
.org-section__title i { color: var(--accent-color, #5c59f3); }
.org-detail-row { margin: .3rem 0; color: #334155; }
.org-detail-row strong { color: #1e293b; font-weight: 600; }
.org-modal-title { font-size: 1.25rem; font-weight: 700; color: #1e3a8a; margin-bottom: .25rem; }
.org-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.org-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(92,89,243,.08); color: #1e3a8a;
  border: 1px solid rgba(92,89,243,.18);
  padding: 4px 11px; border-radius: 999px; font-size: .85rem; text-decoration: none;
}
.org-chip:hover { background: rgba(92,89,243,.15); text-decoration: none; color: #15306e; }
.org-chip i { color: var(--accent-color, #5c59f3); }

/* Chargement par squelette animé (shimmer) — Organigramme */
@keyframes orgShimmer { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } }
.org-skel {
  display: block;
  background: linear-gradient(90deg, rgba(120,120,140,.10) 25%, rgba(120,120,140,.20) 37%, rgba(120,120,140,.10) 63%);
  background-size: 720px 100%;
  animation: orgShimmer 1.3s ease infinite;
  border-radius: 6px;
}
.org-skel-line { height: 11px; }
.org-people--skel { list-style: none; margin: 0; padding: 0; }
.org-skel-row {
  display: flex; align-items: center; gap: 12px;
  padding: .55rem .25rem; border-top: 1px solid rgba(0,0,0,.06);
}
.org-skel-row:first-child { border-top: none; }
.org-skel-ava { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; }
.org-skel-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }

/* Marqueurs de la carte Organigramme (divIcon SVG, sans image externe) */
.org-pin { background: transparent; border: none; }
.org-pin svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); transition: transform .15s ease; transform-origin: 50% 100%; }
.org-pin:hover svg { transform: scale(1.12); }

/* Bandeau d'en-tête de l'organigramme (indicateurs globaux) */
.auxi-organigramme .org-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--glass-border, rgba(0,0,0,.06));
  border-radius: 14px; padding: .8rem 1.1rem; margin-bottom: 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
}
.auxi-organigramme .org-header__intro { display: flex; align-items: center; gap: 12px; }
.auxi-organigramme .org-header__ico {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; background: rgba(92,89,243,.10);
}
.auxi-organigramme .org-header__ico i { color: var(--org-accent); font-size: 1.1rem; }
.auxi-organigramme .org-header__title { font-weight: 700; color: var(--org-ink); font-size: 1.02rem; }
.auxi-organigramme .org-header__kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.auxi-organigramme .org-hkpi {
  background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.05);
  border-radius: 11px; padding: .35rem .85rem; min-width: 96px;
}
.auxi-organigramme .org-hkpi__label { display: block; font-size: .72rem; color: #64748b; line-height: 1.2; }
.auxi-organigramme .org-hkpi__value {
  display: block; font-size: 1.2rem; font-weight: 700; color: #1e3a8a; font-variant-numeric: tabular-nums;
}
@media (max-width: 575.98px) {
  .auxi-organigramme .org-header { flex-direction: column; align-items: stretch; }
  .auxi-organigramme .org-hkpi { flex: 1 1 calc(50% - 10px); }
}

/* Drawer de détails : en-tête et pied collants pour rester accessibles au scroll */
#rattachementDetailsModal .modal-header {
  position: sticky; top: 0; z-index: 3;
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--glass-border, rgba(0,0,0,.06));
}
#rattachementDetailsModal .modal-footer {
  position: sticky; bottom: 0; z-index: 3;
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border-top: 1px solid var(--glass-border, rgba(0,0,0,.06));
}
#rattachementDetailsModal .modal-title { color: #1e3a8a; font-weight: 700; }
#rattachementDetailsModal .modal-body { padding: 1.25rem 1.4rem; }

/* Texte réservé aux lecteurs d'écran (l'app n'a pas de .sr-only global fiable). */
.org-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* Focus a11y : le titre de modale/volet reçoit le focus par programmation (annonce lecteur
   d'écran). Comme ce n'est pas un contrôle tabulable, on masque son contour visible pour ne
   pas dérouter les utilisateurs voyants (les vrais contrôles gardent leur focus visible). */
.modal-title[tabindex="-1"]:focus,
.modal-content[tabindex="-1"]:focus { outline: none; }

/* ============================================================================
   Politique « lien ouvrant un nouvel onglet » (cohérence app : picto + infobulle
   + texte lecteur d'écran). Voir l'enhancer JS dans main.js (a[target="_blank"]).
   ========================================================================== */
/* Utilitaire visuellement masqué, lisible par les lecteurs d'écran (l'app n'a pas
   de .sr-only global fiable). */
.auxi-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Filet de sécurité GLOBAL pour .sr-only : Bootstrap (qui le fournit) est chargé via CDN ;
   s'il est lent/bloqué, tous les textes réservés aux lecteurs d'écran (ex. « (Facultatif) »,
   « Page actuelle : ») deviendraient VISIBLES pour les voyants. On redéfinit donc .sr-only
   dans la feuille locale (toujours chargée) pour garantir leur masquage visuel. Aucun
   .sr-only-focusable n'est utilisé dans l'app → masquage inconditionnel sans risque. */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
/* Picto « ouvre un nouvel onglet » (↗) ajouté aux liens target="_blank". */
.auxi-newtab-ico { margin-left: .3em; font-size: .8em; opacity: .85; vertical-align: baseline; }

/* ============================================================================
   HARMONISATION VALIDATION DES FORMULAIRES (Phase 1)
   - état ERREUR visible et cohérent (.is-invalid / [aria-invalid] / .invalid-feedback) ;
   - focus des champs unifié et bien visible (a11y) ;
   - léger survol. Auth (#connexion, specificité ID) volontairement non impacté.
   ========================================================================== */

/* Focus des champs — un seul anneau visible partout (sauf auth). Le préfixe body augmente
   la specificité pour l'emporter sur les multiples règles de focus existantes. */
body input.form-control:focus,
body select.form-control:focus,
body textarea.form-control:focus,
body .form-control:focus,
body .modal input:focus,
body .modal select:focus,
body .modal textarea:focus,
body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="number"]:focus,
body input[type="search"]:focus,
body input[type="password"]:focus,
body input[type="date"]:focus,
body input[type="url"]:focus,
body textarea:focus {
  border-color: var(--ds-brand, #1e3a8a) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.30) !important;
  outline: none !important;
}

/* Survol : indice subtil avant le focus (utilisateurs souris). */
body .form-control:hover:not(:focus):not(.is-invalid),
body input:hover:not(:focus):not(.is-invalid),
body select:hover:not(:focus):not(.is-invalid),
body textarea:hover:not(:focus):not(.is-invalid) {
  border-color: #94a3b8;
}

/* État ERREUR : bordure rouge + anneau rouge au focus. Couvre .is-invalid (Bootstrap) ET
   [aria-invalid="true"] (champs marqués par le helper / HTML). */
body .form-control.is-invalid,
body input.is-invalid,
body select.is-invalid,
body textarea.is-invalid,
body .form-control[aria-invalid="true"],
body input[aria-invalid="true"],
body select[aria-invalid="true"],
body textarea[aria-invalid="true"] {
  border-color: var(--ds-danger, #A32D2D) !important;
  background-color: #fff !important;
}
body .form-control.is-invalid:focus,
body input.is-invalid:focus,
body select.is-invalid:focus,
body textarea.is-invalid:focus,
body .form-control[aria-invalid="true"]:focus,
body input[aria-invalid="true"]:focus,
body select[aria-invalid="true"]:focus,
body textarea[aria-invalid="true"]:focus {
  border-color: var(--ds-danger, #A32D2D) !important;
  box-shadow: 0 0 0 3px rgba(163, 45, 45, 0.25) !important;
}

/* Message d'erreur sous le champ : .invalid-feedback (Bootstrap) et .feedback (app). */
.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: .25rem;
  font-size: .85rem;
  color: var(--ds-danger, #A32D2D);
}
.feedback.form-text.text-danger:not(:empty) {
  margin-top: .25rem;
  font-size: .85rem;
  font-weight: 500;
}

/* ----------------------------------------------------------------------------
   Specificité RENFORCÉE (:not(#auxi-nomatch) → niveau ID) pour vaincre la règle
   design-system « main/.modal-body input.form-control:not()×9 { border !important } »
   (≈0,11,1) qui écrasait le focus ET l'état d'erreur des champs. L'auth (#connexion,
   spécificité ID supérieure) reste volontairement inchangée.
   -------------------------------------------------------------------------- */
input:focus:not(#auxi-nomatch),
select:focus:not(#auxi-nomatch),
textarea:focus:not(#auxi-nomatch),
.form-control:focus:not(#auxi-nomatch) {
  border-color: var(--ds-brand, #1e3a8a) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.30) !important;
}
input.is-invalid:not(#auxi-nomatch),
select.is-invalid:not(#auxi-nomatch),
textarea.is-invalid:not(#auxi-nomatch),
.form-control.is-invalid:not(#auxi-nomatch),
input[aria-invalid="true"]:not(#auxi-nomatch),
select[aria-invalid="true"]:not(#auxi-nomatch),
textarea[aria-invalid="true"]:not(#auxi-nomatch) {
  border-color: var(--ds-danger, #A32D2D) !important;
}
input.is-invalid:focus:not(#auxi-nomatch),
select.is-invalid:focus:not(#auxi-nomatch),
textarea.is-invalid:focus:not(#auxi-nomatch),
.form-control.is-invalid:focus:not(#auxi-nomatch) {
  border-color: var(--ds-danger, #A32D2D) !important;
  box-shadow: 0 0 0 3px rgba(163, 45, 45, 0.30) !important;
}

/* Exports — en-tête de tableau figé : les noms de colonnes restent visibles pendant le
   défilement vertical de la zone de résultats (utile sur les exports larges/longs). */
#results-container .table-responsive thead.thead-dark th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Exports — bascule « 2. Critères de sélection » (Filtres avancés) :
   chevron qui pivote et libellé « Filtres avancés » masqué une fois déplié. */
.btn-toggle-criteres .toggle-chevron {
  transition: transform 0.2s ease;
}
.btn-toggle-criteres[aria-expanded="true"] .toggle-chevron {
  transform: rotate(180deg);
}
.btn-toggle-criteres[aria-expanded="true"] .d-none-when-open {
  display: none;
}