/* ═══════════════════════════════════════════════════════════ ispare-topbar.css — barre globale animée + correctifs de mise en page Chargé dans le de toutes les pages : aucun saut au chargement. ═══════════════════════════════════════════════════════════ */ :root{ --tb-h: 36px; /* hauteur de la barre */ --nav-h: 64px; /* hauteur du nav */ --nav-bottom: 100px; /* bas du nav — recalculé par ispare-global.js au scroll */ } /* ── BARRE ────────────────────────────────────────────────── */ #ispTopbar{ height:var(--tb-h); background:#e8effe; color:#1240b0; border-bottom:1px solid #d3e0fb; display:flex; align-items:center; justify-content:center; gap:20px; padding:0 16px; margin:0; font-family:'DM Sans',system-ui,sans-serif; font-size:.81rem; font-weight:500; letter-spacing:.1px; overflow:hidden; position:sticky; top:0; z-index:700; box-sizing:border-box; } #ispTopbar b{font-weight:700} #ispTopbar a{color:#1240b0;font-weight:600;text-decoration:none} #ispTopbar a:hover{text-decoration:underline} #ispTopbar .tb-sep{opacity:.32} #ispTopbar .tb-i{ display:inline-flex;align-items:center;gap:7px; position:relative;z-index:1;white-space:nowrap; opacity:0;animation:tbIn .55s cubic-bezier(.34,1.56,.64,1) forwards; } #ispTopbar .tb-i:nth-child(1){animation-delay:.05s} #ispTopbar .tb-i:nth-child(3){animation-delay:.15s} #ispTopbar .tb-i:nth-child(5){animation-delay:.25s} #ispTopbar .tb-i:nth-child(7){animation-delay:.35s} #ispTopbar svg{width:13px;height:13px;flex-shrink:0;opacity:.62} /* reflet qui balaie la barre */ #ispTopbar::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%); transform:translateX(-100%); animation:tbShine 7s cubic-bezier(.16,1,.3,1) 1.5s infinite; } /* point qui rebondit — même animation que le point du logo */ #ispTopbar .tb-dot{ width:6px;height:6px;border-radius:50%;background:#1a56db;flex-shrink:0; animation:tbBounce 2.4s cubic-bezier(.34,1.56,.64,1) infinite; } @keyframes tbIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} @keyframes tbShine{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}} @keyframes tbBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}55%{transform:translateY(-4px)}} /* ── CORRECTIF 1 : nav sticky au lieu de fixed ──────────────── En fixed, le nav sortait du flux et recouvrait 64px de contenu (pastille de disponibilité du catalogue). En sticky il occupe sa place, se colle en haut au scroll, et aucun espaceur n'est nécessaire. */ .nav{ position:sticky !important; top:var(--tb-h) !important; z-index:650 !important; } /* ── CORRECTIF 2 : l'ancienne bande .sbar était un faux espaceur (padding-top:64px pour compenser le nav fixed). Le nav étant désormais dans le flux, elle n'a plus aucune raison d'exister. */ .sbar{display:none !important} /* ── CORRECTIF 3 : body{overflow-x:hidden} crée un conteneur de défilement et casse position:sticky. overflow-x:clip bloque le débordement horizontal sans casser le sticky. */ @supports (overflow-x: clip){ body{overflow-x:clip !important} } /* ── CORRECTIF 4 : ce panneau était figé à top:64px (ancien bas du nav). Il traçait une ligne blanche au milieu du nav sur les pages Contact et Assistant IA. Il suit maintenant le bas réel du nav. */ .isp-mobile-panel{top:var(--nav-bottom) !important} /* ── Espace Pro : pastille noire à texte doré, identique partout ── */ .nav-links a.pro-nav-link{ background:#0d1117 !important;color:#f5b301 !important; font-weight:700 !important;padding:8px 14px !important;border-radius:9px !important; } .nav-links a.pro-nav-link svg{opacity:1 !important;color:#f5b301 !important} .nav-links a.pro-nav-link:hover{background:#000 !important;color:#ffc933 !important} .nav-links a.pro-nav-link:hover svg{opacity:1 !important;color:#ffc933 !important} /* ── Mobile ───────────────────────────────────────────────── */ @media (max-width:640px){ :root{--tb-h:32px} #ispTopbar{font-size:.68rem;gap:9px;padding:0 10px} #ispTopbar .tb-i{gap:5px} /* Afficher toutes les informations de la topbar sur mobile/tablette ; le conteneur reste défilable horizontalement. */ #ispTopbar .tb-hide{display:inline-flex} #ispTopbar svg{width:11px;height:11px} } /* ── Accessibilité ────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ #ispTopbar::before,#ispTopbar .tb-dot{animation:none} #ispTopbar .tb-i{opacity:1;animation:none} } /* ═══════════════════════════════════════════════════════════ FINAL RESPONSIVE HEADER — desktop / tablette / mobile / iOS La navigation reste visible sur toutes les tailles. Les liens deviennent une bande horizontale tactile sur petits écrans. ═══════════════════════════════════════════════════════════ */ @media (max-width:900px){ .nav{height:auto!important;min-height:64px!important;flex-wrap:wrap!important;padding:8px 12px!important;gap:8px!important;align-items:center!important;top:var(--tb-h)!important} .nav .nav-links{display:flex!important;order:3!important;flex:1 1 100%!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:2px 0 3px!important;overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important} .nav .nav-links::-webkit-scrollbar{display:none!important} .nav .nav-links li{flex:0 0 auto!important} .nav .nav-r{margin-left:auto!important;flex:0 0 auto!important} .isp-mobile-menu-btn{display:none!important} .isp-mobile-menu{display:none!important} .isp-user-zone{order:-1!important} } @media (max-width:600px){ .nav{padding:7px 10px!important;gap:6px!important;top:var(--tb-h)!important} .nav .logo-wrap{min-width:104px!important} .nav .logo-tag{display:none!important} .nav .nav-search{display:flex!important;min-width:36px!important;width:36px!important;height:36px!important;padding:0 8px!important;overflow:hidden!important} .nav .nav-search input{display:none!important} .nav .btn-cta{display:inline-flex!important;width:36px!important;height:36px!important;padding:0!important;justify-content:center!important;font-size:0!important} .nav .btn-ico{width:36px!important;height:36px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important} .isp-user-zone #ispBtn{width:36px!important;height:36px!important;padding:0!important;justify-content:center!important} .isp-user-zone #ispBtn svg:nth-child(2){display:none!important} #ispTopbar{justify-content:flex-start!important;overflow-x:auto!important;white-space:nowrap!important;scrollbar-width:none!important} #ispTopbar::-webkit-scrollbar{display:none!important} #ispTopbar .tb-hide{display:inline-flex!important} } /* FINAL RESPONSIVE HARDENING — un seul système de navigation */ @media (max-width:900px){ .nav .nav-links{display:flex!important;visibility:visible!important;opacity:1!important} .nav .nav-links a{min-height:40px;display:inline-flex!important;align-items:center;white-space:nowrap} } @media (max-width:600px){ .nav .nav-links{gap:6px!important;scroll-snap-type:x proximity!important} .nav .nav-links a{min-height:42px;padding:8px 11px!important} .nav .nav-r{min-height:40px} } /* ============================================================== ISPARE FINAL MOBILE REPAIR — 760px breakpoint Fixes real-phone/tablet widths around 600–760px where the previous 600px rules were not triggered and the desktop nav stayed visible. Also normalizes sticky topbar + nav behavior. ============================================================== */ @media (max-width:760px){ :root{--tb-h:32px;--nav-h:60px} #ispTopbar{ position:sticky!important; top:0!important; height:var(--tb-h)!important; min-height:var(--tb-h)!important; justify-content:flex-start!important; overflow-x:auto!important; overflow-y:hidden!important; white-space:nowrap!important; scrollbar-width:none!important; z-index:900!important; } #ispTopbar::-webkit-scrollbar{display:none!important} #ispTopbar .tb-hide{display:inline-flex!important} .nav{ position:sticky!important; top:var(--tb-h)!important; z-index:850!important; height:var(--nav-h)!important; min-height:var(--nav-h)!important; max-height:var(--nav-h)!important; flex-wrap:nowrap!important; padding:7px 10px!important; gap:7px!important; align-items:center!important; overflow:visible!important; } .nav .logo-wrap{ flex:0 0 auto!important; min-width:104px!important; width:auto!important; } .nav .logo-tag{display:none!important} .nav .logo-name{font-size:1.02rem!important} /* Mobile navigation: links live ONLY in the hamburger menu. */ .nav .nav-links, .nav .nav-links *{ display:none!important; visibility:hidden!important; opacity:0!important; } .nav-r{ display:flex!important; flex:1 1 auto!important; min-width:0!important; margin-left:auto!important; gap:6px!important; justify-content:flex-end!important; align-items:center!important; } .nav-search{ order:1!important; flex:0 0 36px!important; width:36px!important; min-width:36px!important; max-width:36px!important; height:36px!important; padding:0!important; justify-content:center!important; overflow:hidden!important; } .nav-search input{display:none!important} .nav-search svg{width:17px!important;height:17px!important} .nav-r .nav-account, .nav-r a.nav-account, .nav-r a[href*="connexion"], .nav-r a[href*="login"]{ display:none!important; visibility:hidden!important; } .nav-menu-btn{ display:inline-flex!important; order:4!important; flex:0 0 36px!important; width:36px!important; min-width:36px!important; height:36px!important; padding:0!important; background:#0d1117!important; color:#fff!important; border-color:#0d1117!important; } .nav-r .btn-cta{display:none!important} /* Dynamic account button created by ispare-global.js */ #ispBtn{ display:inline-flex!important; order:3!important; flex:0 0 36px!important; width:36px!important; min-width:36px!important; height:36px!important; padding:0!important; justify-content:center!important; align-items:center!important; } #ispBtn svg{width:17px!important;height:17px!important} #ispBtn span,#ispBtn .isp-account-label,#ispBtn .isp-account-text{display:none!important} .mobile-nav-menu{ position:fixed!important; top:calc(var(--tb-h) + var(--nav-h))!important; left:10px!important; right:10px!important; z-index:849!important; } /* Keep content visually below the sticky header. */ main#main{scroll-margin-top:calc(var(--tb-h) + var(--nav-h))!important} /* Tablet-sized phones: simplify the hero without losing content. */ .hero{padding:28px 16px 0!important} .hero-in{grid-template-columns:1fr!important;gap:24px!important} .hero-badge{margin-bottom:16px!important;font-size:.68rem!important} h1.htitle{font-size:clamp(2rem,8vw,3rem)!important;letter-spacing:-1px!important;margin-bottom:18px!important} .hero-sub{font-size:.92rem!important;line-height:1.62!important;margin-bottom:22px!important} .hero-search-wrap{max-width:none!important;margin-bottom:16px!important} .hero-search{flex-wrap:wrap!important;padding:9px 10px!important} .hero-search>svg{order:1!important} .hero-search input{order:2!important;flex-basis:calc(100% - 30px)!important;width:auto!important;min-width:0!important} .hero-search button{order:3!important;width:100%!important;margin-top:7px!important} .hero-ctas{flex-direction:column!important;align-items:stretch!important;gap:9px!important;margin-bottom:24px!important} .cta-p,.cta-s{width:100%!important;justify-content:center!important;box-sizing:border-box!important} /* The 4 service cards become a clean 2x2 grid. */ .hero-stats{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:0!important; width:100%!important; border-radius:14px!important; } .hstat{ min-width:0!important; width:auto!important; padding:13px 9px!important; display:flex!important; flex-direction:column!important; justify-content:center!important; min-height:92px!important; border-right:1px solid var(--silver)!important; border-bottom:1px solid var(--silver)!important; } .hstat:nth-child(2n){border-right:none!important} .hstat:nth-child(n+3){border-bottom:none!important} .hstat-n{font-size:1.15rem!important;line-height:1.12!important;margin-bottom:5px!important;white-space:normal!important;overflow-wrap:anywhere!important} .hstat-l{font-size:.61rem!important;letter-spacing:1px!important;line-height:1.35!important} .hero-visual{padding-bottom:22px!important;overflow:visible!important} .hv-main{height:300px!important;border-radius:18px!important} .hv-b1{left:10px!important;bottom:-14px!important;min-width:0!important;max-width:calc(100% - 20px)!important;padding:9px 11px!important;border-radius:12px!important} .hv-b1-ico{width:32px!important;height:32px!important} .hv-b1-t{font-size:.76rem!important} .hv-b1-s{font-size:.62rem!important} .hv-b2{top:10px!important;right:10px!important;padding:8px 10px!important;border-radius:11px!important} .hv-b2-t{font-size:.67rem!important} .trust-bar{padding:20px 16px!important} .tb-in{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important} .tb-item{gap:9px!important} .tb-ico{width:34px!important;height:34px!important;flex:0 0 34px!important} .tb-t{font-size:.76rem!important} .tb-s{font-size:.62rem!important;line-height:1.3!important} } @media(max-width:380px){ .nav{padding-left:8px!important;padding-right:8px!important;gap:4px!important} .nav .logo-wrap{min-width:98px!important} .nav-r{gap:4px!important} .hero{padding-left:12px!important;padding-right:12px!important} .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important} .hstat{min-height:88px!important;padding:11px 7px!important} .hstat-l{font-size:.57rem!important} } /* ============================================================== PASS62 — FINAL MOBILE SYSTEM HARDENING One navigation system only on <=760px. The desktop navigation is hidden, the generated hamburger is visible, the topbar and nav remain sticky, and content always clears the 92px header. Kept deliberately last so older responsive overrides cannot win. ============================================================== */ @media (max-width:760px){ :root{--tb-h:32px;--nav-h:60px;--nav-bottom:92px} html,body{max-width:100%;overflow-x:clip!important} #ispTopbar{ position:sticky!important;top:0!important; height:32px!important;min-height:32px!important; padding:0 10px!important;justify-content:flex-start!important; overflow-x:auto!important;overflow-y:hidden!important; white-space:nowrap!important;z-index:1200!important; } .nav{ position:sticky!important;top:32px!important; height:60px!important;min-height:60px!important;max-height:60px!important; flex-wrap:nowrap!important;overflow:visible!important; padding:7px 10px!important;gap:6px!important;z-index:1190!important; } .nav .logo-wrap{flex:0 0 auto!important;min-width:104px!important;width:auto!important} .nav .logo-tag{display:none!important} .nav .logo-name{font-size:1.02rem!important;white-space:nowrap!important} /* No horizontal desktop navigation on phones/tablets. */ .nav .nav-links,.nav .nav-links *{ display:none!important;visibility:hidden!important;opacity:0!important; } .nav-r{ display:flex!important;flex:1 1 auto!important;min-width:0!important; margin-left:auto!important;align-items:center!important;justify-content:flex-end!important; gap:6px!important; } .nav-search{ order:1!important;flex:0 0 36px!important;width:36px!important;min-width:36px!important; max-width:36px!important;height:36px!important;padding:0!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; overflow:hidden!important;border-radius:10px!important; } .nav-search input{display:none!important} .nav-search svg{width:17px!important;height:17px!important} .nav-r .btn-cta{display:none!important} .nav-r .nav-account,.nav-r a.nav-account, .nav-r a[href*="connexion"],.nav-r a[href*="login"], .nav-r a[href*="compte"],a.btn-ico[href*="login"],a.btn-ico[href*="compte"]{ display:none!important;visibility:hidden!important; } .nav-r>.isp-user-zone{order:3!important;display:inline-flex!important;flex:0 0 36px!important} #ispBtn{ display:inline-flex!important;width:36px!important;min-width:36px!important;height:36px!important; padding:0!important;align-items:center!important;justify-content:center!important; } #ispBtn svg{width:17px!important;height:17px!important} #ispBtn svg+svg{display:none!important} #ispBtn .isp-online{display:block!important} /* Hide every historical burger and expose only the generated .isp-burger. */ .nav-menu-btn,.isp-mobile-menu-btn,.ispMobileMenuBtn{display:none!important} .nav .isp-burger{ display:inline-flex!important;order:4!important;flex:0 0 36px!important; width:36px!important;min-width:36px!important;height:36px!important;margin:0!important; padding:0!important;border-radius:10px!important;border:1.5px solid #0d1117!important; background:#0d1117!important;color:#fff!important;align-items:center!important;justify-content:center!important; } .nav .isp-burger span,.nav .isp-burger span::before,.nav .isp-burger span::after{background:#fff!important} .isp-mobile-panel{ position:fixed!important;top:92px!important;left:10px!important;right:10px!important; z-index:1180!important;max-height:0!important;overflow:hidden!important; border:1px solid #e2e8f0!important;border-radius:14px!important; box-shadow:0 18px 44px rgba(15,23,42,.18)!important;background:#fff!important; } .isp-mobile-panel.open{max-height:calc(100vh - 108px)!important;overflow-y:auto!important} main,#main,.pg-hero,.hero,.product-page,.co-grid,.compte-wrap,.pro-hero,.promo-hero{ scroll-margin-top:92px!important; } /* Common phone-safe layout rules. */ .hero,.pg-hero,.promo-hero,.pro-hero{max-width:100%!important;box-sizing:border-box!important} .hero-in,.pgh-in,.ph-in{grid-template-columns:1fr!important;max-width:100%!important} .hero-search-wrap,.hero-search,.hero-ctas,.btns,.ph-ctas{max-width:100%!important} .hero-search input,.pro-form-s input,.pro-form-s textarea,.co-grid input,.co-grid textarea,.co-grid select{ min-width:0!important;max-width:100%!important;box-sizing:border-box!important; } .hero-ctas,.ph-ctas,.btns{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:9px!important} .hero-ctas>* , .ph-ctas>*, .btns>*{width:100%!important;box-sizing:border-box!important} .hero-stats,.ph-stats-grid,.stats-row,.pro-cats,.pro-benefits{ grid-template-columns:repeat(2,minmax(0,1fr))!important; max-width:100%!important; } .hstat,.ph-stat-card,.stat-card,.pc-card,.pb-card{min-width:0!important;overflow:hidden!important;box-sizing:border-box!important} .co-grid{grid-template-columns:1fr!important;gap:16px!important;padding-left:12px!important;padding-right:12px!important} .compte-wrap{grid-template-columns:1fr!important;padding-left:12px!important;padding-right:12px!important} .c-sidebar{position:static!important;max-width:100%!important} .product-page>*,.product-page .grid{min-width:0!important;max-width:100%!important} .product-page .grid{grid-template-columns:1fr!important} /* Floating actions must never cover critical content on a phone. */ .isp-wa-wrap{right:10px!important;bottom:12px!important;gap:8px!important} .isp-devis{max-width:calc(100vw - 92px)!important;padding:9px 12px!important;font-size:.76rem!important} .isp-ai-btn,.isp-wa{width:48px!important;height:48px!important} .isp-ai-panel{right:10px!important;left:10px!important;bottom:70px!important;width:auto!important;max-width:none!important;max-height:72vh!important} } @media (max-width:370px){ .nav{padding-left:7px!important;padding-right:7px!important;gap:4px!important} .nav .logo-wrap{min-width:96px!important} .nav-r{gap:4px!important} .nav-search,#ispBtn,.nav .isp-burger{width:34px!important;min-width:34px!important;height:34px!important} .hero-stats,.ph-stats-grid,.stats-row,.pro-cats,.pro-benefits{grid-template-columns:1fr!important} } /* PASS66 — tablet UX: use the same compact hamburger navigation up to 900px. */ @media (max-width:900px){ .nav .nav-links{display:none!important;visibility:hidden!important;opacity:0!important} .nav .isp-burger{display:inline-flex!important} .nav{height:60px!important;min-height:60px!important;max-height:60px!important;flex-wrap:nowrap!important} .nav-r{display:flex!important;align-items:center!important;gap:7px!important;margin-left:auto!important} .nav-search{flex:0 0 40px!important;min-width:40px!important;width:40px!important;height:40px!important} .nav-search input{display:none!important} .nav .btn-cta{display:none!important} .isp-user-zone #ispBtn{width:40px!important;height:40px!important;padding:0!important;justify-content:center!important} .nav .isp-burger{width:40px!important;min-width:40px!important;height:40px!important;border-radius:10px!important} .isp-mobile-panel{top:calc(var(--tb-h) + var(--nav-h))!important} } /* PASS73 — final mobile contract: 44px touch targets and one stable header geometry. */ @media (max-width:760px){ :root{--tb-h:32px;--nav-h:64px;--nav-bottom:96px} html,body{max-width:100%;overflow-x:hidden} img{max-width:100%;height:auto} .nav{ height:64px!important;min-height:64px!important;max-height:64px!important; padding:6px 8px!important;gap:4px!important; } .nav .logo-wrap{flex:0 0 auto!important;min-width:90px!important} .nav .logo-name{font-size:1rem!important} .nav-r{gap:4px!important} .nav-search,.nav-r>.btn-ico,.nav-r>.isp-user-zone,#ispBtn,.nav .isp-burger{ flex:0 0 44px!important;width:44px!important;min-width:44px!important; height:44px!important;min-height:44px!important; } .nav-search,#ispBtn,.nav .isp-burger,.nav-r>.btn-ico{ display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important; } .isp-mobile-panel{top:96px!important} .isp-mobile-panel.open{max-height:calc(100dvh - 108px)!important} main,#main,.pg-hero,.hero,.product-page,.co-grid,.compte-wrap,.pro-hero,.promo-hero{ scroll-margin-top:96px!important; } input,select,textarea{font-size:16px} .table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} /* PASS82 — mobile home: no clipped tabs and no invisible product grid. */ .prods-s{padding:44px 14px!important} .prods-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important;margin-bottom:18px!important} .prods-head>div:last-child{width:100%!important;align-items:flex-start!important} .ph-tabs{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;width:100%!important;gap:7px!important;padding:0!important} .ph-tabs .ptab{flex:0 0 auto!important;min-height:44px!important;padding:9px 14px!important} .prods-grid{min-height:0!important} .prods-grid .pcard{opacity:1!important;transform:none!important;filter:none!important} } @media (max-width:520px){ /* The quote pill covered cards and calls-to-action on real iPhones. The hamburger menu already exposes the B2B/devis route; retain only chat. */ .isp-wa-wrap .isp-devis{display:none!important} .isp-wa-wrap{right:10px!important;bottom:10px!important} } /* PASS83 — corrections observées sur Safari iPhone réel. */ @media (max-width:760px){ /* Une information complète à la fois : aucun texte tronqué derrière la largeur de l'écran. ispare-global.js fait tourner les messages. PASS85 — l'ancien `overflow:hidden` + `justify-content:center` coupait silencieusement le message actif quand il était plus large que l'écran (ex. « Garantie commerciale 90 jours », l'email de contact) : le texte débordant disparaissait sans aucun indice visuel. On rend la barre défilable horizontalement (scrollbar masquée) comme filet de sécurité, en partant du début du texte. */ #ispTopbar{justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;padding:0 8px!important} #ispTopbar::-webkit-scrollbar{display:none!important} #ispTopbar .tb-sep{display:none!important} #ispTopbar .tb-i{display:none!important;max-width:none!important;opacity:1!important;animation:none!important;font-size:.72rem!important;flex:0 0 auto!important} #ispTopbar:not(.tb-ready) .tb-i:first-of-type{display:inline-flex!important} #ispTopbar .tb-i.tb-mobile-active{display:inline-flex!important} /* Les règles tactiles globales agrandissaient les points du carrousel en rectangles verticaux. Ces contrôles décoratifs restent volontairement compacts mais conservent un libellé accessible. */ .hv-dots{bottom:13px!important;align-items:center!important} .hv-dot{width:9px!important;min-width:9px!important;height:9px!important;min-height:9px!important;padding:0!important;border-radius:50%!important} .hv-dot.on{width:24px!important;min-width:24px!important;height:9px!important;border-radius:6px!important} /* Réserver assez d'espace sous l'image pour que le badge ne soit plus coupé par la section suivante. */ .hero-visual{padding-bottom:64px!important} .hv-b1{bottom:8px!important;left:8px!important;right:8px!important;max-width:none!important;width:auto!important} .hv-b1>div:last-child{min-width:0!important} .hv-b1-s{white-space:normal!important;line-height:1.25!important} .hero-search-sugg{align-items:center!important;gap:7px!important} .hero-search-sugg>span{flex:1 0 100%!important} .recent-search-clear{border:0;background:transparent;color:#64748b;text-decoration:underline;font-size:.72rem;padding:7px 5px;min-height:36px;cursor:pointer} } @media (max-width:340px){ .nav{padding-left:6px!important;padding-right:6px!important} .nav .logo-wrap{min-width:86px!important} } /* PASS97 — le pointeur natif reste toujours utilisable, même si le script du curseur décoratif est bloqué, désactivé ou indisponible sur l'appareil. */ html body{cursor:auto!important} .cur,.cur-r{display:none!important} a,button,[role="button"],select,label{cursor:pointer!important} input,textarea{cursor:text!important}