/* Déroulé de la concertation, direction A3 : portage de la maquette de la pilote Contenu (maquettes/deroule, 24/10/2026).
   Chronologie verticale sous 75 rem, frise horizontale au-delà ; la frise se trace étape par étape au premier passage
   dans l'écran (classes « pret » puis « anime » posées par public/site.js, 0,42 s par étape), le repère du jour pulse
   trois fois. Sous prefers-reduced-motion, rien ne bouge et tout reste lisible. Une étape « à fixer » garde un point
   en pointillés : aucune date n'y est inventée. */

.deroule-section { --point: 1.75rem; --pas: 0.42s; margin-top: var(--e-12); padding: var(--e-10) var(--e-5) var(--e-12); background: var(--surface); border-block: 1px solid var(--filet); }
.deroule-interieur { max-width: var(--largeur-large); margin: 0 auto; }
.deroule-section h2 { margin: 0 0 var(--e-2); font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); letter-spacing: -0.01em; }
.deroule-chapeau { max-width: 42rem; margin-bottom: var(--e-8); font-size: 1.15rem; line-height: 1.55; color: var(--gris); }
.deroule-chapeau p { margin: 0; }

.deroule { --point: 1.75rem; --pas: 0.42s; list-style: none; margin: 0; padding: 0; }

/* Chronologie verticale : un point par étape, un trait qui relie les étapes */
.etape { position: relative; padding: 0 0 1.75rem calc(var(--point) + 1rem); }
.etape-point { position: absolute; left: 0; top: 0.1rem; width: var(--point); height: var(--point); box-sizing: border-box; border-radius: 50%; border: 3px solid var(--accent); background: var(--surface); }
.etape::before { content: ""; position: absolute; left: calc(var(--point) / 2 - 2px); top: calc(var(--point) + 0.35rem); bottom: 0.2rem; width: 4px; border-radius: 2px; background: var(--filet); transform-origin: 50% 0; }
.etape:last-child::before { display: none; }
.etape-date { margin: 0 0 0.15rem; font-size: 1.05rem; line-height: 1.4; font-weight: 700; color: var(--accent); }
.etape-titre { margin: 0 0 0.35rem; font-size: 1.3rem; line-height: 1.3; font-weight: 700; color: var(--encre); }
.etape-texte { margin: 0 0 0.4rem; font-size: 1.1rem; line-height: 1.55; overflow-wrap: break-word; }
.etape-action { margin: 0 0 0.4rem; font-size: 1.05rem; line-height: 1.5; overflow-wrap: break-word; }
.etape-action-libelle { font-weight: 700; color: var(--accent); }
.etape-source { margin: 0; font-size: 0.95rem; line-height: 1.4; color: var(--gris); }
.etape-source a { color: var(--gris); text-underline-offset: 2px; }
.etape-source a:hover, .etape-source a:focus-visible { color: var(--accent); }

/* Étapes encore à fixer : pointillés, aucune date inventée */
.etape[data-statut="a_fixer"] .etape-point { border-style: dashed; border-color: var(--bord-champ); background: var(--fond); }
.etape[data-statut="a_fixer"] .etape-date, .etape[data-statut="a_fixer"] .etape-titre, .etape[data-statut="a_fixer"] .etape-texte { color: var(--gris); }

/* Étapes passées puis étape du jour, marquées par le serveur d'après la date de Paris */
.etape.passee .etape-point { background: var(--accent); }
.etape.passee::before { background: var(--accent); }
.etape[aria-current="step"] .etape-point { background: var(--accent); box-shadow: 0 0 0 6px var(--accent-pale); }
.etape-ici { display: inline-block; margin-left: 0.5rem; padding: 0.05rem 0.65rem; border-radius: 999px; background: var(--accent-pale); color: var(--accent); font-size: 0.9rem; font-weight: 700; vertical-align: 0.1em; }

/* Tablette et petit bureau : des lignes courtes */
@media (min-width: 40rem) { .deroule-section .etape { max-width: 46rem; } }

/* Grand écran : frise horizontale, une colonne par étape, défilement au-delà de huit étapes */
@media (min-width: 75rem) {
  .deroule-section { padding: var(--e-16) var(--e-8) var(--e-16); }
  .deroule-section .deroule { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(8.5rem, 1fr); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0.75rem; }
  .deroule-section .etape { max-width: none; padding: calc(var(--point) + 1.1rem) 1.25rem 0 0; scroll-snap-align: start; }
  .deroule-section .etape-ici { display: table; margin: 0.3rem 0 0; }
  .deroule-section .etape-point { top: 0; }
  .deroule-section .etape::before { left: calc(var(--point) + 0.35rem); right: 0.35rem; top: calc(var(--point) / 2 - 2px); bottom: auto; width: auto; height: 4px; transform-origin: 0 50%; }
  .deroule-section .etape-titre { font-size: 1.15rem; }
  .deroule-section .etape-texte { font-size: 1.02rem; }
  .deroule-section .etape-action { font-size: 0.98rem; }
}

/* Rappel compact : l'accueil et la consultation, dates puis titres, lien vers la section complète */
.deroule-rappel h2 { font-size: 1.6rem; }
.deroule-compact { --point: 1.25rem; }
.deroule-compact .etape { padding: 0 0 1rem calc(var(--point) + 0.85rem); }
.deroule-compact .etape-point { border-width: 3px; top: 0.2rem; }
.deroule-compact .etape::before { top: calc(var(--point) + 0.3rem); width: 3px; left: calc(var(--point) / 2 - 1.5px); }
.deroule-compact .etape-date { font-size: 0.98rem; }
.deroule-compact .etape-titre { margin: 0; font-size: 1.1rem; }
.deroule-suite { margin: var(--e-2) 0 0; font-weight: 600; }
.page-formulaire .deroule-rappel { margin-top: var(--e-12); padding-top: var(--e-2); border-top: 1px solid var(--filet); }

/* Animation : la frise se trace étape par étape au premier passage dans l'écran */
@media (prefers-reduced-motion: no-preference) {
  .deroule.pret .etape { opacity: 0; transform: translateY(12px); }
  .deroule.pret .etape::before { transform: scaleY(0); }
  .deroule.anime .etape { animation: etape-entre 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .deroule.anime .etape::before { animation: trait-vertical 0.55s cubic-bezier(0.45, 0.05, 0.3, 1) forwards; }
  .deroule.anime .etape[aria-current="step"] .etape-point { animation: ici 1.2s ease-in-out 3; }
  .deroule.anime .etape:nth-child(2), .deroule.anime .etape:nth-child(1)::before { animation-delay: calc(var(--pas) * 1); }
  .deroule.anime .etape:nth-child(3), .deroule.anime .etape:nth-child(2)::before { animation-delay: calc(var(--pas) * 2); }
  .deroule.anime .etape:nth-child(4), .deroule.anime .etape:nth-child(3)::before { animation-delay: calc(var(--pas) * 3); }
  .deroule.anime .etape:nth-child(5), .deroule.anime .etape:nth-child(4)::before { animation-delay: calc(var(--pas) * 4); }
  .deroule.anime .etape:nth-child(6), .deroule.anime .etape:nth-child(5)::before { animation-delay: calc(var(--pas) * 5); }
  .deroule.anime .etape:nth-child(7), .deroule.anime .etape:nth-child(6)::before { animation-delay: calc(var(--pas) * 6); }
  .deroule.anime .etape:nth-child(8), .deroule.anime .etape:nth-child(7)::before { animation-delay: calc(var(--pas) * 7); }
  .deroule.anime .etape:nth-child(9), .deroule.anime .etape:nth-child(8)::before { animation-delay: calc(var(--pas) * 8); }
  .deroule.anime .etape:nth-child(10), .deroule.anime .etape:nth-child(9)::before { animation-delay: calc(var(--pas) * 9); }
  .deroule.anime .etape:nth-child(11), .deroule.anime .etape:nth-child(10)::before { animation-delay: calc(var(--pas) * 10); }
  .deroule.anime .etape:nth-child(n+12), .deroule.anime .etape:nth-child(n+11)::before { animation-delay: calc(var(--pas) * 11); }
  @media (min-width: 75rem) {
    .deroule-section .deroule.pret .etape::before { transform: scaleX(0); }
    .deroule-section .deroule.anime .etape::before { animation-name: trait-horizontal; }
  }
}

@keyframes etape-entre { to { opacity: 1; transform: none; } }
@keyframes trait-vertical { to { transform: scaleY(1); } }
@keyframes trait-horizontal { to { transform: scaleX(1); } }
@keyframes ici { 50% { box-shadow: 0 0 0 12px var(--accent-pale); } }

@media print {
  .deroule.pret .etape { opacity: 1; transform: none; }
  .deroule.pret .etape::before { transform: none; }
}