/* ==========================================================================
   Mantara V3 — Collectivités (page sectorielle, hors menu, à envoyer après une mise en relation)
   ========================================================================== */

/* ---------- 2. Vous vous reconnaissez ? ---------- */
.constat .sit { min-height: 0; }
.constat .sit .label span:last-child { color: var(--friction); }
.constat .sit p { color: var(--ink); font-size: 1.0625rem; line-height: 1.5; }

/* ---------- 3. Ce que nous proposons : les trois volets, et la note à côté ---------- */
.offer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.offer__note { position: sticky; top: calc(var(--nav-h) + 32px); }
@media (max-width: 960px) { .offer { grid-template-columns: 1fr; } .offer__note { position: static; } }

/* ---------- 4. D'où vient un chiffre (chapitre de nuit, épinglé sur grand écran) ---------- */
.trace__stage { position: relative; padding-block: var(--section); }
.trace__inner { display: grid; gap: clamp(28px, 5vh, 56px); }
.trace__head { display: grid; gap: 14px; }
.trace__head .label { margin: 0; color: var(--glint); }
.trace__head .h2 { color: var(--on-night); }
.trace__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gap); align-items: center; }
.trace__fig { grid-column: 1 / span 5; display: grid; gap: 10px; margin: 0; }
.trace__fig svg { width: 100%; max-width: 440px; height: auto; overflow: visible; }
.trace__fig figcaption { display: flex; justify-content: space-between; gap: 12px; max-width: 440px; color: var(--on-night-3); }
.trace__side { grid-column: 7 / span 6; display: grid; gap: 22px; }
.trace__rules { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--night-line); }
.trace__rule { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--night-line); color: var(--on-night-2); }
.trace__rule p { margin: 0; font-size: 0.9375rem; line-height: 1.55; transition: color 0.5s; }
.trace__rule b { font-weight: 600; color: var(--on-night); transition: color 0.5s; }
.trace__n { font: 500 0.75rem/1.9 var(--f-mono); color: var(--glint); transition: color 0.5s, text-shadow 0.5s; }
.trace__end { margin: 0; padding: 18px 20px; border: 1px solid rgba(60, 207, 234, 0.5); background: rgba(60, 207, 234, 0.06); box-shadow: 7px 7px 0 rgba(60, 207, 234, 0.18); color: var(--on-night-2); transition: opacity 0.6s, transform 0.8s var(--ease-out); }
.trace__end b { font-weight: 600; color: var(--on-night); }
/* Scène active (posée par collectivites.js) : les règles restent éteintes jusqu'à leur moment dans le schéma */
.trace.is-live .trace__rule:not(.is-on) p, .trace.is-live .trace__rule:not(.is-on) b, .trace.is-live .trace__rule:not(.is-on) .trace__n { color: var(--on-night-3); }
.trace.is-live .trace__rule.is-on .trace__n { text-shadow: 0 0 14px rgba(60, 207, 234, 0.6); }
.trace.is-live .trace__end:not(.is-on) { opacity: 0.2; transform: translateY(10px); }

/* Grand écran assez haut : la scène tient dans l'écran, le schéma prend toute la hauteur disponible */
@media (min-width: 1100px) and (min-height: 740px) {
  .trace__stage { height: 100vh; height: 100svh; padding-block: calc(var(--nav-h) + clamp(20px, 4vh, 48px)) clamp(24px, 5vh, 56px); }
  .trace__inner { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  .trace__body { min-height: 0; align-items: stretch; }
  .trace__fig { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .trace__fig svg { width: 100%; max-width: none; height: 100%; }
  .trace__fig figcaption { max-width: none; }
  .trace__side { align-self: center; }
}
@media (max-width: 760px) { .trace__fig, .trace__side { grid-column: 1 / -1; } }

/* Le schéma, sur la nuit */
.tr text { font: 500 12px var(--f-mono); fill: var(--on-night-2); }
.tr text.s { font-size: 11px; }
.tr .t-hi { fill: var(--on-night); }
.tr .t-sig { fill: var(--glint); }
.tr .t-no { fill: #F0A585; }
.tr .t-inv { fill: var(--night); }
.tr .t-mute { fill: var(--on-night-3); }
.tr .n-box { fill: var(--night-2); stroke: var(--on-night-3); stroke-width: 1.5; }
.tr .n-code { fill: var(--night-2); stroke: var(--glint); stroke-width: 2; }
.tr .n-flash { fill: none; stroke: var(--halo); stroke-width: 4; opacity: 0; } /* ne sert qu'au passage de la mise à jour */
.tr .n-badge { fill: var(--halo); }
.tr .n-tick { fill: none; stroke: var(--night); stroke-width: 1.8; }
.tr .n-ia { fill: none; stroke: var(--on-night-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.tr .n-line { fill: none; stroke: var(--on-night-3); stroke-width: 1.5; }
.tr .n-sig { fill: none; stroke: var(--glint); stroke-width: 1.5; }
.tr .n-no { fill: none; stroke: #F0A585; stroke-width: 2; }
.tr .n-no-dash { fill: none; stroke: #F0A585; stroke-width: 1.5; stroke-dasharray: 3 3; }
.tr .n-chip { fill: var(--glint); }
.tr .n-frag { fill: url(#hatch-night); stroke: #F0A585; stroke-width: 1.5; }
.tr .n-rec { fill: var(--on-night-3); }
.tr .n-rec-hi { fill: var(--halo); filter: drop-shadow(0 0 4px var(--glint)); }
.tr .n-trace { fill: none; stroke: var(--halo); stroke-width: 3; filter: drop-shadow(0 0 6px var(--glint)); }
.tr .n-pulse { fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.08 2; stroke-dashoffset: 0.08; filter: drop-shadow(0 0 5px var(--glint)); }
.tr .draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* La note : une page claire posée sur la nuit */
.tr .p-sheet { fill: var(--paper); }
.tr .p-ink { fill: var(--ink); }
.tr .p-mid { fill: var(--ink-3); }
.tr .p-sig { fill: var(--signal); }
.tr .p-line { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.tr .p-ghost { fill: none; stroke: var(--line-strong); stroke-width: 1.2; stroke-dasharray: 3 3; }
.tr .p-no { fill: rgba(180, 71, 31, 0.06); stroke: var(--friction); stroke-width: 1.5; }
.rm .tr .k-qghost { visibility: hidden; } /* état final sans animation : la question est déjà rédigée */
.tr text.p-t { fill: var(--ink-2); }
.tr text.p-t-sig { fill: var(--signal-ink); }
.tr text.p-t-ok { fill: var(--ok); }
.tr text.p-t-no { fill: var(--friction); }

/* ---------- 5. Déjà en place ---------- */
.pilot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--gap); align-items: start; }
.pilot__text { grid-column: 1 / span 6; display: grid; gap: 20px; }
.pilot__text > p { margin: 0; color: var(--ink-2); }
.pilot__text > p:first-child { color: var(--ink); font-size: var(--t-lead); line-height: 1.55; }
.pilot__fig { grid-column: 8 / span 5; margin: 7px; padding: 16px 16px 12px; background: var(--white); }
.pilot__fig svg { width: 100%; height: auto; overflow: visible; }
.pilot__fig figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
@media (max-width: 960px) { .pilot__text, .pilot__fig { grid-column: 1 / -1; } .pilot__fig { max-width: 520px; } }

/* ---------- 6. Une démarche par paliers ---------- */
.paliers__foot { display: grid; gap: 12px; margin-top: 28px; padding: 16px 18px; border: 1px dashed var(--ink); background: var(--white); }
.paliers__foot p { margin: 0; }