/* =====================================================================
   ALLIANCES COSMETIQUE - Feuille de style de l'application
   ===================================================================== */

:root {
  --or:        #b08a53;
  --or-clair:  #d9bd92;
  --or-pale:   #f6efe4;
  --ardoise:   #2f3338;
  --ardoise-2: #3b4046;
  --texte:     #23272b;
  --discret:   #6d747c;
  --bordure:   #e4e2de;
  --fond:      #f6f5f3;
  --blanc:     #ffffff;
  --vert:      #2f7d5d;
  --rouge:     #b3413a;
  --ambre:     #b5832a;
  --rayon:     10px;
  --ombre:     0 1px 2px rgba(20,18,15,.05), 0 6px 18px rgba(20,18,15,.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
}

/* ---------- Barre haute ---------------------------------------------- */
.barre-haute {
  background: var(--ardoise);
  padding: .55rem 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.15);
}
.barre-haute .navbar-brand {
  color: #fff; font-weight: 600; letter-spacing: .01em; display: flex; align-items: center; gap: .5rem;
}
.barre-haute .navbar-brand small { color: var(--or-clair); font-weight: 400; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.marque-point { width: 9px; height: 9px; border-radius: 50%; background: var(--or); display: inline-block; }
.texte-discret { color: #b9bcc0; }
.btn-menu { color: #fff; border: 1px solid rgba(255,255,255,.25); }
.btn-menu:hover { color: #fff; background: rgba(255,255,255,.1); }

/* ---------- Structure ------------------------------------------------- */
.enveloppe { display: flex; align-items: flex-start; min-height: calc(100vh - 54px); }

.menu { background: var(--blanc); padding: .75rem 0 2rem; }
/* Sur grand écran le menu est une colonne fixe ; en dessous, un panneau coulissant. */
@media (min-width: 992px) {
  .menu {
    width: 250px; flex: 0 0 250px;
    border-right: 1px solid var(--bordure);
    position: sticky; top: 54px; align-self: flex-start;
  }
}
.menu-groupe {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--discret); padding: 1rem 1.25rem .35rem; font-weight: 600;
}
.menu-lien {
  display: flex; align-items: center; gap: .6rem; padding: .48rem 1.25rem;
  color: var(--texte); text-decoration: none; font-size: .9rem; border-left: 3px solid transparent;
}
.menu-lien i { color: var(--discret); width: 18px; text-align: center; }
.menu-lien:hover { background: var(--or-pale); color: var(--texte); }
.menu-lien.actif { background: var(--or-pale); border-left-color: var(--or); font-weight: 600; }
.menu-lien.actif i { color: var(--or); }
.menu-lien.alerte { color: var(--rouge); }

.contenu { flex: 1 1 auto; padding: 1.5rem 1.75rem 3rem; min-width: 0; }

.titre-page {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
  padding-bottom: .85rem; border-bottom: 1px solid var(--bordure);
}
.titre-page h1 { font-size: 1.45rem; font-weight: 650; margin: 0 0 .15rem; letter-spacing: -.01em; }
.titre-page .texte-discret, .titre-page p { color: var(--discret); font-size: .88rem; }
.titre-page a { color: var(--or); text-decoration: none; }

/* ---------- Cartes ---------------------------------------------------- */
.carte {
  background: var(--blanc); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1.15rem;
}
.carte + .carte { margin-top: 1rem; }
.carte-filtres { padding: .9rem 1.15rem; }
.carte-titre {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--discret); font-weight: 600; margin-bottom: .85rem;
}

/* ---------- Tuiles d'indicateurs -------------------------------------- */
.tuile { position: relative; overflow: hidden; height: 100%; padding: 1rem 1.15rem; }
.tuile-icone { position: absolute; top: .9rem; right: 1rem; font-size: 1.25rem; color: var(--or-clair); }
.tuile-libelle { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--discret); font-weight: 600; }
.tuile-valeur { font-size: 1.5rem; font-weight: 650; margin-top: .3rem; letter-spacing: -.02em; }
.tuile-detail { font-size: .78rem; color: var(--discret); margin-top: .2rem; }
.ton-positif .tuile-valeur { color: var(--vert); }
.ton-negatif .tuile-valeur { color: var(--rouge); }
.ton-alerte  .tuile-valeur { color: var(--ambre); }

/* ---------- Tableaux --------------------------------------------------- */
.table { font-size: .89rem; }
.table > thead > tr > th {
  background: #faf9f7; border-bottom: 1px solid var(--bordure);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--discret); font-weight: 600; white-space: nowrap; padding: .6rem .75rem;
}
.table > tbody > tr > td { padding: .6rem .75rem; border-color: #f0eeeb; vertical-align: middle; }
.table > tbody > tr:hover > td { background: #fbf9f6; }
.table tr.inactif { opacity: .5; }
.table tr.ligne-total td { background: var(--or-pale); font-weight: 650; border-top: 2px solid var(--or-clair); }
.table tr.ligne-soustotal td { background: #faf9f7; font-weight: 600; }
.table tr.ligne-negative td { color: var(--rouge); }
.nombre, .montant { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Formulaires ------------------------------------------------ */
.form-label { font-size: .8rem; font-weight: 600; color: #4a5057; margin-bottom: .25rem; }
.form-control, .form-select { border-color: #dcd9d4; font-size: .9rem; padding: .42rem .7rem; }
.form-control:focus, .form-select:focus { border-color: var(--or-clair); box-shadow: 0 0 0 .18rem rgba(176,138,83,.15); }
.form-text { font-size: .78rem; color: var(--discret); }
.requis { color: var(--rouge); }
.input-group-text { background: #faf9f7; border-color: #dcd9d4; font-size: .82rem; color: var(--discret); }

.btn { font-size: .875rem; border-radius: 7px; padding: .42rem .85rem; }
.btn-principal { background: var(--ardoise); border-color: var(--ardoise); color: #fff; }
.btn-principal:hover, .btn-principal:focus { background: var(--ardoise-2); border-color: var(--ardoise-2); color: #fff; }
.btn-or { background: var(--or); border-color: var(--or); color: #fff; }
.btn-or:hover { background: #9c7745; border-color: #9c7745; color: #fff; }

.barre-outils { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; }
.champ-recherche { position: relative; max-width: 420px; }
.champ-recherche i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--discret); font-size: .85rem; }
.champ-recherche .form-control { padding-left: 2rem; }
.raccourcis .btn { font-size: .78rem; padding: .35rem .6rem; }

/* ---------- Divers ----------------------------------------------------- */
.etat-vide { text-align: center; padding: 3rem 1rem; color: var(--discret); background: var(--blanc); border: 1px dashed var(--bordure); border-radius: var(--rayon); }
.etat-vide i { font-size: 2rem; color: var(--or-clair); display: block; margin-bottom: .6rem; }
.etat-vide p { margin-bottom: .9rem; }

.badge { font-weight: 600; font-size: .7rem; padding: .32em .6em; letter-spacing: .02em; }
.alert { border: none; border-left: 3px solid; border-radius: 6px; font-size: .9rem; padding: .7rem 1rem; }
.alert-success { border-left-color: var(--vert); background: #edf6f1; color: #1d5a42; }
.alert-danger  { border-left-color: var(--rouge); background: #fbeeed; color: #8c302b; }
.alert-info    { border-left-color: var(--or); background: var(--or-pale); color: #6f552f; }
.alert-warning { border-left-color: var(--ambre); background: #fdf6e7; color: #7d5c1c; }

.lien-discret { color: var(--texte); text-decoration: none; }
.lien-discret:hover { color: var(--or); text-decoration: underline; }
a { color: #8a6a3d; }

.jauge { height: 5px; background: #eeebe6; border-radius: 3px; overflow: hidden; }
.jauge > span { display: block; height: 100%; background: var(--or); }

.marge-positive { color: var(--vert); font-weight: 600; }
.marge-negative { color: var(--rouge); font-weight: 600; }

hr { border-color: var(--bordure); opacity: 1; }

/* ---------- Responsive -------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Le menu devient un panneau coulissant : il ne prend plus de place dans le flux. */
  .enveloppe { display: block; }
  .contenu { padding: 1rem; }
  .titre-page { align-items: flex-start; flex-direction: column; }
  .titre-page h1 { font-size: 1.25rem; }
  .tuile-valeur { font-size: 1.2rem; }
  .tuile-libelle { font-size: .68rem; }
  .barre-outils { flex-direction: column; align-items: stretch; }
  .champ-recherche { max-width: none; }
  .raccourcis { flex-wrap: wrap; }
  .actions-page { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
}

@media print {
  .barre-haute, .menu, .barre-outils, .actions-page, .carte-filtres, .btn { display: none !important; }
  .contenu { padding: 0; }
  .carte { border: none; box-shadow: none; padding: 0; }
}