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

.layout{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:18px;
  max-width:1400px;
  margin:0 auto;
  padding:16px;
  align-items:start;
}

.content{
  min-width:0;
  width:100%;
}

.sidebar{
  min-width:0;
  width:100%;
}

/* =========================
   RESPONSIVE LAYOUT
   ========================= */

/* Tablette */
@media (max-width: 1024px){
  .layout{
    grid-template-columns:1fr 300px;
    gap:16px;
    padding:14px;
  }
}

/* Mobile large - sidebar en dessous */
@media (max-width: 992px){
  .layout{
    grid-template-columns:1fr;
    gap:20px;
  }
  
  /* Sidebar visible mais en dessous */
  .sidebar{
    display:block;
    width:100%;
  }
}

/* Mobile */
@media (max-width: 640px){
  .layout{
    padding:12px;
    gap:16px;
  }
}

/* Mobile petit */
@media (max-width: 480px){
  .layout{
    padding:10px;
    gap:14px;
  }
}

/* =========================
   WIDGETS MOBILE
   ========================= */
@media (max-width: 992px){
  .widget{
    margin-bottom:16px;
  }
  
  /* Titre section mobile pour widgets */
  .sidebar::before{
    content:"Alsace.co";
    display:block;
    font-size:20px;
    font-weight:900;
    color:var(--c-text, #0b1220);
    padding:16px 0 12px;
    border-bottom:2px solid rgba(0,0,0,.1);
    margin-bottom:16px;
  }
  
  html[data-theme="dark"] .sidebar::before{
    color:#eaf0ff;
    border-bottom-color:rgba(255,255,255,.12);
  }
}

@media (max-width: 640px){
  .sidebar::before{
    font-size:18px;
    padding:14px 0 10px;
    margin-bottom:14px;
  }
}

/* =========================
   CONTAINERS
   ========================= */
.container{
  max-width:1400px;
  margin:0 auto;
  padding:0 16px;
  width:100%;
}

@media (max-width: 640px){
  .container{
    padding:0 12px;
  }
}

@media (max-width: 480px){
  .container{
    padding:0 10px;
  }
}

/* =========================
   SPACING UTILITIES
   ========================= */
.section{
  padding:24px 0;
}

@media (max-width: 640px){
  .section{
    padding:16px 0;
  }
}

.section-gap{
  margin-bottom:24px;
}

@media (max-width: 640px){
  .section-gap{
    margin-bottom:16px;
  }
}

/* =========================
   OPTIMISATION MOBILE
   ========================= */
@media (max-width: 768px){
  /* Améliorer lisibilité widgets sur mobile */
  .widget{
    font-size:15px;
  }
  
  .widget-title{
    font-size:16px;
  }
}