/* ═══ FENÊTRE D'ACCUEIL ═══ */

.wc-bg{
  position:fixed;inset:0;z-index:400;
  background:rgba(20,30,22,.55);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.wc-bg.on{opacity:1;pointer-events:auto}
@media (min-width:640px){ .wc-bg{align-items:center} }

.wc{
  position:relative;width:100%;max-width:430px;
  background:var(--parchment,#F7F2EA);
  border-radius:22px 22px 0 0;
  padding:26px 24px;
  padding-bottom:calc(26px + env(safe-area-inset-bottom));
  max-height:94vh;overflow-y:auto;
  transform:translateY(30px);
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.wc-bg.on .wc{transform:none}
@media (min-width:640px){ .wc{border-radius:22px} }

/* La croix est grande, cerclée, évidente. Une croix qu'on
   cherche est une croix qui agace. */
.wc-x{
  position:absolute;top:14px;right:14px;z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:var(--ivory,#FDFAF5);
  border:1px solid rgba(42,61,47,.14);
  display:grid;place-items:center;cursor:pointer;padding:0;
  color:var(--forest,#2A3D2F);
}
.wc-x:active{background:var(--mist,#E8E2D9)}
.wc-x svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round}

/* ── L'animation, en boucle ──
   La photo entre dans l'objectif, éclair, les quatre flacons se
   déploient — puis tout recommence après une pause.

   `infinite` plutôt que `forwards` : quelqu'un qui lit le texte
   ou saisit son adresse manquait une passe unique. */
.wc-stage{margin:2px auto 14px;max-width:250px;position:relative;height:150px}

.wc-cam{position:absolute;inset:0;display:grid;place-items:center}
.wc-cam svg{width:146px;height:146px;display:block}

/* le boîtier */
.wc-body rect{fill:var(--ivory,#FDFAF5);stroke:var(--forest,#2A3D2F);stroke-width:2}
.wc-led{fill:var(--gold,#B8965A)}

/* la photo */
.wc-hair{transform-box:fill-box;transform-origin:center;opacity:0}

/* L'objectif n'est plus qu'une bague : le verre sombre recouvrait
   la photo et on ne voyait plus les cheveux. */
.wc-lens{transform-origin:70px 70px;opacity:0}
.wc-ring{fill:none;stroke:var(--gold,#B8965A);stroke-width:2.6}
.wc-ring2{fill:none;stroke:var(--gold,#B8965A);stroke-width:.9;opacity:.4}
.wc-glint{fill:#FDFAF5;opacity:.3}
.wc-flash{fill:var(--gold,#B8965A);opacity:0;transform-origin:70px 70px}

/* les flacons */
.wc-shots{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.wc-shot{width:48px;height:104px;object-fit:contain;opacity:0}

/* ── Le cycle : 5,4 s, dont 1,4 s de pause ── */
.wc-bg.on .wc-body  { animation:wcBody  5.4s ease-in-out infinite }
.wc-bg.on .wc-hair  { animation:wcHair  5.4s ease-out     infinite }
.wc-bg.on .wc-lens  { animation:wcLens  5.4s ease-out     infinite }
.wc-bg.on .wc-flash { animation:wcFlash 5.4s ease-out     infinite }
.wc-bg.on .wc-shot  { animation:wcShot  5.4s cubic-bezier(.22,1,.36,1) infinite }
.wc-bg.on .wc-shot:nth-child(1){ animation-delay:.04s }
.wc-bg.on .wc-shot:nth-child(2){ animation-delay:.10s }
.wc-bg.on .wc-shot:nth-child(3){ animation-delay:.16s }
.wc-bg.on .wc-shot:nth-child(4){ animation-delay:.22s }

/* Le boîtier s'efface quand les flacons prennent la place. */
@keyframes wcBody{
  0%,4%   { opacity:0 }
  10%,44% { opacity:1 }
  52%     { opacity:0 }
  92%     { opacity:0 }
  100%    { opacity:0 }
}
@keyframes wcHair{
  0%    { opacity:0; transform:scale(1.9) }
  10%   { opacity:1; transform:scale(1.35) }
  32%   { opacity:1; transform:scale(1) }
  40%   { opacity:0; transform:scale(.3) }
  100%  { opacity:0; transform:scale(.3) }
}
@keyframes wcLens{
  0%      { opacity:0; transform:scale(1.3) }
  10%     { opacity:1; transform:scale(1) }
  40%     { opacity:1; transform:scale(1) }
  45%     { opacity:1; transform:scale(.92) }
  54%     { opacity:0; transform:scale(.4) }
  100%    { opacity:0 }
}
@keyframes wcFlash{
  0%,38% { opacity:0; transform:scale(.85) }
  43%    { opacity:.65; transform:scale(1.06) }
  52%    { opacity:0; transform:scale(1.35) }
  100%   { opacity:0 }
}
@keyframes wcShot{
  0%,42%  { opacity:0; transform:translateY(12px) scale(.55) }
  58%     { opacity:1; transform:translateY(0) scale(1) }
  82%     { opacity:1; transform:none }
  92%     { opacity:0; transform:translateY(-6px) scale(.9) }
  100%    { opacity:0 }
}

/* ── Le texte ── */
.wc-k{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:12.5px;
  color:var(--sage,#8FA47A);letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:8px;
}
.wc-t{
  font-family:'Playfair Display',serif;font-size:26px;font-weight:400;
  color:var(--forest,#2A3D2F);line-height:1.18;letter-spacing:-.01em;
  margin-bottom:11px;
}
.wc-t em{font-style:italic;color:var(--gold,#B8965A)}
.wc-b{
  font-family:'Inter',sans-serif;font-size:13px;font-weight:300;
  color:var(--soft,#7A7268);line-height:1.7;margin-bottom:17px;
}

/* ── Le formulaire ── */
.wc-input{
  width:100%;font-family:'Inter',sans-serif;font-size:16px;font-weight:300;
  color:var(--onyx,#1A1A1A);background:#fff;
  border:1px solid rgba(42,61,47,.16);border-radius:11px;
  padding:14px 15px;margin-bottom:10px;
}
.wc-input:focus{outline:none;border-color:var(--sage,#8FA47A)}

.wc-go{
  display:block;width:100%;text-align:center;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ivory,#FDFAF5);background:var(--forest,#2A3D2F);
  border:none;border-radius:999px;padding:15px;cursor:pointer;
}
.wc-go:active{background:#1e2e22}
.wc-go:disabled{opacity:.5}

.wc-google{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-top:9px;
  font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;
  color:var(--forest,#2A3D2F);background:#fff;
  border:1px solid rgba(42,61,47,.16);border-radius:999px;
  padding:13px;cursor:pointer;
}
.wc-google:active{background:var(--mist,#E8E2D9)}

.wc-msg{
  display:none;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:300;
  color:#8C4A3F;background:rgba(201,168,150,.18);
  border-radius:10px;padding:11px 13px;margin-bottom:10px;line-height:1.6;
}
.wc-msg.on{display:block}

.wc-fine{
  font-family:'Inter',sans-serif;font-size:11px;font-weight:300;
  color:var(--soft,#7A7268);line-height:1.65;margin-top:13px;
}
.wc-fine a{color:var(--forest,#2A3D2F)}

.wc-code{
  font-family:'Playfair Display',serif;font-size:32px;letter-spacing:.12em;
  color:var(--forest,#2A3D2F);text-align:center;
  background:var(--ivory,#FDFAF5);border:1px dashed var(--gold,#B8965A);
  border-radius:12px;padding:18px;margin-bottom:14px;
}

/* ── La pastille, une fois rangée ──
   Elle rejoint le bouton de chat en bas à droite : deux cercles
   empilés, séparés de neuf pixels. Deux repères isolés aux deux
   bouts de l'écran se remarquent moins qu'une paire. */
.wc-tab{
  position:fixed;right:16px;z-index:125;
  bottom:calc(74px + env(safe-area-inset-bottom));
  width:46px;height:46px;border-radius:50%;
  background:var(--gold,#B8965A);
  border:none;cursor:pointer;padding:0;
  display:grid;place-items:center;
  box-shadow:0 8px 22px -8px rgba(30,40,32,.55);
  opacity:0;transform:translateX(70px);
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.wc-tab.on{opacity:1;transform:none}
.wc-tab:active{background:#a8874f}

/* Retirée pendant le défilement, rendue à l'arrêt. */
.wc-tab.on.away{opacity:0;transform:translateX(70px);pointer-events:none}

/* ⚠️ Panier ouvert : la pastille s'efface.

   Elle était à z-index 125, le tiroir du panier à 120 — elle
   passait donc PAR-DESSUS et barrait le sous-total. Plutôt que
   de jouer sur l'empilement, on la retire : rien n'a à flotter
   au-dessus d'un panier qu'on est en train de lire. */
body.locked .wc-tab,
body.drawer-locked .wc-tab{opacity:0;transform:translateX(70px);pointer-events:none}

.wc-tab svg{width:26px;height:26px;display:block}
.wc-tab svg path{
  fill:none;stroke:var(--forest,#2A3D2F);
  stroke-width:1.6;stroke-linejoin:round;
}
.wc-tab svg .wc-perf{stroke-width:1.3;opacity:.75}
.wc-tab svg text{
  font-family:'Inter',sans-serif;font-size:8.5px;font-weight:600;
  fill:var(--forest,#2A3D2F);letter-spacing:.02em;
}

/* Les pages à barre du bas repoussent les deux d'un cran. */
body.has-bottom-bar .wc-tab{ bottom:calc(146px + env(safe-area-inset-bottom)) }

/* Animations réduites : on montre l'appareil et la photo,
   figés, plutôt qu'une boucle ou un cadre vide. */
@media (prefers-reduced-motion:reduce){
  .wc-bg,.wc,.wc-tab,.ch-btn{transition:none}
  .wc-bg.on .wc-body,.wc-bg.on .wc-hair,.wc-bg.on .wc-lens{animation:none;opacity:1}
  .wc-bg.on .wc-flash{animation:none;opacity:0}
  .wc-bg.on .wc-shot{animation:none;opacity:0}
}