/* ==========================================================================
   Pierre. — Landing produit
   Direction visuelle « Chantier » : béton clair, noir, jaune sécurité.
   Typo : Bricolage Grotesque (display) · Figtree (UI) · IBM Plex Mono (data)

   Structure : hero centré + grande capture produit, puis des sections
   courtes où le visuel porte la démonstration (cf. Notion / Linear).
   Les « captures » sont des maquettes HTML/CSS : nettes sur tout écran,
   texte réel, modifiables en deux minutes.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* Surfaces béton */
  --bg: #f1f0ec;
  --bg-2: #e8e7e1;
  --surface: #ffffff;
  --line: #d8d7d0;
  --line-strong: #191a1c;

  /* Encre */
  --ink: #191a1c;
  --ink-2: #43464b;
  --ink-3: #6a6d72;
  --ink-on-dark: #f1f0ec;

  /* Accents */
  --accent: #e9c46a; /* jaune miel — du jaune, sans l'effet fluo du #ffd166 d'origine */
  --amber: #b45309;
  --positive: #1f7a48;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-ui: "Figtree", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 10px;
  --radius-lg: 16px;

  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  --section-gap: 160px;
}

/* --- Base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }
mark { background: var(--accent); padding: 0 8px; border-radius: 4px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.muted { color: var(--ink-3); }
.section { padding-top: var(--section-gap); }
.pos { color: var(--positive); }
.neg { color: var(--amber); }

.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0;
}
.kicker--amber { color: var(--amber); }
.kicker--accent { color: var(--accent); }

.sec-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 46px;
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 14px 0 0;
}
.lede-block { max-width: 720px; }
.lede { font-size: 19px; line-height: 1.55; color: var(--ink-3); margin: 20px 0 0; }

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  border-radius: var(--radius);
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn--primary { background: var(--ink); color: var(--accent); }
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--lg { padding: 18px 32px; font-size: 16.5px; }

/* --- Nav --- */
.nav { display: flex; align-items: center; justify-content: space-between; height: 82px; }
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.logo em { color: var(--amber); font-style: normal; }
.nav .btn { padding: 11px 18px; font-size: 14px; }
.nav__actions { display: flex; align-items: center; gap: 20px; }
.nav__signin {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.nav__signin:hover { color: var(--ink); }

/* ==========================================================================
   HERO
   ========================================================================== */
/* Texture béton très douce sous le hero et la grande capture, fondue
   vers la couleur de fond de la page. */
.top {
  position: relative;
  padding-bottom: 8px;
  background:
    linear-gradient(
      to bottom,
      var(--bg) 0%,
      rgba(241, 240, 236, 0.62) 22%,
      rgba(241, 240, 236, 0.62) 52%,
      var(--bg) 88%
    ),
    url("assets/beton.jpg") center top / cover no-repeat;
}

.hero { padding-top: 76px; text-align: center; position: relative; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 68px;
  line-height: 1.0;
  letter-spacing: -0.038em;
  margin: 0;
}
.hero__lede {
  font-size: 19.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 640px;
  margin: 28px auto 0;
}
.hero__ctas { margin-top: 34px; }
.hero__note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin: 16px 0 0;
}

/* ==========================================================================
   CAPTURES PRODUIT — cadre commun
   ========================================================================== */
.shot-stage { margin-top: 60px; }


/* --- Le cadre d'ordinateur du modèle ContainerScroll, à l'identique :
       bordure 4px #6C6C6C, châssis #222222 arrondi 30px, écran clair
       padding 16, ombre à six couches du modèle. --- */
.cscard {
  max-width: 64rem; /* max-w-5xl */
  width: 100%;
  height: 40rem; /* md:h-[40rem] */
  margin: 0 auto;
  border: 4px solid #6c6c6c;
  border-radius: 30px;
  background: #222222;
  padding: 24px; /* md:p-6 */
  box-shadow:
    0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042,
    0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003;
}
.cscard__screen {
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 16px; /* rounded-2xl */
  background: #f3f4f6; /* gray-100 */
  padding: 16px; /* md:p-4 */
}
.cscard__img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  border-radius: 16px;
}
/* La même bordure d'ordinateur, en petit, pour les captures des étapes
   (demande Myriam 04/10 : le cadre du modèle partout — sauf le
   téléphone WhatsApp et le dossier PDF). */
.cscard--sm {
  height: auto;
  max-width: none;
  border-width: 3px;
  border-radius: 22px;
  padding: 12px;
}
.cscard--sm .cscard__screen { padding: 10px; border-radius: 12px; }
.cscard--sm .cscard__img { height: auto; object-fit: contain; border-radius: 10px; }

/* La grande piste de défilement du modèle : titre (header) et carte
   empilés au centre d'une section haute — l'animation se joue en la
   traversant. */
@media (min-width: 1001px) {
  .dive {
    min-height: 80rem; /* md:h-[80rem] */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .dive .hero { padding-top: 0; }
  .dive .shot-stage { margin-top: 44px; }
}

/* ==========================================================================
   LA POSE — desktop : la capture entre en légère perspective et se pose à
   plat (transform posé par scroll.js). Aucune mise en page modifiée : sans
   JavaScript ou en mouvement réduit, la section est simplement statique.
   ========================================================================== */
.has-settle .shot--hero { will-change: transform; }

/* ==========================================================================
   RÉVÉLATIONS AU SCROLL — ajoutées par scroll.js, jamais sans lui :
   le contenu n'est donc jamais caché si le JavaScript ne tourne pas.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 640ms var(--ease), transform 640ms var(--ease);
  }
  .reveal.is-in { opacity: 1; transform: none; }
  /* Les cellules et colonnes se suivent d'un temps court */
  .statband__cell.reveal:nth-child(2), .ba__col.reveal:nth-child(2) { transition-delay: 90ms; }
  .statband__cell.reveal:nth-child(3) { transition-delay: 180ms; }
}

/* ==========================================================================
   BANDEAU CHIFFRES
   ========================================================================== */
.statband { margin-top: var(--section-gap); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statband__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 40px;
  padding-bottom: 40px;
  gap: 32px;
}
.statband__cell { border-left: 2px solid var(--ink); padding-left: 18px; }
.statband__cell b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.03em;
  display: block;
  line-height: 1;
}
.statband__cell span { font-size: 14px; color: var(--ink-3); display: block; margin-top: 8px; max-width: 260px; }

/* ==========================================================================
   SECTION 1 — Pierre remplace tout ça
   ========================================================================== */
.replace {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px minmax(0, 0.85fr);
  gap: 20px;
  align-items: center;
}
.replace__old { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
/* Les outils remplacés : leurs vrais logos, proprement barrés */
.exlogo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}
.exlogo img,
.exlogo svg {
  display: block;
  height: 20px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
}
.exlogo svg {
  width: 20px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.exlogo--wordmark { padding: 10px 16px; }
/* La rayure : une barre ambre légèrement inclinée, par-dessus le logo */
.exlogo::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
  opacity: 0.8;
  transform: rotate(-5deg);
  pointer-events: none;
}
.replace__arrow {
  font-size: 30px;
  color: var(--ink-3);
  text-align: center;
}
.replace__new {
  background: var(--ink);
  color: var(--ink-on-dark);
  border-radius: var(--radius-lg);
  padding: 34px 30px;
}
.replace__new .logo { font-size: 28px; }
.replace__new .logo em { color: var(--accent); }
.replace__new p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin: 16px 0 0;
}

/* ==========================================================================
   SECTION 2 — Le parcours
   ========================================================================== */
.journey { margin-top: 52px; }
.stage {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--line);
}
.stage:first-child { border-top: 2px solid var(--line-strong); }
/* Une étape sur deux inverse l'ordre — la capture garde la colonne large. */
.stage--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.stage--flip .stage__text { order: 2; }

/* Étape sans capture (Gérer) : le texte seul, posé sur une colonne lisible */

/* Le vrai document PDF : une page A4 posée telle quelle, sans chrome */
.shot--doc {
  margin: 0;
  max-width: 480px;
}
.shot--doc img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 32px 64px -32px rgba(25, 26, 28, 0.4);
}
.shot--doc figcaption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-top: 12px;
  text-align: center;
}
.stage h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.03em;
  margin: 10px 0 0;
}
.stage__promise {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 14px 0 0;
}
.stage p:not(.stage__promise) {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-3);
  margin: 14px 0 0;
  max-width: 440px;
}

/* ==========================================================================
   SECTION 3 — Le copilote
   ========================================================================== */
.copilot {
  background: var(--ink);
  color: var(--ink-on-dark);
  border-radius: var(--radius-lg);
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.copilot .sec-title { color: var(--ink-on-dark); }
.copilot .sec-title mark { color: var(--ink); }
.copilot__lede { font-size: 16.5px; line-height: 1.65; color: rgba(241, 240, 236, 0.78); margin: 22px 0 0; }
.copilot__rules { list-style: none; padding: 0; margin: 26px 0 0; }
.copilot__rules li {
  font-size: 15px;
  font-weight: 600;
  padding: 11px 0;
  border-top: 1px solid rgba(241, 240, 236, 0.15);
}
.copilot__rules li::before { content: "✓"; color: var(--accent); margin-right: 12px; font-weight: 700; }

.copilot__demo { background: var(--bg); border-radius: var(--radius); padding: 26px; color: var(--ink); }
.chain__q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}
.chain { display: flex; flex-direction: column; gap: 0; }
.chain__step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 14px;
  position: relative;
  margin-bottom: 20px;
}
.chain__step:last-child { margin-bottom: 0; }
.chain__step:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1;
}
.chain__step span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
}
.chain__step b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.025em;
  display: block;
  margin-top: 4px;
}
.chain__step em {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-style: normal;
  color: var(--amber);
  display: block;
  margin-top: 3px;
}
.chain__end {
  margin: 20px 0 0;
  background: var(--accent);
  border-radius: 8px;
  padding: 13px 15px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   SECTION 4 — Bénéfices
   ========================================================================== */
/* Témoignages rotatifs : pile de photos à gauche (centre + deux ailes en
   légère perspective), texte à droite, flèches rondes. Adapté du modèle
   « circular testimonials » validé par Myriam, en vanilla. */
.reviews {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: center;
}
.reviews__stage {
  position: relative;
  height: 430px;
  perspective: 1000px;
}
.reviews__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 34px 64px -32px rgba(25, 26, 28, 0.5);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.8s cubic-bezier(0.4, 2, 0.3, 1),
    opacity 0.8s cubic-bezier(0.4, 2, 0.3, 1);
}
.reviews__stage img.is-center { opacity: 1; z-index: 3; transform: none; }
.reviews__stage img.is-left {
  opacity: 1;
  z-index: 2;
  transform: translateX(-62px) translateY(-48px) scale(0.85) rotateY(15deg);
}
.reviews__stage img.is-right {
  opacity: 1;
  z-index: 2;
  transform: translateX(62px) translateY(-48px) scale(0.85) rotateY(-15deg);
}
.reviews__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
}
.reviews__who {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 12px 0 0;
}
.reviews__quote {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 18px 0 0;
}
.reviews__textwrap {
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.reviews__textwrap.is-out {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.reviews__nav { display: flex; gap: 14px; margin-top: 32px; }
.reviews__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.reviews__btn:hover { background: var(--accent); transform: translateY(-1px); }
.reviews__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.reviews__btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #f1f0ec;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 1000px) {
  .reviews { grid-template-columns: 1fr; gap: 34px; margin-top: 36px; }
  .reviews__stage { height: 310px; max-width: 350px; margin: 0 auto; width: 100%; }
  .reviews__stage img.is-left { transform: translateX(-36px) translateY(-26px) scale(0.85) rotateY(15deg); }
  .reviews__stage img.is-right { transform: translateX(36px) translateY(-26px) scale(0.85) rotateY(-15deg); }
}

/* ==========================================================================
   SECTION 5 — Les données (bande noire)
   ========================================================================== */
.datband { background: var(--ink); color: var(--ink-on-dark); margin-top: var(--section-gap); }
.datband__inner { padding-top: 64px; padding-bottom: 64px; }
.datband h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.03em;
  margin: 14px 0 0;
  max-width: 720px;
}
.datband__lede {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(241, 240, 236, 0.7);
  max-width: 620px;
  margin: 20px 0 0;
}
.sources {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(241, 240, 236, 0.18);
}
/* Les vraies icônes des sources, sur pastilles claires (fond sombre) */
.sources--logos .src {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bg);
  border: 0;
  border-radius: 999px;
  padding: 8px 16px 8px 10px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.sources--logos .src img {
  width: auto;
  height: 20px;
  max-width: 44px;
  object-fit: contain;
  border-radius: 4px;
}
/* Logos institutionnels plus denses : un peu plus de hauteur pour rester lisibles */
.sources--logos .src--tall { padding-top: 5px; padding-bottom: 5px; }
.sources--logos .src--tall img { height: 30px; max-width: 72px; }
.sources span {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(241, 240, 236, 0.75);
  border: 1px solid rgba(241, 240, 236, 0.25);
  border-radius: 999px;
  padding: 8px 18px;
}

/* ==========================================================================
   SECTION 7 — Avant / Après
   ========================================================================== */
.ba { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ba__col { border-radius: var(--radius-lg); padding: 32px 34px; }
.ba__col--before { background: var(--bg-2); border: 1px solid var(--line); }
.ba__col--after { background: var(--ink); color: var(--ink-on-dark); }
.ba__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 20px;
  color: var(--ink-3);
}
.ba__col--after .ba__title { color: var(--accent); }
.ba ul { list-style: none; padding: 0; margin: 0; }
.ba li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.ba__col--after li { border-top-color: rgba(241, 240, 236, 0.15); }
.ba li::before { margin-right: 14px; font-family: var(--font-ui); }
.ba__col--before li::before { content: "✕"; color: var(--amber); }
.ba__col--after li::before { content: "✓"; color: var(--accent); }

/* ==========================================================================
   TARIF
   ========================================================================== */
.offer { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.offer__lede { font-size: 16.5px; line-height: 1.65; margin: 20px 0 0; max-width: 460px; }
.offer__list { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 12px; }
.offer__list li { display: flex; gap: 11px; font-size: 15.5px; font-weight: 500; }
.offer__list .check { color: var(--positive); font-weight: 700; }

.price-card {
  background: var(--ink);
  color: var(--ink-on-dark);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: 0 30px 60px -30px rgba(25, 26, 28, 0.5);
}
.price-card__amount { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.price-card__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 66px;
  letter-spacing: -0.035em;
  line-height: 1;
}
.price-card__per { font-family: var(--font-mono); font-size: 14px; color: rgba(241, 240, 236, 0.6); }
.price-card__alt { margin: 8px 0 0; font-size: 13.5px; color: var(--yellow, #e9c46a); font-weight: 600; }
.price-card__rule { height: 1px; background: rgba(241, 240, 236, 0.15); margin: 28px 0; border: 0; }
.price-card .btn { width: 100%; }
.price-card__sub { font-size: 13px; color: rgba(241, 240, 236, 0.6); margin-top: 14px; text-align: center; line-height: 1.6; }

/* ==========================================================================
   FAQ
   ========================================================================== */
/* FAQ nouvelle formule (modèle « faq pro » validé par Myriam, en vanilla) :
   recherche en pilule, rangées arrondies sur carte claire, chevron qui
   pivote, ouverture animée là où le navigateur sait le faire. */
.faq {
  /* Centrée dans la page (demande Myriam, 04/10) */
  margin: 36px auto 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#faq .lede-block { text-align: center; }
#faq .sec-title { margin-left: auto; margin-right: auto; }
.faq__searchwrap { position: relative; margin-bottom: 6px; }
.faq__search {
  width: 100%;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  padding: 0 52px 0 24px;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  appearance: none;
}
.faq__search::placeholder { color: var(--ink-3); }
.faq__search:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.faq__search::-webkit-search-cancel-button { display: none; }
.faq__clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.faq__clear:hover { background: var(--bg-2); color: var(--ink); }
.faq__empty { font-size: 14.5px; text-align: center; padding: 18px 0; margin: 0; }
.faq mark {
  background: rgba(255, 209, 102, 0.75);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17.5px;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 16px; }
/* Le chevron : un simple trait plié, qui pivote à l'ouverture */
.faq__chev {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
  margin-top: -4px;
}
.faq__item[open] .faq__chev { transform: rotate(225deg); margin-top: 4px; }
.faq__a { font-size: 15px; line-height: 1.65; margin: 0; padding: 0 48px 20px 22px; }
/* Ouverture animée quand le navigateur sait interpoler vers « auto » —
   les autres ouvrent sans animation, rien ne casse. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.34s var(--ease), content-visibility 0.34s allow-discrete;
  }
  .faq__item[open]::details-content { height: auto; }
}

/* --- Le dossier PDF feuilletable (étape Financer) --- */
.docpager { position: relative; }
/* Une seule page visible à la fois. Sélecteurs volontairement plus
   spécifiques que `.shot--doc img` (qui pose display:block), sinon les
   trois pages s'empilent — c'est arrivé. */
.shot--doc img.docpager__page { display: none; }
.shot--doc img.docpager__page.is-on { display: block; }
.docpager__bar {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(25, 26, 28, 0.9);
  border-radius: 999px;
  padding: 5px 8px;
  box-shadow: 0 10px 24px -12px rgba(25, 26, 28, 0.6);
}
.docpager__btn {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}
.docpager__btn:hover { background: rgba(241, 240, 236, 0.18); }
.docpager__btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
.docpager__btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #f1f0ec;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.docpager__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(241, 240, 236, 0.85);
  min-width: 38px;
  text-align: center;
}

/* Le logo Airbnb dans le titre, à hauteur du texte */
.airbnb-wordmark {
  height: 1.02em;
  width: auto;
  vertical-align: -0.14em;
}

/* ==========================================================================
   CTA FINAL + FOOTER
   ========================================================================== */
/* Bande pleine largeur : façades en fond, voile béton pour la lisibilité. */
.final-cta {
  margin-top: var(--section-gap);
  background:
    linear-gradient(to bottom, rgba(241, 240, 236, 0.93) 0%, rgba(241, 240, 236, 0.82) 55%, rgba(241, 240, 236, 0.5) 100%),
    url("assets/facades.jpg") center 62% / cover no-repeat;
  border-top: 1px solid var(--line);
}
.final-cta__inner { text-align: center; padding-top: 108px; padding-bottom: 132px; }
.final-cta h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
}
.final-cta p { font-size: 17px; margin: 20px auto 0; color: var(--ink-2); }
.final-cta .btn { margin-top: 32px; }

.footer { background: var(--ink); color: var(--ink-on-dark); }
.footer__inner {
  padding-top: 48px; padding-bottom: 48px;
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 24px;
}
.footer .logo { font-size: 22px; }
.footer .logo em { color: var(--accent); }
.footer__disclaimer { max-width: 520px; font-size: 12px; line-height: 1.7; color: rgba(241, 240, 236, 0.55); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  :root { --section-gap: 124px; }

  .hero { padding-top: 40px; }
  .hero h1 { font-size: 44px; }
  .hero__lede { font-size: 17px; }

  /* Sans JavaScript (ou en mouvement réduit), la grande capture reste
     consultable par défilement horizontal. Avec la plongée active,
     scroll.js s'en charge et ces règles sont neutralisées plus haut. */
  .shot-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
  .shot--hero { min-width: 860px; }

  .statband__inner { grid-template-columns: 1fr; gap: 24px; }
  .statband__cell span { max-width: none; }

  .replace { grid-template-columns: 1fr; gap: 24px; }
  .replace__arrow { transform: rotate(90deg); }

  .stage, .stage--flip { grid-template-columns: 1fr; gap: 28px; padding: 34px 0; }
  .stage--flip .stage__text { order: 0; }
  .stage h3 { font-size: 28px; }
  .stage__promise { font-size: 18px; }
  .stage p:not(.stage__promise) { max-width: none; }

  .copilot { grid-template-columns: 1fr; padding: 32px; gap: 34px; }
  .benefits { grid-template-columns: 1fr; }
  .benefit, .benefit:nth-child(even) { padding: 26px 0; border-right: none; }
  .datband h2 { font-size: 30px; }

  .ba { grid-template-columns: 1fr; }
  .offer { grid-template-columns: 1fr; gap: 36px; }
  .faq__item { grid-template-columns: 1fr; gap: 10px; }

  .sec-title { font-size: 33px; }
  .final-cta h2 { font-size: 36px; }
}

@media (max-width: 560px) {
  :root { --section-gap: 108px; }
  .wrap { padding-left: 18px; padding-right: 18px; }

  /* Les retours à la ligne forcés sont pensés pour le desktop : sur un
     écran étroit ils créent des lignes orphelines. */
  .hero h1 br, .sec-title br, .final-cta h2 br, .datband h2 br { display: none; }
  .hero h1, .sec-title, .final-cta h2 { text-wrap: balance; }

  .nav { height: 64px; }
  .logo { font-size: 20px; }
  /* Les deux actions doivent tenir à côté du logo */
  .nav__actions { gap: 10px; }
  .nav__signin { font-size: 14px; padding: 8px 2px; }
  .nav .btn { padding: 10px 13px; font-size: 13px; }

  .hero { padding-top: 32px; }
  .hero h1 { font-size: 34px; line-height: 1.06; }
  .hero__lede { font-size: 16px; margin-top: 18px; }
  .hero__ctas { margin-top: 26px; }
  .btn--lg { padding: 16px 22px; font-size: 15px; width: 100%; }

  .sec-title { font-size: 28px; }
  .lede { font-size: 16.5px; }

  .statband__inner { padding-top: 32px; padding-bottom: 32px; }
  .statband__cell b { font-size: 28px; }

  .replace__new { padding: 26px 22px; }
  .replace__new p { font-size: 18px; }

  .stage, .stage--flip { padding: 28px 0; gap: 22px; }
  .stage h3 { font-size: 25px; }
  .stage__promise { font-size: 17px; }
  .stage p:not(.stage__promise) { font-size: 15px; }

  .copilot { padding: 26px 18px; gap: 28px; border-radius: var(--radius); }
  .copilot__demo { padding: 18px 16px; }
  .chain__step b { font-size: 17px; }

  .benefit h3 { font-size: 22px; }
  .benefit p { font-size: 15px; }

  .datband__inner { padding-top: 44px; padding-bottom: 44px; }
  .datband h2 { font-size: 25px; }
  .sources { gap: 8px; margin-top: 28px; padding-top: 24px; }
  .sources span { font-size: 11.5px; padding: 7px 13px; }

  .ba__col { padding: 22px 20px; }
  .ba li { font-size: 16.5px; padding: 11px 0; }

  .offer { gap: 28px; }
  .price-card { padding: 28px 22px; }
  .price-card__num { font-size: 54px; }
  .price-card__rule { margin: 22px 0; }

  /* Cartes FAQ sur mobile : questions plus discrètes (retour Myriam) */
  .faq__item { padding: 0; }
  .faq__q { font-size: 15px; padding: 15px 18px; gap: 12px; }
  .faq__a { font-size: 13.5px; padding: 0 30px 16px 18px; }
  .faq__search { height: 46px; font-size: 14.5px; }

  .final-cta__inner { padding-top: 72px; padding-bottom: 88px; }
  .final-cta h2 { font-size: 31px; }
  .final-cta p { font-size: 15.5px; }

  .footer__inner { padding-top: 36px; padding-bottom: calc(36px + env(safe-area-inset-bottom)); }

}

/* ==========================================================================
   LES VRAIES CAPTURES MOBILES — sur petit écran, les maquettes HTML
   laissent place à des captures réelles de l'application, dans un cadre
   de téléphone. Le desktop garde ses maquettes.
   ========================================================================== */
.phone { display: none; }

@media (max-width: 1000px) {
  /* Le hero mobile montre la vraie app, plus la maquette desktop */
  .shot--hero { display: none; }
  .shot-stage { overflow: visible; padding-bottom: 0; }

  .phone {
    display: block;
    width: min(288px, 80vw);
    margin: 10px auto 0;
    background: var(--ink);
    border-radius: 40px;
    padding: 10px;
    position: relative;
    box-shadow:
      0 0 0 1px rgba(25, 26, 28, 0.4),
      0 32px 64px -28px rgba(25, 26, 28, 0.55);
  }
  /* L'encoche, par-dessus la barre de titre de la capture */
  .phone::after {
    content: "";
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 21px;
    border-radius: 999px;
    background: var(--ink);
  }
  .phone img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 30px;
  }
  /* Mode « vidéo » : l'écran complet défile dans la fenêtre du téléphone
     (scroll.js). Sans JavaScript ou en mouvement réduit : haut de page
     figé, comme une capture classique. */
  .phone__win {
    height: 540px;
    overflow: hidden;
    border-radius: 30px;
  }
  .phone--scroll img { border-radius: 0; will-change: transform; }

  /* Étapes : la capture ordinateur s'efface sur mobile, place au téléphone */
  .stage--real .cscard--sm { display: none; }
}

/* ==========================================================================
   NAV MOBILE — le logo seul dans la barre ; un burger à deux traits
   inégaux ouvre un panneau avec les ancres et les deux actions.
   ========================================================================== */
.navburger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  margin-right: -8px;
}
.navburger span {
  position: absolute;
  left: 8px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 260ms var(--ease), width 260ms var(--ease), top 260ms var(--ease);
}
.navburger span:first-child { top: 17px; width: 28px; }
.navburger span:last-child { top: 25px; width: 19px; }
.navburger[aria-expanded="true"] span:first-child {
  top: 21px;
  width: 26px;
  transform: rotate(45deg);
}
.navburger[aria-expanded="true"] span:last-child {
  top: 21px;
  width: 26px;
  transform: rotate(-45deg);
}
.navburger:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.navmenu {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 8px 20px calc(26px + env(safe-area-inset-bottom));
  box-shadow: 0 30px 50px -20px rgba(25, 26, 28, 0.25);
}
.navmenu__links { display: flex; flex-direction: column; }
.navmenu__links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.navmenu__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}
/* Ceinture : jamais de bouton écrasé dans le panneau, quel que soit
   l'état du cache ou du moteur (vu une fois sur Safari iOS) */
.navmenu__actions .btn { min-height: 54px; }
.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}

@media (max-width: 1000px) {
  .nav__actions { display: none; }
  .navburger { display: block; }
  .navmenu.is-open { display: block; }
  /* Barre figée quand le menu est ouvert, pour que le panneau s'y accroche */
  .nav-open .nav {
    position: sticky;
    top: 0;
    z-index: 51;
    background: var(--bg);
  }
  .nav-open { overflow: hidden; }
}

/* ==========================================================================
   BANDEAU SOURCES — défilement continu très lent, coupé en mouvement réduit
   ========================================================================== */
.tickerband {
  margin-top: var(--section-gap);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.tickerband__label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 18px 22px 18px max(20px, calc((100vw - 1160px) / 2 + 32px));
  border-right: 1px solid var(--line);
  background: var(--bg);
  position: relative;
  z-index: 1;
}
.ticker { flex: 1; overflow: hidden; }
.ticker__track {
  display: flex;
  gap: 44px;
  width: max-content;
  padding: 18px 0;
  animation: ticker-scroll 36s linear infinite;
}
.ticker__track span {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  white-space: nowrap;
}
@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}
/* Le bandeau chiffres suit immédiatement : pas de double espacement */
.tickerband + .statband { margin-top: 0; }

/* ==========================================================================
   TARIF — trois repères à barre ambre, façon fiche technique
   ========================================================================== */
.offer__facts {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.fact { border-left: 3px solid var(--amber); padding-left: 16px; }
.fact b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.025em;
  display: block;
  line-height: 1.1;
}
.fact span {
  display: block;
  font-size: 14px;
  color: var(--ink-3);
  margin-top: 4px;
  max-width: 400px;
}

/* ==========================================================================
   DÉMO VIVANTE DU COPILOTE — la séquence n'existe que si scroll.js l'arme
   (.is-armed) : sans JavaScript ou en mouvement réduit, tout est statique.
   ========================================================================== */
.copilot__demo.is-armed .chain__step,
.copilot__demo.is-armed .chain__end {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
.copilot__demo.is-armed .chain__step.is-on,
.copilot__demo.is-armed .chain__end.is-on {
  opacity: 1;
  transform: none;
}
/* Les flèches entre étapes suivent leur étape */
.copilot__demo.is-armed .chain__step::after { opacity: 0; transition: opacity 300ms var(--ease) 260ms; }
.copilot__demo.is-armed .chain__step.is-on::after { opacity: 1; }
/* Le curseur de frappe */
.chain__q { min-height: 1.3em; }
.chain__q.is-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: var(--amber);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: caret-blink 0.85s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* ==========================================================================
   FOOTER RICHE — marque + installation PWA, colonnes, bloc légal
   ========================================================================== */
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 44px;
}
.footer__tagline {
  margin: 12px 0 0;
  font-size: 14px;
  color: rgba(241, 240, 236, 0.55);
  max-width: 300px;
  line-height: 1.6;
}
.btn--install {
  margin-top: 20px;
  border-color: rgba(241, 240, 236, 0.4);
  color: var(--ink-on-dark);
  padding: 12px 18px;
  font-size: 14px;
}
.btn--install:hover { border-color: var(--accent); color: var(--accent); filter: none; }
.footer__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(241, 240, 236, 0.45);
  margin: 4px 0 14px;
}
.footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.footer__col a {
  text-decoration: none;
  color: rgba(241, 240, 236, 0.78);
  font-size: 14.5px;
  font-weight: 500;
  padding: 6px 0;
}
.footer__col a:hover { color: var(--accent); }
.footer__legal {
  border-top: 1px solid rgba(241, 240, 236, 0.14);
  padding-top: 24px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(241, 240, 236, 0.4);
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .footer__grid { grid-template-columns: 1fr 1fr; padding-top: 40px; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ==========================================================================
   SOULIGNÉ AU PINCEAU — un trait miel irrégulier, peint sous le mot.
   (SVG embarqué : bords vivants, pointes effilées, légère inclinaison.)
   ========================================================================== */
.brush {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='%23e9c46a' d='M5 13.5 C28 9.2 54 7.6 82 7.9 C112 8.2 142 7.2 168 7.8 C180 8.1 191 8 196 7.2 C192 10.4 180 11.6 165 12.2 C136 13.4 104 13 76 13.8 C48 14.6 22 16.4 8 17.4 C4.5 17.6 3.8 15.2 5 13.5 Z'/%3E%3Cpath fill='%23e9c46a' opacity='.55' d='M14 17.2 C50 15.4 96 14.8 150 14.2 C166 14 178 13.6 186 13 C178 15.6 160 16.6 138 17 C102 17.7 56 18.4 22 19 C15 19.1 12.5 18.2 14 17.2 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.3em;
  padding-bottom: 0.17em;
}

/* ==========================================================================
   L'AGENT DANS LA POCHE — la conversation qui se joue comme une vidéo.
   Les bulles ne sont masquées QUE si scroll.js arme la séquence
   (.is-armed) : sans JavaScript ou en mouvement réduit, tout est visible.
   ========================================================================== */
.agent {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
}
.agent__lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  max-width: 460px;
}
.agent__vs { list-style: none; padding: 0; margin: 26px 0 0; max-width: 460px; }
.agent__vs li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
  padding: 14px 0 14px 16px;
  border-left: 3px solid var(--line);
}
.agent__vs-who {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.agent__vs--you { border-left-color: var(--accent); color: var(--ink-2); }
.agent__vs--you .agent__vs-who { color: var(--ink); }
.agent__channels {
  margin: 24px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}


@media (max-width: 1000px) {
  .agent { grid-template-columns: 1fr; gap: 36px; }
  /* On voit la démonstration avant de lire le discours */
  .wa { order: -1; }
  .agent__lede { font-size: 16px; }
}

/* ==========================================================================
   LE TÉLÉPHONE DU HERO — l'app telle quelle : barre « PIERRE. » en haut,
   barre d'onglets en bas. La séquence (scroll.js) : le fil défile, tap
   sur « Plus » qui ouvre le menu, puis l'invitation finale. Sans
   JavaScript ou en mouvement réduit : l'accueil figé, complet.
   ========================================================================== */
.phone--nav .phone__body {
  position: relative;
  height: 568px;
  border-radius: 30px;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  flex-direction: column;
}
.phone__topbar {
  flex-shrink: 0;
  height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 7px;
  background: #fff;
  border-bottom: 1px solid #efeeec;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #191a1c;
}
.phone__topbar em { color: var(--amber); font-style: normal; }
.phone--nav .phone__win {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.phone--nav .phone__win img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  will-change: transform;
}
.phone__tabbar {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  background: #f7f7f6;
  border-top: 1px solid #e5e4e1;
  padding: 5px 6px 10px;
}
.phone__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 0 2px;
  position: relative;
  font-size: 9px;
  font-weight: 600;
  color: #6a6d72;
  transition: color 200ms var(--ease);
}
.phone__tab svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.phone__tab svg .dot { fill: currentColor; stroke: none; }
.phone__tab.is-active { color: #191a1c; }
.phone__tab.is-active svg { stroke-width: 2.1; }
.phone__tab.is-tapped::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(25, 26, 28, 0.1);
  animation: tab-tap 420ms var(--ease);
}
@keyframes tab-tap {
  from { opacity: 1; scale: 0.5; }
  to { opacity: 0; scale: 1.15; }
}
.phone__badge {
  position: absolute;
  top: 3px;
  left: calc(50% + 5px);
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: #191a1c;
  color: #e9c46a;
  font-size: 8.5px;
  font-weight: 700;
  font-style: normal;
  line-height: 14px;
  text-align: center;
}
/* Le menu (tiroir) : exactement la capture de l'app, par-dessus l'écran */
.phone__menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  pointer-events: none;
}
.phone__menu.is-on { opacity: 1; transform: none; }
/* L'invitation finale : l'écran se pose dessus et y reste */
.phone__final {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(22, 23, 25, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 28px;
  opacity: 0;
  transition: opacity 650ms var(--ease);
  pointer-events: none;
}
.phone__final.is-on { opacity: 1; pointer-events: auto; }
.phone__final-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--ink-on-dark);
}
.phone__final-logo em { color: var(--accent); font-style: normal; }
.phone__final p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink-on-dark);
  margin: 0;
}
.phone__final .btn { font-size: 14px; padding: 13px 20px; }

/* --- L'encart courte durée de la bande Données ------------------------ */
.airbnb-callout {
  margin-top: 36px;
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  max-width: 560px;
}
.airbnb-callout__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  margin: 0;
}
.airbnb-callout__text {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(241, 240, 236, 0.7);
  margin: 10px 0 0;
}
.airbnb-callout__text strong { color: var(--ink-on-dark); }
.airbnb-callout__figures {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 12px 0 0;
}

/* ==========================================================================
   WA — le mockup WhatsApp fidèle (modèle great-ui, vanilla, thème clair)
   ========================================================================== */
.wa {
  position: relative;
  width: min(300px, 86vw);
  margin: 0 auto;
  background: #171717;
  border-radius: 40px;
  padding: 10px;
  box-shadow: 0 34px 70px -30px rgba(25, 26, 28, 0.55);
}
.wa__btn {
  position: absolute;
  width: 3px;
  border-radius: 2px 0 0 2px;
  background: #3d3d3d;
}
.wa__btn--l1 { left: -3px; top: 96px; height: 30px; }
.wa__btn--l2 { left: -3px; top: 140px; height: 42px; }
.wa__btn--l3 { left: -3px; top: 190px; height: 42px; }
.wa__btn--r { right: -3px; top: 128px; height: 56px; border-radius: 0 2px 2px 0; }
.wa__screen {
  display: flex;
  flex-direction: column;
  height: 584px;
  border-radius: 30px;
  overflow: hidden;
  background: #efeae2;
  font-family: var(--font-ui);
}
.wa__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #008069;
  color: #fff;
  padding: 7px 16px 4px;
  font-size: 11px;
  font-weight: 700;
}
.wa__statusicons { display: flex; align-items: center; gap: 5px; }
.wa__statusicons svg { width: 12px; height: 12px; }
.wa__statusicons svg:last-child { width: 16px; height: 10px; }
.wa__head {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #008069;
  color: #fff;
  padding: 6px 10px 8px;
}
.wa__back { width: 15px; height: 15px; flex: none; opacity: 0.92; }
.wa__avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  display: grid;
  place-items: center;
}
.wa__avatar i { font-style: normal; color: var(--accent); }
.wa__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wa__who b { font-size: 12.5px; line-height: 1.15; }
.wa__who small { font-size: 9.5px; color: #c7f0e4; margin-top: 1px; }
.wa__headicons { display: flex; align-items: center; gap: 11px; opacity: 0.92; }
.wa__headicons svg { width: 14px; height: 14px; }

/* Le fil : hauteur FIXE, ancré en bas — l'excédent sort par le haut */
.wa__chat {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 10px 9px;
  background-image: radial-gradient(rgba(25, 26, 28, 0.045) 1.1px, transparent 1.1px);
  background-size: 26px 26px;
}
.wa__day {
  align-self: center;
  background: rgba(255, 255, 255, 0.92);
  color: #5a6670;
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 9px;
  font-weight: 600;
  box-shadow: 0 1px 1px rgba(25, 26, 28, 0.08);
}

/* Les bulles, thème clair WhatsApp */
.wa .msg {
  position: relative;
  max-width: 86%;
  align-self: flex-start;
  background: #fff;
  color: #10181d;
  border-radius: 10px;
  border-top-left-radius: 2px;
  padding: 6px 9px 5px;
  font-size: 11.5px;
  line-height: 1.45;
  box-shadow: 0 1px 1px rgba(25, 26, 28, 0.1);
}
.wa .msg--me {
  align-self: flex-end;
  background: #dcf8c6;
  border-top-left-radius: 10px;
  border-top-right-radius: 2px;
}
.wa .msg__meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  color: rgba(16, 24, 29, 0.45);
  margin-left: 8px;
  float: right;
  margin-top: 7px;
}
.wa .msg__meta i { font-style: normal; color: #34b7f1; letter-spacing: -1px; }

/* « écrit… » */
.wa .msg--typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 12px;
}
.wa .msg--typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00a884;
  animation: wadot 0.9s ease-in-out infinite;
}
.wa .msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.wa .msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes wadot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2.5px); }
}
.wa .msg--typing.is-done { display: none; }

/* La carte « nouvelle annonce » */
.wa .msg--alert { width: 86%; }
.wa .msg__flag {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 3px;
}
.wa .msg--alert b { display: block; font-size: 11.5px; }
.wa .msg__price {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  margin: 2px 0 4px;
}
.wa .msg__facts { display: flex; flex-wrap: wrap; gap: 3px; }
.wa .msg__facts em {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  background: rgba(25, 26, 28, 0.06);
  border-radius: 4px;
  padding: 2px 6px;
}
.wa .msg__facts em.pos { background: rgba(31, 122, 72, 0.12); color: #1f7a48; }
.wa .msg__verdict {
  display: block;
  font-size: 9.5px;
  color: #5a6670;
  margin-top: 5px;
  border-top: 1px solid rgba(25, 26, 28, 0.07);
  padding-top: 5px;
}

/* Pièce jointe PDF et carte contact, en clair */
.wa .msg__doc,
.wa .msg__contact {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f2f5;
  border-radius: 7px;
  padding: 8px 10px;
  margin: 2px 0 6px;
}
.wa .msg__doc i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  background: #d93025;
  border-radius: 4px;
  padding: 4px 5px;
}
.wa .msg__doc b { display: block; font-size: 10.5px; line-height: 1.25; }
.wa .msg__doc small { display: block; font-size: 8.5px; color: #5a6670; margin-top: 1px; }
.wa .msg__contact { margin: 6px 0; }
.wa .msg__contact i {
  font-style: normal;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: #6b7c85;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: grid;
  place-items: center;
}
.wa .msg__contact b { display: block; font-size: 10.5px; line-height: 1.25; }
.wa .msg__contact small { display: block; font-size: 10px; color: #027eb5; margin-top: 1px; letter-spacing: 0.03em; }

/* Composer + barre home */
.wa__composer {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f0f2f5;
  padding: 7px 8px;
}
.wa__emoji { width: 17px; height: 17px; color: #54656f; flex: none; }
.wa__input {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 11px;
  color: #8696a0;
}
.wa__inputicons { display: flex; align-items: center; gap: 7px; color: #8696a0; }
.wa__inputicons svg { width: 13px; height: 13px; }
.wa__mic {
  width: 29px;
  height: 29px;
  flex: none;
  border-radius: 50%;
  background: #00a884;
  color: #fff;
  display: grid;
  place-items: center;
}
.wa__mic svg { width: 13px; height: 13px; }
.wa__homebar { display: flex; justify-content: center; background: #f0f2f5; padding: 2px 0 6px; }
.wa__homebar i { width: 86px; height: 4px; border-radius: 999px; background: #9aa5ac; }

/* Apparition des messages : ressort léger, comme le modèle.
   display:none tant que l'étape n'est pas jouée — un message invisible
   ne doit occuper AUCUNE place, sinon le fil ancré en bas pousse les
   messages déjà affichés hors de l'écran par le haut. */
.wa__chat.is-armed [data-step]:not(.is-on) { display: none; }
.wa__chat.is-armed [data-step].is-on {
  animation: wapop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes wapop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa .msg--typing { display: none; }
}