/* bailey:tokens */
/* généré par cmd/brandgen, source: brand/tokens.css. NE PAS ÉDITER À LA MAIN. */
:root {
  /* Magenta : la couleur d'identité (fills, texte blanc AA) */
  --bl-magenta:      oklch(0.575 0.23 357);
  --bl-magenta-deep: oklch(0.48 0.205 359);
  --bl-magenta-soft: oklch(0.95 0.045 352);
  --bl-magenta-text: oklch(0.46 0.2 358);
  --bl-on-magenta:   oklch(0.99 0.006 350);

  /* Jaune soleil : l'éclat (surlignage, accents joyeux) */
  --bl-sun:     oklch(0.88 0.17 96);
  --bl-sun-ink: oklch(0.3 0.07 80);

  /* Accents rares */
  --bl-pop:  oklch(0.62 0.19 248);   /* bleu « zap » live */
  --bl-plum: oklch(0.22 0.075 352);  /* sombre brandé */

  /* Typographie */
  --bl-font-display: 'Gabarito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bl-font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* bailey:tokens:end */

:root{
  --font-body: var(--bl-font-body);
  --font-display: var(--bl-font-display);
}
/* ==========================================================================
   Bailey · système de design landing « vif & joyeux »
   Cible : créateurs à l'ère de l'IA. Stratégie couleur : Committed (le rose
   porte l'identité, le jaune est l'éclat de joie, sobre, et le fond reste blanc).
   ========================================================================== */

:root {
  /* ---- Couleur (OKLCH) ---- */
  --bg: oklch(1 0 0); /* blanc : surface des cartes/panneaux */
  --canvas: oklch(0.977 0.008 95); /* fond de page chaud : les cartes blanches flottent (flat/SaaS) */
  --surface: oklch(0.976 0.006 350);
  --surface-2: oklch(0.955 0.012 350);
  --ink: oklch(0.17 0.02 350);
  --muted: oklch(0.448 0.027 350);
  --line: oklch(0.9 0.013 350);

  /* Marque : alias de la source unique brand/tokens.css (bloc bailey:tokens) */
  --primary: var(--bl-magenta);
  --primary-deep: var(--bl-magenta-deep);
  --primary-soft: var(--bl-magenta-soft);
  --primary-text: var(--bl-magenta-text);
  --on-primary: var(--bl-on-magenta);

  --accent: var(--bl-sun); /* jaune soleil : éclat, surlignage */
  --accent-ink: var(--bl-sun-ink); /* texte sur jaune */

  --pop: var(--bl-pop); /* bleu électrique : le « zap » live, rare */
  --ok: oklch(0.52 0.17 150); /* point « en ligne », assombri pour AA (≥4.5:1) */
  --plum: var(--bl-plum); /* sombre brandé (sections sombres) */

  /* ---- Typo ----
     Gabarito (display) + Hanken Grotesk (body), auto-hébergées (fonts/fonts.css).
     Les familles viennent de --bl-font-* (source brand/tokens.css), aliasées en
     --font-display / --font-body en tête de fichier. */

  /* ---- Rythme ---- */
  --wrap: 1140px;
  --pad-x: clamp(1.25rem, 5vw, 2rem);
  --section-y: clamp(4rem, 10vw, 8rem);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Ombres (quasi plates : une touche + une grande très diffuse) ---- */
  --shadow-sm: 0 1px 2px oklch(0.17 0.02 350 / 0.04),
    0 10px 30px oklch(0.17 0.02 350 / 0.05);
  --shadow-md: 0 2px 6px oklch(0.17 0.02 350 / 0.06),
    0 18px 44px oklch(0.17 0.02 350 / 0.09);
  --shadow-pink: 0 14px 40px oklch(0.6 0.224 357 / 0.32);

  /* ---- z-index sémantique ---- */
  --z-header: 200;
  --z-overlay: 800;

  /* ---- Easing ---- */
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

::selection {
  background: var(--primary);
  color: var(--on-primary);
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Helpers structure ---- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  padding-block: var(--section-y);
}

/* ==========================================================================
   Typographie
   ========================================================================== */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  text-wrap: balance;
}

h1.display {
  font-size: clamp(2.6rem, 1.7rem + 4.5vw, 5rem);
  /* à cette taille, le -0.03em de .display soude les mots (« Yoursite ») :
     on desserre le crénage et on rouvre l'inter-mot. Plus c'est gros, moins on serre. */
  letter-spacing: -0.014em;
  line-height: 0.98;
  word-spacing: 0.04em;
}

h2.display {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.05;
}

h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.15;
}

.lead {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  color: var(--muted);
  max-width: 38ch;
  text-wrap: pretty;
}

.prose {
  max-width: 60ch;
  text-wrap: pretty;
}

.mark {
  color: var(--primary-text);
}

/* surlignage jaune façon feutre, derrière le texte */
.hl {
  background:
    linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%);
  padding-inline: 0.05em;
}

/* ==========================================================================
   Boutons & pills
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  transition:
    transform 0.18s var(--ease-quart),
    box-shadow 0.25s var(--ease-quart),
    background-color 0.18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-pink);
}
.btn-primary:hover {
  background: var(--primary-deep);
  transform: translateY(-2px);
  box-shadow: 0 18px 48px oklch(0.6 0.224 357 / 0.4);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
  padding: 0.85rem 1.35rem;
}
.btn-ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-text);
}

.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: oklch(1 0 0 / 0.78);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.brand__glyph {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-pink);
}
.brand__mark {
  width: 64%;
  height: 64%;
  display: block;
}
.header-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.header-link {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.18s ease;
}
.header-link:hover {
  color: var(--ink);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: var(--section-y);
  overflow: clip;
}
/* halos colorés diffus en fond */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  width: 46vw;
  height: 46vw;
  max-width: 560px;
  max-height: 560px;
  top: -12%;
  right: -8%;
  /* halo rose plus saturé : le rose doit dominer (« la joie est la conversion ») */
  background: radial-gradient(circle, oklch(0.7 0.19 357 / 0.42), transparent 68%);
  opacity: 1;
}
.hero::after {
  width: 30vw;
  height: 30vw;
  max-width: 380px;
  max-height: 380px;
  bottom: 4%;
  left: -10%;
  /* le jaune reste en second plan (rose > jaune) */
  background: radial-gradient(
    circle,
    oklch(0.88 0.17 96 / 0.5),
    transparent 70%
  );
  opacity: 0.42;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero__copy {
  max-width: 38rem;
}
.hero h1 {
  margin-top: 1.25rem;
}
.hero .lead {
  margin-top: 1.4rem;
  max-width: 34ch;
}
.hero__cta {
  margin-top: 2rem;
}
.hero__cta--actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.hero__reassure {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ==========================================================================
   Trustbar : bande interop honnête (« ça marche avec ce que tu utilises déjà »).
   Noms en texte, jamais de logos officiels : compatibilité, pas partenariat.
   ========================================================================== */
.trustbar {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  font-size: 0.92rem;
  color: var(--muted);
}
.trustbar__label {
  font-weight: 600;
}
.trustbar__list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
}
.trustbar__list > span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.26rem 0.72rem;
}
.trustbar__list > span.trustbar__more {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  font-style: italic;
  padding-inline: 0.2rem;
}
.trustbar__tail {
  font-weight: 600;
  color: var(--primary-text);
}

/* ==========================================================================
   HeroStage, la « magie » : fenêtre d'un site publié, fichier qui tombe,
   confettis, badge en ligne. Imagerie produit, 100% CSS.
   ========================================================================== */
.stage {
  position: relative;
  perspective: 1400px;
}
.stage-window {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transform: rotate(0.5deg);
}
/* variante « après » (section preview) : penche dans l'autre sens pour différencier */
.stage-window--calm {
  transform: rotate(-0.5deg);
}
.stage-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.stage-dots {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.stage-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line);
}
.stage-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  min-width: 0;
}
.stage-url__lock {
  color: var(--muted);
  flex: 0 0 auto;
}
.stage-url__text {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stage-url__dim {
  color: var(--muted);
  font-weight: 500;
}
.stage-live {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ok);
}
.stage-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}

/* le mini-site rendu à l'intérieur de la fenêtre : un VRAI petit site, pas un
   wireframe gris (cf. anti-référence « page morte »). */
.stage-canvas {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg);
  contain: paint;
}

/* le site occupe toute la fenêtre ; état au repos = publié & vivant */
.site {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transform-origin: center;
}

/* titres & méta partagés */
.site-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9rem, 0.82rem + 0.5vw, 1.1rem);
  letter-spacing: -0.02em;
  /* à cette petite taille, -0.02em soude les mots : on rouvre l'inter-mot */
  word-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
}
.site-meta {
  margin-top: 0.25rem;
  font-size: clamp(0.62rem, 0.58rem + 0.2vw, 0.74rem);
  color: var(--muted);
  line-height: 1.2;
}
.site-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}
.site-stars {
  flex: 0 0 auto;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: oklch(0.72 0.15 72);
}

/* actions du mini-site : un vrai CTA + un lien */
.site-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.site-cta {
  font-size: clamp(0.6rem, 0.55rem + 0.25vw, 0.72rem);
  font-weight: 700;
  color: var(--on-primary);
  background: var(--primary);
  padding: 0.42rem 0.85rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px oklch(0.6 0.224 357 / 0.28);
}
.site-link {
  font-size: clamp(0.6rem, 0.55rem + 0.2vw, 0.72rem);
  font-weight: 600;
  color: var(--muted);
}

/* --- variante restaurant : photo + corps --- */
.site-photo {
  position: relative;
  flex: 0 0 48%;
  overflow: hidden;
}
.site-photo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.site-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.55rem;
  padding: clamp(0.7rem, 0.5rem + 1vw, 1rem);
}
.site-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: clamp(0.58rem, 0.54rem + 0.2vw, 0.7rem);
  color: var(--muted);
}
.site-note__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: 0 0 auto;
}

/* --- variante portfolio : en-tête + grille de travaux --- */
.site--portfolio {
  justify-content: space-between;
  gap: 0.7rem;
  padding: clamp(0.8rem, 0.6rem + 1vw, 1.15rem);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--primary-soft), transparent 55%),
    var(--bg);
}
.site-head--folio {
  justify-content: flex-start;
  align-items: center;
  gap: 0.6rem;
}
.site-avatar {
  flex: 0 0 auto;
  width: clamp(34px, 9vw, 44px);
  height: clamp(34px, 9vw, 44px);
}
.site-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.folio-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  align-content: center;
}
.folio-thumb {
  border-radius: 9px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
}
.folio-thumb svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* sweep de « publication » : un éclat balaie la fenêtre quand le site passe live */
.stage-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    oklch(1 0 0 / 0.55) 50%,
    transparent 62%
  );
  transform: translateX(-70%);
}

/* zone de dépôt : l'état « avant ». Au repos (sans animation), elle est masquée
   et c'est le site publié qui tient l'écran (la preuve sans le mouvement). */
.stage-dropzone {
  position: absolute;
  inset: clamp(0.7rem, 3%, 1.1rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 2px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: clamp(0.68rem, 0.62rem + 0.3vw, 0.82rem);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
}
.stage-dropzone__ico {
  width: clamp(22px, 7vw, 30px);
  height: clamp(22px, 7vw, 30px);
  color: var(--primary-text);
}

/* fichier qui tombe dans la fenêtre */
.stage-chip {
  position: absolute;
  top: 14%;
  left: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, -230%);
  /* masqué au repos (reduced-motion / premier paint) ; l'animation l'amène */
  opacity: 0;
}
.stage-chip__ico {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--pop);
  color: var(--on-primary);
  font-size: 0.6rem;
  font-weight: 700;
}

/* confettis */
.confetti {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.confetti i {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  opacity: 0;
}
.confetti i:nth-child(1) { background: var(--primary); }
.confetti i:nth-child(2) { background: var(--accent); }
.confetti i:nth-child(3) { background: var(--pop); }
.confetti i:nth-child(4) { background: var(--primary); }
.confetti i:nth-child(5) { background: var(--accent); }
.confetti i:nth-child(6) { background: var(--pop); }
.confetti i:nth-child(7) { background: var(--primary); }
.confetti i:nth-child(8) { background: var(--accent); }

/* ==========================================================================
   ChatStage (hero) : la conversation où l'agent publie POUR toi. État au repos
   (sans animation) = conversation terminée : la demande + la carte « live ».
   L'animation rejoue « tu demandes → l'agent écrit → c'est en ligne » par-dessus,
   sans jamais masquer le contenu. C'est la preuve du « tu ne quittes pas le chat ».
   ========================================================================== */
.stage-window--chat { transform: rotate(0.5deg); }

.chat-id {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.82rem;
}
.chat-id__av {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.72rem;
  line-height: 1;
}
.chat-id__name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-id__mcp {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}
.chat-id__mcp i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

.chat-canvas {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: clamp(0.8rem, 0.6rem + 1vw, 1.15rem);
  background:
    radial-gradient(135% 105% at 0% 0%, var(--primary-soft), transparent 52%),
    var(--bg);
  contain: paint;
}
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
}

/* · bulles · */
.chat-msg {
  max-width: 90%;
}
.chat-msg--user {
  align-self: flex-end;
  padding: 0.55rem 0.85rem;
  border-radius: 16px 16px 5px 16px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: clamp(0.74rem, 0.7rem + 0.3vw, 0.92rem);
  font-weight: 600;
  box-shadow: 0 6px 16px oklch(0.6 0.224 357 / 0.22);
}
.chat-msg--ai {
  align-self: flex-start;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.chat-av {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 0.82rem;
  line-height: 1;
}
.chat-bubble {
  min-width: 0;
  display: grid;
  padding: 0.5rem;
  border-radius: 16px 16px 16px 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

/* l'agent « écrit » : replié au repos, déployé pendant l'animation */
.chat-typewrap {
  display: grid;
  grid-template-rows: 0fr;
}
.chat-typewrap > * {
  overflow: hidden;
  min-height: 0;
}
.chat-typing {
  display: inline-flex;
  gap: 4px;
  padding: 0.3rem 0.25rem 0.15rem;
}
.chat-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
}

/* la réponse : carte « publié » + légende. Au repos : visible. */
.chat-answer {
  display: grid;
  grid-template-rows: 1fr;
}
.chat-answer > .chat-answer__in {
  overflow: hidden;
  min-height: 0;
}
.chat-card {
  border-radius: 11px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.chat-card__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--line);
}
.chat-card__url {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-width: 0;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-card__lock {
  color: var(--muted);
  flex: 0 0 auto;
}
.chat-card__dim {
  color: var(--muted);
  font-weight: 500;
}
.chat-card__live {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--ok);
}
.chat-card__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chat-thumb {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
}
.chat-thumb__photo {
  flex: 0 0 auto;
  width: 64px;
  height: 40px;
  border-radius: 7px;
  display: block;
}
.chat-thumb__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.chat-thumb__meta b {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.chat-thumb__meta span {
  font-size: 0.62rem;
  color: var(--muted);
}
.chat-thumb__cta {
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--on-primary);
  background: var(--primary);
  padding: 0.3rem 0.62rem;
  border-radius: var(--radius-pill);
}
.chat-cap {
  margin-top: 0.5rem;
  font-size: clamp(0.66rem, 0.62rem + 0.2vw, 0.78rem);
  color: var(--ink);
  line-height: 1.35;
}
.chat-cap__link {
  color: var(--primary-text);
  font-weight: 700;
}

/* éclat de joie quand la carte passe live (masqué au repos) */
.chat-spark {
  position: absolute;
  right: 15%;
  bottom: 27%;
  z-index: 4;
  font-size: 17px;
  line-height: 1;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 9px oklch(0.88 0.17 96 / 0.65);
}
.chat-spark::before {
  content: "✦";
}

/* ==========================================================================
   Section « dépôt manuel » : le repli assumé (PRODUCT.md : l'upload reste,
   mais ce n'est plus le héros). Copie à gauche, l'anim glisser-déposer à droite.
   ========================================================================== */
.manual {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.manual__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.manual__tag {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--primary-text);
}
.manual__list {
  list-style: none;
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.manual__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.96rem;
  color: var(--ink);
}
.manual__check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-text);
  font-size: 0.7rem;
  font-weight: 700;
}
.manual__stage {
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
}

/* ==========================================================================
   Section « le décalage » (problème → soulagement)
   ========================================================================== */
.shift {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.shift__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.jargon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.jargon span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.4rem);
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--primary);
  /* trait fin : on raye, mais les mots restent lisibles (pas un masque) */
  text-decoration-thickness: 1.5px;
  opacity: 1;
}
.shift__result {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem);
  line-height: 1.1;
}
.shift__result .arrow {
  color: var(--primary-text);
}

/* ==========================================================================
   Section « comment ça marche » : vraie séquence, donc numéros légitimes
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.step {
  position: relative;
}
.step__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 2rem + 2vw, 3.4rem);
  line-height: 1;
  color: var(--primary);
  letter-spacing: -0.04em;
}
/* numéros unifiés (cohérence de marque, pas d'arc-en-ciel) ; un filet jaune
   discret sous le numéro signe la séquence sans la rendre criarde. */
.step__num {
  display: inline-block;
  padding-bottom: 0.15rem;
  border-bottom: 3px solid var(--accent);
}
.step h3 {
  margin-top: 0.9rem;
}
.step p {
  margin-top: 0.5rem;
  color: var(--muted);
  max-width: 30ch;
}

/* ==========================================================================
   Section vision, « building blocks » : la liberté dans le cadre.
   Cadrage POSSESSION / pouvoir créateur (jamais gouvernance/contrôle ici).
   ========================================================================== */
.blocks {
  background: radial-gradient(90% 120% at 50% -15%, var(--primary-soft), var(--bg) 62%);
  border-block: 1px solid var(--line);
}
.blocks__head {
  max-width: 44rem;
}
.blocks__head h2 {
  text-wrap: balance;
}
.blocks__head .lead {
  margin-top: 1.1rem;
  max-width: 52ch;
}
.blocks__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 2.75rem);
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
}
.cap {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cap__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--primary-soft);
  border: 1px solid transparent;
  color: var(--primary-text);
  font-size: 1.15rem;
}
.cap h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
}
.cap p {
  color: var(--muted);
  max-width: 30ch;
}
.blocks__freedom {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
}
/* la grande affirmation à gauche (on EXCLUT explicitement la note horizon, sinon
   la spécificité `.blocks__freedom p` l'emportait et la note passait en gros
   display → c'était la « régression » d'alignement). */
.blocks__freedom > p:not(.blocks__horizon) {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  text-wrap: balance;
}
/* la note « horizon » à droite : petit corps de texte, calé en bas de colonne */
.blocks__horizon {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.5;
  text-wrap: pretty;
  align-self: end;
}
.blocks__horizon strong {
  color: var(--primary-text);
  font-weight: 600;
}
/* porte discrète vers l'usage équipe (amorce B2B, ne casse pas la promesse créateur) */
.blocks__teams {
  color: var(--primary-text);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.16s ease;
}
.blocks__teams:hover {
  border-color: var(--primary-text);
}

/* ==========================================================================
   Section « c'est pour toi si »
   ========================================================================== */
.foryou {
  background: var(--plum);
  color: oklch(0.97 0.01 350);
}
.foryou h2 {
  color: var(--bg);
}
.foryou .lead {
  color: oklch(0.8 0.02 350);
}
.foryou__list {
  list-style: none;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  display: grid;
  gap: 1.1rem;
  max-width: 46rem;
}
.foryou__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.4;
  font-weight: 500;
}
.foryou__check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.85rem;
}

/* ==========================================================================
   Section preuve / aperçu
   ========================================================================== */
.proof__head {
  max-width: 40rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ==========================================================================
   Section « governed » : RGPD by design, sans costume juridique.
   Cadrage CONFIANCE (le pendant du bloc vision : là-bas la possession, ici la
   protection). La preuve est montrée, pas décrite : le registre réel de cette
   page (recon.manifest.json), rendu comme un panneau de salle de contrôle.
   Bande claire volontaire (« in the clear ») entre le plum de foryou et le
   canvas du preview.
   ========================================================================== */
.governed {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.governed__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.governed__copy .lead {
  margin-top: 1.1rem;
  max-width: 52ch;
}
/* Les quatre garanties : lignes séparées d'un filet, pas de cartes. Le calme
   fait la crédibilité. */
.governed__list {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.governed__item {
  padding-block: clamp(0.9rem, 2vw, 1.2rem);
  border-top: 1px solid var(--line);
}
.governed__item:first-child {
  border-top: 0;
  padding-top: 0;
}
.governed__item dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  letter-spacing: -0.01em;
}
.governed__item dd {
  margin-top: 0.35rem;
  color: var(--muted);
  max-width: 58ch;
  text-wrap: pretty;
}
/* Amorce B2B (cible du lien .blocks__teams) : même registre que blocks__horizon. */
.governed__teams {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.1rem, 2.5vw, 1.5rem);
  border-top: 1px solid var(--line);
  color: var(--muted);
  max-width: 52ch;
  text-wrap: pretty;
}
.governed__teams strong {
  color: var(--primary-text);
  font-weight: 600;
}

/* Le panneau-registre : un morceau de salle de contrôle posé sur la page. */
.governed__proof {
  margin: 0;
}
.gov-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.gov-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.gov-card__title {
  font-family: var(--font-display);
  font-weight: 600;
}
.gov-card__state {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ok);
}
.gov-card__state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
}
.gov-card__rows {
  padding: 0.4rem 1.15rem;
}
.gov-row {
  display: grid;
  grid-template-columns: 6.2rem 1fr;
  gap: 0.9rem;
  padding-block: 0.6rem;
  border-top: 1px solid var(--line);
}
.gov-row:first-child {
  border-top: 0;
}
.gov-row dt {
  color: var(--muted);
  font-size: 0.9rem;
  padding-top: 0.1rem;
}
.gov-row dd {
  font-weight: 500;
  font-size: 0.975rem;
}
.gov-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.95rem 1.15rem 1.1rem;
  border-top: 1px solid var(--line);
}
.gov-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--bg);
}
/* Le coupe-circuit : sombre brandé, sérieux sans alarme. */
.gov-btn--kill {
  background: var(--plum);
  border-color: var(--plum);
  color: oklch(0.97 0.01 350);
}
.governed__proof figcaption {
  margin-top: 0.95rem;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 42ch;
  text-wrap: pretty;
}

@media (max-width: 880px) {
  .governed__grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .governed__proof {
    max-width: 460px;
  }
}

/* ==========================================================================
   Plans / pricing : cartes aux tokens de marque (rose dominant, jaune en
   accent). Pas de prix v0 : on vend les LIMITES + l'early access.
   ========================================================================== */
/* Le bloc pricing se détache du « Here's what you get » qui le précède :
   bande de fond teintée + filets haut/bas, pour une vraie rupture visuelle. */
.pricing {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

/* Le titre du bloc pricing se démarque du « Here's what you get » qui le
   précède : on quitte le Gabarito display pour le Hanken Grotesk (corps),
   poussé en poids et resserré : même marque, voix distincte. */
.pricing .proof__head .display {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem);
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
}
.plan--featured {
  border-color: var(--primary);
  box-shadow: var(--shadow-pink);
}
.plan__head {
  position: relative;
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}
.plan__badge {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: oklch(1 0 0);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.plan__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}
.plan__soon {
  vertical-align: middle;
  margin-left: 0.5rem;
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.plan__tag {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.98rem;
}
.plan__list {
  list-style: none;
  display: grid;
  gap: 0.8rem;
  margin: 0 0 1.6rem;
  flex: 1 1 auto;
}
.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.98rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}
.plan__check {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.7rem;
}
.plan__cta {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}
/* Plans « Soon » : CTA inerte, présent mais visiblement non-cliquable. */
.plan__cta--soon {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
  box-shadow: none;
}
.plans__note {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ==========================================================================
   FAQ « pour les curieux », volontairement discrète, basse dans la page.
   ========================================================================== */
.faq {
  border-top: 1px solid var(--line);
}
.faq__intro {
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}
.faq__list {
  max-width: 46rem;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--ink);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-weight: 500;
  color: var(--primary-text);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 0.2s var(--ease-quart);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  padding: 0 0 1.2rem;
  color: var(--muted);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ==========================================================================
   CTA final : drenched pink
   ========================================================================== */
.finale {
  background:
    radial-gradient(120% 120% at 0% 0%, var(--primary-deep), transparent 55%),
    var(--primary);
  color: var(--on-primary);
  text-align: center;
}
.finale h2 {
  color: var(--on-primary);
  max-width: 18ch;
  margin-inline: auto;
}
.finale p {
  margin-top: 1rem;
  color: var(--on-primary);
  max-width: 40ch;
  margin-inline: auto;
}
.finale .wl-form {
  margin-top: 2rem;
  margin-inline: auto;
}
/* CTA finale sur fond magenta : bouton blanc + ghost en contour clair. */
.finale__cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.finale__cta .btn-primary {
  background: var(--bg);
  color: var(--primary-text);
  box-shadow: 0 14px 40px oklch(0 0 0 / 0.18);
}
.finale__cta .btn-primary:hover {
  background: oklch(1 0 0);
}
.finale__cta .btn-ghost {
  color: var(--on-primary);
  border-color: oklch(1 0 0 / 0.5);
}
.finale__cta .btn-ghost:hover {
  border-color: oklch(1 0 0);
}

/* ==========================================================================
   Waitlist form
   ========================================================================== */
.wl-form {
  width: 100%;
  max-width: 30rem;
}
.wl-row {
  display: flex;
  gap: 0.6rem;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.4rem 0.4rem 0.5rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.wl-row:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px oklch(0.6 0.224 357 / 0.15);
}
.wl-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  padding-inline: 0.7rem;
}
.wl-input::placeholder {
  color: var(--muted);
}
.wl-row .btn {
  padding: 0.7rem 1.2rem;
  box-shadow: none;
}
.wl-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.wl-msg {
  margin-top: 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  min-height: 1.2em;
}
.wl-msg[data-status="success"] {
  color: var(--ok);
}
.wl-msg[data-status="error"] {
  color: var(--primary-text);
}

/* état de succès : confirmation nette et persistante (vs bouton qui disparaît) */
.wl-done {
  width: 100%;
  max-width: 30rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--primary-soft);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-pill);
  padding: 0.65rem 1.2rem 0.65rem 0.65rem;
}
.wl-done__check {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ok);
  color: var(--on-primary);
  font-weight: 800;
  font-size: 1rem;
}
.wl-done__msg {
  font-weight: 600;
  color: var(--primary-text);
  font-size: 0.95rem;
  line-height: 1.3;
}
.wl-done--invert {
  background: oklch(1 0 0 / 0.16);
  border-color: var(--bg);
}
.wl-done--invert .wl-done__msg {
  color: var(--on-primary);
}
.wl-done--invert .wl-done__check {
  background: var(--bg);
  color: var(--primary-text);
}
.finale .wl-done {
  margin-inline: auto;
}

/* variante sur fond rose (CTA final) */
.wl-form--invert .wl-row {
  border-color: transparent;
}
.wl-form--invert .wl-row:focus-within {
  box-shadow: 0 0 0 4px oklch(1 0 0 / 0.4);
}
/* bouton blanc sur rose : chaud, lumineux, garde le climax du CTA (vs noir froid) */
.wl-form--invert .btn-primary {
  background: var(--bg);
  color: var(--primary-text);
}
.wl-form--invert .btn-primary:hover {
  background: oklch(0.97 0.02 350);
}
.wl-form--invert .wl-msg[data-status="success"] {
  color: var(--on-primary);
}
/* blanc sur rose = contraste franc (le jaune échouait l'AA) */
.wl-form--invert .wl-msg[data-status="error"] {
  color: var(--on-primary);
  font-weight: 700;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.footer-tag {
  color: var(--muted);
  max-width: 36ch;
  margin-top: 0.6rem;
}
.built-with {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.built-with:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.built-with .spark {
  color: var(--primary);
}
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.footer-meta {
  width: 100%;
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}
.footer-signin {
  color: var(--muted);
  font-weight: 600;
  padding-block: 0.2rem;
  transition: color 0.16s ease;
}
.footer-signin:hover {
  color: var(--ink);
}
.footer-signin:last-child {
  margin-inline-start: auto;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 880px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
  /* le titre + le formulaire passent EN PREMIER (CTA au-dessus du fold) ;
     la démo suit, plus compacte. */
  .hero__stage-wrap {
    max-width: 340px;
    margin-inline: auto;
  }
  .shift__grid {
    grid-template-columns: 1fr;
  }
  .manual__grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  /* la copie d'abord, l'anim ensuite (cohérent avec le hero) */
  .manual__stage {
    order: 2;
    max-width: 340px;
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .blocks__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .blocks__freedom {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .header-nav .header-link {
    display: none;
  }
}

@media (max-width: 540px) {
  .wl-row {
    flex-direction: column;
    border-radius: var(--radius);
    padding: 0.5rem;
  }
  .wl-row .btn {
    width: 100%;
    padding: 0.85rem;
  }
  .wl-row:focus-within {
    box-shadow: var(--shadow-sm);
  }
}

/* ==========================================================================
   Motion : par défaut visible ; l'animation n'existe que si le visiteur
   l'accepte. Aucune entrée ne masque le contenu en l'absence d'animation.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  [data-animate] {
    animation: rise-in 0.8s var(--ease-expo) backwards;
  }
  [data-animate="1"] { animation-delay: 0.05s; }
  [data-animate="2"] { animation-delay: 0.15s; }
  [data-animate="3"] { animation-delay: 0.28s; }
  [data-animate="4"] { animation-delay: 0.42s; }
  [data-animate="5"] { animation-delay: 0.56s; }

  .stage-window {
    animation: float-window 7s ease-in-out infinite;
  }
  .stage-window--calm {
    animation: float-window-calm 8s ease-in-out infinite;
  }

  /* Chorégraphie « dépose → live » (fenêtre hero uniquement) : cycle 6s.
     L'état au repos (= sans animation) est DÉJÀ le site publié et live ; ces
     keyframes rejouent l'histoire par-dessus sans jamais masquer le contenu. */

  /* la zone de dépôt accueille le fichier, puis s'efface pour laisser le site */
  .stage-window--live .stage-dropzone {
    animation: dropzone-cycle 6s var(--ease-quart) infinite;
  }
  /* le site se « peint » à l'écran une fois le fichier déposé (motion only).
     Au repos, le site est déjà entièrement visible : la preuve tient sans JS. */
  .stage-window--live .site {
    animation: site-reveal 6s var(--ease-expo) infinite;
  }
  /* éclat de publication qui balaie la fenêtre à l'atterrissage */
  .stage-window--live .stage-flash {
    animation: publish-sweep 6s var(--ease-quart) infinite;
  }
  /* le fichier tombe dans la fenêtre (cycle 6s) */
  .stage-chip {
    animation: chip-drop 6s var(--ease-expo) infinite;
  }
  /* la pastille « en ligne » s'allume (gris → vert) puis pulse à l'atterrissage */
  .stage-window--live .stage-live {
    animation: live-on-color 6s ease-in-out infinite;
  }
  .stage-window--live .stage-live i {
    animation: live-on-dot 6s ease-in-out infinite;
  }

  /* confettis : burst synchronisé juste après le drop */
  .confetti i {
    animation: confetti-pop 6s var(--ease-expo) infinite;
  }
  .confetti i:nth-child(1) { animation-delay: 0s; --cx: -120px; --cy: -90px; }
  .confetti i:nth-child(2) { animation-delay: 0.04s; --cx: -70px; --cy: -120px; }
  .confetti i:nth-child(3) { animation-delay: 0.08s; --cx: 0px; --cy: -140px; }
  .confetti i:nth-child(4) { animation-delay: 0.02s; --cx: 70px; --cy: -120px; }
  .confetti i:nth-child(5) { animation-delay: 0.06s; --cx: 120px; --cy: -90px; }
  .confetti i:nth-child(6) { animation-delay: 0.05s; --cx: 95px; --cy: -30px; }
  .confetti i:nth-child(7) { animation-delay: 0.03s; --cx: -95px; --cy: -30px; }
  .confetti i:nth-child(8) { animation-delay: 0.07s; --cx: 20px; --cy: -150px; }

  .built-with .spark {
    animation: spark-twinkle 2.4s ease-in-out infinite;
  }

  /* ChatStage (hero) : la conversation se rejoue en boucle, 8 s.
     « tu demandes → l'agent écrit → c'est en ligne ». Tout en transform/opacity
     et grid-template-rows (replier/déplier sans secousse de mise en page). */
  .chat-anim--ask { animation: chat-ask 8s var(--ease-expo) infinite; }
  .chat-anim--bubble { animation: chat-bubble 8s var(--ease-expo) infinite; }
  .chat-anim--type { animation: chat-type 8s var(--ease-quart) infinite; }
  .chat-anim--answer { animation: chat-answer 8s var(--ease-expo) infinite; }
  .chat-anim--live { animation: chat-live 8s ease-in-out infinite; }
  .chat-anim--spark { animation: chat-spark 8s var(--ease-expo) infinite; }
  .chat-typing i { animation: chat-dot 1.2s ease-in-out infinite; }
  .chat-typing i:nth-child(2) { animation-delay: 0.16s; }
  .chat-typing i:nth-child(3) { animation-delay: 0.32s; }
}

/* la demande de l'utilisateur monte dans le fil, tient, puis s'efface (reset) */
@keyframes chat-ask {
  0%, 4% { opacity: 0; transform: translateY(12px) scale(0.96); }
  12% { opacity: 1; transform: none; }
  90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* la bulle de l'agent apparaît après la demande */
@keyframes chat-bubble {
  0%, 14% { opacity: 0; transform: translateY(12px); }
  22% { opacity: 1; transform: none; }
  90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* « l'agent écrit » : les points se déplient, pulsent, puis se replient */
@keyframes chat-type {
  0%, 22% { grid-template-rows: 0fr; opacity: 0; }
  27% { grid-template-rows: 1fr; opacity: 1; }
  44% { grid-template-rows: 1fr; opacity: 1; }
  50%, 100% { grid-template-rows: 0fr; opacity: 0; }
}

/* la réponse (carte publiée + légende) se déplie quand l'agent a fini d'écrire */
@keyframes chat-answer {
  0%, 46% { grid-template-rows: 0fr; opacity: 0; }
  57% { grid-template-rows: 1fr; opacity: 1; }
  100% { grid-template-rows: 1fr; opacity: 1; }
}

/* la pastille « live » : éteinte (gris) tant que ce n'est pas publié, verte après */
@keyframes chat-live {
  0%, 50% { color: var(--muted); }
  57%, 100% { color: var(--ok); }
}

/* l'éclat de joie au moment où ça passe live */
@keyframes chat-spark {
  0%, 51% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  59% { opacity: 1; transform: scale(1) rotate(90deg); }
  72% { opacity: 0; transform: scale(0.8) rotate(140deg); }
  100% { opacity: 0; transform: scale(0.8) rotate(140deg); }
}

/* points de saisie */
@keyframes chat-dot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float-window {
  0%, 100% { transform: rotate(0.5deg) translateY(0); }
  50% { transform: rotate(0.5deg) translateY(-10px); }
}

@keyframes float-window-calm {
  0%, 100% { transform: rotate(-0.5deg) translateY(0); }
  50% { transform: rotate(-0.5deg) translateY(-8px); }
}

/* le fichier tombe DANS la zone de dépôt, puis est « absorbé » : le site se peint */
@keyframes chip-drop {
  0% { transform: translate(-50%, -230%); opacity: 0; }
  5% { opacity: 1; }
  13% { transform: translate(-50%, 150%); opacity: 1; } /* atterrit dans la zone */
  19% { transform: translate(-50%, 135%) scale(0.94); }
  24% { transform: translate(-50%, 135%); opacity: 0; } /* absorbé → le site apparaît */
  100% { transform: translate(-50%, 135%); opacity: 0; }
}

/* la zone de dépôt : visible pendant la chute, s'efface quand le site se peint,
   revient en fin de boucle. (État au repos : masquée → le site publié s'affiche.) */
@keyframes dropzone-cycle {
  0% { opacity: 1; }
  13% { opacity: 1; }
  20% { opacity: 0; }
  88% { opacity: 0; }
  100% { opacity: 1; }
}

/* le site se « peint » de haut en bas une fois le fichier déposé, tient, puis
   se retire pour relancer la boucle. (État au repos : entièrement visible.) */
@keyframes site-reveal {
  0%, 14% { opacity: 0; clip-path: inset(0 0 100% 0); }
  18% { opacity: 1; clip-path: inset(0 0 90% 0); }
  34% { opacity: 1; clip-path: inset(0 0 0 0); }
  90% { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

/* éclat blanc qui balaie la fenêtre au moment de la mise en ligne */
@keyframes publish-sweep {
  0%, 14% { opacity: 0; transform: translateX(-75%); }
  18% { opacity: 1; }
  32% { opacity: 0; transform: translateX(80%); }
  100% { opacity: 0; transform: translateX(80%); }
}

/* la pastille « live » : éteinte (gris) tant que ce n'est pas publié, verte après */
@keyframes live-on-color {
  0%, 15% { color: var(--muted); }
  19%, 100% { color: var(--ok); }
}
@keyframes live-on-dot {
  0%, 15% { background: var(--muted); box-shadow: 0 0 0 0 oklch(0.62 0.16 150 / 0); }
  19% { background: var(--ok); }
  26% { box-shadow: 0 0 0 5px oklch(0.62 0.16 150 / 0.4); }
  36%, 100% { background: var(--ok); box-shadow: 0 0 0 0 oklch(0.62 0.16 150 / 0); }
}

@keyframes confetti-pop {
  0%, 16% {
    transform: translate(0, 0) scale(0.4) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  42% {
    transform: translate(var(--cx), var(--cy)) scale(1) rotate(160deg);
    opacity: 1;
  }
  58% {
    transform: translate(calc(var(--cx) * 1.1), calc(var(--cy) + 80px))
      scale(0.9) rotate(220deg);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes spark-twinkle {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}

/* ==========================================================================
   PLAN DE CONTRÔLE (app) : auth, projets, upload.
   Même langage que la landing : fond clair, rose en action, Gabarito en titres,
   Hanken en texte. Aucun thème sombre, aucune couleur en dur.
   ========================================================================== */

/* · coquille & header · */
.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: oklch(1 0 0 / 0.8);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.app-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;
}
.app-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.app-header__user {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.app-main {
  flex: 1;
  width: 100%;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.app-wrap {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.app-wrap--narrow { max-width: 25rem; }
.app-wrap--mid { max-width: 34rem; }
.app-wrap--wide { max-width: 52rem; }

/* · en-tête de page · */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.88rem;
  transition: color 0.16s ease;
}
.back-link:hover { color: var(--ink); }
.page-head {
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}
.page-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink);
}
.page-sub {
  margin-top: 0.4rem;
  color: var(--muted);
}

/* · formulaires · */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.field__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.field__hint {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}
.input {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.input::placeholder { color: var(--muted); }
.input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px oklch(0.6 0.224 357 / 0.15);
}
/* champ adresse : input + suffixe « .domaine » solidaires */
.input-group {
  display: flex;
  align-items: stretch;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.input-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px oklch(0.6 0.224 357 / 0.15);
}
.input-group .input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.input-group .input:focus-visible { box-shadow: none; }
.input-group__suffix {
  display: flex;
  align-items: center;
  padding-inline: 0.85rem;
  background: var(--surface);
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.92rem;
  white-space: nowrap;
}
.form-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* · alertes · */
.alert {
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
}
.alert--error {
  background: var(--primary-soft);
  color: var(--primary-text);
  border: 1px solid oklch(0.6 0.224 357 / 0.28);
}
.alert--info {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* · boutons : variantes en plus de .btn/.btn-primary/.btn-ghost de la landing · */
.btn-sm {
  padding: 0.6rem 1rem;
  font-size: 0.92rem;
}
.btn-danger {
  background: transparent;
  color: var(--primary-text);
  border: 1.5px solid oklch(0.6 0.224 357 / 0.35);
}
.btn-danger:hover {
  background: var(--primary-soft);
  border-color: var(--primary-text);
  transform: translateY(-1px);
}
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* · pastilles d'état · */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge--online { background: oklch(0.95 0.06 150); color: var(--ok); }
.badge--idle { background: var(--surface-2); color: var(--muted); }
.badge--off { background: var(--primary-soft); color: var(--primary-text); }

/* · liste de projets · */
.project-new {
  margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
}
.project-list {
  list-style: none;
  display: grid;
  gap: 0.85rem;
}
.project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.25s ease, transform 0.18s ease;
}
.project-row:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.project-row__main { min-width: 0; display: grid; gap: 0.3rem; }
.project-row__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.project-row__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.project-row__url {
  color: var(--primary-text);
  font-size: 0.88rem;
  font-weight: 500;
  word-break: break-all;
}
.project-row__url:hover { text-decoration: underline; }

/* · état vide cliquable · */
.empty {
  display: block;
  text-align: center;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  background: var(--surface);
  transition: border-color 0.18s ease, background 0.18s ease;
}
.empty:hover { border-color: var(--primary); background: var(--primary-soft); }
.empty__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
}
.empty__sub {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
}

/* · uploader (zone de dépôt + liste) · */
.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(2rem, 5vw, 3.25rem) 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.dropzone:hover { border-color: var(--primary); }
.dropzone:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}
.dropzone--over {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.dropzone__ico {
  width: 34px;
  height: 34px;
  color: var(--primary-text);
  margin-bottom: 0.6rem;
}
.dropzone__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
}
.dropzone__sub {
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 0.4rem;
}
.dropzone code,
.file-row__path {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.dropzone code {
  background: var(--surface-2);
  padding: 0.05em 0.35em;
  border-radius: 5px;
  font-size: 0.9em;
}

.upload-progress {
  margin-top: 1.1rem;
}
.upload-progress__count {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.55rem;
}
.file-list {
  list-style: none;
  display: grid;
  gap: 0.1rem;
}
.file-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}
.file-row:nth-child(odd) { background: var(--surface); }
.file-row__path {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row__meta {
  color: var(--muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.file-status { flex-shrink: 0; font-weight: 700; }
.file-status--done { color: var(--ok); }
.file-status--error { color: var(--primary-text); font-weight: 600; }
.file-status--uploading { color: var(--primary); }
.file-status--pending { color: var(--muted); }

/* · bloc projet : adresse + aperçu/état · */
.project-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.project-url {
  color: var(--primary-text);
  font-weight: 600;
  font-size: 1rem;
  word-break: break-all;
}
.project-url:hover { text-decoration: underline; }
.project-dev {
  font-size: 0.82rem;
  color: var(--muted);
}
.project-dev a {
  color: var(--primary-text);
  font-weight: 600;
}
.project-dev a:hover { text-decoration: underline; }
.project-status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
}
.section-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.note-tip {
  margin-top: 1rem;
  padding: 0.7rem 0.95rem;
  border-radius: var(--radius-sm);
  background: oklch(0.97 0.06 96);
  color: var(--accent-ink);
  font-size: 0.88rem;
}
.note-tip code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 600;
}

/* · écran d'authentification (centré, hors coquille .app) · */
.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}
.auth__card {
  width: 100%;
  max-width: 24rem;
}
.auth__brand {
  margin-bottom: clamp(1.5rem, 5vw, 2.25rem);
}
.auth__title {
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.1rem);
}
.auth__alert {
  margin-top: 1.1rem;
}
.auth__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}
.auth__actions {
  margin-top: 0.5rem;
}
.auth__actions .btn {
  flex: 1;
}

@media (max-width: 540px) {
  .app-header__user { display: none; }
  .page-head--row { align-items: flex-start; }
}

/* ==========================================================================
   Footer riche (site multi-pages) : bloc marque + colonnes de navigation.
   Ajouté par le passage en site templatisé (cf. cmd/landinggen). Hors région
   « bailey:tokens » : brandgen n'y touche pas. Redéfinit .site-footer /
   .footer-meta après leurs règles v0 (plus haut) : la cascade fait gagner celle-ci.
   ========================================================================== */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 5.5rem) 1.75rem;
}
/* marque | grille de liens */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.footer-brand .brand {
  color: var(--ink);
  font-size: 1.35rem;
}
.footer-brand .brand__glyph {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.footer-brand .footer-tag {
  max-width: 28ch;
  margin-top: 0.9rem;
  line-height: 1.5;
}
.footer-brand .footer-badges {
  margin-top: 1.4rem;
}

/* la vraie grille des 4 colonnes (le bug v0 : elle était collée au conteneur parent) */
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem) 1.5rem;
}
.footer-col__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.footer-col__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer-link {
  display: inline-block;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 500;
  transition: color 0.16s var(--ease-quart), transform 0.16s var(--ease-quart);
}
.footer-link:hover {
  color: var(--primary-text);
  transform: translateX(2px);
}

/* barre méta */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  width: 100%;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}
.footer-meta__legal {
  color: var(--muted);
}
.footer-signin {
  color: var(--primary-text);
  font-weight: 600;
  margin-inline-start: 0; /* neutralise l'auto v0 : flex space-between gère l'alignement */
  transition: color 0.16s ease;
}
.footer-signin:hover {
  color: var(--primary);
}

@media (max-width: 860px) {
  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 560px) {
  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   Pages verticales (« Bailey for … ») : réutilisent hero/blocks/foryou/finale,
   + un hero centré (vhero) et une bande gouvernance (vgov).
   ========================================================================== */
.vhero {
  text-align: center;
  padding-top: clamp(2.5rem, 6vw, 5rem);
}
.vhero__wrap {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.vhero__wrap .display {
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem);
}
.vhero__lead {
  max-width: 58ch;
}
.vhero .hero__cta {
  justify-content: center;
  margin-top: 0.5rem;
}

.vgov__wrap {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--primary-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.vgov__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-text);
  margin-bottom: 0.6rem;
}
.vgov__copy {
  color: var(--ink);
  max-width: 62ch;
  margin-inline: auto;
}
.vgov__link {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--primary-text);
  font-weight: 600;
}
.vgov__link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Pages feedback (/feedback/feature · /feedback/bug) : formulaires câblés à
   Bailey (recon.store.collect). Réutilisent .field/.input + .wl-msg/.wl-done.
   ========================================================================== */
.fb-hero {
  padding-bottom: clamp(1rem, 3vw, 2rem);
}
.fb-section {
  padding-top: clamp(1rem, 3vw, 2rem);
}
.fb-wrap {
  max-width: 620px;
  margin-inline: auto;
}
.fb-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Tabs classiques feature / bug : ORDRE FIXE, mêmes positions d'une page à
   l'autre, actif souligné (pas de segment qui se déplace). */
.fb-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: 1.9rem;
}
.fb-tab {
  flex: 1;
  text-align: center;
  padding: 0.75rem 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--muted);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px; /* recouvre le filet du conteneur */
  transition: color 0.16s ease, border-color 0.16s ease;
}
.fb-tab:hover {
  color: var(--ink);
}
.fb-tab.is-active {
  color: var(--fb-accent-text);
  border-bottom-color: var(--fb-accent);
}

/* Le formulaire */
.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.6rem;
}
.input--area {
  min-height: 130px;
  line-height: 1.55;
  resize: vertical;
}
.input--select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a7580' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
.feedback-form .fb-submit {
  width: 100%;
}

/* honeypot : hors écran mais présent dans le DOM (les bots le remplissent) */
.fb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fb-gov {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 52ch;
  margin-inline: auto;
}
.fb-gov__ico {
  margin-inline-end: 0.15rem;
}

/* ==========================================================================
   Feedback, accent THÉMATIQUE par page : feature (magenta, créatif) ⇄ bug
   (bleu « pop », diagnostic). Distingue les deux surfaces d'un coup d'œil.
   ========================================================================== */
/* Feature (défaut) : BLEU, constructif, « on construit ensemble ». */
.page-feedback {
  --fb-accent: oklch(0.6 0.19 248);
  --fb-accent-soft: oklch(0.955 0.032 245);
  --fb-accent-text: oklch(0.46 0.15 250);
  --fb-accent-strong: oklch(0.53 0.17 252);
  --fb-accent-shadow: 0 14px 40px oklch(0.6 0.19 248 / 0.3);
}
/* Bug : ROUGE/corail, la sémantique universelle de l'alerte. */
.fb-bug {
  --fb-accent: oklch(0.62 0.21 28);
  --fb-accent-soft: oklch(0.955 0.038 35);
  --fb-accent-text: oklch(0.51 0.2 29);
  --fb-accent-strong: oklch(0.55 0.21 29);
  --fb-accent-shadow: 0 14px 40px oklch(0.62 0.21 28 / 0.32);
}

/* Icône hero : le marqueur visuel le plus immédiat */
.fb-ico {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  background: var(--fb-accent-soft);
  color: var(--fb-accent-text);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.25rem;
}
.fb-ico svg {
  width: 32px;
  height: 32px;
}

/* Pilule, mark, onglet actif, note gouvernance → teintés par l'accent de la page */
.page-feedback .fb-hero .pill {
  background: var(--fb-accent-soft);
  color: var(--fb-accent-text);
}
.page-feedback .fb-hero .pill .dot {
  background: var(--fb-accent);
}
.page-feedback .fb-hero .mark {
  color: var(--fb-accent-text);
}
.page-feedback .fb-gov__ico {
  color: var(--fb-accent-text);
}

/* Carte : filet d'accent en tête (bord supérieur, pas de side-stripe) */
.page-feedback .fb-card {
  border-top: 3px solid var(--fb-accent);
}

/* Champs : focus à l'accent de la page */
.page-feedback .input:focus-visible {
  border-color: var(--fb-accent);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--fb-accent) 18%, transparent);
}

/* Bouton d'envoi thématique (spécificité > .btn-primary) */
.page-feedback .fb-submit {
  background: var(--fb-accent-strong);
  box-shadow: var(--fb-accent-shadow);
}
.page-feedback .fb-submit:hover {
  background: var(--fb-accent-strong);
  filter: brightness(1.05);
}

/* Confirmation de succès teintée (bug : bleu au lieu du magenta par défaut) */
.fb-bug .wl-done {
  background: var(--fb-accent-soft);
  border-color: var(--fb-accent);
}
.fb-bug .wl-done__check {
  background: var(--fb-accent-strong);
}
.fb-bug .wl-done__msg {
  color: var(--fb-accent-text);
}

/* ==========================================================================
   Board feedback (/feedback/) : listing public + votes (recon.store.list /
   counters). Features = accent bleu (défaut .page-feedback), bugs = .fb-bug.
   ========================================================================== */
.board-wrap {
  max-width: 720px;
}
.board-section + .board-section {
  margin-top: 2.2rem;
}
.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.9rem;
}
.board-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--fb-accent-text);
}
.board-head__count {
  color: var(--muted);
  font-size: 0.88rem;
}
.board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.board-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.board-item__body {
  flex: 1;
  min-width: 0;
}
.board-item__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.board-item__body p {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.board-vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 3rem;
  padding: 0.45rem 0.6rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fb-accent-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.board-vote:hover {
  border-color: var(--fb-accent);
  background: var(--fb-accent-soft);
  transform: translateY(-1px);
}
.board-vote[aria-pressed="true"] {
  border-color: var(--fb-accent);
  background: var(--fb-accent-soft);
}
/* Déjà voté : le bouton reste focusable et lisible (il porte l'état), mais
   n'invite plus au clic : un second vote depuis ce navigateur ne prendra pas. */
.board-vote[aria-pressed="true"],
.board-vote[aria-pressed="true"]:hover {
  cursor: default;
  transform: none;
}
.board-vote__arrow {
  font-size: 0.7rem;
  line-height: 1;
}
.board-vote__n {
  font-size: 1rem;
  line-height: 1.1;
}
.board-badge {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--fb-accent-soft);
  color: var(--fb-accent-text);
  white-space: nowrap;
}
.board-badge--minor {
  background: oklch(0.95 0.03 150);
  color: oklch(0.42 0.11 152);
}
.board-badge--medium {
  background: oklch(0.95 0.06 85);
  color: oklch(0.44 0.1 70);
}
.board-badge--blocker {
  background: var(--fb-accent-soft);
  color: var(--fb-accent-text);
}
.board-item__date {
  flex-shrink: 0;
  align-self: center;
  color: var(--muted);
  font-size: 0.82rem;
}
.board-cta {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}
.board-cta a {
  color: var(--fb-accent-text);
  font-weight: 700;
}
.board-cta a:hover {
  text-decoration: underline;
}
.board-skel {
  height: 64px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(100deg, var(--bg) 40%, var(--fb-accent-soft) 50%, var(--bg) 60%);
  background-size: 200% 100%;
  animation: board-shimmer 1.2s linear infinite;
}
@keyframes board-shimmer {
  to {
    background-position: -200% 0;
  }
}
.board-empty {
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--muted);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  font-size: 0.95rem;
}