/* ============================================================
   BOT FEST NANTES — STYLES PARTAGÉS  (V1.5)
   Utilise les variables définies dans tokens.css.
   Base · layout · en-tête · boutons · hero · sections · cartes ·
   badges · logos · contacts · timeline · FAQ · photos · pied.
   ============================================================ */

/* ---------- BASE / RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip; max-width:100%}
body{margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:var(--text-base); line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,legend{font-family:var(--font-display); line-height:var(--leading-tight); font-weight:var(--weight-black); margin:0}
p{margin:0}
a{color:var(--color-link); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
ul{margin:0}
:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm)}

/* ---------- LAYOUT ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--container-pad)}
.container--narrow{max-width:var(--container-narrow)}
.skip-link{position:absolute; left:var(--space-3); top:-3rem; background:var(--color-cta); color:#fff;
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-sm); z-index:100; transition:top .2s}
.skip-link:focus{top:var(--space-3); text-decoration:none}
.eyebrow{font-family:var(--font-body); font-weight:700; font-size:var(--text-sm);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--bf-secondary); margin:0 0 var(--space-3)}
.hidden{display:none}
.center{text-align:center}

/* ---------- EN-TÊTE ---------- */
.header{position:sticky; top:0; z-index:50; background:rgba(250,247,250,.92);
  backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--color-border)}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:68px; flex-wrap:nowrap}
.brand{display:flex; align-items:center; gap:var(--space-3); text-decoration:none; flex:none}
.brand:hover{text-decoration:none}
.brand__mark{width:40px; height:40px; border-radius:var(--radius-sm); background:#fff; border:1px solid var(--color-border);
  display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:800; flex:none;
  position:relative; overflow:hidden}
.brand__mark img{position:absolute; inset:2px; width:calc(100% - 4px); height:calc(100% - 4px); object-fit:contain; background:transparent}
.brand__name{font-family:var(--font-display); font-weight:800; font-size:var(--text-lg); color:var(--bf-ink); line-height:1}
.brand__sub{display:block; font-family:var(--font-body); font-weight:500; font-size:var(--text-xs);
  color:var(--color-text-muted); letter-spacing:.04em; margin-top:3px}
.nav{display:flex; align-items:center; gap:var(--space-5); min-width:0}
.nav a{color:var(--bf-ink); font-size:var(--text-sm); font-weight:600; white-space:nowrap}
.nav a:hover{color:var(--bf-accent); text-decoration:none}
.nav a[aria-current="page"]{color:var(--bf-accent); border-bottom:2px solid var(--bf-gold); padding-bottom:2px}
.header__cta{display:none; white-space:nowrap; flex:none}
.burger{display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer;
  padding:var(--space-2); border-radius:var(--radius-sm)}
.burger span{width:24px; height:2px; background:var(--bf-ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease}
.nav-wrap{display:none; min-width:0}

/* ---------- BOUTONS ---------- */
.btn{display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-body);
  font-weight:700; font-size:var(--text-base); padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-md); border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
  text-decoration:none; line-height:1.2}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--color-cta); color:var(--color-cta-text); box-shadow:0 6px 16px rgba(75,13,74,.22)}
.btn--primary:hover{background:var(--color-cta-hover); transform:translateY(-2px)}
.btn--accent{background:var(--color-badge); color:var(--color-badge-text); box-shadow:0 8px 20px rgba(228,0,90,.30)}
.btn--accent:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(228,0,90,.38)}
.btn--ghost{background:transparent; color:var(--color-dark-text); border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--outline{background:transparent; color:var(--color-cta); border-color:var(--color-cta)}
.btn--outline:hover{background:var(--color-cta); color:var(--color-cta-text)}

/* ---------- HERO (accueil) ---------- */
.hero{position:relative; color:var(--color-dark-text); overflow:hidden; padding:var(--space-8) 0 var(--space-9);
  background:
    radial-gradient(80% 120% at 80% -10%, rgba(228,0,90,.45), transparent 60%),
    radial-gradient(60% 90% at 0% 110%, rgba(255,122,168,.20), transparent 55%),
    linear-gradient(160deg, var(--bf-primary-700), var(--bf-primary) 65%)}
.hero__orb{position:absolute; top:-120px; right:-80px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(228,0,90,.30), transparent 62%);
  filter:blur(8px); pointer-events:none; animation:bf-float 7s ease-in-out infinite}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(80% 80% at 70% 20%, #000, transparent 75%)}
.hero__inner{position:relative; max-width:780px; animation:bf-rise .8s cubic-bezier(.22,.61,.36,1) both}
.hero .eyebrow{color:var(--bf-gold)}
.hero h1{font-size:var(--text-hero); color:#fff; margin:0 0 var(--space-4); letter-spacing:-.015em}
.hero h1 .accent{color:var(--bf-gold)}
.hero__lead{font-size:var(--text-xl); color:var(--color-dark-muted); max-width:44ch; margin:0 0 var(--space-3)}
.hero__date{display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-base); color:#fff;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill); margin:0 0 var(--space-6);
  backdrop-filter:blur(4px); flex-wrap:wrap}
.hero__date svg{color:var(--bf-gold)}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--space-3)}
.hero__agenda{display:inline-flex; align-items:center; gap:.45em; margin-top:var(--space-5);
  color:var(--bf-gold); font-weight:700; font-size:var(--text-sm)}
.hero__agenda svg{width:18px; height:18px}
.hero__agenda:hover{text-decoration:none; color:#fff}
.hero__wave{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:60px; display:block}

/* ---------- BANDEAU TITRE (pages internes) ---------- */
.page-head{position:relative; overflow:hidden; color:#fff; padding:var(--space-8) 0;
  background:
    radial-gradient(70% 120% at 90% -20%, rgba(228,0,90,.40), transparent 60%),
    linear-gradient(160deg, var(--bf-primary-700), var(--bf-primary))}
.page-head::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(80% 80% at 80% 0%, #000, transparent 75%)}
.page-head .container{position:relative}
.page-head .eyebrow{color:var(--bf-gold)}
.page-head h1{font-size:var(--text-4xl); color:#fff; margin:0 0 var(--space-3); letter-spacing:-.01em}
.page-head p{color:var(--color-dark-muted); max-width:56ch; margin:0; font-size:var(--text-lg)}

/* ---------- BANDEAU CHIFFRES ---------- */
.stats{background:var(--color-surface); border-bottom:1px solid var(--color-border)}
.stats__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); padding:var(--space-7) 0; position:relative}
.stat{text-align:center; padding:var(--space-4) var(--space-2); border-radius:var(--radius-md); transition:background .2s}
.stat:hover{background:var(--color-surface-alt)}
.stat__num{font-family:var(--font-display); font-weight:800; font-size:var(--text-4xl); line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg, var(--bf-primary), var(--bf-accent));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.stat__label{font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-2); font-weight:500}

/* ---------- SECTIONS ---------- */
.section{padding:var(--space-9) 0}
.section--tight{padding:var(--space-7) 0}
.section--alt{background:var(--color-surface-alt)}
.section--dark{background:linear-gradient(160deg, var(--bf-primary), var(--bf-primary-700)); color:#fff}
.section--dark h2{color:#fff}
.section--dark p{color:var(--color-dark-muted)}
.section__head{max-width:62ch; margin:0 0 var(--space-7)}
.section__head h2{font-size:var(--text-3xl); color:var(--bf-ink); margin:0 0 var(--space-3);
  position:relative; display:inline-block; padding-bottom:var(--space-3)}
.section__head h2::after{content:""; position:absolute; left:0; bottom:0; width:54px; height:4px;
  border-radius:var(--radius-pill); background:linear-gradient(90deg, var(--bf-accent), var(--bf-gold))}
.center .section__head h2::after,.center h2::after{left:50%; transform:translateX(-50%)}
.section__head p{color:var(--color-text-muted); font-size:var(--text-lg)}

/* ---------- CARTES ---------- */
.cards{display:grid; grid-template-columns:1fr; gap:var(--space-4)}
.card{position:relative; overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-6); transition:transform .2s ease, box-shadow .2s ease}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(var(--bf-accent), var(--bf-primary));
  transform:scaleY(0); transform-origin:top; transition:transform .25s ease}
.card:hover::before{transform:scaleY(1)}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.card__icon{width:48px; height:48px; border-radius:var(--radius-md); display:grid; place-items:center;
  background:#F6E9F5; color:var(--bf-primary); margin-bottom:var(--space-4);
  transition:transform .25s ease, background .25s ease, color .25s ease}
.card__icon svg{width:26px; height:26px}
.card:hover .card__icon{transform:scale(1.08) rotate(-3deg); background:var(--bf-primary); color:#fff}
.card h3{font-size:var(--text-xl); color:var(--bf-ink); margin:0 0 var(--space-2)}
.card p{color:var(--color-text-muted); font-size:var(--text-base)}
.card p + p{margin-top:var(--space-3)}
.card--featured{border:2px solid var(--bf-gold)}
/* La carte « tête d'affiche » a déjà sa signature dorée : on supprime la barre
   d'accent du survol (::before) qui doublonnait avec le contour doré. */
.card--featured::before{content:none}
.card--featured::after{content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 2px var(--bf-gold)}
.card__tag{display:inline-block; font-size:var(--text-xs); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#fff; background:var(--bf-accent);
  padding:3px 10px; border-radius:var(--radius-pill); margin-bottom:var(--space-3)}

/* ---------- BADGES ---------- */
.badge{display:inline-block; font-size:var(--text-sm); font-weight:700; padding:4px 12px; border-radius:var(--radius-pill); margin-bottom:var(--space-3)}
.badge--free{background:var(--color-badge); color:var(--color-badge-text)}
.badge--reg{background:#F6E9F5; color:var(--bf-primary-700)}
.badge--soft{background:var(--color-surface-alt); color:var(--bf-primary-700); border:1px solid var(--color-border)}

.link-more{display:inline-flex; align-items:center; gap:6px; font-weight:700; margin-top:var(--space-6); position:relative; color:var(--bf-accent)}
.link-more svg{width:18px; height:18px; transition:transform .2s}
.link-more::after{content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0;
  background:var(--bf-accent); transition:width .25s ease}
.link-more:hover{text-decoration:none}
.link-more:hover svg{transform:translateX(3px)}
.link-more:hover::after{width:100%}
.card .link-more{margin-top:var(--space-4)}

/* ---------- LOGOS PARTENAIRES ---------- */
.partner-group{margin-bottom:var(--space-7)}
.partner-group:last-child{margin-bottom:0}
.partner-group__title{font-size:var(--text-sm); font-weight:800; color:var(--bf-accent); text-transform:uppercase;
  letter-spacing:.1em; margin:0 0 var(--space-4); padding-bottom:var(--space-3); border-bottom:2px solid var(--color-border)}
.logos-grid{display:flex; flex-wrap:wrap; gap:var(--space-4)}
.logo-card{position:relative; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-4); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-2);
  width:158px; min-height:110px; text-align:center; transition:border-color .2s, box-shadow .2s, transform .2s;
  text-decoration:none; color:inherit}
.logo-card:hover{border-color:var(--bf-primary); box-shadow:var(--shadow-card); transform:translateY(-3px); text-decoration:none}
.logo-card img{width:118px; height:58px; object-fit:contain}
.logo-card .logo-name{font-size:var(--text-xs); color:var(--color-text-muted); font-weight:600}
.dl-badge{position:absolute; bottom:6px; right:7px; font-size:.62rem; background:var(--bf-primary); color:#fff;
  padding:2px 7px; border-radius:var(--radius-pill); font-weight:700; opacity:0; transition:opacity .2s}
.logo-card:hover .dl-badge{opacity:1}

/* ---------- CONTACTS ---------- */
.contacts{display:grid; grid-template-columns:1fr; gap:var(--space-5)}
.contact-card{background:var(--color-surface); border:1px solid var(--color-border); border-left:5px solid var(--bf-accent);
  border-radius:var(--radius-md); padding:var(--space-5) var(--space-6)}
.contact-card .role{font-size:var(--text-xs); font-weight:700; color:var(--bf-accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--space-2)}
.contact-card .name{font-size:var(--text-lg); font-weight:800; color:var(--bf-primary); margin-bottom:var(--space-3)}
.contact-card a{display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); color:var(--bf-ink); margin-top:6px}
.contact-card a:hover{color:var(--bf-accent)}
.reveal-wrap{display:flex; align-items:center; gap:var(--space-2); margin-top:6px; flex-wrap:wrap}
.reveal-label{font-size:var(--text-sm); color:var(--color-text-muted)}
.reveal-btn{background:var(--color-surface-alt); border:1px solid var(--color-border); color:var(--bf-ink);
  border-radius:var(--radius-sm); padding:4px 12px; font-size:var(--text-xs); font-weight:700; cursor:pointer; font-family:inherit; transition:background .2s}
.reveal-btn:hover{background:var(--color-border)}
.reveal-value{display:none; font-size:var(--text-sm); color:var(--bf-ink)}
.reveal-value.shown{display:inline}
.reveal-value a{color:var(--bf-ink)}
.reveal-value a:hover{color:var(--bf-accent)}

/* ---------- TIMELINE / PROGRAMME ---------- */
.day{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
  padding:var(--space-6); margin-bottom:var(--space-5)}
.day__title{display:flex; align-items:baseline; gap:var(--space-3); margin:0 0 var(--space-4); flex-wrap:wrap}
.day__title h3{font-size:var(--text-xl); color:var(--bf-ink)}
.day__title .tag{font-size:var(--text-xs); font-weight:700; color:#fff; background:var(--bf-accent); padding:3px 10px; border-radius:var(--radius-pill)}
.slot{display:flex; gap:var(--space-4); padding:var(--space-4) 0; border-top:1px solid var(--color-border)}
.slot:first-of-type{border-top:0}
.slot__time{font-family:var(--font-display); font-weight:700; color:var(--bf-accent); min-width:120px; flex:none}
.slot__txt h4{font-size:var(--text-base); color:var(--bf-ink); margin:0 0 4px}
.slot__txt p{color:var(--color-text-muted); font-size:var(--text-sm)}

/* ---------- FRISE DES ÉDITIONS ---------- */
.editions{display:grid; gap:var(--space-5)}
.edition{position:relative; overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-6); transition:transform .2s ease, box-shadow .2s ease}
.edition::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(var(--bf-accent), var(--bf-primary))}
.edition:hover{transform:translateY(-3px); box-shadow:var(--shadow-card)}
.edition--origin{border-style:dashed; background:var(--color-surface-alt)}
.edition--origin::before{background:linear-gradient(var(--bf-gold), var(--bf-primary-300))}
.edition__head{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin:0 0 var(--space-3)}
.edition__year{font-family:var(--font-display); font-weight:800; font-size:var(--text-2xl); color:var(--bf-primary); line-height:1}
.edition__num{font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:#fff; background:var(--bf-accent); padding:3px 11px; border-radius:var(--radius-pill)}
.edition__num--soft{background:var(--color-surface-alt); color:var(--bf-primary-700); border:1px solid var(--color-border)}
.edition__place{font-size:var(--text-sm); color:var(--color-text-muted); font-weight:600; margin-left:auto}
.edition__meta{display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0 0 var(--space-3)}
.edition__tag{font-size:var(--text-xs); font-weight:600; background:var(--color-surface-alt);
  border:1px solid var(--color-border); color:var(--bf-primary-700); padding:3px 10px; border-radius:var(--radius-pill)}
.edition p{color:var(--color-text-muted); font-size:var(--text-base)}
.edition__todo{color:var(--bf-accent); font-size:var(--text-xs); font-weight:600; margin-top:var(--space-2)}

/* logo « texte seul » (partenaire historique sans visuel) */
.logo-card--text{justify-content:center}
.logo-card--text .logo-name{font-size:var(--text-base); color:var(--bf-primary); font-weight:700}

/* ---------- INFOS / 2 COLONNES ---------- */
.duo{display:grid; grid-template-columns:1fr; gap:var(--space-5); align-items:center}
.info{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6)}
.info h3{font-size:var(--text-lg); color:var(--bf-ink); margin:0 0 var(--space-3); display:flex; align-items:center; gap:var(--space-2)}
.info h3 svg{width:22px; height:22px; color:var(--bf-accent)}
.info p, .info li{color:var(--color-text-muted)}
.info ul{padding-left:1.1rem}
.info li{margin-bottom:var(--space-2)}

/* ---------- FAQ ---------- */
.faq details{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md);
  padding:var(--space-4) var(--space-5); margin-bottom:var(--space-3)}
.faq summary{font-family:var(--font-display); font-weight:700; color:var(--bf-ink); cursor:pointer; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--bf-accent); font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--color-text-muted); margin-top:var(--space-3)}

/* ---------- EMPLACEMENTS PHOTOS (rendu « de marque » avant les vraies images) ---------- */
.ph{position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center;
  border-radius:var(--radius-lg); padding:var(--space-6); min-height:200px; isolation:isolate; color:#fff;
  background:
    radial-gradient(120% 120% at 18% 10%, rgba(228,0,90,.55), transparent 55%),
    radial-gradient(130% 130% at 95% 100%, rgba(255,122,168,.30), transparent 50%),
    linear-gradient(150deg, var(--bf-primary) 0%, var(--bf-primary-700) 100%);
  box-shadow:var(--shadow-card)}
.ph--wide{aspect-ratio:16/9; min-height:0}
.ph--square{aspect-ratio:1/1; min-height:0}
.ph__inner{max-width:34ch; font-size:var(--text-sm); font-weight:var(--weight-medium); color:rgba(255,255,255,.92);
  line-height:var(--leading-snug); text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ph svg{display:block; margin:0 auto var(--space-2); width:34px; height:34px; opacity:.95; stroke:var(--bf-gold)}
.ph > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; z-index:2}
.gallery{display:grid; grid-template-columns:1fr; gap:var(--space-4)}

/* ---------- CTA FINAL (bande sombre) ---------- */
.cta-band{position:relative; overflow:hidden; background:linear-gradient(160deg, var(--bf-primary), var(--bf-primary-700)); color:#fff; text-align:center}
.cta-band::before{content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(228,0,90,.20), transparent 60%); pointer-events:none}
.cta-band .container{position:relative; padding-top:var(--space-9); padding-bottom:var(--space-9)}
.cta-band h2{font-size:var(--text-3xl); color:#fff; margin:0 0 var(--space-4)}
.cta-band p{color:var(--color-dark-muted); font-size:var(--text-lg); max-width:48ch; margin:0 auto var(--space-6)}

/* ---------- PAGES TEXTE (mentions…) ---------- */
.prose{max-width:var(--container-narrow); margin-inline:auto}
.prose h2{font-size:var(--text-xl); color:var(--bf-ink); margin:var(--space-7) 0 var(--space-3)}
.prose h3{font-size:var(--text-lg); color:var(--bf-ink); margin:var(--space-5) 0 var(--space-2)}
.prose p, .prose li{color:var(--color-text); margin-bottom:var(--space-3)}
.prose ul{padding-left:1.2rem}
.prose strong{font-weight:700; color:var(--bf-primary)}

/* ---------- PIED DE PAGE ---------- */
.footer{background:var(--bf-ink); color:#CDBDCB; font-size:var(--text-sm); padding:var(--space-8) 0 var(--space-6)}
.footer__grid{display:grid; grid-template-columns:1fr; gap:var(--space-6)}
.footer h4{font-family:var(--font-display); color:#fff; font-size:var(--text-base); margin:0 0 var(--space-3)}
.footer p{margin-bottom:var(--space-2)}
.footer a{color:#CDBDCB}
.footer a:hover{color:#fff}
.footer__socials{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2)}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12); margin-top:var(--space-7);
  padding-top:var(--space-5); display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between; color:#9C8B9A}

/* ---------- ANIMATIONS « REVEAL » ----------
   Le masquage initial est conditionné à la classe .js (posée par main.js,
   en réalité par le script inline en <head>). Sans JavaScript, .reveal
   reste visible : aucun contenu ne disparaît. */
.js .reveal{opacity:0; transform:translateY(28px); will-change:opacity,transform}
.js .reveal.is-in{opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.js .reveal-stagger > *{opacity:0; transform:translateY(24px)}
.js .reveal-stagger.is-in > *{opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal-stagger.is-in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.is-in > *:nth-child(2){transition-delay:.14s}
.reveal-stagger.is-in > *:nth-child(3){transition-delay:.23s}
.reveal-stagger.is-in > *:nth-child(4){transition-delay:.32s}
.reveal-stagger.is-in > *:nth-child(5){transition-delay:.41s}
.reveal-stagger.is-in > *:nth-child(6){transition-delay:.50s}

@keyframes bf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes bf-rise{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .reveal-stagger > *{opacity:1 !important; transform:none !important; transition:none !important}
  .card:hover{transform:none}
  .hero__orb{animation:none !important}
  .hero__inner{animation:none !important}
}

/* ---------- RESPONSIVE ---------- */
@media (min-width:680px){
  .stats__grid{grid-template-columns:repeat(4,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .contacts{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:2fr 1fr 1fr}
}
@media (min-width:1180px){
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .contacts--3{grid-template-columns:repeat(3,1fr)}
  .nav-wrap{display:flex !important; align-items:center; gap:var(--space-3)}
  .burger{display:none}
  .header__cta{display:inline-flex; padding:var(--space-2) var(--space-3); font-size:var(--text-sm)}
  .nav{gap:var(--space-3)}
  .nav a{font-size:.82rem}
}

/* ---------- MENU MOBILE (< 1180px) ---------- */
@media (max-width:1179.98px){
  .nav-wrap{position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column;
    align-items:stretch; gap:4px; background:var(--color-bg);
    border-bottom:1px solid var(--color-border); box-shadow:var(--shadow-lg);
    padding:var(--space-3) var(--container-pad) var(--space-5)}
  .nav-wrap.is-open{display:flex}
  .nav{flex-direction:column; align-items:stretch; gap:0; width:100%}
  .nav a{display:flex; align-items:center; min-height:44px; padding:var(--space-2) var(--space-3);
    border-radius:var(--radius-sm); font-size:var(--text-base)}
  .nav a:hover{background:var(--color-surface-alt); text-decoration:none}
  .nav a[aria-current="page"]{border-bottom:0; color:var(--bf-accent); background:#F6E9F5}
  .header__cta{display:inline-flex; justify-content:center; margin-top:var(--space-3)}
  .header{position:relative}
}
.header{position:sticky}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:430px){
  .header__inner{gap:var(--space-2)}
  .brand__name{font-size:.95rem}
  .brand__sub{display:none}
  /* Programme : on empile l'heure au-dessus du texte pour libérer la largeur */
  .slot{flex-direction:column; gap:var(--space-1)}
  .slot__time{min-width:0}
  /* CTA pleine largeur empilés : cibles tactiles nettes et alignées */
  .hero__cta{flex-direction:column; align-items:stretch}
  .hero__cta .btn{width:100%; justify-content:center}
  .access-actions .btn{flex:1 1 100%; justify-content:center}
}

/* ---------- UTILITAIRE LECTEUR D'ÉCRAN ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---------- LIEN EXTERNE (icône « ↗ ») ---------- */
.ext-ico{width:.82em; height:.82em; margin-left:.15em; flex:none; vertical-align:-.04em; opacity:.9}

/* ---------- ÉTAT « BIENTÔT DISPONIBLE » (non cliquable) ---------- */
.soon-tag{display:inline-flex; align-items:center; gap:.45em; font-weight:700; font-size:var(--text-sm);
  color:var(--bf-primary-700); background:var(--color-surface-alt); border:1px dashed var(--color-border);
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-md)}
.soon-tag svg{width:18px; height:18px; color:var(--bf-accent); flex:none}

/* ---------- ACCÈS : CARTE & ACTIONS (infos pratiques) ---------- */
.access-actions{display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-4)}
.map-embed{position:relative; aspect-ratio:21/9; max-height:420px; margin-top:var(--space-5);
  border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-card); background:var(--color-surface-alt)}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.access-transport{list-style:none; padding:0; margin:0; display:grid; gap:var(--space-2)}
.access-transport li{display:flex; gap:var(--space-2); align-items:flex-start; color:var(--color-text-muted)}
.access-transport svg{width:20px; height:20px; flex:none; color:var(--bf-accent); margin-top:2px}

/* ============================================================
   ADN / IMMERSION (accueil) — hero cinématique, marquee défilant,
   affiche « line-up », compte à rebours, icônes sociales de marque,
   profondeur 3D (tilt), barre de progression de lecture.
   Tout est atténué/désactivé sous prefers-reduced-motion.
   ============================================================ */

/* ---------- Barre de progression de lecture ---------- */
.scroll-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:60; pointer-events:none;
  background:linear-gradient(90deg, var(--bf-accent), var(--bf-gold)); transition:width .1s linear}

/* ---------- Hero : motif robot + parallaxe ---------- */
.hero__robot{position:absolute; right:3%; top:50%; transform:translateY(-50%); width:min(32vw,320px); z-index:0; pointer-events:none;
  perspective:900px; filter:drop-shadow(0 22px 46px rgba(0,0,0,.45)); transition:filter .35s ease}
/* ACTIVATION au survol du hero : la mascotte « s'allume » (halo vert LED). */
.hero:hover .hero__robot{filter:drop-shadow(0 22px 46px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(63,224,106,.5))}
/* Rendu 3D : le médaillon/robot flotte et pivote légèrement en perspective (idle),
   et s'incline en 3D au mouvement de la souris (JS, voir main.js). */
.hero__robot-inner{transform-style:preserve-3d; transition:transform .2s ease-out;
  animation:bf-float3d 7s ease-in-out infinite; will-change:transform}
.hero__robot svg, .hero__robot img{display:block; width:100%; height:auto}
.hero__robot .eye{animation:bf-blink 4.2s steps(1) infinite}
/* Mascotte officielle BFN : si l'image charge, on masque le robot SVG de repli.
   Si elle est absente (onerror la retire), le SVG reste affiché. */
.hero__robot img ~ svg{display:none}
@keyframes bf-float3d{0%,100%{transform:translateY(0) rotateY(-7deg)}50%{transform:translateY(-9px) rotateY(7deg)}}

/* — Assembly : les pièces s'assemblent au chargement — */
.hero__robot .as{transform-box:fill-box; transform-origin:center; opacity:0;
  animation-duration:.62s; animation-timing-function:cubic-bezier(.2,.85,.3,1.2); animation-fill-mode:both}
.hero__robot .as-pop{animation-name:bf-as-pop}
.hero__robot .as-top{animation-name:bf-as-top}
.hero__robot .as-left{animation-name:bf-as-left}
.hero__robot .as-right{animation-name:bf-as-right}
@keyframes bf-as-pop{from{opacity:0; transform:scale(.5)}to{opacity:1; transform:none}}
@keyframes bf-as-top{from{opacity:0; transform:translateY(-46px)}to{opacity:1; transform:none}}
@keyframes bf-as-left{from{opacity:0; transform:translateX(-44px)}to{opacity:1; transform:none}}
@keyframes bf-as-right{from{opacity:0; transform:translateX(44px)}to{opacity:1; transform:none}}

/* — Activation au survol : réticule de visée + ligne de scan — */
.hero__robot .reticle{opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity .3s}
.hero:hover .hero__robot .reticle{opacity:.9; animation:bf-spin 7s linear infinite}
.hero__robot .scan{opacity:0; transition:opacity .3s}
.hero:hover .hero__robot .scan{opacity:1}
.hero__robot .scan-line{transform-box:fill-box}
.hero:hover .hero__robot .scan-line{animation:bf-scan 2.3s ease-in-out infinite}
@keyframes bf-spin{to{transform:rotate(360deg)}}
@keyframes bf-scan{0%{transform:translateY(0)}100%{transform:translateY(116px)}}
.hero__inner{position:relative; z-index:2}
@media (max-width:880px){ .hero__robot{display:none} }

/* ---------- Compte à rebours ---------- */
.countdown{display:flex; gap:var(--space-2); margin:0 0 var(--space-6); flex-wrap:wrap}
.countdown__unit{min-width:62px; padding:var(--space-2) var(--space-3); text-align:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-md); backdrop-filter:blur(4px)}
.countdown__num{font-family:var(--font-display); font-weight:800; font-size:var(--text-2xl); color:#fff;
  line-height:1; font-variant-numeric:tabular-nums; display:block}
.countdown__lbl{display:block; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bf-gold); margin-top:5px; font-weight:700}

/* ---------- Marquee / bandeau défilant ---------- */
.marquee{overflow:hidden; background:var(--bf-primary-700); border-bottom:1px solid rgba(255,255,255,.10);
  padding:var(--space-3) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee__track{display:inline-flex; align-items:center; white-space:nowrap;
  animation:bf-marquee 34s linear infinite; will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font-family:var(--font-display); font-weight:800; font-size:var(--text-lg);
  text-transform:uppercase; letter-spacing:.05em; color:#fff; padding:0 var(--space-5)}
.marquee__item::after{content:"✦"; color:var(--bf-gold); margin-left:var(--space-5); font-size:.8em; vertical-align:middle}
@keyframes bf-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Affiche « line-up » ---------- */
.lineup{position:relative; overflow:hidden; color:#fff; text-align:center;
  background:radial-gradient(80% 130% at 50% -25%, rgba(228,0,90,.42), transparent 60%),
    linear-gradient(160deg, var(--bf-primary-700), var(--bf-primary))}
.lineup::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:46px 46px; mask-image:radial-gradient(80% 80% at 50% 0%, #000, transparent 75%)}
.lineup .container{position:relative; padding-block:var(--space-9)}
.lineup .eyebrow{color:var(--bf-gold)}
.lineup__head{font-family:var(--font-display); font-weight:800; color:#fff;
  font-size:var(--text-3xl); margin:0 0 var(--space-7); letter-spacing:-.01em}
.lineup__poster{display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:var(--space-2) var(--space-4); max-width:24ch; margin-inline:auto}
.lineup__act{font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.01em;
  color:rgba(255,255,255,.92); font-size:clamp(1.05rem,.8rem + 1.4vw,1.75rem); line-height:1.05}
.lineup__act--head{display:block; width:100%; color:var(--bf-gold);
  font-size:clamp(1.7rem,1rem + 3.2vw,3.4rem); margin-bottom:var(--space-3)}
.lineup__dot{color:var(--bf-accent); font-size:.7em}
.lineup__cta{margin-top:var(--space-7)}

/* ---------- Icônes réseaux sociaux (SVG de marque) ---------- */
.social-icons{display:inline-flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; align-items:center}
.social-icons a{width:48px; height:48px; display:grid; place-items:center; border-radius:var(--radius-md);
  background:var(--color-surface); border:1px solid var(--color-border); color:var(--bf-primary);
  box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, background .2s, color .2s}
.social-icons a:hover{transform:translateY(-3px); background:var(--bf-primary); color:#fff; box-shadow:var(--shadow-card); text-decoration:none}
.social-icons svg{width:22px; height:22px}
.footer__socials.social-icons a{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff}
.footer__socials.social-icons a:hover{background:var(--bf-accent); border-color:var(--bf-accent); color:#fff}

/* ---------- Profondeur 3D : tilt des cartes ---------- */
[data-tilt] .card{transform-style:preserve-3d}

@keyframes bf-blink{0%,96%,100%{opacity:1}98%{opacity:.15}}

@media (prefers-reduced-motion:reduce){
  .hero__robot svg,.hero__robot .eye{animation:none}
  .hero__robot-inner{animation:none !important; transform:none !important}
  .hero__robot .as{animation:none !important; opacity:1 !important; transform:none !important}
  .hero__robot .reticle,.hero__robot .scan{display:none !important}
  .marquee__track{animation:none; transform:none}
  .marquee{overflow-x:auto}
  .scroll-progress{display:none}
}