.topband{
  background:var(--blue);
  padding:10px 10px;
  display:flex;
  align-items:center;
  gap:50px;
}
.topband-logo{
  width:32px;
  height:32px;
  object-fit:cover;
  border:3px solid var(--green);
  border-radius:8px;
  flex:none;
}

.logo-img-rail {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 4px solid var(--green);
} 

.topband-text .eyebrow{margin:0 0 0 0px;}
.topband-text h1{margin:0;}

/* ===== LAYOUT GLOBAL ===== */
.layout{
  display:flex;
  align-items:flex-start;
  min-height:100vh;
}

/* ===== SIDEBAR ===== */
.sidebar{
  width:260px;
  flex:none;
  background:var(--blue-dark);
  border-right:1px solid var(--line);
  padding:24px 20px 32px ;
  position: sticky;
  top:0;
  height:100vh;
  
  overflow-y:auto;
  display: flex;
  flex-direction: column;
}

.sidebar-heading{
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--white);
  margin:0 0 18px;
  border-bottom:1px solid var(--line);
  font-weight: bold;
}

.filter-block{margin-bottom:18px;}
.filter-label{
  display:block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:7px;
}
.filter-select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  background: var(--white);
  
  color:var(--black);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 34px 10px 12px;
  font-size:13px;
  cursor:pointer;
  transition:border-color .15s ease;
}
.filter-select:hover{border-color:var(--chalk-dim);}
.filter-select:focus{outline:none;border-color:var(--green);}

.btn-reset{
  width:100%;
  margin-top:6px;
  font-size:13px;
  letter-spacing:.04em;
  padding:11px 12px;
  border-radius:8px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--white);
  cursor:pointer;
  transition:all .15s ease;
}
.btn-reset:hover{border-color:var(--blue);color:var(--blue);}

.sidebar-heading-links{
  margin-top:28px;
}

.sidebar-links{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.sidebar-toggle{
  display:none;
  position:fixed;
  top:16px;
  left:16px;
  z-index:1001;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background:var(--black);
  color:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
}

.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index:999;
}
.sidebar-overlay.active{
  display:block;
}

@media(max-width:860px){
  .sidebar-toggle{
    display:flex;
  }
  .sidebar{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    z-index:1000;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:4px 0 24px rgba(0,0,0,0.35);
  }
  .sidebar.open{
    transform:translateX(0);
  }
  .content{
    padding-top:76px;
  }
  .promo-card{
    left:16px;
    width:calc(100% - 32px);
  }
}

.promo-card{
  position:relative;    
  margin-top:50px;      
  flex:none;
  box-sizing:border-box;
  width:100%;           
  height:100px;
  padding:28px 16px 16px;
  background:var(--blue);
  border-radius:12px;
  text-decoration:none;
  text-align:center;
  z-index:10;
  transition:all .2s ease;
}

.promo-card svg.lucide{
  flex-shrink: 0;
  color: var(--white);
}

.promo-icon{
  position:absolute;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--green);
  color:var(--blue-dark);
  border-radius:50%;
  border:5px solid var(--blue-dark);
}
.promo-text{
  display:block;
  font-size:20px;
  font-weight:600;
  color:var(--white);
}
.promo-card:hover .promo-icon{
  background:var(--white);
}

/* ===== CONTENU PRINCIPAL ===== */
.content{
  flex:1;
  min-width:0;
  padding:28px 32px 80px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.content > *{
  width:100%;
}

/* ===== BARRE DE RECHERCHE ===== */
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin:26px 0 20px;
  padding-top:16px;
  padding-bottom:16px;
}

.count-line{
  font-size:12px;
  color:var(--black);
  margin-bottom:16px;
  letter-spacing:.04em;
}

footer{
  margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--black);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}