/* Simon Bureau - custom.css */
/* Surcharge du theme hummingbird */

/* Fonts */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-v13-latin/barlow-v13-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-v13-latin/barlow-v13-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-v13-latin/barlow-v13-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-Semi-condensed/BarlowSemiCondensed-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-Semi-condensed/BarlowSemiCondensed-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-Semi-condensed/BarlowSemiCondensed-SemiBold.woff2') format('woff2');
}


@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-Semi-condensed/BarlowSemiCondensed-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-Semi-condensed/BarlowSemiCondensed-Medium.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-Semi-condensed/BarlowSemiCondensed-SemiBold.woff2') format('woff2');
}



/* Variables */

:root {
  --vert:        #03A588;
  --vert-dark:   #027a65;
  --vert-light:  #e8f7f4;
  --noir:        #1a1a1a;
  --gris-top:    #f8f8f8;
  --gris-border: #e2e2e2;
  --gris-texte:  #555555;
  --blanc:       #ffffff;
  --beige:       #f7f5f0;

  --font-titre:  'Barlow', sans-serif;
  --font-corps:  'Open Sans', sans-serif;

  --max:         1200px;
  --radius:      4px;
}

/* Base */

body {
  font-family: var(--font-corps) !important;
  color: var(--noir);
}

#header {
  font-family: var(--font-titre) !important;
}

a:hover {
  color: var(--vert);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titre);
}

/* Header - container */

@media screen and (min-width: 1600px) {
  .header-bottom__container {
    min-width: 1600px;
  }
}

/* Header - barre top */

.header-top {
  background: var(--gris-top) !important;
  border: none;
  padding: 8px 0 !important;
  font-size: .75rem;
}

.header-top a {
  text-decoration: none;
}

/* Showroom gauche */

.sb-top-left {
  align-items: center;
  font-family: var(--font-titre);
  font-size: 14px;
  color: #000;
}

.sb-top-left svg {
  flex-shrink: 0;
  position: relative;
  top: -1px;
}

.sb-showroom {
  color: var(--vert) !important;
  font-weight: 600;
}

.sb-showroom:hover {
  color: var(--vert-dark) !important;
}

/* Email + tel droite */

.sb-top-right {
  align-items: center;
}

.sb-mail {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #000 !important;
}

.sb-tel {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--vert) !important;
}

.sb-mail:hover {
  color: var(--vert) !important;
}


/* Header - barre principale */

#_desktop_ps_customersignin,
#_desktop_ps_shoppingcart {
  display: none !important;
}

#_desktop_ps_searchbar {
  width: 100% !important;
  position: relative;
  z-index: 20000;
}

.ps-searchbar,
.ps-searchbar__form {
  width: 100% !important;
  position: relative;
}

.header-bottom {
  background: var(--blanc);
  border-bottom: none;
  margin-top: 18px;
  margin-bottom: 4px;
}

.sb-search {
  flex: 0 0 auto;
  width: 41.66666667%;
  order: 2;
}

.sb-userinfo {
  flex: 0 0 auto;
  width: 33.33333333%;
  order: 3;
}

.sb-logo {
  flex: 0 0 auto;
  width: 25%;
}

a.navbar-brand.d-block {
  max-width: 100% !important;
}

img.logo {
  max-width: 100% !important;
}

.header-bottom .header-bottom__logo img {
  height: 51px !important;
  width: 316px !important;
}

/* Mon compte + Panier devis */

.mod.userinfo {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #000;
  font-family: var(--font-corps);
}

.mod.userinfo a {
  width: 50%;
  gap: 10px;
  display: flex;
  align-items: center;
  color: #000;
  text-decoration: none;
  font-size: 13px;
}

.mod.userinfo a.panier::before,
.mod.userinfo a.user::before {
  content: " ";
  display: inline-block;
  height: 48px;
  width: 48px;
  background-color: #fff;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 100px;
  border: 2px solid #03a588;
  flex-shrink: 0;
}

.mod.userinfo a.user::before {
  background-image: url('../img/ico_user.png');
}

.mod.userinfo a.panier::before {
  background-image: url('../img/ico_cart.png');
}

.mod.userinfo a b {
  display: block;
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-titre);
  line-height: 1.2;
}

.mod.userinfo a span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--gris-texte);
  line-height: 1.2;
}

/* Barre de recherche */

.ps-searchbar__magnifier {
  position: absolute;
  top: 50%;
  right: .75rem !important;
  left: auto !important;
  transform: translateY(-50%);
  padding: 0;
  background: none;
  border: none;
  color: var(--vert) !important;
  cursor: pointer;
  z-index: 2;
}

/* Croix "clear" native masquee : elle se superposait a la loupe en tapant */
.ps-searchbar__clear {
  display: none !important;
}

.ps-searchbar__input {
  width: 100% !important;
  height: 50px !important;
  border-radius: 24px !important;
  border-color: #dedede !important;
  padding-left: 30px !important;
  padding-right: 185px !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

/* Selecteur de perimetre "Dans tout le site" */

.sb-scope {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
}

.sb-scope__toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 0 0 12px;
  font-family: var(--font-corps);
  font-size: 13px;
  color: #000;
  background: none;
  border: none;
  border-left: 1px solid #dedede;
  cursor: pointer;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
}

.sb-scope__toggle:hover {
  color: var(--vert);
}

.sb-scope__caret {
  font-size: 18px;
  color: #555;
  transition: transform .15s ease;
}

.sb-scope__toggle[aria-expanded="true"] .sb-scope__caret {
  transform: rotate(180deg);
}

.sb-scope__menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--blanc);
  border: 1px solid #dedede;
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  z-index: 100000;
}

.sb-scope__menu.is-open {
  display: block;
}

.sb-scope__menu li {
  margin: 0;
}

.sb-scope__menu a {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  color: #282828;
  text-decoration: none;
  white-space: nowrap;
}

.sb-scope__menu a:hover {
  color: var(--vert);
  background: var(--vert-light);
}

/* ===================================================================
   Page resultats (recherche.html) — cards calquees sur la home
   =================================================================== */

.sb-recherche {
  padding: 24px 0 48px;
}

.sb-recherche__compte {
  margin-bottom: 24px;
  font-family: var(--font-corps);
  font-size: 14px;
  color: var(--gris-texte);
}

.sb-recherche__item {
  margin-bottom: 19px;
}

/* Carte produit */
.sb-recherche__lien {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 24px 12px;
  background: var(--blanc);
  border: 1px solid #dedede;
  border-radius: 24px;
  text-align: center;
  text-decoration: none;
}

.sb-recherche__lien:hover {
  text-decoration: none;
}

/* Photo : zone fixe, image RECADREE pour remplir le cadre bord a bord
   (comme la prod). Avant : l'image gardait sa taille naturelle et se
   centrait, laissant un vide au-dessus/en dessous ou le badge flottait. */
.sb-recherche__photo {
  position: relative;
  height: 270px;
  margin-bottom: 16px;
  overflow: hidden;
}

/* Pastille pourcentage, coin haut-droit (recette prod .produits_extraits .remise) */
.sb-recherche__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 7px 8px;
  color: #fff;
  font-weight: bold;
  background: #b407df;
  border-radius: 9px;
}

.sb-recherche__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sous 990px (cartes etroites, 2 par ligne) : hauteur fixe 270px trop haute
   proportionnellement, effet "gratte-ciel". La bible repasse en hauteur
   naturelle a cette largeur (photo plus courte, proportionnelle a la carte). */
@media (max-width: 990px) {
  .sb-recherche__photo {
    height: auto;
    overflow: visible;
  }
  .sb-recherche__img {
    height: auto;
    object-fit: initial;
  }
}

.sb-recherche__nom {
  min-height: 35px;
  margin: 0 0 10px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  text-transform: uppercase;
  color: #282828;
}

.sb-recherche__prix {
  margin: 0 0 8px;
}

/* Prix barre (ancien prix) mauve (recette prod .txt_barre) */
.sb-recherche__old {
  color: #b407df;
  font-size: 14px;
  text-decoration: line-through;
}

/* Prix remise noir, mis en avant (recette prod .gPrix) */
.sb-recherche__now {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #282828;
  white-space: nowrap;
}

/* "a partir de" : libelle fin gris, non gras (comme .produits_extraits .prix .from prod) */
.sb-recherche__from {
  font-size: 14px;
  font-weight: 400;
  color: #959595;
}

.sb-recherche__stock {
  margin: 0 0 12px;
  font-family: var(--font-corps);
  font-size: 14px;
  color: var(--gris-texte);
}

/* Quantite minimale remise ("a partir de 2") : gris discret, jamais le bleu
   de lien par defaut (span sans couleur herite de <a>). */
.sb-recherche__des {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #959595;
}

/* "Voir le detail" : barre basse, separateur + chevron vert (comme le prod) */
.sb-recherche__detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding: 16px 0 4px;
  border-top: 1px solid #dedede;
  font-family: var(--font-corps);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  color: #000;
}

.sb-recherche__detail::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.999998 13L7 7L1 1" stroke="%2303A588" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.sb-recherche__lien:hover .sb-recherche__detail {
  color: var(--vert);
}

.sb-recherche__vide {
  padding: 48px 0;
  font-size: 16px;
  color: var(--gris-texte);
}

/* Navigation */

.header-nav-full-width {
  background: var(--blanc);
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.header-nav-full-width .container-md {
  display: flex;
  align-items: stretch;
  padding: 0 !important;
}

.header-nav-full-width .ps-mainmenu--desktop {
  flex: 1 1 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Picto maison */

.sb-nav-home {
  display: flex;
  align-items: stretch;
}

.sb-nav-home__link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  text-decoration: none !important;
  height: 53px;
}

.sb-nav-home__link .material-icons {
  font-size: 24px;
  color: #000;
}

.sb-nav-home__link:hover .material-icons,
.sb-nav-home__link.active .material-icons {
  color: #fff;
}

.sb-nav-home__link:hover,
.sb-nav-home__link.active {
  background: var(--vert);
}

/* Liens nav */

.header-nav-full-width .ps-mainmenu__tree-link {
  color: #000 !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  height: 53px !important;
  line-height: 53px !important;
  padding: 0 13px !important;
  display: block !important;
}

.header-nav-full-width .ps-mainmenu__tree-link:hover {
  background: var(--vert) !important;
  color: #fff !important;
}

/* Suppression outline natif au clic sur les liens du menu */

.header-nav-full-width .ps-mainmenu__tree-link:focus,
.header-nav-full-width .ps-mainmenu__tree-link:active,
.header-nav-full-width .ps-mainmenu__tree-dropdown-toggle:focus,
.header-nav-full-width .ps-mainmenu__tree-dropdown-toggle:active,
.sb-nav-home__link:focus,
.sb-nav-home__link:active {
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Item actif - toutes les variantes PS9 */

.header-nav-full-width .ps-mainmenu__tree-item--current > .ps-mainmenu__tree-link,
.header-nav-full-width .ps-mainmenu__tree-item.current > .ps-mainmenu__tree-link,
.header-nav-full-width .ps-mainmenu__tree-item.active > .ps-mainmenu__tree-link,
.header-nav-full-width .ps-mainmenu__tree-item.selected > .ps-mainmenu__tree-link,
.header-nav-full-width .ps-mainmenu__tree-item.is-active > .ps-mainmenu__tree-link,
.header-nav-full-width .ps-mainmenu__tree-link.active,
.header-nav-full-width .ps-mainmenu__tree-link.current,
.header-nav-full-width .ps-mainmenu__tree-link[aria-current] {
  background: var(--vert) !important;
  color: #fff !important;
}

/* Fleche dropdown */

.header-nav-full-width .ps-mainmenu__tree-item-wrapper {
  display: flex;
  align-items: center;
  height: 53px;
}

.header-nav-full-width .ps-mainmenu__tree-dropdown-toggle {
  background: none;
  border: none;
  padding: 0 6px 0 0;
  color: var(--vert);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.header-nav-full-width .ps-mainmenu__tree-dropdown-toggle::after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--vert);
}

/* Reassurance */

.sb-reassurance {
  background: #03a588;
  color: #fff;
  text-align: center;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 600;
  padding: 10px;
}

/* Bandeau "Texte deroulant" (marquee) : fil d'infos continu en CSS pur, 1 a N blocs.
   Le GROUPE complet des blocs actifs est sorti DEUX fois dans displaySbReassurance.tpl ;
   l'animation translate de 0 a -50% (donc d'exactement un groupe) pour une boucle sans
   couture. CHAQUE ITEM occupe au moins la largeur du bandeau (100cqw) : les textes
   defilent donc UN PAR UN (le suivant n'entre par la droite que quand le precedent sort
   par la gauche), quel que soit le nombre de blocs (1, 2, 3, N), sans rien recalculer.
   Hauteur figee sur une seule ligne (le contenu BO, parfois enveloppe dans un <p>, ne
   peut plus agrandir le bandeau). */
.sb-marquee {
  overflow: hidden;
  container-type: inline-size;   /* base de reference pour 100cqw (largeur du bandeau) */
}

.sb-marquee__track {
  display: inline-flex;
  will-change: transform;
  animation: sb-marquee 22s linear infinite;
}

.sb-marquee__group {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.sb-marquee__item {
  display: inline-flex;          /* indispensable : un <span> est inline -> min-width sans effet */
  align-items: center;           /* contenu sur UNE ligne, centre verticalement (hauteur figee) */
  min-width: 100cqw;             /* chaque texte occupe une largeur de bande -> defilement un par un */
  white-space: nowrap;
  padding-right: 4rem;           /* espace apres chaque texte (separation) */
}

/* Contenu saisi au BO souvent enveloppe dans un <p> : on neutralise ses marges et on
   le garde sur une seule ligne, sinon le bandeau s'agrandit en hauteur. */
.sb-marquee__item > * {
  margin: 0;
  line-height: 1.4;
}

.sb-marquee:hover .sb-marquee__track {
  animation-play-state: paused;
}

@keyframes sb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Boutons */

.btn-primary,
.btn.btn-primary {
  background-color: var(--vert) !important;
  border-color: var(--vert) !important;
  font-family: var(--font-titre);
  font-weight: 600;
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--vert-dark) !important;
  border-color: var(--vert-dark) !important;
}

/* Produits - cards */

.product-miniature .product-title a {
  font-family: var(--font-titre);
  font-weight: 600;
  color: var(--noir);
}

.product-miniature .price {
  color: var(--vert);
  font-family: var(--font-titre);
  font-weight: 700;
}

/* Footer - reproduction prod (newsletter + 4 colonnes + bandeau noir) */

/* 0. Conteneurs : newsletter colle au contenu et aux colonnes, */
/*    le fond du theme parent (.footer) ne doit pas laisser de bande */

.l-footer {
  margin-top: 0;
  padding-top: 0;
}

/* Cote contenu : dernier bloc home colle au footer (pas de bande blanche).
   Scope #index = home uniquement, les autres pages gardent leur espace. */
#index #wrapper,
#index #content-wrapper,
#index #main,
#index #center-column {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Fiche produit : meme traitement (le bloc "conseille egalement" full-bleed
   doit toucher la newsletter, sans blanc residuel du conteneur). */
#product #wrapper,
#product #content-wrapper,
#product #main,
#product #center-column {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#newsletter,
#footer,
.footer__before,
.footer__main {
  margin: 0;
}

#footer,
.footer__main {
  padding: 0;
  background: transparent;
}

/* 1. Newsletter (bandeau teal - displayFooterBefore) */

#newsletter {
  padding: 40px 0;
  color: var(--blanc);
  background: var(--vert);
}

#newsletter .row {
  align-items: center;
}

#newsletter .footer-titre {
  display: block;
  margin: 0;
  line-height: 42px;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 48px;
  font-weight: 400;
}

#newsletter .footer-subtitre {
  font-size: 14px;
}

#newsletter .input-group {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--blanc);
  border-radius: 36px;
}

#newsletter .input-group .form-control {
  flex: 1;
  padding: 12px 15px;
  border: none;
}

#newsletter .input-group-btn button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  background: none;
  border: none;
  cursor: pointer;
}

#newsletter .newsletter-msg {
  margin: 0 0 10px;
  font-size: 14px;
}

#newsletter .newsletter-msg--error {
  color: #8c161b;
}

#newsletter .control-label {
  margin: 0;
}

#newsletter form .row {
  align-items: center;
}

#newsletter .reseaux {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

/* 2. Colonnes (#footer_2 - displayFooter / simon_content) */

#footer_2 {
  padding: 72px 0 36px;
  color: #000;
  background: var(--gris-top);
}

#footer_2 a {
  color: #000;
}

#footer_2 a:hover {
  color: var(--vert);
}

#footer_2 .footer-titre {
  display: block;
  margin-bottom: 7px;
  color: #0e7361;
  font-family: 'Barlow', sans-serif;
  font-size: 28px;
  font-weight: 600;
}

/* 2a. Colonne adresse (col_txt) : logo en tete + texte + icones */

#footer_2 .col_txt .logo {
  display: block;
  max-width: 220px;
  height: auto;
  margin-bottom: 24px;
}

#footer_2 .col_txt .bloc_texte p {
  margin: 0 0 12px;
  font-size: 14px;
}

#footer_2 .col_txt .bloc_texte a {
  color: #000;
  font-weight: 700;
}

#footer_2 .col_txt .ico::before {
  font-family: 'Glyphicons Halflings Regular';
  font-weight: normal;
  font-style: normal;
  margin-right: 8px;
  color: #0e7361;
  vertical-align: -1px;
  -webkit-font-smoothing: antialiased;
}

#footer_2 .col_txt .ico.earphone::before { content: "\e145"; }
#footer_2 .col_txt .ico.envelope::before { content: "\2709"; }
#footer_2 .col_txt .ico.globe::before    { content: "\e135"; }
#footer_2 .col_txt .ico.log_book::before { content: "\e043"; }

/* 2b. Colonnes liens ps_linklist (rendues par simon_order) - markup Hummingbird footer-block */

#footer_2 .footer-block {
  margin-top: 0;
}

#footer_2 .footer-block__title {
  display: block;
  padding: 0;
  margin-bottom: 7px;
  color: #0e7361;
  font-family: 'Barlow', sans-serif;
  font-size: 28px;
  font-weight: 600;
}

#footer_2 .footer-block__title .material-icons {
  color: #0e7361;
}

#footer_2 .footer-block__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer_2 .footer-block__list li {
  position: relative;
  padding-left: 16px;
  margin: 0 0 2px;
  line-height: 1.4;
}

#footer_2 .footer-block__list a {
  display: inline;
  padding: 0;
}

#footer_2 .footer-block__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 1.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1 1L6.5 6.5L1 12' stroke='%2303A588' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
}

#footer_2 .footer-block__list a {
  color: #000;
  font-size: 14px;
}

#footer_2 .footer-block__list a:hover {
  color: var(--vert);
  text-decoration: none;
}

/* 3. Bandeau noir (#footer_3 - copyright + retour haut) */

#footer_3 {
  padding: 20px 0;
  background: #000;
}

#footer_3 .container {
  position: relative;
}

#footer_3 .footer__copyright {
  margin: 0;
  color: #f7f7f7;
  font-size: 14px;
}

#footer_3 .footer__copyright .cr-simon {
  color: var(--vert);
  font-weight: 700;
}

#footer_3 .footer__copyright .cr-bureau {
  color: #fff;
  font-weight: 700;
}

#footer_3 .footer__copyright .cr-seosyl {
  color: var(--vert);
  text-decoration: none;
}

#footer_3 .footer__top {
  position: absolute;
  top: -13px;
  right: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: var(--vert);
}

#footer_3 .footer__top::before {
  content: "\e113";
  font-family: 'Glyphicons Halflings Regular';
  color: var(--blanc);
}



/* ============================================================
   DROPDOWN SOUS-MENU MULTI-COLONNES
   ============================================================ */

/* Menu principal horizontal */

.ps-mainmenu--desktop .ps-mainmenu__tree {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Item de niveau 0 */

.ps-mainmenu--desktop .ps-mainmenu__tree-item {
  position: relative;
  overflow: visible;
}

.ps-mainmenu--desktop .ps-mainmenu__tree,
.ps-mainmenu--desktop,
.header-nav-full-width .container-md {
  overflow: visible !important;
}

/* Wrapper lien + toggle */

.ps-mainmenu--desktop .ps-mainmenu__tree-item-wrapper {
  display: flex;
  align-items: center;
}

/* Dropdown : caché par défaut, affiché au hover */

.ps-mainmenu__dropdown {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 53px;
  left: 0;
  width: 100%;
  z-index: 10000;
  background: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  transition: opacity 0s, visibility 0s;
  transition-delay: 0.15s;
}

.ps-mainmenu--desktop .ps-mainmenu__tree-item:hover > .ps-mainmenu__dropdown,
.ps-mainmenu__dropdown:hover {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.ps-mainmenu__dropdown-inner {
  padding: 32px 40px 28px;
}

/* Grille 3 colonnes */

.ps-mainmenu__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 0;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  background-image:
    linear-gradient(#e0e0e0, #e0e0e0),
    linear-gradient(#e0e0e0, #e0e0e0);
  background-size: 1px 100%;
  background-position: 33.333% 0, 66.667% 0;
  background-repeat: no-repeat;
}

.ps-mainmenu__columns > li:nth-child(3n+2),
.ps-mainmenu__columns > li:nth-child(3n) {
  padding-left: 32px;
}

.ps-mainmenu__columns > li:nth-child(3n+1) {
  padding-right: 32px;
}

.ps-mainmenu__column-link {
  display: block;
  padding: 6px 0;
  color: #1a1a1a;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
}

.ps-mainmenu__column-link:hover,
.ps-mainmenu__column-link.current {
  color: #1a1a1a;
  text-decoration: none;
}

/* Bouton CTA bas du dropdown */

.ps-mainmenu__dropdown-footer {
  border-top: none;
  padding-top: 0;
}

.ps-mainmenu__dropdown-cta {
  display: inline-block;
  padding: 10px 20px;
  background: var(--vert-dark);
  color: #fff !important;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: 24px;
  text-decoration: none !important;
}

.ps-mainmenu__dropdown-cta:hover {
  background: #016650;
  color: #fff !important;
  text-decoration: none !important;
}

/* Bouton toggle mobile (masqué desktop) */

.ps-mainmenu__tree-dropdown-toggle {
  display: none;
}



/* ============================================================
   CORRECTIONS DROPDOWN WIDTH + FLECHES
   ============================================================ */

/* Dropdown : 838px ancre sous le li declencheur */

.ps-mainmenu__dropdown {
  width: 838px !important;
}

/* Fleche chevron : style prod (triangle vert, blanc au hover/actif) */

.header-nav-full-width .ps-mainmenu__tree-dropdown-toggle::after {
  border-top-color: var(--vert);
  transition: border-top-color .15s;
}

.header-nav-full-width .ps-mainmenu__tree-item:hover .ps-mainmenu__tree-link,
.header-nav-full-width .ps-mainmenu__tree-item--current > .ps-mainmenu__tree-link,
.header-nav-full-width .ps-mainmenu__tree-item.current > .ps-mainmenu__tree-link,
.header-nav-full-width .ps-mainmenu__tree-item.active > .ps-mainmenu__tree-link {
  background: var(--vert) !important;
  color: #fff !important;
}

.header-nav-full-width .ps-mainmenu__tree-item:hover .ps-mainmenu__tree-dropdown-toggle::after,
.header-nav-full-width .ps-mainmenu__tree-item--current .ps-mainmenu__tree-dropdown-toggle::after,
.header-nav-full-width .ps-mainmenu__tree-item.current .ps-mainmenu__tree-dropdown-toggle::after,
.header-nav-full-width .ps-mainmenu__tree-item.active .ps-mainmenu__tree-dropdown-toggle::after {
  border-top-color: #fff;
}

/* ============================================================
   GLYPHICONS HALFLINGS - fleche dropdown menu
   ============================================================ */

@font-face {
  font-family: 'Glyphicons Halflings Regular';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('../fonts/glyphicons-halflings/glyphicons-halflings-regular.woff2') format('woff2');
}

/* Police prod complete (set Pro) : pictos fiche produit (enveloppe \2709, imprimante \E016) */
@font-face {
  font-family: 'Glyphicons Regular';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url('../fonts/glyphicons/glyphicons-regular.woff2') format('woff2');
}

/* Masquer le triangle CSS du toggle PS9 */

.header-nav-full-width .ps-mainmenu__tree-dropdown-toggle {
  display: none !important;
}

/* Chevron via Glyphicons sur le lien nv_1 */

.header-nav-full-width .ps-mainmenu__tree-link::after {
  content: "\e114";
  font-family: 'Glyphicons Halflings Regular';
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: normal;
  vertical-align: -2px;
  margin-left: 5px;
  color: var(--vert);
}

.header-nav-full-width .ps-mainmenu__tree-item:hover .ps-mainmenu__tree-link::after,
.header-nav-full-width .ps-mainmenu__tree-item--current > .ps-mainmenu__tree-link::after,
.header-nav-full-width .ps-mainmenu__tree-item.current > .ps-mainmenu__tree-link::after,
.header-nav-full-width .ps-mainmenu__tree-item.active > .ps-mainmenu__tree-link::after {
  color: #fff;
}

/* Masquer le chevron sur les items sans dropdown (Showroom, Marques, etc.) */

.header-nav-full-width .ps-mainmenu__tree-item:not(:has(.ps-mainmenu__dropdown)) .ps-mainmenu__tree-link::after {
  display: none;
}




/* ============================================================
   HOME — HERO
   ============================================================ */

.sb-hero {
  height: 400px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: "Barlow Semi Condensed", sans-serif;
  background-size: cover;
}

.sb-hero .content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 50px;
}

.sb-hero .line_1 {
  text-align: center;
}

.sb-hero .line_1 .txt_1,
.sb-hero .line_1 .txt_2 {
  padding: 7px;
  background: #fff;
  font-family: "Barlow Semi Condensed", sans-serif;
  line-height: normal;
}

.sb-hero .line_1 .txt_1 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.sb-hero .line_1 .txt_2 {
  display: block;
  font-size: 56px;
  font-weight: 400;
  margin: 0;
}

@media (max-width: 992px) {
  .sb-hero .line_1 .txt_2 { font-size: 40px; }
}

@media (max-width: 768px) {
  .sb-hero .line_1 .txt_2 { font-size: 30px; }
}

@media (max-width: 991px) {
  .sb-hero { height: auto; }
  .sb-hero .content { padding: 100px 0; }
}

@media (max-width: 576px) {
  .sb-hero .line_1 .txt_2 { font-size: 26px; }
}

.sb-hero .sb-btn {
  padding: 13px 17px;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 22px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 24px;
  background-color: #8fffd0;
  color: #000;
  display: inline-block;
  line-height: 1;
}

@media (max-width: 576px) {
  .sb-hero .sb-btn { font-size: 16px; }
}

.sb-hero .sb-btn span + span::before {
  content: "";
  height: 21px;
  margin: 0 18px;
  border-left: 2px solid #03a588;
}



/* ============================================================
   HOME — RÉASSURANCE (4 pictos)
   ============================================================ */

.sb-reassurance-home {
  padding: 0;
  background: #eefff5;
}

@media (max-width: 767.98px) {
  .sb-reassurance-home { padding: 17px 0; }
}

.sb-reassurance-home .item {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  padding: 48px 45px;
}

@media (max-width: 767.98px) {
  .sb-reassurance-home .item { padding: 8px; }
}

.sb-reassurance-home .image {
  height: 110px;
  width: 110px;
  background: #03a588;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-reassurance-home .name {
  line-height: 1;
  display: inline-block;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
}

.sb-reassurance-home .sub_name {
  font-weight: 400;
  font-size: 14px;
}

/* Suppression margin PS9 entre hero et réassurance */
.page-content--home {
  padding: 0 !important;
  margin: 0 !important;
}

/* Suppression gap grid PS9 entre hero et réassurance */
.page-content--home {
  gap: 0 !important;
}

/* Suppression sticky header */
#header {
  position: static !important;
}

/* Hero — corrections typo */
.sb-hero .txt_upper {
  text-transform: uppercase;
}

.sb-hero .line_1 .txt_1 {
  font-weight: 500;
  text-transform: uppercase;
}

.sb-hero .clr_1 {
  color: #03a588 !important;
}

/* Corrections hauteurs hero et réassurance */

/* Point 1 : hauteur bloc réassurance header */
.sb-reassurance {
  padding: 8px 10px !important;
}




/* ============================================================
   HOME — SECTION SLIDE (texte id_60 + slider)
   ============================================================ */

.sb-slide {
  padding: 48px 0;
}

.sb-slide .col-slider {
  padding-left: 24px;
}

@media (max-width: 991px) {
  .sb-slide { padding: 24px 0; }
  .sb-slide .col-slider { padding-left: 15px; }
}

/* Texte id_60 */

.sb-blc-id60 {
  padding: 0;
  margin: 0;
  font-size: inherit;
  border: none;
}

.sb-blc-id60 .texte {
  display: flex;
  flex-direction: column;
  padding: 48px;
  background: #03a588;
  border-radius: 24px;
}

.sb-blc-id60 .texte h2 {
  color: var(--noir) !important;
  font-family: var(--font-corps) !important;
  font-size: 48px !important;
  font-weight: 500 !important;
}

.sb-blc-id60 .texte h2 span {
  font-family: inherit !important;
}

.sb-blc-id60 .texte p {
  color: #000;
}

.sb-blc-id60 .texte a:not(.btn) {
  color: #fff;
  text-decoration: none;
}

.sb-blc-id60 .texte a:not(.btn):hover,
.sb-blc-id60 .texte a:not(.btn):focus {
  color: #fff;
  text-decoration: underline;
}

.sb-blc-id60 .texte a.btn {
  position: relative;
  display: inline-block;
  padding: 15px 45px 15px 30px;
  color: #0e7361;
  font-size: 16px;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  background: #fff;
  border-radius: 36px;
  text-decoration: none;
}

.sb-blc-id60 .texte a.btn:hover,
.sb-blc-id60 .texte a.btn:focus {
  color: #03a588;
}

.sb-blc-id60 .texte a.btn:after {
  content: "";
  position: absolute;
  top: 50%; right: 15px;
  transform: translateY(-50%);
  width: 8px; height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 13L7 7L1 1' stroke='%2303A588' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
}

/* Slider */

.sb-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  line-height: 0;
}

.sb-slider__track {
  display: flex;
  transition: transform 0.5s ease;
}

.sb-slider__slide {
  min-width: 100%;
}

.sb-slider__slide img {
  width: 100%;
  height: auto;
  display: block;
}

.sb-slider__prev,
.sb-slider__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 100px;
  background-color: rgba(255,255,255,.8);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 8px 14px;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity .2s, background-color .2s;
}

.sb-slider:hover .sb-slider__prev,
.sb-slider:hover .sb-slider__next {
  opacity: 1;
}

.sb-slider__prev {
  left: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 1L1 7L7 13' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sb-slider__next {
  right: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sb-slider__prev:hover,
.sb-slider__next:hover {
  background-color: var(--vert);
}
.sb-slider__prev:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 1L1 7L7 13' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sb-slider__next:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ============================================================
   HOME — SECTION CONTENT_2 (image + texte id_48)
   ============================================================ */

.sb-content2 {
  padding: 60px 0;
}

@media (max-width: 767px) {
  .sb-content2 { padding: 32px 0; }
}

.sb-content2 img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .sb-content2 img { margin-bottom: 24px; }
}

.sb-blc-id48 {
  padding: 48px;
  background: #fcfad6;
  border-radius: 24px;
}

@media (max-width: 767px) { .sb-blc-id48 { padding: 24px; } }

.sb-blc-id48 .texte {
  display: flex;
  flex-direction: column;
}

.sb-blc-id48 .texte h2 {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #000;
}

@media (max-width: 992px) { .sb-blc-id48 .texte h2 { font-size: 40px; } }
@media (max-width: 768px) { .sb-blc-id48 .texte h2 { font-size: 30px; } }
@media (max-width: 576px) { .sb-blc-id48 .texte h2 { font-size: 28px; } }

.sb-blc-id48 .texte p {
  color: #000;
  font-size: 13px;
}

.sb-blc-id48 .texte a.btn {
  position: relative;
  display: inline-block;
  padding: 15px 45px 15px 30px;
  color: #fff;
  font-size: 16px;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  background: #0e7361;
  border-radius: 36px;
  text-decoration: none;
}

.sb-blc-id48 .texte a.btn:hover,
.sb-blc-id48 .texte a.btn:focus {
  color: #03a588;
}

.sb-blc-id48 .texte a.btn:after {
  content: "";
  position: absolute;
  top: 50%; right: 15px;
  transform: translateY(-50%);
  width: 8px; height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 13L7 7L1 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
}

/* =========================================================================
   Blocs categorie home (Promotions / Nouveautes / Top ventes)
   Valeurs reprises a l'identique du prod (style.min.css).
   A coller a la fin de themes/simon_bureau/assets/css/custom.css
   ========================================================================= */

.sb-cat-block            { padding: 48px 0; }
.sb-cat-block--promos    { background: #fcfad6; }
.sb-cat-block--nouveautes{ background: #ffffff; }
.sb-cat-block--topventes { background: #eefff5; }
.sb-cat-block--related   {
  background: #f8f8f8;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
@media (max-width: 767.98px) { .sb-cat-block { padding: 24px 0; } }

/* En-tete : titre a gauche, fleches a droite */
.sb-cat-head  { position: relative; margin-bottom: 28px; }
.sb-cat-title {
  margin: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  text-align: left;
  color: var(--noir);
}
@media (max-width: 992px)    { .sb-cat-title { font-size: 40px; } }
@media (max-width: 768px)    { .sb-cat-title { font-size: 30px; } }
@media (max-width: 576px)    { .sb-cat-title { font-size: 28px; } }
@media (max-width: 767.98px) { .sb-cat-head  { margin-bottom: 20px; } }

/* Fleches rondes vertes */
.sb-cat-nav { position: absolute; top: 0; right: 0; display: flex; gap: 15px; }
.sb-cat-nav button {
  display: flex; align-items: center; justify-content: center;
  height: 48px; width: 48px; padding: 0;
  border: 1px solid var(--vert);
  border-radius: 30px;
  background: transparent;
  cursor: pointer;
}
.sb-cat-nav button:hover           { background: var(--vert); }
.sb-cat-nav button svg             { width: 8px; height: 14px; }
.sb-cat-nav button svg path        { stroke: var(--vert); }
.sb-cat-nav button:hover svg path  { stroke: #fff; }
.sb-cat-nav button:disabled        { opacity: .35; cursor: default; }
.sb-cat-nav button:disabled:hover  { background: transparent; }
.sb-cat-nav button:disabled:hover svg path { stroke: var(--vert); }
.sb-cat-prev svg { transform: rotate(180deg); }

/* Carousel : la largeur des items est posee par sb-carousel.js */
.sb-cat-carousel { overflow: hidden; }
.sb-cat-track    { display: flex; transition: transform .4s ease; }
.sb-cat-item     { box-sizing: border-box; padding: 0 6px; display: flex; flex: 0 0 25%; max-width: 25%; } /* gouttiere = padding interne ; 4 par rangee */
@media (max-width: 970px) { .sb-cat-item { flex: 0 0 33.333%; max-width: 33.333%; } }
@media (max-width: 767px) { .sb-cat-item { flex: 0 0 50%;     max-width: 50%; } }
@media (max-width: 570px) { .sb-cat-item { flex: 0 0 100%;    max-width: 100%; } }

/* Card */
.sb-cat-card {
  position: relative;
  width: 100%;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 36px 24px 12px 24px;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 24px;
}
@media (max-width: 700px) { .sb-cat-card { padding: 15px; } }

.sb-cat-card__top   { position: relative; }
.sb-cat-card__badge {
  position: absolute; top: 8px; right: 8px;
  padding: 7px 8px;
  color: #fff; font-weight: bold;
  background: #b407df;
  border-radius: 9px;
}

.sb-cat-card__photo {
  display: block;
  height: 270px; line-height: 270px;
  margin: 0 auto 16px;
  text-align: center;
}
.sb-cat-card__photo img { display: inline; vertical-align: middle; max-width: 100%; }
@media (max-width: 990px) { .sb-cat-card__photo { height: auto; line-height: 1; } }

.sb-cat-card__info {
  padding: 16px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 10px;
  text-align: center;
}
.sb-cat-card__name   { min-height: 35px; margin: 0; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; }
.sb-cat-card__name a { display: inline-block; color: #282828; font-size: 16px; text-transform: uppercase; text-decoration: none; }

.sb-cat-card__price        { min-height: 20px; line-height: 18px; color: #666; }
.sb-cat-card__from         { color: #959595; margin-right: 5px; }
.sb-cat-card__old          { color: #b407df; font-size: 14px; text-decoration: line-through; }
.sb-cat-card__now          { display: block; color: #282828; font-size: 18px; font-weight: bold; }
.sb-cat-card__ht           { font-weight: bold; }

.sb-cat-card__stock { color: #666; }

.sb-cat-card__action   { position: relative; margin-top: auto; padding-top: 10px; border-top: 1px solid #dedede; }
.sb-cat-card__action a { display: flex; align-items: center; color: #000; font-weight: bold; text-decoration: none; }
.sb-cat-card__action a:hover { color: var(--vert); }
.sb-cat-card__action a:after {
  position: absolute; right: 0; content: "";
  height: 15px; width: 8px;
  background-image: url('data:image/svg+xml,<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.999998 13L7 7L1 1" stroke="%2303A588" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-position: center center; background-repeat: no-repeat;
}

/* Pied : lien "Toutes les ..." */
.sb-cat-foot   { margin-top: 10px; text-align: right; }
.sb-cat-foot a {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  padding-right: 22px;
  color: #0e7361; font-weight: bold;
  text-decoration: none;
  border-bottom: 2px solid #0e7361;
}
.sb-cat-foot a:after {
  content: "";
  position: absolute;
  top: 50%; right: 4px;
  width: 8px; height: 13px;
  margin-top: -10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1 1L6.5 6.5L1 12' stroke='%230e7361' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center center; background-repeat: no-repeat;
}
.sb-cat-foot a:hover { text-decoration: none; }

/* ===================================================================
   Page resultats/categorie — layout sidebar + toolbar + pagination
   (gabarit unique, reutilisable pour la page categorie)
   =================================================================== */

.sb-liste {
  margin-top: 24px;
  margin-bottom: 48px;
}

/* ---------- Titre H1 en colonne (recherche) ---------- */
.sb-titre {
  margin: 0 0 24px;
  font-family: var(--font-titre);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--noir);
}

/* ---------- Sidebar ---------- */
.sb-side__group {
  margin-bottom: 32px;
}

.sb-side__title {
  display: inline-block;
  margin-bottom: 16px;
  font-family: var(--font-titre);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--vert-dark);
  text-decoration: none;
}

.sb-side__title:hover {
  color: var(--vert);
  text-decoration: none;
}

.sb-side__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sb-side__list li {
  margin-bottom: 4px;
}

.sb-side__link {
  display: block;
  padding: 8px 14px;
  font-family: var(--font-corps);
  font-size: 15px;
  color: var(--gris-texte);
  text-decoration: none;
  border-radius: 20px;
}

.sb-side__link:hover {
  color: var(--noir);
  text-decoration: none;
}

.sb-side__link--active {
  color: var(--noir);
  background: var(--vert-light);
  font-weight: 600;
}

/* ---------- Barre d'outils ---------- */
.sb-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  padding: 16px 24px;
  margin-bottom: 24px;
  background: #fcfad6;
  border-radius: 24px;
}

.sb-toolbar__count {
  font-family: var(--font-titre);
  font-weight: 600;
  text-transform: uppercase;
}

.sb-toolbar__field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.sb-toolbar__field--perpage {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin-left: auto;
}
.sb-toolbar__field--perpage .sb-toolbar__label {
  text-align: right;
}

/* Contexte different de Afficher/Trier (bible : .mod.produits_page, pas
   .mod.produits_trier) : rectangle net et large, pas la pilule a 36px de
   rayon, sinon un contenu court ("30") rend un cercle au lieu d'une case. */
.sb-toolbar__field--perpage .sb-toolbar__select {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 8px;
  text-align: left;
}

/* Repartition facon prod (.mod.produits_trier .row align-items:center + select width:100%) :
   Afficher / Trier se partagent l'espace, selects pleins. Scope .sb-toolbar pour
   ne pas toucher le perpage de la ligne pager. */
.sb-toolbar .sb-toolbar__field {
  flex: 1 1 0;
}
.sb-toolbar .sb-toolbar__select {
  flex: 1 1 auto;
  width: 100%;
}

/* ---------- Ligne pager : pagination + Articles par page ---------- */
.sb-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.sb-pager .sb-pagination {
  margin-top: 0;
}

/* Pager bas : encadre de 2 filets fins gris comme la prod
   (filet au-dessus facon hr + filet en-dessous facon .produits_bottom).
   Le pager interne garde sa mise en page ; on annule juste sa marge basse
   pour que le filet du bas du wrapper soit colle au contenu. */
.sb-pager--bas {
  margin-top: 22px;
  padding: 22px 0;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}
.sb-pager--bas .sb-pager {
  margin-bottom: 0;
}

.sb-toolbar__label {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-corps);
  font-size: 14px;
  color: var(--gris-texte);
}

.sb-toolbar__select {
  padding: 9px 18px;
  font-family: var(--font-corps);
  font-size: 14px;
  color: var(--gris-texte);
  background: var(--blanc);
  border: 1px solid #dedede;
  border-radius: 36px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none;
}

/* ---------- Pagination ---------- */
.sb-pagination {
  margin-top: 32px;
}

.sb-pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sb-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  font-family: var(--font-titre);
  font-size: 18px;
  font-weight: 500;
  color: var(--noir);
  text-decoration: none;
  background: var(--blanc);
  border: 1px solid #dedede;
  border-radius: 25px;
}

.sb-pagination__link:hover {
  text-decoration: none;
  background: var(--gris-top);
}

.sb-pagination__link--active {
  background: var(--gris-top);
  border-color: var(--gris-top);
}

.sb-pagination__link--prev,
.sb-pagination__link--next {
  color: var(--vert-dark);
  font-size: 22px;
}

.sb-pagination__link--disabled {
  color: #b6bbbf;
}

/* Points de suspension (troncature 1 ... N) : texte simple, pas un bouton
   borde comme les autres pages. */
.sb-pagination__link--dots {
  min-width: auto;
  height: auto;
  padding: 0 4px;
  background: none;
  border: none;
  color: #b6bbbf;
}

/* ---------- Responsive : sidebar au-dessus en mobile ---------- */
@media (max-width: 991.98px) {
  .sb-side {
    margin-bottom: 24px;
  }
  .sb-toolbar__field--perpage {
    margin-left: 0;
  }
}

/* ===================================================================
   Typeahead — liste de suggestions sous la barre de recherche
   =================================================================== */
.sb-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
  background: var(--blanc);
  border: 1px solid #dedede;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
  z-index: 100000;
}

.sb-suggest__item {
  display: block;
  width: 100%;
  padding: 10px 30px;
  border: none;
  background: none;
  font-family: var(--font-corps);
  font-size: 14px;
  color: var(--noir);
  text-align: left;
  cursor: pointer;
}

.sb-suggest__item:hover,
.sb-suggest__item.is-active {
  background: var(--vert-light);
  color: var(--noir);
}

/* ============================================================
   FAQ (simon_faq) — liste + détail
   Cibles : .sb-faq--liste / .sb-faq--detail (body.page-faq)
   ============================================================ */

.sb-faq {
  margin: 0 0 48px;
}

/* --- Liste des questions : carte --- */
.sb-faq--liste {
  padding: 28px 32px;
  background: var(--blanc);
  border: 1px solid var(--gris-border);
  border-radius: 8px;
}
.sb-faq-questions {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sb-faq-questions__item + .sb-faq-questions__item {
  border-top: 1px solid var(--gris-border);
}
.sb-faq-questions__lien {
  display: block;
  padding: 13px 0;
  color: var(--noir);
  font-family: var(--font-corps);
  text-decoration: none;
  transition: color .15s ease;
}
.sb-faq-questions__lien:hover,
.sb-faq-questions__lien:focus {
  color: var(--vert);
  text-decoration: none;
}

/* --- Détail d'une réponse --- */
.sb-faq-detail__contenu {
  color: var(--gris-texte);
  font-family: var(--font-corps);
  line-height: 1.6;
}
.sb-faq-detail__contenu h2 {
  margin: 32px 0 12px;
  color: var(--vert);
  font-family: var(--font-titre);
  font-size: 20px;
  font-weight: 600;
}
.sb-faq-detail__contenu > :first-child {
  margin-top: 0;
}
.sb-faq-detail__contenu p {
  margin: 0 0 16px;
}
.sb-faq-detail__contenu a {
  color: var(--vert);
  text-decoration: none;
}
.sb-faq-detail__contenu a:hover,
.sb-faq-detail__contenu a:focus {
  text-decoration: underline;
}
.sb-faq-detail__contenu img {
  max-width: 100%;
  height: auto;
}

/* --- Bouton « Retour FAQ » (bordeaux, aligné à droite) --- */
.sb-faq-detail__retour {
  margin: 32px 0 0;
  text-align: right;
}
.sb-faq-retour {
  display: inline-block;
  padding: 11px 22px;
  color: var(--blanc);
  font-family: var(--font-titre);
  font-weight: 600;
  background: #8c161b;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s ease;
}
.sb-faq-retour:hover,
.sb-faq-retour:focus {
  color: var(--blanc);
  background: #6f1115;
  text-decoration: none;
}

/* ============================================================
   PAGE CATEGORIE — intro (image + texte haut) et texte bas.
   Reference visuelle : prod ancien-site.css
   - .intro_cat (image) : max-width:100% ; margin-bottom:19px
   - .mod.produits .intro : margin 0 0 22px ; font-size:16px
   - filet bas facon .produits_bottom : border 1px #dfdfdf
   - liens dans le texte : vert #0e7361, souligne au survol
   Grille : row + col-md-3 / col-md-9 (deja fournis par le markup).
   ============================================================ */

/* ---- Intro : image a gauche + texte a droite ---- */
.sb-cat-intro {
  margin-top: 0;
  margin-bottom: 22px;
  font-size: 16px;
}

/* En mode image+texte, aligner le contenu en haut (image et texte) */
.sb-cat-intro--media {
  align-items: flex-start;
}

/* Image de categorie (col-md-3) : pleine largeur de colonne, calee en haut */
.sb-cat-intro__img {
  margin-bottom: 19px;
}
.sb-cat-intro__img img {
  max-width: 100%;
  height: auto;
}

/* Bloc texte (col-md-9) : porte le H1 injecte + paragraphes */
.sb-cat-intro__txt {
  font-size: 16px;
}
.sb-cat-intro__txt h1,
.sb-cat-intro__txt .h1 {
  margin: 0 0 24px;
  font-family: var(--font-titre);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--noir);
}

/* ---- Texte bas (additional_description) : filet fin gris au-dessus ---- */
.sb-cat-suite {
  margin-top: 22px;
  padding-top: 22px;
  font-size: 16px;
  border-top: 1px solid #dfdfdf;
}

/* Evite le double filet quand le pager bas est juste au-dessus : il porte deja
   sa propre bordure basse, celle-ci ferait doublon. */
.sb-pager--bas + .sb-cat-suite {
  border-top: none;
  padding-top: 0;
}

/* ---- Liens dans les textes de categorie (haut + bas) : vert prod ---- */
.sb-cat-intro a,
.sb-cat-suite a {
  color: #0e7361;
  text-decoration: none;
}
.sb-cat-intro a:hover,
.sb-cat-suite a:hover {
  color: #0e7361;
  text-decoration: underline;
}

/* =====================================================================
   Fiche produit simon_bureau - squelette d'habillage (05/06)
   Layout 2 colonnes, pastille, encart jaune, bande verte, pictos.
   Detail fin (prix, degressif, stepper) -> point 2.
   ===================================================================== */

/* --- Layout 2 colonnes (prod : 5 / 7) --- */
.sb-product__top {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: var(--max);
  margin: 0 auto;
}

.sb-product__gallery {
  flex: 1 1 0;
  min-width: 280px;
}

.sb-product__infos {
  flex: 1.4 1 0;
  min-width: 320px;
}

/* --- Titre (H1 issu du split) --- */
.sb-product__title {
  font-family: var(--font-titre);
  margin: 0 0 12px;
}

.sb-product__title h1 {
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--noir);
  margin: 0;
}

/* --- Pastille marque (entre titre et corps) --- */
.sb-product__brand {
  margin: 0 0 18px;
}

.sb-product__brand a {
  display: inline-block;
  background: #cffff2;
  color: var(--noir);
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 24px;
}

.sb-product__brand a:hover {
  background: var(--vert-light);
}

/* --- Corps description courte --- */
.sb-product__desc {
  font-family: var(--font-corps);
  color: var(--noir);
  line-height: 1.55;
}

.sb-product__desc p {
  margin: 0 0 14px;
}

/* --- "En savoir +" --- */
.sb-product__more {
  margin: 16px 0;
}

.sb-product__more-link {
  font-family: var(--font-titre);
  font-weight: 700;
  color: var(--vert);
  text-decoration: none;
}

.sb-product__more-link:hover {
  color: var(--vert-dark);
}

/* --- Encart jaune (features informatives) --- */
.sb-product__etat {
  background: #fcfad6;
  border-radius: 24px;
  padding: 24px;
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.sb-product__features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sb-product__feature b {
  font-family: var(--font-titre);
}

/* --- Encart occasion : 2 colonnes (etat a gauche / features a droite) --- */
.sb-product__etat--2col > .sb-product__niveau,
.sb-product__etat--2col > .sb-product__features {
  flex: 1;
}

/* Puces etat : cosmetique reprise de la prod (.info_etat .etat) */
.sb-product__niveau-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sb-product__niveau-list li {
  display: flex;
  align-items: center;
}

.sb-product__niveau-list li + li {
  margin-top: 8px;
}

.sb-product__niveau-list li::before {
  content: "";
  display: inline-block;
  height: 20px;
  width: 20px;
  margin-right: 8px;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='0.5' width='19' height='19' rx='9.5' stroke='%23B6BBBF'/%3E%3C/svg%3E");
}

.sb-product__niveau-list li.actif {
  font-weight: bold;
}

.sb-product__niveau-list li.actif::before {
  background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='0.5' width='19' height='19' rx='9.5' fill='black' stroke='black'/%3E%3Cpath d='M9.04091 11.1573L6.61636 8.73273L5 10.3491L9.04091 14.39L16.3145 7.11636L14.6982 5.5L9.04091 11.1573Z' fill='white'/%3E%3C/svg%3E");
}

/* Lien "Guide etat occasion" (chevron vert, repris de .info_etat a prod) */
.sb-product__niveau-guide {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  color: #767676;
  font-weight: bold;
  text-decoration: none;
}

.sb-product__niveau-guide::after {
  content: "";
  display: inline-block;
  height: 15px;
  width: 8px;
  margin-left: 15px;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.999998 13L7 7L1 1' stroke='%2303A588' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sb-product__niveau-guide:hover {
  color: var(--vert);
}

/* --- Encart jaune (declinaisons) : meme habillage que .sb-product__etat --- */
.sb-product__decli {
  background: #fcfad6;
  border-radius: 24px;
  padding: 24px;
  margin: 0 0 22px;
}

/* Produit sans declinaison : le partial natif sort un wrapper rempli d'espaces
   (donc :empty ne matche pas). On masque des qu'il n'a aucun enfant ELEMENT. */
.sb-product__decli:not(:has(*)) {
  display: none;
}

/* Wrapper natif Hummingbird : flex column avec row-gap:16px.
   Ce gap se cumule avec notre margin-top -> espacement double + surplus.
   On annule le gap natif, un seul mecanisme d'espacement (margin-top). */
/* Wrapper natif Hummingbird : margin-block-end:32px (= marge basse) cause le
   surplus sous le dernier select, dans l'encart. On l'annule. Le row-gap:16px
   natif gere deja l'espacement entre les deux groupes. */
.sb-product__decli .product__variants {
  margin: 0;
  padding: 0;
}

/* Chaque groupe : label a gauche, select a droite, sur la meme ligne.
   Prod (.attributs_stock .form-group) : margin-bottom 0, espacement via .row + .row.
   On reproduit : le fieldset natif et son label perdent leur marge basse. */
.sb-product__decli .product-variant {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
}

/* Espacement entre groupes assure par le row-gap:16px natif du wrapper. */

/* Label Bootstrap (.form-label / legend) porte margin-bottom: .5rem -> source du surplus bas. */
.sb-product__decli .product-variant__label,
.sb-product__decli .form-label {
  margin-bottom: 0;
}

/* Label (legend "Type produit") : colonne gauche */
.sb-product__decli .product-variant__label {
  flex: 0 0 42%;
  margin: 0;
}

.sb-product__decli .product-variant__legend {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: 700;
}

/* Masquer le recap texte en double (selected-value, lecture seule du partial natif) */
.sb-product__decli .product-variant__selected {
  display: none;
}

/* Le select occupe le reste de la ligne, arrondi facon pilule (comme prod) */
.sb-product__decli .product-variant select {
  flex: 1;
  border: 1px solid var(--border, #e0ded6);
  border-radius: 24px;
  padding: 13px 48px 13px 24px;
  background-color: var(--blanc, #fff);
  font-size: 1rem;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url('data:image/svg+xml,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L7 7L13 1" stroke="%23999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: right 22px center;
}

/* Select desactive (2e tant que le 1er n'est pas choisi) : grise, comme prod */
.sb-product__decli .product-variant select:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* --- Zone achat (conteneur ; detail au point 2) --- */
.sb-product__buy {
  margin-top: 8px;
}

/* --- Pictos partage (cercles verts, comme prod) --- */
.sb-product__share {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gris-border);
}

.sb-product__share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--vert);
  border: 1px solid var(--vert);
  color: var(--blanc);
  transition: background .15s ease, color .15s ease;
}

.sb-product__share a:hover {
  background: var(--blanc);
  color: var(--vert);
}

.sb-product__share svg {
  width: 23px;
  height: 23px;
}

/* --- Description bas : bloc statique, bande verte --- */
.sb-product__description {
  max-width: var(--max);
  margin: 16px auto 0;
}

.sb-product__description-title {
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 22px;
  color: var(--blanc);
  background: var(--vert);
  border-radius: 24px;
  padding: 18px 28px;
  margin: 0;
}

.sb-product__description-body {
  font-family: var(--font-corps);
  color: var(--noir);
  line-height: 1.6;
  padding: 24px 4px 0;
}

/* --- Responsive : 1 colonne --- */
@media (max-width: 991px) {
  .sb-product__top {
    flex-direction: column;
    gap: 28px;
  }
  .sb-product__etat {
    flex-direction: column;
    padding: 16px;
  }
  .sb-product__title h1 {
    font-size: 26px;
  }
}

/* --- Prix fiche produit : "A partir de :" discret + montant gros (ref prod) --- */
.sb-price__from {
  font-size: 16px;
  font-weight: normal;
  color: #282828;
}

.sb-price__amount {
  font-size: 36px;
  font-weight: bold;
  color: #282828;
}

/* --- Promo fiche produit : pastille mauve -X% + prix initial barre (ref prod) --- */
.sb-price__promo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 4px;
}
.sb-price__promo:empty { display: none; }
.sb-price__badge {
  background: #b407df;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 12px;
  line-height: 1.2;
}
.sb-price__old {
  color: #b407df;
  font-size: 14px;
  text-decoration: line-through;
}

/* --- Groupe declinaison a une seule valeur : affiche en dur (ref prod) --- */
.sb-variant-fixe {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 8px;
}
.sb-variant-fixe__label { color: #282828; }
.sb-variant-fixe__value { color: #282828; }

/* --- Table prix degressifs (Quantite / Prix unitaire / Reduction, ref prod) --- */
.sb-discounts { margin: 16px 0; }
.sb-discounts[hidden] { display: none; }
.sb-discounts-table {
  width: 100%;
  max-width: 460px;
  border-collapse: collapse;
}
.sb-discounts-table th {
  padding: 6px 16px 6px 0;
  text-align: left;
  font-family: var(--font-titre);
  font-weight: 700;
  color: #282828;
  border-bottom: 1px dotted var(--gris-border);
}
.sb-discounts-table td {
  padding: 8px 16px 8px 0;
  color: #282828;
  border-bottom: 1px dotted var(--gris-border);
}
.sb-discounts-table th.sb-discount__pu,
.sb-discounts-table td.sb-discount__pu { text-align: right; }
.sb-discounts-table .sb-discount__pct { color: #b407df; font-weight: 700; }

/* =========================================================================
   Zone achat fiche produit "selon config" (ref prod ancien-site)
   ========================================================================= */

/* Ligne stock : "Stock disponible : Sous 3 a 4 semaines" (vert + check) */
.sb-dispo { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 16px; }
.sb-dispo__ok {
  display: inline-block; flex: 0 0 21px; width: 21px; height: 21px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='19' height='19' rx='9.5' fill='%236f9426'/%3E%3Cpath d='M9.04091 11.6573L6.61636 9.23273L5 10.8491L9.04091 14.89L16.3145 7.61636L14.6982 6L9.04091 11.6573Z' fill='white'/%3E%3C/svg%3E");
}
.sb-dispo__label { color: #6f9426; white-space: nowrap; }
.sb-dispo__val   { color: #282828; }

/* Prix aligne a droite (desktop) + reference de combinaison */
.sb-prices { text-align: right; }
.sb-product__ref { margin-bottom: 4px; color: #282828; font-size: 16px; }
.sb-price__from  { font-size: 16px; font-weight: normal; color: #282828; }

/* Sous 767.98px : aligne a gauche, fidele bible
   (.mod.produit .info_product .f_block_prix{text-align:left}). */
@media (max-width: 767.98px) {
  .sb-prices {
    margin-top: 24px;
    text-align: left;
  }
  .sb-price__promo {
    justify-content: flex-start;
  }
}
/* .sb-prices ... : un cran plus specifique que .product__price natif hummingbird,
   pour imposer la police/gras prod sans !important. */
.sb-prices .sb-price__amount {
  font-family: var(--font-titre);
  font-size: 36px;
  font-weight: 700;
  color: #282828;
  line-height: 1.1;
}

/* Bouton "Stock indisponible" (pleine largeur, desactive) */
.sb-btn-indispo {
  display: block; width: 100%; margin: 0 0 24px; padding: 0; line-height: 56px;
  color: #fff; font-size: 20px; font-weight: 500; text-align: center;
  background: var(--vert); border: 0; border-radius: 36px; cursor: not-allowed;
}

/* Bloc "Soyez averti" */
.sb-alerte { display: flex; flex-direction: column; gap: 10px; }
.sb-alerte__title { display: flex; align-items: center; gap: 10px; color: #828282; font-size: 18px; font-weight: 600; }
.sb-alerte__ok {
  display: inline-block; flex: 0 0 21px; width: 21px; height: 21px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='19' height='19' rx='9.5' fill='%23828282'/%3E%3Cpath d='M9.04091 11.6573L6.61636 9.23273L5 10.8491L9.04091 14.89L16.3145 7.61636L14.6982 6L9.04091 11.6573Z' fill='white'/%3E%3C/svg%3E");
}
.sb-alerte__txt { margin: 0; color: #282828; }
.sb-alerte__form { display: flex; align-items: center; gap: 12px; }
.sb-alerte__input { flex: 1; height: 48px; padding: 0 16px; border: 1px solid #dedede; border-radius: 36px; }
.sb-alerte__btn { height: 48px; padding: 0 30px; color: #fff; font-weight: 500; background: var(--vert); border: 0; border-radius: 36px; cursor: pointer; }
.sb-alerte__btn:hover { background: var(--vert-dark); }

/* Pictos mail + imprimer : repris MOT POUR MOT de ancien-site.css (.ico_share) */
.ico_share { margin-top: 24px; }
.ico_share .puce_fnt {
  display: inline-block;
  width: 48px;
  line-height: 45px;
  text-align: center;
  background-color: #03a588;
  border: 1px solid #03a588;
  border-radius: 35px;
  text-decoration: none;
}
.ico_share .puce_fnt:before {
  font-family: 'Glyphicons Regular';
  font-size: 23px;
  color: #fff;
  vertical-align: -5px;
}
.ico_share .puce_fnt.envelope:before { content: "\2709"; }
.ico_share .puce_fnt.print:before    { content: "\E016"; }
.ico_share .puce_fnt:hover,
.ico_share .puce_fnt:focus { background-color: #fff; }
.ico_share .puce_fnt:hover:before,
.ico_share .puce_fnt:focus:before { color: #03a588; }

/* Ligne quantite + bouton (calque prod : pilule unique, separateurs internes) */
.sb-action {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}
/* Label "Quantite" a gauche de la pilule (non rendu par hummingbird). */
.sb-action__qty { flex: 1 1 0; display: flex; align-items: center; gap: 24px; }
.sb-action__qty::before {
  content: "Quantité";
  font-size: 16px;
  color: #282828;
}
.sb-action__add { flex: 1 1 0; }

/* La pilule = le groupe .quantity-button__group (un seul contour arrondi). */
.sb-action__qty .quantity-button__group {
  display: inline-block; width: max-content;
  border: 1px solid #dedede; border-radius: 36px; overflow: hidden;
}
/* Boutons +/- et champ : meme gabarit, a plat (pas de bordure/rayon propre). */
.sb-action__qty .quantity-button__group .btn,
.sb-action__qty .quantity-button__group input {
  float: left;
  height: 49px; width: 49px; min-width: 49px; padding: 0; margin: 0;
  box-sizing: border-box;
  display: block; line-height: 49px;
  font-size: 16px; font-weight: bold; color: #767676; text-align: center;
  background: #f3f3f3; border: 0; border-radius: 0; box-shadow: none;
}
.sb-action__qty .quantity-button__group .btn { cursor: pointer; }
.sb-action__qty .quantity-button__group .btn:hover { background: #fff; }
.sb-action__qty .quantity-button__group .btn .material-icons { font-size: 20px; }
/* Symboles +/- lisibles meme sans la police material-icons. */
.sb-action__qty .quantity-button__group .decrement .material-icons,
.sb-action__qty .quantity-button__group .increment .material-icons { line-height: 1; vertical-align: middle; }
/* On masque les spinners/confirmations natifs. */
.sb-action__qty .quantity-button__group .spinner-border,
.sb-action__qty .quantity-button__group .confirmation { display: none !important; }
/* Champ central : fond blanc + separateurs gauche/droite.
   display:block (et NON flex) pour que le line-height:49px prenne effet et centre
   le "1" verticalement, exactement comme les glyphes +/- des boutons. En flex, le
   line-height d'un input est ignore -> le "1" restait desaxe. */
.sb-action__qty .quantity-button__group input {
  display: block;
  background: #fff; color: #282828; -moz-appearance: textfield;
  border-left: 1px solid #dedede; border-right: 1px solid #dedede;
  line-height: 49px;
}
.sb-action__qty .quantity-button__group input::-webkit-outer-spin-button,
.sb-action__qty .quantity-button__group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sb-btn-add {
  display: block; width: 100%; padding: 0; line-height: 56px;
  color: #fff; font-size: 20px; font-weight: 500; text-align: center;
  background: var(--vert); border: 0; border-radius: 36px;
}
.sb-btn-add:hover { background: var(--vert-dark); }
.sb-btn-add i { display: none; }

/* Sous 767.98px : bouton en dessous de la quantite (fidele bible : la meme
   ligne .sb-action__qty + .sb-action__add cote a cote a un espace insuffisant
   pour le texte du bouton, qui passe alors sur 2 lignes). */
@media (max-width: 767.98px) {
  .sb-action {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .sb-action__qty,
  .sb-action__add {
    flex: 0 0 auto;
  }
}

/* ============================================================ */
/* Modale "Partager cet article par mail" (mailami.js)          */
/* ============================================================ */
.sb-modal-open { overflow: hidden; }

.sb-modal { display: none; position: fixed; inset: 0; z-index: 1060; }
.sb-modal.is-open { display: block; }

.sb-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }

.sb-modal__dialog {
  position: relative;
  width: 92%;
  max-width: 800px;
  max-height: 96vh;
  margin: 2vh auto;
  padding: 22px 32px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--gris-border);
  border-radius: 12px;
}

.sb-modal__close {
  position: absolute;
  top: 12px;
  right: 16px;
  padding: 0;
  width: 36px;
  height: 36px;
  font-size: 24px;
  line-height: 1;
  color: var(--gris-texte);
  background: none;
  border: 1px solid var(--gris-border);
  border-radius: 6px;
  cursor: pointer;
}
.sb-modal__close:hover { color: var(--vert); border-color: var(--vert); }

.sb-modal__title {
  margin: 0 0 14px;
  padding-bottom: 12px;
  font-family: var(--font-titre);
  font-weight: 700;
  font-size: 26px;
  color: var(--noir);
  border-bottom: 1px solid var(--gris-border);
}

.sb-mailami__intro { margin: 0 0 14px; line-height: 22px; }

.sb-mailami__row { display: flex; flex-wrap: wrap; gap: 24px; }
.sb-mailami__row > .sb-mailami__field { flex: 1 1 0; min-width: 220px; }

.sb-mailami__field { margin-bottom: 12px; }
.sb-mailami__label { display: block; margin-bottom: 6px; }

.sb-mailami__input {
  display: block;
  width: 100%;
  height: 44px;
  margin-bottom: 6px;
  padding: 0 16px;
  font-size: 14px;
  border: 1px solid var(--gris-border);
  border-radius: 36px;
}
.sb-mailami__field .sb-mailami__input:last-child { margin-bottom: 0; }

.sb-mailami__textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid var(--gris-border);
  border-radius: 16px;
  resize: vertical;
}
.sb-mailami__input:focus,
.sb-mailami__textarea:focus { outline: 0; border-color: var(--vert); }

.sb-mailami__help { display: block; margin-top: 6px; font-size: 13px; color: var(--gris-texte); }

.sb-mailami__sep { margin: 4px 0 12px; border: 0; border-top: 1px solid var(--gris-border); }

/* Honeypot : invisible aux humains, present pour les bots. */
.sb-mailami__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sb-mailami__feedback { margin: 4px 0; font-size: 14px; }
.sb-mailami__feedback:empty { display: none; }
.sb-mailami__feedback--info    { color: var(--gris-texte); }
.sb-mailami__feedback--success { color: var(--vert-dark); font-weight: 600; }
.sb-mailami__feedback--error   { color: #aa0101; }

.sb-mailami__foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gris-border); }
.sb-mailami__oblig { margin: 0 0 6px; font-size: 12px; color: var(--gris-texte); }
.sb-mailami__legal { margin: 0 0 12px; font-size: 13px; color: var(--gris-texte); }

.sb-mailami__submit { width: 100%; height: 48px; border-radius: 36px; }
.sb-mailami__submit:disabled { opacity: .6; cursor: default; }

@media (max-width: 575px) {
  .sb-modal__dialog { padding: 20px; }
  .sb-modal__title { font-size: 22px; }
  .sb-mailami__row { gap: 0; }
}

/* ============================================================ */
/* DIAPORAMA fiche produit (vanilla) - habillage Simon Bureau   */
/*   Remplace le carrousel + la modale Bootstrap natifs.        */
/*   Cadre 1:1 (images product_main 720x720), image en contain  */
/*   (jamais rognee : le drapeau d'origine est dans la photo).  */
/*   Anime par assets/js/diaporama.js (window.diaSlides).       */
/* ============================================================ */

.diaporama-root {
  width: 100%;
  margin: 0 auto;
}

.diaporama-root *,
.diaporama-root *::before,
.diaporama-root *::after { box-sizing: border-box; }

/* -- Grande image : cadre carre, image entiere -- */
.diaporama-root .slideshow {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--gris-border);
  border-radius: 6px;
  overflow: hidden;
  cursor: zoom-in;
}

.diaporama-root .slide {
  display: none;
}

.diaporama-root .slide.active { display: block; }

.diaporama-root .slide img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* -- Fleches de navigation : pastilles Simon -- */
.diaporama-root .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--gris-border);
  color: var(--noir);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  z-index: 10;
}

.diaporama-root .nav-btn:hover {
  background: #ffffff;
  border-color: var(--vert);
  color: var(--vert);
}

.diaporama-root .nav-btn.prev { left: 12px; }
.diaporama-root .nav-btn.next { right: 12px; }

.diaporama-root .nav-btn svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* -- Bandeau de vignettes : grille 4 par ligne (comme la prod) -- */
.diaporama-root .thumbnails {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.diaporama-root .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--gris-border);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s, box-shadow 0.2s;
}

.diaporama-root .thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none;
}

.diaporama-root .thumb:hover { opacity: 0.85; }

.diaporama-root .thumb.active {
  opacity: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* -- Lightbox -- */
.dia-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100030; /* au-dessus de la recherche header (100000) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px; /* espace fleche <-> image */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.dia-lightbox.open {
  visibility: visible;
  opacity: 1;
}

.dia-lightbox .lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  cursor: zoom-out;
}

.dia-lightbox .lb-content {
  position: relative;
  z-index: 1;
  order: 2; /* [fleche prev][image][fleche next] */
  max-width: calc(100vw - 160px);
  max-height: 88vh;
}

.dia-lightbox .lb-img-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

.dia-lightbox .lb-img-wrap img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
}

.dia-lightbox .lb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--gris-border);
  color: var(--noir);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.dia-lightbox .lb-close:hover {
  border-color: var(--vert);
  color: var(--vert);
}

.dia-lightbox .lb-close svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round;
}

.dia-lightbox .lb-nav {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--gris-border);
  color: var(--noir);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  z-index: 2;
}

.dia-lightbox .lb-nav:hover {
  border-color: var(--vert);
  color: var(--vert);
}

.dia-lightbox .lb-prev { order: 1; }
.dia-lightbox .lb-next { order: 3; }

.dia-lightbox .lb-nav svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* -- Responsive : fleches lightbox masquees sur mobile -- */
@media (max-width: 600px) {
  .dia-lightbox .lb-nav  { display: none; }
}

/* === Bug F : zone de contenu fluide (sticky-footer PS9 neutralise) =====
   Le grand blanc variable avant le footer = un wrapper a hauteur forcee
   (min-height ~100vh OU flex-grow:1 dans un parent en min-height:100vh)
   qui ne suit pas son contenu. On le rend fluide : min-height:0 annule la
   hauteur forcee, flex:0 0 auto annule la croissance du sticky-footer.
   Resultat : le footer remonte directement sous le contenu reel. */
#wrapper,
#main,
#content-wrapper,
.columns-container {
  min-height: 0;
  flex: 0 0 auto;
}

/* BFC sur la zone de contenu : contient les flottants des pages CMS
   (.fl_left / .fl_right des CGV) sans rogner les blocs full-bleed 100vw. */
#content {
  display: flow-root;
  height: auto;
}

/* =====================================================================
   Fil d'ariane - calque du scope prod .mod.ariane .breadcrumb
   Cible preprod PS9 : nav.breadcrumb__wrapper > .container > ol.breadcrumb
   > li.breadcrumb-item > a.breadcrumb-link > span (dernier item = span seul).
   Rendu prod : bande de fond vert pale #eefff5, liens et page courante en
   #343434 (liens soulignes), separateurs "/" en gris clair #b6bbbf, taille 12px.
   Jamais affiche sur la home => auto-safe.
   ===================================================================== */

/* Bande pleine largeur, fond vert pale prod (cf. #top_center) ; collee au header */
.breadcrumb__wrapper {
  margin-top: 0;
  background: #eefff5;
}

/* Liste : padding vertical prod, sans marge ni fond (override Bootstrap) */
.breadcrumb__wrapper .breadcrumb {
  padding: 20px 0;
  margin: 0;
  font-size: 12px;
  background: none;
}

/* Tout le texte en gris prod #343434 */
.breadcrumb__wrapper .breadcrumb,
.breadcrumb__wrapper .breadcrumb-item,
.breadcrumb__wrapper .breadcrumb-item > span,
.breadcrumb__wrapper .breadcrumb-link {
  color: #343434;
}

/* Separateur "/" : gris clair prod #b6bbbf (recoloration du ::before natif Bootstrap) */
.breadcrumb__wrapper .breadcrumb-item + .breadcrumb-item::before {
  color: #b6bbbf;
  font-size: 12px;
  vertical-align: -1px;
}

/* Liens : soulignes, gris #343434 maintenu au survol */
.breadcrumb__wrapper .breadcrumb-link {
  text-decoration: underline;
}
.breadcrumb__wrapper .breadcrumb-link:hover,
.breadcrumb__wrapper .breadcrumb-link:focus {
  color: #343434;
  text-decoration: underline;
}

/* =====================================================================
   Pages CMS (CGV, mentions, etc.) — calque du scope prod .mod.textes_pages
   Cible preprod : #content.page-content--cms (rich-text natif PS9).
   Corrige : titres trop gros + colles au texte (h2 Bootstrap = 2rem,
   margin-top:0). Valeurs reprises a l'identique de ancien-site.css.
   ===================================================================== */

.page-content--cms {
  color: #58585a;
}
/* Densite prod UNIQUEMENT dans les deux cadres identite (12px / interligne 14px,
   paragraphes a 7px). Ne touche PAS au corps du contenu CMS (articles, .sep...). */
.page-content--cms .id_bloc_12,
.page-content--cms .id_bloc_13,
.page-content--cms .cadre_1 {
  font-size: 14px;
}
.page-content--cms .id_bloc_12 p,
.page-content--cms .id_bloc_13 p {
  margin-bottom: 7px;
}

/* Tous les titres : taille + espacement prod (margin-top retabli) */
.page-content--cms h2, .page-content--cms .h2,
.page-content--cms h3, .page-content--cms .h3,
.page-content--cms h4, .page-content--cms .h4,
.page-content--cms h5, .page-content--cms .h5 {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 18px;
  color: #58585a;
}

/* H2 : vert Simon */
.page-content--cms h2, .page-content--cms .h2 {
  color: #0e7361;
}
.page-content--cms h2 a, .page-content--cms .h2 a {
  color: #58585a;
  text-decoration: none;
}
.page-content--cms h2 a:hover, .page-content--cms .h2 a:hover {
  text-decoration: underline;
}

/* H3 : noir 16px */
.page-content--cms h3, .page-content--cms .h3 {
  font-size: 16px;
  color: #000;
}

/* H4 / H5 : 14px */
.page-content--cms h4, .page-content--cms .h4,
.page-content--cms h5, .page-content--cms .h5 {
  font-size: 14px;
}

/* Listes : puces carrees prod */
.page-content--cms ul {
  list-style: square inside;
}

/* Liens dans le contenu CMS : vert, souligne au survol */
.page-content--cms a {
  color: #0e7361;
  text-decoration: none;
}
.page-content--cms a:hover {
  text-decoration: underline;
}

/* ---- Bloc identite : 2 cadres cote a cote (.id_bloc_12 / .id_bloc_13) ----
   Classes confirmees : le contenu PROD emballe l'identite dans
   <div class="id_bloc_12/13">. NE S'AFFICHE que si ces div sont presents dans
   le contenu preprod ; la migration les a aplatis en <p> -> a restaurer
   (migration.php) sinon le cadre n'a rien a cibler. Valeurs reprises de prod. */
.page-content--cms .id_bloc_12,
.page-content--cms .id_bloc_13 {
  float: left;
  width: 47%;
  min-height: 202px;
  padding: 12px 12px 0;
  margin-bottom: 24px;
  color: #000;
  border: 1px solid #e6e7e7;
}
.page-content--cms .id_bloc_13 {
  float: right;
}

/* ---- Paire de cadres en flex : hauteurs egales (cf. simon_bloctexte) ----
   align-items:stretch (defaut) => les deux cadres prennent la hauteur du plus
   grand. clear sur la row pour passer sous un contenu flottant precedent. */
.page-content--cms .sb-cadres-row {
  display: flex;
  justify-content: space-between;
  clear: both;
  margin-bottom: 24px;
}
.page-content--cms .sb-cadres-row .id_bloc_12,
.page-content--cms .sb-cadres-row .id_bloc_13 {
  float: none;
  width: 47%;
  margin-bottom: 0;
}
.page-content--cms .id_bloc_12 p {
  margin-bottom: 7px;
}
.page-content--cms .id_bloc_12 a,
.page-content--cms .id_bloc_13 a {
  color: #8c161b;
  text-decoration: none;
}
.page-content--cms .id_bloc_12 a:hover,
.page-content--cms .id_bloc_13 a:hover {
  text-decoration: underline;
}
.page-content--cms .id_bloc_13 strong {
  color: #000;
}

/* ---- Liste d'articles sur 2 colonnes (.cadre_1 > ul.fl_left / ul.fl_right) ----
   Markup present dans le contenu migre. Le float (absent d'ancien-site.css,
   herite d'une base) est retabli explicitement : seul moyen d'obtenir les 2
   colonnes prod. ::after pour contenir les flottants. */
.page-content--cms .cadre_1 {
  clear: both;
  position: relative;
  margin: 20px 0;
}
.page-content--cms .cadre_1::after {
  content: "";
  display: block;
  clear: both;
}
.page-content--cms .cadre_1 ul {
  margin: 0;
  padding-left: 2rem;
  list-style: none;
}
.page-content--cms .cadre_1 ul.fl_left {
  float: left;
  width: 45%;
}
.page-content--cms .cadre_1 ul.fl_right {
  float: right;
  width: 54%;
  margin-top: 5px;
}
.page-content--cms .cadre_1 li {
  display: block;
  margin-bottom: 6px;
}
.page-content--cms .cadre_1 a {
  color: #000;
  text-decoration: none;
}
.page-content--cms .cadre_1 a:hover {
  text-decoration: underline;
}

/* ---- Pictos identite dans le contenu CMS (.puce_fnt + glyphe) ----
   Valeurs calees sur ancien-site.css : 13px, vertical-align -1px, sombre
   (#282828), hover bordeaux. Codepoints repris du footer (Halflings, l.928).
   NB prod : police "Glyphicons Regular" (glyphes PUA non relevables ici) ;
   on reste en Halflings, tracé tres proche. */
.page-content--cms .puce_fnt {
  font-weight: bold;
}
.page-content--cms .puce_fnt:before {
  font-family: 'Glyphicons Halflings Regular';
  margin-right: 5px;
  font-size: 13px;
  vertical-align: -1px;
  color: #282828;
}
.page-content--cms .puce_fnt:hover:before {
  color: #8c161b;
}
.page-content--cms .ico.earphone::before { content: "\e145"; }
.page-content--cms .ico.envelope::before { content: "\2709"; }
.page-content--cms .ico.globe::before    { content: "\e135"; }
.page-content--cms .ico.log_book::before { content: "\e043"; }

/* ===================================================================
   PAGE MARQUES (module simon_marques) - specifique
   Seule difference vs categorie : la colonne sidebar a une bordure (prod).
   Scope .page-simon_marques-list => categories NON impactees.
   Le badge "actif" reste celui de la categorie (.sb-side__link--active pale).
   =================================================================== */
.page-simon_marques-list .sb-side__group,
.page-simon-marques-list .sb-side__group,
.module-simon_marques-liste .sb-side__group,
body#module-simon_marques-liste .sb-side__group,
.page-manufacturer .sb-side__group {
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  padding: 24px 18px;
}

/* Bordure desktop uniquement : en mobile la sidebar est deja dans la carte
   jaune "Affiner votre recherche" (.sb-side.is-open), une 2e bordure imbriquee
   est superflue. */
@media (max-width: 991.98px) {
  .page-simon_marques-list .sb-side__group,
  .page-simon-marques-list .sb-side__group,
  .module-simon_marques-liste .sb-side__group,
  body#module-simon_marques-liste .sb-side__group,
  .page-manufacturer .sb-side__group {
    border: none;
    padding: 0;
  }
}


/* =========================================================================
   PANIER — Aperçu (étape 1) — calque prod
   À ajouter à custom.css. Convention .sb-cart-*, variables :root réutilisées.
   Grille 7 colonnes partagée en-tête/ligne :
   ARTICLES | RÉFÉRENCE | PRIX U. | DISPONIBILITÉ | QUANTITÉ | PRIX HT | corbeille
   ========================================================================= */

/* Fond gris PLEINE LARGEUR, bord a bord (equivalent prod #center_column/#top_center : #f8f8f8).
   Conteneur reel = <main id="wrapper"> (layout-full-width Hummingbird). On neutralise
   un eventuel fond blanc porte par #center-column / .page pour laisser le gris ressortir. */
body#cart #wrapper {
  background: var(--gris-top);
}
body#cart #center-column,
body#cart .center-column.page {
  background: transparent;
}

/* Fil d'ariane masque sur le panier (absent en prod). Hummingbird : <nav class="breadcrumb__wrapper">. */
body#cart .breadcrumb__wrapper { display: none; }

/* Zone de contenu centree, SANS fond ni marge verticale (le gris est porte par le wrapper) */
.sb-cart-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 28px 15px 48px;
  font-family: var(--font-corps);
  color: var(--noir);
}

/* ---- Carte tableau (pleine largeur) ---- */
.sb-cart-table {
  display: block;
  width: 100%;
  background: var(--blanc);
  border-radius: 20px;
  padding: 8px 28px 16px;
  margin-bottom: 32px;
}

/* Gabarit de colonnes commun en-tête + ligne */
.sb-cart-head,
.sb-cart-line {
  display: grid;
  grid-template-columns:
    minmax(0, 2.4fr)   /* article */
    minmax(0, 0.9fr)   /* reference */
    minmax(0, 1fr)     /* prix unitaire */
    minmax(0, 1.2fr)   /* disponibilite */
    minmax(0, 1.3fr)   /* quantite */
    minmax(0, 1fr)     /* prix ht */
    44px;              /* corbeille */
  align-items: center;
  column-gap: 12px;
}

/* ---- En-tête de colonnes ---- */
.sb-cart-head {
  padding: 16px 0 10px;
  border-bottom: 1px solid var(--gris-border);
  font-family: var(--font-titre);
  font-size: 14px;
  color: var(--noir);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.sb-cart-head__col--unit,
.sb-cart-head__col--dispo,
.sb-cart-head__col--qty,
.sb-cart-head__col--ref { text-align: center; }

/* ---- Lignes ---- */
.sb-cart-body {}
/* Filet sous CHAQUE produit (y compris le dernier), facon prod. On neutralise
   d'abord toute bordure parasite heritee du theme de base (qui doublait le trait
   entre deux produits), puis un seul border-bottom par ligne. */
.sb-cart-item,
.sb-cart-line {
  border: 0;
}
.sb-cart-line {
  padding: 20px 0;
  border-bottom: 1px solid var(--gris-border);
}

/* Colonne ARTICLES : image + nom + déclinaisons */
.sb-cart-line__col--article {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sb-cart-line__image { flex: 0 0 auto; display: block; }
.sb-cart-line__img.img-fluid {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.sb-cart-line__infos { min-width: 0; }
.sb-cart-line__name {
  display: block;
  color: var(--noir);
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
}
.sb-cart-line__name:hover { color: var(--vert); }
.sb-cart-line__attr {
  margin-top: 4px;
  font-size: 13px;
  color: var(--gris-texte);
}
.sb-cart-line__attr-label { font-weight: 600; }

/* Colonne RÉFÉRENCE */
.sb-cart-line__col--ref {
  text-align: center;
  color: var(--gris-texte);
  font-size: 14px;
}

/* Colonne PRIX UNITAIRE */
.sb-cart-line__col--unit { text-align: center; }
.sb-cart-line__unit-price {
  font-size: 14px;
  font-weight: 400;
}
.sb-cart-line__regular-price {
  display: inline-block;
  margin-left: 6px;
  color: var(--gris-texte);
  text-decoration: line-through;
  font-size: 13px;
}
.sb-cart-line__unit-full {
  display: block;
  font-size: 12px;
  color: var(--gris-texte);
}

/* Colonne DISPONIBILITÉ : pastille + texte */
.sb-cart-line__col--dispo { text-align: center; }
.sb-cart-line__dispo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
}
.sb-cart-line__dispo-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: relative;
}
.sb-cart-line__dispo-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: center / 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.sb-cart-line__dispo--ok  { color: var(--vert-dark); }
.sb-cart-line__dispo--ok  .sb-cart-line__dispo-dot { background: #6f9426; }
.sb-cart-line__dispo--warn { color: #b8860b; }
.sb-cart-line__dispo--warn .sb-cart-line__dispo-dot { background: #d9a300; }
.sb-cart-line__dispo--ko  { color: #c0392b; }
.sb-cart-line__dispo--ko  .sb-cart-line__dispo-dot { background: #c0392b; }
.sb-cart-line__delivery {
  margin-top: 4px;
  font-size: 12px;
  color: var(--gris-texte);
}

/* Colonne QUANTITÉ : pilule arrondie */
.sb-cart-line__col--qty { display: flex; justify-content: center; }
.sb-cart-line__qty .input-group,
.sb-cart-line__qty .bootstrap-touchspin {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--gris-border);
  border-radius: 30px;
  overflow: hidden;
  background: var(--blanc);
  width: auto;
}
.sb-cart-line__qty .input-group input,
.sb-cart-line__qty input.js-cart-line-product-quantity {
  width: 56px;
  text-align: center;
  border: 0;
  background: var(--blanc);
  font-weight: 700;
  color: var(--noir);
  box-shadow: none;
  -moz-appearance: textfield;
}
.sb-cart-line__qty input::-webkit-outer-spin-button,
.sb-cart-line__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sb-cart-line__qty .input-group button,
.sb-cart-line__qty .btn-touchspin,
.sb-cart-line__qty button.js-touchspin,
.sb-cart-line__qty .bootstrap-touchspin-up,
.sb-cart-line__qty .bootstrap-touchspin-down {
  width: 44px;
  border: 0;
  background: #f3f3f3;
  color: var(--noir);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.sb-cart-line__qty .input-group button:hover,
.sb-cart-line__qty .btn-touchspin:hover { background: #e9e9e9; }

/* Colonne PRIX HT (total ligne) */
.sb-cart-line__col--total {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
}

/* Colonne corbeille */
.sb-cart-line__col--remove { display: flex; justify-content: flex-end; }
.sb-cart-line__remove {
  color: #c6c6c6;
  display: inline-flex;
  text-decoration: none;
  transition: color .15s;
}
.sb-cart-line__remove:hover { color: var(--noir); }
.sb-cart-line__remove .material-icons { font-size: 22px; }

/* =========================================================================
   Rangée basse : texte devis (gauche) + récap (droite)
   ========================================================================= */
.sb-cart-page__bottom {
  display: grid;
  grid-template-columns: 1fr minmax(0, 480px);
  gap: 32px;
  align-items: start;
}

/* Bloc texte / actions à gauche */
.sb-cart-page__intro { font-size: 16px; }
.sb-cart-page__intro a { color: var(--vert); }
.sb-cart-page__intro a:hover { color: var(--vert-dark); }
.sb-cart-page__continue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--gris-texte);
  text-decoration: none;
  font-weight: 600;
}
.sb-cart-page__continue:hover { color: var(--vert); }

/* Carte récap à droite */
.sb-cart-page__aside .sb-cart-summary,
.sb-cart-summary {
  background: var(--blanc);
  border-radius: 20px;
  padding: 8px 28px;
}


/* =========================================================================
   Bandeau d'etapes (1-4) facon prod
   ========================================================================= */
.sb-cart-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 27px 0;            /* prod : .mod.etapes ul padding */
  margin: 0 auto 28px;
  font-family: 'Barlow Semi Condensed', sans-serif;  /* prod : .mod.etapes li (fonte deja chargee) */
  font-size: 24px;
}
.sb-cart-steps__item {
  color: #b6bbbf;
  font-weight: 400;            /* prod : li sans poids = 400 */
}
.sb-cart-steps__item--current { color: #0e7361; font-weight: 500; }  /* prod : #0e7361 / 500 */

/* Etape courante ou future : non cliquable (le retour n'est permis que vers
   les etapes deja franchies). Pose par defaut cote serveur, reaffine par le JS. */
.sb-cart-steps__item--disabled { pointer-events: none; }

/* Etape franchie : retour PERMIS et signale par le curseur (main), mais sans
   verdir au survol (le a:hover vert global est neutralise plus bas). */
.sb-cart-steps__item--link {
  color: #b6bbbf;
  text-decoration: none;
  cursor: pointer;
}
/* Neutralise le a:hover vert global (custom.css l.135) : le retour reste discret. */
.sb-cart-steps__item--link:hover,
.sb-cart-steps__item--link:focus {
  color: #b6bbbf;
  text-decoration: none;
}
/* Etape courante qui est aussi un lien : le vert prod prime sur le gris du lien
   (specificite combinee, sinon la regle --link plus bas l'emporte). */
.sb-cart-steps__item--link.sb-cart-steps__item--current {
  color: #0e7361;
}

/* Bande pleine largeur facon prod (#top_center). Tunnel = vert clair #eefff5.
   Le bandeau est rendu hors du .container (sous main.wrapper), donc le fond
   s'etend bord a bord sans hack. La classe --tunnel est posee par
   checkout-navigation.tpl ; le panier (cart.tpl) n'a pas de fond, inchange. */
.sb-cart-steps--tunnel {
  background: #eefff5;
  margin-bottom: 46px;        /* prod : #top_center margin-bottom */
}
/* Separateur = chevron SVG facon prod (12x23, stroke #B6BBBF, width 2) */
.sb-cart-steps__sep {
  font-size: 0;
  width: 12px;
  height: 23px;
  flex: 0 0 auto;
  margin: 0 30px;            /* prod : .mod.etapes li:before margin 0 30px */
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg width='12' height='23' viewBox='0 0 12 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.994139 1.5L10.9941 11.5L0.994141 21.5' stroke='%23B6BBBF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (max-width: 767.98px) {
  .sb-cart-steps {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 0;
  }
  .sb-cart-steps__item {
    font-size: 14px;
    letter-spacing: .02em;
  }
  .sb-cart-steps__item--current {
    font-size: 24px;
  }
  .sb-cart-steps__sep { display: none; }
}


/* =========================================================================
   Recap : masquer la ligne Livraison (absente en prod) + bouton de validation
   ========================================================================= */
body.cart .cart-summary-line.cart-summary-shipping,
.sb-cart-summary .cart-summary-shipping,
.sb-cart-summary .cart-summary-line--shipping { display: none; }

/* Bouton de validation : pilule vert fonce, largeur auto, alignee a droite */
.sb-cart-page__aside .checkout,
.sb-cart-page__aside .cart-detailed-actions { text-align: right; }
.sb-cart-page__aside .checkout a,
.sb-cart-page__aside .cart-detailed-actions a.btn,
.sb-cart-summary a.btn-primary,
.sb-cart-summary button[type=submit] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 16px 32px;
  background: var(--vert-dark);
  border: 0;
  border-radius: 40px;
  color: var(--blanc);
  font-family: var(--font-titre);
  font-weight: 600;
  font-size: 18px;
}
.sb-cart-page__aside .checkout a:hover,
.sb-cart-summary a.btn-primary:hover { background: var(--vert); }

/* =========================================================================
   RESPONSIVE — sous 992px : la grille devient des cartes empilées
   (data-label rend visible l'intitulé de chaque champ)
   ========================================================================= */
@media (max-width: 991.98px) {
  .sb-cart-head { display: none; }

  .sb-cart-line {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 10px;
    padding: 20px 0;
  }
  .sb-cart-line__col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right;
  }
  .sb-cart-line__col[data-label]::before {
    content: attr(data-label);
    font-family: var(--font-titre);
    text-transform: uppercase;
    font-size: 12px;
    color: var(--gris-texte);
    text-align: left;
  }

  /* 1. Ordre visuel : article -> reference (collee sous le titre) ->
     disponibilite -> prix unitaire -> quantite -> prix HT.
     La corbeille sort du flux (badge). */
  .sb-cart-line__col--article { order: 1; }
  .sb-cart-line__col--ref     { order: 2; }
  .sb-cart-line__col--dispo   { order: 3; }
  .sb-cart-line__col--unit    { order: 4; }
  .sb-cart-line__col--qty     { order: 5; }
  .sb-cart-line__col--total   { order: 6; }

  .sb-cart-line__col--article,
  .sb-cart-line__col--ref,
  .sb-cart-line__col--dispo,
  .sb-cart-line__col--unit,
  .sb-cart-line__col--qty,
  .sb-cart-line__col--total {
    grid-column: 1 / -1;
  }

  .sb-cart-line__col--article {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding-right: 48px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--gris-border);
  }
  .sb-cart-line__img.img-fluid {
    width: 64px;
    height: 64px;
  }

  /* 2. Reference : collee sous le titre, label "Reference" retire (juste
     "Ref." discret devant le numero), alignee sous le nom (largeur image
     90px + gap article 18px). Le filet + l'air passent ici, plus sur
     l'article, pour que la ref semble faire partie du bloc titre. */
  .sb-cart-line__col--ref {
    font-size: 13px;
  }
  .sb-cart-line__col--ref[data-label]::before {
    font-size: 11px;
  }

  /* Disponibilite : seule sur sa ligne desormais. */
  .sb-cart-line__col--dispo .sb-cart-line__dispo {
    font-size: 13px;
    gap: 6px;
  }
  .sb-cart-line__col--dispo .sb-cart-line__dispo-dot {
    width: 18px;
    height: 18px;
  }

  /* 3. Quantite + prix HT : rapproches visuellement (le total suit
     immediatement la quantite, sans le gap standard entre les lignes). */
  .sb-cart-line__col--qty { justify-content: space-between; margin-bottom: -2px; }
  .sb-cart-line__col--total { justify-content: flex-end; gap: 10px; }

  /* 4. Prix HT : bien plus visible, c'est l'info qu'on vient chercher. */
  .sb-cart-line__col--total .sb-cart-line__total {
    font-size: 22px;
    font-weight: 700;
    color: var(--vert-dark);
  }

  /* Corbeille en badge rond, coin haut-droit de la carte (plus besoin de
     scroller toute la ligne pour supprimer). */
  .sb-cart-line__col--remove {
    position: absolute;
    top: 16px;
    right: 0;
    width: 36px;
    height: 36px;
    justify-content: center;
    background: #f6f6f6;
    border-radius: 50%;
  }
  .sb-cart-line__dispo { flex-direction: row; }

  .sb-cart-page__bottom { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Popup panier (blockcart-modal) : style cale sur la prod simon-bureau
   Valeurs reprises de #ajout_panier / .modal (prod), badge + barre en mauve
   #b407df, 2 boutons verts pleins #03a588.
   ========================================================================== */

/* Titre : Barlow Semi Condensed 28px, gras (cf .modal-title prod) */
.blockcart-modal .blockcart-modal__title {
  margin-bottom: 19px;
  line-height: 1;
  color: #282828;
  font-size: 28px;
  font-family: "Barlow Semi Condensed", serif;
  font-weight: 600;
  text-transform: none;
}

/* Image produit 90x90 (cf #ajout_panier .img prod) */
.blockcart-modal .blockcart-modal__image {
  height: 90px;
  width: 90px;
  object-fit: contain;
}

/* Nom produit : gras + majuscules (cf modal prod) */
.blockcart-modal .blockcart-modal__name {
  margin-bottom: 10px;
  color: #282828;
  font-weight: bold;
  text-transform: uppercase;
}

/* Bloc prix */
.blockcart-modal .blockcart-modal__pricing {
  margin-bottom: 10px;
}

/* Badge remise : mauve (cf fiche prod .remise, ici en #b407df) */
.blockcart-modal .blockcart-modal__discount {
  display: inline-block;
  padding: 6px 5px;
  margin-right: 4px;
  color: #fff;
  font-weight: bold;
  background: #b407df;
  border-radius: 9px;
}

/* Prix barre : mauve, non gras (cf .txt_barre prod) */
.blockcart-modal .blockcart-modal__regular-price {
  color: #b407df;
  font-size: 16px;
}
.blockcart-modal .blockcart-modal__regular-price span {
  text-decoration: line-through;
}

/* Grand prix : 36px gras (cf .gPrix prod) */
.blockcart-modal .blockcart-modal__price {
  display: block;
  margin-top: 5px;
  color: #282828;
  font-size: 26px;
  font-weight: bold;
}

/* Quantite : seul le chiffre est en gras (via <strong> dans le tpl) */
.blockcart-modal .blockcart-modal__quantity {
  margin-top: 10px;
}

/* Mention ecotaxe : discrete */
.blockcart-modal .blockcart-modal__ecotax {
  font-size: 12px;
}

/* Filets de separation haut + bas du corps (cf prod .modal .modal-body).
   Retrait lateral par MARGE (reduit la largeur du body, ne deborde pas) :
   les filets rentrent comme en prod, sans elargir le modal-content. */
.blockcart-modal .modal-body {
  margin-left: 22px;
  margin-right: 22px;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

/* Pied : 2 boutons verts pleins, pilule (cf .modal-footer .btn prod) */
.blockcart-modal .modal-footer {
  display: flex;
  gap: 16px;
}
.blockcart-modal .blockcart-modal__btn {
  flex: 1;
  display: block;
  width: 100%;
  padding: 14px 20px;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  background: #03a588;
  border: 1px solid #03a588;
  border-radius: 36px;
}
.blockcart-modal .blockcart-modal__btn:hover,
.blockcart-modal .blockcart-modal__btn:focus {
  color: #fff;
  background: #0e7361;
  border-color: #0e7361;
  text-decoration: none;
}

@media (max-width: 767.98px) {
  .blockcart-modal .modal-footer {
    flex-direction: column;
  }
}

/* =====================================================================
   Plan du site (controleur natif Sitemap + override theme simon_bureau)
   Cible : body.page-sitemap. Calque du LOOK prod (card + 2 colonnes) sur les
   VRAIES donnees preprod (catalogue/pages differents de la prod, c'est normal).
   Le rendu des listes utilise un partiel dedie (_sb-sitemap-list.tpl) avec des
   classes propres (sb-sitemap-*) : aucun heritage du markup natif Hummingbird,
   donc pas de tirets d'arbre. Couleurs : liens vert prod #0e7361, titres/parents
   noir (var --noir), card reprise de la card FAQ preprod (var --blanc/--gris-border).
   ===================================================================== */

/* Card (meme traitement que la card FAQ preprod) */
.page-sitemap .sb-sitemap-card {
  padding: 28px 32px;
  background: var(--blanc);
  border: 1px solid var(--gris-border);
  border-radius: 8px;
}

/* Titres de colonne (Categories : / Pages : / FAQ) : noir gras */
.page-sitemap .sb-sitemap-titre {
  margin-bottom: 16px;
  color: var(--noir);
  font-size: 20px;
  font-weight: 700;
}

/* Listes : aucune puce, aucun trait d'arbre */
.page-sitemap .sb-sitemap-list {
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.page-sitemap .sb-sitemap-item {
  list-style: none;
}

/* Sous-listes : indentation simple */
.page-sitemap .sb-sitemap-list--nested {
  padding-left: 20px;
  margin-top: 4px;
}

/* Liens (feuilles) : vert prod, souligne au survol seulement */
.page-sitemap .sb-sitemap-link {
  display: inline-block;
  padding: 3px 0;
  color: #0e7361;
  font-size: 14px;
  text-decoration: none;
}
.page-sitemap .sb-sitemap-link:hover,
.page-sitemap .sb-sitemap-link:focus {
  color: #0e7361;
  text-decoration: underline;
}

/* Parents (noeud avec enfants) : noir gras + chevron bas (couleur heritee) */
.page-sitemap .sb-sitemap-link--parent {
  color: var(--noir);
  font-weight: 700;
}
.page-sitemap .sb-sitemap-link--parent::after {
  content: " \25BE";
  font-size: 11px;
  vertical-align: 1px;
}

/* Bloc FAQ (sous Pages) : titre + questions vertes, sans separateurs (facon prod) */
.page-sitemap .sb-sitemap-faq {
  margin-top: 24px;
}
.page-sitemap .sb-sitemap-faq .sb-faq-questions {
  padding-left: 0;
  margin: 0;
  list-style: none;
}
.page-sitemap .sb-sitemap-faq .sb-faq-questions__item + .sb-faq-questions__item {
  border-top: none;
}
.page-sitemap .sb-sitemap-faq .sb-faq-questions__lien {
  display: inline-block;
  padding: 3px 0;
  color: #0e7361;
  font-size: 14px;
  text-decoration: none;
}
.page-sitemap .sb-sitemap-faq .sb-faq-questions__lien:hover,
.page-sitemap .sb-sitemap-faq .sb-faq-questions__lien:focus {
  color: #0e7361;
  text-decoration: underline;
}

/* Fond de page gris derriere la card (plan du site + FAQ), facon prod :
   la card blanche ressort sur #f8f8f8. Les wrappers n'ayant pas de fond propre,
   on les grise aussi (en plus du body) pour couvrir un fond blanc de base. */
body.page-sitemap,
body.page-sitemap #wrapper,
body.page-sitemap #main,
body.page-sitemap #content-wrapper,
body.page-faq,
body.page-faq #wrapper,
body.page-faq #main,
body.page-faq #content-wrapper {
  background: #f8f8f8;
}

/* ==========================================================================
   Documents PDF de la fiche produit (.files > .file-pdf > a)
   Transpose du rendu prod : picto SVG (feuille + lignes + puces), lien noir
   gras avec le picto a gauche. Place au-dessus des encarts jaunes (cf product.tpl).
   Picto = SVG data-uri, identique a l'ancien site (aucune dependance externe).
   ========================================================================== */
.sb-product__files {
  margin-bottom: 15px;
}
.sb-product__files .file-pdf a {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 10px 0;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-titre);
  letter-spacing: .5px;
  text-decoration: none;
}
.sb-product__files .file-pdf a:hover,
.sb-product__files .file-pdf a:focus {
  color: #000;
  text-decoration: underline;
  text-decoration-color: #000;
}
.sb-product__files .file-pdf a:before {
  content: " ";
  display: inline-block;
  flex-shrink: 0;
  height: 48px;
  width: 48px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('data:image/svg+xml,<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M36.4299 7.28158H36.159V2.71877C36.159 1.81408 35.7521 1.02752 35.0134 0.504393C34.2774 -0.0168573 33.4009 -0.138732 32.5421 0.162205L12.4327 7.28439C10.7546 7.35752 9.41211 8.74502 9.41211 10.441V44.8397C9.41211 46.5816 10.8296 47.9991 12.5715 47.9991H36.4299C38.1718 47.9991 39.5893 46.5816 39.5893 44.8397V10.441C39.5893 8.69908 38.1718 7.28158 36.4299 7.28158ZM33.039 1.57596C33.4355 1.43721 33.8087 1.48783 34.1462 1.72783C34.4865 1.96877 34.659 2.30252 34.659 2.71877V7.28158H16.9309L33.039 1.57596ZM38.0902 44.8397C38.0902 45.7556 37.3449 46.501 36.429 46.501H12.5705C11.6546 46.501 10.9093 45.7556 10.9093 44.8397V10.441C10.9093 9.52596 11.6537 8.78064 12.5687 8.77971H12.5705H12.5762H36.4299C37.3459 8.77971 38.0912 9.52502 38.0912 10.441V44.8397H38.0902ZM35.258 15.3385C35.258 15.7528 34.9224 16.0875 34.509 16.0875H24.3165C23.9021 16.0875 23.5674 15.7519 23.5674 15.3385C23.5674 14.925 23.903 14.5894 24.3165 14.5894H34.508C34.9224 14.5894 35.258 14.925 35.258 15.3385ZM23.5674 18.9478C23.5674 18.5344 23.903 18.1988 24.3165 18.1988H28.8371C29.2515 18.1988 29.5862 18.5344 29.5862 18.9478C29.5862 19.3613 29.2505 19.6969 28.8371 19.6969H24.3165C23.903 19.6969 23.5674 19.3613 23.5674 18.9478ZM19.6234 13.4147H15.3184C14.4493 13.4147 13.7424 14.1216 13.7424 14.9906V19.2956C13.7424 20.1628 14.4493 20.8688 15.3184 20.8688H19.6234C20.4924 20.8688 21.1993 20.1628 21.1993 19.2956V14.9906C21.1993 14.1216 20.4924 13.4147 19.6234 13.4147ZM19.7012 19.2956C19.7012 19.335 19.6655 19.3697 19.6243 19.3697H15.3193C15.278 19.3697 15.2424 19.335 15.2424 19.2956V14.9906C15.2424 14.9503 15.279 14.9138 15.3193 14.9138H19.6243C19.6646 14.9138 19.7012 14.9503 19.7012 14.9906V19.2956ZM19.6234 23.9147H15.3184C14.4493 23.9147 13.7424 24.6206 13.7424 25.4878V29.7956C13.7424 30.6628 14.4493 31.3688 15.3184 31.3688H19.6234C20.4924 31.3688 21.1993 30.6628 21.1993 29.7956V25.4878C21.1993 24.6206 20.4924 23.9147 19.6234 23.9147ZM19.7012 29.7956C19.7012 29.8341 19.6637 29.8697 19.6243 29.8697H15.3193C15.2799 29.8697 15.2424 29.8331 15.2424 29.7956V25.4878C15.2424 25.4485 15.278 25.4138 15.3193 25.4138H19.6243C19.6655 25.4138 19.7012 25.4485 19.7012 25.4878V29.7956ZM19.6234 34.4119H15.3184C14.4493 34.4119 13.7424 35.1188 13.7424 35.9878V40.2928C13.7424 41.1619 14.4493 41.8688 15.3184 41.8688H19.6234C20.4924 41.8688 21.1993 41.1619 21.1993 40.2928V35.9878C21.1993 35.1188 20.4924 34.4119 19.6234 34.4119ZM19.7012 40.2928C19.7012 40.3331 19.6646 40.3697 19.6243 40.3697H15.3193C15.279 40.3697 15.2424 40.3331 15.2424 40.2928V35.9878C15.2424 35.9475 15.279 35.911 15.3193 35.911H19.6243C19.6646 35.911 19.7012 35.9475 19.7012 35.9878V40.2928ZM35.258 25.8356C35.258 26.25 34.9224 26.5847 34.509 26.5847H24.3165C23.9021 26.5847 23.5674 26.2491 23.5674 25.8356C23.5674 25.4222 23.903 25.0866 24.3165 25.0866H34.508C34.9224 25.0866 35.258 25.4222 35.258 25.8356ZM23.5674 29.4478C23.5674 29.0344 23.903 28.6988 24.3165 28.6988H28.8371C29.2515 28.6988 29.5862 29.0344 29.5862 29.4478C29.5862 29.8613 29.2505 30.1969 28.8371 30.1969H24.3165C23.903 30.1969 23.5674 29.8613 23.5674 29.4478ZM35.258 36.3356C35.258 36.75 34.9224 37.0847 34.509 37.0847H24.3165C23.9021 37.0847 23.5674 36.7491 23.5674 36.3356C23.5674 35.9222 23.903 35.5866 24.3165 35.5866H34.508C34.9224 35.5866 35.258 35.9222 35.258 36.3356ZM29.5862 39.9441C29.5862 40.3575 29.2505 40.6931 28.8371 40.6931H24.3165C23.9021 40.6931 23.5674 40.3575 23.5674 39.9441C23.5674 39.5306 23.903 39.195 24.3165 39.195H28.8371C29.2515 39.195 29.5862 39.5306 29.5862 39.9441Z" fill="black"/></svg>');
}

/* ==========================================================================
   Page Contact (controleur natif Contact + override theme simon_bureau)
   Cible : body.page-contact. Calque du LOOK prod AxeNet : titre pleine largeur
   au-dessus, puis deux cards blanches sur fond gris (#f8f8f8).
     - card gauche : coordonnees + horaires + carte (widget simon_content bloc 11)
     - card droite : formulaire natif PS9 (module contactform surcharge)
   Champs arrondis facon prod, asterisques bleus, bouton vert sapin #2d6a4f.
   Vanilla CSS : aucune dependance externe, bordures 1px.
   ========================================================================== */

/* Fond gris derriere les cards (les wrappers n'ont pas de fond propre) */
body.page-contact,
body.page-contact #wrapper,
body.page-contact #main,
body.page-contact #content-wrapper {
  background: #f8f8f8;
}

/* Item de menu CONTACT actif sur la page Contact.
   Le module ps_mainmenu ne marque "current" que les categories / pages CMS,
   jamais les pages controleur (Contact). On reproduit donc le look actif
   (meme rendu que .ps-mainmenu__tree-item--current) sur le lien du menu
   qui pointe vers la page contact, uniquement quand on est sur cette page.
   Full CSS : aucune modif du module ni du menu. */
body.page-contact .header-nav-full-width .ps-mainmenu__tree-link[href*="contact"] {
  background: var(--vert) !important;
  color: #fff !important;
}

.sb-contact {
  width: 100%;
  padding: 24px 15px 48px;
}

.sb-contact__title {
  margin: 0 0 24px;
  color: var(--noir);
  font-family: var(--font-titre);
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
}

.sb-contact__grid {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 24px;
  align-items: start;
}

.sb-contact__card {
  background: var(--blanc);
  border: 1px solid var(--gris-border);
  border-radius: 12px;
  padding: 32px;
}

/* Carte gauche : contenu BO (bloc 11). On habille sans imposer de couleur au texte. */
.sb-contact__card--infos {
  font-size: 16px;
}

.sb-contact__card--infos img {
  max-width: 100%;
  height: auto;
}

/* Carte Maps : l'iframe BO est en 350x350 fixe ; on la rend fluide en largeur
   et on impose une hauteur paysage facon prod (sinon elle s'etire en carre). */
.sb-contact__card--infos iframe {
  width: 100%;
  height: 300px;
  border: 0;
}

.sb-contact__card--infos a {
  color: var(--vert);
}

/* Empilement responsive */
@media (max-width: 991.98px) {
  .sb-contact__grid {
    grid-template-columns: 1fr;
  }
  .sb-contact__title {
    font-size: 30px;
  }
}

/* --------------------------------------------------------------------------
   Formulaire (card droite)
   -------------------------------------------------------------------------- */
.sb-contact-form .form-fields {
  margin: 0;
}

.sb-contact-form__label {
  display: block;
  margin-bottom: 8px;
  color: var(--noir);
  font-family: var(--font-corps);
  font-size: 18px;
  font-weight: 400;
}

/* Asterisque obligatoire : bleu, facon prod */
.sb-contact-form__req {
  color: #1e93d1;
  font-weight: 400;
}

/* Champs : inputs/selects/textarea arrondis, bordure 1px grise */
.sb-contact-form .form-control,
.sb-contact-form .form-select {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  color: var(--noir);
  font-family: var(--font-corps);
  font-size: 16px;
  background-color: var(--blanc);
  border: 1px solid var(--gris-border);
  border-radius: 25px;
}

.sb-contact-form textarea.form-control {
  height: auto;
  min-height: 160px;
  padding: 16px 20px;
  border-radius: 20px;
}

.sb-contact-form .form-control:focus,
.sb-contact-form .form-select:focus {
  outline: 0;
  border-color: var(--vert);
  box-shadow: none;
}

/* Champ fichier : libelle + aide, puis le selecteur natif */
.sb-field--file .sb-contact-form__file-help {
  display: block;
  margin: -2px 0 10px;
  color: var(--noir);
  font-size: 16px;
}

.sb-contact-form .form-control[type="file"] {
  height: auto;
  padding: 11px 20px;
}

/* Separateurs entre sections (lignes fines pleine largeur de la card) */
.sb-contact-form__sep {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--gris-border);
}

/* Texte d'aide sous l'objet */
.sb-contact-form__hint {
  margin: -4px 0 24px;
  color: var(--gris-texte);
  font-style: italic;
}

.sb-contact-form__hint-link {
  color: var(--vert);
  font-style: italic;
}

.sb-contact-form__hint-link:hover,
.sb-contact-form__hint-link:focus {
  color: var(--vert-dark);
  text-decoration: underline;
}

/* Mention champs obligatoires */
.sb-contact-form__mention {
  margin: 0 0 20px;
  font-style: italic;
}

/* Actions : bouton Envoyer vert sapin, pilule, fleche a droite */
.sb-contact-form__actions {
  display: flex;
  justify-content: center;
}

.sb-contact-form__submit,
.sb-contact-form__submit:hover,
.sb-contact-form__submit:focus {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  color: var(--blanc);
  font-family: var(--font-corps);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  background-color: #2d6a4f;
  border: 1px solid #2d6a4f;
  border-radius: 40px;
}

.sb-contact-form__submit:hover,
.sb-contact-form__submit:focus {
  background-color: #245840;
  border-color: #245840;
}

/* Fleche du bouton (SVG data-uri, aucune dependance) */
.sb-contact-form__submit::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('data:image/svg+xml,<svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L7.5 8L1 14.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* ------------------------------------------------------------------ */
/* Fiche produit : mention "Photos prises par nos soins" (occasion).  */
/* Affichee sous le diaporama. Couleur pastille = var(--vert).        */
/* ------------------------------------------------------------------ */
.sb-product__photos-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: #282828;
  font-size: 16px;
}
.sb-product__photos-note-ico {
  flex-shrink: 0;
  color: var(--vert);
}

/* ================================================================== */
/* Panier devis : ecotaxe ligne + recap facon prod + bouton hors card */
/* ================================================================== */

/* Ecotaxe sur la ligne produit (sous prix unitaire et sous prix HT). */
.sb-cart-line__ecotax {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--gris-texte);
  white-space: nowrap;
}

/* Recap : chaque ligne en flex (label gauche / valeur droite), separateur 1px.
   font-size explicite et gap + nowrap sur la valeur : sans ca, un montant a
   4 chiffres (ex. 1 234.00 EUR HT) passe a la ligne et casse l'alignement. */
.cart-summary__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 16px;
}
.cart-summary__line + .cart-summary__line {
  border-top: 1px solid var(--border, #e4e2db);
}
.cart-summary__line--articles .cart-summary__label {
  font-weight: 700;
  text-transform: uppercase;
}
.cart-summary__label--total {
  color: var(--vert);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
.cart-summary__value--total {
  font-weight: 700;
  white-space: nowrap;
}

/* Bouton "Demander un devis" hors de la card recap, aligne a droite. */
.sb-cart-page__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Bouton "Demander un devis" (calque prod) : vert plein, arrondi, fleche a droite. */
.sb-cart-devis-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  background: var(--vert);
  border: none;
  border-radius: 36px;
  cursor: pointer;
}
.sb-cart-devis-btn:hover,
.sb-cart-devis-btn:focus {
  background: var(--vert-dark);
  color: #fff;
  text-decoration: none;
}
.sb-cart-devis-btn.disabled {
  opacity: .6;
  cursor: not-allowed;
}
.sb-cart-devis-btn__arrow {
  display: inline-flex;
  align-items: center;
}
.sb-cart-devis-btn__arrow svg {
  width: 14px;
  height: 14px;
}

/* ============================================================
   TUNNEL DEVIS - ETAPE 2 (Identification) - 3 cartes facon prod
   Reference pixel : ancien-site.css (.mod.client.login .blc_l,
   .blc_l form, .btn-primary.btn-puce, .clr_t_2, .puces_fnt_half).
   Markup calque sur la prod : row + col-md-4. Le login-form natif
   est rendu en ligne (carte 1). Les cartes 2 et 3 revelent le
   customer-form natif. AUCUNE logique core modifiee.
   ============================================================ */

/* Sur cette etape uniquement : on masque la colonne panier et on
   passe le contenu pleine largeur (classe posee en JS si .sb-ident). */
.checkout-grid--no-aside .checkout-grid__aside {
  display: none !important; /* theme.css (charge apres) reaffiche l'aside a specificite egale : !important pour gagner, sinon la colonne recap tire la rangee en hauteur et laisse un vide gris sous les cartes */
}
.checkout-grid--no-aside .checkout-grid__content {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 24px;
}
/* Point 1 : gris PLEINE LARGEUR, bord a bord, sur le vrai conteneur
   Hummingbird <main id="wrapper"> (meme pattern que le panier, ligne
   ~3433). On neutralise le fond blanc de #center-column / .page pour
   laisser le gris ressortir. Scope a l'etape identification via la
   classe .sb-ident-page posee en JS sur #wrapper (le script ne tourne
   que sur cette etape), pour ne pas griser Coordonnees / Livraison /
   Paiement. */
#wrapper.sb-ident-page {
  background: var(--gris-top);
}
#wrapper.sb-ident-page #center-column,
#wrapper.sb-ident-page .center-column.page {
  background: transparent;
}
/* Le vide gris ne vient pas du flex (#wrapper est flex:0 0 auto, il ne
   grandit pas) mais d'un min-height qui etire un conteneur intermediaire.
   On l'annule sur cette etape, sur les conteneurs candidats. */
#wrapper.sb-ident-page,
#wrapper.sb-ident-page #center-column,
#wrapper.sb-ident-page .center-column.page,
#wrapper.sb-ident-page .checkout-grid {
  min-height: 0 !important;
}

/* Carte : fond blanc, padding 24, radius 24, hauteur mini prod.
   Flex colonne pour caler le bouton teaser en bas (prod). */
.sb-ident__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 450px;
  padding: 24px;
  background: #fff;
  border: none;
  border-radius: 24px;
}

/* Titre de carte : Barlow 32, gris fonce, gros espace bas (prod). */
.sb-ident__title {
  margin-bottom: 40px;
  color: #282828;
  font-family: 'Barlow', serif;
  font-weight: 600; /* prod = 500 Barlow ; en preprod le 500 n'est pas charge (400/600/700), donc 600 pour retrouver la graisse */
  font-size: 32px;
  line-height: normal;
}

/* Point 4 : texte d'intro sous le titre de la carte connexion (facon prod). */
.sb-ident__intro {
  margin-bottom: 20px;
}

/* Carte connexion : le formulaire natif passe sur fond jaune (prod). */
.sb-ident__card--login form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: #fcfad6;
  border-radius: 24px;
}

/* Labels de la carte connexion : gris, gras, majuscules (prod). */
.sb-ident__card--login label {
  color: #767676;
  font-weight: 600;
  text-transform: uppercase;
}

/* Champs : pilule, hauteur 48, filet gris clair (valeurs prod). */
.sb-ident .form-control {
  height: 48px;
  border: 1px solid #dedede;
  border-radius: 24px;
  box-shadow: none;
}
.sb-ident textarea.form-control {
  height: auto;
}

/* Point 5 : masquer l'oeil (toggle mot de passe), absent en prod.
   Ciblage STRUCTUREL (pas le data-action natif qui ne mordait pas) :
   le seul bouton dans une .input-group de la carte login = l'oeil.
   On le masque et on restaure le rayon a droite de l'input. */
.sb-ident__card--login .input-group button,
.sb-ident__card--login .input-group .input-group-text {
  display: none;
}
.sb-ident__card--login .input-group > .form-control {
  border-radius: 24px;
}

/* Liens (mot de passe oublie, etc.) en vert fonce prod. */
.sb-ident a {
  color: #0e7361;
}
.sb-ident a:hover,
.sb-ident a:focus {
  color: #03a588;
}

/* ------------------------------------------------------------------
   Point 6 : boutons calques sur la PROD via la classe .btn-puce
   (ajoutee aux boutons dans les 2 tpl). Regles portees telles quelles
   de la bible prod (.btn-primary.btn-puce / .btn.btn-puce / .btn-puce
   span / :before). Scope .sb-ident pour ne PAS toucher aux autres
   boutons PS9 (fiche produit etc.). Le chevron vient de Glyphicons
   Halflings (\E080), police deja chargee en preprod (@font-face).
   IMPORTANT : la regle globale .btn.btn-primary (plus haut dans ce
   fichier) force background-color:var(--vert) !important (#03A588) et
   hover var(--vert-dark) !important. On la bat avec une specificite
   superieure (.sb-ident .btn-primary.btn-puce) + !important sur fond
   et bordure, au repos comme au hover. La prod veut #0e7361.
   ------------------------------------------------------------------ */
.sb-ident .btn.btn-puce {
  display: inline-block;
  overflow: hidden; /* contient les floats internes (sinon hauteur 0) */
  padding: 0;
  color: #fff;
  font-family: 'Barlow', serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  background: #0e7361 !important;
  border: 1px solid #0e7361 !important;
  border-radius: 24px;
}
.sb-ident .btn-primary.btn-puce:hover,
.sb-ident .btn-primary.btn-puce:focus,
.sb-ident .btn-primary.btn-puce:active {
  color: #0e7361;
  background: #fff !important;
  border-color: #0e7361 !important;
}
/* Chevron prod : Glyphicons Halflings chevron-right, flotte a droite. */
.sb-ident .btn-primary.btn-puce::before {
  float: right;
  content: "\E080";
  margin-left: 13px;
  padding-right: 20px;
  font-family: 'Glyphicons Halflings Regular';
  font-size: 16px;
  line-height: 50px;
}
/* Libelle dans un <span>, flotte a droite (a gauche du chevron). */
.sb-ident .btn-puce span {
  display: inline-block;
  float: right;
  padding: 0 10px;
  line-height: 50px;
}
/* Carte connexion : bouton cale a droite/bas comme en prod. */
.sb-ident__card--login .btn-puce {
  align-self: flex-end;
}

/* Carte 2 : intitule vert (clr_t_2) + liste a coches vertes. */
.sb-ident p.sb-ident__lead {
  color: #0e7361;
  font-weight: 700;
}
.sb-ident__list {
  padding: 0;
  margin: 0 0 24px 0;
  list-style: none;
}
.sb-ident__list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.sb-ident__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 1.5em;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 12L13 4.5' stroke='%230e7361' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Carte 3 : note en italique. En prod, em herite de body{color:#212529}
   (donc noir) ; en preprod il herite d'un gris, on force la valeur prod. */
.sb-ident__card--anon em {
  display: block;
  margin-top: 12px;
  color: #212529;
  font-style: italic;
}

/* Bouton teaser cale en bas de carte (prod : position bas). */
.sb-ident__actions {
  margin-top: auto;
  padding-top: 24px;
  /* Remonte le bouton des cartes 2/3 pour l'aligner sur "Se connecter"
     (carte 1, cale plus haut car prisonnier du cadre jaune). */
  margin-bottom: 25px;
  text-align: right;
}

/* Le customer-form natif reste rendu mais masque jusqu'au choix. */
.sb-ident__native {
  margin-top: 24px;
}
.sb-ident__native.is-hidden {
  display: none;
}

/* ------------------------------------------------------------------
/* ------------------------------------------------------------------
   Point 2 : le titre "Informations personnelles" + filet ne sont plus
   masques en CSS mais supprimes a la source (Option A), via la
   surcharge du block 'step' dans personal-information.tpl : le titre
   n'est pas genere sur l'etape courante (aucun <h1> fantome dans le
   DOM). Rien a faire ici.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Point 8 : lien "mot de passe oublie" depouille facon prod.
   Markup natif (rendu par le parent customer/_partials/login-form.tpl) :
   <div class="buttons-wrapper buttons-wrapper--split buttons-wrapper--invert-mobile">
     <a class="btn btn-basic" href="...recuperation-mot-de-passe">...</a>
     <button class="btn btn-primary btn-puce">Se connecter</button>
   </div>
   On enleve la pilule blanche (.btn-basic) : simple lien vert, aligne a
   gauche, SANS soulignement (repos et survol), SANS chevron. Le bouton
   Se connecter reste cale a droite, sous le lien.
   Le LIBELLE ("Vous avez oublie votre mot de passe ?") est traite a part
   (cf. parent / ps_translation), pas en CSS.
   ------------------------------------------------------------------ */
.sb-ident__card--login .buttons-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;        /* espace lien -> bouton (large, comme prod) */
  margin-top: 0;    /* le lien colle au champ mot de passe (comme prod) */
}
.sb-ident__card--login .buttons-wrapper .btn-basic {
  align-self: flex-end;
  display: inline-block;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: #0e7361;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.sb-ident__card--login .buttons-wrapper .btn-basic:hover,
.sb-ident__card--login .buttons-wrapper .btn-basic:focus {
  color: #0e7361;
  text-decoration: none;
  background: none;
}
.sb-ident__card--login .forgot-password a::after {
  content: " \203A"; /* chevron > facon prod */
  display: inline-block;
  margin-left: 4px;
}

/* ------------------------------------------------------------------
   Point 7 : graisses generales un cran au-dessus (prod = Open Sans,
   rendu plus soutenu). Sobre : paragraphes et puces en 500. A ajuster
   si tu veux plus/moins (les labels sont deja en 600 plus haut).
   ------------------------------------------------------------------ */
/* Paragraphes et puces : graisse normale (le 500 rendait trop gras les
   textes noirs). Les coches (SVG) donnent deja le poids visuel a la liste. */
.sb-ident p,
.sb-ident__list li {
  font-weight: 400;
}

/* Responsive : une carte par ligne sous 768px (prod). */
@media (max-width: 767.98px) {
  .sb-ident__card {
    min-height: 1px;
    margin-bottom: 32px;
  }
  .sb-ident__title {
    margin-bottom: 24px;
    font-size: 28px;
  }
}

/* ==========================================================================
   Tunnel devis (etapes 2 a 4 - body#checkout / page-order) : chrome allege.
   On reproduit la prod : header SANS recherche ni menu principal (la barre du
   haut + le logo + Mon compte/Panier sont conserves), footer reduit a la barre
   noire copyright. L'etape 1 (panier, body#cart) n'est PAS concernee.
   ========================================================================== */

/* Header : masquer la recherche et le menu principal (barre du haut conservee) */
body#checkout .header-banner,
body#checkout .sb-search,
body#checkout .header-nav-full-width {
  display: none;
}

/* Recherche retiree : on recolle logo a gauche / compte-panier a droite
   (sb-logo 25% + sb-userinfo 33.33% laisseraient sinon un vide a droite). */
body#checkout .header-bottom__row {
  justify-content: space-between;
}

/* Footer : masquer newsletter (#newsletter) et colonnes (#footer_2),
   on ne garde que la barre noire copyright (#footer_3). */
body#checkout #newsletter,
body#checkout #footer_2 {
  display: none;
}

/* ============================================================
   Etape checkout : espaces verticaux AU-DESSUS et EN DESSOUS des
   3 cartes. Ils ne sont PAS dans custom.css : ils viennent du natif
   Hummingbird (.step / .step__content, theme.css charge apres). On les
   neutralise sur le tunnel uniquement ; le rythme vertical reste porte
   par .checkout-grid__content (24px).

   IMPACT SITE = NUL ailleurs, double garde-fou :
   1. scope body#checkout -> uniquement le controleur order (etapes 2-3-4).
      Jamais accueil / produit / categorie / CMS / panier (body#cart).
   2. .step et .step__content sont des classes propres au tunnel checkout
      PS9 ; elles n'existent nulle part ailleurs dans le theme.
   Seules les etapes 3 (Coordonnees) et 4 (Envoi) heritent du meme reglage
   (meme controleur) : a controler visuellement quand on les construira.
   ============================================================ */
body#checkout .step,
body#checkout .step__content {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   Etape 3 du tunnel devis : "Coordonnees" (simon-coordinates.tpl).
   Formulaire unique (identite + adresse + facturation + message + CGV) rendu
   dans un seul <form>, calque sur la PROD (form-horizontal jaune .blc_l) :
   carte jaune, titres de section + filet vert, champs pilule pleine largeur,
   bouton VALIDER vert .btn-puce avec chevron, aside devis [BLOCTEXTE:54] gris.
   Scope total .sb-coord -> aucun effet de bord ailleurs dans le tunnel ni le
   site. Memes tokens / memes valeurs que l'etape 2 (.sb-ident) pour coherence.
   Le grisage pleine page et le masquage de l'aside panier natif sont deja
   geres (#wrapper.sb-ident-page + .checkout-grid--no-aside, plus haut).
   ========================================================================== */

/* Colonne formulaire : carte BLANCHE facon prod. Attention : le jaune
   #fcfad6 de .mod.client form est reserve a la carte CONNEXION (etape 2) ;
   le form coordonnees/inscription est repasse en blanc en prod via
   .mod.client.compte.inscription form { background:#fff }. */
.sb-coord__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: #fff;
  border-radius: 24px;
}

/* Sections : espace entre blocs (le natif porte deja ses marges internes). */
.sb-coord__block {
  margin: 0;
}

/* Titre de section : Barlow, gris fonce, taille prod (.form-title = 28px).
   Le 500 prod n'etant pas charge en preprod (400/600/700), on prend 600. */
.sb-coord__title {
  margin: 0 0 8px 0;
  color: #282828;
  font-family: 'Barlow', serif;
  font-weight: 600;
  font-size: 28px;
  line-height: normal;
}

/* Numero de titre en vert prod (#0e7361), le libelle reste sombre. */
.sb-coord__num {
  color: #0e7361;
}

/* Filet vert sous le titre (prod : border-bottom 1px solid #0e7361). */
.sb-coord__rule {
  margin: 0 0 20px 0;
  border: 0;
  border-top: 1px solid #0e7361;
}

/* Champs : pilule, hauteur 48, filet gris clair (valeurs prod), pleine largeur.
   Couvre input / select / textarea rendus par le partial natif form-fields. */
.sb-coord .form-control,
.sb-coord select,
.sb-coord textarea {
  width: 100%;
  height: 48px;
  border: 1px solid #dedede;
  border-radius: 3px;
  box-shadow: none;
}
.sb-coord textarea,
.sb-coord textarea.form-control {
  height: auto;
  min-height: 140px;
}

/* Selects natifs : pilule prod (border-radius 36px) + chevron discret a droite. */
.sb-coord select {
  border-radius: 36px;
  padding-right: 40px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6L8 11L13 6' stroke='%239e9e9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Date de naissance : les 3 selects (jour/mois/annee) sont RECTANGULAIRES en
   prod (contrairement a Civilite / Pays qui sont en pilule). Le partial natif
   les enveloppe dans .js-parent-focus. */
.sb-coord .js-parent-focus select {
  border-radius: 3px;
}

/* Filet de separation avant la consigne telephone (gris fin, facon prod). */
.sb-coord__sep {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid #e5e5e5;
}

/* Civilite et Pays : selects moins larges qu'une pleine colonne (facon prod).
   Ajuster le max-width si besoin pour coller au pixel. */
.sb-coord #field-id_gender,
.sb-coord #field-id_country,
.sb-coord .sb-coord__narrow {
  max-width: 340px;
}

/* Labels : gris, gras, casse normale (prod coordonnees = .control-label,
   PAS en majuscules contrairement a la carte connexion etape 2). */
.sb-coord .form-control-label,
.sb-coord label.col-form-label,
.sb-coord .form-label,
.sb-coord .form-check-label,
.sb-coord .sb-coord__label {
  margin-bottom: 5px;
  color: #767676;
  font-weight: 600;
}

/* Asterisque obligatoire en bleu prod (clr_oblig #009ee0).
   Le partial natif form-fields.tpl pose la classe .required sur le <label>
   (form-label / form-check-label) ; l'etoile est ajoutee par le theme
   Hummingbird via ::after (en rouge). On recolore donc ::after, scope .sb-coord,
   avec !important pour battre la regle rouge du theme. .sb-coord__req reste pour
   nos propres asterisques (CGV, mention champs obligatoires). */
.sb-coord__req {
  color: #009ee0;
}
.sb-coord .required::after {
  color: #009ee0 !important;
}

/* Mention "Optionnel" sous chaque champ non requis (form_field_comment du
   partial natif, rendu en <div class="form-text">) : absente en prod, on la
   masque. Les commentaires de champ (ex. consigne telephone) sont rendus en
   <span class="form-text"> et restent affiches. */
.sb-coord div.form-text {
  display: none;
}

/* Cases a cocher (facturation differente, CGV) : alignement propre. */
.sb-coord .form-check {
  padding-left: 1.75em;
  margin: 0;
}
.sb-coord .form-check-input {
  margin-top: 0.2em;
}
.sb-coord .form-check-label {
  color: #282828;
  font-weight: 400;
}
.sb-coord__cgv .form-check-label b,
.sb-coord__cgv .form-check-label {
  font-weight: 600;
}
.sb-coord__cgv a {
  color: #0e7361;
  text-decoration: underline;
}

/* Ligne CGV alignee a gauche : case + libelle groupes a gauche.
   Specificite renforcee (.sb-coord .form-check.sb-coord__cgv) pour l'emporter
   sur la regle generale ".sb-coord .form-check" (padding-left: 1.75em) qui
   sinon ecrase notre padding-left: 0 et cree un grand espace vide a gauche. */
.sb-coord .form-check.sb-coord__cgv {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  padding-left: 0;
}
.sb-coord__cgv .form-check-input {
  float: none;
  margin-left: 0;
}

/* Mention champs obligatoires : italique, discrete (prod .obl). */
.sb-coord__required {
  margin: 0;
  font-size: 14px;
  font-style: italic;
}

/* Liens internes au formulaire en vert fonce prod. */
.sb-coord a {
  color: #0e7361;
}
.sb-coord a:hover,
.sb-coord a:focus {
  color: #03a588;
}

/* ------------------------------------------------------------------
   Bouton VALIDER : calque prod via .btn-puce (identique a l'etape 2).
   La regle globale .btn.btn-primary force background var(--vert)
   !important ; on la bat avec .sb-coord .btn-primary.btn-puce +
   !important au repos comme au hover. Prod = #0e7361 + chevron
   Glyphicons Halflings (\E080), police chargee en preprod.
   ------------------------------------------------------------------ */
.sb-coord__actions {
  text-align: right;
}
.sb-coord .btn.btn-puce {
  display: inline-block;
  overflow: hidden;
  padding: 0;
  color: #fff;
  font-family: 'Barlow', serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  background: #0e7361 !important;
  border: 1px solid #0e7361 !important;
  border-radius: 24px;
}
.sb-coord .btn-primary.btn-puce:hover,
.sb-coord .btn-primary.btn-puce:focus,
.sb-coord .btn-primary.btn-puce:active {
  color: #0e7361;
  background: #fff !important;
  border-color: #0e7361 !important;
}
.sb-coord .btn-primary.btn-puce::before {
  float: right;
  content: "\E080";
  margin-left: 13px;
  padding-right: 20px;
  font-family: 'Glyphicons Halflings Regular';
  font-size: 16px;
  line-height: 50px;
}
.sb-coord .btn-puce span {
  display: inline-block;
  float: right;
  padding: 0 10px;
  line-height: 50px;
}

/* ------------------------------------------------------------------
   Aside : carte devis [BLOCTEXTE:54] (hook displayShoppingCartFooter).
   Prod = .blc_txt.l1 -> fond gris #e5e5e5, padding 24, radius 24.
   Scope a l'aside pour ne pas toucher le meme bloc ailleurs.
   ------------------------------------------------------------------ */
.sb-coord__aside .blc_txt,
.sb-coord__aside .bloc_texte,
.sb-coord__aside > div {
  padding: 24px;
  background: #e5e5e5;
  border-radius: 24px;
}
.sb-coord__aside p:last-child {
  margin-bottom: 0;
}

/* Responsive : aside sous le formulaire en pile, sous 992px (col-lg). */
@media (max-width: 991.98px) {
  .sb-coord__aside {
    margin-top: 24px;
  }
}


/* =========================================================================
   Panier vide : calque prod (.mod.panier .blc_l.empty)
   Titre Barlow Semi Condensed 48px, texte, puis bloc warning vert centre.
   Le recap des totaux et le bouton Commander ne sont pas rendus (cart.tpl).
   ========================================================================= */
.sb-cart-empty {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  text-align: center;
}
.sb-cart-empty__title {
  font-family: 'Barlow Semi Condensed', sans-serif;  /* prod : .blc_l.empty .title */
  font-size: 48px;
  font-weight: 500;
  line-height: 1.1;
}
.sb-cart-empty__text {
  margin: 0;
  font-size: 16px;            /* prod : .blc_l font-size 16 */
}
.sb-cart-empty__warning {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #0e7361;             /* prod : .blc_l.empty .warning */
  font-size: 18px;
  font-weight: 600;
}
@media (max-width: 991.98px) {
  .sb-cart-empty__title { font-size: 40px; }
}
@media (max-width: 767.98px) {
  .sb-cart-empty__title { font-size: 30px; }
}
@media (max-width: 575.98px) {
  .sb-cart-empty__title { font-size: 28px; }
}

/* ==========================================================================
   Etape 4 du tunnel devis : "Envoi du devis" (simon-envoi.tpl).
   Carte blanche .blc_l (h1 + texte + bouton VALIDER vert .btn-puce) a gauche.
   Carte droite "Votre Devis" (.recap_cart) : REPRISE MOT POUR MOT des regles
   ancien-site.css fournies le 07/07 (bible absolue), scopees sous .sb-envoi
   pour ne rien casser ailleurs sur le site (classes prod tres generiques :
   title, content, products, qty, txt_upper, txt_right...).
   Seule exception a la bible : .fl_left/.fl_right sont geres en FLEXBOX
   (justify-content:space-between) et non en float, la bible fournie ne
   donnant pas leur regle de float/largeur d'origine. Resultat visuel
   identique (Quantite a gauche, prix a droite, meme ligne), sans les soucis
   de float/collision rencontres le 07/07.
   Le grisage pleine page et le masquage de l'aside panier natif sont deja
   geres (#wrapper.sb-ident-page + .checkout-grid--no-aside, plus haut).
   ========================================================================== */

/* Carte gauche : blanche, padding 24, radius 24 (bible : .blc_l generique). */
/* IMPORTANT (07/07) : ce padding ne doit viser QUE la carte GAUCHE (form).
   Sans le :not(.l2), cette regle visait AUSSI la carte "Votre Devis" (qui
   porte AUSSI la classe blc_l, via "blc_l l2 recap_cart"), en plus des 24px
   deja poses par .title/.content/.total : padding en double, contenu
   resserre (nom du produit qui passe a la ligne, Quantite/Prix decales), et
   la boite noire qui ne touchait plus les bords (donc plus d'arrondi visible
   en bas). La bible dit ".blc_l.l2{padding:0}" : le padding de la carte
   "Votre Devis" vient UNIQUEMENT de ses enfants, jamais d'elle-meme. */
.sb-envoi .blc_l:not(.l2) {
  padding: 24px;
  background: #fff;
  border-radius: 24px;
}
/* Titre h1 : bible = ".blc_l h1" (Barlow Semi Condensed, margin-bottom 28).
   Poids 500 non charge en preprod (400/600/700) -> 600, comme aux etapes 2
   et 3. Taille : la bible ne donne pas de valeur explicite pour ce contexte
   precis (panier/expedition) ; 32px repris par coherence avec .sb-ident__title
   et .sb-coord (memes etapes du tunnel) ; a comparer au pixel prod, ajustable. */
.sb-envoi h1 {
  margin-bottom: 28px;
  color: #282828;
  font-family: 'Barlow Semi Condensed', serif;
  font-weight: 600;
  font-size: 32px;
  line-height: normal;
}
.sb-envoi .blc_l p {
  margin-bottom: 20px;
}

/* Message d'erreur (validateOrder() en echec, cf. SimonDevisEnvoiStep::$erreur). */
.sb-envoi__alert {
  padding: 16px 20px;
  margin-bottom: 20px;
  color: #a94442;
  background: #f2dede;
  border: 1px solid #ebccd1;
  border-radius: 6px;
}

/* Bouton "Envoyer votre Devis" : identique aux etapes 2 et 3 (.btn-puce),
   meme raison d'etre pour le !important (bat .btn.btn-primary global). */
.sb-envoi .txt_left {
  text-align: left;
}
.sb-envoi .btn.btn-puce {
  display: inline-block;
  overflow: hidden;
  padding: 0;
  color: #fff;
  font-family: 'Barlow', serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  background: #0e7361 !important;
  border: 1px solid #0e7361 !important;
  border-radius: 24px;
}
.sb-envoi .btn-primary.btn-puce:hover,
.sb-envoi .btn-primary.btn-puce:focus,
.sb-envoi .btn-primary.btn-puce:active {
  color: #0e7361;
  background: #fff !important;
  border-color: #0e7361 !important;
}
.sb-envoi .btn-primary.btn-puce::before {
  float: right;
  content: "\E080";
  margin-left: 13px;
  padding-right: 20px;
  font-family: 'Glyphicons Halflings Regular';
  font-size: 16px;
  line-height: 50px;
}
.sb-envoi .btn-puce span {
  display: inline-block;
  float: right;
  padding: 0 10px;
  line-height: 50px;
}

/* ---- Carte "Votre Devis" (.recap_cart) : bible ancien-site.css, mot pour mot ---- */
.sb-envoi .recap_cart {
  font-size: 16px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
}
.sb-envoi .recap_cart .title {
  padding: 24px;
  font-size: 24px;
  font-family: 'Barlow Semi Condensed', serif;
  font-weight: 600; /* bible = 500, non charge en preprod (400/600/700) */
  background: none;
}
.sb-envoi .recap_cart .content {
  padding: 0;
  margin: 0 24px;
  border-top: 1px solid #b6bbbf;
}
/* IMPORTANT (07/07) : Hummingbird (theme natif PS9) pose tres probablement sa
   propre regle ".products" (grille de listing categorie/recherche) que je n'ai
   jamais vue (elle n'est pas dans custom.css, mais dans les fichiers du theme).
   Je n'avais JAMAIS pose de regle ".products" moi-meme (seulement sur
   ".products .product"), donc rien ne contrait ce display:grid herite : nos
   produits se retrouvaient ecrases dans une colonne de grille minuscule
   (72px de large constate dans l'inspecteur), d'ou le nom du produit qui
   passait un mot par ligne. On force explicitement le retour en flux normal. */
.sb-envoi .recap_cart .products,
.sb-envoi .recap_cart .products .product {
  display: block;
}
.sb-envoi .recap_cart .products .product {
  padding: 24px 0;
}
.sb-envoi .recap_cart .products .product:last-child {
  border: none;
}
.sb-envoi .recap_cart .products .product span {
  display: block;
}
.sb-envoi .recap_cart .products .product span.name {
  font-size: 16px;
}
.sb-envoi .recap_cart .products .product span.name b {
  font-weight: 400;
  font-family: 'Barlow Semi Condensed', serif;
}
.sb-envoi .recap_cart .products .product span.qty {
  margin-top: 16px;
  font-size: 16px;
}
/* .fl_left/.fl_right : PAS dans la bible fournie (regle de float/largeur
   absente du fichier). Flexbox sur le conteneur .qty a la place, resultat
   visuel identique (Quantite gauche / prix droite, meme ligne). */
.sb-envoi .recap_cart .products .product span.qty {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.sb-envoi .recap_cart .fl_left,
.sb-envoi .recap_cart .fl_right {
  flex: 0 0 auto;
  white-space: nowrap;
}
.sb-envoi .recap_cart .fl_right {
  text-align: right;
}
.sb-envoi .recap_cart .clear {
  display: none; /* n'a plus de role en flexbox (servait a cloturer le float) */
}
.sb-envoi .recap_cart .total_products {
  padding: 24px 0;
  font-size: 16px;
  border-top: 1px solid #b6bbbf;
  font-family: 'Barlow Semi Condensed', serif;
}
.sb-envoi .recap_cart .total_products .row + .row {
  margin-top: 8px;
}
.sb-envoi .recap_cart .total {
  padding: 24px;
  margin: 0;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  background: #282828;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
.sb-envoi .recap_cart .total > span {
  display: block;
  font-size: 16px;
}
.sb-envoi .recap_cart .total .txt_right {
  margin-top: 17px;
  font-size: 24px;
}
.sb-envoi .recap_cart .total .dyn_devise_symbol,
.sb-envoi .recap_cart .products .product span.qty .dyn_devise_symbol {
  display: inline;
}
/* txt_upper / txt_right : absents tels quels de la bible fournie (regle
   generique non incluse dans ce fichier), semantique deduite du nom +
   preuve visuelle (capture prod : capitales, prix aligne a droite). */
.sb-envoi .recap_cart .txt_upper {
  text-transform: uppercase;
}
.sb-envoi .recap_cart .txt_right {
  text-align: right;
}

/* Responsive : recap sous le formulaire en pile (memes seuils Bootstrap
   col-sm que le reste du tunnel). */
@media (max-width: 767.98px) {
  .sb-envoi .col-12.col-sm-5 {
    margin-top: 24px;
  }
}
/* ==========================================================================
   Page "Suivi de ma demande de devis" (order-detail.tpl).
   Toute la page enveloppee dans une carte (.mod.client.commande.blc_l.l2),
   calquee mot pour mot sur la bible ancien-site.css (bandeau titre gris +
   contenu blanc). Scope sous .sb-devis-suivi pour ne pas affecter d'autres
   usages de .blc_l.l2 ailleurs sur le site.
   ========================================================================== */

@layer sb-force {
  .sb-devis-suivi.blc_l.l2 {
    padding: 0;
    background: #fff;
    border-radius: 0 0 24px 24px !important;
    overflow: hidden;
  }
}
.sb-devis-suivi .title {
  padding: 16px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: normal;
  background: #f3f3f3;
}
.sb-devis-suivi .content {
  padding: 14px 16px;
}
/* Le theme Hummingbird pose un --bs-gutter-y en rem sur .row, ce qui cree un
   gros espace vertical entre les elements empiles dans une .row un peu
   partout sur le site (constate le 07/07 : pas seulement sur nos pages
   custom, aussi sur le panier et d'autres). On force la gouttiere verticale
   a 0 GLOBALEMENT (a la racine), plutot que de rapiecer page par page.
   Bootstrap consomme lui-meme cette variable donc pas besoin de !important.
   Si un jour un .row precis a vraiment besoin d'un espacement vertical
   entre ses elements empiles (ex. grille de produits sur mobile), on pourra
   remettre une valeur ciblee juste pour ce .row-la, en surchargeant cette
   regle globale localement. */
:root {
  --bs-gutter-y: 0;
}

/* Menu "Mon espace client" (components/account-menu.tpl reecrit, calque
   bible prod .client_menu). L'ancienne regle ".account-nav a" ne servait a
   rien : cette classe n'existe pas dans le vrai HTML (constate le 07/07),
   la vraie classe est .client_menu.
   IMPORTANT (constate le 07/07) : dans ancien-site.css, le padding/fond/
   bordure de .client_menu sont a l'interieur d'un @media(max-width:767px) :
   c'est un style MOBILE UNIQUEMENT (le menu prend l'aspect d'un accordeon
   depliable sur petit ecran). Sur desktop, la bible n'a AUCUNE boite, juste
   la liste simple. D'ou le decoupage ci-dessous entre regles universelles
   (couleur des liens, liste sans puces) et regles scopees au mobile
   (padding/fond/bordure). *}
.client_menu ul {
  margin: 0;
  padding: 0;
}
.client_menu ul li {
  list-style: none;
  margin-bottom: 8px;
}
/* Bug @layer CSS constate le 07/07 : pour les regles !important, l'ordre
   des couches est INVERSE (une !important posee DANS une @layer du theme
   bat une !important posee HORS de toute couche, comme notre CSS jusqu'ici).
   theme.css declare au moins les couches ps-base et bs-base. On declare ici
   une couche a nous, "sb-force", en lui demandant explicitement de passer
   AVANT elles : pour les !important, la couche la plus en amont gagne. Cette
   declaration d'ordre (juste des noms, sans regles) suffit a repositionner
   notre couche avant les leurs, meme si theme.css est charge en premier. */
@layer sb-force, ps-base, bs-base;

@layer sb-force {
  .client_menu a {
    color: #0e7361 !important;
    text-decoration: none !important;
  }
  .client_menu a:hover,
  .client_menu a:focus {
    color: #0e7361 !important;
    text-decoration: none !important;
  }
}
.client_menu a.actif {
  font-weight: bold;
}
@media (max-width: 767px) {
  .client_menu {
    padding: 18px 21px;
    margin-bottom: 25px;
    background: #f8f8f8;
    border: none;
  }
  .client_menu .mod-title {
    margin-bottom: 12px;
  }
}

/* Page d'accueil du compte (my-account.tpl), liste des 3 liens "Mes
   coordonnees personnelles / Ou en est ma demande ? / Une question sur ma
   demande ?". Calque bible .puces_fnt_half : puce chevron teal devant
   chaque lien (bible = police d'icones Glyphicons non presente dans le
   theme actuel, remplacee par un simple caractere "›" pour ne pas dependre
   d'une police tierce manquante). */
.sb-mon-compte-liens {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.sb-mon-compte-liens li {
  margin-bottom: 8px;
}
.sb-mon-compte-liens li:before {
  content: "›";
  margin-right: 7px;
  color: #0e7361;
  font-weight: bold;
}
.sb-mon-compte-liens a {
  color: #0e7361;
  font-weight: bold;
  text-decoration: none;
}
.sb-mon-compte-liens a:hover,
.sb-mon-compte-liens a:focus {
  color: #0e7361;
  text-decoration: none;
}

/* Carte blanche autour du contenu de la page d'accueil du compte
   (my-account.tpl). Bible = .blc_l simple (padding 24, fond blanc, coins
   arrondis 24 sur les 4 cotes), PAS la variante .l2 utilisee sur la page
   Suivi de demande : ici il n'y a pas de bandeau titre gris a l'interieur,
   le titre "Mon Espace Client" reste natif, EN DEHORS de la carte (constate
   le 07/07 sur la capture prod). */
@layer sb-force {
  .sb-mon-compte.blc_l {
    padding: 24px !important;
    background: #fff !important;
    border-radius: 24px !important;
  }
}

/* Bandeau succes ?new : a l'INTERIEUR de la carte, coins arrondis, ne
   contient QUE le texte "Votre demande est bien enregistree" (confirme le
   07/07) ; le paragraphe "Un e-mail vient..." est EN DEHORS, texte normal. */
.sb-devis-suivi .sb-devis-confirme {
  margin: 0 0 20px;
  padding: 20px 24px;
  font-size: 32px;
  font-weight: 700;
  border-radius: 6px;
}
.sb-devis-suivi .sb-devis-confirme__text {
  margin-bottom: 20px;
}

/* Tableau produits : bible = .mod.client.commande table thead / .reference / td */
.sb-devis-suivi .content {
  font-size: 14px;
}
.sb-devis-suivi table td,
.sb-devis-suivi table th {
  font-size: 12px;
  vertical-align: middle;
}
.sb-devis-suivi table .reference {
  max-width: 100px;
  margin: 0 auto;
  word-wrap: break-word;
}
.sb-devis-suivi .txt_center {
  text-align: center;
}
.sb-devis-suivi .txt_left {
  text-align: left;
}
.sb-devis-suivi .txt_right {
  text-align: right;
}
.sb-devis-suivi .fs_10 {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #767676;
}

/* Tableau Coordonnees : 3 colonnes egales (1/3 chacune), table-layout fixed
   pour que la largeur soit respectee quel que soit le contenu des adresses.
   Les entetes de colonnes (Titulaire compte / Facturation / Livraison) sont
   des <th> pour la semantique, mais ne doivent PAS ressortir en gras comme
   le ferait le poids par defaut du navigateur : seul "Coordonnees" (th.txt_center)
   reste en gras. */
.sb-devis-suivi .sb-devis-coord table {
  table-layout: fixed;
}
.sb-devis-suivi .sb-devis-coord th,
.sb-devis-suivi .sb-devis-coord td {
  width: 33.33%;
}
.sb-devis-suivi .sb-devis-coord th.txt_left {
  font-weight: normal;
}

/* Tableau produits : entete fond gris + filet noir en dessous (bible prod),
   et largeurs de colonnes fixes pour que "Sous-total HT" tienne sur une
   seule ligne (sinon la colonne retombe sur 2 lignes faute de place).
   IMPORTANT : le fond gris doit etre pose sur les <th> eux-memes, pas sur
   <thead> : Bootstrap force background-color:var(--bs-table-bg) (transparent)
   sur CHAQUE cellule via ".table>:not(caption)>*>*" (ancien-site.css), ce
   qui peint par-dessus n'importe quel fond pose sur le thead parent, quelle
   que soit la specificite (constate le 07/07, le fond gris etait invisible). */
.sb-devis-suivi .sb-devis-produits table {
  table-layout: fixed;
}
.sb-devis-suivi .sb-devis-produits thead th {
  background-color: #f3f3f3;
  border-bottom: 1px solid #000;
  font-weight: normal;
}
.sb-devis-suivi .sb-devis-produits th:nth-child(1),
.sb-devis-suivi .sb-devis-produits td:nth-child(1) {
  width: 38%;
}
.sb-devis-suivi .sb-devis-produits th:nth-child(2),
.sb-devis-suivi .sb-devis-produits td:nth-child(2) {
  width: 12%;
}
.sb-devis-suivi .sb-devis-produits th:nth-child(3),
.sb-devis-suivi .sb-devis-produits td:nth-child(3) {
  width: 18%;
}
.sb-devis-suivi .sb-devis-produits th:nth-child(4),
.sb-devis-suivi .sb-devis-produits td:nth-child(4) {
  width: 10%;
}
.sb-devis-suivi .sb-devis-produits th:nth-child(5),
.sb-devis-suivi .sb-devis-produits td:nth-child(5) {
  width: 22%;
}
.sb-devis-suivi .sb-devis-produits th {
  white-space: nowrap;
}

/* Sous 767.98px : les en-tetes ("Reference", "Prix HT") en nowrap n'ont plus
   assez de place et debordaient sur la colonne voisine. On autorise le
   retour a la ligne (les % de largeur, deja en place, suffisent alors a
   tout faire tenir sans aucun scroll). */
@media (max-width: 767.98px) {
  .sb-devis-suivi .sb-devis-produits th {
    white-space: normal;
  }
  .sb-devis-suivi .sb-devis-produits th,
  .sb-devis-suivi .sb-devis-produits td {
    padding: 8px 6px;
    font-size: 13px;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  /* Colonne Prix HT masquee en mobile (deja visible via le sous-total) :
     aere les 3 autres colonnes sans toucher a Designation (38%, inchangee). */
  .sb-devis-suivi .sb-devis-produits th:nth-child(3),
  .sb-devis-suivi .sb-devis-produits td:nth-child(3) {
    display: none;
  }
  .sb-devis-suivi .sb-devis-produits th:nth-child(2),
  .sb-devis-suivi .sb-devis-produits td:nth-child(2) {
    width: 16%;
  }
  .sb-devis-suivi .sb-devis-produits th:nth-child(4),
  .sb-devis-suivi .sb-devis-produits td:nth-child(4) {
    width: 16%;
  }
  .sb-devis-suivi .sb-devis-produits th:nth-child(5),
  .sb-devis-suivi .sb-devis-produits td:nth-child(5) {
    width: 30%;
  }
  /* Montant Sous-total HT aligne a droite en mobile (plus lisible qu'au
     centre sur une colonne etroite), sans toucher au desktop (.txt_center
     natif conserve au-dessus de 767.98px). */
  .sb-devis-suivi .sb-devis-produits td:nth-child(5) {
    text-align: right;
  }
  /* Reference (.reference, margin:0 auto) pas suffisant seul pour centrer
     dans la colonne retrecie a 16% : le td lui-meme n'a pas de txt_center
     natif (contrairement aux autres colonnes). */
  .sb-devis-suivi .sb-devis-produits td:nth-child(2) {
    text-align: center;
  }
}

/* Separateurs entre sections a l'interieur de la carte (remplace les <hr>
   Hummingbird par des filets sobres, coherents avec le reste du site). */
.sb-devis-suivi .order-separator {
  margin: 24px 0;
  border: none;
  border-top: 1px solid #e4e2db;
}

/* Bloc "Historique des etats de votre demande" (bible prod, extrait HTML du
   07/07) : section.last-etats > div.title, reprend le bandeau gris .title
   deja utilise pour le titre de la carte. "Double fond gris sans espace"
   (07/07) : le bandeau titre ET l'entete Date/Statut du tableau sont TOUS
   LES DEUX gris, colles l'un a l'autre sans marge entre les deux (d'ou le
   retrait du margin-bottom pose precedemment). Meme remarque que pour le
   tableau produits : le fond gris doit etre pose sur les <th>, pas sur
   <thead>, sinon Bootstrap le masque avec son background transparent par
   cellule. */
.sb-devis-suivi .last-etats .title {
  margin-bottom: 0;
}
.sb-devis-suivi .last-etats thead th {
  background-color: #f3f3f3;
}

/* Fond gris de la page suivi de demande (order-detail) : meme gris que le
   panier (--gris-top #f8f8f8), pose sur le conteneur pleine largeur #wrapper
   de Hummingbird (l'ancien #columns de la prod n'existe pas ici), cible
   specifique a cette page via body#order-detail. La card blanche du contenu
   ressort alors par contraste sur ce fond. */
body#order-detail #wrapper {background: var(--gris-top);}

/* Meme fond gris pour la page "Mon Espace Client" (my-account), confirme
   par Herve le 07/07 : body#my-account. Meme logique : la card blanche du
   contenu ressort par contraste sur ce fond. */
body#my-account #wrapper {background: var(--gris-top);}

/* Meme fond gris pour la page "Mes coordonnees personnelles" (formulaire
   d'identite), confirme par Herve le 07/07 : body#identity. */
body#identity #wrapper {background: var(--gris-top);}

/* Messages d'erreur inline pour le formulaire "Mes coordonnees personnelles"
   (identity.tpl), nouveau : le tunnel (sb-coord*) n'affiche pas ses erreurs
   comme ca, cette classe n'existait pas encore. */
.sb-coord__error {
  margin-top: 4px;
  font-size: 12px;
  color: #c0392b;
}

/* Page "Mes demandes de devis" (history.tpl) : meme fond gris que les
   autres pages du compte (a verifier : body#history, deduit du meme pattern
   que order-detail/my-account/identity, pas encore confirme par Herve). */
body#history #wrapper {background: var(--gris-top);}

/* Meme fond gris pour la page "Une question sur ma demande de devis ?"
   (module simon_devis, controller question) : convention PrestaShop pour
   l'ID de body d'un controller de module = body#module-{module}-{controller}. */
body#module-simon_devis-question #wrapper {background: var(--gris-top);}

/* Meme fond gris pour la page "Suivi de devis invite" (guest-tracking) :
   meme pattern que order-detail/my-account/identity/history, la card blanche
   du formulaire ressort par contraste sur ce fond. */
body#guest-tracking #wrapper {background: var(--gris-top);}

/* Carte du formulaire de suivi de devis invite (guest-login.tpl, surcharge
   simon_bureau) : reutilise directement .sb-ident__card / .sb-ident__title
   (meme rendu que l'etape 2 du tunnel devis, connexion/creation de compte),
   scope .sb-guest-login uniquement pour cibler la page sans rien ajouter. */

/* Pages d'erreur (403/404/410, contenu partage via not-found.tpl) : fond gris
   pleine largeur + card blanche, meme principe que les autres pages du compte,
   mais scope sur la classe deja confirmee .page-content--not-found (pas d'id de
   body verifie pour ces controleurs, on ne devine pas). */
#wrapper:has(.page-content--not-found) {
  background: var(--gris-top);
}
.page-content--not-found {
  background: #fff;
  border-radius: 24px;
  padding: 24px;
}
.page-content--not-found hr {
  margin: 20px 0;
  border-color: #dedede;
}
.page-content--not-found .sb-not-found__links a,
.page-content--not-found p a {
  color: var(--vert);
}
.page-content--not-found .sb-not-found__links a:hover,
.page-content--not-found p a:hover {
  color: var(--vert-dark);
}
.sb-not-found__links {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}
.sb-not-found__search-input-wrap {
  position: relative;
  width: 100%;
}
.sb-not-found__search-input {
  width: 100%;
  height: 48px;
  padding: 0 48px 0 16px;
  border: 1px solid #282828;
  border-radius: 0;
}
.sb-not-found__search-btn {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Meme fond gris pour la page "Mot de passe oublie" (PasswordController natif) :
   body#password. Meme principe que my-account/identity/order-detail/history
   ci-dessus : la card blanche du contenu ressort par contraste sur ce fond. */
body#password #wrapper {background: var(--gris-top);}

/* Lien "Retour a la connexion" (id unique #back-to-login, present sur
   password-infos.tpl et password-new.tpl) : vert au lieu du bleu natif,
   coherent avec le reste du site. */
body#password #back-to-login,
body#password #back-to-login i {
  color: var(--vert);
}
body#password #back-to-login:hover,
body#password #back-to-login:focus,
body#password #back-to-login:hover i,
body#password #back-to-login:focus i {
  color: var(--vert-dark);
}

/* Conteneur elargi sur les pages mot de passe : le container--limited-sm natif
   est trop etroit pour le titre francais "Vous avez perdu votre mot de
   passe ?", qui repliait le "?" seul sur sa propre ligne. Valeur a ajuster
   si besoin (08/07, retour Herve). */
body#password .container--limited-sm {
  max-width: 650px;
}

/* Loupe "Voir detail" dans le tableau des demandes de devis : meme teal que
   le reste des liens du compte. */
.sb-devis-suivi .sb-devis-loupe {
  color: #0e7361;
}

/* Tableau "Mes demandes de devis" (history.tpl) : calque bible prod (07/07).
   Pas de grille type table-bordered : entete sans bordure sauf un filet noir
   en bas, contenu sans traits verticaux, lignes en alternance de fond
   (zebra). Le fond est pose directement sur les td/th : Bootstrap force
   background-color:var(--bs-table-bg) (transparent) sur chaque cellule via
   ".table>:not(caption)>*>*" (ancien-site.css), qui peindrait par-dessus un
   fond pose sur <tr> seul (meme constat que pour l'entete grise du tableau
   produits, cf. plus haut). */
.sb-devis-suivi .sb-devis-liste {
  border: none;
}
.sb-devis-suivi .sb-devis-liste th,
.sb-devis-suivi .sb-devis-liste td {
  border: none;
}
.sb-devis-suivi .sb-devis-liste thead th {
  border-bottom: 1px solid #000;
}
.sb-devis-suivi .sb-devis-liste tbody tr:nth-child(odd) td {
  background-color: #f3f3f3;
}

/* Vrai coupable du gros espace vertical constate un peu partout sur le site
   (07/07), y compris le panier : ".page-header{margin-bottom:2rem}" pose par
   theme.css, une classe generique utilisee sur beaucoup de pages, pas
   seulement les notres. On la reduit a une valeur en px, coherente avec le
   reste du site. Pas besoin de !important : cette regle native n'en a pas
   elle-meme, notre CSS (hors @layer) gagne deja naturellement face a une
   regle normale posee dans un @layer. */
.page-header {
  margin-bottom: 0;
}

/* Page "Une question sur ma demande de devis ?" (module simon_devis,
   question.tpl). Encart jaune identique a la carte connexion existante
   (#fcfad6, meme couleur, cf. .sb-ident__card--login). */
.sb-question__rule {
  margin: 16px 0 24px;
  border: none;
  border-top: 1px solid #e4e2db;
}
.sb-question__box {
  padding: 24px;
  background: #fcfad6;
  border-radius: 24px;
}
/* Point 1 (07/07) : le texte d'intro "Attention : ..." etait trop petit
   (herite du font-size:14px generique de .sb-devis-suivi .content), corrige
   une premiere fois a 20px puis juge trop gros. Bonne valeur retrouvee dans
   la bible (ancien-site.css, classe .intro) : "margin:0 0 22px 0;
   font-size:16px". */
.sb-question__intro {
  margin: 0 0 22px 0;
  font-size: 16px;
}

/* Point 2 (07/07) : champ en pilule comme partout ailleurs sur le site
   (memes valeurs que .sb-coord : border-radius 36px, chevron discret,
   16px pour le textarea). Largeur limitee en px (07/07) : ne doit pas
   etirer sur 100% de l'encart jaune. */
.sb-question__box textarea.form-control {
  max-width: 480px;
  height: 48px;
  border: 1px solid #dedede;
  box-shadow: none;
}
.sb-question__box textarea.form-control {
  height: auto;
  min-height: 140px;
  border-radius: 16px;
}
.sb-question__box textarea {
  resize: vertical;
}

/* Menu deroulant maison "N° de votre demande" : remplace le select natif
   pour garder un controle total sur le survol des options (impossible de
   maniere fiable en CSS pur sur un vrai select, cf. essais precedents).
   Structure : input hidden (garde la vraie valeur postee, id_order,
   inchange cote formulaire/controller), bouton qui affiche la selection
   et ouvre/ferme la liste au clic, vraie liste ul/li stylee comme on veut,
   survol vert compris. JS vanilla sans dependance dans sb-select-perso.js. */
.sb-select-perso {
  position: relative;
  max-width: 480px;
}
.sb-select-perso__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 48px;
  padding: 0 40px 0 16px;
  color: #282828;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6L8 11L13 6' stroke='%239e9e9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border: 1px solid #dedede;
  border-radius: 36px;
  cursor: pointer;
}
.sb-select-perso__toggle[aria-expanded="true"] {
  border-color: #0e7361;
}
.sb-select-perso__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 10;
  width: 100%;
  max-height: 240px;
  margin: 0;
  padding: 8px;
  list-style: none;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.sb-select-perso__option {
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 12px;
  cursor: pointer;
}
.sb-select-perso__option:hover,
.sb-select-perso__option.is-selected {
  background-color: #0e7361;
  color: #fff;
}

/* Champ de recherche optionnel (08/07), pour les listes longues type Pays.
   Place en tete de liste, hors de .sb-select-perso__option pour ne pas
   heriter du survol vert. */
.sb-select-perso__search-wrap {
  padding: 0 0 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #dedede;
}
.sb-select-perso__search {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  color: #282828;
  background: #f8f8f8;
  border: 1px solid #dedede;
  border-radius: 18px;
}
.sb-select-perso__search:focus {
  outline: none;
  border-color: #0e7361;
}
  height: auto;
  min-height: 140px;
  border-radius: 16px;
}
.sb-question__box textarea {
  resize: vertical;
}
.sb-question__actions {
  margin-top: 16px;
  text-align: right;
}

/* ------------------------------------------------------------------
   Bouton VALIDER : bloc manquant sur cette page (present sur les 3
   autres etapes du tunnel : sb-ident, sb-coord, sb-envoi, mais jamais
   ajoute ici). Regles reproduites telles quelles depuis la bible prod
   (ancien-site.css : .btn-primary.btn-puce / .btn.btn-puce / .btn-puce
   span / :before). Scope .sb-question__box pour ne pas toucher aux
   autres boutons PS9. Le chevron vient de Glyphicons Halflings
   (\E080), police deja chargee en preprod (@font-face).
   IMPORTANT : la regle globale .btn.btn-primary (plus haut dans ce
   fichier) force background-color:var(--vert) !important (#03A588) et
   hover var(--vert-dark) !important. On la bat avec une specificite
   superieure (.sb-question__box .btn-primary.btn-puce) + !important
   sur fond et bordure, au repos comme au hover. La prod veut #0e7361.
   ------------------------------------------------------------------ */
.sb-question__box .btn.btn-puce {
  display: inline-block;
  overflow: hidden; /* contient les floats internes (sinon hauteur 0) */
  padding: 0;
  color: #fff;
  font-family: 'Barlow', serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  background: #0e7361 !important;
  border: 1px solid #0e7361 !important;
  border-radius: 24px;
}
.sb-question__box .btn-primary.btn-puce:hover,
.sb-question__box .btn-primary.btn-puce:focus,
.sb-question__box .btn-primary.btn-puce:active {
  color: #0e7361;
  background: #fff !important;
  border-color: #0e7361 !important;
}
/* Chevron prod : Glyphicons Halflings chevron-right, flotte a droite. */
.sb-question__box .btn-primary.btn-puce::before {
  float: right;
  content: "\E080";
  margin-left: 13px;
  padding-right: 20px;
  font-family: 'Glyphicons Halflings Regular';
  font-size: 16px;
  line-height: 50px;
}
/* Libelle dans un <span>, flotte a droite (a gauche du chevron). */
.sb-question__box .btn-puce span {
  display: inline-block;
  float: right;
  padding: 0 10px;
  line-height: 50px;
}

/* Classe clr_2 de la bible prod (ancien-site.css), reprise pour "Attention"
   (bleu, le gras vient du <b>, pas de la classe, cf. bible : ".clr_2{color:
   #009ee0 !important}"). */
.clr_2 {
  color: #009ee0 !important;
}

/* Lien "votre compte" dans le texte d'intro : meme teal que le reste du
   compte, au lieu du bleu de lien par defaut. */
.sb-question__lien {
  color: #0e7361;
}
.sb-question__lien:hover,
.sb-question__lien:focus {
  color: #0e7361;
}

/* Texte de l'encart jaune (labels du formulaire) en gris, pas noir. */
.sb-question__box .form-label {
  color: #767676;
}

/* Alignement d'image dans le contenu WYSIWYG (simon_content : FAQ, blocs, CMS).
   Repris de la bible prod (ancien-site.css : ".mod.textes_pages .align_left/
   .align_right" + ".content .align_left/.align_right"), portes sur
   .rte-content (conteneur commun du contenu simon_content). */
.rte-content .align_left,
.rte-content .align_right {
  display: inline-block;
}
.rte-content .align_left {
  float: left;
  margin: 0 20px 10px 0;
}
.rte-content .align_right {
  float: right;
  margin: 0 0 10px 20px;
}



/* Mobile : bandeau top masque nativement (d-none d-md-block, !important dans @layer utilities
   de Bootstrap). Un !important hors layer perd TOUJOURS face a un !important dans un layer,
   quelle que soit la specificite : on doit rejouer dans le meme layer pour gagner. */

@layer utilities {
  @media (max-width: 767.98px) {
    .header-top.d-none.d-md-block {
      display: block !important;
    }

    /* .sb-top-left est en d-flex (Bootstrap, !important dans @layer utilities) : chaque
       bout de texte devient un item flex separe et saute ENTIEREMENT a la ligne au lieu
       de wrapper mot a mot. La prod utilise du texte normal (pas flex) qui wrap comme un
       paragraphe -> on repasse en display:block pour retrouver ce comportement. */
    .sb-top-left.d-flex {
      display: block !important;
    }

    /* .sb-top-right a la classe Bootstrap gap-3 (gap: 1rem !important, dans le layer) :
       meme piege, notre override doit etre dans le layer pour gagner. */
    .sb-top-right.gap-3 {
      gap: 0 !important;
    }

    /* Header-bottom : on masque les icones mobile "nues" (compte/panier sans libelle,
       recherche en offcanvas) et on affiche a la place le bloc complet desktop
       (libelles + recherche pleine largeur), chacun sur sa propre ligne. */
    #_mobile_ps_customersignin.d-flex,
    #_mobile_ps_shoppingcart.d-flex,
    .ps-searchbar--mobile.d-flex {
      display: none !important;
    }

    .sb-userinfo.d-none {
      display: flex !important;
    }

    #_desktop_ps_searchbar.d-none {
      display: flex !important;
    }
  }
}

@media (max-width: 767.98px) {
  .header-top.d-none.d-md-block {
    padding: 8px 0 !important;
  }

  #_desktop_ps_contactinfo {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px;
    text-align: center;
  }

  /* Tel + mail affiches avant le showroom, dans cet ordre, comme sur la prod */
  .sb-top-right {
    order: -1;
    flex-direction: column !important;
    margin-bottom: 10px;
  }

  .sb-top-right .sb-tel { order: 1; }
  .sb-top-right .sb-mail { order: 2; }

  /* Le vrai saut de ligne est desormais dans nav.tpl (span.d-inline.d-md-none > br),
     fidele au principe de la bible (ancien-site.css utilise d-lg-none, ici d-md-none
     pour rester coherent avec notre breakpoint 768px deja utilise sur tout ce header). */
  .sb-top-left {
    order: 1;
    text-align: center;
  }

  .sb-top-left svg {
    vertical-align: -3px;
    margin-right: 2px;
  }

  .sb-mail,
  .sb-tel {
    justify-content: center !important;
  }

  .sb-mail {
    font-weight: 600 !important;
  }

  .sb-tel {
    font-size: 18px !important;
    font-weight: 700 !important;
  }

  .sb-top-left strong {
    font-weight: 600;
  }

  /* Header-bottom : logo (ligne 1) / mon compte + panier (ligne 2) / recherche (ligne 3) */

  .header-bottom__row {
    flex-wrap: wrap;
  }

  .header-bottom__logo.sb-logo {
    order: 1;
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: center;
    margin-bottom: 12px;
  }

  .sb-userinfo {
    order: 2;
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: center;
    gap: 24px !important;
    margin-bottom: 12px;
  }

  .sb-userinfo a {
    width: auto !important;
  }

  .sb-search {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  #_desktop_ps_searchbar,
  .ps-searchbar,
  .ps-searchbar__form {
    width: 100% !important;
  }

  /* Plus besoin de reserver la place du selecteur "Dans tout le site" (masque) */
  .ps-searchbar__input {
    padding-right: 50px !important;
  }

  #_desktop_ps_searchbar {
    width: 100% !important;
  }

  /* Selecteur "Dans tout le site" masque sur mobile, comme demande */
  .sb-scope {
    display: none !important;
  }

  /* Menu mobile : bouton burger + panneau accordeon. Le picto maison desktop est masque
     (redondant avec le clic sur le logo). */

  .sb-nav-home {
    display: none;
  }

  .header-nav-full-width .container-md {
    flex-wrap: wrap;
    padding: 0 16px !important;
  }

  .sb-mobile-menu-toggle {
    background: #eefff5;
    margin: 0 -16px;
    width: calc(100% + 32px);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #000;
    cursor: pointer;
  }

  .sb-burger-icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .sb-burger-icon span {
    display: block;
    width: 24px;
    height: 3px;
    background: #000;
    border-radius: 2px;
  }

  .sb-mobile-nav-panel {
    display: none;
    width: 100%;
  }

  .sb-mobile-nav-panel.is-open {
    display: block;
  }

  .header-nav-full-width .ps-mainmenu--desktop {
    display: block;
    width: 100%;
  }

  .header-nav-full-width .ps-mainmenu__tree {
    display: block;
  }

  .header-nav-full-width .ps-mainmenu__tree-item {
    display: block;
  }

  .header-nav-full-width .ps-mainmenu__tree-item-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    border-bottom: 1px solid #e4e2db;
  }

  .header-nav-full-width .ps-mainmenu__tree-link {
    height: auto !important;
    line-height: normal !important;
    padding: 16px 0 !important;
    flex: 1 1 auto;
  }

  .header-nav-full-width .ps-mainmenu__tree-dropdown-toggle {
    padding: 16px !important;
    min-width: 48px;
    flex-shrink: 0;
    justify-content: center;
    display: flex !important;
  }

  /* Masque le chevron decoratif du LIEN (pseudo-element) puisque le vrai bouton,
     desormais visible, a deja le sien */
  .header-nav-full-width .ps-mainmenu__tree-link::after {
    display: none !important;
  }

  .header-nav-full-width .ps-mainmenu__tree-dropdown-toggle::after {
    transition: transform .2s ease;
  }

  .header-nav-full-width .ps-mainmenu__tree-item:not(.is-open) .ps-mainmenu__tree-dropdown-toggle::after {
    border-top-color: var(--vert);
  }

  /* Categorie ouverte : ligne en fond vert, chevron blanc retourne */
  .header-nav-full-width .ps-mainmenu__tree-item.is-open > .ps-mainmenu__tree-item-wrapper {
    background: var(--vert);
  }

  .header-nav-full-width .ps-mainmenu__tree-item.is-open > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-link {
    color: #fff !important;
  }

  .header-nav-full-width .ps-mainmenu__tree-item.is-open > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-dropdown-toggle::after {
    border-top-color: #fff;
    transform: rotate(180deg);
  }

  /* Sous-liste : repliee par defaut (visibility/opacity, meme mecanisme que le hover
     desktop, pas display:none), deroulee en flux normal (pas de flyout absolu). */
  .header-nav-full-width .ps-mainmenu__tree-item:not(.is-open) .ps-mainmenu__dropdown {
    position: static;
    box-shadow: none;
    width: 100% !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    transition: none;
  }

  .header-nav-full-width .ps-mainmenu__tree-item.is-open .ps-mainmenu__dropdown {
    position: static;
    box-shadow: none;
    width: 100% !important;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    transition: none;
  }

  .header-nav-full-width .ps-mainmenu__dropdown-inner {
    padding: 8px 0 !important;
  }

  .header-nav-full-width .ps-mainmenu__columns {
    display: block;
    padding: 8px 0 8px 12px;
    background-image: none;
  }

  .header-nav-full-width .ps-mainmenu__columns > li:nth-child(3n+2),
  .header-nav-full-width .ps-mainmenu__columns > li:nth-child(3n) {
    padding-left: 0;
  }

  .header-nav-full-width .ps-mainmenu__column-item {
    display: block;
  }

  .header-nav-full-width .ps-mainmenu__column-link {
    display: block;
    padding: 10px 0;
    font-family: var(--font-corps);
    font-size: 14px;
    color: var(--gris-texte);
  }

  .header-nav-full-width .ps-mainmenu__dropdown-footer {
    display: block;
    padding: 12px;
  }

  .header-nav-full-width .ps-mainmenu__dropdown-cta {
    display: block;
    text-align: center;
    font-family: var(--font-corps);
    font-size: 14px;
    font-weight: 600;
    color: var(--vert);
  }

  /* Home - section slide : colonnes empilees (image puis bloc vert), le padding-left
     desktop ne sert plus a rien, il faut un espace vertical a la place */
  .sb-slide .col-slider {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 24px;
  }

  /* Fleches prev/next masquees sur mobile (promos, nouveautes, top des ventes), comme prod */
  .sb-cat-nav {
    display: none;
  }

  /* Newsletter : conforme a ancien-site.css (padding + justify-content mobile uniquement) */
  #newsletter {
    padding: 24px 0;
  }

  #newsletter .row {
    gap: 24px;
  }

  #newsletter .reseaux {
    justify-content: start;
    flex-wrap: nowrap;
  }
}

/* Newsletter - titre : breakpoints exacts ancien-site.css */
@media (max-width: 992px) { #newsletter .footer-titre { font-size: 40px; } }
@media (max-width: 768px) { #newsletter .footer-titre { font-size: 30px; } }
@media (max-width: 576px) { #newsletter .footer-titre { font-size: 28px; } }

/* Footer mobile : la prod n'a jamais de collapse, les listes de liens restent toujours
   depliees. On neutralise le collapse Bootstrap natif (data-bs-toggle="collapse") et on
   masque le chevron toggle. */
@media (max-width: 767.98px) {
  #footer_2 .footer-block__content.collapse {
    display: block !important;
    height: auto !important;
  }

  #footer_2 .footer-block__title--toggle button {
    display: none !important;
  }
}

/* Footer bas : le bouton retour-haut (.footer__top) est en position absolute right:0,
   50px de large. Sur mobile le texte de copyright n'a pas de marge reservee et vient le
   toucher. */
@media (max-width: 767.98px) {
  #footer_3 .footer__copyright {
    padding-right: 66px;
    display: block;
  }
}


/* Page categorie (displayCategorie.tpl) : bandeau toggle mobile "Affiner votre
   recherche" (comme prod). Valeurs bible exactes (DevTools prod, ancien-site.css
   ne contenait pas ce composant) :
     .mod.produits_menu_liste { background:#fcfad6; border-radius:24px; } (le fond
     jaune arrondi appartient au conteneur qui englobe bouton + liste, pas au bouton
     seul -> ils forment une seule carte continue quand la liste est ouverte).
     .navbar-toggle { background:none; color:#58585a; font-weight:600; font-size:16px;
     text-transform:uppercase; padding:16px 24px; }
   On ne peut pas dupliquer le wrapper (casserait la grille col-lg-3 desktop), donc on
   reproduit la carte continue en stylant le bouton et l'aside separement, avec des
   coins arrondis complementaires selon l'etat ouvert/ferme. */
@media (max-width: 991.98px) {
  .sb-side-toggle,
  .sb-side {
    overflow-anchor: none;
  }

  .sb-side-toggle {
    display: block;
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    background: #fcfad6;
    border: none;
    border-radius: 24px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #58585a;
    text-align: left;
    cursor: pointer;
  }

  .sb-side-toggle[aria-expanded="true"] {
    border-radius: 24px 24px 0 0;
    margin-bottom: 0;
  }

  .sb-side {
    display: none;
  }

  .sb-side.is-open {
    display: block;
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
    background: #fcfad6;
    border-radius: 0 0 24px 24px;
    padding: 0 24px 16px;
    margin-bottom: 16px;
  }

  /* Toggle "Trier les X articles" (displayCategorie.tpl), fidele au comportement
     prod (bouton Bootstrap collapse) : le bouton reste TOUJOURS visible, ferme ou
     ouvert (il sert aussi a replier). Seuls les champs Afficher/Trier se deploient
     en dessous, dans la meme carte continue -> meme mecanisme que sb-side-toggle/
     sb-side (coins complementaires, pas de disparition du bouton). */
  .sb-toolbar-toggle {
    display: block;
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 16px;
    padding: 16px 24px;
    background: #fcfad6;
    border: none;
    border-radius: 24px;
    text-align: left;
    cursor: pointer;
  }

  .sb-toolbar-toggle[aria-expanded="true"] {
    border-radius: 24px 24px 0 0;
    margin-bottom: 0;
  }

  .sb-toolbar-toggle__pill {
    display: block;
    width: 100%;
    padding: 0 20px;
    line-height: 45px;
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #58585a;
    background: #fff;
    border: 1px solid #b6bbbf;
    border-radius: 36px;
  }

  #sb-toolbar.sb-toolbar {
    display: none;
  }

  #sb-toolbar.sb-toolbar.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
    background: #fcfad6;
    border-radius: 0 0 24px 24px;
    padding: 0 24px 16px;
    margin-bottom: 16px;
  }

  /* Absent du depliant mobile en prod (hidden-xs hidden-sm côté prod : le
     compteur n'existe qu'en desktop, colonne separee). Le texte du bouton
     toggle porte deja le compte ("Trier les X articles"). */
  #sb-toolbar .sb-toolbar__count {
    display: none;
  }

  /* Label au-dessus du select (empile), fidele a la capture prod. Les 2
     champs (Afficher / Trier par) s'empilent l'un sous l'autre via le
     flex-direction:column du formulaire ci-dessus. */
  #sb-toolbar .sb-toolbar__field {
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    gap: 8px;
    width: 100%;
  }
  #sb-toolbar .sb-toolbar__select {
    width: 100%;
  }
}