/* Portail StreamBox — accueil des visiteurs, offres, pages de connexion, annonces, bannière cookies. */

/* ---- Accueil des visiteurs ---- */
.landing { min-height: 0; overflow: visible; display: block; }
.landing-top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: linear-gradient(180deg, rgba(0, 0, 0, .8), transparent); transition: background .2s; }
.landing-top.scrolled { background: rgba(0, 0, 0, .94); backdrop-filter: blur(6px); }
.landing-actions { display: flex; align-items: center; gap: 12px; }
.landing-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(100vh, 980px); min-height: min(100dvh, 980px);
  max-width: none; margin: 0; padding: calc(var(--topbar-h) + 40px) var(--gutter) 10vh; }
.landing-hero .wall, .landing-hero .landing-shade { z-index: 0; }
.landing-hero-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 28px; max-width: 1000px; margin-left: clamp(0px, 8vw, 200px); }
.landing-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.ld-section { max-width: 1400px; margin: 0 auto; padding: 80px var(--gutter); text-align: center; }
.ld-section h2 { margin: 0 0 24px; font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.02em; }
.ld-lead { max-width: 760px; margin: -6px auto 32px; color: var(--text-2); font-size: clamp(1rem, 1.6vw, 1.25rem); }

/* Offres */
.ld-period { display: inline-flex; gap: 6px; margin: 8px 0 44px; padding: 8px; border: 1px solid var(--accent); border-radius: 999px; }
.ld-period button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 130px; min-height: 52px; padding: 6px 26px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text); font-weight: 800; font-size: 16px; cursor: pointer; }
.ld-period button small { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ld-period button.active { background: var(--accent); color: var(--on-accent); }
.ld-plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 400px)); justify-content: center; gap: 24px; }
.ld-plan { display: flex; flex-direction: column; padding: 26px 24px 32px; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 16px; text-align: center; }
.ld-plan.popular { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 18px 50px color-mix(in srgb, var(--accent) 14%, transparent); }
.ld-plan-badge { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 30px; color: var(--text-2); font-size: 17px; font-weight: 600; }
.ld-plan-badge svg { width: 18px; height: 18px; color: var(--accent); }
.ld-plan h3 { margin: 12px 0 2px; font-size: 2.1rem; font-weight: 900; }
.ld-plan-price { display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.ld-plan-price strong { font-size: 1.9rem; font-weight: 900; }
.ld-plan-price span { font-size: 1.15rem; font-weight: 800; }
.ld-plan-vat { color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.ld-plan-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 22px 0 26px; }
.ld-plan-actions .btn { padding: 12px 18px; text-transform: none; letter-spacing: 0; font-size: 17px; }
.ld-plan-skip { color: var(--text-2); font-weight: 800; font-size: 16px; }
.ld-plan-skip:hover { color: var(--text); }
.ld-plan-features { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; text-align: left; font-size: 16px; }
.ld-plan-features li { display: flex; gap: 12px; }
.ld-plan-features svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.ld-plans-note { max-width: 780px; margin: 40px auto 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* Nouveautés */
.ld-row-wrap { position: relative; }
.ld-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(140px, 15vw, 210px); gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 10px; text-align: left; scrollbar-width: none; }
.ld-row::-webkit-scrollbar { display: none; }
.ld-title { display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; }
.ld-title-img { aspect-ratio: 2 / 3; overflow: hidden; border-radius: 4px; background: var(--surface-2); }
.ld-title-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.ld-title:hover .ld-title-img img { transform: scale(1.04); }
.ld-title strong { font-size: 15px; font-weight: 600; line-height: 1.35; }
.ld-title small { color: var(--muted); font-size: 14px; }
.ld-arrow { position: absolute; top: 38%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: rgba(0, 0, 0, .7); color: #fff; cursor: pointer; }
.ld-arrow.prev { left: -12px; }
.ld-arrow.next { right: -12px; }
.ld-arrow svg { width: 26px; height: 26px; }

/* Déjà membre, avantages, FAQ, aide */
.ld-member-btn { min-width: min(260px, 100%); text-transform: none; letter-spacing: 0; font-size: 17px; }
.ld-compare { gap: 10px; text-transform: none; letter-spacing: 0; font-size: 16px; }
.ld-compare svg { width: 18px; height: 18px; }
.ld-benefits-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 36px 28px; margin: 56px 0 0; padding: 0; list-style: none; }
.ld-benefits-list li { display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--text-2); font-size: 16px; line-height: 1.4; }
.ld-benefit-icon svg { width: 64px; height: 64px; color: var(--text-2); }
.ld-faq-list { max-width: 860px; margin: 0 auto; text-align: left; }
.ld-faq details { border-bottom: 1px solid var(--line); }
.ld-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; list-style: none; cursor: pointer;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem); font-weight: 800; }
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary svg { flex: none; width: 26px; height: 26px; transition: transform .2s; }
.ld-faq details[open] summary svg { transform: rotate(45deg); }
.ld-faq-answer { padding: 0 0 22px; color: var(--text-2); font-size: 16px; line-height: 1.6; }
.ld-faq-answer p { margin: 0 0 10px; }
.ld-help p { margin: -8px 0 24px; color: var(--text-2); font-size: 18px; }
.ld-help .btn { text-transform: none; letter-spacing: 0; font-size: 16px; padding: 10px 26px; }

@media (max-width: 640px) {
  .landing-actions .btn { padding: 8px 14px; font-size: 12px; }
  .ld-section { padding: 56px var(--gutter); }
  .ld-arrow { display: none; }
  .ld-period button { min-width: 0; padding: 6px 18px; }
}

/* ---- Connexion, mot de passe oublié ---- */
.auth { display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-h)); min-height: calc(100dvh - var(--topbar-h)); background: var(--bg); }
/* Barre fixe en haut, comme sur le reste du site (#app réserve sa hauteur) */
.auth-top { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: center; height: var(--topbar-h); padding: 0 var(--gutter); background: var(--surface); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.auth-top .logo { font-size: 26px; }
.auth-main { flex: 1; display: flex; justify-content: center; padding: clamp(48px, 10vh, 110px) 16px 48px; }
.auth-card { display: flex; flex-direction: column; gap: 18px; width: min(490px, 100%); text-align: center; }
.auth-card h1 { margin: 0 0 30px; font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 600; }
.auth-form { display: flex; flex-direction: column; gap: 30px; text-align: left; }
.line-field { position: relative; display: block; }
.line-field input { width: 100%; padding: 26px 40px 8px 0; border: 0; border-bottom: 2px solid var(--line); background: transparent; color: var(--text); font-size: 17px; }
.line-field input:focus { outline: none; border-color: var(--accent); }
.line-field > span { position: absolute; left: 0; top: 24px; color: var(--text); font-size: 18px; pointer-events: none; transition: top .15s, font-size .15s, color .15s; }
.line-field input:focus + span, .line-field input:not(:placeholder-shown) + span { top: 0; color: var(--muted); font-size: 13px; }
.line-eye { position: absolute; right: 0; bottom: 6px; display: inline-flex; padding: 4px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.line-eye svg { width: 22px; height: 22px; }
.auth-submit { width: 100%; padding: 14px; border-color: var(--line); background: transparent; color: var(--muted); font-size: 15px; }
.auth-submit:not(:disabled), .auth-submit.ready { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.auth-submit:disabled { cursor: not-allowed; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; color: var(--muted); }
.auth-links a { color: var(--accent); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }
.auth-links a:hover { color: var(--accent-hover); }
.auth-lead, .auth-note { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.auth-note { margin-top: 18px; color: var(--muted); font-size: 13px; text-align: center; }
.auth-hint { margin: -14px 0 0; color: var(--muted); font-size: 13px; }
.auth-generate { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; }
.auth-done { display: flex; gap: 14px; align-items: flex-start; text-align: left; color: var(--text-2); }
.auth-done p { margin: 0; line-height: 1.6; }
.auth-done svg { flex: none; width: 28px; height: 28px; color: #22c55e; }
.auth-footer { width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px var(--gutter) 28px; }
.auth-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.auth-legal a, .footer-cookies { padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 15px; cursor: pointer; }
.auth-legal a:hover, .footer-cookies:hover { color: var(--text); }
.footer-legal .footer-cookies { color: var(--muted); }
.auth-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 22px; }

/* ---- Annonce importante ---- */
.announce { position: fixed; top: 0; left: 0; right: 0; z-index: 80; max-height: 80vh; overflow-y: auto; padding: 28px var(--gutter); box-shadow: 0 10px 40px rgba(0, 0, 0, .45); }
.announce-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 1180px; margin: 0 auto; text-align: center; }
.announce p { margin: 0; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.5; white-space: pre-line; }
.announce-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.announce-btn { padding: 12px 30px; background: var(--accent); color: var(--on-accent); }
.announce-btn:hover { background: var(--accent-hover); }
.announce-link { padding: 12px 24px; border-color: currentColor; background: transparent; color: inherit; }
.announce.tone-info { background: #ece1c3; color: #1d1d1f; }
.announce.tone-warning { background: #fde68a; color: #1c1917; }
.announce.tone-danger { background: #991b1b; color: #fff; }
.announce.tone-success { background: #166534; color: #fff; }

/* ---- Cookies ---- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; padding: 26px var(--gutter); background: #0d0d10; border-top: 1px solid var(--line); box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); }
.consent-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; max-width: 1400px; margin: 0 auto; }
.consent p { flex: 1 1 520px; margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.consent a, .consent-more { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.consent-btn { padding: 12px 18px; background: var(--accent); color: var(--on-accent); font-size: 14px; letter-spacing: 0; text-transform: none; }
.consent-btn:hover { background: var(--accent-hover); }
.consent-modal { width: min(560px, calc(100vw - 32px)); }
.consent-card { gap: 6px; }
.consent-intro { margin: 0 0 10px; color: var(--text-2); font-size: 14px; }
.consent-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); text-align: left; }
.consent-row p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.consent-always { color: var(--accent); font-size: 13px; font-weight: 700; white-space: nowrap; }
.consent-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.consent-dialog-actions .btn { text-transform: none; letter-spacing: 0; font-size: 14px; }
.switch { appearance: none; position: relative; flex: none; width: 44px; height: 24px; margin: 0; border-radius: 999px; background: var(--line); cursor: pointer; transition: background .15s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(20px); }

/* Case « nouveautés et offres » (essai gratuit) */
.check-line { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 14px; cursor: pointer; }
.check-line input { margin-top: 3px; accent-color: var(--accent); }

/* ---- Bouton WhatsApp (au-dessus de la bulle de chat si elle est à droite) ---- */
.wa-float { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 59;
  display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transition: transform .15s; }
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 32px; height: 32px; }
.wa-float.left { right: auto; left: max(16px, env(safe-area-inset-left)); }
body.has-chat .wa-float:not(.left) { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 70px); }
body.chat-open .wa-float:not(.left) { display: none; }
.wa-label { position: absolute; right: calc(100% + 12px); padding: 7px 12px; border-radius: 8px; background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateX(6px); transition: opacity .15s, transform .15s; }
.wa-float.left .wa-label { right: auto; left: calc(100% + 12px); transform: translateX(-6px); }
.wa-float:hover .wa-label, .wa-float:focus-visible .wa-label { opacity: 1; transform: none; }
@media (hover: none) { .wa-label { display: none; } }