/* ==========================================================================
   ElectroPlace — Premium theme skin (v2)
   Single, consistent design system.
   NOTE: this file replaces the previous version which contained two
   conflicting ":root" declarations (a light "Coral" theme and a leftover
   dark "Midnight Tech" variant). The second one silently overrode the
   accent color to an electric lime/green (#b8f500), which is what was
   painting the sticky search bar, hover states and badges green.
   That whole duplicate block has been removed and the design consolidated
   into one clean, professional look.
   ========================================================================== */

:root {
  /* ======================================================================
     ElectroPlace — Design system v3 (contraste AA, palette retail)
     Bleu marine = confiance / structure ; orange = action / prix.
     ====================================================================== */
  --ep-navy: #16265C;        /* bleu marine principal (titres, header, footer) */
  --ep-navy-2: #1E3579;      /* hover */
  --ep-accent: #E2610A;      /* orange CTA */
  --ep-accent-dark: #C24F05;
  --ep-accent-soft: rgba(226, 97, 10, .12);
  --ep-price: #C2410C;       /* prix — contraste AA sur blanc */
  --ep-cream: #F4F6FA;       /* fond de page */
  --ep-surface: #ffffff;     /* cartes / blocs */
  --ep-ink: #1B2333;         /* texte courant */
  --ep-muted: #5A6478;       /* texte secondaire */
  --ep-border: #E2E6EF;      /* filets */
  --ep-radius: 14px;
  --ep-radius-sm: 8px;
  --ep-shadow-soft: 0 8px 24px rgba(22, 38, 92, .07);
  --ep-shadow-hover: 0 16px 36px rgba(22, 38, 92, .14);
}

html { scroll-behavior: smooth; }

body {
  background: var(--ep-cream);
  color: var(--ep-ink);
  -webkit-font-smoothing: antialiased;
}

.main-content { background: var(--ep-cream); }
.container { max-width: 1240px !important; }
::selection { color: #fff; background: var(--ep-accent); }

@supports (content-visibility: auto) {
  .main-content > section:not(:first-child) { content-visibility: auto; contain-intrinsic-size: 520px; }
}

/* ---------------------------------------------------------------------- */
/* Announcement bar                                                        */
/* ---------------------------------------------------------------------- */
.yc-notice-bar, .notice-bar {
  background: var(--ep-navy) !important;
  color: #fff !important;
  letter-spacing: .01em;
  font-size: 13px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */
.yc-header {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--ep-border);
  box-shadow: 0 2px 16px rgba(16, 27, 61, .05);
  backdrop-filter: blur(12px);
}
.yc-header .yc-navbar {
  min-height: 82px;
  background: transparent;
  padding: 10px 28px;
}
.yc-header .yc-navbar .logo img { max-width: 148px; max-height: 62px; }

.yc-header .yc-navbar .menu-list { gap: 28px; }
.yc-header .yc-navbar .menu-item a {
  color: var(--ep-navy);
  font-size: 14px;
  font-weight: 700;
  opacity: .78;
  transition: color .2s ease, opacity .2s ease;
}
.yc-header .yc-navbar .menu-item a:hover,
.yc-header .yc-navbar .menu-item.active a { color: var(--ep-accent); opacity: 1; }
.yc-header .yc-navbar .menu-item.active > a::after,
.yc-header .yc-navbar .menu-item:hover > a::after {
  background: var(--ep-accent);
  height: 2px;
  width: 52%;
}

/* Quick call / contact links: a subtle pill instead of a shouty color */
.yc-header .yc-navbar .menu-list .ep-quick-call > a,
.yc-header .yc-navbar .menu-list .ep-contact-link > a {
  color: var(--ep-navy) !important;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(226, 97, 10, .12);
}
.yc-header .yc-navbar .menu-list .ep-quick-call > a:hover,
.yc-header .yc-navbar .menu-list .ep-contact-link > a:hover {
  color: #fff !important;
  background: var(--ep-accent);
}

/* Cart + search icon buttons in the header */
.yc-header .yc-navbar .corner .search,
.yc-header .yc-navbar .corner .cart {
  color: var(--ep-navy) !important;
}
.yc-header .yc-navbar .corner .cart #cart-items-badge {
  background: var(--ep-accent);
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Search — sticky bar under the header (desktop) + mobile search field   */
/* Redesigned to sit quietly inside the site's palette: no colored block, */
/* just a clean, contained field with a soft border and shadow.          */
/* ---------------------------------------------------------------------- */
.ep-desktop-search-bar {
  position: sticky;
  top: 0;
  z-index: 19;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--ep-border);
  backdrop-filter: blur(10px);
}
.ep-desktop-search-bar form {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
}
.ep-desktop-search-bar label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.ep-desktop-search-bar input {
  flex: 1;
  height: 42px !important;
  border: 1px solid var(--ep-border) !important;
  border-radius: 999px !important;
  padding: 0 18px !important;
  background: var(--ep-surface);
  color: var(--ep-ink);
  font-size: 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ep-desktop-search-bar input:focus {
  outline: none;
  border-color: var(--ep-accent) !important;
  box-shadow: 0 0 0 3px rgba(226, 97, 10, .16);
}
.ep-desktop-search-bar input::placeholder { color: var(--ep-muted); }
.ep-desktop-search-bar button {
  min-height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ep-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background .2s ease;
}
.ep-desktop-search-bar button:hover { background: var(--ep-navy-2); }

.ep-mobile-top-links { display: none; }

@media (min-width: 768px) {
  .ep-desktop-search-bar { top: 74px; }
}
@media (max-width: 767px) {
  .ep-desktop-search-bar { display: none !important; }
  .ep-mobile-top-links {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: var(--ep-surface);
    border-bottom: 1px solid var(--ep-border);
    padding: 10px 14px;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    transition: top 0.2s ease;
  }
  .ep-mobile-top-links::-webkit-scrollbar { display: none; }
  .ep-mobile-top-links a {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--ep-border);
    background: var(--ep-cream);
    color: var(--ep-navy);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .ep-mobile-top-links a[aria-current="page"] {
    background: var(--ep-navy);
    border-color: var(--ep-navy);
    color: #fff;
  }
}

/* In-panel search field (mobile drawer + overlay search) */
#searchInputHolder { background: var(--ep-surface); }
#searchInputHolder input {
  border: 1px solid var(--ep-border);
  border-radius: 999px;
}
.navigation-drawer .mobile-search input {
  border: 1px solid var(--ep-border);
  border-radius: 999px;
}

/* Legacy category strip — not used in this layout */
.ep-category-bar { display: none !important; }

/* Masquer le bouton flottant de préférences cookies (Iubenda) */
.iubenda-tp-btn { display: none !important; }

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.main-content > section:first-child {
  background: var(--ep-navy);
  border-bottom: 3px solid var(--ep-accent);
}
.main-content > section:first-child .yc-slider__desktop,
.main-content > section:first-child .yc-slider__mobile {
  height: clamp(310px, 39vw, 550px) !important;
}
.main-content > section:first-child .splide__slide { background-color: var(--ep-navy); }
.main-content > section:first-child .splide__slide::after {
  background: linear-gradient(90deg, rgba(8, 12, 24, .74), rgba(8, 12, 24, .12) 62%, rgba(8, 12, 24, .22));
}
.main-content > section:first-child .content { max-width: 1220px; }
.main-content > section:first-child .content .caption { max-width: 560px; }
.main-content > section:first-child .content h1,
.main-content > section:first-child .content h2,
.main-content > section:first-child .content h3 {
  color: #fff !important;
  letter-spacing: .01em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .4);
}
.main-content > section:first-child .slide-content-box-button {
  color: #fff !important;
  background: var(--ep-accent) !important;
  border-radius: var(--ep-radius-sm);
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow: var(--ep-shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.main-content > section:first-child .slide-content-box-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--ep-shadow-hover);
}
.main-content > section:first-child .splide__pagination__page { background: rgba(255, 255, 255, .35); }
.main-content > section:first-child .splide__pagination__page.is-active { background: var(--ep-accent); }

/* ---------------------------------------------------------------------- */
/* Section headings                                                        */
/* ---------------------------------------------------------------------- */
.yc-section-title {
  color: var(--ep-navy);
  font-size: clamp(22px, 2.6vw, 31px);
  font-weight: 800;
  letter-spacing: 0;
}
.yc-section-title::after {
  width: 48px;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--ep-accent);
}

/* ---------------------------------------------------------------------- */
/* Feature / service blocks (ex: "Ce qui nous distingue" / "ما يميزنا")   */
/* Compact horizontal-ish layout instead of four tall boxed cards.        */
/* ---------------------------------------------------------------------- */
.multi-column-100, [class*="multi-column-"] { background: var(--ep-cream) !important; padding-top: 14px !important; padding-bottom: 14px !important; }
[class*="multi-column-"] .yc-section-title { font-size: 19px !important; margin-bottom: 12px !important; }
[class*="multi-column-"] .multi-column-blocks { grid-gap: 10px !important; gap: 10px !important; }
[class*="multi-column-"] .column-block {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px;
  text-align: left !important;
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius-sm);
  background: var(--ep-surface);
  box-shadow: none;
  padding: 10px 12px !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
[dir="rtl"] [class*="multi-column-"] .column-block { text-align: right !important; }
[class*="multi-column-"] .column-block:hover {
  transform: translateY(-2px);
  box-shadow: var(--ep-shadow-soft);
}
[class*="multi-column-"] .column-image-wrapper {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  background: #FDEFE4;
  border-radius: 50%;
  flex-shrink: 0;
}
[class*="multi-column-"] .column-image-wrapper svg,
[class*="multi-column-"] .column-image-wrapper img { width: 22px !important; height: 22px !important; }
[class*="multi-column-"] .column-title {
  color: var(--ep-navy) !important;
  font-weight: 700;
  font-size: 12.5px !important;
  margin: 0 !important;
  line-height: 1.3;
}
[class*="multi-column-"] .column-description { display: none; }

@media (min-width: 768px) {
  [class*="multi-column-"] .column-title { font-size: 14px !important; }
  [class*="multi-column-"] .column-image-wrapper { width: 46px !important; height: 46px !important; min-width: 46px; }
}

/* ---------------------------------------------------------------------- */
/* Product sliders                                                         */
/* ---------------------------------------------------------------------- */
.yc-featured-products { padding: 25px 0 7px; background: var(--ep-cream); }
.yc-featured-products > div[class*="section-featured-products-"] {
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius);
  background: var(--ep-surface);
  box-shadow: var(--ep-shadow-soft);
  padding-inline: 20px;
}
.yc-featured-products > div[class*="section-featured-products-"] .container { padding-inline: 0; }
.yc-featured-products > div[class*="section-featured-products-"] .product-slider { padding-top: 10px; padding-bottom: 26px; }
.yc-featured-products > div[class*="section-featured-products-"] .product-block {
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius-sm);
  background: var(--ep-surface);
  box-shadow: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.yc-featured-products > div[class*="section-featured-products-"] .product-block:hover {
  transform: translateY(-5px);
  border-color: var(--ep-accent);
  box-shadow: var(--ep-shadow-hover);
}
.yc-featured-products > div[class*="section-featured-products-"] .product-thumbnail { background: #f5f4f0; }
.yc-featured-products > div[class*="section-featured-products-"] .product-details { min-height: 126px; padding: 13px 13px 14px !important; }
.yc-featured-products > div[class*="section-featured-products-"] .product-title { color: var(--ep-navy); font-weight: 700; }
.yc-featured-products > div[class*="section-featured-products-"] .product-price { color: var(--ep-navy); font-weight: 800; }
.yc-featured-products > div[class*="section-featured-products-"] .yc-btn-secondary--large {
  min-height: 36px;
  border: 1px solid var(--ep-navy);
  border-radius: var(--ep-radius-sm);
  color: var(--ep-navy);
  font-weight: 700;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.yc-featured-products > div[class*="section-featured-products-"] .yc-btn-secondary--large:hover {
  border-color: var(--ep-accent);
  background: var(--ep-accent);
  color: #fff;
}
.yc-featured-products .splide__arrow { border-radius: var(--ep-radius-sm); background: var(--ep-navy); }
.yc-featured-products .splide__arrow svg { fill: #fff; }
.yc-featured-products .splide__pagination__page { background: #d8d5cd; border-radius: 2px; }
.yc-featured-products .splide__pagination__page.is-active { background: var(--ep-accent); }

@media (max-width: 767px) {
  .yc-header .yc-navbar { min-height: 64px; padding: 7px 14px; }
  .yc-header .yc-navbar .logo img { max-width: 112px; max-height: 46px; }
  .main-content > section:first-child .yc-slider__mobile { height: clamp(335px, 110vw, 480px) !important; }
  .main-content > section:first-child .content { padding: 22px 17px 56px !important; }
  .yc-featured-products { padding: 20px 0 4px; }
  .yc-featured-products > div[class*="section-featured-products-"] { padding-inline: 7px; border-radius: var(--ep-radius-sm); }
  .yc-featured-products > div[class*="section-featured-products-"] .product-details { min-height: 114px; padding: 10px 8px 11px !important; }
  .yc-featured-products > div[class*="section-featured-products-"] .product-title { font-size: 12px; }
  .yc-featured-products > div[class*="section-featured-products-"] .product-price { font-size: 14px; }
  .yc-section-title { font-size: 21px; }
}

/* ---------------------------------------------------------------------- */
/* Search results page                                                     */
/* ---------------------------------------------------------------------- */
.yc-search-100, [class*="yc-search-"] { padding-top: 24px; }
[class*="yc-search-"] #search-title {
  min-height: 34px;
  margin: 18px auto 24px;
  color: var(--ep-navy);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
}
[class*="yc-search-"] .product-list { align-items: stretch; }
[class*="yc-search-"] .product-item-\* { min-width: 0; }
[class*="yc-search-"] .product-list .product-block {
  height: 100%;
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius-sm);
  background: var(--ep-surface);
  box-shadow: var(--ep-shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
[class*="yc-search-"] .product-list .product-block:hover {
  transform: translateY(-4px);
  border-color: var(--ep-accent);
  box-shadow: var(--ep-shadow-hover);
}
[class*="yc-search-"] .product-list .product-thumbnail img { object-fit: contain; }
[class*="yc-search-"] .product-list .product-title { color: var(--ep-navy); font-weight: 700; }

@media (max-width: 767px) {
  [class*="yc-search-"] { padding-top: 12px; margin-bottom: 35px; }
  [class*="yc-search-"] #search-title { margin: 12px auto 18px; font-size: 22px; }
  [class*="yc-search-"] .product-list { gap: 16px 10px; padding-inline: 12px; }
}

/* ---------------------------------------------------------------------- */
/* Collection / listing surfaces                                           */
/* ---------------------------------------------------------------------- */
[class*="featured-collections-"] .collection-preview,
[class*="product-listing"] .product-holder,
.yc-product-card {
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius-sm);
  background: var(--ep-surface);
  box-shadow: var(--ep-shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.yc-product-card:hover { transform: translateY(-4px); box-shadow: var(--ep-shadow-hover); }
.yc-product-card .product-name { color: var(--ep-navy); font-weight: 700; }
.yc-product-card #sticky-price { color: var(--ep-navy); font-weight: 800; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                  */
/* ---------------------------------------------------------------------- */
.yc-btn, .yc-btn-secondary, .yc-btn-secondary--large {
  border-radius: var(--ep-radius-sm);
  font-weight: 700;
  letter-spacing: .01em;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.yc-btn { background: var(--ep-navy); border-color: var(--ep-navy) !important; color: #fff; }
.yc-btn:hover { background: var(--ep-accent); border-color: var(--ep-accent) !important; color: #fff; }
.yc-btn-secondary { border-color: var(--ep-navy); color: var(--ep-navy); }

/* ---------------------------------------------------------------------- */
/* Product detail page                                                     */
/* ---------------------------------------------------------------------- */
.yc-single-product { gap: clamp(28px, 5vw, 66px); }
.yc-single-product > .product-details {
  border-radius: var(--ep-radius);
  box-shadow: var(--ep-shadow-soft);
}
.yc-single-product .product-name { color: var(--ep-navy); font-weight: 800; }
.yc-single-product .product-price { color: var(--ep-navy); font-weight: 800; }
.yc-single-product .product-details .yc-btn,
.yc-single-product .product-details .express-checkout-button {
  border-radius: var(--ep-radius-sm);
  box-shadow: var(--ep-shadow-soft);
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */
.yc-footer { background: var(--ep-navy) !important; border-top: 3px solid var(--ep-accent) !important; }
.yc-footer .title { color: var(--ep-accent); }
.yc-footer .item { color: rgba(255, 255, 255, .78); }
.yc-footer .item:hover { color: #fff; }
/* Barre de recherche personnalisée (injectée via code custom auparavant,
   désormais intégrée directement dans le thème) */
.search-box input[type="text"] {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid var(--ep-border);
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  outline: none;
  color: #000000;
  text-align: center;
  background: #fff;
}
.search-box input::placeholder {
  color: #000000;
  opacity: 0.6;
  text-align: center;
}

/* Floating home / scroll-to-top shortcuts (bas gauche) */
.ep-page-shortcuts {
  position: fixed;
  left: 14px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ep-page-shortcuts a,
.ep-page-shortcuts button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ep-navy);
  color: #fff;
  box-shadow: var(--ep-shadow-soft);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.ep-page-shortcuts a:hover,
.ep-page-shortcuts button:hover {
  background: var(--ep-accent);
  transform: translateY(-2px);
  box-shadow: var(--ep-shadow-hover);
}
.ep-page-shortcuts ion-icon { font-size: 20px; }

@media (min-width: 768px) {
  .ep-page-shortcuts { left: 24px; bottom: 24px; }
}
@media (max-width: 767px) {
  .ep-page-shortcuts { left: 10px; bottom: 16px; }
  .ep-page-shortcuts a,
  .ep-page-shortcuts button { width: 36px; height: 36px; }
}

/* Floating call / WhatsApp shortcuts (bas droite) */
.ep-fab-actions {
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ep-fab-actions a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--ep-shadow-soft), 0 0 0 rgba(0, 0, 0, 0);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ep-fab-actions a:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--ep-shadow-hover);
  filter: brightness(1.05);
}
.ep-fab-actions a:active { transform: translateY(0) scale(.96); }
.ep-fab-actions ion-icon { font-size: 24px; }

.ep-fab-call {
  background: var(--ep-navy);
}
.ep-fab-whatsapp {
  background: #25D366;
}

@media (min-width: 768px) {
  .ep-fab-actions { right: 24px; bottom: 24px; gap: 12px; }
}
@media (max-width: 767px) {
  .ep-fab-actions { right: 10px; bottom: 16px; gap: 8px; }
  .ep-fab-actions a { width: 46px; height: 46px; }
  .ep-fab-actions ion-icon { font-size: 22px; }
}

/* Sur la fiche produit, une barre "Commander" reste collée en bas de l'écran
   (desktop et mobile). On remonte les boutons flottants pour qu'ils ne
   passent jamais dessus. */
body.has-sticky-bar .ep-page-shortcuts,
body.has-sticky-bar .ep-fab-actions {
  bottom: 96px; /* hauteur de la barre (80px) + marge de respiration */
}


/* ---------------------------------------------------------------------- */
/* Conversion & dynamisme — ElectroPlace                                  */
/* ---------------------------------------------------------------------- */
.yc-notice { box-shadow: 0 2px 12px rgba(16,27,61,.10); position: relative; z-index: 20; }

/* Hero: stronger readability without changing the merchant's images */
.yc-section-slider,
.desktop-slider,
[class*="slider"] { isolation: isolate; }

/* Product cards */
.product-card, .yc-product-card, .featured-product, .product-item {
  transition: transform .22s ease, box-shadow .22s ease;
}
.product-card:hover, .yc-product-card:hover, .featured-product:hover, .product-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--ep-shadow-hover);
}

/* Section headings */
.yc-section-title, .section-title, .featured-products-title {
  letter-spacing: -.02em;
}

/* Buttons: more visible CTA */
.yc-btn, button[type="submit"], .express-checkout-button {
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.yc-btn:hover, button[type="submit"]:hover, .express-checkout-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(226, 97, 10,.20);
  filter: brightness(1.03);
}

/* Trust / information blocks */
.multi-column-100, [class*="multi-column-"] .column-block {
  border-radius: var(--ep-radius);
}

/* Product page purchase area */
.yc-single-product .product-details {
  border: 1px solid var(--ep-border);
}
.yc-single-product .express-checkout-button {
  font-weight: 800;
  min-height: 48px;
}

@media (max-width: 767px) {
  .yc-header .yc-navbar { padding: 8px 12px; min-height: 70px; }
  .yc-header .yc-navbar .logo img { max-width: 126px; max-height: 54px; }
  .yc-section-title, .section-title, .featured-products-title { font-size: 21px; }
  .yc-btn, .express-checkout-button { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ======================================================================
   LISIBILITÉ DU CONTENU — fiche produit, pages, blocs accordéon
   Corrige le problème "page bleue / texte noir" : les descriptions
   collées depuis Word, Excel ou Facebook embarquent des styles inline
   (fond bleu, texte noir, largeurs fixes) qui écrasaient le thème.
   On neutralise ces styles et on impose une typographie lisible.
   ====================================================================== */

/* -- Conteneur de description -- */
body .yc-single-product .product-details .product-description,
body .yc-page-content,
body .page-content,
body .accordion-details {
  color: var(--ep-ink) !important;
  background: transparent !important;
  font-size: 15.5px;
  line-height: 1.75;
  overflow-x: auto;
  overflow-y: visible;
  word-break: break-word;
}

/* -- Neutralisation des styles collés (fond + couleur de texte) -- */
body .yc-single-product .product-details .product-description *,
body .yc-page-content *,
body .page-content * {
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  font-family: var(--yc-font-family) !important;
  /* corrige le bug width:100% !important du thème d'origine,
     qui déformait tableaux, images et listes */
  width: auto !important;
  max-width: 100% !important;
  line-height: inherit !important;
}

/* -- Titres internes -- */
body .yc-single-product .product-details .product-description h1,
body .yc-single-product .product-details .product-description h2,
body .yc-single-product .product-details .product-description h3,
body .yc-single-product .product-details .product-description h4,
body .yc-page-content h1, body .yc-page-content h2, body .yc-page-content h3 {
  color: var(--ep-navy) !important;
  font-weight: 800;
  line-height: 1.3 !important;
  margin: 26px 0 10px;
}
body .yc-single-product .product-details .product-description h2 { font-size: 20px; }
body .yc-single-product .product-details .product-description h3 { font-size: 17px; }

body .yc-single-product .product-details .product-description p { margin: 0 0 12px; }
body .yc-single-product .product-details .product-description strong,
body .yc-single-product .product-details .product-description b {
  color: var(--ep-navy) !important;
  font-weight: 700;
}
body .yc-single-product .product-details .product-description a,
body .yc-page-content a {
  color: var(--ep-accent) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -- Listes -- */
body .yc-single-product .product-details .product-description ul,
body .yc-single-product .product-details .product-description ol {
  padding-inline-start: 22px !important;
  margin: 0 0 14px;
}
body .yc-single-product .product-details .product-description li { margin-bottom: 6px; }

/* -- Images de la description -- */
body .yc-single-product .product-details .product-description img {
  height: auto !important;
  border-radius: var(--ep-radius-sm);
  display: block;
  margin: 14px auto;
}

/* -- TABLEAUX (grilles de prix, références, tailles) --
   Rendu "catalogue" lisible + défilement horizontal sur mobile. */
body .yc-single-product .product-details .product-description table,
body .yc-page-content table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  border-collapse: collapse !important;
  border: 1px solid var(--ep-border) !important;
  border-radius: var(--ep-radius-sm);
  margin: 16px 0 22px;
  font-size: 14px;
  background: var(--ep-surface) !important;
  box-shadow: var(--ep-shadow-soft);
  white-space: nowrap;
}
body .yc-single-product .product-details .product-description table tr:first-child,
body .yc-page-content table tr:first-child {
  background: var(--ep-navy) !important;
}
body .yc-single-product .product-details .product-description table tr:first-child td,
body .yc-single-product .product-details .product-description table tr:first-child th,
body .yc-page-content table tr:first-child td,
body .yc-page-content table tr:first-child th {
  color: #fff !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: 12.5px;
  letter-spacing: .03em;
}
body .yc-single-product .product-details .product-description table tr:nth-child(even) {
  background: #F7F9FC !important;
}
body .yc-single-product .product-details .product-description table td,
body .yc-single-product .product-details .product-description table th,
body .yc-page-content table td,
body .yc-page-content table th {
  border: 1px solid var(--ep-border) !important;
  padding: 9px 13px !important;
  text-align: start;
  vertical-align: middle;
  color: var(--ep-ink) !important;
}
/* La dernière colonne contient généralement le prix : on la met en avant */
body .yc-single-product .product-details .product-description table td:last-child {
  color: var(--ep-price) !important;
  font-weight: 800 !important;
}
body .yc-single-product .product-details .product-description table tr:first-child td:last-child {
  color: #fff !important;
}

@media (max-width: 767px) {
  body .yc-single-product .product-details .product-description { font-size: 15px; }
  body .yc-single-product .product-details .product-description table { font-size: 12.5px; }
  body .yc-single-product .product-details .product-description table td,
  body .yc-single-product .product-details .product-description table th { padding: 7px 9px !important; }
}

/* ======================================================================
   FICHE PRODUIT — hiérarchie commerciale
   ====================================================================== */
.yc-single-product .product-price,
.yc-single-product #sticky-price { color: var(--ep-price) !important; font-weight: 800 !important; }
.yc-single-product .product-name { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.25; }
.yc-single-product .product-details { background: var(--ep-surface); }

/* Boutons d'action principaux : orange, lisibles, constants */
.yc-single-product .add-to-cart-button,
.yc-single-product .express-checkout-button,
.express-checkout-form button[type="submit"],
.sticky-checkout .yc-btn {
  background: var(--ep-accent) !important;
  border-color: var(--ep-accent) !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}
.yc-single-product .add-to-cart-button:hover,
.yc-single-product .express-checkout-button:hover,
.express-checkout-form button[type="submit"]:hover { background: var(--ep-accent-dark) !important; }

/* Champs du formulaire de commande */
.express-checkout-form input,
.express-checkout-form select,
.express-checkout-form textarea {
  border: 1px solid var(--ep-border) !important;
  border-radius: var(--ep-radius-sm) !important;
  color: var(--ep-ink) !important;
  background: #fff !important;
  font-size: 15px !important;
  min-height: 46px;
}
.express-checkout-form input:focus,
.express-checkout-form select:focus {
  border-color: var(--ep-accent) !important;
  box-shadow: 0 0 0 3px var(--ep-accent-soft) !important;
  outline: none;
}

/* Accordéons livraison / retour / garantie */
.accordion-item, .accordion {
  border: 1px solid var(--ep-border) !important;
  border-radius: var(--ep-radius-sm) !important;
  background: var(--ep-surface) !important;
  overflow: hidden;
}
.accordion-title, .accordion-header {
  color: var(--ep-navy) !important;
  font-weight: 700 !important;
  background: #F7F9FC !important;
}

/* Fil d'Ariane */
.breadcrumbs, .breadcrumbs * { color: var(--ep-muted) !important; font-size: 13px; }
.breadcrumbs a:hover { color: var(--ep-accent) !important; }

/* Compte à rebours : lisible sur fond clair */
.countdown-container, .countdown { color: var(--ep-navy) !important; }
.countdown-container .number, .countdown .number {
  background: var(--ep-navy) !important;
  color: #fff !important;
  border-radius: 6px;
}

/* Avis clients */
.reviews-section .review-card, .general-review {
  border: 1px solid var(--ep-border);
  border-radius: var(--ep-radius-sm);
  background: var(--ep-surface);
}

/* ======================================================================
   NOTIFICATIONS — sécurité de contraste (le réglage boutique pouvait
   produire du texte rouge sur fond cyan)
   ====================================================================== */
.yc-notification-toast, .notification-toast {
  background: var(--ep-navy) !important;
  color: #fff !important;
  border: 1px solid var(--ep-navy) !important;
  border-radius: var(--ep-radius-sm) !important;
  font-weight: 600;
}

/* ======================================================================
   GARDE-FOU GLOBAL — aucune page ne doit afficher un texte sombre
   sur un fond sombre hérité d'un contenu collé.
   ====================================================================== */
main.main-content { background: var(--ep-cream) !important; }
main.main-content section { color: var(--ep-ink); }

/* ======================================================================
   Bouton "Commander maintenant" → lien WhatsApp direct
   ====================================================================== */
.ep-whatsapp-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #fff !important;
}
.ep-whatsapp-button:hover { background: #1EBE5A !important; border-color: #1EBE5A !important; }