/* ============================================================
   rally.band - landing page
   ============================================================ */

.landing {
    color: var(--text-1);
    overflow-x: hidden;
}

/* ---- Header ---- */
.landing-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(11, 11, 20, 0.75);
    border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .landing-header { background: rgba(255, 255, 255, 0.85); }
.landing-nav {
    max-width: 1200px; margin: 0 auto;
    padding: 16px 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 900; font-size: 1.3rem;
    letter-spacing: -0.5px;
    text-decoration: none; color: var(--text-1);
}
.brand-logo {
    width: 36px; height: 36px;
    background: var(--rb-gradient);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 14px rgba(255,107,26,0.40);
}
.landing-nav a.nav-link { color: var(--text-2); margin-left: 24px; text-decoration: none; }
.landing-nav a.nav-link:hover { color: var(--text-1); }
.landing-nav .cta-group { display: flex; gap: 10px; align-items: center; }

/* ---- Hero ---- */
.hero {
    padding: 80px 24px 100px;
    position: relative;
    text-align: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,169,77,0.28), transparent 50%),
        radial-gradient(circle at 80% 60%, rgba(255,107,26,0.22), transparent 50%);
}
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
html[data-theme="light"] .hero::before {
    background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}
.hero-inner { max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--glass);
    border: 1px solid var(--border-2);
    font-size: .85rem;
    color: var(--text-2);
    margin-bottom: 22px;
}
.hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: -1.5px;
    margin: 0 0 20px;
    font-weight: 900;
}
.hero h1 .grad {
    background: var(--rb-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero p.lead {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--text-2);
    max-width: 720px;
    margin: 0 auto 36px;
}
.hero .btn-big { padding: 14px 28px; font-size: 1rem; }
.hero-images {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    max-width: 1100px;
    margin-left: auto; margin-right: auto;
}
.hero-images img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform .3s;
}
.hero-images img:nth-child(1) { transform: translateY(14px) rotate(-2deg); }
.hero-images img:nth-child(2) { transform: translateY(-6px) rotate(1deg); }
.hero-images img:nth-child(3) { transform: translateY(-14px); }
.hero-images img:nth-child(4) { transform: translateY(-6px) rotate(-1deg); }
.hero-images img:nth-child(5) { transform: translateY(14px) rotate(2deg); }
.hero-images img:hover { transform: translateY(-20px) rotate(0) scale(1.03); }

@media (max-width: 720px) {
    .hero-images { grid-template-columns: repeat(2, 1fr); }
    .hero-images img { height: 120px; }
    .hero-images img:nth-child(5) { display: none; }
}

/* ---- Section ---- */
.section { padding: 90px 24px; }
.section-head { text-align: center; max-width: 700px; margin: 0 auto 50px; }
.section-head h2 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: -.8px;
    margin: 0 0 14px;
    font-weight: 900;
}
.section-head p { color: var(--text-2); font-size: 1.08rem; margin: 0; }

/* ---- Features grid ---- */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
}
.feature {
    padding: 26px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.feature:hover {
    transform: translateY(-4px);
    border-color: var(--rb-purple);
    box-shadow: 0 20px 40px rgba(255,107,26,0.15);
}
.feature-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--rb-gradient-soft);
    border: 1px solid var(--border-2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 16px;
}
.feature h3 { margin: 0 0 8px; font-size: 1.15rem; }
.feature p { margin: 0; color: var(--text-2); font-size: .95rem; }

/* ---- Screenshots section (band imagery) ---- */

/* ---- Pricing ---- */
.pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 900px;
    margin: 0 auto;
    gap: 20px;
}
.plan {
    padding: 32px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    position: relative;
}
.plan.highlight {
    border-color: var(--rb-purple);
    background: linear-gradient(180deg, var(--bg-2), var(--bg-2)), var(--rb-gradient-soft);
    box-shadow: 0 20px 50px rgba(255,107,26,0.20);
}
.plan h3 { margin: 0 0 8px; font-size: 1.3rem; }
.plan .price { font-size: 2.6rem; font-weight: 900; margin: 8px 0; letter-spacing: -1px; }
.plan .price small { font-size: 0.9rem; color: var(--text-3); font-weight: 500; }
.plan ul { padding-left: 18px; color: var(--text-2); margin: 18px 0; }
.plan li { margin: 6px 0; }
.plan .badge-pop {
    position: absolute; top: -10px; right: 20px;
    background: var(--rb-gradient); color: #fff;
    padding: 4px 12px; border-radius: 999px;
    font-size: .75rem; font-weight: 700;
}

/* ---- CTA band ---- */
.cta-band {
    background: var(--rb-gradient);
    padding: 80px 24px;
    text-align: center;
    color: #fff;
}
.cta-band h2 { font-size: 2.4rem; margin: 0 0 14px; letter-spacing: -.5px; }
.cta-band p { opacity: .92; margin: 0 0 28px; font-size: 1.1rem; }
.cta-band .btn { background: #fff; color: #111; }

/* ---- Footer ---- */
.landing-footer {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-3);
    font-size: .9rem;
    border-top: 1px solid var(--border);
}
.landing-footer a { color: var(--text-2); margin: 0 10px; }

/* ---- Live wall (upcoming concerts from public bands) ---- */
.live-wall {
    position: relative;
    overflow: hidden;
    padding-bottom: 70px;
    background:
        radial-gradient(circle at 15% 0%, rgba(255,107,26,.12), transparent 55%),
        radial-gradient(circle at 85% 100%, rgba(192,103,255,.12), transparent 55%);
}
/* Marquee viewport: full-bleed horizontal scroll, masked at edges */
.live-marquee {
    position: relative;
    margin: 30px -24px 0;
    padding: 8px 0 22px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    overflow: hidden;
}
.live-track {
    display: flex;
    gap: 18px;
    width: max-content;
    padding: 0 24px;
    animation: liveScroll 70s linear infinite;
}
.live-marquee:hover .live-track,
.live-marquee:focus-within .live-track { animation-play-state: paused; }
@keyframes liveScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Static mode (few cards): no scroll, no edge mask, centered */
.live-marquee.is-static {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
}
.live-marquee.is-static .live-track {
    width: 100%;
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
}
@media (prefers-reduced-motion: reduce) {
    .live-track { animation: none; }
    .live-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

.live-card {
    flex: 0 0 290px;
    display: flex; flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
    border-radius: 18px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    box-shadow: 0 6px 22px rgba(0,0,0,.08);
    text-decoration: none;
    color: var(--text-1);
    transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.live-card::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--card-grad, linear-gradient(135deg, rgba(255,107,26,.15), transparent 60%));
    opacity: .85;
    z-index: -1;
    transition: opacity .25s;
}
.live-card:hover {
    transform: translateY(-6px) rotate(-.4deg);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
    border-color: var(--card-accent, var(--rb-orange));
}
.live-card:hover::before { opacity: 1; }

/* Per-card color themes */
.live-card--pink   { --card-grad: linear-gradient(135deg, rgba(232,42,124,.18), transparent 60%); --card-accent: #e82a7c; }
.live-card--orange { --card-grad: linear-gradient(135deg, rgba(255,107,26,.18), transparent 60%); --card-accent: #ff6b1a; }
.live-card--purple { --card-grad: linear-gradient(135deg, rgba(192,103,255,.18), transparent 60%); --card-accent: #c067ff; }
.live-card--sky    { --card-grad: linear-gradient(135deg, rgba(56,189,248,.18), transparent 60%); --card-accent: #38bdf8; }
.live-card--lime   { --card-grad: linear-gradient(135deg, rgba(132,204,22,.18), transparent 60%); --card-accent: #84cc16; }

.live-card-date {
    display: flex; align-items: baseline; gap: 8px;
    flex-wrap: wrap;
}
.live-day {
    font-size: 2.4rem; font-weight: 900; letter-spacing: -1px; line-height: 1;
    background: var(--card-accent, var(--rb-orange));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.live-month {
    font-size: .9rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-2);
}
.live-soon {
    font-size: .72rem; font-weight: 800;
    padding: 3px 9px; border-radius: 999px;
    background: var(--card-accent, var(--rb-orange));
    color: #fff;
    margin-left: auto;
    animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
    50%      { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(255,255,255,0); }
}

.live-card-band {
    display: flex; align-items: center; gap: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.live-logo {
    width: 50px; height: 50px; flex-shrink: 0;
    border-radius: 12px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.live-logo img { width: 100%; height: 100%; object-fit: cover; }
.live-logo-fallback { font-size: 1.5rem; opacity: .5; }
.live-band-text { min-width: 0; flex: 1; }
.live-band-name {
    font-weight: 800; font-size: 1.05rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.live-band-genre {
    font-size: .82rem; color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.live-card-event { font-size: .9rem; }
.live-event-title { font-weight: 700; margin-bottom: 2px; }
.live-event-loc { color: var(--text-3); font-size: .85rem; }

.live-card-socials {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}
.live-card-socials a {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--bg-1);
    text-decoration: none;
    font-size: 1rem;
    transition: transform .15s, background .15s;
}
.live-card-socials a:hover {
    transform: scale(1.15) rotate(-4deg);
    background: var(--card-accent, var(--rb-orange));
}

@media (max-width: 640px) {
    .live-card { flex-basis: 250px; padding: 18px 16px; }
    .live-day { font-size: 2rem; }
}



/* ==========================================================================
   Les trois tuiles d'entrée (landing #tiles)
   --------------------------------------------------------------------------
   Trois blocs de même poids : aucune des trois propositions du site n'est
   secondaire. La tuile annonces est la plus « dense » volontairement — c'est
   celle qui montre du contenu réel, et donc celle qui prouve que le site vit.
   ========================================================================== */
.tiles-band { max-width:1200px; margin:0 auto; padding:46px 20px 40px; }
@media (max-width: 700px) { .tiles-band { padding-top:30px; } }
.tiles-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; align-items:stretch; }
@media (max-width: 1080px) { .tiles-grid { grid-template-columns:1fr; } }

.tile { position:relative; display:flex; flex-direction:column; padding:26px 24px 24px;
    border-radius:22px; background:var(--bg-2); border:1px solid var(--border);
    text-decoration:none; color:inherit; overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
/* Un liseré de couleur par tuile : trois univers, un seul site. */
.tile::before { content:''; position:absolute; inset:0 0 auto 0; height:5px; }
.tile--ads::before   { background:linear-gradient(90deg,#10b981,#34d399,#6ee7b7); }
.tile--scene::before { background:linear-gradient(90deg,#ff6b1a,#ffa94d,#f59e0b); }
.tile--app::before   { background:linear-gradient(90deg,#6c63ff,#a78bfa,#c459f2); }
/* Halo diffus dans le coin, qui s'allume au survol. */
.tile::after { content:''; position:absolute; width:280px; height:280px; right:-120px; top:-120px;
    border-radius:50%; opacity:.10; transition:opacity .25s ease, transform .25s ease; pointer-events:none; }
.tile--ads::after   { background:radial-gradient(circle,#10b981,transparent 68%); }
.tile--scene::after { background:radial-gradient(circle,#ff6b1a,transparent 68%); }
.tile--app::after   { background:radial-gradient(circle,#6c63ff,transparent 68%); }
.tile:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.13); border-color:transparent; }
.tile:hover::after { opacity:.20; transform:scale(1.12); }

.tile-head { display:flex; align-items:flex-start; gap:13px; margin-bottom:14px; }
.tile-ico { font-size:1.85rem; line-height:1.1; }
.tile-head h2 { margin:0; font-size:1.35rem; letter-spacing:-.4px; line-height:1.15; }
.tile-sub { margin:3px 0 0; font-size:.87rem; color:var(--text-3); }
/* Le compteur d'annonces, en gros, façon petite annonce justement. */
.tile-count { margin-left:auto; font-size:2.1rem; font-weight:900; line-height:1;
    letter-spacing:-1.5px; color:#10b981; }

.tile-body { color:var(--text-2); font-size:.94rem; line-height:1.55; margin:0 0 18px; flex:1; }

/* --- Le flux d'annonces : ça doit ressembler à un vrai site d'annonces --- */
.tile-feed { list-style:none; margin:0 0 16px; padding:0; flex:1; display:flex; flex-direction:column; gap:9px; }
.tile-feed li { padding:11px 13px; border-radius:12px; background:var(--bg-1);
    border:1px solid var(--border); transition:border-color .15s ease; }
.tile:hover .tile-feed li { border-color:rgba(16,185,129,.28); }
.feed-tag { display:inline-block; font-size:.66rem; font-weight:900; text-transform:uppercase;
    letter-spacing:.5px; padding:2px 8px; border-radius:999px; margin-right:7px; vertical-align:1px; }
.feed-tag--band  { background:rgba(108,99,255,.15); color:#6c63ff; }
.feed-tag--venue { background:rgba(255,107,26,.15); color:#ff6b1a; }
.feed-txt { font-weight:700; font-size:.92rem; }
.feed-meta { display:block; margin-top:4px; font-size:.78rem; color:var(--text-3); }
.feed-soon { font-style:normal; font-weight:800; color:#ff6b1a; margin-left:6px; }

.tile-go { font-weight:800; font-size:.93rem; color:#10b981; }

/* --- Tuile scène : trois compteurs cliquables --------------------------- */
.tile-links { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:14px; }
.tile-links a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:13px 6px;
    border-radius:14px; text-decoration:none; background:var(--bg-1); border:1px solid var(--border);
    color:var(--text-1); transition:border-color .15s ease, transform .15s ease; }
.tile-links a:hover { border-color:#ff6b1a; transform:translateY(-2px); }
.tile-links strong { font-size:1.5rem; font-weight:900; line-height:1; color:#ff6b1a; letter-spacing:-.8px; }
.tile-links span { font-size:.75rem; color:var(--text-3); text-align:center; line-height:1.2; }
.tile-cities { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.tile-cities a { padding:4px 11px; border-radius:999px; text-decoration:none; font-size:.78rem;
    font-weight:700; background:var(--bg-1); border:1px solid var(--border); color:var(--text-2); }
.tile-cities a:hover { border-color:#ff6b1a; color:#ff6b1a; }

/* --- Tuile appli -------------------------------------------------------- */
.tile-checks { list-style:none; margin:0 0 18px; padding:0; flex:1; }
.tile-checks li { position:relative; padding:5px 0 5px 26px; font-size:.93rem; color:var(--text-2); }
.tile-checks li::before { content:'✓'; position:absolute; left:0; top:5px;
    font-weight:900; color:#6c63ff; }
.tile-cta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tile-fine { margin:11px 0 0; font-size:.76rem; color:var(--text-3); }

@media (max-width: 560px) {
    .tiles-band { padding:4px 14px 30px; }
    .tile { padding:22px 18px 20px; border-radius:18px; }
    .tile-head h2 { font-size:1.22rem; }
}

/* Menu principal : les entrées de l'annuaire priment sur celles de l'appli,
   et restent visibles sur mobile — c'est par là qu'on entre dans le site. */
.landing-nav .nav-strong { font-weight:800; }
@media (max-width: 560px) { .landing-nav .nav-strong { padding-left:8px; padding-right:8px; font-size:.86rem; } }

/* La bande de photos vit maintenant sous les tuiles : dans le hero, elle
   repoussait l'entrée du site sous la ligne de flottaison. */
.hero-images--after { max-width:1200px; margin:0 auto 8px; padding:0 20px; }

/* Hero compacté : depuis que les trois tuiles sont l'entrée du site, elles
   doivent tenir dans le premier écran. Le hero annonce, les tuiles montrent. */
.hero { padding: 46px 24px 34px; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); margin: 0 0 14px; }
.hero p.lead { margin: 0 auto 4px; max-width: 760px; }
@media (max-width: 700px) { .hero { padding: 32px 18px 24px; } }

/* Mini-agenda dans la tuile scène : deux vraies dates plutôt qu'un vide. */
.tile-feed--gigs li { display:flex; align-items:center; gap:12px; }
.tile:hover .tile-feed--gigs li { border-color:rgba(255,107,26,.28); }
.feed-date { display:flex; flex-direction:column; align-items:center; line-height:1; flex-shrink:0;
    min-width:34px; }
.feed-date strong { font-size:1.15rem; font-weight:900; color:#ff6b1a; }
.feed-date em { font-style:normal; font-size:.66rem; text-transform:uppercase; letter-spacing:.4px;
    color:var(--text-3); margin-top:2px; }
.feed-gig { min-width:0; }
.feed-gig .feed-meta { margin-top:2px; }

/* Sur mobile, « Annonces » et « Agenda » restent visibles — ce sont les portes
   d'entrée du site. Elles ne tiennent pas sur une ligne avec les boutons, donc
   l'en-tête passe sur deux rangées plutôt que de déborder à l'horizontale. */
@media (max-width: 760px) {
    .landing-nav { flex-wrap: wrap; row-gap: 10px; justify-content: center; padding: 12px 14px; }
    .landing-nav > .row { flex-wrap: wrap; justify-content: center; width: 100%; gap: 4px !important; }
    .landing-nav .cta-group { margin-left: 0 !important; }
    .landing-nav .nav-strong { font-size: .84rem; padding: 6px 10px; }
    .landing-nav .btn { padding: 8px 14px; font-size: .86rem; }
}

/* Trois entrées + deux boutons + la marque ne tiennent pas sur une ligne à
   390 px : l'en-tête fait alors trois rangées, soit un cinquième de l'écran.
   Collé, il mangerait la page en permanence — sur mobile il défile donc avec
   le reste. Sur grand écran il reste collé, où il ne coûte que 70 px. */
@media (max-width: 760px) {
    .landing-header { position: static; }
}

/* ==========================================================================
   La frontière « appli groupe »
   --------------------------------------------------------------------------
   Le haut de la page parle à tout le monde ; à partir d'ici, uniquement aux
   groupes. Le fond violet — la couleur de la tuile « appli » — tient jusqu'au
   pied de page pour que la bascule se voie d'un coup d'oeil au défilement.
   ========================================================================== */
.app-zone {
    position: relative;
    /* Les deux halos marquent l'entree dans la zone ; le degrade vertical, lui,
       tient la teinte jusqu'en bas — sinon « Pret des la 1re minute » et les
       tarifs retombaient sur le fond neutre et la bascule s'y perdait. */
    background:
        radial-gradient(circle at 12% 0%, rgba(108,99,255,.15), transparent 42%),
        radial-gradient(circle at 88% 14%, rgba(196,89,242,.11), transparent 40%),
        linear-gradient(180deg,
            rgba(108,99,255,.15) 0%,
            rgba(167,139,250,.12) 42%,
            rgba(196,89,242,.13) 76%,
            rgba(108,99,255,.11) 100%),
        var(--bg-1);
    border-top: 1px solid var(--border);
}
/* Les sections de la zone n'ont plus de fond a elles : la teinte doit traverser.
   Seule la bande d'appel finale garde le sien, c'est son role. */
.app-zone .section { background: transparent; }
/* Le trait de bascule, sur toute la largeur : la ligne qu'on franchit. */
.app-zone::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #6c63ff, #a78bfa, #c459f2, #6c63ff);
}

.app-frontier { padding: 54px 24px 10px; text-align: center; }
.app-frontier-inner { max-width: 780px; margin: 0 auto; }
.app-badge {
    display: inline-block; padding: 7px 18px; border-radius: 999px;
    font-size: .82rem; font-weight: 900; letter-spacing: .6px; text-transform: uppercase;
    color: #fff; background: linear-gradient(135deg, #6c63ff, #c459f2);
    box-shadow: 0 8px 22px rgba(108,99,255,.32);
}
.app-frontier h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 900; letter-spacing: -.8px;
    line-height: 1.15; margin: 18px 0 12px;
}
.app-frontier p { color: var(--text-2); font-size: 1.05rem; margin: 0 0 26px; }
.app-frontier-cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 700px) {
    .app-frontier { padding: 38px 18px 6px; }
    .app-frontier h2 { margin: 14px 0 10px; }
}
/* La bannière porte déjà le titre de la bascule : la section qui suit n'a pas
   besoin de son padding haut complet. */
.app-frontier + .section { padding-top: 34px; }
/* L'en-tête collant recouvrait la pastille quand on arrive par le menu. */
.app-frontier { scroll-margin-top: 92px; }
@media (max-width: 760px) { .app-frontier { scroll-margin-top: 0; } }

/* ==========================================================================
   « Deux façons de commencer » — fusion des anciennes sections démo + showcase
   --------------------------------------------------------------------------
   Deux portes de poids différent : créer pour de vrai (carte pleine, bordure
   orange, badge) ou essayer sans rien laisser (carte sobre). L'image tient la
   colonne de gauche pour donner de l'air, et disparaît sous 900 px.
   ========================================================================== */
.start-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:26px;
    max-width:1120px; margin:0 auto; align-items:stretch; }
.start-visual { position:relative; border-radius:22px; overflow:hidden; min-height:100%;
    box-shadow:0 22px 50px rgba(0,0,0,.16); }
.start-visual img { width:100%; height:100%; object-fit:cover; display:block; }
/* Un voile violet pour raccorder l'image à la zone « appli ». */
.start-visual::after { content:''; position:absolute; inset:0;
    background:linear-gradient(160deg, rgba(108,99,255,.30), transparent 55%, rgba(196,89,242,.26)); }

.start-cards { display:flex; flex-direction:column; gap:18px; }
.start-card { position:relative; padding:26px 26px 24px; border-radius:20px;
    background:var(--bg-2); border:1px solid var(--border); }
.start-card--go { border-color:rgba(255,107,26,.42); box-shadow:0 14px 36px rgba(255,107,26,.13); }
.start-tag { position:absolute; top:-11px; left:26px; padding:4px 13px; border-radius:999px;
    font-size:.7rem; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
    color:#fff; background:var(--rb-gradient); }
.start-card h3 { margin:0 0 8px; font-size:1.3rem; letter-spacing:-.4px; }
.start-lead { color:var(--text-2); font-size:.96rem; line-height:1.55; margin:0 0 16px; }
.start-steps { list-style:none; margin:0 0 20px; padding:0; }
.start-steps li { position:relative; padding:5px 0 5px 26px; color:var(--text-2); font-size:.94rem; }
.start-steps li::before { content:'→'; position:absolute; left:0; top:5px; font-weight:900; color:#ff6b1a; }
.start-btn { width:100%; justify-content:center; text-align:center; }
.start-fine { margin:12px 0 0; font-size:.8rem; color:var(--text-3); line-height:1.5; text-align:center; }

.start-alert { padding:11px 14px; border-radius:11px; margin-bottom:16px; font-size:.9rem; line-height:1.5; }
.start-alert--busy { background:rgba(255,107,26,.08); border:1px solid rgba(255,107,26,.30); }
.start-alert--over { background:rgba(108,99,255,.08); border:1px solid rgba(108,99,255,.30); }

@media (max-width: 900px) {
    .start-grid { grid-template-columns:1fr; }
    .start-visual { min-height:200px; max-height:240px; }
}
@media (max-width: 560px) {
    .start-visual { display:none; }
    .start-card { padding:22px 18px 20px; }
}

/* --- La coupure entre les deux moitiés du site ---------------------------- */
/* La photo est fixée au viewport : au défilement, la page glisse dessus et la
   bascule se voit franchement. Le voile violet la raccorde à la zone appli qui
   commence juste dessous, sous le trait dégradé. */
.app-cut {
    height: 210px;
    background-image:
        linear-gradient(180deg, rgba(11,11,20,.34) 0%, rgba(108,99,255,.42) 60%, rgba(108,99,255,.60) 100%),
        url('../../images/band4.webp');
    background-attachment: fixed, fixed;
    background-position: center center, center 38%;
    background-size: cover, cover;
    background-repeat: no-repeat;
}
/* iOS ignore background-attachment:fixed (et sur petit écran l'effet ne sert à
   rien) : on repasse en défilement normal, avec un bandeau plus court. */
@media (max-width: 900px) {
    .app-cut { height: 130px; background-attachment: scroll, scroll; }
}
/* Quelqu'un qui a demandé moins d'animation ne veut pas d'un fond qui glisse. */
@media (prefers-reduced-motion: reduce) {
    .app-cut { background-attachment: scroll, scroll; }
}

/* La tuile annonces prend plus de largeur que les deux autres : c'est la seule
   qui montre du contenu réel, et c'est ce qu'on veut mettre en avant. */
.tiles-grid { grid-template-columns:1.25fr 1fr 1fr; }
@media (max-width: 1080px) { .tiles-grid { grid-template-columns:1fr; } }
/* Le type de l'annonce remplace le simple « groupe / lieu » : on veut savoir ce
   qui est cherché avant de savoir qui cherche. */
.tile-feed .feed-tag { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.feed-new { display:inline-block; font-size:.62rem; font-weight:900; text-transform:uppercase;
    letter-spacing:.5px; padding:2px 7px; border-radius:999px; vertical-align:1px;
    background:rgba(16,185,129,.16); color:#10b981; }
/* Badges sur une ligne, texte de l'annonce en dessous : accolés, le texte
   repartait au milieu de la ligne et se lisait mal. */
.tile--ads .feed-txt { display:block; margin-top:6px; }

/* Tuile annonces, état vide : les types possibles, en gris. Ce ne sont pas des
   annonces — d'où l'absence de fond de carte et de lien, pour qu'on ne les
   confonde pas avec du contenu réel. */
.tile-kinds { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.tile-kinds span { font-size:.78rem; font-weight:700; color:var(--text-3);
    padding:5px 11px; border-radius:999px; border:1px dashed var(--border); }

/* Entrée de menu correspondant à la page en cours. */
.landing-nav .nav-link.on { color:var(--rb-pink); }

/* ==========================================================================
   La barre des trois vues de la scène (agenda / groupes / lieux)
   --------------------------------------------------------------------------
   Trois onglets de même poids, chacun avec son compteur : on sait ce qu'on va
   trouver avant de cliquer. La vue active est pleine, les deux autres sobres.
   ========================================================================== */
.sc-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 16px; }
.sc-tab { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px;
    text-decoration:none; color:inherit; background:var(--bg-2); border:1px solid var(--border);
    transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.sc-tab:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.09); }
.sc-ico { font-size:1.4rem; line-height:1; flex-shrink:0; }
.sc-txt { display:flex; flex-direction:column; min-width:0; }
.sc-lbl { font-weight:900; font-size:1rem; line-height:1.15; }
.sc-sub { font-size:.76rem; color:var(--text-3); margin-top:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-n { margin-left:auto; font-weight:900; font-size:1.15rem; color:var(--text-3); }

/* Chaque vue garde sa couleur, la même que sur les tuiles de l'accueil. */
.sc-tab--agenda:hover  { border-color:#ff6b1a; }
.sc-tab--groupes:hover { border-color:#6c63ff; }
.sc-tab--lieux:hover   { border-color:#ff6b1a; }
.sc-tab.on { border-color:transparent; color:#fff; }
.sc-tab.on .sc-sub, .sc-tab.on .sc-n { color:rgba(255,255,255,.82); }
.sc-tab--agenda.on  { background:linear-gradient(135deg,#ff6b1a,#ffa94d); }
.sc-tab--groupes.on { background:linear-gradient(135deg,#6c63ff,#a78bfa); }
.sc-tab--lieux.on   { background:linear-gradient(135deg,#f59e0b,#ffa94d); }

/* Le rappel de la ville portée d'une vue à l'autre. */
.sc-city { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 18px;
    padding:9px 14px; border-radius:999px; font-size:.87rem; color:var(--text-2);
    background:var(--bg-2); border:1px solid var(--border); width:fit-content; }
.sc-city a { color:var(--rb-pink); text-decoration:none; font-weight:700; }

@media (max-width: 780px) {
    .sc-nav { grid-template-columns:1fr; gap:8px; }
    .sc-sub { white-space:normal; }
}

/* --- Agenda : les dates à retenir ---------------------------------------- */
/* Les trois prochaines, en grand. Elles ne s'affichent que sur la vue complète
   et à partir de trois dates — sinon elles répètent la liste juste dessous. */
.ag-hl { margin:6px 0 26px; }
.ag-hl h2 { font-size:1.15rem; margin:0 0 12px; }
.ag-hl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:13px; }
.ag-hl-card { display:block; padding:18px; border-radius:18px; text-decoration:none; color:inherit;
    background:var(--bg-2); border:1px solid var(--border); position:relative; overflow:hidden;
    transition:transform .15s ease, box-shadow .15s ease; }
.ag-hl-card::before { content:''; position:absolute; inset:0 0 auto 0; height:4px;
    background:linear-gradient(90deg,#ff6b1a,#ffa94d); }
.ag-hl-card:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.11); }
.ag-hl-top { display:flex; align-items:baseline; gap:6px; margin-bottom:10px; }
.ag-hl-day { font-size:2.1rem; font-weight:900; line-height:1; letter-spacing:-1.5px; color:#ff6b1a; }
.ag-hl-mon { font-size:.9rem; font-weight:800; color:var(--text-3); text-transform:uppercase; }
.ag-hl-soon { margin-left:auto; font-size:.7rem; font-weight:900; text-transform:uppercase;
    letter-spacing:.4px; padding:3px 9px; border-radius:999px;
    background:rgba(255,107,26,.14); color:#ff6b1a; }
.ag-hl-band { font-weight:900; font-size:1.08rem; line-height:1.2; }
.ag-hl-genre { font-size:.8rem; color:var(--text-3); margin-top:2px; }
.ag-hl-where { font-size:.86rem; color:var(--text-2); margin-top:10px; line-height:1.5; }

/* Retour depuis une fiche vers sa liste. Sans lui, une fiche atteinte par un
   lien d'email ou un moteur de recherche n'a aucune sortie. */
.pg-back { display:inline-flex; align-items:center; gap:6px; margin:0 0 16px;
    padding:8px 15px; border-radius:999px; text-decoration:none; font-weight:700;
    font-size:.88rem; color:var(--text-2); background:var(--bg-2); border:1px solid var(--border); }
.pg-back:hover { border-color:var(--rb-pink); color:var(--rb-pink); }

/* ---- Pagination des annuaires -------------------------------------------
   Des liens réels, pas un « voir plus » en JavaScript : chaque page doit
   s'indexer, c'est par là qu'un gérant de salle trouve sa fiche. */
.pg-bar { display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
    align-items:center; margin:34px 0 6px; }
.pg-num { display:inline-flex; align-items:center; justify-content:center;
    min-width:38px; height:38px; padding:0 12px; border-radius:10px;
    background:var(--bg-2); border:1px solid var(--border); color:var(--text-2);
    text-decoration:none; font-weight:700; font-size:.9rem;
    transition:border-color .14s, color .14s, background .14s; }
.pg-num:hover { border-color:var(--rb-orange, #ff8c1a); color:var(--text-1); }
.pg-on { background:var(--rb-gradient); border-color:transparent; color:#fff; cursor:default; }
.pg-on:hover { color:#fff; }
.pg-side { font-weight:800; }
.pg-off { opacity:.35; cursor:default; }
.pg-off:hover { border-color:var(--border); color:var(--text-2); }
.pg-gap { color:var(--text-3); padding:0 2px; }
@media (max-width:560px) {
    .pg-side { width:100%; order:2; }
    .pg-bar  { gap:5px; }
    .pg-num  { min-width:34px; height:34px; padding:0 9px; font-size:.85rem; }
}