/* ===========================================================
 * Fix logo header chevauche par search bar (2026-05-09)
 * Probleme: .stitch-actions absolute top-right chevauche brand center
 * Solution: passer en CSS grid 3 colonnes avec brand vraiment centre
 * =========================================================== */
@media (min-width:1200px){
  .stitch-header{
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    grid-template-rows:auto auto !important;
    grid-template-areas:
      "spacer brand actions"
      "nav nav nav" !important;
    align-items:center !important;
    column-gap:24px !important;
    row-gap:8px !important;
    padding:8px 0 !important;
  }
  .stitch-brand{
    grid-area:brand !important;
    margin-bottom:0 !important;
  }
  .stitch-actions{
    grid-area:actions !important;
    position:static !important;
    right:auto !important;
    top:auto !important;
    left:auto !important;
    justify-self:end !important;
    max-width:none !important;
    width:auto !important;
    z-index:auto !important;
  }
  .stitch-nav{
    grid-area:nav !important;
    width:100% !important;
    justify-content:center !important;
  }
  /* Limit search bar width so it never grows over brand */
  .stitch-actions .search-section{
    flex:0 0 220px !important;
    max-width:220px !important;
  }
  .stitch-actions .search-wrapper{
    width:220px !important;
  }
}

/* Tablet 768-1199: brand top, actions top-right, nav hidden (mobile menu) */
@media (min-width:768px) and (max-width:1199.98px){
  .stitch-header{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    padding:10px 0 !important;
    position:relative !important;
  }
  .stitch-brand{
    flex:1 1 auto !important;
    text-align:center !important;
    margin:0 !important;
    order:1 !important;
  }
  .stitch-actions{
    flex:0 0 auto !important;
    position:static !important;
    right:auto !important;
    top:auto !important;
    max-width:none !important;
    order:2 !important;
  }
  .stitch-nav{
    display:none !important;
  }
}

/* Mobile <768: stack natural */
@media (max-width:767.98px){
  .stitch-header{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    padding:8px 0 !important;
    position:relative !important;
  }
  .stitch-actions{
    position:absolute !important;
    top:8px !important;
    right:12px !important;
    max-width:none !important;
  }
  .stitch-actions .search-section{
    display:none !important;
  }
  .stitch-brand{
    margin:0 0 4px 0 !important;
  }
}