/* ════════════════════════════════════════════════════════════════════
   MASCOTTE « GRAINE » SUR LE SITE VITRINE
   Le dessin est celui de l'app, exporté en SVG par
   scripts/mascot/gen_mascot_svg.js : aucune ligne de JavaScript ici,
   les pages servent des <img> et tout le mouvement est en CSS.

   Trois apparitions :
     .growth    la frise des quatre stades de la plante (section dédiée)
     .cta-pot   la mascotte qui fête, au-dessus du QR de la bande finale
     .foot-pot  la pastille du pied de page
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────── frise de croissance ─────────────── */

.growth-track{
  list-style:none;margin:44px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
  position:relative;
}

/* le sol : un trait qui se remplit quand la frise entre à l'écran */
.growth-track::before,
.growth-track::after{
  content:"";position:absolute;left:11%;right:11%;top:150px;height:2px;border-radius:2px;
}
.growth-track::before{background:var(--line)}
.growth-track::after{
  background:linear-gradient(90deg,var(--brand) 0%,var(--gold) 65%,var(--gold-text) 100%);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.9s cubic-bezier(.22,1,.36,1) .25s;
}
.growth-track.in::after{transform:scaleX(1)}

.growth-step{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 6px;
}

/* le pot : deux dessins superposés, l'expression change au survol */
.growth-pot{
  position:relative;width:118px;height:143px;display:block;
  transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.growth-pot::before{                       /* halo chaud, révélé au survol */
  content:"";position:absolute;left:50%;top:52%;width:150px;height:150px;
  transform:translate(-50%,-50%) scale(.6);
  background:radial-gradient(circle,var(--gold-soft) 0%,transparent 68%);
  opacity:0;transition:opacity .45s,transform .45s cubic-bezier(.22,1,.36,1);
  border-radius:50%;pointer-events:none;
}
.growth-pot img{
  position:absolute;inset:0;width:100%;height:100%;
  transition:opacity .35s ease;
}
.growth-pot .pot-hi{opacity:0}

.growth-step:hover .growth-pot,
.growth-step:focus-within .growth-pot{transform:translateY(-7px) rotate(-1.5deg)}
.growth-step:hover .growth-pot::before,
.growth-step:focus-within .growth-pot::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.growth-step:hover .pot-hi,
.growth-step:focus-within .pot-hi{opacity:1}
.growth-step:hover .pot-rest,
.growth-step:focus-within .pot-rest{opacity:0}

/* la plante pousse à l'entrée, une après l'autre */
.growth-track.in .growth-pot{animation:pot-sprout .95s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0s)}
@keyframes pot-sprout{
  from{opacity:0;transform:translateY(20px) scale(.88)}
  60%{opacity:1;transform:translateY(-4px) scale(1.02)}
  to{opacity:1;transform:none}
}

/* la pastille de niveau, posée sur le trait */
.growth-lvl{
  position:relative;z-index:1;margin-top:8px;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:99px;
  background:var(--card);border:1px solid var(--line);
  font:700 12.5px Inter,sans-serif;color:var(--ink-2);white-space:nowrap;
  transition:border-color .25s,color .25s,box-shadow .25s;
}
.growth-lvl::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);
  opacity:.45;transition:opacity .25s,transform .25s;
}
.growth-step:hover .growth-lvl,
.growth-step:focus-within .growth-lvl{
  border-color:var(--line-strong);color:var(--ink);box-shadow:var(--shadow-card-hover);
}
.growth-step:hover .growth-lvl::before,
.growth-step:focus-within .growth-lvl::before{opacity:1;transform:scale(1.25)}

.growth-name{
  font-family:Outfit,Inter,sans-serif;font-weight:700;font-size:1.12rem;
  color:var(--ink);margin-top:14px;
}
.growth-note{color:var(--ink-2);font-size:.93rem;margin-top:7px;max-width:22em}

/* ─────────────── bande finale : la mascotte fête ─────────────── */

.cta-pot{
  display:block;width:104px;height:126px;margin:0 auto 16px;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.28));
  animation:pot-cheer 4.6s ease-in-out 1.2s infinite;
}
@keyframes pot-cheer{
  0%,88%,100%{transform:none}
  91%{transform:translateY(-7px) rotate(-3deg)}
  94%{transform:translateY(-3px) rotate(2.5deg)}
  97%{transform:translateY(-1px) rotate(-1deg)}
}

/* ─────────────── pied de page : la pastille ─────────────── */

.foot-brandline{display:flex;align-items:center;gap:13px}
.foot-pot{
  width:44px;height:44px;border-radius:14px;flex:none;
  box-shadow:0 6px 16px rgba(45,40,33,.12);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.foot-brandline:hover .foot-pot{transform:rotate(-6deg) scale(1.06)}

/* ─────────────── responsive ─────────────── */

@media (max-width:980px){
  .growth-track{grid-template-columns:repeat(2,1fr);gap:34px 18px}
  .growth-track::before,.growth-track::after{display:none}
}
@media (max-width:560px){
  .growth-track{grid-template-columns:1fr;gap:30px}
  .growth-pot{width:100px;height:121px}
  .growth-note{max-width:26em}
  .cta-pot{width:88px;height:106px}
}

/* ─────────────── mouvement réduit ─────────────── */

@media (prefers-reduced-motion:reduce){
  .growth-track::after{transform:scaleX(1);transition:none}
  .growth-track.in .growth-pot{animation:none}
  .cta-pot{animation:none}
  .growth-step:hover .growth-pot,
  .growth-step:focus-within .growth-pot{transform:none}
}