/* ==========================================================================
   WELLPUTT REVIEWS — harmonise avec la fiche produit (module wpproduct)
   Typo Oswald/Poppins, accent #F15A29, cartes 16px, reveals & hovers.
   Les noms de classes sont inchanges : template et JS restent compatibles.
   (Le gap de .wr-track doit rester a 16px : le JS s'en sert pour le calcul.)
   ========================================================================== */

.wr-section,
.wr-account-page{
  --wr-accent:#F15A29;
  --wr-ink:#1a1a1a;
  --wr-sand:#f4f2ef;
  --wr-muted:#666;
  --wr-line:rgba(0,0,0,.10);
  --wr-title:'Oswald',system-ui,sans-serif;
  --wr-body:'Poppins',system-ui,-apple-system,sans-serif;
  font-family:var(--wr-body);
  color:var(--wr-ink);
  box-sizing:border-box;
}
.wr-section *,
.wr-account-page *{ box-sizing:border-box; }

.wr-section{
  position:relative;
  margin:clamp(36px,5vw,64px) 0 0;
  padding:clamp(30px,4vw,44px) 0 0;
  border-top:1px solid var(--wr-line);
}

/* ── Header ──────────────────────────────────────────────────────────── */
.wr-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:18px; margin-bottom:clamp(22px,3vw,34px);
}
.wr-header-left{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }

.wr-section-label{
  font-family:var(--wr-title); font-weight:600;
  font-size:clamp(20px,2.4vw,30px); line-height:1;
  letter-spacing:.5px; text-transform:uppercase; color:var(--wr-ink);
}

.wr-global{ display:flex; align-items:center; gap:10px; }
.wr-stars-row{ display:inline-flex; gap:2px; }
.wr-star{
  font-size:15px; line-height:1; color:var(--wr-accent);
  animation:wr-pop .5s cubic-bezier(.16,1,.3,1) backwards;
}
.wr-stars-row .wr-star:nth-child(1){ animation-delay:.02s; }
.wr-stars-row .wr-star:nth-child(2){ animation-delay:.08s; }
.wr-stars-row .wr-star:nth-child(3){ animation-delay:.14s; }
.wr-stars-row .wr-star:nth-child(4){ animation-delay:.20s; }
.wr-stars-row .wr-star:nth-child(5){ animation-delay:.26s; }
.wr-star-e{ color:#d6d2cc; }
@keyframes wr-pop{
  from{ opacity:0; transform:scale(.4) rotate(-18deg); }
  to  { opacity:1; transform:none; }
}
.wr-avg{
  font-family:var(--wr-title); font-weight:600; font-size:20px;
  line-height:1; color:var(--wr-ink);
}
.wr-count{
  font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:var(--wr-muted);
}

/* Bouton "ecrire un avis" — remplissage depuis le bas */
.wr-btn-write{
  position:relative; overflow:hidden; isolation:isolate;
  background:transparent; border:1px solid var(--wr-ink); color:var(--wr-ink);
  font-family:var(--wr-title); font-weight:500;
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  padding:12px 26px; border-radius:999px; cursor:pointer;
  transition:color .35s ease, border-color .35s ease;
}
.wr-btn-write::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--wr-ink); transform:translateY(101%);
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.wr-btn-write:hover{ color:#fff; }
.wr-btn-write:hover::before{ transform:none; }
.wr-btn-write.is-open{ border-color:var(--wr-accent); color:var(--wr-accent); }

/* ── Formulaire ──────────────────────────────────────────────────────── */
.wr-form-wrap{
  background:var(--wr-sand); border:0; border-radius:18px;
  padding:clamp(20px,2.4vw,30px); margin-bottom:clamp(24px,3vw,36px);
  max-width:620px;
  animation:wr-slide .5s cubic-bezier(.16,1,.3,1);
}
@keyframes wr-slide{
  from{ opacity:0; transform:translateY(-10px) scale(.985); }
  to  { opacity:1; transform:none; }
}
.wr-form-inner{ display:flex; flex-direction:column; gap:18px; }

.wr-label{
  display:block; font-family:var(--wr-title); font-weight:500;
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--wr-muted); margin-bottom:8px;
}
.wr-field{ position:relative; }
.wr-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.wr-input, .wr-textarea{
  width:100%; background:#fff; border:1px solid transparent; border-radius:10px;
  color:var(--wr-ink); padding:12px 14px;
  font-family:var(--wr-body); font-size:14px; font-weight:300; line-height:1.5;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.wr-input:focus, .wr-textarea:focus{
  outline:none; border-color:var(--wr-accent);
  box-shadow:0 0 0 4px rgba(241,90,41,.12);
}
.wr-input::placeholder, .wr-textarea::placeholder{ color:#b9b4ad; font-weight:300; }
.wr-textarea{ resize:vertical; min-height:110px; }

.wr-char{
  position:absolute; bottom:10px; right:14px;
  font-size:11px; color:#b9b4ad; pointer-events:none;
}

.wr-star-picker{ display:flex; gap:8px; }
.wr-spick{
  font-size:30px; line-height:1; color:#ddd8d1; cursor:pointer; user-select:none;
  transition:color .18s ease, transform .28s cubic-bezier(.16,1,.3,1);
}
.wr-star-picker:hover .wr-spick{ color:#ddd8d1; }
.wr-spick:hover{ transform:translateY(-3px) scale(1.12); }
.wr-spick.on{ color:var(--wr-accent); transform:scale(1.08); }

.wr-form-footer{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.wr-error{ font-size:12.5px; color:#c0392b; }
.wr-success{ font-size:13.5px; color:#1e874b; font-weight:500; padding:8px 0; }

.wr-btn-submit{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--wr-accent); border:0; color:#fff;
  font-family:var(--wr-title); font-weight:500;
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  padding:13px 34px; border-radius:999px; cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.wr-btn-submit::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-110%);
}
.wr-btn-submit:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(241,90,41,.30); }
.wr-btn-submit:hover::after{ animation:wr-sheen .7s ease forwards; }
@keyframes wr-sheen{ to{ transform:translateX(110%); } }
.wr-btn-submit:disabled{ opacity:.45; cursor:default; transform:none; box-shadow:none; }

/* ── Carousel ────────────────────────────────────────────────────────── */
.wr-carousel-wrap{ display:flex; align-items:center; gap:14px; }
.wr-track-outer{
  overflow:hidden; flex:1; padding:6px 2px 10px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
}
/* gap: 16px imperatif (lu par le JS) */
.wr-track{ display:flex; gap:16px; transition:transform .6s cubic-bezier(.16,1,.3,1); }

.wr-nav{
  background:#fff; border:1px solid var(--wr-line); color:var(--wr-ink);
  width:44px; height:44px; border-radius:50%; font-size:17px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.wr-nav:hover{
  background:var(--wr-ink); border-color:var(--wr-ink); color:#fff;
  transform:scale(1.06);
}
.wr-nav:disabled{ opacity:.22; pointer-events:none; }

/* ── Cartes d'avis ───────────────────────────────────────────────────── */
.wr-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--wr-line); border-radius:16px;
  padding:26px 22px 20px; min-width:250px; max-width:250px; flex-shrink:0;
  display:flex; flex-direction:column; gap:12px;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .3s ease;
}
.wr-card::before{
  content:'\201C';
  position:absolute; top:-18px; right:14px;
  font-family:Georgia,serif; font-size:96px; line-height:1;
  color:var(--wr-accent); opacity:.10; pointer-events:none;
  transition:opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1);
}
.wr-card::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--wr-accent); transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.wr-card:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.wr-card:hover::before{ opacity:.18; transform:translateY(3px) rotate(-4deg); }
.wr-card:hover::after{ transform:scaleX(1); }

.wr-card .wr-star{ font-size:13px; animation:none; }
.wr-card-text{
  margin:0; flex:1; font-weight:300; font-size:14px; line-height:1.65;
  color:#333; font-style:normal; text-wrap:pretty;
}
.wr-card-meta{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  padding-top:12px; border-top:1px solid var(--wr-line);
}
.wr-card-name{
  font-family:var(--wr-title); font-weight:500; font-size:13px;
  letter-spacing:.8px; text-transform:uppercase; color:var(--wr-ink);
}
.wr-card-date{ font-size:11px; color:#a8a29a; }
.wr-verified{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--wr-accent);
}
.wr-verified::before{
  content:''; width:13px; height:13px; border-radius:50%; flex-shrink:0;
  background:var(--wr-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ── Dots ────────────────────────────────────────────────────────────── */
.wr-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.wr-dot{
  width:7px; height:7px; border-radius:999px; background:#d6d2cc;
  border:0; padding:0; cursor:pointer;
  transition:width .4s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.wr-dot:hover{ background:#b5afa7; }
.wr-dot.on{ width:24px; background:var(--wr-accent); }

.wr-empty{ font-size:14px; font-weight:300; color:var(--wr-muted); padding:24px 0; }

@media (max-width:640px){
  .wr-card{ min-width:230px; max-width:230px; }
  .wr-field-row{ grid-template-columns:1fr; }
  .wr-form-wrap{ padding:18px; }
  .wr-header{ align-items:flex-start; }
  .wr-nav{ width:38px; height:38px; }
}
@media (prefers-reduced-motion: reduce){
  .wr-section *, .wr-account-page *{
    animation:none !important; transition-duration:.01ms !important;
  }
}

/* ==========================================================================
   Page "Mon compte" — Mes avis
   ========================================================================== */
.wr-account-page{ padding:8px 0 48px; }

.wr-back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--wr-title); font-weight:500;
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  color:var(--wr-muted); text-decoration:none; margin-bottom:30px;
  transition:color .25s ease, gap .25s ease;
}
.wr-back-link:hover{ color:var(--wr-accent); gap:12px; text-decoration:none; }

.wr-product-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:clamp(16px,2vw,26px);
}
.wr-product-card{
  background:#fff; border:1px solid var(--wr-line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease, border-color .3s ease;
}
.wr-product-card:hover{
  transform:translateY(-4px); border-color:transparent;
  box-shadow:0 16px 36px rgba(0,0,0,.10);
}
.wr-product-img-wrap{ display:block; aspect-ratio:1; overflow:hidden; background:var(--wr-sand); }
.wr-product-img{ width:100%; height:100%; object-fit:contain; padding:10px; transition:transform .5s ease; }
.wr-product-card:hover .wr-product-img{ transform:scale(1.05); }
.wr-product-img-placeholder{ width:100%; height:100%; background:var(--wr-sand); }

.wr-product-info{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.wr-product-name{
  margin:0; font-family:var(--wr-title); font-weight:600; font-size:16px;
  line-height:1.2; letter-spacing:.4px; text-transform:uppercase; color:var(--wr-ink);
}
.wr-product-ref{ margin:0; font-size:11px; letter-spacing:.8px; color:#a8a29a; }

.wr-existing-review{ background:var(--wr-sand); border-radius:12px; padding:12px 14px; margin:4px 0; }
.wr-review-text{
  margin:8px 0 0; font-size:12.5px; font-weight:300; line-height:1.6; color:#555;
}
.wr-review-pending{ margin:8px 0 0; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--wr-accent); }

.wr-btn-review, .wr-btn-edit{
  display:inline-block; margin-top:auto; text-align:center; text-decoration:none;
  font-family:var(--wr-title); font-weight:500;
  font-size:11.5px; letter-spacing:1.8px; text-transform:uppercase;
  padding:11px 18px; border-radius:999px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease, color .3s ease;
}
.wr-btn-review{ background:var(--wr-accent); color:#fff; }
.wr-btn-review:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px rgba(241,90,41,.30); }
.wr-btn-edit{ background:transparent; border:1px solid var(--wr-accent); color:var(--wr-accent); }
.wr-btn-edit:hover{ background:var(--wr-accent); color:#fff; }

.wr-no-products{ font-size:14px; font-weight:300; color:var(--wr-muted); padding:36px 0; }

@media (max-width:640px){
  .wr-product-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
}

/* ── Etoiles miniatures (categorie + fiche produit) ─────────────────── */
.wr-minirating{ display:flex; align-items:center; gap:6px; margin:4px 0 6px; line-height:1; }
.wr-minirating__stars{ display:inline-flex; gap:2px; }
.wr-mstar{ font-size:13px; line-height:1; }
.wr-mstar--full { color:#F15A29; }
.wr-mstar--half { color:#F15A29; opacity:.5; }
.wr-mstar--empty{ color:#d6d2cc; }
.wr-minirating__count{ font-size:11px; letter-spacing:.5px; color:#8d8880; }

.wpp-pdp__stars .wr-mstar{ font-size:16px; }
.wpp-pdp__stars .wr-minirating{ margin:0 0 8px; }
.wpp-pdp__stars .wr-minirating__count{ font-size:12px; }