/* ==========================================================================
   Mégamenu boutique Rue du Store — intégré dans la nav principale du blog.
   Règles desktop (base + @media min-width:1200px) de la boutique,
   re-scopées sous #rds-megamenu. Généré par build_megamenu.py — ne pas éditer.
   ========================================================================== */

#rds-megamenu {
  position: relative;
  z-index: 50;
  width: 100%;
  background: #fd6620;            /* orange du thème : se fond avec le menu principal */
  border-bottom: 1px solid rgba(255,255,255,.18);
  font-family: HelveticaNowDisplay, "Helvetica Neue", Arial, sans-serif;
}
#rds-megamenu .container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 15px;
}
/* .inner positionné => le sous-menu absolu s'étale sur toute la largeur de la barre */
#rds-megamenu .header-nav nav { position: static; }
#rds-megamenu .inner { position: relative; }
#rds-megamenu .header-nav nav ul {
  list-style: none;
  justify-content: center;
}
#rds-megamenu .header-nav nav ul li > a {
  color: #fff;                   /* texte blanc sur la barre orange */
  text-decoration: none;
  white-space: nowrap;
}
/* Au survol, la boutique fait apparaître une « carte » blanche derrière l'entrée
   (pont visuel vers le panneau déroulant blanc) : le texte passe donc en orange. */
#rds-megamenu .header-nav nav ul li:hover > a { color: #fd6620; }
#rds-megamenu .header-nav nav ul li .submenu {
  background: #fff;
  box-shadow: 0 15px 25px rgba(0,0,0,.12);
  border-radius: 0 0 4px 4px;
}
#rds-megamenu .header-nav nav ul li .submenu .categories .category .name { text-decoration: none; }
/* Règle générique .cover de la boutique : dimensionne la vignette dans .category-image
   (la taille du fond est ensuite ajustée par la règle extraite plus spécifique). */
#rds-megamenu .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
}

/* Sous 960px (breakpoint hamburger du thème) : on masque la barre desktop.
   Les catégories shop sont injectées par js/megamenu.js DANS l'onglet
   « Le Shop » (.menu-item-758) du menu hamburger ; un clic sur « Le Shop »
   déploie la liste (.rds-shop-open), chaque catégorie déploie ses sous-cat. */
@media (max-width: 959.98px) {
  #rds-megamenu { display: none; }

  /* Trait au-dessus de la loupe : centré, ne touche pas les bords. */
  #touch-menu .top-search-touch {
    position: relative;
    margin-top: 12px;
    padding-top: 14px;
  }
  #touch-menu .top-search-touch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;            /* la boîte recherche est déjà décalée de 20px => aligné au texte */
    right: 20px;
    height: 1px;
    background: rgba(255,255,255,.3);
  }

  /* Trait distinctif entre le bloc « Le Shop » (en 1er) et le menu blog :
     centré, ne touche pas les bords. */
  #touch-menu .slicknav_nav .menu-item-758 {
    position: relative;
    margin-bottom: 8px;
    padding-bottom: 10px;
  }
  #touch-menu .slicknav_nav .menu-item-758::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20px;         /* aligné au texte des items (padding-left 20px) */
    right: 20px;
    height: 1px;
    background: rgba(255,255,255,.3);
  }

  /* L'onglet « Le Shop » devient un accordéon : flèche pivotée à l'ouverture */
  #touch-menu .slicknav_nav .menu-item-758 > a { cursor: pointer; }
  #touch-menu .slicknav_nav .menu-item-758 > a .fa {
    transition: transform .2s ease;
    display: inline-block;
  }
  #touch-menu .slicknav_nav .menu-item-758.rds-shop-open > a .fa { transform: rotate(90deg); }

  /* Liste des catégories shop, sous « Le Shop » (masquée par défaut) */
  #touch-menu .menu-item-758 .rds-mm-list,
  #touch-menu .menu-item-758 .rds-mm-sub { list-style: none; margin: 0; padding: 0; }
  #touch-menu .menu-item-758 .rds-mm-list { display: none; }
  #touch-menu .menu-item-758.rds-shop-open .rds-mm-list { display: block; }

  #touch-menu .menu-item-758 .rds-mm-cat { border-top: 1px solid rgba(255,255,255,.15); }
  /* Ligne catégorie : lien + bouton +/- en absolu à droite */
  #touch-menu .menu-item-758 .rds-mm-head { position: relative; }
  #touch-menu .menu-item-758 .rds-mm-link {
    display: block;
    padding: 11px 56px 11px 20px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
  }
  #touch-menu .menu-item-758 .rds-mm-link:hover,
  #touch-menu .menu-item-758 .rds-mm-link:focus { color: #fff; opacity: .85; }
  #touch-menu .menu-item-758 .rds-mm-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-style: normal;
    line-height: 1;
    cursor: pointer;
    user-select: none;
  }
  #touch-menu .menu-item-758 .rds-mm-sub { display: none; padding: 0 0 6px; }
  #touch-menu .menu-item-758 .rds-mm-cat.is-open .rds-mm-sub { display: block; }
  #touch-menu .menu-item-758 .rds-mm-sub a {
    display: block;
    padding: 7px 20px 7px 34px;
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-style: normal;
    text-decoration: none;
  }
  #touch-menu .menu-item-758 .rds-mm-sub a:hover,
  #touch-menu .menu-item-758 .rds-mm-sub a:focus { color: #fff; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Règles desktop extraites de la boutique (base + min-width:1200px, re-scopées)
   -------------------------------------------------------------------------- */

#rds-megamenu .header-nav nav ul li .submenu .categories .category img {
  max-width: 100%;
    height: auto!important
}

#rds-megamenu .header-nav {
  position: relative;
    z-index: 2;
    border-top: 1px solid #e8e8e8;
    background-color: #fff
}

#rds-megamenu .header-nav .inner {
  position: relative;
    display: flex;
    justify-content: space-between
}

#rds-megamenu .header-nav .cart {
  position: relative;
    display: inline-flex;
    padding: 0;
    transition: none;
    background-color: #ff7200;
    text-align: center;
    align-content: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch
}

#rds-megamenu .header-nav .cart a {
  display: block;
    height: 100%;
    line-height: 45px
}

#rds-megamenu .header-nav .cart:hover {
  background-color: #ff6900
}

#rds-megamenu .header-nav .cart:hover:before {
  background-color: #ff6900
}

#rds-megamenu .header-nav .cart:hover .icon .quantity {
  border-color: #ff6900
}

#rds-megamenu .header-nav .cart:before {
  position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    content: "";
    transition: none;
    background-color: #ff7200
}

#rds-megamenu .header-nav .cart .icon {
  position: relative;
    width: 22px;
    height: 22px;
    margin: 0 5px 0 0;
    top: -1px
}

#rds-megamenu .header-nav .cart .icon svg {
  width: 100%;
    height: 100%;
    fill: #fff
}

#rds-megamenu .header-nav .cart .icon .quantity {
  font-family: HelveticaNowDisplay,sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    position: absolute;
    top: -3px;
    right: -6px;
    width: 16px;
    height: 16px;
    transition: none;
    text-align: center;
    color: #ff7200;
    border: 2px solid #ff7200;
    border-radius: 50%;
    background-color: #fff
}

#rds-megamenu .header-nav .cart .icon .quantity .loading-mask {
  display: none!important;
    opacity: 0
}

#rds-megamenu .header-nav .cart .text {
  font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    top: 1px;
    position: relative
}

#rds-megamenu .header-nav .close {
  position: fixed;
    top: 30px;
    right: 30px;
    width: 32px;
    height: 32px;
    cursor: pointer
}

#rds-megamenu .header-nav .close {
  display:none
}

#rds-megamenu .header-nav .close svg {
  width: 100%;
    height: 100%;
    fill: #000
}

#rds-megamenu .header-nav nav ul {
  display: flex;
    margin: 0;
    padding: 0
}

#rds-megamenu .header-nav nav ul li {
  display: block
}

#rds-megamenu .header-nav nav ul li .icon-plus {
  display: none
}

#rds-megamenu .header-nav nav ul li.has-submenu>a:after,
#rds-megamenu .header-nav nav ul li.has-submenu>a:before {
  position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    transition: none;
    opacity: 0
}

#rds-megamenu .header-nav nav ul li.has-submenu>a:before {
  z-index: 1;
    box-shadow: 0 15px 20px rgba(0,0,0,.1)!important
}

#rds-megamenu .header-nav nav ul li.has-submenu>a:after {
  z-index: 3;
    background-color: #fff
}

#rds-megamenu .header-nav nav ul li:hover>a span:after {
  width:100%;
        transition: width 250ms ease
}

#rds-megamenu .header-nav nav ul li:hover.has-submenu>a:after,
#rds-megamenu .header-nav nav ul li:hover.has-submenu>a:before {
  opacity: 1
}

#rds-megamenu .header-nav nav ul li:hover.has-submenu>a:before {
  transition: opacity 0s!important;
        transition-delay: 250ms!important
}

#rds-megamenu .header-nav nav ul li:hover.has-submenu .submenu {
  pointer-events: auto;
        opacity: 1;
        transition: opacity,left 0s;
        transition-delay: 250ms;
        left: 0
}

#rds-megamenu .header-nav nav ul li>a {
  font-size: 14px;
    font-weight: 500;
    line-height: 46px;
    position: relative;
    display: flex;
    padding: 0 25px;
    letter-spacing: .035em;
    text-transform: uppercase;
    color: #000
}

#rds-megamenu .header-nav nav ul li>a span {
  position: relative;
    z-index: 4
}

#rds-megamenu .header-nav nav ul li>a span:after {
  position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    content: "";
    transition: none;
    opacity: 1;
    background-color: #ff7200
}

#rds-megamenu .header-nav nav ul li .submenu {
  position: absolute;
    z-index: 2;
    top: 100%;
    left: -99999px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px;
    transition: none;
    pointer-events: none;
    opacity: 0;
    background-color: #fff;
    box-shadow: 0 15px 20px rgba(0,0,0,.1)
}

#rds-megamenu .header-nav nav ul li .submenu .content {
  width: 20%;
    padding: 10px 30px 0 0
}

#rds-megamenu .header-nav nav ul li .submenu .content p {
  font-family: HelveticaNowDisplay,sans-serif;
    font-size: 16px;
    line-height: 1.3;
    margin: 0 0 20px 0
}

#rds-megamenu .header-nav nav ul li .submenu .content p strong {
  font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: #ff7200
}

#rds-megamenu .header-nav nav ul li .submenu .categories {
  display: flex;
    flex-wrap: wrap;
    width: calc(80% + 24px);
    margin: 0!important;
    gap: 15px
}

#rds-megamenu .header-nav nav ul li .submenu .categories .category {
  overflow: hidden;
    width: calc((100% - 72px)/ 3);
    margin: 12px!important;
    transition: none;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.05)
}

#rds-megamenu .header-nav nav ul li .submenu .categories .category:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,.15)
}

#rds-megamenu .header-nav nav ul li .submenu .categories .category .name {
  font-family: HelveticaNowDisplay,sans-serif;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    display: block;
    padding: 0 15px 25px 15px
}

#rds-megamenu .header-nav .inner {
  justify-content: flex-end
}

#rds-megamenu .header-nav .inner nav {
  width: 100%
}

#rds-megamenu .header-nav .inner .cart {
  min-width: 160px
}

#rds-megamenu .header-nav .inner .cart .icon {
  display: inline-block
}

#rds-megamenu .header-nav .inner .cart.devis {
  background: 0 0;
    padding: 0;
    min-width: 150px
}

#rds-megamenu .header-nav .inner .cart.devis:before {
  content: none
}

#rds-megamenu .header-nav .inner .cart.devis a,
#rds-megamenu .header-nav .inner .cart.devis span.obfusque {
  background: #ff2673;
    display: none;
    padding: 0 20px
}

#rds-megamenu .header-nav .inner .cart.devis a.show,
#rds-megamenu .header-nav .inner .cart.devis span.obfusque.show {
  display: flex;
    min-width: 145px;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center
}

#rds-megamenu .header-nav .inner .cart.devis:hover a,
#rds-megamenu .header-nav .inner .cart.devis:hover span.obfusque {
  background: #ff005a
}

#rds-megamenu .header-nav .inner .cart.devis:hover .icon .quantity {
  border-color: #ff005a
}

#rds-megamenu .header-nav .inner .cart.devis .icon .quantity {
  border-color: #ff2673;
    color: #ff005a
}

#rds-megamenu .header-nav nav ul li .submenu .content {
  display: none
}

#rds-megamenu .header-nav nav ul li .submenu .categories {
  width: 100%
}

#rds-megamenu .header-nav nav ul li .submenu .categories .category {
  width: calc(20% - 12px);
    margin: 0!important;
    padding: 0!important
}

#rds-megamenu .header-nav nav ul li .submenu .categories .category .category-image {
  width: 80%;
    padding-bottom: 80%;
    position: relative;
    display: flex;
    margin: auto
}

#rds-megamenu .header-nav nav ul li .submenu .categories .category .category-image .cover {
  background-size: auto 75%;
    background-repeat: no-repeat
}

#rds-megamenu .header-nav nav ul li .submenu .categories .category .submenu {
  display: none
}

#rds-megamenu .header-nav nav ul li .submenu .categories .category .name {
  text-align: center
}

#rds-megamenu .header-nav nav ul li>a {
  font-size: 13px;
    padding: 0 13px
}


/* --------------------------------------------------------------------------
   Intégration visuelle au thème (placé après les règles extraites afin de
   l'emporter sur les fonds blancs de la boutique). La barre devient orange,
   seuls les panneaux déroulants restent blancs.
   -------------------------------------------------------------------------- */
#rds-megamenu,
#rds-megamenu .header-nav {
  background: #fd6620;       /* orange du thème, plein largeur */
}
#rds-megamenu .header-nav {
  border-top: none;
}
#rds-megamenu .header-nav nav ul li > a { color: #fff; }
/* Orange au survol UNIQUEMENT pour les onglets à sous-menu (une carte blanche
   apparaît derrière → l'orange y est lisible). Les onglets sans sous-menu
   (ex. « Conseils ») gardent le texte blanc, sinon orange-sur-orange = invisible. */
#rds-megamenu .header-nav nav ul li.has-submenu:hover > a { color: #fd6620; }
#rds-megamenu .header-nav nav ul li:not(.has-submenu):hover > a { color: #fff; }
/* Les panneaux déroulants restent blancs (lisibilité des vignettes) */
#rds-megamenu .header-nav nav ul li .submenu { background: #fff; }

/* Au survol de « Le Shop » dans le menu sticky (réaffiché au scroll), on réutilise
   le mégamenu existant en le posant en position fixe juste sous la barre sticky.
   Le `top` (= hauteur du sticky) est défini par js/megamenu.js. */
.rds-megamenu.rds-sticky-show {
  position: fixed !important;
  left: 0;
  right: 0;
  z-index: 9999998;
  box-shadow: 0 14px 22px rgba(0,0,0,.13);
}

/* Enchaînement fluide : une fois la barre « armée » (souris restée dedans, cf.
   js/megamenu.js), le passage d'une catégorie à l'autre est INSTANTANÉ — plus de
   délai d'ouverture, donc le panneau ne se ferme plus pour se rouvrir, il enchaîne.
   Le 1er affichage garde son délai de 250ms (anti-ouverture accidentelle). */
#rds-megamenu.rds-armed .header-nav nav ul li:hover.has-submenu .submenu {
  transition-delay: 0s;
}

/* Desktop : les onglets remplissent toute la largeur, chacun étendu à 1/6 et
   TOUS centrés dans leur cellule (marges égales de chaque côté, y compris le 1er
   et le dernier). On ne décale pas le menu shop ; c'est le menu blog qui est
   aligné dessus (cf. plus bas). */
#rds-megamenu .header-nav nav { margin: 0 -15px; }
#rds-megamenu .header-nav nav > ul {
  justify-content: space-between;
  width: 100%;
}
#rds-megamenu .header-nav nav > ul > li { flex: 1 1 0; min-width: 0; }
#rds-megamenu .header-nav nav > ul > li > a { justify-content: center; }

/* On retire les icônes de réseaux sociaux (desktop + mobile), on garde la loupe. */
.header-social,
#touch-menu .social-accounts-touch { display: none !important; }

/* Animation d'ouverture de la recherche desktop : quand on clique la loupe, le
   thème passe .top-search en display:block → la keyframe se rejoue et la barre
   se révèle en douceur depuis la loupe (droite), au lieu d'apparaître d'un coup. */
.top-search {
  animation: rdsSearchReveal .34s cubic-bezier(.22,.61,.36,1);
  transform-origin: right center;
}
@keyframes rdsSearchReveal {
  from { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(8px); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);   transform: translateX(0); }
}

/* Le thème passe le texte des liens de menu en orange au survol → invisible sur
   le fond orange. On garde le blanc, dans le menu mobile ET le menu blog desktop. */
#touch-menu .slicknav_menu a:hover,
#touch-menu .slicknav_menu a:focus,
.site-nav2 #site-menu a:hover,
.site-nav2 #site-menu a:focus,
.site-nav2 #site-menu-sticky a:hover,
.site-nav2 #site-menu-sticky a:focus { color: #fff; }

/* Le nav du blog reprend la police du nav shop (Helvetica, même graisse) mais en
   ITALIQUE, pour bien le différencier du nav shop (qui est droit). */
.site-nav2 #site-menu a,
.site-nav2 #site-menu-sticky a {
  font-family: HelveticaNowDisplay, "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 13px;            /* même taille que le nav shop */
  letter-spacing: .035em;
}

/* Un « > » devant chaque bouton du menu blog (desktop, sticky et mobile). */
.site-nav2 #site-menu > li > a::before,
.site-nav2 #site-menu-sticky > li > a::before,
#touch-menu .slicknav_nav > li > a::before {
  content: "> ";
}

/* On décale le MENU BLOG (pas le shop) pour que « STORES » s'aligne sous
   « STORE INTÉRIEUR » qui reste centré dans sa cellule. Le thème met
   margin-left:-15px (STORES au bord) ; +36px le place sous le texte centré du
   1er onglet shop. Conteneur plafonné à 1160px => alignement stable >=1160px. */
.site-nav2 #site-menu { margin-left: 21px; }

/* La barre n'a plus de label : le nav remplit toute la largeur du conteneur. */
#rds-megamenu .inner {
  display: flex;
  align-items: center;
}
#rds-megamenu .inner > nav {
  flex: 1 1 auto;
  min-width: 0;
}
/* Le déroulé doit être aussi large que le trait sous la barre (= largeur du
   conteneur, padding inclus). On ancre donc le sous-menu absolu sur .container
   (qui a le padding) au lieu de .inner : width:100% = padding-box = largeur du trait. */
#rds-megamenu .container { position: relative; }
#rds-megamenu .header-nav .inner,
#rds-megamenu .inner { position: static; }

/* On retire l'item « Le Shop » redondant du menu principal du blog, en desktop
   seulement (en mobile il sert de déclencheur à l'accordéon shop ; le menu
   sticky est laissé intact car le mégamenu n'y figure pas). */
@media (min-width: 960px) {
  #site-menu .menu-item-758 { display: none; }
}