/* Start custom CSS for text-editor, class: .elementor-element-2beecb0 */.mgb{
  --nav:#002FA7; --nav-d:#001A5C; --jaune:#FFD60A;
  --txt:#1B2A4A; --txt2:#4A5B7A; --ligne:#C7D8F1; --tint:#F5F9FF;
  color:var(--txt);
}
.mgb *{box-sizing:border-box}
 
/* ---------- typographie ---------- */
.mgb p{margin:0 0 12px !important;font-size:13.5px !important;line-height:1.65;color:var(--txt2)}
.mgb .lead{font-size:15px !important;line-height:1.7;color:var(--txt)}
.mgb b,.mgb strong{color:var(--txt);font-weight:600}
 
.mgb h2{margin:28px 0 12px !important;font-size:20px !important;font-weight:600 !important;line-height:1.3;color:var(--nav-d) !important}
.mgb h2::before{content:"";display:inline-block;width:26px;height:4px;border-radius:2px;background:var(--jaune);margin:0 10px 4px 0;vertical-align:middle}
.mgb h3{margin:0 0 6px !important;font-size:14.5px !important;font-weight:700 !important;line-height:1.35;color:var(--nav-d) !important}
 
.mgb p a,.mgb li a{display:inline !important;color:var(--nav) !important;font-weight:600;
  text-decoration:underline !important;text-underline-offset:3px;text-decoration-color:rgba(0,47,167,.35)}
.mgb p a:hover,.mgb li a:hover{text-decoration-color:var(--nav)}
 
/* ---------- cartes par usage ---------- */
.mgb .usages{display:flex !important;flex-wrap:wrap;gap:12px;margin:0 0 14px}
.mgb .usages>div{flex:1 1 240px;padding:16px 18px;background:#fff;border:1px solid var(--ligne);border-radius:12px;
  box-shadow:0 1px 3px rgba(16,42,100,.06),0 12px 28px -16px rgba(0,47,167,.22);
  transition:transform .22s,border-color .22s}
.mgb .usages>div:hover{transform:translateY(-3px);border-color:#9FBEF2}
.mgb .usages p{margin:0 0 10px !important;font-size:12.5px !important}
.mgb .voir{margin:0 !important}
.mgb .voir a{display:inline !important;font-size:12.5px !important;font-weight:700;color:var(--nav) !important;text-decoration:none !important}
.mgb .voir a::after{content:"\2009\203A";font-weight:700}
.mgb .voir a:hover{text-decoration:underline !important;text-underline-offset:3px}
 
/* ---------- panneau « mesures réelles » ---------- */
.mgb .mesure{padding:16px 18px;margin:0 0 14px;background:var(--tint);border:1px solid #E3EDFC;border-radius:12px}
.mgb .mesure p{margin:0 !important}
.mgb .conds{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.mgb .conds span{display:inline-block;padding:4px 10px;border-radius:999px;background:#E7F0FF;color:var(--nav);
  font-size:11.5px !important;font-weight:700;line-height:1.4}
 
/* ---------- réparabilité + accompagnement, côte à côte ---------- */
.mgb .duo{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 14px}
.mgb .duo>div{flex:1 1 300px;padding:16px 18px;background:#fff;border:1px solid var(--ligne);border-radius:12px;
  box-shadow:0 1px 3px rgba(16,42,100,.06),0 12px 28px -16px rgba(0,47,167,.22)}
.mgb .duo h2{margin:0 0 10px !important}
.mgb .duo p{margin:0 !important}
 
/* ---------- bandeau récapitulatif ---------- */
.mgb .bref{padding:20px 22px;margin:0 0 16px;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--nav-d),var(--nav));
  box-shadow:0 14px 30px -18px rgba(0,47,167,.55)}
.mgb .bref h2{margin:0 0 12px !important;color:#fff !important}
.mgb .bref ul{margin:0 !important;padding:0 !important;list-style:none !important;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px 18px}
.mgb .bref li{position:relative;margin:0 !important;padding:0 0 0 24px !important;list-style:none !important;
  font-size:13px !important;line-height:1.55;color:#EAF1FF}
.mgb .bref li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--jaune);font-weight:700}
 
/* ---------- boutons de fin ---------- */
.mgb .actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.mgb .actions a{display:inline-flex !important;align-items:center;justify-content:center;height:42px;padding:0 22px;
  border-radius:999px;font-size:13.5px !important;font-weight:600;text-decoration:none !important;
  transition:background .2s,transform .2s,border-color .2s}
.mgb .actions .p1{background:var(--nav);color:#fff !important}
.mgb .actions .p1:hover{background:var(--nav-d);transform:translateY(-2px)}
.mgb .actions .p2{background:#fff;color:var(--nav) !important;border:1px solid var(--ligne)}
.mgb .actions .p2:hover{border-color:#9FBEF2;background:#F7FAFF}
 
/* ---------- mobile ---------- */
@media(max-width:720px){
  .mgb h2{font-size:18px !important;margin:22px 0 10px !important}
  .mgb .lead{font-size:14.5px !important}
  .mgb .usages{gap:10px}
  .mgb .usages>div{flex:1 1 100%;padding:14px 15px}
  .mgb .usages>div:hover{transform:none}
  .mgb .duo>div{flex:1 1 100%;padding:14px 15px}
  .mgb .bref{padding:16px}
  .mgb .bref ul{grid-template-columns:1fr}
  .mgb .actions a{flex:1 1 auto}
}






/* */


/* chaque carte s'étire à la hauteur de sa ligne, en grille comme en
   rangée ; la technique (étirement flex) vaut pour les deux et reste
   sûre quand la rangée passe sur plusieurs lignes en mobile */
.products > .elementor{
  display:flex !important;
  align-self:stretch !important;   /* annule le align-self:flex-start posé par la grille */
}
/* en grille (pages catégories et marque), la carte remplit en plus
   la hauteur de sa rangée */
.products.ce-product-grid > .elementor{height:100% !important}
.products > .elementor > .elementor-section-wrap{
  display:flex !important; flex-direction:column !important; width:100%;
}
.products .elementor-section-wrap > section{flex:1 1 auto !important}
 
/* la hauteur se propage jusqu'au contenu de la carte */
.products .elementor-section-wrap > section > .elementor-container,
.products .elementor-container > .elementor-row,
.products .elementor-row > .elementor-element,
.products .elementor-column-wrap{height:100% !important}
.products .elementor-container > .elementor-row{width:100%}
 
/* l'intérieur de la carte devient une colonne souple ; l'espace
   entre widgets du modèle (20 px posés par Creative Elements) est
   resserré à 8 px : titre, pastille d'avis, prix et bouton se
   rapprochent, la carte se condense et le défilement diminue sur
   ordinateur comme sur téléphone */
.products .elementor-column-wrap > .elementor-widget-wrap{
  height:100% !important;
  display:flex !important; flex-direction:column !important;
  align-items:stretch !important;
  row-gap:8px !important;
}
.products .elementor-widget-wrap > .elementor-widget{width:100%}
/* rembourrage vertical de la carte légèrement réduit */
.products .elementor-column-wrap{
  padding-top:8px !important; padding-bottom:8px !important;
}
 
/* le groupe du bas (zone avis, prix, bouton) est ancré au bas de la
   carte par le widget shortcode du modèle, présent dans chaque
   carte : les avis d'une même rangée s'alignent sur la même ligne,
   quelle que soit la longueur du titre */
.products .elementor-widget-wrap > .elementor-widget-shortcode,
.products .elementor-widget-wrap > .ets-rv-product-comments-additional-info{
  margin-top:auto !important;
}
/* si le modèle de carte contient plusieurs widgets shortcode, seul
   le premier ancre le groupe : l'espace libre ne se partage pas */
.products .elementor-widget-wrap > .elementor-widget-shortcode ~ .elementor-widget-shortcode{
  margin-top:0 !important;
}
/* le prix reste collé sous la pastille ; le sélecteur est plus
   précis que la règle margin-top:auto de l'ancien bloc d'alignement
   (.products.ce-product-grid ...), qui reste donc sans effet même
   s'il n'a pas encore été retiré */
.products .elementor-widget-wrap > .elementor-widget.elementor-widget-product-miniature-price{
  margin-top:0 !important;
}
/* zone prix : hauteur libre, le prix s'affiche sur une ou deux
   lignes selon la largeur de l'écran, sans jamais être coupé ;
   l'encadré du prix garde le style défini dans le modèle */
.products .elementor-widget-product-miniature-price{
  min-height:32px !important;
  display:flex !important; flex-direction:column !important; justify-content:flex-end !important;
}
/* le modèle porte des marges négatives de -10 px héritées de
   l'ancien espacement de 20 px entre widgets ; l'espace étant
   maintenant de 8 px, elles ne servent plus et faisaient rogner
   le haut et le bas de l'encadré par le masquage de débordement
   du widget : elles sont neutralisées */
.products .elementor-widget-product-miniature-price > .elementor-widget-container{
  width:100% !important;
  margin-top:0 !important; margin-bottom:0 !important;
}
/* carte de modèle sans widget shortcode : le prix reprend l'ancrage */
.products .elementor-widget-wrap:not(:has(> .elementor-widget-shortcode)) .elementor-widget-product-miniature-price{
  margin-top:auto !important;
}
 
/* le widget shortcode (la pastille d'avis s'y loge) : des marges ou
   rembourrages verticaux posés dans le modèle de carte écarteraient
   la pastille du titre au-dessus et du prix en dessous ; ils sont
   neutralisés comme ceux du widget prix, l'espace entre widgets de
   la carte (8 px) reste le seul écart */
.products .elementor-widget-wrap > .elementor-widget-shortcode{
  margin-bottom:0 !important;
}
.products .elementor-widget-shortcode > .elementor-widget-container{
  margin-top:0 !important; margin-bottom:0 !important;
  padding-top:0 !important; padding-bottom:0 !important;
}
/* filet de sécurité : le module pose 20 px de marge au-dessus et en
   dessous du bloc d'avis et 10 px sous la pilule ; ces valeurs
   restent écartées même si le bloc Avis produits venait à manquer */
.products .elementor-widget-wrap .ets-rv-product-comments-additional-info{
  margin:2px 0 4px !important;
}
.products .elementor-widget-wrap .ets-rv-product-comments-additional-info .comments-note{
  margin-bottom:0 !important;
}
 
/* ================================================================
   RÉSULTATS DE RECHERCHE ET PAGE MARQUE
   Sur ces deux pages, le thème dispose les produits dans sa propre
   grille (recherche : 4 colonnes sur ordinateur ; marque : 3, la
   page ayant une colonne gauche ; 2 sur téléphone), mais les
   cartes Creative Elements y arrivent avec leurs classes de
   colonnes Bootstrap (col-xs-6, col-xl-3 ou col-xl-4) prévues pour
   les blocs de fin de fiche : dans une case de grille, elles
   réduisaient chaque carte à une fraction de sa case (77 à 100 px
   de large). Sur ces pages uniquement, chaque carte reprend la
   pleine largeur de sa case ; la grille du thème garde la main sur
   le nombre de colonnes et les espacements.
   ================================================================ */
#search .products > .elementor,
#manufacturer .products > .elementor{
  width:100% !important; max-width:100% !important;
  flex:none;
  padding-left:0 !important; padding-right:0 !important;
}/* End custom CSS */