/* ════════════════════════════════════════════════════════════════════════
   Design System — collectivites-ellipses.fr
   Harmonisation globale : inputs, boutons, nav, dropdowns, accordéons
════════════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────────── */
:root {
  --ds-primary:        #2563eb;
  --ds-primary-hover:  #1d4ed8;
  --ds-primary-light:  rgba(37,99,235,.1);
  --ds-surface:        #ffffff;
  --ds-surface-muted:  #f9fafb;
  --ds-border:         #d1d5db;
  --ds-text:           #111827;
  --ds-muted:          #6b7280;
  --ds-radius:         8px;
  --ds-radius-sm:      6px;
  --ds-radius-lg:      12px;
  --ds-shadow-sm:      0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --ds-shadow:         0 4px 16px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.06);
  --ds-transition:     0.15s ease;
  --ds-nav-bg:         #0f2942;
  --ds-nav-link:       rgba(255,255,255,.82);
  --ds-nav-active:     #ffffff;
}

/* ── Override des variables Bootstrap (gère automatiquement les input-group) ─
   Bootstrap 5.3 utilise ces variables pour border-radius sur .form-control,
   .btn, .input-group-text et les coins des groupes.
   Pas besoin de !important ni de règles manuelles first/last-child.
─────────────────────────────────────────────────────────────────────────── */
:root {
  --bs-border-radius:    8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 16px;
}

/* ── Inputs & selects ───────────────────────────────────────────────── */
.form-control,
.form-select {
  border-radius: var(--ds-radius);   /* last-in-cascade → bat app.css hardcoded */
  border-color: var(--ds-border);
  font-size: .875rem;
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
  /* Dans un .input-group, Bootstrap CDN zerote les coins selon position
     (ses sélecteurs ont spécificité plus haute que .form-control) */
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ds-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
}
.form-control-sm,
.form-select-sm { font-size: .8125rem; }
.form-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ds-muted);
  margin-bottom: .3rem;
}

/* ── Supprimer les flèches des inputs number ────────────────────────── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* ── Boutons ────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--ds-radius);   /* last-in-cascade → bat app.css */
  font-weight: 500;
  font-size: .875rem;
  letter-spacing: .01em;
  transition: all var(--ds-transition);
}
.btn-primary  { background: var(--ds-primary); border-color: var(--ds-primary); }
.btn-primary:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }

/* ── input-group-text (icônes, €, %, etc.) ─────────────────────────── */
.input-group-text {
  border-radius: var(--ds-radius);   /* Bootstrap CDN zerote les coins selon position */
  font-size: .875rem;
  background: #f9fafb;
  border-color: var(--ds-border);
  color: var(--ds-muted);
  /* alignement vertical impeccable avec l'input */
  display: flex;
  align-items: center;
  line-height: 1.5;
}

/* ── FIX : app.css impose max-width:20rem + width:17rem sur .form-control,
   ce qui empêche l'input de remplir l'input-group → icône/bouton décalés.
   On rétablit le comportement flex normal des champs DANS un input-group. ── */
.input-group > .form-control,
.input-group > .form-select {
  max-width: none !important;
  width: 1% !important;
  flex: 1 1 auto !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .input-group > .form-control,
  .input-group > .form-select { width: 1% !important; }
}

/* Tous les enfants d'un input-group à la même hauteur, sans décalage */
.input-group { align-items: stretch; }
.input-group > .btn,
.input-group > .input-group-text,
.input-group > .form-control,
.input-group > .form-select {
  margin: 0;                /* annule d'éventuelles marges héritées */
}

/* Focus visible dans un input-group */
.input-group:focus-within .input-group-text {
  border-color: var(--ds-primary);
}
.input-group > .form-control:focus,
.input-group > .form-select:focus { z-index: 3; }

/* ── Wrapper fixe (header + navbar toujours visibles) ───────────────── */
.site-header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* ── Header top bar ─────────────────────────────────────────────────── */
.header {
  background: var(--ds-surface);
  border-bottom: 1px solid #e5e7eb;
}
.mainLogo {
  padding: .5rem 1.5rem;
  gap: 1rem;
}
.logoCollectivites {
  height: 44px !important;
  width: auto !important;
  max-width: 220px !important;
}

/* ── Navbar ─────────────────────────────────────────────────────────── */
.header .navbar,
.navbar.ds-nav {
  background: var(--ds-nav-bg) !important;
  padding: 0 1.5rem;
  min-height: 46px;
  border: none !important;
}
.ds-nav .navbar-nav { align-items: center; }

.header .navbar .nav-link,
.ds-nav .nav-link {
  position: relative;
  color: var(--ds-nav-link) !important;
  font-size: .84rem;
  font-weight: 500;
  padding: .7rem .85rem !important;
  margin: 0 .1rem;
  text-decoration: none !important;
  border: none !important;
  border-radius: 0;
  transition: color var(--ds-transition);
  white-space: nowrap;
}
/* Indicateur actif : barre accent fine sous le lien (intentionnelle) */
.header .navbar .nav-link::after,
.ds-nav .nav-link::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background var(--ds-transition);
}
.header .navbar .nav-link:hover,
.ds-nav .nav-link:hover {
  color: var(--ds-nav-active) !important;
}
.header .navbar .nav-link:hover::after,
.ds-nav .nav-link:hover::after {
  background: rgba(255,255,255,.35);
}
.header .navbar .nav-link.active,
.ds-nav .nav-link.active {
  color: var(--ds-nav-active) !important;
  font-weight: 600;
}
.header .navbar .nav-link.active::after,
.ds-nav .nav-link.active::after {
  background: #fff;
}

/* ── FIX : app.css force `.nav-link { color: white }` globalement (hack navbar).
   Résultat : les onglets .nav-tabs/.nav-pills hors navbar sont blancs sur blanc.
   On rétablit une couleur lisible pour ces composants. ── */
.nav-tabs .nav-link,
.nav-pills .nav-link {
  color: #475569 !important;
  border-bottom: none;
}
.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  color: var(--ds-primary) !important;
  border-bottom: none;
  background: #f8fafc;
}
.nav-tabs .nav-link.active {
  color: var(--ds-primary) !important;
  background: #fff;
  font-weight: 600;
  border-color: #dee2e6 #dee2e6 #fff;
}
.nav-pills .nav-link.active {
  color: #fff !important;            /* pill actif = fond coloré → texte blanc OK */
  background: var(--ds-primary);
}

/* ── Zone utilisateur (bandeau header blanc) ─────────────────────────
   N.B. : cet élément est dans le top-bar blanc, PAS dans la navbar sombre
─────────────────────────────────────────────────────────────────────── */
.user-area {
  color: var(--ds-text) !important;      /* texte sombre sur fond blanc */
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .75rem;
  border-radius: var(--ds-radius-sm);
  transition: all var(--ds-transition);
  cursor: pointer;
}
.user-area:hover {
  color: var(--ds-primary) !important;
  background: var(--ds-primary-light);
}
.user-area p { margin: 0; }
.navbar-toggler {
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: var(--ds-radius-sm) !important;
  padding: .3rem .5rem !important;
}
.navbar-toggler-icon { filter: invert(1) brightness(2); }

/* ── Barre de recherche dans la nav ─────────────────────────────────── */
.nav-search-wrap { position: relative; }
.nav-search-wrap .input-group { width: 290px; }

.nav-search-wrap .form-control {
  background: rgba(255,255,255,.11) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-right: none !important;
  color: #fff !important;
  font-size: .8125rem !important;
  border-radius: var(--ds-radius) 0 0 var(--ds-radius) !important;
  height: 34px;
  min-height: 34px;
}
.nav-search-wrap .form-control::placeholder { color: rgba(255,255,255,.45) !important; }
.nav-search-wrap .form-control:focus {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.45) !important;
  box-shadow: none !important;
  color: #fff !important;
}
.nav-search-wrap .btn-nav-search {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-left: none !important;
  color: rgba(255,255,255,.9) !important;
  border-radius: 0 var(--ds-radius) var(--ds-radius) 0 !important;
  padding: 0 .85rem;
  height: 34px;
  min-height: 34px;
  display: flex;
  align-items: center;
  transition: background var(--ds-transition);
}
.nav-search-wrap .btn-nav-search:hover {
  background: rgba(255,255,255,.26) !important;
  color: #fff !important;
}

/* ── Dropdown autocomplete ──────────────────────────────────────────── */
#searchDropdown {
  background: var(--ds-surface);
  border: 1px solid #e5e7eb !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow) !important;
  overflow: hidden;
}
#searchDropdown a { transition: background var(--ds-transition); }
#searchDropdown a:hover { background: var(--ds-surface-muted) !important; }
#searchDropdown a:last-child { border-bottom: none !important; }

/* ── Dropdown menus ──────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid #e5e7eb !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow) !important;
  padding: .35rem !important;
  font-size: .875rem;
}
.dropdown-item {
  border-radius: var(--ds-radius-sm) !important;
  font-size: .875rem;
  padding: .44rem .75rem !important;
  color: var(--ds-text);
  transition: background var(--ds-transition), color var(--ds-transition);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: #f3f4f6 !important;
  color: var(--ds-text) !important;
}
.dropdown-divider { margin: .25rem 0 !important; border-color: #e5e7eb !important; }

/* ── Accordéons ─────────────────────────────────────────────────────── */
.accordion-button {
  font-weight: 600;
  font-size: .88rem;
}
.accordion-button:not(.collapsed) {
  color: var(--ds-primary);
  background: var(--ds-primary-light);
  box-shadow: none;
}
.accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
  border-color: transparent;
}
.accordion-item {
  border-color: #e5e7eb;
  border-radius: var(--ds-radius) !important;
  overflow: hidden;
  margin-bottom: .25rem;
}
.accordion-item:not(:last-child) { border-radius: var(--ds-radius) !important; }

/* ── Tables ─────────────────────────────────────────────────────────── */
.table { font-size: .875rem; }
.table thead th {
  font-weight: 600;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ds-muted);
  border-bottom-width: 1px;
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.table-hover > tbody > tr:hover > * { background-color: #f0f7ff; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.card {
  border-color: #e5e7eb;
  border-radius: var(--ds-radius-lg) !important;
}
.card-header {
  border-bottom-color: #e5e7eb;
  background: var(--ds-surface-muted) !important;
  font-size: .875rem;
}

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge { font-weight: 600; letter-spacing: .02em; }

/* ── Alerts ─────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--ds-radius-lg) !important;
  font-size: .875rem;
  border: none;
}
.alert-success  { background: #f0fdf4; color: #166534; }
.alert-danger   { background: #fef2f2; color: #991b1b; }
.alert-warning  { background: #fffbeb; color: #92400e; }
.alert-info     { background: #eff6ff; color: #1e40af; }

/* ── Form switch (dark mode toggle) ─────────────────────────────────── */
.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.form-switch .form-check-input:checked { background-color: var(--ds-primary); border-color: var(--ds-primary); }

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal-content { border-radius: var(--ds-radius-xl) !important; border: none; box-shadow: var(--ds-shadow); }
.modal-header  { border-bottom-color: #e5e7eb; }
.modal-footer  { border-top-color: #e5e7eb; }

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 7px; height: 7px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #d1d5db; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }