/* =========================================================
   COLDTECH — DARK FROST
   Fond bleu nuit profond, glassmorphism, glow cyan, accent orange.
   ========================================================= */

/* Perf (audit PageSpeed 2026-09-13) : WooCommerce met la galerie produit en
   opacity:0 (style inline) tant que son JS de galerie (wc-single-product,
   dépend de jQuery) n'a pas fini de s'initialiser, pour éviter un flash avant
   que le slider soit prêt. Sur mobile, jQuery met plus d'1s à s'exécuter →
   l'image produit (LCP de la page) reste invisible tout ce temps, ce qui
   retarde le LCP mesuré alors même que l'image est déjà chargée. Le !important
   d'une règle externe l'emporte sur ce style inline sans !important : la
   photo s'affiche dès qu'elle est prête, sans attendre le JS. Sans risque
   identifié : WooCommerce ne réutilise pas cette opacité ensuite (zoom/
   lightbox utilisent d'autres mécanismes). */
.woocommerce-product-gallery { opacity: 1 !important; }

/* ---------- Design tokens ---------- */
:root {
  --bg-deep: #060B14;
  --bg-mid: #0D1526;
  --bg-panel: #101B2E;
  --bg-panel-glass: rgba(16, 27, 46, 0.55);
  --bg-panel-glass-strong: rgba(16, 27, 46, 0.78);
  --bg-light-a: #142238;
  --bg-light-b: #1c2f4a;

  --cyan: #4CDBFF;
  --cyan-light: #7EE8FF;
  --cyan-dim: rgba(76, 219, 255, 0.18);
  --orange: #FFA23A;

  --text: #EAF2F8;
  --text-dim: #A9BBD1;
  --text-faint: #7386A3;

  --border-glass: rgba(126, 232, 255, 0.16);
  --border-glass-strong: rgba(126, 232, 255, 0.32);

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-glow-sm: 0 0 24px rgba(76, 219, 255, 0.18);
  --shadow-glow-md: 0 0 48px rgba(76, 219, 255, 0.22);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.45);

  --container: 1200px;
  --transition-fast: 180ms ease;
  --transition-base: 320ms cubic-bezier(.2,.7,.3,1);
}

/* ---------- Reset & base ---------- */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 16px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--text);
  letter-spacing: -0.01em;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* Focus visible : jamais outline:none sec */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.ctd-skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--cyan); color: #06111F; padding: 12px 20px; border-radius: 0 0 8px 0;
  font-weight: 600;
}
.ctd-skip-link:focus { left: 0; }

/* ---------- Reveal on scroll ---------- */
.ctd-reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.ctd-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Glass component ---------- */
.ctd-glass {
  background: var(--bg-panel-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* ---------- Buttons ---------- */
.ctd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-width: max-content;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  min-height: 48px;
  border: 1px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.ctd-btn-lg { padding: 16px 32px; font-size: 16px; }
.ctd-btn-sm { padding: 10px 18px; font-size: 14px; min-height: 40px; }

.ctd-btn-primary {
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan));
  color: #06111F;
  box-shadow: 0 0 0 rgba(76,219,255,0);
}
.ctd-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(76, 219, 255, 0.45);
}

.ctd-btn-outline {
  background: transparent;
  color: var(--cyan-light);
  border-color: var(--border-glass-strong);
}
.ctd-btn-outline:hover {
  border-color: var(--cyan);
  box-shadow: var(--shadow-glow-sm);
  transform: translateY(-2px);
}

.ctd-btn-outline-dark {
  background: rgba(6,11,20,0.15);
  color: var(--text);
  border-color: rgba(6,11,20,0.35);
}
.ctd-btn-outline-dark:hover { transform: translateY(-2px); border-color: var(--bg-deep); }

.ctd-btn-ghost {
  background: rgba(126,232,255,0.08);
  color: var(--cyan-light);
  border-color: var(--border-glass);
  padding: 12px 20px;
  min-height: 44px;
}
.ctd-btn-ghost:hover { background: rgba(126,232,255,0.16); border-color: var(--border-glass-strong); }

/* ---------- Header ---------- */
.ctd-header { position: sticky; top: 0; z-index: 100; }

.ctd-topbar {
  background: var(--bg-deep);
  border-bottom: 1px solid rgba(126,232,255,0.08);
  font-size: 13px;
  color: var(--text-dim);
}
.ctd-topbar-inner { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; gap: 12px; flex-wrap: wrap; }
.ctd-topbar-link { color: var(--cyan-light); font-weight: 500; }
.ctd-topbar-sep { opacity: 0.4; margin: 0 4px; }

.ctd-header-main {
  background: rgba(6, 11, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.ctd-header.is-scrolled .ctd-header-main {
  background: rgba(6, 11, 20, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border-glass);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

.ctd-header-inner { display: flex; align-items: center; gap: 24px; padding: 14px 20px; }
.ctd-header-main .ctd-header-inner { max-width: 1520px; } /* colonne du header élargie : le menu (7 entrées) ne tient pas dans les 1200px du container standard */

.ctd-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ctd-logo-text { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.02em; color: var(--text); }
.ctd-logo-text span { display: block; font-size: 10px; font-weight: 500; color: var(--cyan-light); letter-spacing: 0.18em; }

.ctd-nav {
  flex: 1; display: flex; justify-content: center;
  min-width: 0; /* autorise le rétrécissement flex même avec un menu large */
  /* Pas d'overflow-x:auto ici : au-dessus de 1500px (seule largeur où ce menu est visible,
     voir media query plus bas) il tient déjà sans défilement, et overflow-x non-visible
     force overflow-y à "auto" aussi (règle CSS), ce qui coupait les sous-menus déroulants. */
}
.ctd-menu { display: flex; gap: 18px; }
.ctd-menu > li { position: relative; }
.ctd-menu a { font-size: 14px; font-weight: 500; color: var(--text-dim); position: relative; padding: 6px 0; display: inline-block; white-space: nowrap; }
.ctd-menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--cyan); transition: width 200ms ease;
}
.ctd-menu a:hover { color: var(--text); }
.ctd-menu a:hover::after { width: 100%; }

/* Éléments purement conteneurs de sous-menu (href="#") : pas de soulignement trompeur */
.ctd-menu > li.menu-item-has-children > a[href="#"] { pointer-events: none; }
.ctd-menu > li.menu-item-has-children > a[href="#"]::after { display: none; }
.ctd-menu > li.menu-item-has-children > a {
  pointer-events: auto; /* le clic déclenche quand même le survol sur tactile via CSS :focus-within */
}
.ctd-menu > li.menu-item-has-children > a::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: 0.7;
}

/* Sous-menu (dropdown) — apparaît au survol / focus clavier */
.ctd-menu .sub-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 240px; max-width: 300px;
  background: var(--bg-panel-glass-strong);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card), var(--shadow-glow-sm);
  padding: 8px; display: grid; gap: 2px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  z-index: 60;
}
.ctd-menu > li:hover > .sub-menu,
.ctd-menu > li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.ctd-menu .sub-menu a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px;
  color: var(--text-dim); white-space: normal;
}
.ctd-menu .sub-menu a::after { display: none; }
.ctd-menu .sub-menu a:hover { background: var(--cyan-dim); color: var(--text); }

.ctd-header-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.ctd-lang-switcher { display: flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
.ctd-lang-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); padding: 4px 6px; border-radius: 6px; transition: color var(--transition-base), background var(--transition-base); }
.ctd-lang-flag { font-size: 13px; line-height: 1; }
.ctd-lang-link:hover { color: var(--text); background: rgba(126,232,255,0.08); }
.ctd-lang-link.is-active { color: var(--cyan-light); background: rgba(76,219,255,0.12); }


.ctd-cart-icon { position: relative; display: inline-flex; padding: 6px; }
.ctd-cart-count {
  position: absolute; top: -2px; right: -2px; background: var(--orange); color: #1a1000;
  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.ctd-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; width: 44px; height: 44px; align-items: center; justify-content: center; }
.ctd-burger span { display: block; width: 22px; height: 2px; background: var(--text); transition: transform 200ms ease, opacity 200ms ease; }
.ctd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ctd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ctd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ctd-mobile-menu {
  display: none;
  position: fixed; inset: 0; top: 0; z-index: 99;
  background: var(--bg-deep);
  padding: 100px 24px 40px;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
.ctd-mobile-menu.is-open { display: flex; }
.ctd-mobile-menu-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }
.ctd-mobile-menu-list > li { position: relative; }
.ctd-mobile-menu-list a, .ctd-mobile-menu > ul > li > a {
  display: block; padding: 16px 4px; font-size: 18px; font-weight: 600; color: var(--text);
  border-bottom: 1px solid rgba(126,232,255,0.08); min-height: 44px;
}
.ctd-mobile-menu-list > li.menu-item-has-children > a[href="#"] { pointer-events: none; color: var(--cyan-light); }

/* Accordéon : les sous-catégories sont repliées par défaut, on les déplie au clic
   sur le chevron (injecté en JS) — sans ça, les 23 catégories réelles s'affichaient
   toutes ouvertes en même temps, illisible sur mobile. */
.ctd-mobile-menu-list .sub-menu {
  display: none; flex-direction: column; overflow: hidden;
  padding: 0 0 4px 16px;
}
.ctd-mobile-menu-list li.is-expanded > .sub-menu { display: flex; }
.ctd-mobile-menu-list .sub-menu a {
  padding: 12px 4px; font-size: 15px; font-weight: 500; color: var(--text-dim);
  border-bottom: 1px solid rgba(126,232,255,0.06); min-height: 40px;
}
.ctd-mm-toggle {
  position: absolute; right: 0; top: 0; width: 48px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--cyan-light); cursor: pointer;
}
.ctd-mm-toggle::before {
  content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform 200ms ease; margin-top: -4px;
}
.ctd-mobile-menu-list li.is-expanded > .ctd-mm-toggle::before { transform: rotate(-135deg); margin-top: 4px; }

.ctd-mobile-close {
  position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-panel-glass); border: 1px solid var(--border-glass);
  display: flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer;
}
.ctd-mobile-close svg { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.ctd-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% -10%, var(--bg-mid) 0%, var(--bg-deep) 60%);
  padding: 72px 0 96px;
}
.ctd-hero-glow {
  position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: 0.55;
}
.ctd-hero-glow-1 { width: 520px; height: 520px; top: -180px; left: -120px; background: radial-gradient(circle, var(--cyan) 0%, transparent 70%); }
.ctd-hero-glow-2 { width: 420px; height: 420px; top: 40px; right: -140px; background: radial-gradient(circle, #2E7EFF 0%, transparent 70%); opacity: 0.35; }
.ctd-hero-glow-3 { width: 380px; height: 380px; bottom: -220px; left: 40%; background: radial-gradient(circle, var(--orange) 0%, transparent 70%); opacity: 0.16; }

/* Variante compacte du hero (page Promoții, etc.) : moins de padding, pas de stats. */
.ctd-hero-sm { padding: 56px 0 48px; }

.ctd-hero-inner { position: relative; z-index: 1; }
.ctd-hero-copy { max-width: 760px; margin: 0 auto; text-align: center; }

.ctd-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cyan-light); margin-bottom: 18px;
}

.ctd-h1 {
  font-size: clamp(34px, 6vw, 68px);
  font-weight: 700;
  margin-bottom: 24px;
}
.ctd-h1-accent {
  background: linear-gradient(90deg, var(--cyan-light), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ctd-hero-sub { font-size: clamp(16px, 2vw, 19px); color: var(--text-dim); max-width: 620px; margin: 0 auto 36px; }

.ctd-hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }

.ctd-hero-stats { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.ctd-stat { padding: 18px 26px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 160px; }
.ctd-stat strong { font-family: var(--font-display); font-size: 20px; color: var(--text); }
.ctd-stat span { font-size: 13px; color: var(--text-dim); }

/* ---------- Sections ---------- */
.ctd-section { padding: 88px 0; }
.ctd-section-deep { background: var(--bg-deep); }
.ctd-section-flat { background: var(--bg-mid); padding: 48px 0; }
.ctd-section-light {
  background: linear-gradient(135deg, var(--bg-light-a), var(--bg-light-b));
  padding: 96px 0;
}

.ctd-section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.ctd-section-head h2 { font-size: clamp(26px, 3.6vw, 38px); }
.ctd-section-head p { color: var(--text-dim); font-size: 17px; }

/* ---------- Reassurance ---------- */
.ctd-reassure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.ctd-reassure-card { padding: 28px 24px; transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.ctd-reassure-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow-md); border-color: var(--border-glass-strong); }
.ctd-reassure-card h3 { font-size: 18px; margin: 14px 0 8px; }
.ctd-reassure-card p { color: var(--text-dim); font-size: 14px; margin: 0; }

.ctd-icon-glow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--cyan-dim);
  box-shadow: inset 0 0 0 1px var(--border-glass);
  transition: box-shadow var(--transition-base), background var(--transition-base);
}
.ctd-reassure-card:hover .ctd-icon-glow,
.ctd-cat-tile:hover .ctd-icon-glow {
  box-shadow: 0 0 24px rgba(76,219,255,0.55), inset 0 0 0 1px var(--border-glass-strong);
  background: rgba(76,219,255,0.24);
}
.ctd-icon-glow-lg { width: 60px; height: 60px; border-radius: 16px; }

/* ---------- Catégories ---------- */
.ctd-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.ctd-cat-tile {
  display: flex; flex-direction: column; gap: 14px; padding: 28px 24px;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.ctd-cat-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-glow-md); border-color: var(--border-glass-strong); }
.ctd-cat-tile h3 { font-size: 18px; margin: 0; }
.ctd-cat-count { font-size: 13px; color: var(--text-faint); }

/* ---------- Marques ---------- */
.ctd-brands-label { text-align: center; color: var(--text-faint); font-size: 14px; margin-bottom: 24px; }
.ctd-brands-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ctd-brand-chip {
  padding: 10px 20px; border-radius: 999px; border: 1px solid rgba(126,232,255,0.12);
  color: var(--text-faint); font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ctd-brand-chip:hover { color: var(--cyan-light); border-color: var(--border-glass-strong); }

/* ---------- Produits ---------- */
.ctd-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.ctd-product-card {
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.ctd-product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-glow-md); border-color: var(--border-glass-strong); }
.ctd-product-media {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(180deg, #f4f7fa, #dfe6ec);
  padding: 16px;
  box-sizing: border-box;
}
.ctd-product-media img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.ctd-product-brand {
  position: absolute; top: 12px; left: 12px; background: rgba(6,11,20,0.7); color: var(--cyan-light);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 5px 10px; border-radius: 999px;
}
.ctd-stock-badge {
  position: absolute; top: 12px; right: 12px; background: rgba(46, 158, 91, 0.85); color: #06210F;
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
}
.ctd-product-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.ctd-product-body h3 { font-size: 16px; margin: 0; line-height: 1.35; }
.ctd-product-price { color: var(--orange); font-weight: 700; font-size: 17px; margin: 4px 0; font-family: var(--font-display); }
.ctd-product-price .woocommerce-Price-amount { color: var(--orange); }
.ctd-product-cta { color: var(--cyan-light); font-size: 14px; font-weight: 600; }

.ctd-center-cta { text-align: center; margin-top: 40px; }

/* ---------- Application ---------- */
.ctd-app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.ctd-app-card { padding: 26px 22px; transition: transform var(--transition-base), border-color var(--transition-base); }
.ctd-app-card:hover { transform: translateY(-4px); border-color: var(--border-glass-strong); }
.ctd-app-card h3 { font-size: 17px; }
.ctd-app-card p { color: var(--text-dim); font-size: 14px; margin: 0; }

/* ---------- Service (section plus claire) ---------- */
.ctd-service-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
.ctd-service-copy h2 { font-size: clamp(24px, 3.4vw, 34px); }
.ctd-service-copy p { color: rgba(234,242,248,0.85); font-size: 16px; }
.ctd-service-steps { display: flex; flex-direction: column; gap: 14px; margin: 24px 0 32px; }
.ctd-service-steps li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.ctd-service-steps span {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(6,11,20,0.35); color: var(--cyan-light); font-family: var(--font-display); flex-shrink: 0;
}
.ctd-service-visual { display: flex; flex-direction: column; gap: 20px; }
.ctd-service-card { padding: 24px; text-align: center; background: rgba(6,11,20,0.35); }
.ctd-service-card strong { display: block; font-family: var(--font-display); font-size: 22px; margin-bottom: 6px; }
.ctd-service-card span { color: rgba(234,242,248,0.75); font-size: 14px; }

/* ---------- Testimonials ---------- */
.ctd-testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.ctd-testi-card { padding: 28px 26px; }
.ctd-testi-card p { font-size: 15.5px; color: var(--text); margin: 0 0 18px; line-height: 1.6; }
.ctd-testi-author { display: flex; flex-direction: column; gap: 2px; }
.ctd-testi-author strong { font-size: 14px; }
.ctd-testi-author span { font-size: 13px; color: var(--text-faint); }

/* ---------- Footer ---------- */
.ctd-footer { background: #04070C; border-top: 1px solid rgba(126,232,255,0.08); padding-top: 64px; }
.ctd-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 48px; }
.ctd-logo-footer { margin-bottom: 14px; }
.ctd-footer-desc { color: var(--text-dim); font-size: 14px; max-width: 320px; }
.ctd-footer-legal { color: var(--text-faint); font-size: 12.5px; line-height: 1.6; margin-top: 16px; }
.ctd-footer-col h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cyan-light); margin-bottom: 16px; }
.ctd-footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.ctd-footer-col a { color: var(--text-dim); font-size: 14.5px; }
.ctd-footer-col a:hover { color: var(--text); }
.ctd-footer-contact li { color: var(--text-dim); font-size: 14.5px; }

.ctd-footer-bottom { border-top: 1px solid rgba(126,232,255,0.08); padding: 20px 0; }
.ctd-footer-bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ctd-footer-bottom p { margin: 0; font-size: 13px; color: var(--text-faint); }
.ctd-footer-anpc a { color: var(--cyan-light); }

/* ---------- 404 ---------- */
.ctd-404 { text-align: center; padding: 120px 0; }
.ctd-404 h1 { font-size: clamp(26px, 4vw, 40px); margin-bottom: 16px; }
.ctd-search-form { display: flex; gap: 10px; max-width: 480px; margin: 0 auto 32px; flex-wrap: wrap; justify-content: center; }
.ctd-search-form input {
  flex: 1; min-width: 220px; padding: 14px 18px; border-radius: 999px; border: 1px solid var(--border-glass);
  background: var(--bg-panel); color: var(--text);
}

.ctd-empty-state { padding: 48px; text-align: center; color: var(--text-dim); font-size: 16px; }
.ctd-empty-state a { color: var(--cyan-light); text-decoration: underline; }

/* ---------- Generic page content ---------- */
.ctd-page-content { padding: 64px 0; min-height: 40vh; }
.ctd-article h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 24px; }
.ctd-prose { color: var(--text-dim); font-size: 16px; max-width: 760px; }
.ctd-prose p { margin: 0 0 1.2em; }

/* =========================================================
   WooCommerce — habillage sombre des templates par défaut
   ========================================================= */
#primary.content-area { padding: 48px 0 88px; background: var(--bg-deep); }
#primary .container, #primary { color: var(--text); }
.woocommerce-products-header,
.woocommerce > h1.page-title,
#primary h1.page-title {
  max-width: var(--container); margin: 0 auto 32px; padding: 0 20px;
  font-family: var(--font-display); font-size: clamp(26px, 4vw, 38px);
}

/* "Showing X of Y results" + tri : WooCommerce les affiche en float (float ne
   supporte pas margin:auto pour le centrage) sans les mettre dans un conteneur —
   ils s'étiraient donc bord à bord. Le JS (main.js) les regroupe dans un vrai
   div .ctd-shop-toolbar, aligné ici sur la même colonne que le reste du site. */
.ctd-shop-toolbar {
  max-width: var(--container); margin: 0 auto 20px; padding: 0 20px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.woocommerce-result-count { float: none !important; margin: 0 !important; color: var(--text-dim); font-size: 14px; }
.woocommerce-ordering { float: none !important; margin: 0 !important; }
.woocommerce-ordering select {
  background: var(--bg-panel); color: var(--text); border: 1px solid var(--border-glass);
  border-radius: 8px; padding: 8px 12px; font-size: 14px;
}
/* Repli si le JS ne tourne pas : au moins lisibles, pas collés aux bords. */
.woocommerce-result-count:not(.ctd-shop-toolbar *),
.woocommerce-ordering:not(.ctd-shop-toolbar *) {
  max-width: var(--container); margin: 0 auto 14px; padding: 0 20px; box-sizing: border-box; display: block;
}

.ctd-breadcrumb { padding: 20px 0 0; }
.woocommerce-breadcrumb { color: var(--text-faint); font-size: 13.5px; }
.woocommerce-breadcrumb a { color: var(--text-dim); }
.woocommerce-breadcrumb a:hover { color: var(--cyan-light); }

.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  max-width: var(--container); margin: 0 auto; padding: 0 20px;
  list-style: none;
}
/* WooCommerce ajoute un clearfix ::before/::after (content:" "; display:table) sur ul.products.
   En display:grid, ce pseudo-élément devient un item de grille invisible qui occupe la 1ère
   case → 3 produits sur la 1ère ligne au lieu de 4. On le neutralise. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products::before, ul.products::after { content: none !important; display: none !important; }
/* Le <li> n'est qu'un conteneur transparent : la carte visible est .ctd-product-card
   (même composant que sur l'accueil, rendu par woocommerce/content-product.php). */
.woocommerce ul.products li.product,
ul.products li.product {
  position: relative;
  width: 100% !important; margin: 0 !important; float: none !important;
  padding: 0; background: none; border: 0; text-align: left;
}
.woocommerce ul.products li.product .ctd-product-card { height: 100%; }
.woocommerce ul.products li.product .ctd-product-body,
.ctd-product-item .ctd-product-body { padding-right: 70px; } /* place pour le bouton panier rond */
/* Accueil : même enveloppe que le <li> des grilles WooCommerce */
.ctd-product-item { position: relative; display: flex; flex-direction: column; }
.ctd-product-item > .ctd-product-card { flex: 1; }
.woocommerce ul.products li.product .ctd-product-price del { color: var(--text-faint); opacity: 0.7; }
.woocommerce ul.products li.product .ctd-product-price ins { text-decoration: none; }
.woocommerce ul.products li.product .onsale {
  position: absolute; top: 12px; right: 12px; z-index: 2; left: auto; min-height: 0; line-height: 1;
  background: var(--orange); color: #1a1000; border-radius: 999px; font-weight: 700; font-size: 11px; padding: 5px 10px;
}
.woocommerce ul.products li.product .ctd-stock-badge { top: 12px; }
.woocommerce ul.products li.product .onsale ~ .ctd-stock-badge { top: 42px; } /* si promo + stock : on empile */
/* Petit bouton panier rond en bas à droite (ajout AJAX natif WooCommerce conservé) */
.woocommerce ul.products li.product .button {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  background: #0A4D8C; color: #fff; font-size: 0; border: none;
  box-shadow: 0 4px 14px rgba(10,77,140,0.5);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}
.woocommerce ul.products li.product .button::before {
  content: ""; width: 18px; height: 18px; display: block; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 11a2 2 0 002 1.6h8.1a2 2 0 002-1.6L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 11a2 2 0 002 1.6h8.1a2 2 0 002-1.6L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce ul.products li.product .button:hover { transform: scale(1.08); filter: brightness(1.12); }
.woocommerce ul.products li.product .button.added::before {
  content: "✓"; -webkit-mask: none; mask: none; background: none;
  width: auto; height: auto; font-size: 17px; line-height: 1; color: #fff; font-weight: 700;
}
.woocommerce ul.products li.product .button.loading::before { opacity: 0.4; }
.woocommerce ul.products li.product .added_to_cart { display: none; } /* pas de lien "View cart" en doublon */
.woocommerce ul.products li.product .star-rating { display: none; }
.woocommerce ul.products li.product .star-rating { padding: 0 18px; margin-top: 4px; }

/* Tuiles de sous-catégories (page d'une catégorie racine, affichage "Sous-catégories") —
   WooCommerce les met dans le même ul.products mais avec la classe product-category,
   non couverte par le style ci-dessus (par défaut : cartes blanches WooCommerce). */
.woocommerce ul.products li.product-category,
ul.products li.product-category {
  width: 100% !important; margin: 0 !important; float: none !important;
  background: var(--bg-panel-glass);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 0 0 20px;
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.woocommerce ul.products li.product-category:hover { transform: translateY(-8px); box-shadow: var(--shadow-glow-md); border-color: var(--border-glass-strong); }
.woocommerce ul.products li.product-category a { display: block; color: var(--text); }
.woocommerce ul.products li.product-category img {
  display: block; width: 100%; aspect-ratio: 1/1; object-fit: contain;
  background: linear-gradient(180deg, #f4f7fa, #dfe6ec);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 16px; box-sizing: border-box; margin-bottom: 14px;
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title {
  font-size: 16px; padding: 0 18px; font-family: var(--font-display); color: var(--text);
}
.woocommerce ul.products li.product-category .woocommerce-loop-category__title mark {
  background: var(--cyan-dim); color: var(--cyan-light); border-radius: 999px;
  padding: 2px 10px; font-size: 12.5px; font-weight: 600; margin-left: 6px; display: inline-block;
}

.woocommerce nav.woocommerce-pagination { max-width: var(--container); margin: 40px auto 0; padding: 0 20px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 8px; border: none; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px;
  border-radius: 10px; background: var(--bg-panel); color: var(--text-dim); border: 1px solid var(--border-glass);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--cyan); color: #06111F; }

.woocommerce-notices-wrapper { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
  background: var(--bg-panel); border-left: 4px solid var(--cyan); color: var(--text);
  padding: 16px 20px; border-radius: 10px; list-style: none; margin: 20px 0;
}
.woocommerce-error { border-left-color: #FF6B6B; }

/* Fiche produit */
.woocommerce div.product { max-width: var(--container); margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.woocommerce div.product .woocommerce-product-gallery {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-glass);
  background: linear-gradient(180deg, #f4f7fa, #dfe6ec);
  padding: 28px;
  box-sizing: border-box;
  position: sticky; top: 100px;
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: 6px; }
.woocommerce div.product .woocommerce-product-gallery__trigger {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(6, 11, 20, 0.55); display: flex; align-items: center; justify-content: center;
  z-index: 2; font-size: 15px;
}
/* Vignettes cliquables sous l'image principale (flexslider natif WooCommerce) */
.woocommerce div.product .woocommerce-product-gallery .flex-control-nav {
  display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-nav li { width: calc(25% - 8px); }
.woocommerce div.product .woocommerce-product-gallery .flex-control-nav img {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 8px;
  background: #fff; cursor: pointer; border: 2px solid transparent; opacity: 0.7;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-nav img:hover { opacity: 1; }
.woocommerce div.product .woocommerce-product-gallery .flex-control-nav img.flex-active { opacity: 1; border-color: var(--cyan); }
.woocommerce div.product .product_title { font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 8px; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--orange); font-size: 26px; font-weight: 700; font-family: var(--font-display);
}
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--text-dim); margin: 16px 0; }
.woocommerce div.product form.cart { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.woocommerce div.product form.cart .quantity { display: inline-flex; }
.woocommerce div.product form.cart .qty {
  width: 70px; padding: 12px; border-radius: 10px; border: 1px solid var(--border-glass);
  background: var(--bg-panel); color: var(--text); text-align: center; min-height: 48px;
}
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit {
  background: var(--orange); color: #1a1000; border: none; border-radius: 999px; padding: 14px 28px;
  font-weight: 700; min-height: 48px; transition: transform var(--transition-fast), filter var(--transition-fast);
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { transform: translateY(-2px); filter: brightness(1.08); }

.ctd-brand-badge {
  display: inline-block; color: var(--cyan-light); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 12px; padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--border-glass-strong); background: var(--cyan-dim);
}
.ctd-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.ctd-pill {
  display: flex; flex-direction: column; padding: 10px 16px; border-radius: 12px;
  background: var(--bg-panel); border: 1px solid var(--border-glass); min-width: 110px;
}
.ctd-pill strong { font-family: var(--font-display); font-size: 14px; color: var(--text); }
.ctd-pill small { color: var(--text-faint); font-size: 11px; }

/* 3 arguments courts (USP) avant le bouton d'achat */
.ctd-usp-list { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; padding: 0; width: 100%; list-style: none; }
.ctd-usp-list li { position: relative; padding-left: 24px; font-size: 14px; color: var(--text-dim); }
.ctd-usp-list li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; color: #4CE08A; font-weight: 700;
  width: 17px; height: 17px; border-radius: 50%; background: rgba(76, 224, 138, 0.14);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}

.ctd-quote-actions { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; margin-top: 4px; }

/* Rangée de réassurance à icônes, après le bouton d'achat */
.ctd-pdp-trust {
  display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 22px 0 0; padding: 16px 0 0; width: 100%;
  list-style: none; border-top: 1px solid var(--border-glass);
}
.ctd-pdp-trust li { display: flex; align-items: center; gap: 10px; flex: 1 1 150px; }
.ctd-pdp-trust-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-panel);
  border: 1px solid var(--border-glass); display: flex; align-items: center; justify-content: center;
}
.ctd-pdp-trust strong { display: block; font-size: 13px; color: var(--text); font-family: var(--font-display); }
.ctd-pdp-trust small { display: block; font-size: 12px; color: var(--text-faint); }

/* Encadré contact technique */
.ctd-contact-box { width: 100%; margin-top: 18px; padding: 16px 20px; border-radius: var(--radius-md); }
.ctd-contact-box p { margin: 0; font-size: 14px; color: var(--text-dim); }
.ctd-contact-box a { color: var(--cyan-light); font-weight: 700; text-decoration: none; }
.ctd-contact-box a:hover { text-decoration: underline; }

.woocommerce-tabs { grid-column: 1 / -1; margin-top: 40px; }
.woocommerce-tabs ul.tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border-glass); margin-bottom: 24px; flex-wrap: wrap; }
.woocommerce-tabs ul.tabs li { list-style: none; }
.woocommerce-tabs ul.tabs li a {
  display: inline-block; padding: 12px 18px; color: var(--text-dim); font-weight: 600; border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--cyan-light); border-bottom-color: var(--cyan); }
.woocommerce-tabs .panel { color: var(--text-dim); }
.ctd-specs-table { width: 100%; border-collapse: collapse; }
.ctd-specs-table th, .ctd-specs-table td { padding: 12px 16px; border-bottom: 1px solid rgba(126,232,255,0.1); text-align: left; font-size: 14.5px; }
.ctd-specs-table th { color: var(--text-faint); font-weight: 500; width: 40%; }
.ctd-specs-table td { color: var(--text); font-weight: 600; }

.related.products, .up-sells.upsells.products {
  grid-column: 1 / -1; margin-top: 48px;
}
.related.products h2, .up-sells h2 { font-family: var(--font-display); font-size: 22px; margin-bottom: 20px; }
.related.products ul.products, .up-sells ul.products { padding: 0; }

/* "Produse recomandate pentru instalare" — affiché uniquement si de vrais cross-sells existent */
.ctd-install-recos { grid-column: 1 / -1; margin-top: 48px; }
.ctd-install-recos h2 { font-family: var(--font-display); font-size: 22px; margin-bottom: 20px; }
.ctd-install-recos ul.products { padding: 0; }

/* Cart / checkout tables */
table.shop_table {
  width: 100%; border-collapse: collapse; background: var(--bg-panel-glass);
  border: 1px solid var(--border-glass); border-radius: var(--radius-md); overflow: hidden; margin: 24px 0;
}
table.shop_table th, table.shop_table td { padding: 14px 16px; border-bottom: 1px solid rgba(126,232,255,0.08); color: var(--text); }
table.shop_table th { color: var(--text-faint); font-weight: 600; text-align: left; }
.woocommerce-cart-form, form.woocommerce-checkout, .woocommerce-account:not(body) { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
/* ⚠️ Ne jamais utiliser ".woocommerce-checkout"/".woocommerce-account" seuls ici : WooCommerce
   ajoute ces MÊMES classes sur <body> sur les pages panier/checkout/compte, donc un sélecteur
   non scopé capture aussi <body> et écrase la largeur de tout le site (header compris) à 1200px. */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce-checkout select {
  background: var(--bg-panel); border: 1px solid var(--border-glass); color: var(--text); border-radius: 10px; padding: 12px 14px; min-height: 48px;
}
.woocommerce form .form-row label { color: var(--text-dim); }
#payment { background: var(--bg-panel-glass); border-radius: var(--radius-md); border: 1px solid var(--border-glass); }
#payment div.payment_box { background: var(--bg-panel); color: var(--text-dim); }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--cyan); color: #06111F; border-radius: 999px; padding: 12px 24px; font-weight: 700; border: none; min-height: 44px;
}
.woocommerce #order_review_heading, .woocommerce-checkout-review-order-table { color: var(--text); }

/* Star rating */
.star-rating { color: var(--orange); }
.star-rating::before { color: rgba(255,255,255,0.15); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .ctd-service-grid { grid-template-columns: 1fr; }
  /* minmax(0, 1fr) et pas juste "1fr" : sinon la piste de grille hérite du minimum
     de contenu de la galerie (image) et peut faire déborder toute la page en largeur. */
  .woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
}

/* Le mega-menu (7 entrées + sous-catégories) a besoin de plus de place que l'ancien
   menu à 5 entrées : on bascule sur le menu burger plus tôt pour éviter tout
   débordement horizontal (header-actions poussé hors écran). */
@media (max-width: 1500px) {
  .ctd-nav { display: none; }
  .ctd-header-actions .ctd-btn-sm.ctd-btn-primary { display: none; }
  .ctd-burger { display: inline-flex; }
}

@media (max-width: 900px) {
  .ctd-header-actions .ctd-btn-sm.ctd-btn-primary { display: none; }
}

@media (max-width: 767px) {
  .ctd-topbar-right { display: none; }
  .ctd-section { padding: 56px 0; }
  .ctd-section-light { padding: 64px 0; }
  .ctd-footer-grid { grid-template-columns: 1fr 1fr; }
  .ctd-hero { padding: 48px 0 64px; }
}

@media (max-width: 480px) {
  .ctd-footer-grid { grid-template-columns: 1fr; }
  .ctd-hero-ctas .ctd-btn, .ctd-hero-ctas { width: 100%; }
  .ctd-hero-ctas { flex-direction: column; }
  .ctd-hero-stats { flex-direction: column; align-items: stretch; }

  /* Header-actions (logo + langue + recherche + panier + burger) trop juste sur
     petit mobile depuis l'ajout des drapeaux RO/EN — on resserre les espaces
     plutôt que d'enlever une fonctionnalité (bug remonté par Jean-Michel,
     2026-09-14 : "le menu n'est pas complet sur mobile"). */
  .ctd-header-actions { gap: 4px; }
  .ctd-lang-link { padding: 4px 3px; gap: 2px; }
  .ctd-lang-flag { font-size: 12px; }
  .ctd-logo-text { font-size: 0.9em; }
}

@media (max-width: 360px) {
  /* En dessous de 360px, même resserré ça ne suffit plus : le code texte
     (RO/EN) suffit, le drapeau devient superflu. */
  .ctd-lang-flag { display: none; }
}

.ctd-no-scroll { overflow: hidden; }

/* ---------- Fiche produit : supprimer le trou entre galerie et résumé ----------
   WooCommerce applique width:48% + float à div.images / div.summary (layout historique en
   float). Dans notre grille CSS, ça écrasait la galerie à la moitié de sa colonne. */
.woocommerce div.product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px; }
.woocommerce div.product div.images,
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product div.summary {
  width: 100% !important; max-width: 100% !important; float: none !important; margin-bottom: 0;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery img { width: 100%; height: auto; }
@media (max-width: 900px) { .woocommerce div.product { grid-template-columns: minmax(0, 1fr); gap: 24px; } .woocommerce div.product .woocommerce-product-gallery { position: static; } }

/* Galerie fiche produit : plus de décalage vertical. Un ancien `position:sticky; top:100px`
   avait été neutralisé en `position:relative` (règle WooCommerce) mais le `top:100px` restait
   → galerie poussée de 100px vers le bas et chevauchant les onglets (Descriere/Recenzii). */
.woocommerce div.product .woocommerce-product-gallery { position: relative !important; top: auto !important; align-self: start; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .up-sells,
.woocommerce div.product .cross-sells { grid-column: 1 / -1; }

/* Bouton panier rond sur les cartes de l'accueil (.ctd-product-item) — oublié à la
   première passe : le sélecteur existant ne visait que "ul.products li.product .button",
   qui ne correspond pas à la structure de la page d'accueil, d'où un lien texte brut
   "Add to cart" sans aucun style affiché sous chaque carte. */
.ctd-product-item > .button {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  background: #0A4D8C; color: #fff; font-size: 0; border: none;
  box-shadow: 0 4px 14px rgba(10,77,140,0.5);
  transition: transform var(--transition-fast), filter var(--transition-fast);
}
.ctd-product-item > .button::before {
  content: ""; width: 18px; height: 18px; display: block; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 11a2 2 0 002 1.6h8.1a2 2 0 002-1.6L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.2 11a2 2 0 002 1.6h8.1a2 2 0 002-1.6L21 8H6'/%3E%3Ccircle cx='10' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ctd-product-item > .button:hover { transform: scale(1.08); filter: brightness(1.12); }
.ctd-product-item > .button.added::before {
  content: "✓"; -webkit-mask: none; mask: none; background: none;
  width: auto; height: auto; font-size: 17px; line-height: 1; color: #fff; font-weight: 700;
}
.ctd-product-item .added_to_cart { display: none; }

/* Stepper quantité +/- (toujours visible, mobile + bureau) — voir main.js */
.quantity.ctd-qty-stepper {
  display: inline-flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border-glass); border-radius: 999px; overflow: hidden;
  background: var(--bg-panel);
}
.ctd-qty-btn {
  flex: none; width: 44px; height: 48px; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text);
  font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.ctd-qty-btn:hover, .ctd-qty-btn:focus-visible { background: var(--cyan-dim); color: var(--cyan-light); }
.ctd-qty-btn:active { background: var(--border-glass-strong); }
.quantity.ctd-qty-stepper .qty {
  width: 48px; height: 48px; min-height: 48px; text-align: center;
  border: none; border-left: 1px solid var(--border-glass); border-right: 1px solid var(--border-glass);
  background: transparent; color: var(--text); font-size: 16px; -moz-appearance: textfield;
}
.quantity.ctd-qty-stepper .qty::-webkit-inner-spin-button,
.quantity.ctd-qty-stepper .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Prix HT (calculé, TVA 21% déduite du prix TTC affiché) — se convertit automatiquement
   en EUR si le visiteur a choisi EUR via le sélecteur de devise du header. */
.ctd-price-ht { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-faint); margin-top: 2px; }

/* Entrée de menu active (catégorie affichée) : couleur + soulignement permanent,
   visible au premier coup d'œil, pas seulement au survol. */
.ctd-menu > li.current-menu-item > a { color: var(--cyan-light); }
.ctd-menu > li.current-menu-item > a::after { width: 100%; }
.ctd-mobile-menu-list > li.current-menu-item > a { color: var(--cyan-light); }

/* Barre de recherche produit (icône dans le header, panneau qui se déplie) */
.ctd-search { position: relative; }
.ctd-search-toggle {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%; transition: background var(--transition-fast);
}
.ctd-search-toggle:hover, .ctd-search-toggle[aria-expanded="true"] { background: rgba(126,232,255,0.1); }
.ctd-search-panel {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 20;
  width: 340px; max-width: 90vw;
  background: var(--bg-panel-glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-glass); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.ctd-search.is-open .ctd-search-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.ctd-search-form { display: flex; gap: 8px; }
.ctd-search-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border-glass); background: var(--bg-panel); color: var(--text); font-size: 14px;
}
.ctd-search-input::placeholder { color: var(--text-faint); }
.ctd-search-submit {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--cyan); display: inline-flex; align-items: center; justify-content: center;
}
.ctd-search-form--mobile { margin: 0 0 20px; }
/* En dessous de 1500px, le menu bascule sur le burger et ".ctd-search" (icône) n'est
   plus forcément proche du bord droit du header (elle est suivie de l'icône panier
   et du burger) : ancrer le panneau à ".ctd-search" via left/right le faisait déborder
   horizontalement de la page (débordement réel, corrigé le 2026-09-06 — voir
   Refonte-2026.md ; ce débordement était auparavant masqué par un overflow-x:hidden
   de secours sur body, retiré depuis que cette vraie cause est corrigée). On détache
   donc le panneau de cette icône : position "fixed" avec marges fixes par rapport au
   VIEWPORT (jamais plus large que l'écran, quelle que soit la position de l'icône) ;
   le "top" exact est positionné en JS à l'ouverture (main.js), sous le header réel,
   plutôt qu'une valeur devinée ici. */
@media (max-width: 1500px) {
  .ctd-search-panel {
    position: fixed;
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
  }
}

/* Suggestions de recherche en direct (liste sous le champ) */
.ctd-search-results {
  margin-top: 10px; max-height: 360px; overflow-y: auto;
  border-top: 1px solid var(--border-glass); padding-top: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.ctd-search-result {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px;
  color: var(--text); transition: background var(--transition-fast);
}
.ctd-search-result:hover, .ctd-search-result:focus-visible { background: rgba(126,232,255,0.08); }
.ctd-search-result img, .ctd-search-result-noimg {
  width: 40px; height: 40px; flex: none; border-radius: 8px; object-fit: contain;
  background: linear-gradient(180deg, #f4f7fa, #dfe6ec);
}
.ctd-search-result-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctd-search-result-name { font-size: 13.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctd-search-result-price { font-size: 12.5px; color: var(--orange); font-weight: 700; }
.ctd-search-viewall {
  text-align: center; padding: 10px; font-size: 13px; font-weight: 600; color: var(--cyan-light);
  border-top: 1px solid var(--border-glass); margin-top: 4px;
}
.ctd-search-empty { padding: 12px 8px; font-size: 13.5px; color: var(--text-faint); margin: 0; }
.ctd-search-form--mobile + .ctd-search-results { margin-top: 0; margin-bottom: 20px; }

/* =========================================================
   Page Coș (panier) — refonte glassmorphism (2026-09-06)
   ========================================================= */
.ctd-cart-title { font-size: clamp(26px, 4vw, 38px); margin-bottom: 28px; }

.ctd-cart-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: start; }
.ctd-cart-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ctd-cart-side { position: sticky; top: 96px; }

.ctd-cart-table-wrap { min-width: 0; }
/* Le tableau garde son propre habillage "verre" (table.shop_table déjà stylé plus haut) ;
   ce wrapper ne sert qu'à permettre un défilement horizontal en secours sur mobile,
   sans faire déborder toute la page (voir leçon overflow-x sur ce thème). */
.ctd-cart-table-wrap table.shop_table.cart { margin-top: 0; }

table.shop_table.cart .product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,107,107,0.12); color: #FF6B6B !important;
  font-size: 18px; line-height: 1; font-weight: 700; text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
table.shop_table.cart .product-remove a.remove:hover { background: rgba(255,107,107,0.24); transform: scale(1.08); }

table.shop_table.cart th.product-thumbnail, table.shop_table.cart td.product-thumbnail {
  width: 96px; min-width: 96px;
}
table.shop_table.cart .product-thumbnail img {
  width: 64px !important; height: 64px; object-fit: contain; border-radius: 8px;
  background: linear-gradient(180deg, #f4f7fa, #dfe6ec); padding: 6px; box-sizing: border-box;
}
table.shop_table.cart .product-name a { color: var(--text); font-weight: 600; }
table.shop_table.cart .product-name a:hover { color: var(--cyan-light); }
table.shop_table.cart .product-price, table.shop_table.cart .product-subtotal { color: var(--orange); font-weight: 700; font-family: var(--font-display); white-space: nowrap; }
table.shop_table.cart .ctd-price-ht { font-family: var(--font-body); font-weight: 500; }

table.shop_table.cart tr.actions td {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between;
  background: transparent; padding-top: 18px;
}
table.shop_table.cart .coupon { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 1 1 260px; }
table.shop_table.cart .coupon .input-text {
  background: var(--bg-panel); border: 1px solid var(--border-glass); color: var(--text);
  border-radius: 999px; padding: 10px 16px; min-height: 40px; min-width: 160px;
}

.ctd-cart-reassurance { padding: 20px 24px; }
.ctd-cart-reassurance .ctd-pdp-trust { border-top: none; margin: 0; padding: 0; }

.ctd-cart-empty { padding: 56px 40px; text-align: center; }
.ctd-cart-empty p:first-child { font-size: 17px; color: var(--text-dim); margin: 0 0 24px; }

/* Total coș (colonne latérale) */
.ctd-cart-totals { padding: 24px 26px 28px; }
.ctd-cart-totals h2 { font-size: 19px; margin-bottom: 16px; }
.ctd-cart-totals table.shop_table {
  background: transparent; border: none; border-radius: 0; margin: 0 0 20px;
}
.ctd-cart-totals table.shop_table th, .ctd-cart-totals table.shop_table td { padding: 12px 0; }
.ctd-cart-totals table.shop_table tr.order-total th,
.ctd-cart-totals table.shop_table tr.order-total td { border-bottom: none; padding-top: 16px; border-top: 1px solid var(--border-glass); }
.ctd-cart-totals table.shop_table tr.order-total td strong { color: var(--orange); font-family: var(--font-display); font-size: 20px; }
.ctd-checkout-btn { width: 100%; }
/* WooCommerce charge encore sa propre feuille de style (bouton "alt" violet #7f54b3
   par défaut, boutons génériques en cyan plein) qui l'emporte sur nos classes .ctd-btn-*
   à spécificité égale/inférieure — on force explicitement l'apparence du design system
   sur les 3 actions du panier (finaliser / appliquer un cupon / actualiza coșul). */
.woocommerce a.button.ctd-checkout-btn {
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan)) !important;
  color: #06111F !important;
}
.woocommerce a.button.ctd-checkout-btn:hover { filter: brightness(1.06); }
.woocommerce button.button.ctd-btn-outline {
  background: transparent !important; color: var(--cyan-light) !important;
  border: 1px solid var(--border-glass-strong) !important;
}
.woocommerce button.button.ctd-btn-outline:hover { border-color: var(--cyan) !important; }
.woocommerce button.button.ctd-btn-ghost {
  background: rgba(126,232,255,0.08) !important; color: var(--cyan-light) !important;
  border: 1px solid var(--border-glass) !important;
}
.woocommerce button.button.ctd-btn-ghost:hover { background: rgba(126,232,255,0.16) !important; }
.woocommerce-shipping-totals.shipping select,
.woocommerce-shipping-totals.shipping .input-text { background: var(--bg-panel); border: 1px solid var(--border-glass); color: var(--text); border-radius: 8px; padding: 8px 10px; }

@media (max-width: 900px) {
  .ctd-cart-layout { grid-template-columns: 1fr; }
  .ctd-cart-side { position: static; }
  table.shop_table.cart .coupon { flex-direction: column; align-items: stretch; }
  table.shop_table.cart .coupon .input-text { width: 100%; }
  table.shop_table.cart tr.actions td { flex-direction: column; align-items: stretch; }
}

@media (max-width: 600px) {
  /* Scopé à la réassurance du panier (pas .ctd-pdp-trust globale, pour ne pas changer
     le comportement mobile déjà validé de la fiche produit) : flex:1 1 150px vient de
     la fiche produit (rangée horizontale) ; en colonne, ce 150px devient une hauteur
     minimale par ligne (flex-basis suit l'axe principal) et créait un grand vide
     vertical entre l'icône et le texte suivant. */
  .ctd-cart-reassurance .ctd-pdp-trust { flex-direction: column; }
  .ctd-cart-reassurance .ctd-pdp-trust li { flex: 0 0 auto; }
  .ctd-cart-empty { padding: 40px 20px; }
}

/* =========================================================
   Page Checkout (finalizare comandă) — glassmorphism (2026-09-06)
   Réutilise .ctd-cart-layout / .ctd-cart-main / .ctd-cart-side / .ctd-cart-totals
   (mêmes classes/mêmes règles responsive que la page Coș ci-dessus) : même
   structure 2 colonnes, aucun nouveau système de layout inventé.
   ========================================================= */
.ctd-checkout-card { padding: 28px 30px 32px; }
.ctd-checkout-card h3 { font-family: var(--font-display); font-size: 18px; margin: 0 0 20px; }
.ctd-checkout-card #ship-to-different-address { margin-top: 28px; }
.ctd-checkout-card .woocommerce-additional-fields { margin-top: 28px; }

.woocommerce-checkout .form-row { margin: 0 0 16px; }
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select { border-color: #FF6B6B; }

/* Select2 (pays / județ) — la lib habille le <select> d'origine avec son propre markup */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  background: var(--bg-panel); border: 1px solid var(--border-glass); border-radius: 10px;
  min-height: 48px; display: flex; align-items: center; padding: 0 14px;
}
.woocommerce-checkout .select2-selection__rendered { color: var(--text) !important; padding: 0 !important; }
.woocommerce-checkout .select2-selection__arrow { height: 46px !important; }
.woocommerce-checkout .select2-dropdown { background: var(--bg-panel); border: 1px solid var(--border-glass); color: var(--text); }
.woocommerce-checkout .select2-results__option { color: var(--text); }
.woocommerce-checkout .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--cyan); color: #06111F; }

.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] { accent-color: var(--cyan); width: 18px; height: 18px; vertical-align: middle; }

.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 20px; font-size: 14px; color: var(--text-dim); }
.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
  background: var(--bg-panel-glass); border: 1px solid var(--border-glass); border-radius: var(--radius-md);
  padding: 16px 20px; margin-bottom: 20px;
}
.woocommerce-checkout .checkout_coupon .form-row { margin-bottom: 12px; }

.ctd-checkout-order-review h2 { font-size: 19px; margin-bottom: 16px; }
.woocommerce-checkout-review-order-table { margin: 0 0 20px; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 12px 0; }
.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout-review-order-table tr.order-total td { border-bottom: none; padding-top: 16px; border-top: 1px solid var(--border-glass); }
.woocommerce-checkout-review-order-table tr.order-total td strong { color: var(--orange); font-family: var(--font-display); font-size: 20px; }

ul.wc_payment_methods { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
ul.wc_payment_methods li.wc_payment_method { border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 14px 16px; background: var(--bg-panel); }
ul.wc_payment_methods li.wc_payment_method label { color: var(--text); font-weight: 600; margin-left: 8px; }
ul.wc_payment_methods .payment_box { margin-top: 12px; padding: 14px 16px !important; border-radius: 8px; font-size: 13.5px; }
ul.wc_payment_methods li > .woocommerce-info { margin: 0; }

.woocommerce-terms-and-conditions-wrapper { margin: 20px 0; font-size: 13.5px; color: var(--text-dim); }
.woocommerce-terms-and-conditions-wrapper a { color: var(--cyan-light); }
.woocommerce-terms-and-conditions-wrapper .form-row label { display: flex; align-items: flex-start; gap: 10px; }

.woocommerce-privacy-policy-text { font-size: 12.5px; color: var(--text-faint); margin: 16px 0; }
.woocommerce-privacy-policy-text a { color: var(--cyan-light); }

#place_order.ctd-checkout-btn { width: 100%; margin-top: 8px; }
.woocommerce button.button.ctd-checkout-btn {
  background: linear-gradient(135deg, var(--cyan-light), var(--cyan)) !important;
  color: #06111F !important;
}
.woocommerce button.button.ctd-checkout-btn:hover { filter: brightness(1.06); }

@media (max-width: 600px) {
  .ctd-checkout-card { padding: 22px 20px 26px; }
}