/* BlackFox · affiches de marque, design graphique, chapitres numérotés et titres en écho */
.af{--cy:#22e4ff;--vi:#a855f7;--gr:#3dffa8;--rd:#ff2d55;--ln:rgba(255,255,255,.09);position:relative}
.af .af-k{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.22em;color:var(--cy);text-transform:uppercase}
.af h2{position:relative;z-index:1}
/* titres en écho : grand numéro répété trois fois, décalé au défilement */
.ech{position:absolute;top:-.18em;right:max(16px,4vw);z-index:0;pointer-events:none;font-family:'Space Grotesk',sans-serif;font-weight:700;
 font-size:clamp(120px,19vw,300px);line-height:.8;letter-spacing:-.06em;user-select:none}
.ech span{display:block;color:transparent;-webkit-text-stroke:1px rgba(34,228,255,.16);transform:translateY(calc(var(--e,0) * var(--i) * 1px))}
.ech span:first-child{-webkit-text-stroke:0;color:rgba(255,255,255,.035)}
.ech span+span{position:absolute;inset:0}
/* affiches : cartes inclinables */
.af-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px);margin-top:34px;perspective:1200px}
.af-card{position:relative;margin:0;border-radius:22px;overflow:hidden;background:#07080d;transform-style:preserve-3d;
 transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;
 box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -50px rgba(34,228,255,.45)}
.af-card:hover{box-shadow:0 0 0 1px rgba(34,228,255,.45),0 50px 110px -40px rgba(255,45,85,.45)}
.af-card img{display:block;width:100%;height:auto}
.af-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.14),transparent 45%);opacity:0;transition:opacity .4s}
.af-card:hover::after{opacity:1}
.af-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 20px 18px;background:linear-gradient(0deg,rgba(5,6,12,.95),rgba(5,6,12,.6) 55%,transparent)}
.af-card figcaption strong{display:block;font-size:19px;color:#fff;letter-spacing:-.01em}
.af-card figcaption span{display:block;margin-top:4px;font-size:14px;color:#c7cbe0}
.af-card a.af-zoom{position:absolute;inset:0;z-index:2}
/* bento design graphique */
.af-bento{display:grid;gap:16px;margin-top:34px;grid-template-columns:repeat(4,minmax(0,1fr));
 grid-auto-rows:190px;grid-template-areas:"hero hero a b" "hero hero c d" "e e f f"}
.af-t{position:relative;border-radius:20px;padding:22px;background:rgba(15,25,40,.45);border:1px solid rgba(80,255,180,.14);
 backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);transition:border-color .3s,transform .3s}
.af-t:hover{border-color:rgba(34,228,255,.45);transform:translateY(-3px)}
.af-t i{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--rd)}
.af-t b{display:block;margin:10px 0 6px;font-size:18px;color:#fff}
.af-t p{margin:0;font-size:14px;line-height:1.55;color:#a9afc4}
.af-hero{grid-area:hero;padding:0;overflow:hidden;background:#07080d}
.af-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.af-wide{display:flex;gap:18px;align-items:center;padding:0;overflow:hidden}
.af-wide img{width:42%;height:100%;align-self:stretch;object-fit:cover;object-position:50% 40%}
.af-wide div{padding:18px 18px 18px 0}
.af-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* chapitres numérotés (rail latéral) */
.af-rail-nav{position:fixed;left:18px;top:50%;z-index:60;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;
 font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.af-rail-nav a{display:flex;align-items:center;gap:10px;padding:5px 8px;border-radius:8px;color:rgba(255,255,255,.38);text-decoration:none;transition:color .3s}
.af-rail-nav a::before{content:"";width:14px;height:1px;background:currentColor;transition:width .35s}
.af-rail-nav a em{font-style:normal;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.af-rail-nav:hover a em,.af-rail-nav a.on em{opacity:1;transform:none}
.af-rail-nav a.on{color:var(--cy,#22e4ff)}.af-rail-nav a.on::before{width:28px}
.af-rail-nav a:focus-visible{outline:1px solid #22e4ff}
/* visionneuse */
.af-dlg{border:0;padding:0;background:transparent;max-width:min(92vw,900px);max-height:92vh}
.af-dlg::backdrop{background:rgba(3,4,8,.86);backdrop-filter:blur(6px)}
.af-dlg img{display:block;max-width:100%;max-height:88vh;border-radius:16px}
.af-dlg button{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(8,12,20,.7);color:#fff;font-size:18px;cursor:pointer}
/* bandeau d'accueil (expertises) */
.af-home{max-width:1180px;margin:46px auto 0;padding:0 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
@media(max-width:1180px){.af-rail-nav{display:none}}
@media(max-width:900px){.af-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
 .af-rail::-webkit-scrollbar{display:none}.af-card{scroll-snap-align:start}
 .af-bento{grid-template-columns:1fr;grid-auto-rows:auto;grid-template-areas:"hero" "a" "b" "c" "d" "e" "f"}.af-hero img{height:auto}.af-wide{flex-direction:column}.af-wide img{width:100%}.af-wide div{padding:0 18px 18px}
 .af-home{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.ech{font-size:34vw;opacity:.7}}
@media(prefers-reduced-motion:reduce){.af-card,.af-t{transition:none;transform:none!important}.ech span{transform:none}}