/* ============ page Street Food ============ */
.sf-hero{position:relative;overflow:hidden;padding:clamp(150px,15vw,232px) 0 clamp(70px,7vw,110px);background:radial-gradient(ellipse 34% 38% at 28% 42%,rgba(150,90,214,.28) 0%,transparent 72%),radial-gradient(ellipse 44% 50% at 88% 58%,rgba(160,20,64,.24) 0%,transparent 70%),linear-gradient(122deg,#0e0618 0%,#15071f 44%,#240b34 78%,#310d42 100%)}
.sf-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);gap:clamp(34px,4.4vw,76px);align-items:center}
.sf-h1{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(2.9rem,7.2vw,7.6rem);line-height:.96;letter-spacing:-.012em;margin:0;font-weight:400}
.sf-h1 .accent{color:var(--violet)}
.sf-kicker{display:flex;flex-direction:column;gap:5px;margin:clamp(22px,2.4vw,32px) 0 0;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(15px,1.5vw,22px);line-height:1.2;letter-spacing:.04em;color:var(--off)}
.sf-kicker b{color:var(--violet-lt);font-weight:400}
.sf-hero-photo{position:relative;border-radius:clamp(14px,1.5vw,22px);overflow:hidden;border:1px solid rgba(150,90,214,.22);box-shadow:0 46px 84px -52px rgba(0,0,0,.95);aspect-ratio:4/5}
.sf-hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sf-hero-photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(11,4,19,.6) 0%,transparent 46%)}
.sf-hero-can{position:absolute;right:-6%;bottom:-4%;width:34%;z-index:3;filter:drop-shadow(0 26px 44px rgba(0,0,0,.7))}
.sf-hero-can img{width:100%;height:auto;display:block}

/* manifeste */
.sf-pillars{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(26px,3vw,40px)}
.sf-pillar{display:inline-flex;align-items:center;padding:12px 24px;border-radius:100px;border:1px solid rgba(150,90,214,.3);font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(13px,1.15vw,17px);letter-spacing:.06em;color:var(--off-dim);transition:border-color .3s ease,color .3s ease}
.sf-pillar:hover{border-color:var(--violet-lt);color:var(--off)}
.sf-manifest{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34%);gap:clamp(30px,4vw,72px);align-items:center}
.sf-manifest-can{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(150,90,214,.2);background:radial-gradient(ellipse 60% 56% at 50% 44%,rgba(150,90,214,.22),transparent 74%),#170822;aspect-ratio:10/13;padding:clamp(22px,2.6vw,40px)}
.sf-manifest-can.is-scene{padding:0;aspect-ratio:1/1;background:#0e0618}
.sf-manifest-can.is-scene img{padding:0;object-fit:cover;filter:none}
.sf-manifest-can img{position:absolute;inset:0;width:100%;height:100%;padding:inherit;box-sizing:border-box;object-fit:contain;display:block;filter:drop-shadow(0 24px 38px rgba(0,0,0,.55))}

/* cartes (spots, stories, visages, events) */
.sf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.sf-card{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;text-decoration:none;border:1px solid rgba(150,90,214,.2);background:linear-gradient(180deg,#1d0a2c,#15071f);transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s ease,box-shadow .32s ease}
.sf-card:hover,.sf-card:focus-visible{transform:translateY(-4px);border-color:rgba(164,92,246,.48);box-shadow:0 28px 52px -32px rgba(150,90,214,.5)}
.sf-shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:radial-gradient(ellipse 62% 56% at 50% 44%,rgba(150,90,214,.18),transparent 72%),#170822;display:block}
.sf-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .34s cubic-bezier(.2,.8,.2,1),filter .34s ease}
.sf-card:hover .sf-shot img{transform:scale(1.025);filter:brightness(1.06)}
.sf-shot image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;color:rgba(247,244,248,.55)}
.sf-shot::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(21,7,31,.9) 0%,rgba(21,7,31,.2) 38%,transparent 66%)}
.sf-flag{position:absolute;left:14px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:100px;background:rgba(14,6,24,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(212,175,98,.5);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.sf-flag-v{border-color:rgba(164,92,246,.5);color:var(--violet-lt)}
.sf-body{position:relative;z-index:2;margin-top:-30px;padding:0 clamp(18px,1.9vw,24px) clamp(22px,2.3vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.sf-kind{font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--violet-lt)}
.sf-body h4{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(18px,1.6vw,23px);line-height:1.06;letter-spacing:.03em;color:var(--off);font-weight:400}
.sf-meta{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--off-faint)}
.sf-body p{font-size:14.5px;line-height:1.58;color:var(--off-faint)}
.sf-go{margin-top:auto;padding-top:15px;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet-lt);opacity:.6;transition:opacity .32s ease,color .32s ease;background:none;border:none;cursor:pointer;font-family:'Manrope',sans-serif;padding-left:0}
.sf-go svg{width:14px;height:14px;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.sf-card:hover .sf-go{opacity:1;color:#fff}
.sf-card:hover .sf-go svg{transform:translateX(4px)}
.sf-card-flag{border-color:rgba(164,92,246,.42);background:linear-gradient(180deg,#2a0c3d,#170822)}
.sf-card-flag .sf-go{opacity:1}
.sf-note{margin-top:clamp(20px,2.2vw,28px);font-size:13.5px;line-height:1.6;color:var(--off-faint)}

/* stories : format éditorial large */
.sf-stories{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.sf-story{position:relative;display:flex;flex-direction:column;gap:13px;padding:clamp(24px,2.6vw,34px);border-radius:18px;border:1px solid rgba(150,90,214,.2);background:linear-gradient(180deg,#1b0929,#150720);transition:border-color .3s ease,transform .3s ease}
.sf-story:hover{border-color:rgba(164,92,246,.42);transform:translateY(-3px)}
.sf-story-num{font-family:'Anton',sans-serif;font-size:clamp(26px,2.6vw,38px);line-height:1;letter-spacing:.02em;color:rgba(164,92,246,.34)}
.sf-story h4{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(18px,1.6vw,24px);line-height:1.1;letter-spacing:.02em;color:var(--off);font-weight:400}
.sf-story p{font-size:14.5px;line-height:1.62;color:var(--off-dim)}
.sf-soon{margin-top:auto;padding-top:14px;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--off-faint)}

/* bande packaging */
.sf-band{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(150,90,214,.2);display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);align-items:stretch;background:linear-gradient(120deg,#1c0a2a,#150720)}
.sf-band-img{position:relative;min-height:clamp(240px,26vw,360px);overflow:hidden}
.sf-band-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sf-band-img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,rgba(21,7,31,.75) 86%,rgba(21,7,31,.96) 100%)}
.sf-band-body{padding:clamp(26px,3.2vw,52px);display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,1.6vw,20px)}
.sf-band-body h3{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(24px,3.2vw,48px);line-height:1;letter-spacing:-.004em;color:var(--off);font-weight:400}
.sf-band-body h3 em{font-style:normal;color:var(--violet)}
.sf-band-body p{font-size:clamp(15px,1.4vw,18px);line-height:1.7;color:var(--off-dim);max-width:52ch}

/* devenir un spot */
.sf-join{background:radial-gradient(ellipse 36% 44% at 70% 46%,rgba(150,90,214,.26),transparent 74%),linear-gradient(140deg,#150720,#250b36 74%,#320d44)}
.sf-join-h{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(2.4rem,5.8vw,6rem);line-height:.98;letter-spacing:-.01em;margin:0;font-weight:400}
.sf-join-h .accent{color:var(--violet)}
.sf-look{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(150,90,214,.16);margin-top:clamp(40px,4.6vw,72px);border-radius:16px;overflow:hidden}
.sf-look-item{background:#170822;padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:10px}
.sf-look-item b{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(15px,1.35vw,20px);letter-spacing:.045em;color:var(--off);font-weight:400}
.sf-look-item span{font-size:14.5px;line-height:1.6;color:var(--off-dim)}

@media(max-width:1080px){
  .sf-grid,.sf-stories{grid-template-columns:repeat(2,1fr)}
  .sf-look{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:920px){
  .sf-hero-grid,.sf-manifest{grid-template-columns:1fr;gap:34px}
  .sf-hero{padding-top:clamp(110px,20vw,160px)}
  .sf-hero-can{width:28%;right:2%;bottom:-2%}
  .sf-band{grid-template-columns:1fr}
  .sf-band-img{min-height:min(42vh,300px)}
  .sf-band-img::after{background:linear-gradient(0deg,rgba(21,7,31,.94) 0%,rgba(21,7,31,.26) 34%,transparent 64%)}
}
@media(max-width:640px){
  .sf-grid,.sf-stories,.sf-look{grid-template-columns:1fr}
  .sf-hero-can{display:none}
}

/* --- univers éditoriaux --- */
.sf-card-univ{cursor:pointer}
.sf-card-univ:focus-visible{outline:2px solid var(--violet-lt);outline-offset:3px}
.sf-card-univ[aria-pressed="true"]{border-color:rgba(164,92,246,.62);box-shadow:0 26px 50px -30px rgba(150,90,214,.55)}
.sf-card-univ[aria-pressed="true"] .sf-flag-v{background:var(--violet-ink);border-color:var(--violet);color:#fff}
.sf-univers{margin-top:clamp(22px,2.6vw,34px);padding:clamp(24px,2.8vw,38px);border-radius:20px;border:1px solid rgba(150,90,214,.24);background:linear-gradient(180deg,#1b0929,#150720)}
.sf-univers-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(18px,2vw,26px)}
.sf-univers-kicker{display:block;font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--violet-lt)}
.sf-univers-h{margin-top:10px;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(22px,2.6vw,38px);line-height:1.04;letter-spacing:.01em;color:var(--off);font-weight:400}
.sf-univers-body{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.sf-univers-empty{grid-column:1/-1;padding:clamp(22px,2.4vw,32px);border-radius:16px;border:1px dashed rgba(150,90,214,.32);text-align:center}
.sf-univers-empty p{font-size:15.5px;line-height:1.66;color:var(--off-faint);max-width:56ch;margin:0 auto}
.sf-univers-empty .cta-row{justify-content:center;flex-wrap:wrap}

/* --- ce qu'est un BYSUP Spot --- */
.sf-badge-explain{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:1px;background:rgba(150,90,214,.16);border-radius:20px;overflow:hidden;margin-bottom:clamp(22px,2.6vw,34px)}
.sf-badge-what,.sf-badge-can{background:#170822;padding:clamp(26px,3vw,42px)}
.sf-badge-lead{margin-top:14px;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(17px,1.7vw,25px);line-height:1.16;letter-spacing:.02em;color:var(--off)}
.sf-badge-p{margin-top:14px;font-size:15.5px;line-height:1.68;color:var(--off-dim)}
.sf-levels{margin-top:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:12px}
.sf-levels>div{display:flex;flex-direction:column;gap:5px;padding-left:15px;border-left:2px solid rgba(150,90,214,.42)}
.sf-levels b{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:.06em;color:var(--violet-lt);font-weight:400}
.sf-levels span{font-size:14px;line-height:1.55;color:var(--off-faint)}
.sf-can-list{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:13px}
.sf-can-list li{display:flex;flex-direction:column;gap:4px}
.sf-can-list b{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:.06em;color:var(--off);font-weight:400}
.sf-can-list span{font-size:14.5px;line-height:1.55;color:var(--off-dim)}
.sf-can-note{margin-top:18px;padding-top:14px;border-top:1px solid rgba(150,90,214,.2);font-size:13px;color:var(--off-faint)}

/* --- recommandation communautaire --- */
.sf-reco-band{margin-top:clamp(28px,3.2vw,46px);padding:clamp(22px,2.6vw,34px);border-radius:18px;border:1px dashed rgba(150,90,214,.32);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sf-reco-h{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(19px,2vw,28px);line-height:1.08;letter-spacing:.02em;color:var(--off);font-weight:400}
.sf-reco-p{margin-top:9px;font-size:15px;line-height:1.6;color:var(--off-faint)}

/* --- compléments formulaire --- */
.sf-more{margin-top:clamp(16px,1.8vw,22px);border-top:1px solid rgba(150,90,214,.2);padding-top:clamp(16px,1.8vw,22px)}
.sf-more summary{cursor:pointer;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-lt);list-style:none}
.sf-more summary::-webkit-details-marker{display:none}
.sf-more summary::before{content:'+ ';font-family:'Anton',sans-serif}
.sf-more[open] summary::before{content:'– '}
.sf-more .fields{margin-top:18px}

@media(max-width:1080px){.sf-univers-body{grid-template-columns:repeat(2,1fr)}.sf-badge-explain{grid-template-columns:1fr}}
@media(max-width:640px){.sf-univers-body{grid-template-columns:1fr}.sf-reco-band{flex-direction:column;align-items:flex-start}}

/* --- portraits à venir --- */
.sf-portrait .sf-shot{position:relative;overflow:hidden}
.sf-portrait-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 6%;display:block;transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .38s ease}
.sf-portrait:hover .sf-portrait-img{transform:scale(1.025);filter:brightness(1.05)}
.sf-soon{position:absolute;left:14px;top:14px;z-index:3;padding:6px 13px;border-radius:100px;background:rgba(14,6,24,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(164,92,246,.42);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--violet-lt);opacity:0;transition:opacity .3s ease}
.sf-portrait.is-soon .sf-soon{opacity:1}
.sf-soon-hint{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;background:linear-gradient(0deg,rgba(14,6,24,.9),rgba(14,6,24,0));font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,248,.82);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.sf-soon-hint svg{width:13px;height:13px}
.sf-portrait.is-soon:hover .sf-soon-hint,.sf-portrait.is-soon:focus-within .sf-soon-hint{opacity:1;transform:translateY(0)}
@media(max-width:640px){.sf-portrait-img{object-position:50% 5%}}

.sf-card .sf-go+.sf-go-sub{margin-top:11px;padding-top:11px;border-top:1px solid rgba(150,90,214,.2);color:var(--off-faint);font-size:11.5px}
.sf-card .sf-go-sub:hover{color:var(--violet-lt)}