:root {
  --brand-50: #eef4ff;
  --brand-100: #dce8ff;
  --brand-400: #5b8def;
  --brand-500: #3568e0;
  --brand-600: #254fc7;
  --brand-700: #1c3d9e;
  --brand-800: #152f78;
  --brand-900: #0e2058;
  --teal-400: #3fc9c0;
  --teal-500: #1fada3;
  --teal-600: #178c85;
  --accent-violet: #8b6bf0;
  --ink: #0f172a;
  --ink-soft: #475569;
  --paper: #ffffff;
  --paper-soft: #f8fafc;
  --line: #e2e8f0;
  --shadow-card: 0 1px 2px 0 rgba(15, 32, 88, 0.06), 0 1px 3px 0 rgba(15, 32, 88, 0.08);
  --shadow-pop: 0 8px 24px -4px rgba(15, 32, 88, 0.18);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* --- Nav --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* Rapporté explicitement le 20 août 2026 ("TDEB tout à gauche") : `.container` (partagé avec le
   reste du site) plafonne à 1120px et se centre — sur un écran large (1920px et plus), ça laisse
   plusieurs centaines de pixels de vide de chaque côté de la barre de nav, avec le logo et les
   liens visuellement regroupés au centre-gauche au lieu de coller aux bords. Cette barre est
   volontairement "plein cadre" (pas de max-width) : le logo reste toujours proche du bord gauche
   réel de la fenêtre, quelle que soit sa largeur — seul le contenu de page en dessous (hero,
   sections...) garde la largeur de lecture confortable de `.container`. */
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 68px; max-width: none; }
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; }
.nav-brand img { width: 32px; height: 32px; border-radius: 9px; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.nav-links a:hover { color: var(--brand-700); }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.lang-switch { position: relative; }
.lang-switch-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-800);
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 5px 10px;
  cursor: pointer;
  line-height: 1;
}
.lang-switch-btn:hover { border-color: rgba(0,0,0,.24); }
.lang-flag { display: inline-flex; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex-shrink: 0; }
.lang-flag svg { display: block; }
.lang-caret { font-size: 10px; color: var(--ink-soft); }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 4px;
  min-width: 140px;
  z-index: 40;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.lang-option:hover { background: rgba(0,0,0,.05); }
.lang-option[aria-selected="true"] { background: var(--brand-50, rgba(0,85,164,.08)); color: var(--brand-800); }
.nav-account {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-800);
  text-decoration: none;
  white-space: nowrap;
}
.nav-account:hover { color: var(--brand-700); text-decoration: underline; }
.nav-cta {
  background: linear-gradient(90deg, var(--brand-800), var(--teal-600));
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}
.nav-cta:hover { opacity: .92; }

/* --- Hero --- */
.hero {
  padding: 88px 0 72px;
  background:
    radial-gradient(600px 300px at 85% -10%, rgba(63, 201, 192, 0.16), transparent 60%),
    radial-gradient(500px 260px at 5% 0%, rgba(37, 79, 199, 0.12), transparent 60%);
}
.hero-centered { display: flex; flex-direction: column; align-items: center; text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--teal-500); }
h1 {
  font-size: 64px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: var(--brand-900);
}
h1 span { background: linear-gradient(90deg, var(--brand-700), var(--teal-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 18px; color: var(--ink-soft); margin: 0 0 30px; max-width: 52ch; margin-left: auto; margin-right: auto; }
.hero-links { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 0 0 22px; }
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.hero-link:hover { border-color: var(--brand-600); transform: translateY(-1px); }
.hero-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.btn-primary {
  background: linear-gradient(90deg, var(--brand-800), var(--teal-600));
  color: #fff;
  padding: 14px 26px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: var(--shadow-pop);
  border: none;
  cursor: pointer;
}
.btn-primary:hover { opacity: .93; }
.btn-ghost {
  color: var(--brand-800);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 14px 6px;
}
.hero-note { margin-top: 16px; font-size: 13px; color: #94a3b8; }
.hero-video {
  display: block;
  width: 100%;
  max-width: 820px;
  margin: 28px auto 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  background: #000;
}

/* --- Mock panel (illustration CSS pure, pas de vraie capture d'écran) --- */
.mock {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}
.mock-header {
  background: linear-gradient(90deg, var(--brand-800), var(--brand-700), var(--teal-600));
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mock-header .chip { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.35); }
.mock-header .tabs { margin-left: 10px; display: flex; gap: 6px; }
.mock-header .tabs span { font-size: 11px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.14); padding: 4px 9px; border-radius: 999px; font-weight: 600; }
.mock-header .tabs span.on { background: #fff; color: var(--brand-800); }
.mock-body { padding: 18px; display: grid; gap: 10px; }
.mock-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-soft);
}
.mock-row .thumb { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, var(--brand-100), var(--teal-400)); }
.mock-row .txt b { display: block; font-size: 13px; color: var(--ink); }
.mock-row .txt small { font-size: 12px; color: var(--ink-soft); }
.mock-row .tag { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.mock-row .tag.green { background: #dcfce7; color: #15803d; }
.mock-row .tag.blue { background: var(--brand-50); color: var(--brand-700); }
.mock-row .tag.amber { background: #fef3c7; color: #b45309; }

/* --- Sections --- */
section { padding: 88px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.section-head .eyebrow { margin-bottom: 14px; }
h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--brand-900); }
.section-head p { color: var(--ink-soft); font-size: 16px; margin: 0; }

.problem { background: var(--paper-soft); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.problem-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.problem-card .num { font-size: 13px; font-weight: 800; color: var(--teal-600); margin-bottom: 10px; }
.problem-card h3 { font-size: 17px; margin: 0 0 8px; }
.problem-card p { font-size: 14px; color: var(--ink-soft); margin: 0; }

.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow-card);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-700), var(--teal-500));
  color: #fff;
  margin-bottom: 16px;
}
.feature-card h3 { font-size: 16px; margin: 0 0 8px; }
.feature-card p { font-size: 14px; color: var(--ink-soft); margin: 0; }

.how { background: var(--paper-soft); }
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.how-step { position: relative; padding-top: 8px; }
.how-step .step-num {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-800), var(--teal-600));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
  margin-bottom: 14px;
}
.how-step h3 { font-size: 15px; margin: 0 0 6px; }
.how-step p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

.markets { text-align: center; }
.markets .chips { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.markets .chips span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-800);
  background: var(--paper);
}

/* --- Tarifs --- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.price-card-highlight {
  border-color: var(--teal-500);
  box-shadow: var(--shadow-pop);
  transform: translateY(-8px);
  background: linear-gradient(180deg, var(--brand-50), var(--paper) 40%);
}
.price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--brand-800), var(--teal-600));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.price-card-head { margin-bottom: 18px; }
.price-name { display: block; font-size: 19px; font-weight: 800; color: var(--brand-900); }
.price-tagline { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.price-amount { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.price-now { font-size: 34px; font-weight: 800; color: var(--brand-900); letter-spacing: -0.01em; }
.price-period { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.price-was { font-size: 13px; color: var(--teal-600); font-weight: 700; margin-bottom: 22px; }
/* Mention d'essai gratuit (plan Starter uniquement) — volontairement explicite sur ce qui sera
   prélevé et quand : un essai qui se transforme en abonnement payant doit être annoncé, pas
   découvert sur le relevé bancaire. */
.price-trial {
  margin: -12px 0 20px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(13, 148, 136, 0.08);
  border: 1px solid rgba(13, 148, 136, 0.22);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--teal-600);
  font-weight: 600;
}
.price-was .strike { color: #94a3b8; text-decoration: line-through; font-weight: 600; margin-right: 6px; }
.price-features { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.price-features li { font-size: 14px; color: var(--ink); padding-left: 24px; position: relative; }
.price-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal-600);
  font-weight: 800;
  font-size: 13px;
}
.price-cta {
  text-align: center;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: 1.5px solid var(--brand-800);
  color: var(--brand-800);
  margin-bottom: 12px;
}
.price-cta:hover { background: var(--brand-50); }
.price-cta-solid {
  background: linear-gradient(90deg, var(--brand-800), var(--teal-600));
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-card);
}
.price-cta-solid:hover { opacity: .92; }
.price-limited { text-align: center; font-size: 12px; font-weight: 700; color: #b45309; }
.price-slots {
  display: block;
  text-align: center;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #b91c1c;
}
.price-slots::before { content: "● "; font-size: 8px; vertical-align: middle; }

.waitlist {
  background: linear-gradient(120deg, var(--brand-900), var(--brand-800) 55%, var(--teal-600));
  color: #fff;
  border-radius: 24px;
  margin: 0 24px;
  padding: 64px 40px;
  text-align: center;
}
.waitlist h2 { color: #fff; }
.waitlist p { color: rgba(255,255,255,.78); max-width: 52ch; margin: 0 auto 30px; }
.waitlist-form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.waitlist-form input {
  flex: 1;
  min-width: 220px;
  padding: 13px 16px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  outline: none;
}
.waitlist-form button {
  background: #fff;
  color: var(--brand-800);
  border: none;
  padding: 13px 22px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.waitlist-form button:hover { opacity: .9; }
.waitlist-note { margin-top: 16px; font-size: 12.5px; color: rgba(255,255,255,.6); }

/* --- Mon compte --- */
.account-section { padding: 64px 0; min-height: 60vh; }
.account-container { display: flex; justify-content: center; }
.account-card {
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.account-card.admin-account-card { max-width: 820px; }
.account-card h1 { font-size: 22px; font-weight: 800; color: var(--brand-900); margin: 0 0 6px; }
.account-title-row { display: flex; align-items: center; gap: 10px; }
.account-title-row h1 { margin: 0 0 6px; }
.account-admin-badge {
  margin-bottom: 6px;
  background: linear-gradient(90deg, var(--brand-800), var(--teal-600));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 999px;
}
.account-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 24px; }
.account-form { display: flex; flex-direction: column; gap: 14px; }
.account-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.account-form input {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  outline: none;
}
.account-form input:focus { border-color: var(--brand-600); }
/* Renoncement explicite au droit de rétractation à l'inscription (art. L221-28 13° du Code de la
   consommation) — demandé explicitement le 20 août 2026. `.account-form label` par défaut empile
   son contenu en colonne (adapté aux champs texte), inadapté à une case à cocher + son texte :
   surchargé en ligne, case alignée avec la première ligne de texte plutôt que centrée sur tout le
   bloc (plus lisible sur un texte de plusieurs lignes qu'un alignement vertical centré). */
.consent-checkbox {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--ink-soft) !important;
  line-height: 1.5;
}
.consent-checkbox input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 15px; height: 15px; accent-color: var(--brand-700); cursor: pointer; }
.consent-checkbox a { color: var(--brand-700); }
.account-form button {
  margin-top: 4px;
  background: linear-gradient(90deg, var(--brand-800), var(--teal-600));
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.account-form button:hover { opacity: .92; }
.account-form button:disabled { opacity: .6; cursor: default; }
.account-error { color: #dc2626; font-size: 13px; font-weight: 600; margin: 0; }
.account-note { margin-top: 18px; font-size: 12.5px; color: #94a3b8; }

.account-plan-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.account-plan-label { font-size: 12px; color: var(--ink-soft); margin: 0 0 4px; font-weight: 600; }
.account-plan-name { font-size: 18px; font-weight: 800; color: var(--brand-900); margin: 0; }
.account-status { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: #dcfce7; color: #15803d; white-space: nowrap; }
.account-actions { display: flex; flex-direction: column; gap: 10px; }
.account-actions .btn-primary,
.account-actions .btn-ghost { width: 100%; text-align: center; box-shadow: none; }
.account-actions .btn-ghost { border: 1.5px solid var(--brand-800); border-radius: 10px; padding: 11px 18px; color: var(--brand-800); }
.change-plan-panel { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.change-plan-label { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.change-plan-options { display: flex; flex-wrap: wrap; gap: 8px; }
.change-plan-options .btn-ghost { flex: 1 1 auto; box-shadow: none; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 14px; font-size: 13px; color: var(--ink); }
.change-plan-options .btn-ghost:hover { border-color: var(--brand-600); color: var(--brand-700); }
.change-plan-options .btn-ghost:disabled { opacity: .6; cursor: default; }
.referral-link-row { display: flex; gap: 8px; margin-top: 10px; }
.referral-link-row input {
  flex: 1 1 auto;
  min-width: 0;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--bg-soft, #f8fafc);
}
.referral-link-row .btn-ghost { flex: none; box-shadow: none; border: 1.5px solid var(--brand-800); border-radius: 10px; padding: 9px 16px; color: var(--brand-800); }
.referral-stats { margin-top: 10px; font-size: 12.5px; color: var(--ink-soft); }
.referral-stats span#referral-count, .referral-stats span#referral-owed, .referral-stats span#referral-paid { font-weight: 800; color: var(--teal-600); }
.referral-admin-card { margin-top: 24px; }
.referral-admin-total { margin: 10px 0; font-size: 13px; font-weight: 800; color: var(--brand-900); background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 8px 12px; }
.referral-paid-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--teal-600); background: #f0fdfa; border-radius: 999px; padding: 4px 10px; }
.referral-mark-paid { flex-shrink: 0; padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
.account-logout {
  margin-top: 20px;
  width: 100%;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.admin-users-panel { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.admin-users-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.admin-users-heading h2 { margin: 0 0 4px; color: var(--brand-900); font-size: 17px; }
.admin-users-heading p, .admin-user-info span, .admin-users-loading { margin: 0; color: var(--ink-soft); font-size: 12.5px; }
.admin-refresh { padding: 8px 12px; white-space: nowrap; }
.admin-users-list { display: grid; gap: 8px; }
.admin-user-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-soft); }
.admin-user-info { min-width: 0; display: grid; gap: 3px; }
.admin-user-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.admin-user-controls { display: flex; gap: 7px; flex-shrink: 0; }
.admin-user-controls select { max-width: 175px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; color: var(--ink); background: #fff; font-size: 12px; }
.admin-apply { border: 0; border-radius: 8px; padding: 8px 11px; cursor: pointer; font-size: 12px; font-weight: 700; }
.admin-apply:disabled { opacity: .6; cursor: default; }
.admin-days-badge { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-weight: 700; font-size: 11px; white-space: nowrap; }
.admin-days-urgent { background: #fee2e2; color: #b91c1c; }
.admin-days-input { width: 56px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 6px; color: var(--ink); background: #fff; font-size: 12px; text-align: center; }
.admin-extend { padding: 8px 11px; font-size: 12px; white-space: nowrap; }
@media (max-width: 620px) { .admin-user-row { align-items: stretch; flex-direction: column; } .admin-user-controls { width: 100%; flex-wrap: wrap; } .admin-user-controls select { max-width: none; flex: 1 1 100%; } .admin-days-input { flex: 1; width: auto; } }

/* --- Documentation --- */
.docs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding: 40px 0 80px; align-items: start; }
.docs-toc { position: sticky; top: 88px; }
.docs-toc-group-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: #94a3b8; margin: 18px 0 6px 10px;
}
.docs-toc-group-label:first-child { margin-top: 0; }
.docs-toc a {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 8px;
  font-size: 13px; color: var(--ink-soft); text-decoration: none;
}
.docs-toc a:hover { background: var(--paper-soft); color: var(--ink); }
.docs-toc a .n { font-variant-numeric: tabular-nums; color: #94a3b8; font-size: 11.5px; width: 15px; flex-shrink: 0; }

.docs-main { max-width: 680px; }
.docs-chapter { margin-top: 56px; scroll-margin-top: 90px; }
.docs-chapter:first-child { margin-top: 0; }
.docs-chapter-num {
  display: inline-block; font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700;
  color: var(--teal-600); background: var(--brand-50); padding: 3px 9px; border-radius: 999px; margin-bottom: 10px;
}
.docs-chapter h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--brand-900); }
.docs-chapter .dek { color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; }
.docs-chapter h3 { font-size: 15px; font-weight: 700; margin: 26px 0 8px; }
.docs-chapter p.body { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; }

.docs-card {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 12px 0; box-shadow: var(--shadow-card);
}
.docs-card .t { font-weight: 700; font-size: 13.5px; margin: 0 0 4px; }
.docs-card p.body { margin: 0; }
.docs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .docs-layout { grid-template-columns: 1fr; } .docs-toc { position: static; } .docs-grid-2 { grid-template-columns: 1fr; } }

.docs-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px;
  border-radius: 7px; background: var(--brand-800); color: #fff; margin: 1px 3px 1px 0;
}
.docs-tag.secondary { background: var(--paper-soft); color: var(--ink-soft); border: 1px solid var(--line); }
.docs-tag.danger { background: #c0362c; color: #fff; }
.docs-tag.accent { background: linear-gradient(90deg, var(--brand-800), var(--teal-600)); color: #fff; }

.docs-pill { display: inline-flex; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.docs-pill.good { background: #dcfce7; color: #15803d; }
.docs-pill.info { background: #dbeafe; color: #1d4ed8; }
.docs-pill.risk { background: #fee2e2; color: #b91c1c; }
.docs-pill.neutral { background: #e5e9f2; color: #47536b; }

.docs-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin: 12px 0; }
.docs-table-wrap table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.docs-table-wrap th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.docs-table-wrap td { padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.docs-table-wrap tr:last-child td { border-bottom: none; }

.docs-flow { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 16px 0; }
.docs-flow > div { flex: 1 1 130px; padding: 12px 14px; position: relative; }
.docs-flow > div + div { border-left: 1px solid var(--line); }
.docs-flow > div:not(:last-child)::after {
  content: "→"; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
  color: #94a3b8; background: var(--paper); width: 18px; text-align: center; z-index: 1;
}
.docs-flow .n { font-size: 10.5px; font-weight: 700; color: var(--teal-600); }
.docs-flow .l { font-size: 12.5px; font-weight: 700; }

.docs-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.docs-list li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.docs-list li::before { content: "—"; color: var(--teal-600); flex-shrink: 0; }

.docs-callout {
  border-radius: 12px; padding: 12px 15px; margin: 14px 0; font-size: 13.5px;
  border-left: 3px solid var(--teal-500); background: var(--brand-50); color: var(--ink-soft);
}
.docs-callout strong { color: var(--ink); }

footer { padding: 40px 0 50px; border-top: 1px solid var(--line); }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.footer-brand img { width: 26px; height: 26px; border-radius: 7px; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--ink); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.footer-links a:hover { color: var(--brand-700); }
footer small { color: #94a3b8; font-size: 13px; }

/* Les liens de nav (Fonctionnalités, Comment ça marche, Marketplaces, Tarifs, Documentation) ont
   besoin d'environ 980px pour tenir sur une seule ligne à côté du logo et des actions (Discord,
   Parrainage, Mon compte, sélecteur de langue) — repère précis obtenu en mesurant leur largeur
   naturelle en direct sur le site. En dessous, avec .nav-links en display:flex classique, le texte
   des liens les plus longs ("Comment ça marche") passait à la ligne DANS la barre de nav à hauteur
   fixe (68px) et se retrouvait collé/superposé aux liens voisins — bug remonté par l'utilisateur le
   19 août 2026 ("il sont collé sur le site il s'empietre l'un sur l'autres"). Coupure à 1040px
   (marge de sécurité au-delà des ~980px mesurés) plutôt que 860px comme avant, pour ne jamais
   laisser la nav dans cette zone resserrée.
*/
@media (max-width: 1040px) {
  .nav-links { display: none; }
}

@media (max-width: 860px) {
  .problem-grid, .features-grid { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card-highlight { transform: none; }
  h1 { font-size: 42px; }
  .waitlist { margin: 0 12px; padding: 48px 24px; }
}

/* Lien de repli vers Stripe Checkout (voir account.js, ensureRequestedPlan) — affiché quand la
   redirection automatique est bloquée par le navigateur. */
.account-checkout-link {
  display: block;
  margin-top: 16px;
  text-align: center;
  text-decoration: none;
}

/* Œil afficher/cacher mot de passe (account.js, reset-password.html) */
.password-field {
  position: relative;
  display: block;
}
.password-field input {
  width: 100%;
  padding-right: 44px;
}
.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 6px 8px;
  line-height: 1;
  opacity: 0.7;
}
.password-toggle:hover {
  opacity: 1;
}

/* Badge email non vérifié (account.html) */
.account-warning {
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
}
.account-warning a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

/* --- Espace Formation (formation.html) -------------------------------------------------------
   Grille de modules vidéo réservée aux abonnés payants. Le lecteur garde un rapport 16/9 quelle
   que soit la largeur : sans ratio fixe, une iframe YouTube s'effondre à quelques pixels de haut
   sur mobile. */
.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.training-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Un brouillon (non publié) doit se distinguer au premier coup d'œil de ce que voient les
   abonnés — sinon l'admin croit avoir diffusé un module qui ne l'est pas. */
.training-card-draft { border-style: dashed; border-color: #f59e0b; }
.training-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0f172a;
}
.training-player iframe,
.training-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.training-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.training-body h3 { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; }
.training-body p { margin: 0; font-size: 13px; line-height: 1.5; color: #475569; }
.training-duration {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--teal-600);
  background: rgba(13, 148, 136, 0.1);
  border-radius: 999px;
  padding: 2px 8px;
}
.training-draft-badge { font-size: 11px; font-weight: 700; color: #b45309; }
.training-card-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Lien vidéo non reconnu (25 août 2026) : un lecteur noir muet ne disait pas ce qui n'allait pas.
   Message explicite a la place, avec le lien enregistre pour verifier d'un coup d'oeil. */
.training-unsupported {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  min-height: 160px;
  background: #fff7ed;
  border: 1px dashed #f59e0b;
  border-radius: 8px;
  color: #92400e;
  font-size: 13px;
  line-height: 1.5;
}
.training-unsupported a { color: #b45309; text-decoration: underline; }
.training-card-actions .btn-ghost { padding: 5px 10px; font-size: 12px; }
.training-delete { color: #b91c1c; border-color: #fecaca; }

/* Formulaire d'ajout/édition — administrateur uniquement. */
.training-form { display: flex; flex-direction: column; gap: 12px; }
.training-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: #334155; }
.training-form input,
.training-form textarea {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 400;
}
.training-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.training-form-row label { flex: 1 1 120px; }
.training-check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.training-check input { width: auto; }
.training-form-actions { display: flex; gap: 10px; }