/* ============================================================
   ALIMIO.AI — Page de pré-lancement
   Palette immobilier premium : pierre, or champagne, ardoise.
   Associations sublimales : patrimoine, pierre de taille,
   lumière naturelle, confiance, stabilité.
   ============================================================ */

/* === TOKENS === */
:root {
  /* Fond unique du body — pierre claire, plus éditorial que blanc SaaS */
  --bg:            #f8f1e7;
  --surface:       #fffaf3;

  /* Panel sombre partagé header / footer / waitlist */
  --panel:         #09070a;
  --panel-border:  rgba(255, 255, 255, 0.07);

  /* Saphir — couleur technologique assumée, moins générique qu'un bleu SaaS */
  --blue:          #3847ff;
  --blue-dark:     #2029c9;
  --blue-glow:     rgba(56, 71, 255, 0.18);

  /* Champagne cuivre — luxe, patrimoine, pierre de taille */
  --amber:         #c9893b;
  --amber-light:   #f0b76b;
  --amber-glow:    rgba(201, 137, 59, 0.28);
  --wine:          #351322;
  --wine-glow:     rgba(68, 24, 45, 0.18);

  /* Texte */
  --text:          #120c10;
  --muted:         #756f78;

  /* Séparations */
  --border:        rgba(72, 53, 34, 0.14);

  /* Rayons */
  --r-card:        24px;
  --r-btn:         999px;
  --r-input:       12px;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 82% 8%, var(--amber-glow) 0, transparent 32vw),
    radial-gradient(circle at 6% 30%, var(--blue-glow) 0, transparent 34vw),
    radial-gradient(circle at 68% 44%, var(--wine-glow) 0, transparent 30vw),
    linear-gradient(180deg, #fbf7f1 0%, var(--bg) 48%, #fbfaf8 100%);
  background-attachment: fixed, fixed, fixed, scroll;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; }

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes content-swap-in {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes image-swap-in {
  from {
    opacity: 0;
    transform: translateY(var(--agent-image-y, 0%)) scale(0.985);
    filter: blur(4px) drop-shadow(0 14px 24px rgba(0, 0, 0, 0.16));
  }
  to {
    opacity: 1;
    transform: translateY(var(--agent-image-y, 0%)) scale(1);
    filter: blur(0) drop-shadow(0 26px 34px rgba(0, 0, 0, 0.32));
  }
}

@keyframes live-pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.82);
    box-shadow: 0 0 0 5px rgba(37, 211, 127, 0.08);
  }
  50% {
    opacity: 1;
    transform: scale(1.22);
    box-shadow: 0 0 0 9px rgba(37, 211, 127, 0.18);
  }
}

@keyframes input-guide-pulse {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 rgba(240, 183, 107, 0);
  }
  45% {
    border-color: var(--amber-light);
    box-shadow: 0 0 0 5px rgba(240, 183, 107, 0.16);
  }
}

body {
  opacity: 0;
  animation: page-enter 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}

.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  body,
  .js-ready [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* === CONTENEUR === */
.shell {
  /* Largeur maximale centrée — on laisse respirer l'information
     sur les grands écrans tout en gardant des marges confortables. */
  width: min(1560px, 94vw);
  margin: 0 auto;
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); }

/* Bleu — action principale neutre */
.btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, #6d4aff 100%);
  color: #fff;
  box-shadow: 0 14px 34px rgba(56, 71, 255, 0.28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--blue-dark) 0%, #5b35e8 100%);
  box-shadow: 0 18px 42px rgba(56, 71, 255, 0.38);
}

/* Amber — appel à l'action chaud (waitlist, réponse) */
.btn-amber {
  background: linear-gradient(135deg, #f0b76b 0%, var(--amber) 52%, #7a3a1d 100%);
  color: #170d07;
  box-shadow: 0 12px 30px rgba(201, 137, 59, 0.3);
}
.btn-amber:hover {
  background: linear-gradient(135deg, #ffd08b 0%, #d99a4d 52%, #8e4724 100%);
  box-shadow: 0 16px 40px rgba(201, 137, 59, 0.42);
}
.btn-amber-on-light {
  color: #fff;
  text-shadow: 0 1px 1px rgba(18, 8, 13, 0.32);
}

.btn-stacked {
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px;
  line-height: 1.05;
}

.btn-stacked small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Ghost — action secondaire, sobre */
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface); }

/* Pleine largeur — formulaire */
.btn-full { width: 100%; text-align: center; padding: 16px; font-size: 1rem; }

/* ============================================================
   TYPOGRAPHIE COMMUNE
   ============================================================ */
.eyebrow {
  /* Étiquette de section — upperase, espacé, coloré */
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.eyebrow-on-dark { color: var(--amber-light); }

h1 {
  font-size: clamp(3rem, 4.8vw, 5.8rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.96;
  max-width: 16ch;
}
h2 {
  font-size: clamp(1.9rem, 3.2vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
h3 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.lead {
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  color: var(--muted);
  line-height: 1.7;
  max-width: 62ch;
  margin-top: 20px;
}

.section-heading {
  /* Bloc texte centré en tête de section */
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}
.section-heading h2 { margin-bottom: 16px; }
.section-sub {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
}

.text-link {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.text-link:hover { color: var(--blue-dark); }

/* ============================================================
   HEADER — sticky, fond sombre
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(9, 7, 10, 0.92);
  border-bottom: 1px solid var(--panel-border);
  backdrop-filter: blur(18px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.brand-logo {
  width: auto;
  height: 44px;
  object-fit: contain;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.header-tag {
  /* Badge "Accès anticipé" dans le header */
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber-light);
  background: rgba(240, 183, 107, 0.1);
  border: 1px solid rgba(240, 183, 107, 0.28);
  border-radius: var(--r-btn);
  padding: 5px 12px;
}

/* ============================================================
   HERO — plein écran, gradient amber → bleu
   L'effet solaire (amber en haut à droite, bleu en bas à gauche)
   donne une sensation d'espace ouvert et d'énergie.
   ============================================================ */
.hero-band {
  position: relative;
  overflow: hidden;
  /* Objectif : environ 65-70 % de la hauteur d'écran pour qu'on
     aperçoive toujours la section suivante sans scroller. */
  min-height: min(640px, calc(100vh - 70px));
  display: grid;
  align-items: center;
  padding: clamp(48px, 6vh, 80px) 0 clamp(34px, 5vh, 56px);
  background:
    radial-gradient(circle at 78% 14%, rgba(240, 183, 107, 0.16), transparent 34vw),
    radial-gradient(circle at 22% 80%, rgba(56, 71, 255, 0.18), transparent 34vw),
    linear-gradient(180deg, #09070a 0%, #120c10 100%);
  color: #fffaf3;
}

/* Les lueurs vivent maintenant sur le body pour rester continues au scroll. */
.hero-glow { display: none; }

.hero-content {
  position: relative; /* passe au-dessus des glows */
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr);
  gap: clamp(56px, 8vw, 118px);
  align-items: center;
}
.hero-band h1 { margin-bottom: 0; }
.hero-band .eyebrow { color: var(--amber-light); }
.hero-band .lead { color: rgba(255, 250, 243, 0.68); }
.hero-band .btn-ghost {
  color: #fffaf3;
  border-color: rgba(255, 250, 243, 0.18);
  background: rgba(255, 250, 243, 0.06);
}
.hero-band .btn-ghost:hover { background: rgba(255, 250, 243, 0.12); }

.hero-agent-strip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  vertical-align: middle;
}

.hero-agent-pill {
  --hero-agent-size: 34px;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  width: var(--hero-agent-size);
  height: var(--hero-agent-size);
  padding: 0;
  border: 1.5px solid rgba(255, 250, 243, 0.68);
  border-radius: 50%;
  background: rgba(255, 250, 243, 0.08);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.hero-agent-pill:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(255, 250, 243, 0.95);
  background: rgba(255, 250, 243, 0.13);
}

.hero-agent-pill img {
  width: auto;
  height: calc(var(--hero-agent-size) * 1.32);
  max-width: none;
  object-fit: contain;
  transform: translateY(20%);
}

.hero-agent-pill[data-hero-agent-jump="clara"] img {
  transform: translateY(14%);
}

.hero-agent-pill[data-hero-agent-jump="sam"] img,
.hero-agent-pill[data-hero-agent-jump="jade"] img {
  transform: translateY(18%);
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.hero-proof {
  margin-top: 18px;
  max-width: 48ch;
  color: rgba(255, 250, 243, 0.48);
  font-size: 0.9rem;
}

.hero-countdown {
  margin-top: 28px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 250, 243, 0.06);
  border: 1px solid rgba(255, 250, 243, 0.12);
}

.countdown-label {
  font-size: 0.82rem;
  color: rgba(255, 250, 243, 0.55);
  margin-bottom: 14px;
  line-height: 1.55;
}

.countdown-label time {
  color: rgba(255, 250, 243, 0.9);
  font-weight: 700;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.countdown-unit {
  text-align: center;
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 250, 243, 0.1);
}

.countdown-value {
  display: block;
  font-size: clamp(1.35rem, 2.4vw, 1.82rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--amber-light);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.countdown-key {
  display: block;
  margin-top: 6px;
  font-size: 0.63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 250, 243, 0.45);
}

.hero-preview {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 22px;
  color: #fffaf3;
  background:
    radial-gradient(circle at 88% 12%, rgba(240, 183, 107, 0.24), transparent 34%),
    radial-gradient(circle at 5% 85%, rgba(56, 71, 255, 0.24), transparent 38%),
    linear-gradient(145deg, #0b080d 0%, #1d0b16 46%, #3a1b13 100%);
  border: 1px solid rgba(255, 250, 243, 0.14);
  box-shadow:
    0 22px 60px rgba(18, 8, 13, 0.2),
    0 56px 130px rgba(56, 71, 255, 0.12);
}

.hero-preview::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.preview-topbar,
.preview-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.78rem;
  color: rgba(255, 250, 243, 0.62);
}

.preview-topbar strong {
  color: var(--amber-light);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #25d37f;
  box-shadow: 0 0 0 6px rgba(37, 211, 127, 0.12);
  transform-origin: center;
  animation: live-pulse 1.55s ease-in-out infinite;
}

.call-card {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255, 250, 243, 0.09);
  border: 1px solid rgba(255, 250, 243, 0.14);
  backdrop-filter: blur(12px);
}

.call-label {
  color: var(--amber-light);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.call-card h2 {
  font-size: clamp(1.55rem, 2.5vw, 2.4rem);
  color: #fffaf3;
}

.call-score {
  align-self: flex-start;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: var(--r-btn);
  color: #120c10;
  background: var(--amber-light);
  font-size: 0.76rem;
  font-weight: 800;
}

.transcript-card {
  position: relative;
  margin-top: 14px;
  padding: 18px;
  border-radius: 20px;
  color: rgba(255, 250, 243, 0.7);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 250, 243, 0.1);
  font-size: 0.92rem;
  line-height: 1.6;
}

.transcript-card strong { color: #fffaf3; }
.transcript-card p + p strong {
  color: var(--amber-light);
}
.preview-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.preview-grid div {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 250, 243, 0.08);
  border: 1px solid rgba(255, 250, 243, 0.1);
}

.preview-grid span {
  display: block;
  color: rgba(255, 250, 243, 0.48);
  font-size: 0.76rem;
  margin-bottom: 4px;
}

.preview-grid strong {
  font-size: 1rem;
  color: #fffaf3;
}

.preview-grid .priority-metric {
  background:
    radial-gradient(circle at 90% 0%, rgba(240, 183, 107, 0.22), transparent 46%),
    rgba(240, 183, 107, 0.12);
  border-color: rgba(240, 183, 107, 0.32);
  box-shadow: 0 12px 34px rgba(240, 183, 107, 0.12);
}

.preview-grid .priority-metric span {
  color: rgba(240, 183, 107, 0.82);
}

.preview-grid .priority-metric strong {
  color: var(--amber-light);
}

.preview-footer {
  margin-top: 18px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.preview-footer span {
  padding: 8px 12px;
  border-radius: var(--r-btn);
  background: rgba(255, 250, 243, 0.08);
}

.hero-signup-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: clamp(24px, 3vw, 34px);
  color: #fffaf3;
  background:
    radial-gradient(circle at 92% 0%, rgba(240, 183, 107, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(255, 250, 243, 0.08), rgba(255, 250, 243, 0.03));
  border: 1px solid rgba(255, 250, 243, 0.14);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}

.signup-card-head {
  position: relative;
  margin-bottom: 12px;
}

.signup-head-main {
  min-width: 0;
}

.signup-kicker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.hero-signup-card h2 {
  color: #fffaf3;
  font-size: clamp(1.62rem, 2.15vw, 2.35rem);
  max-width: 15ch;
  margin-bottom: 0;
}

.signup-head-main .signup-kicker {
  margin-bottom: 0;
}

.offer-ribbon {
  display: inline-grid;
  justify-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin: 0;
  transform: none;
}

.offer-ribbon span {
  display: inline-block;
  padding: 8px 13px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 44%),
    linear-gradient(135deg, #1f9f45 0%, #147536 100%);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  box-shadow:
    0 10px 22px rgba(20, 117, 54, 0.24),
    0 0 0 1px rgba(205, 255, 220, 0.24);
}

.offer-ribbon small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.05;
  text-align: center;
}

.signup-lede {
  color: rgba(255, 250, 243, 0.58);
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 22px;
}

.signup-kicker {
  color: var(--amber-light);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.compact-waitlist-form {
  gap: 12px;
}

.compact-waitlist-form .field-input {
  background: rgba(255, 255, 255, 0.07);
}

.app-access-card {
  align-self: stretch;
}

.app-access-actions {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

/* ============================================================
   TRANSITION IA — marquee d'exemples tech
   ============================================================ */
.ai-transition-band {
  overflow: hidden;
  padding: clamp(46px, 6vw, 78px) 0;
  color: #fffaf3;
  background:
    radial-gradient(circle at 10% 55%, rgba(56, 71, 255, 0.22), transparent 30vw),
    radial-gradient(circle at 92% 8%, rgba(240, 183, 107, 0.2), transparent 28vw),
    linear-gradient(110deg, #07060a 0%, #100914 48%, #2b160e 100%);
  border-top: 1px solid rgba(255, 250, 243, 0.08);
  border-bottom: 1px solid rgba(255, 250, 243, 0.08);
}

.transition-heading {
  text-align: center;
  max-width: 920px;
  margin-bottom: 28px;
}

.ai-transition-band .eyebrow {
  color: var(--amber-light);
}

.transition-heading h2 {
  color: #fffaf3;
  font-size: clamp(1.75rem, 2.7vw, 3rem);
}

.transition-heading .section-sub {
  max-width: 780px;
  margin: 14px auto 0;
  color: rgba(255, 250, 243, 0.62);
}

.transition-marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 8px 0 16px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.transition-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: transition-marquee 72s linear infinite;
}

.transition-set {
  display: flex;
  gap: 16px;
  padding-right: 16px;
  flex-shrink: 0;
}

.transition-card {
  flex: 0 0 390px;
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 292px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 250, 243, 0.08);
  border: 1px solid rgba(255, 250, 243, 0.12);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
}

.transition-brand {
  display: grid;
  gap: 10px;
  min-height: 96px;
}

.transition-brand span {
  order: 2;
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.transition-brand img {
  order: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 210px;
  max-height: 82px;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.transition-brand img.needs-logo-frame {
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 250, 243, 0.92);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(18, 8, 13, 0.06);
}

.transition-card strong {
  color: #fffaf3;
  font-size: 1.08rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.transition-card p {
  color: rgba(255, 250, 243, 0.6);
  font-size: 0.92rem;
  line-height: 1.55;
}

.transition-card a {
  align-self: end;
  justify-self: start;
  color: var(--amber-light);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.transition-card a:hover {
  color: #fffaf3;
}

@keyframes transition-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   PRIX — estimations non contractuelles
   ============================================================ */
.pricing-band {
  padding: clamp(54px, 6vw, 84px) 0;
  background:
    radial-gradient(circle at 8% 10%, rgba(56, 71, 255, 0.1), transparent 34vw),
    radial-gradient(circle at 92% 0%, rgba(201, 137, 59, 0.15), transparent 30vw),
    linear-gradient(180deg, #fffdf9 0%, #f7efe4 100%);
  border-top: 1px solid rgba(72, 53, 34, 0.08);
  border-bottom: 1px solid rgba(72, 53, 34, 0.08);
}

.pricing-inner {
  display: grid;
  gap: clamp(22px, 3vw, 34px);
  width: min(1860px, 97vw);
}

.pricing-heading {
  max-width: 940px;
  margin-bottom: 0;
}

.pricing-heading .eyebrow {
  color: var(--amber);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(270px, 1fr));
  align-items: stretch;
  gap: clamp(12px, 1vw, 16px);
}

.pricing-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 12px;
  min-height: 100%;
  padding: clamp(18px, 1.25vw, 24px);
  border-radius: 26px;
  background:
    radial-gradient(circle at 94% 0%, rgba(240, 183, 107, 0.12), transparent 34%),
    rgba(255, 250, 243, 0.9);
  border: 1px solid var(--border);
  box-shadow:
    0 14px 34px rgba(72, 53, 34, 0.08),
    0 34px 78px rgba(18, 8, 13, 0.08);
  backdrop-filter: blur(10px);
}

.pricing-card-featured {
  color: #fffaf3;
  background:
    radial-gradient(circle at 92% 0%, rgba(240, 183, 107, 0.22), transparent 40%),
    linear-gradient(145deg, #10080d 0%, #351322 100%);
  border-color: rgba(255, 250, 243, 0.16);
  transform: translateY(-6px);
  box-shadow:
    0 22px 54px rgba(18, 8, 13, 0.22),
    0 50px 110px rgba(56, 71, 255, 0.16);
}

.pricing-card-signature {
  background:
    radial-gradient(circle at 88% 0%, rgba(56, 71, 255, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(255, 250, 243, 0.96), rgba(247, 239, 228, 0.84));
}

.pricing-card-head {
  display: grid;
  gap: 7px;
}

.pricing-kicker {
  color: var(--amber);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pricing-card-featured .pricing-kicker,
.pricing-card-featured .pricing-price span {
  color: var(--amber-light);
}

.pricing-card h3 {
  margin: 0;
  font-size: clamp(1rem, 1vw, 1.12rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.pricing-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--text);
  font-size: clamp(1.95rem, 2.35vw, 2.85rem);
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 0.95;
}

.pricing-original {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(18, 12, 16, 0.66);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(72, 53, 34, 0.08);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.pricing-original s {
  color: rgba(18, 12, 16, 0.72);
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(24, 168, 95, 0.75);
}

.pricing-card-featured .pricing-original {
  color: rgba(255, 250, 243, 0.74);
  background: rgba(255, 250, 243, 0.09);
  border-color: rgba(255, 250, 243, 0.12);
}

.pricing-card-featured .pricing-original s {
  color: rgba(255, 250, 243, 0.86);
}

.pricing-price span {
  color: var(--amber);
  font-size: 0.66em;
  letter-spacing: -0.05em;
}

.pricing-price small {
  color: var(--muted);
  font-size: 0.3em;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.pricing-card-featured .pricing-price {
  color: #fffaf3;
}

.pricing-card-featured .pricing-price small {
  color: rgba(255, 250, 243, 0.52);
}

.pricing-discount {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 5px 8px;
  border-radius: 999px;
  color: #0f7a45;
  background: rgba(24, 168, 95, 0.14);
  border: 1px solid rgba(24, 168, 95, 0.26);
  font-size: clamp(0.7rem, 0.62vw, 0.82rem);
  font-weight: 950;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.pricing-card-featured .pricing-discount {
  color: #6cffae;
  background: rgba(24, 168, 95, 0.18);
  border-color: rgba(108, 255, 174, 0.3);
}

.pricing-price-custom {
  font-size: clamp(1.48rem, 1.9vw, 2.1rem);
  letter-spacing: -0.055em;
}

.pricing-estimate {
  justify-self: start;
  padding: 8px 12px;
  border-radius: 999px;
  color: #120c10;
  background: rgba(240, 183, 107, 0.38);
  font-size: 0.78rem;
  font-weight: 900;
}

.pricing-card-featured .pricing-estimate {
  background: var(--amber-light);
}

.pricing-description {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.pricing-card-featured .pricing-description {
  color: rgba(255, 250, 243, 0.68);
}

.pricing-volume {
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border-radius: 14px;
  background: rgba(240, 183, 107, 0.14);
  border: 1px solid rgba(201, 137, 59, 0.18);
}

.pricing-volume span {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pricing-volume strong {
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.25;
}

.pricing-card-featured .pricing-volume {
  background: rgba(240, 183, 107, 0.14);
  border-color: rgba(240, 183, 107, 0.26);
}

.pricing-card-featured .pricing-volume span {
  color: rgba(255, 250, 243, 0.48);
}

.pricing-card-featured .pricing-volume strong {
  color: var(--amber-light);
}

.pricing-agents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.pricing-agent {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid rgba(72, 53, 34, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.56);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.pricing-agent:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(201, 137, 59, 0.32);
}

.pricing-card-featured .pricing-agent {
  background: rgba(255, 250, 243, 0.09);
  border-color: rgba(255, 250, 243, 0.12);
}

.pricing-card-featured .pricing-agent:hover {
  background: rgba(255, 250, 243, 0.15);
  border-color: rgba(240, 183, 107, 0.38);
}

.pricing-agent img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.88), transparent 52%),
    rgba(18, 8, 13, 0.06);
}

.pricing-card-featured .pricing-agent img {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 52%),
    rgba(255, 250, 243, 0.08);
}

.pricing-agent span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.pricing-agent strong {
  color: var(--text);
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-agent small {
  color: var(--muted);
  overflow: hidden;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-agent-static {
  cursor: default;
}

.pricing-agent-static:hover {
  transform: none;
}

.pricing-agent-question {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  color: #fffaf3;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.26), transparent 48%),
    linear-gradient(145deg, var(--blue), var(--wine));
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.pricing-card-featured .pricing-agent strong {
  color: #fffaf3;
}

.pricing-card-featured .pricing-agent small {
  color: rgba(255, 250, 243, 0.52);
}

.pricing-features {
  align-self: end;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-features li {
  position: relative;
  padding-left: 15px;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.35;
}

.pricing-features li::before {
  content: "";
  position: absolute;
  top: 0.58em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(201, 137, 59, 0.12);
}

.pricing-card-featured .pricing-features li {
  color: rgba(255, 250, 243, 0.66);
}

.pricing-card-featured .pricing-features li::before {
  background: var(--amber-light);
}

.pricing-actions {
  display: flex;
  justify-content: center;
}

.pricing-actions .btn {
  min-width: min(360px, 100%);
}

.pricing-note {
  justify-self: center;
  max-width: 980px;
  margin: 0;
  padding: 13px 18px;
  border-radius: 20px;
  text-align: center;
  color: var(--text);
  background: rgba(255, 250, 243, 0.78);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 12px 32px rgba(72, 53, 34, 0.06);
}

/* ============================================================
   PROBLÈMES — section sombre, cartes verticales chiffrées
   ============================================================ */
.problems-chapter {
  scroll-margin-top: 88px;
}

.market-band {
  padding: clamp(54px, 6vw, 86px) 0;
  color: var(--text);
  background:
    radial-gradient(circle at 88% 0%, rgba(201, 137, 59, 0.09), transparent 34vw),
    linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
  border-top: 1px solid rgba(72, 53, 34, 0.08);
  border-bottom: 1px solid rgba(72, 53, 34, 0.08);
}

.market-inner {
  display: grid;
  gap: clamp(24px, 3vw, 38px);
}

.problems-heading {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.problems-heading h2 {
  color: var(--text);
}

.market-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.market-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 100%;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 24px;
  background: rgba(255, 250, 243, 0.86);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 38px rgba(72, 53, 34, 0.07);
}

.market-card strong {
  display: block;
  color: var(--amber);
  font-size: clamp(2.3rem, 4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.06em;
  white-space: nowrap;
}

.market-card h3 {
  color: var(--text);
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin: 0;
}

.market-card p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
  margin: 0;
}

.market-card a {
  justify-self: start;
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.market-card a:hover { color: var(--blue-dark); }

.problems-social-proof {
  width: 100%;
  margin: clamp(14px, 2vw, 24px) 0 0;
  padding: 0;
  color: #fffaf3;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 0%, rgba(240, 183, 107, 0.22), transparent 40%),
    linear-gradient(145deg, #10080d 0%, #351322 100%);
  border: 1px solid rgba(255, 250, 243, 0.16);
  box-shadow:
    0 22px 54px rgba(18, 8, 13, 0.18),
    0 40px 90px rgba(56, 71, 255, 0.12);
}

.problems-social-inner {
  width: 100%;
  margin: 0 auto;
  display: grid;
  gap: clamp(16px, 2vw, 22px);
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 32px);
}

.problems-social-eyebrow {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-light);
}

.problems-social-top {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.problems-social-title {
  margin: 0;
  color: #fffaf3;
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.28;
}

.problems-social-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.social-proof-snippet {
  margin: 0;
  padding: clamp(12px, 1.4vw, 18px) clamp(12px, 1.6vw, 20px);
  border-left: 3px solid var(--amber-light);
  background: transparent;
}

.social-proof-snippet:not(:first-child) {
  box-shadow: inset 1px 0 0 rgba(255, 250, 243, 0.12);
}

.social-proof-snippet p {
  margin: 0;
  color: rgba(255, 250, 243, 0.9);
  font-size: clamp(0.94rem, 1.15vw, 1.05rem);
  line-height: 1.55;
  font-style: normal;
}

.social-proof-snippet strong {
  color: #fffaf3;
  font-weight: 800;
}

@media (max-width: 820px) {
  .problems-social-row {
    grid-template-columns: 1fr;
  }

  .social-proof-snippet {
    box-shadow: none;
    border-left: 3px solid var(--amber-light);
    border-bottom: 1px solid rgba(255, 250, 243, 0.1);
    padding-bottom: 16px;
    margin-bottom: 12px;
  }

  .social-proof-snippet:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .social-proof-snippet:not(:first-child) {
    box-shadow: none;
  }
}

.problems-resolution {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: clamp(20px, 2.8vw, 32px) 0 0;
  padding: 0;
  max-width: none;
  width: 100%;
  text-align: center;
  color: var(--text);
  font-size: clamp(1rem, 1.28vw, 1.12rem);
  font-weight: 700;
  line-height: 1.35;
}

.problems-resolution-part {
  display: inline;
}

.problems-resolution-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  flex: 0 0 auto;
  vertical-align: middle;
}

.problems-resolution-icon {
  display: block;
  width: 2.3em;
  height: 2.3em;
  object-fit: contain;
  flex-shrink: 0;
}

.problems-resolution-name {
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.problems-arrows {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(10px, 1.6vw, 16px);
  color: var(--amber);
  font-size: 1.52rem;
  font-weight: 900;
  line-height: 1;
}

.workflow-card {
  display: grid;
  gap: 12px;
}

.workflow-step {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(72, 53, 34, 0.1);
}

.workflow-step.is-active {
  color: #fffaf3;
  background:
    radial-gradient(circle at 95% 10%, rgba(240, 183, 107, 0.22), transparent 36%),
    linear-gradient(135deg, #10080d 0%, #351322 100%);
  border-color: rgba(255, 250, 243, 0.12);
  box-shadow: 0 20px 46px rgba(18, 8, 13, 0.16);
}

.workflow-step span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--amber);
  background: rgba(201, 137, 59, 0.12);
  font-weight: 900;
  font-size: 0.78rem;
}

.workflow-step.is-active span {
  color: #120c10;
  background: var(--amber-light);
}

.workflow-step p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.workflow-step.is-active p { color: rgba(255, 250, 243, 0.62); }

/* ============================================================
   FONDATEURS — fond clair (prolonge le produit), card sombre au centre.
   ============================================================ */
.founders-band {
  display: grid;
  align-items: center;
  min-height: auto;
  padding: clamp(56px, 7vw, 96px) 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(56, 71, 255, 0.08), transparent 28vw),
    radial-gradient(circle at 90% 80%, rgba(201, 137, 59, 0.1), transparent 30vw),
    linear-gradient(180deg, #f6ecdc 0%, #fbf7f1 100%);
}

/* Animation d'entrée : la card monte depuis le bas au scroll */
@keyframes founders-enter {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.founders-card {
  /* Quasi plein écran : la card respire mais ne devient plus un petit îlot. */
  width: min(2360px, calc(100vw - clamp(24px, 4vw, 92px)));
  max-width: none;
  margin: 0 auto;
  border-radius: clamp(28px, 3vw, 56px);
  padding: clamp(52px, 6vw, 92px) 0;

  /* Aubergine encre + champagne : plus propriétaire et premium. */
  background:
    radial-gradient(circle at 16% 0%, rgba(240, 183, 107, 0.34), transparent 34%),
    radial-gradient(circle at 86% 70%, rgba(56, 71, 255, 0.26), transparent 36%),
    linear-gradient(135deg, #12080d 0%, var(--wine) 50%, #6b3422 100%);

  border: 1px solid rgba(255, 255, 255, 0.13);

  /* Ombre à trois niveaux : immédiate + intermédiaire + lointaine */
  box-shadow:
    0 2px 10px rgba(18, 8, 13, 0.1),
    0 22px 54px rgba(18, 8, 13, 0.18),
    0 56px 120px rgba(18, 8, 13, 0.2);

  animation: founders-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.1s;
}

.founders-card .eyebrow { color: var(--amber-light); }
.founders-card h2 { color: #fff7ec; }
.founders-card .section-sub { color: rgba(255, 247, 236, 0.62); }

.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.founder-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 22px;
  align-items: center;
  background: rgba(255, 250, 243, 0.1);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 250, 243, 0.2);
  border-radius: var(--r-card);
  padding: 26px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.founder-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}
.founder-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(240, 183, 107, 0.55);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.founder-info h3 { color: #fffaf3; margin-bottom: 6px; }
.founder-info p {
  font-size: 0.93rem;
  color: rgba(255, 247, 236, 0.62);
  line-height: 1.55;
  margin-bottom: 14px;
}
.founder-card .text-link {
  color: var(--amber-light);
  text-decoration-color: rgba(240, 183, 107, 0.45);
}

/* ============================================================
   PROBLÈME — 3 cartes compactes sur fond clair
   ============================================================ */
.problem-band {
  padding: 96px 0;
  background: transparent;
  border-bottom: 0;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.problem-grid-compact {
  max-width: 1200px;
  margin: 0 auto;
}

.problem-card {
  background: rgba(255, 250, 243, 0.82);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 26px 28px;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 36px rgba(72, 53, 34, 0.06);
}
.problem-card h3 { margin-bottom: 8px; }
.problem-card p {
  font-size: 0.93rem;
  color: var(--muted);
  line-height: 1.65;
}
.problem-number {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: 14px;
}

/* ============================================================
   AGENTS — carrousel "une équipe IA" inspiré de Limova
   ============================================================ */
.agents-band {
  /* Même famille sombre orange / bleu que la première partie :
     l'équipe IA devient le chapitre premium visuel. */
  display: grid;
  align-items: center;
  min-height: 100svh;
  height: auto;
  scroll-margin-top: 88px;
  padding: clamp(48px, 6vh, 76px) 0 clamp(38px, 5vh, 68px);
  background:
    radial-gradient(circle at 8% 50%, rgba(56, 71, 255, 0.24), transparent 30vw),
    radial-gradient(circle at 88% 10%, rgba(240, 183, 107, 0.18), transparent 28vw),
    linear-gradient(110deg, #07060a 0%, #100914 48%, #2b160e 100%);
  border-top: 1px solid rgba(255, 250, 243, 0.08);
  border-bottom: 1px solid rgba(255, 250, 243, 0.08);
}

.agents-shell {
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(18px, 3vh, 34px);
  min-height: 0;
}

.agents-heading {
  max-width: 1040px;
  margin: 0 auto 0;
}

.agents-heading .eyebrow { color: var(--amber-light); }
.agents-heading h2 {
  color: #fffaf3;
  font-size: clamp(2rem, 3.1vw, 3.25rem);
}
.agents-heading .section-sub { color: rgba(255, 250, 243, 0.62); }

.agents-carousel {
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(34px, 3.8vh, 48px);
  min-height: 0;
}

/* Barre d'onglets (avatars cliquables) */
.agents-tabs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
  min-height: 130px;
  padding: 0;
}

.agent-tab {
  --agent-tab-size: clamp(58px, 5.4vw, 76px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--agent-tab-size);
  height: var(--agent-tab-size);
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #fffaf3;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.agent-tab:hover { transform: translateY(-2px) scale(1.08); }

.agent-tab.is-active {
  transform: translateY(-4px) scale(1.1);
}

.agent-tab-avatar {
  overflow: hidden;
  display: grid;
  place-items: center;
  width: var(--agent-tab-size);
  height: var(--agent-tab-size);
  border-radius: 50%;
  font-weight: 900;
  font-size: 1.2rem;
  color: #fffaf3;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 22px rgba(18, 8, 13, 0.2);
}

.agent-tab-avatar img {
  display: block;
  width: auto;
  height: calc(var(--agent-tab-size) * 1.32);
  max-width: none;
  object-fit: contain;
  object-position: center center;
  transform: translateY(20%) scale(1);
  transform-origin: center center;
  transition: transform 0.18s ease;
}

.agent-tab:hover .agent-tab-avatar img {
  transform: translateY(19%) scale(1.08);
}

.agent-tab.is-active .agent-tab-avatar img {
  transform: translateY(19%) scale(1.04);
}

.agent-tab[data-agent-id="clara"] .agent-tab-avatar img {
  transform: translateY(13%) scale(1);
}

.agent-tab[data-agent-id="clara"]:hover .agent-tab-avatar img {
  transform: translateY(12%) scale(1.08);
}

.agent-tab[data-agent-id="clara"].is-active .agent-tab-avatar img {
  transform: translateY(12%) scale(1.04);
}

.agent-tab.is-active .agent-tab-avatar {
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.12),
    0 0 0 5px rgba(255, 255, 255, 0.88),
    0 16px 32px rgba(18, 8, 13, 0.22);
}

.agent-tab-name {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  padding: 0;
  min-width: 92px;
  color: #fffaf3;
  text-align: center;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
  background: transparent;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.agent-tab-role {
  position: absolute;
  top: calc(100% + 39px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #fffaf3;
  padding: 0;
  min-width: 92px;
  text-align: center;
  background: transparent;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.agent-tab.is-active .agent-tab-name,
.agent-tab.is-active .agent-tab-role {
  opacity: 1;
}

/* Grande carte "showcase" qui change selon l'agent sélectionné */
.agent-showcase {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(190px, 0.54fr) minmax(300px, 0.88fr) minmax(380px, 1.08fr);
  align-items: stretch;
  gap: clamp(22px, 2.8vw, 42px);
  padding: clamp(30px, 3.4vw, 56px);
  min-height: clamp(560px, 58vh, 680px);
  border-radius: clamp(24px, 2.5vw, 36px);
  color: #fffaf3;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.14), transparent 42%),
    radial-gradient(circle at 12% 90%, rgba(0, 0, 0, 0.22), transparent 48%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--agent-color, #5c6cff) 80%, #0b0612) 0%,
      color-mix(in srgb, var(--agent-color, #5c6cff) 38%, #0b0612) 100%);
  box-shadow:
    0 24px 60px rgba(18, 8, 13, 0.24),
    0 52px 120px rgba(18, 8, 13, 0.18);
  transition:
    background 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-showcase-portrait {
  display: grid;
  place-items: end center;
  padding: clamp(20px, 2.5vw, 36px);
  border-radius: clamp(20px, 2vw, 28px);
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.agent-showcase-portrait.has-agent-image {
  position: absolute;
  inset: 0 auto 0 clamp(34px, 4vw, 78px);
  z-index: 1;
  width: min(25%, 360px);
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
}

.agent-showcase-avatar {
  display: grid;
  place-items: center;
  width: clamp(120px, 16vw, 200px);
  height: clamp(120px, 16vw, 200px);
  border-radius: 50%;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  color: #fffaf3;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.45), transparent 55%),
    var(--agent-color, var(--blue));
  border: 4px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42);
}

.agent-showcase-avatar.has-agent-image {
  position: absolute;
  inset: 0 0 0 0;
  display: flex;
  justify-content: center;
  width: auto;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  align-items: flex-end;
}

.agent-showcase-avatar.has-agent-image img {
  --agent-image-y: 0%;
  display: block;
  width: auto;
  height: min(100%, 610px);
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  transform: translateY(var(--agent-image-y, 0%)) scale(1);
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.32));
  transition:
    opacity 0.28s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.agent-showcase[data-active-agent="emma"] .agent-showcase-avatar.has-agent-image img {
  --agent-image-y: 4%;
  height: min(108%, 660px);
}

.agent-showcase[data-active-agent="clara"] .agent-showcase-avatar.has-agent-image img {
  height: min(106%, 650px);
}

.agent-showcase[data-active-agent="sam"] .agent-showcase-avatar.has-agent-image img {
  height: min(105%, 640px);
}

.agent-showcase[data-active-agent="jade"] .agent-showcase-avatar.has-agent-image img {
  --agent-image-y: 4%;
  height: min(110%, 670px);
}

.agent-showcase-content {
  position: relative;
  z-index: 2;
  grid-column: 2;
  display: grid;
  align-content: center;
  gap: clamp(12px, 1.5vh, 18px);
  min-height: 0;
  padding-block: clamp(6px, 1.5vh, 18px);
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    filter 0.24s ease;
}

.agent-demo-panel {
  position: relative;
  z-index: 2;
  grid-column: 3;
  display: grid;
  align-content: center;
  gap: 18px;
  min-width: 0;
  transition:
    opacity 0.24s ease,
    transform 0.24s ease,
    filter 0.24s ease;
}

.agent-showcase.is-switching .agent-demo-panel {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  filter: blur(4px);
}

.agent-showcase.is-entering .agent-demo-panel {
  animation: content-swap-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agent-live-preview {
  padding: clamp(16px, 1.35vw, 22px);
  border-radius: 26px;
  box-shadow:
    0 16px 42px rgba(18, 8, 13, 0.24),
    0 42px 96px rgba(0, 0, 0, 0.2);
}

.agent-live-preview .call-card {
  margin-top: 18px;
  padding: clamp(16px, 1.4vw, 22px);
}

.agent-live-preview .call-card h2 {
  font-size: clamp(1.3rem, 1.85vw, 2rem);
}

.agent-live-preview .transcript-card {
  font-size: 0.84rem;
}

.agent-live-preview .preview-grid div {
  padding: 12px;
}

.agent-live-preview .preview-grid strong {
  font-size: 0.86rem;
}

.agent-workflow-steps {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 18px;
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.agent-workflow-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 12px;
  width: min(100%, 430px);
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 250, 243, 0.07);
  border: 1px solid rgba(255, 250, 243, 0.1);
}

.agent-workflow-step span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--amber-light);
  background: rgba(240, 183, 107, 0.12);
  font-size: 0.68rem;
  font-weight: 900;
}

.agent-workflow-step small {
  display: block;
  margin-bottom: 2px;
  color: rgba(255, 250, 243, 0.42);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.agent-workflow-step strong {
  color: rgba(255, 250, 243, 0.86);
  font-size: 0.82rem;
  line-height: 1.3;
}

.agent-workflow-step.is-active {
  background:
    radial-gradient(circle at 90% 10%, rgba(240, 183, 107, 0.22), transparent 42%),
    rgba(240, 183, 107, 0.1);
  border-color: rgba(240, 183, 107, 0.28);
  box-shadow: 0 16px 36px rgba(240, 183, 107, 0.1);
}

.agent-workflow-step.is-success {
  background: rgba(37, 211, 127, 0.1);
  border-color: rgba(37, 211, 127, 0.22);
}

.agent-workflow-step.is-success span {
  color: #0f2f1f;
  background: #25d37f;
}

.agent-workflow-line {
  width: 1px;
  height: 24px;
  background: linear-gradient(180deg, rgba(255, 250, 243, 0.28), rgba(240, 183, 107, 0.24));
}

.agent-showcase.is-switching .agent-showcase-content {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  filter: blur(4px);
}

.agent-showcase.is-switching .agent-showcase-avatar.has-agent-image img {
  opacity: 0;
  transform: translateY(var(--agent-image-y, 0%)) scale(0.985);
  filter: blur(4px) drop-shadow(0 14px 24px rgba(0, 0, 0, 0.16));
}

.agent-showcase.is-entering .agent-showcase-content {
  animation: content-swap-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agent-showcase.is-entering .agent-showcase-avatar.has-agent-image img {
  animation: image-swap-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agent-showcase-role {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 250, 243, 0.7);
  margin: 0;
}

.agent-showcase-name {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.agent-showcase-description {
  margin: 0;
  color: rgba(255, 250, 243, 0.78);
  font-size: clamp(0.95rem, 1vw, 1.04rem);
  line-height: 1.6;
  max-width: 58ch;
  min-height: 5.1em;
}

.agent-detail-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  color: #120c10;
  background: #fffaf3;
  font-size: 0.9rem;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.agent-detail-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.agent-showcase-features {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 78px;
  align-content: start;
}

.agent-showcase-features li {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.82rem;
  font-weight: 700;
  color: #fffaf3;
  backdrop-filter: blur(8px);
}

.agent-scenario {
  margin-top: 10px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 158px;
  display: grid;
  align-content: start;
  grid-template-rows: auto auto 1fr auto;
}

.agent-scenario-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 250, 243, 0.55);
  margin: 0 0 8px;
}

.agent-scenario-question {
  margin: 0 0 8px;
  color: rgba(255, 250, 243, 0.9);
  font-size: 0.94rem;
  font-weight: 600;
  min-height: 1.5em;
}

.agent-scenario-answer {
  margin: 0;
  color: rgba(255, 250, 243, 0.7);
  font-size: 0.92rem;
  line-height: 1.55;
  min-height: 2.9em;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.agent-scenario.is-switching .agent-scenario-question,
.agent-scenario.is-switching .agent-scenario-answer {
  opacity: 0;
  transform: translateY(6px);
}

.agent-scenario-controls {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}

.scenario-dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 250, 243, 0.28);
  cursor: pointer;
  transition: width 0.18s ease, background 0.18s ease;
}

.scenario-dot.is-active {
  width: 24px;
  background: rgba(255, 250, 243, 0.78);
}

/* ============================================================
   RATING — note rapide avant la préinscription
   ============================================================ */
.rating-band {
  overflow: hidden;
  padding: clamp(42px, 5vw, 64px) 0;
  background:
    radial-gradient(circle at 12% 24%, rgba(56, 71, 255, 0.08), transparent 34vw),
    linear-gradient(180deg, #f8f1e7 0%, #fbf7f1 100%);
  border-top: 1px solid rgba(72, 53, 34, 0.08);
  transition:
    opacity 0.42s ease,
    transform 0.42s ease,
    max-height 0.52s ease,
    margin 0.42s ease,
    padding 0.42s ease;
  max-height: 340px;
}

.rating-inner {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.rating-inner .eyebrow {
  margin-bottom: 0;
}

.rating-inner h2 {
  margin: 0;
  font-size: clamp(1.45rem, 2.5vw, 2.3rem);
}

.rating-inner .section-sub {
  margin: 0;
  color: #6d6670;
}

.rating-stars {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(72, 53, 34, 0.12);
  box-shadow:
    0 8px 26px rgba(18, 8, 13, 0.08),
    0 18px 38px rgba(18, 8, 13, 0.08);
}

.rating-star {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(18, 12, 16, 0.08), rgba(18, 12, 16, 0.02));
  color: rgba(18, 12, 16, 0.26);
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.rating-star:hover {
  transform: translateY(-2px) scale(1.05);
  background: linear-gradient(145deg, rgba(240, 183, 107, 0.22), rgba(201, 137, 59, 0.28));
  color: #b66e25;
  box-shadow: 0 8px 22px rgba(201, 137, 59, 0.26);
}

.rating-star.is-active {
  background: linear-gradient(145deg, #ffd08b 0%, #f0b76b 48%, #c9893b 100%);
  color: #7a3a1d;
  box-shadow: 0 10px 24px rgba(201, 137, 59, 0.3);
}

.rating-star:disabled {
  cursor: default;
}

.rating-star:disabled:hover {
  transform: none;
}

.rating-note {
  margin: 0;
  color: #4f7f63;
  font-size: 0.94rem;
  font-weight: 800;
}

.rating-band.is-dismissed {
  opacity: 0;
  transform: translateY(-10px);
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-color: transparent;
}

.rating-band.is-hidden {
  display: none;
}

/* ============================================================
   WAITLIST — fond sombre, formulaire de capture leads
   ============================================================ */
.waitlist-band {
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--panel);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.waitlist-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}
.waitlist-text h2 {
  color: #fff;
  margin-top: 12px;
  margin-bottom: 16px;
}
.waitlist-text p {
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  font-size: 0.97rem;
}

/* Formulaire sur fond sombre */
.waitlist-form { display: grid; gap: 14px; }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.field-group { display: grid; gap: 7px; }
.field-group-wide { grid-column: 1 / -1; }
.field-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}
.field-optional {
  color: rgba(255, 255, 255, 0.32);
  font-weight: 600;
}
.field-input {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-input);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s, background 0.18s;
}
.field-input::placeholder { color: rgba(255, 255, 255, 0.25); }
.field-input:focus {
  border-color: var(--amber-light);
  background: rgba(245, 158, 11, 0.05);
}

.field-input.is-guided {
  animation: input-guide-pulse 1.15s ease-in-out 2;
}
.field-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.field-select option { background: #1a1612; color: #fff; }
.form-disclaimer {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.28);
  text-align: center;
}

.waitlist-registered-card {
  display: grid;
  gap: 10px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: 26px;
  color: #fffaf3;
  background:
    radial-gradient(circle at 90% 0%, rgba(116, 224, 154, 0.22), transparent 36%),
    linear-gradient(145deg, rgba(255, 250, 243, 0.1), rgba(255, 250, 243, 0.045));
  border: 1px solid rgba(116, 224, 154, 0.28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}

.registered-kicker {
  margin: 0;
  color: #9af2b8;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.waitlist-registered-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: 1.05;
}

.waitlist-registered-card p {
  margin: 0;
  color: rgba(255, 250, 243, 0.72);
  line-height: 1.55;
}

.waitlist-registered-card strong {
  color: #ffffff;
}

.waitlist-registered-card span {
  color: rgba(154, 242, 184, 0.86);
  font-size: 0.9rem;
  font-weight: 800;
}

/* ============================================================
   CRÉATION DE COMPTE — suite sécurisée de la préinscription
   ============================================================ */
.account-page {
  min-height: 100vh;
  color: #fffaf3;
  background:
    radial-gradient(circle at 78% 14%, rgba(56, 71, 255, 0.26), transparent 34vw),
    radial-gradient(circle at 8% 78%, rgba(240, 183, 107, 0.22), transparent 30vw),
    linear-gradient(135deg, #07060a 0%, #120914 52%, #2b160e 100%);
}

.account-main {
  min-height: calc(100vh - 88px);
  display: grid;
  align-items: center;
  padding: clamp(56px, 7vw, 92px) 0;
}

.account-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
  gap: clamp(34px, 6vw, 88px);
  align-items: center;
}

.account-copy h1 {
  max-width: 11ch;
}

.account-copy .lead {
  max-width: 48ch;
  margin-top: 22px;
  color: rgba(255, 250, 243, 0.68);
}

.account-security-note {
  margin-top: 28px;
  max-width: 520px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(255, 250, 243, 0.08);
  border: 1px solid rgba(255, 250, 243, 0.12);
}

.account-security-note strong {
  display: block;
  margin-bottom: 6px;
  color: var(--amber-light);
}

.account-security-note p {
  color: rgba(255, 250, 243, 0.6);
  font-size: 0.94rem;
}

.account-card {
  display: grid;
  gap: 16px;
  padding: clamp(26px, 4vw, 40px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 100% 0%, rgba(240, 183, 107, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(255, 250, 243, 0.1), rgba(255, 250, 243, 0.04));
  border: 1px solid rgba(255, 250, 243, 0.14);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(14px);
}

.account-card h2 {
  color: #fffaf3;
  font-size: clamp(1.55rem, 2.2vw, 2.35rem);
}

.account-card .field-input[readonly] {
  color: rgba(255, 250, 243, 0.72);
  background: rgba(255, 255, 255, 0.045);
}

.password-field {
  position: relative;
}

.password-field .field-input {
  padding-right: 50px;
}

.password-toggle {
  position: absolute;
  right: 9px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 250, 243, 0.58);
  background: rgba(255, 250, 243, 0.08);
  transform: translateY(-50%);
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.password-toggle:hover {
  color: #fffaf3;
  background: rgba(255, 250, 243, 0.14);
  transform: translateY(-50%) scale(1.04);
}

.password-field:focus-within .password-toggle,
.password-field .field-input:-webkit-autofill + .password-toggle {
  color: #120c10;
  background: rgba(255, 250, 243, 0.86);
}

.password-field:focus-within .password-toggle:hover {
  color: #120c10;
  background: #fffaf3;
}

.password-toggle svg {
  position: absolute;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-toggle .eye-closed,
.password-toggle.is-visible .eye-open {
  opacity: 0;
}

.password-toggle.is-visible .eye-closed {
  opacity: 1;
}

.password-toggle .eye-open,
.password-toggle .eye-closed {
  transition: opacity 0.14s ease;
}

.password-strength {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 250, 243, 0.06);
  border: 1px solid rgba(255, 250, 243, 0.1);
}

.password-strength-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 250, 243, 0.52);
  font-size: 0.78rem;
  font-weight: 800;
}

.password-strength-head strong {
  color: rgba(255, 250, 243, 0.82);
}

.password-strength-bar {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 250, 243, 0.08);
}

.password-strength-bar span {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 250, 243, 0.22);
  transition: width 0.22s ease, background 0.22s ease;
}

.password-strength[data-password-strength="weak"] .password-strength-bar span {
  width: 26%;
  background: #ef6464;
}

.password-strength[data-password-strength="medium"] .password-strength-bar span {
  width: 52%;
  background: #f0b76b;
}

.password-strength[data-password-strength="strong"] .password-strength-bar span {
  width: 78%;
  background: #74e09a;
}

.password-strength[data-password-strength="excellent"] .password-strength-bar span {
  width: 100%;
  background: linear-gradient(135deg, #74e09a, #4ade80);
}

.password-rules {
  display: grid;
  gap: 6px;
  list-style: none;
  color: rgba(255, 250, 243, 0.42);
  font-size: 0.78rem;
  line-height: 1.4;
}

.password-rules li {
  position: relative;
  padding-left: 18px;
}

.password-rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 250, 243, 0.2);
  transform: translateY(-50%);
}

.password-rules li.is-valid {
  color: rgba(176, 255, 203, 0.86);
}

.password-rules li.is-valid::before {
  background: #74e09a;
}

.account-error {
  padding: 12px 14px;
  border-radius: 14px;
  color: #ffd7d7;
  background: rgba(180, 35, 35, 0.16);
  border: 1px solid rgba(255, 134, 134, 0.22);
  font-size: 0.88rem;
}

.account-actions {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.account-cancel-btn {
  color: rgba(255, 250, 243, 0.72);
  border-color: rgba(255, 250, 243, 0.14);
  background: rgba(255, 250, 243, 0.06);
}

.account-cancel-btn:hover {
  color: #fffaf3;
  background: rgba(255, 250, 243, 0.1);
}

/* ============================================================
   FOOTER — minimal, même fond que header
   ============================================================ */
.site-footer {
  background: var(--panel);
  border-top: 1px solid var(--panel-border);
  padding: 28px 0 48px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.88rem;
  flex-wrap: wrap;
}
.footer-logo {
  width: auto;
  height: 24px;
  object-fit: contain;
  opacity: 0.72;
}

/* ============================================================
   MODAL SUCCESS — confirmation après soumission formulaire
   ============================================================ */
.success-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 11, 8, 0.48);
  z-index: 100;
  padding: 24px;
  overflow-y: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.success-overlay[hidden] { display: none; }
.success-card {
  margin: auto;
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 48px 40px;
  text-align: center;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(13, 11, 8, 0.2);
}
.success-card h2 { font-size: 1.9rem; margin-bottom: 12px; }
.success-card p  { color: var(--muted); margin-bottom: 28px; line-height: 1.6; }

/* ============================================================
   TOAST — confirmation préinscription (motion design)
   ============================================================ */
/* Fond sombre quand le toast est actif — body::before évite tout stacking
   context lié au backdrop-filter de l'overlay */
body.toast-active::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(13, 11, 8, 0.62);
  z-index: 150;
  pointer-events: none;
}

/* Toast : position:fixed ancré au viewport via top/left en vh/vw
   Aucun ancêtre avec backdrop-filter ou transform → viewport garanti */
.success-toast {
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, calc(-50% + 130vh));
  z-index: 200;
  background: linear-gradient(145deg, #18a34a 0%, #15803d 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 1.75rem 1.05rem 1.25rem;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 6px 20px rgba(22,163,74,0.35),
    0 20px 56px rgba(22,163,74,0.22),
    0 28px 72px rgba(0,0,0,0.45);
  will-change: transform, opacity, scale;
}
.success-toast[hidden] { display: none; }

.success-toast.is-entering {
  animation: toast-enter 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.success-toast.is-leaving {
  animation: toast-exit 0.54s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes toast-enter {
  0%   { transform: translate(-50%, 80vh);  opacity: 0; scale: 0.86; }
  55%  { opacity: 1; }
  100% { transform: translate(-50%, -50%);  opacity: 1; scale: 1;    }
}

@keyframes toast-exit {
  /* anticipation : léger recul vers le bas avant de monter */
  0%   { transform: translate(-50%, -50%);   opacity: 1; scale: 1;    }
  14%  { transform: translate(-50%, -42%);   opacity: 1; scale: 1.04; }
  100% { transform: translate(-50%, -160vh); opacity: 0; scale: 0.82; }
}

/* ============================================================
   APP CONNECTÉE — landing locale + auth + dashboard
   ============================================================ */
.app-google-btn {
  width: 100%;
}

.app-auth-separator {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: rgba(255, 250, 243, 0.42);
  font-size: 0.82rem;
  font-weight: 800;
}

.app-auth-separator::before,
.app-auth-separator::after {
  content: "";
  height: 1px;
  background: rgba(255, 250, 243, 0.1);
}

.dashboard-page {
  /* conservé pour compatibilité éventuelle ; le dashboard utilise .dash-app */
  min-height: 100vh;
}

/* ============================================================
   DASHBOARD APP — coque type ElevenLabs (sidebar + topbar)
   ============================================================ */

body.dash-app {
  margin: 0;
  min-height: 100vh;
  opacity: 1;
  animation: none;
  background: var(--dash-body-bg, #f3f1ec);
  color: var(--dash-body-text, #120c10);
  line-height: 1.5;
}

body.dash-app .js-ready [data-reveal] {
  opacity: 1;
  transform: none;
}

.dash-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 100vh;
  width: 100%;
}

.dash-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  width: 258px;
  padding: 18px 14px 20px;
  background: #0c0c0c;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transition: width 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 961px) {
  body.dash-sidebar-collapsed .dash-sidebar {
    width: 76px;
    padding-inline: 10px;
  }

  body.dash-sidebar-collapsed .dash-sidebar-brand {
    justify-content: center;
    padding: 10px 8px 16px;
  }

  body.dash-sidebar-collapsed .dash-nav-link {
    justify-content: center;
    gap: 0;
    padding-inline: 10px;
  }

  body.dash-sidebar-collapsed .dash-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.dash-sidebar-collapsed .dash-sidebar-footnote {
    display: none;
  }
}

.dash-sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px 18px;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: #fafafa;
  border-radius: 14px;
}

.dash-sidebar-brand:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dash-brand-logo-full {
  display: block;
  height: 28px;
  width: auto;
  max-width: 186px;
  object-fit: contain;
  object-position: left center;
}

.dash-brand-logo-icon {
  display: none;
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 11px;
}

@media (min-width: 961px) {
  body.dash-sidebar-collapsed .dash-brand-logo-full {
    display: none;
  }

  body.dash-sidebar-collapsed .dash-brand-logo-icon {
    display: block;
  }
}

.dash-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.dash-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 650;
  color: rgba(250, 250, 250, 0.62);
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
}

.dash-nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fafafa;
}

.dash-nav-link.is-active {
  background: rgba(56, 71, 255, 0.18);
  color: #fafafa;
  box-shadow: inset 0 0 0 1px rgba(109, 74, 255, 0.28);
}

.dash-nav-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(250, 250, 250, 0.72);
}

.dash-nav-link.is-active .dash-nav-icon {
  background: rgba(56, 71, 255, 0.28);
  color: #e8eaff;
}

.dash-sidebar-footer {
  padding: 14px 10px 6px;
}

.dash-sidebar-footnote {
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(250, 250, 250, 0.36);
}

.dash-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  --dash-mesh-bg: var(--bg);
  background: var(--dash-mesh-bg);
}

.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 22px 14px 18px;
  border-bottom: 1px solid rgba(18, 12, 16, 0.08);
  background: #1a191c;
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 30;
}

.dash-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.dash-collapse-toggle {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(250, 250, 250, 0.88);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "collapse-toggle-icon";
}

.dash-collapse-toggle .dash-collapse-svg {
  grid-area: collapse-toggle-icon;
  display: none;
}

@media (min-width: 961px) {
  .dash-collapse-toggle {
    display: grid;
  }

  body:not(.dash-sidebar-collapsed) .dash-collapse-toggle .dash-collapse-svg--collapse {
    display: block;
  }

  body.dash-sidebar-collapsed .dash-collapse-toggle .dash-collapse-svg--expand {
    display: block;
  }
}

.dash-collapse-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

.dash-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fafafa;
  cursor: pointer;
}

.dash-sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dash-topbar-title {
  margin: 0;
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #fafafa;
}

.dash-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.dash-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.dash-top-btn:hover {
  transform: translateY(-1px);
}

.dash-top-btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(250, 250, 250, 0.88);
}

.dash-top-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dash-top-btn-primary {
  background: rgba(56, 71, 255, 0.35);
  border-color: rgba(129, 140, 248, 0.55);
  color: #fafafa;
}

.dash-top-btn-primary:hover {
  background: rgba(56, 71, 255, 0.48);
}

.dash-icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(250, 250, 250, 0.88);
  cursor: pointer;
  position: relative;
}

.dash-icon-btn:hover {
  background: rgba(255, 255, 255, 0.11);
}

.dash-icon-btn-bell .dash-notify-dot {
  position: absolute;
  top: 10px;
  right: 11px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #818cf8;
  box-shadow: 0 0 0 2px #1a191c;
}

.dash-profile-wrap {
  position: relative;
  margin-left: 4px;
}

.dash-profile-trigger {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.dash-profile-trigger:hover {
  box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.65);
}

.dash-avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #120c10;
  background: linear-gradient(135deg, var(--amber-light) 0%, var(--amber) 100%);
}

.dash-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.dash-avatar--initials {
  background: linear-gradient(145deg, #6d4aff 0%, #3847ff 55%, #2563eb 100%);
  color: #fff;
}

.dash-avatar--sm {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  font-size: 0.78rem;
}

.dash-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(300px, calc(100vw - 32px));
  padding: 12px;
  border-radius: 16px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  z-index: 50;
}

.dash-dropdown-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 12px;
}

.dash-dropdown-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dash-dropdown-meta strong {
  font-size: 0.92rem;
  font-weight: 750;
}

.dash-dropdown-email {
  font-size: 0.78rem;
  color: rgba(250, 250, 250, 0.48);
  word-break: break-all;
}

.dash-dropdown-sep {
  height: 1px;
  margin: 6px 0;
  background: rgba(255, 255, 255, 0.08);
}

.dash-dropdown-item {
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: rgba(250, 250, 250, 0.88);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
}

.dash-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.dash-dropdown-item-danger {
  color: #ffb4b4;
}

.dash-dropdown-item-danger:hover {
  background: rgba(180, 35, 35, 0.16);
}

.dash-main {
  --dash-body-text: #120c10;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(24px, 4vw, 48px) clamp(18px, 3vw, 40px);
  background: transparent;
  color: var(--dash-body-text);
}

.dash-main-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin-block: auto;
  margin-inline: auto;
}

.dash-main-visual-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--dash-mesh-bg, var(--bg));
  background-image:
    linear-gradient(to right, rgba(72, 53, 34, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(72, 53, 34, 0.09) 1px, transparent 1px),
    radial-gradient(circle at 82% 10%, var(--amber-glow) 0, transparent 38vw),
    radial-gradient(circle at 8% 42%, var(--blue-glow) 0, transparent 36vw),
    radial-gradient(circle at 62% 72%, var(--wine-glow) 0, transparent 32vw),
    linear-gradient(180deg, rgba(251, 247, 241, 0.95) 0%, rgba(248, 241, 231, 0.98) 45%, rgba(251, 250, 248, 0.99) 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

body.dash-app:not([data-dashboard-page="home"]) .dash-main {
  justify-content: flex-start;
}

body.dash-app:not([data-dashboard-page="home"]) .dash-main-inner {
  margin-block: 0;
  margin-top: 0;
}

.dash-agent-workspace {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
  width: 100%;
}

@media (max-width: 760px) {
  .dash-agent-workspace {
    grid-template-columns: 1fr;
  }

  .dash-requests-hub {
    max-width: none !important;
  }
}

.dash-agent-chip {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 34px rgba(72, 53, 34, 0.07);
}

.dash-agent-chip--duo {
  flex-wrap: wrap;
}

.dash-agent-chip img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
}

.dash-agent-chip-avatars {
  display: flex;
  align-items: center;
}

.dash-agent-chip-avatars img {
  width: 52px;
  height: 52px;
  margin-right: -14px;
}

.dash-agent-chip-avatars img:last-child {
  margin-right: 0;
}

.dash-agent-chip-name {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.15;
}

.dash-agent-chip-role {
  margin: 6px 0 0;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--muted);
  line-height: 1.35;
}

.dash-requests-hub {
  width: 100%;
  max-width: min(720px, 100%);
  margin-inline: auto;
  justify-self: stretch;
}

.dash-requests-hub-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 20px;
}

.dash-requests-hub h2 {
  margin: 0;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.dash-requests-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-requests-filter label {
  font-size: 0.8rem;
  font-weight: 750;
  color: var(--muted);
}

.dash-requests-filter select {
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 650;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.dash-requests-empty {
  padding: 44px 26px;
  text-align: center;
  border-radius: 22px;
  background: rgba(255, 250, 243, 0.85);
  border: 1px dashed rgba(72, 53, 34, 0.2);
}

.dash-requests-empty p {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--text);
  line-height: 1.55;
}

.dash-requests-empty-hint {
  margin-top: 10px !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
}

.dash-requests-hub--muted {
  padding: 36px 24px;
  text-align: center;
}

.dash-requests-placeholder-msg {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.55;
}

/* Page Jade — connexion WhatsApp liée au compte */
.dash-wa-connect-hub .dash-requests-hub-head {
  margin-bottom: 14px;
}

.dash-wa-connect-card {
  padding: clamp(22px, 3vw, 30px);
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 14px 38px rgba(72, 53, 34, 0.08);
  text-align: left;
}

.dash-wa-connect-lead {
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
}

.dash-wa-connect-lead code {
  font-size: 0.82em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(72, 53, 34, 0.06);
}

.dash-wa-connect-steps {
  margin: 0 0 18px;
  padding-left: 1.35rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
}

.dash-wa-connect-steps li {
  margin-bottom: 10px;
}

.dash-wa-connect-steps li:last-child {
  margin-bottom: 0;
}

.dash-wa-connect-note {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
  background: rgba(56, 71, 255, 0.06);
  border: 1px solid rgba(56, 71, 255, 0.12);
}

.dash-wa-connect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 750;
  padding: 12px 22px;
  border-radius: 14px;
  border: none;
  cursor: not-allowed;
  background: linear-gradient(135deg, #3847ff 0%, #6d4aff 100%);
  color: #fff;
  opacity: 0.55;
  box-shadow: 0 10px 28px rgba(56, 71, 255, 0.22);
}

.dash-wa-connect-btn:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}

.dash-wa-connect-btn:not(:disabled):hover {
  filter: brightness(1.05);
}

.dash-wa-connect-footnote {
  margin: 16px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
}

.dash-wa-connect-footnote a {
  color: var(--blue-dark);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dash-rentals-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 18px;
}

.dash-btn-dash--secondary {
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.dash-btn-dash--secondary:hover:not(:disabled) {
  border-color: rgba(56, 71, 255, 0.35);
  box-shadow: 0 8px 24px rgba(56, 71, 255, 0.08);
}

.dash-btn-dash--secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dash-rentals-status {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.dash-requests-empty--compact {
  padding: 28px 18px;
}

.dash-rental-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash-rental-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px 16px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 250, 243, 0.92);
  border: 1px solid rgba(72, 53, 34, 0.12);
}

.dash-rental-rank {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--muted);
  min-width: 2.25rem;
}

.dash-rental-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.98rem;
}

.dash-rental-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(56, 71, 255, 0.12);
  color: rgb(56, 71, 255);
}

.dash-rental-meta {
  margin-top: 8px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
}

.dash-rentals-backend-note {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(56, 71, 255, 0.06);
  border: 1px solid rgba(56, 71, 255, 0.18);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
}

.dash-rentals-backend-note code {
  font-size: 0.82rem;
}

.dash-beta-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 18px;
}

.dash-btn-dash--accent {
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  padding: 11px 18px;
  border-radius: 12px;
  border: 1px solid rgba(201, 137, 59, 0.55);
  background: linear-gradient(180deg, rgba(255, 248, 237, 0.98), rgba(255, 236, 212, 0.92));
  color: rgb(72, 53, 34);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(72, 53, 34, 0.09);
}

.dash-btn-dash--accent:hover:not(:disabled) {
  border-color: rgba(201, 137, 59, 0.95);
}

.dash-btn-dash--accent:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dash-beta-status {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--muted);
  max-width: 42rem;
}

.dash-beta-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 3vw, 22px);
  margin-bottom: 22px;
}

.dash-beta-col {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 250, 243, 0.72);
  border: 1px solid rgba(72, 53, 34, 0.12);
}

.dash-beta-col-title {
  margin: 0 0 6px;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.dash-beta-col-hint {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.45;
}

.dash-beta-col-hint code {
  font-size: 0.74rem;
}

.dash-beta-order {
  min-height: 2rem;
}

.dash-beta-empty {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.45;
}

.dash-rental-list--compact {
  gap: 10px;
}

.dash-rental-row--compact {
  padding: 12px 14px;
  grid-template-columns: auto minmax(0, 1fr);
}

.dash-rental-meta--compact {
  font-size: 0.82rem;
  line-height: 1.45;
}

.dash-rental-score-hint {
  font-weight: 700;
  color: rgba(18, 12, 16, 0.72);
}

.dash-rentals-detail-title {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
}

.dash-rentals-error {
  margin: 0 0 14px;
  font-size: 0.86rem;
  font-weight: 650;
  color: #b42318;
}

.dash-rental-line {
  display: inline-block;
  margin-right: 14px;
  margin-bottom: 6px;
}

.dash-rental-line--block {
  display: block;
  margin-right: 0;
  margin-top: 8px;
  font-style: italic;
}

.dash-page-intro {
  max-width: 720px;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.dash-page-intro .dash-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 10px;
}

.dash-page-intro h2 {
  margin: 0 0 12px;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--dash-body-text);
}

.dash-page-intro p {
  margin: 0;
  color: rgba(18, 12, 16, 0.58);
  font-size: 0.98rem;
  line-height: 1.65;
}

.dash-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.dash-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 18px;
  background: #fffaf6;
  border: 1px solid rgba(72, 53, 34, 0.12);
  box-shadow: 0 12px 34px rgba(72, 53, 34, 0.07);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dash-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 71, 255, 0.28);
  box-shadow: 0 18px 44px rgba(56, 71, 255, 0.12);
}

.dash-tile img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(18, 8, 13, 0.14));
}

.dash-tile img.dash-tile-img-duo {
  width: auto;
  max-width: 100%;
  height: 76px;
  object-fit: contain;
}

.dash-tile-duo-avatars {
  display: flex;
  align-items: center;
  gap: 0;
}

.dash-tile-duo-avatars img {
  width: 72px;
  height: 72px;
  margin-right: -12px;
}

.dash-tile-duo-avatars img:last-child {
  margin-right: 0;
}

.dash-tile h3 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--dash-body-text);
}

.dash-tile p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(18, 12, 16, 0.52);
}

.dash-tile-kicker {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(201, 137, 59, 0.92);
}

.dash-placeholder-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  min-height: min(520px, calc(100vh - 220px));
  padding: 40px 24px;
  border-radius: 22px;
  background: #fffaf6;
  border: 1px solid rgba(72, 53, 34, 0.12);
  box-shadow: 0 14px 40px rgba(72, 53, 34, 0.06);
}

.dash-placeholder-page img {
  width: min(200px, 48vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(18, 8, 13, 0.12));
}

.dash-placeholder-page h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--dash-body-text);
}

.dash-placeholder-page p {
  margin: 0;
  max-width: 420px;
  color: rgba(18, 12, 16, 0.52);
  font-size: 0.95rem;
}

.dash-placeholder-duo {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.dash-placeholder-duo img {
  width: min(160px, 40vw);
}

.dash-sidebar-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  z-index: 38;
  backdrop-filter: blur(2px);
}

body.dash-sidebar-open .dash-sidebar {
  transform: translateX(0);
}

@media (max-width: 960px) {
  .dash-layout {
    grid-template-columns: 1fr;
  }

  .dash-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(288px, 86vw);
    z-index: 40;
    transform: translateX(-102%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.45);
  }

  .dash-sidebar-toggle {
    display: grid;
  }
}

@media (min-width: 961px) {
  .dash-sidebar-scrim[hidden] {
    display: none !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dash-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-shell {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
  }

  .account-copy h1 {
    max-width: 13ch;
  }
}

@media (min-width: 1181px) and (max-width: 1480px) {
  .pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-band { min-height: auto; }
  .hero-preview { max-width: 620px; }
  .market-grid { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .dash-home-grid { grid-template-columns: 1fr; }
  .pricing-note { border-radius: 22px; }
  .waitlist-inner { grid-template-columns: 1fr; gap: 48px; }
  .founders-grid  { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
  .agent-showcase {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: clamp(300px, 44vw, 440px);
  }

  .agent-showcase-portrait.has-agent-image {
    inset: 0 0 auto 0;
    width: 100%;
    height: clamp(280px, 40vw, 420px);
  }

  .agent-showcase-content,
  .agent-demo-panel {
    grid-column: 1;
  }

  .agent-demo-panel {
    align-content: start;
  }
}

@media (max-width: 820px) {
  .agents-band {
    padding-top: 82px;
  }

  .agents-carousel {
    gap: 36px;
  }

  .agent-showcase {
    grid-template-columns: 1fr;
    height: auto;
    min-height: auto;
    padding-top: clamp(330px, 62vw, 450px);
  }

  .agent-showcase-portrait.has-agent-image {
    inset: 0 0 auto 0;
    width: 100%;
    height: clamp(310px, 58vw, 430px);
  }

  .agent-showcase-avatar.has-agent-image {
    inset: 0 0 0 0;
    justify-content: center;
  }

  .agent-showcase-avatar.has-agent-image img {
    height: 108%;
    max-width: none;
  }

  .agent-showcase-content {
    grid-column: 1;
  }
}

@media (max-width: 680px) {
  h1 { max-width: none; }
  .brand-logo { height: 36px; }
  .header-tag { display: none; }
  .hero-band { padding: 56px 0 42px; }
  .hero-content { gap: 34px; }
  .signup-card-head {
    flex-direction: column;
    align-items: stretch;
  }
  .offer-ribbon {
    align-self: flex-start;
    transform: none;
    margin-top: 6px;
  }
  .countdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero-preview,
  .hero-signup-card {
    border-radius: 24px;
    padding: 20px;
  }
  .call-card,
  .preview-grid,
  .preview-footer { grid-template-columns: 1fr; }
  .call-card { display: grid; }
  .call-score { justify-self: start; }
  .workflow-step { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; }
  .field-row    { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; gap: 6px; }
  .agents-tabs {
    gap: 10px;
    min-height: 124px;
  }
  .agent-tab,
  .agent-tab-avatar {
    --agent-tab-size: 54px;
  }
  .agent-tab-avatar { font-size: 1rem; }
  .agent-tab-avatar img {
    width: auto;
    height: calc(var(--agent-tab-size) * 1.32);
  }
  .agent-tab-name { font-size: 0.78rem; }
  .agent-tab-role { font-size: 0.58rem; }
  .agent-showcase {
    padding: clamp(310px, 62vw, 420px) 22px 22px;
    border-radius: 24px;
  }
  .agent-showcase-avatar {
    width: 120px;
    height: 120px;
    font-size: 3rem;
  }
  .agent-showcase-avatar.has-agent-image {
    width: auto;
    height: 100%;
  }
  .agent-showcase-avatar.has-agent-image img {
    height: 106%;
    max-width: none;
  }
  .agent-showcase-features li { font-size: 0.74rem; padding: 6px 10px; }
  .founders-card { width: calc(100% - 12px); padding: 48px 0; border-radius: 24px; }
  .founder-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .founder-photo { margin: 0 auto; }
}

/* ============================================================
   APP — Hero « résultats » (landing locale)
   ============================================================ */
.hero-outcomes-card .signup-lede {
  margin-bottom: 18px;
}

.hero-outcomes-ribbon span {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 40%),
    linear-gradient(135deg, #3847ff 0%, #6d4aff 100%);
  box-shadow:
    0 10px 22px rgba(56, 71, 255, 0.28),
    0 0 0 1px rgba(200, 206, 255, 0.28);
}

.hero-outcomes-ribbon small {
  color: rgba(255, 255, 255, 0.78);
}

.hero-outcomes-grid {
  display: grid;
  gap: 14px;
}

.hero-outcome-metric {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 250, 243, 0.06);
  border: 1px solid rgba(255, 250, 243, 0.1);
}

.hero-outcome-metric-accent {
  background:
    radial-gradient(circle at 100% 0%, rgba(56, 71, 255, 0.2), transparent 42%),
    rgba(255, 250, 243, 0.07);
  border-color: rgba(56, 71, 255, 0.22);
}

.hero-outcome-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 250, 243, 0.48);
  margin-bottom: 8px;
}

.hero-outcome-value {
  display: block;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 900;
  color: var(--amber-light);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero-outcome-note {
  display: block;
  font-size: 0.84rem;
  color: rgba(255, 250, 243, 0.54);
  margin-top: 6px;
  line-height: 1.45;
}

.hero-outcome-bar {
  margin-top: 12px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 250, 243, 0.08);
  overflow: hidden;
}

.hero-outcome-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber) 0%, var(--amber-light) 100%);
  box-shadow: 0 0 12px rgba(240, 183, 107, 0.35);
}

.hero-outcome-bar-cool span {
  background: linear-gradient(90deg, var(--blue) 0%, #74e09a 100%);
  box-shadow: 0 0 14px rgba(56, 71, 255, 0.35);
}

.hero-outcomes-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(56, 71, 255, 0.12);
  border: 1px solid rgba(56, 71, 255, 0.22);
}

.hero-outcomes-footer span {
  font-size: 0.78rem;
  color: rgba(255, 250, 243, 0.56);
  font-weight: 750;
}

.hero-outcomes-footer strong {
  font-size: clamp(0.85rem, 1.5vw, 0.98rem);
  color: #fffaf3;
  font-weight: 850;
  letter-spacing: 0.02em;
}

.hero-outcomes-disclaimer {
  margin-top: 14px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(255, 250, 243, 0.42);
}

.password-strength[data-password-strength="empty"] .password-strength-bar span {
  width: 0;
  background: transparent;
}

.password-strength[data-password-strength="empty"] .password-strength-head strong {
  color: rgba(255, 250, 243, 0.42);
}

/* ============================================================
   ALIMIO SPS — connexion et espace de test (novembre 2026)
   ============================================================ */

/* === CONNEXION — même ambiance sombre que l'en-tête du site === */
.login-page {
  /* Affichage immédiat, comme l'espace connecté (pas d'animation d'entrée) */
  opacity: 1;
  animation: none;
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: #fffaf3;
  background:
    radial-gradient(circle at 12% 18%, rgba(56, 71, 255, 0.22), transparent 34vw),
    radial-gradient(circle at 88% 8%, rgba(240, 183, 107, 0.2), transparent 30vw),
    linear-gradient(135deg, #07060a 0%, #100914 52%, #2b160e 100%);
}

.login-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: 22px 0;
}

.login-brand img { height: 40px; width: auto; }

.login-back {
  color: rgba(255, 250, 243, 0.7);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.18s ease;
}
.login-back:hover { color: #fffaf3; }

.login-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 24px 16px 64px;
}

.login-card {
  width: min(440px, 100%);
  display: grid;
  gap: 14px;
}

.login-card h1 {
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.login-lede {
  color: rgba(255, 250, 243, 0.62);
  font-size: 0.96rem;
  line-height: 1.6;
}

.login-form {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.login-form .btn-full { margin-top: 6px; }

.login-error {
  color: #ff9b8a;
  font-size: 0.84rem;
  font-weight: 600;
}

.login-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 250, 243, 0.4);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.login-sep::before,
.login-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 250, 243, 0.14);
}

.login-skip {
  width: 100%;
  color: #fffaf3;
  background: rgba(255, 250, 243, 0.06);
  border-color: rgba(255, 250, 243, 0.22);
}
.login-skip:hover { background: rgba(255, 250, 243, 0.12); }

.login-note {
  color: rgba(255, 250, 243, 0.45);
  font-size: 0.8rem;
  text-align: center;
}

/* === ACCUEIL === */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.home-hero-visual {
  overflow: hidden;
  margin: 0;
  border-radius: 22px;
  background: #0b080d;
  box-shadow: 0 18px 44px rgba(18, 8, 13, 0.18);
}
.home-hero-visual img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.home-steps {
  list-style: none;
  display: grid;
  gap: 12px;
  align-content: center;
  margin: 0;
  padding: 0;
}

.home-steps li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fffaf6;
  border: 1px solid rgba(72, 53, 34, 0.12);
}

.home-steps li > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--amber);
  background: rgba(201, 137, 59, 0.12);
  font-size: 0.74rem;
  font-weight: 900;
}

.home-steps strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.home-steps p { margin: 0; color: rgba(18, 12, 16, 0.58); font-size: 0.9rem; line-height: 1.5; }

.home-section-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--dash-body-text);
}

.home-links { margin-bottom: clamp(28px, 4vw, 44px); }

.home-tile .home-tile-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #0b080d;
}
.home-tile .home-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-tile:hover .home-tile-media img { transform: scale(1.05); }

.home-detect {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}

.home-detect li {
  display: grid;
  gap: 4px;
  padding: 14px 16px 14px 34px;
  position: relative;
  border-radius: 14px;
  background: #fffaf6;
  border: 1px solid rgba(72, 53, 34, 0.12);
}
.home-detect li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 19px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.home-detect li.is-ready::before { background: #1f9f45; box-shadow: 0 0 0 4px rgba(31, 159, 69, 0.14); }
.home-detect li.is-test::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(201, 137, 59, 0.16); }
.home-detect li.is-later::before { background: rgba(18, 12, 16, 0.25); }
.home-detect strong { font-size: 0.95rem; }
.home-detect span { color: rgba(18, 12, 16, 0.55); font-size: 0.82rem; }

/* === PHASE DE TEST — reprend la mise en page de l'application Mac === */
.test-card {
  margin-bottom: 18px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: 22px;
  background: #fffaf6;
  border: 1px solid rgba(72, 53, 34, 0.12);
  box-shadow: 0 12px 34px rgba(72, 53, 34, 0.07);
}

.test-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.test-card-head h3 { margin: 0; font-size: 1.02rem; font-weight: 800; }

.test-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-btn);
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(18, 12, 16, 0.7);
  background: rgba(18, 12, 16, 0.05);
}
.test-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #d64545; }

.test-source-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.test-segmented,
.test-modes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(18, 12, 16, 0.05);
}

.test-segmented button,
.test-modes button,
.test-tags button {
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(18, 12, 16, 0.62);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.test-segmented button:hover,
.test-modes button:hover { color: var(--dash-body-text); }
.test-segmented button.is-active,
.test-modes button.is-active {
  color: var(--dash-body-text);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(18, 12, 16, 0.1);
}

.test-source-connect {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.test-input {
  color: var(--dash-body-text);
  background: #ffffff;
  border-color: rgba(72, 53, 34, 0.16);
}
.test-input::placeholder { color: rgba(18, 12, 16, 0.4); }
.test-input:disabled { opacity: 0.7; cursor: not-allowed; }

.test-btn {
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid rgba(72, 53, 34, 0.16);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--dash-body-text);
  background: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.test-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(18, 12, 16, 0.1); }
.test-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.test-btn-primary {
  color: #ffffff;
  background: #120c10;
  border-color: #120c10;
}

.test-player-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.test-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.test-pill {
  padding: 6px 12px;
  border-radius: var(--r-btn);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dash-body-text);
  background: rgba(18, 12, 16, 0.06);
}
.test-pill-muted { color: var(--amber); background: rgba(201, 137, 59, 0.12); }

.test-video {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  color: rgba(255, 250, 243, 0.75);
  background:
    radial-gradient(circle at 50% 40%, rgba(56, 71, 255, 0.18), transparent 60%),
    #0b080d;
}

.test-video-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}
.test-video-empty strong { color: #fffaf3; font-size: 1.05rem; }
.test-video-empty p { margin: 0; font-size: 0.88rem; max-width: 420px; }
.test-video-empty .test-btn-primary { color: #120c10; background: #fffaf3; border-color: #fffaf3; margin-top: 4px; }
.test-toast { color: var(--amber-light); }

.test-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 250, 243, 0.2);
  font-size: 1.6rem;
  line-height: 1;
  color: #fffaf3;
  background: rgba(255, 250, 243, 0.08);
  cursor: pointer;
}
.test-arrow:disabled { opacity: 0.3; cursor: not-allowed; }
.test-arrow-left { left: 14px; }
.test-arrow-right { right: 14px; }

.test-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}

.test-controls-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.test-time {
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  font-weight: 700;
  color: rgba(18, 12, 16, 0.55);
}

.test-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.test-tags button { border: 1px solid rgba(72, 53, 34, 0.16); background: #ffffff; }
.test-tags button:hover { border-color: rgba(201, 137, 59, 0.5); }
.test-tags button.is-active[data-tag="parfaite"] { color: #ffffff; background: #1f9f45; border-color: #1f9f45; }
.test-tags button.is-active[data-tag="utile"] { color: #ffffff; background: #e48a1d; border-color: #e48a1d; }
.test-tags button.is-active[data-tag="moyenne"] { color: #ffffff; background: #8a8590; border-color: #8a8590; }

.test-stats { display: flex; gap: 16px; margin: 0; }
.test-stats div { display: grid; gap: 2px; }
.test-stats dt { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(18, 12, 16, 0.45); }
.test-stats dd { margin: 0; font-size: 0.92rem; font-weight: 800; }

/* === AVANCEMENT === */
.progress-summary {
  margin-bottom: clamp(22px, 3vw, 34px);
  padding: clamp(18px, 2vw, 24px);
  border-radius: 22px;
  background: #fffaf6;
  border: 1px solid rgba(72, 53, 34, 0.12);
  box-shadow: 0 12px 34px rgba(72, 53, 34, 0.07);
}

.progress-summary-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.progress-summary-head strong { font-size: 1.1rem; }
.progress-summary-head span { color: var(--amber); font-weight: 700; font-size: 0.9rem; }

.progress-bar {
  display: flex;
  height: 12px;
  overflow: hidden;
  border-radius: var(--r-btn);
  background: rgba(18, 12, 16, 0.08);
}
.progress-bar-done { background: linear-gradient(90deg, #1f9f45, #34c262); }
.progress-bar-doing {
  background: repeating-linear-gradient(135deg, rgba(201, 137, 59, 0.75) 0 8px, rgba(240, 183, 107, 0.75) 8px 16px);
}

.progress-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0 0;
  padding: 0;
  font-size: 0.82rem;
  color: rgba(18, 12, 16, 0.6);
}
.progress-legend li { display: inline-flex; align-items: center; gap: 6px; }
.progress-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.progress-legend .is-done::before { background: #1f9f45; }
.progress-legend .is-doing::before { background: var(--amber); }
.progress-legend .is-todo::before { background: rgba(18, 12, 16, 0.2); }

.progress-phases { display: grid; gap: clamp(18px, 2.4vw, 28px); }

.progress-phase h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 800;
}
.progress-phase h3 span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}

.progress-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}

.progress-steps li {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 16px 16px 44px;
  border-radius: 16px;
  background: #fffaf6;
  border: 1px solid rgba(72, 53, 34, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.progress-steps li:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(72, 53, 34, 0.1); }

.progress-steps li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 900;
  color: #ffffff;
}
.progress-steps li.is-done::before { content: "✓"; background: #1f9f45; }
.progress-steps li.is-doing::before { background: var(--amber); box-shadow: 0 0 0 4px rgba(201, 137, 59, 0.18); }
.progress-steps li.is-todo::before { background: transparent; border: 2px solid rgba(18, 12, 16, 0.22); width: 14px; height: 14px; left: 18px; top: 20px; }
.progress-steps li.is-doing { border-color: rgba(201, 137, 59, 0.4); }
.progress-steps li.is-todo { opacity: 0.78; }

.progress-steps strong { font-size: 0.96rem; line-height: 1.3; }
.progress-steps p { margin: 0; color: rgba(18, 12, 16, 0.58); font-size: 0.86rem; line-height: 1.5; }

/* === Écrans plus petits === */
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; }
  .test-source-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .test-source-connect { grid-template-columns: 1fr; }
  .test-modes { width: 100%; }
  .test-modes button { flex: 1; padding: 8px 10px; }
  .test-controls { flex-direction: column; align-items: stretch; }
  .test-stats { justify-content: space-between; }
  .test-arrow { width: 36px; height: 36px; font-size: 1.3rem; }
  .test-arrow-left { left: 8px; }
  .test-arrow-right { right: 8px; }
  .login-brand img { height: 32px; }
}

@media (max-width: 640px) {
  /* Téléphone : on garde seulement le titre et le compte dans la barre du haut */
  .dash-topbar .dash-top-btn,
  .dash-topbar .dash-icon-btn { display: none; }
}

/* === AVANCEMENT — idéation et animation des étapes en cours === */
.progress-legend .is-idea::before { background: var(--blue); }

.progress-steps li.is-idea { border-color: rgba(56, 71, 255, 0.3); border-style: dashed; }
.progress-steps li.is-idea::before {
  content: "";
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(56, 71, 255, 0.14);
}

/* Les bandes orange défilent : le travail est en train de se faire */
.progress-bar-doing {
  background-size: 22.6px 22.6px;
  animation: progress-stripes 1.1s linear infinite;
}

@keyframes progress-stripes {
  from { background-position: 0 0; }
  to { background-position: 22.6px 0; }
}

.progress-steps li.is-doing::before { animation: progress-dot-pulse 1.6s ease-in-out infinite; }

@keyframes progress-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201, 137, 59, 0.18); }
  50% { box-shadow: 0 0 0 7px rgba(201, 137, 59, 0.06); }
}

.progress-idea {
  margin-top: 14px;
  padding: clamp(18px, 2vw, 24px);
  border-radius: 20px;
  background:
    radial-gradient(circle at 96% 0%, rgba(56, 71, 255, 0.1), transparent 40%),
    #fffaf6;
  border: 1px dashed rgba(56, 71, 255, 0.35);
}

.progress-idea-kicker {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.progress-idea h4 {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.progress-idea h5 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-weight: 800;
}

.progress-idea p,
.progress-idea li {
  color: rgba(18, 12, 16, 0.62);
  font-size: 0.88rem;
  line-height: 1.55;
}
.progress-idea p { margin: 0; }
.progress-idea strong { color: var(--dash-body-text); }

.progress-idea-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.progress-idea-grid > div {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(72, 53, 34, 0.1);
}

.progress-idea-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 700px) {
  .progress-idea-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-doing,
  .progress-steps li.is-doing::before { animation: none; }
}

/* === ACCUEIL — les 3 étapes dans un seul bloc, raccourcis avec bouton === */
.home-steps-card {
  display: grid;
  align-content: center;
  padding: 6px 20px;
  border-radius: 22px;
  background: #fffaf6;
  border: 1px solid rgba(72, 53, 34, 0.12);
  box-shadow: 0 12px 34px rgba(72, 53, 34, 0.07);
}

.home-steps-card .home-steps { gap: 0; }

.home-steps-card .home-steps li {
  padding: 16px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.home-steps-card .home-steps li + li { border-top: 1px solid rgba(72, 53, 34, 0.1); }

.home-tile { height: 100%; }
.home-tile p { flex: 1; }

.home-tile-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin-top: 4px;
  padding: 9px 16px;
  border-radius: var(--r-btn);
  color: #ffffff;
  background: #120c10;
  font-size: 0.84rem;
  font-weight: 700;
  transition: background 0.18s ease, gap 0.18s ease;
}
.home-tile:hover .home-tile-cta {
  gap: 12px;
  background: var(--blue);
}

.home-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-tile .home-tile-media { aspect-ratio: 21 / 9; }

@media (max-width: 760px) {
  .home-links { grid-template-columns: 1fr; }
  .home-tile .home-tile-media { aspect-ratio: 16 / 9; }
}

/* Accueil compact : tout tient sur un écran d'ordinateur */
body[data-dashboard-page="home"] .dash-page-intro { margin-bottom: 24px; }
body[data-dashboard-page="home"] .home-hero { margin-bottom: 28px; }
body[data-dashboard-page="home"] .home-hero-visual img { aspect-ratio: 2.2 / 1; }
body[data-dashboard-page="home"] .home-steps-card .home-steps li { padding: 12px 0; }
body[data-dashboard-page="home"] .home-links { margin-bottom: 28px; }
body[data-dashboard-page="home"] .home-tile { gap: 10px; padding: 16px; }
body[data-dashboard-page="home"] .home-tile .home-tile-media { aspect-ratio: 3.4 / 1; }

@media (max-width: 900px) {
  body[data-dashboard-page="home"] .home-hero-visual img { aspect-ratio: 16 / 9; }
}
@media (max-width: 760px) {
  body[data-dashboard-page="home"] .home-tile .home-tile-media { aspect-ratio: 16 / 9; }
}

/* Accueil : 4 raccourcis sur une ligne, 2 sur tablette, 1 sur téléphone */
body[data-dashboard-page="home"] .home-links { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
body[data-dashboard-page="home"] .home-detect { margin-bottom: 28px; }
body[data-dashboard-page="home"] .home-tile .home-tile-media { aspect-ratio: 2.4 / 1; }
@media (max-width: 1200px) {
  body[data-dashboard-page="home"] .home-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body[data-dashboard-page="home"] .home-links { grid-template-columns: 1fr; }
}

/* ============================================================
   CONFORMITÉ — sommaire collant, sections, points sourcés
   ============================================================ */
body[data-dashboard-page="conformite"] .dash-main-inner { max-width: 1040px; }

.law-toc {
  position: sticky;
  top: -1px;
  z-index: 5;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 0 clamp(22px, 3vw, 32px);
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 250, 246, 0.92);
  border: 1px solid rgba(72, 53, 34, 0.12);
  box-shadow: 0 10px 28px rgba(72, 53, 34, 0.08);
  backdrop-filter: blur(12px);
  scrollbar-width: none;
}
.law-toc::-webkit-scrollbar { display: none; }

.law-toc a {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 10px;
  color: rgba(18, 12, 16, 0.65);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
}
.law-toc a:hover { color: var(--dash-body-text); background: rgba(18, 12, 16, 0.05); }
.law-toc a.is-active { color: #ffffff; background: #120c10; }

.law-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: clamp(26px, 3.5vw, 40px);
}
.law-banner figure {
  overflow: hidden;
  margin: 0;
  border-radius: 20px;
  background: #0b080d;
}
.law-banner img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.law-warning {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(201, 137, 59, 0.1);
  border: 1px solid rgba(201, 137, 59, 0.3);
}
.law-warning strong { font-size: 0.98rem; }
.law-warning p { margin: 0; color: rgba(18, 12, 16, 0.68); font-size: 0.9rem; line-height: 1.55; }

.law-section {
  scroll-margin-top: 90px;
  margin-bottom: clamp(30px, 4vw, 46px);
}

.law-section > h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.law-section > h3 span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}
.law-section > p.law-intro {
  margin: 0 0 16px;
  max-width: 760px;
  color: rgba(18, 12, 16, 0.6);
  font-size: 0.95rem;
  line-height: 1.6;
}

.law-points { display: grid; gap: 12px; }

.law-point {
  padding: 16px 18px;
  border-radius: 18px;
  background: #fffaf6;
  border: 1px solid rgba(72, 53, 34, 0.12);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.law-point:hover { border-color: rgba(201, 137, 59, 0.35); box-shadow: 0 10px 26px rgba(72, 53, 34, 0.08); }

.law-point h4 { margin: 0 0 6px; font-size: 1rem; font-weight: 800; line-height: 1.35; }
.law-point p { margin: 0; color: rgba(18, 12, 16, 0.66); font-size: 0.9rem; line-height: 1.6; }

.law-point .law-impact {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--dash-body-text);
  background: rgba(56, 71, 255, 0.06);
  border-left: 3px solid var(--blue);
  font-size: 0.88rem;
}
.law-point .law-impact strong { color: var(--blue); }

.law-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  font-size: 0.8rem;
}
.law-sources a {
  color: var(--amber);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(201, 137, 59, 0.4);
  text-underline-offset: 3px;
}
.law-sources a:hover { color: var(--dash-body-text); }

.law-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(72, 53, 34, 0.12);
  background: #fffaf6;
}
.law-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.law-table th,
.law-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(72, 53, 34, 0.1);
}
.law-table th {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(18, 12, 16, 0.5);
  background: rgba(18, 12, 16, 0.03);
}
.law-table tr:last-child td { border-bottom: 0; }
.law-table td:first-child { font-weight: 700; }

.law-rules {
  list-style: none;
  counter-reset: rule;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}
.law-rules li {
  counter-increment: rule;
  position: relative;
  padding: 14px 14px 14px 48px;
  border-radius: 16px;
  background: #fffaf6;
  border: 1px solid rgba(72, 53, 34, 0.12);
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(18, 12, 16, 0.7);
}
.law-rules li::before {
  content: counter(rule);
  position: absolute;
  left: 14px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #ffffff;
  background: #120c10;
  font-size: 0.75rem;
  font-weight: 800;
}
.law-rules strong { color: var(--dash-body-text); }

.law-todo {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 16px 18px 16px 34px;
  border-radius: 18px;
  background: rgba(214, 69, 69, 0.05);
  border: 1px solid rgba(214, 69, 69, 0.2);
  color: rgba(18, 12, 16, 0.72);
  font-size: 0.9rem;
  line-height: 1.55;
}

.law-sources-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  font-size: 0.86rem;
  line-height: 1.5;
}
.law-sources-list a { color: var(--dash-body-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(18, 12, 16, 0.25); }
.law-sources-list a:hover { color: var(--blue); }
.law-sources-list small { color: rgba(18, 12, 16, 0.5); }

@media (max-width: 800px) {
  .law-banner { grid-template-columns: 1fr; }
}

/* ============================================================
   FOND COMMUN — mêmes halos bleu et orange sur toutes les pages,
   quadrillage bien visible, fond un peu plus sombre pour faire
   ressortir les cartes. Le fond reste en place quand on fait défiler.
   ============================================================ */
body.dash-app .dash-main-visual-bg { display: none; }

body.dash-app .dash-main {
  background-color: #ebe2d5;
  background-image:
    linear-gradient(to right, rgba(72, 53, 34, 0.11) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(72, 53, 34, 0.11) 1px, transparent 1px),
    radial-gradient(circle at 84% 8%, rgba(214, 140, 52, 0.32) 0, transparent 40vw),
    radial-gradient(circle at 6% 46%, rgba(56, 71, 255, 0.2) 0, transparent 38vw),
    radial-gradient(circle at 60% 78%, rgba(68, 24, 45, 0.14) 0, transparent 32vw),
    linear-gradient(180deg, #efe7dc 0%, #e9e0d3 55%, #ede6dc 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* Cartes un peu plus blanches et plus nettes sur ce fond */
body.dash-app .dash-tile,
body.dash-app .home-steps-card,
body.dash-app .home-detect li,
body.dash-app .test-card,
body.dash-app .progress-summary,
body.dash-app .progress-steps li,
body.dash-app .progress-idea,
body.dash-app .law-card,
body.dash-app .law-table-wrap {
  background-color: #fffcf8;
  border-color: rgba(72, 53, 34, 0.14);
}

/* ============================================================
   CONFORMITÉ — onglets, une seule carte par partie, meilleure lecture
   ============================================================ */
.law-toc button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: rgba(18, 12, 16, 0.68);
  background: transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.law-toc button.is-active { color: #ffffff; background: #120c10; }
.law-toc button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.law-card {
  border-radius: 20px;
  border: 1px solid rgba(72, 53, 34, 0.14);
  box-shadow: 0 12px 34px rgba(72, 53, 34, 0.08);
  overflow: hidden;
}
.law-card.law-points { gap: 0; }

.law-card .law-point {
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.4vw, 28px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.law-card .law-point + .law-point { border-top: 1px solid rgba(72, 53, 34, 0.12); }

.law-point h4 { font-size: 1.04rem; margin-bottom: 8px; color: var(--dash-body-text); }
.law-point p { font-size: 0.95rem; line-height: 1.65; color: rgba(18, 12, 16, 0.78); }
.law-point .law-impact {
  margin-top: 12px;
  padding: 12px 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(18, 12, 16, 0.85);
  background: rgba(56, 71, 255, 0.07);
}
.law-sources { margin-top: 12px; font-size: 0.84rem; gap: 8px 14px; }

.law-section > p.law-intro { font-size: 0.98rem; color: rgba(18, 12, 16, 0.7); }

/* Règles d'or : un seul bloc, éléments séparés par des traits */
.law-rules {
  gap: 0;
  border-radius: 20px;
  background: #fffcf8;
  border: 1px solid rgba(72, 53, 34, 0.14);
  box-shadow: 0 12px 34px rgba(72, 53, 34, 0.08);
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.law-rules li {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 16px 18px 16px 54px;
  font-size: 0.93rem;
  color: rgba(18, 12, 16, 0.78);
  border-bottom: 1px solid rgba(72, 53, 34, 0.1);
}
.law-rules li:nth-child(odd) { border-right: 1px solid rgba(72, 53, 34, 0.1); }
.law-rules li:nth-last-child(-n + 2) { border-bottom: 0; }
.law-rules li::before { left: 18px; top: 16px; }

/* À valider et sources : un bloc lisible chacun */
.law-todo { font-size: 0.95rem; color: rgba(18, 12, 16, 0.8); padding: 18px 20px 18px 38px; }
.law-sources-list {
  padding: 18px 20px 18px 40px;
  border-radius: 20px;
  background: #fffcf8;
  border: 1px solid rgba(72, 53, 34, 0.14);
  font-size: 0.9rem;
  gap: 8px;
}

.law-table { font-size: 0.9rem; }
.law-table td { color: rgba(18, 12, 16, 0.8); }

@media (max-width: 700px) {
  .law-rules { grid-template-columns: 1fr; }
  .law-rules li:nth-child(odd) { border-right: 0; }
  .law-rules li:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(72, 53, 34, 0.1); }
  .law-rules li:last-child { border-bottom: 0; }
  .law-toc { margin-inline: -4px; border-radius: 14px; }
  .law-toc button { min-height: 44px; padding: 10px 14px; }
  .law-point p, .law-point .law-impact { font-size: 0.92rem; }
}

/* ============================================================
   SOURIS OU DOIGT — effets de survol seulement avec une souris ou
   un pavé tactile ; sur écran tactile, un retour visuel au toucher.
   ============================================================ */
* { -webkit-tap-highlight-color: transparent; }

@media (hover: hover) and (pointer: fine) {
  .law-toc button:hover:not(.is-active) { color: var(--dash-body-text); background: rgba(18, 12, 16, 0.06); }
}

@media (hover: none), (pointer: coarse) {
  /* On neutralise les effets de survol qui « restent collés » après un toucher */
  .dash-tile:hover,
  .home-tile:hover { transform: none; box-shadow: 0 12px 34px rgba(72, 53, 34, 0.07); border-color: rgba(72, 53, 34, 0.14); }
  .home-tile:hover .home-tile-media img { transform: none; }
  .home-tile:hover .home-tile-cta { gap: 8px; background: #120c10; }
  .progress-steps li:hover { transform: none; box-shadow: none; }
  .law-point:hover { box-shadow: none; }
  .test-btn:not(:disabled):hover { transform: none; box-shadow: none; }
  .test-segmented button:hover,
  .test-modes button:hover { color: rgba(18, 12, 16, 0.62); }
  .test-segmented button.is-active:hover,
  .test-modes button.is-active:hover { color: var(--dash-body-text); }
  .test-tags button:hover { border-color: rgba(72, 53, 34, 0.16); }
  .login-back:hover { color: rgba(255, 250, 243, 0.7); }
  .btn:hover { transform: none; }

  /* Retour au toucher : l'élément s'enfonce légèrement sous le pouce */
  .dash-tile:active,
  .home-tile:active { transform: scale(0.98); }
  .law-toc button:active,
  .test-btn:not(:disabled):active,
  .test-segmented button:active,
  .test-modes button:active,
  .test-tags button:active,
  .home-tile-cta:active,
  .dash-nav-link:active,
  .btn:active { transform: scale(0.96); }
  .law-toc button:active:not(.is-active),
  .test-segmented button:active,
  .test-modes button:active { background: rgba(18, 12, 16, 0.08); }
  .dash-tile, .home-tile, .law-toc button, .test-btn, .test-modes button,
  .test-segmented button, .test-tags button, .dash-nav-link, .btn { transition: transform 0.12s ease, background 0.12s ease; }
}

/* La page entière défile (pas seulement la zone centrale) : on accroche les halos
   à l'écran pour qu'ils soient au même endroit et aussi intenses sur toutes les pages. */
body.dash-app .dash-main {
  background-attachment: scroll, scroll, fixed, fixed, fixed, scroll;
  background-position: 0 0, 0 0, center, center, center, 0 0;
}

@media (hover: none), (pointer: coarse) {
  /* Les téléphones ignorent « fixed » : halos placés en haut de page, en pixels */
  body.dash-app .dash-main {
    background-attachment: scroll;
    background-image:
      linear-gradient(to right, rgba(72, 53, 34, 0.11) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(72, 53, 34, 0.11) 1px, transparent 1px),
      radial-gradient(circle at 88% 120px, rgba(214, 140, 52, 0.32) 0, transparent 360px),
      radial-gradient(circle at 0 560px, rgba(56, 71, 255, 0.2) 0, transparent 340px),
      radial-gradient(circle at 70% 1000px, rgba(214, 140, 52, 0.18) 0, transparent 320px),
      linear-gradient(180deg, #efe7dc 0%, #e9e0d3 55%, #ede6dc 100%);
  }
}

/* Encadrés pleins (pas transparents) pour « Verdict » et « À valider » */
.law-verdict {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  padding: 18px 22px;
  border-radius: 20px;
  background: #f1f8f2;
  border: 1px solid rgba(31, 159, 69, 0.35);
  border-left: 5px solid #1f9f45;
  box-shadow: 0 12px 34px rgba(72, 53, 34, 0.08);
}
.law-verdict strong { font-size: 1.02rem; color: #145c2b; }
.law-verdict p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: rgba(18, 12, 16, 0.8); }
.law-verdict p strong { font-size: inherit; color: var(--dash-body-text); }

.law-todo {
  background: #fff4f2;
  border: 1px solid rgba(214, 69, 69, 0.28);
  border-left: 5px solid #d64545;
  box-shadow: 0 12px 34px rgba(72, 53, 34, 0.08);
}

/* Verdicts : vert = feu vert, orange = sous conditions, rouge = point bloquant */
.law-section > .law-verdict { margin-top: 2px; }
.law-verdict.is-warn {
  background: #fdf5ea;
  border-color: rgba(201, 137, 59, 0.4);
  border-left-color: var(--amber);
}
.law-verdict.is-warn > strong { color: #8a5417; }
.law-verdict.is-block {
  background: #fff1ef;
  border-color: rgba(214, 69, 69, 0.35);
  border-left-color: #d64545;
}
.law-verdict.is-block > strong { color: #a52f2f; }

/* ============================================================
   DÉFILEMENT — seule la zone centrale défile. La barre latérale
   et le haut de page restent fixes, sur ordinateur comme sur téléphone.
   ============================================================ */
body.dash-app {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.dash-app .dash-layout {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body.dash-app .dash-sidebar {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.dash-app .dash-column {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.dash-app .dash-topbar { flex: 0 0 auto; position: relative; }

body.dash-app .dash-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  /* La zone centrale défile dans un cadre fixe : les halos restent en place d'eux-mêmes */
  background-attachment: scroll;
  background-position: 0 0;
}

@media (hover: none), (pointer: coarse) {
  body.dash-app .dash-main {
    background-image:
      linear-gradient(to right, rgba(72, 53, 34, 0.11) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(72, 53, 34, 0.11) 1px, transparent 1px),
      radial-gradient(circle at 84% 8%, rgba(214, 140, 52, 0.32) 0, transparent 70vw),
      radial-gradient(circle at 6% 46%, rgba(56, 71, 255, 0.2) 0, transparent 66vw),
      radial-gradient(circle at 60% 78%, rgba(68, 24, 45, 0.14) 0, transparent 56vw),
      linear-gradient(180deg, #efe7dc 0%, #e9e0d3 55%, #ede6dc 100%);
  }
}

@media (max-width: 960px) {
  /* Le menu du téléphone reste un tiroir par-dessus la page */
  body.dash-app .dash-sidebar { height: auto; }
}

/* Connexion par lien e-mail : écran « Vérifiez votre boîte mail » */
.login-sent {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 4px 6px;
  text-align: center;
}
.login-sent-icon { font-size: 2rem; line-height: 1; }
.login-sent strong { font-size: 1.1rem; }
.login-sent p { color: rgba(255, 250, 243, 0.68); font-size: 0.92rem; line-height: 1.6; }
.login-sent p span { color: #fffaf3; font-weight: 700; word-break: break-all; }
.login-sent .login-skip { margin-top: 6px; }
.login-error[data-kind="info"] { color: var(--amber-light); }
.login-form .btn-full:disabled { opacity: 0.7; cursor: progress; }

/* En attendant la vérification du compte, on n'affiche pas le contenu */
body.dash-auth-pending .dash-main-inner,
body.dash-auth-pending .dash-topbar-actions { visibility: hidden; }

/* L'attribut « hidden » doit l'emporter sur les display: grid définis plus haut */
.login-sent[hidden],
.login-form[hidden],
.login-error[hidden] { display: none; }

/* Phase de test : badge « En développement » et liste de ce qui arrive */
.dev-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: var(--r-btn);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(56, 71, 255, 0.1);
  border: 1px solid rgba(56, 71, 255, 0.25);
  vertical-align: middle;
}
.test-card-head .dev-badge { margin-left: 0; }

.test-roadmap-list {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}
.test-roadmap-list li {
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 46px;
}
.test-roadmap-list li + li { border-top: 1px solid rgba(72, 53, 34, 0.1); }
.test-roadmap-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--amber);
  background: rgba(201, 137, 59, 0.12);
  font-size: 0.72rem;
  font-weight: 900;
}
.test-roadmap-list strong { display: block; margin-bottom: 2px; font-size: 0.98rem; }
.test-roadmap-list p { margin: 0; color: rgba(18, 12, 16, 0.7); font-size: 0.92rem; line-height: 1.55; }

/* Fond noir derrière la page : barre d'état et barre d'outils du téléphone,
   et zone visible quand on « tire » la page au-delà du haut ou du bas (Mac, iPhone). */
html { background-color: #0c0c0c; }
body.dash-app { background-color: #0c0c0c; }