/* ============================================================
   ACCUEIL (index.html, vue « tab-accueil ») — voir js/accueil.js
   ============================================================ */
body.wsh-vue-accueil #vue-app > .wsh-breadcrumb,
body.wsh-vue-accueil #vue-app > .wsh-context-bar,
body.wsh-vue-accueil #wsh-sommaire { display: none !important; }

.acc { padding: 1.25rem 0 2.5rem; }
.acc-bloc { margin-top: 2.25rem; }
.acc-titre { margin: 0; font-size: 1.1875rem; font-weight: 700; color: #2b1f2b; letter-spacing: -0.01em; }
.acc-sous-titre { margin: 0.25rem 0 0; font-size: 0.78125rem; color: #786976; }
.acc-titre-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.acc-bloc > .acc-titre { margin-bottom: 1rem; }

/* ---------- Bienvenue ---------- */
.acc-bienvenue {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.75rem 2rem; border-radius: 1.375rem;
  background:
    radial-gradient(90% 160% at 100% 0%, rgba(184,101,79,0.30) 0%, rgba(184,101,79,0) 55%),
    radial-gradient(60% 120% at 0% 100%, rgba(122,74,127,0.55) 0%, rgba(122,74,127,0) 60%),
    linear-gradient(135deg, #4a2050 0%, #5e2d66 100%);
  color: #fff;
}
.acc-bienvenue::after {
  content: ""; position: absolute; right: 9rem; top: -5rem; width: 12rem; height: 12rem; border-radius: 50%;
  border: 0.0625rem solid rgba(255,255,255,0.10); pointer-events: none;
}
.acc-bienvenue-texte { position: relative; z-index: 1; min-width: 0; }
.acc-date { margin: 0 0 0.375rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; color: #f6c3b3; }
.acc-salut { margin: 0; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.acc-magasin { margin: 0.375rem 0 0; font-size: 0.875rem; color: rgba(255,255,255,0.78); }
.acc-bienvenue-actions { position: relative; z-index: 1; }
.acc-btn-principal {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8125rem 1.375rem; border: 0; border-radius: 62.4375rem; background: #fff; color: var(--wsh-primary);
  font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 0.5rem 1.25rem rgba(20,6,24,0.25); transition: transform .15s ease, box-shadow .15s ease;
}
.acc-btn-principal svg { width: 1.0625rem; height: 1.0625rem; transition: transform .15s ease; }
.acc-btn-principal:hover { transform: translateY(-0.0625rem); box-shadow: 0 0.75rem 1.5rem rgba(20,6,24,0.3); }
.acc-btn-principal:hover svg { transform: translateX(0.1875rem); }

/* ---------- Carrousel ---------- */
.acc-carrousel { position: relative; margin-top: 1.25rem; border-radius: 1.375rem; outline: none; }
.acc-carrousel[hidden] { display: none; }
.acc-carrousel-fenetre { overflow: hidden; border-radius: 1.375rem; }
.acc-carrousel-piste { display: flex; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.acc-slide {
  position: relative; flex: 0 0 100%; min-height: 15rem; display: flex; align-items: center;
  background: var(--acc-couleur, #4a2050); color: #fff; overflow: hidden;
}
.acc-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acc-slide.avec-image::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc-couleur, #4a2050) 92%, transparent) 0%, color-mix(in srgb, var(--acc-couleur, #4a2050) 55%, transparent) 45%, transparent 75%);
}
.acc-slide.avec-image.texte-droite::before {
  background: linear-gradient(270deg, color-mix(in srgb, var(--acc-couleur, #4a2050) 92%, transparent) 0%, color-mix(in srgb, var(--acc-couleur, #4a2050) 55%, transparent) 45%, transparent 75%);
}
.acc-slide.texte-droite { justify-content: flex-end; }
.acc-slide:not(.avec-image) {
  background:
    radial-gradient(70% 140% at 100% 0%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 60%),
    var(--acc-couleur, #4a2050);
}
.acc-slide-texte { position: relative; z-index: 2; max-width: 32rem; padding: 2rem 2.75rem; }
.acc-slide-texte h2 { margin: 0 0 0.5rem; font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-shadow: 0 0.0625rem 0.75rem rgba(0,0,0,0.12); }
.acc-slide-texte p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: rgba(255,255,255,0.88); white-space: pre-line; }
.acc-slide-btn {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.125rem;
  padding: 0.6875rem 1.25rem; border-radius: 62.4375rem; background: #fff; color: #2b1f2b;
  font-size: 0.84375rem; font-weight: 700; text-decoration: none; transition: transform .15s ease;
}
.acc-slide-btn svg { width: 1rem; height: 1rem; }
.acc-slide-btn:hover { transform: translateY(-0.0625rem); }
.acc-carrousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border: 0; border-radius: 50%; background: rgba(255,255,255,0.9); color: var(--wsh-primary); cursor: pointer;
  box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15); opacity: 0; transition: opacity .2s ease;
}
.acc-carrousel-nav svg { width: 1.125rem; height: 1.125rem; }
.acc-carrousel-prec { left: 0.875rem; }
.acc-carrousel-suiv { right: 0.875rem; }
.acc-carrousel:hover .acc-carrousel-nav, .acc-carrousel:focus-within .acc-carrousel-nav { opacity: 1; }
.acc-carrousel.is-unique .acc-carrousel-nav { display: none; }
.acc-carrousel-points { position: absolute; left: 0; right: 0; bottom: 0.875rem; z-index: 3; display: flex; justify-content: center; gap: 0.375rem; }
.acc-carrousel-points button {
  width: 0.5rem; height: 0.5rem; padding: 0; border: 0; border-radius: 62.4375rem; background: rgba(255,255,255,0.5); cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.acc-carrousel-points button.is-active { width: 1.5rem; background: #fff; }

/* ---------- Votre compte : un seul panneau, lignes séparées par de fins traits ---------- */
.acc-compte {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.0625rem;
  background: var(--wsh-border-soft); border: 0.0625rem solid var(--wsh-border-soft); border-radius: 1.25rem; overflow: hidden;
}
.acc-ligne {
  display: flex; align-items: center; gap: 1rem; min-width: 0; text-align: left;
  padding: 1.125rem 1.375rem; border: 0; background: #fff; color: inherit; font: inherit; text-decoration: none; cursor: pointer;
  transition: background .15s ease;
}
.acc-ligne:last-child:nth-child(odd) { grid-column: 1 / -1; }
.acc-ligne:hover { background: #fcf9fb; }
.acc-ligne:focus-visible { outline: 0.125rem solid var(--wsh-primary-light); outline-offset: -0.125rem; }
.acc-ligne-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--wsh-bg-soft); color: var(--wsh-primary);
}
.acc-ligne-ico svg { width: 1.125rem; height: 1.125rem; }
.acc-ligne.is-fid .acc-ligne-ico { background: #fbefea; color: var(--wsh-accent); }
.acc-ligne-corps { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1; }
.acc-ligne-lib { font-size: 0.71875rem; font-weight: 500; color: #786976; }
.acc-ligne-val { font-size: 0.96875rem; font-weight: 600; color: #2b1f2b; line-height: 1.35; }
.acc-ligne-sub { font-size: 0.78125rem; line-height: 1.45; color: #7d717b; }
.acc-ligne-sub strong { color: var(--wsh-primary); font-weight: 600; }
.acc-ligne-barre { display: block; max-width: 16rem; height: 0.3125rem; margin-top: 0.4375rem; border-radius: 62.4375rem; background: #f3ecf1; overflow: hidden; }
.acc-ligne-barre span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wsh-primary-light), var(--wsh-accent)); }
.acc-ligne-fleche { display: inline-flex; flex-shrink: 0; color: #cdbfca; transition: transform .15s ease, color .15s ease; }
.acc-ligne-fleche svg { width: 1.125rem; height: 1.125rem; }
.acc-ligne:hover .acc-ligne-fleche { color: var(--wsh-primary-light); transform: translateX(0.1875rem); }
.acc-etat { font-weight: 600; color: var(--wsh-primary-light); }
.acc-chargement { display: inline-block; width: 7rem; height: 0.875rem; border-radius: 0.375rem; background: linear-gradient(90deg, #f3ecf1 25%, #faf6f9 50%, #f3ecf1 75%); background-size: 200% 100%; animation: acc-reflet 1.2s linear infinite; }
@keyframes acc-reflet { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Boutons ronds (top ventes, À découvrir) ---------- */
.acc-top-nav { display: flex; align-items: center; gap: 0.375rem; flex-shrink: 0; }
.acc-lien { border: 0; background: none; padding: 0.375rem 0.5rem; color: var(--wsh-primary-light); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
.acc-lien:hover { text-decoration: underline; }
.acc-rond {
  display: inline-flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem;
  border: 0.0625rem solid var(--wsh-border); border-radius: 50%; background: #fff; color: var(--wsh-primary); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.acc-rond:hover:not(:disabled) { background: var(--wsh-bg-soft); border-color: var(--wsh-primary-light); }
.acc-rond svg { width: 1rem; height: 1rem; }
.acc-rond:disabled { opacity: .35; cursor: default; }

/* ---------- Top ventes ---------- */
.acc-top[hidden] { display: none; }
.acc-top-liste {
  display: flex; gap: 1rem; overflow-x: auto; scroll-padding: 0 0.25rem;
  margin: 0 -0.25rem; padding: 0.25rem 0.25rem 0.75rem; scrollbar-width: none;
}
.acc-top-liste::-webkit-scrollbar { display: none; }
.acc-produit {
  position: relative; flex: 0 0 11.5rem; scroll-snap-align: start;
  display: flex; flex-direction: column; text-align: left;
  padding: 0.5rem; border: 0.0625rem solid var(--wsh-border-soft); border-radius: 1.125rem; background: #fff;
  color: inherit; font: inherit; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.acc-produit:hover { border-color: var(--wsh-border); box-shadow: 0 0.75rem 1.5rem rgba(74,32,80,0.08); transform: translateY(-0.125rem); }
.acc-produit-rang {
  position: absolute; top: 0.9375rem; left: 0.9375rem; z-index: 1;
  display: inline-flex; align-items: center; padding: 0.1875rem 0.5rem;
  border-radius: 62.4375rem; background: rgba(255,255,255,0.94); color: var(--wsh-primary); font-size: 0.6875rem; font-weight: 700;
  box-shadow: 0 0.0625rem 0.25rem rgba(43,23,48,0.12);
}
.acc-produit-rang::before { content: "N°\00a0"; font-weight: 500; color: #786976; }
.acc-produit:nth-child(-n+3) .acc-produit-rang { background: var(--wsh-accent); color: #fff; }
.acc-produit:nth-child(-n+3) .acc-produit-rang::before { color: rgba(255,255,255,0.75); }
.acc-produit-panier {
  position: absolute; top: 0.9375rem; right: 0.9375rem; z-index: 1; padding: 0.1875rem 0.5rem; border-radius: 62.4375rem;
  background: var(--wsh-green-bg); color: var(--wsh-green); font-size: 0.625rem; font-weight: 700;
}
.acc-produit-photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 0.75rem; background: #f6f1f4; overflow: hidden; }
.acc-produit-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.acc-produit:hover .acc-produit-photo img { transform: scale(1.04); }
.acc-produit-photo.is-vide::after { content: "Photo à venir"; font-size: 0.6875rem; font-weight: 600; color: #b3a4b0; }
.acc-produit-corps { display: flex; flex-direction: column; flex: 1; padding: 0.75rem 0.375rem 0.25rem; }
.acc-produit-nom { min-height: 2.2em; font-size: 0.8125rem; font-weight: 600; color: #2b1f2b; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acc-produit-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.625rem; }
.acc-produit-prix { display: flex; flex-direction: column; gap: 0.125rem; font-size: 1rem; font-weight: 700; color: var(--wsh-primary); line-height: 1.1; }
.acc-produit-prix small { font-size: 0.625rem; font-weight: 500; color: #786976; }
.acc-produit-voir {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--wsh-bg-soft); color: var(--wsh-primary); font-size: 0; transition: background .15s ease, color .15s ease;
}
.acc-produit-voir svg { width: 0.9375rem; height: 0.9375rem; }
.acc-produit:hover .acc-produit-voir { background: var(--wsh-primary); color: #fff; }
.acc-top-squelette { display: flex; gap: 1rem; }
.acc-top-squelette span { flex: 0 0 11.5rem; height: 16rem; border-radius: 1.125rem; background: linear-gradient(90deg, #f3ecf1 25%, #faf6f9 50%, #f3ecf1 75%); background-size: 200% 100%; animation: acc-reflet 1.2s linear infinite; }

/* ---------- À découvrir : cartes qui défilent ---------- */
.acc-decouverte[hidden] { display: none; }
.acc-dec-piste {
  --acc-dec-gap: 1rem;
  display: flex; gap: var(--acc-dec-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -0.25rem; padding: 0.25rem;
}
.acc-dec-piste::-webkit-scrollbar { display: none; }
.acc-dec-carte {
  position: relative; overflow: hidden; scroll-snap-align: start;
  flex: 0 0 calc((100% - 2 * var(--acc-dec-gap)) / 3);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; min-height: 15.5rem;
  padding: 1.375rem 1.375rem 1.25rem; border-radius: 1.25rem; border: 0.0625rem solid var(--wsh-border-soft);
  background: linear-gradient(160deg, #ffffff 0%, #faf5f8 100%);
}
.acc-dec-carte:nth-child(3n+2) { background: linear-gradient(160deg, #ffffff 0%, #fdf4f0 100%); }
.acc-dec-carte:nth-child(3n) { background: linear-gradient(160deg, #ffffff 0%, #f2f7f3 100%); }
.acc-dec-haut { display: flex; align-items: center; gap: 0.625rem; }
.acc-dec-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: #fff; color: var(--wsh-primary); box-shadow: 0 0.125rem 0.5rem rgba(74,32,80,0.08);
}
.acc-dec-ico svg { width: 1.0625rem; height: 1.0625rem; }
.acc-dec-kicker { font-size: 0.71875rem; font-weight: 600; color: var(--wsh-accent-texte); }
.acc-dec-carte h3 { margin: 0.25rem 0 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: #2b1f2b; }
.acc-dec-carte p { margin: 0; font-size: 0.8125rem; line-height: 1.55; color: #6f6270; }
.acc-dec-image { position: absolute; right: -0.75rem; bottom: -0.5rem; width: 7.5rem; opacity: .95; pointer-events: none; filter: drop-shadow(0 0.5rem 1rem rgba(74,32,80,0.15)); }
.acc-dec-meubles h3, .acc-dec-meubles p { max-width: calc(100% - 5.5rem); }
.acc-decouverte-liste { margin: 0.125rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.375rem; }
.acc-decouverte-liste li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.78125rem; font-weight: 600; color: #3f343d; }
.acc-puce { display: inline-flex; padding: 0.125rem 0.5rem; border-radius: 62.4375rem; background: #f1e8f0; color: var(--wsh-primary); font-size: 0.625rem; font-weight: 700; white-space: nowrap; }
.acc-puce.is-anticipation { background: repeating-linear-gradient(135deg, #fbe9e3 0 0.25rem, #fff 0.25rem 0.5rem); color: #c9472f; border: 0.0625rem dashed #f2a99b; }
.acc-dec-cta {
  display: inline-flex; align-items: center; gap: 0.4375rem; margin-top: auto; padding-top: 0.5rem;
  color: var(--wsh-primary); font-size: 0.8125rem; font-weight: 600; text-decoration: none;
}
.acc-dec-cta svg { width: 0.9375rem; height: 0.9375rem; transition: transform .15s ease; }
.acc-dec-cta:hover svg { transform: translateX(0.1875rem); }
.acc-dec-carte:has(.acc-dec-cta:hover) { border-color: var(--wsh-border); }
.acc-dec-points { display: flex; justify-content: center; gap: 0.375rem; margin-top: 0.875rem; }
.acc-dec-points span { width: 0.4375rem; height: 0.4375rem; border-radius: 62.4375rem; background: #e6dbe3; transition: width .25s ease, background .25s ease; }
.acc-dec-points span.is-active { width: 1.375rem; background: var(--wsh-primary-light); }
.acc-decouverte.is-statique .acc-dec-points, .acc-decouverte.is-statique .acc-top-nav { display: none; }

/* Disponible : produit ouvert depuis l'accueil */
.wsh-card.wsh-card-surbrillance { animation: acc-surbrillance 2.4s ease; }
@keyframes acc-surbrillance {
  0%, 60% { box-shadow: 0 0 0 0.1875rem var(--wsh-accent), 0 0.75rem 1.75rem rgba(184,101,79,0.25); }
  100% { box-shadow: none; }
}

@media (max-width: 900px) {
  .acc-compte { grid-template-columns: 1fr; }
  .acc-ligne:last-child:nth-child(odd) { grid-column: auto; }
  .acc-dec-carte { flex-basis: calc((100% - var(--acc-dec-gap)) / 2); }
}
@media (max-width: 640px) {
  .acc { padding-top: 0.75rem; }
  .acc-bloc { margin-top: 1.875rem; }
  .acc-bienvenue { padding: 1.375rem 1.25rem; border-radius: 1.125rem; }
  .acc-salut { font-size: 1.5rem; }
  .acc-bienvenue-actions, .acc-btn-principal { width: 100%; justify-content: center; }
  .acc-carrousel, .acc-carrousel-fenetre { border-radius: 1.125rem; }
  .acc-slide { min-height: 13rem; align-items: flex-end; }
  .acc-slide.avec-image::before, .acc-slide.avec-image.texte-droite::before {
    background: linear-gradient(0deg, color-mix(in srgb, var(--acc-couleur, #4a2050) 94%, transparent) 0%, color-mix(in srgb, var(--acc-couleur, #4a2050) 60%, transparent) 50%, transparent 85%);
  }
  .acc-slide-texte { padding: 1.25rem 1.25rem 2.25rem; }
  .acc-slide-texte h2 { font-size: 1.3125rem; }
  .acc-slide-texte p { font-size: 0.8125rem; }
  .acc-carrousel-nav { display: none; }
  .acc-ligne { padding: 0.9375rem 1rem; gap: 0.875rem; }
  .acc-titre-ligne { align-items: flex-start; }
  .acc-top-nav .acc-rond { display: none; }
  .acc-produit { flex-basis: 10rem; }
  .acc-dec-carte { flex-basis: 85%; min-height: 14rem; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-carrousel-piste { transition: none; }
  .acc-chargement, .acc-top-squelette span { animation: none; }
}

/* ---------- Dynamisme : bandeau vivant, messages, apparitions ---------- */
.acc-bienvenue { background-size: 160% 160%, 160% 160%, 100% 100%; animation: acc-ciel 18s ease-in-out infinite alternate; }
@keyframes acc-ciel { from { background-position: 0% 0%, 0% 100%, 0 0; } to { background-position: 100% 30%, 40% 60%, 0 0; } }
.acc-deco { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(0.125rem); }
.acc-deco-1 { width: 9rem; height: 9rem; right: 22%; bottom: -5rem; background: radial-gradient(circle, rgba(246,195,179,0.35), rgba(246,195,179,0)); animation: acc-flotte 9s ease-in-out infinite alternate; }
.acc-deco-2 { width: 5rem; height: 5rem; left: 46%; top: -2.5rem; background: radial-gradient(circle, rgba(255,255,255,0.18), rgba(255,255,255,0)); animation: acc-flotte 7s ease-in-out 1s infinite alternate-reverse; }
.acc-deco-feuilles { position: absolute; right: 13rem; bottom: -0.5rem; width: 9rem; color: rgba(255,255,255,0.09); pointer-events: none; transform-origin: 75% 100%; animation: acc-balance 6s ease-in-out infinite alternate; }
@keyframes acc-flotte { from { transform: translate(0, 0); } to { transform: translate(1.5rem, -1rem); } }
@keyframes acc-balance { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

.acc-flash { position: relative; width: 34rem; max-width: 100%; height: 1.875rem; margin-top: 0.875rem; overflow: hidden; }
.acc-flash[hidden] { display: none; }
.acc-flash-msg {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%;
  padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem; border-radius: 62.4375rem;
  background: rgba(255,255,255,0.13); border: 0.0625rem solid rgba(255,255,255,0.16);
  font-size: 0.78125rem; font-weight: 500; color: #fff; white-space: nowrap;
  animation: acc-flash-entree .45s cubic-bezier(.22,.61,.36,1) both;
}
.acc-flash-msg > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.acc-flash-msg.is-sortie { animation: acc-flash-sortie .4s ease both; }
.acc-flash-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: rgba(255,255,255,0.9); color: var(--wsh-primary); flex-shrink: 0; }
.acc-flash-ico svg { width: 0.75rem; height: 0.75rem; }
@keyframes acc-flash-entree { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes acc-flash-sortie { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-100%); } }

.acc-reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.acc-reveal.is-visible { opacity: 1; transform: none; }
.acc-reveal .acc-ligne, .acc-reveal .acc-produit, .acc-reveal .acc-dec-carte { opacity: 0; transform: translateY(0.75rem); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1), background .15s ease, border-color .2s ease, box-shadow .2s ease; }
.acc-reveal.is-visible .acc-ligne, .acc-reveal.is-visible .acc-produit, .acc-reveal.is-visible .acc-dec-carte { opacity: 1; transform: none; }
.acc-reveal.is-visible :is(.acc-ligne, .acc-produit, .acc-dec-carte):nth-child(2) { transition-delay: .06s; }
.acc-reveal.is-visible :is(.acc-ligne, .acc-produit, .acc-dec-carte):nth-child(3) { transition-delay: .12s; }
.acc-reveal.is-visible :is(.acc-ligne, .acc-produit, .acc-dec-carte):nth-child(4) { transition-delay: .18s; }
.acc-reveal.is-visible :is(.acc-ligne, .acc-produit, .acc-dec-carte):nth-child(5) { transition-delay: .24s; }
.acc-reveal.is-visible :is(.acc-ligne, .acc-produit, .acc-dec-carte):nth-child(6) { transition-delay: .3s; }
.acc-reveal.is-visible .acc-produit:hover { transform: translateY(-0.125rem); transition-delay: 0s; }
.acc-ligne-barre span { animation: acc-remplir 1.1s cubic-bezier(.22,.61,.36,1) .2s both; transform-origin: left; }
@keyframes acc-remplir { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.acc-dec-carte { transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease, opacity .5s ease; }
.acc-reveal.is-visible .acc-dec-carte:hover { transform: translateY(-0.1875rem); box-shadow: 0 0.875rem 1.75rem rgba(74,32,80,0.1); border-color: var(--wsh-border); transition-delay: 0s; }
.acc-dec-carte:hover .acc-dec-ico { transform: rotate(-8deg) scale(1.08); }
.acc-dec-ico { transition: transform .25s ease; }
.acc-dec-carte:hover .acc-dec-image { transform: translateY(-0.25rem) rotate(-2deg); }
.acc-dec-image { transition: transform .35s ease; }

@media (max-width: 640px) {
  .acc-deco-feuilles { right: -1rem; bottom: auto; top: 0.5rem; width: 6rem; }
  .acc-flash { height: 2rem; }
  .acc-flash-msg { font-size: 0.71875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-bienvenue, .acc-deco, .acc-deco-feuilles, .acc-ligne-barre span { animation: none; }
  /* Les flèches des carrousels sont exclues : leur masquage en bout de rangée (opacité) et leur centrage
     vertical (translateY) doivent rester actifs. */
  .acc-reveal, .acc-reveal *:not(.wsh-fleche-bord) { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Encore plus de mouvement ---------- */
/* Bannières : léger zoom lent sur l'image (effet Ken Burns) */
.acc-slide-img { animation: acc-kenburns 14s ease-in-out infinite alternate; transform-origin: 60% 50%; }
@keyframes acc-kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, -1%); } }
/* Titres de section : trait d'accent qui se dessine à l'apparition */
.acc-titre { position: relative; display: inline-block; }
.acc-titre::after { content: ""; position: absolute; left: 0; bottom: -0.3125rem; height: 0.1875rem; width: 2.25rem; border-radius: 62.4375rem; background: linear-gradient(90deg, var(--wsh-accent), var(--wsh-primary-light)); transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.22,.61,.36,1) .25s; }
.acc-reveal.is-visible .acc-titre::after { transform: scaleX(1); }
.acc-bloc > .acc-titre { margin-bottom: 1.25rem; }
/* Points « À découvrir » : le point actif se remplit pendant l'attente */
.acc-dec-points span.is-active { position: relative; overflow: hidden; background: #e6dbe3; }
.acc-dec-points span.is-active::after { content: ""; position: absolute; inset: 0; background: var(--wsh-primary-light); transform-origin: left; animation: acc-progression-point 5s linear both; }
.acc-decouverte:hover .acc-dec-points span.is-active::after { animation-play-state: paused; }
@keyframes acc-progression-point { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.acc-produit:nth-child(1) .acc-produit-rang { animation: acc-pop 2.8s ease-in-out 1.2s infinite; }
@keyframes acc-pop { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.15); } }
/* Lignes du compte : icône qui s'anime au survol */
.acc-ligne-ico { transition: transform .25s ease, background .2s ease, color .2s ease; }
.acc-ligne:hover .acc-ligne-ico { transform: scale(1.08) rotate(-6deg); background: var(--wsh-primary); color: #fff; }
.acc-ligne-barre span { position: relative; overflow: hidden; }
.acc-ligne-barre span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); transform: translateX(-100%); animation: acc-brille 2.6s ease-in-out 1.4s infinite; }
@keyframes acc-brille { to { transform: translateX(100%); } }
/* Bouton « Voir le disponible » : flèche qui invite au clic */
.acc-btn-principal svg { animation: acc-invite 2.4s ease-in-out 2s infinite; }
@keyframes acc-invite { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(0.25rem); } 90% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .acc-slide-img, .acc-produit-rang, .acc-ligne-barre span::after, .acc-btn-principal svg, .acc-dec-points span.is-active::after { animation: none !important; }
}

/* ---------- V3_143 ---------- */
/* Messages du bandeau : cliquables */
a.acc-flash-msg { text-decoration: none; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
a.acc-flash-msg:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.4); }
.acc-flash-fleche { display: inline-flex; margin-left: 0.125rem; opacity: .75; transition: transform .2s ease; }
.acc-flash-fleche svg { width: 0.8125rem; height: 0.8125rem; }
a.acc-flash-msg:hover .acc-flash-fleche { transform: translateX(0.1875rem); opacity: 1; }

/* Votre compte : sans cadre, simples lignes séparées */
.acc-compte { background: none; border: 0; border-radius: 0; gap: 0 2rem; overflow: visible; }
.acc-ligne { background: none; border-bottom: 0.0625rem solid var(--wsh-border-soft); border-radius: 0.875rem; padding: 0.9375rem 0.75rem; }
.acc-ligne:hover { background: #fff; box-shadow: 0 0.375rem 1.25rem rgba(74,32,80,0.07); border-bottom-color: transparent; }

/* À découvrir : toute la carte est cliquable */
.acc-dec-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.acc-dec-carte { cursor: pointer; }
.acc-rotation-titre { height: 1.3em; }

/* Top ventes : animation au survol */
.acc-produit { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease; }
.acc-reveal.is-visible .acc-produit:hover, .acc-produit:hover {
  transform: translateY(-0.375rem); border-color: transparent;
  box-shadow: 0 1.125rem 2rem rgba(74,32,80,0.14), 0 0 0 0.125rem rgba(224,122,95,0.35);
}
.acc-produit-photo img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.acc-produit:hover .acc-produit-photo img { transform: scale(1.09) rotate(-1.5deg); }
.acc-produit-nom { transition: color .25s ease; }
.acc-produit:hover .acc-produit-nom { color: var(--wsh-primary); }
.acc-produit-rang { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.acc-produit:hover .acc-produit-rang { transform: translateY(-0.125rem) scale(1.08); }
.acc-produit-voir { transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.acc-produit:hover .acc-produit-voir { background: var(--wsh-primary); color: #fff; transform: scale(1.12); }
.acc-produit:hover .acc-produit-voir svg { animation: acc-invite 1.2s ease-in-out infinite; }
@media (hover: none) { .acc-produit:hover { transform: none; } }

/* ---------- V3_144 ---------- */
/* Couleurs des lignes du compte : favoris rouge cerise, dernière commande bleu électrique */
.acc-ligne.is-favoris .acc-ligne-ico { background: #fde8ec; color: #c8102e; }
.acc-ligne.is-favoris:hover .acc-ligne-ico { background: #c8102e; color: #fff; }
.acc-ligne.is-commande .acc-ligne-ico { background: #e3e9f8; color: #1739a6; }
.acc-ligne.is-commande:hover .acc-ligne-ico { background: #1739a6; color: #fff; }
.acc-ligne.is-commande .acc-etat { color: #1739a6; }
/* Lien vers « À propos » sous « À découvrir » */
.acc-dec-plus { display: flex; justify-content: center; margin-top: 1rem; }
.acc-dec-plus-btn {
  display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.5rem 1rem; border-radius: 62.4375rem;
  border: 0.0625rem solid var(--wsh-border); background: #fff; color: var(--wsh-primary); font-size: 0.78125rem; font-weight: 600; text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}
.acc-dec-plus-btn svg { width: 0.875rem; height: 0.875rem; transition: transform .2s ease; }
.acc-dec-plus-btn:hover { background: var(--wsh-bg-soft); border-color: var(--wsh-primary-light); }
.acc-dec-plus-btn:hover svg { transform: translateX(0.1875rem); }

/* ============================================================
   ADMINISTRATION : bannières de l'accueil (js/admin-accueil.js)
   ============================================================ */
.adm-accueil-vignette {
  display: block; width: 6rem; height: 2.25rem; border-radius: 0.375rem; overflow: hidden;
  background: var(--acc-couleur, #4a2050); border: 0.0625rem solid var(--wsh-border-soft);
}
.adm-accueil-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-accueil-previsu { margin: 0.5rem 0 1rem; border-radius: 1rem; overflow: hidden; }
.adm-accueil-previsu .acc-slide { min-height: 10rem; }
.adm-accueil-previsu .acc-slide-texte { padding: 1.25rem 1.5rem; max-width: 24rem; }
.adm-accueil-previsu .acc-slide-texte h2 { font-size: 1.25rem; }
.adm-accueil-previsu .acc-slide-texte p { font-size: 0.8125rem; }
.adm-accueil-previsu .acc-slide-btn { margin-top: 0.75rem; padding: 0.5rem 1rem; font-size: 0.75rem; }
.adm-accueil-couleurs { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.adm-accueil-couleurs button {
  width: 1.75rem; height: 1.75rem; padding: 0; border: 0.125rem solid #fff; border-radius: 50%; background: var(--c); cursor: pointer;
  box-shadow: 0 0 0 0.0625rem var(--wsh-border);
}
.adm-accueil-couleurs button.is-active { box-shadow: 0 0 0 0.125rem var(--wsh-primary); }
.adm-accueil-couleur-perso { position: relative; display: inline-flex; width: 1.75rem; height: 1.75rem; border-radius: 50%; overflow: hidden; background: conic-gradient(#e06b4f, #e0c84f, #4fe06b, #4fb8e0, #8a4fe0, #e04fa8, #e06b4f); cursor: pointer; box-shadow: 0 0 0 0.0625rem var(--wsh-border); }
.adm-accueil-couleur-perso input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.adm-accueil-apercu:empty { display: none; }
.adm-accueil-apercu { margin: 0 0 1rem; }
.adm-accueil-defile { display: flex; gap: 0.75rem; overflow-x: auto; padding: 0.375rem 0 0.5rem; }
.adm-accueil-mini { position: relative; flex: 0 0 20rem; border-radius: 0.875rem; overflow: hidden; }
.adm-accueil-mini .acc-slide { min-height: 7.5rem; }
.adm-accueil-mini .acc-slide-texte { padding: 0.875rem 1rem; }
.adm-accueil-mini .acc-slide-texte h2 { font-size: 0.9375rem; margin-bottom: 0.25rem; }
.adm-accueil-mini .acc-slide-texte p { font-size: 0.6875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-accueil-mini .acc-slide-btn { margin-top: 0.5rem; padding: 0.3125rem 0.75rem; font-size: 0.65625rem; }
.adm-accueil-mini-n { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #fff; color: var(--wsh-primary); font-size: 0.6875rem; font-weight: 700; }
#accadm-f-lien-perso { margin-top: 0.375rem; }
#accadm-f-enseignes .wsh-multiselect-panel { max-height: 14rem; overflow-y: auto; z-index: 30; }

/* Offre du moment : plusieurs offres qui défilent dans la ligne du compte */
.acc-rotation { position: relative; display: block; overflow: hidden; height: 1.35em; }
.acc-rotation > span { position: absolute; left: 0; right: 0; top: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease; }
.acc-rotation > span.is-avant { transform: translateY(100%); opacity: 0; }
.acc-rotation > span.is-apres { transform: translateY(-100%); opacity: 0; }

/* Top ventes : la liste s'attrape et glisse à la souris */
@media (hover: hover) {
  .acc-top-liste { cursor: grab; user-select: none; }
  .acc-top-liste.is-glisse { cursor: grabbing; }
  .acc-top-liste.is-glisse .acc-produit { pointer-events: none; }
}
.acc-produit-photo img { -webkit-user-drag: none; }
/* À découvrir : le point actif se remplit au même rythme que le défilement (9 s) */
.acc-dec-points span.is-active::after { animation-duration: 9s; }

/* V3_149 : À découvrir s'attrape et glisse à la souris */
@media (hover: hover) {
  .acc-dec-piste { cursor: grab; user-select: none; }
  .acc-dec-piste.is-glisse { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
  .acc-dec-piste.is-glisse .acc-dec-carte { pointer-events: none; }
}
.acc-dec-image { -webkit-user-drag: none; }

/* V3_149 : pastille « Offre du moment » plus coupée en bas (hauteur de la zone = hauteur de la pastille) */
.acc-flash { height: 2.25rem; }
.acc-flash-msg { top: 0.0625rem; }
@media (max-width: 640px) { .acc-flash { height: 2.25rem; } }

/* V3_155 : Fonctionnalités du webshop — rangée de tuiles tirées au hasard, renouvelées une à une */
.acc-fn-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; }
.acc-fn-case { min-width: 0; transition: opacity .35s ease, transform .35s ease; }
.acc-fn-case.is-sortie { opacity: 0; transform: translateY(0.375rem) scale(.98); }
.acc-fn-case.is-entree { animation: acc-fn-entree .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes acc-fn-entree { from { opacity: 0; transform: translateY(-0.375rem) scale(.98); } to { opacity: 1; transform: none; } }
.acc-fn-tuile {
  position: relative; display: flex; flex-direction: column; gap: 0.625rem; height: 100%; padding: 1rem 1rem 1.125rem;
  border-radius: 1rem; background: #fff; border: 0.0625rem solid var(--wsh-border-soft); color: inherit; text-decoration: none;
  box-shadow: 0 0.25rem 1rem rgba(74,32,80,0.04); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.acc-fn-tuile:hover { border-color: var(--wsh-border); box-shadow: 0 0.5rem 1.5rem rgba(74,32,80,0.08); transform: translateY(-0.125rem); }
.acc-fn-ico { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.75rem; background: #f4eef2; color: var(--wsh-primary); }
.acc-fn-ico svg { width: 1.125rem; height: 1.125rem; }
.acc-fn-textes { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.acc-fn-textes strong { font-size: 0.875rem; line-height: 1.3; color: #2b1f2b; }
.acc-fn-textes span { font-size: 0.75rem; line-height: 1.5; color: #6b5d69; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acc-fn-fleche { position: absolute; top: 1rem; right: 1rem; display: inline-flex; color: #c9bcc6; transition: color .2s ease, transform .2s ease; }
.acc-fn-fleche svg { width: 0.9375rem; height: 0.9375rem; }
a.acc-fn-tuile:hover .acc-fn-fleche { color: var(--wsh-primary); transform: translateX(0.1875rem); }
@media (max-width: 900px) { .acc-fn-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .acc-fn-grille { gap: 0.625rem; }
  .acc-fn-tuile { padding: 0.875rem; }
  .acc-fn-textes span { -webkit-line-clamp: 2; }
}
@media (prefers-reduced-motion: reduce) { .acc-fn-case, .acc-fn-case.is-entree { transition: none; animation: none; } }

/* V3_157 : texte de la pastille « Offre du moment » tronqué avec « … » (la flèche reste visible) */
.acc-flash-msg { box-sizing: border-box; }
.acc-flash-texte { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-flash-fleche { flex-shrink: 0; }

/* Flèches sur le bord des cartes (top ventes, À découvrir) */
.acc-decouverte.is-statique .wsh-fleche-bord { display: none; }

/* v203 - « À découvrir » : pas d'aimantation sur les cartes. Le glisser (souris ou doigt) s'arrête là où on le lâche,
   comme « Les meilleures ventes ». Les flèches et le défilement automatique avancent toujours d'une carte. */
.acc-dec-piste { scroll-snap-type: none; }

/* v273 - Pastilles des tuiles « Votre compte » harmonisées : même clarté et même saturation pour les quatre teintes
   (avant : bleu #e3e9f8 nettement plus marqué que le violet #f7f1f5, presque gris). Couleurs au survol inchangées. */
.acc-ligne-ico { background: #f7e7f9; }
.acc-ligne.is-fid .acc-ligne-ico { background: #f9e8e5; }
.acc-ligne.is-favoris .acc-ligne-ico { background: #f9e7ea; }
.acc-ligne.is-commande .acc-ligne-ico { background: #e7ecf9; }
.acc-ligne:hover .acc-ligne-ico { background: var(--wsh-primary); }
.acc-ligne.is-favoris:hover .acc-ligne-ico { background: #c8102e; }
.acc-ligne.is-commande:hover .acc-ligne-ico { background: #1739a6; }

/* v274-v275 - Survol des pastilles « Votre compte » : chaque pastille se remplit de la couleur de son icône
   (avant : les pastilles corail -- panier rempli, fid' -- passaient au violet du header au survol).
   Panier vide : icône et survol violets (--wsh-primary), comme avant. */
.acc-ligne .acc-ligne-ico { color: var(--wsh-primary); }
.acc-ligne:hover .acc-ligne-ico { background: var(--wsh-primary); color: #fff; }
.acc-ligne.is-fid .acc-ligne-ico { color: var(--wsh-accent); }
.acc-ligne.is-fid:hover .acc-ligne-ico { background: var(--wsh-accent); color: #fff; }
.acc-ligne.is-favoris .acc-ligne-ico { color: #c8102e; }
.acc-ligne.is-favoris:hover .acc-ligne-ico { background: #c8102e; color: #fff; }
.acc-ligne.is-commande .acc-ligne-ico { color: #1739a6; }
.acc-ligne.is-commande:hover .acc-ligne-ico { background: #1739a6; color: #fff; }

/* v276 - Couleur fixe par tuile « Votre compte », quel que soit leur contenu : bleu (dernière commande), corail (fid'),
   violet (panier en cours, vide ou rempli : plus de classe is-accent), rouge (favoris). */

/* v278 - Tuile « Dernière commande » : seul le fond pastel est adouci (#e7ecf9 -> #edf1fa ; un bleu froid ressort plus que
   les teintes chaudes sur le fond de la page à clarté égale). Icône et survol gardent le bleu foncé #1739a6
   (essai v277 #4563b0 annulé). */
.acc-ligne.is-commande .acc-ligne-ico { background: #edf1fa; }
.acc-ligne.is-commande:hover .acc-ligne-ico { background: #1739a6; color: #fff; }

/* v279 - Une couleur foncée par tuile « Votre compte » (--acc-fonce) : icône, survol de la pastille et mots mis en avant
   (<strong>, état de la commande) utilisent la même. Bleu commande, corail fid', violet panier, rouge favoris. */
.acc-ligne { --acc-fonce: var(--wsh-primary); }
.acc-ligne.is-commande { --acc-fonce: #1739a6; }
.acc-ligne.is-fid { --acc-fonce: var(--wsh-accent); }
.acc-ligne.is-favoris { --acc-fonce: #c8102e; }
.acc-ligne .acc-ligne-ico,
.acc-ligne.is-commande .acc-ligne-ico, .acc-ligne.is-fid .acc-ligne-ico, .acc-ligne.is-favoris .acc-ligne-ico { color: var(--acc-fonce); }
.acc-ligne:hover .acc-ligne-ico,
.acc-ligne.is-commande:hover .acc-ligne-ico, .acc-ligne.is-fid:hover .acc-ligne-ico, .acc-ligne.is-favoris:hover .acc-ligne-ico { background: var(--acc-fonce); color: #fff; }
.acc-ligne .acc-ligne-sub strong, .acc-ligne .acc-etat, .acc-ligne.is-commande .acc-etat { color: var(--acc-fonce); }