/**
 * 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");

/* 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: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.52);
  --glass-bg-pop: rgba(255, 255, 255, 0.4);
  --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;

  --accent-color: #5c59f3;
  --accent-color-deep: #3936d8;
  --auxi-action-violet: #4527a0;
  --auxi-action-violet-hover: #311b92;
  /* Bouton auth « Se connecter » : violet assombri ~10 % (contraste texte blanc renforcé) */
  --accent-auth-submit-start: #3c32b6;
  --accent-auth-submit-end: #2b2974;
  --accent-auth-submit-shadow: 60, 50, 182;
  /* Focus champs auth : bord violette (border) + halo très diffus, sans anneau dur */
  --auth-input-focus-border: #6d63f8;
  --auth-input-focus-glow:
    0 0 8px rgba(51, 51, 153, 0.2),
    0 0 22px rgba(51, 51, 153, 0.12);
  /* Liens auth : bleu foncé — contraste WCAG AA sur fond blanc / verre */
  --auth-form-link: #1e3a8a;
  --auth-form-link-hover: #172554;
  /* Pour rgba(var(--accent-rgb), α) — halo focus, etc. */
  --accent-rgb: 92, 89, 243;
  /* Alias charte (spec glass / hover bleu léger) */
  --blue-rgb: 92, 89, 243;
  --accent-on-glass: #2d2a8f;
  /* Orange historique : ne pas utiliser pour l’UI métier (préférer --accent-color). Réservé sémantique avertissement si besoin. */
  --accent-orange: #f26522;
  /* 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 */
  --auxi-icon-stroke: 1.5;
  --bootstrap-primary: #007bff;
  --bootstrap-primary-hover: #0056b3;
  --success: #4caf50;
  --danger: #f44336;
  --text-night: #0f172a;
  --text-muted: #64748b;
  --border-soft: rgba(0, 0, 0, 0.06);
  --table-header-bg: #f2f2f2;
  --footer-green: #6e8c03;
  --champs-oblig-bg: #dbeaff;
  --champs-oblig-text: #312f98;
  /* É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 % */
  --glass-dock-bg: rgba(33, 37, 41, 0.8);
  --glass-dock-blur: 14px;
  /* 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(92, 89, 243, 0.14), 0 0 0 1px rgba(92, 89, 243, 0.08);
  --ds-ring-blue: #5c59f3;
  /* Menu général refonte */
  --page-pearl: #f8fafc;
  --menu-accent: #1e293b;
  --menu-border: #f1f5f9;
  --menu-tile-radius: 12px;
  --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: #7b7eb5;
  /* Menu général : bordure repos / survol (#333399) + ombre survol plus diffuse */
  --menu-tile-border-idle: #e2e8f0;
  --menu-tile-border-hover: #333399;
  --shadow-menu-tile-hover:
    0 14px 44px -10px rgba(51, 51, 153, 0.22),
    0 10px 32px -12px rgba(15, 23, 42, 0.12),
    0 4px 16px -4px rgba(51, 51, 153, 0.1);
  /* Bouton menu profil : aligné sur le dégradé auth (legacy #3936d8 retiré du ring tuiles) */
  --auxi-nav-user-btn-border: #7b7eb5;
  --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='%233b82f6' 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 */
  --auxi-app-bg-gradient: linear-gradient(180deg, #f4f7f9 0%, #f4f7f9 100%);
  --auxi-app-bg-pattern-opacity: 0.02;
  --auxi-breadcrumb-bg: rgba(255, 255, 255, 0.82);
  --auxi-breadcrumb-border: 1px solid rgba(226, 232, 240, 0.95);
  --auxi-breadcrumb-text: #94A3B8;
  --auxi-breadcrumb-text-hover: #475569;
  --auxi-breadcrumb-sep-color: #94a3b8;
  /* Panneau filtres / widgets latéraux : aligné colonne « Aujourd’hui » (menu général) */
  --auxi-widget-panel-bg: #ffffff;
  --auxi-widget-panel-shadow: var(--shadow-float);
  --auxi-widget-panel-border: 1px solid rgba(148, 163, 184, 0.28);
  /* Icônes sections filtres : violet tuiles (action) */
  --auxi-widget-section-icon: var(--accent-color);
  /* Badge compteur résultats (âge anniversaires) */
  --auxi-result-badge-text: #4527a0;
  /* Pilule : fond violet très clair (rappel badges « Aujourd’hui » / âge) */
  --auxi-result-badge-bg: linear-gradient(180deg, rgba(245, 242, 255, 0.98) 0%, rgba(238, 232, 255, 0.92) 100%);
  --auxi-result-badge-border: 1px solid rgba(109, 40, 217, 0.28);
  /* En-têtes tableaux = bleu nuit barre de navigation (Indigo) */
  --auxi-table-header-bg: #1a237e;
  --auxi-table-header-color: #ffffff;
  /* Dégradé proche de .template_accueil / .accueil (lightblue) pour transition post-login */
  --app-sky-gradient: linear-gradient(165deg, #a8d4e6 0%, #d4eef8 48%, #b8e0f0 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));
}

.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: 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(51, 51, 153, 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)
   --------------------------------------------------------------------------- */

.navbar.auxi-navbar-compact #menuUtilisateur + .dropdown-menu {
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 0.35rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  min-width: 13rem;
  background-color: #1e2128 !important;
}

.navbar.auxi-navbar-compact #menuUtilisateur + .dropdown-menu a.dropdown-item {
  padding: 12px 16px;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: #e2e8f0 !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: #cbd5e1 !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: #3f4451 !important;
  color: #ffffff !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: #ffffff !important;
}

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

.navbar.auxi-navbar-compact #menuUtilisateur + .dropdown-menu .auxi-nav-app-version.dropdown-item-text {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.6875rem !important;
  line-height: 1.4 !important;
  color: rgba(203, 213, 225, 0.78) !important;
  padding: 12px 16px 14px !important;
  margin-bottom: 0 !important;
  border-top: 1px solid #444 !important;
  user-select: none;
}

/* 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: #c2410c !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: #9a3412 !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 perle, tuiles blanches, accent bleu marine */
.template_accueil {
  background-color: var(--page-pearl) !important;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Menu général : colonne pleine hauteur sous le bandeau pour centrer le bloc titre + grille + pied */
body:has(.template_accueil.menu-general) > main {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--auxi-header-offset));
}

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;
  isolation: isolate;
  background: var(--auxi-app-bg-gradient);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  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) */
  --menu-tile-icon-stroke-base: 1.58;
  /* Largeur fixe d’une colonne tuile sur grille 1120px / 4 (gaps inclus) — centrage sans étirement */
  --menu-tile-fixed: 265px;
  /* Icônes tuiles non actives : gris assez foncé (~7:1 sur fond blanc tuile, WCAG AA) */
  --menu-tile-icon-muted: #475569;
}

/* 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 {
  background: #F4F7F9 !important;
}

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

html.auxi-front-home-active,
body.auxi-front-home-active {
  background: #F4F7F9 !important;
}

body.auxi-front-home-active > main {
  background: transparent !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.auxi-front-home-shell main.auxi-front-home .auxi-front-home__title {
  color: var(--auxi-table-header-bg) !important; /* Bleu nuit */
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}

.template_accueil.menu-general.auxi-front-home-shell main.auxi-front-home .auxi-front-home__cta-card {
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-float);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}

.template_accueil.menu-general.auxi-front-home-shell main.auxi-front-home .auxi-front-home__cta-card:hover,
.template_accueil.menu-general.auxi-front-home-shell main.auxi-front-home .auxi-front-home__cta-card:focus-within {
  box-shadow: var(--shadow-form-panel-hover);
  transform: translateY(-2px);
}

.template_accueil.menu-general.auxi-front-home-shell main.auxi-front-home .auxi-front-home__cta-link {
  color: var(--auxi-action-violet) !important;
}

.template_accueil.menu-general.auxi-front-home-shell main.auxi-front-home .auxi-front-home__cta-link i {
  color: var(--auxi-action-violet) !important;
}

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

/* Changement de rôle / contexte : fondu d’entrée du contenu menu général (back-office) */
@keyframes menu-general-main-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.template_accueil.menu-general > main#main-content:has(.menu-general-hero) {
  animation: menu-general-main-fade-in 0.3s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .template_accueil.menu-general > main#main-content:has(.menu-general-hero) {
    animation: none;
  }
}

.template_accueil main#main-content h2.text-center,
.template_accueil main#main-content h2,
.template_accueil .menu-general-title {
  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) */
.menu-general .menu-general-hero {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 0;
}

/* Titre menu général : centré sur la largeur combinée tuiles + colonne droite */
.template_accueil.menu-general .menu-general-title {
  max-width: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}

/* Tuiles pleine largeur + widget « Aujourd'hui » en dessous (viewport < 1200px, tablette) ; deux colonnes dès 1200px */
.menu-general .menu-general-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  /* Colonne tuiles + panneau droit : centrage vertical mutuel (mode restreint, peu de tuiles) */
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 0;
}

@media (min-width: 1200px) {
  .menu-general .menu-general-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  }
}

.menu-general .menu-general-layout__tiles {
  min-width: 0;
}

.menu-general .menu-general-layout__aside {
  min-width: 0;
  background-color: #ffffff;
  border-radius: var(--menu-tile-radius);
  box-shadow: var(--shadow-float);
  border: 1px solid rgba(148, 163, 184, 0.28);
  /* visible : overflow:hidden rognait les boutons d’anniversaire (marges négatives + coins arrondis) */
  overflow: visible;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  transition: none;
}

@media (min-width: 1200px) {
  .menu-general .menu-general-layout__aside {
    max-width: 22rem;
  }
}

/* Panneau droit : pas d’effet « tuile » au survol (bordure violette / ombre renforcée réservées aux tuiles) */
.menu-general .menu-general-layout__aside:hover {
  box-shadow: var(--shadow-float) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  transform: none !important;
}

.menu-general .menu-general-today-panel:hover {
  box-shadow: none !important;
}

.menu-general .menu-general-today-panel {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  padding: 1rem 1.1rem 1.15rem;
}

.menu-general .menu-general-today-panel__heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

/* 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-muted, #475569);
}

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

.menu-general .menu-general-birthdays__section-label {
  margin: 0;
  padding: 0;
  color: #333399 !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 violet] | [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;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.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.68rem;
  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: #cbd5e1;
  background: rgba(241, 245, 249, 0.9);
  border: 1px dashed rgba(203, 213, 225, 0.85);
}

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

.menu-general .menu-general-birthdays__action-btn {
  padding: 0.22rem 0.42rem;
  line-height: 1;
  /* Même violet que le liseré / bordure focus des tuiles (--menu-tile-border-hover) */
  color: var(--menu-tile-border-hover, #333399) !important;
  border-color: rgba(51, 51, 153, 0.42) !important;
  background-color: #fff !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: var(--menu-tile-border-hover, #333399) !important;
  border-color: rgba(51, 51, 153, 0.55) !important;
  background-color: rgba(51, 51, 153, 0.06) !important;
  box-shadow: none;
}

.menu-general .menu-general-birthdays__action-btn:focus-visible:not(.inactif):not(.disabled) {
  outline: 2px solid var(--menu-tile-border-hover, #333399);
  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: #cbd5e1 !important;
  border-color: rgba(203, 213, 225, 0.95) !important;
  border-style: dashed !important;
  background-color: rgba(241, 245, 249, 0.95) !important;
  box-shadow: none !important;
}

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

/* 1–3 tuiles : flex + justify-content center (ligne incomplète centrée) */
.menu-general .menu-general-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 1rem 1.25rem;
  max-width: 1120px;
  margin-inline: auto;
  padding: 0 0 1rem;
}

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

.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile {
  animation: menu-general-tile-fade-in 0.52s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(1) { animation-delay: 0.03s; }
.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(2) { animation-delay: 0.07s; }
.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(3) { animation-delay: 0.11s; }
.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(4) { animation-delay: 0.15s; }
.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(5) { animation-delay: 0.19s; }
.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(6) { animation-delay: 0.23s; }
.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(7) { animation-delay: 0.27s; }
.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(8) { animation-delay: 0.31s; }
.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(9) { animation-delay: 0.35s; }
.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(10) { animation-delay: 0.39s; }
.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(11) { animation-delay: 0.43s; }
.menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile:nth-child(12) { animation-delay: 0.47s; }

@media (prefers-reduced-motion: reduce) {
  .menu-general .menu-general-grid.menu-general-grid--enter > .card.thing.menu-tile {
    animation: none !important;
  }
}
.menu-general
  .menu-general-grid:not(.menu-general-grid--tiles-4):not(.menu-general-grid--tiles-many)
  > .card.thing.menu-tile {
  flex: 0 1 var(--menu-tile-fixed, 265px);
  width: var(--menu-tile-fixed, 265px);
  max-width: min(100%, var(--menu-tile-fixed, 265px));
}

/* Exactement 4 tuiles : grille 2×2 (repeat(2, 1fr)) */
.menu-general .menu-general-grid.menu-general-grid--tiles-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  gap: 1rem 1.25rem;
}

.menu-general .menu-general-grid.menu-general-grid--tiles-4 > .card.thing.menu-tile {
  width: 100%;
  max-width: none;
  min-width: 0;
  flex: initial;
}

/* >4 tuiles : bento 4 → 3 → 2 colonnes ; ≤479px : 1 colonne (mobile) */
.menu-general .menu-general-grid.menu-general-grid--tiles-many {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  max-width: 1120px;
  margin-inline: auto;
  padding: 0 0 1rem;
  width: 100%;
}

@media (max-width: 1199px) {
  .menu-general .menu-general-grid.menu-general-grid--tiles-many {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .menu-general .menu-general-grid.menu-general-grid--tiles-many {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
}

.menu-general .menu-general-grid.menu-general-grid--tiles-many > .card.thing.menu-tile {
  width: 100%;
  max-width: none;
  min-width: 0;
}

/* ≤479px : grilles 2×2 / bento en 1 colonne ; flex 1–3 tuiles pleine largeur ; titres centrés */
@media (max-width: 479px) {
  .menu-general
    .menu-general-grid:not(.menu-general-grid--tiles-4):not(.menu-general-grid--tiles-many)
    > .card.thing.menu-tile {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  /* Toutes les grilles : une colonne (1fr) — zones de clic pleine largeur */
  .menu-general .menu-general-grid.menu-general-grid--tiles-4,
  .menu-general .menu-general-grid.menu-general-grid--tiles-many {
    grid-template-columns: 1fr;
  }

  .template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-link {
    text-align: center;
    justify-items: center;
  }

  .template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing.menu-tile .card-title {
    text-align: center;
  }
}

/* Tuiles menu général : bordure gris clair → violet #333399 au survol, transition 0,2s */
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing.menu-tile {
  border-radius: var(--menu-tile-radius) !important;
  background-color: #ffffff !important;
  box-sizing: border-box;
  border: 2px solid var(--menu-tile-border-idle) !important;
  box-shadow: var(--shadow-float) !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease,
    backdrop-filter 0.2s ease;
  transform: translateY(0);
  padding-left: 0 !important;
  border-left-width: 2px !important;
  border-left-color: var(--menu-tile-border-idle) !important;
  outline: none;
  position: relative;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing.menu-tile.is-active {
  border: 2px solid rgba(51, 65, 85, 0.22) !important;
  border-left-color: rgba(51, 65, 85, 0.22) !important;
  background-color: #f8fafc !important;
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(241, 245, 249, 0.9);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing.menu-tile:hover,
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing.menu-tile:focus-within:has(.menu-tile-link:focus-visible) {
  border: 2px solid var(--menu-tile-border-hover) !important;
  border-left-color: var(--menu-tile-border-hover) !important;
  border-left-width: 2px !important;
  box-shadow:
    var(--shadow-menu-tile-hover),
    inset 0 2px 6px rgba(51, 51, 153, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
  transform: translateY(1px);
  z-index: 1;
  /* Glassmorphism léger : tuile semi-transparente + flou sur le fond perle */
  background-color: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(12px) saturate(1.12);
  -webkit-backdrop-filter: blur(12px) saturate(1.12);
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing.menu-tile.is-active:hover,
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing.menu-tile.is-active:focus-within:has(.menu-tile-link:focus-visible) {
  background-color: rgba(248, 250, 252, 0.88) !important;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing.menu-tile .card-body.center-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing.menu-tile .card-body.center-content .card-title {
  width: 100%;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing .lien-accueil,
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-link {
  color: var(--menu-accent) !important;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  display: grid !important;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr;
  align-items: stretch;
  justify-items: center;
  min-height: 6.25rem;
  gap: 0.35rem;
  padding: 0.5rem 0.35rem 0.45rem;
  border-radius: calc(var(--menu-tile-radius) - 4px);
  transition:
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

/* Carré 32×32px : toutes les icônes alignées sur la même grille optique */
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-icon-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin: 0 auto;
  align-self: center;
  grid-row: 1;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-icon-slot .menu-tile-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-link:focus,
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-link:focus-visible,
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-link:focus:not(:focus-visible),
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing .lien-accueil:focus,
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing .lien-accueil:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-link > span:not(.menu-tile-icon-slot) {
  grid-row: 2;
  align-self: center;
  text-align: center;
  line-height: 1.25;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-icon {
  color: var(--menu-tile-icon-muted, #475569);
  flex-shrink: 0;
  margin-bottom: 0 !important;
  transition: transform 0.2s ease, color 0.2s ease;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing.menu-tile.is-active .menu-tile-icon {
  color: var(--menu-accent);
}

/* Traits : base commune + rayons courts (admin) plus épais / traits parallèles (liste, compta) plus fins */
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-icon :is(path, circle, rect, line, polyline) {
  stroke-width: var(--menu-tile-icon-stroke-base);
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-icon.menu-tile-icon--weight-radial :is(path, circle, rect, line, polyline) {
  stroke-width: 2.05;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-icon.menu-tile-icon--weight-parallel :is(path, circle, rect, line, polyline) {
  stroke-width: 1.32;
}

/* Icône « groupe » : trait resserré visuellement vs compta (non-scaling-stroke + épaisseur légèrement supérieure) */
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-icon.menu-tile-icon--collective :is(path, circle, rect, line, polyline) {
  stroke-width: 1.42;
  vector-effect: non-scaling-stroke;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing .lien-accueil:hover,
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing .lien-accueil:focus,
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-link:hover,
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-link:focus {
  color: #0f172a !important;
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-link:hover .menu-tile-icon,
.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .menu-tile-link:focus-visible .menu-tile-icon {
  color: var(--accent-color) !important;
  transform: scale(1.06);
}

.template_accueil.menu-general .menu-general-layout__tiles .menu-general-grid .card.thing.menu-tile.is-active .lien-accueil {
  color: var(--menu-accent) !important;
}

/* ---------------------------------------------------------------------------
   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(92, 89, 243, 0.25);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}

#suggestions li:hover {
  background-color: rgba(92, 89, 243, 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(92, 89, 243, 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(--accent-color-deep) !important;
  border-color: var(--accent-color-deep) !important;
  color: #ffffff !important;
}

.autocomplete__input,
.autocomplete__hint {
  border-color: rgba(57, 54, 216, 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(--accent-color) !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(--accent-color) 0%, var(--accent-color-deep) 100%);
  border-color: var(--accent-color-deep) !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(57, 54, 216, 0.28);
}

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

.bouton-primaire:not(.disabled):focus,
#ys-dial-submit.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(92, 89, 243, 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 : violet 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),
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: #F3E8FF !important;
  border: 1px solid rgba(109, 40, 217, 0.18) !important;
  color: var(--auxi-action-violet) !important;
  box-shadow: 0 1px 4px rgba(69, 39, 160, 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) 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(--auxi-action-violet) !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),
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 : violet 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):hover,
main :is(a, button).update.btn:not(.disabled):not(.btn-light):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: #EDE9FE !important;
  border-color: rgba(109, 40, 217, 0.3) !important;
  filter: none;
}

.btn-action-icon {
  color: var(--auxi-action-violet) !important;
}

.btn-action-icon:hover {
  color: var(--auxi-action-violet-hover) !important;
}

/* Icônes de titre / illustration non cliquables : gris filaire (pas de violet) */
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));
}

/* 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__icon {
  margin-right: 0.35rem;
  vertical-align: -0.05em;
}

.auxi-auth-feedback-banner--error .auxi-auth-feedback-banner__surface {
  background-color: #d32f2f;
  color: #fff;
}

.auxi-auth-feedback-banner--success .auxi-auth-feedback-banner__surface {
  background-color: #2e7d32;
  color: #fff;
}

.auxi-auth-feedback-banner--warning .auxi-auth-feedback-banner__surface {
  background-color: #f57c00;
  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 violet 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: #333399 !important;
  background-color: rgba(51, 51, 153, 0.06) !important;
}

/* Champ mot de passe au focus : icône œil en violet 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: #333399 !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 violet très léger + icône violette (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(51, 51, 153, 0.18) !important;
  color: #6366f1 !important;
}

.card.texture .auxi-auth-reveal-toggler.btn:focus-visible i,
#connexion .auxi-auth-reveal-toggler.btn:focus-visible i {
  color: #6366f1 !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-blue) !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 #6366f1 !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 {
  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: #A32D2D !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-blue) !important;
  box-shadow: var(--ds-input-focus-glow);
  outline: 0;
}

/* Select : même silhouette que les inputs + chevron charte */
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-blue);
  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 #6366f1 !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: #134e2a !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(--accent-color) !important;
  background-image: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color-deep) 100%) !important;
  border: 1px solid var(--accent-color-deep) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(57, 54, 216, 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(--accent-color-deep) !important;
  background-image: none !important;
  border-color: var(--accent-color-deep) !important;
  filter: brightness(1.02);
  box-shadow: 0 6px 18px rgba(57, 54, 216, 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(57, 54, 216, 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(57, 54, 216, 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-blue) !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-blue);
  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(--accent-color-deep);
}

/* =============================================================================
   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: #3d4d63 !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: #3d4d63 !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: #dc3545 !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-blue) !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-blue);
  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(--accent-color-deep);
}

/* 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: 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='%233b82f6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  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(--accent-color-deep) !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(57, 54, 216, 0.18);
  transform: translateY(-2px);
  opacity: 1;
}

body:has(#form-creation-fiche) #btnAnnuler i,
body:has(#form-creation-fiche) #btnPrecedent i {
  color: var(--accent-color-deep) !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(--accent-color) 0%, #4f4ce8 52%, var(--accent-color-deep) 100%) !important;
  box-shadow:
    0 3px 10px -3px rgba(57, 54, 216, 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(57, 54, 216, 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;
  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(--blue-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(--accent-color);
  font-weight: 700;
}

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


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: #f1f5f9;
  color: #475569 !important;
  border-radius: 9999px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06);
  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%, #f8fbff 100%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
  color: #1a237e !important;
}

.modal-content .modal-header .modal-title,
.modal-content .modal-header h4,
.modal-content .modal-header h5 {
  color: #1a237e !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;
  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: #fcfdff;
  position: sticky;
  bottom: 0;
  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;
}

.modal-body.auxi-modal-body--caracteristiques #infosCaracteristiques [class*="col-"] {
  max-width: 100%;
}

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

/* 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: #dc2626 !important;
}

/* Champs formulaire : rayon + focus violet */
.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(--auxi-action-violet) !important;
  box-shadow: 0 0 0 0.2rem rgba(69, 39, 160, 0.18) !important;
}

/* Boutons footer : primaire violet / 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(--auxi-action-violet) !important;
  border-color: var(--auxi-action-violet) !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(--auxi-action-violet-hover) !important;
  border-color: var(--auxi-action-violet-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(--auxi-action-violet) !important;
  border-color: var(--auxi-action-violet) !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(--auxi-action-violet-hover) !important;
  border-color: var(--auxi-action-violet-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(--auxi-action-violet) !important;
  background: transparent !important;
  color: var(--auxi-action-violet) !important;
  line-height: 1;
}

.modal .auxi-incompat-selection-table .auxi-incompat-add-btn i {
  color: var(--auxi-action-violet) !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(--auxi-action-violet) !important;
  border-color: var(--auxi-action-violet) !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, violet
   --accent-color / --accent-color-deep, 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%;
}

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: 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;
}

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

main.auxi-data-workspace {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100dvh - var(--auxi-header-offset));
  padding-bottom: clamp(1rem, 3vh, 2.5rem);
  background: transparent;
  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;
}

/* 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 = violet identitaire */
main.auxi-data-workspace .nav-tabs .nav-link.active,
main.auxi-data-workspace .nav-tabs .nav-item.show .nav-link {
  color: #4527a0 !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: #94A3B8 !important;
  font-weight: 400;
  font-size: 0.8rem;
  text-decoration: none;
}

main.auxi-data-workspace .entete a[style*="#f26522"],
main.auxi-data-workspace .entete a[style*="#F26522"] {
  color: var(--accent-color-deep) !important;
}

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, #4527a0 0%, #311b92 100%) !important;
  border: 1px solid #311b92 !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(69, 39, 160, 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: #311b92 !important;
  background-image: none !important;
  border-color: #311b92 !important;
  filter: brightness(1.02);
  box-shadow: 0 6px 18px rgba(69, 39, 160, 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: var(--auxi-widget-section-icon);
}

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

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

/* Titres de sections filtres (colonne gauche) : violet identitaire, pas bleu UI */
main.auxi-data-workspace .auxi-filters-panel label.font-weight-bold,
main.auxi-data-workspace .panneau-filtres-recherche label.font-weight-bold {
  color: #4527a0 !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: #4527a0 !important;
}

main.auxi-data-workspace h5[style*="#f26522"],
main.auxi-data-workspace h5[style*="#F26522"] {
  color: #4527a0 !important;
}

main.auxi-data-workspace h5[style*="#f26522"] .fa-filter,
main.auxi-data-workspace h5[style*="#f26522"] i,
main.auxi-data-workspace h5[style*="#F26522"] i {
  color: #4527a0 !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: #F1EFE8 !important;
  color: #5F5E5A !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px !important;
  border-bottom: 0.5px solid #E5E3F0 !important;
  border-color: #E5E3F0 !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;
}

/* Compteur résultats — même esprit que badge âge « Aujourd'hui » */
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;
}

/* 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: #F1EFE8 !important;
  color: #5F5E5A !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px !important;
  border-bottom: 0.5px solid #E5E3F0 !important;
  border-color: #E5E3F0 !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;
}

/* Boutons recherche numéro bordereau (comptabilité) — même violet #4527A0 */
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, #4527a0 0%, #311b92 100%) !important;
  border: 1px solid #311b92 !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(69, 39, 160, 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: #311b92 !important;
  background-image: none !important;
  border-color: #311b92 !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 .bouton-pagination + #pagination-info-recherche,
.nav-btns #pagination-info-recherche + .bouton-pagination {
  margin-left: 0.35rem;
}

.nav-btns #pagination-info-recherche {
  margin-right: 0.35rem;
}

.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(--auxi-action-violet) !important;
  box-shadow: none !important;
}
.bouton-pagination:not(.disabled):not(:disabled):hover i,
.bouton-pagination:not(.disabled):not(:disabled):focus i {
  color: var(--auxi-action-violet) !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);
}

/* 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(--auxi-action-violet) !important;
  background: transparent !important;
  color: var(--auxi-action-violet) !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(--auxi-action-violet) !important;
  border-color: var(--auxi-action-violet) !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(--auxi-action-violet) !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(51, 51, 153, 0.14) 0%, rgba(51, 51, 153, 0.04) 100%) !important;
  box-shadow: inset 4px 0 0 rgba(51, 51, 153, 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(51, 51, 153, 0.18) 0%, rgba(51, 51, 153, 0.08) 100%) !important;
}

.auxi-mission-assign-selection-table .auxi-mission-open-fiche-tab.auxi-last-opened-btn {
  border-color: rgba(51, 51, 153, 0.95) !important;
  background: rgba(51, 51, 153, 0.18) !important;
  box-shadow: 0 0 0 2px rgba(51, 51, 153, 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 : suppression de l'orange — gris neutre ────────────────── */
main a[style*="color: #f26522"],
main a[style*="color:#f26522"],
main a[style*="color: #F26522"],
main a[style*="color:#F26522"],
main a[style*="color: #f26522;"],
main a[style*="color:#f26522;"] {
  color: #64748b !important;
}

main a[style*="color: #f26522"]:hover,
main a[style*="color:#f26522"]:hover,
main a[style*="color: #F26522"]:hover,
main a[style*="color:#F26522"]:hover {
  color: #4527a0 !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: #FFF7ED !important;
  border: 1px solid rgba(180, 83, 9, 0.22) !important;
  color: #9A3412 !important;
  box-shadow: 0 1px 4px rgba(180, 83, 9, 0.08) !important;
  font-weight: 500;
}

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

a#radier:hover,
button#radier:hover {
  background-color: #FEF3C7 !important;
  border-color: rgba(180, 83, 9, 0.4) !important;
  color: #7C2D12 !important;
}

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

a#deradier i,
button#deradier i {
  color: #16a34a !important;
}

a#deradier:hover,
button#deradier:hover {
  background-color: #DCFCE7 !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: #FEF2F2 !important;
  border: 1px solid rgba(220, 38, 38, 0.22) !important;
  color: #B91C1C !important;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.08) !important;
}

a#acces.acces-actif i,
button#acces.acces-actif i {
  color: #DC2626 !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(57, 54, 216, 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 .auxi-widget-panel,
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(92, 89, 243, 0.12), 0 0 0 1px rgba(92, 89, 243, 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(--accent-color);
  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(92, 89, 243, 0.14) !important;
}

/* ── 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 — gris moyen #94A3B8 */
main .entete a[aria-label*="Fil d'ariane"],
main .entete a[href^="/"] {
  color: #94A3B8 !important;
  font-size: 0.8rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s ease;
}

main .entete a[aria-label*="Fil d'ariane"]:hover,
main .entete a[href^="/"]:hover {
  color: #475569 !important;
  text-decoration: none;
}

/* Override inline style orange sur tous les liens breadcrumb */
main .entete a[style*="f26522"],
main .entete a[style*="F26522"],
main a[aria-label*="Fil d'ariane"][style] {
  color: #94A3B8 !important;
}

main .entete a[style*="f26522"]:hover,
main .entete a[style*="F26522"]:hover {
  color: #475569 !important;
}

/* ── 7. Séparateur breadcrumb auxi-breadcrumb-sep : style direct ───────────  */
.auxi-breadcrumb-sep {
  font-size: 0.78rem !important;
  color: #CBD5E1 !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(92, 89, 243, 0.12), 0 0 0 1px rgba(92, 89, 243, 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(139, 92, 246, 0.1) !important;
  border: none !important;
  box-shadow: none !important;
  color: #6d28d9 !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: #6d28d9 !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(139, 92, 246, 0.2) !important;
  border: none !important;
  box-shadow: none !important;
  color: #5b21b6 !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: #5b21b6 !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, violette, 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(--auxi-action-violet);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(69, 39, 160, 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 violet 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 violet — 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(109, 40, 217, 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(109, 40, 217, 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 #534AB7 · Inter · Flat · SaaS Premium
   Toutes les règles de cette section écrasent les couches antérieures.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Variables Design System ────────────────────────────────────────────── */
:root {
  --ds-brand:            #534AB7;
  --ds-brand-hover:      #3C3489;
  --ds-brand-light:      #EEEDFE;
  --ds-brand-border:     #CECBF6;

  --ds-success:          #639922;
  --ds-success-bg:       #EAF3DE;
  --ds-success-border:   #C0DD97;
  --ds-success-text:     #3B6D11;

  --ds-danger:           #A32D2D;
  --ds-danger-bg:        #FAE3E3;
  --ds-danger-border:    #E8B2B2;

  --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:         #F1EFE8;
  --ds-gray-200:         #E5E3F0;
  --ds-gray-300:         #D3D1C7;
  --ds-gray-400:         #B4B2A9;
  --ds-gray-500:         #888780;
  --ds-gray-700:         #5F5E5A;
  --ds-gray-900:         #1A1A1A;

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

  --ds-border-color:     #E5E3F0;
  --ds-border:           0.5px solid #E5E3F0;
  --ds-border-input:     0.5px solid #D3D1C7;

  --ds-focus-ring:       0 0 0 3px rgba(83, 74, 183, 0.20);

  --ds-sp-xs:            8px;
  --ds-sp-sm:            12px;
  --ds-sp-md:            16px;
  --ds-sp-lg:            24px;
  --ds-sp-xl:            32px;
}

/* ── 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 violet ─────────────────────── */
.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 violet 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(83,74,183,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 #F1EFE8, suppression fond sombre ────────────────────── */
.table thead th,
.table .thead-light th,
.table .thead-dark th,
table.table > thead > tr > th {
  background-color:  var(--ds-gray-100) !important;
  color:             var(--ds-gray-700) !important;
  font-size:         12px !important;
  font-weight:       500 !important;
  text-transform:    uppercase !important;
  letter-spacing:    0.04em !important;
  border-bottom:     var(--ds-border) !important;
  border-color:      var(--ds-border-color) !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:    none !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 — label uppercase 11px */
.card-header h4.card-title,
.card-header h3.card-title,
.card-header h2.card-title,
.card-header .card-title {
  font-size:      11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color:          var(--ds-gray-500) !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: #0E4980 !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 violet 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) !important; }
.text-info    { color: var(--ds-info) !important; }
.text-muted   { color: var(--ds-gray-500) !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-bc-bar { font-size: 13px !important; }
.auxi-bc-bar a,
.auxi-bc-bar a:link,
.auxi-bc-bar a:visited         { color: var(--ds-brand) !important; }
.auxi-bc-bar a:hover           { color: var(--ds-brand-hover) !important; }
.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 ───────────────────────────────────────── */
.template_accueil.menu-general .menu-general-layout__tiles .card.thing.menu-tile {
  border:        0.5px solid var(--ds-border-color) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow:    none !important;
}
.template_accueil.menu-general .menu-general-layout__tiles .card.thing.menu-tile:hover {
  border-color:     var(--ds-brand-border) !important;
  background-color: var(--ds-brand-light) !important;
  box-shadow:       none !important;
}
/* 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,
.auxi-composer-bar,
.auxi-sms-bar {
  background:  var(--ds-white) !important;
  border-top:  var(--ds-border) !important;
  box-shadow:  none !important;
}

/* ── 18. OBSERVATIONS — bloc monospace ───────────────────────────────────────── */
.auxi-obs-block,
.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(83, 74, 183, 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;
}

/* ── 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) ───────────────────────────────────── */
.auxi-sms-status-ok,
.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 {
  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;
}
.btn-outline-white:hover {
  background-color: var(--ds-brand-light) !important;
  border-color:     var(--ds-brand-border) !important;
  color:            var(--ds-brand) !important;
}

/* ── 27. Suppression box-shadow décoratif partout (hors focus-ring) ──────────── */
.card,
.card-header,
.card-body,
.table-responsive,
.modal-content,
.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:     flex;
  align-items: center;
  gap:         12px;
  padding:     10px 0 6px;
}
.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 violet 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 ─────────────────────────────────────── */
.menu-general-greeting {
  display:     block !important;
  text-align:  center !important;
  font-size:   16px !important;
  font-weight: 400 !important;
  color:       var(--ds-gray-700, #5F5E5A) !important;
  margin:      0 0 var(--ds-sp-md, 16px) !important;
  line-height: 1.5 !important;
  opacity:     1 !important;
  visibility:  visible !important;
}
.menu-general-greeting strong {
  font-weight: 500;
  color:       var(--ds-gray-900);
}

/* ── 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:     11px;
  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 — violet #534AB7 */
.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:       13px !important;
  font-weight:     400 !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; }
[class*="breadcrumb"] span[aria-hidden="true"] { color: #B4B2A9 !important; }

/* ── 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 #D3D1C7 !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(83,74,183,0.15) !important;
  outline:      none !important;
}
.modal textarea { height: auto !important; padding: 10px 12px !important; }

/* ── BLOC 2a/2b : thead dark — forcer #F1EFE8 partout incl. modales ─────────── */
table thead tr,
.modal table thead tr,
[role="dialog"] table thead tr,
.table thead tr,
.modal .table thead tr {
  background-color: #F1EFE8 !important;
}
table thead th,
.modal table thead th,
[role="dialog"] table thead th,
.table thead th,
.modal .table thead th {
  background-color: #F1EFE8 !important;
  color:            #5F5E5A !important;
  font-size:        12px !important;
  font-weight:      500 !important;
  text-transform:   uppercase !important;
  letter-spacing:   0.04em !important;
  border-bottom:    0.5px solid #E5E3F0 !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;
}

/* ── 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;
}
.tableau-resultat-caracteristiques table {
  border: none !important;
  background: transparent !important;
  display: block !important;
}
.tableau-resultat-caracteristiques thead tr:first-child {
  display: flex !important;
  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;
}
.tableau-resultat-caracteristiques thead tr:nth-child(2) {
  display: none !important;
}
.tableau-resultat-caracteristiques tbody {
  display:   flex !important;
  flex-wrap: wrap !important;
  gap:       8px !important;
  padding:   8px 0 !important;
  background: transparent !important;
}
.tableau-resultat-caracteristiques tbody tr {
  display: contents !important;
}
.tableau-resultat-caracteristiques tbody td {
  display:       inline-block !important;
  background:    #EEEDFE !important;
  color:         #3C3489 !important;
  font-size:     12px !important;
  padding:       4px 12px !important;
  border-radius: 99px !important;
  border:        0.5px solid #CECBF6 !important;
  white-space:   nowrap !important;
  height:        auto !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:      0.5px solid #CECBF6 !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: #EEEDFE !important; }
.auxi-user-avatar {
  width:           28px !important;
  height:          28px !important;
  border-radius:   50% !important;
  background:      #EEEDFE !important;
  color:           var(--ds-brand) !important;
  font-size:       11px !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: #F1EFE8 !important;
  color:            #5F5E5A !important;
}
.thead-dark th,
.thead-dark > tr > th,
table .thead-dark th {
  background-color: #F1EFE8 !important;
  color:            #5F5E5A !important;
  border-color:     #E5E3F0 !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:       #A32D2D !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) ────────────────────────────────── */
.auxi-breadcrumb-current {
  font-size:   13px;
  color:       var(--ds-gray-500);
  font-weight: 400;
  cursor:      default;
}

/* ── Breadcrumb hors auxi-data-workspace (ex. page d'accueil) ──────────── */
.auxi-breadcrumb-home {
  display:       flex !important;
  align-items:   center !important;
  gap:           0.4rem !important;
  padding:       0.4rem 1rem !important;
  margin-bottom: 0.25rem !important;
  background:    none !important;
  border:        none !important;
  box-shadow:    none !important;
}
.auxi-breadcrumb-current {
  font-size:   13px !important;
  color:       var(--ds-gray-500, #94A3B8) !important;
  font-weight: 400 !important;
  cursor:      default !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   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 #E5E3F0 !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: #F1EFE8 !important;
  border-bottom:    0.5px solid #E5E3F0 !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: #5F5E5A !important;
}

/* Message corps de modale */
.modal-body p,
.modal-body > p:first-child {
  font-size:     14px !important;
  color:         #444441 !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 #D3D1C7 !important;
  border-radius: 8px !important;
  background:    transparent !important;
  color:         #5F5E5A !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:    #534AB7 !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:    #B91C1C !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: #F1EFE8 !important;
  color:            #5F5E5A !important;
  border-color:     #E5E3F0 !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:           #534AB7 !important;
  font-size:       13px !important;
  text-decoration: none !important;
  font-weight:     400 !important;
}
.auxi-breadcrumb-bar a:hover,
.auxi-breadcrumb-bar .breadcrumb-link:hover,
a.breadcrumb-link:hover {
  text-decoration: underline !important;
  color:           #534AB7 !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-current,
.auxi-breadcrumb-bar > span:last-child:not([aria-hidden]) {
  color:       #888780 !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 #E5E3F0 !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: #F8F6EF !important;
  border-bottom:    0.5px solid #E5E3F0 !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: #5F5E5A !important;
}

/* Corps de modale */
.modal-body p {
  font-size:   14px !important;
  color:       #444441 !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 #D3D1C7 !important;
  border-radius: 8px !important;
  background:    transparent !important;
  color:         #5F5E5A !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:    #534AB7 !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:    #A32D2D !important;
  color:         #ffffff !important;
  font-size:     14px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ORDRE 3 — THEAD GLOBAL : beige #F1EFE8 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: #F1EFE8 !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: #F1EFE8 !important;
  color:            #5F5E5A !important;
  font-size:        12px !important;
  font-weight:      500 !important;
  text-transform:   uppercase !important;
  letter-spacing:   0.04em !important;
  padding:          10px 12px !important;
  border-bottom:    0.5px solid #E5E3F0 !important;
  border-color:     #E5E3F0 !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 #D3D1C7 !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: #534AB7 !important;
  box-shadow:   0 0 0 3px rgba(83, 74, 183, 0.15) !important;
  outline:      none !important;
}

/* Exclure les pill-toggles (rester en rounded-full) */
input.pill-toggle,
input[type="radio"].pill-toggle,
.auxi-toggle-pill input,
.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:           #534AB7 !important;
  font-size:       13px !important;
  text-decoration: none !important;
}
a.breadcrumb-link:hover,
.breadcrumb-link[href]:hover {
  text-decoration: underline !important;
}