/* ============================================================
   Solistic — couche thème "clair moderne / IA"
   Surcouche autonome chargée APRÈS styles.min.css (Bootstrap 5).
   Aucune dépendance externe, police système. Réversible :
   retirer le <link> de cette feuille = retour à l'état d'origine.
   ============================================================ */

:root {
  /* Palette Solistic — terracotta, 4 déclinaisons :
     dark #6f3419 · base #a34f24 · mid #c2693a · light #e0936b
     (rgb : 111,52,25 · 163,79,36 · 194,105,58 · 224,147,107) */
  --c-dark:  #6f3419;
  --c-base:  #a34f24;
  --c-mid:   #c2693a;
  --c-light: #e0936b;

  /* Alias internes (les noms --ai-* sont conservés pour ne rien casser) */
  --ai-indigo: var(--c-base);
  --ai-indigo-600: #8a4220;   /* hover : entre dark et base */
  --ai-indigo-700: var(--c-dark);
  --ai-violet: var(--c-mid);
  --ai-cyan: var(--c-light);
  --ai-grad: linear-gradient(135deg, var(--c-base) 0%, var(--c-mid) 55%, var(--c-light) 100%);
  --ai-grad-soft: linear-gradient(135deg, rgba(163,79,36,.12), rgba(224,147,107,.12));

  /* Tokens design */
  --ai-radius: .9rem;
  --ai-radius-sm: .6rem;
  --ai-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -8px rgba(111,52,25,.20);
  --ai-shadow-lg: 0 10px 40px -12px rgba(111,52,25,.38);
  --ai-ring: 0 0 0 .25rem rgba(163,79,36,.25);
  --ai-bg: #faf7f4;
  --ai-surface: #ffffff;
  --ai-border: rgba(60,30,12,.10);
  --ai-text: #2b2018;
  --ai-muted: #8a7d72;

  /* Surcharge des variables Bootstrap */
  --bs-primary: var(--ai-indigo);
  --bs-primary-rgb: 163, 79, 36;
  --bs-link-color: var(--ai-indigo-600);
  --bs-link-color-rgb: 138, 66, 32;
  --bs-link-hover-color: var(--ai-indigo-700);
  --bs-border-radius: var(--ai-radius-sm);
  --bs-border-radius-lg: var(--ai-radius);
  --bs-body-color: var(--ai-text);
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--ai-text);
  background-color: var(--ai-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fond mesh clair animé très subtil --------------------------------- */
.ai-mesh {
  position: relative;
  min-height: 100vh;
  background-color: var(--ai-bg);
  overflow: hidden;
}
.ai-mesh::before,
.ai-mesh::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 46vw;
  height: 46vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
}
.ai-mesh::before {
  top: -12vw; left: -8vw;
  background: radial-gradient(circle at 30% 30%, rgba(163,79,36,.55), transparent 70%);
  animation: ai-float-1 16s ease-in-out infinite alternate;
}
.ai-mesh::after {
  bottom: -14vw; right: -10vw;
  background: radial-gradient(circle at 70% 70%, rgba(224,147,107,.45), transparent 70%);
  animation: ai-float-2 20s ease-in-out infinite alternate;
}
@keyframes ai-float-1 { to { transform: translate(40px, 30px) scale(1.1); } }
@keyframes ai-float-2 { to { transform: translate(-30px, -40px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  .ai-mesh::before, .ai-mesh::after { animation: none; }
}

/* Cartes -------------------------------------------------------------- */
.card {
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius);
  box-shadow: var(--ai-shadow);
  background: var(--ai-surface);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover { box-shadow: var(--ai-shadow-lg); }

/* Carte "glass" pour la connexion */
.ai-glass {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--ai-shadow-lg);
  animation: ai-rise .6s cubic-bezier(.21,1.02,.73,1) both;
}
@keyframes ai-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Liseré dégradé en haut de la carte de login */
.ai-glass::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  border-radius: 1.25rem 1.25rem 0 0;
  background: var(--ai-grad);
}

/* Boutons ------------------------------------------------------------- */
.btn {
  border-radius: var(--ai-radius-sm);
  font-weight: 600;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary {
  --bs-btn-bg: var(--ai-indigo);
  --bs-btn-border-color: var(--ai-indigo);
  --bs-btn-hover-bg: var(--ai-indigo-600);
  --bs-btn-hover-border-color: var(--ai-indigo-600);
  --bs-btn-active-bg: var(--ai-indigo-700);
  border: none;
  background-image: var(--ai-grad);
  background-size: 160% 160%;
  box-shadow: 0 6px 18px -6px rgba(163,79,36,.6);
}
.btn-primary:hover {
  transform: translateY(-1px);
  filter: saturate(1.1);
  box-shadow: 0 10px 26px -8px rgba(163,79,36,.75);
  background-position: 100% 0;
}
.btn-primary:active { transform: translateY(0); }
.btn-outline-primary {
  --bs-btn-color: var(--ai-indigo-600);
  --bs-btn-border-color: var(--ai-indigo);
  --bs-btn-hover-bg: var(--ai-indigo);
  --bs-btn-hover-border-color: var(--ai-indigo);
}

/* Champs de formulaire ----------------------------------------------- */
.form-control, .form-select {
  border-radius: var(--ai-radius-sm);
  border-color: var(--ai-border);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ai-indigo);
  box-shadow: var(--ai-ring);
}
.input-group-text {
  border-radius: var(--ai-radius-sm);
  background: var(--ai-grad-soft);
  border-color: var(--ai-border);
  color: var(--ai-indigo-600);
}
.form-check-input:checked {
  background-color: var(--ai-indigo);
  border-color: var(--ai-indigo);
}
.form-check-input:focus { box-shadow: var(--ai-ring); border-color: var(--ai-indigo); }

/* En-tête / navigation ----------------------------------------------- */
.ai-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(163,79,36,.10), transparent 55%),
    radial-gradient(120% 160% at 100% 0%, rgba(224,147,107,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,251,248,.96), rgba(250,240,232,.88));
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  border-bottom: 1px solid rgba(163,79,36,.14);
  box-shadow: 0 10px 30px -18px rgba(111,52,25,.55), inset 0 1px 0 rgba(255,255,255,.6);
}
/* Liseré dégradé sous le header */
.ai-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--ai-grad);
  opacity: .9;
}
/* Le logo se détache un peu */
.ai-header img { filter: drop-shadow(0 4px 10px rgba(111,52,25,.18)); }
.ai-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin: 0 .15rem;
  border-radius: var(--ai-radius-sm);
  color: var(--ai-indigo-600) !important;
  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.ai-nav-link i { font-size: 1.6rem !important; color: inherit !important; }
.ai-nav-link:hover {
  background: var(--ai-grad-soft);
  transform: translateY(-1px);
  box-shadow: var(--ai-shadow);
}
.ai-nav-link.active {
  color: #fff !important;
  background-image: var(--ai-grad);
}

/* Pills de navigation icône + label (header) */
.ai-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1;
  color: var(--ai-indigo-600);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.ai-pill i { font-size: 1.15rem; }
.ai-pill:hover {
  color: var(--ai-indigo-700);
  background: var(--ai-grad-soft);
  border-color: var(--ai-border);
  transform: translateY(-1px);
  box-shadow: var(--ai-shadow);
}
.ai-pill.active {
  color: #fff;
  background-image: var(--ai-grad);
  box-shadow: 0 6px 18px -6px rgba(163,79,36,.55);
}
/* Action de sortie : neutre, vire au rouge au survol */
.ai-pill-exit { color: var(--ai-muted); }
.ai-pill-exit:hover {
  color: #b42318;
  background: rgba(217,45,32,.08);
}
@media (max-width: 575.98px) {
  .ai-pill span { display: none; }   /* sur mobile : icônes seules */
  .ai-pill { padding: .5rem; }
}

/* Titres dégradés (accent IA) ---------------------------------------- */
.ai-gradient-text {
  background: var(--ai-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tables -------------------------------------------------------------- */
.table { --bs-table-hover-bg: rgba(163,79,36,.06); }
.table > thead th,
table.dataTable > thead th,
table.dataTable > thead td {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--ai-indigo-700);
  background: linear-gradient(180deg, rgba(163,79,36,.10), rgba(163,79,36,.03));
  border-bottom: 2px solid rgba(163,79,36,.35) !important;
  padding-top: .7rem;
  padding-bottom: .7rem;
}
/* tri DataTables : flèches en teinte indigo */
table.dataTable > thead .dt-orderable-asc span.dt-column-order,
table.dataTable > thead .dt-orderable-desc span.dt-column-order { color: var(--ai-indigo); }
.table-bordered, .table { border-color: var(--ai-border); }

/* Badges & divers ----------------------------------------------------- */
.badge.bg-primary { background-image: var(--ai-grad) !important; }
.modal-content { border: 1px solid var(--ai-border); border-radius: var(--ai-radius); }
.nav-tabs .nav-link.active { color: var(--ai-indigo-600); border-bottom-color: var(--ai-indigo); }
a { color: var(--ai-indigo-600); }
a:hover { color: var(--ai-indigo-700); }
::selection { background: rgba(163,79,36,.25); }

/* Barre d'outils de recherche (navbar bg-body-tertiary) -------------- */
.navbar.bg-body-tertiary {
  background: var(--ai-grad-soft) !important;
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius);
  margin: .6rem;
  box-shadow: var(--ai-shadow);
}
.btn.bg-blue-grey {
  background: #fff;
  border: 1px solid var(--ai-border);
  color: var(--ai-indigo-600);
}
.btn.bg-blue-grey:hover {
  background: var(--ai-grad);
  border-color: transparent;
  color: #fff;
}

/* Onglets (nav-tabs) -------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--ai-border); }
.nav-tabs .nav-link {
  color: var(--ai-muted);
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--ai-radius-sm) var(--ai-radius-sm) 0 0;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.nav-tabs .nav-link:hover { color: var(--ai-indigo-600); background: var(--ai-grad-soft); }
.nav-tabs .nav-link.active {
  color: var(--ai-indigo-700);
  background: transparent;
  border-bottom-color: var(--ai-indigo);
}

/* Filtre "range" (range_archive : Sans -> Seulement) ----------------- */
.input_range { display: inline-flex; flex-direction: column; gap: .2rem; vertical-align: middle; }
.input_range > label {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ai-muted);
}
input[type=range].checkbox_range,
input[type=range].value_range {
  -webkit-appearance: none;
  appearance: none;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #9aa0a6 0%, #DE0C0C 100%);
  outline: none;
  cursor: pointer;
}
input[type=range].checkbox_range::-webkit-slider-thumb,
input[type=range].value_range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--ai-indigo);
  box-shadow: 0 2px 6px rgba(16,24,40,.25);
  cursor: pointer;
}
input[type=range].checkbox_range::-moz-range-thumb,
input[type=range].value_range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--ai-indigo);
  cursor: pointer;
}
.checkbox_range_info {
  font-size: .72rem;
  font-weight: 700;
  color: var(--ai-indigo-700);
}

/* Fiche projet : cards uniformes ------------------------------------- */
/* Le padding vient uniquement du tab-pane interne (1rem), pas du card-body,
   pour éviter le double padding sur certaines cards. */
#card_projet, #card_electric, #card_instal { padding: 0 !important; }
#card_projet > .tab-content > .tab-pane,
#card_electric > .tab-content > .tab-pane,
#card_instal > .tab-content > .tab-pane {
  padding: 1rem;
}
/* La carte (onglet PLAN) reste pleine largeur, sans padding */
#panel_geoportail { padding: 0 !important; }
#panel_geoportail #zone_map { border-radius: 0; }