/* Habillage Liassa au-dessus de Bootstrap 5.3.
   Les composants Bootstrap exposent leurs propres variables CSS locales
   (--bs-btn-bg, --bs-navbar-*, etc.) : on les réassigne ici plutôt que de
   ré-écrire les règles, pour rester compatible avec les mises à jour du CDN. */

:root {
  --liassa-vert: #0b5d3f;
  --liassa-vert-fonce: #084a33;
  --liassa-or: #d79e1e;
  --liassa-or-fonce: #b9860f;
  --liassa-papier: #fbfaf7;

  --bs-body-font-family: "Inter", system-ui, -apple-system, sans-serif;
  --bs-link-color: var(--liassa-vert);
  --bs-link-color-rgb: 11, 93, 63;
  --bs-link-hover-color: var(--liassa-vert-fonce);
  --bs-link-hover-color-rgb: 8, 74, 51;
}

body { background: var(--liassa-papier); }

.font-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.font-tabular { font-variant-numeric: tabular-nums; white-space: nowrap; }
.text-brand { color: var(--liassa-vert); }
.cursor-pointer { cursor: pointer; }

/* -- Marque ------------------------------------------------------------ */

.navbar-brand .accent { color: var(--liassa-or); }

.barre-liassa {
  background: linear-gradient(135deg, var(--liassa-vert), var(--liassa-vert-fonce));
}

.avatar-cercle {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .82rem; flex-shrink: 0;
}

/* -- Boutons, liens et accents repeints en vert Liassa ------------------ */

.btn-primary {
  --bs-btn-bg: var(--liassa-vert);
  --bs-btn-border-color: var(--liassa-vert);
  --bs-btn-hover-bg: var(--liassa-vert-fonce);
  --bs-btn-hover-border-color: var(--liassa-vert-fonce);
  --bs-btn-active-bg: var(--liassa-vert-fonce);
  --bs-btn-active-border-color: var(--liassa-vert-fonce);
  --bs-btn-disabled-bg: var(--liassa-vert);
  --bs-btn-disabled-border-color: var(--liassa-vert);
  --bs-btn-focus-shadow-rgb: 11, 93, 63;
}
.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-color: var(--liassa-vert);
  --bs-btn-border-color: var(--liassa-vert);
  --bs-btn-hover-bg: var(--liassa-vert);
  --bs-btn-hover-border-color: var(--liassa-vert);
  --bs-btn-active-bg: var(--liassa-vert);
  --bs-btn-active-border-color: var(--liassa-vert);
}
.badge.text-bg-primary { background-color: var(--liassa-vert) !important; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--liassa-vert); }
.form-check-input:checked { background-color: var(--liassa-vert); border-color: var(--liassa-vert); }
.form-control:focus, .form-select:focus {
  border-color: var(--liassa-vert);
  box-shadow: 0 0 0 .25rem rgba(11, 93, 63, .15);
}
.spinner-border.text-primary { color: var(--liassa-vert) !important; }

/* -- Tableaux d'états financiers ----------------------------------------
   Chiffres alignés à droite, référence en monospace, rubriques et totaux
   marqués visuellement — impression propre. */

.table-etats td, .table-etats th { vertical-align: middle; }
.table-etats tr.rubrique { font-weight: 600; }
.table-etats tr.total {
  font-weight: 600;
  background-color: var(--bs-tertiary-bg);
  border-top: 2px solid var(--bs-border-color);
}

/* -- Zone de dépôt de fichier -------------------------------------------- */

.zone-depot {
  border: 2px dashed var(--bs-border-color);
  border-radius: .5rem;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}
.zone-depot:focus-within, .zone-depot.survol {
  border-color: var(--liassa-vert);
  background: rgba(11, 93, 63, .04);
}

/* -- Disposition tableau de bord : barre du haut + sidebar ------------- */

.app-shell { min-height: calc(100vh - 56px); }

.sidebar-liassa {
  width: 260px;
  background: #fff;
  border-right: 1px solid var(--bs-border-color);
}
@media (min-width: 992px) {
  .sidebar-liassa {
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    flex-shrink: 0;
  }
}
.min-w-0 { min-width: 0; }

.sidebar-section {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: #8a93a6; font-weight: 600; margin: 1.1rem .5rem .4rem;
}
.sidebar-section:first-child { margin-top: .25rem; }
.sidebar-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .75rem; border-radius: .45rem;
  color: #33404f; text-decoration: none; font-size: .92rem;
}
.sidebar-link i { font-size: 1.05rem; color: var(--liassa-vert); width: 1.1rem; text-align: center; }
.sidebar-link:hover { background: rgba(11, 93, 63, .06); }
.sidebar-link.active { background: rgba(11, 93, 63, .1); color: var(--liassa-vert); font-weight: 600; }

/* -- Rapport de cohérence ------------------------------------------------ */

.rapport-etat { border-left: 4px solid var(--bs-border-color) !important; }
.rapport-etat-ok { border-left-color: var(--liassa-vert) !important; }
.rapport-etat-ko { border-left-color: #c0392b !important; }

/* -- Cartes d'indicateurs (tableau de bord) ------------------------------ */

.stat-card { border-top: 3px solid var(--liassa-or) !important; }
.stat-card.stat-brand { border-top-color: var(--liassa-vert) !important; }
.stat-card.stat-attention { border-top-color: #c0392b !important; }
.stat-icon {
  width: 2.75rem; height: 2.75rem; border-radius: .6rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
  background: rgba(215, 158, 30, .15); color: var(--liassa-or-fonce);
}
.stat-icon.brand { background: rgba(11, 93, 63, .12); color: var(--liassa-vert); }
.stat-icon.attention { background: rgba(192, 57, 43, .12); color: #c0392b; }

/* -- Connexion ----------------------------------------------------------- */

.connexion-page { background: #f5f7f4; }
.connexion-page .app-shell { min-height: 100vh; }
.connexion-page main { padding: 0 !important; }
.connexion-page main > .container-fluid { padding: 0 !important; max-width: none; }
.connexion-page footer { display: none; }

.connexion-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(420px, .95fr); }
.connexion-marque {
  position: relative; overflow: hidden; display: flex; align-items: center;
  color: #fff; background: linear-gradient(145deg, #043d2b 0%, var(--liassa-vert-fonce) 54%, #062f23 100%);
}
.connexion-marque::before, .connexion-marque::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.connexion-marque::before { width: 42rem; height: 42rem; right: -20rem; top: -21rem; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 0 0 5rem rgba(255, 255, 255, .025), 0 0 0 10rem rgba(255, 255, 255, .02); }
.connexion-marque::after { width: 20rem; height: 20rem; left: -10rem; bottom: -10rem; background: var(--liassa-or); opacity: .88; }
.connexion-marque-contenu { position: relative; z-index: 1; width: min(33rem, 100%); margin: auto; padding: 3rem; }
.connexion-logo-cadre {
  width: 6.25rem; height: 6.25rem; margin-bottom: 2.25rem; padding: .3rem; overflow: hidden;
  border-radius: 1rem; background: #fff; box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .16);
}
.connexion-logo-cadre img { width: 100%; height: 100%; object-fit: contain; }
.connexion-surtitre { margin: 0 0 .65rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.connexion-marque h1 { margin: 0; font-size: clamp(2.15rem, 4vw, 3.45rem); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; }
.connexion-accroche { max-width: 29rem; margin: 1.35rem 0 0; color: rgba(255, 255, 255, .75); font-size: 1.03rem; line-height: 1.7; }
.connexion-reperes { display: flex; flex-wrap: wrap; gap: .75rem 1.3rem; margin-top: 2.7rem; color: rgba(255, 255, 255, .88); font-size: .88rem; }
.connexion-reperes i { color: #f5bb3c; }

.connexion-formulaire-zone { display: flex; align-items: center; justify-content: center; padding: 3rem; background: #fff; }
.connexion-formulaire { width: min(26.5rem, 100%); }
.connexion-mobile-logo { display: none; }
.connexion-entete { margin-bottom: 1.9rem; }
.connexion-pastille { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.35rem; border-radius: .75rem; background: rgba(11, 93, 63, .1); color: var(--liassa-vert); }
.connexion-entete h2 { margin: 0 0 .55rem; color: #16281f; font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; }
.connexion-entete > p:last-child { margin: 0; color: #6e7d75; }
.connexion-carte { padding: 1.65rem; border: 1px solid #dfe7e1; border-radius: 1rem; background: #fff; box-shadow: 0 1.25rem 3rem rgba(19, 54, 37, .08); }
.connexion-carte .form-label { color: #294338; font-size: .88rem; }
.connexion-carte .form-control { min-height: 3rem; border-color: #d6e0d9; border-radius: .55rem; }
.connexion-carte .form-control::placeholder { color: #a6b0aa; }
.connexion-password-group .form-control { border-right: 0; }
.connexion-password-group .btn { border: 1px solid #d6e0d9; border-left: 0; color: #6e7d75; background: #fff; }
.connexion-password-group:focus-within .form-control, .connexion-password-group:focus-within .btn { border-color: var(--liassa-vert); }
.connexion-password-group:focus-within { box-shadow: 0 0 0 .25rem rgba(11, 93, 63, .15); border-radius: .55rem; }
.connexion-password-group:focus-within .form-control { box-shadow: none; }
.connexion-submit { min-height: 3.2rem; border-radius: .6rem; font-weight: 600; }
.connexion-aide { margin: 1.2rem 0 0; color: #829088; font-size: .78rem; text-align: center; }

@media (max-width: 899.98px) {
  .connexion-layout { grid-template-columns: 1fr; }
  .connexion-marque { display: none; }
  .connexion-formulaire-zone { min-height: 100vh; padding: 2rem 1.25rem; }
  .connexion-mobile-logo { display: block; width: 5.5rem; height: 3.5rem; margin: 0 0 2rem; overflow: hidden; }
  .connexion-mobile-logo img { width: 100%; height: 100%; object-fit: contain; }
}

@media print {
  .no-print, .navbar, footer, .breadcrumb, .nav-pills, .sidebar-liassa { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .table-etats { page-break-inside: auto; }
  .table-etats tr { page-break-inside: avoid; }
  main { padding: 0 !important; }
  .app-shell, .main-content { display: block !important; width: 100% !important; }
}

.filigrane-brouillon {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 7rem;
  font-weight: 800;
  color: rgba(220, 53, 69, .14);
  text-transform: uppercase;
  letter-spacing: .4rem;
  pointer-events: none;
  user-select: none;
  z-index: 1040;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .filigrane-brouillon { font-size: 3.2rem; }
}