/* ============================================================
   MainJobToDo — Mobile-first overrides (v1)
   Loaded AFTER style-v3-036.css. Active ≤960px.
   Breakpoints used:
     ≤960px → tablet / phone
     ≤640px → main mobile target
     ≤380px → small phones (iPhone SE etc.)
   ============================================================ */

/* ============================================================
   1. GLOBAL RESET MOBILE
   ============================================================ */
@media (max-width:960px){
  html,body{max-width:100vw;overflow-x:hidden}
  body{padding-top:60px;font-size:15px;line-height:1.65}
  img,video,svg{max-width:100%;height:auto}

  .container{max-width:100%;padding:0 18px}
  .section{padding:56px 0}
  .section-header{margin-bottom:24px;text-align:left}

  /* Typography scaled tighter */
  .h1{font-size:clamp(32px,8vw,46px);line-height:1.08;letter-spacing:-.02em}
  .h2{font-size:clamp(24px,6vw,34px);line-height:1.12}
  .h3{font-size:clamp(18px,4.5vw,22px)}

  /* Touch targets — minimum 44px for tap */
  .btn{padding:13px 22px;font-size:14px;min-height:44px}
  .btn-sm{padding:11px 18px;font-size:13px;min-height:40px}
  .btn-primary,.btn-outline,.btn-outline-white{width:auto}

  /* Hero buttons stack neatly */
  .hero-btns,.cta-actions{flex-direction:column;align-items:stretch;width:100%}
  .hero-btns .btn,.cta-actions .btn{justify-content:center;width:100%}

  /* No element should overflow horizontally */
  table,pre,code{max-width:100%;overflow-x:auto}
}

@media (max-width:640px){
  .container{padding:0 16px}
  .section{padding:44px 0}
}

@media (max-width:380px){
  .container{padding:0 14px}
}

/* ============================================================
   2. NAV — compact header + slide-in drawer
   ============================================================ */
@media (max-width:960px){
  .nav{height:60px}
  .nav-inner{height:60px;padding:0 16px;gap:10px}
  .nav-sep,.nav-links,.nav-tel,.nav-right .btn,.nav-right .lang-switch,.nav-portal-btn{display:none !important}
  .logo-mark{width:30px;height:30px;font-size:13px}
  .logo-text-name{font-size:14px}
  .logo-text-sub{font-size:7px;margin-top:2px}
  .burger{display:flex !important;width:48px;height:48px;align-items:center;justify-content:center;padding:0;gap:5px;
    pointer-events:auto !important;cursor:pointer !important;position:relative !important;z-index:1010 !important;
    touch-action:manipulation !important}
  .nav,.nav-inner,.nav-right{pointer-events:auto !important}
  .burger span{width:22px;height:2px;background:rgba(255,255,255,.9)}

  /* On mobile, nav is always opaque — no transparent variant (text would clash with hero) */
  .nav,.nav.nav--transparent{
    background:rgba(9,9,14,.98) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important
  }
  /* Ensure hero/heroes leave enough space for the fixed 60px nav */
  .hero,.hero-v2,.cat-hero,.cfgr-hero,.series-hero,.md-hero,
  .blog-hero,.bh-section,.about-hero,.fin-hero,.sav-hero,
  .sec-hero,.ec-hero,.guide-hero,.usine-hero,section[class*="-hero"]{
    padding-top:84px !important
  }
  .hero-content{padding-top:0 !important}
}

/* ============================================================
   3. MOBILE DRAWER (replaces .mob-menu)
   Side-sheet from right, hierarchical sections.
   ============================================================ */
.mob-drawer{position:fixed;inset:0;z-index:2100;visibility:hidden;pointer-events:none}
.mob-drawer.open{visibility:visible;pointer-events:auto}

.mob-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .28s ease;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.mob-drawer.open .mob-drawer-backdrop{opacity:1}

.mob-drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(360px,92vw);background:#0B0B12;color:#fff;
  transform:translateX(102%);transition:transform .32s cubic-bezier(.25,.46,.45,.94);
  display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.4)}
.mob-drawer.open .mob-drawer-panel{transform:translateX(0)}

.mob-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
.mob-drawer-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.mob-drawer-brand .lm{width:30px;height:30px;background:var(--orange);border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:13px;font-weight:900;color:#fff}
.mob-drawer-brand .lt{font-family:var(--font-h);font-size:14px;font-weight:800;color:#fff;letter-spacing:.03em}
.mob-drawer-close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;border-radius:8px;font-size:22px;line-height:1;padding:0}
.mob-drawer-close:hover,.mob-drawer-close:focus{color:#fff;background:rgba(255,255,255,.06)}

.mob-drawer-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px 0 24px}

.mob-nav-section{border-bottom:1px solid rgba(255,255,255,.06)}
.mob-nav-section:last-child{border-bottom:none}

.mob-nav-link,
.mob-nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 22px;font-family:var(--font-h);font-size:16px;font-weight:600;color:#fff;
  background:none;border:none;text-align:left;cursor:pointer;text-decoration:none;letter-spacing:-.01em;
  transition:background .18s ease,color .18s ease;min-height:52px;line-height:1.3}
.mob-nav-link:hover,.mob-nav-toggle:hover,
.mob-nav-link:focus,.mob-nav-toggle:focus{background:rgba(255,255,255,.04);color:var(--orange)}
.mob-nav-link.active,.mob-nav-toggle.active{color:var(--orange)}

.mob-nav-toggle .chev{transition:transform .25s ease;color:rgba(255,255,255,.5)}
.mob-nav-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}

.mob-nav-sub{max-height:0;overflow:hidden;transition:max-height .3s ease;background:rgba(255,255,255,.025)}
.mob-nav-section.open .mob-nav-sub{max-height:600px}
.mob-nav-sub a{display:flex;align-items:center;gap:10px;padding:13px 22px 13px 38px;
  font-family:var(--font-b);font-size:14.5px;font-weight:500;color:rgba(255,255,255,.65);
  text-decoration:none;min-height:46px;border-top:1px solid rgba(255,255,255,.04);transition:color .18s ease,background .18s ease}
.mob-nav-sub a:hover,.mob-nav-sub a:focus{color:#fff;background:rgba(255,255,255,.04)}
.mob-nav-sub a .l{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;
  background:rgba(232,92,0,.12);color:var(--orange);border-radius:5px;font-family:var(--font-h);font-size:11px;font-weight:800;flex-shrink:0}

.mob-drawer-foot{padding:14px 18px 22px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:10px;flex-shrink:0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.4))}
.mob-drawer-foot .btn{justify-content:center;width:100%}
.mob-drawer-foot .row{display:flex;gap:8px}
.mob-drawer-foot .row > *{flex:1}
.mob-drawer-foot .lang-switch{display:inline-flex;gap:0;border:1px solid rgba(255,255,255,.12);border-radius:8px;overflow:hidden}
.mob-drawer-foot .lang-switch-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1;height:40px;font-size:12px;font-weight:700;color:rgba(255,255,255,.6);text-decoration:none}
.mob-drawer-foot .lang-switch-btn+.lang-switch-btn{border-left:1px solid rgba(255,255,255,.12)}
.mob-drawer-foot .lang-switch-btn.active{background:var(--orange);color:#fff}

body.no-scroll{overflow:hidden;position:fixed;width:100%}

/* Hide legacy mob-menu when drawer is in use */
@media (max-width:960px){
  .mob-menu{display:none !important}
}

/* ============================================================
   4. HERO — homepage and inner pages — centered & compact
   ============================================================ */
@media (max-width:960px){
  .hero{min-height:auto !important;height:auto !important;max-height:none !important;
    padding:32px 0 28px !important;display:block !important;margin-top:0 !important}
  .hero-content{padding:0 18px !important;width:100% !important;text-align:center !important;
    display:flex !important;flex-direction:column !important;align-items:center !important;
    justify-content:flex-start !important;max-width:100% !important;margin:0 auto !important}
  /* Eyebrow centered — hide the leading dash on mobile */
  .hero-eyebrow{margin:0 auto 16px !important;display:flex !important;justify-content:center !important;align-items:center !important;gap:0 !important;width:100%}
  .hero-line{display:none !important}
  .hero-eyebrow-txt{font-size:10px !important;line-height:1.4 !important;text-align:center !important;letter-spacing:.16em !important}
  /* Title centered, smaller, "SAV en France" outline KEPT */
  .hero-title{font-size:clamp(28px,7vw,42px) !important;line-height:1.05 !important;max-width:100% !important;
    hyphens:none !important;-webkit-hyphens:none !important;
    overflow-wrap:normal !important;word-break:normal !important;letter-spacing:-.025em;
    text-align:center !important}
  .hero-title .outline{display:inline !important}
  .hero-sub{font-size:14px;line-height:1.55;max-width:100%;margin:12px auto 0 !important;text-align:center}
  /* Buttons centered & stretched */
  .hero-btns{margin:18px auto 0 !important;gap:10px;display:flex !important;flex-direction:column !important;align-items:stretch !important;width:100%;max-width:360px}
  .hero-btns .btn{padding:12px 18px;font-size:13.5px;justify-content:center !important;width:100%}
  /* Machine indicator tags — useless on mobile (no hover video rotation) */
  .hero-machine-indicator{display:none !important}
  /* Stats centered */
  .hero-stats{gap:14px !important;margin:24px auto 0 !important;padding-top:18px !important;
    flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);
    display:grid !important;grid-template-columns:1fr 1fr !important;width:100%;text-align:center}
  .hero-stats > *{flex:none !important;min-width:0;text-align:center}
  .hero-stat{text-align:center !important;display:flex !important;flex-direction:column !important;align-items:center !important}
  .stat-num,.hero-stat-val{font-size:clamp(26px,7vw,36px) !important;line-height:1.05 !important;letter-spacing:-.02em;text-align:center}
  .stat-lbl,.hero-stat-lbl{font-size:10.5px !important;line-height:1.3 !important;margin-top:2px !important;text-align:center}

  /* hero-v2 (alternate hero) — same centered treatment */
  .hero-v2{min-height:auto !important;height:auto !important;max-height:none !important;
    padding:32px 0 28px !important;display:block !important;margin-top:0 !important}
  .hero-v2 .hero-title{font-size:clamp(28px,7vw,42px) !important;hyphens:none !important;-webkit-hyphens:none !important;overflow-wrap:normal !important;word-break:normal !important;text-align:center !important}
  .hero-machines-bg{opacity:.4}
}

@media (max-width:640px){
  .hero{padding-top:84px;padding-bottom:36px}
  .hero-stats > *{flex:1 1 100%}
  .hero-stats{gap:12px;margin-top:28px}
}

/* ============================================================
   5. GRIDS — generic collapse rules
   ============================================================ */
@media (max-width:960px){
  .num-grid,.usp-grid,.svc-grid,.svc-grid-v2,.testi-grid,
  .contact-grid,.cta-inner,.machines-grid,
  .catalog-series-grid,.cat2-grid,.machine-detail,
  .result-machines,.md-hero-grid,.md-desc-grid,
  .footer-grid,.form-row,.gallery-video-grid,
  .interpret-grid,.tool-row,.why-grid,.sav-grid,
  .finance-grid,.aids-grid,.components-grid,
  .decision-grid,.lead-magnet-inner,.founder-banner,
  .blog-lead-inner,.blog-inline-cta,.blog-author-box,
  .trust-pillars-grid,.process-steps,.process-steps-v2{
    grid-template-columns:1fr !important;
    gap:16px !important
  }
  .sector-grid,.challenge-grid,.sav-process-steps,.parts-grid,
  .blog-grid,.spec-groups,.md-spec-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}
  .hero-stats,.num-grid,.founder-stats{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:16px !important}
  .gallery-photo-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
}

@media (max-width:480px){
  .sector-grid,.challenge-grid,.parts-grid,.blog-grid,.md-spec-grid,
  .gallery-photo-grid,.spec-groups,.founder-stats{grid-template-columns:1fr !important}
  .sav-process-steps{grid-template-columns:repeat(2,1fr) !important}
}

/* ============================================================
   6. FOOTER
   ============================================================ */
@media (max-width:960px){
  footer{padding:48px 0 28px}
  .footer-grid{grid-template-columns:1fr !important;gap:32px}
  .footer-grid > *{text-align:left}
}

/* ============================================================
   7. COOKIE BANNER
   ============================================================ */
@media (max-width:640px){
  .cookie-banner .cookie-inner{flex-direction:column;align-items:stretch;text-align:center;padding:14px 16px;gap:10px}
  .cookie-banner{padding:0}
  .cookie-banner button,.cookie-banner .btn{width:100%;justify-content:center}
}

/* ============================================================
   8. FLOATING ACTIONS (phone bubble bottom-right)
   ============================================================ */
@media (max-width:640px){
  .floating-actions,.floating-call,.fab-call{bottom:14px !important;right:14px !important}
  .floating-actions a,.floating-call{font-size:13px !important;padding:10px 14px !important}
}

/* ============================================================
   9. CATALOGUE & SERIES
   ============================================================ */
@media (max-width:960px){
  .cg-section,.sect-section{padding:48px 0 36px !important}
  .cg-grid{grid-template-columns:repeat(2,1fr) !important;gap:14px !important;max-width:100% !important}
  .cg-card{padding:16px 16px 14px !important;min-height:170px !important}
  .cg-visual img{height:130px !important}
  .cg-name{font-size:20px !important}
  .cg-body{flex-direction:column !important}
  .cg-text{flex:0 0 auto !important;max-width:100% !important}
}
@media (max-width:560px){
  .cg-grid{grid-template-columns:1fr !important;max-width:420px !important}
}

/* Series filters / sticky bar */
@media (max-width:960px){
  .series-filters,.cat-filters{flex-wrap:wrap;gap:8px;padding:12px 16px}
  .series-btn,.cat-filter-btn{font-size:12px;padding:8px 12px;min-height:36px}
  .series-hero,.cat-hero{padding:72px 0 32px}
}

/* ============================================================
   10. MACHINE DETAIL (machine.ejs)
   ============================================================ */
@media (max-width:960px){
  .md-hero{padding:32px 0 36px}
  .md-hero-grid{gap:24px}
  .md-hero-img{height:280px;padding:0}
  .md-machine-name{font-size:clamp(26px,6vw,36px)}
  .md-key-specs{grid-template-columns:repeat(2,1fr) !important;gap:8px}
  .md-key-spec{padding:10px 8px}
  .md-key-spec-val{font-size:16px}
  .md-key-spec-lbl{font-size:10px}
  .md-advantages{position:static}
  .md-sticky-nav{top:60px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .md-sticky-name,.md-sticky-btn{display:none}
  .md-sticky-links{gap:14px;flex-wrap:nowrap;white-space:nowrap}
  .md-sticky-links a{font-size:12px;padding:8px 4px}
  .md-cta-row{flex-direction:column;align-items:stretch}
  .md-cta-row .btn,.md-cta-row .btn-primary{width:100%;justify-content:center;padding:13px 20px;font-size:14px}
  .md-hero-thumbs{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .md-hero-thumbs::-webkit-scrollbar{display:none}
  .md-spec-grid{grid-template-columns:1fr !important}
  .spec-groups{grid-template-columns:1fr !important}
  .spec-row{padding:10px 14px;font-size:13px}
  .spec-row-key{font-size:12.5px}
  .spec-row-val{font-size:13.5px}
}

@media (max-width:480px){
  .md-hero-img{height:240px}
  .md-key-specs{grid-template-columns:1fr !important}
}

/* ============================================================
   11. CONFIGURATEUR
   ============================================================ */
@media (max-width:960px){
  .config-body,.cfg-body{padding:24px 18px !important}
  .config-q,.cfg-question{font-size:18px !important;line-height:1.3}
  .opt-grid,.cfg-options{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .opt-card,.cfg-option{padding:14px 12px;min-height:auto;font-size:13px}
  .config-progress,.cfg-progress{flex-wrap:wrap;gap:6px;padding:14px 12px}
  .prog-step,.cfg-step{padding:8px 10px;font-size:10px}
  .prog-step-lbl{font-size:9px}
  .cfg-nav{flex-direction:column-reverse;gap:10px;padding:16px}
  .cfg-nav .btn{width:100%;justify-content:center}
  .cfg-card--process{padding:22px 16px 18px !important}
}

@media (max-width:480px){
  .opt-grid,.cfg-options{grid-template-columns:1fr !important}
  .config-progress,.cfg-progress{font-size:10px}
  .prog-step,.cfg-step{padding:6px 8px}
}

/* ============================================================
   12. ABOUT / POURQUOI / USINE / SECTEUR / SERVICES
   ============================================================ */
@media (max-width:960px){
  .founder-banner{grid-template-columns:1fr !important;gap:24px}
  .founder-img{height:280px;object-fit:cover}
  .founder-stats{grid-template-columns:repeat(2,1fr) !important;gap:10px}
  .founder-stat{padding:16px 12px}
  .founder-stat-val{font-size:22px}

  .why-grid,.sav-grid,.finance-grid,.aids-grid,.components-grid,
  .interpret-grid,.tool-row{grid-template-columns:1fr !important;gap:16px}

  .sav-process-steps{grid-template-columns:repeat(2,1fr) !important;gap:12px}

  .trust-pillars{padding:48px 0}
  .trust-pillars-grid{grid-template-columns:1fr !important;gap:14px}

  /* Sectors photo grid */
  .sect-grid{grid-template-columns:1fr 1fr !important;grid-template-rows:auto !important}
  .sect-card--lg{grid-column:1/3 !important;grid-row:auto !important;height:260px !important}
  .sect-card{height:200px}
  .sect-content{padding:16px}
  .sect-title{font-size:18px}
}
@media (max-width:480px){
  .sect-grid{grid-template-columns:1fr !important}
  .sect-card--lg{grid-column:auto !important;height:220px !important}
}

/* ============================================================
   13. BLOG
   ============================================================ */
@media (max-width:960px){
  .blog-hero{padding:64px 0 32px}
  .blog-grid{grid-template-columns:repeat(2,1fr) !important;gap:16px}
  .blog-card{padding:0}
  .blog-card-img{height:160px}
  .blog-card-title{font-size:17px}
  .blog-lead-inner{flex-direction:column;text-align:center;gap:20px;padding:24px}
  .blog-lead-content{flex-direction:column;gap:12px}
  .blog-inline-cta{flex-direction:column;text-align:center;gap:14px;padding:22px}
  .blog-inline-cta-actions{justify-content:center;width:100%}
  .blog-inline-cta-actions .btn{width:100%}
  .blog-author-box{flex-direction:column;text-align:center;gap:14px;padding:20px}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr !important}
}

/* Blog article */
@media (max-width:960px){
  .article-grid{grid-template-columns:1fr !important;gap:24px}
  .article-sidebar{position:static;display:none}
  .article-toc-mobile{display:block !important}
  .article-content{font-size:16px;line-height:1.75}
  .article-content h2{font-size:24px;margin-top:32px}
  .article-content h3{font-size:19px;margin-top:24px}
  .article-content p{margin-bottom:16px}
  .article-content ul,.article-content ol{padding-left:20px}
  .article-featured-img{border-radius:12px}
  .article-actions{flex-wrap:wrap;gap:8px}
  .article-pager{flex-direction:column;gap:12px}
  .article-pager > *{width:100%}
  .read-progress{height:2px}
}

/* ============================================================
   14. CONTACT FORM
   ============================================================ */
@media (max-width:960px){
  .contact-grid{grid-template-columns:1fr !important;gap:24px}
  .contact-form{padding:24px 18px}
  .form-row{grid-template-columns:1fr !important;gap:14px}
  .form-row .form-field,.form-field{margin-bottom:14px}
  input[type="text"],input[type="email"],input[type="tel"],input[type="number"],
  input[type="password"],select,textarea{font-size:16px !important;padding:12px 14px;min-height:46px;border-radius:8px}
  textarea{min-height:120px}
  label{font-size:13px}
  .contact-form button[type="submit"]{width:100%;justify-content:center;font-size:15px;padding:14px 24px}
  .contact-info{padding:24px 18px}
}

/* ============================================================
   15. CTA SECTIONS (dark callouts at end of pages)
   ============================================================ */
@media (max-width:960px){
  .cta-section,.dark-cta{padding:48px 0;overflow:hidden}
  .cta-section .container,.cta-inner{max-width:100% !important;padding-left:16px !important;padding-right:16px !important}
  .cta-inner{display:flex !important;flex-direction:column !important;text-align:center !important;gap:20px !important}
  .cta-actions{justify-content:center;width:100%}
  .cta-title,.cta-h2{font-size:clamp(24px,6.5vw,34px) !important;line-height:1.15 !important;hyphens:none !important;-webkit-hyphens:none !important}
  .cta-actions{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%}
  .cta-actions .btn{width:100%;justify-content:center}

  /* Inline contact form inside CTA (home) — force single column */
  .cta-form,form[id="ctaQuickForm"],.cta-actions form{
    grid-template-columns:1fr !important;
    max-width:100% !important;width:100% !important;gap:10px !important}
  .cta-form input,.cta-form select,.cta-form textarea,
  form[id="ctaQuickForm"] input,form[id="ctaQuickForm"] select,form[id="ctaQuickForm"] textarea{
    width:100% !important;box-sizing:border-box !important;font-size:16px !important;
    padding:12px 14px !important;min-height:46px}
  .cta-form textarea,form[id="ctaQuickForm"] textarea{min-height:110px;grid-column:auto !important}
  .cta-form > div,form[id="ctaQuickForm"] > div{grid-column:auto !important;width:100%}
  .cta-form button,form[id="ctaQuickForm"] button{width:100% !important;flex:0 0 100% !important;justify-content:center !important;padding:13px 18px !important;font-size:14.5px !important}
  .cta-form a.btn,form[id="ctaQuickForm"] a.btn{width:100% !important;flex:0 0 100% !important;justify-content:center !important}
}

/* ============================================================
   16. ESPACE CLIENT (login + portal landing)
   ============================================================ */
@media (max-width:960px){
  .ec-hero,.portal-hero{padding:80px 0 40px}
  .ec-hero-grid,.portal-hero-grid{grid-template-columns:1fr !important;gap:24px}
  .ec-features-grid,.portal-features-grid{grid-template-columns:1fr !important;gap:14px}
}

/* ============================================================
   17. LIGHTBOX / GALLERY OVERLAYS
   ============================================================ */
@media (max-width:768px){
  .lightbox{padding:12px}
  .lightbox-arrow{width:38px;height:38px}
  .lightbox-prev{left:8px}
  .lightbox-next{right:8px}
  .lightbox-caption{font-size:12px;padding:8px 12px}
}

/* ============================================================
   18. TICKER / TOPBAR scrollers
   ============================================================ */
@media (max-width:640px){
  .ticker,.ticker-inner{font-size:11px}
  .topbar-inner{flex-direction:column;text-align:center;gap:4px;padding:6px 12px}
}

/* ============================================================
   19. UTILITY — prevent text overflow on long URLs / words
   ============================================================ */
@media (max-width:960px){
  p,a,li{overflow-wrap:break-word;word-wrap:break-word;hyphens:manual;-webkit-hyphens:manual}
  /* Standalone spans (NOT inside headings) can break long URLs */
  p span,p a span,li span{overflow-wrap:break-word}
  /* Headlines must NOT be hyphenated nor broken mid-word — keep them clean */
  h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,.hero-title,.hero-title *,
  .cfgr-hero h1,.cfgr-hero h1 *,.md-machine-name,.md-machine-name *,
  .cat-hero h1,.series-title,.sec-hero h1,.bh-title,.blog-hero h1,
  .article-title,.cta-title,.cta-title *,.cfg-h,.cfg-h *,
  h1 span,h2 span,h3 span,h4 span,.h1 span,.h2 span,.h3 span,
  h1 em,h2 em,h3 em,.h1 em,.h2 em,.h3 em{
    hyphens:none !important;-webkit-hyphens:none !important;
    overflow-wrap:normal !important;word-break:normal !important;word-wrap:normal !important}
  .nowrap-mobile-off{white-space:normal !important}
}

/* ============================================================
   20. ANIMATIONS — soften on mobile (reduce motion sickness)
   ============================================================ */
@media (max-width:960px){
  .reveal{transform:translateY(16px)}
  *{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================================================
   21. POST-AUDIT PATCHES (v2) — fixes from real device testing
   ============================================================ */

/* 21.1 — Cookie banner: stack vertically, fix dark-on-dark Refuse button */
@media (max-width:960px){
  .cookie-banner{padding:14px 0 !important}
  .cookie-banner .cookie-inner{flex-direction:column !important;align-items:stretch !important;
    gap:12px !important;padding:0 16px !important;text-align:left}
  .cookie-banner .cookie-inner p{min-width:0;font-size:13px;line-height:1.5}
  .cookie-banner .cookie-actions{display:flex !important;gap:10px !important;flex-shrink:0;width:100%}
  .cookie-banner .cookie-actions .btn{flex:1;width:auto;min-width:0;justify-content:center;padding:11px 16px;font-size:13px}
  /* The dark banner background hides .btn-outline text — force readable */
  .cookie-banner .btn-outline{color:#fff !important;border-color:rgba(255,255,255,.4) !important;background:transparent !important}
  .cookie-banner .btn-outline:hover{background:rgba(255,255,255,.08) !important;border-color:#fff !important;color:#fff !important}
}

/* 21.2 — Catalogue/series cards (.cg-card) — clean side-by-side mobile layout */
@media (max-width:960px){
  .cg-grid{grid-template-columns:1fr !important;gap:12px !important;max-width:100% !important}
  .cg-card{padding:14px 14px 14px 16px !important;min-height:120px !important;
    position:relative !important;overflow:hidden !important;
    display:grid !important;grid-template-columns:minmax(0,1fr) 110px !important;
    grid-template-areas:"text img" "cta img" !important;
    column-gap:14px !important;row-gap:4px !important;align-items:center !important}
  /* Title block (name + sub) */
  .cg-content{grid-area:text !important;display:flex !important;flex-direction:column !important;
    min-width:0 !important;margin:0 !important;padding:0 !important;align-self:end}
  .cg-content > *:first-child{margin-bottom:2px}
  /* Body wraps text + visual but we redistribute via subgrid */
  .cg-body{display:contents !important}
  .cg-text{grid-area:cta !important;display:flex !important;flex-direction:column !important;
    min-width:0 !important;max-width:100% !important;padding:0 !important;align-items:flex-start !important;align-self:start}
  /* Image fills right column */
  .cg-visual{grid-area:img !important;display:flex !important;
    width:110px !important;height:100% !important;min-height:100px !important;
    margin:0 !important;padding:0 !important;background:transparent !important;
    align-items:center !important;justify-content:center !important;align-self:stretch !important;
    position:static !important;transform:none !important}
  .cg-visual img{height:auto !important;width:auto !important;max-width:110px !important;max-height:100px !important;
    transform:none !important;left:auto !important;position:static !important;object-fit:contain !important;filter:none !important}
  .cg-card:hover .cg-visual img{transform:none !important}
  .cg-grid > *:nth-child(n) .cg-visual img,
  .cg-grid > *:nth-child(n):hover .cg-visual img{transform:none !important;left:auto !important;position:static !important}
  .cg-name{font-size:19px !important;line-height:1.1 !important;letter-spacing:-.02em}
  .cg-sub{font-size:12px !important;margin-top:2px !important;color:#888}
  .cg-desc{display:none !important}
  .cg-cta{padding:7px 13px !important;font-size:11.5px !important;
    align-self:flex-start !important;margin-top:6px !important;
    max-width:100% !important;width:auto !important}
}
@media (max-width:380px){
  .cg-card{grid-template-columns:minmax(0,1fr) 84px !important;padding:12px !important}
  .cg-visual{width:84px !important}
  .cg-visual img{max-width:84px !important;max-height:84px !important}
  .cg-name{font-size:17px !important}
  .cg-cta{font-size:11px !important;padding:6px 11px !important}
}

/* Series filters / catalog hero polish */
@media (max-width:960px){
  .cat-hero,.catalog-hero{padding:80px 0 32px;text-align:left}
  .cat-hero h1,.catalog-hero h1{font-size:clamp(28px,7vw,40px) !important;line-height:1.08}
  .cat-hero-sub,.catalog-hero-sub{font-size:14px}
  /* Catalog featured (large card) — compact mobile */
  .cat-featured{display:flex !important;flex-direction:column !important;padding:18px !important;border-radius:14px}
  .cat-featured-img,.cat-featured-visual{aspect-ratio:16/10;width:100%;height:auto !important;max-height:220px !important}
  .cat-featured-info{padding:18px 0 0 !important}
  .cat-featured-title{font-size:22px !important;line-height:1.15}
  .cat-featured-desc{font-size:14px;line-height:1.55}
  .cat-series-tags{flex-wrap:wrap;gap:6px}
  .cat-series-tags > *{font-size:11px;padding:4px 10px}
}

/* 21.3 — Sticky CTA: compact, auto-hide on scroll-down, soft transparent backdrop */
@media (max-width:960px){
  body{padding-bottom:24px}
  .sticky-cta{position:fixed !important;bottom:12px !important;left:50% !important;right:auto !important;
    transform:translateX(-50%) translateY(0) !important;display:flex !important;gap:6px !important;z-index:990 !important;
    background:transparent;max-width:calc(100vw - 24px) !important;
    transition:transform .35s cubic-bezier(.25,.46,.45,.94),opacity .35s ease !important;opacity:1;will-change:transform}
  .sticky-cta.is-hidden{transform:translateX(-50%) translateY(120%) !important;opacity:0;pointer-events:none}
  .sticky-cta .sticky-tel,.sticky-cta .sticky-msg{padding:9px 14px !important;font-size:12.5px !important;
    border-radius:22px !important;min-height:38px !important;white-space:nowrap;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .sticky-cta .sticky-tel{background:rgba(232,92,0,.95) !important;color:#fff !important;
    box-shadow:0 6px 18px rgba(232,92,0,.35) !important;border:none !important}
  .sticky-cta .sticky-msg{background:rgba(255,255,255,.95) !important;color:#0F0F0F !important;
    box-shadow:0 6px 18px rgba(0,0,0,.15) !important;border:1px solid rgba(0,0,0,.06) !important}
  .sticky-cta .sticky-tel svg,.sticky-cta .sticky-msg svg{width:14px;height:14px}
}
@media (max-width:380px){
  .sticky-cta .sticky-tel,.sticky-cta .sticky-msg{padding:8px 11px !important;font-size:11.5px !important}
}

/* 21.4 — Drawer chevron simplification (avoid weird rotated path render) */
.mob-nav-toggle .chev{width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.mob-nav-toggle .chev path{stroke:rgba(255,255,255,.45)}
.mob-nav-toggle[aria-expanded="true"] .chev path{stroke:var(--orange)}
.mob-nav-toggle .chev{transition:transform .25s ease}
.mob-nav-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* 21.5 — Drawer footer button: ensure "Devis →" is visible (white on dark) */
.mob-drawer-foot .btn-primary{background:var(--orange) !important;color:#fff !important;border:none !important}
.mob-drawer-foot .btn-outline-white{color:#fff !important;border:1px solid rgba(255,255,255,.3) !important;background:transparent !important}

/* 21.6 — Configurator deep mobile (configurateur page) */
@media (max-width:960px){
  .cfg-question,.config-q{font-size:18px !important;line-height:1.3;letter-spacing:-.01em}
  .opt-card,.cfg-option{padding:14px 12px !important;font-size:13.5px !important;min-height:64px !important;
    display:flex !important;flex-direction:column !important;align-items:flex-start !important;text-align:left;justify-content:center !important}
  .opt-card .opt-icon,.cfg-option .cfg-icon{width:32px;height:32px;margin-bottom:6px}
  .opt-card .opt-label,.cfg-option .cfg-label{font-size:13.5px;font-weight:600;line-height:1.2}
  .opt-card .opt-sub,.cfg-option .cfg-sub{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:2px}
  .cfg-progress,.config-progress{font-size:9.5px;flex-wrap:wrap;gap:4px;padding:10px 14px}
  .cfg-stepper{flex-direction:column;gap:14px}
  .cfg-step-name{display:none}
  /* Configurator buttons fixed at bottom */
  .cfg-actions,.config-actions{padding:16px;background:linear-gradient(0deg,#000 0%,#000 80%,transparent 100%);
    position:sticky;bottom:0;left:0;right:0;z-index:5;display:flex;flex-direction:column-reverse;gap:10px}
  .cfg-actions .btn,.config-actions .btn{width:100%;justify-content:center;min-height:46px}
}

/* 21.7 — Machine detail sticky sub-nav improvements */
@media (max-width:960px){
  .md-sticky-nav{position:sticky;top:60px;z-index:50;background:rgba(15,15,15,.95);backdrop-filter:blur(10px)}
  .md-sticky-inner{padding:8px 12px !important}
  .md-sticky-links{display:flex !important;gap:14px !important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .md-sticky-links::-webkit-scrollbar{display:none}
  .md-sticky-links a{font-size:11.5px !important;font-weight:600;flex-shrink:0;padding:6px 0 !important;white-space:nowrap}
  /* Gallery thumbs */
  .md-hero-thumbs{display:flex !important;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:6px 2px;scrollbar-width:none}
  .md-hero-thumbs::-webkit-scrollbar{display:none}
  .md-hero-thumb{flex:0 0 64px;width:64px;height:64px;border-radius:8px;overflow:hidden}
}

/* 21.8 — Hero on inner pages: prevent video/image fill overflow */
@media (max-width:960px){
  .hero,.cat-hero,.series-hero,.machine-hero{overflow:hidden}
  .hero-bg-slide video,.hero-machines-bg video,.hero img,.hero video{object-position:50% 50% !important}
}

/* 21.9 — Forms accessibility on iOS: prevent zoom-on-focus by ensuring >=16px */
@media (max-width:960px){
  input,select,textarea,button{font-size:16px;line-height:1.4}
  input[type="checkbox"],input[type="radio"]{font-size:inherit;width:18px;height:18px}
  ::placeholder{font-size:14px}
}

/* 21.10 — Generic "section with image left/right" patterns commonly break */
@media (max-width:960px){
  .split-2,.two-cols,.row-2col,.feature-row,.about-row,.intro-row{
    display:flex !important;flex-direction:column !important;gap:20px !important
  }
  .split-2 > *,.two-cols > *,.row-2col > *{width:100% !important;flex:1 1 100% !important}
  /* Images in such rows should be no-bigger than 60vh and cover */
  .split-2 img,.about-row img,.intro-row img{max-height:60vh;width:100%;height:auto;border-radius:14px}
}

/* 21.11 — Tables: containers scroll horizontally; comparison table hidden (redundant with machines list) */
@media (max-width:960px){
  /* Hide the redundant comparison section — it duplicates the machines list */
  .sp-compare{display:none !important}
  /* Other wide tables: scroll horizontally */
  .spec-groups-wrap,.table-scroll,.scrollable-table{
    overflow-x:auto !important;-webkit-overflow-scrolling:touch;
    max-width:100%;border-radius:12px}
  .scrollable-table table{display:table !important;width:auto !important;min-width:560px}
}

/* 21.12 — Reveal animations on mobile: instant if reduced */
@media (max-width:640px){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

/* 21.13 — Long horizontal scroll guards */
@media (max-width:960px){
  body,html,main{overflow-x:hidden}
  .nav,.section,header,footer{max-width:100vw}
}

/* 21.14 — Ticker scroll — pause on mobile to save battery */
@media (max-width:640px){
  .ticker{animation:none !important}
  .ticker-inner{justify-content:center;text-align:center}
}

/* 21.15 — Floating phone button conflict with sticky-cta */
@media (max-width:640px){
  .floating-call,.fab-call,.floating-actions{display:none !important}
}

/* ============================================================
   22. PAGE-SPECIFIC OVERRIDES
   ============================================================ */

/* 22.1 — Configurateur page (cfgr-*) */
@media (max-width:960px){
  .cfgr-hero{min-height:auto !important;max-height:none !important;padding:84px 0 40px !important;
    display:block !important;flex-direction:column !important;align-items:stretch !important}
  /* Hide the showroom machines (they break on small screens) */
  .cfgr-showroom,.cfgr-showroom-machine,.cfgr-sm-l1,.cfgr-sm-r1,.cfgr-sm-l3,.cfgr-sm-r3{display:none !important}
  .cfgr-hero-grid,.cfgr-hero-ambient::after{display:none !important}
  .cfgr-hero-inner{padding:0 18px !important;max-width:100% !important}
  .cfgr-hero-content{max-width:100% !important;padding:0 !important}
  .cfgr-hero h1{font-size:clamp(28px,7.2vw,38px) !important;margin-bottom:18px !important}
  .cfgr-hero-eyebrow{font-size:11px !important;letter-spacing:.18em !important;margin-bottom:14px !important}
  .cfgr-hero-ctas{flex-direction:column !important;align-items:stretch !important;gap:10px !important;width:100% !important;margin-top:18px !important}
  .cfgr-hero-ctas .btn,.cfgr-hero-ctas .btn-primary,.cfgr-hero-ctas .btn-outline-white{width:100% !important;justify-content:center !important;padding:13px 20px !important}
  /* Metrics: stack inline below text */
  .cfgr-hero-metrics{position:static !important;transform:none !important;
    display:flex !important;justify-content:center !important;gap:18px !important;
    margin:22px auto 0 !important;flex-wrap:wrap !important;white-space:normal !important}
  .cfgr-hero-metrics > .cfgr-hm-item{margin-top:0 !important;flex:0 0 auto !important;text-align:center !important}
  .cfgr-hm-num{font-size:28px !important}
  .cfgr-hm-lbl{font-size:10.5px !important}
  /* cfgr-how + cfgr-main */
  .cfgr-how{padding:48px 0 !important}
  .cfgr-how-grid{grid-template-columns:1fr !important;gap:18px !important}
  .cfgr-how-card{padding:22px 18px !important}
  .cfgr-main{padding:32px 0 56px !important}
  .cfgr-main-inner,.cfgr-card{padding:18px 16px !important;border-radius:14px !important}
  .cfgr-q,.cfgr-question{font-size:20px !important;line-height:1.25 !important;letter-spacing:-.015em}
  .cfgr-options{grid-template-columns:1fr 1fr !important;gap:10px !important}
  .cfgr-option{padding:14px 12px !important;min-height:80px !important;font-size:13px !important;text-align:left !important}
  .cfgr-step-name,.cfgr-step-label{display:none !important}
  .cfgr-progress,.cfgr-progress-bar{padding:12px 14px !important}
  .cfgr-nav,.cfgr-actions{flex-direction:column-reverse !important;gap:10px !important;padding:14px 0 0 !important}
  .cfgr-nav .btn,.cfgr-actions .btn{width:100% !important;justify-content:center !important;padding:13px 18px !important}
}

/* Drop to 1 col on tiny screens */
@media (max-width:380px){
  .cfgr-options{grid-template-columns:1fr !important}
  .cfgr-hero h1{font-size:26px !important}
}

/* 22.2 — Series page (.sp-* premium hero, .series-*) */
@media (max-width:960px){
  /* Machines list (sp-machines) — proper card grid */
  .sp-machines{padding:48px 0 !important}
  .sp-machines .container{padding:0 16px !important}
  .sp-machines .machines-grid{grid-template-columns:1fr !important;gap:14px !important}
  .sp-machines .machine-card{padding:16px !important}
  .sp-machines .machine-img{height:180px !important}
  .sp-machines .machine-img img{max-height:160px}
  .sp-section-head{text-align:center !important;margin-bottom:24px !important}
  .sp-section-head h2{font-size:clamp(24px,6vw,32px) !important;text-align:center !important}

  /* Generic compact for all sp-* sections */
  .sp-why,.sp-tech,.sp-industry,.sp-proof,.sp-faq{padding:48px 0 !important}
  .sp-why .container,.sp-tech .container,.sp-industry .container,
  .sp-proof .container,.sp-faq .container{padding:0 16px !important}
  .sp-why h2,.sp-tech h2,.sp-industry h2,.sp-proof h2,.sp-faq h2{
    font-size:clamp(22px,5.5vw,30px) !important;text-align:center !important;line-height:1.18 !important;
    hyphens:none !important;overflow-wrap:normal !important;word-break:normal !important}

  /* Premium series hero — compact mobile with bigger machine image */
  body section.sp-hero{padding:0 !important;min-height:0 !important;max-height:none !important}
  body section.sp-hero .sp-hero-inner{padding:14px 16px 22px !important;gap:6px !important;
    grid-template-columns:1fr !important;align-items:start !important;align-content:start !important;
    min-height:0 !important;max-height:none !important}
  /* Hide the faded background silhouette + decorative pseudo-elements on mobile */
  .sp-hero-bg,.sp-hero-noise,.sp-hero-watermark{display:none !important}
  .sp-hero::before,.sp-hero::after{display:none !important}
  body .sp-hero-visual{min-height:0 !important;height:auto !important;max-height:240px !important;
    order:-1 !important;margin:0 auto !important;padding:0 !important;width:100% !important;
    animation:none !important;display:flex !important;align-items:center !important;justify-content:center !important;
    overflow:hidden !important}
  body .sp-hero-visual::before,body .sp-hero-visual::after{display:none !important}
  body .sp-hero-visual img,
  body .sp-hero-visual img[src*="v-hero.png"],
  body .sp-hero-visual img[src*="dc-hero"],
  body .sp-hero-visual img.sp-hero-img-darkbg{
    max-height:230px !important;height:230px !important;max-width:90% !important;
    width:auto !important;margin:0 auto !important;display:block !important;
    object-fit:contain !important;object-position:center !important;position:static !important;
    transform:none !important;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4)) !important}
  .sp-hero-watermark{font-size:clamp(180px,42vw,260px) !important;opacity:.01 !important}
  .sp-hero-content{display:flex !important;flex-direction:column !important;align-items:center !important;text-align:center !important;width:100%}
  .sp-hero-kicker{font-size:11px !important;letter-spacing:.14em !important;margin-bottom:10px !important;text-align:center !important;display:inline-block !important;width:auto !important}
  .sp-hero-kicker::before,.sp-hero-kicker::after{display:none !important}
  .sp-hero h1{font-size:clamp(26px,6.5vw,38px) !important;line-height:1.1 !important;text-align:center !important;
    hyphens:none !important;-webkit-hyphens:none !important;overflow-wrap:normal !important;word-break:normal !important;
    margin:0 auto 14px !important}
  .sp-hero-desc{font-size:14px !important;line-height:1.55 !important;text-align:center !important;margin:0 auto 18px !important;max-width:100% !important;color:rgba(255,255,255,.7)}
  .sp-hero-metrics{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:12px 18px !important;padding:14px 16px !important;margin:0 auto 16px !important;width:100%;max-width:340px;border-radius:12px;background:rgba(255,255,255,.04)}
  .sp-hero-metric{flex:1 1 auto !important;min-width:0;text-align:center !important;display:flex !important;flex-direction:column !important;align-items:center !important}
  .sp-hero-metric-dot{display:none !important}
  .sp-hero-metric-val{font-size:20px !important;line-height:1 !important}
  .sp-hero-metric-lbl{font-size:10px !important;letter-spacing:.05em !important;margin-top:3px !important}
  .sp-hero-actions{display:flex !important;flex-direction:column !important;gap:10px !important;width:100% !important;max-width:340px;margin:0 auto !important;align-items:stretch !important;justify-content:center !important}
  .sp-hero-actions .btn{width:100% !important;justify-content:center !important;padding:13px 18px !important;font-size:14px !important}
  .sp-hero-brands{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:12px !important;margin-top:14px !important}
  .sp-hero-brands img{height:11px !important;width:auto}

  /* Generic legacy series classes (kept as fallback) */
  .series-hero{padding:60px 0 28px !important;text-align:center}
  .series-hero h1,.series-title{font-size:clamp(26px,6.5vw,38px) !important;line-height:1.1;text-align:center !important}
  .series-hero-img,.series-feat-img{max-height:240px !important;height:auto;width:100%;border-radius:14px}
  .series-grid,.series-models-grid{grid-template-columns:1fr !important;gap:16px !important}
  .series-model-card{padding:16px !important;flex-direction:column !important;align-items:stretch !important}
  .series-model-card .img,.series-model-img{width:100% !important;height:200px !important;margin-bottom:12px}
}
@media (max-width:480px){
  .sp-hero-inner{padding:20px 14px 28px !important}
  .sp-hero-visual img{max-height:230px !important}
  .sp-hero h1{font-size:clamp(24px,7vw,32px) !important}
  .sp-hero-metric-val{font-size:18px !important}
}

/* 22.3 — Secteur page (single sector landing) */
@media (max-width:960px){
  .sec-hero{padding:80px 0 32px !important}
  .sec-hero h1{font-size:clamp(28px,7vw,40px) !important;line-height:1.1}
  .sec-tabs,.sec-tag-row{flex-wrap:wrap;gap:6px}
  .sec-tab,.sec-tag-row > *{font-size:11.5px;padding:6px 10px}
  .sec-machines-grid,.sec-stats-grid,.sec-features-grid{grid-template-columns:1fr !important;gap:14px !important}
  .sec-machines-grid > *{padding:16px}
}

/* 22.4 — Espace client presentation */
@media (max-width:960px){
  .ec-hero,.ec-section{padding:64px 0 40px !important}
  .ec-hero h1{font-size:clamp(28px,7vw,40px) !important;line-height:1.08}
  .ec-grid,.ec-feature-grid,.ec-three-col,.ec-two-col{grid-template-columns:1fr !important;gap:16px !important}
  .ec-feature-card{padding:18px !important}
  .ec-hero-img,.ec-screen-img{max-height:260px;width:100%;border-radius:14px;object-fit:cover}
}

/* 22.5 — Guide d'achat / financement / SAV — generic content sections */
@media (max-width:960px){
  .guide-hero,.fin-hero,.sav-hero{padding:72px 0 32px !important}
  .guide-hero h1,.fin-hero h1,.sav-hero h1{font-size:clamp(28px,7vw,38px) !important;line-height:1.1}
  .guide-grid,.fin-options-grid,.sav-options-grid{grid-template-columns:1fr !important;gap:14px !important}
  .fin-aids-grid,.sav-process-grid{grid-template-columns:1fr 1fr !important;gap:12px !important}
}
@media (max-width:480px){
  .fin-aids-grid,.sav-process-grid{grid-template-columns:1fr !important}
}

/* 22.6 — Page d'erreur 404 */
@media (max-width:960px){
  .err-404{padding:80px 16px;text-align:center}
  .err-404 .h1{font-size:clamp(60px,18vw,120px);line-height:1}
}

/* 22.7 — Hero stats (homepage v2) avoid number/label overflow */
@media (max-width:640px){
  .hero-stat-val,.stat-val{font-size:clamp(28px,8vw,40px) !important}
  .hero-stat-lbl,.stat-lbl{font-size:11px !important;letter-spacing:.05em}
  .hero-stats{grid-template-columns:1fr 1fr !important}
}

/* 22.8 — Catalogue list page (catalogue.ejs cat-*) */
@media (max-width:960px){
  .cat-hero{min-height:auto !important;padding:60px 0 32px !important;text-align:center !important}
  .cat-hero-grid{grid-template-columns:1fr !important;gap:20px !important}
  .cat-hero-img,.cat-hero-visual{order:-1;max-height:240px;width:100%;border-radius:14px}
  .cat-hero-top,.cat-hero-bottom{text-align:center !important;justify-content:center !important;align-items:center !important}
  .cat-hero-eyebrow{justify-content:center !important;text-align:center !important;margin:0 auto 12px !important}
  .cat-hero-title{font-size:clamp(28px,7vw,40px) !important;line-height:1.12 !important;text-align:center !important;
    hyphens:none !important;-webkit-hyphens:none !important;overflow-wrap:normal !important;word-break:normal !important}
  .cat-hero-ctas{flex-direction:column !important;align-items:stretch !important;gap:10px !important;width:100%;max-width:340px;margin:18px auto 0 !important}
  .cat-hero-ctas .btn,.cat-hero-btn{width:100% !important;justify-content:center !important}

  /* Section "Nos gammes de centres d'usinage" — center header */
  .cat-series-section,.cat-machines-section{padding:48px 0 !important}
  .cat-series-section .container{padding:0 16px !important}
  .cat-series-header{display:block !important;text-align:center !important;margin-bottom:28px !important}
  .cat-series-title{text-align:center !important;font-size:clamp(22px,5.5vw,28px) !important;margin:0 auto 8px !important;line-height:1.2 !important}
  .cat-series-subtitle{text-align:center !important;font-size:13.5px !important;margin:0 auto !important;max-width:100% !important}

  .cat-series-grid,.cat-machines-grid{grid-template-columns:1fr !important;gap:14px}
  .cat-features-row{grid-template-columns:1fr 1fr !important;gap:10px}
}
@media (max-width:480px){
  .cat-features-row{grid-template-columns:1fr !important}
}

/* 22.8.1 — Catalogue: configurator showroom CTA — center all */
@media (max-width:960px){
  .cfg-section-wrap{padding:32px 0 !important}
  .cfg-section-wrap .container{padding:0 12px !important}
  .cfg-showroom{display:flex !important;flex-direction:column !important;padding:28px 22px !important;
    border-radius:16px !important;text-align:center !important;align-items:center !important;
    min-height:auto !important;gap:0 !important}
  .cfg-showroom-bg{position:absolute !important;inset:0;width:100% !important;height:100% !important;object-fit:cover}
  .cfg-showroom-content{width:100% !important;text-align:center !important;
    display:flex !important;flex-direction:column !important;align-items:center !important;
    max-width:100% !important;padding:0 !important}
  .cfg-showroom-title{font-size:clamp(26px,6.5vw,36px) !important;line-height:1.1 !important;
    text-align:center !important;margin:0 auto 14px !important;
    hyphens:none !important;-webkit-hyphens:none !important;overflow-wrap:normal !important;word-break:normal !important}
  .cfg-showroom-sub{font-size:14px !important;line-height:1.55 !important;text-align:center !important;
    margin:0 auto 22px !important;max-width:100%}
  .cfg-showroom-steps{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;
    gap:10px 14px !important;margin:0 auto 22px !important;max-width:280px}
  .cfg-showroom-step{flex:0 0 calc(50% - 7px) !important;display:flex !important;flex-direction:row !important;
    align-items:center !important;gap:8px !important;text-align:left}
  .cfg-showroom-step-num{width:22px !important;height:22px !important;font-size:11px !important;flex-shrink:0}
  .cfg-showroom-step-label{font-size:12.5px !important;line-height:1.2}
  .cfg-showroom-ctas{display:flex !important;flex-direction:column !important;gap:10px !important;
    width:100% !important;max-width:340px;margin:0 auto 18px !important;align-items:stretch !important}
  .cfg-showroom-ctas .btn,.cfg-showroom-btn-primary,.cfg-showroom-btn-secondary{
    width:100% !important;justify-content:center !important;padding:13px 18px !important}
  .cfg-showroom-trust{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;
    gap:8px 14px !important;margin:0 auto !important;font-size:12px !important;text-align:center}
  .cfg-showroom-trust > *{flex:0 0 auto !important;display:inline-flex !important;align-items:center !important;gap:5px}
  /* Right column (machine image) — keep, centered, compact */
  .cfg-showroom-photo{display:flex !important;justify-content:center !important;align-items:center !important;
    width:100% !important;margin:22px auto 0 !important;padding:0 !important;
    position:static !important;transform:none !important;overflow:visible !important}
  .cfg-showroom-photo::before{display:none !important}
  .cfg-showroom-photo img{max-width:88% !important;max-height:200px !important;width:auto !important;
    height:auto !important;object-fit:contain !important;margin:0 auto !important;display:block !important;
    filter:drop-shadow(0 12px 30px rgba(0,0,0,.5))}
  /* SEO subtle text — hide on mobile (it's decorative SEO content for crawlers) */
  .cfg-showroom-seo{display:none !important}
}

/* 22.10 — Machine detail aggressive overflow fix */
@media (max-width:960px){
  .md-hero,.md-hero-grid,.md-hero-info,.md-hero-left,.md-key-specs,.md-key-spec,
  .md-cta-row,.md-machine-name,.md-machine-desc,.md-machine-meta,
  .md-key-spec-val,.md-key-spec-lbl{min-width:0 !important;max-width:100% !important}
  .md-hero-grid{display:grid !important;grid-template-columns:minmax(0,1fr) !important;gap:24px !important;width:100% !important}
  .md-hero-info,.md-hero-left{width:100% !important;max-width:100% !important;padding:0 !important}
  .md-key-specs{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:6px !important;width:100%}
  .md-key-spec{padding:10px 6px !important;text-align:center;overflow:hidden}
  .md-key-spec-val{font-size:15px !important;display:block;overflow:hidden;text-overflow:ellipsis}
  .md-key-spec-lbl{font-size:10px !important;display:block}
  .md-cta-row{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:10px !important;width:100% !important}
  .md-cta-row .btn,.md-cta-row .btn-primary,.md-cta-row a,.md-cta-row button{
    width:100% !important;max-width:100% !important;justify-content:center !important;padding:13px 18px !important;font-size:14px !important;white-space:normal !important;text-align:center}
  .md-machine-name{font-size:clamp(26px,7vw,38px) !important;line-height:1.1 !important}
  .md-machine-desc{font-size:14.5px !important;line-height:1.55 !important;margin-top:12px}
  .md-machine-meta,.md-meta-row{flex-wrap:wrap !important;gap:8px !important;font-size:12px}
  .md-meta-item{flex:0 0 auto}
}
@media (max-width:480px){
  .md-key-specs{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .md-key-spec-val{font-size:14px !important}
}

/* 22.14 — Home catalogue download section ("Téléchargez notre catalogue") */
@media (max-width:960px){
  .catalog-dl-section{padding:48px 0 !important;overflow:hidden}
  .catalog-dl-section .container{max-width:100% !important;padding:0 16px !important}
  .catalog-dl-inner{display:flex !important;flex-direction:column !important;gap:24px !important;text-align:center !important}
  .catalog-dl-text{width:100%}
  .catalog-dl-title{font-size:clamp(24px,6.2vw,32px) !important;line-height:1.15 !important;
    hyphens:none !important;-webkit-hyphens:none !important;overflow-wrap:normal !important;word-break:normal !important;
    max-width:100% !important;padding:0 !important;text-align:center !important}
  .catalog-dl-sub{font-size:14px;line-height:1.55;text-align:center !important;margin:8px auto 16px !important;max-width:100%}
  /* Form — force single column for nested grids */
  .catalog-dl-form{flex-direction:column !important;max-width:100% !important;width:100% !important;gap:10px !important;margin:0 auto !important;display:flex !important}
  .catalog-dl-form > div{display:flex !important;flex-direction:column !important;grid-template-columns:1fr !important;gap:10px !important;width:100% !important}
  .catalog-dl-form input{width:100% !important;box-sizing:border-box !important;font-size:16px !important;padding:12px 14px !important;min-height:46px}
  .catalog-dl-form button{width:100% !important;min-height:48px !important;font-size:15px !important;padding:14px 20px !important}
  .catalog-dl-note{font-size:12px;text-align:center}
  .catalog-dl-visual{order:-1;display:flex;justify-content:center;width:100%}
  .catalog-mockup,.catalog-mockup-pages{width:180px !important;height:240px !important;margin:0 auto}
  .catalog-mockup-pages::after{width:180px !important;height:240px !important}
}

/* 22.13 — Home configurator promo — center everything */
@media (max-width:960px){
  .cfg{padding:48px 0 !important}
  .cfg-inner{display:flex !important;flex-direction:column !important;align-items:center !important;
    text-align:center !important;gap:18px !important;padding:0 18px !important;max-width:100% !important}
  .cfg-left{display:flex !important;flex-direction:column !important;align-items:center !important;
    width:100% !important;text-align:center !important}
  .cfg-right{display:flex !important;align-items:center !important;justify-content:center !important;
    width:100% !important;text-align:center !important;margin-top:8px !important}
  .cfg-right img{margin:0 auto !important;display:block !important;max-width:80% !important;max-height:300px !important}
  .cfg-eyebrow{display:inline-flex !important;justify-content:center !important;align-self:center !important;margin-bottom:14px !important}
  .cfg-h{text-align:center !important;font-size:clamp(24px,6.5vw,32px) !important;line-height:1.15 !important;align-self:center !important;width:100% !important}
  .cfg-bottom{display:flex !important;flex-direction:column !important;align-items:center !important;
    justify-content:center !important;gap:10px !important;margin-top:16px !important;text-align:center !important;width:100% !important;align-self:center !important}
  .cfg-cta{display:inline-flex !important;justify-content:center !important;align-items:center !important;
    width:100% !important;max-width:340px !important;padding:14px 22px !important;font-size:14.5px !important;
    box-shadow:0 8px 24px rgba(232,92,0,.3) !important;margin:0 auto !important}
  .cfg-note{display:block !important;font-size:12px !important;color:#999;text-align:center !important}
  /* Stats steps row inline (4 / 28 / ✓) — centered horizontally */
  .cfg-left > div[style*="display:flex"]{justify-content:center !important;align-self:center !important;margin:14px auto 18px !important}
}

/* 22.11 — Trust strip (home & inner pages) — compact mobile, centered */
@media (max-width:960px){
  .trust{padding:20px 0 !important}
  .trust-inner{gap:10px !important;justify-content:center !important;align-items:center !important;
    padding:0 16px !important;text-align:center !important;flex-direction:column !important}
  .trust-item{font-size:13px !important;gap:10px !important;width:auto !important;max-width:280px;
    min-width:0;justify-content:flex-start !important;align-items:center !important;text-align:left;
    display:inline-flex !important;flex:0 0 auto !important}
  .trust-icon{width:32px !important;height:32px !important;border-radius:8px !important;flex-shrink:0}
  .trust-icon svg{width:16px !important;height:16px !important}
  .trust-sep{display:none !important}
  .trust-ai-247{margin-left:4px !important;padding-left:6px !important}
}

/* 22.12 — Brand marquee — ensure smooth scroll on mobile */
@media (max-width:960px){
  .brand-marquee{overflow:hidden;width:100%;max-width:100%}
  .brand-marquee-set{gap:24px !important;padding:0 12px}
  .brand-marquee-label{font-size:10.5px !important;letter-spacing:.08em !important;white-space:nowrap}
  .brand-marquee-set img{height:18px !important;width:auto;opacity:.55}
}

/* 22.16 — Generic: any inline-styled grid with multi-cols → 1 col on mobile */
@media (max-width:760px){
  body [style*="grid-template-columns:1fr 1fr"],
  body [style*="grid-template-columns: 1fr 1fr"],
  body [style*="grid-template-columns:repeat(2"],
  body [style*="grid-template-columns:repeat(3"],
  body [style*="grid-template-columns:repeat(4"],
  body [style*="grid-template-columns:repeat(5"],
  body [style*="grid-template-columns:repeat(6"],
  body [style*="grid-template-columns: repeat(2"],
  body [style*="grid-template-columns: repeat(3"],
  body [style*="grid-template-columns: repeat(4"],
  body [style*="grid-template-columns: repeat(5"],
  body [style*="grid-template-columns: repeat(6"]{
    grid-template-columns:1fr !important;gap:18px !important}
}
@media (min-width:481px) and (max-width:760px){
  body [style*="grid-template-columns:repeat(4"],
  body [style*="grid-template-columns:repeat(5"],
  body [style*="grid-template-columns:repeat(6"],
  body [style*="grid-template-columns: repeat(4"],
  body [style*="grid-template-columns: repeat(5"],
  body [style*="grid-template-columns: repeat(6"]{
    grid-template-columns:1fr 1fr !important}
}

/* 22.16b — Direct fallback for usine brand strip (FANUC/SIEMENS/...) */
@media (max-width:760px){
  body section[style*="gray-50"] .reveal[style*="grid-template-columns"],
  body section.section [style*="grid-template-columns:repeat(6"]{
    display:grid !important;grid-template-columns:repeat(3,1fr) !important;
    gap:18px 12px !important;max-width:100% !important}
  body section[style*="gray-50"] .reveal[style*="grid-template-columns"] > div,
  body section.section [style*="grid-template-columns:repeat(6"] > div{
    text-align:center !important}
  body section[style*="gray-50"] .reveal[style*="grid-template-columns"] > div img{
    max-height:22px !important;max-width:80px !important}
  body section[style*="gray-50"] .reveal[style*="grid-template-columns"] > div p{
    font-size:10px !important;line-height:1.35 !important;margin-top:6px !important}
}
@media (max-width:380px){
  body section[style*="gray-50"] .reveal[style*="grid-template-columns"],
  body section.section [style*="grid-template-columns:repeat(6"]{
    grid-template-columns:repeat(2,1fr) !important}
}

/* 22.17 — Usine certifications grid (CE / ISO / HT / ...) */
@media (max-width:960px){
  .usine-cert-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}
  .usine-cert-card{padding:18px 14px !important}
}
@media (max-width:480px){
  .usine-cert-grid{grid-template-columns:1fr !important}
}

/* 22.15 — Usine page hero (title + Baofeng logo side-by-side) */
@media (max-width:960px){
  /* Force the inline-styled flex row to stack on mobile */
  body section[style*="padding-top:48px"] > .container > .reveal[style*="display:flex"]{
    flex-direction:column !important;align-items:center !important;text-align:center !important;
    gap:24px !important}
  body section[style*="padding-top:48px"] > .container > .reveal[style*="display:flex"] > div{
    max-width:100% !important;width:100% !important;flex:none !important;text-align:center !important}
  body section[style*="padding-top:48px"] > .container > .reveal[style*="display:flex"] > div h1{
    text-align:center !important;font-size:clamp(24px,5.5vw,32px) !important;line-height:1.2 !important}
  body section[style*="padding-top:48px"] > .container > .reveal[style*="display:flex"] > div p{
    text-align:center !important;max-width:100% !important;font-size:14px !important;line-height:1.6 !important;margin:12px auto 0 !important}
  body section[style*="padding-top:48px"] > .container > .reveal[style*="display:flex"] > div img{
    height:72px !important;max-width:200px !important;margin:0 auto !important;display:block !important}
}

/* 22.9 — Blog list & article overflow protection */
@media (max-width:960px){
  .blog-hero h1{font-size:clamp(28px,7vw,42px) !important;line-height:1.08}
  .blog-card-meta,.article-meta{flex-wrap:wrap;gap:8px;font-size:12px}
  pre,code{font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
  pre{padding:14px;border-radius:10px;overflow-x:auto}
  blockquote{padding:14px 16px;margin:18px 0;border-left:3px solid var(--orange)}
  iframe,embed{max-width:100%;width:100%;border-radius:10px}
}