/* Vigiloc, le schéma animé du trajet d'une commune.

   Cette page raconte ce que fait l'agent, de la recherche à la fiche : la
   recherche qui met en file, le site officiel, la lecture sous garde, le
   contrôle des citations, puis la relecture mensuelle. Le schéma est du texte
   balisé, pas une image : il se lit sans script, se plie aux lecteurs d'écran,
   et le script n'ajoute que le mouvement (le point qui avance, les segments
   qui s'allument, la cible refusée qui défile).

   Deux formes, une seule géométrie : la rangée sur large écran, la colonne
   sur écran étroit (la pastille numérotée passe alors à gauche, comme les
   étapes des guides). Le script place le point d'après la position réelle des
   pastilles : il n'y a donc aucune coordonnée en dur à maintenir ici.

   Le mouvement se coupe (bouton Pause, et la règle globale de theme.css quand
   le système demande moins de mouvement) : dans ce cas le script ne lance
   aucune lecture automatique. */

.sch { margin-top: 18px; }

/* -------------------------------------------------- barre de commandes */
.sch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.sch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s,
    transform 0.18s;
}
.sch-btn:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
  background: var(--accent-soft);
}
.sch-btn:active { transform: scale(0.97); }
.sch-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sch-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* Le bouton porte les deux libellés, et l'état choisit lequel se voit : le
   nom accessible du bouton est donc toujours celui de l'action à venir. */
#schPlay[aria-pressed="true"] .sch-on-play,
#schPlay[aria-pressed="false"] .sch-on-pause { display: none; }

.sch-count {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sch-count .sch-total { color: var(--muted-2); font-weight: 700; }
.sch-progress {
  flex: 1 1 140px;
  min-width: 90px;
  height: 4px;
  background: var(--elev);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.sch-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad);
}
/* forwards : la barre reste pleine une fois l'étape atteinte. La pause gèle
   l'animation sur place, donc la barre montre le temps restant, pas zéro. */
.sch-fill.sch-run { animation: schFill linear forwards; }
.sch-fill.sch-tenue { animation-play-state: paused; }
@keyframes schFill { from { width: 0; } to { width: 100%; } }

/* ------------------------------------------------------------- le rail */
.sch-stage { position: relative; padding-bottom: 56px; }
.sch-rail { position: relative; display: flex; align-items: stretch; }
.sch-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 15px 14px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s,
    background 0.3s;
}
.sch-step:hover { border-color: var(--border-strong); }
/* L'étape courante se lève : c'est le repère principal pendant la lecture. */
.sch-step[aria-current="true"] {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--card) 42%);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.sch-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sch-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  background: var(--elev);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.sch-step[aria-current="true"] .sch-mark {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 4px var(--accent-soft);
}
/* Une étape déjà parcourue reste marquée : on voit d'où l'on vient. */
.sch-step.sch-fait .sch-mark {
  background: var(--green-soft);
  border-color: var(--green-line);
  color: var(--green);
}
.sch-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
}
.sch-ic svg { width: 17px; height: 17px; }
.sch-step[aria-current="true"] .sch-ic { background: var(--accent); color: #fff; }
.sch-step h3 {
  margin-top: 11px;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
}
.sch-step p {
  margin-top: 7px;
  font-size: 12.8px;
  line-height: 1.55;
  color: var(--muted);
}
.sch-proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--elev);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}
.sch-step[aria-current="true"] .sch-proof {
  background: var(--card);
  border-color: var(--accent-line);
  color: var(--accent-hover);
}
/* La cible refusée, qui défile pendant l'étape de lecture. */
.sch-guard {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  font-size: 11.5px;
}
.sch-guard-tag {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--red-soft);
  border: 1px solid var(--red-line);
  color: var(--red);
  font-weight: 800;
}
.sch-guard code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.sch-bascule { animation: schBascule 0.32s ease-out; }
@keyframes schBascule {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------- le lien entre étapes */
.sch-seg {
  position: relative;
  flex: 0 0 clamp(12px, 2.6vw, 34px);
  align-self: center;
  height: 2px;
  background: var(--border-strong);
  border-radius: 2px;
  overflow: hidden;
}
.sch-seg.sch-allume { background: var(--accent-line); }
.sch-seg.sch-allume::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad);
  transform-origin: left;
  animation: schSeg 0.45s ease-out;
}
@keyframes schSeg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Le point qui avance, placé par le script sur l'axe des segments : au bord
   gauche de la carte courante quand la rangée est horizontale, sur l'axe des
   pastilles quand elle passe en colonne. Dans les deux cas il tombe dans un
   vide — jamais sur le texte. La classe « sch-instant » coupe la transition le
   temps de le poser : commencer depuis nulle part ne s'anime pas, et une
   transition seulement « en attente » (onglet non peint) resterait sinon au
   départ. */
.sch-pulse {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft),
    0 0 14px rgba(225, 29, 72, 0.55);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.55s cubic-bezier(0.35, 0, 0.2, 1);
}
.sch-pulse.sch-instant { transition: none; }

/* ------------------------- la boucle : relire, au plus une fois par mois */
/* Un crochet pointillé qui pend sous les étapes 3 à 5, dans le rail lui-même :
   « top: 100% » y vaut donc exactement le bas des cartes, sans mesure à
   refaire. Il est toujours visible, et s'allume sur la dernière étape : c'est
   le seul moment où la boucle explique quelque chose. La largeur vient du
   script, qui prend les centres réels des deux étapes concernées. */
.sch-loop {
  position: absolute;
  top: 100%;
  height: 34px;
  border: 1px dashed var(--border-strong);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  transition: border-color 0.3s;
}
.sch-loop::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -5px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid var(--border-strong);
  transition: border-bottom-color 0.3s;
}
.sch-loop.sch-actif { border-color: var(--accent-line); }
.sch-loop.sch-actif::before { border-bottom-color: var(--accent); }
.sch-loop-lbl {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 8px;
  background: var(--bg);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted-2);
  white-space: nowrap;
  transition: color 0.3s;
}
.sch-loop.sch-actif .sch-loop-lbl { color: var(--accent); }

/* ------------------------------------------------------------- les notes */
.sch-notes { margin-top: 20px; }
.sch-notes .callout { max-width: none; }
.sch-notes .callout + .callout { margin-top: 8px; }

/* --------------------------------------------------------------- appel */
.sch-cta {
  margin-top: 26px;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  border: 1px solid var(--accent-line);
  background: linear-gradient(135deg, var(--accent-soft) 0%, #FFFFFF 62%);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-sm);
}
.sch-cta h2 { font-size: clamp(20px, 2.6vw, 25px); }
.sch-cta .sub { margin-top: 5px; }
.sch-cta .btn { flex: 0 0 auto; }

/* --------------------------------------------------------- écran étroit */
@media (max-width: 1000px) {
  /* La rangée devient une colonne : la pastille passe à gauche, comme les
     étapes des guides. Les icônes suivent la pastille. */
  .sch-rail { flex-direction: column; }
  .sch-step { padding: 15px 16px 15px 56px; }
  .sch-step[aria-current="true"] { transform: none; }
  .sch-top { justify-content: flex-start; }
  .sch-mark { position: absolute; left: 15px; top: 15px; }
  .sch-ic { width: 28px; height: 28px; }
  .sch-seg {
    flex: 0 0 16px;
    width: 2px;
    height: auto;
    /* aligné sur l'axe des pastilles (15px de marge + 13px de rayon) */
    margin: 0 auto 0 27px;
  }
  .sch-seg.sch-allume::after { transform-origin: top; }
  /* Le crochet n'a plus d'axe à suivre : la même règle est dans le texte de
     la dernière étape, et son étiquette suffit. */
  .sch-stage { padding-bottom: 0; }
  .sch-loop, .sch-loop-lbl { display: none; }
  .sch-step p { font-size: 13px; }
}
@media (max-width: 560px) {
  .sch-bar { gap: 8px; }
  .sch-count { order: 3; }
  .sch-progress { order: 4; flex-basis: 100%; }
  .sch-cta { padding: 22px 18px; }
  .sch-cta .btn { width: 100%; }
}
/* Sans animation, la barre de progression ne veut plus rien dire. */
@media (prefers-reduced-motion: reduce) {
  .sch-progress { display: none; }
  .sch-pulse { transition: none; }
}