/* Sticky footer : le footer reste toujours colle au bas de la fenetre,
   Structure : body > main > (#wrapper + footer) */
main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#wrapper {
  flex: 1 0 auto;
}




/* Augmente l'interligne dans le recap de la fiche produit */
div[id*="product-description-short"], div[id*="product-description-short"] > p{
  line-height: 200%;
}

/* Cache le titre de la section Téléchargement de la page produit */
.product-attachments h3 {
  display:none;
}


/* Met TTC sur la meme ligne que le prix sur la fiche produit */
.product-prices div {
  display: inline-block;}

/* Ajoute une marge de 5px à gauche de TTC sur la fiche produit */
.product-prices .tax-shipping-delivery-label{
  margin-left: 5px;}

/* Sur les produits avec variants, augmente la largeur du label de variant */
.product-actions .control-label {
  max-width: 150px;}

/* Diminue la taille du nom du produit dans les pages catalogue  */
.product-miniature .product-title a, #products .product-title a {
  font-size: 14px; }

.page-product h1 {
  font-size: 19px;
}.product-miniature .product-title a, #products .product-title a {  display: -webkit-box;  -webkit-line-clamp: 3;              /* max 2 lignes */  -webkit-box-orient: vertical;  overflow: hidden;  white-space: normal;  word-break: break-word;  max-width: 140px;                   /* ajuste selon ta mise en page */  font-size: 14px;  text-align: center;  margin: 0 auto;}





/* Affichage du prix unitaire */
.safeuse-unit-price {
  display: inline-block !important;
  width: auto !important;
  clear: none !important;
  margin-top: 0;
  margin-left: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #53627f;
  vertical-align: baseline;
}

.product-prices #safeuse-unit-price.safeuse-unit-price {
  display: inline-block !important;
}






/* Menu principal : garde les entrees sur une ligne sur desktop. */
@media (min-width: 1200px) {
  #header .top-menu > li > a,
  #header .top-menu[data-depth="0"] > li > a,
  #header .anav-top-menu > li > a,
  #header .anthemeblocks-topmenu > li > a,
  #header .amenu-item .amenu-link,
  #header .an_megamenu .amenu-link,
  #header .an_megamenu a {
    white-space: nowrap !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #header .top-menu,
  #header .top-menu[data-depth="0"],
  #header .anav-top-menu,
  #header .anthemeblocks-topmenu,
  #header .an_megamenu ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }
}











.product-miniature .product-title a,
#products .product-title a {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: clip !important;
  max-width: none !important;
  line-height: 1.25 !important;
}















/* =========================================================
   Page CMS "À propos de Safe-Use"
   ========================================================= */
.su-about { max-width: 1000px; }
.su-about p { color: #444; line-height: 1.7; font-size: 16px; }

/* --- Encart mission --- */
.su-mission {
  background: #eef3ff;
  border-left: 5px solid #0cbbe7;
  border-radius: 10px;
  padding: 20px 24px;
  margin-top: 24px;
}
.su-mission-label {
  display: inline-block; text-transform: uppercase; letter-spacing: 1px;
  font-size: 13px; font-weight: 700; color: #0cbbe7; margin-bottom: 6px;
}
.su-mission p { margin: 0; color: #203472; }

/* --- Titres de section (trait cyan) --- */
.su-title {
  color: #203472; font-weight: 700; position: relative;
  padding-bottom: 12px; margin-bottom: 24px;
}
.su-title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 60px; height: 3px; background: #0cbbe7; border-radius: 2px;
}

/* --- Notre Histoire --- */
.su-histoire { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.su-histoire-year {
  flex: 0 0 auto; font-size: 48px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #203472, #0cbbe7);
  border-radius: 16px; padding: 24px 28px; line-height: 1;
}
.su-histoire-text { flex: 1 1 300px; }

/* --- Cartes valeurs : hauteur égale + look pro --- */
.su-valeurs { display: flex; flex-wrap: wrap; }
.su-valeurs > [class*="col-"] { display: flex; }   /* force la hauteur égale */

.su-card {
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 16px;
  padding: 36px 26px;
  text-align: center;
  border: 1px solid #eef1f7;
  box-shadow: 0 6px 20px rgba(32,52,114,.07);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.su-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 38px rgba(32,52,114,.16);
  border-color: #0cbbe7;
}
.su-card h4 { color: #203472; font-weight: 700; margin-bottom: 12px; }
.su-card p { font-size: 15px; color: #555; margin: 0; }

/* --- Rond d'icône (dégradé + icône SVG superposée) --- */
.su-card-icon {
  width: 72px; height: 72px; margin: 0 auto 20px;
  border-radius: 50%;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 32px 32px, 100% 100%;
  box-shadow: 0 8px 18px rgba(12,187,231,.35);
  transition: transform .3s ease;
}
.su-card:hover .su-card-icon { transform: scale(1.1) rotate(-6deg); }

/* Icônes dessinées en CSS (aucune dépendance à Font Awesome) */
.su-icon-quality {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"),
    linear-gradient(135deg, #203472, #0cbbe7);
}
.su-icon-transparence {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/><circle cx='12' cy='12' r='3'/></svg>"),
    linear-gradient(135deg, #203472, #0cbbe7);
}
.su-icon-engagement {
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 1 0-7.8 7.8L12 21.2l8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/></svg>"),
    linear-gradient(135deg, #203472, #0cbbe7);
}

/* --- Bande "Pourquoi choisir" --- */
.su-pourquoi {
  background: #203472; border-radius: 18px; padding: 40px;
  text-align: center; margin-top: 20px;
}
.su-pourquoi p { color: #dce3f5; }
.su-title-light { color: #fff; display: inline-block; }
.su-title-light::after { left: 50%; transform: translateX(-50%); }

/* --- Bouton CTA --- */
.su-cta {
  display: inline-block; margin-top: 18px; background: #0cbbe7;
  color: #fff !important; font-weight: 600; padding: 14px 34px;
  border-radius: 30px; text-decoration: none;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease;
}
.su-cta:hover {
  background: #19cdf7; transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12,187,231,.45); color: #fff !important;
}

/* --- Mobile --- */
@media (max-width: 767px) {
  .su-histoire { flex-direction: column; text-align: center; }
  .su-pourquoi { padding: 28px 20px; }
}




/* =========================================================
   PAGES CMS LEGALES / INFORMATIVES — charte uniforme Safe-Use
   ---------------------------------------------------------
   Mentions legales, CGU/CGV, Politique de confidentialite, Livraison...
   Reutilise les balises de la page "A propos"
   ========================================================= */

/* Chaque bloc logique = une carte aeree (coherent avec le reste du site) */
.su-legal .su-section {
  background: #fff;
  border: 1px solid #eef1f7;
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 18px;
  box-shadow: 0 4px 16px rgba(23, 50, 122, .05);
}
.su-legal .su-section > *:last-child { margin-bottom: 0; }

/* Titre de section (h2) : trait cyan herite de .su-title */
.su-legal h2.su-title { font-size: 25px; margin: 0 0 18px; }

/* Sous-titre (h3) : plus petit, trait cyan plus court */
.su-legal h3.su-title {
  font-size: 16px;
  margin: 22px 0 10px;
}
.su-legal h3.su-title::after { width: 38px; height: 2px; }

/* Listes : meme typographie que les paragraphes (.su-about p) */
.su-legal ul { margin: 0 0 16px; padding-left: 22px; }
.su-legal li { color: #444 !important; line-height: 1.7; font-size: 16px; margin-bottom: 6px; }
.su-legal li a { color: #0cbbe7 !important; }

/* Liens : cyan, soulignement au survol */
.su-legal a { color: #0cbbe7; font-weight: 600; text-decoration: none; }
.su-legal a:hover { text-decoration: underline; }

/* Encart de mise en avant (intro, contact...) : reutilise .su-mission */
.su-legal .su-mission { margin-top: 0; }






















/* ============================================================
   MENU CATEGORIES — SIDEBAR (couleurs/animations au survol)
   ------------------------------------------------------------
   S'applique partout ou la sidebar categories s'affiche
   (#left-column .block-categories). Le LAYOUT (largeur 290px,
   flex, conteneur 1420) est gere plus bas, section
   "MENU CATEGORIES LATERAL ... 1. Bloc centre".

   Bootstrap collapse : ouvert = .collapse.show (.in en repli BS3),
   animation en cours = .collapsing. Pas de font-weight a l'ouverture
   (le gras provoque un reflow / decalage en fin d'animation).
   Toggles : .navbar-toggler.collapse-icons (+/-) et .arrows (chevrons),
   icones = Material Icons (police du theme).
   ============================================================ */


/* Variables locales : retoucher la palette / l'easing en un endroit */
#left-column .block-categories {
  --su-navy: #17327a;
  --su-cyan: #0cbbe7;
  --su-cyan-soft: rgba(12, 187, 231, .12);
  --su-ease: cubic-bezier(.4, 0, .2, 1);

  position: relative;
  background: #fff;
  border: 1px solid #eef1f7;
  border-radius: 16px;
  padding: 0 0 12px;
  box-shadow: 0 10px 30px rgba(23, 50, 122, .10);
  overflow: hidden;
}

/* Bandeau d'accent en haut de la carte (signature navy -> cyan) */
#left-column .block-categories::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--su-navy), var(--su-cyan));
}

/* --- Titre racine "PREVENTION" + soulignement degrade lumineux --- */
#left-column .block-categories .category-top-menu > li > a.h6,
#left-column .block-categories .category-top-menu > li > a.text-uppercase {
  display: block;
  position: relative;
  margin: 0 0 6px;
  padding: 18px 20px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--su-navy);
}
#left-column .block-categories .category-top-menu > li > a.h6::after,
#left-column .block-categories .category-top-menu > li > a.text-uppercase::after {
  content: "";
  position: absolute; left: 20px; bottom: 9px;
  width: 42px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--su-cyan), rgba(12, 187, 231, .15));
  box-shadow: 0 0 8px rgba(12, 187, 231, .55);
}

/* --- Reset listes --- */
#left-column .block-categories ul { list-style: none !important; margin: 0; padding-left: 0; }
#left-column .block-categories li::before,
#left-column .block-categories li::marker { content: none !important; }

/* --- Ligne = lien (+ toggle) ; sous-menu en dessous --- */
#left-column .category-sub-menu li {
  display: flex; flex-wrap: wrap; align-items: center;
  position: relative; border: 0; margin: 0;
}
/* le lien s'etire (base 0) mais ne rejette jamais le toggle a la ligne */
#left-column .category-sub-menu li > a {
  flex: 1 1 0; min-width: 0;
  position: relative; z-index: 0;
  display: block;
  margin: 1px 8px;
  padding: 10px 12px 10px 18px;
  font-size: 13.5px; font-weight: 500;
  color: #3a4467; text-decoration: none;
  border-radius: 10px;
  overflow: hidden;                 /* clippe le wipe de fond aux coins arrondis */
  transition: color .22s var(--su-ease), padding-left .22s var(--su-ease);
}

/* Barre "neon" laterale : cachee (height 0), grandit au survol / actif */
#left-column .category-sub-menu li > a::before {
  content: "";
  position: absolute; left: 6px; top: 50%;
  width: 3px; height: 0;
  transform: translateY(-50%);
  border-radius: 3px;
  background: var(--su-cyan);
  box-shadow: 0 0 8px rgba(12, 187, 231, .7);
  transition: height .26s var(--su-ease);
}
/* Fond degrade qui se devoile depuis la gauche (sous le texte) */
#left-column .category-sub-menu li > a::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--su-cyan-soft), rgba(12, 187, 231, 0));
  opacity: 0;
  transition: opacity .22s var(--su-ease);
}

/* Toggle (+/- ou chevron) : reste inline, jamais rejete sous le lien */
#left-column .category-sub-menu li > :not(a):not(ul):not(.collapse):not(.collapsing) {
  flex: 0 0 auto; align-self: center;
}
#left-column .category-sub-menu li > .collapse,
#left-column .category-sub-menu li > .collapsing,
#left-column .category-sub-menu li > ul { flex: 0 0 100%; width: 100%; }

/* Niveau 0 = categories principales : plus marquees */
#left-column .category-sub-menu li[data-depth="0"] > a {
  font-weight: 600; font-size: 14px; color: var(--su-navy);
}

/* HOVER : la barre grandit, le fond se devoile, le lien glisse, texte cyan */
#left-column .category-sub-menu li > a:hover { color: var(--su-cyan); padding-left: 24px; }
#left-column .category-sub-menu li > a:hover::before { height: 60%; }
#left-column .category-sub-menu li > a:hover::after  { opacity: 1; }

/* BRANCHE OUVERTE (page courante) : barre pleine + halo + fond marque.
   Pas de font-weight (reflow). Cible .show (BS4/5), .in (BS3), .collapsing. */
#left-column .category-sub-menu li:has(> .collapse.show) > a,
#left-column .category-sub-menu li:has(> .collapse.in) > a,
#left-column .category-sub-menu li:has(> .collapsing) > a { color: var(--su-navy); }
#left-column .category-sub-menu li:has(> .collapse.show) > a::before,
#left-column .category-sub-menu li:has(> .collapse.in) > a::before,
#left-column .category-sub-menu li:has(> .collapsing) > a::before { height: 72%; }
#left-column .category-sub-menu li:has(> .collapse.show) > a::after,
#left-column .category-sub-menu li:has(> .collapse.in) > a::after,
#left-column .category-sub-menu li:has(> .collapsing) > a::after {
  opacity: 1;
  background: linear-gradient(90deg, rgba(12, 187, 231, .18), rgba(12, 187, 231, 0));
}

/* --- Indentation + guide vertical de niveau (degrade cyan qui s'estompe) --- */
#left-column .collapse > ul.category-sub-menu,
#left-column .collapsing > ul.category-sub-menu {
  position: relative;
  margin-left: 20px;
  padding-left: 6px;
  border-left: 2px solid rgba(12, 187, 231, .25);   /* fallback si border-image KO */
  border-image: linear-gradient(180deg, rgba(12, 187, 231, .55), rgba(12, 187, 231, 0)) 1;
}

/* Sous-items compacts (depth 1,2,3) : taille + couleur degressives */
#left-column .category-sub-menu li[data-depth="1"] > a { font-size: 13.5px; font-weight: 600; color: #2c3e66; }
#left-column .category-sub-menu li[data-depth="2"] > a { font-size: 13px;   color: #5a6b8c; }
#left-column .category-sub-menu li[data-depth="3"] > a { font-size: 12.5px; color: #7a88a3; }

/* --- Bouton +/- de l'accordeon (rond, remplissage cyan au survol) --- */
#left-column .navbar-toggler.collapse-icons {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: 0 8px 0 2px; padding: 0;
  border-radius: 50%;
  background: var(--su-cyan-soft);
  cursor: pointer;
  transition: background .2s var(--su-ease), transform .2s var(--su-ease),
              box-shadow .2s var(--su-ease);
}
#left-column .navbar-toggler.collapse-icons:hover {
  background: var(--su-cyan);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(12, 187, 231, .45);
}
#left-column .navbar-toggler.collapse-icons .material-icons {
  font-size: 18px; color: var(--su-navy);
  transition: color .2s var(--su-ease);
}
#left-column .navbar-toggler.collapse-icons:hover .material-icons { color: #fff; }

/* --- Chevrons (niveaux profonds) --- */
#left-column .arrows {
  display: flex; align-items: center;
  margin: 0 10px 0 2px; cursor: pointer;
}
#left-column .arrows .material-icons {
  font-size: 18px; color: #9aa6bf;
  transition: color .2s var(--su-ease), transform .25s var(--su-ease);
}
#left-column .arrows:hover .material-icons { color: var(--su-cyan); }

/* =========================================================
   Fil d'Ariane (breadcrumb) — style pilules
   ---------------------------------------------------------
   .breadcrumb-wrapper > .container > nav.breadcrumb > ol > li > a > span
   Chaque maillon = pilule avec fond clair, chevron cyan entre
   les maillons, degrade au survol, dernier maillon (page active)
   mis en avant.
   ========================================================= */


/* Barre : transparente pour se fondre dans le header blanc, padding genereux */
.breadcrumb-wrapper {
  background: transparent !important;
  padding: 0;
  border-bottom: none;
}

/* Padding uniquement quand le breadcrumb a du contenu */
.breadcrumb-wrapper .breadcrumb {
  padding: 14px 0;
}

/* Liste flex alignee */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* Maillons cliquables : contour navy discret, fond vide */
.breadcrumb li a {
  display: inline-flex;
  align-items: center;
  padding: 5px 15px;
  border-radius: 999px;
  border: 1.5px solid rgba(23, 50, 122, 0.35);
  background: transparent;
  color: #17327a !important;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none !important;
  line-height: 1.3;
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.breadcrumb li a span { color: inherit !important; }

/* Hover : fond navy plein, texte blanc */
.breadcrumb li a:hover {
  background: #17327a;
  border-color: #17327a;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(23, 50, 122, .2);
}
.breadcrumb li a:hover span { color: #ffffff !important; }

/* Separateur : simple chevron › cyan entre chaque maillon */
.breadcrumb ol li::after { content: "" !important; }
.breadcrumb ol li:not(:last-child)::after {
  content: "\203A" !important;
  color: #0cbbe7;
  font-size: 20px;
  font-weight: 400;
  margin: 0 3px;
  line-height: 1;
}

/* Page actuelle : pilule degrade navy->cyan, texte blanc, ombre cyan */
.breadcrumb ol li:last-child a,
.breadcrumb ol li:last-child > span {
  background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 999px;
  padding: 5px 15px;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  line-height: 1.3;
  box-shadow: 0 3px 10px rgba(12, 187, 231, .35);
}
.breadcrumb ol li:last-child a:hover {
  opacity: .9;
  transform: translateY(-1px);
}

/* =========================================================
   Header : barre pleine largeur (logo + "Appelez-nous" a gauche,
   plus d'espace pour le menu)
   ---------------------------------------------------------
   Cause : .container du header = width 1140px centre
   (margin 378px auto), ce qui poussait tout le contenu a 378px
   du bord. Passe en full-width.
   Scope desktop (>=992px) pour ne pas toucher le menu mobile.
   ========================================================= */

@media (min-width: 992px) {

  /* Containers du header en pleine largeur, petit retrait des bords */
  .header-nav.tablet-h .container,
  .header-top.tablet-h .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  /* Logo : largeur auto (image seule), calle a gauche */
  #_desktop_logo {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-right: 25px;
  }
  #_desktop_logo a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
  }
  #_desktop_logo img {
    display: block;
    margin: 0 !important;
  }

  /* Menu : prend tout l'espace restant libere par le logo,
     avec un ecart a gauche pour ne pas coller au logo */
  .header-top-wrapper .position-static {
    flex: 1 1 0 !important;
    width: auto !important;
    padding-left: 60px;
  }
}

/* =========================================================
   Mega-menu RDR DROGUES : recadre le panneau sous son label
   ---------------------------------------------------------
   Probleme : le theme positionnait le dropdown (888px, 4 colonnes)
   a left:156px alors que le logo finit a 245px -> passait sous le
   logo. Fix : panneau ancre sous son propre trigger (left:0 relatif
   a la <li>), demarre apres le logo a toutes les tailles.
   Scope : uniquement RDR DROGUES (mm-4 / adropdown-4), les autres
   megamenus ne sont pas concernes.
   ========================================================= */

@media (min-width: 1200px) {
  #header .amenu-item.mm-4 {
    position: relative !important;
  }
  #header .adropdown-4 {
    left: -200px !important;
    right: auto !important;
    transform: none !important;
  }
}

/* MENU CATEGORIES LATERAL (pages categorie)
   Sidebar sous le logo, accordeon Bootstrap (+/-) deja en place.
   Couleurs/hover : cf section SIDEBAR plus haut.
   DOM : #left-column .block-categories > ul.category-top-menu
     > li > a.text-uppercase.h6 ("PREVENTION")
     > li > ul.category-sub-menu > li[data-depth] > a + .navbar-toggler(+/-) + .collapse > ul... */

/* 1. Bloc centre : sidebar + produits dans un conteneur centre plutot
   que colle a gauche, sinon le vide grandit a droite au dezoom.
   Le 1420px est scope .page-category (CMS/compte gardent leur layout
   natif), mais le fil d'Ariane reprend la meme largeur partout pour
   rester aligne avec les categories - ca ne touche que la barre. */

@media (min-width: 992px) {
  .page-category #wrapper .container,
  body:not(.page-index) .breadcrumb-wrapper .container {
    width: 100% !important;
    max-width: 1420px !important;   /* <- largeur du bloc : + grand = produits + larges */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

  /* Row en flex : sidebar fixe + produits qui prennent le reste, avec un
   ecart entre les deux. Cible juste la row du layout (enfant direct du
   container de #wrapper) et pas toutes les .row - la grille produits a
   aussi une ".products row", et un flex large lui cassait l'egalite de
   hauteur des cartes. */

  .page-category #wrapper > .container > .row {
    display: flex;
    align-items: flex-start;
    gap: 40px;                       /* <- ecart entre la sidebar et les produits */
  }
  .page-category #left-column.col-lg-3 {
    flex: 0 0 290px;                 /* <- largeur de la sidebar */
    width: 290px !important;
  }
  .page-category #left-column ~ .col-lg-9,
  .page-category #content-wrapper.col-lg-9 {
    flex: 1 1 auto;                  /* les produits remplissent l'espace restant */
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
}



/* Pages compte / CMS / marques : H1 centre pour uniformiser (le theme
   centrait certaines pages et pas d'autres). Le fil d'Ariane reste a
   gauche, meme position que sur les categories (section 1), et le
   corps de texte aussi. Exclu : accueil, categorie, fiche produit,
   panier, checkout - layout different. */

@media (min-width: 992px) {
  body:not(.page-index):not(.page-category):not(.page-product):not(.page-cart):not(.page-checkout) #content-wrapper h1,
  body:not(.page-index):not(.page-category):not(.page-product):not(.page-cart):not(.page-checkout) .page-header h1,
  body:not(.page-index):not(.page-category):not(.page-product):not(.page-cart):not(.page-checkout) h1.page-heading {
    text-align: center;
  }
}




/* =========================================================
   Page "produit non disponible" / 404 produit : champ de recherche lisible.
   Le thème applique du texte blanc sur l'input (hérité du header) ce qui
   le rend invisible sur le fond blanc de la page. La body a la classe
   search_not_found -> on force une couleur sombre + fond blanc sur l'input.
   ========================================================= */
.search_not_found .search-widget form input[type="text"],
.h_not_found .search-widget form input[type="text"] {
  color: #17327a !important;
  background: #fff !important;
  caret-color: #17327a !important;
}
.search_not_found .search-widget form input[type="text"]::placeholder,
.h_not_found .search-widget form input[type="text"]::placeholder {
  color: #9aa6bf !important;
  opacity: 1 !important;
}





/* EN-TETE CATEGORIE — reconstruit en JS (probleme de structure du theme)
   Le theme change le HTML selon qu'il y a une description ou pas :
     - sans description : h1 + div.category-cover > img
     - avec description : h1 + div#category-description > (img + p)
   Pas stylisable proprement en CSS tel quel.

   Le JS (safeUseBuildCategoryHero) lit titre/description/image/nb
   produits et reconstruit une structure fixe :
     .block-category
       > .su-cat-hero (.su-has-image | .su-no-image)
         > .su-cat-hero-media > img        (image de fond, fondue)
         > .su-cat-hero-body
             > .su-cat-hero-title (h1)
             > .su-cat-hero-count
             > .su-cat-hero-desc

   Fond clair, texte a gauche sur blanc, image fondue a droite via
   masque degrade, filet cyan sous le titre (comme la sidebar).
   Couvre les 4 cas : avec/sans image x avec/sans description. */


/* Reset du bloc theme : on enleve la carte native, le hero gere tout */
.page-category .block-category {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
  min-height: 0 !important;
  overflow: visible !important;
}




/* --- ANTI-FLASH (FOUC) au chargement ---
   Le hero de categorie est reconstruit par le JS (safeUseBuildCategoryHero),
   qui pose data-su-hero sur .block-category une fois fini. Avant que le JS
   tourne, le theme affiche l'image de couverture brute en pleine largeur -
   flash bien visible depuis qu'on a agrandi category_default a 1200x600.
   Fix : on masque l'image native tant que le hero custom n'est pas construit.
   Une fois data-su-hero pose, ce selecteur ne matche plus et l'image du hero
   s'affiche normalement. min-height reserve la place pour eviter que la page
   saute quand le JS remplace le contenu.
   Sans JS : seule l'image de banniere reste masquee, titre/description/
   produits s'affichent quand meme normalement. */

.page-category .block-category:not([data-su-hero]) {
  min-height: 180px !important;
  overflow: hidden !important;
}
.page-category .block-category:not([data-su-hero]) img {
  display: none !important;
}

/* --- Carte hero : texte en flux (dicte la hauteur), image absolue a droite ---
   L'image est en position:absolute pour ne pas dicter la hauteur du bloc -
   sinon une image portrait (141x180) etiree sur une colonne large rendait
   le hero enorme (~500px) et poussait les produits hors ecran. La hauteur
   du hero suit maintenant le texte (court -> compact), et l'image remplit
   la colonne droite a cette hauteur (object-fit: cover). Le texte reste a
   gauche (z-index 2, max-width), jamais recouvert par l'image. */

.page-category .su-cat-hero {
  position: relative;
  display: flex;
  align-items: center;        /* centre le texte verticalement dans la hauteur dispo */
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #eef1f7;
  border-bottom: 3px solid #0cbbe7;
  box-shadow: 0 10px 28px rgba(23, 50, 122, .09);
  background: #fff;
}

/* Avec image : hauteur mini pour que l'image respire, meme sans description.
   (Sans image ET sans description -> pas de min-height -> reste compact.) */
.page-category .su-cat-hero.su-has-image {
  min-height: 180px;
}

/* Corps texte — gauche, flex-item (donne sa hauteur au hero, centre vertical) */
.page-category .su-cat-hero-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  max-width: 60%;
  padding: 18px 30px;
}

/* Titre */
.page-category .su-cat-hero-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #17327a !important;
  letter-spacing: .01em;
}
/* filet cyan neon sous le titre */
.page-category .su-cat-hero-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: linear-gradient(90deg, #0cbbe7, rgba(12, 187, 231, .15));
  box-shadow: 0 0 8px rgba(12, 187, 231, .5);
}

/* Compteur produits */
.page-category .su-cat-hero-count {
  display: inline-block;
  margin-top: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0cbbe7;
}

/* Description */
.page-category .su-cat-hero-desc {
  margin-top: 8px;
  color: #4a5a7e;
  font-size: 13.5px;
  line-height: 1.55;
}
.page-category .su-cat-hero-desc p { margin: 0 0 4px; }
.page-category .su-cat-hero-desc p:last-child { margin-bottom: 0; }

/* Image — colonne droite ABSOLUE (ne dicte pas la hauteur du hero) */
.page-category .su-cat-hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  z-index: 1;
  overflow: hidden;
}
.page-category .su-cat-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.1) brightness(.97);
}
/* Fondu blanc sur le bord gauche de l'image (transition douce avec le texte) */
.page-category .su-cat-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 46%);
}

/* Sans image : fond leger + accent lateral, texte pleine largeur */
.page-category .su-cat-hero.su-no-image {
  background: linear-gradient(118deg, #f4f8fd 0%, #ffffff 70%);
  border-left: 4px solid #0cbbe7;
}
.page-category .su-cat-hero.su-no-image .su-cat-hero-body {
  max-width: 100%;
  padding-right: 40px;
}






/* =========================================================
   Image produit (pages categorie) : remplit toute la largeur de la carte.
   Le theme fixe l'image a sa taille generee (ex: width:398px), donc des que
   la carte est plus large (suite a notre mise en page elargie) l'image laisse
   du vide autour. On force width:100% pour qu'elle suive la carte.
   ========================================================= */
.page-category #js-product-list .product-miniature .thumbnail-container img,
.page-category #js-product-list .product-miniature .thumbnail img {
  width: 100% !important;
  height: auto !important;
}




/* ============================================================
   Zones D'AMELIORATIONS VISUELLES
   Palette : navy #17327a / #203472, cyan #0cbbe7.
   ============================================================ */

/* --- ZONE 12 : defilement fluide --- */
html { scroll-behavior: smooth; }

/* --- ZONE 2 : bouton "retour en haut" aux couleurs Safe-Use --- */
#scrolltopbtn {
  background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(12, 187, 231, .45) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
#scrolltopbtn:hover {
  opacity: 1 !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 10px 26px rgba(12, 187, 231, .55) !important;
}

/* --- ZONE 1 : cartes produit, elevation au survol (catalogue) --- */
.page-category .product-miniature {
  border-radius: 14px;
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              box-shadow .28s cubic-bezier(.4,0,.2,1);
}
.page-category .product-miniature:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(23, 50, 122, .14);
}

/* --- ZONE 4 : pagination en pastilles (markup reel : ul.page-list > li > a) --- */
.page-category .pagination .page-list li a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px; margin: 0 2px;
  border: 1px solid #e7ebf3; border-radius: 10px;
  color: #17327a; font-weight: 600; text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.page-category .pagination .page-list li a:hover {
  background: rgba(12, 187, 231, .10); border-color: #0cbbe7; color: #17327a; transform: translateY(-1px);
}
.page-category .pagination .page-list li.current a,
.page-category .pagination .page-list li.current span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 12px; margin: 0 2px; border-radius: 10px;
  background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%);
  border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 4px 12px rgba(12, 187, 231, .35);
}

/* --- ZONE 5a : bloc reassurance en cartes (version douce, fond teinte) --- */
.anthemeblocks-reassurance-item {
  background: #f4f8fd !important;
  border: 1px solid #e6ecf6 !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(23, 50, 122, .06) !important;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
  padding-top: 28px !important;               /* +12px de hauteur (haut/bas) -> cartes plus aerees */
  padding-bottom: 28px !important;
}
.anthemeblocks-reassurance-item:hover {
  background: #fff !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 32px rgba(23, 50, 122, .13) !important;
}
.anthemeblocks-reassurance-item h6 { color: #17327a !important; }


/* --- Animation d'apparition en cascade au scroll ---
   Progressive enhancement : la classe .su-anim-ready n'est ajoutee que par
   le JS (safeuse-custom-prestashop.js). Sans JS cette regle ne s'applique
   jamais, donc les cartes restent visibles normalement, jamais bloquees
   invisibles. Le delai de cascade (transition-delay) est pose carte par
   carte par le JS lui-meme, pas ici en nth-child, pour ne pas dependre de
   la structure DOM exacte generee par le theme. */

.anthemeblocks-reassurance.su-anim-ready .anthemeblocks-reassurance-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.anthemeblocks-reassurance.su-anim-ready .anthemeblocks-reassurance-item.su-inview {
  opacity: 1;
  transform: translateY(0);
}
/* Accessibilite : utilisateurs qui demandent moins d'animations -> apparition instantanee */
@media (prefers-reduced-motion: reduce) {
  .anthemeblocks-reassurance.su-anim-ready .anthemeblocks-reassurance-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* --- Bande Reassurance alignee sur la carte "Nos marques" --- */
.anthemeblocks-reassurance .container {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 160px);
  max-width: 1440px;
  margin-left: 0 !important;                  /* annule le margin:auto bootstrap -> evite le double-decalage avec left:50% */
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.anthemeblocks-reassurance .canthemeblocks-reassurance-abs {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Mobile / tablette : on annule la sortie de conteneur */
@media (max-width: 991px) {
  .anthemeblocks-reassurance .container {
    position: static;
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}



/* --- ZONE 6 : onglet actif de la fiche produit, filet cyan --- */
.tabs .nav-tabs .nav-link.active,
.anthemeblocks-producttabs .nav-tabs .nav-link.active {
  color: #0cbbe7 !important; border-bottom: 3px solid #0cbbe7 !important;
}
.tabs .nav-tabs .nav-link:hover,
.anthemeblocks-producttabs .nav-tabs .nav-link:hover {
  color: #17327a !important; border-bottom: 2px solid #17327a !important;
}

/* --- ZONE 10 : focus cyan sur les champs de formulaire --- */
.page-content input:focus,
.page-content textarea:focus,
.page-content select:focus {
  outline: none !important; border-color: #0cbbe7 !important;
  box-shadow: 0 0 0 3px rgba(12, 187, 231, .18) !important;
}




/* HEADER — mega-menu */

/* --- 1. Entrees de menu : soulignement cyan anime au survol ---
   Le trait est porte par le background du lien, pas par ::after - ca
   laisse ::after libre pour que le losange du theme (⬥) reste visible a
   droite. Cale a 24px a gauche (sous la 1re lettre) et 30px a droite pour
   finir pile a la derniere lettre (la chasse des majuscules laissait un
   petit blanc, d'ou le 30 > 24). Valeurs ajustees a l'oeil, comme le
   -30px du dropdown compte. */

#amegamenu .anav-top > .amenu-item > .amenu-link {
  transition: color .22s ease, background-size .26s cubic-bezier(.4, 0, .2, 1);
  background-image: linear-gradient(90deg, #17327a, #0cbbe7);
  background-repeat: no-repeat;
  background-position: left 24px bottom 14px;   /* depart sous la 1re lettre */
  background-size: 0 2px;                        /* invisible au repos */
}
#amegamenu .anav-top > .amenu-item:hover > .amenu-link,
#amegamenu .anav-top > .amenu-item.plex:hover > .amenu-link {
  color: #17327a;
  background-size: calc(100% - 48px) 2px;        /* 24px gauche + 24px droite */
}

/* --- 2. Panneau deroulant : carte premium (radius + ombre + filet cyan) ---
   PAS de transform sur .adropdown (casserait le positionnement). On arrondit
   le bas, on affine l'ombre, et on ajoute un filet cyan en haut via le
   .dropdown-bgimage (deja present, z-index:-1) -> aucun nouvel element. */
#header .amenu-item .adropdown {
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 18px 40px rgba(23, 50, 122, .16) !important;
  border-top: 3px solid #0cbbe7;
  padding: 6px 6px 10px !important;
}

/* Animation d'apparition : le CONTENU glisse vers le bas (pas le conteneur).
   Cible les colonnes directes -> evite le double-decalage du panneau
   "S'informer" qui imbrique un .dropdown-content dans .html-item.typo. */
#header .amenu-item .adropdown > .dropdown-content {
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
#header .amenu-item.plex:hover .adropdown > .dropdown-content {
  transform: translateY(0);
  opacity: 1;
}

/* --- 3. Titre de rubrique (level-1) : navy gras + accent cyan --- */
#header .adropdown .category-item.level-1 > .category-title {
  margin: 2px 0 4px !important;
  padding: 0 14px 6px !important;
  position: relative;
}
#header .adropdown .category-item.level-1 > .category-title a,
#header .adropdown .category-item.level-1 > .category-title span {
  color: #17327a !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .01em;
}
#header .adropdown .category-item.level-1 > .category-title::after {
  content: "";
  position: absolute; left: 14px; bottom: 0;
  width: 28px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #0cbbe7, rgba(12, 187, 231, .2));
}

/* --- 4. Sous-liens (level-2) : pilule qui s'eclaire + glisse au survol --- */
#header .adropdown .category-item.level-2 > .category-title {
  margin: 0 !important;
}
#header .adropdown .category-item.level-2 > .category-title a {
  display: block;
  padding: 4px 12px !important;
  margin: 1px 6px;
  border-radius: 7px;
  color: #4a5a7e !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
#header .adropdown .category-item.level-2 > .category-title a:hover {
  background: rgba(12, 187, 231, .10);
  color: #17327a !important;
  padding-left: 20px !important;
}

/* --- 5. Champ de recherche header : moderne, focus cyan --- */
#header #search_widget form {
  position: relative;
}
#header #search_widget input[type="text"] {
  border: 1.5px solid #e3e8f1 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #1a2238 !important; /* texte sombre : sinon blanc herite de la barre navy -> invisible */
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#header #search_widget input[type="text"]::placeholder {
  color: #8a94a6 !important;
  opacity: 1;
}
#header #search_widget input[type="text"]:focus {
  outline: none !important;
  border-color: #0cbbe7 !important;
  box-shadow: 0 0 0 3px rgba(12, 187, 231, .15) !important;
  background: #fff !important;
  color: #1a2238 !important;
}
/* Suggestions autocomplete (ui-autocomplete) : texte sombre lisible */
#header #search_widget .ui-autocomplete a,
#header #search_widget .ui-autocomplete li {
  color: #1a2238 !important;
}





/* HEADER — BARRE DU HAUT NAVY : harmonisation icones */

/* Ecarts reguliers + separateurs verticaux */
#header .header-nav .right-nav > .an_wishlist-nav-link,
#header .header-nav .right-nav > #_desktop_user_info,
#header .header-nav .right-nav > #_desktop_cart {
  position: relative; margin-left: 18px !important; padding-left: 18px;
}
#header .header-nav .right-nav > .an_wishlist-nav-link::before,
#header .header-nav .right-nav > #_desktop_user_info::before,
#header .header-nav .right-nav > #_desktop_cart::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 22px; background: rgba(255,255,255,.22);
}

/* Survol cyan uniforme */
#header .header-nav .right-nav .an_wishlist-nav-link a,
#header .header-nav .right-nav .user-info .account,
#header .header-nav .right-nav .signin .expand-more,
#header .header-nav .right-nav #_desktop_cart .blockcart-link { transition: color .2s ease; }
#header .header-nav .right-nav .an_wishlist-nav-link a:hover,
#header .header-nav .right-nav .user-info .account:hover,
#header .header-nav .right-nav .signin .btn-unstyle:hover .expand-more,
#header .header-nav .right-nav #_desktop_cart .blockcart-link:hover .cart-products-text { color: #0cbbe7 !important; }
#header .header-nav .right-nav #_desktop_cart .blockcart-link:hover svg { fill: #0cbbe7 !important; }

/* Icone recherche : zoom + cyan au survol */
#header .header-nav .right-nav .search-icon.open-icon { cursor: pointer; transition: transform .2s ease; }
#header .header-nav .right-nav .search-icon.open-icon:hover { transform: scale(1.12); }
#header .header-nav .right-nav .search-icon.open-icon:hover .open-icon-path { fill: #0cbbe7; }

/* Compteurs (wishlist + panier) en accent cyan */
#header .header-nav .right-nav .wishlist-nav-count { color: #0cbbe7 !important; font-weight: 700; }
#header .header-nav .right-nav #_desktop_user_info + #_desktop_cart .cart-products-count { color: #0cbbe7 !important; font-weight: 700; }



/* --- Menu deroulant du compte (Mon profil / Deconnexion) : amelioration --- */
#header .header-nav .signin .dropdown-menu {
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(23, 50, 122, .18) !important;
  padding: 8px !important;
  margin-top: 10px !important;
  min-width: 180px;
  /* aligne le menu sur le bord DROIT du bouton */
  left: auto !important;
  right: -30px !important;
}



/* Menu deroulant du compte : carte premium */
#header .header-nav .signin .dropdown-menu {
  border: none !important; border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(23,50,122,.18) !important;
  padding: 8px !important; margin-top: 10px !important; min-width: 180px;
}
#header .header-nav .signin .dropdown-menu li a {
  border-radius: 8px; padding: 9px 14px !important; color: #3a4467 !important;
  font-size: 13.5px; transition: background .18s ease, color .18s ease;
}
#header .header-nav .signin .dropdown-menu li a:hover {
  background: rgba(12,187,231,.10); color: #17327a !important;
}




/* PAGE CATEGORIE — BARRE D'OUTILS + MINIATURES ameliorer */

/* 1. Bouton de tri "Pertinence" : pilule navy, cyan au survol/ouvert */
.products-sort-order .select-title {
  border: 1.5px solid #e3e8f1 !important; border-radius: 999px !important;
  padding: .4rem 1rem !important; color: #17327a !important; font-weight: 600 !important;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.products-sort-order.dropdown:hover .select-title,
.products-sort-order .select-title:hover,
.products-sort-order.show .select-title {
  border-color: #0cbbe7 !important; color: #0cbbe7 !important;
  box-shadow: 0 2px 10px rgba(12,187,231,.18) !important;
}

/* Menu deroulant du tri : carte premium */
.products-sort-order .dropdown-menu {
  background: #fff !important; border: none !important; border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(23,50,122,.16) !important; padding: 8px !important; margin-top: 8px !important;
}
.products-sort-order .dropdown-menu .select-list {
  border-radius: 8px; padding: 8px 14px !important; color: #3a4467 !important; font-size: 13.5px;
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.products-sort-order .dropdown-menu .select-list:hover {
  background: rgba(12,187,231,.10) !important; color: #17327a !important; padding-left: 18px !important;
}
.products-sort-order .dropdown-menu .select-list.current {
  background: linear-gradient(135deg, #17327a, #0cbbe7) !important; color: #fff !important; font-weight: 600;
}

/* 2. Boutons de vue (grille/liste) : pastille cyan sur l'actif */
.collection-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-right: 6px !important; border-radius: 9px;
  transition: background .2s ease, opacity .2s ease;
}
.collection-view-btn.active { background: rgba(12,187,231,.14); opacity: 1; }
.collection-view-btn:hover { background: rgba(12,187,231,.08); }



/* Masque la vue numero 4 ( inutile , trop grand) */
.collection-view-btn[data-xl="12"] { display: none !important; }



/* 3. Textes de la barre : navy doux */
.products-selection .total-products p,
.showing .showing-text { color: #5a6b8c !important; font-weight: 500; }
.products-selection .sort-by { color: #5a6b8c !important; font-weight: 600; }

/* 4. Coeur wishlist : navy au repos, cyan en actif (au lieu du vert) */
.product-miniature .an_wishlist-icon path { fill: #17327a; }
.product-miniature .an_wishlist-icon-active path { fill: #0cbbe7 !important; }

/* 5. Quick-view (loupe) : cyan + zoom */
.product-miniature .quick-view { color: #17327a; transition: color .2s ease, transform .2s ease; }
.product-miniature .quick-view:hover { color: #0cbbe7; transform: scale(1.12); }

/* 6. Ajout panier sur la miniature : gradient premium + qty affinee */
.product-miniature .an_productattributes-qty-add .btn-primary {
  background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%) !important;
  border: none !important; border-radius: 10px !important;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important;
}
.product-miniature .an_productattributes-qty-add .btn-primary:hover {
  background: linear-gradient(135deg, #0f2260 0%, #0aabe0 100%) !important;
  box-shadow: 0 6px 16px rgba(12,187,231,.35) !important; transform: translateY(-1px);
}
.product-miniature .an_productattributes-qty {
  border: 1.5px solid #e3e8f1 !important; border-radius: 8px !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.product-miniature .an_productattributes-qty:focus {
  border-color: #0cbbe7 !important; box-shadow: 0 0 0 3px rgba(12,187,231,.15) !important; outline: none !important;
}



/* FICHE PRODUIT — mise en page et style */

/* --- 1. Image principale : cadre doux + ombre + zoom au survol --- */
#main .product-cover {
  border: 1px solid #eef1f7;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(23, 50, 122, .08);
  background: #fff;
}
#main .product-cover img.js-qv-product-cover {
  border-radius: 16px;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
#main .product-cover:hover img.js-qv-product-cover {
  transform: scale(1.04);
}
/* Pastille loupe (zoom-in) en cyan */
#main .product-cover #zoom-in-slider .zoom-in {
  color: #17327a;
  transition: color .2s ease;
}
#main .product-cover:hover #zoom-in-slider .zoom-in {
  color: #0cbbe7;
}

/* --- 2. Miniatures : bordure cyan sur la vignette active + survol --- */
#main .js-qv-mask .thumb-container .thumb {
  border: 2px solid #eef1f7 !important;
  border-radius: 10px;
  transition: border-color .2s ease, transform .2s ease;
}
#main .js-qv-mask .thumb-container .thumb:hover {
  border-color: rgba(12, 187, 231, .5) !important;
  transform: translateY(-2px);
}
#main .js-qv-mask .thumb-container .thumb.selected {
  border-color: #0cbbe7 !important;
}

/* --- 3. Coeur wishlist fiche produit : navy/cyan (au lieu du vert) --- */
#main .an_wishlist-mini .an_wishlist-icon path { fill: #17327a; }
#main .an_wishlist-mini .an_wishlist-icon-active path { fill: #0cbbe7 !important; }
#main .an_wishlist-mini-count {
  background: #17327a !important;
  color: #fff !important;
}

/* --- 4. Titre H1 : espacement + filet cyan dessous --- */
#main .col-md-7 > h1.h1[itemprop="name"] {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 16px;
}
#main .col-md-7 > h1.h1[itemprop="name"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #17327a, #0cbbe7);
}

/* --- 5. Prix : plus grand, navy, dominant + label TTC en pastille --- */
#main .product-prices .current-price span[itemprop="price"] {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: #17327a !important;
  line-height: 1.1;
}
#main .tax-shipping-delivery-label {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(12, 187, 231, .10);
  color: #2c7d99 !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- 6. Selecteur de variante (Conditionnement) : pilule premium --- */
#main .product-variants .form-control-select {
  border: 1.5px solid #e3e8f1 !important;
  border-radius: 12px !important;
  padding: .55rem 2.2rem .55rem 1rem !important;
  height: auto !important;
  color: #17327a !important;
  font-weight: 600 !important;
  background-position: right 1rem center;
  transition: border-color .2s ease, box-shadow .2s ease;
}
#main .product-variants .form-control-select:focus {
  border-color: #0cbbe7 !important;
  box-shadow: 0 0 0 3px rgba(12, 187, 231, .15) !important;
  outline: none !important;
}

/* --- 7. Quantite (touchspin) : champ arrondi + boutons +/- cyan --- */
/* Le conteneur passe en flex pour que l'input et la colonne de boutons
   aient EXACTEMENT la meme hauteur (sinon espace vide sous l'input). */
#main .product-quantity .bootstrap-touchspin {
  display: inline-flex !important;
  align-items: stretch !important;
}
#main .product-quantity #quantity_wanted {
  border: 1.5px solid #e3e8f1 !important;
  border-radius: 10px 0 0 10px !important;
  color: #17327a !important;
  font-weight: 600;
  height: auto !important;
  align-self: stretch !important;
}
#main .product-quantity .input-group-btn-vertical {
  display: flex !important;
  flex-direction: column !important;
}
#main .product-quantity .input-group-btn-vertical .btn {
  flex: 1 1 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#main .product-quantity .bootstrap-touchspin-up,
#main .product-quantity .bootstrap-touchspin-down {
  border: 1.5px solid #e3e8f1 !important;
  background: #f7f9fc !important;
  color: #17327a !important;
  transition: background .18s ease, color .18s ease;
}
#main .product-quantity .bootstrap-touchspin-up:hover,
#main .product-quantity .bootstrap-touchspin-down:hover {
  background: rgba(12, 187, 231, .12) !important;
  color: #0cbbe7 !important;
}

/* --- 8. Bouton "Ajouter au panier" : gradient premium, grand, anime --- */
#main .product-add-to-cart .add-to-cart.btn-primary {
  background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: .85rem 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  box-shadow: 0 8px 20px rgba(12, 187, 231, .25) !important;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important;
}
#main .product-add-to-cart .add-to-cart.btn-primary:hover {
  background: linear-gradient(135deg, #0f2260 0%, #0aabe0 100%) !important;
  box-shadow: 0 12px 28px rgba(12, 187, 231, .38) !important;
  transform: translateY(-2px);
}
#main .product-add-to-cart .add-to-cart.btn-primary:active {
  transform: translateY(0);
}

/* --- 9. Disponibilite "En Stock" : pastille verte avec point --- */
#main #product-availability {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #2e7d32 !important;
}
#main #product-availability .product-available {
  color: #2e7d32 !important;
}

/* --- 10. Onglets (Description / Details) : soulignement cyan actif --- */
#main .tabs .nav-tabs {
  border-bottom: 2px solid #eef1f7 !important;
  gap: 4px;
}
#main .tabs .nav-tabs .nav-link {
  border: none !important;
  color: #5a6b8c !important;
  font-weight: 600;
  padding: 12px 18px !important;
  position: relative;
  background: transparent !important;
  transition: color .2s ease;
}
#main .tabs .nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #17327a, #0cbbe7);
  transform: scaleX(0);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
#main .tabs .nav-tabs .nav-link:hover {
  color: #17327a !important;
}
#main .tabs .nav-tabs .nav-link.active {
  color: #17327a !important;
}
#main .tabs .nav-tabs .nav-link.active::after {
  transform: scaleX(1);
}

/* --- 11. Fiche technique : 2 cellules pleines, pas de contour vide --- */
/* Pas de bordure exterieure (elle laissait un liseré blanc autour du
   fond gris). Les 2 cellules sont remplies a fond, marges a zero. */
#main .product-features .data-sheet {
  border-radius: 10px;
  overflow: hidden;
  border: none !important;
}
#main .product-features .data-sheet dt.name,
#main .product-features .data-sheet dd.value {
  margin: 0 !important;
  padding: 13px 16px !important;
  border: none !important;
}
#main .product-features .data-sheet dt.name {
  background: #eef3fb !important;
  color: #17327a !important;
  font-weight: 700;
}
#main .product-features .data-sheet dd.value {
  background: #f7f9fc !important;
  color: #3a4467 !important;
}
#main .product-features h3.h6 {
  color: #17327a !important;
  font-weight: 700;
}

/* --- 12. Reference produit : carte avec accent cyan a gauche --- */
#main .product-reference {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  border-left: 3px solid #0cbbe7;
  background: #f6f9fd;
  border-radius: 0 8px 8px 0;
  padding: 10px 18px;
  margin-bottom: 16px;
}
#main .product-reference .label {
  color: #8a96ad !important;
  font-weight: 600;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 !important;
  padding: 0 !important;
}
#main .product-reference span[itemprop="sku"] {
  color: #17327a !important;
  font-weight: 700;
  font-size: 15px !important;
  letter-spacing: .03em;
}

/* --- 13. Logo marque (fabricant) : cadre doux centre --- */
#main .product-manufacturer .manufacturer-logo {
  border: 1px solid #eef1f7 !important;
  border-radius: 10px;
  padding: 6px;
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}
#main .product-manufacturer .manufacturer-logo:hover {
  box-shadow: 0 6px 16px rgba(23, 50, 122, .12);
  transform: translateY(-2px);
}

/* --- 14. "Produits associes" : titre avec filet cyan --- */
#main .product-accessories > h3.h5 {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 22px;
  color: #17327a !important;
}
#main .product-accessories > h3.h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #17327a, #0cbbe7);
}

/* --- 15. Produits associes : hauteur egale + bas des cartes aligne --- */
.product-accessories .products.owl-carousel .owl-stage {
  display: flex !important;
  align-items: stretch !important;
}
.product-accessories .products:not(.owl-carousel) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}
.product-accessories .owl-item {
  display: flex !important;
  height: auto !important;
}
.product-accessories .owl-item > article.product-miniature,
.product-accessories .products:not(.owl-carousel) article.product-miniature {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
}
/* Neutralise le margin-bottom inline (espace fantome sous l'image, devenu
   inutile puisque la description repasse en flux normal juste en dessous). */
.product-accessories .thumbnail-container {
  margin-bottom: 0 !important;
}
/* Description en flux normal + colonne flex qui absorbe l'espace disponible */
.product-accessories .product-description {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.product-accessories .product-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 36px !important;
  max-height: 36px !important;
}
/* CLE DE L'ALIGNEMENT (confirmé avec la console) : images, liens image
   et titres sont deja alignes (meme Y sur toutes les cartes). Seul le texte
   de description varie (2 a 4 lignes selon le produit) et pousse prix +
   bouton plus ou moins bas. On lui reserve une hauteur uniforme (min-height)
   et on plafonne a 4 lignes - du coup toutes les descriptions prennent la
   meme place, et prix/boutons restent alignes partout.
   80px ~= 4 lignes, à ajuster si la police change. */

.product-accessories .an_short_description {
  display: -webkit-box !important;
  -webkit-line-clamp: 5 !important;
  line-clamp: 5 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  /* min-height = les descriptions COURTES s'agrandissent (alignement) ;
     max-height IDENTIQUE = les LONGUES sont coupees net (pas de ligne
     qui deborde). Les 2 a la meme valeur -> toutes exactement 92px (5 lignes).
     Si une description est ENCORE coupee -> monter clamp a 6 + les 2 hauteurs
     a ~110px ; si trop de blanc sous les courtes -> baisser clamp a 4 + 72px. */
  min-height: 92px !important;
  max-height: 92px !important;
  margin-bottom: 12px !important;
}
/* Bloc prix + variante + bouton pousse tout en bas -> boutons alignes */
.product-accessories .product-price-and-shipping {
  margin-top: auto !important;
}




/* =========================================================
   FOOTER DESKTOP — amelioration ( filet cyan , liens des listes et bloc nous contacter )
   ========================================================= */
@media (min-width: 768px) {
  /* --- Titres de colonnes : filet cyan dessous (comme .su-title) --- */
  #footer .footer-container h3.h3.hidden-sm-down,
  #footer .footer-container h3.myaccount-title,
  #footer .footer-container .block-contact-title {
    position: relative !important;
    padding-bottom: 12px !important;
    margin-bottom: 18px !important;
    color: #ffffff !important;
  }
  #footer .footer-container h3.myaccount-title a {
    color: #ffffff !important;
  }
  #footer .footer-container h3.h3.hidden-sm-down::after,
  #footer .footer-container h3.myaccount-title::after,
  #footer .footer-container .block-contact-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 42px; height: 3px;
    border-radius: 2px;
    background: #0cbbe7;
  }

  /* --- Liens des listes : tiret cyan + glissement (option B) --- */
  #footer .footer-container #footer_sub_menu_8086 li a,
  #footer .footer-container .account-list li a {
    position: relative;
    display: inline-block;
    color: #ffffff !important;
    text-decoration: none !important;
    padding-left: 0;
    transition: color .22s ease, padding-left .22s ease;
  }
  #footer .footer-container #footer_sub_menu_8086 li a::before,
  #footer .footer-container .account-list li a::before {
    content: "";
    position: absolute;
    left: 0; top: .65em;
    width: 0; height: 2px;
    border-radius: 2px;
    background: #0cbbe7;
    transition: width .22s ease;
  }
  #footer .footer-container #footer_sub_menu_8086 li a:hover,
  #footer .footer-container .account-list li a:hover {
    color: #ffffff !important;
    padding-left: 18px;
  }
  #footer .footer-container #footer_sub_menu_8086 li a:hover::before,
  #footer .footer-container .account-list li a:hover::before {
    width: 12px;
  }

  /* --- Bloc "Nous contacter" : lien telephone en cyan au survol --- */
  #footer .footer-container .block-contact .contact-item a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color .22s ease;
  }
  #footer .footer-container .block-contact .contact-item a:hover {
    color: #0cbbe7 !important;
  }
}


/* =========================================================
   PAGE D'ACCUEIL — Home slider (carrousel principal)
   ---------------------------------------------------------
   Le theme dessine les dots en noir (rond plein actif).
   On les passe en blanc translucide + pilule CYAN allongee
   pour l'actif (visible sur les photos, identite navy/cyan).
   Bonus : fleches prev/next en cyan au survol.
   ========================================================= */
#anthemeblocks-homeslider_1 .owl-dots .owl-dot span,
.anthemeblocks-homeslider .owl-dots .owl-dot span {
  width: 11px !important;
  height: 11px !important;
  margin: 5px 7px !important;
  background: rgba(255, 255, 255, .55) !important;
  border: none !important;
  border-radius: 50% !important;
  transform: scale(1) !important;
  transition: width .3s ease, background .3s ease, border-radius .3s ease !important;
}
#anthemeblocks-homeslider_1 .owl-dots .owl-dot:hover span,
.anthemeblocks-homeslider .owl-dots .owl-dot:hover span {
  background: #ffffff !important;
  border: none !important;
  transform: scale(1) !important;
}
#anthemeblocks-homeslider_1 .owl-dots .owl-dot.active span,
.anthemeblocks-homeslider .owl-dots .owl-dot.active span {
  width: 30px !important;               /* pilule allongee */
  background: #0cbbe7 !important;       /* cyan */
  border: none !important;
  border-radius: 6px !important;
  transform: scale(1) !important;
}

/* Fleches hero : rond blanc + icone navy (visibles sur toutes les slides,
   meme la slide claire ou l'icone gris du theme disparaissait). */
.anthemeblocks-homeslider .owl-prev,
.anthemeblocks-homeslider .owl-next {
  width: 46px !important; height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, .9) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(23, 50, 122, .2) !important;
}
.anthemeblocks-homeslider .owl-prev i,
.anthemeblocks-homeslider .owl-next i {
  color: #17327a !important;
}
.anthemeblocks-homeslider .owl-prev:hover,
.anthemeblocks-homeslider .owl-next:hover {
  background: #ffffff !important;
}
.anthemeblocks-homeslider .owl-prev:hover i,
.anthemeblocks-homeslider .owl-next:hover i {
  color: #0cbbe7 !important;
}

/* Bouton "En savoir plus" du slider : meme gradient navy->cyan que le
   bouton "Ajouter au panier" (l'ancien cyan clair disparaissait sur la
   slide au fond clair). */
.anthemeblocks-homeslider .btn-box .btn,
.anthemeblocks-homeslider .btn-box .btn-primary {
  background: linear-gradient(135deg, #17327a 0%, #0cbbe7 100%) !important;
  border: none !important;
  color: #ffffff !important;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease !important;
}
.anthemeblocks-homeslider .btn-box .btn:hover,
.anthemeblocks-homeslider .btn-box .btn-primary:hover {
  background: linear-gradient(135deg, #0f2260 0%, #0aabe0 100%) !important;
  box-shadow: 0 8px 20px rgba(12, 187, 231, .35) !important;
  transform: translateY(-2px);
}




/* PAGE D'ACCUEIL — carrousel "Produits phares"
   ---------------------------------------------------------
   Le theme place les fleches en haut (top: -90px, a cote du titre).
   On les remet sur les cotes, centrees sur l'image produit (top: 130px
   ~= moitie de l'image de 253px). Ronds blancs, icone navy -> cyan au
   survol. Masquees sur mobile (swipe tactile). Dots repasses en cyan
   pour rester coherents avec le slider hero. */

.js-anthemeblocks-product-block-slider {
  position: relative;                  /* ancre les fleches absolues */
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-prev,
.js-anthemeblocks-product-block-slider .owl-nav .owl-next {
  position: absolute !important;
  top: 130px !important;               /* ~ centre de l'image produit (tunable) */
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 46px; height: 46px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  border: 1px solid rgba(23, 50, 122, .15) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(23, 50, 122, .12) !important;
  z-index: 5;
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-prev {
  left: -55px !important; right: auto !important;   /* hors des cartes, dans la marge */
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-next {
  right: -55px !important; left: auto !important;
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-prev:hover,
.js-anthemeblocks-product-block-slider .owl-nav .owl-next:hover {
  border-color: #0cbbe7 !important;
  box-shadow: 0 6px 18px rgba(12, 187, 231, .28) !important;
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-prev i,
.js-anthemeblocks-product-block-slider .owl-nav .owl-next i {
  color: #17327a !important;
}
.js-anthemeblocks-product-block-slider .owl-nav .owl-prev:hover i,
.js-anthemeblocks-product-block-slider .owl-nav .owl-next:hover i {
  color: #0cbbe7 !important;
}

/* Dots : pilule cyan pour l'actif (fond clair -> base navy translucide) */
.js-anthemeblocks-product-block-slider .owl-dot {
  background: transparent !important;
  border: none !important;
  transform: none !important;
  width: auto !important; height: auto !important;
  margin: 0 6px !important;
}
.js-anthemeblocks-product-block-slider .owl-dot span {
  display: block;
  width: 11px !important; height: 11px !important;
  background: rgba(23, 50, 122, .28) !important;
  border: none !important;
  border-radius: 50% !important;
  transition: width .3s ease, background .3s ease, border-radius .3s ease !important;
}
.js-anthemeblocks-product-block-slider .owl-dot:hover span {
  background: #17327a !important;
}
.js-anthemeblocks-product-block-slider .owl-dot.active span {
  width: 28px !important;
  border-radius: 6px !important;
  background: #0cbbe7 !important;
}

/* Tablette + mobile : fleches masquees (pas de marge laterale pour les
   placer hors des cartes) -> le glissement tactile prend le relais. */
@media (max-width: 991px) {
  .js-anthemeblocks-product-block-slider .owl-nav .owl-prev,
  .js-anthemeblocks-product-block-slider .owl-nav .owl-next {
    display: none !important;
  }
}



/* =========================================================
   PAGE D'ACCUEIL — Bande "Vous ne trouvez pas votre produit ameliorer"
   ========================================================= */
  .su-band {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 40px 0;
    background: #e8eef7;                      /* gris-bleu un peu plus present -> contraste avec le fond quasi-blanc */
  }
.su-band-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;                          /* passe en 1 colonne sur mobile */
}
.su-band-left  { flex: 1 1 340px; }
.su-band-right { flex: 1 1 460px; }
.su-band-title {
  color: #17327a;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.25;
  margin: 0 0 14px;
  padding-bottom: 12px;
  position: relative;
}
.su-band-title::after {                     /* trait cyan ancre a gauche */
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 54px; height: 3px;
  background: #0cbbe7;
  border-radius: 2px;
}
.su-band-tag {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 12px;
  font-weight: 700;
  color: #0cbbe7;
  margin-bottom: 6px;
}
.su-band-left p {
  margin: 0;
  color: #4a5568;
  line-height: 1.65;
  font-size: 14.5px;
}
.su-band-right p {
  margin: 0 0 12px;
  color: #444;
  line-height: 1.7;
  font-size: 15px;
}
.su-band-right p:last-child { margin-bottom: 0; }
.su-band-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 26px;
  background: #17327a;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none !important;
  transition: background .2s;
}
.su-band-btn:hover {
  background: #0cbbe7;
  color: #fff !important;
}
@media (max-width: 767px) {
  .su-band { padding: 28px 0; }
  .su-band-inner { gap: 22px; }
  .su-band-title { font-size: 21px; }
}



/* ============================================================
   HOMEPAGE — Carrousel "Nos marques" (module ybc-mnf-block)
   Normalise la hauteur des logos pour eviter les espaces
   irreguliers dus aux tailles d'images variees.
   ============================================================ */
#ybc-mnf-block {
  /* La carte est dans un conteneur contraint (~1140px). Pour l'elargir
     au-dela, on la SORT du conteneur et on la centre sur l'ECRAN (vw) :
     left:50% (centre du parent = centre ecran) + translateX(-50%).
     Largeur = viewport - 160px (80px de marge mini chaque cote pour les
     fleches), plafonnee a 1440px. -> pas de scroll horizontal. */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 160px);
  max-width: 1440px;
  margin: 40px 0 50px;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(23, 50, 122, .08);
  padding: 36px 30px 40px;                    /* hauteur revenue comme avant */
}
/* Titre centre + trait cyan dessous */
#ybc-mnf-block .ybc-mnf-block-title {
  text-align: center;
  color: #17327a;
  font-weight: 700;
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 28px;
}
#ybc-mnf-block .ybc-mnf-block-title::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 54px; height: 3px;
  background: #0cbbe7;
  border-radius: 2px;
}

/* --- Logos : hauteur uniforme, couleur conservee --- */
#ybc-mnf-block-ul .owl-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#ybc-mnf-block-ul .owl-item li {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100px;
  padding: 12px 20px;
}
#ybc-mnf-block-ul .owl-item li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100%;
  width: 100%;
}
#ybc-mnf-block-ul .owl-item li img {
  max-height: 82px;
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
/* --- Fleches sur les cotes (sorties du coin haut-droit) ---
   Position absolue dans le carrousel (#ybc-mnf-block-ul, owl-carousel),
   centrees verticalement sur la rangee de logos. Une gouttiere laterale
   (padding) evite qu'elles chevauchent les logos. Ronds blancs, icone
   navy -> cyan au survol, meme style que le carrousel produits. */

#ybc-mnf-block-ul {
  position: relative;                          /* ancre les fleches absolues */
}
/* IMPORTANT : le module positionne .owl-nav en absolu (haut-droit).
   On le remet en statique -> les fleches se calent alors par rapport
   a #ybc-mnf-block-ul (positionne) et non par rapport a .owl-nav. */
#ybc-mnf-block-ul .owl-nav {
  position: static !important;
  margin: 0 !important;
  top: auto !important;
  right: auto !important;
}
#ybc-mnf-block-ul .owl-nav .owl-prev,
#ybc-mnf-block-ul .owl-nav .owl-next {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 46px; height: 46px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 1px solid rgba(23, 50, 122, .15) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(23, 50, 122, .12) !important;
  color: #17327a !important;
  font-size: 0 !important;                     /* tue le glyphe texte natif du module */
  z-index: 5;
}
/* BIEN HORS de la carte (comme produits phares).
   -72px = padding carte (30) + 42px qui depassent du bord. */
#ybc-mnf-block-ul .owl-nav .owl-prev { left: -100px !important; right: auto !important; }
#ybc-mnf-block-ul .owl-nav .owl-next { right: -100px !important; left: auto !important; }
#ybc-mnf-block-ul .owl-nav .owl-prev:hover,
#ybc-mnf-block-ul .owl-nav .owl-next:hover {
  border-color: #0cbbe7 !important;
  box-shadow: 0 6px 18px rgba(12, 187, 231, .28) !important;
  color: #0cbbe7 !important;
}
/* Chevron dessine en CSS (bordures) -> parfaitement centre dans le rond,
   sans dependance a la police d'icones du module. On neutralise le
   glyphe d'origine (eventuel ::after) et on dessine sur ::before. */
#ybc-mnf-block-ul .owl-nav .owl-prev::after,
#ybc-mnf-block-ul .owl-nav .owl-next::after { content: none !important; }
#ybc-mnf-block-ul .owl-nav .owl-prev::before,
#ybc-mnf-block-ul .owl-nav .owl-next::before {
  content: "" !important;
  position: static !important;
  display: block;
  width: 9px; height: 9px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-top: 0; border-right: 0;
}
#ybc-mnf-block-ul .owl-nav .owl-prev::before { transform: rotate(45deg);   margin-left: 4px; }
#ybc-mnf-block-ul .owl-nav .owl-next::before { transform: rotate(-135deg); margin-right: 4px; }

/* Mobile / tablette : on annule la sortie de conteneur + on masque les
   fleches (pas de place hors carte) -> swipe tactile. */
@media (max-width: 991px) {
  #ybc-mnf-block {
    position: static;
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
    margin: 30px 15px 36px;
  }
  #ybc-mnf-block-ul .owl-nav .owl-prev,
  #ybc-mnf-block-ul .owl-nav .owl-next { display: none !important; }
}


/* Catalogue : aligne le prix au meme niveau sur toutes les cartes produit.  */
.product-miniature:not(:has(.product-variants-item)) .an_pa_product-variants {
  min-height: 48px;
}


/* Reassurance : visible uniquement sur la homepage (page-index).
   displayHomeAfter dans AN Theme s'affiche sur toutes les pages — on masque
   le bloc sur toutes les pages non-accueil via la classe body. */
body:not(.page-index) .anthemeblocks-reassurance {
  display: none !important;
}


/* Mobile */

/* =========================================================
   FOOTER MOBILE — fix coupure premiere lettre des titres d'accordeon + couleur illisible
   ========================================================= */
@media (max-width: 767px) {
  /* Bloc "Nous contacter" masque sur mobile (lien deja dans Informations). */
  .block-contact {
    display: none !important;
  }

  /* Fond blanc du collapse ET du collapsing (animation Bootstrap) -> navy */
  #footer .footer-container .collapse,
  #footer .footer-container .collapsing,
  #footer .footer-container ul.collapse,
  #footer .footer-container .account-list {
    background: #203472 !important;
  }

  /* Fix coupure "I" de Informations : le .row imbrique a margin:-15px et
     le parent a overflow:hidden -> la gauche est clippee.
     On libere l'overflow sur la chaine et on compense le padding. */
  #footer .footer-container .col-md-4.links,
  #footer .footer-container .col-md-4.links .row {
    overflow: visible !important;
  }
  #footer .footer-container .col-md-4.links .title {
    padding-left: 15px !important;
    overflow: visible !important;
  }

  /* Titres d'accordeon : bien blancs */
  #footer .footer-container [data-toggle="collapse"] .h3,
  #footer .footer-container .title .h3,
  #footer .footer-container .title span.h3 {
    color: #ffffff !important;
    overflow: visible !important;
  }

  /* Liens dans les listes : couleur claire lisible sur fond navy */
  #footer .footer-container .collapse li a,
  #footer_sub_menu_38231 a,
  #footer_account_list a {
    color: #afc0e8 !important;
    font-weight: 500 !important;
    display: block !important;
    padding: 6px 15px !important;
  }
  #footer .footer-container .collapse li a:hover,
  #footer_sub_menu_38231 a:hover,
  #footer_account_list a:hover {
    color: #ffffff !important;
  }
}