/* ==========================================================
   THEME — "HUMANISME ÉCLAIRÉ" (Bootstrap-friendly)
   Clair, premium, lisible, bleu + laiton.
   Compatible: .app-navbar, .app-logo, .app-dropdown, .app-main
   ========================================================== */

:root{
  /* Couleurs */
  --bg: #F6F3EC;               /* ivoire */
  --bg2:#F3F6FB;               /* variante froide */
  --card:#ffffff;
  --ink:#0F172A;               /* bleu nuit */
  --muted:#475569;             /* texte secondaire */
  --border: rgba(15,23,42,.12);

  --brand:#1D4ED8;             /* bleu */
  --brand2:#A67C2E;            /* laiton */
  --brand3:#0F766E;            /* sauge/atelier (option) */

  /* UI */
  --r: 18px;
  --r2: 12px;
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --shadow2: 0 8px 20px rgba(15,23,42,.10);

  --sidenav-w: 280px;          /* largeur sidebar desktop */
}

/* Base */
html, body{ height:100%; }
body.bg-light{
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(29,78,216,.10), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(166,124,46,.10), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  overflow-x: hidden; /* stop le rognage/scroll horizontal */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.text-muted{ color: var(--muted) !important; }

/* Titres (un poil “cérémoniel”, sans faire cathédrale) */
h1,h2,h3,.h4,.h5,.h6{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing: .2px;
}

/* Cards */
.card{
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  background: var(--card);
}
.card .card-body{ padding: 1.15rem; }

/* Boutons */
.btn{
  border-radius: 14px;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.btn:focus{ box-shadow: 0 0 0 .25rem rgba(29,78,216,.18) !important; }

.btn-primary{
  border: 0;
  background: linear-gradient(135deg, var(--brand), #4F46E5);
}
.btn-primary:hover{ filter: brightness(1.03); transform: translateY(-1px); }

.btn-outline-secondary{
  border-color: rgba(15,23,42,.18);
  color: rgba(15,23,42,.80);
}
.btn-outline-secondary:hover{
  background: rgba(15,23,42,.06);
}

/* Badges */
.badge{ border-radius: 999px; padding: .35rem .65rem; font-weight: 650; }
.badge.text-bg-light{
  background: rgba(15,23,42,.06) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(15,23,42,.10);
}

/* ===== Navbar (mobile top / desktop side) ===== */

/* Couleurs navbar (fond clair translucide, titres lisibles) */
.app-navbar{
  background: rgba(255,255,255,.86) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(10px);
}

/* Bootstrap te la met en navbar-dark : on force la lisibilité */
.app-navbar .navbar-brand,
.app-navbar .nav-link,
.app-navbar .dropdown-toggle{
  color: rgba(15,23,42,.82) !important;
}
.app-navbar .nav-link:hover,
.app-navbar .dropdown-toggle:hover{
  color: var(--ink) !important;
}

/* Brand (IMPORTANT: autorise le wrap en sidebar desktop) */
.app-navbar .navbar-brand{
  min-width: 0;
  max-width: 100%;
}
.app-navbar .navbar-brand .fw-bold,
.app-navbar .navbar-brand small{
  display:block;
  white-space: normal;       /* PAS d’ellipsis */
  overflow-wrap: anywhere;   /* évite débordement sur mots longs */
  line-height: 1.15;
}

/* Logo */
.app-logo{
  width: 40px; height: 40px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 8px 18px rgba(15,23,42,.10);
}

/* Dropdown */
.dropdown-menu, .app-dropdown{
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--shadow2);
  padding: .35rem;
}
.dropdown-item{
  border-radius: 10px;
  padding: .55rem .75rem;
  font-weight: 550;
}
.dropdown-item:hover, .dropdown-item:focus{
  background: rgba(29,78,216,.10);
}
.dropdown-item.dropdown-faq{ font-weight: 700; }

/* User pill */
.app-user-pill{
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.16);
}

/* ===== Layout sidenav (desktop only) ===== */
@media (min-width: 992px){
  /* Navbar devient sidebar fixe */
  .app-navbar.app-navbar-side{
    position: fixed !important;
    top: 0; left: 0;
    width: var(--sidenav-w);
    height: 100vh;
    z-index: 1030;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    padding: 14px 12px;
    border-right: 1px solid var(--border);
    border-bottom: 0 !important;

    overflow-y: auto;  /* si menu long */
    overflow-x: hidden;
  }

  /* Container bootstrap dans la navbar doit prendre 100% */
  .app-navbar.app-navbar-side .container-fluid{
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* Pas de burger en desktop */
  .app-navbar.app-navbar-side .navbar-toggler{ display:none !important; }

  /* Collapse forcé ouvert et vertical */
  .app-navbar.app-navbar-side .navbar-collapse{
    display:flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    flex: 1 1 auto;
    margin-top: 10px;
  }

  /* Menu vertical */
  .app-navbar.app-navbar-side .navbar-nav{
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: .35rem;
  }

  .app-navbar.app-navbar-side .nav-link,
  .app-navbar.app-navbar-side .dropdown-toggle{
    width: 100%;
    border-radius: 12px;
    padding: .6rem .75rem;
  }

  .app-navbar.app-navbar-side .nav-link:hover,
  .app-navbar.app-navbar-side .dropdown-toggle:hover{
    background: rgba(15,23,42,.06);
  }

  /* Dropdown inline dans sidebar */
  .app-navbar.app-navbar-side .dropdown-menu{
    position: static !important;
    transform: none !important;
    float: none !important;
    width: 100%;
    margin-top: .25rem;
  }

  /* Main prend le reste — pas de rognage */
  .app-main{
    margin-left: var(--sidenav-w);
    width: calc(100% - var(--sidenav-w));
    max-width: calc(100% - var(--sidenav-w));
  }
  .app-main > .container{ max-width: 1100px; } /* confort desktop */
}

/* Forms */
.form-control, .form-select{
  border-radius: 14px;
  border-color: rgba(15,23,42,.16);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(29,78,216,.45);
  box-shadow: 0 0 0 .25rem rgba(29,78,216,.12);
}

/* Print */
@media print{
  .navbar, .btn, .no-print{ display:none !important; }
  body{ background:#fff !important; }
  .card{ box-shadow:none !important; border:1px solid #ddd !important; }
}

/* ===============================
   FIX BURGER (NAVBAR TOGGLER)
   Lisible sur fond clair / sombre
   =============================== */

/* Base : burger foncé (mobile, fond clair) */
.navbar-toggler {
  border-color: rgba(20,18,26,.35);
}

.navbar-toggler-icon {
  background-image: none;
  width: 1.4em;
  height: 1.4em;
  position: relative;
}

/* Icône custom (3 barres) */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--ink); /* foncé */
  border-radius: 2px;
}

.navbar-toggler-icon::before {
  top: 0;
}
.navbar-toggler-icon span {
  top: 50%;
  transform: translateY(-50%);
}
.navbar-toggler-icon::after {
  bottom: 0;
}

/* Desktop : sidebar → burger inutile */
@media (min-width: 992px){
  .navbar-toggler {
    display: none !important;
  }
}