/* blackdust.io : navigation et pied de page communs à toutes les pages.
   Les marqueurs T: entre doubles accolades sont remplacés au build par les tokens du design system (tokens.css).
   Tout est préfixé bd- et ancré sur .bd-c : les pages plus anciennes (support,
   légales, invitation) gardent leurs styles sans déteindre ici, ni l'inverse. */
@font-face{font-family:"Magistral-Book";src:url(/assets/magistral_book.otf) format("opentype");font-display:swap}
@font-face{font-family:"Oxanium-Medium";src:url(/assets/Oxanium-Medium.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Oxanium-SemiBold";src:url(/assets/Oxanium-SemiBold.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Oxanium-Regular";src:url(/assets/Oxanium-Regular.ttf) format("truetype");font-display:swap}

.bd-c {
  --bd-bg: #000000; --bd-s1: #0A0C0E; --bd-s2: #15191C; --bd-s3: #1E2429;
  --bd-or: #FFA63D; --bd-or-fonce: #B06309; --bd-or-clair: #FFC872;
  --bd-hi: rgba(255,255,255,0.95); --bd-dim: rgba(255,255,255,0.65); --bd-mute: rgba(255,255,255,0.40);
  --bd-bord: rgba(255,255,255,0.08); --bd-fil: rgba(255,255,255,0.07); --bd-verre: rgba(6,8,10,0.86);
  --bd-or35: rgba(255,166,61,0.35); --bd-or20: rgba(255,166,61,0.20); --bd-or08: rgba(255,166,61,0.08);
  --bd-label: 13px; --bd-label-lh: 16px; --bd-micro: 11px;
  --bd-caps: 2px; --bd-caps-l: 2.5px;
  --bd-display: "Magistral-Book", "Oxanium", system-ui, sans-serif;
  --bd-sans: "Oxanium-Regular", "Oxanium", system-ui, sans-serif;
  --bd-sans-m: "Oxanium-Medium", "Oxanium", system-ui, sans-serif;
  --bd-sans-sb: "Oxanium-SemiBold", "Oxanium", system-ui, sans-serif;
  --bd-gut: clamp(16px, 5vw, 56px);
  --bd-ch: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  --bd-ch-s: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  font: 400 16px/1.6 var(--bd-sans); color: var(--bd-hi); text-align: left; -webkit-font-smoothing: antialiased;
}
/* Remise à zéro : les règles génériques des pages hôtes (a, ul, li, h4, img) s'arrêtent ici. */
.bd-c *, .bd-c *::before, .bd-c *::after { box-sizing: border-box; }
.bd-c a { color: inherit; text-decoration: none; }
.bd-c ul, .bd-c ol { list-style: none; margin: 0; padding: 0; }
.bd-c li { margin: 0; padding: 0; }
.bd-c li::marker { content: ""; }
.bd-c p, .bd-c h4 { margin: 0; }
.bd-c img { display: block; max-width: 100%; height: auto; }
.bd-c :focus-visible { outline: 2px solid var(--bd-or-clair); outline-offset: 3px; }
.bd-c svg { width: 18px; height: 18px; flex: none; }
.bd-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--bd-gut); }
.bd-k { font: 500 var(--bd-label)/var(--bd-label-lh) var(--bd-sans-m); letter-spacing: var(--bd-caps-l); text-transform: uppercase; color: var(--bd-or); }

/* ── En-tête ── */
.bd-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 80; background: var(--bd-verre); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bd-fil); }
.bd-nav .bd-wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.bd-marque img { height: 22px; width: auto; }
.bd-liens { display: flex; gap: 24px; font: 500 var(--bd-label)/var(--bd-label-lh) var(--bd-sans-m); letter-spacing: var(--bd-caps-l); text-transform: uppercase; }
.bd-liens a { color: var(--bd-dim); padding: 8px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.bd-liens a:hover, .bd-liens a[aria-current="page"] { color: var(--bd-hi); border-color: var(--bd-or); }

/* Le bouton Télécharger de l'en-tête : biseauté, icône, mention « Gratuit ». */
.bd-c .bd-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 18px;
  font: 600 14px/1 var(--bd-sans-sb); letter-spacing: .3px; color: #000; background: var(--bd-or-fonce); clip-path: var(--bd-ch); transition: transform .2s; }
.bd-cta::before, .bd-cta::after { content: ""; position: absolute; inset: 1.6px; clip-path: polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px); }
.bd-cta::before { z-index: -2; background: var(--bd-or); }
.bd-cta::after { z-index: -1; background: var(--bd-or-clair); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.3,.7,.2,1); }
.bd-cta:hover::after, .bd-cta[aria-expanded="true"]::after { transform: scaleX(1); }
.bd-cta:active { transform: scale(.98); }
.bd-cta svg { transition: transform .35s cubic-bezier(.3,.7,.2,1); }
.bd-cta:hover svg { transform: translateY(2px); }
.bd-cta em { font: 500 var(--bd-micro)/1 var(--bd-sans-m); font-style: normal; letter-spacing: var(--bd-caps); text-transform: uppercase; padding: 7px 10px 7px 12px; background: rgba(0,0,0,.14); clip-path: var(--bd-ch-s); }

.bd-burger { display: none; background: none; border: 1px solid var(--bd-bord); color: var(--bd-hi); font: 500 var(--bd-label)/var(--bd-label-lh) var(--bd-sans-m); letter-spacing: var(--bd-caps-l); text-transform: uppercase; padding: 10px 12px; clip-path: var(--bd-ch-s); cursor: pointer; }
@media (max-width: 1000px) { .bd-liens { gap: 18px; } .bd-c .bd-cta em { display: none; } .bd-c .bd-cta { padding-right: 18px; } }
@media (max-width: 860px) { .bd-liens, .bd-c .bd-cta { display: none; } .bd-burger { display: block; } }

/* ── Menu mobile : plein écran sous la barre ── */
.bd-menu { display: none; }
@media (max-width: 860px) {
  .bd-menu { display: flex; flex-direction: column; justify-content: space-between; position: fixed; z-index: 79; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top, 0px) + 64px);
    padding: 8px var(--bd-gut) calc(104px + env(safe-area-inset-bottom, 0px)); background: radial-gradient(120% 60% at 50% 110%, var(--bd-or20), transparent 60%), var(--bd-bg);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; overflow-y: auto; }
  .bd-menu.ouvert { opacity: 1; visibility: visible; transition: opacity .25s; }
  .bd-menu li { border-bottom: 1px solid var(--bd-fil); opacity: 0; transform: translateY(14px); transition: opacity .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
  .bd-menu.ouvert li { opacity: 1; transform: none; }
  .bd-menu.ouvert li:nth-child(2) { transition-delay: .04s; } .bd-menu.ouvert li:nth-child(3) { transition-delay: .08s; }
  .bd-menu.ouvert li:nth-child(4) { transition-delay: .12s; } .bd-menu.ouvert li:nth-child(5) { transition-delay: .16s; }
  .bd-menu ol a { display: grid; grid-template-columns: 36px 1fr; column-gap: 8px; row-gap: 4px; padding-block: 18px; }
  .bd-menu i { grid-row: span 2; font: 500 var(--bd-micro)/14px var(--bd-sans-m); letter-spacing: var(--bd-caps); font-style: normal; color: var(--bd-mute); padding-top: 10px; }
  .bd-menu b { font: 400 32px/1.05 var(--bd-display); font-weight: 400; color: var(--bd-hi); transition: color .2s; }
  .bd-menu span { font-size: 14px; color: var(--bd-dim); }
  .bd-menu a[aria-current="page"] b, .bd-menu a:active b, .bd-menu a[aria-current="page"] i { color: var(--bd-or); }
  .bd-menu-pied { display: grid; gap: 12px; padding-top: 28px; }
  .bd-burger[aria-expanded="true"] { border-color: var(--bd-or35); color: var(--bd-or); }
}
@media (prefers-reduced-motion: reduce) { .bd-menu, .bd-menu li { transition: none; } }

/* ── Icônes des réseaux (pied et menu) ── */
.bd-ico { display: flex; gap: 10px; }
.bd-ico a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--bd-bord); clip-path: var(--bd-ch-s); color: var(--bd-dim); transition: color .2s, border-color .2s; }
.bd-ico a:hover { color: var(--bd-or); border-color: var(--bd-or35); }

/* ── Pied de page ── */
.bd-pied { margin: 0; padding: 48px 0 calc(110px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bd-fil); background: var(--bd-s1); }
.bd-pied > .bd-wrap:first-child { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { .bd-pied > .bd-wrap:first-child { grid-template-columns: 1fr 1fr; } .bd-pied > .bd-wrap:first-child > :first-child { grid-column: 1 / -1; } }
@media (min-width: 861px) { .bd-pied { padding-bottom: 40px; } }
.bd-pied h4 { margin: 0 0 12px; font: 500 var(--bd-label)/var(--bd-label-lh) var(--bd-sans-m); letter-spacing: var(--bd-caps-l); color: var(--bd-mute); text-transform: uppercase; }
.bd-pied ul { display: grid; gap: 8px; font-size: 14px; color: var(--bd-dim); }
.bd-pied ul a:hover, .bd-pied ul a[aria-current="page"] { color: var(--bd-hi); }
.bd-pied .bd-ico { margin-top: 16px; }
.bd-sig { font-size: 13px; color: var(--bd-mute); margin-top: 14px; max-width: 36ch; }
.bd-copie { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--bd-fil); font: 500 var(--bd-micro)/1.4 var(--bd-sans-m); letter-spacing: var(--bd-caps); text-transform: uppercase; color: var(--bd-mute); }

/* ── Bouton de boutique (pied mobile et panneau) ── */
.bd-c .bd-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  font: 600 15px/1 var(--bd-sans-sb); letter-spacing: .3px; color: #000; background: var(--bd-or-fonce); clip-path: var(--bd-ch); transition: transform .2s; }
.bd-btn::before { content: ""; position: absolute; inset: 1.6px; z-index: -2; background: var(--bd-or); clip-path: polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px); }
.bd-btn:hover::before { background: var(--bd-or-clair); }
.bd-btn:active { transform: scale(.98); }
.bd-btn.bd-sm { min-height: 44px; padding: 0 18px; font-size: 13px; }
.bd-c .bd-btn.bd-fantome { color: var(--bd-or); }
.bd-btn.bd-fantome::before { background: var(--bd-s2); }
.bd-btn.bd-fantome:hover::before { background: var(--bd-s3); }

.bd-colle { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; padding: 14px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, transparent, rgba(0,0,0,.9) 40%); display: none; }
@media (max-width: 860px) { .bd-colle { display: block; animation: bd-monte .55s cubic-bezier(.2,.7,.2,1) .4s both; } }
@keyframes bd-monte { from { opacity: 0; transform: translateY(100%); } }
.bd-c.bd-colle .bd-btn { width: 100%; min-height: 46px; padding: 0 8px 0 20px; font-size: 14px; justify-content: space-between; }
.bd-colle .bd-btn > span { display: inline-flex; align-items: center; gap: 10px; }
.bd-colle .bd-btn em { font: 500 var(--bd-micro)/1 var(--bd-sans-m); font-style: normal; letter-spacing: var(--bd-caps); text-transform: uppercase; padding: 7px 10px 7px 12px; background: rgba(0,0,0,.14); clip-path: var(--bd-ch-s); }
/* Un reflet traverse le bouton toutes les six secondes, et la flèche descend avec lui. */
.bd-colle .bd-btn::after { content: ""; position: absolute; inset: 1.6px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-110%);
  clip-path: polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px); animation: bd-reflet 6s ease-in-out 1.6s infinite; }
@keyframes bd-reflet { 0%, 72% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
.bd-colle .bd-btn svg { animation: bd-fleche 6s ease-in-out 1.6s infinite; }
@keyframes bd-fleche { 0%, 76%, 100% { transform: none; } 84% { transform: translateY(3px); } 92% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .bd-colle, .bd-colle .bd-btn::after, .bd-colle .bd-btn svg { animation: none; } }

/* ── Panneau de téléchargement (ordinateur) : code QR et les deux boutiques ── */
.bd-dl { position: fixed; z-index: 90; top: calc(env(safe-area-inset-top, 0px) + 72px); right: max(var(--bd-gut), calc((100vw - 1120px) / 2 + var(--bd-gut)));
  width: 340px; padding: 22px; background: var(--bd-s2); border: 1px solid var(--bd-or35); clip-path: var(--bd-ch); box-shadow: 0 24px 60px rgba(0,0,0,.6);
  display: grid; gap: 12px; animation: bd-entree .22s cubic-bezier(.2,.7,.2,1); }
.bd-dl[hidden] { display: none; }
.bd-dl:focus { outline: none; }
@keyframes bd-entree { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .bd-dl { animation: none; } }
.bd-dl-titre { font: 400 24px/1.15 var(--bd-display); color: var(--bd-hi); }
.bd-dl-corps { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; margin-top: 4px; }
.bd-dl-qr { width: 120px; height: 120px; background: #fff; padding: 8px; image-rendering: pixelated; }
.bd-dl-boutiques { display: grid; gap: 10px; }
.bd-dl-boutiques .bd-btn { width: 100%; justify-content: flex-start; }
.bd-dl-note { font-size: 12px; line-height: 1.5; color: var(--bd-mute); }
.bd-dl-fermer { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 0; color: var(--bd-dim); cursor: pointer; }
.bd-dl-fermer:hover { color: var(--bd-or); }
@media (max-width: 860px) { .bd-dl { display: none !important; } }