/* Section « Votre routine en 3 étapes » — storytelling : 3 étapes reliées par un chemin en pointillés.
   Les pointillés, les pastilles, les images et les textes apparaissent au défilement (js/routine.js).
   ⚠️ Aucun ancêtre de .rstep-img ne doit avoir de z-index / opacity / transform : sinon le
   mélange « multiply » (qui fond le fond blanc d'une photo JPG dans le beige du site) cesse de marcher. */
.routine { background: var(--color-bg); padding: 110px 0 96px; overflow: hidden; }
.routine[hidden] { display: none; }

.routine-head { text-align: center; max-width: 720px; margin: 0 auto 36px; padding: 0 24px; }
.routine-eyebrow {
  margin: 0 0 12px; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-dark);
}
.routine-title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.12; color: var(--color-ink);
}

.routine-story { position: relative; max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.routine-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.routine-dots { stroke: var(--color-accent); stroke-opacity: 0.8; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.1 15; }
.routine-steps { list-style: none; margin: 0; padding: 0; position: relative; }

/* ---------- Une étape (bureau) : éléments placés en % de la largeur ---------- */
.rstep { position: relative; min-height: clamp(380px, 33vw, 450px); }
.rstep[hidden] { display: none; }
.rstep--1, .rstep--3 { --bx: 11%; --lx: 17%; --lw: 27%; --mx: 52%; --mw: 24%; --ix: 66%; --iw: 31%; --rot: 7deg; }
.rstep--2            { --bx: 44%; --lx: 17%; --lw: 22%; --mx: 65%; --mw: 20%; --ix: 76%; --iw: 22%; --rot: -7deg; }

.rstep-bubble {
  position: absolute; left: var(--bx); top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--color-accent); color: var(--color-white);
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.02em;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.92), 0 12px 26px rgba(58,37,48,0.2);
}
.rstep-label, .rstep-info, .rstep-media {
  position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center;
}
.rstep-label { left: var(--lx); width: var(--lw); }
.rstep-media { left: calc(var(--mx) - var(--mw) / 2); width: var(--mw); align-items: center; }
.rstep-info { left: var(--ix); width: var(--iw); align-items: flex-start; }

.rstep-title {
  margin: 0; overflow: hidden; padding: 0.08em 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.5rem); line-height: 1.12; letter-spacing: 0.01em; text-transform: uppercase; color: var(--color-ink);
}
.rstep-title-in { display: inline-block; }
.rstep-tag { margin: 4px 0 0; font-family: var(--font-sans); font-size: clamp(0.95rem, 1.3vw, 1.15rem); color: var(--color-ink-soft); }

/* Image du produit : oblique (7° / -7° / 7°). L'ombre fait partie de l'image envoyée dans l'admin. */
.rstep-img {
  display: block; width: 100%; height: auto; max-height: 400px; object-fit: contain;
  transform: rotate(var(--rot)); transform-origin: 50% 55%;
}
.rstep-img.is-flat { mix-blend-mode: multiply; } /* photo JPG / photo du catalogue : le blanc se fond dans le fond du site */

.rstep-pname { margin: 0 0 10px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1.2; color: var(--color-ink); }
.rstep-pdesc { margin: 0 0 20px; max-width: 30ch; font-family: var(--font-sans); font-size: clamp(0.95rem, 1.15vw, 1.05rem); line-height: 1.55; color: var(--color-ink-soft); }
.rstep-pdesc:empty { display: none; }
.rstep-explore {
  display: inline-flex; align-items: center; padding: 9px 22px; border: 1px solid var(--color-line); border-radius: 10px;
  background: rgba(255, 255, 255, 0.55); font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; color: var(--color-ink);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.rstep-explore:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-white); }
.rstep-explore:focus-visible, .routine-add:focus-visible { outline: 3px solid var(--color-accent-dark); outline-offset: 3px; }

/* ---------- Bouton final : une pastille compacte, pas un pavé ---------- */
.routine-cta { position: relative; display: flex; justify-content: center; padding: 40px 0 0; }
.routine-add {
  width: min(100%, 440px); display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px;
  border: 0; border-radius: 999px; background: var(--color-accent-dark); color: var(--color-white); text-align: left; cursor: pointer;
  box-shadow: 0 18px 38px rgba(212,123,159,0.38);
  transition: background 0.3s var(--ease), transform 0.2s var(--ease), box-shadow 0.3s var(--ease);
}
.routine-add:hover { background: var(--color-ink); box-shadow: 0 22px 44px rgba(58,37,48,0.34); }
.routine-add:active { transform: scale(0.98); }
.routine-add.is-added { background: var(--color-accent); }
.routine-add:disabled { background: #9AA096; box-shadow: none; cursor: not-allowed; }
.routine-add-thumbs { display: flex; flex: 0 0 auto; }
.routine-add-thumb {
  width: 42px; height: 42px; margin-left: -12px; border-radius: 50%; overflow: hidden; background: var(--color-white);
  border: 2px solid var(--color-accent-dark); transition: border-color 0.3s var(--ease);
}
.routine-add-thumb:first-child { margin-left: 0; }
.routine-add:hover .routine-add-thumb { border-color: var(--color-ink); }
.routine-add.is-added .routine-add-thumb { border-color: var(--color-accent); }
.routine-add-thumb img { width: 100%; height: 100%; object-fit: cover; }
.routine-add-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.routine-add-label { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; line-height: 1.25; }
.routine-add-sub { font-family: var(--font-sans); font-size: 0.82rem; opacity: 0.85; }
.routine-add-icon {
  flex: 0 0 auto; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--color-white); color: var(--color-accent-dark); transition: transform 0.3s var(--ease);
}
.routine-add-icon svg { width: 22px; height: 22px; }
.routine-add:hover .routine-add-icon { transform: rotate(-8deg) scale(1.06); }

/* ---------- Animations (activées seulement si le JS tourne : classe .js-anim) ---------- */
.routine.js-anim .rstep-bubble { transform: scale(0); transition: transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1); }
.routine.js-anim .rstep.is-in .rstep-bubble { transform: scale(1); }

/* Zoom des images : minuscules → taille finale, avec un petit dépassement et une légère rotation */
.routine.js-anim .rstep-img {
  opacity: 0; transform: rotate(calc(var(--rot) * -2.2)) scale(0.08);
  transition: transform 1.25s cubic-bezier(0.22, 1.25, 0.36, 1) 0.3s, opacity 0.6s var(--ease) 0.3s;
}
.routine.js-anim .rstep.is-in .rstep-img { opacity: 1; transform: rotate(var(--rot)) scale(1); }

/* Textes : apparition douce (flou → net, léger glissement), en cascade */
.routine.js-anim .rstep-tag, .routine.js-anim .rstep-pname, .routine.js-anim .rstep-pdesc, .routine.js-anim .rstep-explore {
  opacity: 0; transform: translateY(22px); filter: blur(6px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.routine.js-anim .rstep-title-in { transform: translateY(105%); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
.routine.js-anim .rstep.is-in .rstep-title-in { transform: none; }
.routine.js-anim .rstep.is-in .rstep-tag { opacity: 1; transform: none; filter: none; transition-delay: 0.4s; }
.routine.js-anim .rstep.is-in .rstep-pname { opacity: 1; transform: none; filter: none; transition-delay: 0.75s; }
.routine.js-anim .rstep.is-in .rstep-pdesc { opacity: 1; transform: none; filter: none; transition-delay: 0.9s; }
.routine.js-anim .rstep.is-in .rstep-explore { opacity: 1; transform: none; filter: none; transition-delay: 1.05s, 1.05s, 1.05s, 0s, 0s, 0s; }

.routine.js-anim .routine-cta { opacity: 0; transform: translateY(18px) scale(0.9); transition: opacity 0.7s var(--ease), transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1); }
.routine.js-anim .routine-cta.is-in { opacity: 1; transform: none; }

/* ---------- Mobile / tablette : une colonne, le chemin longe le bord gauche en ondulant ---------- */
@media (max-width: 860px) {
  .routine { padding: 76px 0 84px; }
  .routine-story { padding: 0 22px; }
  .rstep {
    min-height: 0; padding: 26px 0 40px; display: grid; grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 18px; row-gap: 6px; align-items: center;
  }
  .rstep-bubble { position: relative; left: auto; top: auto; margin: 0; width: 56px; height: 56px; font-size: 1.15rem; grid-column: 1; grid-row: 1; }
  .rstep-label, .rstep-info, .rstep-media { position: static; display: block; width: auto; }
  .rstep-label { grid-column: 2; grid-row: 1; }
  .rstep-media { grid-column: 2; grid-row: 2; display: flex; justify-content: center; padding: 14px 0 6px; }
  .rstep-info { grid-column: 2; grid-row: 3; }
  .rstep-title { font-size: 1.7rem; }
  .rstep-img { max-width: 62%; max-height: 300px; }
  .rstep-pdesc { max-width: none; }
  .routine-cta { padding-top: 12px; }
}
@media (max-width: 420px) { .routine-add-label { font-size: 0.95rem; } .routine-add-thumb { width: 36px; height: 36px; } }

@media (prefers-reduced-motion: reduce) {
  .routine.js-anim .rstep-bubble, .routine.js-anim .rstep-img, .routine.js-anim .rstep-tag, .routine.js-anim .rstep-pname,
  .routine.js-anim .rstep-pdesc, .routine.js-anim .rstep-explore, .routine.js-anim .rstep-title-in, .routine.js-anim .routine-cta {
    opacity: 1; filter: none; transition: none;
  }
  .routine.js-anim .rstep-bubble { transform: none; }
  .routine.js-anim .rstep-img { transform: rotate(var(--rot)); }
  .routine.js-anim .rstep-tag, .routine.js-anim .rstep-pname, .routine.js-anim .rstep-pdesc, .routine.js-anim .rstep-explore,
  .routine.js-anim .rstep-title-in, .routine.js-anim .routine-cta { transform: none; }
}