/*
 * Theme Name: Biologic2026
 * Template: Divi
 * Author: chabrol
 * Description: This is WP Biologic DE theme.
 * 
 * Feuille corrigée & commentée — 2025-11-07
 * Changements clés:
 *  - Ajout d'une variable --mygilroy (avec fallbacks)
 *  - .products-section positionnée (relative) pour son ::before
 *  - Notes de compatibilité sur :has()
 *  - Ajustements responsive (padding du Discover Banner)
 *  - Conseils a11y et structure de commentaires
 */

/* ============================================
   VARIABLES CSS (couleurs, fontes, etc.)
   ============================================ */
:root {
  /* Couleurs corporate */
  --s-blue: #23346A;
  --l-blue: #5C81F7;
  --grey: #F6F6F6;
  --yellow: #FFCF00;
  --orange: #FF7854;
  --dark: #333333;
  --line: #ecebeb;
  --darkline: #ccc;

  /* Police principale (avec fallbacks sûrs) */
  --mygilroy: "Gilroy", "Inter", Arial, sans-serif;
}

/* ============================================
   TYPOGRAPHIE GLOBALE
   ============================================ */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

h1,
h2 {
  color: var(--s-blue);
  font-weight: 800;
  font-size: 2.5rem !important; /* Maintien du sizing dominé par Divi */
}
h1 span,h2 span{color:#ffcc00}
h3,
h3 a { color: #2ea3f2; }
sup{bottom: 0.25em;
    font-size: .8em;}
body {
  font-family: var(--mygilroy);
  padding-bottom: 63px; /* réserve pour le footer fixe */
}

.et_pb_toggle a { color: #2ea3f2; }
.rank-math-breadcrumb{font-size:1.2em}
.rank-math-breadcrumb a{font-weight:700; }
/* ============================================
   UTILITAIRES (helpers réutilisables)
   ============================================ */
.marginTop10 { margin-top: 10px; }
.padding20 { padding: 20px; }
.left10 { float: left; margin-right: 10px; }
.clearboth { clear: both; }
.bg-grey { background-color: var(--grey); }

/* Accessibilité: classe de masquage visuel (si nécessaire) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; border: 0; padding: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ============================================
   TRIANGLES CSS (mixin de lien avec flèche)
   ============================================ */
[data-triangle-link] {
  display: inline-block;
  padding-right: 20px;
  text-decoration: none;
  position: relative;
  transition: color .18s ease;
}

[data-triangle-link]::after {
  content: "";
  position: absolute;
  top: 50%; right: 6px;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 6px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .18s ease, border-left-color .18s ease;
}

[data-triangle-link]:hover::after { transform: translateY(-50%) translateX(4px); }

/* ============================================
   MENU
   ============================================ */
   #top-menu-nav #top-menu > li.bl-lang-switcher { position: relative; }
  #top-menu-nav #top-menu > li.bl-lang-switcher > ul.sub-menu {
    position: absolute !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    z-index: 9999 !important;
    min-width: 180px;
    white-space: nowrap; /* ou normal + max-width si tu préfères les retours à la ligne */
  }
/* ============================================
   TOUTES SECTIONS
   ============================================ */
    .et_pb_section {
        padding: 2% 0;
    }
/* ============================================
   SECTION : DISCOVER BANNER
   ============================================ */
.discover_banner-row {
  display: flex; align-items: stretch; position: relative;
}

.discover_banner-row .et_pb_column {
  display: flex; align-items: flex-start; box-sizing: border-box;
}

.discover_banner-row .module-texte {
  flex: 0.7; margin-left: 15%; display: flex; flex-direction: column; justify-content: center; height: 100%; box-sizing: border-box;
}

.discover_banner-row .et_pb_promo_description {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding-right: 150px; /* réduit en responsive */
}

.discover_banner-row .module-image {
  flex: 0.3; display: flex; justify-content: flex-end; align-items: flex-start; box-sizing: border-box;
}

/* ============================================
   SECTION : DISCOVER 3 COLUMNS (EC-LAB)
   ============================================ */
.products-section { position: relative; } /* Important pour ancrer ::before */
.products-section::before {
  content: "";
  display: block;
  height: min(50%, 600px);
  width: 100%;
  position: absolute; top: 0; left: 0;
  background: var(--l-blue);
}

.discover_eclab .et_pb_column { width: 32%; margin-right: 2%; }

.discover_3_columns { display: flex; flex-wrap: wrap; align-items: stretch; }
.discover_3_columns .et_pb_column { display: flex; flex-direction: column; }
.discover_3_columns .et_pb_button_module_wrapper { margin-top: auto; }

/* ============================================
   SECTION : LIST BY CONFIGURATION
   ============================================ */
.liste li {
  position: relative !important;
  list-style: none !important;
  margin: 0 10px 30px 10px !important;
  padding-bottom: 30px !important;
  border-bottom: 1px solid #B7B8B9 !important;
}

.liste li:last-child { padding-bottom: 0 !important; border-bottom: none !important; }

.liste li a {
  display: flex; align-items: flex-start;
  color: #4a4a4a !important; font-size: 1em !important; font-weight: 400 !important; line-height: 1.5 !important; text-decoration: none;
}

.liste li a h5 { color: #4e74ea !important; font-weight: 700 !important; font-size: 18px !important; }

.liste li a .gauche { flex: 0.2; }
.liste li a .droite { flex: 0.8; padding-left: 14px !important; }

.liste li .read_more {
  position: absolute; bottom: 5px; right: 0;
  font-style: italic; font-size: 0.8em; color: #5C81F7 !important;
}
.liste li .read_more:before { content: "> "; }

.liste li a:hover h5,
.liste li a:hover .read_more { color: #23346A !important; }

/* ============================================
   SECTION : USP 3 COLONNES (Blurb List)
   ============================================ */
.usp-section .blurb-list,
.usp-section .blurb-list .et_pb_column_4_4 {
  display: flex; flex-wrap: wrap; gap: 30px; width: 100%; box-sizing: border-box;
}

.usp-section .blurb-list .et_pb_blurb { flex: 1 1 calc(33.333% - 20px); box-sizing: border-box; margin: 0 !important; padding: 0 !important; }
.usp-section .blurb-list-module { margin-bottom: 0 !important; }
.usp-section .blurb-list .et_pb_blurb_content { padding: 0 !important; }

.usp-section .blurb-list .et_pb_blurb_container { padding: 0 0 0 15px !important; border-left: 5px solid var(--yellow) !important; }

.usp-section .blurb-list .et_pb_blurb h4.et_pb_module_header,
.usp-section .blurb-list .et_pb_blurb h4.et_pb_module_header span {
  font-size: 1.35rem !important; color: var(--s-blue) !important; margin-bottom: 15px !important; font-weight: 800 !important; line-height: 1.3 !important;
}

.usp-section .blurb-list .et_pb_blurb_description p {
  font-size: 1.125rem !important; font-weight: 300 !important; margin-bottom: 0 !important; line-height: 1.6 !important; color: var(--dark) !important;
}

/* ============================================
   SECTION : FOOTER PRINCIPAL
   ============================================ */
#footer {
  color: #fff; font-family: "Lato", Arial, sans-serif; padding: 48px 20px; box-sizing: border-box;
}

#footer,
#footer .et_pb_code_inner,
#footer h4,
#footer p,
#footer li,
#footer a { color: #fff; }

#footer h4 { color: var(--yellow); font-weight: 700; font-size: 1.8rem; margin: 0 0 0.5rem; }

#footer .colonne {
  display: flex; flex-wrap: nowrap; gap: 4%; align-items: flex-start; width: 100%; box-sizing: border-box;
}

#footer .et_pb_row_10 .et_pb_column_13 > .et_pb_module { box-sizing: border-box; min-width: 0; }

#footer-col-1 { flex: 0 0 22%; }
#footer-col-2 { flex: 0 0 17%; }
#footer-col-3 { flex: 0 0 32%; }
#footer-col-4 { flex: 1 1 0; }

#footer .et_pb_code_inner { padding: 0; margin: 0; }

/* Flèches sur les liens — pattern avec :has() (progressive enhancement) */
#footer a { display: inline-block; padding-right: 20px; text-decoration: none; color: #fff; position: relative; transition: color .18s ease; }
#footer a:hover { color: var(--yellow); }
#footer ul li a { margin-right: 10px; }
#footer a::after { content: none; }

/* ✅ Navigateurs modernes: ajoute la flèche sauf si .no-arrow ou si le lien contient une <img> */
#footer a:not(.no-arrow):not(:has(img))::after {
  content: "";
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .18s ease, border-left-color .18s ease;
}
#footer a:not(.no-arrow):not(:has(img)):hover::after { transform: translateY(-50%) translateX(4px); border-left-color: var(--yellow); }

/* Fallback: au besoin, ajouter une classe .has-img côté HTML pour cibler les liens contenant une image sans :has() */
#footer a.has-img { padding-right: 0; margin-right: 10px; }

#footer-col-3 a::after { display: none; }
#footer a:has(img),
#footer a.no-arrow { padding-right: 0; margin-right: 10px; }

#footer ul { list-style: none; margin: 0; padding: 0; }
#footer ul li { margin-bottom: 8px; }

#footer .header__logo-img { display: block; margin-bottom: 20px; max-width: 200px; height: auto; }

#footer .social-news-grid { display: flex; gap: 20px; align-items: flex-start; text-align: left !important; }
#footer .social-column,
#footer .newsletter-column { text-align: left !important; }

#footer .social-title,
#footer .newsletter-title { font-weight: 700; margin-bottom: 10px; font-size: 1rem; }

.social-icons,
.newsletter-icon { display: flex; gap: 10px; align-items: center; }

.social-icons img,
.newsletter-icon img { width: 42px; height: auto !important; display: inline-block; }

#footer #copyright { margin-top: 20px; font-size: 0.9rem; opacity: 0.8; }

/* ============================================
   SECTION : FOOTER BOTTOM (Support) — FIXE
   ============================================ */
#main-footer {
  background-color: var(--orange); color: #fff; font-family: "Lato", Arial, sans-serif;
  position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000;
}

#footer-bottom { padding: 20px 0; }
#footer-bottom .container { max-width: 100%; padding: 0 20px; }
#footer-info { width: 100%; padding-bottom: 0; }

#footer-links { display: flex; align-items: center; justify-content: space-between; gap: 40px; width: 100%; }

.footer-gauche { font-size: 1.4rem; font-weight: 700; color: #fff; white-space: nowrap; }

.footer-droite { display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; justify-content: flex-end; margin-left: auto; }

.footer-droite a {
  display: inline-block; padding-right: 20px; text-decoration: none; color: #fff !important; position: relative;
  font-size: 1rem; transition: opacity .18s ease; white-space: nowrap;
}
.footer-droite a:hover { opacity: 0.8; }
.footer-droite a::after {
  content: "";
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 0; height: 0; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .18s ease, opacity .18s ease;
}
.footer-droite a:hover::after { transform: translateY(-50%) translateX(4px); opacity: 0.8; }

/* ============================
   BLOC SCHEMA (900 x 461)
   ============================ */
#schema {
  position: relative; width: 900px; height: 461px; margin: 0 auto; isolation: isolate;
}

/* Pile d’images (fond + calques) */
#schema img {
  position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; /* annule img{max-width:100%} de Divi */
  object-fit: contain; display: block !important; pointer-events: none; opacity: 0; z-index: 1; transition: opacity .5s ease; will-change: opacity;
}
#schema #fond { opacity: 1 !important; z-index: 0; }
#schema img.is-active { opacity: 1 !important; z-index: 2; }

/* HOTSPOTS (zones de survol) */
#schema #zoneshover { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; }
#schema #zoneshover > li { position: absolute; background: transparent; }
#schema #zoneshover > li > a {
  position: absolute; inset: 0; display: block;
  text-indent: -9999px; /* cache le texte; prévoir aria-label côté HTML */
  outline: none;
}

/* Positions des hotspots */
#schema #com_essential            { top:185px; left:243px; width: 80px; height: 50px; }
#schema #standard_essential       { top:265px; left:173px; width:150px; height: 50px; }
#schema #eis_essential            { top:295px; left:300px; width: 30px; height: 20px; }
#schema #external_essential       { top:193px; left: 50px; width:116px; height: 80px; }
#schema #sam50_essential          { top:350px; left:120px; width:120px; height: 50px; }

#schema #com_premium              { top:185px; left:483px; width: 90px; height: 50px; }
#schema #standard_premium         { top:265px; left:483px; width:150px; height: 50px; }
#schema #eis_premium              { top:311px; left:513px; width: 35px; height: 20px; }
#schema #arg_premium              { top:325px; left:550px; width: 75px; height: 36px; }
#schema #internal_booster_premium { top:200px; left:678px; width:110px; height: 70px; }
#schema #ulc_premium              { top:320px; left:715px; width:110px; height: 70px; }
#schema #calibration_premium      { top:387px; left:485px; width:110px; height: 55px; }

#schema #sp50e                    { top: 10px; left: 22px; width:186px; height:120px; }
#schema #vsp3e                    { top: 10px; left:256px; width:203px; height:120px; }
#schema #vmp3e                    { top: 10px; left:500px; width:342px; height:120px; }

/* Debug: afficher les zones — à activer ponctuellement
#schema #zoneshover > li{ outline:1px dashed rgba(0,128,255,.35); }
*/

/* PANNEAUX DE CONTENU */
#schema #contenu { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 4; pointer-events: none; }
#schema #contenu > li {
  position: absolute; display: none; /* visible via .is-active */
  background: #fff; color: #000; border-radius: 8px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.08);
  font-size: 14px; line-height: 1.4; transition: opacity .5s ease, transform .2s ease;
}
#schema #contenu > li.is-active { display: block; }

/* Positions des panneaux */
#schema #contenu_com_essential            { left:340px; top:180px; width:280px; }
#schema #contenu_standard_essential       { left:340px; top:250px; width:470px; }
#schema #contenu_eis_essential            { left:340px; top:280px; width:150px; }
#schema #contenu_external_essential       { left:170px; top:220px; width:190px; }
#schema #contenu_sam50_essential          { left:250px; top:320px; width:210px; }

#schema #contenu_com_premium              { left:580px; top:180px; width:280px; }
#schema #contenu_standard_premium         { left:580px; top:180px; width:280px; }
#schema #contenu_eis_premium              { left:520px; top:280px; width:150px; }
#schema #contenu_arg_premium              { left:305px; top:300px; width:238px; }
#schema #contenu_internal_booster_premium { left:490px; top:210px; width:185px; }
#schema #contenu_ulc_premium              { left:490px; top:320px; width:230px; }
#schema #contenu_calibration_premium      { left:380px; top:320px; width:230px; }

#schema #contenu_sp50e                    { left: 22px; top:140px; width:430px; }
#schema #contenu_vsp3e                    { left:140px; top:140px; width:430px; }
#schema #contenu_vmp3e                    { left:390px; top:140px; width:430px; }

/* Transitions communes */
#schema img,
#schema #zoneshover > li,
#schema #contenu > li { transition: opacity .5s ease; }

/* ===========================
   TABLEAU COMPARATIF EC
   =========================== */
/* Structure générale du tableau */
ul.tableau {
  display: grid;
  grid-template-columns: 30% 35% 35%;   /* libellés + 2 colonnes valeurs */
  border-top: 1px solid var(--darkline);
  margin: 0 auto; padding: 0; max-width: 100%;
  background: var(--grey);
  list-style: none; font-size: 15px; line-height: 1.5; color: var(--dark);
}

/* Chaque cellule */
.tableau li { border-bottom: 1px solid var(--darkline); padding: 14px 12px; }
/* Supprime la bordure sur les 3 derniers li */
.tableau li:nth-last-child(-n+3) {
  border-bottom: none;
}
/* Entêtes de colonnes */
.tableau .entete { font-weight: 700; background: var(--grey); }
 .tableau li.entete.ec_premium:before {
    content: url(https://de.biologic.net/wp-content/uploads/layout/puce-ec-premium.png);
    padding-right: 3px
  }
  .tableau li.entete.ec_essential:before {
    content: url(https://de.biologic.net/wp-content/uploads/layout/puce-ec-essential.png);
    padding-right: 3px
  }
/* Pastilles Essential / Premium */
.tableau .entete.ec_essential::before {
  content: url(https://www.biologic.net/wp-content/uploads/2024/12/puce-ec-essential.png);
  padding-right: 6px; vertical-align: middle;
}
.tableau .entete.ec_premium::before {
  content: url(https://www.biologic.net/wp-content/uploads/2024/12/puce-ec-premium.png);
  padding-right: 6px; vertical-align: middle;
}

/* Alignement des colonnes */
.tableau .libelles { font-weight: 600; }
.tableau .value { font-weight: 400; }
.tableau .value.ec_essential a,
.tableau .value.ec_premium a { color: var(--s-blue); text-decoration: underline; }
.tableau .value.ec_essential a:hover,
.tableau .value.ec_premium a:hover { text-decoration: none; }

/* Nettoyage des liens internes */
.tableau a { display: inline-block; }

/* ===========================
   AB-SECTION (alternance texte/image)
   =========================== */
.ab-section .ab-row .et_pb_column { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); }
.ab-section .ab-row .ab-title-module,
.ab-section .ab-row .ab-schema-module { flex: 1 1 50%; margin: 0; }

/* Alternance gauche/droite par rang */
.ab-section .ab-row:nth-of-type(even) .et_pb_column { flex-direction: row-reverse; }

/* Alignements image en desktop */
.ab-section .ab-row .ab-schema-module.et_pb_image { text-align: right; }
.ab-section .ab-row:nth-of-type(even) .ab-schema-module.et_pb_image { text-align: left; }

/* ============================================
   Datenschutzhinweise
   ============================================ */
.policypage h2{padding-top:40px;color:#5C81F7 }
.policypage h3 {padding-top:30px; font-weight:600}
.policypage ul, .policypage table {padding-top:20px !important;padding-bottom:20px}
.policypage li{padding-bottom:10px}
.policypage p{padding:10px 0}
/* form  */
.policypage .wpcf7{max-width:800px;margin:auto;background-color:#23346A; padding:20px}
.policypage label{color:#fff}
 .policypage .wpcf7 .wpcf7-submit{float:right}
 .policypage span.wpcf7-form-control-wrap .wpcf7-text,
 .policypage span.wpcf7-form-control-wrap .wpcf7-textarea {
    width: 100% !important;max-width:100%;
}

 .policypage span.wpcf7-form-control-wrap {
max-width:100%; width: 100%;
}
.policypage textarea{padding:5px}
.policypage .wpcf7 *, .policypage .wpcf7:focus, .policypage .wpcf7:hover, .policypage .wpcf7:visited{margin: auto !important;}


/* ============================================
   RESPONSIVE : TABLETTE (< 1146px et < 1024px)
   ============================================ */
@media all and (max-width:1146px) {
  /* Si présent dans le HTML (container spécifique) */
  #bc_container { left: 0 !important; height: calc((100vw * 0.5) - 20px); }

  /* Sur petit écran on désactive les zones hover (non pertinentes au tactile) */
  #zoneshover li { display: none !important; }

  /* Optionnel : supprimer les marges internes des modules dans cette section */
  .et-db #et-boc .et-l .schema-modular .et_pb_column .et_pb_module { margin-bottom: 0 !important; }
}

@media (max-width: 1024px) {
	/*    UTILITAIRES (helpers réutilisables)*/
	.et_pb_section{padding:0}
  /* Discover Banner — retour à une pile verticale et padding textuel réduit */
  .discover_banner-row .et_pb_column { flex-direction: column-reverse; align-items: center; }
  .discover_banner-row .module-texte,
  .discover_banner-row .module-image { flex: 1 1 100%; margin-left: 0; max-width: 100%; }
	.discover_banner-row .module-image {width: 100%;}
	.discover_banner-row .module-texte {width: 80%;}
  .discover_banner-row .module-image { justify-content: center; margin-bottom: 20px; }
  .discover_banner-row .et_pb_promo_description { padding-right: 0; }

  /* Footer principal */
  #footer .colonne { flex-wrap: wrap; }

  #footer-col-1,
  #footer-col-2,
  #footer-col-3,
  #footer-col-4 { flex: 0 0 48%; min-width: 240px; }

  #footer .social-news-grid,
  #footer .social-column,
  #footer .newsletter-column { text-align: left !important; }

  /* USP Section */
  .usp-section .blurb-list,
  .usp-section .blurb-list .et_pb_column_4_4 { flex-direction: column; }
  .usp-section .blurb-list .et_pb_blurb { flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; }
  .usp-section .blurb-list .et_pb_blurb h4.et_pb_module_header,
  .usp-section .blurb-list .et_pb_blurb h4.et_pb_module_header span { font-size: 1.2rem !important; }
  .usp-section .blurb-list .et_pb_blurb_description p { font-size: 1rem !important; }

  /* AB Section — centrage et empilement */
  .ab-section .ab-row .et_pb_column {
    display: flex; flex-direction: column !important; align-items: center; gap: 24px; text-align: center;
  }
  /* Divi force "left" via classes ; on surcharge explicitement */
  .ab-section .ab-row .ab-title-module.et_pb_promo,
  .ab-section .ab-row .ab-title-module.et_pb_text_align_left,
  .ab-section .ab-row .ab-title-module.et_pb_text_align_left-tablet,
  .ab-section .ab-row .ab-title-module.et_pb_text_align_left-phone { text-align: center !important; }
  .ab-section .ab-row .ab-schema-module.et_pb_image { text-align: center !important; width: 100%; }
  .ab-section .ab-row .ab-schema-module img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
  .ab-section .ab-row .ab-title-module .et_pb_promo_description { max-width: 680px; margin: 0 auto; }
}

/* ============================================
   RESPONSIVE : MOBILE (< 980px)
   ============================================ */
@media (max-width: 980px) {
	
	  /* Menu */
	#mobile_menu li.bl-lang-switcher > ul.sub-menu {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
	.et_mobile_menu li li{padding-left: 8px;}
  /* Discover 3 columns */
  .discover_3_columns { display: block; }
  .discover_3_columns .et_pb_column { width: 100% !important; }

  /* Footer principal */
  #footer .colonne { flex-direction: column; align-items: center; }
  #footer-col-1,
  #footer-col-2,
  #footer-col-3,
  #footer-col-4 { flex: 1 1 100%; margin-right: 0; margin-bottom: 20px; text-align: center; }
  #footer .header__logo-img { margin-left: auto; margin-right: auto; }
  #footer .social-news-grid { justify-content: center; }
  #footer .social-column,
  #footer .newsletter-column { text-align: center !important; }
  .social-icons,
  .newsletter-icon { justify-content: center; }
  #footer a { margin-right: 8px; padding-right: 18px; }
  #footer a:has(img),
  #footer a.no-arrow { padding-right: 0; margin-right: 8px; }
  #footer ul { list-style: none; padding-left: 0; margin-left: 0; }

  /* Footer bottom */
  #footer-links { flex-direction: column; align-items: center; text-align: center; gap: 15px; }
  #footer-bottom { padding: 15px 0; }
  .footer-gauche { font-size: 1.2rem; }
  .footer-droite { flex-direction: column; gap: 10px; align-items: center; justify-content: center; margin-left: 0; }

  /* Compense la hauteur potentielle du footer fixe sur petits écrans */
  body { padding-bottom: 120px; }

  /* Tableau comparatif EC — empilement mobile */
  ul.tableau { grid-template-columns: 1fr; font-size: 14px; border-top:none}
  .tableau .entete,
  .tableau .libelles,
  .tableau .value { border-bottom: 1px solid var(--line); }

	 .tableau li:nth-child(3n) {
    border-bottom: 3px solid var(--darkline);
	}
	  .tableau li.ec_premium:before {
      content: url(https://www.biologic.net/wp-content/uploads/2025/11/puce-ec-premium.png);
      padding-right: 3px
    }
    .tableau li.ec_essential:before {
      content: url(https://www.biologic.net/wp-content/uploads/2025/11/puce-ec-essential.png);
      padding-right: 3px
    }
	.tableau li:last-child{border-bottom:none}
	.tableau li .et_pb_button_wrapper.marginTop10, .tableau li .et_pb_button_wrapper.marginTop10 a{margin-top:0}
}

/* ============================================
   RESPONSIVE : PETIT MOBILE (< 768px)
   ============================================ */
@media (max-width: 768px) {
  /* Footer fixe devient relatif pour éviter les overlaps sur très petits écrans */
  #main-footer { position: relative !important; }

  #footer-links { flex-direction: column; text-align: center; }
  #footer-links .footer-gauche,
  #footer-links .footer-droite { justify-content: center; margin: 5px 0; }
  #footer-links a { margin: 5px; }

  /* Le padding-bottom global n’est plus requis si le footer n’est plus fixe */
  body { padding-bottom: 0; }
}