/* ============================================================ 0 · RÉGLAGES COMMUNS — et neutralisation de l'ancien hf.css encre #16181b · sarcelle #17545c · jaune #f0c417 · filets #e6e8ea ============================================================ */ [data-vs="bandeau-haut"],[data-vs="bandeau-haut"] *,[data-vs="bandeau-bas"],[data-vs="bandeau-bas"] *,.vsh-zone,.vsh-zone *{box-sizing:border-box} body{overflow-x:clip!important} /* l'en-tête ne colle plus (hf.css le rendait sticky) */ html{scroll-padding-top:12px} #masthead{position:relative;top:auto;z-index:88} body.admin-bar #masthead{top:auto} @media(max-width:782px){body.admin-bar #masthead{top:auto}} /* focus visibles : sarcelle sur fond clair, jaune sur le bandeau sombre */ #masthead a:focus-visible,#masthead button:focus-visible{outline:2px solid #17545c;outline-offset:3px;border-radius:4px} [data-vs="bandeau-haut"] a:focus-visible{outline:2px solid #f0c417;outline-offset:3px;border-radius:4px} /* ============================================================ 1 · RANGÉE 1 — BANDEAU SOMBRE : contact + avis [bandeau-haut] ============================================================ */ .vsh-top{background:#16181b;color:#d8dadd;font-family:Inter,system-ui,sans-serif;font-size:12.5px;line-height:1.4} .vsh-top-in{max-width:1680px;margin:0 auto;padding:0 clamp(18px,3.5vw,64px);min-height:37px;display:flex;justify-content:space-between;align-items:center;gap:18px} .vsh-top-g{display:flex;align-items:center;gap:14px;white-space:nowrap;min-width:0} .vsh-top b{color:#fff;font-weight:600} .vsh-top a{color:inherit;text-decoration:none} .vsh-top a:hover,.vsh-top a:hover b{color:#f0c417} .vsh-sep{opacity:.35} .vsh-stars{color:#f0c417;letter-spacing:1px;font-size:12px;transform:translateY(-.5px)} @media(max-width:800px){.vsh-top-adr{display:none}} @media(max-width:620px){.vsh-top-hor{display:none}.vsh-top-in{min-height:34px}.vsh-top{font-size:12px}} /* ============================================================ 2 · L'EN-TÊTE ASTRA — barre blanche, conteneur centré (écrase la barre noire d'hf.css ; balisage du menu intouché) ============================================================ */ #masthead .ast-primary-header-bar{background:#fff;border-bottom:1px solid #e6e8ea} /* l'accueil pose .ast-container{width:100%;margin:0;padding:0}!important : on recentre avec plus de poids, marges automatiques comprises */ #masthead .site-primary-header-wrap.ast-container{max-width:1680px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;padding:0 clamp(18px,3.5vw,64px)!important;float:none!important} /* — bureau : une grille de 2 rangées — logo + zone droite, puis le menu — */ #masthead #ast-desktop-header .ast-builder-grid-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;min-height:0} #masthead #ast-desktop-header .site-header-primary-section-left{grid-column:1;grid-row:1;display:flex;align-items:center;min-height:78px} #masthead #ast-desktop-header .site-header-primary-section-right{display:contents} #masthead #ast-desktop-header .vsh-zone{grid-column:2;grid-row:1;display:flex;align-items:center;gap:clamp(12px,1.3vw,20px);margin-left:clamp(14px,2vw,30px);min-width:0} #masthead #ast-desktop-header .ast-builder-menu-1{grid-column:1 / -1;grid-row:2;position:relative;display:block;width:100%;margin:0} /* le filet entre la rangée du logo et celle du menu court d'un bord à l'autre */ #masthead #ast-desktop-header .ast-builder-menu-1::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:1px;background:#e6e8ea} /* ============================================================ 3 · LA MARQUE — logo image sur PLAQUE sombre, titre texte en secours ============================================================ */ #masthead .site-branding{padding:0} #masthead .site-logo-img{display:inline-flex} #masthead img.custom-logo{display:block;height:46px;width:auto;max-width:min(40vw,220px);object-fit:contain} #masthead .site-branding:has(img.custom-logo) .site-title:not(:has(img.custom-logo)){display:none} #masthead .site-title{line-height:1} #masthead .site-title a{font-family:Archivo,Inter,system-ui,sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em;color:#16181b;white-space:nowrap} #masthead .site-title a:hover,#masthead .site-title a:focus{color:#16181b} /* ============================================================ 4 · ZONE DE DROITE — recherche, compte, panier, location [entete-droite] ============================================================ */ /* — le champ de recherche — */ #masthead .vsh-cherche{flex:1 1 auto;min-width:230px;display:flex;align-items:center;height:44px;margin:0;padding:0;border:1px solid #d9dcdf;border-radius:9px;background:#fafbfb;transition:border-color .18s,background .18s,box-shadow .18s} #masthead .vsh-cherche:focus-within{border-color:#17545c;background:#fff;box-shadow:0 0 0 3px rgba(23,84,92,.1)} #masthead .vsh-cherche-b{flex:none;border:0;background:none;margin:0;padding:0 3px 0 13px;height:100%;display:inline-flex;align-items:center;cursor:pointer;color:#82878d} #masthead .vsh-cherche-b:hover{color:#17545c} #masthead .vsh-cherche-b svg{width:15px;height:15px;display:block} #masthead .vsh-cherche input[type="search"]{flex:1 1 auto;min-width:0;border:0;background:none;margin:0;padding:0 10px;height:100%;font-family:Inter,system-ui,sans-serif;font-size:13.5px;font-weight:400;color:#16181b;appearance:none;-webkit-appearance:none;border-radius:0;box-shadow:none;outline:none} #masthead .vsh-cherche input[type="search"]:focus,#masthead .vsh-cherche input[type="search"]:focus-visible{outline:none;border:0;box-shadow:none;background:none} #masthead .vsh-cherche input::placeholder{color:#82878d;opacity:1} #masthead .vsh-cherche input::-webkit-search-decoration{-webkit-appearance:none} #masthead .vsh-refs{flex:none;font-size:12px;color:#b6bbc0;padding-right:12px;white-space:nowrap} /* — Compte et Panier : pictogramme + libellé — */ #masthead .vsh-lien{flex:none;display:inline-flex;flex-direction:column;align-items:center;gap:3px;font-family:Inter,system-ui,sans-serif;font-size:11.5px;font-weight:600;line-height:1;color:#3d4147;padding:2px 1px;transition:color .15s} #masthead .vsh-lien:hover,#masthead .vsh-lien:focus{color:#16181b} #masthead .vsh-picto{position:relative;display:inline-flex} #masthead .vsh-picto svg{width:20px;height:20px;display:block} /* la pastille : vide = invisible ; remplie par le fragment WooCommerce */ #masthead .vsh-badge{position:absolute;top:-5px;right:-8px;min-width:16px;height:16px;border-radius:999px;background:#17545c;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;padding:0 4px;font-style:normal} #masthead .vsh-badge:empty{display:none} /* — le bouton Location, jaune comme sur l'ancien site — */ #masthead .vsh-loc{flex:none;display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:9px;background:#f0c417;color:#1a1206;font-family:Inter,system-ui,sans-serif;font-size:13.5px;font-weight:800;letter-spacing:.005em;white-space:nowrap;transition:filter .15s,transform .15s} #masthead .vsh-loc:hover{filter:brightness(1.05);transform:translateY(-1px);color:#1a1206} #masthead .vsh-loc-x{margin-left:4px} /* ============================================================ 5 · RANGÉE 3 — LE MENU, liens sombres, soulignement sarcelle ============================================================ */ #masthead #ast-desktop-header .ast-builder-menu-1 .ast-main-header-bar-alignment,#masthead #ast-desktop-header .ast-builder-menu-1 .main-header-bar-navigation,#masthead #ast-desktop-header .ast-builder-menu-1 .site-navigation{display:block;width:100%} #masthead #ast-desktop-header .main-navigation{display:block;width:100%} #masthead .main-header-menu{background:transparent} #masthead #ast-desktop-header .main-header-menu{display:flex;flex-wrap:nowrap;width:100%;justify-content:flex-start} #masthead #ast-desktop-header .main-header-menu>.menu-item{flex:none} /* Astra pose line-height:80px sur les .menu-item du bureau : on reprend la main */ #masthead .main-header-menu>.menu-item{line-height:1.35} #masthead .main-header-menu>.menu-item>.menu-link{position:relative;display:inline-flex;align-items:center;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:500;letter-spacing:.004em;line-height:1.35;color:#2c3035;background:transparent;padding:15px 16px} #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link{white-space:nowrap} #masthead #ast-desktop-header .main-header-menu>.menu-item:first-child>.menu-link{padding-left:0} #masthead .main-header-menu>.menu-item>.menu-link::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;background:#17545c;transform:scaleX(0);transform-origin:left;transition:transform .22s ease} #masthead #ast-desktop-header .main-header-menu>.menu-item:first-child>.menu-link::after{left:0} #masthead .main-header-menu>.menu-item:hover>.menu-link,#masthead .main-header-menu>.menu-item.focus>.menu-link,#masthead .main-header-menu>.menu-item>.menu-link:focus{color:#16181b;background:transparent} #masthead .main-header-menu>.menu-item:hover>.menu-link::after,#masthead .main-header-menu>.menu-item.focus>.menu-link::after,#masthead .main-header-menu>.menu-item.current-menu-item>.menu-link::after,#masthead .main-header-menu>.menu-item.current-menu-ancestor>.menu-link::after{transform:scaleX(1)} #masthead .main-header-menu>.menu-item.current-menu-item>.menu-link,#masthead .main-header-menu>.menu-item.current-menu-ancestor>.menu-link{color:#16181b;font-weight:600} /* Promotions : en sarcelle, comme « Financement » sur la maquette */ #masthead .main-header-menu>.menu-item>.menu-link[href*="/promotions"]{color:#17545c;font-weight:600} #masthead .main-header-menu>.menu-item:hover>.menu-link[href*="/promotions"]{color:#123f45} /* les chevrons des rubriques à sous-menu */ #masthead .main-header-menu .ast-icon svg{fill:currentColor} #masthead .ast-header-navigation-arrow .icon-arrow svg{width:9px;height:auto} #masthead .main-header-menu>.menu-item>.menu-link .dropdown-menu-toggle{opacity:.5;transition:opacity .2s} #masthead .main-header-menu>.menu-item:hover>.menu-link .dropdown-menu-toggle{opacity:1} /* — le menu déroulant (bureau) : panneau blanc, filet sarcelle — scopé sur #ast-desktop-header pour ne JAMAIS toucher le volet du téléphone (une fenêtre étroite sur un PC garde la classe .ast-desktop) */ .ast-desktop #masthead #ast-desktop-header .main-header-menu .sub-menu{width:272px;background:#fff;border:1px solid #e2e4e7;border-top:2px solid #17545c;border-radius:0 0 14px 14px;box-shadow:0 26px 54px -20px rgba(20,24,28,.24);padding:7px;margin:0} .ast-desktop #masthead #ast-desktop-header .main-header-menu .sub-menu .menu-item{border:0;line-height:1.4} .ast-desktop #masthead #ast-desktop-header .main-header-menu .sub-menu .menu-link{font-family:Inter,system-ui,sans-serif;font-size:13.5px;font-weight:500;line-height:1.4;color:#3d4147;padding:9px 12px;border:0;border-radius:9px;background:transparent;transition:background .16s,color .16s} .ast-desktop #masthead #ast-desktop-header .main-header-menu .sub-menu .menu-item:hover>.menu-link,.ast-desktop #masthead #ast-desktop-header .main-header-menu .sub-menu .menu-item.focus>.menu-link{background:#f3f6f6;color:#16181b} /* flèches parasites héritées de l'import du menu : masquées */ #masthead .sub-menu .menu-link>.ast-icon.icon-arrow{display:none} /* ============================================================ 6 · PALIERS BUREAU (écrasent ceux d'hf.css, mêmes seuils) ============================================================ */ @media(max-width:1480px){ #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link{font-size:13.5px;padding:14px 13px} #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link::after{left:13px;right:13px} #masthead #ast-desktop-header .main-header-menu>.menu-item:first-child>.menu-link{padding-left:0} #masthead #ast-desktop-header .main-header-menu>.menu-item:first-child>.menu-link::after{left:0} } @media(max-width:1280px){ #masthead #ast-desktop-header .vsh-refs{display:none} } @media(max-width:1180px){ #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link{font-size:13px;padding:13px 10px} #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link::after{left:10px;right:10px} #masthead #ast-desktop-header .main-header-menu>.menu-item:first-child>.menu-link{padding-left:0} #masthead #ast-desktop-header .main-header-menu>.menu-item:first-child>.menu-link::after{left:0} #masthead #ast-desktop-header img.custom-logo{height:40px} #masthead #ast-desktop-header .custom-logo-link{padding:7px 11px;border-radius:10px} #masthead #ast-desktop-header .site-header-primary-section-left{min-height:70px} #masthead #ast-desktop-header .site-title a{font-size:17px;color:#16181b} #masthead #ast-desktop-header .vsh-cherche{height:41px} #masthead #ast-desktop-header .vsh-loc{height:41px;padding:0 15px;font-size:13px} #masthead #ast-desktop-header .vsh-zone{gap:11px;margin-left:14px} } @media(max-width:1100px){ #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link{font-size:12.5px;padding:12px 8px} #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link::after{left:8px;right:8px} #masthead #ast-desktop-header .main-header-menu>.menu-item:first-child>.menu-link{padding-left:0} #masthead #ast-desktop-header .main-header-menu>.menu-item:first-child>.menu-link::after{left:0} /* hf.css masquait les chevrons ici : avec 6 rubriques, la place suffit */ #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link .dropdown-menu-toggle{display:inline-flex} #masthead #ast-desktop-header img.custom-logo{height:38px} #masthead #ast-desktop-header .vsh-loc .vsh-loc-x{display:none} } /* ============================================================ 7 · TÉLÉPHONE ET TABLETTE (≤ 921 px) — la rangée s'enroule : logo + pictos + burger, puis la recherche sur sa pleine largeur ============================================================ */ @media(max-width:921px){ /* Astra met déjà 20 px de marge interne sur la barre : on la reprend à zéro et on pose la nôtre sur la rangée, sinon tout déborde à 390 px */ #masthead #ast-mobile-header .ast-primary-header-bar{padding:0;min-height:0} #masthead #ast-mobile-header .ast-builder-grid-row{display:flex;flex-wrap:wrap;align-items:center;min-height:0;height:auto;padding:9px 14px 11px;row-gap:8px;column-gap:7px} /* Astra donne height:100% aux sections : la rangée du logo avalerait la hauteur des deux lignes et pousserait la recherche hors de la barre */ #masthead #ast-mobile-header .site-header-section{height:auto} #masthead #ast-mobile-header .site-header-primary-section-left{order:1;margin-right:auto;min-width:0;height:auto} #masthead #ast-mobile-header .site-header-primary-section-right{display:contents} #masthead #ast-mobile-header .vsh-zone{display:contents} #masthead #ast-mobile-header .vsh-compte{order:2} #masthead #ast-mobile-header .vsh-panier{order:3} #masthead #ast-mobile-header .vsh-loc{order:4;height:36px;padding:0 12px;font-size:12.5px;border-radius:8px} #masthead #ast-mobile-header [data-section="section-header-mobile-trigger"]{order:5;padding:0} #masthead #ast-mobile-header .ast-button-wrap{padding:0} #masthead #ast-mobile-header .vsh-cherche{order:9;flex:1 1 100%;height:42px;min-width:0} #masthead #ast-mobile-header .vsh-refs{display:none} /* pictos seuls, cibles de 36 px ; les libellés sont dans aria-label */ #masthead #ast-mobile-header .vsh-lien{width:36px;height:36px;justify-content:center;padding:0} #masthead #ast-mobile-header .vsh-txt{display:none} #masthead #ast-mobile-header .vsh-picto svg{width:21px;height:21px} #masthead #ast-mobile-header img.custom-logo{height:30px;max-width:40vw} #masthead #ast-mobile-header .custom-logo-link{padding:6px 10px;border-radius:9px} #masthead #ast-mobile-header .site-title a{font-size:17px;color:#16181b} #masthead #ast-mobile-header .menu-toggle.main-header-menu-toggle{padding:6px} } @media(max-width:480px){ #masthead #ast-mobile-header .vsh-loc .vsh-loc-x{display:none} } /* le bouton menu (burger) : encre sur blanc */ #masthead .menu-toggle.main-header-menu-toggle{background:transparent;color:#16181b;padding:8px;border:0;border-radius:9px} #masthead .menu-toggle.main-header-menu-toggle:hover,#masthead .menu-toggle.main-header-menu-toggle:focus{background:#f3f4f5;color:#16181b} #masthead .menu-toggle .ast-mobile-svg{fill:#16181b} #masthead .menu-toggle:focus:not(:focus-visible){outline:none;border-color:transparent;box-shadow:none} /* le volet qui s'ouvre sous la barre : clair lui aussi */ body.ast-header-break-point #masthead .ast-mobile-header-content{background:#fff;border-top:1px solid #e6e8ea;max-height:calc(100vh - 130px);max-height:calc(100dvh - 130px);overflow-y:auto;overscroll-behavior:contain} body.ast-header-break-point #masthead .ast-mobile-header-content .ast-builder-layout-element{padding:4px 0 12px} body.ast-header-break-point #masthead .main-header-menu{background:transparent;flex-direction:column} body.ast-header-break-point #masthead .main-header-menu>.menu-item{width:100%} body.ast-header-break-point #masthead .main-header-menu .sub-menu{display:none} body.ast-header-break-point #masthead .main-header-menu .menu-item.ast-submenu-expanded>.sub-menu,body.ast-header-break-point #masthead .main-header-menu .sub-menu.toggled-on{display:block} body.ast-header-break-point #masthead .main-header-menu .menu-item{line-height:1.4} body.ast-header-break-point #masthead .main-header-menu .menu-link{background:transparent;font-family:Inter,system-ui,sans-serif;font-size:14.5px;font-weight:600;line-height:1.4;color:#22262b;padding:13px 22px;border-bottom:1px solid #eef0f2} /* le chevron d'ouverture : calé sur la ligne du libellé, cible de 48 px */ body.ast-header-break-point #masthead .main-header-menu .menu-item-has-children{position:relative} body.ast-header-break-point #masthead .main-header-menu>.menu-item>.menu-link{padding-right:52px} body.ast-header-break-point #masthead .main-header-menu>.menu-item>.ast-menu-toggle{position:absolute;top:0;right:0;width:52px;height:47px;margin:0;padding:0;display:flex;align-items:center;justify-content:center} body.ast-header-break-point #masthead .main-header-menu .menu-item:hover>.menu-link{color:#16181b;background:#fafbfb} /* et on annule le panneau « bureau » d'hf.css, qui resterait sinon collé au volet quand une fenêtre de PC est étroite (classe .ast-desktop) */ body.ast-header-break-point #masthead .main-header-menu .sub-menu{background:#f6f7f7;width:auto;border:0;border-radius:0;box-shadow:none;padding:0;margin:0} body.ast-header-break-point #masthead .main-header-menu .sub-menu .menu-link{background:transparent;font-size:13.5px;font-weight:500;color:#4c4f53;border:0;border-bottom:1px solid #e9ebed;border-radius:0} body.ast-header-break-point #masthead .ast-menu-toggle{background:transparent;color:#71767d} body.ast-header-break-point #masthead .ast-menu-toggle:hover,body.ast-header-break-point #masthead .ast-menu-toggle:focus{background:transparent;color:#16181b} /* ============================================================ 8 · RANGÉE 4 — BANDEAU GRIS CLAIR : livraison, retrait [bandeau-bas] Une ligne centrée sur grand écran ; défilement continu ≤ 921 px. ============================================================ */ .vsh-bas{background:#f3f6f6;border-bottom:1px solid #e6e8ea;color:#3d4147;font-family:Inter,system-ui,sans-serif;font-size:12.5px;line-height:1.45;overflow:hidden} .vsh-bas-in{max-width:1680px;margin:0 auto;padding:0 clamp(18px,3.5vw,64px);display:flex;justify-content:center} .vsh-bas-file{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:32px;row-gap:2px;list-style:none;margin:0;padding:8px 0} .vsh-bas-file li{white-space:nowrap} .vsh-bas b{font-weight:600;color:#22262b} .vsh-bas .vsh-d{color:#17545c} .vsh-bas-file[aria-hidden="true"]{display:none} @media(max-width:921px){ .vsh-bas-in{justify-content:flex-start;max-width:none;padding:0} .vsh-bas-file{flex:none;flex-wrap:nowrap;column-gap:0;min-width:max-content;animation:vsh-bas-defile 30s linear infinite} .vsh-bas-file li{display:inline-flex;align-items:center;margin-right:0;column-gap:.3em} .vsh-bas-file li::after{content:"";width:4px;height:4px;border-radius:50%;background:#b6bbc0;margin:0 15px;flex:none} .vsh-bas-file[aria-hidden="true"]{display:flex} } @keyframes vsh-bas-defile{to{transform:translateX(-100%)}} /* ============================================================ 9 · PRÉFÉRENCES D'AFFICHAGE ============================================================ */ @media(prefers-reduced-motion:reduce){ #masthead *{transition:none!important} .vsh-bas-file{animation:none!important} .vsh-bas-in{overflow-x:auto;scrollbar-width:none} .vsh-bas-in::-webkit-scrollbar{display:none} .vsh-bas-file[aria-hidden="true"]{display:none} } /* --------------------------------------------------------------------------- RETOUCHES DU 17/08 — demandes de Maxime 1. Le logo existe maintenant en version encre : la plaque sombre est retirée. 2. Le bandeau du haut est supprimé (trop de barres sur portable) ; ses informations reviendront ailleurs. 3. Le cadre du showroom manquait de largeur sur grand écran. --------------------------------------------------------------------------- */ #masthead .custom-logo-link{background:none;padding:0;border-radius:0} #masthead .custom-logo{height:52px;width:auto} @media(max-width:900px){#masthead .custom-logo{height:38px}} /* le bandeau du haut ne s'affiche plus — le bloc n'est plus posé, ceci n'est qu'un filet de sécurité si un fichier traîne en cache */ .vsh-top{display:none!important}