/* 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); }
/* 15/09 — `--text-3` (#55556E) donne 2,7:1 sur le fond de page : sous la
   moitié des 4,5:1 exigés, et c'est la ligne qui porte « dès 29,90 €/mois »,
   sur l'accueil, /telecharger et les 22 pages métier. Mesuré sur les pixels
   réels : le prix était le texte le moins lisible de la page. `--text-2`
   donne 5,8:1 sans changer la hiérarchie visuelle. */
.reassure { margin: 16px 0 0; font-size: 13.5px; color: var(--text-2); }
.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; }
  /* #1382 — l'image passait AVANT le texte (order:-1) et mangeait tout le
     premier écran : plus de titre, plus de boutons sans scroller. */
  .hero2 .dv { order: 1; margin-top: 18px; width: min(58vw, 210px); }
  /* ⚠️ REMISES ICI le 15/09 (contre-audit) — l'ajout du palier 420 px avait
     ouvert son accolade AVANT ces neuf règles : elles n'étaient plus
     retirées du 860, elles avaient été ABSORBÉES par le 420. Entre 421 et
     640 px, /organisateurs et /prestataires restaient donc en trois
     colonnes de 117 px (deux mots par ligne, capture d'app coupée net) et
     /tarifs montrait sa carte Pro tronquée au bord — « 49,90 € » et la
     pastille RECOMMANDÉ hors cadre, sur la page commerciale. 430 px, c'est
     tout l'iPhone Plus et Pro Max. */
  .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; }
}

/* #1382 (audit du 15/09) — LES PETITS ÉCRANS ANDROID.
   Le correctif précédent ne suffisait que sur iPhone : mesuré à 360 px de
   large — la taille de 35 visiteurs sur 43 — le badge Google Play tombait
   encore à y=661, sous une zone visible qui s'arrête vers 640. On comprime
   donc ce qui précède les boutons, sans rien retirer : titre plus petit,
   accroche plus serrée, pastille sur une ligne. */
@media (max-width: 420px) {
  .hero2 { padding-top: 22px; }
  .hero2 h1 { font-size: clamp(30px, 8.6vw, 40px); margin: 14px 0 12px; }
  .hero2 .tagline { font-size: 14.5px; line-height: 1.45; margin-bottom: 4px; }
  /* 15/09 — la pastille en `nowrap` DÉBORDAIT à 360 px : son texte de
     41 caractères, espacé de .14em, réclame ~340 px pour 320 disponibles.
     Elle élargissait la colonne entière, et les deux badges partaient hors
     cadre avec elle. On resserre l'interlettrage au lieu de forcer la ligne,
     et on borne la largeur : si ça ne tient toujours pas, ça passe à la
     ligne — jamais dans le décor. */
  .live-pill { padding: 5px 11px 5px 9px; font-size: 10.5px; letter-spacing: .05em; max-width: 100%; }
  /* Les badges doivent rester CÔTE À CÔTE : empilés, ils repoussent le
     second sous la ligne de flottaison, soit exactement le défaut #1382. */
  .store-badge { padding: 8px 12px 8px 10px; gap: 8px; }
  .store-badge svg { width: 22px; height: 22px; }
  .store-badge .sb-txt small { font-size: 9px; }
  .store-badge .sb-txt b { font-size: 14px; }
  .badges { gap: 10px; }
  .hero2 .dv { margin-top: 14px; width: min(46vw, 165px); }
}
@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; }