/*
 * ILIA Bootstrap 5 Theme (scoped)
 * ---------------------------------------------------------
 * Objectif: améliorer l'ambiance visuelle sans casser la structure existante.
 * Portée: uniquement sous .ilia-app-shell / .ilia-app-frame.
 */

.ilia-app-shell {
  --ilia-ink: #1d2936;
  --ilia-ink-soft: #4b5b70;
  --ilia-brand: #0f766e;
  --ilia-brand-soft: #14b8a6;
  --ilia-accent: #f59e0b;
  --ilia-surface: rgba(255, 255, 255, 0.84);
  --ilia-surface-strong: rgba(255, 255, 255, 0.94);
  --ilia-border: rgba(15, 23, 42, 0.12);
  --ilia-border-strong: rgba(15, 23, 42, 0.2);
  --ilia-shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.08);
  --ilia-shadow-md: 0 18px 44px rgba(15, 23, 42, 0.12);
  --ilia-focus: rgba(20, 184, 166, 0.3);
  --ilia-focus-strong: rgba(15, 118, 110, 0.45);

  position: relative;
  padding: clamp(1rem, 2.6vw, 2rem) 0;
  min-height: clamp(58vh, 70vh, 80vh);
  color: var(--ilia-ink);
}

.ilia-app-shell::before,
.ilia-app-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.ilia-app-shell::before {
  background:
    radial-gradient(1200px 520px at 6% 3%, rgba(251, 191, 36, 0.23), transparent 66%),
    radial-gradient(1000px 500px at 95% 10%, rgba(45, 212, 191, 0.19), transparent 65%),
    radial-gradient(1200px 760px at 50% 100%, rgba(59, 130, 246, 0.15), transparent 72%),
    linear-gradient(180deg, #f8fafc 0%, #f5f7fb 44%, #f8fafc 100%);
}

.ilia-app-shell::after {
  opacity: 0.22;
  background-image: repeating-linear-gradient(
    -35deg,
    rgba(15, 23, 42, 0.03) 0,
    rgba(15, 23, 42, 0.03) 2px,
    transparent 2px,
    transparent 16px
  );
}

.ilia-app-shell .ilia-app-frame {
  position: relative;
  padding: clamp(0.95rem, 1.7vw, 1.4rem);
  border-radius: clamp(1rem, 1.6vw, 1.35rem);
  border: 1px solid var(--ilia-border);
  background: var(--ilia-surface);
  box-shadow: var(--ilia-shadow-md);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}

/*
 * Bootstrap modal safety:
 * certaines modales vivent dans des wrappers avec effets visuels (backdrop-filter)
 * qui créent des contextes d'empilement et peuvent bloquer l'interaction.
 * Ce garde-fou garantit une hiérarchie modal/backdrop stable.
 */
body .modal-backdrop {
  z-index: 1990;
}

body .modal {
  z-index: 2000;
}

@supports not ((backdrop-filter: blur(2px))) {
  .ilia-app-shell .ilia-app-frame {
    background: var(--ilia-surface-strong);
  }
}

/* Typographie et lisibilité */
.ilia-app-shell h1,
.ilia-app-shell h2,
.ilia-app-shell h3,
.ilia-app-shell h4,
.ilia-app-shell h5,
.ilia-app-shell h6 {
  color: #0f172a;
  letter-spacing: 0.01em;
}

.ilia-app-shell h1 {
  font-size: clamp(1.38rem, 1.6vw + 0.9rem, 2.05rem);
}

.ilia-app-shell .lead,
.ilia-app-shell .text-muted,
.ilia-app-shell .form-text,
.ilia-app-shell small {
  color: var(--ilia-ink-soft);
}

/* Cartes */
.ilia-app-shell .card {
  border-radius: 1rem;
  border: 1px solid var(--ilia-border);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--ilia-shadow-sm);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.ilia-app-shell .card:hover {
  border-color: var(--ilia-border-strong);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.ilia-app-shell .card-header,
.ilia-app-shell .card-footer {
  background: rgba(248, 250, 252, 0.75);
  border-color: var(--ilia-border);
}

/* Boutons */
.ilia-app-shell .btn {
  border-radius: 0.75rem;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ilia-app-shell .btn:hover {
  transform: translateY(-1px);
}

.ilia-app-shell .btn:active {
  transform: translateY(0);
}

.ilia-app-shell .btn:focus-visible,
.ilia-app-shell .btn-check:focus + .btn,
.ilia-app-shell .btn-check:checked + .btn:focus-visible {
  box-shadow: 0 0 0 0.22rem var(--ilia-focus);
}

/* Formulaires */
.ilia-app-shell .form-control,
.ilia-app-shell .form-select,
.ilia-app-shell .input-group-text,
.ilia-app-shell textarea,
.ilia-app-shell select,
.ilia-app-shell input[type="text"],
.ilia-app-shell input[type="search"],
.ilia-app-shell input[type="email"],
.ilia-app-shell input[type="number"],
.ilia-app-shell input[type="password"] {
  border-radius: 0.72rem;
  border-color: rgba(15, 23, 42, 0.18);
  background-color: rgba(255, 255, 255, 0.97);
}

.ilia-app-shell .input-group-text {
  color: var(--ilia-ink-soft);
  background-color: rgba(248, 250, 252, 0.95);
}

.ilia-app-shell .form-control:focus,
.ilia-app-shell .form-select:focus,
.ilia-app-shell textarea:focus,
.ilia-app-shell input:focus,
.ilia-app-shell select:focus {
  border-color: rgba(20, 184, 166, 0.55);
  box-shadow: 0 0 0 0.24rem var(--ilia-focus);
}

.ilia-app-shell .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem var(--ilia-focus);
}

.ilia-app-shell .form-check-input:checked {
  background-color: var(--ilia-brand);
  border-color: var(--ilia-brand);
}

/* Badges / pills */
.ilia-app-shell .badge {
  border-radius: 999px;
  letter-spacing: 0.01em;
}

/* Nav / tabs */
.ilia-app-shell .nav-link {
  border-radius: 0.62rem;
}

.ilia-app-shell .nav-pills .nav-link.active,
.ilia-app-shell .nav-tabs .nav-link.active {
  background: color-mix(in srgb, var(--ilia-brand) 15%, white);
  border-color: rgba(15, 118, 110, 0.25);
  color: #0f172a;
}

/* Tables */
.ilia-app-shell .table {
  --bs-table-bg: transparent;
}

.ilia-app-shell .table > :not(caption) > * > * {
  border-color: rgba(15, 23, 42, 0.1);
}

/* Liens */
.ilia-app-shell a {
  text-underline-offset: 0.16em;
}

.ilia-app-shell a:hover {
  text-decoration-thickness: 2px;
}

/* Compatibilité Leaflet: ne pas casser la carte */
.ilia-app-shell .leaflet-container {
  border-radius: 0.95rem;
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  background: #e5eef9;
}

.ilia-app-shell .leaflet-control {
  border-radius: 0.62rem;
  overflow: hidden;
}

.ilia-app-shell .leaflet-popup-content-wrapper,
.ilia-app-shell .leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.98);
}

/* Compatibilité navbar locale si présente dans le contenu */
.ilia-app-shell .navbar,
.ilia-app-shell .navbar-light,
.ilia-app-shell .navbar-dark {
  border-radius: 0.9rem;
}

/* Rythme vertical léger, sans casser Bootstrap */
.ilia-app-shell .row + .row {
  margin-top: clamp(0.25rem, 0.7vw, 0.55rem);
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .ilia-app-shell .card,
  .ilia-app-shell .btn {
    transition: none;
  }
}

/* Mobile: conserver lisibilité + espace utile */
@media (max-width: 767.98px) {
  .ilia-app-shell {
    padding-top: 0.75rem;
    padding-bottom: 0.85rem;
  }

  .ilia-app-shell .ilia-app-frame {
    border-radius: 0.85rem;
    padding: 0.78rem;
  }
}