/* ==========================================================================
   donna · landing pré-lancement — overrides + nouveaux blocs
   ========================================================================== */

/* ===== Brand badge (Beta privée) à côté du wordmark ===== */
.nav-brand { gap: 10px; }
.nav-brand-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius-sm);
}

/* ===== Aperçu produit ribbon (au-dessus du demo browser) ===== */
.demo-preview-ribbon {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.demo-preview-ribbon svg { width: 13px; height: 13px; }

/* ===== Waitlist form ===== */
.waitlist-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 520px;
  margin: 0 0 14px;
  flex-wrap: wrap;
  position: relative;
}
.waitlist-form.lg {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  gap: 10px;
}
.waitlist-field {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.waitlist-field-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
  transition: color .15s;
}
.waitlist-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 64px;
  padding: 0 22px 0 52px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  outline: none;
  box-shadow: 0 1px 2px rgba(20,22,31,.04), inset 0 0 0 1px rgba(255,255,255,.5);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.waitlist-input::placeholder { color: var(--muted); font-weight: 400; }
.waitlist-input:hover { border-color: var(--text-dim); }
.waitlist-input:focus {
  border-color: var(--text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 12%, transparent), 0 1px 2px rgba(20,22,31,.04);
}
.waitlist-input:focus ~ .waitlist-field-icon,
.waitlist-field:focus-within .waitlist-field-icon { color: var(--text); }
.waitlist-form .btn {
  height: 68px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}
.waitlist-form.lg .waitlist-input { height: 68px; font-size: 17px; padding: 0 24px 0 56px; }
.waitlist-form.lg .waitlist-field-icon { left: 22px; width: 20px; height: 20px; }
.waitlist-form.lg .btn { height: 72px; padding: 0 36px; font-size: 17px; }

@media (max-width: 560px) {
  .waitlist-form { gap: 10px; }
  .waitlist-form .waitlist-field { flex: 1 1 100%; }
  .waitlist-form .btn { flex: 1 1 100%; width: 100%; }

  /* Cacher le bouton "Être prévenu·e" dans la nav en mobile
     (redondant avec le CTA principal du hero) */
  .nav-actions .btn-primary { display: none; }

  /* FORCE : hauteur identique sur les boutons "Me prévenir".
     !important pour gagner contre tout autre override. */
  #hero-waitlist button.btn,
  #footer-waitlist button.btn {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }
  #hero-waitlist input.waitlist-input,
  #footer-waitlist input.waitlist-input {
    height: 56px !important;
    box-sizing: border-box !important;
  }
}
.waitlist-form.error .waitlist-input {
  border-color: var(--chaud);
  animation: shake .35s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.waitlist-form.success { justify-content: center; }
.waitlist-success {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  width: 100%;
  max-width: 540px;
  text-wrap: pretty;
}
.waitlist-success-mark {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--green);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.waitlist-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.waitlist-counter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.waitlist-counter strong {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.waitlist-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--green);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
  animation: pulse-soft 2.4s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

.waitlist-trust {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.waitlist-trust span { display: inline-flex; align-items: center; gap: 7px; }
.waitlist-sep {
  width: 3px !important; height: 3px;
  border-radius: 999px;
  background: var(--border-hi);
  padding: 0 !important;
  gap: 0 !important;
}

/* ===== Feature status (ready/soon) ===== */
.product-features li .feat-status {
  width: 18px; height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.product-features li .feat-status.ready {
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
}
.product-features li .feat-status.soon {
  background: color-mix(in srgb, var(--muted) 15%, transparent);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
  font-size: 8px;
}
.product-features li.soon strong { color: var(--text-dim); }
.product-features li.soon em {
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
  padding: 1px 6px;
  background: var(--s2);
  border-radius: var(--radius-sm);
}

/* ===== Roadmap ===== */
.roadmap {
  padding: 120px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.rm-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 820px;
  position: relative;
}
.rm-list::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--border);
}
.rm-item {
  position: relative;
  padding: 0 0 32px 44px;
}
.rm-item:last-child { padding-bottom: 0; }
.rm-marker {
  position: absolute;
  left: 0;
  top: 4px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--border-hi);
  z-index: 1;
}
.rm-item.done .rm-marker {
  background: var(--green);
  border-color: var(--green);
}
.rm-item.done .rm-marker::after {
  content: "";
  position: absolute;
  inset: 5px 5px 7px 5px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
}
.rm-item.active .rm-marker {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.rm-item.active .rm-marker::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  animation: ring 2.4s ease-out infinite;
}
.rm-item.next .rm-marker {
  background: var(--surface);
  border-color: var(--accent);
}
.rm-item.next .rm-marker::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: var(--accent);
}
.rm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rm-date {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: uppercase;
}
.rm-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--s2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.rm-status.done {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
  border-color: color-mix(in srgb, var(--green) 25%, transparent);
}
.rm-status.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.rm-status.next {
  color: var(--text);
  background: var(--bg);
  border-color: var(--border-hi);
}
.rm-body h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--text);
}
.rm-item:not(.done):not(.active):not(.next) .rm-body h3 { color: var(--text-dim); }
.rm-body p {
  font-size: 15px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
}

/* ===== Programme pilote ===== */
.pilote {
  padding: 120px 0;
}
.pilote-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.pilote-content h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 20px;
}
.pilote-content p {
  font-size: 17px;
  color: var(--text-dim);
  margin: 0 0 28px;
  line-height: 1.55;
}
.pilote-perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.pilote-perks li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.45;
}
.pilote-perks li svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--accent);
}
.pilote-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow);
}
.pilote-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pilote-card-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pilote-card-counter {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.pilote-card-meter {
  height: 8px;
  background: var(--s3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 24px;
}
.pilote-card-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  border-radius: 999px;
}
.pilote-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}
.pilote-card-stats > div {
  background: var(--surface);
  padding: 14px 12px;
  text-align: center;
}
.pilote-card-stat-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.pilote-card-stat-num.accent { color: var(--accent); }
.pilote-card-stat-lab {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pilote-card-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pilote-card-cta .btn { flex: 1; min-width: 220px; }
.pilote-card-note {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 980px) {
  .pilote { padding: 80px 0; }
  .pilote-inner { grid-template-columns: 1fr; gap: 40px; }
  .roadmap { padding: 80px 0; }
}

/* ===== CTA final — variante waitlist ===== */
.cta-final .section-eyebrow { margin-bottom: 12px; }
.cta-final-or {
  margin: 22px 0 14px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* ===== Mobile ===== */
@media (max-width: 560px) {
  .nav-brand-badge { display: none; }
  .waitlist-form { flex-direction: column; }
  .waitlist-form .btn { width: 100%; }
  .waitlist-form .waitlist-input { width: 100%; }
  .roadmap { padding: 56px 0; }
  .pilote { padding: 56px 0; }
}


/* ==========================================================================
   donna · fiche card (df-*) — port from handoff-fiche-donna State A
   ========================================================================== */
:root, [data-theme="light"]{
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --font-display:'Plus Jakarta Sans',-apple-system,sans-serif;
  --accent-soft:rgba(107,92,245,.06);
  --shadow-card:0 4px 14px rgba(20,22,31,.05);
}
[data-theme="noir"]{
  --accent-soft:rgba(139,123,255,.08);
  --shadow-card:0 4px 14px rgba(0,0,0,.5);
}

.df{
  width:100%; max-width:380px; margin:0 auto;
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow-card);
}
.df::before{
  content:""; position:absolute; top:0; right:0;
  width:140px; height:140px; pointer-events:none;
  background:radial-gradient(circle at top right,
    color-mix(in srgb, var(--accent) 14%, transparent), transparent 65%);
}
.df-hd{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:10px;
  padding:11px 14px 10px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 4%, var(--surface)),
    var(--surface));
}
.df-av{
  width:24px; height:24px; border-radius:50%;
  background:var(--accent); color:#fff;
  display:grid; place-items:center;
  position:relative; flex-shrink:0;
}
.df-av svg{ display:block }
.df-av::after{
  content:""; position:absolute; right:-2px; bottom:-2px;
  width:7px; height:7px; border-radius:50%;
  background:var(--green); border:2px solid var(--surface);
}
.df-hd-lbl{
  font-family:var(--mono); font-size:10.5px; letter-spacing:1.5px;
  text-transform:uppercase; font-weight:600;
  display:flex; align-items:center; gap:7px;
  color:var(--text); min-width:0;
}
.df-hd-lbl .nm{ color:var(--accent) }
.df-hd-lbl .sep{ color:var(--border-hi) }
.df-hd-lbl .kind{ color:var(--text-dim) }
.df-hd-meta{
  font-family:var(--mono); font-size:10px; letter-spacing:.3px;
  color:var(--muted);
  display:flex; align-items:center; gap:6px;
  flex-shrink:0;
}
.df-hd-meta .ago{ color:var(--text-dim); font-weight:600 }

.df-score{
  padding:14px 16px 12px;
  display:grid; grid-template-columns:auto 1fr;
  gap:16px; align-items:center;
  position:relative;
}
.df-score-num{
  font-family:var(--font-display);
  font-size:42px; font-weight:800; letter-spacing:-1.6px;
  color:var(--text); line-height:1;
  font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:2px;
}
.df-score-side{ display:flex; flex-direction:column; gap:7px; min-width:0 }
.df-score-row{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10px; letter-spacing:.5px;
  text-transform:uppercase; color:var(--muted); font-weight:600;
}
.df-score-row b{ color:var(--text); font-weight:700 }
.df-score-bar{
  height:6px; background:var(--s3); border-radius:3px; overflow:hidden;
  position:relative;
}
.df-score-fill{
  height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--froid), var(--accent), var(--chaud));
  transition:width .4s ease;
}
.df-score-delta{
  display:inline-flex; align-items:center; gap:3px;
  font-family:var(--mono); font-size:10px; letter-spacing:.3px;
  color:var(--green); font-weight:600;
  font-variant-numeric:tabular-nums;
}

.df-body{ padding:4px 16px 14px; position:relative }
.df-synth{
  font-family:var(--font-display); font-weight:600;
  font-size:14.5px; line-height:1.45; letter-spacing:-.2px;
  color:var(--text); text-wrap:pretty;
}
.df-synth em{
  font-style:normal; font-weight:700;
  background:linear-gradient(95deg, var(--accent), var(--accent-hi));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.df-synth b{ font-weight:700; color:var(--text) }

.df-sig{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.4px;
  color:var(--muted);
}
.df-sig .sep{ color:var(--border-hi) }
.df-sig b{ color:var(--text-dim); font-weight:600 }

.df-suggs{
  display:flex; flex-direction:column; gap:5px;
  padding:0 12px 12px;
  position:relative;
}
.df-sug{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:11px;
  padding:9px 11px 9px 14px;
  background:var(--s2);
  border:1px solid transparent;
  border-radius:var(--radius);
  cursor:pointer; text-align:left;
  font-family:inherit;
  transition:background .12s, border-color .12s;
  position:relative; overflow:hidden;
}
.df-sug::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px;
  background:var(--green); border-radius:2px;
}
.df-sug.warm::before{ background:var(--accent) }
.df-sug:hover{ background:var(--s3); border-color:var(--border) }
.df-sug:hover .df-sug-arrow{ transform:translateX(2px); color:var(--text) }
.df-sug-icon{
  width:24px; height:24px; border-radius:var(--radius-sm);
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--green) 14%, transparent);
  color:var(--green); flex-shrink:0;
}
.df-sug.warm .df-sug-icon{
  background:var(--accent-dim); color:var(--accent);
}
.df-sug-icon svg{ display:block }
.df-sug-body{ min-width:0 }
.df-sug-ttl{
  font-size:12.5px; font-weight:600; line-height:1.35;
  color:var(--text);
}
.df-sug-meta{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.3px;
  color:var(--muted); margin-top:3px;
}
.df-sug-meta b{ color:var(--text-dim); font-weight:600 }
.df-sug-arrow{
  color:var(--muted);
  transition:transform .12s, color .12s;
  flex-shrink:0;
}

.df-foot{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  background:var(--s2);
  border-top:1px solid var(--border);
  position:relative;
}
.df-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 13px; border-radius:var(--radius);
  font-size:12.5px; font-weight:600; line-height:1;
  border:none; cursor:pointer; font-family:inherit;
  transition:background .12s, color .12s, border-color .12s;
}
.df-btn.primary{
  background:var(--text); color:var(--bg);
  flex:1; justify-content:center;
}
.df-btn.primary:hover{ background:var(--text-dim) }
.df-btn.ghost{
  color:var(--text-dim);
  padding:9px 11px; background:transparent;
}
.df-btn.ghost:hover{ background:var(--s2); color:var(--text) }