/* Équipe D — bloc « Et maintenant ? » (scripts/flow.mjs). Chargé dans la section du bloc seulement ; les transitions sont dans flow-vt.css (inline). */

/* ---------- Bloc « Et maintenant ? » ---------- */
.sec.flow { padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem); }
.fl-panel { --fl-bg: #0b0d22; --fl-bg2: #15184a; --fl-txt: #eceaff; --fl-mut: #b4b1d8; --fl-cu: #e0995c; --fl-line: rgba(201, 198, 244, .14);
  position: relative; isolation: isolate; overflow: hidden; border-radius: calc(var(--radius) + 6px); padding: clamp(1.4rem, 1rem + 2.4vw, 2.8rem); color: var(--fl-txt);
  background: radial-gradient(80% 90% at 88% 0%, rgba(224, 153, 92, .16), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(95, 176, 98, .10), transparent 55%), linear-gradient(160deg, var(--fl-bg2), var(--fl-bg) 65%);
  box-shadow: 0 30px 80px -40px rgba(11, 13, 34, .6), inset 0 0 0 1px rgba(201, 198, 244, .10); }
/* Quadrillage discret (sous le texte, jamais par-dessus) */
.fl-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
  background-image: linear-gradient(var(--fl-line) 1px, transparent 1px), linear-gradient(90deg, var(--fl-line) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(110% 90% at 70% 20%, #000 25%, transparent 80%); mask-image: radial-gradient(110% 90% at 70% 20%, #000 25%, transparent 80%); }
.fl-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .6rem 3rem; align-items: end; margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }
.fl-head .eyebrow { color: var(--fl-cu); grid-column: 1; margin: 0; }
.fl-head h2 { grid-column: 1; margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); color: #fff; }
.fl-head > p:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--fl-mut); max-width: 52ch; }
@media (max-width: 820px) { .fl-head { grid-template-columns: minmax(0, 1fr); } .fl-head > p:last-child { grid-column: 1; grid-row: auto; } }

/* Étapes : un itinéraire de bornes numérotées reliées par un trait */
.fl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.2rem; counter-reset: none; }
.fl-step { position: relative; min-width: 0; display: flex; }
.fl-card { position: relative; display: flex; flex-direction: column; gap: .55rem; width: 100%; min-width: 0; padding: 1.3rem 1.3rem 1.2rem; border-radius: var(--radius); text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(201, 198, 244, .16); transition: border-color .3s, background .3s, transform .35s var(--ease, ease); }
.fl-card:hover { border-color: rgba(224, 153, 92, .7); background: rgba(255, 255, 255, .06); transform: translateY(-3px); }
.fl-card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fl-n { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(224, 153, 92, .7); background: var(--fl-bg); color: var(--fl-cu); font-family: var(--mono); font-size: .82rem; position: relative; z-index: 1; }
/* Trait pointillé de la borne vers l'étape suivante (sur ordinateur, quand les étapes sont côte à côte) */
.fl-step:not(:last-child)::after { content: ""; position: absolute; top: calc(1.3rem + 1.3rem); inset-inline-start: calc(1.3rem + 2.6rem); inset-inline-end: calc(-1.2rem - 1.3rem); border-top: 1px dashed rgba(224, 153, 92, .55); pointer-events: none; z-index: 0; }
@media (max-width: 760px) { .fl-step:not(:last-child)::after { top: 100%; height: 1.2rem; inset-inline-start: calc(1.3rem + 1.3rem); inset-inline-end: auto; border-top: 0; border-inline-start: 1px dashed rgba(224, 153, 92, .55); } }
.fl-kind { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fl-cu); overflow-wrap: anywhere; }
[dir="rtl"] .fl-kind { font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: .9rem; }
.fl-card h3 { margin: 0; font-size: 1.18rem; line-height: 1.3; color: #fff; overflow-wrap: anywhere; }
.fl-card p { margin: 0; color: var(--fl-mut); font-size: .95rem; overflow-wrap: anywhere; }
.fl-go { margin-top: auto; padding-top: .4rem; display: inline-flex; align-items: center; gap: .45rem; font-weight: 650; color: var(--fl-txt); }
.fl-go svg { width: 18px; height: 18px; flex: none; color: var(--fl-cu); transition: transform .3s var(--ease, ease); }
.fl-card:hover .fl-go svg { transform: translateX(4px); }
[dir="rtl"] .fl-go svg { transform: scaleX(-1); }
[dir="rtl"] .fl-card:hover .fl-go svg { transform: scaleX(-1) translateX(4px); }

/* Action : devis prérempli */
.fl-quote { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(1.4rem, 1rem + 1.5vw, 2rem); padding-top: clamp(1.2rem, 1rem + 1vw, 1.6rem); border-top: 1px solid rgba(201, 198, 244, .16); }
.fl-quote p { margin: 0; color: var(--fl-mut); max-width: 60ch; }
.fl-quote .btn { white-space: normal; max-width: 100%; border-radius: 1.6rem; text-align: start; }
.fl-quote .fl-qt { min-width: 0; overflow-wrap: anywhere; }
.fl-quote .fl-type { font-weight: 500; }
.fl-quote .btn svg { flex: none; }
.fl-quote .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .fl-card, .fl-go svg { transition: none; } .fl-card:hover { transform: none; } }
.a11y-rm .fl-card:hover { transform: none; }
@media print { .sec.flow { display: none; } }