/* ===========================================================
   GESTICARB — Site vitrine · 5. RESPONSIVE
   Cascade descendante : 1440 → 1280 → 1180 → 1080 → 1020
                       → 900 → 768 → 620 → 480 → 380 → 360
   Objectif : aucun débordement horizontal, aucun texte coupé,
   aucun bouton inaccessible, cibles tactiles ≥ 44 px.
   =========================================================== */

/* ---- très grands écrans : on élargit sans distendre ---- */
@media (min-width:1600px){
  :root{--maxw:1360px;--section-y:110px}
  .hero{padding:calc(var(--header-h) + 104px) 0 110px}
}

/* ---- laptop large ---- */
@media (max-width:1280px){
  :root{--gutter:22px}
  .nav a{padding:12px;font-size:13.5px}   /* on resserre en largeur, jamais en hauteur */
  .nav a svg{display:none}          /* on garde les libellés, on retire les icônes */
}

/* ---- laptop ---- */
@media (max-width:1180px){
  .header__cta .btn--line{display:none}   /* « Nous contacter » : gardé dans le menu mobile */
  .cycle__track{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr}
}

/* ---- petit laptop / grande tablette + bascule vers le menu burger ----
   Seuil à 1080 px : les tablettes en paysage (1024 px, tactiles) passent
   au menu burger plutôt qu'à une barre pensée pour la souris. ---- */
@media (max-width:1080px){
  :root{--section-y:82px}
  .charts,.chart-row,.chart-row--2{grid-template-columns:1fr}
  .mini-kpis{grid-template-columns:repeat(2,1fr)}
  .showcase__grid{grid-template-columns:1fr;gap:36px}
  .footer__grid{grid-template-columns:1fr 1fr}

  .nav{display:none}
  .burger{display:block}
  .header__cta{gap:8px}
  /* en mode tactile, le bouton ERP repasse à la cible minimale de 44 px */
  .header__cta .btn--sm{min-height:var(--tap)}
}

/* ---- tablette paysage / petite tablette ---- */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .mock{transform:none}                    /* plus de perspective : lisibilité au doigt */
  .mock:hover{transform:none}
  .split{grid-template-columns:1fr;gap:28px}
  .cycle__track{grid-template-columns:repeat(2,1fr)}
  .shot--wide{grid-column:auto}
}

/* ---- tablette portrait (768 px) ---- */
@media (max-width:768px){
  :root{--section-y:70px;--gutter:20px;--header-h:70px}
  .hero{padding:calc(var(--header-h) + 56px) 0 72px}
  .kpis{grid-template-columns:1fr 1fr;margin-top:-44px}
  .kpis .kpi:last-child{grid-column:1/-1}
  .chart-box{height:250px}
  .chart-box--sm{height:220px}
  .brand__sub{display:none}                /* on allège le bloc de marque */
  .cta{flex-direction:column;align-items:flex-start}
  .cta__actions{width:100%}
  .cta__actions .btn{flex:1 1 200px}
}

/* ---- grand mobile (620 px) ---- */
@media (max-width:620px){
  .kpis{grid-template-columns:1fr;margin-top:-36px}
  .kpis .kpi:last-child{grid-column:auto}
  .modules,.portal-grid,.steps{grid-template-columns:1fr}
  .cycle__track{grid-template-columns:1fr}
  .showcase__pillars{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:26px}
  .shots{grid-template-columns:1fr}
  .gauges{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
}

/* ---- mobile (480 px) ---- */
@media (max-width:480px){
  :root{--section-y:58px;--gutter:16px}
  body{font-size:15.5px}
  .hero{padding:calc(var(--header-h) + 44px) 0 62px}
  .hero__actions{gap:10px}
  .hero__actions .btn{width:100%}          /* boutons pleine largeur, faciles au pouce */
  .hero__facts{gap:14px 24px}
  .kpi-mini{grid-template-columns:1fr}
  .mini-kpis{grid-template-columns:1fr}
  .mock__body{padding:14px}
  .mock__chart{height:112px}
  .panel{padding:18px}
  .chart-box{height:230px}
  .chart-box--sm{height:200px}
  .mod,.step,.portal{padding:20px}
  .doc-card{padding:20px}
  .shot__cap{padding:15px 16px}
  .showcase__stats{grid-template-columns:1fr}
  .cta__actions .btn{width:100%;flex:1 1 auto}
  .footer{padding:48px 0 22px}
  .footer__bottom{flex-direction:column;gap:8px;text-align:left}
  .wa{height:54px;padding:0 15px;right:16px;bottom:16px}
  .wa__label{display:none}                 /* pastille ronde seule : ne masque plus le contenu */
}

/* ---- petit mobile (380 px) ---- */
@media (max-width:380px){
  :root{--gutter:14px}
  .brand__mark,.brand__mark img{width:48px}
  .brand__name{font-size:17px}
  .header__cta .btn{padding:0 12px;font-size:13.5px}
  .gauges{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .mod-group__count{display:none}
  .eyebrow{font-size:11px;padding:6px 11px}
  .gauge__ring{width:78px;height:78px}
}

/* ---- très petit mobile (360 px et moins) ---- */
@media (max-width:360px){
  .header__cta .btn span.btn__long{display:none}   /* « Espace ERP » → icône + « ERP » */
  .doc-row{gap:8px}
  .doc-row__amt{margin-left:0;width:100%}
}

/* ---- écrans bas (mobile en paysage) ---- */
@media (max-height:480px) and (orientation:landscape){
  .hero{padding:calc(var(--header-h) + 28px) 0 40px}
  .mobile-nav{max-height:calc(100dvh - var(--header-h))}
}

/* ---- appareils tactiles : pas d'effets au survol ---- */
@media (hover:none){
  .btn:hover,.mod:hover,.mk:hover,.gauge:hover,.shot:hover,
  .portal:hover,.cyc:hover,.pillar:hover,.wa:hover{transform:none}
  .mock:hover{transform:perspective(1600px) rotateY(-7deg) rotateX(3deg)}
}
@media (hover:none) and (max-width:900px){
  .mock:hover{transform:none}
}

/* ---- mouvement réduit ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---- contraste élevé ---- */
@media (prefers-contrast:more){
  .lede,.mod p,.mod li,.step p,.check p{color:#2a3a54}
  .mock__sub,.panel__hint,.gauge small{color:#5d6675}
  .btn{border-color:currentColor}
}