/* =========================================================
   Bien Etre Médical — custom theme reskin for PrestaShop Classic
   Additive overrides only — no checkout/cart markup is touched.
   ========================================================= */

:root{
  --bem-green:#65bc46;
  --bem-green-dark:#4c9433;
  --bem-green-light:#eaf6e4;
  --bem-black:#111111;
  --bem-white:#ffffff;
  --bem-gray-light:#f5f7f4;
  --bem-gray:#6b7268;
  --bem-gray-border:#e3e7e1;
  --bem-radius:10px;
  --bem-shadow:0 4px 18px rgba(0,0,0,.08);
  --bem-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body{
  font-family:var(--bem-font);
  color:var(--bem-black);
}

a{ color:var(--bem-green-dark); }
a:hover{ color:var(--bem-green); }

/* ===== Buttons (Bootstrap4 primary etc.) ===== */
.btn-primary,
a.btn-primary{
  background-color:var(--bem-green) !important;
  border-color:var(--bem-green) !important;
  color:#fff !important;
  border-radius:999px !important;
}
.btn-primary:hover, .btn-primary:focus,
a.btn-primary:hover, a.btn-primary:focus{
  background-color:var(--bem-green-dark) !important;
  border-color:var(--bem-green-dark) !important;
}
.btn-secondary{ border-radius:999px !important; }

/* Custom pill buttons used in hero / added blocks */
.bem-btn{
  display:inline-block;padding:13px 26px;border-radius:999px;font-weight:700;
  font-size:.95rem;text-decoration:none;transition:all .15s ease;border:2px solid transparent;
}
.bem-btn-primary{ background:var(--bem-green); color:#fff !important; }
.bem-btn-primary:hover{ background:var(--bem-green-dark); }
.bem-btn-outline{ background:transparent; border-color:var(--bem-black); color:var(--bem-black) !important; }
.bem-btn-outline:hover{ border-color:var(--bem-green); color:var(--bem-green-dark) !important; }

/* ===== Topbar (new, prepended above the default Classic header) ===== */
.bem-topbar{
  background:var(--bem-black);
  color:#cfd4ca;
  font-size:.82rem;
}
.bem-topbar-inner{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  padding:8px 15px;
}
.bem-topbar-links{ display:flex; gap:20px; flex-wrap:wrap; }
.bem-topbar-links a{
  color:#cfd4ca; text-decoration:none; font-weight:600;
}
.bem-topbar-links a:hover{ color:var(--bem-green); }
.bem-topbar-note span{ color:#9aa096; }

/* ===== Default Classic header rows: reskin to feel like one cohesive white navbar ===== */
.header-banner:empty{ display:none; }
.header-nav{
  background:var(--bem-black);
  border-bottom:none;
}
.header-nav a{ color:#cfd4ca; }
.header-nav a:hover{ color:var(--bem-green); }
.header-top{
  background:var(--bem-white);
  border-bottom:1px solid var(--bem-gray-border);
  padding:14px 0;
}
#header .header-top #_desktop_logo img{ max-height:52px; }
#header{
  position:sticky; top:0; z-index:1000;
  box-shadow:var(--bem-shadow);
}

/* ===== Hero (homepage) ===== */
.bem-hero{
  background:linear-gradient(135deg, var(--bem-green-light) 0%, #ffffff 65%);
  padding:64px 0;
}
.bem-hero-inner{
  display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
}
.bem-eyebrow{
  display:inline-block; color:var(--bem-green-dark); font-weight:800; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px;
}
.bem-hero-text h1{
  font-size:2.4rem; line-height:1.15; font-weight:800; color:var(--bem-black); margin-bottom:18px;
}
.bem-hero-text h1 span{ color:var(--bem-green-dark); }
.bem-lead{ font-size:1.05rem; color:var(--bem-gray); margin-bottom:26px; max-width:520px; }
.bem-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
.bem-hero-stats{ display:flex; gap:32px; flex-wrap:wrap; }
.bem-hero-stats strong{ display:block; font-size:1.5rem; color:var(--bem-black); }
.bem-hero-stats span{ font-size:.82rem; color:var(--bem-gray); }

.bem-hero-visual{
  background:#fff; border-radius:20px; padding:20px; box-shadow:var(--bem-shadow);
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.bem-tile{
  background:var(--bem-green-light); border-radius:14px; padding:22px 14px;
  text-align:center; font-weight:700; font-size:.92rem; color:var(--bem-black);
}
.bem-tile .bem-ic{ font-size:2.1rem; display:block; margin-bottom:8px; }
.bem-tile-dark{ background:var(--bem-black); color:#fff; }

@media (max-width:900px){
  .bem-hero-inner{ grid-template-columns:1fr; }
}

/* ===== "Pourquoi nous choisir" cards ===== */
.bem-why{ padding:60px 0; }
.bem-section-head{ text-align:center; max-width:640px; margin:0 auto 36px; }
.bem-section-head h2{ font-size:1.7rem; font-weight:800; margin-top:8px; }
.bem-grid{ display:grid; gap:26px; }
.bem-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .bem-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bem-grid-4{ grid-template-columns:1fr; } }
.bem-card{
  background:#fff; border:1px solid var(--bem-gray-border); border-radius:var(--bem-radius);
  padding:26px 20px; transition:transform .18s ease, box-shadow .18s ease;
}
.bem-card:hover{ transform:translateY(-4px); box-shadow:var(--bem-shadow); }
.bem-ic-box{
  width:52px; height:52px; border-radius:14px; background:var(--bem-green-light); color:var(--bem-green-dark);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:14px;
}
.bem-card h3{ margin-bottom:6px; font-size:1.02rem; }
.bem-card p{ font-size:.9rem; color:var(--bem-gray); }

/* ===== Product cards (Classic markup, styled to match static site) ===== */
.product-miniature{
  border:1px solid var(--bem-gray-border) !important;
  border-radius:var(--bem-radius) !important;
  overflow:hidden; transition:box-shadow .18s ease, transform .18s ease;
}
.product-miniature:hover{ box-shadow:var(--bem-shadow); transform:translateY(-3px); }
.product-miniature .product-title a{ color:var(--bem-black); font-weight:700; }
.product-miniature .price{ font-weight:800; color:var(--bem-black); }
.product-miniature .regular-price{ color:var(--bem-gray); }

/* ===== Page hero (inner pages: contact, etc.) ===== */
.bem-page-hero{
  background:var(--bem-black); color:#fff; padding:52px 0; text-align:center;
}
.bem-page-hero .bem-eyebrow{ color:var(--bem-green); }
.bem-page-hero h1{ color:#fff; font-size:1.9rem; font-weight:800; margin-bottom:10px; }
.bem-page-hero p{ color:#c9cec5; max-width:560px; margin:0 auto; }

/* ===== Contact page split ===== */
.bem-contact-split{
  display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:start; padding:40px 0;
}
@media (max-width:900px){ .bem-contact-split{ grid-template-columns:1fr; } }
.bem-contact-agencies-col h2{ margin-bottom:18px; font-size:1.3rem; font-weight:800; }
.bem-agency-card{ margin-bottom:18px; }
.bem-agency-card h3{ margin-bottom:12px; font-size:1.02rem; font-weight:800; }
.bem-contact-info-list p{ margin:0 0 10px; font-size:.92rem; color:var(--bem-gray); }
.bem-contact-info-list a{ color:var(--bem-green-dark); font-weight:700; }
.bem-badge-note{
  background:var(--bem-green-light); color:var(--bem-green-dark); padding:12px 16px;
  border-radius:10px; font-size:.85rem; font-weight:700; margin-top:10px;
}

/* ===== Footer ===== */
.bem-footer{
  background:var(--bem-black); color:#cfd4ca; padding:48px 0 0;
}
.bem-footer-grid{
  display:grid; grid-template-columns:1.3fr .9fr 1fr 1fr; gap:32px; padding-bottom:32px;
}
@media (max-width:1100px){ .bem-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .bem-footer-grid{ grid-template-columns:1fr; } }
.bem-footer-col .bem-footer-brand{
  display:inline-block; font-weight:800; font-size:1.15rem; color:#fff; margin-bottom:14px;
}
.bem-footer-col h4{ color:#fff; margin-bottom:14px; font-size:.92rem; }
.bem-footer-col p{ color:#a8ada3; font-size:.88rem; }
.bem-footer-col ul{ list-style:none; padding:0; margin:0; }
.bem-footer-col li{ margin-bottom:9px; font-size:.88rem; color:#a8ada3; }
.bem-footer-col a{ color:#cfd4ca; text-decoration:none; }
.bem-footer-col a:hover{ color:var(--bem-green); }

/* de-emphasize the default Classic footer rows that still render below (links list / GDPR / social),
   keep them fully functional, just visually quiet so they don't clash with the new footer-grid */
.footer-container{ background:var(--bem-black); color:#8b8f86; font-size:.85rem; border-top:1px solid #2a2a2a; }
.footer-container a{ color:#a8ada3; }
.footer-container a:hover{ color:var(--bem-green); }

/* ===== Contact page: hide the generic default sidebar (block-contact / ps_contactinfo)
   since the page already shows the two real agency cards; expand the form column to full width */
body#contact #left-column{ display:none; }
body#contact #content-wrapper.col-md-8{ flex:0 0 100%; max-width:100%; }

/* =========================================================
   About page (CMS) — additional component classes matching
   the static site's apropos.html sections.
   ========================================================= */
.bem-about-intro{ padding:44px 0 10px; }
.bem-split{ display:grid; grid-template-columns:1fr; gap:28px; }
.bem-split h2{ font-size:1.5rem; font-weight:800; margin:10px 0 16px; }
.bem-split p{ color:var(--bem-gray); margin-bottom:12px; }
.bem-grid{ display:grid; gap:22px; }
.bem-grid-3{ grid-template-columns:repeat(3,1fr); }
.bem-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .bem-grid-3,.bem-grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bem-grid-3,.bem-grid-4{ grid-template-columns:1fr; } }
.bem-stat-box{ background:var(--bem-green-light); border-radius:16px; padding:22px; text-align:center; }
.bem-stat-box strong{ font-size:1.6rem; color:var(--bem-green-dark); display:block; }
.bem-stat-box span{ font-size:.82rem; color:var(--bem-gray); }

.bem-values-section, .bem-method-section, .bem-faq-section{ padding:40px 0; }
.bem-section-head-center{ text-align:center; max-width:640px; margin:0 auto 30px; }
.bem-section-head-center h2{ font-size:1.5rem; font-weight:800; margin-top:6px; }

.bem-value-list{ display:flex; flex-direction:column; gap:20px; margin-top:16px; }
.bem-value-row{ display:flex; gap:16px; }
.bem-value-row h3{ font-size:1rem; font-weight:800; margin-bottom:4px; }
.bem-value-row p{ color:var(--bem-gray); font-size:.92rem; }
.bem-value-num{
  width:40px; height:40px; flex:none; border-radius:10px; background:var(--bem-black); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800;
}

.bem-faq-list{ max-width:760px; margin:0 auto; }
.bem-faq-item{ border-bottom:1px solid var(--bem-gray-border); padding:16px 0; }
.bem-faq-item summary{ cursor:pointer; font-weight:700; list-style:none; }
.bem-faq-item summary::-webkit-details-marker{ display:none; }
.bem-faq-item p{ margin-top:10px; color:var(--bem-gray); font-size:.92rem; }

.bem-cta-section{ padding:10px 0 50px; }
.bem-banner{
  background:var(--bem-black); color:#fff; border-radius:20px; padding:40px 32px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.bem-banner h2{ color:#fff; margin-bottom:6px; }
.bem-banner p{ color:#c9cec5; margin:0; }
.bem-banner-actions .bem-btn{ padding:12px 24px; }

@media (min-width:900px){
  .bem-about-intro .bem-split{ grid-template-columns:1fr; }
}