/* ==========================================================================
   WELLPUTT — fiche produit (page)

   Chargee seulement sur une fiche produit, quand « Habiller la fiche » ou
   « Reprendre la mise en page » est actif. C'est la feuille v1 (wpproduct)
   reprise telle quelle sous le prefixe .wp-* ; les sections, elles, sont
   dans front.css.

   1. html.wp-skin        habillage de la fiche native du theme
   2. .wp-pdp             mise en page complete (catalog/product.tpl du module)
   3. neutralisation des conteneurs du theme + pleine largeur
   4. declinaisons, quantite, disponibilite
   5. miniatures « Vous aimerez aussi » (.wp-mini), note moyenne, avis
   ========================================================================== */

/* ---------- 2. Habillage de la fiche native ------------------------------ */
html.wp-skin #product .product-prices,
html.wp-skin #product .breadcrumb{ font-family:var(--wp-body); }

html.wp-skin #product h1.h1,
html.wp-skin #product .product-detail-name,
html.wp-skin #product .page-title{
  font-family:var(--wp-title); font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; line-height:1; font-size:clamp(36px,5vw,68px); margin-bottom:6px; color:var(--wp-ink);
}
html.wp-skin #product .breadcrumb,
html.wp-skin #product .breadcrumb a,
html.wp-skin #product .breadcrumb li a span{
  font-family:var(--wp-title); font-size:12.5px; letter-spacing:1px;
  text-transform:uppercase; color:#999;
}
html.wp-skin #product .breadcrumb a:hover{ color:var(--wp-accent); }

html.wp-skin #product .current-price span,
html.wp-skin #product .product-price,
html.wp-skin #product .current-price-value{
  font-family:var(--wp-title); font-weight:600; font-size:34px; line-height:1; color:var(--wp-ink);
}
html.wp-skin #product .regular-price{ font-weight:300; color:#999; }
html.wp-skin #product .product-description p,
html.wp-skin #product .product-description li{ font-weight:300; font-size:16px; line-height:1.7; color:#555; }

html.wp-skin #product .product-cover img,
html.wp-skin #product .images-container .product-cover{
  border-radius:16px; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.09);
}
html.wp-skin #product .js-qv-product-images img,
html.wp-skin #product .product-images img{ border-radius:9px; }

html.wp-skin #product .product-add-to-cart .add-to-cart,
html.wp-skin #product button.add-to-cart,
html.wp-skin #product .btn-add-to-cart{
  background:var(--wp-accent); border-color:var(--wp-accent); color:#fff;
  font-family:var(--wp-title); font-weight:600; font-size:15px; letter-spacing:2px;
  text-transform:uppercase; border-radius:4px; min-height:56px; padding:0 34px;
  box-shadow:0 8px 30px rgba(241,90,41,.32);
  transition:transform .3s ease, box-shadow .3s ease;
}
html.wp-skin #product .product-add-to-cart .add-to-cart:hover,
html.wp-skin #product button.add-to-cart:hover,
html.wp-skin #product .btn-add-to-cart:hover{
  transform:translateY(-2px); box-shadow:0 14px 40px rgba(241,90,41,.45);
  background:var(--wp-accent); border-color:var(--wp-accent);
}
html.wp-skin #product .product-quantity input.js-cart-line-product-quantity,
html.wp-skin #product .product-quantity .input-group{
  border-radius:4px; min-height:56px; font-family:var(--wp-title);
}
html.wp-skin #product .product-availability{
  font-family:var(--wp-title); font-size:13px; letter-spacing:.5px; text-transform:uppercase;
}
html.wp-skin #product .tabs .nav-tabs .nav-link,
html.wp-skin #product .product-tabs .nav-link{
  font-family:var(--wp-title); text-transform:uppercase; letter-spacing:1.5px; font-size:14px;
}
html.wp-skin #product .tabs .nav-tabs .nav-link.active{ color:var(--wp-accent); border-color:var(--wp-accent); }
html.wp-skin #product .product-accessories h2,
html.wp-skin #product .featured-products h2,
html.wp-skin #product .products-section-title{
  font-family:var(--wp-title); font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; font-size:clamp(28px,3.6vw,48px);
}

/* ==========================================================================
   3. MISE EN PAGE COMPLETE (hook displayOverrideTemplate)
   Active seulement quand le module reprend catalog/product.tpl.
   ========================================================================== */
.wp-pdp{ font-family:var(--wp-body); color:var(--wp-ink); }
.wp-pdp__top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,70px); align-items:start;
  padding:clamp(20px,3vh,40px) 0 clamp(50px,8vh,90px);
}
@media (max-width:900px){ .wp-pdp__top{ grid-template-columns:1fr; } }

/* Grille plutot que flex : la hauteur de la ligne est donnee par le visuel
   carre, et le rail de vignettes s'y aligne exactement (height:0 + min-height
   :100% l'empeche de dicter la hauteur tout en la remplissant). */
.wp-pdp__gallery{
  display:grid;
  grid-template-columns:clamp(62px,7vw,88px) minmax(0,1fr);
  gap:clamp(10px,1.2vw,16px);
  align-items:stretch;
}
.wp-pdp__cover{
  grid-column:2; grid-row:1; min-width:0; position:relative;
  aspect-ratio:1/1 !important; height:auto !important;
  background:var(--wp-sand); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.09);
}
/* contain + padding : les visuels verticaux (tapis) ne sont pas rognes */
.wp-pdp__cover img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:clamp(14px,2vw,28px);
  transition:opacity .3s ease;
}
.wp-pdp__flags{
  position:absolute; top:16px; left:16px; z-index:3;
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;
}
.wp-pdp__flag{
  background:var(--wp-ink); color:#fff; font-family:var(--wp-title);
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; padding:6px 12px; border-radius:3px;
}
.wp-pdp__flag--discount,.wp-pdp__flag--on-sale{ background:var(--wp-accent); }
.wp-pdp__thumbs{
  grid-column:1; grid-row:1;
  display:flex; flex-direction:column; gap:clamp(8px,1vw,12px);
  width:100%;
  height:0 !important; min-height:100%; max-height:100%;
  overflow-y:auto; scrollbar-width:thin;
}
.wp-pdp__thumbs::-webkit-scrollbar{ width:3px; }
.wp-pdp__thumbs::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:3px; }
.wp-pdp__thumb img{ object-fit:contain; padding:5px; background:#fff; }
.wp-pdp__thumb{
  padding:0; border:1.5px solid rgba(0,0,0,.1); background:#fff;
  border-radius:9px; overflow:hidden; cursor:pointer;
  transition:border-color .25s ease;
  /* flex:0 0 auto + height:auto : sans ca le rail scrollable comprime les
     vignettes et casse le carre. */
  flex:0 0 auto; width:100%; aspect-ratio:1/1 !important; height:auto !important;
}
.wp-pdp__thumb img{ width:100%; height:100%; object-fit:cover; }
.wp-pdp__thumb.is-active,.wp-pdp__thumb:hover{ border-color:var(--wp-accent); }

.wp-pdp__buy-inner{ position:sticky; top:100px; }
@media (max-width:900px){ .wp-pdp__buy-inner{ position:static; } }
/* Galerie collante (2026-10-15) : sur ordinateur, la photo et les vignettes restent visibles pendant la
   lecture de la colonne de droite, puis repartent avec la page a la fin de la zone d'achat (avant les avis).
   Seulement si la fenetre est assez haute pour toute la galerie (sinon son bas serait coupe) : front.js
   (stickyGallery) pose .is-sticky apres mesure (2026-10-30 ; avant, 780 px de haut minimum). */
@media (min-width:901px){
  .wp-pdp__gallery.is-sticky{ position:sticky; top:100px; align-self:start; }
}
.wp-pdp__brand{
  font-family:var(--wp-title); font-size:12.5px; letter-spacing:2.5px;
  text-transform:uppercase; color:#999; margin:0 0 12px;
}
.wp-pdp__title{
  font-family:var(--wp-title); font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; line-height:1; font-size:clamp(36px,4.6vw,66px); margin:0 0 6px;
}

/* Le theme (Warehouse / Elementor) impose sa police aux h1 : on reprend la main. */
html.wp-pdp-layout #wp-pdp .wp-pdp__title,
html.wp-skin #product h1.wp-pdp__title,
html.wp-skin #product h1.h1,
html.wp-skin #product .product-detail-name,
html.wp-skin #product .page-title,
.wp-pdp h1.wp-pdp__title{
  font-family:var(--wp-title) !important; font-weight:600 !important;
  text-transform:uppercase !important; letter-spacing:.5px !important;
}
.wp-pdp__prices{ display:flex; align-items:baseline; gap:14px; margin:22px 0; flex-wrap:wrap; }
.wp-pdp__price{ font-family:var(--wp-title); font-weight:600; font-size:36px; line-height:1; }
.wp-pdp__price--sale{ color:var(--wp-accent); }
.wp-pdp__price-old{ font-weight:300; font-size:16px; color:#999; text-decoration:line-through; }
.wp-pdp__tax{ font-size:13px; font-weight:300; color:#888; }
.wp-pdp__short{ font-weight:300; font-size:16px; line-height:1.7; color:#555; }
.wp-pdp__short p{ margin:0 0 14px; }
.wp-pdp__form{ margin:26px 0 18px; }
.wp-pdp__ref{
  font-family:var(--wp-title); font-size:12.5px; letter-spacing:1px;
  text-transform:uppercase; color:#999; margin:0 0 8px;
}
.wp-pdp__ref span{ color:#555; }
.wp-pdp__desc{ padding-top:clamp(50px,7vh,90px); }
.wp-pdp__desc-inner{
  max-width:820px; margin:0 auto; font-weight:300; font-size:17px; line-height:1.8; color:#444;
}
.wp-pdp__desc-inner h2,.wp-pdp__desc-inner h3{
  font-family:var(--wp-title); font-weight:600; text-transform:uppercase; letter-spacing:.5px;
}
.wp-pdp__native{ padding:0 clamp(24px,5vw,64px); }

/* Boutons natifs inclus dans notre colonne */
.wp-pdp .product-quantity{ display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; }
.wp-pdp .product-quantity .qty{ margin:0; }
.wp-pdp .add-to-cart{
  flex:1 1 220px; min-width:200px; min-height:56px;
  background:var(--wp-accent); border-color:var(--wp-accent); color:#fff;
  font-family:var(--wp-title); font-weight:600; font-size:15px; letter-spacing:2px;
  text-transform:uppercase; border-radius:4px;
  box-shadow:0 8px 30px rgba(241,90,41,.32);
  transition:transform .3s ease, box-shadow .3s ease;
}
.wp-pdp .add-to-cart:hover:not([disabled]){
  transform:translateY(-2px); box-shadow:0 14px 40px rgba(241,90,41,.45);
}
.wp-pdp .product-availability{
  font-family:var(--wp-title); font-size:13px; letter-spacing:.5px; text-transform:uppercase;
}
.wp-pdp .product-variants{ margin:22px 0; }
.wp-pdp .product-variants .control-label{
  font-family:var(--wp-title); text-transform:uppercase; letter-spacing:1.5px; font-size:13px; color:#888;
}


/* ==========================================================================
   4. NEUTRALISATION DU CONTEXTE DU THEME
   Notre fiche est rendue dans #content-wrapper, lui-meme dans un .container et
   parfois dans une grille/flex Bootstrap : les sections se retrouvaient en deux
   colonnes et boxees. On force le flux vertical, puis on fait sortir les
   sections du conteneur pour retrouver le pleine largeur.
   ========================================================================== */
.wp-pdp{ display:block !important; width:100% !important; max-width:none !important; }
.wp-pdp > *{
  grid-column:1 / -1 !important;
  flex:0 0 100% !important;
  width:100% !important;
  max-width:100% !important;
  float:none !important;
}
.wp-pdp__top{ display:grid !important; }
.wp-pdp__top > *{ grid-column:auto !important; flex:initial !important; }
@media (min-width:901px){
  .wp-pdp__top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
}
@media (max-width:900px){
  .wp-pdp__top{ grid-template-columns:minmax(0,1fr) !important; }
}

/* ---- Neutralisation des conteneurs du theme (CSS seul) ----
   La fiche est rendue dans #content-wrapper > #main, eux-memes dans
   #inner-wrapper.container. On deboxe toute la chaine et on annule grille,
   flex, colonnes et flottants qui transformaient les sections en colonnes. */
html.wp-pdp-layout #inner-wrapper,
html.wp-pdp-layout #content-wrapper,
html.wp-pdp-layout #main{
  display:block !important;
  width:100% !important; max-width:none !important;
  padding-left:0 !important; padding-right:0 !important;
  margin-left:0 !important; margin-right:0 !important;
  flex:none !important; float:none !important;
  columns:initial !important; column-count:auto !important;
}
html.wp-pdp-layout #wp-pdp{
  display:block !important; columns:initial !important; column-count:auto !important;
}
html.wp-pdp-layout #wp-pdp > *{ float:none !important; }
/* La zone d'achat et les blocs natifs restent centres et lisibles. */
html.wp-pdp-layout #wp-pdp > .wp-pdp__top,
html.wp-pdp-layout #wp-pdp > .wp-pdp__native{
  max-width:none !important;
  padding-left:clamp(24px,3.5vw,72px) !important; padding-right:clamp(24px,3.5vw,72px) !important;
}
/* Le fil d'Ariane du theme garde son conteneur : on ne touche qu'a la fiche. */

/* Quand le JS a sorti la fiche du .container du theme, plus aucun hack de
   largeur n'est necessaire : la fiche occupe deja toute la page. */
body.wp-unboxed #wp-pdp{ width:100% !important; max-width:none !important; }
body.wp-unboxed #wp-pdp > .wp-pdp__top,
body.wp-unboxed #wp-pdp > .wp-pdp__native{
  max-width:1360px; margin-left:auto; margin-right:auto;
  padding-left:clamp(24px,5vw,64px); padding-right:clamp(24px,5vw,64px);
}
/* Repli si le JS n'a pas pu deplacer la fiche : on force la pleine largeur */
html:not(.wp-pdp-layout) body:not(.wp-unboxed) #wp-pdp > .wp-section{
  width:100vw !important; max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}
.wp-pdp__desc-inner{ max-width:820px; margin-left:auto; margin-right:auto; }

/* Grille interne des cartes et accessoires : jamais heritee du theme */
.wp-pdp .wp-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) !important;
}
.wp-pdp .wp-grid > *{ width:auto !important; max-width:none !important; flex:initial !important; }
/* Tablette a l'horizontale : les 3 cartes sur une ligne au lieu de 2 + 1. */
@media (min-width:900px) and (max-width:1199px){
  .wp-pdp .wp-grid{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important; }
}


/* ==========================================================================
   5. EMPILEMENT GARANTI DES SECTIONS
   Le wrapper .wp-pdp__sections est le seul enfant que voit le conteneur
   parent : meme si celui-ci est une grille ou un flex, il ne peut plus
   repartir les sections en colonnes. A l'interieur, flux vertical strict.
   ========================================================================== */
#wp-pdp > .wp-pdp__sections,
#wp-pdp > .wp-pdp__block,
#wp-pdp > .wp-pdp__top,
#wp-pdp > .wp-pdp__native{
  display:block !important;
  width:100% !important; max-width:100% !important;
  grid-column:1 / -1 !important; grid-row:auto !important;
  flex:0 0 100% !important;
  float:none !important; clear:both !important;
  columns:initial !important; column-count:auto !important;
}
#wp-pdp > .wp-pdp__top{ display:grid !important; }

.wp-pdp__sections{
  display:flow-root;
  columns:initial !important; column-count:auto !important;
}
.wp-pdp__sections .wp-section,
.wp-pdp__sections .wp-reassurance{
  display:block !important;
  width:100% !important; max-width:100% !important;
  float:none !important; clear:both !important;
  margin-left:0 !important; margin-right:0 !important;
}


/* ==========================================================================
   6. LA FICHE ELLE-MEME OCCUPE TOUTE LA LARGEUR
   Le conteneur parent (#main) repartit ses enfants en colonnes : il fallait
   aussi le dire a #wp-pdp, pas seulement a ses enfants. Sinon la fiche
   entiere reste logee dans la premiere colonne.
   ========================================================================== */
#wp-pdp{
  grid-column:1 / -1 !important; grid-row:auto !important;
  flex:0 0 100% !important;
  width:100% !important; max-width:none !important;
  min-width:0 !important;
  float:none !important; clear:both !important;
  margin-left:0 !important; margin-right:0 !important;
}
/* Et on remet la chaine du theme en flux simple, centrage compris. */
html.wp-pdp-layout #inner-wrapper,
html.wp-pdp-layout #content-wrapper,
html.wp-pdp-layout #main{
  grid-template-columns:none !important;
  grid-template-areas:none !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
}

/* ---------- Declinaisons, pack, personnalisation ------------------------- */
.wp-pdp .product-variants{ margin:0 0 24px; }
.wp-pdp .product-variants > .product-variants-item{ margin-bottom:18px; }
.wp-pdp .product-variants .form-control-label,
.wp-pdp .product-variants .control-label{
  display:block; margin-bottom:9px;
  font-family:var(--wp-title); font-weight:500; text-transform:uppercase;
  letter-spacing:1.6px; font-size:12.5px; color:#888;
}
.wp-pdp .product-variants select,
.wp-pdp .product-variants .form-control{
  min-height:50px; border-radius:4px; font-family:var(--wp-body); font-size:15px;
}
/* Pastilles de couleur et boutons radio de declinaison */
.wp-pdp .product-variants ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.wp-pdp .product-variants .input-color + span,
.wp-pdp .product-variants .color{
  width:34px; height:34px; border-radius:50%; border:1.5px solid rgba(0,0,0,.15);
}
.wp-pdp .product-variants .input-color:checked + span,
.wp-pdp .product-variants .input-container input:checked + span{
  outline:2px solid var(--wp-accent); outline-offset:2px;
}
.wp-pdp .product-variants .radio-label{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:52px; min-height:44px; padding:0 14px;
  border:1.5px solid rgba(0,0,0,.15); border-radius:4px; background:#fff;
  font-family:var(--wp-title); font-weight:500; letter-spacing:1px;
  text-transform:uppercase; font-size:13px; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.wp-pdp .product-variants input:checked + .radio-label,
.wp-pdp .product-variants .radio-label:hover{
  border-color:var(--wp-accent); color:var(--wp-accent);
}
.wp-pdp .product-pack,
.wp-pdp__pack{ margin:0 0 24px; }
.wp-pdp .product-customization{ margin:0 0 24px; }
.wp-pdp .product-discounts{ margin:0 0 22px; }
.wp-pdp .product-refresh{ display:none !important; }
.wp-pdp .product-additional-info{ margin-top:18px; }


/* ---------- Quantite + panier : respiration et alignement --------------- */
.wp-pdp .product-quantity{
  display:flex !important; flex-wrap:wrap; align-items:stretch;
  gap:14px !important; margin:0 !important;
}
.wp-pdp .product-quantity > [class*="col-"]{
  padding:0 !important; margin:0 !important; flex:0 0 auto; width:auto !important; max-width:none !important;
}
.wp-pdp .product-quantity .col-add-btn{ flex:1 1 240px; }

/* Le selecteur de quantite devient un bloc distinct du bouton */
.wp-pdp .product-quantity .qty,
.wp-pdp .product-quantity .qty .input-group{
  height:100%; min-height:58px;
  border:1.5px solid rgba(0,0,0,.14); border-radius:4px; background:#fff;
  display:flex; align-items:center; overflow:hidden;
}
.wp-pdp .product-quantity .qty input{
  border:0 !important; box-shadow:none !important; text-align:center;
  width:60px; min-height:56px; background:transparent;
  font-family:var(--wp-title); font-weight:600; font-size:17px;
}
.wp-pdp .product-quantity .qty .btn,
.wp-pdp .product-quantity .qty .bootstrap-touchspin-up,
.wp-pdp .product-quantity .qty .bootstrap-touchspin-down{
  background:transparent !important; border:0 !important; color:#777 !important;
  width:38px; min-height:56px; font-size:17px; box-shadow:none !important;
}
.wp-pdp .product-quantity .qty .btn:hover{ color:var(--wp-accent) !important; }

.wp-pdp .add-to-cart{
  width:100%; min-height:58px; padding:0 32px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.wp-pdp .product-quantity .col-add-wishlist,
.wp-pdp .product-quantity .col-add-compare{ flex:0 0 auto; }
.wp-pdp .product-quantity .btn-iconic{
  min-height:58px; width:58px; border-radius:4px;
  border:1.5px solid rgba(0,0,0,.14); background:#fff; color:#666;
}
.wp-pdp .product-quantity .btn-iconic:hover{ border-color:var(--wp-accent); color:var(--wp-accent); }

/* ---------- Disponibilite ----------------------------------------------- */
.wp-pdp__avail{
  display:flex; align-items:center; gap:9px; margin:18px 0 0 !important;
  font-family:var(--wp-title); font-size:13px; letter-spacing:1.2px;
  text-transform:uppercase; color:#555;
}
.wp-pdp__dot{
  width:9px; height:9px; border-radius:50%; background:#bbb; flex-shrink:0;
}
.wp-pdp__avail--available .wp-pdp__dot{ background:#2e8b57; }
.wp-pdp__avail--last_remaining_items .wp-pdp__dot{ background:#e67e22; }
.wp-pdp__avail--unavailable .wp-pdp__dot,
.wp-pdp__avail--out_of_stock .wp-pdp__dot{ background:#c0392b; }
.wp-pdp__delivery{
  margin:8px 0 0 !important; font-weight:300; font-size:13.5px; color:#888;
}
/* On masque la version native pour eviter le doublon */
.wp-pdp .product-add-to-cart > .product-availability,
.wp-pdp .js-product-add-to-cart > .product-availability{ display:none !important; }

/* ==========================================================================
   RESPONSIVE — passe complete
   ========================================================================== */
@media (max-width:900px){
  .wp-pdp__top{ gap:26px !important; padding-bottom:40px !important; }
  .wp-pdp__buy-inner{ position:static !important; top:auto !important; }
}
@media (max-width:700px){
  /* On abandonne la grille : en flex colonne, aucune regle de placement
     heritee (grid-column:2) ne peut faire disparaitre le visuel. */
  .wp-pdp__gallery{
    display:flex !important; flex-direction:column !important;
    grid-template-columns:none !important; gap:10px !important;
  }
  .wp-pdp__cover{
    order:1 !important; grid-area:auto !important;
    grid-column:auto !important; grid-row:auto !important;
    width:100% !important; display:block !important;
    aspect-ratio:1/1 !important; height:auto !important; min-height:0 !important;
  }
  /* Le rail de vignettes passe sous le visuel, en bande horizontale */
  .wp-pdp__thumbs{
    order:2 !important; grid-area:auto !important;
    grid-column:auto !important; grid-row:auto !important;
    flex-direction:row !important; height:auto !important; min-height:0 !important;
    max-height:none !important; overflow-x:auto !important; overflow-y:hidden !important;
    padding-bottom:4px;
  }
  .wp-pdp__thumb{ flex:0 0 64px; width:64px; }
}
@media (max-width:600px){
  .wp-pdp .wp-grid{ grid-template-columns:minmax(0,1fr) !important; gap:16px !important; }
  .wp-pdp__brand{ letter-spacing:1.6px; }
  /* Achat : quantite + panier empiles, cibles tactiles >= 44px */
  .wp-pdp .product-quantity{ flex-wrap:wrap; gap:12px; }
  .wp-pdp .product-quantity .qty,
  .wp-pdp .product-quantity .qty .input-group{ min-height:52px; }
  .wp-pdp .add-to-cart{ flex:1 1 100%; min-width:0; width:100%; min-height:52px; padding:0 20px; }
  .wp-pdp .product-quantity .btn-iconic{ min-height:52px; width:52px; }
  .wp-pdp .product-variants .radio-label{ min-height:44px; }
}


/* Respiration de la colonne d'achat en mobile : le bloc marque / titre /
   reference / prix etait colle au visuel et a lui-meme. */
@media (max-width:900px){
  .wp-pdp__buy-inner{ padding-top:8px; }
  .wp-pdp__brand{ margin-bottom:10px !important; }
  .wp-pdp__title{ margin:0 0 10px !important; line-height:1.1 !important; }
  .wp-pdp__ref{ margin:0 0 18px !important; }
  .wp-pdp__price,
  .wp-pdp .product-prices,
  .wp-pdp .current-price{ margin:0 0 20px !important; }
  .wp-pdp__desc,
  .wp-pdp .product-description-short{ margin-bottom:24px !important; line-height:1.75 !important; }
  .wp-pdp .product-variants{ margin:0 0 24px !important; }
  .wp-pdp .product-quantity{ margin:0 0 24px !important; }
  .wp-pdp .product-additional-info{ margin-top:24px !important; }
}
@media (max-width:700px){
  .wp-pdp__top{ padding-top:18px !important; row-gap:32px !important; }
  .wp-pdp__buy-inner{ padding-top:4px; }
}

/* ==========================================================================
   Cartes produit "You might also like" — miniature propre au module
   ========================================================================== */
.wp-mini{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05); transition:transform .35s ease, box-shadow .35s ease;
}
.wp-section--sand .wp-mini{ background:#fff; }
.wp-mini:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.10); }
.wp-mini:hover, .wp-mini:focus{ text-decoration:none; color:inherit; }
.wp-mini__media{
  position:relative; aspect-ratio:1/1; background:#fff; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.wp-mini__media img{
  width:100%; height:100%; object-fit:contain; padding:14px;
  transition:transform .5s ease;
}
.wp-mini:hover .wp-mini__media img{ transform:scale(1.05); }
.wp-mini__flag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--wp-accent); color:#fff;
  font-family:var(--wp-title); font-size:11px; font-weight:500; letter-spacing:1.4px; text-transform:uppercase;
  line-height:1; padding:8px 12px 7px; border-radius:0; white-space:nowrap;
}
.wp-mini__flag--dark{ background:var(--wp-ink); }
.wp-mini__body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.wp-mini__title{
  margin:0; font-family:var(--wp-title); font-weight:600; text-transform:uppercase;
  letter-spacing:.4px; font-size:19px; line-height:1.15; color:var(--wp-ink);
}
.wp-mini__desc{
  margin:0; font-size:13.5px; line-height:1.55; color:var(--wp-muted);
  text-wrap:pretty; flex:1;
}
.wp-mini__foot{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:4px; padding-top:14px; border-top:1px solid rgba(0,0,0,.08);
}
.wp-mini__prices{ display:flex; align-items:baseline; gap:8px; }
.wp-mini__price{ font-family:var(--wp-title); font-weight:600; font-size:20px; color:var(--wp-ink); }
.wp-mini__price--sale{ color:var(--wp-accent); }
.wp-mini__old{ font-size:14px; color:var(--wp-muted); text-decoration:line-through; }
.wp-mini__cta{
  font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--wp-accent); white-space:nowrap;
}
@media (max-width:600px){
  .wp-mini__body{ padding:16px 18px 18px; }
  .wp-mini__title{ font-size:17px; }
}


/* Grille accessoires : cartes de taille raisonnable, jamais etirees */
.wp-pdp .wp-grid:has(.wp-mini),
.wp-grid:has(.wp-mini){
  grid-template-columns:repeat(auto-fit,minmax(240px,300px)) !important;
  justify-content:center;
}
.wp-mini .wp-mini__media{ aspect-ratio:4/3; max-height:230px; }
/* Cartes de meme hauteur sur une ligne, prix et bouton alignes en bas (2026-10-15) : la case de la grille
   s'etire, la carte la remplit et le pied est pousse en bas. */
.wp-grid:has(.wp-mini){ align-items:stretch !important; }
.wp-grid:has(.wp-mini) > *{ display:flex; }
.wp-grid:has(.wp-mini) > * > .wp-mini{ flex:1 1 auto; width:100%; }
.wp-mini__foot{ margin-top:auto; }
@media (max-width:600px){
  .wp-grid:has(.wp-mini), .wp-pdp .wp-grid:has(.wp-mini){
    grid-template-columns:minmax(0,320px) !important;
  }
}


/* ---- Note moyenne en tete de fiche produit (remplace la marque) ---- */
.wp-pdp__rating{
  display:inline-flex; align-items:center; gap:10px;
  margin:0 0 12px; text-decoration:none; color:inherit;
}
.wp-pdp__rating:hover, .wp-pdp__rating:focus{ text-decoration:none; color:inherit; }
.wp-pdp__rating-stars{ display:inline-flex; gap:2px; line-height:1; }
.wp-pdp__rating .wp-star{ font-size:17px; line-height:1; color:#ded9d1 !important; }
.wp-pdp__rating .wp-star--on{ color:var(--wp-gold) !important; }
.wp-pdp__rating .wp-star--half{ color:var(--wp-gold) !important; opacity:.55; }
/* plus aucun texte dans le lien : le libelle est porte par aria-label */
.wp-pdp__rating-avg{
  font-family:var(--wp-title); font-weight:600; font-size:14px; color:var(--wp-ink);
}
.wp-pdp__rating-count{
  font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--wp-muted);
  text-decoration:underline; text-underline-offset:3px;
}
.wp-pdp__rating:hover .wp-pdp__rating-count{ color:var(--wp-accent); }

/* ---- Section avis, pleine largeur sous le bloc d'achat ---- */
.wp-pdp__reviews{ background:var(--wp-sand); }
.wp-pdp__reviews .wr-section{ margin:0; padding:0; border-top:0; max-width:none; }
.wp-pdp__reviews .wr-card,
.wp-pdp__reviews .wr-nav{ background:#fff; }


/* Nom + etoiles sur une meme ligne dans les cartes produit */
.wp-mini__titleline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.wp-mini__titleline .wp-mini__title{ margin:0; }

/* Ordinateur : titres un cran plus petits (comme front.css) */
@media (min-width:1025px){
  html.wp-skin #product .product-detail-name,
  html.wp-skin #product .page-title{ font-size:clamp(34px,3.8vw,56px); }
  html.wp-skin #product .featured-products h2,
  html.wp-skin #product .products-section-title{ font-size:clamp(26px,2.8vw,40px); }
  .wp-pdp__title{ font-size:clamp(34px,3.6vw,54px); }
}