/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It's ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website.
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.12.6.1777217102
Updated: 2026-04-26 17:25:02
*/


/* ═══════════════════════════════════════════════════════════════════
   VKG — STYLE.CSS V2 OPTIMISÉ
   ─────────────────────────────────────────────────────────────────
   SOMMAIRE :
   01. Polices + Variables + Reset
   02. Boutons (.btn-white, .btn-ghost)
   02-bis. Navigation Astra — Sous-menus (dropdown Boutique, etc.)
   02-ter. Navigation Astra — Header principal (logo + menu + icônes + mobile)
   03. HERO (accueil + valeurs + perso)
   04. TICKER
   05. COLLECTION header
   06. PUSH ACHAT
   07. MANIFESTO
   08. ARGUMENTS (3-4 cellules)
   09. ATHLÈTES (mosaïque)
   10. FEAT BAR (4 cellules)
   11. WOOCOMMERCE — Grille .vkg-page (accueil)
   12. WOOCOMMERCE — Page Boutique (/boutique/)
   13. WPForms — Page Contact (générique)
   14. PAGE PERSONNALISATION — Catégories + Statement
   15. PAGE PERSONNALISATION — WPForms 743 stylisé
   ─── RESPONSIVE ───
   16. Tablette (≤1024px)
   17. Mobile (≤768px)
   18. Petit mobile (≤480px)
   19. ★ CARROUSELS PRODUITS MOBILES (en dernier — priorité max)
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   01. POLICES + VARIABLES + RESET
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;1,700&family=Barlow:wght@300;400;500&display=swap');

:root {
  --vkg-black: #080808;
  --vkg-charcoal: #141414;
  --vkg-dark2: #1c1c1c;
  --vkg-border: #2e2e2e;
  --vkg-border2: #3d3d3d;
  --vkg-anthracite: #7a7a7a;
  --vkg-silver: #b0b0b0;
  --vkg-white: #e6e6e6;
  --vkg-red: #b83232;
}

body:not(.wp-admin) { cursor: crosshair; }

.vkg-page,
.vkg-page *,
.vkg-page *::before,
.vkg-page *::after { box-sizing: border-box; }

.vkg-page img { display: block; max-width: 100%; }

/* Reset listes utilisées comme conteneurs sémantiques (UL/LI/OL converties depuis DIV)
   pour qu'elles n'affichent ni puces ni padding par défaut.
   IMPORTANT : on reset margin-top/left/right uniquement — on préserve margin-bottom
   pour que les règles d'espacement aval (ex: .hero-pillars { margin-bottom }) fonctionnent. */
.vkg-page ul.hero-pillars,
.vkg-page ul.manifesto-feats,
.vkg-page ul.athletes-grid,
.vkg-page ul.vkg-perso-grid,
.vkg-page ol.arguments,
.vkg-page ul.arguments {
  list-style: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Classe utilitaire "sr-only" : titre lu par lecteurs d'écran et indexé par
   crawlers SEO mais invisible visuellement. Utilisé pour les H2 de section
   sans titre visible (ex: "Nos engagements" avant la grille des arguments) */
.vkg-page .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Reset vidéos VKG — masque les contrôles natifs iOS Safari qui
   s'affichent quand l'autoplay est bloqué ou que poster="" est vide */
.vkg-page video {
  display: block;
  -webkit-appearance: none;
}
.vkg-page video::-webkit-media-controls,
.vkg-page video::-webkit-media-controls-enclosure,
.vkg-page video::-webkit-media-controls-panel,
.vkg-page video::-webkit-media-controls-overlay-play-button,
.vkg-page video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   02. BOUTONS
   ═══════════════════════════════════════════════════════════════════ */

.vkg-page .btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 14px 30px;
  text-decoration: none;
  cursor: crosshair;
  display: inline-block;
  transition: all 0.2s;
  border: 2px solid;
}

.vkg-page a.btn.btn-white,
.vkg-page .hero-ctas a.btn-white,
.vkg-page .manifesto-text a.btn-white,
.vkg-page .push-right a.btn-white {
  background: var(--vkg-white) !important;
  color: var(--vkg-black) !important;
  border: 2px solid var(--vkg-white) !important;
  text-decoration: none !important;
}

.vkg-page a.btn.btn-white:hover,
.vkg-page .hero-ctas a.btn-white:hover,
.vkg-page .manifesto-text a.btn-white:hover,
.vkg-page .push-right a.btn-white:hover {
  background: transparent !important;
  color: var(--vkg-white) !important;
}

.vkg-page a.btn.btn-ghost {
  background: transparent !important;
  color: var(--vkg-silver) !important;
  border: 2px solid var(--vkg-border2) !important;
  text-decoration: none !important;
}

.vkg-page a.btn.btn-ghost:hover {
  border-color: var(--vkg-anthracite) !important;
  color: var(--vkg-white) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   02-bis. NAVIGATION ASTRA — Sous-menus (override style VKG)
   ─────────────────────────────────────────────────────────────────
   ⚠️ Le site utilise Astra Transparent Header. Astra injecte des règles
   avec jusqu'à 7+ classes chaînées (ex: .ast-theme-transparent-header
   .ast-builder-menu .main-header-menu .menu-item .sub-menu .menu-item
   .menu-link → spécificité 0,7,0).
   Pour TOUJOURS gagner, on chaîne body.ast-theme-transparent-header
   ou body.ast-header-break-point en plus de l'ID #ast-hf-menu-1.
   ═══════════════════════════════════════════════════════════════════ */

/* Container du sous-menu : noir profond, bordure hairline, angles droits */
body #ast-hf-menu-1 .sub-menu,
body.ast-theme-transparent-header #ast-hf-menu-1 .sub-menu,
body.ast-theme-transparent-header .main-header-menu .menu-item .sub-menu,
body.ast-header-break-point .main-header-menu .menu-item .sub-menu,
body.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item .sub-menu {
  background: var(--vkg-black) !important;
  background-color: var(--vkg-black) !important;
  border: 1px solid var(--vkg-border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-width: 240px !important;
  margin-top: 0 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65) !important;
  list-style: none !important;
}

/* Items du sous-menu : séparateurs hairline entre eux */
body #ast-hf-menu-1 .sub-menu li,
body.ast-theme-transparent-header #ast-hf-menu-1 .sub-menu li,
body.ast-theme-transparent-header .main-header-menu .sub-menu li,
body.ast-header-break-point .main-header-menu .sub-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--vkg-border) !important;
  background: transparent !important;
}
body #ast-hf-menu-1 .sub-menu li:last-child,
body.ast-theme-transparent-header .main-header-menu .sub-menu li:last-child {
  border-bottom: none !important;
}

/* Liens (.menu-link) : Barlow Condensed, uppercase, letter-spacing
   Sélecteurs préfixés body.ast-theme-transparent-header pour battre
   les règles Astra à 7+ classes chaînées */
body #ast-hf-menu-1 .sub-menu li .menu-link,
body #ast-hf-menu-1 .sub-menu .menu-item .menu-link,
body.ast-theme-transparent-header #ast-hf-menu-1 .sub-menu li .menu-link,
body.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item .sub-menu .menu-item .menu-link,
body.ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-link,
body.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-item .sub-menu .menu-link {
  display: block !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--vkg-silver) !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 16px 24px !important;
  border: none !important;
  border-left: 2px solid transparent !important;
  text-decoration: none !important;
  cursor: crosshair !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, padding-left 0.25s ease !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
}

/* Hover / focus / item courant */
body #ast-hf-menu-1 .sub-menu li .menu-link:hover,
body #ast-hf-menu-1 .sub-menu li .menu-link:focus,
body #ast-hf-menu-1 .sub-menu li.current-menu-item > .menu-link,
body.ast-theme-transparent-header #ast-hf-menu-1 .sub-menu li .menu-link:hover,
body.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item .sub-menu .menu-item .menu-link:hover,
body.ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-link:hover,
body.ast-header-break-point .main-header-bar-navigation .main-header-menu .menu-item .sub-menu .menu-link:hover {
  background: var(--vkg-charcoal) !important;
  background-color: var(--vkg-charcoal) !important;
  color: var(--vkg-white) !important;
  border-left-color: var(--vkg-red) !important;
  padding-left: 30px !important;
}

/* Cacher les flèches SVG injectées par Astra DANS chaque item du sous-menu */
body #ast-hf-menu-1 .sub-menu li .menu-link .ast-icon.icon-arrow,
body #ast-hf-menu-1 .sub-menu li .menu-link .ast-arrow-svg,
body.ast-theme-transparent-header .main-header-menu .sub-menu li .menu-link .ast-icon,
body.ast-theme-transparent-header .main-header-menu .sub-menu li .menu-link .ast-arrow-svg {
  display: none !important;
}

/* Cacher le <button class="ast-menu-toggle"> sur desktop */
body.ast-desktop #ast-hf-menu-1 > .menu-item-has-children > .ast-menu-toggle,
body.ast-theme-transparent-header .main-header-menu > .menu-item-has-children > .ast-menu-toggle {
  display: none !important;
}

/* Animation d'apparition à l'ouverture (fade + glissement) */
body #ast-hf-menu-1 .menu-item-has-children:hover > .sub-menu,
body #ast-hf-menu-1 .menu-item-has-children:focus-within > .sub-menu,
body.ast-theme-transparent-header .main-header-menu .menu-item-has-children:hover > .sub-menu {
  animation: vkg-submenu-in 0.22s ease-out both;
}
@keyframes vkg-submenu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Flèche du parent BOUTIQUE — couleur silver, pivote 180° à l'ouverture */
body #ast-hf-menu-1 .menu-item-has-children > .menu-link .ast-header-navigation-arrow svg,
body.ast-theme-transparent-header .main-header-menu .menu-item-has-children > .menu-link .ast-header-navigation-arrow svg {
  fill: var(--vkg-silver) !important;
  transition: fill 0.2s ease, transform 0.25s ease !important;
}
body #ast-hf-menu-1 .menu-item-has-children:hover > .menu-link .ast-header-navigation-arrow svg,
body.ast-theme-transparent-header .main-header-menu .menu-item-has-children:hover > .menu-link .ast-header-navigation-arrow svg {
  fill: var(--vkg-white) !important;
  transform: rotate(180deg) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   02-ter. NAVIGATION ASTRA — Header principal (logo + menu + icônes)
   ─────────────────────────────────────────────────────────────────
   Cible le navbar global : background, items top-level (ACCUEIL, BOUTIQUE,
   VALEURS, PERSONNALISATION, CONTACT), icônes panier + compte, hamburger
   mobile et menu off-canvas.
   Préfixé body.ast-theme-transparent-header pour battre les overrides Astra.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Header background : fond noir solide + hairline ─── */
/* v2 : fond noir solide en permanence (plus de semi-transparent / blur).
   Écrasé et renforcé en 02-quater (cascade + !important). */
body.ast-theme-transparent-header .ast-primary-header-bar.main-header-bar,
body.ast-theme-transparent-header #ast-desktop-header .main-header-bar-wrap,
body.ast-theme-transparent-header #ast-mobile-header .main-header-bar-wrap {
  background: var(--vkg-black) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--vkg-border) !important;
  transition: none !important;
}

/* ─── Items top-level du menu principal ─── */
body #ast-hf-menu-1 > .menu-item > .menu-link,
body.ast-theme-transparent-header #ast-hf-menu-1 > .menu-item > .menu-link,
body.ast-theme-transparent-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
body.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--vkg-silver) !important;
  padding: 10px 24px !important;
  cursor: crosshair !important;
  position: relative !important;
  transition: color 0.25s ease !important;
}

/* Underline rouge animée au hover (apparaît du gauche vers droite) */
body #ast-hf-menu-1 > .menu-item > .menu-link::after,
body.ast-theme-transparent-header #ast-hf-menu-1 > .menu-item > .menu-link::after,
body.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link::after {
  content: '' !important;
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 2px !important;
  height: 1px !important;
  background: var(--vkg-red) !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 0.3s ease !important;
}

body #ast-hf-menu-1 > .menu-item > .menu-link:hover,
body #ast-hf-menu-1 > .menu-item.current-menu-item > .menu-link,
body #ast-hf-menu-1 > .menu-item:hover > .menu-link,
body.ast-theme-transparent-header #ast-hf-menu-1 > .menu-item > .menu-link:hover,
body.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link:hover,
body.ast-theme-transparent-header .main-header-menu > .menu-item.current-menu-item > .menu-link {
  color: var(--vkg-white) !important;
}

body #ast-hf-menu-1 > .menu-item > .menu-link:hover::after,
body #ast-hf-menu-1 > .menu-item.current-menu-item > .menu-link::after,
body #ast-hf-menu-1 > .menu-item:hover > .menu-link::after,
body.ast-theme-transparent-header #ast-hf-menu-1 > .menu-item > .menu-link:hover::after,
body.ast-theme-transparent-header .main-header-menu > .menu-item.current-menu-item > .menu-link::after {
  transform: scaleX(1) !important;
}

/* Désactiver le style "underline" natif Astra (.ast-menu-hover-style-underline)
   qui ajoute son propre underline et entre en conflit avec le nôtre */
body.ast-theme-transparent-header .ast-menu-hover-style-underline > .menu-item > .menu-link::before,
body.ast-theme-transparent-header .main-header-menu.ast-menu-hover-style-underline > .menu-item > .menu-link::before {
  display: none !important;
  content: none !important;
}

/* ─── Logo : transition douce, hover atténué ─── */
body.ast-theme-transparent-header .custom-logo-link,
body.ast-theme-transparent-header .site-logo-img a {
  transition: opacity 0.25s ease, transform 0.25s ease !important;
  display: inline-block !important;
}

body.ast-theme-transparent-header .custom-logo-link:hover,
body.ast-theme-transparent-header .site-logo-img a:hover {
  opacity: 0.75 !important;
}

/* ─── Icône Panier (cart) ─── */
body.ast-theme-transparent-header .ast-site-header-cart .cart-container {
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px !important;
  transition: border-color 0.25s ease, background 0.25s ease !important;
  cursor: crosshair !important;
}

body.ast-theme-transparent-header .ast-site-header-cart .cart-container:hover {
  border-color: var(--vkg-border2) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

body.ast-theme-transparent-header .ast-icon.icon-bag svg,
body.ast-theme-transparent-header #ast-bag-icon-svg {
  fill: var(--vkg-silver) !important;
  width: 22px !important;
  height: 22px !important;
  transition: fill 0.25s ease !important;
}

body.ast-theme-transparent-header .ast-site-header-cart .cart-container:hover svg,
body.ast-theme-transparent-header .ast-site-header-cart .cart-container:hover #ast-bag-icon-svg {
  fill: var(--vkg-white) !important;
}

/* Compteur d'articles — pastille rouge angles droits */
body.ast-theme-transparent-header .ast-cart-menu-wrap .count,
body.ast-theme-transparent-header .ast-cart-count-wrap .ast-cart-count,
body.ast-theme-transparent-header .ast-icon-shopping-bag[data-cart-total]:not([data-cart-total="0"])::after {
  background: var(--vkg-red) !important;
  color: var(--vkg-white) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 2px 5px !important;
  min-width: 16px !important;
  text-align: center !important;
}

/* Mini-cart popup (préview du panier) */
body.ast-theme-transparent-header .ast-site-header-cart-data {
  background: var(--vkg-black) !important;
  border: 1px solid var(--vkg-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.65) !important;
}

body.ast-theme-transparent-header .ast-site-header-cart-data .woocommerce-mini-cart__empty-message,
body.ast-theme-transparent-header .ast-site-header-cart-data .ast-mini-cart-message p {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--vkg-silver) !important;
  padding: 1.5rem !important;
  margin: 0 !important;
}

body.ast-theme-transparent-header .ast-site-header-cart-data .ast-continue-shopping {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  background: var(--vkg-white) !important;
  color: var(--vkg-black) !important;
  border: 2px solid var(--vkg-white) !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  display: block !important;
  text-align: center !important;
  margin: 0 1.5rem 1.5rem !important;
  transition: all 0.2s ease !important;
}

body.ast-theme-transparent-header .ast-site-header-cart-data .ast-continue-shopping:hover {
  background: transparent !important;
  color: var(--vkg-white) !important;
}

/* ─── Icône Compte ─── */
body.ast-theme-transparent-header .ast-header-account-wrap {
  border: 1px solid transparent !important;
  border-radius: 0 !important;
  transition: border-color 0.25s ease, background 0.25s ease !important;
}

body.ast-theme-transparent-header .ast-header-account-wrap:hover {
  border-color: var(--vkg-border2) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

body.ast-theme-transparent-header .ast-header-account-link {
  padding: 10px !important;
  cursor: crosshair !important;
}

body.ast-theme-transparent-header .ast-header-account-link svg.account-icon,
body.ast-theme-transparent-header .ahfb-svg-iconset svg {
  fill: var(--vkg-silver) !important;
  width: 22px !important;
  height: 22px !important;
  transition: fill 0.25s ease !important;
}

body.ast-theme-transparent-header .ast-header-account-link:hover svg.account-icon,
body.ast-theme-transparent-header .ast-header-account-wrap:hover svg.account-icon {
  fill: var(--vkg-white) !important;
}

/* ─── Hamburger mobile ─── */
body.ast-theme-transparent-header .menu-toggle.main-header-menu-toggle,
body.ast-mobile-header-inline .menu-toggle.main-header-menu-toggle {
  background: transparent !important;
  border: 1px solid var(--vkg-border2) !important;
  border-radius: 0 !important;
  color: var(--vkg-white) !important;
  padding: 10px 12px !important;
  cursor: crosshair !important;
  transition: border-color 0.25s ease, background 0.25s ease !important;
  box-shadow: none !important;
}

body.ast-theme-transparent-header .menu-toggle.main-header-menu-toggle:hover,
body.ast-mobile-header-inline .menu-toggle.main-header-menu-toggle:hover {
  border-color: var(--vkg-white) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

body.ast-theme-transparent-header .menu-toggle.main-header-menu-toggle svg.ast-mobile-svg {
  fill: var(--vkg-white) !important;
  width: 22px !important;
  height: 22px !important;
}

/* ─── Menu mobile (off-canvas / dropdown) ─── */
body.ast-theme-transparent-header #ast-mobile-header,
body.ast-theme-transparent-header .ast-mobile-header-content {
  background: var(--vkg-black) !important;
  border-top: 1px solid var(--vkg-border) !important;
}

body #ast-hf-mobile-menu .menu-item .menu-link,
body.ast-theme-transparent-header #ast-hf-mobile-menu .menu-item .menu-link,
body.ast-theme-transparent-header .ast-mobile-header-content .main-header-menu .menu-item .menu-link {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--vkg-silver) !important;
  background: transparent !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--vkg-border) !important;
  border-left: 2px solid transparent !important;
  cursor: crosshair !important;
  transition: color 0.25s ease, padding-left 0.25s ease, border-color 0.25s ease, background 0.25s ease !important;
  display: block !important;
}

body #ast-hf-mobile-menu .menu-item .menu-link:hover,
body #ast-hf-mobile-menu .menu-item.current-menu-item .menu-link,
body.ast-theme-transparent-header #ast-hf-mobile-menu .menu-item .menu-link:hover,
body.ast-theme-transparent-header #ast-hf-mobile-menu .menu-item.current-menu-item .menu-link {
  color: var(--vkg-white) !important;
  padding-left: 32px !important;
  border-left-color: var(--vkg-red) !important;
  background: var(--vkg-charcoal) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   02-quater. HEADER FIXE — Fond noir solide permanent + mobile auto-hide
   ─────────────────────────────────────────────────────────────────
   Géré en CSS (position fixed) + JS via Code Snippets (snippet v3).
   Le JS v3 ajoute la classe sur document.body (pas sur #masthead) :
     body.header-hidden  → translateY(-100%) sur TOUS les wrappers Astra mobile
   Stratégie body-class : robuste peu importe quel wrapper Astra rend le header.
   Pas de logique transparent → opaque : fond noir solide en permanence.

   COMPENSATION OFFSET :
   On cible main#main (pas body) car Astra Transparent Header applique un
   margin-top négatif sur #page pour son effet immersif natif — ce margin
   annule un padding-top sur body. En ciblant main#main, on contourne cela.
   Pages WooCommerce : compensation gérée en section 12 sur main#main.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Position fixed sur #masthead — desktop ET mobile ─── */
/* Astra place <header id="masthead"> comme wrapper racine du header.
   On le fixe en position plutôt que de dépendre du sticky Astra Customizer. */
#masthead {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  transition: transform 0.3s ease !important;
}

/* ─── Fond noir semi-transparent 45% — VALIDÉ par Thomas (rendu final) ─── */
body.ast-theme-transparent-header .ast-primary-header-bar.main-header-bar,
body.ast-theme-transparent-header #ast-desktop-header .main-header-bar-wrap,
body.ast-theme-transparent-header #ast-mobile-header .main-header-bar-wrap,
body.ast-theme-transparent-header #ast-mobile-header,
body.ast-theme-transparent-header .ast-mobile-header-content,
body.ast-theme-transparent-header .ast-mobile-header-wrap {
  background: rgba(12, 12, 13, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--vkg-border) !important;
}

/* ─── Mobile auto-hide : masquer le header quand scroll vers le bas ─── */
/* Stratégie v3 : classe body.header-hidden plutôt que #masthead.is-hidden.
   On cible TOUS les wrappers Astra possibles pour couvrir desktop/mobile header.
   Sur desktop le JS ne pose jamais body.header-hidden (isMobile() guard). */
@media (max-width: 768px) {
  body.header-hidden #masthead,
  body.header-hidden #ast-desktop-header,
  body.header-hidden #ast-mobile-header,
  body.header-hidden #ast-fixed-header,
  body.header-hidden .ast-primary-header-bar {
    transform: translateY(-100%) !important;
    transition: transform 0.3s ease !important;
  }
}

/* ─── Compensation hauteur header : éviter que le contenu passe derrière ─── */
/* Hauteur header = 109px (validé). On cible main#main plutôt que body.
   Raison : Astra Transparent Header applique un margin-top négatif sur #page
   pour l'effet immersif natif — ce margin annule un padding-top posé sur body.
   En ciblant main#main (un niveau plus bas), on contourne ce mécanisme Astra.
   Exclure toutes les pages WooCommerce : leur compensation est gérée
   en section 12 (padding-top: 109px sur main#main). */
body:not(.woocommerce):not(.woocommerce-page):not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout) main#main {
  padding-top: 109px !important;
}

/* Mobile : 109px validé (idem desktop). */
@media (max-width: 768px) {
  body:not(.woocommerce):not(.woocommerce-page):not(.single-product):not(.woocommerce-cart):not(.woocommerce-checkout) main#main {
    padding-top: 109px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   03. HERO
   ═══════════════════════════════════════════════════════════════════ */

.vkg-page .hero {
  min-height: calc(100vh - 80px);
  display: grid;
  grid-template-columns: 52% 48%;
  overflow: hidden;
  position: relative;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background: var(--vkg-black);
  color: var(--vkg-white);
  font-family: 'Barlow', sans-serif;
}

.vkg-page .hero-media {
  position: relative;
  overflow: hidden;
  background: var(--vkg-charcoal);
  clip-path: polygon(0 0, 100% 0, calc(100% - 110px) 100%, 0 100%);
}

.vkg-page .hero-img-wrap { width: 100%; height: 100%; }
.vkg-page .hero-img-wrap img,
.vkg-page .hero-img-wrap video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: brightness(0.88) contrast(1.05);
}

.vkg-page .hero-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 80px);
  background: radial-gradient(ellipse at 30% 40%, #202020 0%, #0c0c0c 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vkg-page .hero-img-placeholder-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 240px;
  color: rgba(255, 255, 255, 0.025);
  letter-spacing: 20px;
  user-select: none;
}

.vkg-page .hero-live {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--vkg-black);
  background: var(--vkg-white);
  padding: 10px 18px;
  animation: vkg-livepulse 2.5s ease-in-out infinite;
}

.vkg-page .live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vkg-red);
  animation: vkg-blink 1s ease-in-out infinite;
}

@keyframes vkg-livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }
@keyframes vkg-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.vkg-page .hero-content {
  background: var(--vkg-black);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5rem 4.5rem 5rem 5.5rem;
  position: relative;
  overflow: hidden;
  /* Largeur de référence du bloc CTAs — sert à aligner les piliers dessous.
     Valeur par défaut (accueil) : "Découvrir la collection" + 12px gap + "Notre philosophie"
     Override par page : .hero-perso .hero-content, .hero-valeurs .hero-content */
  --hero-cta-width: 420px;
}

.vkg-page .hero-content::before {
  content: 'VKG';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 380px;
  color: rgba(255, 255, 255, 0.016);
  position: absolute;
  right: -60px;
  bottom: -40px;
  letter-spacing: 10px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.vkg-page .hero-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--vkg-anthracite);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.75rem;
  animation: vkg-fadeUp 0.6s ease 0.1s both;
}

.vkg-page .hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--vkg-anthracite);
}

.vkg-page .hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(74px, 8vw, 116px);
  line-height: 0.88;
  letter-spacing: 2px;
  color: var(--vkg-white);
  margin-bottom: 0.6rem;
  animation: vkg-fadeUp 0.7s ease 0.25s both;
}

.vkg-page .hero-title .outline,
.vkg-page .section-title .outline {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px var(--vkg-white);
  display: inline-block;
}

.vkg-page .hero-subtitle {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--vkg-silver);
  margin-bottom: 2.5rem;
  animation: vkg-fadeUp 0.7s ease 0.38s both;
}

.vkg-page .hero-subtitle strong { color: var(--vkg-white); }

.vkg-page .hero-pillars {
  display: flex;
  justify-content: space-between;
  /* Largeur calée sur le bloc .hero-ctas pour aligner Discipline/gauche et Mental/droite
     avec le début/fin des boutons CTA. Utilise la variable définie dans .hero-content.
     fit-content garanti en fallback si la variable n'est pas définie. */
  width: var(--hero-cta-width, fit-content);
  gap: 2rem;
  margin-bottom: 3rem !important;
  animation: vkg-fadeUp 0.7s ease 0.5s both;
}

.vkg-page .pillar { display: flex; flex-direction: column; gap: 4px; }

.vkg-page .pillar-icon {
  width: 38px; height: 38px;
  border: 1px solid var(--vkg-border2);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 4px;
  transition: border-color 0.3s;
}

.vkg-page .pillar:hover .pillar-icon { border-color: var(--vkg-anthracite); }

.vkg-page .pillar-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--vkg-white);
}

.vkg-page .pillar-sub { font-size: 10px; color: var(--vkg-anthracite); }

.vkg-page .hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  width: fit-content;
  animation: vkg-fadeUp 0.7s ease 0.62s both;
}

@keyframes vkg-fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}

/* HERO VALEURS — desktop : hero agrandi de 40px pour révéler la tête de la photo */
.vkg-page .hero-valeurs {
  max-height: calc(100vh - 40px);
  min-height: calc(100vh - 40px);
}

/* HERO VALEURS — image en background-image (contourne le lazyload LWS Optimize qui
   sabote la balise <img> en convertissant src→data-src au chargement).
   Le crop est piloté par background-size + background-position. */
.vkg-page .hero-valeurs .hero-img-bg-valeurs {
  background-image: url('https://vkg-shop.com/wp-content/uploads/2026/05/photo-collection_VKG.webp');
  background-size: cover;
  background-position: 50% 60%;
  background-repeat: no-repeat;
  background-color: var(--vkg-black);
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 40px);
}

/* FIX Astra/WordPress : éliminer TOUS les espaces injectés entre la nav fixed et le hero
   sur les pages versionnées avec .vkg-page (Valeurs / Personnalisation / Contact).
   3 coupables identifiés via inspection DOM live :
   1. <header class="entry-header ast-no-title ast-no-thumbnail"> vide d'Astra
   2. <p></p> vide injecté par WordPress dans .entry-content (margin par défaut ~16-32px)
   3. padding-top potentiel sur .entry-content et .ast-article-single */
.entry-header.ast-no-title.ast-no-thumbnail {
  display: none !important;
}
.entry-content:has(.vkg-page) > p:empty,
.entry-content:has(.vkg-page) > p:first-child:not(:has(*)) {
  display: none !important;
  margin: 0 !important;
}
.entry-content:has(.vkg-page),
.ast-article-single:has(.vkg-page) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* HERO PERSONNALISATION (variations légères) */
.vkg-page .hero-perso .hero-content::before {
  content: 'CUSTOM';
  font-size: 360px;
}

.vkg-page .hero-perso .hero-img-placeholder {
  background: radial-gradient(ellipse at 60% 50%, #1e1e1e 0%, #0a0a0a 75%);
}

/* ALIGNEMENT PILIERS / CTAs — variables par page
   Principe : .hero-pillars prend exactement la même largeur que .hero-ctas
   grâce à --hero-cta-width défini sur .hero-content.
   Valeurs calibrées sur le contenu textuel réel des boutons (padding 14px 30px,
   font Barlow Condensed 11px letter-spacing 4px) + gap 12px entre les deux boutons.
   À ajuster si les libellés des boutons changent. */

/* Page Personnalisation : "DEMANDER UN DEVIS" + "VOIR LES PRODUITS"
   (deux boutons uppercase quasi égaux en largeur) */
.vkg-page .hero-perso .hero-content {
  --hero-cta-width: 400px;
}

/* Page Valeurs : pas de CTAs dans le hero — piliers calés sur 420px
   (alignés sur la largeur de référence de l'accueil pour cohérence visuelle inter-pages). */
.vkg-page .hero-valeurs .hero-content {
  --hero-cta-width: 420px;
}

/* SECTION POST-HERO (hero-below) — masquée sur desktop, visible uniquement mobile via section 17 */
.vkg-page .hero-below {
  display: none;
}
.vkg-page .hero-below-valeurs { display: none; }


/* ═══════════════════════════════════════════════════════════════════
   04. TICKER
   ═══════════════════════════════════════════════════════════════════ */

.vkg-page .ticker {
  background: var(--vkg-white);
  padding: 12px 0;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

.vkg-page .ticker-inner {
  display: inline-flex;
  gap: 2rem;
  animation: vkg-marquee 22s linear infinite;
}

@keyframes vkg-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.vkg-page .ticker-item {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--vkg-black);
  display: flex;
  align-items: center;
  gap: 14px;
}

.vkg-page .sep { color: #888; font-size: 7px; }


/* ═══════════════════════════════════════════════════════════════════
   05. COLLECTION (header titre + lien)
   ═══════════════════════════════════════════════════════════════════ */

.vkg-page .collection {
  padding: 6rem 4rem;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background: var(--vkg-black);
  color: var(--vkg-white);
}

.vkg-page .section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.vkg-page .section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(44px, 5vw, 66px);
  letter-spacing: 3px;
  color: var(--vkg-white);
  line-height: 1;
  margin: 0;
}

.vkg-page .section-link {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--vkg-anthracite);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.2s, color 0.2s;
}

.vkg-page .section-link:hover { gap: 14px; color: var(--vkg-white); }


/* ═══════════════════════════════════════════════════════════════════
   06. PUSH ACHAT
   ═══════════════════════════════════════════════════════════════════ */

.vkg-page .push-achat {
  background: var(--vkg-charcoal);
  border-top: 1px solid var(--vkg-border);
  border-bottom: 1px solid var(--vkg-border);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3rem;
  padding: 3.5rem 5rem;
  position: relative;
  overflow: hidden;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  color: var(--vkg-white);
}

.vkg-page .push-achat::before {
  content: 'WARRIOR';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 280px;
  color: rgba(255, 255, 255, 0.018);
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  letter-spacing: 10px;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.vkg-page .push-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--vkg-white);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
}

.vkg-page .push-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--vkg-white);
}

.vkg-page .push-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(42px, 4vw, 64px);
  letter-spacing: 2px;
  color: var(--vkg-white);
  line-height: 1;
  margin-bottom: 0.8rem;
}

.vkg-page .push-desc {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--vkg-silver);
  max-width: 480px;
  line-height: 1.7;
}

.vkg-page .push-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
  flex-shrink: 0;
}

.vkg-page .push-stock {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--vkg-red);
  display: flex;
  align-items: center;
  gap: 8px;
}

.vkg-page .push-stock::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vkg-red);
  animation: vkg-blink 1s ease-in-out infinite;
}

.vkg-page .push-ctas {
  display: flex;
  gap: 10px;
  margin-top: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}


/* ═══════════════════════════════════════════════════════════════════
   07. MANIFESTO
   ═══════════════════════════════════════════════════════════════════ */

.vkg-page .manifesto {
  padding: 7rem 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
  align-items: center;
  border-top: 1px solid var(--vkg-border);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background: var(--vkg-black);
  color: var(--vkg-white);
}

.vkg-page .manifesto-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--vkg-anthracite);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 1.5rem;
}

.vkg-page .manifesto-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--vkg-anthracite);
}

.vkg-page .manifesto-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 5.5vw, 82px);
  line-height: 0.92;
  letter-spacing: 2px;
  color: var(--vkg-white);
  margin-bottom: 1.75rem;
}

.vkg-page .manifesto-title em {
  font-style: normal;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.2px var(--vkg-white);
  display: inline-block;
}

.vkg-page .manifesto-body {
  font-size: 14px;
  color: var(--vkg-anthracite);
  line-height: 1.95;
  margin-bottom: 2rem;
}

.vkg-page .manifesto-body strong { color: var(--vkg-silver); }

/* Liens inline dans .manifesto-body (maillage interne SEO contextuel) */
.vkg-page .manifesto-body a {
  color: var(--vkg-silver);
  text-decoration: underline;
  text-decoration-color: var(--vkg-border2);
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.vkg-page .manifesto-body a:hover {
  color: var(--vkg-white);
  text-decoration-color: var(--vkg-red);
}

.vkg-page .manifesto-feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin-bottom: 2.5rem;
}

.vkg-page .mfeat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--vkg-silver);
}

.vkg-page .mfeat::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--vkg-border2);
  flex-shrink: 0;
}

.vkg-page .manifesto-visual { position: relative; }

.vkg-page .manifesto-img {
  width: 100%;
  aspect-ratio: 4/5;
  background: var(--vkg-charcoal);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vkg-page .manifesto-img-ph {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 110px;
  color: rgba(255, 255, 255, 0.04);
  letter-spacing: 8px;
}

.vkg-page .manifesto-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vkg-page .manifesto-img video,
.vkg-page .manifesto-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.vkg-page .manifesto-stat {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  background: var(--vkg-white);
  color: var(--vkg-black);
  padding: 1.5rem 2rem;
}

.vkg-page .stat-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 44px;
  line-height: 1;
  color: var(--vkg-black);
}

.vkg-page .stat-lbl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #666;
}


/* ═══════════════════════════════════════════════════════════════════
   08. ARGUMENTS (3 cellules par défaut, 4 sur page perso)
   ═══════════════════════════════════════════════════════════════════ */

.vkg-page .arguments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--vkg-border);
  gap: 1px;
  border-top: 1px solid var(--vkg-border);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 0;
}

.vkg-page .arguments .argument {
  background: var(--vkg-charcoal);
  padding: 3rem;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
  color: var(--vkg-white);
  margin: 0;
}

.vkg-page .arguments .argument:hover { background: var(--vkg-dark2); }

.vkg-page .arg-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  color: rgba(255, 255, 255, 0.04);
  position: absolute;
  top: -10px;
  right: 16px;
  line-height: 1;
  pointer-events: none;
}

.vkg-page .arg-icon {
  width: 42px;
  height: 42px;
  border: 1px solid var(--vkg-border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 1.25rem;
  transition: border-color 0.3s;
}

.vkg-page .argument:hover .arg-icon { border-color: var(--vkg-anthracite); }

.vkg-page .arg-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--vkg-white);
  margin-bottom: 0.75rem;
}

.vkg-page .arg-text {
  font-size: 13px;
  color: var(--vkg-anthracite);
  line-height: 1.8;
}

/* Page perso : 4 colonnes au lieu de 3 */
.vkg-page .vkg-perso-process {
  grid-template-columns: repeat(4, 1fr);
}


/* ═══════════════════════════════════════════════════════════════════
   09. ATHLÈTES
   ═══════════════════════════════════════════════════════════════════ */

.vkg-page .athletes {
  border-top: 1px solid var(--vkg-border);
  padding: 6rem 4rem;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background: var(--vkg-black);
  color: var(--vkg-white);
}

.vkg-page .athletes-header .section-title span {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--vkg-white);
}

.vkg-page .athletes-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  gap: 4px;
}

.vkg-page .ath-cell {
  background: var(--vkg-charcoal);
  overflow: hidden;
  position: relative;
  cursor: crosshair;
}

.vkg-page .ath-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.4s;
}

.vkg-page .ath-cell:hover img {
  transform: scale(1.06);
  filter: brightness(0.7);
}

.vkg-page .ath-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}

.vkg-page .ath-cell:hover .ath-overlay { opacity: 1; }

.vkg-page .ath-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--vkg-white);
}

.vkg-page .ath-ph {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, #1e1e1e 0%, #0e0e0e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vkg-page .ath-ph-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.04);
  letter-spacing: 4px;
}

.vkg-page .ath-a { grid-column: 1/6;  grid-row: 1; aspect-ratio: 4/3; }
.vkg-page .ath-b { grid-column: 6/9;  grid-row: 1; }
.vkg-page .ath-c { grid-column: 9/13; grid-row: 1; aspect-ratio: 4/3; }
.vkg-page .ath-d { grid-column: 1/4;  grid-row: 2; aspect-ratio: 3/4; }
.vkg-page .ath-e { grid-column: 4/9;  grid-row: 2; }
.vkg-page .ath-f { grid-column: 9/13; grid-row: 2; aspect-ratio: 3/4; }

.vkg-page .athletes-quote {
  margin-top: 3rem;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3.5vw, 48px);
  letter-spacing: 3px;
  color: var(--vkg-border2);
}

.vkg-page .athletes-quote span { color: var(--vkg-white); }

/* Paragraphe contextuel "support" sous l'athletes-quote (maillage interne SEO) */
.vkg-page .athletes-contact {
  margin-top: 1.25rem;
  text-align: center;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  color: var(--vkg-anthracite);
  line-height: 1.7;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.vkg-page .athletes-contact a {
  color: var(--vkg-silver);
  text-decoration: underline;
  text-decoration-color: var(--vkg-border2);
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.vkg-page .athletes-contact a:hover {
  color: var(--vkg-white);
  text-decoration-color: var(--vkg-red);
}


/* ═══════════════════════════════════════════════════════════════════
   10. FEAT BAR
   ═══════════════════════════════════════════════════════════════════ */

.vkg-page .feat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--vkg-border);
  gap: 1px;
  border-top: 1px solid var(--vkg-border);
  border-bottom: 1px solid var(--vkg-border);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 0;
}

.vkg-page .feat-bar .feat-cell {
  background: var(--vkg-charcoal);
  padding: 2rem 2.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: background 0.25s;
  color: var(--vkg-white);
  margin: 0;
}

.vkg-page .feat-bar .feat-cell:hover { background: var(--vkg-dark2); }

.vkg-page .feat-icon {
  font-size: 20px;
  opacity: 0.7;
  flex-shrink: 0;
}

.vkg-page .feat-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--vkg-white);
  margin-bottom: 2px;
}

.vkg-page .feat-sub {
  font-size: 10px;
  color: var(--vkg-anthracite);
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════
   11. WOOCOMMERCE — GRILLE PRODUITS DESKTOP (.vkg-page accueil)
   ═══════════════════════════════════════════════════════════════════ */

.vkg-page ul.products,
.vkg-page .woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--vkg-border);
  margin: 0;
  padding: 1px;
  list-style: none;
}

.vkg-page ul.products li.product,
.vkg-page .woocommerce ul.products li.product {
  background: var(--vkg-charcoal);
  margin: 0;
  padding: 1.25rem;
  width: auto;
  float: none;
  text-align: left;
  transition: background 0.25s ease;
}

.vkg-page ul.products li.product:hover,
.vkg-page .woocommerce ul.products li.product:hover {
  background: var(--vkg-dark2);
}

.vkg-page ul.products li.product img,
.vkg-page .woocommerce ul.products li.product img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  background: var(--vkg-dark2);
  margin: 0 0 1rem 0;
  transition: transform 0.4s ease;
}

.vkg-page ul.products li.product:hover img { transform: scale(1.04); }

.vkg-page ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vkg-white);
  padding: 0;
  margin: 0 0 8px 0;
}

.vkg-page ul.products li.product .price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--vkg-white);
  padding: 0;
  margin: 0 0 12px 0;
}

.vkg-page ul.products li.product .price del {
  color: var(--vkg-anthracite);
  font-size: 16px;
}

.vkg-page ul.products li.product .button,
.vkg-page ul.products li.product a.button,
.vkg-page ul.products li.product .added_to_cart {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--vkg-white);
  color: var(--vkg-black);
  border: none;
  border-radius: 0;
  padding: 10px 18px;
  margin: 0;
  transition: background 0.2s;
}

.vkg-page ul.products li.product .button:hover { background: var(--vkg-silver); }

.vkg-page span.onsale {
  background: var(--vkg-red) !important;
  color: var(--vkg-white) !important;
  border-radius: 0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  min-height: auto !important;
  line-height: 1 !important;
  padding: 6px 10px !important;
  top: 12px !important;
  left: 12px !important;
  right: auto !important;
}


/* ═══════════════════════════════════════════════════════════════════
   11-bis. SLIDER FEATURED PRODUITS — Page Accueil (#vkg-featured-slider)
   Wraps the WooCommerce ul.products shortcode in a custom JS slider.
   4 visible desktop / 2 tablet / 1 mobile. Arrows + autoplay.
   Does NOT touch existing card styles (sections 11 + 19 untouched).
   SPÉCIFICITÉ RENFORCÉE : #vkg-featured-slider + .columns-4 pour battre
   le CSS natif WooCommerce/Astra qui cible ul.products.columns-4.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Container principal ── */
#vkg-featured-slider.vkg-product-slider,
.vkg-page .vkg-product-slider#vkg-featured-slider {
  position: relative;
  overflow: hidden;
}

/* ── Override grille WooCommerce → piste flex ──
   Cible toutes les variantes de classe générées par WooCommerce :
   ul.products, ul.products.columns-4, ul.products.columns-3, etc.
   Spécificité : (1,3,1) + !important → imbattable ── */
#vkg-featured-slider ul.products,
#vkg-featured-slider ul.products.columns-4,
#vkg-featured-slider ul.products.columns-3,
.vkg-page #vkg-featured-slider ul.products,
.vkg-page #vkg-featured-slider ul.products.columns-4 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  overflow: visible !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  width: auto !important;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Chaque carte : 25% du container visible (= 4 cartes côte à côte) ──
   Note : le JS calcule le déplacement en % pour éviter toute dépendance
   à offsetWidth (plus robuste que les px). ── */
#vkg-featured-slider ul.products li.product,
#vkg-featured-slider ul.products.columns-4 li.product,
.vkg-page #vkg-featured-slider ul.products li.product,
.vkg-page #vkg-featured-slider ul.products.columns-4 li.product {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  min-width: 25% !important;
  width: 25% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 1.25rem !important;
  border-right: 1px solid var(--vkg-border) !important;
  scroll-snap-align: unset !important;
  float: none !important;
}

#vkg-featured-slider ul.products li.product:last-child,
.vkg-page #vkg-featured-slider ul.products li.product:last-child {
  border-right: none !important;
}

/* ── Flèches custom ── */
.vkg-page .vkg-product-slider .vkg-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(8, 8, 8, 0.78);
  border: 1px solid var(--vkg-border2);
  border-radius: 0;
  color: var(--vkg-silver);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: crosshair;
  transition: background 0.22s ease-out, color 0.22s ease-out, border-color 0.22s ease-out;
  padding: 0;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.vkg-page .vkg-product-slider .vkg-slider-arrow:hover,
.vkg-page .vkg-product-slider .vkg-slider-arrow:focus-visible {
  background: var(--vkg-charcoal);
  color: var(--vkg-white);
  border-color: var(--vkg-red);
}

.vkg-page .vkg-product-slider .vkg-slider-arrow.prev {
  left: 0;
}

.vkg-page .vkg-product-slider .vkg-slider-arrow.next {
  right: 0;
}

/* ── Tablette ≤1024px : 2 cartes visibles ── */
@media (max-width: 1024px) {
  #vkg-featured-slider ul.products li.product,
  #vkg-featured-slider ul.products.columns-4 li.product,
  .vkg-page #vkg-featured-slider ul.products li.product,
  .vkg-page #vkg-featured-slider ul.products.columns-4 li.product {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    min-width: 50% !important;
    width: 50% !important;
  }

  .vkg-page .vkg-product-slider .vkg-slider-arrow {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

/* ── Mobile ≤768px : scroll horizontal NATIF CSS (scroll-snap)
   Le slider JS est désactivé côté JS (initSlider() retourne immédiatement).
   On laisse le browser gérer le swipe avec inertie native iOS/Android.
   Les flèches sont masquées (scroll natif suffit).
   L'indicateur "faites glisser" de la section 19 reste actif (via .collection::after).
── */
@media (max-width: 768px) {
  /* Container : on autorise le scroll interne (pas overflow:hidden) */
  #vkg-featured-slider.vkg-product-slider,
  .vkg-page #vkg-featured-slider.vkg-product-slider {
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Piste : scroll horizontal natif + snap */
  #vkg-featured-slider ul.products,
  #vkg-featured-slider ul.products.columns-4,
  .vkg-page #vkg-featured-slider ul.products,
  .vkg-page #vkg-featured-slider ul.products.columns-4 {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    /* Autoriser le pan horizontal natif (annule touch-action: pan-y du desktop) */
    touch-action: pan-x pan-y !important;
    /* Annuler le transform JS résiduel */
    transform: none !important;
    transition: none !important;
    width: 100% !important;
    padding: 0 0 1rem 0 !important;
    gap: 12px !important;
  }

  #vkg-featured-slider ul.products::-webkit-scrollbar,
  .vkg-page #vkg-featured-slider ul.products::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }

  /* Chaque carte : 85% du viewport → peek sur la suivante */
  #vkg-featured-slider ul.products li.product,
  #vkg-featured-slider ul.products.columns-4 li.product,
  .vkg-page #vkg-featured-slider ul.products li.product,
  .vkg-page #vkg-featured-slider ul.products.columns-4 li.product {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    min-width: 85% !important;
    width: 85% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    border-right: none !important;
  }

  /* Masquer les flèches JS sur mobile (scroll natif suffit) */
  .vkg-page .vkg-product-slider .vkg-slider-arrow {
    display: none !important;
  }

  /* L'indicateur "faites glisser" est géré par la section 19 (.collection::after).
     Ne pas le masquer ici — on le laisse actif. */
}


/* ═══════════════════════════════════════════════════════════════════
   12. WOOCOMMERCE — PAGE BOUTIQUE (/boutique/)
   ═══════════════════════════════════════════════════════════════════ */

body.woocommerce.archive,
body.woocommerce-page.archive,
body.post-type-archive-product { background: var(--vkg-black); }

.woocommerce.archive .site-content,
.post-type-archive-product .site-content { background: var(--vkg-black); }

.woocommerce-breadcrumb {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: var(--vkg-anthracite) !important;
  padding: 2rem 4rem 0 !important;
  margin-bottom: 2rem !important;
  border: none !important;
}

.woocommerce-breadcrumb a {
  color: var(--vkg-silver) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.woocommerce-breadcrumb a:hover { color: var(--vkg-white) !important; }

.woocommerce-products-header__title.page-title,
.woocommerce-products-header h1,
.post-type-archive-product .entry-title,
.archive.woocommerce h1.page-title {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(64px, 8vw, 120px) !important;
  letter-spacing: 4px !important;
  color: var(--vkg-white) !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin: 0 4rem 3rem !important;
  padding: 0 !important;
}

.woocommerce .woocommerce-result-count {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--vkg-anthracite) !important;
  margin: 0 0 0 4rem !important;
  padding: 1rem 0 !important;
  float: left !important;
}

.woocommerce .woocommerce-ordering {
  margin: 0 4rem 0 0 !important;
  padding: 0.5rem 0 !important;
  float: right !important;
}

.woocommerce .woocommerce-ordering select {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  background: var(--vkg-charcoal) !important;
  color: var(--vkg-white) !important;
  border: 1px solid var(--vkg-border2) !important;
  border-radius: 0 !important;
  padding: 10px 32px 10px 14px !important;
  cursor: crosshair !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath fill='%23e6e6e6' d='M4 6L0 0h8z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 8px !important;
}

.woocommerce.archive ul.products,
.post-type-archive-product ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important;
  background: var(--vkg-border) !important;
  margin: 2rem 4rem !important;
  padding: 1px !important;
  list-style: none !important;
  clear: both !important;
}

.woocommerce.archive ul.products li.product,
.post-type-archive-product ul.products li.product {
  background: var(--vkg-charcoal) !important;
  margin: 0 !important;
  padding: 1.25rem !important;
  width: auto !important;
  float: none !important;
  text-align: left !important;
  transition: background 0.25s ease !important;
  border: none !important;
  box-shadow: none !important;
}

.woocommerce.archive ul.products li.product:hover,
.post-type-archive-product ul.products li.product:hover {
  background: var(--vkg-dark2) !important;
}

.woocommerce.archive ul.products li.product img,
.post-type-archive-product ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 3/4 !important;
  object-fit: cover !important;
  background: var(--vkg-dark2) !important;
  margin: 0 0 1rem 0 !important;
  border-radius: 0 !important;
  transition: transform 0.4s ease !important;
}

.woocommerce.archive ul.products li.product:hover img { transform: scale(1.04) !important; }

.woocommerce.archive ul.products li.product .woocommerce-loop-product__title,
.woocommerce.archive ul.products li.product h2,
.woocommerce.archive ul.products li.product h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--vkg-white) !important;
  padding: 0 !important;
  margin: 0 0 8px 0 !important;
  background: transparent !important;
  line-height: 1.3 !important;
}

.woocommerce.archive ul.products li.product .price,
.post-type-archive-product ul.products li.product .price {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 22px !important;
  letter-spacing: 2px !important;
  color: var(--vkg-white) !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  display: block !important;
}

.woocommerce.archive ul.products li.product .price del { color: var(--vkg-anthracite) !important; font-size: 16px !important; margin-right: 8px !important; }

.woocommerce.archive ul.products li.product .button,
.woocommerce.archive ul.products li.product a.button,
.woocommerce.archive ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .button {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  background: var(--vkg-white) !important;
  color: var(--vkg-black) !important;
  border: 2px solid var(--vkg-white) !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
  display: inline-block !important;
  text-decoration: none !important;
  cursor: crosshair !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.woocommerce.archive ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
  background: transparent !important;
  color: var(--vkg-white) !important;
  border-color: var(--vkg-white) !important;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination {
  text-align: center !important;
  padding: 3rem 0 !important;
  border: none !important;
}

.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
  display: inline-flex !important;
  gap: 4px !important;
}

.woocommerce nav.woocommerce-pagination ul li { border: none !important; margin: 0 !important; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  background: var(--vkg-charcoal) !important;
  color: var(--vkg-silver) !important;
  border: 1px solid var(--vkg-border2) !important;
  padding: 12px 18px !important;
  border-radius: 0 !important;
  transition: all 0.2s ease !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--vkg-white) !important;
  color: var(--vkg-black) !important;
  border-color: var(--vkg-white) !important;
}

/* ─ Pages WooCommerce — compensation header fixe sur main#main ─
   Boutique + Catégories produit + Fiche produit + Panier + Checkout + Mon compte.
   On cible UNIQUEMENT main#main (pas .site-content) pour éviter le double
   décalage : .site-content est un ancêtre de main#main dans la structure
   Astra (div.site-content > div.ast-container > div#primary > main#main).
   Valeur = 109px = hauteur exacte de la nav fixed (validée).
   Les catégories (FEMME, HOMME…) ont les classes body `woocommerce` + `archive`
   → couvertes par body.woocommerce.archive. ─ */
body.single-product main#main,
body.woocommerce.archive main#main,
body.post-type-archive-product main#main,
body.woocommerce-cart main#main,
body.woocommerce-checkout main#main,
body.woocommerce-account main#main {
  padding-top: 109px !important;
}

/* ─ Bandeau "Livraison offerte dès 80€" — pages Boutique + Fiche produit
     Injecté en CSS via ::before sur le fil d'Ariane (présent sur les 2 pages) ─ */
.woocommerce.archive .woocommerce-breadcrumb::before,
.post-type-archive-product .woocommerce-breadcrumb::before,
body.single-product .woocommerce-breadcrumb::before {
  content: "✦ LIVRAISON OFFERTE DÈS 80€ D'ACHAT ✦";
  display: block;
  background: var(--vkg-red);
  color: var(--vkg-white);
  padding: 14px 1rem;
  margin: -2rem calc(50% - 50vw) 2rem;
  width: 100vw;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  box-sizing: border-box;
}


/* ─ Bloc d'intro SEO — Page Boutique /boutique/ ─
     Injecté via bloc HTML personnalisé Gutenberg.
     Scopé par body.woocommerce.archive (pas de .vkg-page ici). ─ */

.woocommerce.archive .vkg-boutique-intro,
.post-type-archive-product .vkg-boutique-intro {
  margin: 0 4rem 3rem;
}

/* H2 présent dans le DOM pour les crawlers et les screen readers,
   invisible visuellement. Technique position:-9999px (compatible WebKit/iOS). */
.woo-intro-sr {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Image bannière */
.woocommerce.archive .vkg-boutique-cover,
.post-type-archive-product .vkg-boutique-cover {
  margin: 0 0 2rem;
  padding: 0;
  display: block;
}

.woocommerce.archive .vkg-boutique-cover img,
.post-type-archive-product .vkg-boutique-cover img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center;
  display: block;
  border: none;
  border-radius: 0;
  background: var(--vkg-charcoal);
}

/* Corps texte en 2 colonnes desktop */
.woocommerce.archive .vkg-boutique-intro-body,
.post-type-archive-product .vkg-boutique-intro-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.woocommerce.archive .vkg-boutique-intro-body p,
.post-type-archive-product .vkg-boutique-intro-body p {
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--vkg-silver);
  margin: 0;
  padding: 0;
}

.woocommerce.archive .vkg-boutique-intro-body strong,
.post-type-archive-product .vkg-boutique-intro-body strong {
  color: var(--vkg-white);
  font-weight: 600;
}

.woocommerce.archive .vkg-boutique-intro-body a,
.post-type-archive-product .vkg-boutique-intro-body a {
  color: var(--vkg-silver);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.22s ease-out;
}

.woocommerce.archive .vkg-boutique-intro-body a:hover,
.post-type-archive-product .vkg-boutique-intro-body a:hover {
  color: var(--vkg-white);
  text-decoration-color: var(--vkg-red);
}

@media (max-width: 1024px) {
  .woocommerce.archive .vkg-boutique-intro,
  .post-type-archive-product .vkg-boutique-intro {
    margin: 0 2rem 2.5rem;
  }
}

@media (max-width: 768px) {
  .woocommerce.archive .vkg-boutique-intro,
  .post-type-archive-product .vkg-boutique-intro {
    margin: 0 1.25rem 2rem;
  }

  .woocommerce.archive .vkg-boutique-cover img,
  .post-type-archive-product .vkg-boutique-cover img {
    height: 180px;
  }

  .woocommerce.archive .vkg-boutique-intro-body,
  .post-type-archive-product .vkg-boutique-intro-body {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ─ Tableaux dans descriptions produit WooCommerce (size charts, comparaisons)
     Cible : onglet Description (fiche produit) + description courte + .entry-content
     Charte VKG : fond sombre, bordures var(--vkg-border), typo Barlow, angles droits. ─ */

.woocommerce-Tabs-panel--description table,
.woocommerce-tabs .panel table,
.woocommerce-product-details__short-description table,
.entry-content table,
.vkg-page table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--vkg-border);
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 1.5rem 0;
  background: transparent;
}

.woocommerce-Tabs-panel--description table th,
.woocommerce-tabs .panel table th,
.woocommerce-product-details__short-description table th,
.entry-content table th,
.vkg-page table th {
  background: var(--vkg-black);
  color: var(--vkg-white);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--vkg-border);
  text-align: left;
}

.woocommerce-Tabs-panel--description table td,
.woocommerce-tabs .panel table td,
.woocommerce-product-details__short-description table td,
.entry-content table td,
.vkg-page table td {
  color: var(--vkg-silver);
  padding: 0.75rem 1rem;
  border: 1px solid var(--vkg-border);
  vertical-align: middle;
}

/* Zebra striping : légère alternance pour la lisibilité */
.woocommerce-Tabs-panel--description table tr:nth-child(even) td,
.woocommerce-tabs .panel table tr:nth-child(even) td,
.woocommerce-product-details__short-description table tr:nth-child(even) td,
.entry-content table tr:nth-child(even) td,
.vkg-page table tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.025);
}

/* Hover sur les lignes */
.woocommerce-Tabs-panel--description table tr:hover td,
.woocommerce-tabs .panel table tr:hover td,
.woocommerce-product-details__short-description table tr:hover td,
.entry-content table tr:hover td,
.vkg-page table tr:hover td {
  background: rgba(255, 255, 255, 0.05);
  color: var(--vkg-white);
  transition: background 0.18s ease, color 0.18s ease;
}

/* Mobile (≤768px) : scroll horizontal si la table est trop large */
@media (max-width: 768px) {
  .woocommerce-Tabs-panel--description,
  .woocommerce-product-details__short-description {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .woocommerce-Tabs-panel--description table,
  .woocommerce-tabs .panel table,
  .woocommerce-product-details__short-description table,
  .entry-content table,
  .vkg-page table {
    font-size: 12px;
    min-width: 420px;
  }

  .woocommerce-Tabs-panel--description table th,
  .woocommerce-tabs .panel table th,
  .woocommerce-product-details__short-description table th,
  .entry-content table th,
  .vkg-page table th {
    font-size: 10px;
    padding: 0.6rem 0.75rem;
    letter-spacing: 2px;
  }

  .woocommerce-Tabs-panel--description table td,
  .woocommerce-tabs .panel table td,
  .woocommerce-product-details__short-description table td,
  .entry-content table td,
  .vkg-page table td {
    padding: 0.6rem 0.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   13. WPFORMS — PAGE CONTACT (générique)
   ═══════════════════════════════════════════════════════════════════ */

.vkg-page .wpforms-container,
.vkg-page .wpforms-form {
  background: transparent !important;
  color: var(--vkg-white) !important;
  font-family: 'Barlow', sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}

.vkg-page .wpforms-form fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
  background: transparent !important;
}

.vkg-page .wpforms-form fieldset legend {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--vkg-anthracite) !important;
  padding: 0 !important;
  margin: 0 0 1rem 0 !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
}

.vkg-page .wpforms-form .wpforms-field {
  padding: 0 !important;
  margin: 0 0 1.75rem 0 !important;
  background: transparent !important;
}

/* Champ Nom WPForms — sous-inputs Prénom + Nom côte-à-côte (desktop)
   ⚠️ WPForms Modern Markup scope ses règles avec #wpforms-{ID} (spécificité 1,1,0)
   On contre en chaînant plusieurs classes WPForms (.wpforms-render-modern,
   .wpforms-one-half, .wpforms-first) pour remonter la spécificité au-dessus. */
.vkg-page .wpforms-form .wpforms-field-name { display: block !important; }
.vkg-page .wpforms-render-modern .wpforms-field-name { display: block !important; }

.vkg-page .wpforms-form .wpforms-field-name fieldset .wpforms-field-row,
.vkg-page .wpforms-render-modern .wpforms-field-name fieldset .wpforms-field-row,
.vkg-page .wpforms-form .wpforms-field-name .wpforms-field-row.wpforms-field-medium,
.vkg-page .wpforms-render-modern .wpforms-field-name .wpforms-field-row.wpforms-field-medium {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  width: 100% !important;
  margin: 0 !important;
}

.vkg-page .wpforms-form .wpforms-field-name .wpforms-field-row-block.wpforms-one-half,
.vkg-page .wpforms-render-modern .wpforms-field-name .wpforms-field-row-block.wpforms-one-half,
.vkg-page .wpforms-form .wpforms-field-name .wpforms-field-row-block.wpforms-first,
.vkg-page .wpforms-render-modern .wpforms-field-name .wpforms-field-row-block.wpforms-first {
  flex: 1 1 0 !important;
  width: calc(50% - 0.5rem) !important;
  max-width: calc(50% - 0.5rem) !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.vkg-page .wpforms-form .wpforms-field-name .wpforms-field-row-block input,
.vkg-page .wpforms-render-modern .wpforms-field-name .wpforms-field-row-block input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.vkg-page .wpforms-form label,
.vkg-page .wpforms-form .wpforms-field-label,
.vkg-page .wpforms-form .wpforms-field-sublabel {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--vkg-anthracite) !important;
  display: block !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.vkg-page .wpforms-form .wpforms-required-label { color: var(--vkg-red) !important; }

.vkg-page .wpforms-form input[type="text"],
.vkg-page .wpforms-form input[type="email"],
.vkg-page .wpforms-form input[type="tel"],
.vkg-page .wpforms-form input[type="url"],
.vkg-page .wpforms-form input[type="number"],
.vkg-page .wpforms-form input[type="password"],
.vkg-page .wpforms-form select {
  width: 100% !important;
  background: transparent !important;
  color: var(--vkg-white) !important;
  border: none !important;
  border-bottom: 1px solid var(--vkg-border2) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.25s ease !important;
  min-height: auto !important;
  max-width: 100% !important;
}

.vkg-page .wpforms-form input:focus,
.vkg-page .wpforms-form select:focus {
  border-bottom-color: var(--vkg-white) !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.vkg-page .wpforms-form input::placeholder {
  color: var(--vkg-border2) !important;
  font-family: 'Barlow', sans-serif !important;
}

.vkg-page .wpforms-form textarea {
  width: 100% !important;
  background: transparent !important;
  color: var(--vkg-white) !important;
  border: 1px solid var(--vkg-border2) !important;
  border-radius: 0 !important;
  padding: 14px !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  outline: none !important;
  box-shadow: none !important;
  resize: vertical !important;
  min-height: 140px !important;
  transition: border-color 0.25s ease !important;
  line-height: 1.6 !important;
}

.vkg-page .wpforms-form textarea:focus {
  border-color: var(--vkg-white) !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.vkg-page .wpforms-form textarea::placeholder { color: var(--vkg-border2) !important; }

.vkg-page .wpforms-form button[type="submit"],
.vkg-page .wpforms-form .wpforms-submit {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  background: var(--vkg-white) !important;
  color: var(--vkg-black) !important;
  border: 2px solid var(--vkg-white) !important;
  border-radius: 0 !important;
  padding: 14px 30px !important;
  margin: 1rem 0 0 0 !important;
  width: 100% !important;
  cursor: crosshair !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  text-shadow: none !important;
  min-height: auto !important;
  display: inline-block !important;
  text-align: center !important;
}

.vkg-page .wpforms-form button[type="submit"]:hover,
.vkg-page .wpforms-form .wpforms-submit:hover {
  background: transparent !important;
  color: var(--vkg-white) !important;
  border-color: var(--vkg-white) !important;
}

.vkg-page .wpforms-confirmation-container,
.vkg-page .wpforms-confirmation-container-full {
  background: var(--vkg-charcoal) !important;
  border: none !important;
  border-left: 3px solid var(--vkg-white) !important;
  color: var(--vkg-white) !important;
  padding: 1.5rem !important;
  border-radius: 0 !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
}

.vkg-page .wpforms-form .wpforms-error,
.vkg-page .wpforms-form label.wpforms-error {
  color: var(--vkg-red) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
}

.vkg-page .wpforms-form input.wpforms-error,
.vkg-page .wpforms-form textarea.wpforms-error,
.vkg-page .wpforms-form select.wpforms-error { border-color: var(--vkg-red) !important; }


/* ═══════════════════════════════════════════════════════════════════
   14. PAGE PERSONNALISATION — Catégories + Statement
   ═══════════════════════════════════════════════════════════════════ */

/* Section conteneur grille catégories */
.vkg-page .vkg-perso-categories {
  background: var(--vkg-black);
  padding: 6rem 4rem;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  border-top: 1px solid var(--vkg-border);
}

/* Grille 4 colonnes desktop (8 cartes : 4×2) */
.vkg-page .vkg-perso-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--vkg-border);
  padding: 1px;
}

.vkg-page .vkg-perso-card {
  background: var(--vkg-charcoal);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: background 0.25s ease;
  cursor: crosshair;
  position: relative;
  overflow: hidden;
  min-height: 280px;
}

.vkg-page .vkg-perso-card:hover { background: var(--vkg-dark2); }

.vkg-page .vkg-perso-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: radial-gradient(ellipse at center, #1c1c1c 0%, #0c0c0c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vkg-border);
  position: relative;
  overflow: hidden;
}

.vkg-page .vkg-perso-card-icon {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 80px;
  color: rgba(255, 255, 255, 0.06);
  letter-spacing: 4px;
  transition: color 0.3s ease, transform 0.4s ease;
  user-select: none;
}

.vkg-page .vkg-perso-card:hover .vkg-perso-card-icon {
  color: rgba(255, 255, 255, 0.12);
  transform: scale(1.1);
}

.vkg-page .vkg-perso-card-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--vkg-anthracite);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vkg-page .vkg-perso-card-tag::before {
  content: '';
  width: 12px;
  height: 1px;
  background: var(--vkg-anthracite);
  display: inline-block;
}

.vkg-page .vkg-perso-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: 3px;
  color: var(--vkg-white);
  margin: 0;
  line-height: 1;
}

.vkg-page .vkg-perso-card-desc {
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  color: var(--vkg-anthracite);
  line-height: 1.7;
  margin: 0;
}

/* Note sous la grille */
.vkg-page .vkg-perso-grid-note {
  margin: 3rem 0 0 0;
  padding: 1.5rem 2rem;
  text-align: center;
  background: var(--vkg-charcoal);
  border: 1px solid var(--vkg-border);
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  color: var(--vkg-silver);
  line-height: 1.7;
}

.vkg-page .vkg-perso-grid-note span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--vkg-white);
  margin-right: 8px;
}

/* Section statement fort */
.vkg-page .vkg-perso-statement {
  background: var(--vkg-charcoal);
  padding: 6rem 4rem;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  text-align: center;
  border-top: 1px solid var(--vkg-border);
  border-bottom: 1px solid var(--vkg-border);
  position: relative;
  overflow: hidden;
}

.vkg-page .vkg-perso-statement::before {
  content: 'CUSTOM';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 320px;
  color: rgba(255, 255, 255, 0.018);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  letter-spacing: 16px;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
}

.vkg-page .vkg-perso-statement-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(48px, 6vw, 96px);
  letter-spacing: 4px;
  color: var(--vkg-white);
  line-height: 0.95;
  margin: 0 0 1.5rem 0;
  position: relative;
  z-index: 1;
}

.vkg-page .vkg-perso-statement-text span {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--vkg-white);
}

.vkg-page .vkg-perso-statement-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--vkg-anthracite);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Section formulaire wrapper */
.vkg-page .vkg-perso-form-section {
  background: var(--vkg-black);
  padding: 6rem 4rem;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  border-top: 1px solid var(--vkg-border);
}

.vkg-page .vkg-perso-form-wrap {
  max-width: 800px;
  margin: 0 auto;
}

.vkg-page .vkg-perso-form-header {
  text-align: center;
  margin-bottom: 3rem;
}

.vkg-page .vkg-perso-form-header .manifesto-eyebrow { justify-content: center; }
.vkg-page .vkg-perso-form-header .manifesto-eyebrow::before { display: none; }

.vkg-page .vkg-perso-form-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: 3px;
  color: var(--vkg-white);
  line-height: 0.95;
  margin: 1rem 0 1.25rem 0;
  text-transform: uppercase;
}

.vkg-page .vkg-perso-form-intro {
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  color: var(--vkg-silver);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

.vkg-page .vkg-perso-form-body {
  background: var(--vkg-charcoal);
  border: 1px solid var(--vkg-border);
  padding: 3rem;
  margin-bottom: 2rem;
}

/* Fallback section */
.vkg-page .vkg-perso-form-fallback {
  text-align: center;
  padding: 2rem 0 0 0;
  border-top: 1px solid var(--vkg-border);
  margin-top: 2rem;
}

.vkg-page .vkg-perso-form-fallback p {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--vkg-anthracite);
  margin: 0 0 0.5rem 0;
}

.vkg-page .vkg-perso-form-fallback-mail {
  font-family: 'Barlow', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  color: var(--vkg-silver) !important;
  margin: 0 0 1.5rem 0 !important;
}

.vkg-page .vkg-perso-form-fallback-mail a {
  color: var(--vkg-white);
  text-decoration: underline;
  text-decoration-color: var(--vkg-border2);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}

.vkg-page .vkg-perso-form-fallback-mail a:hover { text-decoration-color: var(--vkg-white); }

/* Paragraphe "explore" sous le fallback contact (maillage interne SEO) */
.vkg-page .vkg-perso-form-explore {
  margin: 1.5rem 0 0 0;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  color: var(--vkg-anthracite);
  line-height: 1.75;
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.vkg-page .vkg-perso-form-explore a {
  color: var(--vkg-silver);
  text-decoration: underline;
  text-decoration-color: var(--vkg-border2);
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.vkg-page .vkg-perso-form-explore a:hover {
  color: var(--vkg-white);
  text-decoration-color: var(--vkg-red);
}


/* ═══════════════════════════════════════════════════════════════════
   15. PAGE PERSONNALISATION — WPFORMS 743 (dans .vkg-perso-form-body)
   ═══════════════════════════════════════════════════════════════════ */

.vkg-perso-form-body .wpforms-container,
.vkg-perso-form-body .wpforms-form,
.vkg-perso-form-body div[id*="wpforms-743"] {
  background: transparent !important;
  color: var(--vkg-white) !important;
  font-family: 'Barlow', sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.vkg-perso-form-body .wpforms-form fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-field {
  padding: 0 !important;
  margin: 0 0 1.75rem 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Champ Nom (vkg-perso-form-body) — overrides spécifiques perso, alignés sur la
   stratégie de la section 13 (cible .wpforms-one-half + .wpforms-first pour battre
   le scope #wpforms-743 du Modern Markup). */
.vkg-perso-form-body .wpforms-form .wpforms-field-name,
.vkg-perso-form-body .wpforms-render-modern .wpforms-field-name { display: block !important; }

.vkg-perso-form-body .wpforms-form .wpforms-field-name fieldset .wpforms-field-row,
.vkg-perso-form-body .wpforms-render-modern .wpforms-field-name fieldset .wpforms-field-row,
.vkg-perso-form-body .wpforms-form .wpforms-field-name .wpforms-field-row.wpforms-field-medium,
.vkg-perso-form-body .wpforms-render-modern .wpforms-field-name .wpforms-field-row.wpforms-field-medium {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1rem !important;
  width: 100% !important;
  margin: 0 !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-field-name .wpforms-field-row-block.wpforms-one-half,
.vkg-perso-form-body .wpforms-render-modern .wpforms-field-name .wpforms-field-row-block.wpforms-one-half,
.vkg-perso-form-body .wpforms-form .wpforms-field-name .wpforms-field-row-block.wpforms-first,
.vkg-perso-form-body .wpforms-render-modern .wpforms-field-name .wpforms-field-row-block.wpforms-first {
  flex: 1 1 0 !important;
  width: calc(50% - 0.5rem) !important;
  max-width: calc(50% - 0.5rem) !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-field-name .wpforms-field-row-block input,
.vkg-perso-form-body .wpforms-render-modern .wpforms-field-name .wpforms-field-row-block input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Labels */
.vkg-perso-form-body .wpforms-form label.wpforms-field-label,
.vkg-perso-form-body .wpforms-form .wpforms-field-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--vkg-anthracite) !important;
  display: block !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.vkg-perso-form-body .wpforms-form label.wpforms-field-sublabel,
.vkg-perso-form-body .wpforms-form .wpforms-field-sublabel {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--vkg-anthracite) !important;
  margin-top: 6px !important;
  padding: 0 !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-required-label {
  color: var(--vkg-red) !important;
  margin-left: 4px !important;
}

/* Inputs text/email/tel/number/url */
.vkg-perso-form-body .wpforms-form input[type="text"],
.vkg-perso-form-body .wpforms-form input[type="email"],
.vkg-perso-form-body .wpforms-form input[type="tel"],
.vkg-perso-form-body .wpforms-form input[type="url"],
.vkg-perso-form-body .wpforms-form input[type="number"],
.vkg-perso-form-body .wpforms-form input[type="password"] {
  width: 100% !important;
  background: transparent !important;
  color: var(--vkg-white) !important;
  border: none !important;
  border-bottom: 1px solid var(--vkg-border2) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.25s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: auto !important;
  max-width: 100% !important;
}

.vkg-perso-form-body .wpforms-form input:focus { border-bottom-color: var(--vkg-white) !important; }
.vkg-perso-form-body .wpforms-form input::placeholder { color: var(--vkg-border2) !important; }

/* Selects (dropdowns) */
.vkg-perso-form-body .wpforms-form select {
  width: 100% !important;
  background: transparent !important;
  color: var(--vkg-white) !important;
  border: none !important;
  border-bottom: 1px solid var(--vkg-border2) !important;
  border-radius: 0 !important;
  padding: 12px 24px 12px 0 !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: crosshair !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23e6e6e6' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 4px center !important;
  background-size: 10px !important;
  min-height: auto !important;
  height: auto !important;
}

.vkg-perso-form-body .wpforms-form select:focus { border-bottom-color: var(--vkg-white) !important; }
.vkg-perso-form-body .wpforms-form select option {
  background: var(--vkg-charcoal) !important;
  color: var(--vkg-white) !important;
  padding: 12px !important;
}

/* Textarea */
.vkg-perso-form-body .wpforms-form textarea {
  width: 100% !important;
  background: transparent !important;
  color: var(--vkg-white) !important;
  border: 1px solid var(--vkg-border2) !important;
  border-radius: 0 !important;
  padding: 14px !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  outline: none !important;
  box-shadow: none !important;
  resize: vertical !important;
  min-height: 140px !important;
  line-height: 1.6 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.vkg-perso-form-body .wpforms-form textarea:focus { border-color: var(--vkg-white) !important; }
.vkg-perso-form-body .wpforms-form textarea::placeholder { color: var(--vkg-border2) !important; }

/* Checkboxes Type de produit en boutons swatch */
.vkg-perso-form-body .wpforms-form ul.wpforms-field-checkbox-style-default,
.vkg-perso-form-body .wpforms-form .wpforms-field-checkbox ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 8px 0 0 0 !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-field-checkbox ul li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  list-style: none !important;
  position: relative !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-field-checkbox input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-field-checkbox ul li label {
  display: block !important;
  padding: 12px 14px !important;
  background: var(--vkg-dark2) !important;
  border: 1px solid var(--vkg-border2) !important;
  color: var(--vkg-silver) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: crosshair !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-field-checkbox ul li label:hover {
  border-color: var(--vkg-silver) !important;
  color: var(--vkg-white) !important;
  background: var(--vkg-charcoal) !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-field-checkbox input[type="checkbox"]:checked + label {
  background: var(--vkg-white) !important;
  color: var(--vkg-black) !important;
  border-color: var(--vkg-white) !important;
}

/* File upload */
.vkg-perso-form-body .wpforms-form input[type="file"] {
  background: var(--vkg-dark2) !important;
  color: var(--vkg-silver) !important;
  border: 1px dashed var(--vkg-border2) !important;
  border-radius: 0 !important;
  padding: 14px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  cursor: crosshair !important;
  width: 100% !important;
}

.vkg-perso-form-body .wpforms-form input[type="file"]:hover {
  border-color: var(--vkg-silver) !important;
  background: var(--vkg-charcoal) !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-field-description {
  font-family: 'Barlow', sans-serif !important;
  font-size: 12px !important;
  color: var(--vkg-anthracite) !important;
  margin: 6px 0 0 0 !important;
  letter-spacing: 0.5px !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-uploader,
.vkg-perso-form-body .wpforms-form .modern-fileupload {
  background: var(--vkg-dark2) !important;
  border: 1px dashed var(--vkg-border2) !important;
  border-radius: 0 !important;
  color: var(--vkg-silver) !important;
  padding: 1.5rem !important;
  text-align: center !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Bouton submit */
.vkg-perso-form-body .wpforms-form button[type="submit"],
.vkg-perso-form-body .wpforms-form .wpforms-submit,
.vkg-perso-form-body .wpforms-form input[type="submit"] {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  background: var(--vkg-white) !important;
  color: var(--vkg-black) !important;
  border: 2px solid var(--vkg-white) !important;
  border-radius: 0 !important;
  padding: 16px 30px !important;
  margin: 1.5rem 0 0 0 !important;
  width: 100% !important;
  cursor: crosshair !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  text-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: auto !important;
  display: block !important;
  text-align: center !important;
}

.vkg-perso-form-body .wpforms-form button[type="submit"]:hover,
.vkg-perso-form-body .wpforms-form .wpforms-submit:hover {
  background: transparent !important;
  color: var(--vkg-white) !important;
  border-color: var(--vkg-white) !important;
}

/* Messages */
.vkg-perso-form-body .wpforms-confirmation-container,
.vkg-perso-form-body .wpforms-confirmation-container-full {
  background: var(--vkg-dark2) !important;
  border: none !important;
  border-left: 3px solid var(--vkg-white) !important;
  color: var(--vkg-white) !important;
  padding: 2rem !important;
  border-radius: 0 !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.vkg-perso-form-body .wpforms-confirmation-container strong {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--vkg-white) !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

.vkg-perso-form-body .wpforms-form .wpforms-error,
.vkg-perso-form-body .wpforms-form em.wpforms-error {
  color: var(--vkg-red) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
  font-style: normal !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.vkg-perso-form-body .wpforms-form input.wpforms-error,
.vkg-perso-form-body .wpforms-form textarea.wpforms-error,
.vkg-perso-form-body .wpforms-form select.wpforms-error {
  border-color: var(--vkg-red) !important;
  border-bottom-color: var(--vkg-red) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════════════════
   16. RESPONSIVE — TABLETTE (≤1024px)
   ═══════════════════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* HERO */
  .vkg-page .hero { grid-template-columns: 1fr; min-height: auto; }
  .vkg-page .hero-media { min-height: 50vh; height: 50vh; clip-path: none; }
  .vkg-page .hero-img-wrap,
  .vkg-page .hero-img-placeholder { min-height: 50vh; }
  .vkg-page .hero-content { padding: 4rem 2.5rem; --hero-cta-width: 100%; }
  .vkg-page .hero-title { font-size: clamp(56px, 9vw, 90px); }
  .vkg-page .hero-content::before { font-size: 280px; }

  /* Collection / sections génériques */
  .vkg-page .collection { padding: 4rem 2rem; }
  .vkg-page .section-title { font-size: clamp(38px, 6vw, 54px); }

  /* Grille produits */
  .vkg-page ul.products,
  .vkg-page .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }

  /* Push achat */
  .vkg-page .push-achat { grid-template-columns: 1fr; padding: 3rem 2rem; }
  .vkg-page .push-right { align-items: flex-start; }
  .vkg-page .push-title { font-size: clamp(34px, 5vw, 50px); }

  /* Feat bar */
  .vkg-page .feat-bar { grid-template-columns: repeat(2, 1fr); }

  /* Manifesto */
  .vkg-page .manifesto { grid-template-columns: 1fr; gap: 4rem; padding: 4rem 2rem; }
  .vkg-page .manifesto-title { font-size: clamp(42px, 6vw, 64px); }
  .vkg-page .manifesto-img { aspect-ratio: 16/9; }

  /* Arguments */
  .vkg-page .arguments { grid-template-columns: 1fr; }

  /* Athlètes */
  .vkg-page .athletes { padding: 4rem 2rem; }
  .vkg-page .athletes-grid { grid-template-columns: repeat(6, 1fr); }
  .vkg-page .ath-a, .vkg-page .ath-b,
  .vkg-page .ath-c, .vkg-page .ath-d,
  .vkg-page .ath-e, .vkg-page .ath-f { aspect-ratio: 4/3; }
  .vkg-page .ath-a { grid-column: 1/4; }
  .vkg-page .ath-b { grid-column: 4/7; }
  .vkg-page .ath-c { grid-column: 1/4; }
  .vkg-page .ath-d { grid-column: 4/7; }
  .vkg-page .ath-e { grid-column: 1/4; }
  .vkg-page .ath-f { grid-column: 4/7; }
  .vkg-page .athletes-quote { font-size: clamp(20px, 3vw, 32px); }

  /* Page boutique WooCommerce */
  .woocommerce-breadcrumb { padding: 1.5rem 2rem 0 !important; }
  /* Sync margin-top du bandeau avec le padding-top du breadcrumb au breakpoint tablette */
  .woocommerce.archive .woocommerce-breadcrumb::before,
  .post-type-archive-product .woocommerce-breadcrumb::before,
  body.single-product .woocommerce-breadcrumb::before {
    margin-top: -1.5rem;
  }
  .woocommerce-products-header__title.page-title,
  .woocommerce-products-header h1,
  .post-type-archive-product .entry-title,
  .archive.woocommerce h1.page-title {
    margin: 0 2rem 2rem !important;
    font-size: clamp(48px, 7vw, 80px) !important;
  }
  .woocommerce .woocommerce-result-count { margin-left: 2rem !important; }
  .woocommerce .woocommerce-ordering { margin-right: 2rem !important; }
  .woocommerce.archive ul.products,
  .post-type-archive-product ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    margin: 2rem !important;
  }

  /* Page Personnalisation */
  .vkg-page .vkg-perso-categories { padding: 4rem 2rem; }
  .vkg-page .vkg-perso-grid { grid-template-columns: repeat(2, 1fr); }
  .vkg-page .vkg-perso-process { grid-template-columns: repeat(2, 1fr); }
  .vkg-page .vkg-perso-statement { padding: 4rem 2rem; }
  .vkg-page .vkg-perso-statement::before { font-size: 220px; }
  .vkg-page .vkg-perso-form-section { padding: 4rem 2rem; }
  .vkg-page .vkg-perso-form-body { padding: 2rem; }

  /* Navbar tablette : items menu plus serrés */
  body #ast-hf-menu-1 > .menu-item > .menu-link,
  body.ast-theme-transparent-header #ast-hf-menu-1 > .menu-item > .menu-link,
  body.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link {
    padding: 8px 16px !important;
    font-size: 11px !important;
    letter-spacing: 3px !important;
  }
  body #ast-hf-menu-1 > .menu-item > .menu-link::after,
  body.ast-theme-transparent-header #ast-hf-menu-1 > .menu-item > .menu-link::after {
    left: 16px !important;
    right: 16px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════════════════
   17. RESPONSIVE — MOBILE (≤768px)
   La grille produits est traitée séparément en bloc 19 (carrousel)
   ═══════════════════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* HERO — commun à toutes les pages */
  .vkg-page .hero-title { font-size: clamp(48px, 11vw, 72px); line-height: 0.92; }
  .vkg-page .hero-eyebrow { font-size: 9px; letter-spacing: 4px; }
  .vkg-page .hero-subtitle { font-size: 12px; letter-spacing: 4px; margin-bottom: 2rem; }
  .vkg-page .hero-pillars { gap: 1.5rem; margin-bottom: 2.5rem !important; }
  .vkg-page .hero-ctas { flex-direction: column; gap: 10px; align-items: stretch; width: 100%; }
  .vkg-page .hero-ctas .btn { text-align: center; padding: 16px 20px; }
  .vkg-page .hero-content::before { font-size: 200px; }
  .vkg-page .hero-perso .hero-content::before { font-size: 200px; }
  .vkg-page .hero-live { bottom: 1rem; left: 1rem; font-size: 9px; padding: 8px 14px; }

  /* HERO VALEURS — mobile : image plein écran + texte en overlay (même pattern que l'accueil) */
  .vkg-page .hero-valeurs {
    display: block;
    position: relative;
    height: calc(100vh - 80px);
    min-height: calc(100vh - 80px);
    max-height: none;
  }
  .vkg-page .hero-valeurs .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: unset;
    clip-path: none;
    background: var(--vkg-black);
  }
  /* Propager la hauteur jusqu'à l'image — critique pour iOS */
  .vkg-page .hero-valeurs .hero-img-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: unset;
  }
  .vkg-page .hero-valeurs .hero-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }
  .vkg-page .hero-valeurs .hero-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: unset;
  }
  /* Voile sombre pour lisibilité du texte sur l'image */
  .vkg-page .hero-valeurs .hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.72) 100%);
    pointer-events: none;
    z-index: 2;
  }
  /* hero-live passe au-dessus du voile */
  .vkg-page .hero-valeurs .hero-live { z-index: 3; }
  /* hero-content : eyebrow + titre + sous-titre en overlay bas */
  .vkg-page .hero-valeurs .hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 2rem 1.5rem 3rem;
    background: none;
  }
  .vkg-page .hero-valeurs .hero-content::before {
    display: none;
  }
  /* Masquer les pillars dans le hero mobile Valeurs (déplacés dans hero-below-valeurs) */
  .vkg-page .hero-valeurs .hero-pillars {
    display: none !important;
  }

  /* HERO PERSONNALISATION (comportement inchangé) */
  .vkg-page .hero-perso { grid-template-columns: 1fr; min-height: auto; }
  .vkg-page .hero-perso .hero-media { min-height: 40vh; height: 40vh; }
  .vkg-page .hero-perso .hero-img-wrap,
  .vkg-page .hero-perso .hero-img-placeholder { min-height: 40vh; }
  .vkg-page .hero-perso .hero-content { padding: 3rem 1.5rem; }

  /* SECTION POST-HERO VALEURS MOBILE : pillars sous l'image (full bleed) */
  .vkg-page .hero-below-valeurs {
    display: block;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    box-sizing: border-box;
    background: var(--vkg-black);
    padding: 2.5rem 1.5rem;
    border-top: 1px solid var(--vkg-border);
  }
  .vkg-page .hero-below-valeurs .hero-pillars {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 0;
    width: 100%; /* neutralise la règle globale width: var(--hero-cta-width, fit-content) */
    margin-bottom: 0 !important;
    animation: none;
  }
  .vkg-page .hero-below-valeurs .pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
  }

  /* HERO ACCUEIL — vidéo portrait pleine hauteur moins la nav bar + texte minimal en overlay */
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) {
    display: block;
    position: relative;
    height: calc(100vh - 80px);
    min-height: calc(100vh - 80px);
  }
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: unset;
    clip-path: none;
    background: var(--vkg-black);
  }
  /* Propager la hauteur jusqu'à la vidéo — critique pour iOS */
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) .hero-img-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: unset;
  }
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) .hero-img-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
  }
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) .hero-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: unset;
  }
  /* Voile sombre pour lisibilité du texte sur la vidéo — gradient inversé (texte en haut) */
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) .hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.10) 60%, rgba(0,0,0,0.00) 100%) !important;
    pointer-events: none;
    z-index: 2;
  }
  /* hero-live passe au-dessus du voile */
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) .hero-live { z-index: 3; }
  /* hero-content : uniquement eyebrow + titre + sous-titre en overlay haut */
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) .hero-content {
    position: absolute !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 5rem 1.5rem 2rem;
    background: none;
  }
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) .hero-content::before {
    display: none;
  }
  /* Masquer piliers + CTAs dans le hero mobile (déplacés sous le hero) */
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) .hero-pillars,
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) .hero-ctas {
    display: none !important;
  }

  /* SECTION POST-HERO MOBILE : piliers + CTAs sous la vidéo (mobile only) */
  .vkg-page .hero-below {
    display: block;
    background: var(--vkg-black);
    padding: 2.5rem 1.5rem;
    border-top: 1px solid var(--vkg-border);
  }
  .vkg-page .hero-below .hero-pillars {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 0;
    width: 100%; /* neutralise la règle globale width: var(--hero-cta-width, fit-content) */
    margin-bottom: 2.5rem !important;
    animation: none;
  }
  .vkg-page .hero-below .pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
  }
  .vkg-page .hero-below .hero-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%; /* neutralise la règle globale width: fit-content */
    animation: none;
  }
  .vkg-page .hero-below .hero-ctas .btn {
    text-align: center;
    padding: 16px 20px;
    width: 100%;
  }

  /* Sections génériques */
  .vkg-page .section-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .vkg-page .section-title { font-size: clamp(34px, 8vw, 48px); }

  /* Push achat */
  .vkg-page .push-achat { padding: 2.5rem 1.5rem; }
  .vkg-page .push-title { font-size: clamp(30px, 7vw, 44px); }
  .vkg-page .push-desc { font-size: 12px; letter-spacing: 1.5px; }
  .vkg-page .push-achat::before { font-size: 180px; }
  .vkg-page .push-right .btn { font-size: 10px; padding: 12px 20px; }

  /* Feat bar */
  .vkg-page .feat-bar { grid-template-columns: 1fr; }
  .vkg-page .feat-cell { padding: 1.5rem; }

  /* Manifesto */
  .vkg-page .manifesto { padding: 3rem 1.5rem; gap: 3rem; }
  .vkg-page .manifesto-title { font-size: clamp(36px, 7vw, 54px); }
  .vkg-page .manifesto-body { font-size: 13px; }
  .vkg-page .manifesto-feats { grid-template-columns: 1fr; gap: 8px; }
  .vkg-page .manifesto-stat { bottom: -1rem; left: -1rem; padding: 1rem 1.5rem; }
  .vkg-page .stat-val { font-size: 32px; }
  .vkg-page .manifesto-img {
    width: 100%;
    aspect-ratio: 9/16;
    min-height: 60vh;
  }
  .vkg-page .manifesto-img video,
  .vkg-page .manifesto-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Arguments */
  .vkg-page .argument { padding: 2rem 1.5rem; }
  .vkg-page .arg-num { font-size: 60px; }
  .vkg-page .arg-title { font-size: 24px; }
  .vkg-page .arg-text { font-size: 12px; }

  /* Athlètes */
  .vkg-page .athletes { padding: 3rem 1.5rem; }
  .vkg-page .athletes-grid { grid-template-columns: repeat(2, 1fr); }
  .vkg-page .ath-a, .vkg-page .ath-b,
  .vkg-page .ath-c, .vkg-page .ath-d,
  .vkg-page .ath-e, .vkg-page .ath-f {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1/1;
  }
  .vkg-page .athletes-quote { font-size: 18px; letter-spacing: 2px; line-height: 1.5; }

  /* Ticker */
  .vkg-page .ticker-inner { animation-duration: 18s; }
  .vkg-page .ticker-item { font-size: 10px; letter-spacing: 3px; }

  /* Page boutique WooCommerce */
  .woocommerce-breadcrumb {
    padding: 1.25rem 1.25rem 0 !important;
    font-size: 10px !important;
    letter-spacing: 3px !important;
  }
  /* Sync margin-top du bandeau avec le padding-top du breadcrumb au breakpoint mobile */
  .woocommerce.archive .woocommerce-breadcrumb::before,
  .post-type-archive-product .woocommerce-breadcrumb::before,
  body.single-product .woocommerce-breadcrumb::before {
    margin-top: -1.25rem;
  }
  .woocommerce-products-header__title.page-title,
  .woocommerce-products-header h1,
  .post-type-archive-product .entry-title,
  .archive.woocommerce h1.page-title {
    margin: 0 1.25rem 1.5rem !important;
    font-size: clamp(40px, 11vw, 64px) !important;
  }
  .woocommerce .woocommerce-result-count {
    margin: 0 1.25rem !important;
    float: none !important;
    display: block !important;
    text-align: left !important;
  }
  .woocommerce .woocommerce-ordering {
    margin: 0 1.25rem 1.5rem !important;
    float: none !important;
    display: block !important;
  }
  .woocommerce .woocommerce-ordering select { width: 100% !important; }
  .woocommerce nav.woocommerce-pagination ul li a,
  .woocommerce nav.woocommerce-pagination ul li span {
    font-size: 10px !important;
    padding: 10px 14px !important;
  }

  /* WPForms générique (page Contact) — Prénom/Nom empilés en colonne sur tablette */
  .vkg-page .wpforms-form .wpforms-field-name .wpforms-field-row {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .vkg-page .wpforms-form .wpforms-field-name .wpforms-field-row > .wpforms-field-row-block,
  .vkg-page .wpforms-form .wpforms-field-name .wpforms-field-row > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ═════════════════════════════════════════════════════════════════
     PAGE PERSONNALISATION — REFONTE MOBILE
     Plus dense, mieux respiré, formulaire optimisé
     ═════════════════════════════════════════════════════════════════ */

  /* Section catégories : padding réduit, plus respiré */
  .vkg-page .vkg-perso-categories {
    padding: 3rem 1rem;
  }

  /* Grille : 1 colonne, mais cartes plus tassées */
  .vkg-page .vkg-perso-grid {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 0;
    background: transparent;
  }

  /* Cartes : padding optimisé pour rythme vertical */
  .vkg-page .vkg-perso-card {
    padding: 1.75rem 1.5rem;
    min-height: auto;
    gap: 1rem;
    border: 1px solid var(--vkg-border);
  }

  /* Image : ratio plus tassé pour économiser le scroll */
  .vkg-page .vkg-perso-card-img {
    aspect-ratio: 21/9;
  }

  .vkg-page .vkg-perso-card-icon { font-size: 50px; }
  .vkg-page .vkg-perso-card-title { font-size: 26px; letter-spacing: 2px; }
  .vkg-page .vkg-perso-card-desc { font-size: 12.5px; line-height: 1.65; }
  .vkg-page .vkg-perso-card-tag { font-size: 8px; letter-spacing: 3px; }

  /* Note sous grille */
  .vkg-page .vkg-perso-grid-note {
    padding: 1.25rem 1.25rem;
    font-size: 12px;
    margin-top: 2rem;
  }
  .vkg-page .vkg-perso-grid-note span {
    display: block;
    margin-bottom: 6px;
    margin-right: 0;
  }

  /* Processus 4 étapes : 1 colonne */
  .vkg-page .vkg-perso-process {
    grid-template-columns: 1fr;
  }

  /* Statement fort : letter-spacing réduit pour tenir sur mobile */
  .vkg-page .vkg-perso-statement {
    padding: 3rem 1.25rem;
  }
  .vkg-page .vkg-perso-statement::before {
    font-size: 100px;
    letter-spacing: 6px;
  }
  .vkg-page .vkg-perso-statement-text {
    font-size: clamp(30px, 8.5vw, 50px);
    letter-spacing: 1.5px;
    line-height: 1;
  }
  .vkg-page .vkg-perso-statement-sub {
    font-size: 10px;
    letter-spacing: 2px;
  }

  /* Formulaire : container compact */
  .vkg-page .vkg-perso-form-section {
    padding: 3rem 1rem;
  }
  .vkg-page .vkg-perso-form-header {
    margin-bottom: 2rem;
  }
  .vkg-page .vkg-perso-form-title {
    font-size: clamp(30px, 7.5vw, 44px);
    letter-spacing: 2px;
  }
  .vkg-page .vkg-perso-form-intro {
    font-size: 13px;
    line-height: 1.65;
  }
  .vkg-page .vkg-perso-form-body {
    padding: 1.5rem 1.25rem;
  }

  /* WPForms 743 mobile */
  .vkg-perso-form-body .wpforms-form .wpforms-field {
    margin-bottom: 1.5rem !important;
  }
  .vkg-perso-form-body .wpforms-form .wpforms-field-name .wpforms-field-row {
    flex-direction: column !important;
    gap: 1.25rem !important;
  }
  .vkg-perso-form-body .wpforms-form .wpforms-field-name .wpforms-field-row > .wpforms-field-row-block,
  .vkg-perso-form-body .wpforms-form .wpforms-field-name .wpforms-field-row > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  .vkg-perso-form-body .wpforms-form ul.wpforms-field-checkbox-style-default,
  .vkg-perso-form-body .wpforms-form .wpforms-field-checkbox ul {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .vkg-perso-form-body .wpforms-form .wpforms-field-checkbox ul li label {
    padding: 11px 8px !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
  }
  .vkg-perso-form-body .wpforms-form textarea {
    min-height: 120px !important;
    padding: 12px !important;
  }
  .vkg-perso-form-body .wpforms-form button[type="submit"],
  .vkg-perso-form-body .wpforms-form .wpforms-submit {
    padding: 14px 24px !important;
    font-size: 11px !important;
    letter-spacing: 3px !important;
  }

  /* Fallback section */
  .vkg-page .vkg-perso-form-fallback {
    padding-top: 1.5rem;
    margin-top: 1.5rem;
  }
  .vkg-page .vkg-perso-form-fallback-mail {
    font-size: 13px !important;
    word-break: break-all;
  }

  /* Navbar mobile (≤768px) : header plus compact, hamburger seul */
  body.ast-theme-transparent-header .ast-primary-header-bar.main-header-bar,
  body.ast-theme-transparent-header #ast-mobile-header .main-header-bar-wrap {
    background: var(--vkg-black) !important;
  }

  /* Items du menu mobile : plus aérés au tap */
  body #ast-hf-mobile-menu .menu-item .menu-link,
  body.ast-theme-transparent-header #ast-hf-mobile-menu .menu-item .menu-link {
    font-size: 13px !important;
    letter-spacing: 3px !important;
    padding: 16px 20px !important;
  }
  body #ast-hf-mobile-menu .menu-item .menu-link:hover,
  body #ast-hf-mobile-menu .menu-item.current-menu-item .menu-link {
    padding-left: 28px !important;
  }

  /* Cart + account icons : compacts */
  body.ast-theme-transparent-header .ast-icon.icon-bag svg,
  body.ast-theme-transparent-header #ast-bag-icon-svg,
  body.ast-theme-transparent-header .ast-header-account-link svg.account-icon {
    width: 20px !important;
    height: 20px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════════════════
   18. RESPONSIVE — TRÈS PETIT MOBILE (≤480px)
   ═══════════════════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* HERO — commun à toutes les pages */
  .vkg-page .hero-title { font-size: 44px; }
  .vkg-page .hero-pillars { gap: 1rem; }
  .vkg-page .pillar-icon { width: 32px; height: 32px; font-size: 13px; }
  .vkg-page .pillar-label,
  .vkg-page .pillar-sub { font-size: 9px; }

  /* HERO VALEURS — très petit mobile : padding overlay ajusté */
  .vkg-page .hero-valeurs .hero-content {
    padding: 1.5rem 1.25rem 2rem;
  }

  /* HERO PERSONNALISATION — très petit mobile (inchangé) */
  .vkg-page .hero-perso .hero-media { min-height: 35vh; height: 35vh; }
  .vkg-page .hero-perso .hero-img-wrap,
  .vkg-page .hero-perso .hero-img-placeholder { min-height: 35vh; }
  .vkg-page .hero-perso .hero-content { padding: 2.5rem 1.25rem; }

  /* HERO ACCUEIL — padding ajusté sur très petit mobile */
  .vkg-page .hero:not(.hero-valeurs):not(.hero-perso) .hero-content {
    padding: 1.5rem 1.25rem 2rem;
  }

  .vkg-page .section-title { font-size: 28px; }

  /* Push achat */
  .vkg-page .push-achat { padding: 2rem 1.25rem; }
  .vkg-page .push-title { font-size: 28px; }
  .vkg-page .push-right { width: 100%; }
  .vkg-page .push-right > div { flex-direction: column; width: 100%; }
  .vkg-page .push-right .btn { width: 100%; text-align: center; }

  /* Manifesto */
  .vkg-page .manifesto { padding: 2.5rem 1.25rem; }
  .vkg-page .manifesto-title { font-size: 32px; }

  /* Arguments */
  .vkg-page .argument { padding: 1.75rem 1.25rem; }

  /* Athlètes */
  .vkg-page .athletes { padding: 2.5rem 1.25rem; }
  .vkg-page .athletes-grid { grid-template-columns: 1fr; }
  .vkg-page .ath-a, .vkg-page .ath-b,
  .vkg-page .ath-c, .vkg-page .ath-d,
  .vkg-page .ath-e, .vkg-page .ath-f { aspect-ratio: 16/10; }
  .vkg-page .athletes-quote { font-size: 16px; letter-spacing: 1.5px; }

  /* Page personnalisation très petit mobile */
  .vkg-page .vkg-perso-card {
    padding: 1.5rem 1.25rem;
  }
  .vkg-page .vkg-perso-card-img {
    aspect-ratio: 16/9;
  }
  .vkg-page .vkg-perso-card-icon { font-size: 44px; }
  .vkg-page .vkg-perso-card-title { font-size: 22px; }

  .vkg-page .vkg-perso-statement::before {
    font-size: 70px;
    letter-spacing: 4px;
  }
  .vkg-page .vkg-perso-statement-text {
    font-size: clamp(26px, 8vw, 40px);
  }

  /* Checkboxes WPForms : 1 seule colonne */
  .vkg-perso-form-body .wpforms-form ul.wpforms-field-checkbox-style-default,
  .vkg-perso-form-body .wpforms-form .wpforms-field-checkbox ul {
    grid-template-columns: 1fr !important;
  }
  .vkg-perso-form-body .wpforms-form .wpforms-field-checkbox ul li label {
    padding: 13px 14px !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════════════════
   19. ★ CARROUSELS PRODUITS MOBILES (PRIORITÉ MAX — DOIT RESTER EN DERNIER)
   Sur ≤768px, transforme la grille produits en carrousel horizontal swipeable
   - Page d'accueil (.vkg-page .collection)
   - Page boutique (/boutique/)
   ═══════════════════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── ACCUEIL : .vkg-page .collection ─── */
  .vkg-page .collection {
    padding: 3rem 0 3rem 1.25rem !important;
    overflow-x: hidden !important;
  }
  .vkg-page .collection .section-header { padding-right: 1.25rem !important; }

  .vkg-page ul.products,
  .vkg-page .woocommerce ul.products {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    gap: 12px !important;
    padding: 0 1.25rem 1.5rem 0 !important;
    margin: 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .vkg-page ul.products::-webkit-scrollbar,
  .vkg-page .woocommerce ul.products::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }

  .vkg-page ul.products li.product,
  .vkg-page .woocommerce ul.products li.product {
    flex: 0 0 78% !important;
    max-width: 78% !important;
    min-width: 78% !important;
    width: 78% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    background: var(--vkg-charcoal) !important;
    border: 1px solid var(--vkg-border) !important;
    padding: 1rem !important;
    margin: 0 !important;
  }

  .vkg-page ul.products li.product img,
  .vkg-page .woocommerce ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 3/4 !important;
    object-fit: cover !important;
    margin-bottom: 1rem !important;
  }

  .vkg-page ul.products li.product .woocommerce-loop-product__title { font-size: 14px !important; margin-bottom: 8px !important; }
  .vkg-page ul.products li.product .price { font-size: 22px !important; margin-bottom: 12px !important; }
  .vkg-page ul.products li.product .button,
  .vkg-page ul.products li.product .added_to_cart {
    font-size: 10px !important;
    padding: 12px 18px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .vkg-page .collection::after {
    content: '← faites glisser →' !important;
    display: block !important;
    text-align: center !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--vkg-anthracite) !important;
    margin-top: 1rem !important;
    margin-right: 1.25rem !important;
  }

  /* ─── PAGE BOUTIQUE /boutique/ ─── */
  .woocommerce.archive ul.products,
  .post-type-archive-product ul.products {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    background: transparent !important;
    gap: 12px !important;
    margin: 1rem 0 !important;
    padding: 0 1.25rem 1.5rem 1.25rem !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .woocommerce.archive ul.products::-webkit-scrollbar,
  .post-type-archive-product ul.products::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }

  .woocommerce.archive ul.products li.product,
  .post-type-archive-product ul.products li.product {
    flex: 0 0 78% !important;
    max-width: 78% !important;
    min-width: 78% !important;
    width: 78% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    background: var(--vkg-charcoal) !important;
    border: 1px solid var(--vkg-border) !important;
    padding: 1rem !important;
    margin: 0 !important;
  }

  .post-type-archive-product .site-content::after,
  .woocommerce.archive .site-content::after {
    content: '← faites glisser →' !important;
    display: block !important;
    text-align: center !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: var(--vkg-anthracite) !important;
    margin: 0 0 2rem !important;
    padding: 0 1.25rem !important;
  }
}

@media (max-width: 480px) {
  .vkg-page ul.products li.product,
  .vkg-page .woocommerce ul.products li.product,
  .woocommerce.archive ul.products li.product,
  .post-type-archive-product ul.products li.product {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    min-width: 85% !important;
    width: 85% !important;
  }
}