/* =========================================================================
   VELOLOD — couche WordPress / WooCommerce
   -------------------------------------------------------------------------
   tokens.css, base.css et components.css sont repris tels quels du prototype
   validé. Ce fichier n'ajoute que ce que WordPress et WooCommerce apportent
   en plus : classes du cœur, éditeur de blocs, grilles de boucle produit,
   fiche produit, panier, commande, compte client.

   Règle de travail : on ne réécrit jamais un composant existant ici, on lui
   raccroche les classes de WooCommerce.
   ========================================================================= */

/* ---------- Classes du cœur WordPress ------------------------------------ */
.alignleft   { float: left; margin: 0 var(--space-5) var(--space-4) 0; }
.alignright  { float: right; margin: 0 0 var(--space-4) var(--space-5); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide   { width: min(100%, 1100px); margin-inline: auto; }
.alignfull   { width: 100%; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
  font-size: var(--step--2);
  color: var(--text-muted);
  padding-top: var(--space-2);
}

.sticky .post-card { outline: 2px solid var(--accent); outline-offset: 4px; }
.bypostauthor { }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed !important; top: 12px; left: 12px;
  width: auto; height: auto; clip-path: none;
  padding: var(--space-3) var(--space-4);
  background: #fff; z-index: 9999; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

/* ---------- Marqueur de donnée manquante --------------------------------- */
/* Une mention légale absente doit sauter aux yeux en recette, pas se deviner
   en production. */
.placeholder {
  display: inline-block;
  padding: 2px 8px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(229, 1, 11, .06);
  color: var(--accent);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .04em;
}

/* ---------- En-tête de page ---------------------------------------------- */
.page-head {
  position: relative;
  padding-block: var(--space-6) var(--space-5);
  background: var(--vl-ink-50);
  border-bottom: 1px solid var(--border);
}
.page-head .breadcrumb { margin-bottom: var(--space-3); }
/*
 * Le titre de rayon montait à 44 px et le bandeau à 203 px : sur un écran
 * d'ordinateur portable, la première rangée de produits n'apparaissait qu'à
 * 547 px du haut. Le rayon doit se voir, pas le titre du rayon.
 */
.page-head .section-title { font-size: var(--step-3); }
/*
 * La section qui suit immédiatement un bandeau de page n'a pas besoin de
 * reprendre la respiration complète : le bandeau l'a déjà donnée.
 */
.page-head + .section { padding-top: var(--space-6); }
.page-head__intro {
  max-width: 68ch;
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--step-0);
}
.page-head--cover { background: var(--vl-ink-900); color: #fff; border-bottom: 0; }
.page-head--cover .page-head__intro { color: rgba(255, 255, 255, .78); }
.page-head--cover .breadcrumb,
.page-head--cover .breadcrumb a { color: rgba(255, 255, 255, .72); }
.page-head--cover .container { position: relative; z-index: 1; }
.page-head__media { position: absolute; inset: 0; overflow: hidden; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; }
.page-head__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14, 17, 20, .92) 0%, rgba(14, 17, 20, .72) 48%, rgba(14, 17, 20, .28) 100%);
}

/* Sous-rayons */
.subcats { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.subcats a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: #fff; text-decoration: none; font-weight: 700; font-size: var(--step--1);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.subcats a:hover { border-color: var(--accent); color: var(--accent); }
.subcats span { color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 500; }

/* ---------- Contenu rédactionnel ----------------------------------------- */
/* -------------------------------------------------------------------------
 * Prose : longueur de ligne et justification.
 *
 * Le panneau « Description » de WooCommerce n'avait aucun cadrage : le texte
 * courait sur toute la largeur du conteneur, soit près de 150 signes par
 * ligne. On lui applique le même traitement qu'aux pages éditoriales.
 *
 * La justification s'accompagne de la césure automatique : sans elle, le
 * français produit des blancs béants entre les mots. Elle est désactivée en
 * dessous de 720 px, où une colonne étroite justifiée devient illisible.
 * ---------------------------------------------------------------------- */
/*
 * La contrainte de longueur de ligne porte sur le texte courant, pas sur le
 * panneau : une table de caractéristiques a besoin de toute la largeur, sinon
 * la colonne des intitulés tombe à 130 px et « Manette de dérailleur » se
 * casse sur deux lignes.
 */
.woocommerce-Tabs-panel--description > p,
.woocommerce-Tabs-panel--description > ul,
.woocommerce-Tabs-panel--description > ol,
.woocommerce-Tabs-panel--description > h2,
.woocommerce-Tabs-panel--description > h3,
#tab-description > p,
#tab-description > ul,
#tab-description > ol,
#tab-description > h2,
#tab-description > h3 { max-width: 78ch; }

.woocommerce-Tabs-panel--description > * + *,
#tab-description > * + * { margin-top: var(--space-4); }

/* Les titres du contenu importé restent des sous-titres, pas des titres de page. */
.woocommerce-Tabs-panel--description h2,
#tab-description h2 { font-size: var(--step-2); }
.woocommerce-Tabs-panel--description h3,
#tab-description h3 { font-size: var(--step-1); }

/*
 * Tables de caractéristiques issues des fiches fournisseur : aucun style ne
 * leur était appliqué (padding de 1 px, pas de filet, colonnes au hasard).
 * On les met au format tableau de spécifications : intitulé à gauche, valeur
 * à droite, une ligne sur deux teintée pour suivre la lecture.
 */
.woocommerce-Tabs-panel--description table,
#tab-description table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  margin-block: var(--space-5);
}
.woocommerce-Tabs-panel--description th,
.woocommerce-Tabs-panel--description td,
#tab-description th,
#tab-description td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  hyphens: manual;
}
.woocommerce-Tabs-panel--description tr > *:first-child,
#tab-description tr > *:first-child {
  width: 30%;
  font-weight: 700;
  color: var(--text-muted);
}
.woocommerce-Tabs-panel--description tbody tr:nth-child(odd),
#tab-description tbody tr:nth-child(odd) { background: var(--vl-ink-50); }

@media (max-width: 720px) {
  .woocommerce-Tabs-panel--description tr > *:first-child,
  #tab-description tr > *:first-child { width: 42%; }
  .woocommerce-Tabs-panel--description th,
  .woocommerce-Tabs-panel--description td,
  #tab-description th,
  #tab-description td { padding: var(--space-2) var(--space-3); }
}

.prose p,
.woocommerce-Tabs-panel--description p,
#tab-description p,
.woocommerce-product-details__short-description p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

@media (max-width: 720px) {
  .prose p,
  .woocommerce-Tabs-panel--description p,
  #tab-description p,
  .woocommerce-product-details__short-description p {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--step-3); margin-top: var(--space-7); }
.prose h3 { font-size: var(--step-2); margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-2); }
.prose img, .prose figure { border-radius: var(--radius-md); }
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-5);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--vl-ink-700);
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.prose th, .prose td { padding: var(--space-3); border-bottom: 1px solid var(--border); text-align: left; }
.prose code {
  background: var(--vl-ink-50); padding: 2px 6px;
  border-radius: 4px; font-size: .9em;
}
.prose a { color: var(--accent); text-underline-offset: 3px; }

.entry__cover { margin-block: var(--space-6); }
.entry__cover img { width: 100%; border-radius: var(--radius-lg); }
.entry__meta { color: var(--text-muted); font-size: var(--step--1); margin-top: var(--space-3); }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.tag-list a {
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--vl-ink-100); font-size: var(--step--2); font-weight: 700; text-decoration: none;
}

/* ---------- Grille d'articles -------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
}
.post-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.post-card__media { display: block; aspect-ratio: 4 / 3; background: var(--vl-ink-50); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.post-card__meta { color: var(--text-muted); font-size: var(--step--2); margin: 0; }
.post-card__title { font-size: var(--step-1); line-height: 1.25; margin: 0; }
.post-card__title a { text-decoration: none; }
.post-card__title a:hover { color: var(--accent); }
.post-card .link-arrow { margin-top: auto; }

.post-nav { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; margin-block: var(--space-7); }
.post-nav__link {
  display: grid; gap: 4px; padding: var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none;
}
.post-nav__link:hover { border-color: var(--accent); }
.post-nav__link span { font-size: var(--step--2); color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.post-nav__link--next { text-align: right; }

/* ---------- États vides et pagination ------------------------------------ */
.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--vl-ink-50);
}
.empty-state h2 { font-size: var(--step-2); }
.empty-state p { color: var(--text-muted); max-width: 52ch; margin-inline: auto; margin-top: var(--space-3); }

.pagination, .woocommerce-pagination { margin-top: var(--space-6); }
/*
 * ATTENTION : WooCommerce pose la classe « page-numbers » sur le <ul> ET sur
 * chaque lien. Une règle de bouton écrite sur « .page-numbers » s'appliquait
 * donc aussi au conteneur : le <ul> devenait une case de 44 px de haut et les
 * numéros débordaient par-dessus le pied de page. Le conteneur et les cases
 * sont désormais traités séparément — ne jamais revenir à un sélecteur nu.
 */
.pagination .nav-links,
.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul {
  display: flex !important; flex-flow: row wrap; gap: var(--space-2);
  justify-content: center; align-items: center;
  width: 100%; min-width: 0; height: auto; padding: 0; margin: 0;
  list-style: none; border: 0; background: none;
}
.woocommerce-pagination li {
  border: 0 !important; margin: 0 !important; padding: 0 !important;
  display: block; float: none;
}
/* Cases plus compactes : la pagination guide, elle ne domine pas la page. */
.pagination .nav-links > .page-numbers,
.woocommerce-pagination li > .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 36px; height: 36px; padding: 0 var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; text-decoration: none; font-weight: 700;
  font-size: var(--step--1); line-height: 1;
  transition: border-color var(--dur-base) var(--ease-out);
}
.pagination .nav-links > .page-numbers:hover,
.woocommerce-pagination li > .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .nav-links > .page-numbers.current,
.woocommerce-pagination li > .page-numbers.current {
  background: var(--vl-ink-900); border-color: var(--vl-ink-900); color: #fff;
}
/* Sur écran tactile, la cible repasse à 44 px : on ne rétrécit pas le doigt. */
@media (pointer: coarse) {
  .pagination .nav-links > .page-numbers,
  .woocommerce-pagination li > .page-numbers { min-width: 44px; height: 44px; }
}

/* ---------- Indice éditorial VELOLOD ------------------------------------- */
/*
 * Étoiles + libellé, sous le titre produit. Le libellé n'est pas un ornement :
 * il est ce qui distingue une appréciation maison d'une note client. Il ne doit
 * donc jamais être masqué en CSS — ni display:none, ni taille nulle, ni
 * couleur transparente.
 */
.vl-demand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  line-height: 1.2;
}
.vl-demand__stars { display: inline-flex; gap: 1px; flex: none; }
.vl-demand__star { color: var(--vl-ink-200); }
.vl-demand__star.is-on { color: var(--vl-amber-400); }
.vl-demand__label {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Fiche produit : juste sous le titre, avant la référence. */
.vl-demand--single { margin-top: var(--space-2); font-size: var(--step-0); }

/* Carte produit : plus discret, il ne doit pas concurrencer le prix. */
.vl-demand--card { margin-top: var(--space-2); font-size: var(--step--1); gap: 6px; }
.vl-demand--card .vl-demand__label { font-size: 10px; letter-spacing: .08em; }

/* ---------- Filtres de rayon --------------------------------------------- */
/*
 * Le thème ne charge pas woocommerce-general.css : tout ce qui suit habille
 * les widgets WooCommerce dans le langage VELOLOD — fond blanc, texte noir,
 * touches rouges. Sans ces règles, le curseur de prix est invisible (la piste
 * et les poignées n'ont aucun style propre) et les listes retombent en puces.
 */
.filters__head { display: none; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.filters__head h2 { font-size: var(--step-1); margin: 0; }
.filter-group__title { font-weight: 800; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--space-3); }
.filters ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.filters ul a { display: flex; justify-content: space-between; gap: var(--space-3); text-decoration: none; font-size: var(--step--1); }
.filters ul a:hover { color: var(--accent); }
.filters .count { color: var(--vl-ink-400); font-variant-numeric: tabular-nums; font-size: var(--step--2); }
.filters .chosen > a { color: var(--accent); font-weight: 700; }

/* Le compteur est un frère du lien, pas son enfant : sans cette règle il
   tombait à la ligne sous chaque catégorie. */
.filters li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.filters li > a { flex: 1 1 auto; justify-content: flex-start; }
/* WooCommerce écrit déjà les parenthèses dans le compteur : ne pas en ajouter. */
.filters li > .count { margin-left: auto; }
/* Les sous-rayons prennent toute la largeur, en retrait. */
/* Retrait par le seul padding : une marge gauche élargirait la liste et la
   ferait déborder de son conteneur à défilement. */
.filters ul ul.children {
  flex: 1 0 100%;
  min-width: 0;
  margin: var(--space-2) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--vl-ink-100);
}
.filters ul ul.children a { font-size: var(--step--2); color: var(--text-muted); }
.filters ul ul.children a:hover { color: var(--accent); }
/* Rayon en cours de consultation : repère, pas décoration. */
.filters .current-cat > a,
.filters .woocommerce-widget-layered-nav-list__item--chosen > a { color: var(--accent); font-weight: 800; }

/*
 * Listes longues bornées.
 *
 * Avec 30 marques et 40 tailles, la colonne de filtres devenait deux fois plus
 * haute que la grille produits et laissait un grand vide à droite. Chaque
 * liste défile dans sa propre fenêtre : le client voit d'un coup d'œil qu'il y
 * a plus de choix, sans que la page s'étire.
 */
.filters .widget_brand_nav > ul,
.filters .widget_layered_nav > ul,
.filters .widget_product_categories > ul.product-categories {
  max-height: 300px;
  overflow-y: auto;
  /* Sans cette ligne, l'indentation des sous-rayons pousse la liste au-delà
     du conteneur : une barre horizontale apparaît et rogne les compteurs. */
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: var(--space-2);
  scrollbar-width: thin;
  scrollbar-color: var(--vl-ink-200) transparent;
}
.filters .widget_brand_nav > ul::-webkit-scrollbar,
.filters .widget_layered_nav > ul::-webkit-scrollbar,
.filters .widget_product_categories > ul.product-categories::-webkit-scrollbar { width: 6px; }
.filters .widget_brand_nav > ul::-webkit-scrollbar-thumb,
.filters .widget_layered_nav > ul::-webkit-scrollbar-thumb,
.filters .widget_product_categories > ul.product-categories::-webkit-scrollbar-thumb {
  background: var(--vl-ink-200); border-radius: var(--radius-pill);
}

/* ---- Curseur de prix ---------------------------------------------------- */
.filters .price_slider_wrapper { display: grid; gap: var(--space-4); }
.filters .price_slider {
  position: relative; height: 4px; margin: var(--space-4) 9px var(--space-2);
  background: var(--vl-ink-100); border: 0; border-radius: var(--radius-pill);
}
.filters .price_slider .ui-slider-range {
  position: absolute; top: 0; height: 100%;
  background: var(--accent); border: 0; border-radius: var(--radius-pill);
}
.filters .price_slider .ui-slider-handle {
  position: absolute; top: 50%; width: 18px; height: 18px; margin-left: -9px;
  transform: translateY(-50%);
  background: var(--vl-ink-900); border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 6px rgba(20, 23, 26, .28);
  cursor: grab; outline: 0; z-index: 2;
}
.filters .price_slider .ui-slider-handle:last-of-type { z-index: 3; }
.filters .price_slider .ui-slider-handle:hover { background: var(--accent); }
.filters .price_slider .ui-slider-handle:active { cursor: grabbing; }
.filters .price_slider .ui-slider-handle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.filters .price_slider_amount {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  font-size: var(--step--1);
}
/* Les deux champs sont pilotés par le curseur : les afficher créerait deux
   sources de vérité pour la même valeur. */
.filters .price_slider_amount input[type="text"] { display: none; }
.filters .price_slider_amount .price_label {
  order: -1; flex: 1 0 100%; font-weight: 700; color: var(--vl-ink-900);
  font-variant-numeric: tabular-nums;
}
.filters .price_slider_amount .button {
  padding: .55rem var(--space-4); min-height: 38px;
  background: var(--vl-ink-900); color: #fff; border: 0; border-radius: var(--radius-sm);
  font-size: var(--step--1); font-weight: 800; letter-spacing: .04em; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.filters .price_slider_amount .button:hover { background: var(--accent); }
.filters .price_slider_amount .clear { display: none; }

/* ---- Filtres actifs et réinitialisation --------------------------------- */
.filters .woocommerce-widget-layered-nav-list__item--chosen a,
.filters .widget_layered_nav_filters ul { gap: var(--space-2); }
.filters .widget_layered_nav_filters ul { display: flex; flex-wrap: wrap; }
.filters .widget_layered_nav_filters li { display: inline-flex; }
.filters .widget_layered_nav_filters li a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--vl-ink-100); font-size: var(--step--2); font-weight: 700;
}
.filters .widget_layered_nav_filters li a::before { content: "\00D7"; font-weight: 800; color: var(--accent); }
.filters .widget_layered_nav_filters li a:hover { background: var(--vl-ink-200); color: var(--vl-ink-900); }

.filters__reset {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: 40px; margin-bottom: var(--space-4);
  padding: 0 var(--space-4);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: #fff; color: var(--accent);
  font-size: var(--step--1); font-weight: 800; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.filters__reset:hover { background: var(--accent); color: #fff; }

@media (max-width: 980px) {
  .filters__head { display: flex; }
}

/* La barre d'outils : compteur + tri natifs de WooCommerce. */
.woocommerce-result-count { margin: 0; color: var(--text-muted); font-size: var(--step--1); }
.woocommerce-ordering { margin: 0 0 0 auto; }
.woocommerce-ordering select {
  padding: .7rem 2.4rem .7rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff;
  font: inherit; font-size: var(--step--1); font-weight: 700;
}

/* ---------- Boucle produit ----------------------------------------------- */
/* Grille dense : cinq produits de front sur un grand écran, deux sur
   mobile. Une boutique se juge à la quantité qu'on embrasse d'un regard. */
ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr));
  gap: var(--space-4);
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 560px) {
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}
/*
 * WooCommerce pose un clearfix ::before/::after sur .products. Dans un
 * conteneur en grille, ces pseudo-éléments deviennent des cases : la première
 * carte produit démarrait en colonne 2 et chaque page laissait un trou en haut
 * à gauche. La règle simple était écrasée par la feuille de WooCommerce.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }
ul.products > li { margin: 0 !important; width: auto !important; float: none !important; clear: none !important; }
ul.products > li .product-card { height: 100%; }

/* Le rail réutilise la même carte, mais en colonne défilante. */
.rail__track > .product-card { scroll-snap-align: start; }

/* ---------- Fiche produit ------------------------------------------------ */
/*
 * WooCommerce rend <div class="product"> sans conteneur : la fiche s'étalait
 * d'un bord à l'autre de la fenêtre et le visuel débordait à gauche.
 * On lui applique ici la même largeur et les mêmes gouttières que .container.
 */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--space-7);
  align-items: start;
  width: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
  padding-block: var(--space-6) var(--space-8);
}
/*
 * WooCommerce impose float:left / width:48% à la galerie et au résumé. Dans
 * une grille, le float est ignoré mais les 48% restaient : les deux colonnes
 * n'occupaient que la moitié de leur piste.
 */
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary,
.woocommerce div.product > .woocommerce-product-gallery,
.woocommerce div.product > div.summary {
  /* !important assumé : on écrase une feuille tierce dont le sélecteur est plus
     spécifique (.woocommerce div.product div.summary). */
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
.single-product div.product > .woocommerce-product-gallery { grid-column: 1; }
/*
 * Le résumé reste dans le flux. En « sticky », il restait figé sous la barre de
 * navigation pendant que la description défilait dessous : titre et texte se
 * chevauchaient. Un bloc d'achat immobile vaut mieux qu'un bloc qui suit.
 */
.single-product div.product > .summary { grid-column: 2; position: static; }
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .product_meta { grid-column: 1 / -1; }

.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery__wrapper { border-radius: var(--radius-lg); overflow: hidden; background: var(--vl-ink-50); }
.woocommerce-product-gallery img { border-radius: var(--radius-lg); }
.woocommerce-product-gallery .flex-control-thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3);
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
}
.woocommerce-product-gallery .flex-control-thumbs li { margin: 0; }
.woocommerce-product-gallery .flex-control-thumbs img {
  border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover { border-color: var(--accent); }

.summary > * + * { margin-top: var(--space-4); }
.summary .product_title { margin: 0; }
/*
 * Les intitulés fournisseur montent à cent signes (« VTC Électrique Cube
 * Kathmandu Hybrid One 800 Easy Entry Shimano Cues 10V 800 Wh 700 mm Vert Pea
 * 2026 »). À la taille d'un titre de page, un tel nom occupait quatre lignes et
 * mangeait tout le premier écran. Échelle propre à la fiche, plus resserrée.
 */
.summary .product_title { font-size: clamp(1.25rem, 1.05rem + 0.80vw, 1.62rem); }
.product__brand {
  display: inline-block; font-size: var(--step--2); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}

.buybox__price { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--vl-ink-50); }
.buybox__price .price { font-size: var(--step-2); font-weight: 800; margin: 0; }
.price__legal { font-size: var(--step--2); color: var(--text-muted); margin: var(--space-2) 0 var(--space-3); }
.availability__note { font-size: var(--step--2); color: var(--text-muted); margin: var(--space-2) 0 0; }

/* Référence / EAN sous le titre, puis bloc de service sous le bouton d'achat.
   Les deux sont produits par inc/woocommerce.php. */
.pdp__refs {
  font-size: var(--step--2); color: var(--text-muted);
  letter-spacing: .04em; margin: var(--space-2) 0 0;
}
.pdp__service {
  display: grid; gap: var(--space-3);
  padding-top: var(--space-5); border-top: 1px solid var(--border);
  font-size: var(--step--1);
}
.pdp__service > div { display: flex; gap: var(--space-3); align-items: flex-start; }
.pdp__service svg { flex: none; color: var(--accent); margin-top: 2px; }
.pdp__service strong { display: block; }

/* Fiche visible, achat fermé — prix non arrêté ou fiche technique en
   validation. Le bloc remplace le bouton d'achat : il doit se lire comme une
   information, pas comme une erreur. Produit par inc/availability.php. */
.price-pending {
  display: inline-block;
  font-size: var(--step-0); font-weight: 700; color: var(--text-muted);
  letter-spacing: .01em;
}
.sale-state {
  display: grid; gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--vl-ink-50);
}
.sale-state__title {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0; font-weight: 800; font-size: var(--step-1);
}
.sale-state__title svg { flex: none; color: var(--accent); }
.sale-state__text { margin: 0; font-size: var(--step--1); color: var(--text-muted); }
.sale-state__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.sale-state__actions .btn { flex: 1 1 auto; justify-content: center; }

.product_meta { font-size: var(--step--1); color: var(--text-muted); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.product_meta > span { display: block; padding-block: 3px; }

/* Formulaire d'achat */
form.cart { display: grid; gap: var(--space-4); }
form.cart .quantity { display: inline-flex; }
.quantity input.qty {
  width: 84px; height: 52px; padding: 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-weight: 700; text-align: center;
}
form.cart .button,
.single_add_to_cart_button { width: 100%; }
table.variations { width: 100%; border-collapse: collapse; }
table.variations th, table.variations td { padding-block: var(--space-2); text-align: left; vertical-align: middle; }
table.variations select {
  width: 100%; padding: .8rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font: inherit;
}
.woocommerce-variation-price { font-size: var(--step-2); font-weight: 800; }
.reset_variations { font-size: var(--step--2); }

/* Onglets */
.woocommerce-tabs { margin-top: var(--space-8); }
.woocommerce-tabs ul.tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  list-style: none; margin: 0 0 var(--space-6); padding: 0 0 var(--space-2);
  border-bottom: 1px solid var(--border);
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs a {
  display: inline-block; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: 800; text-transform: uppercase; font-size: var(--step--1);
  letter-spacing: .04em; text-decoration: none; color: var(--text-muted);
}
.woocommerce-tabs ul.tabs li.active a { color: var(--vl-ink-900); box-shadow: inset 0 -3px 0 var(--accent); }
.woocommerce-tabs .panel { max-width: 80ch; }
.woocommerce-tabs .panel h2 { font-size: var(--step-2); }
.shop_attributes { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.shop_attributes th, .shop_attributes td { padding: var(--space-3); border-bottom: 1px solid var(--border); text-align: left; }
.shop_attributes th { width: 34%; font-weight: 800; }

/* Produits liés */
.related > h2, .up-sells > h2, .cross-sells > h2 { font-size: var(--step-3); margin-bottom: var(--space-5); }

/* ---------- Avis produits ------------------------------------------------ */
/* -------------------------------------------------------------------------
 * Notation par étoiles du formulaire d'avis.
 *
 * WooCommerce écrit cinq liens dont le texte est « 1 étoile sur 5 », « 2
 * étoiles sur 5 »… et compte sur sa propre police d'icônes pour les remplacer
 * par des étoiles. Cette police n'est pas chargée ici : les libellés
 * s'affichaient en toutes lettres. On dessine les étoiles avec un caractère
 * typographique, sans dépendance.
 *
 * Le texte reste dans le document (déporté hors cadre) : il sert de nom
 * accessible aux lecteurs d'écran et au clavier.
 * ---------------------------------------------------------------------- */
#review_form p.stars {
  display: flex; gap: 4px; align-items: center;
  margin: var(--space-2) 0 var(--space-4);
}
#review_form p.stars span { display: flex; gap: 4px; }
#review_form p.stars a {
  position: relative;
  display: inline-block; width: 1.5em; height: 1.5em;
  font-size: var(--step-2); line-height: 1.5em;
  overflow: hidden; text-indent: -9999px; text-decoration: none;
}
#review_form p.stars a::before {
  content: "\2605";
  position: absolute; inset: 0;
  text-indent: 0; text-align: center;
  color: var(--vl-ink-200);
  transition: color var(--dur-fast) var(--ease-out);
}
/* Survol : les étoiles s'allument jusqu'au curseur, pas au-delà. */
#review_form p.stars:hover a::before { color: var(--vl-amber-400); }
#review_form p.stars a:hover ~ a::before { color: var(--vl-ink-200); }
/* Sélection : WooCommerce marque « selected » la liste et « active » le choix. */
#review_form p.stars.selected a::before { color: var(--vl-amber-400); }
#review_form p.stars.selected a.active ~ a::before { color: var(--vl-ink-200); }
#review_form p.stars a:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs);
}

#reviews .commentlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
#reviews .comment_container { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-4); }
#reviews .avatar { border-radius: 50%; }
#reviews .comment-text { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); }
.star-rating { color: var(--accent); }
.woocommerce-noreviews {
  padding: var(--space-6); border: 1px dashed var(--border); border-radius: var(--radius-md);
  background: var(--vl-ink-50); color: var(--text-muted); text-align: center;
}
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); }
.review-card {
  margin: 0; padding: var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff;
}
.review-card__rating { color: var(--accent); font-size: var(--step-0); }
.review-card blockquote { margin: var(--space-3) 0; font-size: var(--step-0); }
.review-card figcaption { font-size: var(--step--1); color: var(--text-muted); display: grid; gap: 2px; }

/* ---------- Messages WooCommerce ----------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--vl-ink-50);
  font-size: var(--step--1);
}
.woocommerce-message { border-left-color: #128A4E; background: #F0FAF4; }
.woocommerce-info    { border-left-color: var(--vl-ink-500); }
.woocommerce-error   { border-left-color: var(--accent); background: #FDF2F2; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* ---------- Panier -------------------------------------------------------- */
.woocommerce-cart-form { margin-bottom: var(--space-7); }
table.shop_table {
  width: 100%; border-collapse: collapse; font-size: var(--step--1);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
table.shop_table th {
  text-align: left; padding: var(--space-4);
  background: var(--vl-ink-50);
  font-size: var(--step--2); text-transform: uppercase; letter-spacing: .06em;
}
table.shop_table td { padding: var(--space-4); border-top: 1px solid var(--border); vertical-align: middle; }
table.shop_table .product-thumbnail img { width: 84px; border-radius: var(--radius-sm); }
table.shop_table .product-name a { font-weight: 700; text-decoration: none; }
table.shop_table .product-remove a {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--vl-ink-100); color: var(--vl-ink-700);
  text-decoration: none; font-size: 16px; line-height: 1;
}
table.shop_table .product-remove a:hover { background: var(--accent); color: #fff; }
.actions .coupon { display: flex; gap: var(--space-2); }
.actions .coupon input {
  padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit;
}

.cart_totals, .cart-collaterals { max-width: 460px; margin-left: auto; }
.cart_totals h2 { font-size: var(--step-2); margin-bottom: var(--space-4); }
.cart_totals .order-total .amount { font-size: var(--step-2); }
.wc-proceed-to-checkout { margin-top: var(--space-4); }
.wc-proceed-to-checkout .button { width: 100%; }

/* ---------- Commande ------------------------------------------------------ */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
/* Même correctif que sur la fiche produit : WooCommerce fixe float + 47%
   sur ces deux colonnes, ce qui les réduit de moitié dans une grille. */
.woocommerce-checkout .col2-set > .col-1,
.woocommerce-checkout .col2-set > .col-2 { width: 100%; float: none; }
#customer_details + #order_review_heading { margin-top: var(--space-7); }
.woocommerce-checkout h3 { font-size: var(--step-2); margin-bottom: var(--space-4); }

.form-row { display: grid; gap: 6px; margin-bottom: var(--space-4); }
.form-row label { font-size: var(--step--1); font-weight: 700; }
.form-row .required { color: var(--accent); text-decoration: none; }
.form-row input.input-text,
.form-row textarea,
.form-row select,
.select2-container .select2-selection--single {
  width: 100%; padding: .85rem 1rem; min-height: 50px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; font: inherit;
}
.form-row input:focus-visible,
.form-row textarea:focus-visible,
.form-row select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.woocommerce-invalid input.input-text { border-color: var(--accent); }

#order_review { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--vl-ink-50); }
#payment .wc_payment_methods { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
#payment .wc_payment_method label { font-weight: 700; }
#payment .payment_box { font-size: var(--step--1); color: var(--text-muted); padding: var(--space-3) 0 0; }
#place_order { width: 100%; }
.woocommerce-terms-and-conditions-wrapper { font-size: var(--step--2); margin-bottom: var(--space-4); }

/* ---------- Compte client ------------------------------------------------- */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.woocommerce-MyAccount-navigation a {
  display: block; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 700; font-size: var(--step--1);
}
.woocommerce-MyAccount-navigation a:hover { background: var(--vl-ink-50); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--vl-ink-900); color: #fff; }

/* ---------- Boutons WooCommerce → boutons du design system ---------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button,
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: .95rem 1.6rem; min-height: 50px;
  border: 0; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff;
  font: inherit; font-weight: 800; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-block-button__link:hover { background: var(--accent-hover); color: #fff; }
.woocommerce .button:active { transform: translateY(1px); }
.woocommerce .button:disabled,
.woocommerce .button.disabled { opacity: .5; cursor: not-allowed; }
.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--vl-ink-900); }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: var(--vl-ink-700); }

.product-card__actions .button {
  padding: .7rem 1rem; min-height: 44px; font-size: var(--step--1);
}
/* « Voir la fiche » sur un produit non achetable : le bouton doit se lire
   comme un lien secondaire, pas comme un achat. */
.product-card__actions a.button:not(.add_to_cart_button) {
  background: var(--vl-ink-900);
}
.product-card__actions a.button:not(.add_to_cart_button):hover { background: var(--vl-ink-700); }
.product-card__actions .added_to_cart {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1rem; min-height: 44px; border-radius: var(--radius-sm);
  background: var(--vl-success-50); color: var(--vl-success-500);
  font-weight: 800; font-size: var(--step--2); text-decoration: none;
}

/* On neutralise la pastille de promotion générique : la nôtre est dans
   loop/sale-flash.php et n'apparaît que si la promotion est datée. */
.woocommerce span.onsale {
  position: absolute; top: var(--space-3); left: var(--space-3);
  min-width: 0; min-height: 0; padding: 4px 10px; margin: 0;
  border-radius: var(--radius-pill); line-height: 1.4;
  background: var(--accent); color: #fff;
  font-size: var(--step--2); font-weight: 800;
}

/* ---------- Fil d'Ariane -------------------------------------------------- */
.woocommerce-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--step--2); color: var(--text-muted); margin: 0 0 var(--space-4);
}
.woocommerce-breadcrumb a { color: inherit; text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--accent); }

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 1100px) {
  .single-product div.product { grid-template-columns: 1fr; }
  .single-product div.product > .summary { position: static; grid-column: 1; }
}

@media (max-width: 860px) {
  .woocommerce-checkout .col2-set,
  .woocommerce-account .woocommerce,
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__link--next { text-align: left; }

  /* Le tableau du panier devient une pile de lignes lisibles au pouce. */
  table.shop_table thead { display: none; }
  table.shop_table, table.shop_table tbody, table.shop_table tr, table.shop_table td { display: block; width: 100%; }
  table.shop_table tr { border-top: 1px solid var(--border); padding: var(--space-3) 0; }
  table.shop_table td { border: 0; padding: var(--space-2) var(--space-4); display: flex; justify-content: space-between; gap: var(--space-4); }
  table.shop_table td::before { content: attr(data-title); font-weight: 800; font-size: var(--step--2); text-transform: uppercase; letter-spacing: .06em; }
  table.shop_table td.product-thumbnail::before { content: none; }
  .cart_totals, .cart-collaterals { max-width: none; }
}

/* ---------- Impression ---------------------------------------------------- */
@media print {
  .header, .footer, .topbar, .nav, .quicknav, .drawer, .scrim,
  .rail__btns, .hero__nav, .hero__dots, .newsletter, form.cart { display: none !important; }
  .site-main { padding: 0; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ---------- Styles de blocs du thème (front) ----------------------------- */
.is-style-ghost .wp-block-button__link {
  background: transparent; color: var(--vl-ink-900);
  box-shadow: inset 0 0 0 2px var(--vl-ink-900);
}
.is-style-ghost .wp-block-button__link:hover { background: var(--vl-ink-900); color: #fff; }

.is-style-card {
  padding: var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff;
}

.is-style-display { font-family: var(--font-display); font-style: italic; letter-spacing: -0.03em; }

.is-style-checks { list-style: none; padding-left: 0; }
.is-style-checks li { position: relative; padding-left: 1.8rem; }
.is-style-checks li + li { margin-top: var(--space-2); }
.is-style-checks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 12px; height: 7px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* =========================================================================
   Pages légales, marqueurs de donnée manquante et consentement
   ========================================================================= */

/* Marqueur affiché à la place d'une valeur non renseignée. Il est volontairement
   voyant : une mention légale absente doit se remarquer, pas se deviner. */
mark.todo {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(229, 1, 11, .08);
  color: var(--accent);
  font-size: .88em;
  font-weight: 700;
  letter-spacing: .02em;
}

.legal-warning {
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: #FDF2F2;
  font-size: var(--step--1);
}
.legal-warning strong { color: var(--accent); }

/* Le formulaire type de rétractation et les tableaux de cookies restent
   lisibles même sur une page étroite. */
.prose table { display: block; overflow-x: auto; white-space: nowrap; }
@media (min-width: 700px) {
  .prose table { display: table; white-space: normal; }
}

/* ---------- Liens légaux du pied de page --------------------------------- */
.footer__policies {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--step--2);
}
.footer__policies a,
.footer__link-btn {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  border: 0; background: none; padding: 0;
  font: inherit; cursor: pointer;
}
.footer__policies a:hover,
.footer__link-btn:hover { color: #fff; text-decoration: underline; }
.footer__link-btn { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bandeau de consentement -------------------------------------- */
.consent {
  position: fixed; inset: auto 0 0 0; z-index: 9998;
  display: flex; justify-content: center;
  padding: var(--gutter);
  pointer-events: none;
}
.consent__panel {
  pointer-events: auto;
  width: min(100%, 720px);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  animation: vl-consent-in var(--dur-base) var(--ease-out) both;
}
@keyframes vl-consent-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .consent__panel { animation: none; }
}

.consent__title { font-size: var(--step-1); margin: 0 0 var(--space-2); }
.consent__text  { font-size: var(--step--1); margin: 0 0 var(--space-4); color: var(--vl-ink-700); }
.consent__text a { color: var(--accent); }

.consent__choices { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.consent__choice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: var(--step--2); cursor: pointer;
}
.consent__choice input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin-top: 2px; }
.consent__choice strong { display: block; font-size: var(--step--1); }
.consent__choice em { display: block; color: var(--text-muted); font-style: normal; }

/* Refuser et accepter ont le même poids visuel : c'est la condition d'un
   consentement libre. */
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.consent__actions .btn { flex: 1 1 180px; justify-content: center; }
.consent__link {
  border: 0; background: none; padding: var(--space-2);
  font: inherit; font-size: var(--step--2); font-weight: 700;
  color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.consent__link:hover { color: var(--vl-ink-900); }

@media (max-width: 520px) {
  .consent__actions .btn { flex: 1 1 100%; }
}

/* =========================================================================
   Bulle de contact
   ========================================================================= */
.chat {
  position: fixed; z-index: 70;
  inset: auto var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom)) auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3);
}

.chat__bubble {
  position: relative;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 26px rgba(229, 1, 11, .32);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.chat__bubble:hover { background: var(--accent-hover); }
.chat__bubble:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .chat__bubble { transition: none; } }

/* Pastille d'état : verte si quelqu'un peut répondre, grise sinon. */
.chat__state {
  position: absolute; top: 2px; right: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff;
}
.chat__state--on { background: #128A4E; }
.chat__state--off { background: #8A9099; }

.chat__panel {
  width: min(92vw, 320px);
  padding: var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: #fff; box-shadow: var(--shadow-lg);
  order: -1;
}
.chat__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.chat__close { border: 0; background: none; padding: 4px; cursor: pointer; color: var(--text-muted); }
.chat__status { font-size: var(--step--1); color: var(--vl-ink-700); margin: 0 0 var(--space-4); }

.chat__hours { list-style: none; margin: 0 0 var(--space-4); padding: 0; font-size: var(--step--2); }
.chat__hours li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 3px 0; color: var(--text-muted); }
.chat__hours li.is-today { color: var(--vl-ink-900); font-weight: 700; }

.chat__actions { display: grid; gap: var(--space-2); }
.chat__note { font-size: var(--step--2); color: var(--text-muted); margin: var(--space-4) 0 0; }
.chat__note button {
  border: 0; background: none; padding: 0; font: inherit; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* La bulle ne doit jamais recouvrir le bouton d'achat sur mobile. */
@media (max-width: 640px) {
  .chat { inset: auto 12px calc(84px + env(safe-area-inset-bottom)) auto; }
  .chat__bubble { width: 52px; height: 52px; }
}

/* Badges de la colonne « Flux Google » en administration. */
.vl-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; }
.vl-badge--ok { background: #E6F5ED; color: #0F7A45; }
.vl-badge--warn { background: #FDECEC; color: #B32D2E; }

/* -------------------------------------------------------------------------
 * Garde-fou : aucune transformation ne doit déplacer un élément porteur
 * d'information commerciale. Si un script tiers en pose une, elle est
 * neutralisée ici. Les images gardent leur zoom, cadré par le conteneur.
 * ---------------------------------------------------------------------- */
.single-product div.product > .summary,
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .woocommerce-product-gallery,
ul.products > li.product,
.product-card,
.cart_totals,
.woocommerce-cart-form,
.woocommerce-checkout .col2-set > .col-1,
.woocommerce-checkout .col2-set > .col-2 {
  transform: none !important;
  perspective: none !important;
}

/* -------------------------------------------------------------------------
 * Fiche produit : densité du premier écran.
 *
 * Visuel, titre et bloc d'achat se disputaient toute la hauteur utile. On
 * plafonne la hauteur du visuel et on resserre les respirations verticales,
 * pour que prix, disponibilité et bouton d'achat tiennent sans défiler.
 * ---------------------------------------------------------------------- */
.single-product div.product { padding-block: var(--space-5) var(--space-7); }
.single-product div.product > .woocommerce-product-gallery img {
  max-height: 56vh;
  width: 100%;
  object-fit: contain;
}
.summary > * + * { margin-top: var(--space-3); }
.buybox__price { padding: var(--space-4) var(--space-5); }

@media (max-width: 900px) {
  .single-product div.product > .woocommerce-product-gallery img { max-height: 44vh; }
}