/* ============================================================
   TrendSaaS · feuille de style
   Direction : salle de contrôle. Nuit profonde, veines d'or,
   panneaux produit avec profondeur.
   Typo : Bricolage Grotesque (display) / Instrument Sans (texte)
          / Spline Sans Mono (données).
   Parti pris assumé : interface sombre unique, peinte explicitement,
   pour que la page tienne quel que soit le fond de l'hôte.
   ============================================================ */

:root {
  /* Fonds : graphite froid. Jamais de noir pur, jamais de teinte chaude. */
  --bg: #0a0a0d;
  --bg-1: #0f1013;
  --bg-2: #15161b;
  --bg-3: #1d1e25;

  /* Traits */
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);
  --line-3: rgba(255, 255, 255, 0.24);

  /* Texte : neutres très légèrement bleutés */
  --text: #eef0f3;
  --text-2: #9ba1ad;
  --text-3: #6a707c;

  /* Accent unique : acier pâle. Assez présent pour guider l'œil, assez
     désaturé pour ne jamais claquer comme un accent de gabarit. */
  --accent: #aeb9cc;
  --accent-2: #d6dde8;
  --accent-3: #78828f;
  --accent-glow: rgba(174, 185, 204, 0.26);
  --accent-film: rgba(174, 185, 204, 0.09);

  /* Action principale : blanc franc sur graphite. */
  --action: #ffffff;
  --action-texte: #0a0a0d;

  --r-s: 8px;
  --r: 14px;
  --r-l: 20px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --wrap: 1180px;
}

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

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Halo d'ambiance, fixe, derrière tout le reste */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(174, 185, 204, 0.10), transparent 62%),
    radial-gradient(760px 480px at 92% 4%, rgba(90, 120, 200, 0.08), transparent 60%);
}

/* Grain, très discret */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

::selection { background: var(--accent); color: #0a0b0f; }

h1, h2, h3 {
  font-family: "Space Grotesk", "Instrument Sans", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
em { font-style: normal; color: var(--accent); }
a { color: inherit; text-decoration: none; }
strong { color: var(--text); font-weight: 600; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 13px 22px;
  border-radius: var(--r-s);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--edge);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, opacity .16s;
}
.btn:hover { background: var(--bg-3); border-color: var(--line-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--action);
  color: var(--action-texte);
  border-color: transparent;
  box-shadow: 0 10px 34px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-primary:hover {
  background: #e9edf3;
  box-shadow: 0 16px 42px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-lg { font-size: 16px; padding: 16px 28px; border-radius: 10px; }
.btn-arrow { transition: transform .16s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }
.btn[disabled] { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-ghost {
  background: none;
  border: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--text-3);
  cursor: pointer;
  padding: 8px 2px;
  transition: color .15s;
}
.btn-ghost:hover { color: var(--text); }

/* ---------- En-tête ---------- */

/* La bande porte le fond et couvre toute la largeur ; l'en-tête reste centré
   dans le conteneur. Sans ça, le fond dessinait un rectangle au milieu. */
.head-bande {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(10, 10, 13, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.04em;
}
.brand svg { display: block; color: var(--accent); }
.head-nav { display: flex; align-items: center; gap: 6px; }
.head-nav a {
  font-size: 14.5px;
  color: var(--text-2);
  padding: 9px 14px;
  border-radius: var(--r-s);
  transition: color .15s, background .15s;
}
.head-nav a:hover { color: var(--text); background: var(--bg-2); }
.head-cta {
  margin-left: 8px;
  background: var(--action);
  color: var(--action-texte) !important;
  font-weight: 600;
  box-shadow: 0 8px 26px -12px var(--accent-glow);
}
.head-cta:hover { background: #e9edf3 !important; color: var(--action-texte) !important; }

/* ---------- Hero ---------- */

.hero { position: relative; padding: 104px 0 48px; }
#veins {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 700px;
  z-index: -1;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.hero-grid {
  display: grid;
  /* Le téléphone garde une largeur lisible : c'est la colonne de texte qui
     absorbe le manque de place, jamais l'écran du téléphone. En dessous de
     720 px il passe sous le texte plutôt que de se comprimer. */
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: center;
}
.hero-texte { max-width: none; }
.hero h1 {
  margin-top: 22px;
  font-size: clamp(40px, 5.2vw, 68px);
  letter-spacing: -0.038em;
  max-width: 15ch;
}
.hero-lede {
  margin-top: 24px;
  font-size: 18px;
  color: var(--text-2);
  max-width: 52ch;
}
.hero-actions { margin-top: 32px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-hint {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--text-3);
}
.hero-hint b { color: var(--text-2); font-weight: 500; }
.hero-hint span { display: inline-flex; align-items: center; gap: 7px; }
.hero-hint span::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(174, 185, 204, .55);
}

/* ---------- Bandeau de chiffres ---------- */

.strip {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.strip div { padding: 26px 22px; border-right: 1px solid var(--line); }
.strip div:last-child { border-right: none; }
.strip b {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
}
.strip span { font-size: 13.5px; color: var(--text-3); }

/* ---------- Outillage ---------- */

.outillage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: 28px 0 4px;
}
.outillage-mot {
  font-size: 14px;
  color: var(--text-3);
  max-width: 44ch;
}
.logos {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}
.logos li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-2);
  opacity: 0.62;
  transition: opacity .2s, color .2s;
}
.logos li:hover { opacity: 1; color: var(--text); }
.logos svg { width: 19px; height: 19px; flex: none; }

/* ---------- Sections ---------- */

.section { padding: 104px 0; }
.section-head { max-width: 62ch; }
.section h2 {
  margin-top: 16px;
  font-size: clamp(30px, 3.6vw, 46px);
}
.section-lede { margin-top: 16px; font-size: 17.5px; color: var(--text-2); }

/* Bento */
.bento {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--edge);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card h3 { font-size: 20px; margin: 14px 0 9px; letter-spacing: -0.02em; }
.card p { font-size: 14.8px; color: var(--text-2); }
.card-wide { grid-column: span 4; }
.card-half { grid-column: span 3; }
.card-third { grid-column: span 2; }
.card-ico {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(174, 185, 204, 0.3);
  background: var(--accent-film);
  color: var(--accent);
}
.card-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: var(--accent);
}

/* Aperçu du prompt dans le bento */
.mini-code {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #05060a;
  padding: 16px 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.85;
  color: var(--text-2);
  overflow: hidden;
  position: relative;
}
.mini-code::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 58px;
  background: linear-gradient(180deg, transparent, #05060a);
}
.mini-code b { color: var(--accent); font-weight: 500; }
.mini-code i { color: var(--text-3); font-style: normal; }

/* Étapes */
.steps { margin-top: 52px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.step {
  background: var(--bg-1);
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 180px;
  gap: 28px;
  align-items: center;
  padding: 32px 30px;
  transition: background .2s;
}
.step:hover { background: var(--bg-2); }
.step-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent);
  border: 1px solid rgba(174, 185, 204, 0.28);
  background: var(--accent-film);
  border-radius: 999px;
  padding: 7px 0;
  text-align: center;
}
.step h3 { font-size: 21px; margin-bottom: 8px; letter-spacing: -0.02em; }
.step p { font-size: 15px; color: var(--text-2); max-width: 62ch; }
.step-tag {
  justify-self: end;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  white-space: nowrap;
}

/* Tarif */
.pricing { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; margin-top: 48px; align-items: start; }
.price-card {
  border: 1px solid rgba(174, 185, 204, 0.3);
  border-radius: var(--r-l);
  background:
    radial-gradient(520px 240px at 50% -30%, var(--accent-film), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow), var(--edge);
  padding: 32px 30px;
  position: sticky;
  top: 96px;
}
.price-badge {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(174, 185, 204, 0.3);
  border-radius: 999px;
  padding: 5px 12px;
}
.price-row { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 4px; }
.price-big {
  font-family: "Space Grotesk", sans-serif;
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.price-old { font-size: 20px; color: var(--text-3); text-decoration: line-through; }
.price-sub { font-size: 14px; color: var(--text-2); }
.price-card .btn { width: 100%; margin-top: 22px; }
.price-list { margin-top: 22px; display: grid; gap: 11px; list-style: none; }
.price-list li { font-size: 14.5px; color: var(--text-2); padding-left: 26px; position: relative; }
.price-list li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.price-note { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-3); }

/* FAQ */
.faq-list { margin-top: 40px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  transition: color .15s;
}
.faq-list summary:hover { color: var(--accent); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex: none;
  width: 11px; height: 11px;
  border-right: 1.6px solid var(--text-3);
  border-bottom: 1.6px solid var(--text-3);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s;
}
.faq-list details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq-list details p { padding-bottom: 26px; color: var(--text-2); max-width: 78ch; font-size: 15.5px; }

/* CTA final */
.final {
  position: relative;
  text-align: center;
  padding: 112px 28px;
  border-top: 1px solid var(--line);
  background: radial-gradient(760px 380px at 50% 0%, rgba(174, 185, 204, 0.12), transparent 68%);
}
.final h2 { font-size: clamp(34px, 4.6vw, 58px); max-width: 20ch; margin: 18px auto 0; }
.final p { margin: 20px auto 34px; max-width: 52ch; color: var(--text-2); font-size: 17px; }

/* ---------- Téléphone en lévitation ---------- */

.scene-tel { position: relative; display: flex; flex-direction: column; align-items: center; }

.tel {
  position: relative;
  width: min(280px, 100%);
  padding: 12px;
  border-radius: 40px;
  background: linear-gradient(160deg, #2a2f3b, #111419 40%, #0a0c11);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: levitation 6s ease-in-out infinite;
  will-change: transform;
}
.tel-encoche {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 22px;
  border-radius: 0 0 14px 14px;
  background: #05060a;
  z-index: 2;
}
.tel-ecran {
  /* `position: relative` ajoute pour le reflet en `::after` : sans elle, le
     `inset: 0` du reflet se cale sur `.tel`, donc sur le cadre entier au lieu
     de l'ecran, et le verre deborde sur la tranche. */
  position: relative;
  border-radius: 30px;
  background:
    radial-gradient(320px 200px at 50% 0%, rgba(174, 185, 204, 0.16), transparent 70%),
    linear-gradient(180deg, #0d1017, #070910);
  padding: 13px 12px 20px;
  min-height: 420px;
}
.tel-heure {
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #fff;
  opacity: 0.92;
  margin-bottom: 18px;
}

/* position: relative · la notification qui sort s'y positionne en absolu. */
.notifs { display: grid; gap: 9px; position: relative; }
.notif {
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(8px);
  animation: notif-entre 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.notif:nth-child(1) { animation-delay: 0.25s; }
.notif:nth-child(2) { animation-delay: 0.45s; }
.notif:nth-child(3) { animation-delay: 0.65s; }
.notif:nth-child(3) { opacity: 0.72; }

/* Arrivée d'une notification en direct : elle tombe du haut, s'installe, et
   s'éclaire une seconde pour qu'on la distingue des précédentes. */
.notif-neuve {
  animation: notif-tombe 0.44s cubic-bezier(0.18, 0.9, 0.28, 1),
             notif-eclat 1.1s ease-out 0.3s;
  animation-delay: 0s, 0.3s;
}
@keyframes notif-tombe {
  from { opacity: 0; transform: translateY(-22px) scale(0.94); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes notif-eclat {
  from { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.34); }
  to   { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.09); }
}
/* Sortie par le bas : la pile respire au lieu de perdre une ligne d'un coup. */
.notif-sort {
  animation: notif-part 0.42s cubic-bezier(0.4, 0, 0.9, 0.4) forwards;
  pointer-events: none;
}
@keyframes notif-part {
  from { opacity: 0.72; transform: none; }
  to   { opacity: 0; transform: translateY(14px) scale(0.96); }
}
/* La pastille de Stripe pulse à l'arrivée : le point d'accroche du regard. */
.notif-neuve .notif-ico { animation: notif-pastille 0.6s ease-out 0.12s backwards; }
@keyframes notif-pastille {
  from { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .notif-neuve, .notif-sort, .notif-neuve .notif-ico { animation: none; }
}

.notif-ico {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  /* Violet Stripe, en aplat : un repère visuel, pas le logo de la marque. */
  background: #635bff;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 700;
}
.notif-txt { min-width: 0; }
.notif-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  margin-bottom: 2px;
}
.notif-tete span { font-weight: 700; color: #fff; letter-spacing: 0.01em; }
.notif-tete em { font-style: normal; color: rgba(255, 255, 255, 0.5); font-size: 10.5px; white-space: nowrap; }
.notif-corps {
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.86);
  overflow-wrap: anywhere;
}
.notif-corps strong { color: #fff; font-weight: 700; }

/* L'ombre respire à contretemps du téléphone : c'est ce qui fait « il vole ». */
.tel-ombre {
  display: block;
  width: 190px;
  height: 22px;
  margin-top: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent);
  filter: blur(9px);
  animation: ombre 6s ease-in-out infinite;
}

.tel-legende {
  margin-top: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}

@keyframes levitation {
  0%, 100% { transform: translateY(-12px) rotate(-1.4deg); }
  50%      { transform: translateY(12px) rotate(1.4deg); }
}
@keyframes ombre {
  0%, 100% { transform: scale(0.86); opacity: 0.5; }
  50%      { transform: scale(1.06); opacity: 0.8; }
}
@keyframes notif-entre {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
}

/* Pied */
.site-foot {
  padding: 26px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--text-3);
}

/* Apparition au scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   APP
   ============================================================ */

.app-main { min-height: calc(100vh - 190px); padding: 20px 0 100px; }

[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].in { animation: rise .5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

.progress { margin: 30px 0 6px; }
.progress-track { height: 4px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-3), var(--accent));
  box-shadow: 0 0 14px var(--accent-glow);
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.stage { padding: 44px 0 20px; max-width: 760px; }
.stage-center { text-align: center; margin: 0 auto; padding-top: 110px; }
.stage-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.stage-title { font-size: clamp(32px, 4.6vw, 52px); }
.stage-title-q { font-size: clamp(27px, 3.6vw, 40px); }
.stage-lede { margin-top: 16px; font-size: 17px; color: var(--text-2); max-width: 60ch; }
.stage-footnote { margin-top: 18px; font-size: 13.5px; color: var(--text-3); }
.stage .btn { margin-top: 30px; }

/* Choix */
.options { margin-top: 34px; display: grid; gap: 10px; max-width: 640px; }
.options-compact { grid-template-columns: 1fr 1fr; }
.option {
  position: relative;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: var(--edge);
  transition: border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.option:hover { border-color: var(--line-3); transform: translateY(-1px); }
.option.selected {
  border-color: rgba(174, 185, 204, 0.55);
  background: linear-gradient(180deg, rgba(174, 185, 204, 0.14), rgba(174, 185, 204, 0.05));
  box-shadow: 0 0 0 1px rgba(174, 185, 204, 0.2), 0 16px 40px -22px var(--accent-glow);
}
.option-label { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.option-detail { font-size: 13.8px; color: var(--text-3); }
.option.selected .option-detail { color: rgba(255, 226, 168, 0.72); }

.option-check { padding-left: 54px; }
/* La case est centrée verticalement : les réponses font une ou deux lignes
   selon les questions, une position fixe ne pouvait pas convenir aux deux. */
.option-tick {
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  place-items: center;
  transition: background .15s, border-color .15s;
}
.option-check.selected .option-tick { background: var(--accent); border-color: var(--accent); }
/* Le chevron est optiquement décalé : une coche pivotée n'est pas centrée sur
   sa boîte, on la remonte d'un pixel et on la décale d'un demi. */
.option-check.selected .option-tick::after {
  content: "";
  width: 5px; height: 9px;
  margin: -2px 0 0 1px;
  border-right: 2px solid var(--action-texte);
  border-bottom: 2px solid var(--action-texte);
  transform: rotate(43deg);
}
/* Le bloc de choix regroupe la liste et la réponse libre ; le bouton vient après. */
.choix { display: grid; gap: 10px; max-width: 640px; }
.choix > .options { margin-bottom: 0; }
.choix + .btn { margin-top: 30px; }
.options + .btn { margin-top: 30px; }

/* ---------- Question illustrée ---------- */

.option-illu { padding-top: 20px; }
.illu {
  width: 52px;
  height: 36px;
  margin-bottom: 8px;
  color: var(--text-3);
  transition: color .16s, transform .16s;
}
.option-illu:hover .illu { color: var(--text-2); transform: translateY(-2px); }
.option-illu.selected .illu { color: var(--accent); }

/* ---------- Échelle d'accord illustrée ---------- */

.echelle {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 620px;
}
.cran {
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  color: var(--text-3);
  cursor: pointer;
  box-shadow: var(--edge);
  transition: border-color .16s, color .16s, transform .16s, background .16s;
}
.cran:hover { border-color: var(--line-3); color: var(--text-2); transform: translateY(-2px); }
.cran.selected {
  border-color: var(--accent);
  color: var(--accent);
  background: linear-gradient(180deg, var(--accent-film), transparent);
  box-shadow: 0 0 0 1px var(--accent-film), 0 16px 40px -24px var(--accent-glow);
}
.visage { width: 42px; height: 42px; display: block; }
.cran-label {
  font-size: 12.5px;
  line-height: 1.25;
  text-align: center;
  color: var(--text-3);
}
.cran.selected .cran-label { color: var(--text); }

@media (max-width: 620px) {
  .echelle { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .cran { padding: 12px 4px 10px; }
  .visage { width: 32px; height: 32px; }
  .cran-label { font-size: 10.5px; }
}

/* ---------- Écrans de présentation illustrés ---------- */

.message-illu { text-align: center; max-width: 560px; margin: 0 auto; padding-top: 56px; }
.message-illu .stage-lede { margin-left: auto; margin-right: auto; }
.illu-grande {
  width: 128px;
  height: 128px;
  margin: 0 auto 34px;
  color: var(--accent);
  filter: drop-shadow(0 18px 44px var(--accent-glow));
  animation: flotte 6s ease-in-out infinite;
}
.illu-grande svg { width: 100%; height: 100%; }
@keyframes flotte {
  0%, 100% { transform: translateY(-8px); }
  50% { transform: translateY(8px); }
}

/* ---------- Tableau de bord projeté ---------- */

.futur { max-width: 680px; }
.tdb {
  margin-top: 30px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow), var(--edge);
  overflow: hidden;
}
.tdb-barre {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.tdb-point { width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); }
.tdb-nom {
  margin-left: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-3);
}
.tdb-chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.tdb-chiffres > div { background: var(--bg-1); padding: 20px 18px; display: flex; flex-direction: column; gap: 3px; }
.tdb-valeur {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.tdb-libelle {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.tdb-detail { font-size: 11.5px; color: var(--text-3); }
.tdb-courbe { width: 100%; height: 90px; display: block; }

/* ---------- Résultats de membres ---------- */

.rail-resultats {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}
.fiche-resultat {
  flex: 0 0 280px;
  scroll-snap-align: start;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: 22px 22px 18px;
}
.fiche-nom { font-weight: 700; font-size: 16px; }
.fiche-contexte { margin-top: 4px; font-size: 13.5px; color: var(--text-3); }
.fiche-avant-apres { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.fiche-avant-apres div { display: flex; flex-direction: column; gap: 3px; }
.fiche-avant-apres span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.fiche-avant-apres strong { font-size: 17px; }
.fiche-fleche { color: var(--accent); font-size: 18px; }
.fiche-duree { margin-top: 14px; font-size: 12.5px; color: var(--text-3); }

/* ---------- Formules ---------- */

.formules { max-width: 560px; }
.plans { margin-top: 30px; display: grid; gap: 14px; }
.plan {
  position: relative;
  font: inherit;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  cursor: pointer;
  text-align: left;
  transition: border-color .16s, transform .16s;
}
.plan:hover { border-color: var(--line-3); transform: translateY(-1px); }
.plan.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-film); }
.plan-populaire { margin-top: 12px; }
.plan-ruban {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--action-texte);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-radio {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-3);
  /* Centrage par la grille : une coche pivotée placée en absolu tombe toujours
     à côté, parce que sa boîte n'est plus alignée sur ses traits visibles. */
  display: grid;
  place-items: center;
}
.plan.selected .plan-radio { background: var(--accent); border-color: var(--accent); }
.plan.selected .plan-radio::after {
  content: "";
  width: 5px; height: 9px;
  /* Décalage optique : le sommet de l'angle droit doit tomber au centre. */
  margin: -2px 0 0 1px;
  border-right: 2px solid var(--action-texte);
  border-bottom: 2px solid var(--action-texte);
  transform: rotate(43deg);
}
.plan-gauche { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.plan-duree { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.plan-remise {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--action-texte);
  background: var(--accent);
  border-radius: 5px;
  padding: 2px 7px;
}
.plan-prix { font-size: 14.5px; color: var(--text-2); }
.plan-prix s { color: var(--text-3); margin-right: 6px; }
.plan-jour { text-align: right; display: flex; flex-direction: column; }
.plan-jour strong { font-family: "Space Grotesk", sans-serif; font-size: 22px; letter-spacing: -0.03em; }
.plan-jour em { font-style: normal; font-size: 11.5px; color: var(--text-3); }

.formules .btn { margin-top: 22px; width: 100%; }
.plan-securite {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
}
.plan-securite::before { content: "🔒 "; }
.moyens {
  list-style: none;
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.moyens li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
}
.moyens svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.plan-demo { margin-top: 16px; text-align: center; font-size: 11.5px; color: var(--text-3); }

@media (max-width: 620px) {
  .tdb-chiffres { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Calcul avec questions en surimpression ---------- */

.calcul { padding-top: 96px; }
.chargement-large { max-width: 520px; margin-left: auto; margin-right: auto; height: 5px; }
.calcul-etat {
  margin-top: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text-3);
}

.popup {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 6, 9, 0.72);
  backdrop-filter: blur(6px);
  animation: fondu .25s ease;
}
.popup[hidden] { display: none; }
@keyframes fondu { from { opacity: 0; } }

.popup-carte {
  width: min(440px, 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow), var(--edge);
  padding: 30px 30px 26px;
  text-align: left;
  animation: monte .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes monte { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.popup-question {
  font-family: "Space Grotesk", sans-serif;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.popup-detail { margin-top: 10px; font-size: 14.5px; color: var(--text-2); }
.popup-actions { margin-top: 24px; display: flex; gap: 10px; }
.popup-actions .btn { flex: 1; }

/* ---------- Tableau de projection ---------- */

.projection { max-width: 680px; }
.proj-carte {
  margin-top: 26px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: radial-gradient(520px 220px at 20% -30%, var(--accent-film), transparent 70%),
              linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow), var(--edge);
  padding: 26px 28px;
}
.proj-titre {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.proj-montant {
  margin-top: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(34px, 5.4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.proj-barre { margin-top: 20px; display: flex; gap: 4px; height: 30px; }
.seg { border-radius: 6px; }
.seg-0 { background: var(--accent); }
.seg-1 { background: color-mix(in srgb, var(--accent) 55%, var(--bg-3)); }
.seg-2 { background: color-mix(in srgb, var(--accent) 28%, var(--bg-3)); }

.proj-legende { list-style: none; margin-top: 12px; display: flex; gap: 18px; flex-wrap: wrap; }
.proj-legende li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.pastille { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.pastille-0 { background: var(--accent); }
.pastille-1 { background: color-mix(in srgb, var(--accent) 55%, var(--bg-3)); }
.pastille-2 { background: color-mix(in srgb, var(--accent) 28%, var(--bg-3)); }

.proj-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-3);
}

.proj-h2 { margin-top: 34px; font-size: 22px; letter-spacing: -0.02em; }
.proj-sous { margin-top: 5px; font-size: 14px; color: var(--text-3); }

.proj-lignes { margin-top: 16px; display: grid; gap: 10px; }
.proj-ligne {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-1);
  overflow: hidden;
}
.proj-ligne summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 20px;
}
.proj-ligne summary::-webkit-details-marker { display: none; }
.proj-ligne summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.6px solid var(--text-3);
  border-bottom: 1.6px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s;
}
.proj-ligne[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.proj-nom { flex: 1; font-weight: 600; font-size: 16px; }
.proj-plage {
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.proj-ligne p { padding: 0 20px 18px; font-size: 14.5px; color: var(--text-2); }
.projection .hypothese { margin-top: 22px; }
.projection .btn { margin-top: 26px; }

/* ---------- Adresse du site ---------- */

.url-champ {
  display: flex;
  align-items: center;
  margin-top: 30px;
  max-width: 520px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--bg-1);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.url-champ:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-film); }
.url-prefixe {
  padding: 13px 0 13px 15px;
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  color: var(--text-3);
}
.url-champ input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 13px 15px 13px 4px;
  color: var(--text);
  background: none;
  border: none;
  outline: none;
}
.url-champ input::placeholder { color: var(--text-3); }

/* ---------- Écran d'analyse ---------- */

.checklist { list-style: none; margin-top: 34px; display: grid; gap: 14px; max-width: 460px; }
.checklist li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  color: var(--text-3);
  transition: color .3s;
}
.checklist li.faite { color: var(--text); }
.check {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  position: relative;
  transition: background .3s, border-color .3s;
}
.checklist li.faite .check { background: var(--accent); border-color: var(--accent); }
.checklist li.faite .check::after {
  content: "";
  position: absolute;
  left: 7px; top: 4px;
  width: 6px; height: 11px;
  border-right: 2px solid var(--action-texte);
  border-bottom: 2px solid var(--action-texte);
  transform: rotate(42deg);
}

.chargement {
  margin-top: 26px;
  max-width: 460px;
  height: 4px;
  border-radius: 3px;
  background: var(--bg-3);
  overflow: hidden;
}
.chargement i { display: block; width: 0; height: 100%; background: var(--accent); border-radius: 3px; transition: width 1.2s cubic-bezier(.3,.7,.3,1); }

.avis-bande { margin-top: 28px; display: grid; gap: 12px; max-width: 460px; }
.avis {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-1);
  padding: 16px 18px;
}
.avis blockquote { font-size: 15.5px; color: var(--text); }
.avis figcaption {
  margin-top: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  color: var(--text-3);
}

.resultat { margin-top: 34px; display: grid; gap: 14px; max-width: 620px; }
.bilan {
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: 20px 22px;
  animation: note-entre .4s cubic-bezier(.2,.8,.3,1) backwards;
}
.bilan-faible { border-left-color: var(--text-3); animation-delay: .12s; }
.bilan-titre {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.bilan p:not(.bilan-titre) { font-size: 15.5px; color: var(--text); }
.bilan-source { font-size: 13px; color: var(--text-3); }
.resultat .btn { justify-self: start; margin-top: 8px; }

/* Tracé animé, réutilisé par le tableau de bord projeté. */
.trace { animation: tracer 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }

/* ---------- La barrière ---------- */

.barriere .stage-title { font-size: clamp(38px, 5.4vw, 64px); }
.recap {
  margin-top: 34px;
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  max-width: 620px;
}
.recap div { background: var(--bg-1); padding: 16px 20px; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.recap span {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.recap strong { font-size: 15.5px; text-align: right; }

/* ---------- Preuve sociale ---------- */

.preuve { max-width: 640px; padding-top: 88px; }
.preuve-avant { font-size: 17px; color: var(--text-2); }
.compteur {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(64px, 12vw, 104px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 10px 0 6px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.preuve-apres { font-size: 19px; color: var(--text); max-width: 30ch; margin: 0 auto; }

.citation {
  margin: 40px auto 0;
  max-width: 40ch;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.citation blockquote {
  font-family: "Space Grotesk", sans-serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.citation figcaption {
  margin-top: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* Réponse de l'app à un choix : se glisse sous la case retenue. */
/* La note se déplie depuis la case choisie. La hauteur est animée via une
   grille (0fr → 1fr) : c'est le seul moyen de transitionner vers une hauteur
   automatique sans la mesurer en JavaScript. */
.note-tiroir {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 0.8, 0.24, 1);
}
.note-tiroir > * {
  overflow: hidden;
  min-height: 0;
}
.note-tiroir.ouvert { grid-template-rows: 1fr; }

.note-choix {
  margin: 6px 0 4px;
  padding: 14px 18px;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent);
  border-radius: 0 11px 11px 0;
  background: var(--accent-film);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  transform-origin: top center;
  /* L'état visible est la valeur par défaut : si la transition ne joue pas
     · onglet en arrière-plan, animation interrompue · la note reste lisible.
     Seul l'état fermé masque, et il ne dure que le temps de l'ouverture. */
  transition:
    opacity 0.3s ease 0.1s,
    transform 0.38s cubic-bezier(0.22, 0.8, 0.24, 1) 0.06s;
}
.note-tiroir:not(.ouvert) > .note-choix {
  opacity: 0;
  transform: translateY(-10px) scaleY(0.97);
}

/* Après un re-rendu, la note est déjà ouverte : pas de rejeu d'animation. */
.note-tiroir.sans-anim,
.note-tiroir.sans-anim > .note-choix { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .note-tiroir, .note-tiroir > .note-choix { transition: none; }
}

/* ---------- Réponse écrite par l'utilisateur ---------- */

/* Les listes fermées ne couvrent pas toutes les vies : sur les questions
   qualitatives, on laisse écrire sa propre réponse. */
.option-autre { border-style: dashed; }
.option-autre.selected { border-style: solid; }

.libre {
  margin-top: 12px;
  border: 1px solid rgba(174, 185, 204, 0.4);
  border-radius: 11px;
  background: rgba(174, 185, 204, 0.06);
  padding: 16px 18px;
  max-width: 640px;
}
.libre-input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  color: var(--text);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
.libre-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(174, 185, 204, 0.16);
}
.libre-input::placeholder { color: var(--text-3); }
.libre-actions { margin-top: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- Curseur de revenu visé ---------- */

.curseur {
  margin-top: 34px;
  max-width: 640px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--edge);
  padding: 26px 28px;
}
.curseur-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.curseur-montant {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.curseur-palier {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(174, 185, 204, 0.35);
  background: var(--accent-film);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

/* Le rail se remplit à gauche du curseur : la variable --part porte la position. */
.curseur-rail {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 22px 0 10px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent) var(--part, 0%),
    var(--bg-3) var(--part, 0%),
    var(--bg-3) 100%
  );
  cursor: grab;
}
.curseur-rail:active { cursor: grabbing; }
.curseur-rail::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--action);
  border: 3px solid var(--bg);
  box-shadow: 0 6px 20px -6px var(--accent-glow);
}
.curseur-rail::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
}

.curseur-bornes {
  display: flex;
  justify-content: space-between;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-3);
}
.curseur-bornes span { display: flex; flex-direction: column; gap: 3px; }
.curseur-bornes span:last-child { text-align: right; }
.curseur-bornes em {
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.75;
}

.curseur-note {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--text-2);
}
.curseur-calcul { margin-top: 10px; font-size: 14px; color: var(--text-3); }
.curseur-calcul strong { color: var(--text); }

/* ---------- Machine à écrire ---------- */

/* Curseur affiché pendant la frappe du titre, retiré à la dernière lettre. */
.machine.ecrit::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  min-width: 2px;
  height: 0.82em;
  margin-left: 0.06em;
  vertical-align: -0.06em;
  background: var(--accent);
  animation: curseur 0.7s steps(1) infinite;
}
@keyframes curseur { 50% { opacity: 0; } }

/* Ouverture d'acte */
.act { padding-top: 86px; }
.act-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.act .stage-title { font-size: clamp(40px, 5.6vw, 66px); }

/* Compte */
/* Un écran, une demande : le formulaire seul, sans colonne latérale. */
.account { padding: 44px 0 20px; }
.account .stage-title { font-size: clamp(32px, 4.4vw, 50px); }
.account-form { margin-top: 30px; display: grid; gap: 16px; max-width: 420px; }
.field { display: grid; gap: 7px; }
.field span {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.field input {
  font: inherit;
  font-size: 16px;
  padding: 13px 15px;
  color: var(--text);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(174, 185, 204, 0.16);
}
.field input::placeholder { color: var(--text-3); }
.account-form .btn { margin-top: 6px; }
.form-error {
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 500;
}
.form-note { font-size: 12.8px; color: var(--text-3); line-height: 1.55; max-width: 46ch; }

/* Champ libre */
.free-text {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-top: 28px;
  font: inherit;
  font-size: 16.5px;
  line-height: 1.6;
  padding: 18px 20px;
  color: var(--text);
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.free-text:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(174, 185, 204, 0.16); }
.free-text::placeholder { color: var(--text-3); }
.text-actions { margin-top: 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.text-actions .btn { margin-top: 0; }

/* Miroirs */
.mirror-card {
  margin-top: 28px;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--edge);
  padding: 26px 28px;
  max-width: 680px;
}
.mirror-card p { color: var(--text-2); font-size: 15.5px; }
.mirror-line {
  font-family: "Space Grotesk", sans-serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--text) !important;
  margin-bottom: 12px;
}
.mirror-line-gold { color: var(--accent) !important; }
.mirror-note { margin-top: 20px; font-size: 14.5px; color: var(--text-3); }

/* Calcul */
.dig-anim { width: 116px; margin: 0 auto 24px; color: var(--accent); filter: drop-shadow(0 0 22px var(--accent-glow)); }
.dig-ring { animation: ring 4.4s ease forwards; transform: rotate(-90deg); transform-origin: center; }
@keyframes ring { to { stroke-dashoffset: 0; } }
.dig-nugget { animation: pulse .9s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .35; } to { opacity: 1; } }
.dig-line { font-family: "JetBrains Mono", monospace; font-size: 15px; color: var(--text-2); letter-spacing: 0.02em; }

/* Résultats */
.results { padding: 36px 0 4px; max-width: 760px; }
.ideas { display: grid; gap: 20px; margin-top: 30px; }
.idea-card {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow), var(--edge);
  padding: 32px 34px;
  position: relative;
  overflow: hidden;
}
.idea-card-first { border-color: rgba(174, 185, 204, 0.32); }
.idea-card-first::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(520px 200px at 20% -20%, var(--accent-film), transparent 70%);
}
.idea-head { display: flex; justify-content: space-between; gap: 22px; align-items: start; }
.idea-rank {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.idea-name { font-size: 30px; letter-spacing: -0.03em; }
.idea-pitch { font-size: 16.5px; color: var(--text-2); margin-top: 5px; }
.idea-score {
  flex: none;
  text-align: center;
  min-width: 88px;
  padding: 13px 10px 10px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  line-height: 1;
}
.idea-score-num { font-family: "Space Grotesk", sans-serif; font-size: 28px; font-weight: 600; color: var(--accent); }
.idea-score-pct { font-family: "Space Grotesk", sans-serif; font-size: 15px; color: var(--accent); }
.idea-score-label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 7px;
}
.idea-why {
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 14.5px;
  color: var(--text-2);
}
.idea-why strong { color: var(--accent); font-weight: 600; }
.idea-facts { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 30px; }
.idea-facts dt {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 5px;
}
.idea-facts dd { font-size: 14.8px; color: var(--text-2); }
.idea-mvp { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.idea-mvp h3 { font-size: 17px; margin-bottom: 12px; letter-spacing: -0.02em; }
.idea-mvp ul { list-style: none; display: grid; gap: 8px; }
.idea-mvp li { font-size: 14.8px; color: var(--text-2); padding-left: 22px; position: relative; }
.idea-mvp li::before {
  content: "";
  position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 2px;
  background: var(--accent);
  opacity: .8;
}
.idea-delai {
  margin-top: 16px;
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
}
.idea-card .btn { margin-top: 24px; }
.results-redo { margin-top: 32px; display: flex; gap: 20px; flex-wrap: wrap; }

.cap-quote {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
  padding: 16px 20px;
  font-size: 17px;
  color: var(--text);
  max-width: 64ch;
}
.cap-quote span {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 9px;
}

/* Paywall */
.paywall-intro { padding-bottom: 6px; }
.teaser { display: grid; gap: 14px; margin-top: 10px; }
.teaser-open {
  border: 1px solid rgba(174, 185, 204, 0.32);
  border-radius: var(--r-l);
  background:
    radial-gradient(520px 200px at 20% -20%, var(--accent-film), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow), var(--edge);
  padding: 28px 32px;
}
.teaser-open .idea-head { margin-top: 8px; }
.teaser-locked {
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.014);
  padding: 22px 32px;
}
.locked-lines { display: grid; gap: 10px; margin: 14px 0 16px; }
.locked-lines span {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
}
.locked-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.locked-tag::before {
  content: "";
  width: 11px; height: 9px;
  border: 1.4px solid var(--text-3);
  border-radius: 2px;
  box-shadow: 0 -4px 0 -1.4px transparent, inset 0 0 0 0 transparent;
  position: relative;
}

.offer {
  margin-top: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--shadow), var(--edge);
  overflow: hidden;
}
.offer-body { padding: 32px 34px; }
.offer-body h2 { font-size: 23px; margin-bottom: 18px; letter-spacing: -0.02em; }
.offer-list { list-style: none; display: grid; gap: 12px; }
.offer-list li { font-size: 15px; color: var(--text-2); padding-left: 26px; position: relative; line-height: 1.55; }
.offer-list li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.offer-garantie {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-3);
}
.offer-price {
  border-left: 1px solid var(--line);
  background: radial-gradient(420px 260px at 50% 0%, var(--accent-film), transparent 70%);
  padding: 32px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.price-barre { font-size: 17px; color: var(--text-3); text-decoration: line-through; }
.price-now {
  font-family: "Space Grotesk", sans-serif;
  font-size: 58px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-top: 4px;
}
.price-now span { font-size: 26px; margin-left: 3px; color: var(--accent); }
.price-mention { font-size: 13.5px; color: var(--text-2); margin: 12px 0 18px; }
.offer-price .btn { width: 100%; }
.price-demo { font-size: 11.8px; color: var(--text-3); margin-top: 14px; line-height: 1.5; }

/* Dossier */
.dossier-tabs {
  display: inline-flex;
  margin-top: 30px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-1);
  gap: 4px;
}
.tab {
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 11px 20px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tab:hover { color: var(--text-2); }
.tab.active { background: var(--bg-3); color: var(--text); box-shadow: var(--edge); }

.panel { display: none; margin-top: 28px; }
.panel.active { display: block; }
.panel-note {
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
  padding: 16px 20px;
  font-size: 14.8px;
  color: var(--text-2);
  max-width: 78ch;
}

.prompt-box {
  margin-top: 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.prompt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.prompt-len { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--text-3); letter-spacing: 0.04em; }
.btn-copy {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: var(--action);
  color: var(--action-texte);
  cursor: pointer;
  box-shadow: 0 8px 24px -12px var(--accent-glow);
  transition: filter .15s;
}
.btn-copy:hover { filter: brightness(1.08); }
.prompt-pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.7;
  padding: 24px 26px;
  white-space: pre-wrap;
  background: #05060a;
  color: var(--text-2);
  max-height: 560px;
  overflow: auto;
}
.prompt-pre::-webkit-scrollbar { width: 10px; }
.prompt-pre::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 6px; }

/* Marketing */
.mk-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.mk-h { font-size: 26px; margin-bottom: 6px; letter-spacing: -0.02em; }
.mk-week { border-top: 1px solid var(--line); padding: 22px 0; }
.mk-week h3 { font-size: 17px; margin-bottom: 12px; color: var(--accent); letter-spacing: -0.01em; }
.mk-week ul { list-style: none; display: grid; gap: 10px; }
.mk-week li { font-size: 14.8px; color: var(--text-2); padding-left: 22px; position: relative; }
.mk-week li::before {
  content: "";
  position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--line-3);
}
.mk-aside { display: grid; gap: 14px; }
.mk-block {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  box-shadow: var(--edge);
  padding: 20px 22px;
}
.mk-block h3 { font-size: 15.5px; margin-bottom: 8px; letter-spacing: -0.01em; }
.mk-block p, .mk-block li { font-size: 14px; color: var(--text-2); }
.mk-sub { margin-top: 8px; color: var(--text-3) !important; }
.mk-block-gold {
  border-color: rgba(174, 185, 204, 0.32);
  background: radial-gradient(400px 180px at 30% -30%, var(--accent-film), transparent 70%), linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.mk-block-gold h3 { color: var(--accent); }
.mk-canaux { list-style: none; display: grid; gap: 10px; }
.mk-canaux strong { color: var(--text); }
.mk-hooks { list-style: none; display: grid; gap: 12px; }
.mk-hooks li {
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  color: var(--text) !important;
  font-size: 14.5px;
}

/* ---------- Responsive ---------- */

/* Le hero ne passe en colonne unique que quand la place manque vraiment. */
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 72px 0 40px; }
}



@media (max-width: 980px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .strip div:nth-child(2) { border-right: none; }
  .strip div:nth-child(1), .strip div:nth-child(2) { border-bottom: 1px solid var(--line); }
  .bento { grid-template-columns: 1fr; }
  .card-wide, .card-half, .card-third { grid-column: auto; }
  .step { grid-template-columns: 60px 1fr; gap: 18px; padding: 26px 22px; }
  .step-tag { display: none; }
  .pricing { grid-template-columns: 1fr; }
  .price-card { position: static; }
  .offer { grid-template-columns: 1fr; }
  .offer-price { border-left: none; border-top: 1px solid var(--line); }
  .mk-grid { grid-template-columns: 1fr; }
  .options-compact { grid-template-columns: 1fr; }
  .idea-head { flex-direction: column; }
  .idea-facts { grid-template-columns: 1fr; }
  .idea-card, .teaser-open { padding: 24px 22px; }
  .teaser-locked { padding: 20px 22px; }
  /* Sous 980 px on masque les liens de navigation, mais pas la connexion :
     c'est une action, pas une ancre · et c'est le seul moyen pour un client
     qui revient de retrouver son dossier depuis son téléphone. */
  .head-nav a:not(.head-cta):not(.head-connexion) { display: none; }
  /* Trois éléments sur une barre étroite : on interdit le retour à la ligne
     et on resserre, sinon chaque bouton se casse sur trois lignes. */
  .head-nav { gap: 6px; }
  .head-nav a { white-space: nowrap; }
  .head-connexion { margin-left: 0; padding: 8px 11px !important; font-size: 13px; }
  .head-cta { margin-left: 0; padding: 8px 12px !important; font-size: 13px; }
  .brand { gap: 8px; }
  /* Sur une barre étroite, trois éléments ne tiennent pas : le logo suffit à
     identifier le site, le mot laisse la place aux deux boutons. */
  .brand-mot { display: none; }
  .brand-logo { width: 26px; height: 26px; }
  .section { padding: 76px 0; }
  .wrap { padding: 0 20px; }
  .dossier-tabs { display: flex; width: 100%; }
  .tab { flex: 1; padding: 11px 8px; }
}

/* Checkout Whop intégré : l'iframe est servie par Whop mais s'affiche dans la page. */
.whop-checkout {
  width: 100%;
  min-height: 520px;
  margin: 22px 0 6px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface, #101015);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
}
.whop-checkout iframe { width: 100%; border: 0; display: block; }

/* Dans une liste sur deux colonnes, l'encadré prend toute la largeur
   pour ne pas casser l'alignement des cases. */
.options-compact > .note-tiroir { grid-column: 1 / -1; }

/* Analyse du site : listes d'avantages et d'inconvénients. */
.bilan-liste { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 7px; }
.bilan-liste li { font-size: 15px; line-height: 1.5; }
.bilan-fort .bilan-liste li::marker { color: var(--accent); }
.bilan-faible .bilan-liste li::marker { color: var(--muted); }

/* Avant / après : tableaux de bord Stripe miniatures. */
.fiche-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fiche-badge {
  flex: none;
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fiche-panneaux {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 18px 0 12px;
}
.stripe-panneau {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.stripe-tete { display: flex; align-items: center; gap: 7px; }
.stripe-logo {
  display: grid;
  place-items: center;
  width: 17px; height: 17px;
  border-radius: 5px;
  background: #635bff;
  color: #fff;
  font-weight: 700;
  font-size: 11px;
}
.stripe-titre { font-size: 12px; color: var(--muted); }
.stripe-etat {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.stripe-montant {
  margin: 9px 0 4px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.stripe-montant span { font-size: 0.95rem; color: var(--muted); }
.stripe-courbe { width: 100%; height: 52px; display: block; }
.stripe-trait { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.stripe-aire { fill: var(--accent-film); stroke: none; }
.stripe-pied { margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.resultats-mention {
  margin: 14px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
@media (max-width: 620px) {
  .fiche-panneaux { grid-template-columns: 1fr; }
  .fiche-panneaux .fiche-fleche { transform: rotate(90deg); justify-self: center; }
}

/* Le retour se prend en haut, sous la barre de progression. */
.retour-haut { margin: 14px 0 -6px; }
.retour-haut .btn-ghost { padding-left: 0; }

/* ---------- Sections de vente sous les formules ---------- */

.vente-bloc { margin-top: 52px; }
.vente-titre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.avantages { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 640px; }
.avantages li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
/* Les titres portent l'argument : ils passent en gras et dans la police
   d'affichage, pour se détacher nettement de leur description. */
.avantages strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.015em;
  color: var(--text);
}
.avantages em { display: block; margin-top: 3px; font-style: normal; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
/* Coche des avantages : centrée par la grille, en vert de validation.
   Le placement en absolu laissait toujours le chevron décalé, parce que sa
   boîte n'est pas alignée sur ses traits une fois pivotée. */
.avantage-coche {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid #32d74b;
  background: rgba(50, 215, 75, 0.12);
  display: grid;
  place-items: center;
}
.avantage-coche::after {
  content: "";
  width: 5px; height: 8px;
  margin: -2px 0 0 1px;
  border: solid #32d74b;
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(43deg);
}

.faq-paywall { display: grid; gap: 8px; max-width: 640px; }
.faq-paywall details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 13px 16px;
}
.faq-paywall summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; }
.faq-paywall summary::-webkit-details-marker { display: none; }
.faq-paywall summary::after { content: " +"; color: var(--muted); }
.faq-paywall details[open] summary::after { content: " −"; }
.faq-paywall p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

.avis-liste { display: grid; gap: 10px; max-width: 640px; }
.avis-carte {
  display: flex;
  gap: 13px;
  margin: 0;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.avis-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent-film);
  border: 1px solid var(--line-2);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--accent);
}
.avis-carte blockquote { margin: 0; font-size: 15px; line-height: 1.55; }
.avis-carte figcaption { margin-top: 5px; font-size: 13px; color: var(--muted); }

.vente-rappel { padding-top: 8px; border-top: 1px solid var(--line); }
.avis-photo { object-fit: cover; padding: 0; border: 1px solid var(--line-2); }

/* Compte à rebours de la remise, en haut du paywall. */
.remise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-film);
}
.remise-texte { font-size: 14px; font-weight: 600; }
.remise-chrono {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.remise-finie { border-color: var(--line-2); background: var(--surface); }
.remise-finie .remise-texte { color: var(--muted); font-weight: 500; }
.head-lien { font-size: 14px; color: var(--muted); }
.head-lien:hover { color: var(--text); }


/* Barre d'état du téléphone : heure, réseau, wifi, batterie. */
.tel-statut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 10px;
  margin-bottom: 16px;
  color: #fff;
}
.tel-statut-heure {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.tel-statut-icones { display: flex; align-items: center; gap: 5px; }
.tel-statut svg { display: block; }
.tel-ico-reseau rect { fill: #fff; }
.tel-ico-wifi path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.tel-ico-wifi .plein { fill: #fff; stroke: none; }
.tel-ico-batterie .contour { fill: none; stroke: #fff; stroke-opacity: 0.45; stroke-width: 1; }
.tel-ico-batterie .charge { fill: #fff; }
.tel-ico-batterie .plein { fill: #fff; fill-opacity: 0.45; }
.remise-badge {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #0a0a0d;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.remise-texte { flex: 1; }
.brand-logo { display: block; border-radius: 6px; }
button.head-lien {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
button.head-lien:hover { color: var(--text); }

/* ============================================================
   L'ATELIER
   ============================================================ */

.atelier { padding-top: 8px; }

.atelier-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.atelier-titre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-top: 6px;
}


.atelier-barre { display: grid; gap: 20px; margin-bottom: 22px; }
.champ-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip-on { background: var(--accent-film); border-color: var(--accent); color: var(--text); font-weight: 600; }

.atelier-compte { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.atelier-compte strong { color: var(--text); font-size: 15px; }
.atelier-vide {
  padding: 30px;
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  text-align: center;
  color: var(--muted);
}

/* Onglet marketing */
.mk-entete { margin: 24px 0 18px; }
.mk-titre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
}
.mk-pitch { color: var(--muted); margin-top: 4px; }

.mk-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk-carte {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.mk-carte-large { grid-column: 1 / -1; border-color: var(--accent); background: var(--accent-film); }
.mk-carte h3 {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.mk-carte p { line-height: 1.6; }
.mk-carte .mk-sub { margin-top: 8px; font-size: 14px; color: var(--muted); }
.mk-carte ul { margin: 0; padding-left: 18px; display: grid; gap: 9px; }
.mk-carte li { line-height: 1.55; font-size: 14.5px; }
.mk-hooks li { list-style: none; position: relative; padding-right: 68px; }
.mk-hooks { padding-left: 0 !important; }
.copie {
  position: absolute;
  right: 0;
  top: 0;
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.copie:hover { color: var(--text); border-color: var(--accent); }

.mk-section {
  margin: 34px 0 14px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.mk-semaines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk-semaine {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.mk-semaine h4 {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
}
.mk-semaine ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.mk-semaine li { font-size: 14px; line-height: 1.55; color: var(--muted); }

@media (max-width: 780px) {
  .mk-cartes, .mk-semaines { grid-template-columns: 1fr; }
  .atelier-tete { align-items: flex-start; }
}

/* Mesures compactes sur les cartes d'idée. */
.mesures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 16px 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--line);
}
.mesure {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 14px;
  background: var(--surface);
}
.mesure-cle {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mesure-val {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.mesure-sub { font-size: 11.5px; color: var(--muted); }

.jauge { display: flex; gap: 3px; margin-top: 1px; }
.jauge i { width: 16px; height: 3px; border-radius: 2px; background: var(--line-2); }
.jauge-1 i:nth-child(1),
.jauge-2 i:nth-child(-n + 2),
.jauge-3 i { background: var(--accent); }

/* Détail replié : la carte reste courte tant qu'on ne l'ouvre pas. */
.idea-detail { margin-top: 4px; }
.idea-detail > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--muted);
}
.idea-detail > summary::-webkit-details-marker { display: none; }
.idea-detail > summary::after { content: "▾"; font-size: 11px; }
.idea-detail[open] > summary::after { content: "▴"; }
.idea-detail > summary:hover { color: var(--text); border-color: var(--accent); }
.idea-detail[open] > summary { margin-bottom: 16px; }

@media (max-width: 760px) {
  .mesures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Onglet vidéo ---------- */

.chips-longs .chip {
  max-width: 100%;
  text-align: left;
  white-space: normal;
  line-height: 1.4;
  padding: 10px 15px;
}

.video-atelier {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 8px;
}
.video-cadre { position: relative; }
.video-cadre canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  background: #0a0a0d;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
}
.video-format {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(10, 10, 13, 0.72);
  backdrop-filter: blur(8px);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.video-h {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.video-note { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-bottom: 20px; }
.video-alerte {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  padding: 11px 14px;
  border-left: 2px solid var(--accent);
  background: var(--accent-film);
  border-radius: 0 10px 10px 0;
}
.video-barre {
  height: 5px;
  border-radius: 3px;
  background: var(--line-2);
  overflow: hidden;
  margin-bottom: 16px;
}
.video-barre i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; }

.btn-ghost-plein {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 13px 22px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
}
.btn-ghost-plein:hover { background: var(--accent-film); }

@media (max-width: 780px) {
  .video-atelier { grid-template-columns: 1fr; }
  .video-cadre { max-width: 260px; margin: 0 auto; }
}
/* `display` explicite l'emporte sur l'attribut hidden : on le rétablit. */
[hidden] { display: none !important; }

/* Formules : durée, contenu et onglets réservés. */
.plan-prix em { font-style: normal; font-size: 0.82em; color: var(--muted); }
.plan-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-film);
  border: 1px solid var(--line-2);
  font-size: 10px;
  color: var(--accent);
}
.plan-contenu {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
  max-width: 640px;
}
.plan-contenu li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--muted);
}
.plan-contenu li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 5px;
  height: 9px;
  border: solid var(--accent);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

.reserve {
  margin-top: 30px;
  padding: 40px 32px;
  border: 1px dashed var(--line-2);
  border-radius: 16px;
  background: var(--surface);
  max-width: 620px;
}
.reserve-cadenas { font-size: 26px; }
.reserve-titre {
  margin: 12px 0 8px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.reserve-texte { color: var(--muted); line-height: 1.6; margin-bottom: 22px; }
/* Le libellé du pack tient sur deux lignes sans déformer la pastille. */
/* La pastille tient sur une ligne quand le libellé le permet ; quand il faut
   deux lignes, on les équilibre pour ne pas laisser un mot seul en bas. */
/* La pastille vit dans une colonne flex : sans align-self, elle s'étire sur
   toute la largeur et laisse un grand vide à droite de son texte. Elle se colle
   maintenant à son contenu, et n'occupe la largeur disponible que si son texte
   la remplit vraiment. `balance` est retiré pour la même raison : il centrait
   les lignes en laissant la boîte à sa largeur maximale. */
.plan-tag {
  align-self: start;
  white-space: normal;
  line-height: 1.28;
  max-width: 100%;
}

/* ---------- Onglet abonnement ---------- */

.abo { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.abo-actuel {
  padding: 22px;
  border: 1px solid var(--accent);
  border-radius: 16px;
  background: var(--accent-film);
}
.abo-cle {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.abo-nom {
  margin: 8px 0 2px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.025em;
}
.abo-prix { color: var(--muted); font-size: 14.5px; margin-bottom: 14px; }
.abo-actuel .plan-contenu { margin-top: 0; }
.abo-gerer { margin-top: 18px; width: 100%; font-size: 14px; }

.abo-changer .vente-titre { margin-top: 0; }
.abo-invite {
  margin-top: 16px;
  padding: 26px;
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  text-align: center;
  color: var(--muted);
}
.abo-avertissement {
  margin: 18px 0 4px;
  padding: 13px 16px;
  border-left: 2px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--accent-film);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .abo { grid-template-columns: 1fr; }
}

/* Le bouton de connexion : bordé, pour se distinguer des liens de menu sans
   entrer en concurrence avec l'appel à l'action principal, qui reste plein. */
.head-connexion {
  margin-left: 6px;
  padding: 9px 16px !important;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-2);
  transition: border-color .15s, color .15s, background .15s;
}
.head-connexion:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-film);
}

/* Le bandeau de remise occupe toute la largeur de l'onglet abonnement. */
.abo > .remise { grid-column: 1 / -1; }

/* Garantie sous les tarifs. */
.garantie {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-film);
  max-width: 640px;
}
.garantie-sceau {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 17px;
}
.garantie-titre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.garantie-texte { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ============================================================
   PAGE DE TARIFS · palette dédiée
   Vert pour les remises, rose pour la sélection. Volontairement
   différent du reste du site : c'est l'écran de vente.
   ============================================================ */

.formules {
  --vert: #32d74b;
  --rose: #f2a7dc;
  --rose-vif: #e879c8;
}

/* Bandeau du compte à rebours */
.formules .remise {
  border-color: rgba(242, 167, 220, 0.35);
  background: rgba(255, 255, 255, 0.03);
}
.formules .remise-badge {
  background: none;
  color: var(--vert);
  font-size: 1.45rem;
  font-weight: 800;
  padding: 0;
  letter-spacing: -0.03em;
}
.formules .remise-texte { font-weight: 500; color: var(--text-2); }
.formules .remise-chrono {
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
}
.formules .remise-finie { border-color: var(--line-2); }

/* Cartes de formule */
.formules .plan.selected {
  border-color: var(--rose);
  box-shadow: 0 0 0 1px var(--rose), 0 20px 50px -30px rgba(232, 121, 200, 0.5);
  background: linear-gradient(180deg, rgba(242, 167, 220, 0.07), rgba(242, 167, 220, 0.02));
}
.formules .plan.selected .plan-radio {
  background: var(--rose-vif);
  border-color: var(--rose-vif);
}
.formules .plan.selected .plan-radio::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}
.formules .plan-ruban {
  background: var(--rose);
  color: #2a1024;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* Badge de remise : vert, comme sur la référence */
.formules .plan-remise {
  background: var(--vert);
  color: #06300f;
  font-weight: 800;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 7px;
}

/* Bouton : contour en dégradé rose → bleu */
.formules .btn-primary {
  position: relative;
  background: transparent;
  color: #fff;
  border: 0;
  padding: 16px 26px;
  width: 100%;
  max-width: 640px;
  justify-content: center;
  box-shadow: none;
}
.formules .btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(90deg, var(--rose-vif), #7aa2f7, var(--rose-vif));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.formules .btn-primary:hover { background: rgba(242, 167, 220, 0.08); }
.formules .btn-primary .btn-arrow { display: none; }

/* Mention de sécurité en vert, avec un bouclier */
.formules .plan-securite {
  color: var(--vert);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.formules .plan-securite::before {
  content: "";
  width: 15px; height: 17px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3.5v6c0 5-3.4 9.3-8 10.5-4.6-1.2-8-5.5-8-10.5v-6L12 2z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3.5v6c0 5-3.4 9.3-8 10.5-4.6-1.2-8-5.5-8-10.5v-6L12 2z'/%3E%3C/svg%3E");
}

/* La garantie s'accorde au rose de la page */
.formules .garantie { border-color: rgba(242, 167, 220, 0.4); background: rgba(242, 167, 220, 0.06); }
.formules .garantie-sceau { border-color: var(--rose); color: var(--rose); }
.formules .plan-tag { color: var(--rose); border-color: rgba(242, 167, 220, 0.4); background: rgba(242, 167, 220, 0.08); }

/* La garantie est un argument de vente, pas une note de bas de page :
   elle passe au-dessus du bouton et prend du poids visuel. */
.garantie-forte {
  margin: 22px 0 18px;
  padding: 20px 22px;
  gap: 16px;
  border-width: 1.5px;
}
.garantie-forte .garantie-sceau {
  width: 42px; height: 42px;
  border-width: 1.5px;
  font-size: 21px;
}
.garantie-forte .garantie-titre { font-size: 1.12rem; margin-bottom: 5px; }
.garantie-forte .garantie-texte { font-size: 14.5px; color: var(--text-2); }
.formules .garantie-forte {
  border-color: var(--vert);
  background: rgba(50, 215, 75, 0.07);
}
.formules .garantie-forte .garantie-sceau { border-color: var(--vert); color: var(--vert); }
.formules .garantie-forte .garantie-titre { color: var(--vert); }


/* ---------- Pages de conditions ---------- */

.legal { max-width: 720px; padding: 48px 0 80px; }
.legal h1 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 8px 0 6px;
}
.legal-maj {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 34px;
}
.legal h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  margin: 34px 0 10px;
}
.legal p { line-height: 1.7; margin-bottom: 12px; color: var(--text-2); }
.legal ol, .legal ul { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 10px; }
.legal li { line-height: 1.65; color: var(--text-2); }
.legal strong { color: var(--text); }
.legal-note {
  margin-top: 38px;
  padding: 15px 18px;
  border-left: 2px solid var(--line-3);
  background: var(--surface);
  border-radius: 0 10px 10px 0;
  font-size: 13.5px;
  color: var(--muted);
}

/* La garantie porte l'argument principal : le titre passe en gros. */
.garantie-forte .garantie-titre {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 2px;
}
.garantie-soustitre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  margin-bottom: 9px;
}
.formules .garantie-forte .garantie-soustitre { color: var(--vert); }
.garantie-forte { align-items: center; }

/* Garantie en tête d'écran : le pictogramme remplace le caractère de repli. */
.garantie-sceau svg { width: 22px; height: 22px; display: block; }
.garantie-forte .garantie-sceau svg { width: 26px; height: 26px; }
.garantie-cond {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--muted);
}
.garantie-cond a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.garantie-cond a:hover { color: var(--text); }
.formules .garantie-forte { margin: 0 0 22px; }

/* Version resserrée : trois lignes au lieu de six. */
.formules .garantie-forte { padding: 14px 18px; gap: 13px; margin: 0 0 18px; }
.formules .garantie-forte .garantie-sceau { width: 34px; height: 34px; }
.formules .garantie-forte .garantie-sceau svg { width: 20px; height: 20px; }
.formules .garantie-forte .garantie-titre {
  font-size: 1.32rem;
  margin-bottom: 1px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
}
.formules .garantie-forte .garantie-soustitre {
  font-size: 13px;
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(50, 215, 75, 0.16);
}
.formules .garantie-forte .garantie-texte { font-size: 13.5px; line-height: 1.5; }
.formules .garantie-cond { display: inline; margin-left: 6px; }

/* La mention des conditions doit rester discrète : elle informe, elle ne vend
   pas. Plus petite, et insécable pour ne pas casser la ligne en deux. */
.formules .garantie-cond {
  font-size: 9.5px;
  letter-spacing: 0.02em;
  opacity: 0.55;
  white-space: nowrap;
}

/* ============================================================
   ATELIER · habillage « argent / encaissement »
   Vert de paiement, chiffres en gros, surfaces de tableau de bord.
   ============================================================ */

.atelier { --vert: #32d74b; }

/* ---------- Recherche de niche ---------- */

.chercheur { margin-bottom: 26px; }
.chercheur-champ {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  max-width: 640px;
  transition: border-color .18s, box-shadow .18s;
}
.chercheur-champ:focus-within {
  border-color: var(--vert);
  box-shadow: 0 0 0 3px rgba(50, 215, 75, 0.12);
}
.chercheur-loupe { flex: none; color: var(--muted); }
.chercheur-loupe svg { width: 18px; height: 18px; display: block; }
.chercheur-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  padding: 12px 0;
  outline: none;
}
.chercheur-input::placeholder { color: var(--muted); }
.chercheur-input::-webkit-search-cancel-button { filter: invert(1) opacity(0.4); }
.chercheur-go {
  flex: none;
  padding: 11px 20px;
  border: 0;
  border-radius: 11px;
  background: var(--vert);
  color: #06300f;
  font: inherit;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
}
.chercheur-go:hover { filter: brightness(1.08); }

  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
  color: var(--vert);
  border-color: var(--vert);
  background: rgba(50, 215, 75, 0.1);
  font-weight: 600;
}

.chercheur-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.chercheur-barre .atelier-compte { margin: 0; }

/* Écran d'attente : un chiffre, pas un vide */
.vide-riche {
  margin-top: 8px;
  padding: 54px 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(50, 215, 75, 0.09), transparent 70%),
    var(--surface);
  max-width: 640px;
}
.vide-chiffre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 9vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--vert);
}
.vide-titre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin: 6px 0 10px;
}
.vide-texte { color: var(--muted); line-height: 1.6; max-width: 42ch; }

/* ---------- Idée retenue ---------- */

.mienne {
  margin-bottom: 24px;
  padding: 20px 22px;
  border: 1px solid var(--vert);
  border-radius: 16px;
  background:
    radial-gradient(600px 180px at 90% 0%, rgba(50, 215, 75, 0.12), transparent 70%),
    var(--surface);
}
.mienne-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mienne-cle {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vert);
}
.mienne-changer {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mienne-changer:hover { color: var(--text); }
.mienne-nom {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.03em;
  margin: 6px 0 2px;
}
.mienne-pitch { color: var(--muted); font-size: 14.5px; }
.mienne-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.mienne-chiffres span { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--muted); }
.mienne-chiffres strong {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.02em;
  color: var(--text);
}

.idea-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.idea-card .btn-primary { background: var(--vert); color: #06300f; box-shadow: 0 10px 30px -18px rgba(50, 215, 75, 0.7); }
.idea-card .btn-primary:hover { filter: brightness(1.08); background: var(--vert); }
.mesure-val { color: var(--text); }
.idea-card .mesures .mesure:first-child .mesure-val { color: var(--vert); }

/* ---------- Personnalisation de la vidéo ---------- */

.video-bloc { display: block; margin-bottom: 18px; }
.video-bloc .champ-label { display: block; margin-bottom: 8px; }
.video-texte {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.video-texte:focus { border-color: var(--vert); box-shadow: 0 0 0 3px rgba(50, 215, 75, 0.12); }
.video-compteur { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }

.palettes { display: flex; gap: 8px; flex-wrap: wrap; }
.palette {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.palette-puce { width: 11px; height: 11px; border-radius: 50%; }
.palette:hover { color: var(--text); }
.palette-on { border-color: var(--vert); color: var(--text); font-weight: 600; background: rgba(50, 215, 75, 0.08); }

.video-actions .btn-primary { background: var(--vert); color: #06300f; }
.video-actions .btn-primary:hover { filter: brightness(1.08); background: var(--vert); }
.video-barre i { background: var(--vert); }
.btn-ghost-plein { border-color: var(--vert); }
.btn-ghost-plein:hover { background: rgba(50, 215, 75, 0.1); }

/* Choix du type de clients, dans le bloc de recherche. */
.chercheur-marche { margin-top: 18px; max-width: 640px; }
.chercheur-marche .champ-label { display: block; margin-bottom: 9px; }
.marches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.marche {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.marche strong {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text-2);
}
.marche em { font-style: normal; font-size: 11.5px; }
.marche:hover { border-color: var(--line-3); }
.marche:hover strong { color: var(--text); }
.marche-on {
  border-color: var(--vert);
  background: rgba(50, 215, 75, 0.09);
  color: var(--text-2);
}
.marche-on strong { color: var(--vert); }

@media (max-width: 620px) {
  .marches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ============================================================
   PARAMÈTRES ET RÉSILIATION
   ============================================================ */

.param { max-width: 640px; }
.param-etroit { max-width: 560px; }

/* Carte d'identité du compte, en tête des paramètres. */
.compte-carte {
  margin-bottom: 18px;
  padding: 18px 20px 14px;
  border: 1px solid var(--line-3);
  border-radius: 16px;
  background: var(--bg-2);
}
.compte-ligne {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
}
.compte-ligne:first-child { padding-top: 0; }
.compte-ligne:last-of-type { border-bottom: 0; padding-bottom: 4px; }
.compte-ligne span { flex: 0 0 auto; font-size: 13.5px; color: var(--text-3); }
.compte-ligne b {
  min-width: 0;
  font-weight: 600;
  font-size: 14.5px;
  text-align: right;
  overflow-wrap: anywhere;
}
.compte-gerer {
  display: inline-block;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.compte-gerer:hover { color: var(--text); }

.param-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.param-ligne {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 19px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.param-ligne:hover { border-color: var(--line-3); background: rgba(255, 255, 255, 0.03); }
.param-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 16px;
}
.param-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.param-txt strong { font-weight: 600; font-size: 15.5px; }
.param-txt em { font-style: normal; font-size: 13px; color: var(--muted); }
.param-fleche { flex: none; color: var(--muted); font-size: 14px; }

.ariane {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: 12.5px;
  color: var(--muted);
}
.ariane button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ariane button:hover { color: var(--text); }
.ariane-ici { color: var(--text); }

.param-titre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.param-texte { color: var(--muted); line-height: 1.65; margin-bottom: 20px; }
.param-note { margin-top: 18px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.param-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.param-note a:hover { color: var(--text); }
.param .abo-actuel { margin-bottom: 4px; }
.param .abo-actuel .btn-primary { margin-top: 18px; width: 100%; justify-content: center; }

.plan-gratuit { border-style: dashed; }
.plan-tag-gris { color: var(--muted) !important; border-color: var(--line-2) !important; background: none !important; }

.case-conditions {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  padding: 15px 17px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  line-height: 1.55;
  font-size: 14.5px;
}
.case-conditions input {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 1px;
  accent-color: #32d74b;
  cursor: pointer;
}
.case-conditions a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.param .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.retention-tete { margin-bottom: 22px; }
.retention-cle {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.retention-titre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  letter-spacing: -0.035em;
  margin: 6px 0 10px;
}
.btn-resilier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: 13px 22px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  color: var(--muted);
  font-size: 14.5px;
}
.btn-resilier:hover { color: var(--text); border-color: var(--line-3); }

/* ---------- Les trois étapes, avant le paywall ---------- */

.parcours { --vert: #32d74b; }
.etapes {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 680px;
  counter-reset: none;
}
.etape {
  position: relative;
  display: flex;
  gap: 18px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(520px 160px at 100% 0%, rgba(50, 215, 75, 0.07), transparent 70%),
    var(--surface);
  animation: etape-entre .55s cubic-bezier(.22,.8,.24,1) backwards;
  animation-delay: var(--retard, 0ms);
}
@keyframes etape-entre {
  from { opacity: 0; transform: translateY(14px); }
}
/* Le fil qui relie les étapes : on montre une progression, pas une liste. */
.etape::after {
  content: "";
  position: absolute;
  left: 43px;
  top: 100%;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, var(--line-3), transparent);
}
.etape:last-child::after { display: none; }

.etape-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid var(--vert);
  background: rgba(50, 215, 75, 0.1);
  color: var(--vert);
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 500;
}
.etape-corps h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.etape-corps p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.etape-preuve {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

@media (max-width: 620px) {
  .etape { flex-direction: column; gap: 12px; }
  .etape::after { left: 21px; }
}

/* Erreur de paiement et solution de repli. */
/* Fenêtre de paiement, par-dessus la page. */
.paie-fond {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  background: rgba(5, 5, 8, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: paie-entree 0.18s ease-out;
}
@keyframes paie-entree { from { opacity: 0; } to { opacity: 1; } }

.paie-boite {
  width: 100%;
  max-width: 520px;
  min-width: 0;
  margin: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  background: var(--bg-1);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.paie-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 14px 20px;
  border-bottom: 1px solid var(--line);
}
.paie-titre { min-width: 0; font-weight: 600; font-size: 15px; }
.paie-fermer {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.paie-fermer:hover { color: var(--text); border-color: var(--line-3); }

/* La promesse qui lève la dernière objection avant de saisir une carte : c'est
   elle qui porte l'encadré, donc l'accent. Un seul bloc criard · deux l'un sur
   l'autre s'annulent, l'œil n'en lit plus aucun. */
.paie-promesse {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid #32d74b;
  border-radius: 12px;
  background: rgba(50, 215, 75, 0.09);
  color: #32d74b;
  font-size: 13.5px;
  line-height: 1.45;
}
.paie-promesse svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.paie-promesse > span { min-width: 0; }
.paie-promesse strong {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.paie-cond { display: block; margin-top: 3px; font-size: 12px; color: rgba(50, 215, 75, 0.72); }
.paie-cond a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.paie-cond a:hover { color: #32d74b; }

/* Le sans-engagement passe en précision sobre : vrai, utile, mais ce n'est pas
   lui qui décide quelqu'un à sortir sa carte. */
.paie-note {
  margin: 0 0 14px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

.paie-corps { padding: 16px; }
.paie-corps .plan-securite { margin-top: 12px; text-align: center; }

/* Le défilement de la page passe derrière la fenêtre sur iOS si on ne le fige
   pas : on le coupe tant que le paiement est ouvert. */
body.paie-bloque { overflow: hidden; }

.checkout-erreur {
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid #ff6b6b;
  border-radius: 12px;
  background: rgba(255, 107, 107, 0.09);
  color: #ffb4b4;
  font-size: 14px;
  line-height: 1.55;
}
/* La sortie de secours après un échec : elle doit être vue, pas cherchée. */
.checkout-sortie {
  display: block;
  width: 100%;
  margin-top: 14px;
  text-align: center;
}

.paie-secours {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.paie-secours a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.paie-secours a:hover { color: var(--text); }

/* Le bouton suit la grille de près : la mention s'intercale sans creuser. */

/* ============================================================
   ÉCRANS DE QUESTION · plus d'air
   Cases hautes avec un repère carré à gauche, comme une liste
   d'options d'application, au lieu de lignes serrées.
   ============================================================ */

.options { gap: 13px; margin-top: 30px; }

/* Le repère à gauche donne le rythme visuel : sans lui, une case sans
   sous-titre n'est plus qu'une ligne de texte dans un cadre. */
.option:not(.option-illu):not(.option-check) {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  min-height: 68px;
  border-radius: 14px;
}
/* Repère vide tant que rien n'est choisi : aucun fond, un simple contour
   discret. Un carré rempli se lisait comme une case déjà cochée. */
.option:not(.option-illu):not(.option-check)::before {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: none;
  transition: border-color .16s, background .16s;
}
.option:not(.option-illu):not(.option-check):hover::before { border-color: var(--line-3); }

/* Choisi : le repère se remplit et porte une vraie coche. */
.option:not(.option-illu):not(.option-check).selected::before {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

/* La réponse libre garde son style pointillé mais suit la même hauteur. */
.option-autre:not(.option-check) { min-height: 68px; }

.option-label { font-size: 16.5px; }

/* Le titre respire davantage au-dessus de la liste. */
.stage-title-q { margin-bottom: 4px; }

@media (max-width: 620px) {
  .option:not(.option-illu):not(.option-check) { padding: 16px 18px; gap: 13px; min-height: 62px; }
  .option:not(.option-illu):not(.option-check)::before { width: 36px; height: 36px; }
}

/* Solde de vidéos. */
.quota {
  margin-bottom: 16px;
  padding: 11px 15px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--surface);
  font-size: 13.5px;
  color: var(--muted);
}
.quota strong { color: var(--text); font-size: 15px; }
.quota-libre { border-color: #32d74b; background: rgba(50, 215, 75, 0.08); color: var(--text-2); }
.quota-libre strong { color: #32d74b; }
.quota-vide { border-color: var(--accent); background: var(--accent-film); color: var(--text-2); }
.quota-vide .btn-ghost { padding: 0; margin-left: 6px; }

/* ---------- Plan jour par jour (formule annuelle) ---------- */

.jours-intro { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.jours-groupe { margin-bottom: 22px; }
.jours-titre {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.jours { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jour {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.jour-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.jour-t { font-weight: 600; font-size: 15px; margin-bottom: 3px; }
.jour-a { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.jour-fait {
  margin-top: 6px;
  padding-left: 17px;
  position: relative;
  font-size: 12.5px;
  color: var(--muted);
}
.jour-fait::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 4px; height: 7px;
  border: solid #32d74b;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg);
}

.jours-verrou {
  padding: 26px 24px;
  border: 1px dashed var(--line-2);
  border-radius: 16px;
  background: var(--surface);
  max-width: 640px;
}
.jours-verrou p { line-height: 1.65; color: var(--text-2); }
.jours-verrou-sous {
  margin: 10px 0 18px;
  font-size: 13px;
  color: #32d74b !important;
  font-weight: 600;
}

/* Écran des étapes : tout doit tenir avec le bouton visible sans défiler. */
.parcours .stage-title-q { font-size: clamp(1.5rem, 3.2vw, 1.95rem); line-height: 1.1; }
.parcours .etapes { margin-top: 20px; gap: 9px; max-width: 620px; }
.parcours .etape { padding: 13px 16px; gap: 13px; border-radius: 13px; }
.parcours .etape::after { height: 9px; left: 36px; }
.parcours .etape-num { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
.parcours .etape-corps h2 { font-size: 1rem; margin-bottom: 3px; }
.parcours .etape-corps p { font-size: 13.2px; line-height: 1.45; }
.parcours .etape-preuve { margin-top: 7px; padding: 3px 8px; font-size: 10px; }
.parcours .btn-lg { padding: 13px 24px; font-size: 15px; }
.parcours.stage { padding-top: 26px; }

/* Fin de phrase animée du sous-titre. */
.lede-suite { display: inline; white-space: pre-wrap; }
#lede-mot { color: var(--text); font-weight: 600; }
.lede-curseur {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: var(--accent);
  animation: lede-clignote 1s steps(1) infinite;
}
@keyframes lede-clignote { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lede-curseur { display: none; } }

/* ---------- Explication « c'est quoi un SaaS » ---------- */

.saas101 { --vert: #32d74b; }
.saas-chapo { color: var(--muted); line-height: 1.6; margin-bottom: 22px; max-width: 620px; }
.saas-points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; max-width: 640px; }
.saas-points li {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  animation: etape-entre .5s cubic-bezier(.22,.8,.24,1) backwards;
  animation-delay: var(--retard, 0ms);
}
.saas-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1px solid var(--vert);
  color: var(--vert);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}
.saas-points h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.015em;
  margin-bottom: 3px;
}
.saas-points p { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

/* ---------- Avant / après : tableaux de bord de paiement ---------- */

.board {
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: #101014;
}
.board-vide { opacity: 0.62; }
.board-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.board-jour {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.board-etat {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.board-chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  margin-bottom: 12px;
}
.board-chiffres span { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.board-chiffres em { font-style: normal; font-size: 10px; color: var(--muted); }
.board-chiffres strong {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.025em;
}
.board-courbe { width: 100%; height: 44px; display: block; }
.board-trait { fill: none; stroke: #7f6bff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.board-aire { fill: rgba(127, 107, 255, 0.13); stroke: none; }
.board-vide .board-trait { stroke: var(--line-3); }
.board-vide .board-aire { fill: none; }

/* La flèche dit d'où vient la différence. */
.fiche-panneaux .fiche-fleche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  transform: none;
}
.fiche-panneaux .fiche-fleche svg { width: 26px; height: 26px; }
.fiche-panneaux .fiche-fleche em {
  font-style: normal;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .fiche-panneaux .fiche-fleche svg { transform: rotate(90deg); }
}

/* Les trois avant/après doivent tenir à l'écran avec le bouton : sinon on croit
   que la page s'arrête là. Tout est resserré, rien n'est retiré. */
.resultats .stage-title-q { font-size: clamp(1.35rem, 2.8vw, 1.7rem); }
.resultats .stage-lede { margin-top: 6px; font-size: 14px; }
.resultats .rail-resultats { margin-top: 16px; gap: 12px; padding-bottom: 8px; }
.resultats .fiche-resultat { flex-basis: 264px; padding: 16px 16px 13px; }
.resultats .fiche-nom { font-size: 14.5px; }
.resultats .fiche-contexte { margin-top: 2px; font-size: 12.5px; }
.resultats .fiche-badge { padding: 3px 7px; font-size: 10px; }
.resultats .fiche-panneaux { gap: 9px; margin: 12px 0 8px; }
.resultats .fiche-duree { margin-top: 9px; font-size: 12px; }
.resultats .board { padding: 10px 12px; border-radius: 12px; }
.resultats .board-tete { margin-bottom: 8px; }
.resultats .board-jour { font-size: 13.5px; }
.resultats .board-chiffres { padding: 9px 3px; gap: 6px; margin-bottom: 8px; }
.resultats .board-chiffres strong { font-size: .98rem; }
.resultats .board-courbe { height: 36px; }
.resultats .resultats-mention { margin: 10px 0 14px; font-size: 12.5px; }

/* Trois chiffres côte à côte demandent une largeur minimale : en dessous, les
   libellés sortaient de leur colonne et se chevauchaient. On donne la place aux
   cartes, on plafonne la colonne de la flèche, et la grille des chiffres passe
   d'elle-même à moins de colonnes plutôt que de déborder. */
.resultats .fiche-resultat { flex: 0 0 min(520px, 100%); }
.resultats .fiche-panneaux { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.resultats .fiche-panneaux .fiche-fleche { max-width: 58px; }
.resultats .fiche-panneaux .fiche-fleche em { white-space: normal; text-align: center; }
.resultats .board-chiffres {
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  padding: 9px 6px;
}
.resultats .board-chiffres em { overflow-wrap: anywhere; }

/* Trop étroit pour deux tableaux de bord côte à côte : on les empile. */
@media (max-width: 900px) {
  .resultats .fiche-panneaux { grid-template-columns: minmax(0, 1fr); }
  .resultats .fiche-panneaux .fiche-fleche { max-width: none; justify-self: center; }
}

/* L'écran des étapes doit tenir en entier, bouton compris : sinon on croit
   que la page s'arrête là et on ne défile pas. */
.parcours .stage-title-q { font-size: clamp(1.35rem, 2.8vw, 1.7rem); }
.parcours .etapes { margin-top: 16px; gap: 8px; }
.parcours .etape { padding: 11px 14px; gap: 11px; }
.parcours .etape::after { height: 8px; left: 33px; }
.parcours .etape-num { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.parcours .etape-corps h2 { font-size: 0.94rem; }
.parcours .etape-corps p { font-size: 12.5px; line-height: 1.42; }
.parcours .etape-preuve { margin-top: 6px; padding: 2px 7px; font-size: 9.5px; }
.parcours.stage { padding-top: 20px; }

/* Bouton de paiement en pilule : arrondi complet, comme sur la maquette. */
.formules .btn-primary,
.paiement .btn-primary,
.abo .btn-primary { border-radius: 999px; }
.formules .btn-primary::before { border-radius: 999px; }
/* La formule de base garde une pastille neutre : elle décrit, elle ne vend pas
   un supplément. */
.plan-tag-sobre { color: var(--muted) !important; border-color: var(--line-2) !important; background: none !important; }
/* Le libellé de la formule d'un mois tient en une ligne : la carte a la place,
   et une pastille cassée sur un seul mot se voit. Sur petit écran, elle revient
   à la ligne plutôt que de déborder. */
.plan-tag-sobre { white-space: nowrap; max-width: none; }

/* Le nombre de lignes est fixé par formule, pas laissé à la largeur de la
   fenêtre : sinon la même page montre une ligne chez l'un et deux chez l'autre.
   L'offre 3 mois tient sur une ligne, l'annuelle sur deux. */
.plan-tag-une { white-space: nowrap; max-width: none; }
/* Pas de `nowrap` ici : il forçait la carte à s'élargir et poussait toute la
   page. Bornée à la largeur de la colonne, la pastille se contente de ce que
   son texte demande · et 73 caractères tiennent sur une ligne dans les 400 px
   disponibles, sans rien contraindre. */
/* Un demi-point de moins que les deux autres pastilles : c'est ce qui permet à
   la plus longue de tenir sur une ligne sans rien retirer de son contenu. */
.plan-tag-deux { max-width: 100%; font-size: 9.5px; }

/* Trop étroit pour les tenir : on rend la main au navigateur plutôt que de
   laisser le texte déborder de la carte. */
@media (max-width: 540px) {
  .plan-tag-sobre, .plan-tag-une { white-space: normal; max-width: 100%; }
  /* Le libellé annuel est le plus long : à 10 px il retombe sur trois lignes
     dans la largeur d'un téléphone. Un demi-point de moins suffit à le tenir
     sur deux, sans le rendre moins lisible que le reste de la carte. */
  .plan-tag-deux { max-width: 100%; font-size: 9.5px; letter-spacing: -0.005em; }
}

/* Monogramme d'avis : teinte propre à chaque personne, dérivée de son nom. */
.avis-mono {
  background:
    radial-gradient(120% 120% at 30% 20%,
      hsl(var(--teinte) 62% 58% / 0.95),
      hsl(calc(var(--teinte) + 38) 55% 34% / 0.95));
  border: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.avis-carte { align-items: center; }
.avis-avatar { width: 42px; height: 42px; }

/* Explication SaaS : version courte, tout doit tenir sans défiler. */
.saas101 .stage-title-q { font-size: clamp(1.5rem, 3.2vw, 1.95rem); }
.saas-chapo { font-size: 15px; margin-bottom: 18px; }
.saas-points { gap: 8px; margin-bottom: 18px; }
.saas-points li { padding: 12px 14px; gap: 12px; }
.saas-points h2 { font-size: 14.5px; }
.saas-points p { font-size: 13px; line-height: 1.45; }
.saas-num { width: 24px; height: 24px; font-size: 11px; }

  margin-bottom: 22px;
  padding: 15px 17px;
  border: 1px solid var(--vert);
  border-radius: 13px;
  background: rgba(50, 215, 75, 0.07);
  max-width: 640px;
}
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--vert);
  margin-bottom: 5px;
}
/* Mention de scénario ramenée à une ligne : elle informe sans occuper l'écran. */
.hypothese-courte {
  margin: 10px 0 16px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ============================================================
   ÉCRAN DE PROJECTION · couleur
   Trois teintes distinctes pour les sources de revenu, au lieu
   de trois nuances du même gris : on distingue les leviers d'un
   coup d'œil, et l'écran cesse d'être monochrome.
   ============================================================ */

.projection {
  --src-0: #32d74b;   /* le produit lui-même */
  --src-1: #7aa2f7;   /* premier levier */
  --src-2: #e879c8;   /* second levier */
}

.projection .proj-carte {
  border-color: rgba(50, 215, 75, 0.35);
  background:
    radial-gradient(560px 240px at 15% -30%, rgba(50, 215, 75, 0.16), transparent 68%),
    radial-gradient(420px 220px at 95% 120%, rgba(122, 162, 247, 0.12), transparent 70%),
    var(--surface);
}
/* Les montants restent en blanc : un chiffre coloré se lit moins bien, et la
   couleur sert ici à distinguer les sources, pas à décorer les nombres. */

.projection .proj-barre { gap: 3px; }
.projection .seg-0 { background: var(--src-0); }
.projection .seg-1 { background: var(--src-1); }
.projection .seg-2 { background: var(--src-2); }
.projection .pastille-0 { background: var(--src-0); }
.projection .pastille-1 { background: var(--src-1); }
.projection .pastille-2 { background: var(--src-2); }

/* Chaque ligne de source prend la couleur de son levier. */
.projection .proj-ligne { border-left: 2px solid var(--line-2); }
.projection .proj-lignes .proj-ligne:nth-child(1) { border-left-color: var(--src-0); }
.projection .proj-lignes .proj-ligne:nth-child(2) { border-left-color: var(--src-1); }
.projection .proj-lignes .proj-ligne:nth-child(3) { border-left-color: var(--src-2); }
.projection .proj-plage { color: var(--text); font-weight: 600; }

.projection .proj-h2 { color: var(--text); }

/* ---------- Fiche d'une idée ---------- */

.detail-corps {
  margin-top: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
  padding: 26px 28px;
}
.detail-corps .idea-facts { margin-top: 0; }

.detail-blocs {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.detail-cta {
  margin-top: 28px;
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--accent);
  border-radius: var(--r);
  padding: 24px 28px;
}
.detail-cta h2 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 8px; }
.detail-cta p { font-size: 14.5px; color: var(--text-2); margin-bottom: 18px; }

@media (max-width: 760px) {
  .detail-blocs { grid-template-columns: 1fr; }
  .detail-corps, .detail-cta { padding: 20px 18px; }
}

/* ---------- Le cap : ses mots, puis ses chiffres ---------- */


/* Captures jointes à un avis : deux vignettes côte à côte, avant / après. */
.avis-preuves {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.avis-preuve { margin: 0; }
.avis-preuve img {
  width: 100%;
  display: block;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #0a0a0d;
}
.avis-preuve figcaption {
  margin-top: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

@media (max-width: 620px) {
  /* Deux vignettes côte à côte deviennent illisibles sur un téléphone :
     on les empile, chacune sur toute la largeur. */
  .avis-preuves { grid-template-columns: 1fr; }
}

/* L'avis affiché pendant le calcul : il occupe l'attente sans la masquer. */
.calcul-avis {
  margin: 30px auto 0;
  max-width: 520px;
  text-align: left;
}
.calcul-avis-titre {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}

/* Promesse posée juste après les chiffres de l'objectif : on peut commencer
   aujourd'hui, et la garantie est reprise mot pour mot depuis GARANTIE · pas
   réécrite ici, pour qu'elle ne puisse pas diverger de /remboursement. */
.cap-promesse {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  max-width: 640px;
}
.cap-promesse-titre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.cap-promesse-texte { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.cap-promesse-garantie {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.5;
}
.cap-promesse-sceau {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.cap-promesse-sceau svg { width: 17px; height: 17px; }
.cap-promesse-cond { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-3); }


/* Rappel de la garantie juste sous le bouton de la page de tarifs. */
.rappel-garantie {
  margin: 14px auto 0;
  max-width: 520px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-2);
}
.rappel-garantie strong { color: var(--text); }
.rappel-sceau {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--vert, var(--accent));
  color: var(--vert, var(--accent));
}
.rappel-sceau svg { width: 15px; height: 15px; }
.rappel-cond { display: block; margin-top: 2px; font-size: 12px; color: var(--text-3); }

@media (max-width: 620px) {
  /* Les captures avant/après tombaient sous la ligne de flottaison : elles sont
     le cœur de l'attente, elles passent donc au-dessus de la citation, et tout
     l'écran remonte. Sur grand écran l'ordre d'origine est conservé. */
  .calcul.stage-center { padding-top: 30px; }
  .calcul .stage-title-q { font-size: clamp(1.3rem, 6vw, 1.6rem); }
  .calcul .stage-lede { font-size: 14px; }
  .calcul .chargement { margin-top: 18px; }
  .calcul .calcul-etat { margin-top: 12px; }
  .calcul-avis { margin-top: 18px; }
  .calcul-avis .avis-carte > div { display: flex; flex-direction: column; }
  .calcul-avis .avis-preuves { order: -1; margin-top: 0; margin-bottom: 10px; }
}

/* L'extension complète le nom sans lui voler la vedette. */
.brand-tld { color: var(--text-3); font-weight: 600; }

/* ---------- Atelier : barre latérale ---------- */

.atelier-corps {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.atelier-rail {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.rail-lien {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.rail-lien:hover { color: var(--text); background: var(--bg-2); }
.rail-on, .rail-on:hover { background: var(--action); color: #0a0a0d; }
.rail-icone { flex: none; display: grid; place-items: center; width: 18px; height: 18px; }
.rail-icone svg { width: 18px; height: 18px; }
.rail-mot { flex: 1; min-width: 0; }
.rail-verrou { opacity: 0.55; }
.rail-cadenas { flex: none; font-size: 11px; }

/* Sur écran étroit la colonne devient une rangée : elle garde sa place en haut
   du contenu au lieu de manger la largeur qui reste. */
@media (max-width: 900px) {
  .atelier-corps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .atelier-rail {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
  }
  .rail-lien { border-radius: 999px; padding: 9px 14px; white-space: nowrap; }
  .rail-icone { display: none; }
}

/* Attente de génération : la barre fait des allers-retours plutôt que d'avancer
   vers un pourcentage qu'on ne connaît pas. */
.gen-attente { margin-top: 26px; text-align: center; }
.gen-attente .chargement { margin: 0 auto; }
.chargement-va-et-vient {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  animation: va-et-vient 1.25s ease-in-out infinite;
}
@keyframes va-et-vient {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(370%); }
}
.gen-attente-texte { margin-top: 16px; font-size: 15px; color: var(--text); }
.gen-attente-sous { margin-top: 5px; font-size: 13px; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) {
  .chargement-va-et-vient { animation: none; width: 100%; }
}

/* ---------- Studio vidéo ---------- */

.studio {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 6, 9, 0.82);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.studio-ouvert { opacity: 1; }
.studio-carte {
  width: min(460px, 100%);
  padding: 30px 30px 24px;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  text-align: center;
  transform: translateY(10px) scale(0.985);
  transition: transform 0.32s cubic-bezier(.2,.8,.3,1);
}
.studio-ouvert .studio-carte { transform: none; }

.studio-anneau { position: relative; width: 108px; height: 108px; margin: 0 auto 18px; }
.studio-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.studio-piste { fill: none; stroke: var(--line-2); stroke-width: 6; }
.studio-jauge {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.25s linear;
}
.studio-pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.03em;
}
.studio-pct i { font-style: normal; font-size: 14px; color: var(--text-3); margin-left: 1px; }

.studio-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.studio-titre {
  margin-top: 7px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.studio-etapes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 2px; text-align: left; }
.studio-etape {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 10px;
  opacity: 0.4;
  transition: opacity 0.3s ease, background 0.3s ease;
}
.studio-encours { opacity: 1; background: var(--bg-3); }
.studio-faite { opacity: 0.72; }
.studio-puce {
  flex: none;
  display: grid;
  place-items: center;
  width: 19px; height: 19px;
  margin-top: 1px;
  border: 1px solid var(--line-3);
  border-radius: 50%;
  color: transparent;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.studio-puce svg { width: 11px; height: 11px; }
.studio-encours .studio-puce { border-color: var(--accent); }
.studio-faite .studio-puce { border-color: var(--accent); background: var(--accent); color: #0a0a0d; }
.studio-mots { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.studio-mots strong { font-size: 14px; font-weight: 600; }
.studio-mots em { font-style: normal; font-size: 12px; color: var(--text-3); }

.studio-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-3);
}

@media (prefers-reduced-motion: reduce) {
  .studio, .studio-carte, .studio-jauge, .studio-etape { transition: none; }
}

/* Bouton Google et séparateur, au-dessus du formulaire classique. */
.ou-google { margin-top: 26px; max-width: 380px; }
.google-bouton { display: flex; justify-content: center; min-height: 44px; }
.ou-trait {
  position: relative;
  margin: 18px 0 2px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ou-trait::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--line);
}
.ou-trait span { position: relative; padding: 0 12px; background: var(--bg); }

/* ---------- Écran de promesse ---------- */

.promesse-sceau {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 22px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--accent-film);
}
.promesse-sceau svg { width: 28px; height: 28px; }
.promesse-phrase {
  margin-top: 18px;
  max-width: 620px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-2);
  text-wrap: balance;
}
.promesse-phrase strong { color: var(--text); font-weight: 700; }
.promesse-detail {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  max-width: 620px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-3);
}

/* ---------- Bandeau des outils ---------- */

.outils { margin-top: 46px; min-width: 0; max-width: 100%; }
.outils-titre {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  margin-bottom: 16px;
}
/* min-width: 0 est indispensable : sans lui, la largeur minimale du ruban
   pousse la colonne qui le contient et fait déborder toute la page sur
   téléphone. Les bords s'estompent pour que le défilement paraisse continu. */
.outils-piste {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* L'écart est porté par chaque nom, pas par `gap` : la liste fait alors très
   exactement deux fois un tour, et -50 % retombe pile sur le doublon. */
.outils-file {
  display: flex;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: outils-defile 26s linear infinite;
}
.outils-file li {
  padding-right: 56px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.03em;
  color: var(--text-3);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.outils-piste:hover .outils-file { animation-play-state: paused; }
.outils-file li:hover { color: var(--text); }
@keyframes outils-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Lisible par les lecteurs d'écran, invisible à l'œil : la piste est décorative. */
.outils-lecture {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .outils-file { animation: none; }
}
@media (max-width: 620px) {
  .outils { margin-top: 34px; }
  .outils-file li { padding-right: 34px; font-size: 17px; }
}

/* ---------- Écran d'engagement ---------- */

.serment-texte {
  margin: 22px auto 0;
  max-width: 34ch;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text-2);
  text-wrap: balance;
}

.empreinte {
  position: relative;
  display: block;
  width: 132px;
  height: 132px;
  margin: 34px auto 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;              /* l'appui ne doit pas faire défiler la page */
  /* Un appui long sélectionne le texte, ou ouvre le menu « copier » sur mobile :
     les deux cassent le geste en plein milieu. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.18s ease;
}
.empreinte-active { transform: scale(0.96); }
.empreinte-signee { transform: scale(1.04); }

.empreinte-anneau { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.empreinte-piste { fill: none; stroke: var(--line-2); stroke-width: 3; }
.empreinte-jauge {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.05s linear;
}

.empreinte-dessin,
.empreinte-remplie {
  position: absolute;
  inset: 26px;
  display: grid;
  place-items: center;
}
.empreinte-dessin svg,
.empreinte-remplie svg { width: 100%; height: 100%; }
/* Le calque coloré se dévoile du bas vers le haut au fil de l'appui. */
.empreinte-remplie {
  color: var(--text);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.05s linear;
}
.empreinte-signee .empreinte-remplie { color: var(--accent); }

.serment .serment-texte, .serment-aide { user-select: none; -webkit-user-select: none; }
.serment-aide {
  margin-top: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Le compteur porte son signe sans que l'animation ait à le gérer. */
.compteur-signe { color: var(--text-3); margin-right: 2px; }
.preuve-note {
  margin: 12px auto 0;
  max-width: 34ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-3);
}

@media (prefers-reduced-motion: reduce) {
  .empreinte, .empreinte-jauge, .empreinte-remplie { transition: none; }
}

/* Pourcentage du calcul de projection. */
.calcul-pct {
  margin-top: 14px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1;
}
.calcul-pct i { font-style: normal; font-size: 15px; color: var(--text-3); margin-left: 1px; }

/* La promesse s'installe désormais au bas de l'écran des étapes, qui est déjà
   dense : elle y prend la même place que les cartes qui la précèdent. */
.parcours .cap-promesse { margin-top: 20px; padding: 16px 18px; }
.parcours .cap-promesse-titre { font-size: clamp(1.1rem, 2.2vw, 1.28rem); }
.parcours .cap-promesse-texte { margin-top: 6px; font-size: 13.5px; }
.parcours .cap-promesse-garantie { margin-top: 12px; padding-top: 12px; font-size: 13.5px; }

/* ---------- En-tête des pages internes ----------
   La règle qui masque le mot sous 980 px vise la page d'accueil, dont la barre
   porte trois boutons. Ici il n'y en a qu'un ou deux : le nom a la place, et
   c'est dommage de s'en priver · c'est la seule marque visible de la page. */
.lien-court { display: none; }

@media (max-width: 980px) {
  .site-head-app .brand-mot { display: inline; font-size: 17px; }
  .site-head-app .lien-long { display: none; }
  .site-head-app .lien-court { display: inline; }
}
@media (max-width: 380px) {
  /* Vraiment étroit : le logo reprend la main. */
  .site-head-app .brand-mot { display: none; }
}

/* ---------- Studio : maquette du site en construction ---------- */

.studio-large { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; }
.studio-large .studio-anneau { width: 84px; height: 84px; margin-bottom: 14px; }
.studio-large .studio-pct { font-size: 21px; }
.studio-large .studio-etapes { gap: 0; }
.studio-large .studio-etape { padding: 6px 10px; }
.studio-large .studio-mots strong { font-size: 13.5px; }
.studio-large .studio-mots em { font-size: 11.5px; }

/* La marque, en haut de la carte. Même traitement que dans l'en-tête du site :
   l'extension en retrait, pour qu'elle complète sans voler la vedette. */
.studio-nom-tld { color: var(--text-3); font-weight: 600; }
.studio-nom {
  margin: 0 0 18px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.studio-maquette {
  margin: 0 0 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0c0c11;
  overflow: hidden;
}
.studio-maquette svg { display: block; width: 100%; height: auto; }

.mq-cadre { fill: none; stroke: var(--line-2); stroke-width: 1; }
.mq-trait { stroke: var(--line-2); stroke-width: 0.8; }
.mq-feu { fill: var(--line-3); }
.mq-url { fill: var(--bg-3); }

/* Chaque bloc attend son étape, puis se pose. */
.mq-bloc {
  fill: var(--line-2);
  opacity: 0;
  transform: translateY(4px);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.2, 0.8, 0.3, 1), fill 0.42s ease;
}
.mq-on { opacity: 1; transform: none; }
.mq-vif.mq-on { fill: var(--accent); }


/* Un balai de lumière passe en continu : le chantier a l'air actif même entre
   deux blocs. */
.mq-balai {
  fill: url(#rien);
  fill: rgba(255, 255, 255, 0.05);
  animation: mq-balaye 2.6s linear infinite;
}
@keyframes mq-balaye {
  from { transform: translateX(-30px); }
  to { transform: translateX(200px); }
}

@media (prefers-reduced-motion: reduce) {
  .mq-bloc { transition: none; }
  .mq-balai { animation: none; opacity: 0; }
}

/* ---------- Fiche d'idée resserrée ---------- */

.detail .mesures { margin-top: 22px; }

/* L'action de l'écran : centrée, détachée du texte, et de la taille de son
   importance. Le lien secondaire reste dessous, volontairement discret. */
.detail-action {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.btn-geant {
  width: 100%;
  padding: 22px 26px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 999px;
  justify-content: center;
}
.btn-geant .btn-arrow { transition: transform 0.18s ease; }
.btn-geant:hover .btn-arrow { transform: translateX(4px); }
.detail-second { margin-top: 18px; }

/* Fiche d'idée : chiffres et texte à gauche, téléphone à droite. */
.detail-grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 30px;
  align-items: start;
  margin-top: 24px;
}
.detail-colonne { min-width: 0; display: grid; gap: 20px; }
.detail-colonne .mesures { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.scene-tel-idee { margin: 0; width: 100%; }
.scene-tel-idee .tel { transform: none; }
.scene-tel-idee .tel-legende { text-align: center; }

@media (max-width: 860px) {
  .detail-grille { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .scene-tel-idee { margin: 0 auto; max-width: 300px; }
}

/* Colonne de droite : l'aperçu du site, puis le téléphone des paiements.
   Le bouton, lui, remonte dans la colonne de gauche, à leur hauteur. */
.detail-visuels { display: grid; gap: 18px; }
.demo-site {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0c0c11;
}
.demo-site .studio-maquette { margin: 0; padding: 0; border: 0; background: none; }
.demo-legende {
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}
.demo-site .mq-balai { animation: none; opacity: 0; }

@media (max-width: 860px) {
  .detail-visuels { max-width: 340px; margin: 0 auto; }
}

.studio-large .studio-titre { margin-top: 4px; }

/* ---------- Chantier : construction du site, plein écran ---------- */

.chantier {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 26px clamp(16px, 4vw, 44px) 24px;
  background: radial-gradient(120% 90% at 50% 0%, #14141c 0%, #08080b 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ch-ouvert { opacity: 1; }

.ch-marque {
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: -0.045em;
  line-height: 1;
  background: linear-gradient(180deg, #fff 30%, #9aa4b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ch-marque-entre 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
.ch-marque span { -webkit-text-fill-color: var(--text-3); color: var(--text-3); font-weight: 700; }
@keyframes ch-marque-entre {
  from { opacity: 0; transform: translateY(-14px) scale(0.94); letter-spacing: 0.06em; }
}

.ch-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  min-height: 0;
  align-items: stretch;
}

/* --- La fenêtre du navigateur --- */
.ch-fenetre {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: #0b0b10;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}
.ch-barre {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2);
  background: #101017;
}
.ch-barre i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-3); }
.ch-url {
  flex: 1;
  margin-left: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-3);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-3);
}
.ch-url b { font-weight: 400; }
.ch-url b::after {
  content: "";
  display: inline-block;
  width: 1px; height: 11px;
  margin-left: 2px;
  background: var(--accent);
  vertical-align: -1px;
  animation: ch-curseur 0.9s steps(1) infinite;
}
@keyframes ch-curseur { 50% { opacity: 0; } }

.ch-page { flex: 1; min-height: 0; padding: clamp(14px, 2.4vw, 26px); display: grid; align-content: start; gap: clamp(12px, 1.8vw, 20px); }

/* Chaque bloc attend son étape. */
.ch-page [data-p], .ch-pied[data-p] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1),
              background 0.6s ease, color 0.6s ease;
}
.ch-on { opacity: 1 !important; transform: none !important; }

.ch-nav { display: flex; align-items: center; gap: 10px; }
.ch-nav i { width: clamp(28px, 4vw, 44px); height: 6px; border-radius: 3px; background: var(--line-2); }
.ch-nav span { margin-left: auto; width: clamp(52px, 7vw, 78px); height: 20px; border-radius: 999px; background: var(--line-2); }

.ch-titre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1;
}
.ch-lede { font-size: clamp(13px, 1.5vw, 17px); color: var(--text-3); }
.ch-actions { display: flex; gap: 10px; margin-top: 4px; }
.ch-cta, .ch-cta2 {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 600;
}
.ch-cta { background: var(--line-2); color: var(--text-3); }
.ch-cta2 { border: 1px solid var(--line-2); color: var(--text-3); }

.ch-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 12px; }
.ch-carte { padding: 14px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 8px; align-content: start; }
.ch-form i { height: 10px; border-radius: 5px; background: var(--line-2); }
.ch-form span { height: 22px; border-radius: 999px; background: var(--line-2); }
.ch-prix b { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.6rem); }
.ch-prix em { font-style: normal; font-size: 11px; color: var(--text-3); }
.ch-prix span { height: 20px; border-radius: 999px; background: var(--line-2); }

.ch-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ch-grille div { height: clamp(48px, 7vw, 82px); border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.ch-pied { display: flex; gap: 10px; }
.ch-pied i { height: 6px; border-radius: 3px; background: var(--line-2); flex: 1; }
.ch-pied i:last-child { flex: 0 0 30%; }

/* La direction artistique arrive : le site prend ses couleurs d'un coup. */
.ch-couleur .ch-cta { background: var(--accent); color: #0a0a0d; }
.ch-couleur .ch-prix { border-color: var(--accent); }
.ch-couleur .ch-prix span { background: var(--accent); }
.ch-couleur .ch-nav span { background: var(--accent); }
.ch-couleur .ch-titre { color: #fff; }

/* --- Le journal de construction --- */
.ch-journal {
  min-height: 0;
  overflow: hidden;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: #0a0a0e;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ch-ligne { animation: ch-ligne-entre 0.35s ease backwards; }
.ch-ligne::before { content: "› "; color: var(--accent); }
@keyframes ch-ligne-entre { from { opacity: 0; transform: translateX(-6px); } }

/* --- Le bas : progression --- */
.ch-bas { display: grid; gap: 10px; }
.ch-prog { height: 3px; border-radius: 2px; background: var(--bg-3); overflow: hidden; }
.ch-prog i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent); transition: width 0.15s linear; }
.ch-etat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--text-3);
}
.ch-etat b { font-family: "Space Grotesk", sans-serif; font-size: 20px; color: var(--text); letter-spacing: -0.02em; }
.ch-etat em { font-style: normal; margin-left: 6px; }

/* Fin : la fenêtre se pose et s'éclaire. */
.ch-fini .ch-fenetre {
  border-color: var(--accent);
  transform: scale(1.012);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1), border-color 0.6s ease;
}

@media (max-width: 900px) {
  .ch-scene { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 108px; }
}
@media (prefers-reduced-motion: reduce) {
  .chantier, .ch-page [data-p], .ch-ligne, .ch-fini .ch-fenetre { transition: none; animation: none; }
  .ch-url b::after { animation: none; }
}

/* Les deux actions secondaires de la fiche, côte à côte sous le bouton. */
/* Les trois actions restent sur une seule rangée : elles se lisent comme un
   ensemble, pas comme trois choix empilés. */
.detail-duo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}
.detail-duo .btn-second { padding: 15px 10px; font-size: 13.5px; }
/* Ce sont trois vraies actions, pas des liens de bas de page : elles ont un
   fond, du relief et la même hauteur que le bouton principal. */
.btn-second {
  padding: 16px 18px;
  border-radius: 999px;
  border: 1px solid var(--line-3);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  justify-content: center;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.9);
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.btn-second:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-3));
}
.btn-second:active { transform: none; }
@media (max-width: 560px) {
  /* Trop étroit pour trois de front : on empile plutôt que de couper les mots. */
  .detail-duo { grid-template-columns: 1fr; gap: 10px; }
  .detail-duo .btn-second { padding: 15px 18px; font-size: 15px; }
}

/* ---------- Écran des clippeurs ---------- */

.clip-etapes { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; max-width: 660px; }
.clip-etapes li { display: flex; gap: 14px; align-items: flex-start; }
.clip-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--accent);
}
.clip-etapes h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.clip-etapes p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.clip-accroche { margin-top: 8px; font-style: italic; color: var(--text-3) !important; }

.clip-message {
  margin-top: 28px;
  max-width: 660px;
  padding: 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--bg-1);
}
.clip-texte {
  margin: 10px 0 14px;
  padding: 14px;
  border-radius: 10px;
  background: var(--bg);
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-2);
  white-space: pre-wrap;
}
.clip-note { margin-top: 18px; max-width: 660px; font-size: 13px; line-height: 1.5; color: var(--text-3); }

/* ---------- Agent : poser une question ---------- */

.agent-form { margin-top: 24px; max-width: 620px; display: grid; gap: 12px; }
.agent-champ {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--bg-1);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}
.agent-champ:focus { outline: none; border-color: var(--accent); }
.agent-champ:disabled { opacity: 0.6; }
.agent-form .btn { justify-self: start; }

.agent-reponse {
  margin-top: 24px;
  max-width: 620px;
  padding: 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.agent-reponse p:last-child { margin-top: 10px; font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; }

.agent-secours {
  margin-top: 20px;
  max-width: 620px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.agent-secours p { font-size: 14px; color: var(--text-2); margin-bottom: 12px; }

/* Les marques concernées par une action, sous son bouton. */
.marques {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 6px;
  margin-top: 9px;
}
.marques i {
  font-style: normal;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  white-space: nowrap;
}
.detail-choix { display: grid; align-content: start; }
.detail-choix .marques { margin-top: 8px; }

/* Petit jeton monétaire devant le libellé d'un bouton. */
.btn-jeton {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  flex: none;
}

/* ---------- Cadrage : trois questions avant l'idée ---------- */



.cad-choix {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  max-width: 720px;
}
.cad-carte {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 20px 18px;
  border: 1px solid var(--line-2);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
  animation: cad-entre 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) var(--retard, 0ms) backwards;
}
@keyframes cad-entre { from { opacity: 0; transform: translateY(12px); } }
.cad-carte:hover { transform: translateY(-3px); border-color: var(--line-3); }
.cad-carte-on {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
}
.cad-carte-on::after {
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.cad-val {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.cad-sub { font-size: 13px; line-height: 1.45; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  .cad-carte { animation: none; transition: none; }
}

/* ---------- Onglet support ---------- */

.support { display: grid; gap: 20px; max-width: 640px; }

.support-carte {
  padding: 30px 28px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.support-bulle {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: 14px;
  border: 1px solid var(--accent);
  background: var(--accent-film);
  color: var(--accent);
}
.support-bulle svg { width: 23px; height: 23px; }
.support-titre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: -0.03em;
}
.support-texte { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.support-carte .btn { margin-top: 20px; }

.support-liens { display: grid; gap: 10px; }
.support-lien {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.support-lien:hover { border-color: var(--line-3); transform: translateY(-2px); }
.support-lien strong { font-size: 15px; font-weight: 600; }
.support-lien em { font-style: normal; font-size: 13px; color: var(--text-3); }

/* Curseur de frappe sur le titre et l'accroche du site en construction. */
.ch-tape::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.82em;
  margin-left: 3px;
  background: var(--accent);
  vertical-align: -0.08em;
  animation: ch-curseur 0.8s steps(1) infinite;
}
.ch-titre, .ch-lede { min-height: 1em; }

/* Chaque bloc « charge » un instant avant de se poser : une bande claire le
   traverse une fois, comme un squelette qui se remplit. */
.ch-page .ch-on { animation: ch-pose 0.55s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes ch-pose {
  from { opacity: 0; transform: translateY(10px) scale(0.985); filter: brightness(1.6); }
}

/* Balayage de la fenêtre à chaque nouvelle étape. */
.ch-fenetre { position: relative; }
.ch-fenetre::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.07) 50%, transparent 58%);
  transform: translateX(-100%);
  opacity: 0;
}
.ch-balaye .ch-fenetre::after { animation: ch-balayage 0.75s ease-out; }
@keyframes ch-balayage {
  from { transform: translateX(-100%); opacity: 1; }
  to { transform: translateX(100%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ch-marque, .ch-page .ch-on, .ch-fenetre::after { animation: none; }
  .ch-tape::after { animation: none; }
}


/* ---------- Cadrage : scène plein cadre ----------
   Une question par écran, au centre, avec un grand numéro en filigrane. Le but
   est qu'on ait envie de répondre, pas qu'on ait l'impression de remplir un
   formulaire. */

.cadrage {
  position: relative;
  min-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  padding: 18px 0 40px;
  isolation: isolate;
}
.cadrage::before {
  content: "";
  position: absolute;
  inset: -40px -60px;
  z-index: -2;
  background: radial-gradient(60% 55% at 50% 42%, rgba(174, 185, 204, 0.09), transparent 70%);
  pointer-events: none;
}

/* Le numéro de l'étape, immense et presque effacé, derrière tout le reste. */
.cad-fond-num {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -54%);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(14rem, 38vw, 26rem);
  letter-spacing: -0.08em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.05);
  pointer-events: none;
  user-select: none;
  animation: cad-num 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
@keyframes cad-num { from { opacity: 0; transform: translate(-50%, -48%) scale(0.92); } }

.cad-haut { display: flex; align-items: center; gap: 14px; }
.cad-retour {
  width: 38px; height: 38px;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--bg-1);
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.cad-retour:hover { border-color: var(--line-3); color: var(--text); }
.cad-pour {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--text-3);
}
.cad-pour strong { color: var(--text); font-weight: 600; }
.cad-compte {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--text);
}
.cad-compte i { font-style: normal; color: var(--text-3); }

/* Barre de progression en segments. */
.cad-barre { display: flex; gap: 6px; margin-top: 16px; }
.cad-barre i {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition: background 0.4s ease;
}
.cad-barre .cad-fait { background: var(--text-3); }
.cad-barre .cad-ici {
  background: linear-gradient(90deg, var(--accent), rgba(174, 185, 204, 0.35));
  animation: cad-segment 0.6s ease backwards;
}
@keyframes cad-segment { from { transform: scaleX(0); transform-origin: left; } }

/* Le cœur de la scène, centré. */
.cad-coeur {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 34px;
  animation: cad-monte 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
}
@keyframes cad-monte { from { opacity: 0; transform: translateY(18px); } }

.cad-icone {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 20px;
  border: 1px solid rgba(174, 185, 204, 0.4);
  background: radial-gradient(circle at 30% 25%, rgba(174, 185, 204, 0.22), rgba(174, 185, 204, 0.04));
  color: var(--accent);
  box-shadow: 0 0 0 8px rgba(174, 185, 204, 0.04), 0 18px 40px -18px rgba(174, 185, 204, 0.5);
}
.cad-icone svg { width: 30px; height: 30px; }

.cad-kicker {
  margin-top: 20px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.cad-titre {
  margin-top: 10px;
  max-width: 20ch;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.cad-titre em { font-style: normal; color: var(--text-3); }

/* Cartes de réponse. */
.cad-choix {
  margin-top: 32px;
  width: 100%;
  max-width: 760px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cad-choix-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cad-choix-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }

.cad-carte {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 22px 20px 20px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  animation: cad-entre 0.46s cubic-bezier(0.2, 0.8, 0.3, 1) var(--retard, 0ms) backwards;
}
.cad-carte::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 0% 0%, rgba(174, 185, 204, 0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cad-carte:hover {
  transform: translateY(-4px);
  border-color: rgba(174, 185, 204, 0.55);
  box-shadow: 0 20px 40px -22px rgba(174, 185, 204, 0.45);
}
.cad-carte:hover::before, .cad-carte-on::before { opacity: 1; }
.cad-carte-on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 20px 40px -22px rgba(174, 185, 204, 0.55);
}
.cad-touche {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-3);
}
.cad-carte-on .cad-touche { border-color: var(--accent); background: var(--accent); color: #0a0a0d; }
.cad-val {
  position: relative;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  padding-right: 28px;
}
.cad-sub { position: relative; font-size: 13px; line-height: 1.45; color: var(--text-3); }

.cad-astuce { margin-top: 18px; font-size: 12px; color: var(--text-3); }
.cad-astuce b {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  padding: 0 4px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-2);
}

/* Le curseur de l'objectif : un montant énorme qui suit le doigt. */
.cad-scene-curseur { margin-top: 26px; width: 100%; max-width: 620px; }
.cad-geant {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 5.6rem);
  letter-spacing: -0.06em;
  line-height: 1;
  background: linear-gradient(180deg, #fff 35%, #9aa4b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.cad-palier {
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Le rail ne fait que 6 px de haut : rater la pastille, c'était toucher la page
   et la faire défiler en plein réglage. On lui donne une zone de préhension de
   34 px · le trait reste fin, seule la surface sensible grandit · et on interdit
   au geste de devenir un défilement. */
.cad-rail {
  /* content-box est indispensable : le site est en border-box, et les 28 px de
     marge interne mangeaient alors toute la hauteur du trait. Ici, 6 px = le
     trait visible, et la marge interne s'ajoute autour comme zone de préhension. */
  box-sizing: content-box;
  height: 6px;
  padding: 14px 0;
  margin: 16px 0 -4px;
  background-clip: content-box;
  touch-action: none;
}
/* Un glissement parti d'ailleurs dans le bloc ne doit pas bouger l'écran non plus. */
.cad-scene-curseur { touch-action: none; }
.cadrage { overscroll-behavior: contain; }
.cad-scene-curseur .curseur-bornes { text-align: left; }
.cad-valider { margin-top: 30px; }

@media (max-width: 760px) {
  .cad-choix, .cad-choix-3 { grid-template-columns: minmax(0, 1fr); }
  .cad-choix-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cad-astuce { display: none; }           /* pas de clavier sur téléphone */
  .cadrage { min-height: calc(100vh - 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .cad-fond-num, .cad-coeur, .cad-carte, .cad-barre .cad-ici { animation: none; }
  .cad-carte { transition: none; }
}

/* ---------- Fiche d'idée, version simple ----------
   Le nom, une ligne, les actions tout de suite, trois chiffres. Le détail est
   dans le dossier, après le bouton. */

.detail-simple .detail-grille { margin-top: 0; align-items: center; }
.detail-nom {
  margin-top: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  letter-spacing: -0.05em;
  line-height: 1;
}
.detail-pitch { margin-top: 10px; font-size: clamp(15px, 1.8vw, 18px); color: var(--text-3); }

/* Les boutons remontent : plus de trait ni de marge de séparation au-dessus. */
.detail-simple .detail-action {
  margin-top: 26px;
  padding-top: 0;
  border-top: 0;
  text-align: left;
}
.detail-simple .detail-action .marques { justify-content: flex-start; }
.detail-simple .detail-choix .marques { justify-content: center; }

.detail-chiffres {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.detail-chiffres div {
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  gap: 3px;
}
.detail-chiffres b {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  letter-spacing: -0.03em;
}
.detail-chiffres span { font-size: 11.5px; line-height: 1.35; color: var(--text-3); }

.detail-liens { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 14px; }

@media (max-width: 860px) {
  .detail-simple .detail-grille { align-items: start; }
}
@media (max-width: 480px) {
  .detail-chiffres { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Onglet Admin ---------- */

.admin { display: grid; gap: 22px; max-width: 760px; }
.admin-attente { font-size: 14.5px; line-height: 1.55; color: var(--text-3); }
.admin-bloc {
  padding: 20px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.admin-bloc h2 {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.admin-bloc h3 { margin-top: 20px; font-size: 14px; font-weight: 600; }
.admin-grille { margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.admin-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-grille div { display: grid; gap: 2px; }
.admin-grille b {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.admin-grille span { font-size: 12px; color: var(--text-3); }
.admin-note { margin-top: 12px; font-size: 12.5px; color: var(--text-3); }

.admin-abandons { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.admin-abandons li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.admin-etape { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-jauge { height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.admin-jauge i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.admin-abandons b { font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  .admin-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-abandons li { grid-template-columns: minmax(0, 1fr) auto; }
  .admin-jauge { display: none; }
}

.cad-valider:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.admin-session { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.admin-session input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line-3);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
}
.admin-session input:focus { outline: none; border-color: var(--text-2); }
.admin-session button { flex: 0 0 auto; }

.admin-souci {
  padding: 12px 14px;
  border: 1px solid var(--line-3);
  border-radius: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
}

/* Avertissement affiché seulement dans le navigateur intégré d'une application,
   là où la validation bancaire échoue le plus souvent. */
.hors-appli {
  margin-bottom: 22px;
  padding: 18px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--accent-film);
}
.hors-appli-titre {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.hors-appli-texte { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.hors-appli .btn { margin-top: 14px; }

/* ---------- Onglet Agent IA ---------- */

.agent-tab { max-width: 720px; }
.agent-contexte { font-size: 14.5px; line-height: 1.55; color: var(--text-3); }
.agent-fil { display: grid; gap: 12px; margin-top: 22px; }
.agent-bulle {
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
  max-width: 90%;
}
.agent-moi { justify-self: end; background: var(--accent-film); border: 1px solid var(--line-2); }
.agent-lui { justify-self: start; background: var(--bg-2); border: 1px solid var(--line); }
.agent-souci { justify-self: start; border: 1px solid var(--line-3); color: var(--text-3); font-size: 13.5px; }

.agent-points { display: flex; gap: 5px; align-items: center; }
.agent-points i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: agent-pulse 1.1s ease-in-out infinite;
}
.agent-points i:nth-child(2) { animation-delay: 0.15s; }
.agent-points i:nth-child(3) { animation-delay: 0.3s; }
@keyframes agent-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.agent-exemples { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.agent-exemple {
  padding: 9px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.agent-exemple:hover { border-color: var(--accent); color: var(--text); }
.agent-secours-ligne { margin-top: 14px; font-size: 13px; color: var(--text-3); }

@media (prefers-reduced-motion: reduce) { .agent-points i { animation: none; } }

/* ============================================================
   LE TELEPHONE : un vrai mock-up, et il bouge
   ============================================================

   Demande d'Ilyasse le 14 septembre 2026 : « que ce soit un mock-up de vrai
   telephone qui bouge ». Ce qui suit ne touche pas au contenu du flux, qui
   reste exactement celui de trendsaas.

   CE QUI MANQUAIT POUR QUE CA SE LISE COMME UN TELEPHONE : les boutons
   lateraux et le haut-parleur. Sans eux, un rectangle tres arrondi reste un
   rectangle tres arrondi ; ce sont ces details-la, pas la taille du rayon,
   qui font reconnaitre l'objet.

   ET LE MOUVEMENT PASSE EN PERSPECTIVE. Le balancement d'origine etait un
   `translateY` avec une rotation a plat : vu de face, ca donne un objet qui
   glisse, pas un objet qui flotte. Avec la perspective posee sur la scene et
   une rotation sur trois axes, la lumiere du bord change pendant le cycle et
   l'oeil lit un volume. */

.scene-tel {
  /* La perspective vit sur le PARENT, jamais sur l'element anime : posee sur
     `.tel` lui-meme, elle se recalcule a chaque frame et le rendu tremble. */
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

.tel {
  transform-style: preserve-3d;
  animation: flottement 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes flottement {
  0% {
    transform: translate3d(0, -10px, 0) rotateX(6deg) rotateY(-9deg) rotateZ(-1deg);
  }
  50% {
    transform: translate3d(0, 10px, 40px) rotateX(-3deg) rotateY(7deg) rotateZ(1.2deg);
  }
  100% {
    transform: translate3d(0, -10px, 0) rotateX(6deg) rotateY(-9deg) rotateZ(-1deg);
  }
}

/* Les boutons lateraux. Epaisseur 3 px, et un degrade dans le sens de la
   tranche : un bouton plat se lit comme un trait dessine dessus, pas comme une
   piece rapportee. */
.tel-bouton {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3a4150, #1b1f28 60%, #0e1116);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), -1px 0 2px rgba(0, 0, 0, 0.6);
}

.tel-bouton-silence {
  left: -3px;
  top: 94px;
  height: 26px;
}

.tel-bouton-volume-haut {
  left: -3px;
  top: 134px;
  height: 46px;
}

.tel-bouton-volume-bas {
  left: -3px;
  top: 190px;
  height: 46px;
}

/* Celui de droite prend le degrade dans l'autre sens : les deux tranches ne
   recoivent pas la lumiere du meme cote. */
.tel-bouton-veille {
  right: -3px;
  top: 150px;
  height: 66px;
  background: linear-gradient(270deg, #3a4150, #1b1f28 60%, #0e1116);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 1px 0 2px rgba(0, 0, 0, 0.6);
}

/* Le haut-parleur et le capteur, dans l'encoche. */
.tel-encoche::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #2b3a55, #070a10 70%);
  box-shadow: inset 0 0 1px rgba(120, 170, 255, 0.5);
}

/* Le reflet de l'ecran. En `overlay` pour qu'il eclaircisse le verre sans
   laver les notifications dessous, et il ne suit pas l'animation : un reflet
   qui bouge avec l'objet n'est pas un reflet. */
.tel-ecran::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 22%, transparent 42%);
  mix-blend-mode: overlay;
}

/* Un appareil regle pour limiter les animations recoit un telephone immobile,
   legerement incline : l'objet reste lisible comme un volume, sans bouger. */
@media (prefers-reduced-motion: reduce) {
  .tel {
    animation: none;
    transform: rotateX(4deg) rotateY(-7deg);
  }
}