/* ==================================================
   SIDEBAR — CMS ALSACE.CO
   ================================================== */

.sidebar{
  position:sticky;
  top:12px;
  height:fit-content;
}

.widget{
  background:#0b1220;
  color:#fff;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.widget-title{
  padding:12px 14px;
  font-weight:700;
  font-size:15px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.widget-body{
  padding:14px;
  min-height:120px;
  display:grid;
  gap:10px;
}

/* =========================
   RESPONSIVE SIDEBAR
   ========================= */

/* Tablette */
@media (max-width: 1024px){
  .sidebar{
    top:10px;
  }
  
  .widget{
    margin-bottom:14px;
  }
}

/* Mobile - sidebar devient statique */
@media (max-width: 992px){
  .sidebar{
    position:static;
    top:auto;
  }
  
  .widget{
    margin-bottom:16px;
    border-radius:16px;
  }
  
  .widget-title{
    padding:14px 16px;
    font-size:16px;
  }
  
  .widget-body{
    padding:16px;
  }
}

/* Mobile moyen */
@media (max-width: 640px){
  .widget{
    border-radius:14px;
    margin-bottom:14px;
  }
  
  .widget-title{
    padding:12px 14px;
    font-size:15px;
  }
  
  .widget-body{
    padding:14px;
    min-height:100px;
  }
}

/* Petit mobile */
@media (max-width: 480px){
  .widget{
    border-radius:12px;
    margin-bottom:12px;
  }
  
  .widget-title{
    padding:10px 12px;
    font-size:14px;
  }
  
  .widget-body{
    padding:12px;
  }
}

/* =========================
   DARK THEME
   ========================= */
html[data-theme="light"] .widget{
  background:#ffffff;
  color:#0b1220;
  border-color:rgba(0,0,0,.10);
}

html[data-theme="light"] .widget-title{
  border-bottom-color:rgba(0,0,0,.08);
  background:rgba(0,0,0,.02);
}

/* =========================
   WIDGET TYPES
   ========================= */

/* Widget embed (pour éphémérides, etc) */
.widget-embed{
  padding:0;
}

.widget-embed .widget-body{
  padding:0;
  min-height:auto;
}

/* Widget liste */
.widget-list{
  list-style:none;
  padding:0;
  margin:0;
}

.widget-list li{
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.widget-list li:last-child{
  border-bottom:none;
}

.widget-list a{
  color:rgba(234,240,255,.85);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
  transition:color .15s ease;
}

.widget-list a:hover{
  color:#fff;
}

/* =========================
   AMÉLIORATION MOBILE
   ========================= */
@media (max-width: 768px){
  /* Meilleure lisibilité */
  .widget{
    font-size:14px;
  }
  
  /* Espacement touch-friendly */
  .widget-list li{
    padding:10px 0;
  }
  
  .widget-list a{
    padding:2px 0;
    min-height:44px;
    align-items:center;
  }
}

/* =========================
   ANIMATIONS
   ========================= */
@media (prefers-reduced-motion: no-preference){
  .widget{
    transition:transform .15s ease;
  }
  
  .widget:hover{
    transform:translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce){
  .widget,
  .widget-list a{
    transition:none;
  }
}