/* BookCrew — styles de la landing d'ouverture.
   Extrait le 21/08/2026 du <style> inline de index.html, pour que les cinq
   pages (accueil, organisateurs, prestataires, tarifs, contact) partagent la
   MEME feuille : une retouche se fait ici, pas en cinq endroits.
   Le socle commun (header, footer, boutons, typo) reste dans /style.css. */

/* ══════════════════════════════════════════════════════════════
   BookCrew — Landing v15 « OUVERTURE » (MOCKUP #740).
   Base = v14 « produit complet ». Changements : wording bêta purgé,
   4 piliers signés (EN PLACE. / CARRÉ. / SAUVÉ.), section prestataires
   gratuits (BOOKÉ.), section Exclusivité dédiée (A2 tranché : section
   pleine), pricing, FAQ, CTA stores. Zéro JS/cookie.
   Marqueurs d'arbitrage A1/A3-A7 : RETIRES le 21/08, tous tranches par le fondateur
   (le site est valide pour l'ouverture).
   ══════════════════════════════════════════════════════════════ */

:root { --red: #FF7675; --amber: #FDCB6E; }

/* Fond de scène FIXE (comme l'original) : image quasi noire au centre →
   texte lisible sans voile. 100lvh = grand viewport stable (évite le zoom
   au scroll sur iOS Safari). opacity 0.4 = l'original. */
body::before {
  content: ""; position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; height: 100lvh; z-index: -2;
  background: var(--bg) url("/bg-stage.jpg?v=2") center / cover no-repeat;
  opacity: 0.4;
}
/* Mobile : cadrer sur le CÔTÉ DROIT (partie scénique) + baisser l'opacité
   (le côté scénique est lumineux, le texte doit rester lisible). */
@media (max-width: 720px) { body::before { background-position: right center; opacity: 0.25; } }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes driftGlow { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%,1.4%,0) scale(1.07); } }

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10,10,15,.55); backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.lp { overflow-x: clip; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-light); margin: 0 0 12px; }
.eyebrow.red { color: #ffb1b0; }

/* ── Mots-signatures campagne (EN PLACE. / CARRÉ. / SAUVÉ. / BOOKÉ.) ── */
.sig { font-weight: 900; letter-spacing: .04em; color: var(--violet-light); white-space: nowrap; }
.sig.sig-red { color: var(--red); }
.sig.sig-green { color: var(--green); }

/* ── Marqueurs d'arbitrage (mockup uniquement — à RETIRER au jour J) ── */
.arb {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 5px; margin-left: 8px;
  border-radius: 7px; vertical-align: middle; cursor: help;
  background: rgba(253,203,110,.14); border: 1px solid rgba(253,203,110,.55);
  color: var(--amber); font-size: 11px; font-weight: 900; letter-spacing: .04em;
}
.preview-tag {
  position: fixed; z-index: 50; left: 14px; bottom: 14px;
  padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; cursor: help;
  background: rgba(253,203,110,.12); border: 1px solid rgba(253,203,110,.5);
  color: var(--amber); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* ── Téléphone naturel (cadre réaliste + reflet verre + halo) ── */
.dv { position: relative; display: inline-block; }
.dv::before { /* halo ambiant derrière l'appareil */
  content: ""; position: absolute; inset: -14% -18%; z-index: 0;
  background: radial-gradient(52% 50% at 50% 42%, rgba(110,63,227,.42), transparent 72%);
  filter: blur(26px);
}
.dv.red::before { background: radial-gradient(52% 50% at 50% 42%, rgba(255,118,117,.4), transparent 72%); }
.frame {
  position: relative; z-index: 1; border-radius: 42px; padding: 11px;
  background: linear-gradient(158deg, #33334f, #0a0a12 58%);
  box-shadow: 0 34px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.07);
}
.frame img { display: block; width: 100%; border-radius: 32px; }
.frame::after { /* reflet de verre : donne l'impression d'un vrai écran */
  content: ""; position: absolute; inset: 11px; border-radius: 32px; pointer-events: none;
  background: linear-gradient(122deg, rgba(255,255,255,.12), rgba(255,255,255,0) 34%, rgba(255,255,255,0) 82%, rgba(255,255,255,.04));
}

/* ── Badges stores (placeholders — liens réels au jour J, cf. A7) ── */
.badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #000; color: #fff; border: 1px solid rgba(255,255,255,.28);
  border-radius: 12px; padding: 9px 18px 9px 14px;
  transition: border-color .15s ease, transform .15s ease;
}
.store-badge:hover { border-color: #fff; text-decoration: none; transform: translateY(-1px); }
.store-badge svg { width: 26px; height: 26px; flex: none; }
.store-badge .sb-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-badge .sb-txt small { font-size: 10px; font-weight: 600; opacity: .75; letter-spacing: .02em; }
.store-badge .sb-txt b { font-size: 16px; font-weight: 800; letter-spacing: -.01em; }

/* ── HERO ── */
.hero2 { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 50px; padding: 58px 0 34px; }
.hero2 h1 { font-size: clamp(40px, 6.4vw, 74px); line-height: .98; font-weight: 900; letter-spacing: -.04em; margin: 20px 0 20px; }
.hero2 h1 .gl {
  background: linear-gradient(100deg, var(--violet-light), #cbb6ff 52%, var(--green));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 0 55px rgba(139,95,240,.4);
}
.hero2 .tagline { color: var(--text-2); font-size: clamp(16px, 2vw, 19px); max-width: 46ch; margin: 0 0 28px; }
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn-glow { box-shadow: 0 12px 40px rgba(110,63,227,.5); font-size: 16px; padding: 15px 32px; }
.btn-glow:hover { box-shadow: 0 16px 54px rgba(110,63,227,.7); }
.ghost { color: var(--text); font-weight: 700; font-size: 15px; border-bottom: 1px dashed var(--text-3); padding-bottom: 2px; }
.ghost:hover { text-decoration: none; border-color: var(--violet-light); color: var(--violet-light); }
/* 27/08 : la démo mise en avant dans le hero (accueil + organisateurs). */
.ghost-demo { color: var(--violet-light); border-bottom-style: solid; border-color: rgba(139,95,240,.55); }
.reassure { margin: 16px 0 0; font-size: 13.5px; color: var(--text-3); }
.reassure b { color: var(--green); font-weight: 800; }
.hero2 .dv { justify-self: center; width: min(70vw, 288px); animation: float 6.5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(-13px) rotate(.8deg); } }
.live-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 12px; border: 1px solid rgba(139,95,240,.4); border-radius: 999px; background: rgba(139,95,240,.1); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #e3d8ff; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--violet-light); box-shadow: 0 0 0 0 rgba(139,95,240,.6); animation: ping 1.9s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(139,95,240,.55); } 70% { box-shadow: 0 0 0 11px rgba(139,95,240,0); } 100% { box-shadow: 0 0 0 0 rgba(139,95,240,0); } }

/* ── Ticker métiers ── */
.ticker { border-block: 1px solid var(--border); padding: 18px 0; margin: 20px 0 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-track { display: flex; width: max-content; animation: tick 34s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { font-size: clamp(26px, 4vw, 42px); font-weight: 900; letter-spacing: -.02em; padding: 0 26px; white-space: nowrap; }
.ticker-track span.v { color: var(--violet-light); text-shadow: 0 0 26px rgba(139,95,240,.4); }
.ticker-track span.w { color: var(--text); }
.ticker-track b { color: var(--text-3); font-weight: 900; padding: 0 4px; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Bandeau confiance ── */
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 6px auto 8px; padding: 16px 24px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.trust span { position: relative; }
.trust span + span::before { content: "·"; position: absolute; left: -17px; color: var(--violet); font-weight: 900; }

/* ── Titre de section ── */
.sec-head { text-align: center; max-width: 640px; margin: 78px auto 8px; }
.sec-head h2 { font-size: clamp(26px, 4.2vw, 40px); font-weight: 900; letter-spacing: -.03em; margin: 6px 0 10px; }
.sec-head p { color: var(--text-2); font-size: 16px; margin: 0; }

/* ── Rangées features alternées (les 4 piliers) ── */
.frow { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; max-width: 1000px; margin: 0 auto; padding: 40px 0; }
.frow .dv { justify-self: center; width: min(64vw, 262px); }
.frow.flip .media { order: -1; }
.frow .txt h3 { font-size: clamp(23px, 3.2vw, 31px); font-weight: 900; letter-spacing: -.03em; margin: 8px 0 12px; }
.frow .txt > p { color: var(--text-2); font-size: 16px; margin: 0 0 16px; line-height: 1.6; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.checks li { position: relative; padding-left: 26px; color: var(--text-2); font-size: 14.5px; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 900; font-size: 14px; }

/* ── Comment marche le SOS (3 étapes, compact) ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 12px auto 0; }
.step { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 22px 20px; }
.step .num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 12px; font-size: 19px; font-weight: 900; color: #fff; background: linear-gradient(150deg, #e8564f, var(--red)); box-shadow: 0 8px 22px rgba(255,118,117,.38); }
.step h4 { margin: 0 0 6px; font-size: 15.5px; font-weight: 800; }
.step p { margin: 0; color: var(--text-2); font-size: 14px; }

/* ── EXCLUSIVITÉ (section dédiée — arbitrage A2 tranché : section pleine) ── */
.exclu {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 46px;
  max-width: 1000px; margin: 84px auto 0; padding: 46px 42px;
  border: 1px solid rgba(139,95,240,.4); border-radius: 30px;
  background: radial-gradient(90% 140% at 12% 0, rgba(110,63,227,.2), transparent 68%), rgba(20,20,32,.6);
}
.exclu h2 { font-size: clamp(26px, 4.2vw, 40px); font-weight: 900; letter-spacing: -.03em; margin: 6px 0 12px; }
.exclu-txt > p { color: var(--text-2); font-size: 16px; line-height: 1.6; margin: 0 0 16px; }
.roster { display: grid; gap: 10px; }
.roster-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(10,10,18,.6); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 16px;
}
.roster-dot { width: 34px; height: 34px; flex: none; border-radius: 50%; background: linear-gradient(150deg, var(--violet-light), var(--violet)); box-shadow: 0 6px 16px rgba(110,63,227,.4); }
.roster-who { display: flex; flex-direction: column; line-height: 1.25; }
.roster-who b { font-size: 14px; }
.roster-who small { color: var(--text-3); font-size: 12px; }
.tag-exclu {
  margin-left: auto; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); background: rgba(0,206,201,.1); border: 1px solid rgba(0,206,201,.4);
}
.roster-note { margin: 12px 0 0; text-align: center; color: var(--text-3); font-size: 12.5px; }

/* ── PRICING ── */
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 860px; margin: 26px auto 0; align-items: stretch; }
.price-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 22px; padding: 30px 28px; display: flex; flex-direction: column; }
.price-card.pro { border-color: rgba(139,95,240,.75); box-shadow: 0 0 0 1px rgba(139,95,240,.55), 0 18px 54px rgba(110,63,227,.28); }
.plan-badge { position: absolute; top: -13px; right: 22px; background: var(--violet); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 13px; border-radius: 999px; box-shadow: 0 8px 22px rgba(110,63,227,.4); }
.plan-name { margin: 0 0 4px; font-size: 20px; font-weight: 900; letter-spacing: -.02em; }
.plan-price { margin: 0 0 4px; font-size: clamp(26px, 3.4vw, 32px); font-weight: 900; letter-spacing: -.03em; }
.plan-price small { font-size: 14px; font-weight: 700; color: var(--text-2); letter-spacing: 0; }
.plan-annual { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--violet-light); }
.plan-annual span { color: var(--text-2); font-weight: 600; }
.plan-who { margin: 0 0 16px; color: var(--text-2); font-size: 14px; }
.price-card .checks { margin-bottom: 22px; }
.price-card .btn { margin-top: auto; text-align: center; }
.btn-outline { background: transparent; color: var(--violet-light); border: 1px solid var(--violet); }
.btn-outline:hover { background: rgba(110,63,227,.14); text-decoration: none; }
.price-lines { max-width: 860px; margin: 18px auto 0; display: grid; gap: 10px; }
.price-line { background: rgba(20,20,32,.66); border: 1px solid var(--border); border-radius: 16px; padding: 14px 20px; color: var(--text-2); font-size: 14px; }
.price-line b { color: var(--text); }

/* ── FAQ ── */
.faq { max-width: 720px; margin: 26px auto 0; display: grid; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.faq details[open] { border-color: rgba(139,95,240,.5); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 46px 16px 20px; font-size: 15px; font-weight: 800; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--violet-light); font-size: 20px; font-weight: 900; transition: transform .15s ease; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0; padding: 0 20px 16px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }

/* ── CTA final ── */
.final { position: relative; text-align: center; max-width: 720px; margin: 82px auto 96px; padding: 58px 30px; border: 1px solid rgba(139,95,240,.35); border-radius: 30px; background: radial-gradient(80% 120% at 50% 0, rgba(110,63,227,.22), transparent 70%); }
.final h2 { font-size: clamp(26px, 4.5vw, 40px); font-weight: 900; letter-spacing: -.03em; margin: 0 0 12px; }
.final p { color: var(--text-2); margin: 0 0 26px; font-size: 16px; }
.final .badges { justify-content: center; margin-bottom: 16px; }

/* Titres teintés violet BookCrew (moins de « tout blanc ») */
.sec-head h2, .frow .txt h3, .plan-name, .final h2, .exclu h2 {
  background: linear-gradient(100deg, var(--violet-light), #cdbcff 60%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Exceptions : signatures et marqueurs gardent leur couleur pleine. */
.sec-head h2 .sig, .frow .txt h3 .sig { -webkit-text-fill-color: currentColor; }
.sec-head h2 .arb { -webkit-text-fill-color: var(--amber); }

/* ── Reveal scroll (zéro JS) ── */
@supports (animation-timeline: view()) {
  .reveal { animation: revealUp linear both; animation-timeline: view(); animation-range: entry 2% cover 24%; }
  @keyframes revealUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .hero2 { grid-template-columns: 1fr; text-align: center; padding-top: 40px; }
  .hero2 .tagline { margin-inline: auto; }
  .cta-row, .badges { justify-content: center; }
  .hero2 .dv { order: -1; margin-bottom: 6px; width: min(72vw, 260px); }
  .frow { grid-template-columns: 1fr; gap: 26px; text-align: center; padding: 34px 0; }
  .frow.flip .media { order: 0; }
  .frow .checks { display: inline-grid; text-align: left; }
  .steps { grid-template-columns: 1fr; }
  .exclu { grid-template-columns: 1fr; text-align: center; gap: 28px; padding: 36px 24px; }
  .exclu .checks { display: inline-grid; text-align: left; }
  .pricing { grid-template-columns: 1fr; max-width: 480px; }
  .price-card { text-align: center; }
  .price-card .checks { display: inline-grid; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, .hero2 .dv, .live-dot, .ticker-track { animation: none; }
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── Bloc pré-footer « BookCrew pour votre métier » (#166-bis, maillage SEO) ── */
.metiers-foot { max-width: 1080px; margin: 0 auto; padding: 26px 24px 34px; border-top: 1px solid var(--border); text-align: center; }
.metiers-foot-title { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.metiers-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; }
.metiers-foot-links a {
  display: inline-block; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(20,20,32,.66);
  color: var(--text-2); font-size: 13px; font-weight: 700;
}
.metiers-foot-links a:hover { border-color: var(--violet); color: var(--violet-light); text-decoration: none; }


/* ── Cartes d'orientation (accueil, contact) ────────────────────────────
   Ajoutées le 21/08 avec le passage en site multi-pages : l'accueil ne
   déroule plus tout, il ORIENTE vers /organisateurs ou /prestataires.
   Reprises du même motif que la landing bêta, mais en <a> et non en <div> :
   la carte entière est cliquable, ce qui est la cible tactile attendue sur
   un téléphone. D'où les remises à zéro de décoration de lien. */
.aud { display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
       max-width: 1000px; margin: 26px auto 0; }
.aud-card { display: flex; flex-direction: column;
            background: var(--card); border: 1px solid var(--border);
            border-radius: 22px; padding: 30px 28px; color: inherit;
            text-decoration: none;
            transition: border-color .18s ease, transform .18s ease,
                        box-shadow .18s ease; }
.aud-card:hover { text-decoration: none; border-color: rgba(139,95,240,.75);
                  transform: translateY(-3px);
                  box-shadow: 0 18px 44px rgba(110,63,227,.22); }
.aud-card:focus-visible { outline: 2px solid var(--violet-light);
                          outline-offset: 3px; }
.aud-card h3 { margin: 0 0 12px; font-size: 21px; font-weight: 900;
               letter-spacing: -.02em; color: var(--text); }
.aud-card p { margin: 0 0 18px; color: var(--text-2); font-size: 15px;
              line-height: 1.62; }
.aud-go { margin-top: auto; font-weight: 800; font-size: 14px;
          color: var(--violet-light); }

/* L'onglet courant du menu : on ne renvoie pas vers la page qu'on lit. */
.site-header nav a[aria-current="page"] { color: var(--text); font-weight: 800; }

@media (max-width: 720px) {
  .aud { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .aud-card { transition: none; }
  .aud-card:hover { transform: none; }
}


/* ══ MENU ══════════════════════════════════════════════════════════════
   Refait DEUX FOIS le 21/08.
   1re version : quatre libelles nus cote a cote — « horrible » (le fondateur).
   2e version : deroulant correct sur grand ecran, mais « degueulasse sur
   mobile ».

   ⚠️ LA CAUSE, TROUVEE EN LISANT LE CSS DE BASE ET NON EN DEVINANT :
   `style.css` porte `.site-header nav a { color; font-size }`, de
   specificite (0,1,2). Mes regles etaient en `.navlinks > a` (0,1,1) : le
   socle GAGNAIT sur la couleur et la taille. Le menu heritait donc du style
   des liens de pied de page, par-dessus mon dessin — d'ou l'aspect batard.
   Tout est desormais porte par `.site-header nav …`, au-dessus du socle.

   Contrainte tenue : ZERO JS. <details>/<summary>, clic + clavier, et
   survol en plus sur grand ecran. */

.site-header { position: sticky; }        /* ancre du panneau mobile */
.site-header nav { gap: 4px; flex-wrap: nowrap; }
/* ⚠️ PAS de position:relative sur nav : le panneau mobile doit pouvoir
   s'etendre sur toute la largeur, donc se caler sur .site-header (qui est
   en position:sticky, donc bloc conteneur). Le deroulant de bureau, lui,
   s'ancre sur .drop, qui porte son propre position:relative. */

.site-header nav summary { list-style: none; cursor: pointer; }
.site-header nav summary::-webkit-details-marker { display: none; }

.site-header nav .navlinks { display: flex; align-items: center; gap: 4px; }

/* Entrees de 1er niveau — la specificite bat `.site-header nav a`. */
.site-header nav .navlinks > a,
.site-header nav .drop > summary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px; border-radius: 999px;
  font-size: 14.5px; font-weight: 700; color: var(--text-2);
  border: 1px solid transparent; white-space: nowrap; line-height: 1;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.site-header nav .navlinks > a:hover,
.site-header nav .drop > summary:hover {
  color: var(--text); background: rgba(255,255,255,.06); text-decoration: none;
}
.site-header nav .navlinks > a[aria-current="page"] {
  color: var(--text); background: rgba(255,255,255,.05); border-color: var(--border);
}
.site-header nav .navlinks > a:focus-visible,
.site-header nav .drop > summary:focus-visible {
  outline: 2px solid var(--violet-light); outline-offset: 2px;
}

.site-header nav .drop > summary::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.site-header nav .drop[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; }

.site-header nav a.nav-cta {
  color: #fff; background: var(--violet); border-color: transparent; font-weight: 800;
}
.site-header nav a.nav-cta:hover { background: var(--violet-light); color: #fff; }

/* Panneau du deroulant */
.site-header nav .droppanel { display: none; }
.site-header nav .drop-lead {
  display: block; padding: 12px 13px; border-radius: 13px;
  color: var(--text); font-size: 15px; text-decoration: none;
  transition: background .15s ease;
}
.site-header nav .drop-lead:hover { background: rgba(255,255,255,.07); text-decoration: none; }
.site-header nav .drop-lead[aria-current="page"] { background: rgba(110,63,227,.18); }
.site-header nav .drop-lead b { display: block; font-size: 15px; font-weight: 800; color: var(--text); }
/* 27/08 : petit tag « Gratuit » à droite du titre Prestataires. */
.site-header nav .drop-lead .tag-gratuit {
  float: right; margin-left: 10px; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green, #55EFC4); background: rgba(85,239,196,.12);
  border: 1px solid rgba(85,239,196,.3);
}
.site-header nav .drop-lead small { display: block; margin-top: 3px; font-size: 12.5px;
                                    font-weight: 500; color: var(--text-2); line-height: 1.45; }
.site-header nav .drop-sep {
  margin: 14px 5px 8px; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #6a6a86;
}
.site-header nav .drop-metiers { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.site-header nav .drop-metiers a {
  padding: 10px 11px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  color: var(--text-2); text-decoration: none;
}
.site-header nav .drop-metiers a:hover {
  background: rgba(255,255,255,.07); color: var(--text); text-decoration: none;
}

/* ── Grand ecran : menu deploye, panneau flottant ── */
@media (min-width: 900px) {
  .site-header nav > details > summary.burger { display: none; }
  .site-header nav .drop { position: relative; }
  .site-header nav .drop:hover .droppanel,
  .site-header nav .drop[open] .droppanel,
  .site-header nav .drop:focus-within .droppanel {
    display: block; position: absolute; top: calc(100% + 12px); left: 0;
    width: 440px; padding: 14px; z-index: 60;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 20px; box-shadow: 0 26px 70px rgba(0,0,0,.55);
  }
  /* Pont invisible : sans lui, le survol se coupe entre bouton et panneau. */
  .site-header nav .drop:hover::after {
    content: ""; position: absolute; top: 100%; left: 0; width: 440px; height: 14px;
  }
}

/* ── Mobile : feuille pleine largeur sous l'en-tete ──
   On ne fait plus flotter une petite carte a droite : sur un telephone elle
   etait etroite, collee au bord, et les metiers s'y ecrasaient sur deux
   colonnes. Le panneau occupe maintenant toute la largeur, ancre sous
   l'en-tete (qui est en position:sticky, donc bloc conteneur). */
@media (max-width: 899px) {
  .site-header nav > details > summary.burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 44px; padding: 0 11px;
    border: 1px solid var(--border); border-radius: 12px;
  }
  .site-header nav .burger span {
    display: block; height: 2px; background: var(--text); border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
  }
  .site-header nav .navwrap[open] .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header nav .navwrap[open] .burger span:nth-child(2) { opacity: 0; }
  .site-header nav .navwrap[open] .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-header nav .navwrap > .navlinks { display: none; }
  .site-header nav .navwrap[open] > .navlinks {
    display: flex; flex-direction: column; align-items: stretch; gap: 3px;
    position: absolute; left: 0; right: 0; top: 100%;
    max-height: 78dvh; overflow-y: auto;
    z-index: 60; padding: 14px 16px 22px;
    background: var(--bg, #0A0A0F);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 26px 70px rgba(0,0,0,.6);
  }
  .site-header nav .navlinks > a,
  .site-header nav .drop > summary {
    justify-content: space-between; padding: 14px 14px; border-radius: 13px;
    font-size: 16px; white-space: normal;
  }
  .site-header nav .drop[open] .droppanel {
    display: block; padding: 2px 0 10px;
  }
  .site-header nav .drop-metiers { grid-template-columns: 1fr; gap: 0; }
  .site-header nav .drop-metiers a { padding: 12px 14px; font-size: 15px; }
  .site-header nav .drop-lead { padding: 13px 14px; }
  .site-header nav a.nav-cta { margin-top: 10px; justify-content: center; padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header nav .navlinks > a, .site-header nav .drop > summary,
  .site-header nav .drop > summary::after, .site-header nav .burger span,
  .site-header nav .drop-lead { transition: none; }
}


/* Le socle style.css arrondit .brand img (hérité de l'icône carrée).
   Sur le logo HORIZONTAL, le B est collé au bord gauche du PNG : les 7 px
   de rayon lui rognaient les coins — « le B est arrondi, un bout coupé »
   (le fondateur, 24/08). Le fichier, lui, est sain. */
.site-header .brand img { border-radius: 0; }

/* ══ BOUTON DE CONNEXION — TOUJOURS VISIBLE ════════════════════════════
   le fondateur, 21/08 : « le bouton se connecter, j'aimerais bien que le cadenas
   soit tout le temps affiche, comme sur la page de beta actuelle, qu'on
   n'ait pas besoin d'aller dans le menu pour se connecter. »

   Il vit donc HORS du <details> : le burger peut se replier, lui reste.
   Le libelle disparait sous 520 px (le cadenas seul suffit et parle), mais
   la cible tactile garde 44 px et l'intitule reste lisible par les lecteurs
   d'ecran via le title. */

.site-header .head-right { display: flex; align-items: center; gap: 10px; }

.site-header .lock-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--violet); color: #fff; opacity: 1;
  font-size: 14.5px; font-weight: 800; line-height: 1; white-space: nowrap;
  transition: background .15s ease;
}
.site-header .lock-link:hover { background: var(--violet-light); color: #fff; text-decoration: none; }
.site-header .lock-link:focus-visible { outline: 2px solid var(--violet-light); outline-offset: 3px; }
.site-header .lock-link svg { width: 17px; height: 17px; flex: 0 0 auto; }

@media (max-width: 519px) {
  .site-header .lock-link { padding: 0; width: 44px; justify-content: center; }
  .site-header .lock-link span { display: none; }
  .site-header .lock-link svg { width: 19px; height: 19px; }
}


/* ══ HIERARCHIE DU DEROULANT ═══════════════════════════════════════════
   le fondateur, 21/08 : « dans le menu, les metiers sont un peu trop en valeur.
   Il faudrait mettre plus Prestataires et Organisateurs en valeur. »

   Il a raison : dix libelles sur deux colonnes pesaient plus lourd que les
   deux entrees qui comptent. Les deux principales deviennent des CARTES
   (fond, bordure, fleche), les metiers redescendent en liste discrete sur
   trois colonnes, en petit et en gris. */

.site-header nav .drop-lead {
  position: relative;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 15px 40px 15px 16px;
  margin-bottom: 8px;
}
.site-header nav .drop-lead:hover {
  background: rgba(110,63,227,.16);
  border-color: rgba(139,95,240,.65);
}
.site-header nav .drop-lead b { font-size: 16px; letter-spacing: -.01em; }
.site-header nav .drop-lead small { font-size: 13px; }
/* Chevron : dit que la carte mene quelque part. */
.site-header nav .drop-lead::after {
  content: ""; position: absolute; right: 17px; top: 50%;
  width: 7px; height: 7px; margin-top: -4px;
  border-top: 2px solid var(--violet-light);
  border-right: 2px solid var(--violet-light);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.site-header nav .drop-lead:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* Les metiers : presents, mais clairement secondaires. */
.site-header nav .drop-sep { margin: 16px 5px 6px; font-size: 10.5px; color: #5f5f7a; }
.site-header nav .drop-metiers { grid-template-columns: repeat(3, 1fr); gap: 0; }
.site-header nav .drop-metiers a {
  padding: 7px 8px; font-size: 12.5px; font-weight: 500; color: #8888a8;
}
.site-header nav .drop-metiers a:hover { background: rgba(255,255,255,.05); color: var(--text); }

@media (max-width: 899px) {
  /* Sur telephone, trois colonnes de metiers seraient illisibles : deux, et
     les cartes gardent une cible confortable. */
  .site-header nav .drop-metiers { grid-template-columns: 1fr 1fr; }
  .site-header nav .drop-metiers a { padding: 11px 10px; font-size: 13.5px; }
  .site-header nav .drop-lead { padding: 16px 40px 16px 16px; }
}

/* ══ /AIDE INTERACTIVE (25/08) — recherche + questions dépliables ══ */
.aide-search { margin: 6px 0 26px; }
.aide-search input {
  width: 100%; padding: 15px 18px; font-size: 15px; color: var(--text);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; outline: none;
}
.aide-search input:focus { border-color: rgba(124,61,231,.55); }
.aide-count { margin-top: 10px; font-size: 13px; color: var(--muted); }
.aide-cat { margin: 26px 0; }
.aide-cat h2 {
  font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.aide-q {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 13px; margin-bottom: 8px; overflow: hidden;
}
.aide-q summary {
  list-style: none; cursor: pointer; padding: 14px 44px 14px 16px;
  font-weight: 700; font-size: 14.5px; color: var(--text); position: relative;
}
.aide-q summary::-webkit-details-marker { display: none; }
.aide-q summary::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .15s ease;
}
.aide-q[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.aide-q[open] summary { color: var(--violet-light); }
.aide-r { padding: 0 16px 14px; font-size: 14px; color: var(--text2);
  line-height: 1.55; }
.aide-r p { margin: 8px 0; }
.aide-r ul, .aide-r ol { margin: 8px 0 8px 20px; }
.aide-r li { margin: 4px 0; }
.aide-r code { background: rgba(255,255,255,.08); border-radius: 5px;
  padding: 1px 5px; font-size: 13px; }
.aide-contact { margin-top: 34px; padding: 20px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; }
.aide-contact h2 { font-size: 17px; margin-bottom: 8px; }
.aide-contact p { font-size: 14px; color: var(--text2); line-height: 1.55;
  margin: 8px 0; }

/* ── /aide : tags d'audience + filtres (25/08) ── */
.aide-filtres { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.aide-filtre {
  padding: 9px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: var(--text2); background: var(--card);
  border: 1px solid var(--border); border-radius: 100px;
}
.aide-filtre.is-actif {
  color: #fff; background: var(--violet); border-color: var(--violet);
}
.aide-q summary { display: flex; align-items: center; gap: 6px;
  padding: 14px 40px 14px 16px; }
.aide-tag + .aide-tag { margin-left: 4px; }
.aide-q-txt { flex: 1; }
.aide-tag {
  flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 100px; text-transform: uppercase;
}
.aide-tag-orga { color: #b9a1f5; background: rgba(124,61,231,.16);
  border: 1px solid rgba(124,61,231,.35); }
.aide-tag-presta { color: #58d6d2; background: rgba(0,206,201,.13);
  border: 1px solid rgba(0,206,201,.32); }
@media (max-width: 520px) {
  .aide-tag { font-size: 9.5px; padding: 2px 7px; }
}

/* /aide mobile : les tags passent SOUS la question (ils l'écrasaient) */
@media (max-width: 640px) {
  .aide-q summary { flex-wrap: wrap; row-gap: 7px; }
  .aide-q-txt { flex: 1 1 100%; }
  .aide-tag { font-size: 10px; }
}

/* ══ /CONTACT — formulaire démo + message (25/08) ══ */
.aud-card-demo { border-color: rgba(124,61,231,.5);
  background: linear-gradient(160deg, rgba(124,61,231,.14), var(--card)); }
.contact-form { margin: 30px 0 6px; padding: 24px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; }
.contact-form h2 { font-size: 19px; margin-bottom: 16px; }
.cf-kinds { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.cf-kinds label { display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--border); border-radius: 100px;
  cursor: pointer; font-size: 14px; color: var(--text2); }
.cf-kinds input { accent-color: var(--violet); }
.cf-kinds label:has(input:checked) { border-color: var(--violet);
  color: var(--text); background: rgba(124,61,231,.12); }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .cf-row { grid-template-columns: 1fr; } }
.contact-form label { display: block; margin-bottom: 14px; font-size: 13px;
  font-weight: 700; color: var(--text2); }
.contact-form input:not([type=radio]), .contact-form textarea {
  /* 27/08 « problème de mise en forme » : sans border-box, width:100%
     + padding + bordure débordait de la carte à droite. */
  box-sizing: border-box;
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
  font-size: 14.5px; color: var(--text); background: var(--bg, #0A0A0F);
  border: 1px solid var(--border); border-radius: 12px; outline: none;
  font-family: inherit;
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color: rgba(124,61,231,.55); }
.cf-opt { font-weight: 400; color: var(--muted); }
.cf-piege { position: absolute; left: -9999px; height: 0; opacity: 0; }
#cf-btn { padding: 14px 28px; font-size: 15px; font-weight: 800;
  color: #fff; background: var(--violet); border: 0; border-radius: 100px;
  cursor: pointer; }
#cf-btn:disabled { opacity: .6; cursor: wait; }
#cf-status { margin-top: 12px; font-size: 14px; color: var(--red, #FF7675); }
.cf-ok { color: var(--turquoise, #00CEC9) !important; font-weight: 700;
  font-size: 15.5px !important; }

/* #1278 — bandeau « Ouvrir dans l'app » des pages de deep link (event, invite) */
.open-app-banner { display: none; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 12px 14px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(110,63,227,.28), rgba(20,20,32,.92)); border: 1px solid rgba(139,95,240,.45);
  box-shadow: 0 12px 40px rgba(110,63,227,.25); backdrop-filter: blur(10px); }
.open-app-banner .oab-icon { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.open-app-banner .oab-txt { flex: 1; font-weight: 800; font-size: 14px; line-height: 1.25; color: var(--text); }
.open-app-banner .oab-btn { flex: none; padding: 10px 18px; border-radius: 12px; font-size: 14px; }