/* =========================================================
   Bois Fleury — surcouche visuelle SAFE
   (ne touche pas aux widths/heights/floats)
   ========================================================= */

:root{
  --bf-bg: #eef3f8;
  --bf-panel: #ffffff;
  --bf-panel-2: #f7f9fc;
  --bf-text: #1f2a37;
  --bf-muted: #536174;
  --bf-border: #dfe7f1;
  --bf-shadow: 0 6px 18px rgba(15, 23, 42, .08);
  --bf-radius: 10px;

  --bf-primary: #1e5aa8;     /* bleu institutionnel */
  --bf-primary-2: #184a8a;
  --bf-accent: #2f7a5a;      /* vert */
}

body{
  background: var(--bf-bg) !important;
  color: var(--bf-text) !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif !important;
}

a{ color: var(--bf-primary) !important; }
a:hover{ color: var(--bf-primary-2) !important; }

/* Adoucit la page sans casser la grille existante */
.container{ background: transparent !important; }
.header{ background: transparent !important; }

/* Header : on garde les tailles/150px, on change juste le look */
.header .left, .header .right{
  border-radius: var(--bf-radius) !important;
  box-shadow: var(--bf-shadow) !important;
  border: 1px solid var(--bf-border) !important;
  background: var(--bf-panel) !important;
  overflow: hidden;
}
.header .left{
  position: relative;
}
.header .left::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:6px;
  background: linear-gradient(90deg, var(--bf-primary), var(--bf-accent));
}

/* Nav */
.navigation{
  background: var(--bf-panel) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: var(--bf-radius) !important;
  box-shadow: var(--bf-shadow) !important;
}
.navigation a{
  background: transparent !important;
  color: var(--bf-text) !important;
}
.navigation a:hover{
  background: var(--bf-panel-2) !important;
  color: var(--bf-primary) !important;
}

/* Sidebar */
.sidenav{
  background: var(--bf-panel) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: var(--bf-radius) !important;
  box-shadow: var(--bf-shadow) !important;
}
.sidenav h2{
  background: var(--bf-panel-2) !important;
  color: var(--bf-muted) !important;
}
.sidenav li a:hover{
  background: var(--bf-panel-2) !important;
  color: var(--bf-text) !important;
}

/* Content */
.content{
  background: var(--bf-panel) !important;
  border: 1px solid var(--bf-border) !important;
  border-radius: var(--bf-radius) !important;
  box-shadow: var(--bf-shadow) !important;
}
.content .descr{ color: var(--bf-muted) !important; }

/* Forms */
input[type="text"], input[type="password"], input[type="email"], textarea, select{
  border: 1px solid var(--bf-border) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}
input[type="submit"], input[type="button"], button{
  background: var(--bf-primary) !important;
  border: 1px solid #174884 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font-weight: 700 !important;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover{
  filter: brightness(.95);
}

/* Footer */
.footer{
  background: var(--bf-primary) !important;
  background-image: none !important;
  border-radius: var(--bf-radius) !important;
  box-shadow: var(--bf-shadow) !important;
}
.footer a{ color:#fff !important; }

/* =========================================================
   Fix header "haut.php" (évite le line-height:150px legacy)
   ========================================================= */

#haut .header{
  height: auto !important;
  padding: 0 !important;
  margin: 12px auto 10px !important;
  width: 96% !important;
}

#haut .header .left,
#haut .header .right{
  height: auto !important;
}

/* IMPORTANT : le CSS legacy met line-height:150px -> casse le flex */
#haut .header .left{
  line-height: normal !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 18px !important;
}

/* le bloc droit (si tu l’utilises plus tard) */
#haut .header .right{
  line-height: normal !important;
  padding: 12px 14px !important;
}

/* évite que la nav remonte sous le header */
.container{
  margin-top: 10px !important;
}