/* ===========================================================================
   Chartres Nuisibles — Direction « Le Faisceau »
   Hero + bloc 4 activités. Namespacé .fsc-* pour cohabiter avec main.css.
   =========================================================================== */
:root{
    --fsc-bitume:#131311;
    --fsc-graphite:#1e1e1b;
    --fsc-beton:#9a968c;
    --fsc-craie:#e4dfd2;
    --fsc-acier:#5c6b70;
    --fsc-faisceau:#f0a83a;
    --fsc-hair:rgba(154,150,140,.20);
    --fsc-disp:'Bricolage Grotesque','Geist',system-ui,sans-serif;
    --fsc-mono:'IBM Plex Mono',ui-monospace,monospace;
}

.fsc-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ---------- HERO ---------- */
.fsc-hero{position:relative;height:84vh;min-height:560px;overflow:hidden;background:var(--fsc-bitume);border-bottom:1px solid var(--fsc-hair)}
.fsc-hero-bg{position:absolute;inset:-6% -2%;background-size:cover;background-position:50% 42%;filter:brightness(.72) contrast(1.04) saturate(1.02);will-change:transform}
.fsc-hero-veil{position:absolute;inset:0;background:
    linear-gradient(180deg, rgba(19,19,17,.5) 0%, rgba(19,19,17,.12) 34%, rgba(19,19,17,.72) 100%),
    linear-gradient(90deg, rgba(19,19,17,.78) 0%, rgba(19,19,17,0) 62%)}
.fsc-hero-grid{position:absolute;inset:0;opacity:.14;background-image:linear-gradient(90deg,var(--fsc-hair) 1px,transparent 1px);background-size:calc(100%/12) 100%;will-change:transform}
.fsc-hero-inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(56px,8vh,104px)}
.fsc-kicker{font-family:var(--fsc-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fsc-craie);margin:0 0 22px}
.fsc-title{font-family:var(--fsc-disp);font-weight:800;text-transform:uppercase;font-size:clamp(2.8rem,9vw,7rem);line-height:.9;letter-spacing:-.035em;color:var(--fsc-craie);margin:0;max-width:14ch}
.fsc-line{display:block;overflow:hidden}
.fsc-line i{display:block;font-style:normal;transform:translateY(105%);animation:fsc-mask .9s cubic-bezier(.16,.9,.3,1) forwards}
.fsc-line:nth-child(2) i{animation-delay:.1s}
.fsc-line:nth-child(3) i{animation-delay:.2s}
@keyframes fsc-mask{to{transform:translateY(0)}}
.fsc-sub{font-family:var(--f-body,system-ui);margin:26px 0 0;max-width:52ch;color:var(--fsc-beton);font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.55}
.fsc-sub b{color:var(--fsc-craie);font-weight:500}

/* ---------- BLOC 4 ACTIVITÉS ---------- */
.fsc-bands{display:flex;flex-direction:column;height:min(94vh,940px);background:var(--fsc-bitume)}
.fsc-band{position:relative;flex:1;overflow:hidden;display:flex;align-items:center;text-decoration:none;
    border-top:1px solid rgba(0,0,0,.55);transition:flex-grow .4s cubic-bezier(.2,.75,.15,1)}
.fsc-band:first-child{border-top:0}
.fsc-bands:hover .fsc-band{flex-grow:.7}
.fsc-band:hover{flex-grow:2.6}
.fsc-band-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03);
    filter:brightness(.88) contrast(1.03) saturate(1.04);transition:filter .5s ease,transform .5s ease}
.fsc-band:hover .fsc-band-bg{filter:brightness(1.05) contrast(1.03) saturate(1.07);transform:scale(1.07)}
/* Images déjà travaillées en basse lumière (« Le Faisceau ») : on ne les noircit plus */
.fsc-band-bg--graded{filter:brightness(1) contrast(1.02) saturate(1.02)}
.fsc-band:hover .fsc-band-bg--graded{filter:brightness(1.1) contrast(1.02) saturate(1.04)}
.fsc-band-none{position:absolute;inset:0;background:var(--fsc-graphite);
    background-image:linear-gradient(var(--fsc-hair) 1px,transparent 1px),linear-gradient(90deg,var(--fsc-hair) 1px,transparent 1px);background-size:40px 40px;opacity:.92}
.fsc-band-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;pointer-events:none}
.fsc-band:hover .fsc-band-video{opacity:1}
.fsc-band-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,19,17,.85) 0%,rgba(19,19,17,.28) 56%,rgba(19,19,17,.5) 100%)}
.fsc-band-row{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:flex-start;gap:clamp(16px,2.5vw,30px);padding:0 clamp(20px,4vw,48px)}
.fsc-band-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.fsc-band-idx{font-family:var(--fsc-mono);font-size:.66rem;letter-spacing:.12em;color:var(--fsc-acier);flex:none;align-self:flex-start;padding-top:4px}
.fsc-band-name{font-family:var(--fsc-disp);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,4.6vw,3.6rem);line-height:.9;letter-spacing:-.03em;color:var(--fsc-craie);
    transition:transform .4s cubic-bezier(.2,.75,.15,1)}
.fsc-band:hover .fsc-band-name{transform:translateX(10px)}
.fsc-band-line{font-family:var(--fsc-mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;opacity:.9;white-space:normal;text-shadow:0 1px 10px rgba(0,0,0,.65)}
.fsc-band:hover .fsc-band-line{opacity:1}
.fsc-band-act{font-family:var(--fsc-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fsc-faisceau);
    opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s;white-space:nowrap;flex:none;margin-left:auto}
.fsc-band:hover .fsc-band-act{opacity:1;transform:translateX(0)}
.fsc-band-rule{position:absolute;left:clamp(20px,4vw,48px);bottom:0;height:2px;width:0;background:var(--fsc-faisceau);transition:width .45s cubic-bezier(.2,.75,.15,1)}
.fsc-band:hover .fsc-band-rule{width:clamp(120px,22vw,360px)}

@media(max-width:820px){
    .fsc-bands{height:auto}
    .fsc-band{min-height:24vh}
    .fsc-bands:hover .fsc-band,.fsc-band:hover{flex-grow:1}
    .fsc-band-bg{filter:brightness(.72) contrast(1.05) saturate(1.04)}
    .fsc-band-line{white-space:normal}
    .fsc-band-act{display:none}
    .fsc-band-name{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
    .fsc-line i{animation:none;transform:none}
    .fsc-hero-bg,.fsc-hero-grid{transform:none!important}
}