/*
Theme Name: Veyronix
Theme URI: http://localhost/veyronix/
Description: Thème enfant Blocksy pour Veyronix — direction éditoriale claire, portée par la photographie. Écrit à la main, sans préprocesseur.
Author: Veyronix
Template: blocksy
Version: 2.0.0
Text Domain: veyronix
Domain Path: /languages
License: GNU General Public License v2 or later
*/

/* ============================================================
   1. JETONS DE DESIGN — clair et chaud
   La version 1.0 était sombre. Le client a demandé plus de lumière
   et plus de place pour les produits : la photo porte désormais la page,
   la couleur ne fait que la ponctuer.
   ============================================================ */
:root{
  /* Fonds — froids, accordés au noir bleuté du logo */
  --vx-creme:      #EDF1F6;   /* gris clair froid, jamais blanc pur */
  --vx-ivoire:     #F7F9FB;   /* surfaces secondaires */
  --vx-blanc:      #FFFFFF;   /* cartes et photos produits */
  --vx-encre:      #03060F;   /* echantillonne dans le logo */
  --vx-encre-2:    #0C1120;

  /* Traits */
  --vx-trait:      #DCE1E9;
  --vx-trait-fort: #C2C9D5;

  /* Texte — mesures : 16,41 sur clair, 16,89 sur sombre */
  --vx-noir:       #11141B;
  --vx-texte:      #3D4450;
  --vx-sourdine:   #5A6373;   /* 5,39 sur clair */
  --vx-faible:     #939BA9;
  --vx-sur-sombre: #E8ECF3;

  /* Bleu de marque — deux valeurs, une par contexte.
     Un seul bleu échoue toujours sur l'un des deux fonds. */
  --vx-bleu:       #0646C4;   /* le bleu du V — 6,91 sur clair, 7,83 sur blanc */
  --vx-bleu-vif:   #1CA9F8;   /* le bleu du halo — 7,79 sur le noir du logo */
  --vx-bleu-clair: #8AD4FF;
  --vx-bleu-degrade: linear-gradient(135deg,#1CA9F8 0%,#0646C4 100%);

  /* Chrome — la seconde matière du logo */
  --vx-chrome:       #C7CDD6;   /* echantillonne — 12,67 sur le noir */
  --vx-chrome-fonce: #8A93A3;   /* 6,46 sur sombre */
  --vx-chrome-degrade: linear-gradient(140deg,#F9FEFF 0%,#C7CDD6 38%,#7E8794 62%,#E4EAF0 100%);

  /* Accents par univers — famille froide, toutes mesurées sur carte blanche */
  --vx-u-auto:     #1F5F73;   /* 7,14 */
  --vx-u-tech:     #0646C4;   /* 7,83 */
  --vx-u-info:     #4B45B8;   /* 7,39 */
  --vx-u-gaming:   #7A3B9E;   /* 7,13 */
  --vx-u-mobilite: #16705A;   /* 6,00 */

  /* Etats */
  --vx-succes:     #3E7A44;
  --vx-erreur:     #A8402F;

  /* Typographie — trois rôles distincts.
     L'affichage est condensé et gras : c'est lui qui donne au catalogue son
     allure de grande distribution. Le serif ne porte plus que le nom de marque. */
  --vx-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --vx-titre: 'Marcellus', 'Times New Roman', serif;
  --vx-corps: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rythme */
  --vx-r1: 8px;  --vx-r2: 16px;  --vx-r3: 28px;
  --vx-r4: 48px; --vx-r5: 80px;  --vx-r6: 120px;

  --vx-transition: 420ms cubic-bezier(.22,.61,.36,1);
  --vx-ombre:      0 1px 2px rgba(17,20,27,.05), 0 8px 28px rgba(17,20,27,.07);
  --vx-ombre-fort: 0 2px 6px rgba(17,20,27,.08), 0 20px 50px rgba(17,20,27,.13);
  --vx-halo:       0 0 0 1px rgba(28,169,248,.30), 0 0 26px rgba(28,169,248,.28);
}

/* ============================================================
   2. SOCLE
   ============================================================ */
html{ background: var(--vx-creme); }
body{
  background: var(--vx-creme);
  color: var(--vx-texte);
  font-family: var(--vx-corps);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4{
  font-family: var(--vx-display);
  font-weight: 800;
  color: var(--vx-noir);
  letter-spacing: .004em;
  line-height: .96;
  text-transform: uppercase;
  text-wrap: balance;
}
h1{ font-size: clamp(2.6rem, 1.3rem + 5vw, 5.6rem); font-weight: 900; }
h2{ font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); }
h3{ font-size: clamp(1.4rem, 1rem + 1.3vw, 2rem); }
h4{ font-size: 1.05rem; letter-spacing: .05em; }

a{ color: var(--vx-bleu); text-decoration: none; transition: color var(--vx-transition); }
a:hover{ color: var(--vx-noir); }
p{ line-height: 1.75; }
::selection{ background: var(--vx-bleu-vif); color: var(--vx-noir); }

.vx-surtitre{
  display: block;
  font-size: .71rem; font-weight: 600;
  letter-spacing: .21em; text-transform: uppercase;
  color: var(--vx-bleu); margin-bottom: var(--vx-r2);
}
.vx-surtitre--sourdine{ color: var(--vx-faible); font-weight: 500; }

.vx-filet{ height: 1px; border: 0; margin: 0; background: var(--vx-trait); }

/* ============================================================
   3. BOUTONS
   ============================================================ */
.vx-btn{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 28px;
  font-family: var(--vx-corps); font-size: .79rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  border: 1px solid var(--vx-noir); border-radius: 2px;
  color: var(--vx-noir); background: transparent;
  cursor: pointer; transition: background var(--vx-transition), color var(--vx-transition), border-color var(--vx-transition);
}
.vx-btn:hover{ background: var(--vx-noir); color: var(--vx-creme); }
.vx-btn--plein{ background: var(--vx-noir); color: var(--vx-creme); }
.vx-btn--plein:hover{ background: var(--vx-bleu); border-color: var(--vx-bleu); color: #fff; }
.vx-btn--or{ background: var(--vx-bleu); border-color: var(--vx-bleu); color: #fff; }
.vx-btn--or:hover{ background: var(--vx-noir); border-color: var(--vx-noir); }
.vx-btn--clair{ border-color: rgba(232,236,243,.4); color: var(--vx-sur-sombre); }
.vx-btn--clair:hover{ background: var(--vx-sur-sombre); color: var(--vx-noir); border-color: var(--vx-sur-sombre); }
.vx-btn svg{ transition: transform var(--vx-transition); }
.vx-btn:hover svg{ transform: translateX(4px); }

/* ============================================================
   4. EN-TETE — clair, discret, le produit passe devant
   ============================================================ */
.vx-bandeau{
  background: var(--vx-encre);
  color: var(--vx-faible);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
}
.vx-bandeau-int{
  max-width: 1340px; margin: 0 auto; padding: 9px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--vx-r3);
}
.vx-bandeau-liste{ display: flex; gap: var(--vx-r3); list-style: none; margin: 0; padding: 0; }
.vx-bandeau-liste li{ display: flex; align-items: center; gap: 7px; }
.vx-bandeau svg{ width: 13px; height: 13px; stroke: var(--vx-bleu-vif); flex: none; }
.vx-bandeau a{ color: var(--vx-sur-sombre); }
.vx-bandeau a:hover{ color: var(--vx-bleu-vif); }

/* Blocksy rend son propre en-tête, piloté par le personnalisateur. Il est masqué
   plutôt que dompté : un réglage modifié par mégarde suffirait sinon à défaire la
   mise en page. L'en-tête ci-dessous le remplace entièrement. */
header.ct-header{ display: none !important; }

.vx-entete{
  position: sticky; top: 0; z-index: 30;
  background: var(--vx-blanc);
  border-bottom: 1px solid var(--vx-trait);
}
.vx-entete-int{
  max-width: 1340px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: var(--vx-r3);
}

.vx-entete-marque{
  display: flex; align-items: center; gap: 12px;
  flex: none; color: var(--vx-noir);
}
.vx-entete-marque img{ width: 46px; height: 46px; display: block; }
.vx-entete-marque span{
  font-family: var(--vx-titre); font-size: 1.5rem;
  letter-spacing: .02em; line-height: 1;
}
.vx-entete-marque:hover span{ color: var(--vx-bleu); }

/* La recherche occupe le centre : sur un catalogue de cette taille, c'est le
   chemin le plus court vers un produit précis. */
.vx-recherche{
  flex: 1; min-width: 0;
  display: flex; align-items: stretch;
  background: var(--vx-blanc);
  border: 2px solid var(--vx-noir); border-radius: 2px;
}
.vx-recherche svg{
  width: 18px; height: 18px; flex: none;
  align-self: center; margin: 0 6px 0 12px;
  color: var(--vx-sourdine);
}
.vx-recherche input{
  flex: 1; min-width: 0;
  border: 0; background: none;
  font-family: var(--vx-corps); font-size: .92rem;
  padding: 11px 4px; color: var(--vx-noir);
}
.vx-recherche input:focus{ outline: none; }
.vx-recherche button{
  border: 0; cursor: pointer;
  background: var(--vx-noir); color: #fff;
  font-family: var(--vx-corps); font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 0 22px;
  transition: background var(--vx-transition);
}
.vx-recherche button:hover{ background: var(--vx-bleu); }

.vx-entete-actions{ display: flex; align-items: center; gap: 4px; flex: none; }

.vx-entete-nav{ background: var(--vx-blanc); border-top: 1px solid var(--vx-trait); }
.vx-entete-nav-int{
  max-width: 1340px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: var(--vx-r3);
  overflow-x: auto; scrollbar-width: none;
}
.vx-entete-nav-int::-webkit-scrollbar{ display: none; }
.vx-entete-nav a{
  font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--vx-noir); white-space: nowrap;
  padding: 13px 0; border-bottom: 3px solid transparent;
}
.vx-entete-nav a:hover{ color: var(--vx-noir); border-bottom-color: var(--vx-noir); }
.vx-entete-nav .vx-nav-promo{ color: var(--vx-erreur); }
.vx-entete-nav .vx-nav-promo:hover{ border-bottom-color: var(--vx-erreur); }
.vx-entete-nav .vx-nav-fin{ margin-left: auto; font-weight: 500; color: var(--vx-sourdine); }

.vx-action{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 2px; position: relative;
  color: var(--vx-texte); transition: color var(--vx-transition), background var(--vx-transition);
}
.vx-action:hover{ color: var(--vx-bleu); background: var(--vx-creme); }
.vx-action svg{ width: 19px; height: 19px; }
.vx-action-pastille{
  position: absolute; top: 5px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--vx-bleu); color: #fff;
  font-size: .61rem; font-weight: 600; border-radius: 9px;
}

/* ============================================================
   5. OUVERTURE — texte à gauche, mosaïque de produits à droite
   La photo occupe la moitié de l'écran dès le premier coup d'œil.
   ============================================================ */
.vx-ouverture{
  background: var(--vx-ivoire);
  border-bottom: 1px solid var(--vx-trait);
  overflow: hidden;
}
.vx-ouverture-int{
  max-width: 1340px; margin: 0 auto; padding: var(--vx-r5) 24px;
  display: grid; grid-template-columns: 1fr 1.06fr; gap: var(--vx-r5);
  align-items: center;
}
.vx-ouverture h1{ margin: 0 0 var(--vx-r3); line-height: 1.05; }
.vx-ouverture h1 em{
  font-style: normal;
  color: var(--vx-bleu);
}
.vx-ouverture-texte{
  max-width: 46ch; margin: 0 0 var(--vx-r4);
  font-size: 1.03rem; color: var(--vx-sourdine); line-height: 1.8;
}
.vx-ouverture-actions{ display: flex; gap: var(--vx-r2); flex-wrap: wrap; }

/* Mosaïque : une grande image et deux appoints, toutes de vraies fiches. */
.vx-mosaique{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.45fr 1fr;
  gap: var(--vx-r2);
  height: clamp(360px, 46vw, 560px);
}
.vx-mosaique-case{
  position: relative; overflow: hidden; border-radius: 3px;
  background: var(--vx-blanc);
  box-shadow: var(--vx-ombre);
  display: block;
}
.vx-mosaique-case:first-child{ grid-column: 1 / 3; }  /* la grande case est large, pas haute : les photos produits sont en paysage */
.vx-mosaique-case img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms cubic-bezier(.22,.61,.36,1);
}
.vx-mosaique-case:hover img{ transform: scale(1.05); }
.vx-mosaique-legende{
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: var(--vx-r3) var(--vx-r2) var(--vx-r2);
  background: linear-gradient(to top, rgba(3,6,15,.86), rgba(3,6,15,0));
  color: #fff;
}
.vx-mosaique-legende span{
  display: block; font-size: .63rem; letter-spacing: .17em;
  text-transform: uppercase; color: var(--vx-bleu-vif); margin-bottom: 5px;
}
.vx-mosaique-legende strong{
  display: block; font-family: var(--vx-corps); font-weight: 600;
  font-size: .95rem; line-height: 1.3;
}
.vx-mosaique-case:first-child .vx-mosaique-legende strong{ font-size: 1.28rem; }

/* Compteurs */
.vx-compteurs{
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1340px; margin: 0 auto; padding: 0 24px var(--vx-r5);
}
.vx-compteur{ padding: var(--vx-r3) var(--vx-r2) 0; border-top: 1px solid var(--vx-trait); }
.vx-compteur-n{
  display: block; font-family: var(--vx-display); font-weight: 800;
  font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3.4rem);
  color: var(--vx-noir); line-height: .94;
  font-variant-numeric: tabular-nums;
}
.vx-compteur-l{
  display: block; margin-top: 9px;
  font-size: .67rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--vx-faible);
}

/* ============================================================
   6. SECTIONS
   ============================================================ */
.vx-section{ padding: var(--vx-r6) 24px; max-width: 1340px; margin: 0 auto; }
.vx-section--serre{ padding-top: var(--vx-r5); padding-bottom: var(--vx-r5); }
.vx-section--sombre{
  background: var(--vx-encre); color: var(--vx-sur-sombre);
  max-width: none; padding-left: 0; padding-right: 0;
}
.vx-section--sombre h2, .vx-section--sombre h3, .vx-section--sombre strong{ color: #fff; }
.vx-section--sombre p{ color: rgba(232,236,243,.72); }
.vx-section--sombre .vx-surtitre{ color: var(--vx-bleu-vif); }
.vx-section-tete{ max-width: 60ch; margin: 0 0 var(--vx-r5); }
.vx-section-tete--centre{ margin-left: auto; margin-right: auto; text-align: center; }
.vx-section-tete p{ color: var(--vx-sourdine); margin-top: var(--vx-r2); font-size: 1.02rem; }

/* ============================================================
   7. UNIVERS — chaque porte d'entrée porte une vraie photo
   ============================================================ */
.vx-univers{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--vx-r2);
}
/* Cinq univers sur six colonnes : les deux premiers prennent trois colonnes,
   les trois suivants deux. La grille reste régulière sans case vide. */
.vx-univers-carte:nth-child(1), .vx-univers-carte:nth-child(2){ grid-column: span 3; }
.vx-univers-carte:nth-child(n+3){ grid-column: span 2; }

.vx-univers-carte{
  position: relative; display: flex; overflow: hidden;
  border-radius: 3px; background: var(--vx-blanc);
  box-shadow: var(--vx-ombre);
  transition: box-shadow var(--vx-transition), transform var(--vx-transition);
  min-height: 260px;
}
.vx-univers-carte:nth-child(-n+2){ min-height: 320px; }
.vx-univers-carte:hover{ box-shadow: var(--vx-ombre-fort); transform: translateY(-3px); }

.vx-univers-photo{ position: absolute; inset: 0; }
.vx-univers-photo img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(.22,.61,.36,1);
}
.vx-univers-carte:hover .vx-univers-photo img{ transform: scale(1.06); }
.vx-univers-voile{
  position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(3,6,15,.14) 0%, rgba(3,6,15,.52) 52%, rgba(3,6,15,.88) 100%);
}
.vx-univers-corps{
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--vx-r3);
  color: #fff;
}
.vx-univers-icone{
  position: absolute; top: var(--vx-r3); left: var(--vx-r3);
  width: 34px; height: 34px; color: #fff; opacity: .92;
}
.vx-univers-icone svg{ width: 100%; height: 100%; }
.vx-univers-n{
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--vx-bleu-vif);
}
.vx-univers-carte h3{ color: #fff; margin: 8px 0 6px; }
.vx-univers-carte p{
  margin: 0; font-size: .88rem; line-height: 1.6;
  color: rgba(255,255,255,.76); max-width: 42ch;
}
.vx-univers-fleche{
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--vx-r2);
  font-size: .71rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vx-bleu-vif);
}
.vx-univers-fleche svg{ width: 14px; height: 14px; transition: transform var(--vx-transition); }
.vx-univers-carte:hover .vx-univers-fleche svg{ transform: translateX(5px); }

/* ============================================================
   8. CARTE PRODUIT — la photo occupe la moitié haute, sur blanc
   Les visuels de presse sont détourés sur blanc : un fond blanc les
   fait tenir naturellement, là où un fond sombre les découpait.
   ============================================================ */
ul.products, .products.columns-3, .products.columns-4{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: var(--vx-r3) !important;
  background: transparent;
  margin: 0 !important; padding: 0 !important; list-style: none;
}
ul.products::before, ul.products::after{ display: none !important; }

li.product{
  position: relative; display: flex !important; flex-direction: column;
  width: auto !important; margin: 0 !important; padding: 0 !important;
  background: var(--vx-blanc);
  border: 1px solid var(--vx-trait);
  border-radius: 3px; overflow: hidden;
  transition: box-shadow var(--vx-transition), transform var(--vx-transition), border-color var(--vx-transition);
}
li.product:hover{
  box-shadow: var(--vx-ombre-fort);
  border-color: var(--vx-trait-fort);
  transform: translateY(-3px);
}
li.product::before, li.product::after{ display: none !important; }

.vx-carte-media{
  position: relative; display: block;
  aspect-ratio: 4 / 3; overflow: hidden;
  background: #fff;
  border-bottom: 1px solid var(--vx-trait);
}
.vx-carte-media img{
  position: absolute; inset: 0; margin: auto;
  max-width: 88%; max-height: 88%; width: auto !important; height: auto !important;
  object-fit: contain;
  transition: transform 620ms cubic-bezier(.22,.61,.36,1);
}
li.product:hover .vx-carte-media img{ transform: scale(1.05); }

.vx-carte-corps{ display: flex; flex-direction: column; flex: 1; padding: var(--vx-r3); }
.vx-carte-univers{
  font-size: .64rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--vx-accent, var(--vx-bleu)); margin-bottom: 9px; font-weight: 600;
}
/* Le nom du produit reste en bas de casse et sans condensé : c'est une
   désignation à lire, pas un titre à proclamer. */
.vx-carte-titre{
  font-family: var(--vx-corps); font-weight: 500;
  font-size: .98rem; line-height: 1.35;
  letter-spacing: 0; text-transform: none;
  color: var(--vx-noir); margin: 0 0 var(--vx-r2);
}
.vx-carte-titre a{ color: inherit; }
li.product:hover .vx-carte-titre a{ color: var(--vx-bleu); }

.vx-pastilles{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--vx-r2); }
.vx-pastille{
  font-size: .68rem; padding: 4px 10px;
  background: var(--vx-creme); border-radius: 2px;
  color: var(--vx-sourdine);
}
/* Note moyenne sur la carte. WooCommerce rend ses etoiles avec une police
   d icones et une largeur en pourcentage : on garde sa mecanique, on ne
   redessine que la couleur et l echelle. */
.vx-carte-note{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--vx-r2);
}
.vx-carte-note .star-rating{
  font-size: .78rem;
  color: var(--vx-bleu);
  margin: 0;
}
.vx-carte-note-n{
  font-size: .72rem;
  color: var(--vx-sourdine);
  font-variant-numeric: tabular-nums;
}

.vx-carte-pied{
  margin-top: auto; padding-top: var(--vx-r2);
  border-top: 1px solid var(--vx-trait);
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--vx-r2);
}
.vx-prix{
  font-family: var(--vx-corps); font-weight: 700; font-size: 1.2rem;
  color: var(--vx-noir); line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.vx-prix-note{
  display: block; font-family: var(--vx-corps); font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--vx-faible); margin-top: 5px;
}
.vx-carte-lien{
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--vx-sourdine); display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; min-height: 44px;
}
li.product:hover .vx-carte-lien{ color: var(--vx-bleu); }
.vx-carte-lien svg{ width: 14px; height: 14px; transition: transform var(--vx-transition); }
li.product:hover .vx-carte-lien svg{ transform: translateX(4px); }

.vx-etiquette{
  position: absolute; top: var(--vx-r2); left: var(--vx-r2); z-index: 3;
  padding: 5px 12px; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase;
  background: var(--vx-noir); color: #fff; font-weight: 600; border-radius: 2px;
}
.vx-etiquette--sombre{ background: var(--vx-blanc); color: var(--vx-noir); border: 1px solid var(--vx-trait-fort); }
/* La remise est le seul endroit du site où le rouge apparaît : il ne signale
   qu'une chose, et reste donc lisible comme signal. */
.vx-etiquette--promo{
  background: var(--vx-erreur); color: #fff;
  letter-spacing: .08em; font-size: .68rem;
  font-variant-numeric: tabular-nums;
}
/* WooCommerce pose sa propre pastille sur la fiche produit, que Blocksy colore
   en bleu. Le bleu est la couleur de marque : le garder ici ferait passer une
   promotion pour un élément d'identité. Elle rejoint le rouge des remises. */
.woocommerce span.onsale{
  background: var(--vx-erreur) !important;
  color: #fff !important;
  font-family: var(--vx-corps) !important;
  font-size: .68rem !important; font-weight: 600 !important;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 2px !important;
}

.vx-u-automobile{ --vx-accent: var(--vx-u-auto); }
.vx-u-high-tech{  --vx-accent: var(--vx-u-tech); }
.vx-u-informatique{ --vx-accent: var(--vx-u-info); }
.vx-u-gaming{     --vx-accent: var(--vx-u-gaming); }
.vx-u-mobilite{   --vx-accent: var(--vx-u-mobilite); }

/* ============================================================
   9. BANDEAU DE CATEGORIE
   ============================================================ */
.vx-cat-entete{
  position: relative; padding: var(--vx-r5) 24px var(--vx-r4);
  background: var(--vx-ivoire); border-bottom: 1px solid var(--vx-trait);
  text-align: center;
}
.vx-cat-entete::after{
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 2px;
  background: var(--vx-accent, var(--vx-bleu));
  width: 68px; margin: 0 auto;
}
.vx-cat-entete h1{ margin: 0 0 var(--vx-r2); }
.vx-cat-entete p{ max-width: 58ch; margin: 0 auto; color: var(--vx-sourdine); }

.vx-filtres{
  display: flex; flex-wrap: wrap; gap: var(--vx-r2); align-items: center;
  padding: var(--vx-r3) 24px; max-width: 1340px; margin: 0 auto;
}

/* ============================================================
   10. FICHE PRODUIT — grande photo sur blanc
   ============================================================ */
.single-product div.product{ padding-top: var(--vx-r4); }
.single-product .woocommerce-product-gallery{
  background: var(--vx-blanc);
  border: 1px solid var(--vx-trait);
  border-radius: 3px;
  padding: var(--vx-r4);
  box-shadow: var(--vx-ombre);
}
.single-product .woocommerce-product-gallery img{ border-radius: 2px; }
/* Le nom d'un produit se lit, il ne se crie pas : ni condensé ni capitales,
   contrairement aux titres de section. Une désignation comme « Classe A 180 d
   Style Line » deviendrait illisible en majuscules condensées sur trois lignes. */
.single-product .product_title{
  font-family: var(--vx-corps) !important;
  font-weight: 600 !important;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: var(--vx-r2) !important;
}
.single-product .price, .single-product p.price{
  font-family: var(--vx-corps) !important;
  font-weight: 700 !important;
  font-size: clamp(1.6rem,1.1rem + 1.3vw,2.2rem) !important;
  color: var(--vx-noir) !important;
  font-variant-numeric: tabular-nums;
}
.single-product .woocommerce-product-details__short-description{ color: var(--vx-sourdine); font-size: 1.02rem; }

/* Mentions imposées par le droit allemand. Discrètes mais jamais masquées :
   leur absence expose autant que leur inexactitude. */
.vx-mention-prix{
  margin: calc(var(--vx-r1) * -1) 0 var(--vx-r2);
  font-size: .78rem; line-height: 1.5;
  color: var(--vx-sourdine);
}
.vx-mention-prix a{ color: var(--vx-sourdine); text-decoration: underline; }
.vx-mention-prix a:hover{ color: var(--vx-bleu); }

.vx-mentions-tunnel{
  margin: var(--vx-r2) 0;
  font-size: .82rem; line-height: 1.6;
  color: var(--vx-texte);
}
.vx-mentions-tunnel a{ text-decoration: underline; }

.vx-specs{ width: 100%; border-collapse: collapse; margin: var(--vx-r3) 0; }
.vx-specs tr{ border-bottom: 1px solid var(--vx-trait); }
.vx-specs tr:first-child{ border-top: 1px solid var(--vx-trait); }
.vx-specs th, .vx-specs td{ padding: 14px 0; text-align: left; font-weight: 400; font-size: .93rem; }
.vx-specs th{ color: var(--vx-faible); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; width: 40%; }
.vx-specs td{ color: var(--vx-noir); }

.vx-confiance{
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--vx-r2);
  margin: var(--vx-r4) 0;
}
.vx-confiance div{
  background: var(--vx-blanc); border: 1px solid var(--vx-trait);
  border-radius: 3px; padding: var(--vx-r3);
}
.vx-confiance svg{ width: 22px; height: 22px; color: var(--vx-bleu); margin-bottom: 12px; }
.vx-confiance strong{ display: block; font-family: var(--vx-titre); font-weight: 400; color: var(--vx-noir); font-size: 1.04rem; margin-bottom: 6px; }
.vx-confiance span{ font-size: .88rem; color: var(--vx-sourdine); line-height: 1.65; }
.vx-section--sombre .vx-confiance div{ background: var(--vx-encre-2); border-color: rgba(232,236,243,.13); }
.vx-section--sombre .vx-confiance span{ color: rgba(232,236,243,.68); }
.vx-section--sombre .vx-confiance svg{ color: var(--vx-bleu-vif); }

/* ============================================================
   11. PAIEMENT PAR VIREMENT
   ============================================================ */
.vx-virement{
  background: var(--vx-blanc); border: 1px solid var(--vx-trait);
  border-radius: 3px; padding: var(--vx-r4); margin: var(--vx-r4) 0;
  box-shadow: var(--vx-ombre);
}
.vx-section--sombre .vx-virement{
  background: transparent; border: 0; box-shadow: none;
  padding: 0; margin: 0;
}
.vx-virement h2, .vx-virement h3{ margin-top: 0; }
.vx-etapes{ display: grid; grid-template-columns: repeat(3,1fr); gap: var(--vx-r4); margin-top: var(--vx-r4); counter-reset: vxe; }
.vx-etape{ position: relative; padding-top: var(--vx-r3); border-top: 2px solid var(--vx-bleu); counter-increment: vxe; }
.vx-section--sombre .vx-etape{ border-top-color: var(--vx-bleu-vif); }
.vx-etape::before{
  content: counter(vxe,decimal-leading-zero);
  display: block; font-family: var(--vx-titre); font-size: .82rem;
  color: var(--vx-bleu); margin-bottom: 10px;
}
.vx-section--sombre .vx-etape::before{ color: var(--vx-bleu-vif); }
.vx-etape strong{ display: block; font-family: var(--vx-titre); font-weight: 400; color: var(--vx-noir); font-size: 1.1rem; margin-bottom: 9px; }
.vx-etape p{ font-size: .9rem; color: var(--vx-sourdine); margin: 0; }

.vx-iban{
  background: var(--vx-creme); border: 1px solid var(--vx-trait);
  padding: var(--vx-r3); margin: var(--vx-r3) 0; border-radius: 3px;
}
.vx-iban dl{ margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 13px var(--vx-r3); align-items: baseline; }
.vx-iban dt{ font-size: .69rem; letter-spacing: .14em; text-transform: uppercase; color: var(--vx-faible); }
.vx-iban dd{ margin: 0; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .97rem; color: var(--vx-noir); letter-spacing: .05em; }
.vx-copier{
  background: none; border: 1px solid var(--vx-trait-fort); border-radius: 2px;
  color: var(--vx-sourdine); cursor: pointer; padding: 5px 11px; margin-left: 8px;
  font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  min-height: 32px; transition: all var(--vx-transition);
}
.vx-copier:hover{ border-color: var(--vx-bleu); color: var(--vx-bleu); }

.vx-recu{
  border: 1.5px dashed var(--vx-trait-fort); background: var(--vx-ivoire);
  padding: var(--vx-r4) var(--vx-r3); text-align: center; border-radius: 3px;
  transition: border-color var(--vx-transition), background var(--vx-transition);
  cursor: pointer;
}
.vx-recu.vx-survol{ border-color: var(--vx-bleu); background: #EDF4FF; }
.vx-recu svg{ width: 30px; height: 30px; color: var(--vx-bleu); margin-bottom: 12px; }
.vx-recu strong{ display: block; font-family: var(--vx-titre); font-weight: 400; font-size: 1.06rem; color: var(--vx-noir); }
.vx-recu-note{ font-size: .8rem; color: var(--vx-faible); margin-top: 8px; }
.vx-recu input[type=file]{ display: none; }
.vx-recu-liste{ list-style: none; margin: var(--vx-r3) 0 0; padding: 0; text-align: left; }
.vx-recu-liste li{ display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--vx-trait); font-size: .86rem; color: var(--vx-texte); }
.vx-recu-liste svg{ width: 16px; height: 16px; margin: 0; color: var(--vx-succes); flex: none; }

/* ============================================================
   12. FORMULAIRES ET TABLEAUX
   ============================================================ */
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=search],textarea,select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single{
  background: var(--vx-blanc) !important; color: var(--vx-noir) !important;
  border: 1px solid var(--vx-trait-fort) !important; border-radius: 2px !important;
  font-family: var(--vx-corps) !important; font-size: .93rem !important;
  min-height: 48px; padding: 12px 15px !important;
}
textarea{ min-height: 140px; line-height: 1.7; }
input:focus, textarea:focus, select:focus{ outline: none; border-color: var(--vx-bleu) !important; box-shadow: 0 0 0 3px rgba(6,70,196,.15); }
::placeholder{ color: var(--vx-faible); }
label{ font-size: .73rem !important; letter-spacing: .11em; text-transform: uppercase; color: var(--vx-sourdine) !important; }

.woocommerce table.shop_table, .woocommerce-cart table.cart{
  background: var(--vx-blanc); border: 1px solid var(--vx-trait) !important;
  border-radius: 3px; border-collapse: collapse;
}
.woocommerce table.shop_table th{
  color: var(--vx-faible) !important; font-size: .69rem !important;
  letter-spacing: .13em; text-transform: uppercase; font-weight: 600 !important;
  border-bottom: 1px solid var(--vx-trait) !important;
}
.woocommerce table.shop_table td{ border-top: 1px solid var(--vx-trait) !important; color: var(--vx-texte); }

.woocommerce-message, .woocommerce-info, .woocommerce-error{
  background: var(--vx-blanc) !important; color: var(--vx-texte) !important;
  border: 1px solid var(--vx-trait) !important; border-left: 3px solid var(--vx-bleu) !important;
  border-radius: 2px; padding: var(--vx-r3) !important;
}
.woocommerce-message{ border-left-color: var(--vx-succes) !important; }
.woocommerce-error{ border-left-color: var(--vx-erreur) !important; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ display: none !important; }

.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce .button.alt{
  background: var(--vx-noir) !important; color: var(--vx-creme) !important;
  border: 0 !important; border-radius: 2px !important;
  font-family: var(--vx-corps) !important; font-size: .78rem !important; font-weight: 600 !important;
  letter-spacing: .13em !important; text-transform: uppercase !important;
  min-height: 50px; padding: 0 28px !important;
  transition: background var(--vx-transition) !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .button.alt:hover{
  background: var(--vx-bleu) !important; color: #fff !important;
}

.vx-vide{ text-align: center; padding: var(--vx-r6) var(--vx-r3); }
.vx-vide svg{ width: 44px; height: 44px; color: var(--vx-faible); margin-bottom: var(--vx-r3); }
.vx-vide p{ color: var(--vx-sourdine); max-width: 44ch; margin: 0 auto var(--vx-r3); }

/* ============================================================
   13. PIED DE PAGE — la seule grande bande sombre restante
   ============================================================ */
footer[data-footer], .ct-footer, footer.ct-footer, footer[data-footer] > div{
  background-color: var(--vx-encre) !important;
  background-image: none !important;
  border-top: 0 !important;
}
.vx-pied{ background: var(--vx-encre); }
.vx-pied-int{ max-width: 1340px; margin: 0 auto; padding: var(--vx-r5) 24px var(--vx-r3); }
.vx-pied-grille{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--vx-r4); }
.vx-pied h4{
  font-family: var(--vx-corps); font-size: .69rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--vx-bleu-vif);
  margin: 0 0 var(--vx-r2);
}
.vx-pied ul{ list-style: none; margin: 0; padding: 0; }
.vx-pied li{ margin-bottom: 11px; }
.vx-pied a{ color: rgba(232,236,243,.66); font-size: .88rem; }
.vx-pied a:hover{ color: #fff; }
.vx-pied-marque{ display: flex; align-items: center; gap: 12px; margin-bottom: var(--vx-r2); }
.vx-pied-marque img{ width: 34px; height: 34px; border-radius: 5px; }
.vx-pied-marque span{ font-size: 1rem; letter-spacing: .28em; text-transform: uppercase; color: #fff; }
.vx-pied-texte{ font-size: .88rem; color: rgba(232,236,243,.6); max-width: 40ch; line-height: 1.75; }
/* Adresse e-mail : seul moyen de contact du site, elle doit se voir plus que
   les liens ordinaires. Blanc plein, et 44 px de haut pour le doigt. */
.vx-pied a.vx-pied-email{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: var(--vx-r2);
  color: #fff; font-size: .95rem; overflow-wrap: anywhere;
}
.vx-pied-email svg{ flex-shrink: 0; color: var(--vx-bleu-clair, #7FB4FF); }
.vx-pied a.vx-pied-email:hover span{ text-decoration: underline; text-underline-offset: 3px; }
.vx-pied-bas{
  margin-top: var(--vx-r4); padding-top: var(--vx-r3);
  border-top: 1px solid rgba(232,236,243,.13);
  display: flex; justify-content: space-between; gap: var(--vx-r3); flex-wrap: wrap;
  font-size: .76rem; color: rgba(232,236,243,.42);
}

/* ============================================================
   14. APPARITIONS
   ============================================================ */
.vx-js .vx-monte{ opacity: 0; transform: translateY(20px); transition: opacity 720ms ease, transform 720ms cubic-bezier(.22,.61,.36,1); }
.vx-js .vx-monte.vx-vu{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .vx-js .vx-monte{ opacity: 1 !important; transform: none !important; }
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   15. REPRISE DE BLOCKSY
   ============================================================ */
:root{
  --theme-palette-color-1: #1560E0;
  --theme-palette-color-2: #11141B;
  --theme-palette-color-3: #11141B;
  --theme-palette-color-4: #3D4450;
  --theme-palette-color-5: #DCE1E9;
  --theme-palette-color-6: #F7F9FB;
  --theme-palette-color-7: #EFF2F6;
  --theme-palette-color-8: #FFFFFF;
  --theme-text-color: #3D4450;
  --theme-link-initial-color: #1560E0;
  --theme-link-hover-color: #11141B;
  --theme-headings-color: #11141B;
  --theme-border-color: #DCE1E9;
}
body, body.home, body.blog, body.woocommerce, body.woocommerce-page,
body[class*="wp-theme"], body[class*="wp-child-theme"]{
  background-color: var(--vx-creme) !important;
}
#main-container, .site-main, [class*="ct-container"]{ background-color: transparent !important; }
.hero-section{ display: none !important; }

article.entry-card, .entry-card, .ct-block-post, .wp-block-post{
  background-color: var(--vx-blanc) !important;
  border: 1px solid var(--vx-trait) !important;
  border-radius: 3px !important; box-shadow: none !important;
  color: var(--vx-texte) !important;
}
.entry-card .entry-title a{ color: var(--vx-noir) !important; }
.entry-meta, .entry-meta a, .ct-meta-element{ color: var(--vx-faible) !important; }

.ct-pagination a, .ct-pagination span, .page-numbers{
  background: var(--vx-blanc) !important; border: 1px solid var(--vx-trait) !important;
  color: var(--vx-texte) !important; border-radius: 2px !important;
}
.ct-pagination .current, .page-numbers.current{ background: var(--vx-noir) !important; color: #fff !important; border-color: var(--vx-noir) !important; }

.ct-toggle svg, .ct-toggle-close svg{ color: var(--vx-noir) !important; fill: var(--vx-noir) !important; }
#offcanvas, .ct-panel-inner{ background: var(--vx-ivoire) !important; }
#offcanvas .menu-item > a{ color: var(--vx-noir) !important; }

.woocommerce-result-count, .woocommerce-ordering{ color: var(--vx-sourdine); }
.trp-floating-switcher, #trp-floater-ls{ display: none !important; }

/* ============================================================
   16. PALIERS
   ============================================================ */
@media (max-width: 1100px){
  .vx-ouverture-int{ grid-template-columns: 1fr; gap: var(--vx-r4); }
  .vx-mosaique{ height: clamp(300px, 52vw, 440px); }
  .vx-ouverture-texte{ max-width: 60ch; }
  .vx-pied-grille{ grid-template-columns: 1fr 1fr 1fr; }
  .vx-pied-grille > :first-child{ grid-column: 1 / -1; }
}
@media (max-width: 999px){
  ul.products, .products.columns-3, .products.columns-4{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .vx-univers{ grid-template-columns: repeat(2, 1fr); }
  .vx-univers-carte:nth-child(1), .vx-univers-carte:nth-child(2),
  .vx-univers-carte:nth-child(n+3){ grid-column: span 1; }
  .vx-univers-carte:nth-child(5){ grid-column: span 2; min-height: 220px; }
  .vx-etapes, .vx-confiance{ grid-template-columns: 1fr; }
}
@media (max-width: 767px){
  :root{ --vx-r5: 56px; --vx-r6: 72px; }
  .vx-compteurs{ grid-template-columns: repeat(2,1fr); }
  .vx-compteur{ padding-bottom: var(--vx-r3); }
  .vx-bandeau-int{ justify-content: center; }
  .vx-bandeau-liste li:not(:first-child){ display: none; }
  /* La recherche passe sous la marque : à cette largeur, la garder sur la même
     ligne la réduirait à un champ où l'on ne lit plus ce qu'on tape. */
  .vx-entete-int{ flex-wrap: wrap; gap: var(--vx-r2); padding: 12px 18px; }
  .vx-recherche{ order: 3; flex-basis: 100%; }
  .vx-entete-actions{ margin-left: auto; }
  .vx-entete-marque span{ font-size: 1.25rem; }
  .vx-entete-nav-int{ padding: 0 18px; gap: var(--vx-r2); }
  .vx-entete-nav .vx-nav-fin{ margin-left: var(--vx-r2); }
  .vx-pied-grille{ grid-template-columns: 1fr 1fr; gap: var(--vx-r3); }
  .vx-iban dl{ grid-template-columns: 1fr; gap: 4px var(--vx-r2); }
  .vx-iban dd{ margin-bottom: 12px; word-break: break-all; }
  .vx-mosaique{ grid-template-columns: 1fr 1fr; grid-template-rows: 1.25fr 1fr; height: clamp(280px, 78vw, 400px); }
}
@media (max-width: 560px){
  ul.products, .products.columns-3, .products.columns-4{ grid-template-columns: 1fr !important; }
  .vx-univers{ grid-template-columns: 1fr; }
  .vx-univers-carte, .vx-univers-carte:nth-child(5){ grid-column: span 1 !important; min-height: 240px; }
  .vx-ouverture-actions .vx-btn{ width: 100%; justify-content: center; }
  .vx-section{ padding-left: 18px; padding-right: 18px; }
}

/* ============================================================
   17. FUSION SOMBRE / CLAIR
   Le site alterne des bandes sombres et des bandes crème, l'or servant
   de fil conducteur. Répartition visée, règle 60-30-10 du design de luxe :
   sombre et crème se partagent la page, l'or ne dépasse jamais l'accent.

   Le mécanisme : des jetons SEMANTIQUES dont la valeur change selon le
   contexte. Un composant ne connaît que --vx-c-* et devient correct sur
   les deux fonds sans une seule règle en double.
   ============================================================ */
:root{
  --vx-c-fond:      var(--vx-creme);
  --vx-c-surface:   var(--vx-blanc);
  --vx-c-titre:     var(--vx-noir);
  --vx-c-texte:     var(--vx-texte);
  --vx-c-sourdine:  var(--vx-sourdine);
  --vx-c-faible:    var(--vx-faible);
  --vx-c-accent:    var(--vx-bleu);         /* bleu profond, 4,95 sur clair */
  --vx-c-trait:     var(--vx-trait);
  --vx-c-trait-fort:var(--vx-trait-fort);
}

/* Contexte inversé : une seule classe suffit à basculer une section. */
.vx-inverse{
  --vx-c-fond:      var(--vx-encre);
  --vx-c-surface:   var(--vx-encre-2);
  --vx-c-titre:     #FFFFFF;
  --vx-c-texte:     rgba(232,236,243,.78);
  --vx-c-sourdine:  rgba(232,236,243,.62);
  --vx-c-faible:    rgba(232,236,243,.40);
  --vx-c-accent:    var(--vx-bleu-vif);   /* bleu vif, 5,23 sur le noir du logo */
  --vx-c-trait:     rgba(232,236,243,.14);
  --vx-c-trait-fort:rgba(232,236,243,.26);

  background: var(--vx-c-fond);
  color: var(--vx-c-texte);
}
.vx-inverse h1, .vx-inverse h2, .vx-inverse h3, .vx-inverse h4{ color: var(--vx-c-titre); }
.vx-inverse p{ color: var(--vx-c-sourdine); }
.vx-inverse .vx-surtitre{ color: var(--vx-c-accent); }
.vx-inverse a{ color: var(--vx-c-accent); }
.vx-inverse a:hover{ color: #fff; }
.vx-inverse strong{ color: var(--vx-c-titre); }
.vx-inverse .vx-filet{ background: var(--vx-c-trait); }

/* Le passage d'une bande à l'autre est marqué par un filet doré, jamais
   par une coupure franche : c'est ce qui fait tenir les deux univers ensemble. */
.vx-couture{
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--vx-bleu-vif) 22%, var(--vx-bleu-vif) 78%, transparent);
  opacity: .55;
}

/* ---- Boutons dans un contexte inversé ---- */
.vx-inverse .vx-btn{ border-color: var(--vx-c-trait-fort); color: var(--vx-sur-sombre); }
.vx-inverse .vx-btn:hover{ background: var(--vx-sur-sombre); color: var(--vx-noir); border-color: var(--vx-sur-sombre); }
.vx-inverse .vx-btn--plein{ background: var(--vx-bleu-vif); border-color: var(--vx-bleu-vif); color: var(--vx-noir); }
.vx-inverse .vx-btn--plein:hover{ background: #fff; border-color: #fff; color: var(--vx-noir); }

/* ---- Encarts de confiance et étapes en contexte inversé ---- */
.vx-inverse .vx-confiance div{ background: var(--vx-c-surface); border-color: var(--vx-c-trait); }
.vx-inverse .vx-confiance svg{ color: var(--vx-c-accent); }
.vx-inverse .vx-confiance span{ color: var(--vx-c-sourdine); }
.vx-inverse .vx-etape{ border-top-color: var(--vx-c-accent); }
.vx-inverse .vx-etape::before{ color: var(--vx-c-accent); }
.vx-inverse .vx-virement{ background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }

/* ============================================================
   18. OUVERTURE ET COMPTEURS — au clair
   La page est désormais portée par le blanc : la photo produit détourée s'y
   pose sans caisson sombre autour, et la densité d'information se lit mieux.
   Une seule bande sombre subsiste dans la page, celle du paiement, en
   ponctuation. Le reste du charbon est réservé au bandeau et au pied.
   ============================================================ */

/* Le bandeau du haut reste sombre : il sépare le site du navigateur. */
.vx-bandeau{ background: #0D0D11; border-bottom: 1px solid rgba(232,236,243,.09); }

/* --- Ouverture --- */
.vx-ouverture{
  background: var(--vx-blanc);
  border-bottom: 1px solid var(--vx-trait);
  position: relative;
}
.vx-ouverture-int{ position: relative; z-index: 2; }
.vx-ouverture h1{ color: var(--vx-noir); }
.vx-ouverture h1 em{ color: var(--vx-bleu); font-style: normal; }
.vx-ouverture-texte{ color: var(--vx-texte); }
.vx-ouverture .vx-surtitre{ color: var(--vx-bleu); }
.vx-mosaique-case{ box-shadow: var(--vx-ombre); background: var(--vx-ivoire); }

/* --- Compteurs --- */
.vx-compteurs{ background: var(--vx-blanc); position: relative; z-index: 2; }
.vx-compteur{ border-top-color: var(--vx-trait); }
.vx-compteur-n{ color: var(--vx-noir); }
.vx-compteur-l{ color: var(--vx-sourdine); }

/* --- Sections de catalogue --- */
.vx-clair{ background: var(--vx-creme); }

/* Blocksy rend sa propre barre de pied de page en plus de la nôtre.
   Le pied Veyronix est injecté par wp_footer, donc hors de .ct-footer :
   masquer celui du parent ne touche pas au nôtre. */
footer.ct-footer, .ct-footer{ display: none !important; }

/* ============================================================
   19. LE MEME RYTHME SUR TOUT LE SITE
   Chaque page rejoue l'alternance de l'accueil : une bande sombre en
   ouverture, le contenu en crème, une bande sombre en ponctuation.
   ============================================================ */

/* Bandeau de catégorie : clair, en écho à l'ouverture. */
.vx-cat-entete{
  background: var(--vx-blanc);
  border-bottom: 1px solid var(--vx-trait);
  position: relative;
}
.vx-cat-entete > *{ position: relative; z-index: 2; }
.vx-cat-entete h1{ color: var(--vx-noir); }
.vx-cat-entete p{ color: var(--vx-texte); }
.vx-cat-entete .vx-surtitre{ color: var(--vx-bleu); }
/* Le filet sous le titre reprend l'accent de l'univers affiché. */
.vx-cat-entete::after{ background: var(--vx-accent, var(--vx-bleu)); opacity: 1; }

/* Le bloc virement sur les fiches produit reprend la bande sombre. */
.vx-virement.vx-inverse{
  background: var(--vx-encre);
  border: 0;
  box-shadow: none;
  padding: var(--vx-r4);
  border-radius: 3px;
}
.vx-virement.vx-inverse h3{ color: #fff; }
.vx-virement.vx-inverse .vx-surtitre{ color: var(--vx-bleu-vif); }

/* ============================================================
   20. SIGNATURES DU LOGO
   Le logo apporte deux matières que la page doit reprendre pour
   ne pas sembler posée à côté : le halo bleu et le chrome brossé.
   ============================================================ */

/* --- Chrome : réservé aux surfaces sombres --- */
/* Le dégradé chrome est invisible sur fond clair : il ne sert donc que dans le
   pied de page et les bandes sombres, jamais dans l'en-tête blanc. */
.vx-pied-marque span, .vx-inverse .vx-compteur-n{
  background: var(--vx-chrome-degrade);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Halo bleu : l'anneau lumineux du logo, repris au survol --- */
.vx-btn--plein:hover,
.vx-inverse .vx-btn--plein:hover{ box-shadow: var(--vx-halo); }

.vx-entete-marque img{ transition: filter var(--vx-transition); }
.vx-entete-marque:hover img{ filter: drop-shadow(0 0 10px rgba(28,169,248,.55)); }

/* Le filet de couture reprend le bleu, pas l'or. */
.vx-couture{
  background: linear-gradient(90deg, transparent, var(--vx-bleu-vif) 22%, var(--vx-bleu-vif) 78%, transparent);
  opacity: .5;
}

/* Trait sous les titres de section en contexte sombre, comme sous le mot du logo. */
.vx-inverse .vx-section-tete h2::after{
  content: ''; display: block;
  width: 72px; height: 2px; margin-top: var(--vx-r2);
  background: linear-gradient(90deg, var(--vx-bleu-vif), transparent);
}
.vx-section-tete--centre h2::after{ margin-left: auto; margin-right: auto;
  background: linear-gradient(90deg, transparent, var(--vx-bleu-vif), transparent); }

/* --- Focus clavier : anneau bleu, cohérent avec le halo --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .vx-btn:focus-visible{
  outline: 2px solid var(--vx-bleu-vif);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Cartes produits : liseré bleu au survol, en écho à l'anneau --- */
li.product:hover{ border-color: rgba(28,169,248,.45); }
.vx-univers-carte:hover{ box-shadow: var(--vx-ombre-fort), var(--vx-halo); }

/* Les légendes se posent sur des photos dont la luminosité varie beaucoup.
   Un voile plus dense et un léger flou garantissent la lisibilité quelle que
   soit l'image — mesuré sur la photo la plus claire du catalogue. */
.vx-mosaique-legende{
  background: linear-gradient(to top, rgba(3,6,15,.94) 0%, rgba(3,6,15,.78) 45%, rgba(3,6,15,0) 100%);
  padding-top: var(--vx-r4);
}
.vx-mosaique-legende span{ color: var(--vx-bleu-clair); }
.vx-univers-n{ color: var(--vx-bleu-clair); }
.vx-univers-fleche{ color: var(--vx-bleu-clair); }

/* ============================================================
   21. PASTILLES DE COULEUR ET PRIX BARRE
   ============================================================ */
.vx-teintes{ display: flex; align-items: center; gap: 6px; margin-bottom: var(--vx-r2); }
.vx-teinte{
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--t);
  box-shadow: inset 0 0 0 1px rgba(17,20,27,.22);
  flex: none;
}
.vx-teinte-plus{
  font-size: .68rem; color: var(--vx-sourdine); letter-spacing: .04em; margin-left: 2px;
}

/* Le prix barré doit rester lisible sans voler la vedette au prix remisé. */
.vx-prix del{
  font-family: var(--vx-corps); font-size: .8rem; font-weight: 400;
  color: var(--vx-faible); text-decoration-thickness: 1px;
  margin-right: 8px;
}
.vx-prix ins{ text-decoration: none; }
.vx-prix .vx-remise{
  display: inline-block; margin-left: 8px; padding: 2px 7px;
  font-family: var(--vx-corps); font-size: .64rem; font-weight: 600;
  letter-spacing: .06em; border-radius: 2px;
  background: var(--vx-bleu); color: #fff; vertical-align: 3px;
}

/* ============================================================
   22. CATALOGUE A FACETTES
   Colonne de filtres a gauche, grille dense a droite. C'est la mise en page
   des grands marchands : on affine sans jamais quitter la page.
   ============================================================ */
.vx-catalogue{
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: var(--vx-r4);
  align-items: start;
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px var(--vx-r5);
}
.vx-catalogue-corps{ min-width: 0; }

.vx-facettes{
  position: sticky; top: 96px;
  background: var(--vx-blanc);
  border: 1px solid var(--vx-trait);
  border-radius: 3px;
  padding: var(--vx-r3);
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
.vx-facettes-tete{
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--vx-r2);
  padding-bottom: var(--vx-r2); margin-bottom: var(--vx-r2);
  border-bottom: 1px solid var(--vx-trait);
}
.vx-facettes-tete h2{ font-size: 1.05rem; margin: 0; }
.vx-facettes-vider{ font-size: .74rem; color: var(--vx-bleu); white-space: nowrap; }

.vx-facette{ border: 0; padding: 0; margin: 0 0 var(--vx-r3); }
.vx-facette legend{
  font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vx-faible);
  padding: 0; margin-bottom: 10px;
}
.vx-facette-liste{ display: flex; flex-direction: column; gap: 2px; max-height: 230px; overflow-y: auto; }

.vx-facette-item{
  display: flex; align-items: center; gap: 9px;
  padding: 7px 6px; margin: 0; border-radius: 2px;
  font-size: .86rem !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--vx-texte) !important;
  cursor: pointer; min-height: 36px;
  transition: background var(--vx-transition);
}
.vx-facette-item:hover{ background: var(--vx-creme); }
.vx-facette-item input{
  width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0 !important;
  accent-color: var(--vx-bleu); flex: none; cursor: pointer;
}
.vx-facette-teinte{
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: var(--t); box-shadow: inset 0 0 0 1px rgba(17,20,27,.22);
}
.vx-facette-nom{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-facette-n{ font-size: .74rem; color: var(--vx-faible); flex: none; }

.vx-facette-prix{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vx-facette-prix label{ display: flex; flex-direction: column; gap: 5px; }
.vx-facette-prix span{ font-size: .68rem; color: var(--vx-faible); }
.vx-facette-prix input{ min-height: 42px !important; padding: 8px 10px !important; font-size: .88rem !important; }

.vx-ouvre-facettes{ display: none; }

/* Grille dense : quatre colonnes, cartes plus compactes. */
.vx-catalogue ul.products,
.vx-catalogue .products.columns-4{
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: var(--vx-r2) !important;
}
.vx-catalogue .vx-carte-corps{ padding: var(--vx-r2); }
.vx-catalogue .vx-carte-titre{ font-size: 1rem; }
.vx-catalogue .vx-prix{ font-size: 1.16rem; }

/* Barre de tri au-dessus de la grille */
.vx-catalogue-corps .woocommerce-result-count,
.vx-catalogue-corps .woocommerce-ordering{ margin-bottom: var(--vx-r3); }

@media (max-width: 1100px){
  .vx-catalogue{ grid-template-columns: 220px minmax(0,1fr); gap: var(--vx-r3); }
  .vx-catalogue ul.products, .vx-catalogue .products.columns-4{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 900px){
  /* La colonne devient un panneau que l'on ouvre : elle mangerait la grille. */
  .vx-catalogue{ display: block; padding-bottom: var(--vx-r4); }
  .vx-ouvre-facettes{ display: inline-flex; margin-bottom: var(--vx-r3); }
  .vx-facettes{
    position: fixed; inset: 0 auto 0 0; z-index: 999;
    width: min(88vw, 340px); max-height: none; border-radius: 0;
    transform: translateX(-101%);
    transition: transform var(--vx-transition);
    box-shadow: var(--vx-ombre-fort);
  }
  .vx-facettes.vx-ouverte{ transform: none; }
  .vx-catalogue ul.products, .vx-catalogue .products.columns-4{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 560px){
  .vx-catalogue ul.products, .vx-catalogue .products.columns-4{ grid-template-columns: 1fr !important; }
}

/* Voile derrière le panneau de filtres mobile. */
.vx-voile{
  position: fixed; inset: 0; z-index: 998;
  background: rgba(3,6,15,.55);
  opacity: 0; pointer-events: none;
  transition: opacity var(--vx-transition);
}
.vx-voile--vu{ opacity: 1; pointer-events: auto; }

/* ============================================================
   21. VIDEO DE PRESENTATION
   Sous la photo principale, au même cadre qu'elle : une vidéo qui
   déborderait de la colonne casserait l'alignement avec le résumé.
   ============================================================ */
.vx-video{
  margin-top: var(--vx-r2);
  background: var(--vx-blanc);
  border: 1px solid var(--vx-trait);
  border-radius: 3px;
  overflow: hidden;
}
.vx-video video{
  display: block;
  width: 100%; height: auto;
  max-height: 70vh;
  background: var(--vx-encre);
}

/* Lien de relecture du reçu, dans la liste des justificatifs déposés. */
.vx-recu-liste a.vx-recu-voir{
  margin-left: auto;
  font-size: .76rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--vx-bleu); text-decoration: underline;
}
.vx-recu-liste li{ display: flex; align-items: center; gap: 8px; }

/* Adresse d'envoi du reçu : c'est la voie principale, elle doit se voir
   autant que l'IBAN et se copier aussi facilement. */
.vx-recu-mail{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: var(--vx-r2) 0;
  padding: var(--vx-r2);
  background: var(--vx-ivoire);
  border: 1px solid var(--vx-trait);
  border-radius: 3px;
}
.vx-recu-mail a{ font-weight: 600; }
.vx-recu-mail-note{
  flex-basis: 100%;
  font-size: .82rem; color: var(--vx-sourdine);
}