/* =====================================================================
   IDI Dental — Surcouche thème "premium 2026", cohérente avec la vitrine
   Palette & typographie reprises du site vitrine (idi.yohannn.com)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --idi-primary: #0c6e6e;
  --idi-primary-dark: #094f4f;
  --idi-primary-700: #0a5c5c;
  --idi-primary-light: #e6f0f0;
  --idi-primary-tint: #f1f8f8;
  --idi-accent: #e9a23b;
  --idi-accent-dark: #c9852b;
  --idi-dark: #081c1c;
  --idi-ink: #14302f;
  --idi-light: #f6fbfb;
  --idi-gray: #6b8787;
  --idi-line: #e4eded;
  --idi-white: #ffffff;
  --idi-radius: 18px;
  --idi-radius-lg: 26px;
  --idi-shadow-sm: 0 2px 10px rgba(8, 28, 28, .05);
  --idi-shadow-md: 0 14px 40px rgba(8, 28, 28, .08);
  --idi-shadow-lg: 0 28px 60px rgba(8, 28, 28, .14);
  --idi-font-head: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --idi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Base ---------- */
body {
  background: var(--idi-light) !important;
  color: var(--idi-ink);
  font-family: var(--idi-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.6;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--idi-font-head);
  color: var(--idi-dark);
  letter-spacing: -0.02em;
  font-weight: 700;
}
a { color: var(--idi-primary); }
a:hover { color: var(--idi-primary-dark); }
#wrapper, .page-home { background: var(--idi-light) !important; }
#wrapper { padding-top: 0; }
.container { max-width: 1280px; }

/* =========================================================
   HEADER PREMIUM IDI (override header.tpl)
   3 niveaux : barre utilitaire / barre principale / navigation
   ========================================================= */
#header { background: var(--idi-white) !important; box-shadow: 0 4px 24px rgba(8,28,28,.05); border-bottom: none !important; position: relative; z-index: 60; }

/* --- Barre utilitaire (sombre) --- */
.idi-topbar { background: var(--idi-dark); color: #fff; font-size: .82rem; }
.idi-topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 46px; gap: 16px; }
.idi-topbar__left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.idi-topbar__home { display: inline-flex; align-items: center; gap: 5px; color: #fff !important; font-weight: 700; white-space: nowrap; }
.idi-topbar__home .material-icons { font-size: 1.05rem; }
.idi-topbar__home:hover { color: var(--idi-accent) !important; }
.idi-topbar__sep { width: 1px; height: 16px; background: rgba(255,255,255,.22); flex: 0 0 auto; }
.idi-topbar__tag { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); font-weight: 500; }
.idi-topbar__tag .material-icons { font-size: 1.05rem; color: var(--idi-accent); }
.idi-topbar__right { display: flex; align-items: center; gap: 20px; }
.idi-topbar__link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.85) !important; font-weight: 600; }
.idi-topbar__link .material-icons { font-size: 1.05rem; }
.idi-topbar__link:hover { color: var(--idi-accent) !important; }
/* "Connexion" : pill teal dans la barre principale (sur fond blanc) */
.idi-account {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; white-space: nowrap;
  font-family: var(--idi-font-head); font-weight: 700;
  color: var(--idi-primary) !important; border: 1.5px solid var(--idi-primary);
  border-radius: 999px; padding: 9px 22px; transition: all .2s ease;
}
.idi-account .material-icons { font-size: 1.2rem; }
.idi-account:hover { background: var(--idi-primary); color: #fff !important; box-shadow: var(--idi-shadow-md); }
.idi-account:hover .material-icons { color: #fff !important; }

/* --- Barre principale (logo + recherche + compte) --- */
.idi-mainbar { background: #fff; padding: 18px 0; }
.idi-mainbar__inner { display: flex; align-items: center; gap: 28px; }
.idi-logo { display: inline-flex; flex: 0 0 auto; }
.idi-logo img { height: 56px; width: auto; }
.idi-search { flex: 1 1 auto; max-width: 540px; margin: 0 auto; }
.idi-search #search_widget, .idi-search .search-widget { width: 100%; }
.idi-search form {
  display: flex; align-items: center; background: var(--idi-primary-tint);
  border: 1px solid var(--idi-line); border-radius: 999px; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.idi-search form:focus-within { border-color: var(--idi-primary); background: #fff; box-shadow: 0 0 0 3px rgba(12,110,110,.1); }
.idi-search input[type="text"] { flex: 1; min-width: 0; border: none; background: transparent; padding: 12px 20px; font-size: .95rem; color: var(--idi-ink); }
.idi-search input::placeholder { color: var(--idi-gray); }
.idi-search button { background: transparent; border: none; padding: 0 18px 0 4px; display: flex; align-items: center; cursor: pointer; }
.idi-search button span { display: none; }
.idi-search button .material-icons { color: var(--idi-primary); font-size: 1.35rem; }

/* --- Barre de navigation (familles, pleine largeur, une ligne) --- */
.idi-nav { background: #fff; border-top: 1px solid var(--idi-line); }
.idi-nav__inner { display: flex; justify-content: center; }
.idi-nav .menu, .idi-nav #_desktop_top_menu { width: 100%; }
.idi-nav .top-menu[data-depth="0"] {
  display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 0; list-style: none;
}
.idi-nav .top-menu[data-depth="0"] > li { position: relative; }
.idi-nav .top-menu a[data-depth="0"] {
  display: block; color: var(--idi-ink) !important; font-family: var(--idi-font-head);
  font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
  padding: 17px 18px; white-space: nowrap; position: relative;
}
.idi-nav .top-menu a[data-depth="0"]::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 9px; height: 2px;
  background: var(--idi-accent); border-radius: 2px; transform: scaleX(0); transform-origin: center;
  transition: transform .25s ease;
}
.idi-nav .top-menu a[data-depth="0"]:hover { color: var(--idi-primary) !important; }
.idi-nav .top-menu a[data-depth="0"]:hover::after { transform: scaleX(1); }

/* Sous-menu déroulant en carte */
.idi-nav .sub-menu, .idi-nav .popover.sub-menu {
  position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%);
  background: #fff !important; border: 1px solid var(--idi-line); border-radius: 16px;
  box-shadow: var(--idi-shadow-lg); padding: 10px !important; min-width: 250px; width: max-content !important;
  max-width: 340px; margin-top: 2px;
}
.idi-nav .sub-menu .top-menu {
  display: block !important; column-count: 1 !important; columns: 1 !important;
  margin: 0; padding: 0; list-style: none;
}
.idi-nav .sub-menu .top-menu > li, .idi-nav .sub-menu li {
  display: block !important; width: 100% !important; float: none !important;
  white-space: normal; margin: 0;
}
.idi-nav .sub-menu a {
  display: block; color: var(--idi-ink) !important; padding: 10px 16px; border-radius: 10px;
  font-size: .9rem; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.idi-nav .sub-menu a:hover { background: var(--idi-primary-tint) !important; color: var(--idi-primary) !important; }

/* --- Responsive header --- */
@media (max-width: 900px) {
  .idi-topbar__tag, .idi-topbar__sep { display: none; }
  .idi-mainbar__inner { flex-wrap: wrap; gap: 16px; }
  .idi-search { max-width: 100%; flex: 1 1 100%; margin-left: 0; }
  .idi-nav__inner { overflow-x: auto; }
  .idi-nav .top-menu[data-depth="0"] { justify-content: flex-start; }
  .idi-nav .sub-menu { left: 0 !important; transform: none; }
}

/* ---------- HERO ---------- */
.idi-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(233,162,59,.20), transparent 60%),
    linear-gradient(120deg, var(--idi-primary-dark) 0%, var(--idi-primary) 55%, var(--idi-primary-700) 100%);
  color: #fff;
  border-radius: 0 0 var(--idi-radius-lg) var(--idi-radius-lg);
  margin-bottom: 16px;
}
.idi-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px);
  background-size: 22px 22px; opacity: .6; pointer-events: none;
}
.idi-hero__inner {
  position: relative; max-width: 1280px; margin: 0 auto;
  padding: 84px 24px 88px; max-width: 1180px;
}
.idi-hero__text { max-width: 680px; }
.idi-hero__eyebrow {
  display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  padding: 7px 16px; border-radius: 999px; margin-bottom: 22px;
}
.idi-hero__title {
  font-family: var(--idi-font-head); color: #fff !important;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.03em; margin: 0 0 18px;
}
.idi-hero__title em { color: var(--idi-accent); font-style: normal; }
.idi-hero__sub {
  font-size: 1.08rem; line-height: 1.65; color: rgba(255,255,255,.86);
  max-width: 560px; margin: 0 0 32px;
}
.idi-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Boutons premium ---------- */
.idi-btn, .btn-primary, .btn-primary:disabled, .btn-primary.disabled {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--idi-font-head); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 14px 30px; border-radius: 999px; border: 2px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor: pointer;
}
.idi-btn--accent { background: var(--idi-accent); color: var(--idi-dark) !important; box-shadow: 0 10px 24px rgba(233,162,59,.3); }
.idi-btn--accent:hover { background: #f3ad48; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(233,162,59,.4); color: var(--idi-dark) !important; }
.idi-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.45); }
.idi-btn--ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; transform: translateY(-2px); }
.btn-primary { background: var(--idi-primary) !important; border-color: var(--idi-primary) !important; color: #fff !important; }
.btn-primary:hover { background: var(--idi-primary-dark) !important; border-color: var(--idi-primary-dark) !important; transform: translateY(-2px); box-shadow: var(--idi-shadow-md); }

/* ---------- Titres de section ---------- */
.featured-products .products-section-title, .products-section-title, h2.products-section-title {
  text-align: center; font-family: var(--idi-font-head); color: var(--idi-dark);
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em;
  text-transform: none; margin: 0 auto 8px; padding-top: 56px;
}
.featured-products .products-section-title::after {
  content: ''; display: block; width: 56px; height: 4px; border-radius: 2px;
  background: var(--idi-accent); margin: 16px auto 4px;
}

/* ---------- Grille produits ---------- */
.featured-products { padding-bottom: 72px; }
.featured-products .products, #products .products {
  display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 26px;
  margin: 36px 0 0;
}
/* Les produits sont enveloppés dans des div Bootstrap .col-* (max-width:25%) :
   on neutralise pour qu'ils remplissent la cellule de grille. */
.featured-products .products > *, #products .products > * {
  width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
  margin: 0 !important; padding: 0 !important; min-width: 0;
}
.product-miniature {
  width: 100% !important; max-width: 100% !important; margin: 0 !important; display: block;
}
.product-miniature .thumbnail-container {
  width: 100%; display: block; height: auto; margin: 0;
  background: var(--idi-white); border: 1px solid var(--idi-line);
  border-radius: var(--idi-radius); box-shadow: var(--idi-shadow-sm); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-miniature:hover .thumbnail-container {
  transform: translateY(-6px); box-shadow: var(--idi-shadow-lg); border-color: var(--idi-primary-light);
}
.product-miniature .thumbnail.product-thumbnail {
  display: block; width: 100%; padding: 22px; background: #fff;
}
.product-miniature .thumbnail.product-thumbnail img {
  display: block; width: 100%; height: 200px; object-fit: contain;
}
.product-description { padding: 6px 18px 22px; border-top: 1px solid var(--idi-line); }
.product-miniature .product-title { margin: 14px 0 0; text-align: center; }
.product-miniature .product-title a {
  font-family: var(--idi-font-head); color: var(--idi-dark) !important;
  font-weight: 600; font-size: .96rem; letter-spacing: -0.01em; line-height: 1.35;
}
.product-miniature .product-title a:hover { color: var(--idi-primary) !important; }

/* Pastilles / flags : "Nouveau" discret, "Rupture" masquée */
.product-flags { top: 14px; left: 14px; }
.product-flag {
  font-family: var(--idi-font-head); font-size: .64rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 999px;
  padding: 5px 12px; box-shadow: none;
}
.product-flag.new, .product-flags .new,
.product-flag.out_of_stock, .product-flag.out, .product-flag.discount, .product-flag.on-sale { display: none !important; }

/* Catalogue B2B : pas de prix, pas de surcharge "wishlist/compare" */
.product-price-and-shipping, .product-miniature .variant-links,
.highlighted-informations .quick-view, .wishlist-button-add, .product-miniature .comments_note { display: none !important; }

/* Lien "Tous les produits" */
.all-product-link, .featured-products .all-product-link.float-xs-right {
  display: inline-flex !important; align-items: center; gap: 6px; float: none !important;
  margin: 40px auto 0 !important; padding: 13px 30px; border-radius: 999px;
  border: 2px solid var(--idi-primary); color: var(--idi-primary) !important;
  font-family: var(--idi-font-head); font-weight: 700; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; width: max-content;
  transition: all .2s ease;
}
.all-product-link:hover { background: var(--idi-primary); color: #fff !important; transform: translateY(-2px); box-shadow: var(--idi-shadow-md); }
.featured-products .products-section-title + .products { margin-top: 36px; }
.featured-products .text-xs-center, .featured-products .text-center { text-align: center !important; }

/* ---------- Bloc réassurance ---------- */
.block-reassurance { background: var(--idi-white); border-top: 1px solid var(--idi-line); border-bottom: 1px solid var(--idi-line); padding: 8px 0; }
.block-reassurance ul { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.block-reassurance li { border: none !important; }
.block-reassurance .block-reassurance-item { padding: 18px 12px; }
.block-reassurance img, .block-reassurance svg { filter: none; }
.block-reassurance span { color: var(--idi-ink); font-weight: 500; font-size: .9rem; }

/* ---------- Newsletter (centrée, premium) ---------- */
#blockEmailSubscription_displayFooterBefore, .ps-emailsubscription, .block_newsletter {
  background: linear-gradient(135deg, var(--idi-primary) 0%, var(--idi-primary-dark) 100%) !important;
  color: #fff !important; padding: 52px 32px; border-radius: var(--idi-radius-lg);
  margin: 24px auto 52px; max-width: 1180px; text-align: center; box-shadow: var(--idi-shadow-md);
}
#blockEmailSubscription_displayFooterBefore .row, .block_newsletter .row { align-items: center; justify-content: center; }
#blockEmailSubscription_displayFooterBefore .row > [class*="col-"],
.block_newsletter .row > [class*="col-"] {
  width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; float: none; margin: 0 auto;
}
.block_newsletter p, #blockEmailSubscription_displayFooterBefore p { color: rgba(255,255,255,.82) !important; }
.block_newsletter h3, .block_newsletter .h3, #blockEmailSubscription_displayFooterBefore h3,
.block_newsletter b, .block_newsletter .h2 {
  color: #fff !important; font-family: var(--idi-font-head); font-size: 1.55rem; font-weight: 700;
  letter-spacing: -.01em; display: block; margin: 0 0 6px;
}
.block_newsletter form, #blockEmailSubscription_displayFooterBefore form {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  max-width: 520px; margin: 22px auto 0;
}
.block_newsletter form .input-wrapper, #blockEmailSubscription_displayFooterBefore .input-wrapper {
  flex: 1 1 auto; min-width: 0; display: flex;
}
.block_newsletter input[type="email"], #blockEmailSubscription_displayFooterBefore input[type="email"] {
  width: 100%; flex: 1; border-radius: 999px 0 0 999px; border: none; height: auto;
  color: var(--idi-dark) !important; background: #fff; padding: 15px 24px; box-shadow: none;
}
.block_newsletter input[type="submit"], .block_newsletter .btn,
#blockEmailSubscription_displayFooterBefore input[type="submit"], #blockEmailSubscription_displayFooterBefore .btn {
  flex: 0 0 auto; background: var(--idi-accent) !important; border: none !important; color: var(--idi-dark) !important;
  font-family: var(--idi-font-head); font-weight: 700; border-radius: 0 999px 999px 0;
  padding: 15px 30px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; box-shadow: none;
}
.block_newsletter .btn:hover, #blockEmailSubscription_displayFooterBefore .btn:hover,
.block_newsletter input[type="submit"]:hover { background: var(--idi-accent-dark) !important; }
.block_newsletter form p, #blockEmailSubscription_displayFooterBefore form p {
  flex: 0 0 100%; margin-top: 14px; font-size: .82rem; text-align: center;
}

/* ---------- Footer ---------- */
.footer-container { background: var(--idi-dark) !important; color: #fff !important; padding-top: 60px !important; margin-top: 0; box-shadow: none; }
.footer-container li { border: none; }
.footer-container .h3, .footer-container h3 {
  font-family: var(--idi-font-head); font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .1em; color: #fff !important; margin-bottom: 18px;
}
.footer-container a, .footer-container p, .footer-container span, .footer-container li { color: rgba(255,255,255,.72) !important; font-size: .9rem; }
.footer-container a:hover { color: var(--idi-accent) !important; }
.footer-container .text-sm-center {
  color: rgba(255,255,255,.55) !important; border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 24px; margin-top: 44px; font-size: .82rem;
}
.block-social, .blockreassurance_product { background: transparent !important; }

/* ---------- Breadcrumb / pages ---------- */
.breadcrumb { background: transparent; }
.breadcrumb li a, .breadcrumb li span { color: var(--idi-gray); }
#main .page-header h1, .page-content h1 { font-family: var(--idi-font-head); }

/* ---------- Fiche produit ---------- */
.product-prices, .current-price .price { color: var(--idi-primary); font-weight: 700; }
.product-flags .new { background: var(--idi-primary) !important; }
#product .product-information { font-family: var(--idi-font-body); }

/* ---------- Pages compte / connexion / inscription ---------- */
.page-authentication #content, .page-password #content, .page-registration #content {
  max-width: 540px; margin: 28px auto; background: #fff;
  border: 1px solid var(--idi-line); border-radius: var(--idi-radius-lg);
  box-shadow: var(--idi-shadow-md); padding: 38px 40px 30px;
}
/* Éviter le double cadre : aplatir toute carte interne du formulaire */
.page-authentication #content .card, .page-authentication #content .login-form,
.page-authentication #content section, .page-password #content .card,
.page-registration #content .card {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important;
}
.page-authentication .page-header h1, #authentication .page-header h1 { text-align: center; margin-bottom: 26px; }
#login-form .form-group.row, #customer-form .form-group.row { display: block; margin-bottom: 18px; }
#login-form .form-group label, #login-form .form-control-label,
#customer-form .form-group label, #customer-form .form-control-label {
  display: block; text-align: left; width: auto; max-width: none; flex: none;
  padding: 0 0 6px; font-weight: 600; color: var(--idi-ink); font-size: .92rem;
}
#login-form .form-group > div[class*="col-"], #customer-form .form-group > div[class*="col-"] {
  width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
}
.page-authentication .form-control, #login-form .form-control, #customer-form .form-control {
  border: 1px solid var(--idi-line); border-radius: 12px; padding: 12px 16px; height: auto;
  box-shadow: none; font-size: .95rem; background: #fff;
}
.page-authentication .form-control:focus, #login-form .form-control:focus, #customer-form .form-control:focus {
  border-color: var(--idi-primary); box-shadow: 0 0 0 3px rgba(12,110,110,.1);
}
.page-authentication .input-group, .page-authentication .js-parent-focus {
  display: flex !important; align-items: stretch; flex-wrap: nowrap; width: 100%;
}
.page-authentication #field-password, .page-authentication input.js-visible-password {
  border-radius: 12px 0 0 12px !important; border-right: 0 !important; margin: 0 !important;
}
.page-authentication .input-group-btn { display: flex !important; margin: 0 !important; }
.page-authentication .input-group-btn .btn {
  height: 100%; margin: 0 !important; display: flex; align-items: center; white-space: nowrap;
  background: var(--idi-primary-tint) !important; color: var(--idi-primary) !important;
  border: 1px solid var(--idi-line) !important; border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important; box-shadow: none; font-weight: 600;
}
.forgot-password { text-align: right; margin: -4px 0 18px; }
.forgot-password a, .no-account a, #authentication .no-account a { color: var(--idi-primary) !important; font-weight: 600; }
.page-authentication .form-footer, #login-form .form-footer { text-align: center; margin-top: 6px; border: 0 !important; }
/* un seul séparateur avant "Pas de compte ?" */
.page-authentication #content hr, #login-form hr, .page-authentication .form-fields + * hr { display: none !important; }
.page-authentication .form-footer .btn-primary, #login-form .form-footer .btn-primary { width: 100%; }
.no-account, #authentication .no-account {
  text-align: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--idi-line);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .featured-products .products, .products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .featured-products .products, .products { grid-template-columns: repeat(2, 1fr); gap: 18px; } .idi-hero__inner { padding: 60px 20px; } }
@media (max-width: 520px)  { .featured-products .products, .products { grid-template-columns: 1fr; } .idi-hero__cta { flex-direction: column; } .idi-btn { justify-content: center; } }