/* ============================================================
   AGENCE WEBTOPIA — le parcours client animé
   Une frise où chaque étape porte sa propre petite scène. Seule
   l'étape en cours s'anime : le mouvement n'est pas une décoration,
   c'est le « vous êtes ici ». Les étapes faites se figent, celles
   à venir restent pâles et immobiles.
   ============================================================ */

.parcours{ list-style:none; margin:26px 0 0; padding:0; position:relative; }

/* le fil qui relie les étapes, et sa part déjà parcourue */
/* Le fil relie le centre de la première scène au centre de la dernière.
   Sans z-index, il passerait par-dessus les scènes : ce sont toutes des
   boîtes positionnées, et le ::after du parent est peint en dernier. */
.parcours::before,
.parcours::after{
  content:""; position:absolute; left:33px; top:34px; bottom:34px; width:2px; z-index:0;
}
.parcours::before{ background:var(--line); }
.parcours::after{
  background:linear-gradient(180deg, var(--sun), var(--leaf));
  transform-origin:50% 0; transform:scaleY(var(--avance, 0));
  transition:transform 1.1s cubic-bezier(.2,.8,.3,1);
}

.etape{
  position:relative; padding:0 0 26px 88px; min-height:74px;
}
.etape:last-child{ padding-bottom:0; }

/* la scène : un rond de 68 px où vit l'animation */
.scene{
  position:absolute; left:0; top:0; width:68px; height:68px; border-radius:50%;
  background:var(--paper-2); border:2px solid var(--line); z-index:1;
  display:grid; place-items:center; overflow:hidden;
  transition:background .4s, border-color .4s, transform .4s cubic-bezier(.22,1.2,.36,1);
}
.scene svg{ width:38px; height:38px; overflow:visible; display:block; }
.etape.fait .scene{ background:var(--leaf-soft); border-color:var(--sun); }
.etape.en_cours .scene{
  background:#fff; border-color:var(--sun); transform:scale(1.06);
  box-shadow:0 0 0 0 rgba(127,199,196,.55), 0 10px 26px rgba(20,72,76,.14);
  animation:halo 2.8s ease-out infinite;
}
@keyframes halo{ to{ box-shadow:0 0 0 18px rgba(127,199,196,0), 0 10px 26px rgba(20,72,76,.14); } }
.etape.a_venir .scene{ opacity:.55; }

/* la coche qui recouvre la scène une fois l'étape terminée */
.scene .coche{
  position:absolute; inset:0; display:grid; place-items:center;
  background:var(--leaf-soft); opacity:0; transform:scale(.6);
  transition:opacity .35s, transform .45s cubic-bezier(.22,1.2,.36,1);
}
.etape.fait .scene .coche{ opacity:1; transform:none; }
.scene .coche svg{ width:26px; height:26px; }

.etape h3{ font-size:17.5px; font-weight:700; letter-spacing:-.01em; margin:6px 0 4px; }
.etape p{ font-size:14.5px; color:var(--ink-2); max-width:52ch; }
.etape .quand{
  display:inline-block; margin-top:7px; font-family:var(--ff-mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.etape.en_cours .quand{
  background:var(--sun); color:var(--ink); padding:4px 10px; border-radius:999px; letter-spacing:.09em;
}
.etape.fait h3{ color:var(--ink-2); }
.etape.a_venir h3,.etape.a_venir p{ color:var(--ink-3); }

/* ─────────── les couleurs de trait ─────────── */
.scene .trait{ fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.scene .plein{ fill:var(--ink-3); }
.etape.en_cours .scene .trait{ stroke:var(--ink); }
.etape.en_cours .scene .plein{ fill:var(--sun); }
.etape.fait .scene .trait{ stroke:var(--leaf); }
.etape.fait .scene .plein{ fill:var(--leaf); }

/* ═══════════ 1 · LE BRIEF ═══════════
   Trois lignes s'écrivent l'une après l'autre dans une bulle, puis
   la page se vide et ça recommence : on prend des notes. */
.ico-brief .ligne{ stroke-dasharray:26; stroke-dashoffset:26; }
.en_cours .ico-brief .ligne{ animation:ecrire 3.4s ease-in-out infinite; }
.en_cours .ico-brief .l2{ animation-delay:.35s; }
.en_cours .ico-brief .l3{ animation-delay:.7s; }
.fait .ico-brief .ligne{ stroke-dashoffset:0; }
@keyframes ecrire{
  0%      { stroke-dashoffset:26; }
  28%,72% { stroke-dashoffset:0; }
  92%,100%{ stroke-dashoffset:26; }
}
.en_cours .ico-brief .stylo{ animation:stylo 3.4s ease-in-out infinite; }
@keyframes stylo{
  0%      { transform:translate(-7px,3px) rotate(-8deg); }
  28%     { transform:translate(6px,3px) rotate(-8deg); }
  32%     { transform:translate(-7px,7px) rotate(-8deg); }
  60%     { transform:translate(6px,7px) rotate(-8deg); }
  64%,100%{ transform:translate(-7px,11px) rotate(-8deg); }
}

/* ═══════════ 2 · LA MAQUETTE ═══════════
   Quatre briques tombent du haut et s'empilent, avec le petit
   rebond de ce qui se pose pour de bon. */
.en_cours .ico-maquette .brique{ animation:tombe 3.6s cubic-bezier(.3,1.4,.5,1) infinite; }
.en_cours .ico-maquette .b2{ animation-delay:.22s; }
.en_cours .ico-maquette .b3{ animation-delay:.44s; }
.en_cours .ico-maquette .b4{ animation-delay:.66s; }
@keyframes tombe{
  0%      { transform:translateY(-26px); opacity:0; }
  9%      { transform:translateY(0);     opacity:1; }
  13%     { transform:translateY(-3px); }
  17%,86% { transform:translateY(0);     opacity:1; }
  96%,100%{ transform:translateY(-26px); opacity:0; }
}

/* ═══════════ 3 · LA PAGE COMPLÈTE ═══════════
   Le cadre du navigateur se remplit bloc par bloc, du haut vers
   le bas, comme une page qui se construit sous les yeux. */
.en_cours .ico-page .bloc{ animation:remplit 3.2s ease-in-out infinite; transform-origin:0 50%; }
.en_cours .ico-page .p2{ animation-delay:.3s; }
.en_cours .ico-page .p3{ animation-delay:.6s; }
.en_cours .ico-page .p4{ animation-delay:.9s; }
@keyframes remplit{
  0%      { transform:scaleX(0); opacity:0; }
  14%,84% { transform:scaleX(1); opacity:1; }
  96%,100%{ transform:scaleX(0); opacity:0; }
}

/* ═══════════ 4 · EN LIGNE ═══════════
   Un point d'émission et trois ondes qui partent en s'élargissant :
   le site est branché, il émet. */
.en_cours .ico-ligne .onde{ animation:emet 2.6s ease-out infinite; transform-origin:19px 31px; }
.en_cours .ico-ligne .o2{ animation-delay:.35s; }
.en_cours .ico-ligne .o3{ animation-delay:.7s; }
@keyframes emet{
  0%      { transform:scale(.35); opacity:0; }
  22%     { opacity:.9; }
  100%    { transform:scale(1.25); opacity:0; }
}
.en_cours .ico-ligne .noyau{ animation:battement 2.6s ease-in-out infinite; transform-origin:19px 31px; }
@keyframes battement{ 0%,100%{ transform:scale(1); } 20%{ transform:scale(1.35); } }

/* ═══════════ 5 · LES RETOUCHES PHOTO ═══════════
   Un balai vertical traverse l'image : à gauche la photo brute et
   terne, à droite la version retouchée. C'est le geste du métier. */
.ico-retouche .apres{ clip-path:inset(0 0 0 50%); }
.en_cours .ico-retouche .apres{ animation:balaie 3.8s ease-in-out infinite; }
.en_cours .ico-retouche .rail{ animation:railBouge 3.8s ease-in-out infinite; }
@keyframes balaie{
  0%,100%{ clip-path:inset(0 0 0 78%); }
  50%    { clip-path:inset(0 0 0 16%); }
}
@keyframes railBouge{
  0%,100%{ transform:translateX(9px); }
  50%    { transform:translateX(-11px); }
}

/* ═══════════ 6 · VOS PHOTOS LIVRÉES ═══════════
   Trois tirages sortent de la pile et s'ouvrent en éventail. */
.en_cours .ico-photos .tirage{ animation:eventail 3.4s ease-in-out infinite; transform-origin:19px 32px; }
.en_cours .ico-photos .t2{ animation-name:eventail2; }
.en_cours .ico-photos .t3{ animation-name:eventail3; }
@keyframes eventail{
  0%,12%  { transform:rotate(0deg); }
  40%,72% { transform:rotate(-17deg) translateY(-2px); }
  95%,100%{ transform:rotate(0deg); }
}
@keyframes eventail2{
  0%,12%  { transform:rotate(0deg); }
  40%,72% { transform:rotate(1deg) translateY(-1px); }
  95%,100%{ transform:rotate(0deg); }
}
@keyframes eventail3{
  0%,12%  { transform:rotate(0deg); }
  40%,72% { transform:rotate(18deg) translateY(-2px); }
  95%,100%{ transform:rotate(0deg); }
}

/* ═══════════ 7 · LA SÉANCE PHOTO ═══════════
   Le diaphragme s'ouvre, l'éclair part. */
.en_cours .ico-seance .diaph{ animation:diaphragme 3s ease-in-out infinite; transform-origin:19px 21px; }
@keyframes diaphragme{
  0%,100%{ transform:rotate(0deg) scale(1); }
  46%    { transform:rotate(42deg) scale(.82); }
}
.en_cours .ico-seance .eclair{ animation:eclair 3s ease-out infinite; }
@keyframes eclair{
  0%,52%  { opacity:0; transform:scale(.5); }
  58%     { opacity:1; transform:scale(1); }
  74%,100%{ opacity:0; transform:scale(1.5); }
}

@media (prefers-reduced-motion:reduce){
  .parcours *,.parcours *::before,.parcours *::after{ animation:none !important; }
  .parcours::after{ transition:none !important; }
  .ico-brief .ligne{ stroke-dashoffset:0 !important; }
  .ico-retouche .apres{ clip-path:inset(0 0 0 50%) !important; }
}

/* ─────────── sur petit écran ─────────── */
@media (max-width:560px){
  .parcours::before,.parcours::after{ left:27px; top:28px; bottom:28px; }
  .etape{ padding-left:72px; }
  .scene{ width:56px; height:56px; }
  .scene svg{ width:32px; height:32px; }
  .etape h3{ font-size:16.5px; margin-top:2px; }
}

/* ─────────── le téléchargement du code ─────────── */
.code-carte{ display:grid; gap:18px; }
.code-haut{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.code-haut .poids{
  font-family:var(--ff-mono); font-size:12px; color:var(--ink-3);
  letter-spacing:.08em; text-transform:uppercase; margin-top:4px;
}
.alerte{
  display:grid; grid-template-columns:26px 1fr; gap:13px;
  background:#FDF3E7; border:1px solid #EBCFA8; border-radius:14px;
  padding:16px 18px; align-items:start;
}
.alerte .bang{
  width:26px; height:26px; border-radius:50%; background:#E0932E; color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:15px; font-family:var(--ff-display);
}
.alerte p{ font-size:14.5px; color:#6B4E22; line-height:1.6; }
.alerte p + p{ margin-top:8px; }
.alerte b{ color:#4A3413; }
.code-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.code-actions .tiny{ max-width:34ch; }

/* ============================================================
   Le parcours posé sur l'écran de nuit
   Même frise, mêmes scènes, mais dans la carte sombre de la page
   d'accueil : trois colonnes — la scène, le texte, la pastille d'état.
   Les couleurs claires sont reprises une à une ; rien d'autre ne change,
   les animations des scènes restent les mêmes.
   ============================================================ */

.ecran .parcours{ margin-top:6px; }
.ecran .parcours::before{ background:rgba(127,199,196,.16); }
.ecran .parcours::after{ background:linear-gradient(180deg,#7FC7C4,#FF5C9B); }

/* la frise passe en grille : la pastille d'état prend la colonne de droite */
.ecran .etape{
  display:grid; grid-template-columns:68px minmax(0,1fr) auto;
  gap:6px 20px; align-items:center;
  padding:18px 2px; min-height:0;
  border-bottom:1px dashed rgba(127,199,196,.14);
}
.ecran .etape:last-child{ border-bottom:0; padding-bottom:4px; }
.ecran .scene{ position:relative; left:auto; top:auto; grid-row:1 / span 3; align-self:center; }
.ecran .etape h3{ grid-column:2; margin:0; color:var(--paper-2);
                  font-family:var(--ff-display); font-weight:800; letter-spacing:-.02em;
                  font-size:clamp(16.5px,2vw,20px); }
.ecran .etape p{ grid-column:2; color:#9FBEBD; margin-top:3px; }
.ecran .etape .quand{ grid-column:2; background:none; padding:0; margin-top:6px; color:#6E9695; }

/* le fil relie le centre des scènes : avec la grille, elles sont centrées
   verticalement, donc on recale ses extrémités sur elles */
.ecran .parcours::before, .ecran .parcours::after{ left:33px; top:52px; bottom:52px; }

/* les scènes, en négatif */
.ecran .scene{ background:rgba(127,199,196,.08); border-color:rgba(127,199,196,.22); }
.ecran .etape.fait .scene{ background:rgba(46,124,124,.30); border-color:rgba(127,199,196,.45); }
.ecran .etape.en_cours .scene{ background:#0E2A2E; border-color:#FF5C9B;
  box-shadow:0 0 0 0 rgba(255,92,155,.5), 0 10px 26px rgba(0,0,0,.4);
  animation:haloNuit 2.8s ease-out infinite; }
@keyframes haloNuit{ to{ box-shadow:0 0 0 18px rgba(255,92,155,0), 0 10px 26px rgba(0,0,0,.4); } }
.ecran .etape.a_venir .scene{ opacity:.42; }
.ecran .scene .trait{ stroke:#6E9695; }
.ecran .scene .plein{ fill:#6E9695; }
.ecran .etape.en_cours .scene .trait{ stroke:#EAF7F6; }
.ecran .etape.en_cours .scene .plein{ fill:#62E3DF; }
.ecran .etape.fait .scene .trait{ stroke:#8FE0DD; }
.ecran .etape.fait .scene .plein{ fill:#8FE0DD; }
.ecran .scene .coche{ background:rgba(46,124,124,.55); }
.ecran .etape.fait h3{ color:#C9DEDD; }
.ecran .etape.a_venir h3{ color:#7E9E9D; }
.ecran .etape.a_venir p{ color:#5E8382; }

/* la pastille d'état, à droite, comme sur la démo */
.etat{
  grid-column:3; grid-row:1 / span 3; align-self:center;
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:7px 13px; border-radius:999px;
  white-space:nowrap; color:#6E9695; background:rgba(127,199,196,.07);
}
.etape.fait .etat{ background:rgba(46,124,124,.28); color:#8FE0DD; }
.etape.en_cours .etat{ background:rgba(255,92,155,.18); color:#FF9FC2; }
/* « à vous » : l'étape n'attend pas après nous, elle attend après le client.
   C'est le signal le plus utile de tout l'écran, il mérite sa couleur. */
.etape.a_vous .etat{ background:rgba(255,198,92,.20); color:#FFD79A; }

@media (max-width:620px){
  .ecran .etape{ grid-template-columns:52px minmax(0,1fr); gap:4px 14px; }
  .ecran .scene{ width:52px; height:52px; grid-row:1 / span 4; }
  .ecran .scene svg{ width:30px; height:30px; }
  .ecran .parcours::before, .ecran .parcours::after{ left:25px; top:46px; bottom:46px; }
  .etat{ grid-column:2; grid-row:auto; justify-self:start; margin-top:8px; }
}