/* ============================================================
   Schéma des 4 couches, disposition « bandes ».
   Courant : variante B, convergence des 5 fils en un seul.
   Utilisé par sme-schema (propositions).html et par la page SME.
   ============================================================ */
#eco{position:relative;display:flex;flex-direction:column}
.eco__layer{position:relative;width:100%;margin:0 auto;padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,30px);border-radius:20px;background:var(--surface-1);opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.eco__layer.is-live{opacity:1;transform:none}
.eco__head{margin-bottom:clamp(16px,2vw,22px)}
.eco__head h3{font-family:var(--font-sans);font-weight:900;font-size:clamp(19px,1.9vw,25px);line-height:1.14;color:#fff;margin:0}
.eco__head p{font-family:var(--font-body);font-weight:300;font-size:15px;line-height:1.62;color:var(--text-tertiary);margin:8px 0 0;max-width:74ch}

/* ---- courant entre les couches ---- */
.eco__bus{position:relative;height:clamp(64px,7vw,96px);width:100%;opacity:0;transition:opacity .6s ease}
.eco__bus.is-live{opacity:1}
.eco__bus svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.eco__bus .cw{fill:none;stroke:rgba(51,197,255,.16);stroke-width:2;stroke-linecap:round}
.eco__bus .cp{fill:none;stroke:#33C5FF;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:70 1000;will-change:stroke-dashoffset;animation-name:eco-flow;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:paused}
.eco__bus.is-live .cp{animation-play-state:running}
@keyframes eco-flow{from{stroke-dashoffset:1070}to{stroke-dashoffset:0}}
.eco__bus .cvia{fill:#0E1B2A;stroke:#33C5FF;stroke-width:1.8;animation:eco-via 2.2s ease-in-out infinite}
@keyframes eco-via{0%,100%{fill:#0E1B2A}50%{fill:#33C5FF}}

/* ---- couche projets ---- */
.eco__projets{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:clamp(12px,1.6vw,18px)}
.ecop{display:block;border-radius:14px;overflow:hidden;background:var(--surface-2);text-decoration:none;transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s}
.ecop:hover{transform:translateY(-3px);background:var(--surface-3)}
.ecop img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.ecop__b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px}
.ecop__b b{font-family:var(--font-sans);font-weight:800;font-size:15px;color:#fff;line-height:1.2}
.ecop__b span{font-family:var(--font-body);font-weight:300;font-size:13px;color:var(--text-tertiary)}

/* ---- couche modules ---- */
/* ---- couche modules · F3 cascade diagonale ---- */
.eco__modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(196px,100%),1fr));gap:10px}
.ecom{text-align:left;display:flex;flex-direction:column;gap:3px;padding:13px 15px;border:0;border-radius:12px;background:var(--surface-2);cursor:pointer;opacity:0;transform:translateY(16px);transition:background .2s,transform .42s cubic-bezier(.16,1,.3,1),opacity .42s ease}
.eco__layer.is-live .ecom{opacity:1;transform:none;transition-delay:calc(var(--i) * 26ms)}
.ecom b{font-family:var(--font-sans);font-weight:700;font-size:15px;color:#fff;line-height:1.2}
.ecom span{font-family:var(--font-mono);font-size:11.5px;color:var(--text-tertiary)}
.ecom:hover{background:var(--bleu-clair);transform:translateY(-2px);transition-delay:0s}
.ecom:hover b,.ecom:hover span{color:var(--noir-skytale)}
.ecoload{margin-top:14px;width:100%;text-align:left;border:0;border-radius:14px;background:var(--surface-2);padding:16px 18px;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;transition:background .2s}
.ecoload:hover{background:var(--surface-3)}
.ecoload b{font-family:var(--font-sans);font-weight:800;font-size:16px;color:var(--bleu-clair)}
.ecoload__p{display:flex;flex-wrap:wrap;gap:8px 18px}
.ecoload__p i{font-family:var(--font-body);font-weight:300;font-style:normal;font-size:13.5px;color:var(--text-tertiary)}

/* ---- couche librairies ---- */
.eco__tree{position:relative}
.eco__edges{position:absolute;left:0;top:0;pointer-events:none;z-index:0;overflow:visible}
.ecoedge{fill:none;stroke:rgba(51,197,255,.34);stroke-width:1.6;transition:stroke .25s,stroke-width .25s}
.ecoedge.is-on{stroke:#33C5FF;stroke-width:2.6}
.ecoedge.is-off{stroke:rgba(51,197,255,.08)}
.eco__tier{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:clamp(26px,3.4vw,44px)}
.eco__tier:last-child{margin-bottom:0}
.ecol{border:0;border-radius:12px;background:var(--surface-2);padding:11px 15px;cursor:pointer;display:flex;flex-direction:column;gap:2px;text-align:left;transition:background .2s,transform .2s cubic-bezier(.16,1,.3,1),opacity .25s}
.ecol b{font-family:var(--font-sans);font-weight:700;font-size:14.5px;color:#fff}
.ecol span{font-family:var(--font-body);font-weight:300;font-size:12px;color:var(--text-tertiary)}
.ecol:hover{background:var(--surface-3);transform:translateY(-2px)}
.ecol.is-plugin b{color:var(--mangue)}
.ecol.is-ext b{color:var(--text-secondary);font-weight:600}
.ecol.is-on{background:var(--bleu-clair)}
.ecol.is-on b,.ecol.is-on span{color:var(--noir-skytale)}
.ecol.is-off,.ecom.is-off{opacity:.3}
.eco__ext{margin-top:clamp(24px,3vw,34px)}
.eco__ext>p{font-family:var(--font-sans);font-weight:600;font-size:13.5px;color:var(--text-tertiary);margin:0 0 10px}
.eco__extrow{display:flex;flex-wrap:wrap;gap:10px}

/* ---- couche serveur ---- */
.eco__serveur{display:flex;flex-direction:column;gap:10px}
.ecos{border:0;border-radius:12px;background:var(--surface-2);padding:15px 18px;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;text-align:left;transition:background .2s}
.ecos b{font-family:var(--font-sans);font-weight:700;font-size:16px;color:#fff}
.ecos span{font-family:var(--font-body);font-weight:300;font-size:13.5px;color:var(--bleu-clair)}
.ecos:hover,.ecos.is-on{background:var(--surface-3)}

@media (prefers-reduced-motion: reduce){
  .eco__bus .cp,.eco__bus .cvia{animation:none}
  .eco__layer{opacity:1;transform:none;transition:none}
  .eco__bus{opacity:1}
  .ecom{opacity:1;transform:none;transition:none}
  .ecomodal,.ecomodal__p{transition:none}
}

/* ---- modale ---- */
/* ---- L1 · voile de nuit ---- */
.ecomodal{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px);background:rgba(8,17,25,.72);backdrop-filter:blur(4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .34s ease,visibility .34s}
.ecomodal[hidden]{display:none}
.ecomodal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.ecomodal__p{position:relative;width:min(620px,100%);max-height:86vh;overflow:auto;border-radius:24px;background:var(--surface-2);padding:clamp(24px,3.4vw,40px);transform:translateY(26px) scale(.965);transition:transform .48s cubic-bezier(.16,1,.3,1) .12s}
.ecomodal.is-open .ecomodal__p{transform:none}
.ecomodal__close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:50%;background:var(--surface-3);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.ecomodal__close:hover{background:var(--bleu-clair);color:var(--noir-skytale)}
.ecomodal [data-t]{font-family:var(--font-sans);font-weight:900;font-size:clamp(22px,2.4vw,30px);line-height:1.1;color:#fff;margin:0}
.ecomodal [data-n]{font-family:var(--font-mono);font-size:13px;color:var(--text-tertiary);margin:8px 0 0}
.ecomodal [data-d]{font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.7;color:var(--text-secondary);margin:18px 0 0}
.ecomodal [data-deps-wrap] p{font-family:var(--font-sans);font-weight:600;font-size:13px;color:var(--text-tertiary);margin:22px 0 10px}
.ecomodal [data-deps]{display:flex;flex-wrap:wrap;gap:8px}
.ecochip{font-family:var(--font-mono);font-size:12.5px;color:var(--text-secondary);background:var(--surface-3);border-radius:8px;padding:7px 11px}