/* ============================================================================
   QLOA Affiliation — landing.css (page marketing publique `/`)

   ADN visuel repris de qloa.fr (repo local Qloa-Astro : src/styles/global.css
   + qloa-mesh.css + src/components/home2026/home2026.scoped.css — palette,
   mesh de fond SINOPIA, nav pill flottante, boutons pill, eyebrow badges).
   Recréé ICI en CSS autonome pour Qloa-Affiliation — aucune dépendance/copie
   du code Astro, uniquement les tokens (couleurs, radius, easing, ombres).
   JAMAIS de couleur/spacing inventé hors de cette palette.
   ============================================================================ */

:root {
  --qafl-cream: #f7f4ef;
  --qafl-cream-50: #fbfaf6;
  --qafl-cream-100: #f2eee6;
  --qafl-ink: #121419;
  --qafl-ink-deep: #0c0e12;
  --qafl-sinopia: #d54008;
  --qafl-orange: #f66529;
  --qafl-orange-bright: #fa8455;
  --qafl-gradient-brand: linear-gradient(135deg, #d54008 0%, #e74d10 32%, #f66529 58%, #fa8455 100%);
  --qafl-shadow-md: 0 6px 20px rgba(18, 20, 25, 0.09);
  --qafl-shadow-lg: 0 16px 40px rgba(18, 20, 25, 0.12);
  --qafl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-qaff-page="public"] {
  background-color: var(--qafl-cream);
  color: var(--qafl-ink);
  overflow-x: hidden;
}

/* ── Fond mesh signature — 2 couches radiales contra-rotatives, version
   sobre (opacités réduites) pour une landing lisible (pas de dashboard). ── */
.qafl-mesh {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--qafl-cream);
}
.qafl-mesh::before,
.qafl-mesh::after {
  content: '';
  position: absolute;
  inset: -45%;
  background-repeat: no-repeat;
  will-change: transform;
}
.qafl-mesh::before {
  background-image:
    radial-gradient(46vw 44vw at 24% 22%, rgba(213, 64, 8, 0.1) 0%, transparent 60%),
    radial-gradient(44vw 42vw at 78% 30%, rgba(246, 101, 41, 0.14) 0%, transparent 56%);
  animation: qaflSpinA 42s linear infinite;
}
.qafl-mesh::after {
  background-image:
    radial-gradient(52vw 48vw at 70% 76%, rgba(213, 64, 8, 0.08) 0%, transparent 58%),
    radial-gradient(42vw 40vw at 86% 88%, rgba(18, 20, 25, 0.05) 0%, transparent 52%);
  animation: qaflSpinB 60s linear infinite reverse;
}
@keyframes qaflSpinA {
  0% { transform: rotate(0deg) translate(0, 0) scale(1.1); }
  50% { transform: rotate(180deg) translate(5%, -4%) scale(1.26); }
  100% { transform: rotate(360deg) translate(0, 0) scale(1.1); }
}
@keyframes qaflSpinB {
  0% { transform: rotate(0deg) translate(0, 0) scale(1.16); }
  50% { transform: rotate(180deg) translate(-6%, 5%) scale(1); }
  100% { transform: rotate(360deg) translate(0, 0) scale(1.16); }
}

/* ── Nav pill flottante (glass sur le hero sombre, solide crème au scroll) ── */
.qafl-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 22px);
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: rgba(18, 20, 25, 0.85);
  color: rgba(247, 244, 239, 0.9);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(247, 244, 239, 0.14);
  box-shadow: var(--qafl-shadow-md);
  transition: background 0.3s var(--qafl-ease-out), border-color 0.3s, color 0.3s;
  width: max-content;
  max-width: calc(100vw - 24px);
}
.qafl-nav.qafl-solid {
  background: rgba(247, 244, 239, 0.92);
  color: rgba(18, 20, 25, 0.75);
  border-color: rgba(18, 20, 25, 0.08);
}
.qafl-nav a { color: inherit; transition: color 0.2s; }
.qafl-nav a:hover { color: var(--qafl-orange); }

/* ── Boutons pill (ADN qloa.fr : primary orange / dark / ghost) ── */
.qafl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  padding: 12px 22px;
  border: 1px solid transparent;
  transition: transform 0.2s var(--qafl-ease-out), background 0.2s, color 0.2s, border-color 0.2s;
}
.qafl-btn:hover { transform: translateY(-2px); }
.qafl-btn--primary { background: var(--qafl-orange); color: #fff; }
.qafl-btn--primary:hover { background: var(--qafl-sinopia); }
.qafl-btn--dark { background: var(--qafl-ink); color: var(--qafl-cream); }
.qafl-btn--dark:hover { background: var(--qafl-orange); color: #fff; }
.qafl-btn--ghost-light { background: rgba(247, 244, 239, 0.06); color: var(--qafl-cream); border-color: rgba(247, 244, 239, 0.32); }
.qafl-btn--ghost-light:hover { background: rgba(247, 244, 239, 0.14); }
.qafl-btn--ghost-dark { background: transparent; color: var(--qafl-ink); border-color: rgba(18, 20, 25, 0.2); }
.qafl-btn--ghost-dark:hover { border-color: var(--qafl-ink); }
.qafl-btn--nav-cta, .qafl-nav .qafl-btn--nav-cta { background: var(--qafl-cream); color: var(--qafl-ink); padding: 9px 16px; font-size: 13.5px; }
.qafl-nav.qafl-solid .qafl-btn--nav-cta { background: var(--qafl-ink); color: var(--qafl-cream); }
.qafl-btn--nav-cta:hover, .qafl-nav .qafl-btn--nav-cta:hover { background: var(--qafl-orange); color: #fff; }

/* ── Eyebrow (badge mono uppercase, marqueur récurrent des sections) ── */
.qafl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.qafl-eyebrow--on-ink { background: rgba(247, 244, 239, 0.08); border: 1px solid rgba(247, 244, 239, 0.18); color: rgba(247, 244, 239, 0.85); }
.qafl-eyebrow--on-paper { background: rgba(18, 20, 25, 0.05); border: 1px solid rgba(18, 20, 25, 0.09); color: rgba(18, 20, 25, 0.6); }
.qafl-eyebrow .qafl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--qafl-orange); flex: none; }

.qafl-display { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.02em; }
.qafl-mono { font-family: 'Space Mono', ui-monospace, monospace; }

/* Liseré dégradé de marque (footer) */
.qafl-brand-strip { height: 6px; background: var(--qafl-gradient-brand); }

/* ── Menu mobile plein écran ── */
.qafl-mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: var(--qafl-cream);
  display: flex;
  flex-direction: column;
  padding: 100px 28px 40px;
  overflow-y: auto;
}
.qafl-mobile-panel.hidden { display: none; }
/* Liens du menu SEULEMENT (nav a) — jamais les boutons CTA (piège spécificité :
   .qafl-mobile-panel a écrasait la couleur cream du .qafl-btn--dark → texte invisible) */
.qafl-mobile-panel nav a {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--qafl-ink);
  padding: 14px 0;
  border-bottom: 1px solid rgba(18, 20, 25, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .qafl-mesh::before,
  .qafl-mesh::after { animation: none; }
  .qafl-btn:hover { transform: none; }
}

/* Logo QLOA réel — blanc sur nav glass/ink, couleur sur nav solid cream */
.qafl-logo--dark { display: none; }
.qafl-nav.qafl-solid .qafl-logo--white { display: none; }
.qafl-nav.qafl-solid .qafl-logo--dark { display: inline-block; }

/* ============================================================================
   Programme Partenaires — composants ajoutés pour la refonte landing (garde
   strictement la palette --qafl-* ci-dessus, aucune couleur/radius nouveau).
   ============================================================================ */

/* ── Status pill (badges mockups "Cookie 90j · Actif", "Confirmé"...) ── */
.qafl-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.qafl-status-pill--live { background: rgba(213, 64, 8, 0.08); color: var(--qafl-sinopia); }
.qafl-status-pill--live .qafl-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--qafl-orange); flex: none; }
.qafl-status-pill--muted { background: rgba(18, 20, 25, 0.05); color: rgba(18, 20, 25, 0.4); }

/* ── Persona checklist ("Fait pour vous si…") ── */
.qafl-persona {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--qafl-cream-50);
  border: 1px solid rgba(18, 20, 25, 0.07);
}
.qafl-persona i { color: var(--qafl-sinopia); flex: none; margin-top: 1px; }

/* ── Channel chip (étape 02 "Partagez votre lien") ── */
.qafl-channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(18, 20, 25, 0.1);
  font-size: 13px;
  font-weight: 500;
}

/* ── Figure géante (modèles de commission + simulateur) ── */
.qafl-figure {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--qafl-sinopia);
}
.qafl-figure--model { font-size: clamp(46px, 6.6vw, 68px); }

/* ── Simulateur de gains ── */
.qafl-sim-figure {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5.6vw, 56px);
  letter-spacing: -0.03em;
  line-height: 1;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: var(--qafl-ink);
  transition: color 0.2s, transform 0.2s var(--qafl-ease-out);
}
.qafl-sim-figure:hover { color: var(--qafl-sinopia); transform: translateY(-2px); }
.qafl-sim-profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(18, 20, 25, 0.14);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: rgba(18, 20, 25, 0.55);
  cursor: pointer;
  transition: background 0.2s var(--qafl-ease-out), color 0.2s, border-color 0.2s;
}
.qafl-sim-profile:hover { border-color: rgba(18, 20, 25, 0.3); }
.qafl-sim-profile.is-active { background: var(--qafl-ink); color: var(--qafl-cream); border-color: var(--qafl-ink); }

/* ── Console QLOA (mockup produit) ── */
.qafl-console-frame {
  background: #fff;
  border: 1px solid rgba(18, 20, 25, 0.08);
  box-shadow: var(--qafl-shadow-lg);
  overflow: hidden;
}
.qafl-console-topbar {
  background: var(--qafl-cream-100);
  border-bottom: 1px solid rgba(18, 20, 25, 0.06);
}
.qafl-console-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(18, 20, 25, 0.15); flex: none; }
.qafl-console-kpi {
  border-radius: 18px;
  background: var(--qafl-cream-50);
  border: 1px solid rgba(18, 20, 25, 0.06);
  padding: 14px;
}
.qafl-console-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--qafl-ink);
  color: var(--qafl-cream);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.qafl-console-table th { font-family: 'Space Mono', ui-monospace, monospace; }

@media (max-width: 640px) {
  .qafl-figure--model { font-size: clamp(40px, 12vw, 52px); }
}

/* Vidéo hero (canon maquette) — coupée si reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .qafl-hero-video { display: none; }
}

/* ── Formulaire de contact éditeurs (section #editeurs, fond ink) ──
   Tokens repris de design-system-components.md (patterns Forms — bg
   white/5, border white/10, focus border/ring blanc) adaptés à l'accent
   qafl (ring orange au focus, seule dérogation à la doc générique). */
.qafl-contact-card {
  background: rgba(247, 244, 239, 0.04);
  border: 1px solid rgba(247, 244, 239, 0.12);
}
.qafl-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(247, 244, 239, 0.05);
  border: 1px solid rgba(247, 244, 239, 0.14);
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--qafl-cream);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.qafl-input::placeholder { color: rgba(247, 244, 239, 0.35); }
.qafl-input:hover { border-color: rgba(247, 244, 239, 0.24); }
.qafl-input:focus {
  outline: none;
  border-color: rgba(246, 101, 41, 0.55);
  box-shadow: 0 0 0 3px rgba(246, 101, 41, 0.16);
}
.qafl-checkbox {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  accent-color: var(--qafl-orange);
  cursor: pointer;
}
/* Honeypot anti-spam — invisible visuellement ET hors flux de lecture,
   jamais `display:none`/`visibility:hidden` (certains bots les ignorent). */
.qafl-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#qafl-contact-status.is-success { color: var(--qafl-orange-bright); }
#qafl-contact-status.is-error { color: #ff8a8a; }
#qafl-contact-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }