/* =====================================================================
     Tracé du stylo (js/trace-stylo.js), à la place du bandeau « Remplir,
     Modèle, Télécharger » : un fil sous l'en-tête, l'encre dorée avance avec
     le CV et le stylo du loader écrit au bout.
     ===================================================================== */
  .cv-progress-strip{display:none !important;}

  .trace{--p:0%;position:absolute;left:0;right:0;bottom:-2px;height:4px;z-index:3;pointer-events:none;}
  .trace[hidden]{display:none;}
  .trace-fil{position:absolute;inset:0;background:var(--line);overflow:hidden;}
  .trace-encre{position:absolute;inset:0 auto 0 0;width:var(--p);background:linear-gradient(90deg,var(--gold),#e8b36b);
    transition:width 1.1s cubic-bezier(.75,.04,0,.86);}
  .trace.fini .trace-encre{background:#2FA96A;}

  /* Repères : un point sur le fil, le libellé apparaît au survol. */
  .trace-rep{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;padding:0;border-radius:50%;cursor:pointer;pointer-events:auto;
    background:var(--card);border:2px solid var(--line-strong);transition:background .3s ease,border-color .3s ease,scale .2s ease;}
  .trace-rep:first-of-type{margin-left:0;}
  .trace-rep:hover,.trace-rep:focus-visible{scale:1.3;outline:none;}
  .trace-rep[data-state="done"]{background:var(--gold);border-color:var(--gold);}
  .trace-rep[data-state="current"]{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft);}
  .trace-rep-t{position:absolute;top:18px;left:50%;translate:-50% 0;white-space:nowrap;pointer-events:none;
    font-family:var(--da-heading,var(--ui-sans));font-size:12px;font-weight:600;color:var(--ink);background:var(--card);
    border:1px solid var(--line);border-radius:6px;padding:3px 8px;opacity:0;translate:-50% -4px;transition:opacity .2s ease,translate .2s ease;}
  .trace-rep:first-of-type .trace-rep-t{left:0;translate:0 -4px;}
  .trace-rep:hover .trace-rep-t,.trace-rep:focus-visible .trace-rep-t{opacity:1;translate:-50% 0;}
  .trace-rep:first-of-type:hover .trace-rep-t,.trace-rep:first-of-type:focus-visible .trace-rep-t{translate:0 0;}

  /* Le stylo, posé au bout de l'encre. */
  .trace-stylo{position:absolute;left:var(--p);bottom:0;width:30px;height:30px;margin-left:-5px;pointer-events:auto;
    transition:left 1.1s cubic-bezier(.75,.04,0,.86);}
  .trace-stylo svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.2));}
  .trace.fini .trace-stylo{margin-left:-26px;}
  @keyframes traceEcrit{0%,100%{rotate:0deg;}20%{rotate:-14deg;}45%{rotate:8deg;}70%{rotate:-6deg;}}
  @media (prefers-reduced-motion: no-preference){
    .trace-stylo.ecrit svg{animation:traceEcrit 1.1s ease-in-out;transform-origin:15% 85%;}
  }
  @media (prefers-reduced-motion: reduce){ .trace-encre,.trace-stylo{transition:none;} }

  /* Bulle : le texte d'étape, montré quand il change ou au survol du stylo. */
  .trace-bulle{position:absolute;top:34px;left:50%;translate:-50% -4px;white-space:nowrap;
    background:var(--grad-1);color:#fff;font-family:var(--ui-sans);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:8px;
    box-shadow:0 8px 20px rgba(18,42,64,.25);opacity:0;transition:opacity .25s ease,translate .25s ease;pointer-events:none;}
  .trace-bulle::before{content:'';position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;background:var(--grad-1);rotate:45deg;}
  .trace.parle .trace-bulle{opacity:1;translate:-50% 0;}
  /* La bulle part du stylo vers le côté où il y a de la place. */
  .trace-bulle{left:0;translate:0 -4px;}
  .trace.parle .trace-bulle{translate:0 0;}
  .trace-bulle::before{left:14px;margin-left:0;}
  .trace.droite .trace-bulle{left:auto;right:0;}
  .trace.droite .trace-bulle::before{left:auto;right:10px;}
  @media (max-width: 600px){ .trace-bulle{font-size:11.5px;white-space:normal;width:max-content;max-width:220px;} }
  /* Le stylo se pose sur les repères : il laisse passer les clics. Seul son
     corps, au-dessus du fil, réagit au survol (bulle). */
  .trace-stylo{pointer-events:none;}
  .trace-stylo svg{pointer-events:none;}
  .trace-stylo::before{content:'';position:absolute;right:0;top:0;width:60%;height:55%;pointer-events:auto;}