/* BlackFox · « Le design prend vie » (section#bfd) : fond noir uni, deux colonnes, maquette native sans calque */
.bfd{position:relative;margin:0;padding:clamp(96px,8vw,120px) 0 clamp(56px,8vw,112px);background:#000;box-shadow:0 0 0 100vmax #000;clip-path:inset(0 -100vmax);color:#fff;font-family:"Space Grotesk",system-ui,sans-serif;overflow-x:clip}
.bfd::before,.bfd::after{content:none}
.bfd-in{max-width:1320px;margin:0 auto;padding:0 clamp(18px,4vw,48px);display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:". shot" "txt shot" "tabs shot" "end shot" ". shot";
  grid-template-rows:1fr auto auto auto 1fr;column-gap:clamp(32px,5vw,80px);align-items:start}
.bfd-txt{grid-area:txt}
.bfd-tabs{grid-area:tabs}
.bfd-shot{grid-area:shot;align-self:center}
.bfd-end{grid-area:end}
.bfd-eye{margin:0 0 14px;font:500 12px/1.4 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:#9aa0a8}
.bfd h3{margin:0 0 18px;font-size:clamp(34px,4.2vw,60px);line-height:1.02;letter-spacing:-.03em;font-weight:700;color:#fff;background:none;filter:none;text-shadow:none}
.bfd-lead{margin:0 0 26px;max-width:440px;color:#c4c8ce;font-size:17px;line-height:1.6}
.bfd-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.bfd-tabs button{appearance:none;-webkit-appearance:none;cursor:pointer;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid #3a3d43;background:transparent;color:#e4e6ea;
  font:500 14px/1.2 "Space Grotesk",system-ui,sans-serif;transition:background-color .1s linear,color .1s linear,border-color .15s ease,transform .18s ease}
.bfd-tabs button:hover{border-color:#8a8f97;transform:translateY(-1px)}
.bfd-tabs button[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff;font-weight:600}
.bfd-tabs button:active{transform:translateY(0)}
.bfd-tabs button:focus-visible,.bfd-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.bfd-cta{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:14px 26px;border-radius:999px;border:1px solid #fff;background:#fff;color:#000;
  text-decoration:none;font-weight:600;font-size:16px;transition:transform .18s ease,background-color .18s ease,color .18s ease}
.bfd-cta span{transition:transform .18s ease}
.bfd-cta:hover{transform:translateY(-1px)}.bfd-cta:hover span{transform:translateX(3px)}
.bfd-note{margin:16px 0 0;max-width:400px;color:#8b9098;font-size:13px;line-height:1.5}
/* maquette : image native entière, aucun filtre, masque ni calque */
.bfd-shot{margin:0;min-width:0}
.bfd-frame{padding:8px;border:1px solid #2c2f34;border-radius:6px;background:#000;max-width:1296px}
.bfd-shot,.bfd-frame,.bfd-shot img{filter:none;-webkit-mask:none;mask:none;clip-path:none;mix-blend-mode:normal;backdrop-filter:none;opacity:1}
.bfd-shot::before,.bfd-shot::after,.bfd-frame::before,.bfd-frame::after{content:none;display:none}
.bfd-shot img[hidden]{display:none}
.bfd-shot img:not([hidden]){display:block}
.bfd-shot img{width:100%;max-width:1280px;height:auto;aspect-ratio:1280/800;object-fit:contain;transform:none;border-radius:0;background:none;box-shadow:none}
.bfd-shot figcaption{margin-top:12px;color:#9aa0a8;font-size:13px;line-height:1.4;letter-spacing:.01em}
@media (max-width:899px){
  .bfd-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "tabs" "shot" "end";grid-template-rows:auto}
  .bfd-tabs{margin-bottom:22px}
  .bfd-shot{margin-bottom:28px}
  .bfd-frame{padding:5px}
  .bfd-lead{font-size:16px}
}
@media (max-width:420px){.bfd-tabs button{padding:10px 14px;font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.bfd-tabs button,.bfd-cta,.bfd-cta span{transition:none}.bfd-tabs button:hover,.bfd-cta:hover,.bfd-cta:hover span{transform:none}}