/* ============================================================
   SELLAVI — MOBILE OVERHAUL (juillet 2026)
   Charge sur toutes les pages porteuses du header .sx-1-nav.
   Corrige : logo ecrase, navigation mobile absente (burger +
   panneau plein ecran), poster avant/apres coupe, planchers
   typographiques fonctionnels, cibles tactiles.
   Ne modifie rien au-dessus de 1024px hormis la nettete du logo.
   ============================================================ */

/* -- 1. Logo : ne peut plus etre ecrase, quel que soit l'ecran -- */
.sx-1-nav-logo-wrap img{
  height:100% !important;
  width:auto !important;
  max-width:none !important;
  object-fit:contain;
}
.sx-1-nav-logo{flex-shrink:0}

@media (max-width:1023px){
  .sx-1-nav-inner{padding:0 18px;gap:14px}
  .sx-1-nav-logo-wrap{height:36px}
}
@media (max-width:640px){
  .sx-1-nav-inner{padding:0 14px;height:62px}
  .sx-1-nav-logo-wrap{height:31px}
  /* la pastille catalogue est reprise dans le panneau */
  .sx-1-nav-catalog-mobile{display:none !important}
}

/* -- 2. Burger (injecte par mobile-overhaul.js) -- */
.sxm-burger{
  display:none;
  position:relative;
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  background:rgba(255,255,255,.05);
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  z-index:120;
  transition:background .2s;
}
.sxm-burger:hover{background:rgba(255,255,255,.09)}
.sxm-burger span{
  position:absolute;left:13px;right:13px;height:2px;border-radius:2px;
  background:#fff;transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .2s;
}
.sxm-burger span:nth-child(1){top:16px}
.sxm-burger span:nth-child(2){top:21px}
.sxm-burger span:nth-child(3){top:26px}
.sxm-burger.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.sxm-burger.open span:nth-child(2){opacity:0}
.sxm-burger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media (max-width:1023px){.sxm-burger{display:inline-flex}}

/* croix de fermeture dans le panneau (le header passe sous le voile) */
.sxm-close{
  position:absolute;top:14px;right:16px;z-index:5;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.sxm-close svg{display:block}

/* -- 3. Panneau de navigation plein ecran -- */
.sxm-sheet{
  position:fixed;inset:0;z-index:110;
  background:rgba(7,2,15,.96);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  visibility:hidden;opacity:0;
  transition:opacity .28s cubic-bezier(.22,.61,.36,1),visibility .28s;
  display:flex;flex-direction:column;
  padding:86px 24px calc(30px + env(safe-area-inset-bottom));
  overflow-y:auto;
}
.sxm-sheet.open{visibility:visible;opacity:1}
.sxm-sheet::before{
  content:"";position:absolute;top:-30%;right:-40%;width:90%;height:70%;
  background:radial-gradient(circle,rgba(162,2,199,.16),transparent 65%);
  pointer-events:none;
}
.sxm-list{display:flex;flex-direction:column}
.sxm-link{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:21px;font-weight:600;color:#fff;text-decoration:none;
  padding:17px 4px;border-bottom:1px solid rgba(255,255,255,.09);
  min-height:56px;
  transform:translateY(10px);opacity:0;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),opacity .35s;
}
.sxm-sheet.open .sxm-link{transform:none;opacity:1}
.sxm-sheet.open .sxm-link:nth-child(1){transition-delay:.05s}
.sxm-sheet.open .sxm-link:nth-child(2){transition-delay:.1s}
.sxm-sheet.open .sxm-link:nth-child(3){transition-delay:.15s}
.sxm-sheet.open .sxm-link:nth-child(4){transition-delay:.2s}
.sxm-sheet.open .sxm-link:nth-child(5){transition-delay:.25s}
.sxm-arrow{color:rgba(255,255,255,.35);font-size:18px}
.sxm-ctas{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:12px}
.sxm-cta-primary{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:14px 20px;border-radius:12px;
  background:linear-gradient(135deg,#431E96 0%,#A202C7 100%);
  color:#fff;font-size:16px;font-weight:700;text-decoration:none;
  box-shadow:0 10px 28px rgba(124,58,255,.35);
}
.sxm-cta-ghost{
  display:flex;align-items:center;justify-content:center;
  min-height:50px;padding:13px 20px;border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:15px;font-weight:600;text-decoration:none;
  background:rgba(255,255,255,.04);
}
body.sxm-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .sxm-sheet,.sxm-link,.sxm-burger span{transition:none}
}

/* -- 4. Poster avant/apres : empile sur mobile (contenu coupe sinon) -- */
@media (max-width:640px){
  .sx-1-ba-poster{aspect-ratio:auto}
  .sx-1-ba-grid{position:static;grid-template-columns:1fr}
  .sx-1-ba-side{aspect-ratio:16/10.5;min-height:220px}
  .sx-1-ba-caption{padding:12px 14px}
}

/* -- 5. Planchers typographiques (textes fonctionnels uniquement,
      les mockups illustratifs de dashboards ne sont pas touches) -- */
@media (max-width:640px){
  .sx-2-market-name,.sx-2-market-price,
  .sx-2-sig-card-label,.sx-2-sig-card-sub,.sx-2-sig-card-cta,
  .sx-2-kpi-cell-label{font-size:12px !important}
}

/* -- 5b. Section agents IA : grille 2 cartes par ligne.
      Les deux colonnes d'origine passent en display:contents pour
      que les 6 cartes deviennent des items de grille uniformes.
      Selecteurs doubles : le style de cette section est declare
      en fin de body, apres cet asset. -- */
@media (max-width:640px){
  .ag-layout.ag-layout{display:grid !important;grid-template-columns:1fr 1fr !important;gap:10px !important;overflow:visible !important}
  .ag-col-left.ag-col-left,.ag-col-right.ag-col-right{display:contents !important}
  .ag-wrap.ag-wrap{max-width:100% !important;min-width:0 !important;margin:0 !important}
  .ag-card.ag-card{max-width:100% !important;min-width:0 !important;grid-template-columns:1fr !important;grid-template-rows:auto auto !important;min-height:auto !important;height:100% !important}
  .ag-photo.ag-photo{width:100% !important}
  .ag-text-col.ag-text-col{padding:10px 12px 14px !important;min-width:0 !important}
  .ag-role.ag-role{font-size:12px !important;line-height:1.35 !important}
  .ag-num.ag-num{font-size:12px !important}
  .ag-cta.ag-cta{width:100% !important}
}

/* -- 5c. Cartes agents toujours visibles sur mobile : la cascade
      d'apparition rate au scroll rapide (fling) et laissait les
      cartes bloquees a opacity:0 -> vide de 780px. Le desktop
      conserve son animation. -- */
@media (max-width:1023px){
  .ag-wrap.ag-wrap{opacity:1 !important;transform:none !important}
}

/* -- 6. Cibles tactiles >= 44px -- */
@media (max-width:1023px){
  .sx-10-footer-link{display:inline-flex;align-items:center;min-height:44px}
  .ag-cta{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .sx-8-faq-contact-link{display:inline-flex;align-items:center;min-height:44px}
  .sx-1-nav-login{width:44px;height:44px}
}

/* -- 7. Respiration du hero sur petit ecran -- */
@media (max-width:640px){
  .sx-1-hero-h1{font-size:clamp(31px,8.6vw,38px);line-height:1.12;letter-spacing:-.02em}
}

/* -- 8. Modale agents : hauteur reelle iOS (la barre Safari mange
      ~80px de 100vh -> bas de modale coupe). dvh + scroll interne
      + safe-area. -- */
@media (max-width:640px){
  .modal-overlay{padding:14px !important;align-items:flex-start !important}
  .modal-outer{max-height:calc(100dvh - 28px) !important;margin:auto 0}
  .modal-box{max-height:calc(100dvh - 28px) !important;overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important}
}

/* -- 9. Comparateur Sellavi/Lengow/Channable : reserve aux ecrans
      >= 641px (tableau illisible en 390px, decision produit). -- */
@media (max-width:640px){
  #comparatif{display:none !important}
}

/* -- 10. Footer : colonnes de liens 2 par ligne, descente reduite -- */
@media (max-width:640px){
  .sx-10-footer-top{display:grid !important;grid-template-columns:1fr 1fr !important;gap:26px 18px !important}
  .sx-10-footer-top > *:first-child{grid-column:1 / -1}
  .sx-10-footer-col{gap:2px !important}
}