der-nav.osl-utility-bar .osl-mobile-nav{ min-height: 70px !important; }



html body#index.osl-header-compact #header nav.header-nav.osl-utility-bar .osl-mobile-brand__name,



  html body#index.osl-header-compact #header nav.header-nav.osl-utility-bar .osl-mobile-brand__tagline,



  html body#index.osl-header-compact #header nav.header-nav.osl-utility-bar .osl-mobile-actions .osl-mobile-icon,



  html body#index.osl-header-compact #header nav.header-nav.osl-utility-bar .osl-mobile-actions .osl-line-icon,



  html body#index.osl-header-compact #header nav.header-nav.osl-utility-bar .osl-mobile-actions #menu-icon,



  html body#index.osl-header-compact #header nav.header-nav.osl-utility-bar .osl-mobile-actions #menu-icon .material-icons{ color: var(--osl-green) !important; }



html body#index #header #mobile_top_menu_wrapper{ box-shadow: none !important; }



html body#index #header #mobile_top_menu_wrapper .js-top-menu-bottom{ display: block !important; }





}



/* Le tiroir ordinateur utilise une copie sémantique des liens natifs,



   sans déplacer le menu que Classic gère sur téléphone. */

body.osl-immersive-drawer-open{ overflow: hidden; }



dialog.osl-immersive-drawer{ position: fixed; inset: 0 auto 0 0; width: min(440px,100%); max-width: 100%; height: 100%; height: 100dvh; max-height: 100%; margin: 0; padding: 24px 32px; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0; color: var(--osl-green); background: var(--osl-paper); box-shadow: none; }



dialog.osl-immersive-drawer::backdrop{ background: rgba(24,34,29,.45); }



.osl-immersive-drawer__top{ display: flex; align-items: center; justify-content: space-between; gap: 20px; }



.osl-immersive-drawer__top > span{ font: 12px Arial,sans-serif; letter-spacing: .16em; color: var(--osl-coral); }



.osl-immersive-drawer__close{ width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; }



.osl-immersive-drawer h2{ margin: 24px 0; color: inherit; font: 400 32px/1.2 Georgia,serif; text-transform: none; }



.osl-immersive-drawer details{ border-bottom: 1px solid var(--osl-line); }



.osl-immersive-drawer summary{ display: flex; align-items: center; justify-content: space-between; min-height: 54px; list-style: none; color: inherit; font: 20px/1.35 Georgia,serif; cursor: pointer; }



.osl-immersive-drawer summary::-webkit-details-marker{ display: none; }



.osl-immersive-drawer summary::after{ content: "+"; font: 20px Arial,sans-serif; }



.osl-immersive-drawer details[open] > summary::after{ content: "−"; }



.osl-immersive-drawer__links{ padding: 0 0 16px 12px; }



.osl-immersive-drawer__links a, .osl-immersive-drawer__links > span{ display: block; min-height: 40px; padding: 9px 0; color: var(--osl-green); font: 14px/1.5 Arial,sans-serif; }



.osl-immersive-drawer__links > span{ color: var(--osl-muted-alt); }



.osl-immersive-drawer__links p{ margin: 15px 0 5px; color: var(--osl-coral); font: 12px/1.5 Arial,sans-serif; letter-spacing: .06em; text-transform: uppercase; }



.osl-immersive-drawer__useful{ display: grid; gap: 2px; margin-top: 20px; }



.osl-immersive-drawer__useful a{ display: flex; align-items: center; min-height: 44px; color: var(--osl-green); font-size: 14px; }



.osl-immersive-drawer a:hover{ color: var(--osl-coral); }



.osl-immersive-drawer :focus-visible{ outline: 2px solid var(--osl-terracotta); outline-offset: 3px; }



@media (prefers-reduced-motion: reduce){

html body#index #header, html body#index #header *{ transition: none !important; }

}









/* Étape 11.1 — recherche, compte et panier : dessins blancs sur le hero,



   foncés dans le header compact. Neutralise la couleur propre des spans. */

html body#index #header{



  --osl-header-action-color: var(--osl-white);



}



html body#index.osl-header-compact #header{



  --osl-header-action-color: var(--osl-green);



}



html body#index #header .osl-header-actions a.osl-action-icon,



html body#index #header .osl-header-actions a.osl-action-icon .osl-line-icon,



html body#index #header nav.header-nav.osl-utility-bar .osl-mobile-actions a.osl-mobile-icon,



html body#index #header nav.header-nav.osl-utility-bar .osl-mobile-actions a.osl-mobile-icon .osl-line-icon{



  color: var(--osl-header-action-color) !important;



  -webkit-text-fill-color: currentColor !important;



}









/* Étape 20 — Nos boutiques / Pros : couleurs adaptées au fond du header. */

html body#index #header a.osl-home-header-link,



html body #header nav.header-nav.osl-utility-bar a.osl-stores-link,



html body #header nav.header-nav.osl-utility-bar a.osl-pro-link,



html body #header nav.header-nav.osl-utility-bar a.osl-mobile-pro-link{



  color: #ffc6b7 !important;



}



html body#index.osl-header-compact #header a.osl-home-header-link,



html body#index #header #mobile_top_menu_wrapper .osl-home-mobile-useful-links a,



html body dialog.osl-immersive-drawer .osl-immersive-drawer__useful a{



  color: var(--osl-error) !important;



}









/* Étape 21 — logos officiels : conserver les couleurs des PNG, point corail compris. */

html body #header .osl-logo-mark img[data-osl-header-logo],



html body #header img.osl-mobile-brand__mark[data-osl-header-logo]{



  filter: none !important;



  object-fit: contain;



}



html body #header img[data-osl-header-logo="light"]{ display: none !important; }



html body #header img[data-osl-header-logo="dark"],html body#index:not(.osl-header-compact) #header img[data-osl-header-logo="light"]{ display: block !important; }



html body#index:not(.osl-header-compact) #header img[data-osl-header-logo="dark"]{ display: none !important; }









/* ================================================================



   Correctif header 22/09/2026 — Nos boutiques blanc + séparateur avant Pros



   Accueil desktop uniquement. Conserve le comportement compact existant.



   ================================================================ */

@media (min-width: 768px){



  /* Sur le hero : Boutiques blanc, Pros corail */

html body#index:not(.osl-header-compact) #header .osl-header-actions > a.osl-home-header-link:first-of-type{



    color: var(--osl-paper) !important;



    -webkit-text-fill-color: currentColor !important;



  }



html body#index:not(.osl-header-compact) #header .osl-header-actions > a.osl-home-header-link + a.osl-home-header-link{



    position: relative;



    margin-left: 0 !important;



    padding-left: 18px !important;



    color: #ffc6b7 !important;



    -webkit-text-fill-color: currentColor !important;



  }









  /* Trait vertical ENTRE Nos boutiques et Pros */

html body#index:not(.osl-header-compact) #header .osl-header-actions > a.osl-home-header-link + a.osl-home-header-link::before{



    content: "";



    position: absolute;



    left: 0;



    top: 50%;



    width: 1px;



    height: 18px;



    background: rgba(255, 255, 255, 0.65);



    transform: translateY(-50%);



    pointer-events: none;



  }









  /* Header compact sur fond clair : conserver une bonne lisibilité */

html body#index.osl-header-compact #header .osl-header-actions > a.osl-home-header-link:first-of-type,



  html body#index.osl-header-compact #header .osl-header-actions > a.osl-home-header-link + a.osl-home-header-link{



    color: var(--osl-error) !important;



    -webkit-text-fill-color: currentColor !important;



  }



html body#index.osl-header-compact #header .osl-header-actions > a.osl-home-header-link + a.osl-home-header-link{



    position: relative;



    padding-left: 18px !important;



  }



html body#index.osl-header-compact #header .osl-header-actions > a.osl-home-header-link + a.osl-home-header-link::before{



    content: "";



    position: absolute;



    left: 0;



    top: 50%;



    width: 1px;



    height: 18px;



    background: rgba(198, 56, 50, 0.45);



    transform: translateY(-50%);



    pointer-events: none;



  }

}









/* OSL — présentation commune du module de réassurance. */

.osl-reassurance-link{cursor:pointer}



.osl-reassurance-colors .block-title,



.osl-reassurance-colors .osl-reassurance-description{color:var(--osl-reassurance-text)}







/* Texte de consentement et ancienne mise en forme éditoriale produit. */

.psgdpr_consent_message .osl-consent-text{color:var(--osl-control-muted)}



.product-description .osl-product-legacy-copy{color:var(--osl-ink);font-family:Roboto, sans-serif;font-size:12px}





/* White stores link on every inner page; homepage retains its own styling. */

html body:not(#index) #header nav.header-nav.osl-utility-bar a.osl-stores-link,

html body:not(#index) #header nav.header-nav.osl-utility-bar a.osl-stores-link:hover,

html body:not(#index) #header nav.header-nav.osl-utility-bar a.osl-stores-link:focus{

  color:var(--osl-white)!important;

}



#osl-search-dialog{border:1px solid var(--osl-line);background:var(--osl-paper);color:var(--osl-green);width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:48px 40px;box-sizing:border-box;}



#osl-search-dialog::backdrop{background:rgba(30,39,33,.5);}



#osl-search-dialog h2{margin:0 0 28px;}



#osl-search-dialog label{display:block;font-size:13px;margin-bottom:12px;}



#osl-search-dialog .osl-search-close{position:absolute;right:15px;top:8px;border:0;cursor:pointer;}



#osl-search-dialog .osl-search-input-row{display:flex;gap:10px;}



#osl-search-dialog input[type=search]{min-width:0;flex:1;border:1px solid var(--osl-line);background:white;padding:14px;font-size:14px;color:var(--osl-green);}



#osl-search-dialog button[type=submit]{border:0;padding:14px 20px;cursor:pointer;}



#osl-search-dialog :focus-visible{outline:2px solid var(--osl-green);outline-offset:3px;}



@media(max-width:767px){

#osl-search-dialog{padding:42px 22px 28px;}



#osl-search-dialog .osl-search-input-row{flex-direction:column;}

}



html body #footer{background:var(--osl-green-dark)!important;}



html body#index .osl-home-hero .osl-home-hero__round-link{background:var(--osl-green-dark)!important;border-color:var(--osl-green-dark)!important;color:var(--osl-paper)!important;}



html body #footer .osl-site-footer{background:var(--osl-green-dark)!important;}



html body#index .osl-home-hero .osl-home-hero__round-link:hover,html body#index .osl-home-hero .osl-home-hero__round-link:focus{background:var(--osl-green-dark)!important;border-color:var(--osl-green-dark)!important;color:var(--osl-paper)!important;}



.osl-service-article img{max-width:100%;height:auto;}



.osl-service-article :is(ul,ol){padding-left:22px;margin:20px 0 28px;}



.osl-service-page .osl-home-newsletter{margin:0;}


/* Mobile navigation: let the utility strip include the brand row. */
@media (max-width: 767.98px) {
  html body #header nav.header-nav.osl-utility-bar { height: auto; max-height: none; }
}

/* One wrapping rule for native and editorial mobile breadcrumbs. */
@media (max-width: 767.98px) {
  html body:not(#cart):not(#checkout):not(#index) nav:is(.breadcrumb,.osl-breadcrumb-trail,.osl-guide-breadcrumb,.oslpartner-breadcrumb) { display: block; height: auto; max-height: none; white-space: normal; overflow: visible; }
  html body:not(#cart):not(#checkout) nav:is(.breadcrumb,.osl-breadcrumb-trail,.osl-guide-breadcrumb,.oslpartner-breadcrumb) ol { display: block; margin: 0; padding: 0; white-space: normal; }
  html body:not(#cart):not(#checkout) nav:is(.breadcrumb,.osl-breadcrumb-trail,.osl-guide-breadcrumb,.oslpartner-breadcrumb) li { display: inline; white-space: normal; }
  html body:not(#cart):not(#checkout) nav:is(.breadcrumb,.osl-breadcrumb-trail,.osl-guide-breadcrumb,.oslpartner-breadcrumb) :is(a,span) { white-space: normal; overflow-wrap: anywhere; }
  html body:not(#cart):not(#checkout):not(#index) nav.breadcrumb { margin-bottom: 0; padding: 0 0 18px; background: none; }
}

/* Shared catalog pagination layout, preserving native AJAX links. */
html body nav.osl-pagination { display: flex; flex-direction: column; align-items: center; gap: 20px; clear: both; margin: 38px 0 10px; padding: 26px 0 8px; }
html body nav.osl-pagination > div { float: none; width: auto; max-width: 100%; margin: 0; padding: 0; }
html body nav.osl-pagination .page-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 0; }
html body nav.osl-pagination .page-list::after { display: none; }
html body nav.osl-pagination .page-list li { display: block; float: none; padding: 0; margin: 0; }
html body nav.osl-pagination .page-list :is(a,.spacer) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 44px; height: 44px; margin: 0; padding: 0 12px; }
html body nav.osl-pagination .page-list a:is(.previous,.next) { padding-inline: 20px; }
@media (max-width: 575.98px) {
 html body nav.osl-pagination { gap: 16px; margin-top: 26px; padding-top: 22px; }
 html body nav.osl-pagination .page-list { gap: 6px; }
 html body nav.osl-pagination .page-list a:is(.previous,.next) { min-width: 44px; padding-inline: 12px; }
 html body nav.osl-pagination .osl-pagination__direction { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Shared mobile validation actions. Integrated field controls stay in place. */
@media (max-width:767.98px){
 html body form .form-footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;text-align:center;}
 html body form .form-footer::after{display:none;}
 html body#password .forgotten-password .center-email-fields button[type="submit"]{margin:10px auto;max-width:100%;}
}

/* Layout only for native account and empty catalogue destinations. */
html body.page-customer-account #main .page-footer{
 display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:28px;
}
html body#my-account #main .links{display:flex;flex-wrap:wrap;align-items:stretch;}
html body#my-account #main .links>a{display:flex;margin-bottom:24px;}
html body#my-account #main .links a .link-item{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:14px;width:100%;min-height:146px;padding:24px 20px;
}
html body#my-account #main .links a .link-item i{display:block;padding:0;}
html body:is(#new-products,#prices-drop) #main .page-not-found{
 max-width:760px;width:100%;margin:32px auto 56px;padding:40px 32px;
}
html body:is(#new-products,#prices-drop) #main .page-not-found #search_widget{
 width:100%;max-width:480px;margin:24px auto 0;
}
@media(max-width:767.98px){
 html body.page-customer-account #main .page-footer{justify-content:center;}
 html body#my-account #main .links a .link-item{min-height:120px;padding:22px 16px;}
 html body:is(#new-products,#prices-drop) #main .page-not-found{padding:28px 20px;margin:24px auto 36px;}
}

@media(max-width:767.98px){
 html body:is(#new-products,#prices-drop) #wrapper>.container{display:flex;flex-direction:column;}
 html body:is(#new-products,#prices-drop) #left-column{order:2;}
 html body:is(#new-products,#prices-drop) #content-wrapper{order:1;}
}

/* Optional hero content, including links with their own display rules. */
html body .osl-home-hero [hidden]{display:none;}

/* Page de confidentialité : disposition uniquement, typographie dans le design system. */
.osl-service-page.osl-legal-page .osl-service-photo-hero{min-height:300px;height:38svh;max-height:420px}
.osl-legal-page .osl-service-layout{max-width:1280px;grid-template-columns:210px minmax(0,1fr);gap:48px;padding-top:44px}
:is(.osl-privacy-overview,.osl-privacy-cookie-info,.osl-legal-overview,.osl-legal-box){padding:26px;margin-bottom:32px;border:1px solid var(--osl-line);background:var(--osl-frame-muted)}
.osl-legal-page .osl-service-article :is(.osl-privacy-actions,.osl-legal-actions){display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.osl-legal-page .osl-service-article :is(.osl-privacy-actions,.osl-legal-actions) a{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.osl-privacy-uses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.osl-privacy-use{padding:20px;border:1px solid var(--osl-line);background:var(--osl-paper)}
.osl-legal-page .osl-service-article .osl-privacy-use h3{margin:0 0 14px}
.osl-legal-page .osl-service-article .osl-privacy-use p{margin-bottom:10px}
.osl-legal-page .osl-service-article .osl-privacy-use p:last-child{margin-bottom:0}
.osl-privacy-retention{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2.3fr);margin:22px 0;border:1px solid var(--osl-line)}
.osl-privacy-retention dt,.osl-privacy-retention dd{padding:18px;margin:0;border-bottom:1px solid var(--osl-line)}
.osl-privacy-retention dt{background:var(--osl-frame-muted)}
.osl-privacy-retention dt:last-of-type,.osl-privacy-retention dd:last-child{border-bottom:0}
.osl-legal-page .osl-service-article :is(h2,h3){scroll-margin-top:30px}
@media(max-width:900px){.osl-legal-page .osl-service-layout{grid-template-columns:170px minmax(0,1fr);gap:28px}.osl-privacy-uses{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.osl-service-page.osl-legal-page .osl-service-photo-hero{min-height:260px;height:42svh;max-height:340px}.osl-legal-page .osl-service-layout{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 20px 50px}.osl-legal-page .osl-service-nav .osl-service-legal-links{display:none}.osl-legal-page .osl-service-nav [data-osl-service-toc]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}:is(.osl-privacy-overview,.osl-privacy-cookie-info,.osl-legal-overview,.osl-legal-box){padding:20px}.osl-privacy-retention{grid-template-columns:minmax(0,1fr)}.osl-privacy-retention dt{padding:14px 16px 6px;border-bottom:0}.osl-privacy-retention dd{padding:0 16px 16px;background:var(--osl-frame-muted)}.osl-legal-page .osl-service-article :is(.osl-privacy-actions,.osl-legal-actions) a{width:100%}}

/* Informations légales et CGV : disposition, sans surcharge des boutons communs. */
.osl-legal-facts{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2fr);margin:24px 0;border:1px solid var(--osl-line)}
.osl-legal-facts dt,.osl-legal-facts dd{padding:16px;margin:0;border-bottom:1px solid var(--osl-line);overflow-wrap:anywhere}
.osl-legal-facts dt{background:var(--osl-frame-muted)}
.osl-legal-facts dt:last-of-type,.osl-legal-facts dd:last-child{border-bottom:0}
.osl-legal-funding{margin:24px 0}.osl-legal-funding img{display:block;max-width:100%;height:auto}
.osl-legal-model p:last-child{margin-bottom:0}
@media(max-width:600px){.osl-legal-facts{grid-template-columns:minmax(0,1fr)}.osl-legal-facts dt{padding:14px 16px 6px;border-bottom:0}.osl-legal-facts dd{padding:0 16px 16px;background:var(--osl-frame-muted)}}