/* SFTS EXPERIENCE COMPONENT #003 — "Process Experience"
   Extrait de MT Univers (thème mt-univers, front-page.php +
   style.css + footer.php) le 2026-09-23 pour devenir un composant SFTS
   générique, réutilisable sur n'importe quel site client.

   Deux modes, choisis automatiquement selon les données reçues (voir
   component.php) — comportement identique à MT Univers, jamais
   simplifié à un seul mode :
   1. Interactif (au moins une étape a une photo) : une vraie photo par
      étape, affichée à gauche, qui change au survol/clic/focus de
      l'étape correspondante à droite.
   2. Grille statique (aucune étape n'a de photo) : cartes numérotées en
      grille, avec une ligne de connexion qui se dessine au scroll.

   Dépendance retirée pendant l'extraction (décision délibérée, jamais un
   changement de comportement visible) : la ligne de connexion du mode
   grille utilisait GSAP (bibliothèque tierce, chargée globalement par le
   thème MT Univers pour d'autres effets sans rapport). Réimplémentée en
   CSS/JS vanille (transition + IntersectionObserver) pour ne jamais
   forcer une dépendance externe sur ce composant — même résultat visuel
   (ligne qui se dessine de gauche à droite, une fois, au scroll), voir
   README.md. */

.sfts-process {
  --sfts-process-fg: #f5f5f0;
  --sfts-process-accent: #c9a227;
  --sfts-process-caption-bg: rgba(10, 12, 16, 0.72);
}

/* ---------- Mode grille (repli, aucune étape avec photo) ---------- */
.sfts-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  position: relative;
}
.sfts-process-number {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sfts-process-accent);
  color: var(--sfts-process-caption-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: Arial, sans-serif; font-weight: 700; font-size: 1.1rem; margin-bottom: 16px;
  position: relative; z-index: 1;
}
.sfts-process-step { position: relative; z-index: 1; }
.sfts-process-step h3 { color: var(--sfts-process-fg); font-size: 1.1rem; margin-bottom: 10px; }
.sfts-process-step p {
  color: color-mix(in srgb, var(--sfts-process-fg) 80%, transparent);
  font-size: 0.92rem; margin: 0;
}
/* Ligne de connexion — se dessine une fois au scroll (scaleX 0→1), jamais
   rejouée, purement décorative (aria-hidden). Cachée dès que la grille
   passe sur plusieurs lignes (mobile, ou beaucoup d'étapes). */
.sfts-process-connector {
  position: absolute; top: 22px; left: 22px; right: 22px; height: 2px;
  background: color-mix(in srgb, var(--sfts-process-fg) 28%, transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s ease;
  z-index: 0;
}
.sfts-process-connector.is-drawn { transform: scaleX(1); }
@media (max-width: 700px) {
  .sfts-process-connector { display: none; }
}

.sfts-process-hint {
  color: color-mix(in srgb, var(--sfts-process-fg) 75%, transparent);
  margin: 10px 0 0;
}

/* ---------- Mode interactif (au moins une étape avec photo) ---------- */
.sfts-process-interactive {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}
.sfts-process-photo-panel {
  position: relative;
  aspect-ratio: 4 / 3.1;
  border-radius: 24px;
  overflow: hidden;
  background: color-mix(in srgb, var(--sfts-process-fg) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--sfts-process-fg) 12%, transparent);
}
.sfts-process-photo {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.5s ease;
}
.sfts-process-photo.is-active { opacity: 1; }
.sfts-process-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block;
}
.sfts-process-photo-caption {
  position: absolute; left: 20px; bottom: 20px; z-index: 1;
  background: var(--sfts-process-caption-bg);
  backdrop-filter: blur(6px);
  border: 1px solid color-mix(in srgb, var(--sfts-process-fg) 22%, transparent);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--sfts-process-fg) 92%, transparent);
}
.sfts-process-progress {
  height: 2px;
  background: color-mix(in srgb, var(--sfts-process-fg) 18%, transparent);
  border-radius: 2px;
  margin-bottom: 28px;
  overflow: hidden;
}
.sfts-process-progress-fill {
  display: block; height: 100%;
  background: var(--sfts-process-accent);
  transition: width 0.45s ease;
}
.sfts-process-step-list { display: flex; flex-direction: column; }
.sfts-process-step-btn {
  display: flex; align-items: flex-start; gap: 20px; width: 100%;
  background: none; border: none;
  border-top: 1px solid color-mix(in srgb, var(--sfts-process-fg) 14%, transparent);
  padding: 20px 4px; text-align: left; cursor: pointer;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.sfts-process-step-list .sfts-process-step-btn:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--sfts-process-fg) 14%, transparent);
}
.sfts-process-step-num {
  font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem;
  color: color-mix(in srgb, var(--sfts-process-fg) 45%, transparent);
  flex: none; padding-top: 2px; transition: color 0.3s ease;
}
.sfts-process-step-btn.is-active .sfts-process-step-num { color: var(--sfts-process-accent); }
.sfts-process-step-heading {
  display: block; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem;
  color: color-mix(in srgb, var(--sfts-process-fg) 75%, transparent);
  transition: color 0.3s ease;
}
.sfts-process-step-btn.is-active .sfts-process-step-heading { color: var(--sfts-process-fg); }
.sfts-process-step-text {
  display: block; max-height: 0; opacity: 0; overflow: hidden;
  color: color-mix(in srgb, var(--sfts-process-fg) 72%, transparent);
  font-size: 0.92rem; line-height: 1.6;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.35s ease;
}
.sfts-process-step-btn.is-active .sfts-process-step-text { max-height: 100px; opacity: 1; margin-top: 8px; }
@media (max-width: 800px) {
  .sfts-process-interactive { grid-template-columns: 1fr; gap: 24px; }
  .sfts-process-photo-panel { aspect-ratio: 16 / 10; }
}

/* Badge optionnel par étape (clé `badge`, ex. "48H") — ajouté le
   2026-09-26 d'après la maquette MT Univers (retimeline). Pastille
   discrète dans la couleur d'accent, jamais un aplat vif. */
.sfts-process-step-badge {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sfts-process-accent);
  background: color-mix(in srgb, var(--sfts-process-accent) 14%, transparent);
}

/* ---------- Layout 'arc' (2026-09-26) ----------
   Sans la classe .is-arc-enabled (posée par script.js seulement au-delà de
   900px et sans prefers-reduced-motion), le conteneur de scène est
   transparent pour la grille : rendu 'list' strictement identique. */
.sfts-process-arc-stage { display: contents; }

.sfts-process-interactive--arc.is-arc-enabled {
  display: block; position: relative;
  /* hauteur (scène + course de défilement) posée en JS */
}
.sfts-process-interactive--arc.is-arc-enabled .sfts-process-arc-stage {
  display: block; position: sticky; /* top + height posés en JS */
  overflow: hidden;
}
.is-arc-enabled .sfts-process-step-list {
  position: absolute; inset: 0; display: block; pointer-events: none;
}
.is-arc-enabled .sfts-process-step-btn {
  position: absolute; top: 0; left: 50%;
  width: 240px; margin-left: -120px;
  flex-direction: column; gap: 6px;
  padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--sfts-process-fg) 18%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--sfts-process-fg) 5%, transparent);
  backdrop-filter: blur(6px);
  transform-origin: 50% 50%;
  pointer-events: auto;
  transition: border-color 0.3s ease, background 0.3s ease, opacity 0.2s linear;
  will-change: transform, opacity;
}
.is-arc-enabled .sfts-process-step-list .sfts-process-step-btn:last-child { border-bottom: 1px solid color-mix(in srgb, var(--sfts-process-fg) 18%, transparent); }
.is-arc-enabled .sfts-process-step-btn.is-active {
  border-color: var(--sfts-process-accent);
  background: color-mix(in srgb, var(--sfts-process-accent) 12%, transparent);
}
.is-arc-enabled .sfts-process-step-btn:focus-visible { outline: 2px solid var(--sfts-process-accent); outline-offset: 3px; }
.is-arc-enabled .sfts-process-progress {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
}
.is-arc-enabled .sfts-process-photo-panel {
  position: absolute; left: 50%; transform: translateX(-50%);
  /* largeur, proportion et top posés en JS (centre du cadran) */
}
/* Cadran horloger du layout 'arc' (2026-09-26) — traits fins et discrets,
   couleur de premier plan très atténuée ; seul l'index du sommet prend la
   couleur d'accent. Purement décoratif (aria-hidden, aucun clic). */
.sfts-process-dial {
  position: absolute; inset: 0; pointer-events: none; overflow: visible;
  color: var(--sfts-process-fg);
}
.sfts-process-dial line { stroke: currentColor; stroke-width: 1; opacity: 0.16; }
.sfts-process-dial line.is-major { stroke-width: 1.3; opacity: 0.42; }
.sfts-process-dial-ring { fill: none; stroke: currentColor; stroke-width: 0.8; opacity: 0.14; }
.sfts-process-dial-gear circle { fill: currentColor; opacity: 0.22; }
.sfts-process-dial-index { fill: var(--sfts-process-accent); stroke: var(--sfts-process-accent); stroke-width: 1.4; }
.is-arc-enabled .sfts-process-photo-panel { z-index: 1; }
/* 2026-09-30 : dans un encart de 240px, les textes les plus longs dépassaient
   les 100px prévus et étaient coupés (même valeur que TEXT_MAX, script.js). */
.is-arc-enabled .sfts-process-step-btn.is-active .sfts-process-step-text { max-height: 140px; }
.is-arc-enabled .sfts-process-step-list { z-index: 2; }