/* Page Étiquettes, composant 3 : de votre fichier à la bobine. La section reste à l'écran pendant qu'on défile :
   la vue avance le long du schéma de la ligne d'impression, et l'étape en cours s'affiche dessous. */
.deroule { position: relative; height: 380vh; border-top: 1px solid var(--filet); }
.deroule__collant { position: sticky; top: var(--haut-entete, 66px); height: calc(100vh - var(--haut-entete, 66px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--espace-4);
  max-width: 1440px; margin: 0 auto; padding-top: var(--espace-6); padding-bottom: var(--espace-6); padding-left: max(var(--espace-7), env(safe-area-inset-left, 0px)); padding-right: max(var(--espace-7), env(safe-area-inset-right, 0px)); }
.deroule__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; }
.deroule h2 { margin: 0; font-family: var(--font-titre); font-weight: 700; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.01em; }
.deroule__tete p { margin: 0; max-width: 34em; font-size: 16px; line-height: 24px; color: var(--texte-doux); }

/* Le schéma, au trait bleu, sur papier quadrillé comme le héros. */
.deroule__schema { position: relative; min-height: 0; border: 1px solid var(--filet); color: var(--accent);
  background-color: #f6f4f0; background-image: linear-gradient(rgba(12, 77, 219, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 77, 219, 0.06) 1px, transparent 1px); background-size: 24px 24px; }
.deroule__schema svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.deroule__schema .poste { font: 700 22px var(--font-titre); fill: var(--texte-doux); transition: fill 0.3s; }
.deroule__schema .poste--petit { font: 600 15px var(--font-texte); }
.deroule__schema .poste.actif { fill: var(--texte); }
.tampon { opacity: 0; transform-box: fill-box; transition: opacity 0.12s; }
.tampon__texte { font: 700 22px var(--font-titre); fill: #e5322f; letter-spacing: 1px; }
.signature { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s ease 0.25s; }
.bat-signe .tampon { opacity: 0.92; animation: tamponner 0.32s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.bat-signe .signature { stroke-dashoffset: 0; }
@keyframes tamponner { from { opacity: 0; scale: 1.5; } to { opacity: 0.92; scale: 1; } }

/* Les étapes : numérotées, l'étape en cours en noir, les autres en gris. */
.deroule__etapes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.deroule__etapes li { position: relative; padding-top: 14px; border-top: 2px solid var(--filet); color: var(--texte-doux); transition: color 0.3s, border-color 0.3s; }
.deroule__etapes li::before { counter-increment: etape; content: counter(etape); position: absolute; top: -13px; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fond); border: 2px solid var(--filet); font-size: 12px; font-weight: 600; }
.deroule__etapes li.actif { color: var(--texte); border-color: var(--accent); }
.deroule__etapes li.actif::before { border-color: var(--accent); background: var(--accent); color: var(--sur-accent); }
.deroule__etapes h3 { margin: 6px 0 4px; font-family: var(--font-titre); font-weight: 700; font-size: 17px; line-height: 21px; }
.deroule__etapes p { margin: 0; font-size: 14px; line-height: 20px; }

@media (max-width: 1000px) {
  .deroule { height: 330vh; }
  .deroule__collant { padding: var(--espace-4) max(var(--espace-4), env(safe-area-inset-right, 0px)) var(--espace-5) max(var(--espace-4), env(safe-area-inset-left, 0px)); gap: 14px; grid-template-rows: auto 44vh auto; align-content: start; }
  .deroule__tete p { display: none; }
  /* Une étape à la fois, les autres restent dans la page. */
  .deroule__etapes { grid-template-columns: 1fr; gap: 0; padding-top: 16px; }
  .deroule__etapes li { grid-area: 1 / 1; opacity: 0; transition: opacity 0.3s; }
  .deroule__etapes li.actif { opacity: 1; }
  .deroule__etapes h3 { font-size: 22px; line-height: 27px; }
  .deroule__etapes p { font-size: 16px; line-height: 24px; }
  .deroule__etapes li::before { left: calc(var(--n) * 30px); }
}
@media (prefers-reduced-motion: reduce) { .deroule { height: auto; } .deroule__collant { position: static; height: auto; grid-template-rows: auto 52vh auto; } }