/* ==================================================
   RESPONSIVE GLOBAL — CMS ALSACE.CO
   ================================================== */

/* =========================
   Base Responsive
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   Container padding mobile
   ========================= */
@media (max-width: 768px){
  .layout{
    padding:12px;
  }
}

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

/* =========================
   Navigation Mobile
   ========================= */
.nav-btn{
  display:none;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(15,26,46,.55);
  color:#eaf0ff;
  height:40px;
  padding:0 12px;
  border-radius:12px;
  cursor:pointer;
}

.nav-mobile{ 
  display:none;
  position:relative;
  z-index: 1000;
}

@media (max-width: 900px){
  .nav-btn{ 
    display:inline-flex; 
    align-items:center; 
    justify-content:center;
  }
  .nav-bar-inner .nav-link{ 
    display:none;
  }
}

.nav-mobile.is-open{
  display:grid !important;
  gap:8px;
  padding:12px;
  margin-top:10px;
  border-radius:16px;
  background: rgba(11,18,32,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
}

.nav-bar{ 
  position:relative; 
  z-index: 999;
}

/* =========================
   Sidebar responsive
   ========================= */
@media (max-width: 992px){
  .sidebar{
    position:relative;
    top:0;
  }
}

/* =========================
   Typography responsive
   ========================= */
@media (max-width: 640px){
  body{
    font-size:15px;
  }
  
  h1{ font-size:24px; }
  h2{ font-size:20px; }
  h3{ font-size:18px; }
  h4{ font-size:16px; }
}

/* =========================
   Widgets responsive
   ========================= */
@media (max-width: 640px){
  .widget{
    border-radius:12px;
    margin-bottom:10px;
  }
  
  .widget-title{
    padding:10px 12px;
    font-size:15px;
  }
  
  .widget-body{
    padding:12px;
  }
}

/* =========================
   Utilities responsive
   ========================= */
.hide-mobile{
  display:block;
}

.show-mobile{
  display:none;
}

@media (max-width: 768px){
  .hide-mobile{
    display:none;
  }
  
  .show-mobile{
    display:block;
  }
}

/* =========================
   Touch-friendly
   ========================= */
@media (hover: none) and (pointer: coarse){
  button,
  .nav-link,
  .article-readmore,
  .ui-btn,
  .social-btn{
    min-height:44px;
    min-width:44px;
  }
  
  a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}

/* =========================
   Print styles
   ========================= */
@media print{
  .nav-bar,
  .topbar,
  .sidebar,
  .footer,
  .nav-mobile,
  .header-ad{
    display:none !important;
  }
  
  .layout{
    grid-template-columns:1fr;
  }
  
  .article-card{
    page-break-inside:avoid;
  }
}

/* =========================
   Landscape mobile
   ========================= */
@media (max-height: 500px) and (orientation: landscape){
  .topbar-inner{
    padding:6px 12px;
  }
  
  .site-header-inner{
    padding:8px 12px;
  }
  
  .nav-bar-inner{
    padding:6px 12px;
  }
}

/* =========================
   Smooth scrolling
   ========================= */
@media (prefers-reduced-motion: no-preference){
  html{
    scroll-behavior:smooth;
  }
}

/* =========================
   High contrast mode
   ========================= */
@media (prefers-contrast: high){
  .article-card,
  .widget{
    border-width:2px;
  }
  
  .nav-link:hover,
  .article-readmore:hover{
    text-decoration:underline;
  }
}