/* Studio Retouche · scènes animées du panneau (CSS seul, sans bibliothèque).
   Chaque scène = une fenêtre type Photoshop : la photo à gauche, le vrai panneau (capture 2x) à droite,
   un curseur qui clique et le résultat qui apparaît sur la photo. Les animations ne tournent que
   lorsque la scène est visible (classe .is-playing posée par scenes.js). */

.sr-scene {
  --sr-ink: #f2f5f0; --sr-accent: #3dd6b5; --sr-accent-dark: #14a587;
  --sr-chrome: #2b2d31; --sr-pasteboard: #3c3f44; --sr-dur: 9s;
  container-type: inline-size; margin: 0; font-family: "Segoe UI", system-ui, Arial, sans-serif;
}
.sr-window {
  overflow: hidden; border-radius: 12px; background: var(--sr-chrome);
  border: 1px solid #ffffff1f; box-shadow: 0 30px 60px -30px #0b1a14b0, 0 0 0 1px #0000004d;
}
.sr-bar {
  display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  background: #1f2124; color: #a9b0ad; font: 11px/1 Consolas, monospace; letter-spacing: .02em;
}
.sr-bar i { width: 9px; height: 9px; border-radius: 50%; background: #45484d; }
.sr-bar span { margin-left: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Corps : plan de travail gris (photo centrée) + panneau 300 × 720 en pleine hauteur : 0,3 × 2,4 = 0,72 => ratio 1 / 0,72. */
.sr-body { display: grid; grid-template-columns: 70% 30%; aspect-ratio: 1.3889; position: relative; }
.sr-canvas { position: relative; min-width: 0; overflow: hidden; background: var(--sr-pasteboard); }
.sr-photo { box-sizing: border-box;
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 4%;
  filter: drop-shadow(0 6px 14px #0006);
}
.sr-panel { position: relative; min-width: 0; background: #15171a; }
.sr-panel > img { display: block; width: 100%; height: 100%; }

/* Zone cliquée (rectangle du bouton, en % de la capture). */
.sr-hit {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border-radius: 8px; box-shadow: 0 0 0 2px var(--sr-accent), 0 0 22px 2px #3dd6b580; opacity: 0;
}
/* Curseur : flèche système dessinée en SVG + onde au clic. */
.sr-cursor {
  position: absolute; z-index: 5; left: var(--cx0); top: var(--cy0); width: 18px; height: 26px;
  margin: -2px 0 0 -3px; pointer-events: none; filter: drop-shadow(0 2px 3px #0008);
}
.sr-cursor svg { display: block; width: 100%; height: 100%; }
.sr-cursor::after {
  content: ""; position: absolute; left: -9px; top: -9px; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--sr-accent); opacity: 0; transform: scale(.3);
}
.sr-toast {
  position: absolute; left: 22%; right: 22%; bottom: 7%; z-index: 3;
  padding: 10px 14px 12px; border-radius: 10px; background: #15171ae6; color: var(--sr-ink);
  border: 1px solid #ffffff21; backdrop-filter: blur(8px); font-size: 13px; opacity: 0;
}
.sr-toast small { display: block; margin-top: 2px; color: #9fb0a8; font-size: 11px; }
.sr-toast b { font-weight: 600; }
.sr-toast .sr-progress { display: block; height: 3px; margin-top: 9px; border-radius: 3px; background: #ffffff1f; overflow: hidden; }
.sr-toast .sr-progress::before { content: ""; display: block; height: 100%; width: 100%; background: var(--sr-accent); transform-origin: left; transform: scaleX(0); }
.sr-chip {
  position: absolute; top: 7%; z-index: 3; padding: 5px 9px; border-radius: 5px; color: #fff;
  background: #121614c4; border: 1px solid #ffffff4d; font: 600 10px/1.2 Consolas, monospace; letter-spacing: .08em;
}
.sr-chip.sr-left { left: 6%; } .sr-chip.sr-right { right: 6%; opacity: 0; }
.sr-scene figcaption { margin-top: 12px; font-size: 14px; color: inherit; opacity: .8; }

/* ---------- Scène PEAU : clic sur « Lisser la peau », la retouche se dévoile de gauche à droite. ---------- */
.sr-scene--peau .sr-after { clip-path: inset(0 100% 0 0); }
.is-playing.sr-scene--peau .sr-cursor { animation: sr-peau-cursor var(--sr-dur) var(--sr-ease, cubic-bezier(.45,.05,.25,1)) infinite; }
.is-playing.sr-scene--peau .sr-cursor::after { animation: sr-ripple var(--sr-dur) infinite; }
.is-playing.sr-scene--peau .sr-hit { animation: sr-hit var(--sr-dur) infinite; }
.is-playing.sr-scene--peau .sr-toast { animation: sr-toast var(--sr-dur) infinite; }
.is-playing.sr-scene--peau .sr-progress::before { animation: sr-progress var(--sr-dur) infinite; }
.is-playing.sr-scene--peau .sr-after { animation: sr-wipe var(--sr-dur) infinite; }
.is-playing.sr-scene--peau .sr-left { animation: sr-chip-out var(--sr-dur) infinite; }
.is-playing.sr-scene--peau .sr-right { animation: sr-chip-in var(--sr-dur) infinite; }

@keyframes sr-peau-cursor {
  0%, 4% { left: var(--cx0); top: var(--cy0); }
  18%, 100% { left: var(--cx1); top: var(--cy1); }
}
@keyframes sr-ripple { 0%, 19% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; } 27%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes sr-hit { 0%, 18% { opacity: 0; } 21%, 32% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes sr-toast { 0%, 21% { opacity: 0; translate: 0 8px; } 24%, 44% { opacity: 1; translate: 0 0; } 49%, 100% { opacity: 0; translate: 0 0; } }
@keyframes sr-progress { 0%, 23% { transform: scaleX(0); } 44%, 100% { transform: scaleX(1); } }
@keyframes sr-wipe {
  0%, 42% { clip-path: inset(0 100% 0 0); }
  58%, 88% { clip-path: inset(0 0 0 0); }
  96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes sr-chip-out { 0%, 50% { opacity: 1; } 55%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes sr-chip-in { 0%, 52% { opacity: 0; } 57%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ---------- Scène LOOKS : le curseur passe d'un look à l'autre, la photo change à chaque clic. ---------- */
.sr-scene--looks { --sr-dur: 10.5s; }
.sr-scene--looks .sr-look { opacity: 0; }
.sr-scene--looks .sr-ring {
  position: absolute; z-index: 2; left: var(--r1x); top: var(--ry1); width: var(--rw); height: var(--rh);
  border-radius: 7px; box-shadow: 0 0 0 2px var(--sr-accent), 0 0 16px #3dd6b588; opacity: 0;
}
.sr-scene--looks .sr-name { position: absolute; top: 7%; right: 6%; z-index: 3; }
.sr-scene--looks .sr-name span { position: absolute; right: 0; top: 0; white-space: nowrap; opacity: 0; }
.is-playing.sr-scene--looks .sr-cursor { animation: sr-looks-cursor var(--sr-dur) cubic-bezier(.45,.05,.25,1) infinite; }
.is-playing.sr-scene--looks .sr-cursor::after { animation: sr-looks-ripple var(--sr-dur) infinite; }
.is-playing.sr-scene--looks .sr-ring { animation: sr-looks-ring var(--sr-dur) cubic-bezier(.45,.05,.25,1) infinite; }
.is-playing.sr-scene--looks .sr-look-1, .is-playing.sr-scene--looks .sr-name span:nth-child(1) { animation: sr-look-1 var(--sr-dur) infinite; }
.is-playing.sr-scene--looks .sr-look-2, .is-playing.sr-scene--looks .sr-name span:nth-child(2) { animation: sr-look-2 var(--sr-dur) infinite; }
.is-playing.sr-scene--looks .sr-look-3, .is-playing.sr-scene--looks .sr-name span:nth-child(3) { animation: sr-look-3 var(--sr-dur) infinite; }

@keyframes sr-looks-cursor {
  0%, 3% { left: var(--cx0); top: var(--cy0); }
  12%, 30% { left: var(--c1x); top: var(--c1y); }
  40%, 60% { left: var(--c2x); top: var(--c2y); }
  70%, 92% { left: var(--c3x); top: var(--c3y); }
  100% { left: var(--cx0); top: var(--cy0); }
}
@keyframes sr-looks-ripple {
  0%, 12% { opacity: 0; transform: scale(.3); } 13% { opacity: 1; } 18% { opacity: 0; transform: scale(1.6); }
  19%, 40% { opacity: 0; transform: scale(.3); } 41% { opacity: 1; } 46% { opacity: 0; transform: scale(1.6); }
  47%, 70% { opacity: 0; transform: scale(.3); } 71% { opacity: 1; } 76%, 100% { opacity: 0; transform: scale(1.6); }
}
@keyframes sr-looks-ring {
  0%, 12% { opacity: 0; left: var(--r1x); top: var(--r1y); }
  13%, 39% { opacity: 1; left: var(--r1x); top: var(--r1y); }
  41%, 69% { opacity: 1; left: var(--r2x); top: var(--r2y); }
  71%, 93% { opacity: 1; left: var(--r3x); top: var(--r3y); }
  97%, 100% { opacity: 0; left: var(--r3x); top: var(--r3y); }
}
@keyframes sr-look-1 { 0%, 13% { opacity: 0; } 16%, 41% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes sr-look-2 { 0%, 41% { opacity: 0; } 44%, 71% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes sr-look-3 { 0%, 71% { opacity: 0; } 74%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ---------- Scène RECETTE : un clic sur « Portrait studio », les étapes se cochent, la photo est finie. ---------- */
.sr-scene--recette { --sr-dur: 10s; }
.sr-scene--recette .sr-after { opacity: 0; }
.sr-steps {
  position: absolute; left: 6%; bottom: 7%; z-index: 3; width: min(56%, 260px); margin: 0; padding: 12px 14px;
  list-style: none; border-radius: 10px; background: #15171ae6; border: 1px solid #ffffff21;
  color: var(--sr-ink); font-size: 12px; backdrop-filter: blur(8px); opacity: 0;
}
.sr-steps ol { margin: 0; padding: 0; list-style: none; }
.sr-steps strong { display: block; margin-bottom: 7px; font-size: 13px; }
.sr-steps li { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: #9fb0a8; }
.sr-steps li::before {
  content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #ffffff40;
  background: center / 9px no-repeat;
}
.is-playing.sr-scene--recette .sr-cursor { animation: sr-peau-cursor var(--sr-dur) cubic-bezier(.45,.05,.25,1) infinite; }
.is-playing.sr-scene--recette .sr-cursor::after { animation: sr-ripple var(--sr-dur) infinite; }
.is-playing.sr-scene--recette .sr-hit { animation: sr-hit var(--sr-dur) infinite; }
.is-playing.sr-scene--recette .sr-steps { animation: sr-steps var(--sr-dur) infinite; }
.is-playing.sr-scene--recette .sr-steps li { animation: sr-step var(--sr-dur) infinite; animation-delay: calc(var(--i) * .45s); }
.is-playing.sr-scene--recette .sr-steps li::before { animation: sr-step-dot var(--sr-dur) infinite; animation-delay: calc(var(--i) * .45s); }
.is-playing.sr-scene--recette .sr-after { animation: sr-recette-after var(--sr-dur) infinite; }
.is-playing.sr-scene--recette .sr-left { animation: sr-chip-out var(--sr-dur) infinite; }
.is-playing.sr-scene--recette .sr-right { animation: sr-chip-in var(--sr-dur) infinite; }

@keyframes sr-steps { 0%, 21% { opacity: 0; translate: 0 8px; } 24%, 82% { opacity: 1; translate: 0 0; } 88%, 100% { opacity: 0; } }
@keyframes sr-step { 0%, 24% { color: #9fb0a8; } 27%, 100% { color: var(--sr-ink); } }
@keyframes sr-step-dot {
  0%, 24% { background-color: transparent; border-color: #ffffff40; background-image: none; }
  27%, 100% { background-color: var(--sr-accent); border-color: var(--sr-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%2310231c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
}
@keyframes sr-recette-after { 0%, 50% { opacity: 0; } 58%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* ---------- Scène TEINT : carte seule, la sélection glisse d'une nuance à l'autre. ---------- */
.sr-card { position: relative; width: min(100%, 320px); margin-inline: auto; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -28px #0b1a14b0; }
.sr-card > img { display: block; width: 100%; height: auto; }
.sr-card .sr-ring { position: absolute; left: 4.6%; width: 90.6%; height: 15%; top: var(--t1); border-radius: 10px; box-shadow: 0 0 0 2px var(--sr-accent), 0 0 18px #3dd6b570; opacity: 0; }
.is-playing .sr-card .sr-ring { animation: sr-teint-ring 8s cubic-bezier(.45,.05,.25,1) infinite; }
@keyframes sr-teint-ring {
  0%, 4% { opacity: 0; top: var(--t1); } 8%, 22% { opacity: 1; top: var(--t1); }
  28%, 42% { opacity: 1; top: var(--t2); } 48%, 62% { opacity: 1; top: var(--t3); }
  68%, 82% { opacity: 1; top: var(--t4); } 88%, 94% { opacity: 1; top: var(--t5); } 100% { opacity: 0; top: var(--t5); }
}

/* Petits écrans : photo recadrée (cover) et panneau plus large pour rester lisible. */
@container (max-width: 560px) {
  .sr-body { grid-template-columns: 54.55% 45.45%; aspect-ratio: .9167; }
  .sr-photo { object-fit: cover; object-position: 38% 30%; padding: 0; filter: none; }
  .sr-toast { font-size: 11px; left: 6%; right: 6%; }
  .sr-steps { font-size: 11px; width: 88%; }
  .sr-bar span { font-size: 10px; }
}

/* Mouvement réduit : on montre directement l'état final, sans animation. */
@media (prefers-reduced-motion: reduce) {
  .sr-scene *, .sr-scene *::before, .sr-scene *::after { animation: none !important; }
  .sr-scene--peau .sr-after { clip-path: none; }
  .sr-scene--recette .sr-after, .sr-scene--looks .sr-look-1, .sr-scene--looks .sr-name span:nth-child(1) { opacity: 1; }
  .sr-hit, .sr-cursor, .sr-toast { display: none; }
  .sr-chip.sr-left { opacity: 0; } .sr-chip.sr-right { opacity: 1; }
}