/* BANDES (mag-item) */
.hub{max-width:1100px;margin:0 auto 18px;font:700 clamp(22px,3.6vw,38px) var(--ff);text-transform:uppercase;letter-spacing:-.02em}
.hub span{color:var(--n)}
.sub{max-width:1100px;margin:-8px auto 22px;color:var(--mut)}
.bands{display:flex;flex-direction:column;gap:8px;height:min(560px,76vh);max-width:1100px;margin:0 auto}
.mag{flex:1;min-height:0;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:6px;cursor:pointer;display:flex;align-items:center;padding:0 26px;transition:flex .6s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;isolation:isolate}
.mag .bgi{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 80% 50%,hsl(var(--h) 80% 35%/.55),transparent 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 36px),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 36px),var(--glass);filter:grayscale(.7) brightness(.7);transition:filter .5s,transform .8s;transform:scale(1.05)}
.mag:hover .bgi,.mag:focus-within .bgi,.mag.open .bgi{filter:none;transform:scale(1)}
.mag:hover,.mag:focus-within,.mag.open{flex:4.2;border-color:var(--n);box-shadow:0 0 36px rgba(139,92,246,.4)}
.mag .num{font:12px var(--fm);color:var(--m);margin-right:20px;align-self:flex-start;margin-top:16px}
.mag:not(:hover):not(.open):not(:focus-within) .num{align-self:center;margin-top:0}
.tg{flex:1}
.tg h3{font:700 clamp(15px,2.4vw,24px) var(--ff);text-transform:uppercase;letter-spacing:.02em}
.tg p{color:var(--mut);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s,opacity .4s,margin .4s;max-width:620px}
.mag:hover .tg p,.mag:focus-within .tg p,.mag.open .tg p{max-height:160px;opacity:1;margin-top:8px}
.go{width:44px;height:44px;border:1px solid var(--n);border-radius:50%;background:rgba(139,92,246,.2);color:#fff;cursor:pointer;display:grid;place-items:center;opacity:0;transition:.3s;font:20px var(--fb);flex-shrink:0}
.go:hover{background:var(--m);transform:rotate(45deg)}
.mag:hover .go,.mag:focus-within .go,.mag.open .go{opacity:1}
#projets .bands{height:min(520px,72vh)}


a.go{text-decoration:none}
/* Mode liste : pour beaucoup de projets (hauteur fixe par bande, la page défile) */
.bands.list{height:auto}
.bands.list .mag{flex:none;height:84px;transition:height .55s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.bands.list .mag:hover,.bands.list .mag:focus-within,.bands.list .mag.open{height:210px}
.page-in{min-height:100vh;padding-top:120px;animation:pg .5s ease}
@keyframes pg{from{opacity:0;transform:translateY(18px)}}
.back{display:inline-block;color:var(--n);font:13px var(--fm);text-decoration:none;margin:0 auto 20px}