/** * IMPERADOR · NAVIGATION MOBILE * ───────────────────────────────────────────────────────────────────────── * Barre compacte (60 px) + panneau plein écran, sur TOUTES les pages. * Remplace, sous 900 px, la nav qui passait sur deux lignes et poussait * l'en-tête à 241 px — soit 29 % de l'écran avant le premier contenu. * * FAIL-OPEN : tout est conditionné à la classe `mnav` posée par * mobile-nav.js sur . Si le script ne charge pas, l'ancienne nav * reste en place — une page sans navigation serait pire que le défaut * qu'on corrige. * * Les tailles ne sont pas décoratives : 44 px est le minimum de cible * tactile d'Apple comme de Google, 48 px la hauteur d'une ligne de menu. * Ne pas les réduire pour gagner de la place. */ @media (max-width: 900px) { /* ─── L'ancienne barre s'efface, la nouvelle prend sa place ─────────── */ .mnav .cat-header .nav-mini, .mnav .cat-header > .wrap > [data-lang-switcher], .mnav .cat-header > .wrap > [data-cart-icon], .mnav .cat-header > .wrap > [data-header-user], .mnav .cat-header .logo-block, .mnav .header .nav, .mnav .header .header-cta, .mnav .header .logo { display: none !important; } .mnav .cat-header { padding: 0 !important; } /* `padding: 0` en !important des DEUX côtés : la gouttière du .wrap (16 px) laissait sinon la barre flotter au milieu, et sur l'accueil `.header-inner` EST le `.wrap` — c'est le même élément. */ .mnav .cat-header > .wrap { display: block; padding: 0 !important; gap: 0; } .mnav .header .header-inner { display: block !important; min-height: 0 !important; gap: 0 !important; padding: 0 !important; } /* ─── La barre ──────────────────────────────────────────────────────── */ .mn-bar { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 14px; background: rgba(250, 248, 243, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-2, #E5E0D2); } /* L'accueil n'a pas d'en-tête collant : la barre le devient elle-même, sinon le menu disparaît dès le premier défilement. */ .mnav .header .mn-bar { position: sticky; top: 0; z-index: 120; } .mn-logo { display: flex; align-items: center; flex: 0 0 auto; } /* Même protection que le logo de bureau : la règle globale img { max-width: 100% } laisse sinon la colonne l'écraser. */ .mn-logo img { /* !important OBLIGATOIRE : le filet anti-débordement de home-mobile.css impose `height: auto !important` à toute image sous 900 px. Sans lui, le logo repartait à sa taille naturelle — 1280 × 720 — et poussait le bouton Menu à 1 422 px, hors de l'écran. Mesuré. Les marges négatives reprennent la convention du logo de bureau : le fichier porte une large réserve transparente, on affiche 72 px pour n'en occuper que 36. */ height: 72px !important; width: auto !important; max-width: none !important; margin: -18px 0 !important; object-fit: contain; display: block; } .mn-sp { flex: 1 1 auto; min-width: 0; } .mn-ic { position: relative; width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--ink-2, #1A2745); cursor: pointer; -webkit-tap-highlight-color: transparent; } .mn-ic:active { background: var(--line-2, #E5E0D2); } .mn-ic svg { display: block; } .mn-badge { position: absolute; top: 5px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--terra, #B8553A); color: #fff; font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; line-height: 16px; text-align: center; } .mn-badge[hidden] { display: none; } .mn-burger { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; height: 44px; padding: 0 14px 0 12px; border: 1px solid var(--line, #D9D3C3); border-radius: 999px; background: none; color: var(--ink, #0E1B33); font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mn-burger:active { background: var(--line-2, #E5E0D2); } .mn-burger i { display: block; position: relative; width: 15px; height: 9px; border-top: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; } .mn-burger i::after { content: ""; position: absolute; left: 0; top: 3.2px; width: 15px; height: 1.4px; background: currentColor; } } /* ─── Le panneau ────────────────────────────────────────────────────────── Hors media query : il est posé sur , et c'est le JS qui le retire du DOM au-delà de 900 px. Le garder stylé partout évite qu'un redimensionnement laisse un panneau nu à l'écran. */ .mn-panel { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; background: var(--paper, #FAF8F3); color: var(--ink, #0E1B33); font-family: var(--sans, system-ui, sans-serif); transform: translateX(100%); visibility: hidden; transition: transform .34s cubic-bezier(.2, .75, .2, 1), visibility 0s linear .34s; } .mn-panel.on { transform: none; visibility: visible; transition-delay: 0s, 0s; } @media (prefers-reduced-motion: reduce) { .mn-panel { transition: none; } } body.mn-open { overflow: hidden; } /* La pastille WhatsApp est en z-index 7000 (whatsapp.js) : elle passait par-dessus le panneau et recouvrait une ligne du menu. On l'efface le temps de l'ouverture — elle revient à la fermeture. */ body.mn-open .wa-fab { display: none !important; } .mn-panel-head { flex: 0 0 auto; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; border-bottom: 1px solid var(--line-2, #E5E0D2); } .mn-panel-head > span { font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute, #8A8F9E); } .mn-nav { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .mn-nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 16px; border-bottom: 1px solid var(--line-2, #E5E0D2); color: var(--ink, #0E1B33); text-decoration: none; font-size: 16px; letter-spacing: -.005em; line-height: 1.3; -webkit-tap-highlight-color: transparent; } .mn-nav a:active { background: var(--bg, #F4F1EA); } .mn-nav a[aria-current="page"] { font-weight: 500; } .mn-nav a[aria-current="page"]::before { content: ""; width: 3px; align-self: stretch; background: var(--terra, #B8553A); margin: -10px 10px -10px -16px; } .mn-chev { color: var(--ink-mute, #8A8F9E); flex: 0 0 auto; } .mn-pill { flex: 0 0 auto; font-family: var(--mono, ui-monospace, monospace); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--terra, #B8553A); border: 1px solid currentColor; border-radius: 999px; padding: 2px 7px; } .mn-sub { font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute, #8A8F9E); padding: 16px 16px 7px; } /* Pied : ce qui doit rester atteignable sans faire défiler le panneau. */ .mn-foot { flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-2, #E5E0D2); background: var(--bg, #F4F1EA); } .mn-acct { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mn-acct a { min-height: 44px; padding: 6px 8px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line, #D9D3C3); border-radius: 4px; background: var(--paper, #FAF8F3); color: var(--ink, #0E1B33); text-decoration: none; font-size: 12.5px; line-height: 1.25; text-align: center; -webkit-tap-highlight-color: transparent; } .mn-acct a:active { background: var(--bg, #F4F1EA); } .mn-acct .mn-pill { padding: 1px 6px; } .mn-langs { display: flex; gap: 6px; } .mn-langs button { flex: 1; height: 40px; border: 1px solid var(--line, #D9D3C3); border-radius: 4px; background: none; color: var(--ink-soft, #4B5670); font-family: var(--mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .1em; cursor: pointer; -webkit-tap-highlight-color: transparent; } .mn-langs button[aria-pressed="true"] { background: var(--ink, #0E1B33); color: var(--paper, #FAF8F3); border-color: var(--ink, #0E1B33); } .mn-tel { font-size: 12.5px; color: var(--ink-soft, #4B5670); text-align: center; margin: 0; } .mn-tel a { color: var(--ink, #0E1B33); text-decoration: none; font-weight: 500; } .mn-panel :focus-visible, .mn-bar :focus-visible { outline: 2px solid var(--terra, #B8553A); outline-offset: 2px; } /* ───────────────────────────────────────────────────────────────────────── CARROUSEL DE RAYONS (catalogue) L'idée du client, à l'endroit où elle sert : 24 rayons EPI ne tiendront jamais sur un écran, et on compare des rayons voisins plutôt qu'on ne vise une page précise. ───────────────────────────────────────────────────────────────────────── */ .mn-rail-wrap { display: none; } /* Idem pour les pastilles d'un carrousel de contenu : le JS les construit à tout moment (le bureau peut naître d'un redimensionnement), c'est le CSS qui décide de les montrer. Sans cette ligne elles s'affichaient sous la grille de 4 colonnes du bureau — mesuré à 1440 px. */ .mn-dots { display: none; } @media (max-width: 900px) { .mnav .mn-rail-wrap { display: block; position: relative; border-bottom: 1px solid var(--line-2, #E5E0D2); /* Plein bord : le bandeau est inséré dans le `.wrap`, qui porte 16 px de gouttière. Sans cette sortie, le premier onglet démarrait à 32 px du bord (désaligné du reste de la page) et le dernier ne pouvait pas glisser jusqu'au bord — or c'est ce dépassement qui fait comprendre qu'il y en a d'autres. */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 4px; } .mn-rail { display: flex; gap: 8px; padding: 2px 16px 13px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mn-rail::-webkit-scrollbar { display: none; } .mn-rail a { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 15px; border: 1px solid var(--line, #D9D3C3); border-radius: 999px; background: var(--paper, #FAF8F3); color: var(--ink-2, #1A2745); text-decoration: none; font-size: 13.5px; letter-spacing: -.005em; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .mn-rail a em { font-style: normal; font-family: var(--mono, ui-monospace, monospace); font-size: 10px; color: var(--ink-mute, #8A8F9E); } .mn-rail a[aria-current="page"] { background: var(--ink, #0E1B33); border-color: var(--ink, #0E1B33); color: var(--paper, #FAF8F3); } .mn-rail a[aria-current="page"] em { color: rgba(250, 248, 243, .66); } /* Sans ce dégradé, personne ne devine qu'il y a d'autres rayons à droite. */ .mn-fade { position: absolute; top: 0; bottom: 1px; width: 34px; pointer-events: none; transition: opacity .2s; } .mn-fade-l { left: 0; opacity: 0; background: linear-gradient(90deg, var(--bg, #F4F1EA) 12%, rgba(244, 241, 234, 0)); } .mn-fade-r { right: 0; background: linear-gradient(270deg, var(--bg, #F4F1EA) 12%, rgba(244, 241, 234, 0)); } } /* ─── Modale de devis du configurateur ─────────────────────────────────── Relevé à 390 px : `.dx-grid-2` gardait ses deux colonnes dans une modale déjà passée sur une seule (règle ≤ 980 px de la page), et les champs sortaient du cadre à 446 px. Deux champs côte à côte n'ont de toute façon pas de sens à cette largeur. */ @media (max-width: 640px) { .dx-grid-2 { grid-template-columns: 1fr !important; } } /* ─── Carte produit : la flèche sortait du cadre ───────────────────────── Relevé à 390 px exactement (390 passe, 375 et 430 non — c'est la largeur où les deux colonnes tombent au plus juste) : `.pc-arrow` est en `flex-shrink: 0` et ses voisins — prix et minimum de commande — ne savaient pas se réduire, donc la ligne poussait la flèche 14 px hors de la carte. Le débordement était déjà là avant la refonte du menu ; il est simplement devenu visible en auditant tout le mobile. */ @media (max-width: 900px) { .product-card .pc-foot { min-width: 0; flex-wrap: wrap; row-gap: 6px; } .product-card .pc-foot > *:not(.pc-arrow) { min-width: 0; } .product-card .pc-moq { overflow: hidden; text-overflow: ellipsis; } } /* Grille à 2 colonnes (≤ 640 px) : le pied de carte se range en DEUX lignes fixes — prix, puis minimum + flèche. Laissé au seul `flex-wrap`, il retombait différemment d'une carte à l'autre selon la longueur du prix : « Sur devis » tenait avec le minimum sur la même ligne et renvoyait la flèche à gauche en dessous, « Dès 89 CHF/paire » non. Trois cartes côte à côte, trois pieds de page différents. */ @media (max-width: 640px) { .product-card .pc-foot { align-items: center; } .product-card .pc-foot > .pc-price { flex: 1 0 100%; } .product-card .pc-foot .pc-moq { margin-left: 0; margin-right: auto; } } /* ═══════════════════════════════════════════════════════════════════════ CONFORT TACTILE — mesuré au navigateur sur profil iPhone (390 px, ×3) ═══════════════════════════════════════════════════════════════════════ */ /* ─── Safari iOS zoome sur un champ dont le texte fait moins de 16 px ──── …et il ne DÉZOOME PAS ensuite : le client se retrouve sur une page agrandie au milieu du formulaire. 11 champs étaient concernés, dont les 7 de la modale de devis du configurateur — précisément là où l'on convertit. `!important` est obligatoire : `#markingNotes` porte sa taille en style EN LIGNE, et `.model-search` / `.dx-field input` ont une spécificité supérieure à un sélecteur d'élément. Les documents A4 (/devis, /fiche-commande, /bat, /bon-livraison) ne chargent pas ce fichier — leur mise en page d'impression est intacte. */ @media (max-width: 900px) { input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]), select, textarea { font-size: 16px !important; } /* Tant qu'on y est : une hauteur touchable. Le `