/* ==========================================================================
   Lot « methode » (/process, /resultats) — composant manquant dans av.css
   --------------------------------------------------------------------------
   .loop : la boucle de conception. Même nœuds et flèches que .canvas (§26.3),
   mais posés sur une grille pour pouvoir tracer le RETOUR en U :
   décision « ça vous convient ? » → non → on ajuste → on reconstruit.
   Grille : 5 nœuds (colonnes impaires) séparés par 4 flèches (colonnes paires).
   Le U est dessiné par des cellules à bordure pointillée sur les colonnes 1 à 7 :
   la 1re et la 7e ne couvrent que leur moitié intérieure, donc le trait part
   exactement du milieu du 1er nœud et du 4e (la décision), quelle que soit la largeur.
   ========================================================================== */
.loop {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr) 36px) minmax(0, 1fr);
  align-items: stretch;
}
.loop > .node { flex: none; }
.loop > .edge { display: block; align-self: center; min-width: 0; }

/* le retour : trait pointillé en U sous les nœuds 1 à 4 */
.loop__u { height: 46px; border-bottom: 2px dashed var(--line-2); grid-row: 2; transition: border-color 500ms var(--ease); }
.loop__u--start { grid-column: 1; margin-left: 50%; border-left: 2px dashed var(--line-2); position: relative; }
.loop__u--mid   { grid-column: 2 / 7; }
.loop__u--end   { grid-column: 7; margin-right: 50%; border-right: 2px dashed var(--line-2); position: relative; }
/* pointe de flèche : le retour REMONTE vers « on construit » */
.loop__u--start::before {
  content: ''; position: absolute; left: -7px; top: -2px;
  border: 6px solid transparent; border-bottom: 7px solid var(--line-2); border-top: 0;
  transition: border-bottom-color 500ms var(--ease);
}
.loop__no {
  position: absolute; right: 8px; top: 12px;
  font-family: var(--mono); font-size: .75rem; color: var(--ink-3);
}
.is-live .loop__u { border-color: var(--blue); transition-delay: 1300ms; }
.is-live .loop__u--start::before { border-bottom-color: var(--blue); transition-delay: 1300ms; }

/* le nœud « on ajuste », posé à cheval sur le trait du bas */
.loop__fix {
  grid-row: 3; grid-column: 3 / 6;
  justify-self: center;
  margin-top: -26px;
  max-width: 260px;
  --i: 5;
}

/* un paquet qui repart de la décision vers le début : on voit le retour */
.loop__u--mid { position: relative; }
.loop__u--mid i {                /* couvre la ligne moins le point ; le point est au bout droit */
  position: absolute; bottom: -5px; right: 0;
  width: calc(100% - 8px); height: 8px;
  opacity: 0;
}
.loop__u--mid i::before {
  content: ''; position: absolute; right: 0; top: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 4px rgba(37, 71, 208, .15);
}
.is-live .loop__u--mid i { animation: loop-back 3.2s var(--ease-io) 1.8s infinite; }
@keyframes loop-back {             /* transform uniquement : pas de recalcul de la page */
  0%   { transform: translateX(0); opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}

/* version mobile : les nœuds s'empilent, le retour devient une note encadrée */
.loop__mobile { display: none; }
@media (max-width: 760px) {
  .loop { grid-template-columns: 1fr; }
  .loop > .edge { flex: 0 0 30px; width: 2px; height: 30px; margin-left: 29px; }
  .loop__u, .loop__fix { display: none; }
  .loop__mobile {
    display: grid; gap: 4px;
    margin-top: 18px; padding: 14px 16px;
    border: 2px dashed var(--blue); border-radius: 14px;
    background: var(--surface);
  }
  .loop__mobile .mono { color: var(--ink-3); font-size: .75rem; }
}

/* résultats : lien vers la page pilier sous chaque étude de cas */
.case__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 20px; }
.case__deltas { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.case__deltas .mono { display: block; margin-bottom: 12px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .loop__u--mid i { display: none !important; }
  .loop__u, .loop__u--start::before { transition: none !important; }
}