/* ============================================================
   0 · RÉGLAGES COMMUNS
   noir #0c0d10 · jaune #f0c417 · Archivo 800/900 serré · Inter
   ============================================================ */
html{scroll-padding-top:92px}
[data-vs="bandeau"],[data-vs="bandeau"] *,[data-vs="pied"],[data-vs="pied"] *,.vsh-actions,.vsh-actions *{box-sizing:border-box}
[data-vs="bandeau"] a:focus-visible,[data-vs="pied"] a:focus-visible,#masthead a:focus-visible,#masthead button:focus-visible{outline:2px solid #f0c417;outline-offset:3px;border-radius:4px}

/* ============================================================
   1 · BANDEAU DE RÉASSURANCE — au-dessus de l'en-tête
   Une ligne sur grand écran ; défilement continu sous 922 px.
   ============================================================ */
.vsh-band{background:#f0c417;color:#1a1206;overflow:hidden;font-family:Inter,system-ui,sans-serif}
.vsh-band-in{display:flex;align-items:center;justify-content:center;max-width:1680px;margin:0 auto;padding:0 clamp(16px,3vw,44px)}
.vsh-band-track{display:flex;align-items:center;gap:38px;flex:none;min-width:max-content;margin:0;padding:9px 0;list-style:none}
.vsh-band-track li{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1;white-space:nowrap}
.vsh-band-track li::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(26,18,6,.55);flex:none}
.vsh-band-track li:first-child::before{display:none}
.vsh-band-track .vsh-star{font-size:12px;line-height:1;transform:translateY(-.5px)}
.vsh-band-track[aria-hidden="true"]{display:none}
@media(max-width:921px){
  .vsh-band-in{justify-content:flex-start;max-width:none;padding:0}
  .vsh-band-track{gap:0;padding-right:0;animation:vsh-defile 26s linear infinite}
  .vsh-band-track li{margin-right:38px}
  .vsh-band-track li:first-child::before{display:inline-block}
  .vsh-band-track[aria-hidden="true"]{display:flex}
}
@keyframes vsh-defile{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){
  .vsh-band-track{animation:none!important}
  .vsh-band-in{overflow-x:auto;scrollbar-width:none}
  .vsh-band-in::-webkit-scrollbar{display:none}
  .vsh-band-track[aria-hidden="true"]{display:none}
}

/* ============================================================
   2 · EN-TÊTE — habillage du squelette Astra existant
   (aucune modification du balisage du menu)
   ============================================================ */
/* — la barre : collante, noire — */
/* Astra pose body{overflow-x:hidden} et l'accueil ajoute la même chose sur html :
   le body devient alors un conteneur de défilement et position:sticky ne colle
   plus jamais. overflow-x:clip coupe pareil SANS créer de conteneur — le sticky
   s'accroche à la fenêtre et la protection anti-débordement reste entière. */
body{overflow-x:clip!important}
#masthead{position:sticky;top:0;z-index:88}
body.admin-bar #masthead{top:32px}
@media(max-width:782px){body.admin-bar #masthead{top:46px}}
#masthead .ast-primary-header-bar{background:#0c0d10;border-bottom:1px solid rgba(255,255,255,.08)}
/* l'accueil pose .ast-container{max-width:100%!important;padding:0!important}
   pour ses sections pleine largeur — l'en-tête doit s'en défendre */
#masthead .site-primary-header-wrap.ast-container{max-width:1680px!important;padding:0 clamp(18px,3.5vw,64px)!important}
#masthead #ast-desktop-header .ast-builder-grid-row{align-items:center;min-height:74px}

/* — la marque : logo image, titre texte en secours — */
#masthead .site-branding{padding:0}
#masthead .custom-logo-link{display:inline-flex;align-items:center}
#masthead img.custom-logo{display:block;height:46px;width:auto;max-width:min(44vw,224px);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:-.025em;color:#fff;white-space:nowrap}
#masthead .site-title a:hover,#masthead .site-title a:focus{color:#fff}

/* — le menu : liens clairs, soulignement jaune — */
#masthead .main-header-menu{background:transparent}
#masthead .main-header-menu>.menu-item>.menu-link{position:relative;font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.005em;color:rgba(255,255,255,.78);padding:0 clamp(10px,1vw,16px)}
#masthead #ast-desktop-header .main-header-menu>.menu-item{flex:none}
#masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link{white-space:nowrap}
#masthead .main-header-menu>.menu-item>.menu-link::after{content:"";position:absolute;left:clamp(10px,1vw,16px);right:clamp(10px,1vw,16px);bottom:-1px;height:2px;background:#f0c417;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
#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:#fff;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:#fff}
/* le chevron des rubriques à sous-menu */
#masthead .ast-header-navigation-arrow .icon-arrow svg{width:9px;height:auto}
#masthead .main-header-menu>.menu-item>.menu-link .dropdown-menu-toggle{opacity:.55;transition:opacity .2s}
#masthead .main-header-menu>.menu-item:hover>.menu-link .dropdown-menu-toggle{opacity:1}

/* — le menu déroulant (bureau) : panneau sombre, filet jaune — */
.ast-desktop #masthead .main-header-menu .sub-menu{width:268px;background:#111318;border:1px solid rgba(255,255,255,.1);border-top:2px solid #f0c417;border-radius:0 0 16px 16px;box-shadow:0 30px 60px -18px rgba(0,0,0,.65);padding:8px}
.ast-desktop #masthead .main-header-menu .sub-menu .menu-item{border:0}
.ast-desktop #masthead .main-header-menu .sub-menu .menu-link{font-family:Inter,system-ui,sans-serif;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.72);padding:10px 12px;border:0;border-radius:10px;transition:background .18s,color .18s}
.ast-desktop #masthead .main-header-menu .sub-menu .menu-item:hover>.menu-link,.ast-desktop #masthead .main-header-menu .sub-menu .menu-item.focus>.menu-link{background:rgba(240,196,23,.09);color:#fff}
/* flèches parasites héritées de l'import du menu : masquées */
#masthead .sub-menu .menu-link>.ast-icon.icon-arrow{display:none}

/* ============================================================
   3 · ZONE DE DROITE — téléphone, recherche, panier (bloc vsh-actions)
   ============================================================ */
#masthead .vsh-actions{display:flex;align-items:center;gap:9px;margin-left:clamp(10px,1.6vw,26px);flex:none}
#masthead .vsh-tel{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 17px;border-radius:999px;background:#f0c417;color:#1a1206;font-family:Inter,system-ui,sans-serif;font-size:13.5px;font-weight:800;letter-spacing:.01em;white-space:nowrap;transition:filter .18s,transform .15s}
#masthead .vsh-tel:hover{filter:brightness(1.06);transform:translateY(-1px);color:#1a1206}
#masthead .vsh-tel svg{width:15px;height:15px;flex:none}
#masthead .vsh-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);color:#fff;transition:background .18s,border-color .18s}
#masthead .vsh-ico:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45);color:#fff}
#masthead .vsh-ico svg{width:17px;height:17px}
/* écran moyen : le numéro se replie, le téléphone devient une pastille */
@media(max-width:1280px){
  #masthead #ast-desktop-header .vsh-tel{width:40px;padding:0;justify-content:center}
  #masthead #ast-desktop-header .vsh-tel .vsh-tel-n{display:none}
}
/* le menu bureau reste sur UNE ligne : deux paliers de compaction */
#masthead #ast-desktop-header .main-header-menu{flex-wrap:nowrap}
@media(max-width:1480px){
  #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link{font-size:13.5px;padding:0 11px}
  #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link::after{left:11px;right:11px}
}
@media(max-width:1180px){
  #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link{font-size:13px;padding:0 8px}
  #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link::after{left:8px;right:8px}
  #masthead #ast-desktop-header img.custom-logo{height:40px}
  #masthead #ast-desktop-header .site-title a{font-size:17px}
  #masthead #ast-desktop-header .vsh-ico{width:36px;height:36px}
  #masthead #ast-desktop-header .vsh-tel{width:36px;height:36px}
  #masthead #ast-desktop-header .vsh-actions{gap:7px;margin-left:12px}
}
@media(max-width:1100px){
  #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link{font-size:12.5px;padding:0 7px}
  #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link::after{left:7px;right:7px}
  #masthead #ast-desktop-header .main-header-menu>.menu-item>.menu-link .dropdown-menu-toggle{display:none}
  #masthead #ast-desktop-header img.custom-logo{height:38px}
  #masthead #ast-desktop-header .vsh-actions{margin-left:10px}
}

/* ============================================================
   4 · EN-TÊTE MOBILE (≤ 921 px) — même barre, même noir
   ============================================================ */
#masthead #ast-mobile-header .ast-builder-grid-row{align-items:center;min-height:62px;padding:0 14px}
#masthead #ast-mobile-header img.custom-logo{height:36px;max-width:46vw}
#masthead #ast-mobile-header .site-title a{font-size:18px}
#masthead #ast-mobile-header .vsh-actions{gap:7px;margin-left:0}
#masthead #ast-mobile-header .vsh-tel{width:37px;height:37px;padding:0;justify-content:center}
#masthead #ast-mobile-header .vsh-tel .vsh-tel-n{display:none}
#masthead #ast-mobile-header .vsh-ico{width:37px;height:37px}
#masthead #ast-mobile-header .vsh-ico svg{width:16px;height:16px}
/* le bouton menu (burger) — le customizer le peint en bleu, on reprend la main */
#masthead .menu-toggle.main-header-menu-toggle{background:transparent;color:#fff;padding:8px;border:0;border-radius:10px}
#masthead .menu-toggle.main-header-menu-toggle:hover,#masthead .menu-toggle.main-header-menu-toggle:focus{background:rgba(255,255,255,.08);color:#fff}
#masthead .menu-toggle .ast-mobile-svg{fill:#fff}
#masthead .menu-toggle:focus:not(:focus-visible){outline:none;border-color:transparent;box-shadow:none}
/* le volet qui s'ouvre sous la barre */
body.ast-header-break-point #masthead .ast-mobile-header-content{background:#0c0d10;border-top:1px solid rgba(255,255,255,.07);max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto;overscroll-behavior:contain}
body.ast-header-break-point #masthead .ast-mobile-header-content .ast-builder-layout-element{padding:4px 0 14px}
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%}
/* sous-menus repliés par défaut ; dépliés par les classes d'Astra (chevrons) */
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-link{background:transparent;font-family:Inter,system-ui,sans-serif;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.85);padding:13px 22px;border-bottom:1px solid rgba(255,255,255,.06)}
body.ast-header-break-point #masthead .main-header-menu .menu-item:hover>.menu-link{color:#fff;background:rgba(255,255,255,.04)}
body.ast-header-break-point #masthead .main-header-menu .sub-menu{background:#101218}
body.ast-header-break-point #masthead .main-header-menu .sub-menu .menu-link{background:transparent;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.68);border-bottom-color:rgba(255,255,255,.04)}
body.ast-header-break-point #masthead .ast-menu-toggle{background:transparent;color:rgba(255,255,255,.8)}
body.ast-header-break-point #masthead .ast-menu-toggle:hover,body.ast-header-break-point #masthead .ast-menu-toggle:focus{background:transparent;color:#fff}

/* ============================================================
   5 · PIED DE PAGE — vsf
   ============================================================ */
.vsf{background:#0c0d10;color:#fff;font-family:Inter,system-ui,sans-serif;border-top:1px solid rgba(255,255,255,.1);line-height:1.55;-webkit-font-smoothing:antialiased}
.vsf a{color:inherit;text-decoration:none}
.vsf .vsf-wrap{max-width:1680px;margin:0 auto;padding:0 clamp(20px,3.5vw,64px)}
.vsf .vsf-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,72px);padding:clamp(44px,6vw,80px) 0 clamp(34px,4vw,56px)}
/* — la marque et le magasin — */
.vsf .vsf-brand{display:block;font-family:Archivo,Inter,system-ui,sans-serif;font-weight:900;font-size:clamp(24px,2vw,30px);letter-spacing:-.025em;line-height:1;color:#fff}
.vsf .vsf-brand em{font-style:normal;color:#f0c417}
.vsf .vsf-tag{margin:12px 0 0;font-size:13.5px;color:rgba(255,255,255,.6);max-width:36ch}
.vsf .vsf-rows{margin:20px 0 0;display:grid;gap:12px;font-size:14px;color:rgba(255,255,255,.78)}
.vsf .vsf-row{display:flex;gap:11px;align-items:flex-start}
.vsf .vsf-row svg{width:15px;height:15px;flex:none;color:#f0c417;margin-top:3px}
.vsf .vsf-row b{font-weight:700;color:#fff}
.vsf .vsf-tel{font-family:Archivo,Inter,system-ui,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.01em;color:#fff;white-space:nowrap}
.vsf .vsf-tel:hover{color:#f0c417}
.vsf .vsf-iti{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:13px;font-weight:700;color:#f0c417}
.vsf .vsf-iti svg{width:12px;height:12px;margin:0;transition:transform .2s}
.vsf .vsf-iti:hover svg{transform:translateX(3px)}
.vsf .vsf-iti:hover{text-decoration:underline;text-underline-offset:3px}
.vsf .vsf-muted{color:rgba(255,255,255,.55)}
/* — les colonnes de liens — */
.vsf .vsf-t{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#f0c417;margin:0 0 15px}
.vsf .vsf-links{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.vsf .vsf-links a{font-size:14px;color:rgba(255,255,255,.66);transition:color .15s}
.vsf .vsf-links a:hover{color:#fff}
/* — le paiement en plusieurs fois — */
.vsf .vsf-pay{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;padding:20px 0;border-top:1px solid rgba(255,255,255,.08)}
.vsf .vsf-pay-t{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.vsf .vsf-pay-x{display:flex;gap:8px}
.vsf .vsf-pay-x span{display:inline-flex;align-items:center;font-family:Archivo,Inter,system-ui,sans-serif;font-weight:900;font-size:13px;letter-spacing:-.01em;color:#f0c417;background:rgba(240,196,23,.07);border:1px solid rgba(240,196,23,.38);border-radius:999px;padding:6px 14px}
.vsf .vsf-pay-n{font-size:12.5px;color:rgba(255,255,255,.55)}
.vsf .vsf-pay-n i{font-style:italic}
/* — le légal — */
.vsf .vsf-legal{padding:18px 0 26px;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:10px}
.vsf .vsf-legalnav{display:flex;flex-wrap:wrap;gap:6px 0;margin:0;padding:0;list-style:none}
.vsf .vsf-legalnav a{font-size:12px;color:rgba(255,255,255,.48);transition:color .15s}
.vsf .vsf-legalnav a:hover{color:#fff}
.vsf .vsf-legalnav li{display:inline-flex;align-items:center}
.vsf .vsf-legalnav li+li::before{content:"·";margin:0 9px;color:rgba(255,255,255,.28)}
.vsf .vsf-id{margin:0;font-size:12px;color:rgba(255,255,255,.42);overflow-wrap:anywhere}
/* — tablette et téléphone — */
@media(max-width:1023px){.vsf .vsf-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px clamp(24px,5vw,56px)}.vsf .vsf-store{grid-column:1/-1;max-width:520px}}
@media(max-width:560px){
  .vsf .vsf-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:40px}
  .vsf .vsf-col-services{grid-column:1/-1}
  .vsf .vsf-col-services .vsf-links{grid-template-columns:1fr 1fr}
  .vsf .vsf-pay{gap:10px 14px}
  .vsf .vsf-legalnav li+li::before{margin:0 7px}
}
@media(prefers-reduced-motion:reduce){#masthead *,.vsf *{transition:none!important}}