/* 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;}





/*
.safeuse-unit-price {
  display: block !important;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #17327a;
}

*/




/* Menu principal : garde tout sur une seule ligne sans trop compacter */
@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: 17px !important;
    padding-right: 17px !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: center !important;
    gap: 0 !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; }
}

















/* ============================================================
   Menu categories - colonne de gauche (v5 : sans icones, deplie compact + style)
   Pages catalogue. Barre d'accent cyan + hierarchie par data-depth.
   Pas d'emoji (cf. menu different selon la page -> incoherences).
   Icones toggle = Material Icons (police du theme).
   ============================================================ */

/* Carte conteneur */
#left-column .block-categories {
  background: #fff; border: 1px solid #eef1f7; border-radius: 14px;
  padding: 10px 10px 14px; box-shadow: 0 8px 24px rgba(32,52,114,.08);
}

/* Titre du bloc (PREVENTION / SANTE SEXUELLE...) */
#left-column .block-categories .category-top-menu > li > a.h6 {
  display: block; color: #203472; font-weight: 700; letter-spacing: 1px;
  font-size: 13px; text-transform: uppercase;
  padding: 12px 12px 10px; margin-bottom: 4px; border-bottom: 2px solid #eef1f7;
}

/* 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 dessous */
#left-column .category-sub-menu li { display: flex; flex-wrap: wrap; align-items: center; border: 0; margin: 0; }
#left-column .category-sub-menu li > a {
  flex: 1 1 0; min-width: 0; padding: 9px 10px;   /* retrecit + texte a la ligne DANS le lien -> la fleche reste a cote */
  color: #3a4d77; border-radius: 8px; text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, padding-left .2s ease;
}
#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%; }

/* Depth 0 : categories principales */
#left-column .category-top-menu > li > ul > li[data-depth="0"] { border-top: 1px solid #f1f3f9; }
#left-column .category-top-menu > li > ul > li[data-depth="0"]:first-child { border-top: 0; }
#left-column .category-sub-menu li[data-depth="0"] > a { font-weight: 700; font-size: 15px; color: #17327a; }
#left-column .category-sub-menu li[data-depth="0"] > a:hover {
  background: #eef3ff; color: #0cbbe7; border-left-color: #0cbbe7;
}
#left-column li[data-depth="0"]:has(> .collapse.in) > a,
#left-column li[data-depth="0"]:has(> .collapsing) > a {
  background: #eef3ff; border-left-color: #0cbbe7; color: #17327a;
}

/* --- DEPLIE : panneau sur la liste interne, SANS marge verticale --- */
/* (marges haut/bas = saut de hauteur Bootstrap ; padding = compte dans la hauteur, stable) */
#left-column .collapse .category-sub-menu,
#left-column .collapsing .category-sub-menu {
  background: #f7f9fc; border-left: 2px solid #dfe6f3;
  border-radius: 0 10px 10px 0; margin: 0 0 0 12px; padding: 5px 6px;
}

/* Sous-items compacts (depth 1,2,3) */
#left-column .category-sub-menu li[data-depth="1"] > a,
#left-column .category-sub-menu li[data-depth="2"] > a,
#left-column .category-sub-menu li[data-depth="3"] > a { padding: 5px 10px; border-radius: 6px; border-left: 0; }
#left-column .category-sub-menu li[data-depth="1"] > a { font-size: 14px; font-weight: 600; color: #2c3e66; }
#left-column .category-sub-menu li[data-depth="2"] > a { font-size: 13.5px; color: #5a6b8c; }
#left-column .category-sub-menu li[data-depth="3"] > a { font-size: 13px;   color: #7a88a3; }

/* Petit point devant depth 2 et 3 (hierarchie, pas une icone de categorie) */
#left-column .category-sub-menu li[data-depth="2"] > a::before,
#left-column .category-sub-menu li[data-depth="3"] > a::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #c3cee3; margin-right: 9px; vertical-align: middle;
  transition: background .2s ease, transform .2s ease;
}

/* Hover sous-items */
#left-column .category-sub-menu li[data-depth="1"] > a:hover,
#left-column .category-sub-menu li[data-depth="2"] > a:hover,
#left-column .category-sub-menu li[data-depth="3"] > a:hover { background: #e7f0ff; color: #0cbbe7; padding-left: 13px; }
#left-column .category-sub-menu li[data-depth="2"] > a:hover::before,
#left-column .category-sub-menu li[data-depth="3"] > a:hover::before { background: #0cbbe7; transform: scale(1.3); }

/* Bouton +/- (depth 0) : rond */
#left-column .navbar-toggler.collapse-icons {
  flex: 0 0 auto; width: 26px; height: 26px; padding: 0; margin-left: 6px;
  background: #eef3ff; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
#left-column .navbar-toggler.collapse-icons:hover { background: #0cbbe7; }
#left-column .navbar-toggler.collapse-icons .material-icons { font-size: 18px; color: #203472; }
#left-column .navbar-toggler.collapse-icons:hover .material-icons { color: #fff; }

/* Fleches (depth 1+) */
#left-column .arrows { flex: 0 0 auto; margin-left: 6px; cursor: pointer; display: flex; align-items: center; }
#left-column .arrows .material-icons { font-size: 18px; color: #9aa6bf; transition: color .2s ease; }
#left-column .arrows:hover .material-icons { color: #0cbbe7; }