/* ============================================================
   Hero workflow — illustration codée en HTML/CSS/SVG
   (demande confirmée de Paul : « je veux l'illustration codée »).
   Chargée uniquement par index-v4.html, après premium-v4.css.
   ============================================================ */

/* --- Utilitaire accessibilité (figcaption descriptive) --- */
.hw-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Canevas général --- */
/* Le bloc est remonté (retour de Paul) : l'épingle finale touchait le bord bas de l'écran */
.hero-workflow { margin-top: -34px; }
.hw-canvas {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 46px; /* espace pour la naissance du chemin au-dessus du cercle 01 */
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  font-family: var(--sans);
}

/* --- Chemin pointillé (SVG étirable, épaisseur de trait constante) --- */
.hw-path {
  position: absolute;
  inset: -14px 0 -10px 0;
  width: 100%;
  height: calc(100% + 24px);
  pointer-events: none;
  z-index: 0;
}
.hw-path-line {
  fill: none;
  stroke: var(--navy-900);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.1 7;
  opacity: .5;
  vector-effect: non-scaling-stroke;
}

.hw-step, .hw-final { position: relative; z-index: 1; }

/* --- Décalages horizontaux qui suivent la courbe (mesures sur la maquette) --- */
.hw-step--one { width: 68%; align-self: flex-end; }
.hw-step--two { width: 80%; align-self: flex-end; margin-top: clamp(40px, 6vw, 58px); }

/* --- Têtes d'étape : cercle numéroté + titres --- */
.hw-step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.hw-num {
  flex: none;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: .02em;
  box-shadow: 0 12px 24px -14px rgba(23, 23, 48, .55);
}
.hw-eyebrow {
  display: block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy-900);
  opacity: .7;
  margin-bottom: 3px;
}
.hw-step-title {
  display: block;
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--navy-900);
}
.hw-badge {
  display: inline-block;
  margin-top: 8px;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 3px 14px;
  border-radius: 999px;
}

/* --- Cartes blanches --- */
.hw-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.hw-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hw-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 10px 12px;
  text-align: center;
  box-shadow: 0 10px 20px -16px rgba(23, 23, 48, .35);
}
.hw-card i {
  display: block;
  color: var(--navy-900);
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.hw-card strong {
  display: block;
  font-size: .8rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy-900);
}
.hw-card span {
  display: block;
  font-size: .64rem;
  line-height: 1.5;
  color: var(--slate-700);
  margin-top: 3px;
}
.hw-cards--two .hw-card { padding: 16px 14px 14px; }
.hw-cards--two .hw-card strong { font-size: .88rem; }
.hw-cards--two .hw-card span { font-size: .68rem; }

/* --- Bandeau rouge « portefeuille priorisé » --- */
.hw-banner {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--accent);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 9px 14px;
  border-radius: 8px;
  box-shadow: 0 12px 22px -16px rgba(217, 54, 54, .7);
}
.hw-banner i { font-size: .85em; }

/* --- Notes grises sous les blocs --- */
.hw-note {
  margin: 8px 2px 0;
  text-align: center;
  font-size: .63rem;
  line-height: 1.55;
  color: var(--slate-700);
}

/* --- Arrivée : épingle rouge + promesse --- */
.hw-final {
  display: flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  margin-top: clamp(24px, 3.5vw, 34px);
  margin-left: 33%; /* épingle alignée sous l'axe du cercle 01 */
}
.hw-pin {
  position: relative;
  flex: none;
  width: 38px; height: 38px;
  background: var(--accent);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 12px 20px -12px rgba(217, 54, 54, .65);
}
.hw-pin i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  color: #fff;
  font-size: .95rem;
}
.hw-final p {
  margin: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: clamp(.9rem, 1.5vw, 1rem);
  line-height: 1.35;
  letter-spacing: -.015em;
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .hw-canvas { margin-inline: auto; }
}
@media (max-width: 640px) {
  .hw-step--one, .hw-step--two { width: 100%; }
  .hw-num { width: 48px; height: 48px; font-size: .98rem; }
  .hw-step-head { gap: 12px; margin-bottom: 14px; }
  .hw-card strong { font-size: .72rem; }
  .hw-card span { font-size: .6rem; }
  .hw-cards--two .hw-card strong { font-size: .8rem; }
}
@media (max-width: 420px) {
  .hw-cards--three { gap: 6px; }
  .hw-cards--two { grid-template-columns: 1fr; }
  .hw-card { padding: 12px 6px 10px; }
  .hw-final { margin-left: 6%; }
}

/* ============================================================
   Animations (CSS pur, aucun JavaScript)
   - Le chemin pointillé se dessine progressivement au chargement
     (masque SVG animé via pathLength, indépendant de la longueur réelle)
   - Les éléments apparaissent en cascade en suivant le tracé
   - Flux continu subtil des pointillés une fois le tracé terminé
   ============================================================ */
@keyframes hw-path-sketch {
  to { stroke-dashoffset: 0; }
}
@keyframes hw-path-flow {
  to { stroke-dashoffset: -7.1px; } /* période du dasharray 0.1 7 */
}
@keyframes hw-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes hw-pop {
  0% { opacity: 0; transform: scale(.55); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
/* Variante pour l'épingle : la rotation -45° doit être conservée
   pendant et après l'animation, sinon la pastille finit « de travers » */
@keyframes hw-pop-pin {
  0% { opacity: 0; transform: rotate(-45deg) scale(.55); }
  60% { opacity: 1; transform: rotate(-45deg) scale(1.08); }
  100% { opacity: 1; transform: rotate(-45deg) scale(1); }
}

/* Tracé blanc du masque : recouvre progressivement le chemin visible
   (trait plein et épais — ne jamais le laisser hériter du pointillé) */
.hw-path-draw {
  fill: none;
  stroke: #fff;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 1;
  vector-effect: none;
  animation: hw-path-sketch 1.8s cubic-bezier(.45, 0, .2, 1) .15s forwards;
}
/* Flux continu des pointillés, après la fin du dessin */
.hw-path-line {
  animation: hw-path-flow 1.1s linear 2.1s infinite;
}

/* Cascade d'apparition synchronisée avec la progression du chemin */
.hw-step-head, .hw-card, .hw-banner, .hw-note, .hw-final p {
  opacity: 0;
  animation: hw-fade-up .55s cubic-bezier(.2, .7, .3, 1) forwards;
}
.hw-num, .hw-pin {
  opacity: 0;
  animation: hw-pop .55s cubic-bezier(.2, .7, .3, 1.2) forwards;
}
.hw-pin { animation-name: hw-pop-pin; }

/* Étape 01 */
.hw-step--one .hw-step-head { animation-delay: .25s; }
.hw-step--one .hw-num { animation-delay: .25s; }
.hw-step--one .hw-card:nth-child(1) { animation-delay: .6s; }
.hw-step--one .hw-card:nth-child(2) { animation-delay: .7s; }
.hw-step--one .hw-card:nth-child(3) { animation-delay: .8s; }
.hw-step--one .hw-banner { animation-delay: .95s; }
.hw-step--one .hw-note { animation-delay: 1.05s; }

/* Étape 02 */
.hw-step--two .hw-step-head { animation-delay: 1.15s; }
.hw-step--two .hw-num { animation-delay: 1.15s; }
.hw-step--two .hw-card:nth-child(1) { animation-delay: 1.4s; }
.hw-step--two .hw-card:nth-child(2) { animation-delay: 1.5s; }
.hw-step--two .hw-note { animation-delay: 1.65s; }

/* Arrivée */
.hw-final .hw-pin { animation-delay: 1.85s; }
.hw-final p { animation-delay: 2s; }

/* --- Accessibilité : aucune animation si l'utilisateur les réduit --- */
@media (prefers-reduced-motion: reduce) {
  .hw-path-draw { animation: none; stroke-dashoffset: 0; }
  .hw-path-line { animation: none; }
  .hw-step-head, .hw-card, .hw-banner, .hw-note, .hw-final p,
  .hw-num, .hw-pin { opacity: 1; animation: none; transform: none; }
  .hw-pin { transform: rotate(-45deg); } /* l'épingle garde sa pointe vers le bas */
}