/* ERYX MAROC | intégration premium, structure et optimisation web. */
/* =========================================================
   Responsive : tablette, mobile et menu plein écran glass.
   ========================================================= */
@media (max-width:1100px){
  :root{--header-offset:104px}
  .flip-grid{grid-template-columns:repeat(2,1fr)}
  .two-col,.contact-grid,.cert-grid,.hero-grid{grid-template-columns:1fr;gap:38px}
  .cert-slider{min-height:500px}.cert-card img{height:285px}
}

@media (max-width:980px){
  .nav{height:72px}.nav-toggle{display:block;flex:0 0 auto}.brand{max-width:calc(100% - 68px)}
  .nav-links{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;padding:112px 30px 40px;background:linear-gradient(135deg,rgba(3,22,15,.96),rgba(8,75,48,.92));backdrop-filter:blur(42px) saturate(150%);-webkit-backdrop-filter:blur(42px) saturate(150%);opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s var(--ease);box-shadow:inset 0 0 140px rgba(255,255,255,.05)}
  .nav-links.is-open{opacity:1;visibility:visible;transform:none}
  .nav-links>a:not(.btn),.nav-links>.btn{width:min(440px,100%);justify-content:flex-start;text-align:left;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:16px 18px;font-size:1rem;white-space:normal}.nav-links>a:not(.btn).is-active{border-left:4px solid #70f1a7;color:#fff}.nav-indicator{display:none}.nav-links>.btn{background:#fff;color:var(--green);margin-top:8px}.site-header:has(.nav-links.is-open) .brand{opacity:0;pointer-events:none}
}

@media (max-width:760px){
  :root{--header-offset:126px}.container{width:min(100% - 28px,var(--container))}.section{padding:72px 0}.section-first{padding-top:62px}
  .top-grid{padding:7px 0;justify-content:space-between;flex-direction:row;gap:12px}.top-contact{width:auto;justify-content:flex-start;gap:8px}.socials{width:auto;justify-content:flex-end;gap:7px}.top-contact a{width:auto;justify-content:flex-start;text-align:left}.top-contact a[href^="mailto:"]{display:none}.socials a{width:32px;height:32px}
  h1{font-size:clamp(1.75rem,8.4vw,2.45rem)}h2{font-size:clamp(1.32rem,6vw,1.86rem)}.lead{font-size:1rem}.section-head{margin-bottom:30px}.hero-actions{align-items:stretch}.hero-actions .btn{width:100%}.trust-row span{width:100%;text-align:center}.video-card{position:static;margin-top:16px;justify-content:center;width:100%;color:#fff}.hero-showcase{transform:none}.hero-visual{min-height:500px}
  .form-row,.domain-grid,.process-line{grid-template-columns:1fr}.process-line:before,.process-progress{display:none}.flip-grid{grid-template-columns:1fr}.flip-card{height:300px}.cert-slider{min-height:520px}.cert-card{padding:16px}.cert-card img{height:245px}.slider-dots{right:18px;bottom:16px}.portfolio-card{width:min(300px,82vw);flex-basis:min(300px,82vw)}.footer-grid{justify-content:center;text-align:center}.float-action{height:50px}.go-top{left:16px;bottom:16px;width:50px}.whatsapp{right:16px;bottom:16px;width:50px;min-width:50px;border-radius:50%;padding:0}.whatsapp span{display:none}.modal-frame img,.modal-frame iframe{height:min(56vh,460px)}
}

@media (max-width:430px){
  .brand strong{font-size:.9rem}.brand small{font-size:.7rem}.brand-mark{width:42px;height:42px}.nav{gap:10px}.nav-toggle{width:42px;height:40px}.nav-links{padding:100px 18px 28px}.contact-form{padding:22px}.phone-field{display:grid}.phone-field .prefix{border-right:0;border-bottom:1px solid #d7e7de;min-height:42px}.cert-card img{height:210px}.cert-card-body{padding-top:16px}
}
@media (max-width:980px){body.menu-open .brand{opacity:0;pointer-events:none}}

/* =========================================================
   Ajustements v10 : menu mobile brouillard renforcé + slider intégré au hero.
   ========================================================= */
@media (max-width:1100px){
  .hero-visual,.hero-showcase{min-height:480px}
}
@media (max-width:980px){
  .nav-links{z-index:1000;isolation:isolate;background:linear-gradient(135deg,rgba(4,24,17,.97),rgba(9,72,47,.95));backdrop-filter:blur(86px) saturate(160%);-webkit-backdrop-filter:blur(86px) saturate(160%);box-shadow:inset 0 0 180px rgba(255,255,255,.08),0 30px 120px rgba(0,0,0,.34)}
  .nav-links::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 22% 12%,rgba(255,255,255,.22),transparent 32%),radial-gradient(circle at 84% 72%,rgba(112,241,167,.2),transparent 36%),rgba(4,19,14,.94)}
  .nav-toggle{z-index:1001}.nav-toggle[aria-expanded="true"]{z-index:1002}
  .site-header:has(.nav-links.is-open),body.menu-open .site-header{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header:has(.nav-links.is-open) .top-header,.site-header:has(.nav-links.is-open) .brand,body.menu-open .top-header,body.menu-open .brand{opacity:0;visibility:hidden;pointer-events:none}
  body.menu-open{overflow:hidden}
}
@media (max-width:760px){
  .hero-visual,.hero-showcase{min-height:500px}.hero-slide-caption{left:16px;right:16px;bottom:92px;padding:18px}.hero-slide img{height:100%}.about-actions .btn{width:100%}
}
@media (max-width:430px){
  .hero-visual,.hero-showcase{min-height:480px}.hero-slide-caption p{font-size:.9rem}.hero-dots{right:16px;top:16px}
}


@media (max-width:430px){.brand-logo{width:168px;padding:5px 6px;border-radius:13px}}


/* ERYX MAROC | adaptation finale top bar tablette/mobile. */
@media (max-width:980px){
  .top-grid{display:flex;align-items:center;justify-content:space-between;flex-direction:row;gap:12px;min-height:40px}
  .top-contact{order:1;width:auto;justify-content:flex-start;min-width:0}.socials{order:2;width:auto;justify-content:flex-end;flex:0 0 auto}
  .top-contact a[href^="mailto:"]{display:none!important}.top-contact a{font-size:.82rem;white-space:nowrap}.socials a{width:30px;height:30px}
  .brand-logo{width:clamp(146px,25vw,178px);height:54px}
}
@media (max-width:430px){
  .top-grid{gap:8px}.top-contact a span{font-size:.78rem}.socials{gap:5px}.socials a{width:28px;height:28px}.socials svg{width:14px;height:14px}
  .brand-logo{width:142px;height:50px}
}

/* ERYX MAROC | correctif mobile/tablette : bouton Devis hors conflit d'état actif. */
@media (max-width:980px){
  .nav-links>.btn,
  .nav-links>.btn.is-active,
  .nav-links>.btn:hover,
  .nav-links>.btn:focus,
  .nav-links>.btn:focus-visible,
  .nav-links>.btn:active{
    background:#fff;
    color:var(--green)!important;
    border:1px solid rgba(255,255,255,.58);
    border-left:1px solid rgba(255,255,255,.58);
    box-shadow:0 18px 44px rgba(0,0,0,.18);
  }
  .nav-links>.btn::before,
  .nav-links>.btn::after{display:none!important}
}