/* =========================================================================
   Site vitrine — Cerno
   Mêmes jetons visuels que l'application (dark, accent #8a8cf0, flamme #f97316).
   Animations sur transform et opacity uniquement, plus stroke-dashoffset pour
   le tracé des flèches.
   ========================================================================= */

/* ------------------------------- Polices -------------------------------
   Hébergées ici, jamais chargées depuis Google : une requête vers
   fonts.gstatic.com transmet l'adresse IP du visiteur à un tiers avant
   qu'il ait rien accepté. Ne pas réintroduire de <link> vers Google Fonts.

   Fichiers variables (une seule graisse couvre toute la plage) sous licence
   SIL Open Font, qui autorise explicitement la redistribution.

   Deux découpages par famille : le navigateur ne télécharge latin-ext que
   s'il rencontre un caractère de cette plage. En français, jamais.
   ----------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0a0a0a;
  --surface: #151516;
  --surface-2: #1c1c1e;
  --border: rgba(255, 255, 255, 0.1);
  --text: #fafafa;
  --text-muted: #8a8a8a;
  --text-faint: #6b6b6b;
  --accent: #8a8cf0;
  --flame: #f97316;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, 'Segoe UI', sans-serif;

  --courbe: cubic-bezier(0.34, 1.56, 0.64, 1);
  --page: 1160px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grille d'ambiance, estompée sur les bords : donne un sol à la page sans
   jamais concurrencer le contenu. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: 64px 64px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 30%, #000 0%, transparent 78%);
}

/* Grain argentique : casse le dégradé numérique, très légèrement. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
}

/* Le contenu passe au-dessus de la grille */
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}

p {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* ------------------------------- Accès ------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0 0 12px 0;
}

.skip-link:focus {
  left: 0;
}

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

/* ------------------------------ En-tête ------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--page);
  margin: 0 auto;
  padding: 20px 24px;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
}

/* Taille imposée ici plutôt que laissée aux attributs HTML : la marque doit
   tenir face au titre du hero, qui monte à 68px. */
.brand img {
  width: 26px;
  height: 26px;
  opacity: 0.9;
}

/* Le nom est un logotype : capitales fortement interlettrées, comme une
   inscription — le mot vient du latin, la forme le rappelle. C'est
   l'espacement, pas la graisse, qui porte le caractère premium : ne pas
   « renforcer » CERNO en le passant en 700.

   Dans le texte courant, en revanche, on écrit « Cerno » en casse normale :
   des capitales au fil des phrases crieraient. */
.brand-nom {
  font-size: 18px;
  letter-spacing: 0.34em;
  /* L'interlettrage ajoute un blanc après la dernière lettre : on le reprend
     pour que le mot reste optiquement centré face au logo. */
  margin-right: -0.34em;
}

/* ------------------------------ Boutons ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 500;
  text-decoration: none;
  border-radius: 12px;
  padding: 12px 26px;
  transition: transform 0.15s ease, background-color 0.2s ease,
    border-color 0.2s ease;
}

.btn:active {
  transform: scale(0.98);
}

/* Bouton tactile : un liseré clair en haut, une ombre interne en bas, et une
   ombre portée qui s'allonge au survol — l'objet se soulève, puis s'enfonce. */
.btn-primary {
  color: #0a0a0a;
  background: linear-gradient(180deg, #9b9df6 0%, #7c7eea 100%);
  border: none;
  font-size: 16px;
  font-weight: 500;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -2px 5px rgba(0, 0, 0, 0.25) inset,
    0 2px 5px rgba(0, 0, 0, 0.35),
    0 14px 28px -8px rgba(94, 96, 214, 0.5);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #a8aaf8 0%, #8a8cf0 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -2px 5px rgba(0, 0, 0, 0.25) inset,
    0 4px 10px rgba(0, 0, 0, 0.4),
    0 22px 38px -10px rgba(94, 96, 214, 0.6);
}

.btn-primary:active {
  transform: translateY(1px);
  background: linear-gradient(180deg, #7c7eea 0%, #7375dd 100%);
  box-shadow:
    0 3px 7px rgba(0, 0, 0, 0.5) inset,
    0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-ghost {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  font-size: 15px;
  padding: 11px 22px;
  min-height: 44px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 6px 14px -6px rgba(0, 0, 0, 0.6);
}

.btn-ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28);
}

.cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Teinte muette plutôt que discrète : à 13px, #6b6b6b tombe sous le seuil
   de contraste de 4,5:1 sur le fond sombre. */
.cta-note {
  font-size: 13px;
  color: var(--text-muted);
}

/* ------------------------------- Hero -------------------------------- */
.hero {
  max-width: var(--page);
  margin: 0 auto;
  padding: 72px 24px 96px;
  display: grid;
  gap: 56px;
  align-items: center;
}

/* Matière du titre : dégradé blanc vers gris, plus deux ombres portées qui
   décollent les lettres du fond. Monochrome, jamais coloré. */
.hero h1,
.promise h2,
.final-cta h2 {
  background: linear-gradient(178deg, #ffffff 0%, #9b9ba3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* accélération matérielle : évite un rognage du texte sous WebKit */
  transform: translateZ(0);
  filter:
    drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.hero h1 {
  font-size: clamp(40px, 8vw, 68px);
}

.lead {
  font-size: clamp(16px, 2.4vw, 19px);
  color: var(--text-muted);
  max-width: 34ch;
  margin-top: 20px;
}

/* Baseline de marque, posée au-dessus du titre. C'est une phrase, pas une
   étiquette : interlettrage léger et casse d'origine respectée. La forcer en
   minuscules effacerait les capitales voulues, et l'espacer comme le logotype
   la rendrait illisible sur vingt-cinq signes. */
.tagline {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 22px;
}

.hero .cta-group {
  margin-top: 34px;
}

/* ------------------------- Sections illustrées ------------------------ */
.showcase {
  max-width: var(--page);
  margin: 0 auto;
  padding: 88px 24px;
  display: grid;
  gap: 56px;
  align-items: center;
}

.showcase-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 62ch;
}

.showcase-text h2 {
  font-size: clamp(28px, 4.4vw, 40px);
}

.showcase-text p {
  color: var(--text-muted);
  max-width: 58ch;
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--accent);
}

/* --------------------- Scène : téléphone + annotations ----------------
   La perspective vit sur la scène : c'est elle qui donne au téléphone une
   vraie profondeur plutôt qu'une simple inclinaison à plat. */
.stage {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1600px;
  perspective-origin: 50% 45%;
}

/* ---------------------------- Téléphone ------------------------------
   Matière : un châssis sombre, un liseré métallique clair sur la tranche
   (double inset), et deux ombres portées — une très diffuse pour asseoir
   l'objet, une plus serrée pour le décoller du fond. */
.phone {
  /* Épaisseur réelle de l'appareil, partagée par le dos et les deux tranches */
  --epaisseur: 34px;
  position: relative;
  width: 320px;
  height: 640px;
  flex: none;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(160deg, #26262b 0%, #101013 42%, #0a0a0c 100%);
  transform-style: preserve-3d;
  transform: rotateY(-19deg) rotateX(5deg) rotateZ(-0.8deg);
  box-shadow:
    /* tranche claire, puis noir profond : donne l'épaisseur du châssis */
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 4px rgba(0, 0, 0, 0.9),
    inset 0 2px 3px rgba(255, 255, 255, 0.14),
    inset 0 -3px 6px rgba(0, 0, 0, 0.9),
    /* ombres portées */
    0 90px 150px -50px rgba(0, 0, 0, 0.95),
    0 40px 70px -25px rgba(0, 0, 0, 0.8),
    0 12px 24px -8px rgba(0, 0, 0, 0.6);
}

.is-reversed .phone {
  transform: rotateY(19deg) rotateX(5deg) rotateZ(0.8deg);
}

/* ------------------ Épaisseur : extrusion en couches ------------------
   Une paroi plate ne peut pas épouser un coin arrondi : ses extrémités
   dépassent en angle vif. On empile donc des copies de la MÊME silhouette,
   décalées en profondeur. Chaque couche portant le même arrondi que la
   façade, la tranche suit le contour partout, coins compris.
   Les couches sont créées par le script (décoratif : leur absence sans
   JavaScript ne retire rien à la lecture). */
.phone-depth {
  position: absolute;
  inset: 0;
  border-radius: 46px;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: -1;
}

.phone-depth span {
  position: absolute;
  inset: 0;
  border-radius: 46px;
  background: var(--teinte);
  transform: translateZ(var(--z));
}

/* Boutons physiques : volume, silencieux, veille */
.phone-btn {
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4a4a52 0%, #17171a 100%);
  box-shadow:
    -2px 0 5px rgba(0, 0, 0, 0.85),
    inset -1px 0 1px rgba(255, 255, 255, 0.18),
    inset 1px 0 2px rgba(0, 0, 0, 0.85);
  transform: translateZ(-3px);
}

.phone-btn.gauche {
  left: -3px;
}

.phone-btn.droite {
  right: -3px;
  background: linear-gradient(270deg, #4a4a52 0%, #17171a 100%);
  box-shadow:
    2px 0 5px rgba(0, 0, 0, 0.85),
    inset 1px 0 1px rgba(255, 255, 255, 0.18),
    inset -1px 0 2px rgba(0, 0, 0, 0.85);
}

.phone-btn.silence { top: 116px; height: 26px; }
.phone-btn.vol-plus { top: 158px; height: 46px; }
.phone-btn.vol-moins { top: 216px; height: 46px; }
.phone-btn.veille { top: 172px; height: 72px; }

/* Reflet de verre : une bande diagonale très discrète sur la dalle */
.phone-glare {
  position: absolute;
  inset: 11px;
  border-radius: 36px;
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 26%,
    rgba(255, 255, 255, 0) 46%
  );
}

.phone-island {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 24px;
  border-radius: 14px;
  background: #000;
  z-index: 2;
}

.phone-status {
  position: absolute;
  top: 25px;
  left: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
  z-index: 2;
}

.phone-time {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
}

.phone-signals {
  display: flex;
  align-items: center;
  gap: 5px;
}

.sig {
  height: 9px;
  width: auto;
  fill: currentColor;
  opacity: 0.85;
}

.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 36px;
  background: var(--bg);
  padding: 62px 16px 74px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phone-screen.is-centered {
  align-items: center;
  text-align: center;
}

/* ------------------- Reproduction fidèle des écrans ------------------- */
.ui-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}

.ui-question {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-muted);
  text-align: center;
  margin: 6px 0;
}

.ui-question u {
  text-underline-offset: 2px;
}

.ui-section {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--text-muted);
  margin-top: 4px;
}

.ui-count {
  font-family: var(--font-display);
  letter-spacing: normal;
  color: var(--text);
}

.ui-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ui-list.is-locked {
  opacity: 0.4;
}

.ui-task {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 11px;
}

.ui-task.is-static {
  width: 100%;
}

.ui-check {
  flex: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--text-faint);
  border-radius: 4px;
}

.ui-check.is-checked {
  background: var(--accent);
  border-color: var(--accent);
}

.ui-text {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.ui-task.is-done .ui-text {
  color: var(--text-muted);
  text-decoration: line-through;
}

.ui-badge {
  flex: none;
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 9999px;
  padding: 3px 8px;
}

.ui-streak {
  flex: none;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-faint);
}

.ui-lockbar {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--text-muted);
}

.ui-lockicon {
  flex: none;
  width: 12px;
  height: 12px;
}

/* Chrono */
.ui-ring {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 14px auto 0;
}

.ui-ring svg {
  width: 100%;
  height: 100%;
}

.ring-track,
.ring-fill {
  fill: none;
  stroke-width: 5;
}

.ring-track {
  stroke: var(--border);
}

.ring-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  /* Périmètre r=52 : 2 x PI x 52 = 326.7 ; ici environ 62 % parcouru */
  stroke-dasharray: 326.7;
  stroke-dashoffset: 124;
}

.ui-ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ui-buttons {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.ui-btn {
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 20px;
  color: var(--text);
}

.ui-btn.is-primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* Progression */
.ui-streakline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 6px 0 4px;
}

.ui-flame {
  width: 17px;
  height: 17px;
  color: var(--flame);
}

.ui-streaknum {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}

.ui-streaktxt {
  font-size: 11px;
  color: var(--text-muted);
}

.ui-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding: 10px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.ui-chart span {
  flex: 1;
  height: var(--h);
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  opacity: 0.85;
}

.ui-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
}

.ui-counter strong {
  font-family: var(--font-display);
  font-size: 26px;
}

.ui-counter span {
  font-size: 11px;
  color: var(--text-muted);
}

/* Barre d'onglets du téléphone */
.phone-tabs {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 16px;
  display: flex;
  gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9999px;
}

.phone-tabs span {
  flex: 1;
  text-align: center;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 7px 2px;
  border-radius: 9999px;
}

.phone-tabs .is-active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

/* --------------------- Étiquettes et flèches courbes ------------------ */
.annotation {
  display: none;
}

/* ---------------------------- Le problème -----------------------------
   Réutilise la grille de .showcase : le relevé de journée prend simplement
   la place qu'occupe le téléphone dans les autres sections. */
.punch {
  color: var(--text) !important;
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  margin-top: 6px;
}

.ledger {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.ledger-titre {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.ledger ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ledger li {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14.5px;
}

.ledger li:last-child {
  border-bottom: 0;
}

.ledger-h {
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.ledger-quoi {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.25);
}

.ledger-etat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
}

/* La seule ligne qui comptait : ni barrée, ni éteinte. Tout le contraste de
   la carte se joue sur cet unique écart. */
.ledger-rate {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--border) !important;
}

.ledger-rate .ledger-quoi {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

.ledger-rate .ledger-etat {
  color: var(--flame);
}

/* ---------------------------- La promesse ----------------------------- */
.promise {
  max-width: var(--page);
  margin: 0 auto;
  padding: 48px 24px 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.promise h2 {
  font-size: clamp(32px, 6vw, 54px);
  max-width: 16ch;
}

.promise p {
  color: var(--text-muted);
  max-width: 52ch;
  margin-top: 6px;
}

/* ---------------------------- Preuve ---------------------------------- */
.proof {
  max-width: var(--page);
  margin: 0 auto;
  padding: 88px 24px;
}

.proof h2 {
  font-size: clamp(28px, 4.4vw, 40px);
  margin-top: 14px;
}

.proof-grid {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.proof-grid li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 24px;
}

.proof-grid h3 {
  font-size: 17px;
  margin-bottom: 10px;
}

.proof-grid p {
  font-size: 14.5px;
  color: var(--text-muted);
}

/* L'absence de témoignages est assumée à voix haute plutôt que masquée : le
   cadre en pointillés dit visuellement « place réservée ». */
.proof-note {
  margin-top: 22px;
  padding: 20px 24px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 62ch;
}

/* --------------------------- Les objections --------------------------- */
.objections {
  max-width: var(--page);
  margin: 0 auto;
  padding: 88px 24px;
}

.objections h2 {
  font-size: clamp(28px, 4.4vw, 40px);
  margin-top: 14px;
}

.objection-list {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.objection-list li {
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

/* L'objection est citée telle qu'on se la formule : voix du lecteur, donc
   traitée comme une réplique et non comme un titre de section. */
.objection-list h3 {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.objection-list p {
  color: var(--text);
  max-width: 68ch;
}

/* ------------------------------ CTA final ----------------------------- */
.final-cta {
  max-width: var(--page);
  margin: 0 auto;
  padding: 96px 24px 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.final-cta h2 {
  font-size: clamp(30px, 5.4vw, 48px);
}

.final-cta p {
  color: var(--text-muted);
}

.final-cta .cta-group {
  align-items: center;
  margin-top: 16px;
}

/* ------------------------------ Pied de page -------------------------- */
.site-footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 28px 24px 40px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.footer-marque {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--text);
}

.footer-marque span {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
}

.footer-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.site-footer a {
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
}

/* ========================== Pages légales =============================
   Colonne unique et étroite : ces pages se lisent, elles ne se parcourent
   pas. Aucune animation, aucune révélation au défilement — un document
   juridique doit rester lisible même si le script ne s'exécute pas. */
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.legal h1 {
  font-size: clamp(30px, 5vw, 44px);
  margin-top: 14px;
}

.legal-chapeau {
  font-size: clamp(16px, 2.2vw, 18.5px);
  color: var(--text-muted);
  margin-top: 20px;
  max-width: 58ch;
}

.legal-date {
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 18px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--border);
}

.legal-bloc {
  margin-top: 44px;
}

.legal-bloc h2 {
  font-size: clamp(20px, 3vw, 25px);
  margin-bottom: 16px;
}

.legal-bloc h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 26px 0 10px;
}

.legal-bloc p {
  color: var(--text-muted);
  margin-bottom: 14px;
  max-width: 66ch;
}

.legal-bloc p strong {
  color: var(--text);
  font-weight: 500;
}

.legal-liste {
  margin: 0 0 16px;
  padding-left: 20px;
  color: var(--text-muted);
  max-width: 66ch;
}

.legal-liste li {
  margin-bottom: 8px;
}

/* Remarque secondaire : rentrée et adoucie, pour qu'on la distingue du
   corps de l'argumentation sans la reléguer sous le seuil de contraste. */
.legal-note {
  border-left: 2px solid var(--border);
  padding-left: 16px;
  font-size: 15px;
}

.legal code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.88em;
  background: var(--surface-2);
  color: var(--text);
  padding: 2px 7px;
  border-radius: 4px;
}

/* Marqueur de champ non renseigné : volontairement criard. Il DOIT sauter
   aux yeux tant qu'il reste, et disparaître avant toute publication. */
.a-completer {
  background: var(--flame);
  color: #0a0a0a;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}

.table-scroll {
  overflow-x: auto;
  margin: 20px 0 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.legal-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.legal-table th {
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
}

.legal-table tbody tr:last-child td {
  border-bottom: 0;
}

.legal-table td {
  color: var(--text-muted);
}

.legal-table td:first-child {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}

.legal a {
  color: var(--accent);
}

.legal-retour {
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 15px;
}

/* L'en-tête devient cliquable sur les pages légales : on neutralise le
   soulignement sans toucher au logotype lui-même. */
.brand-lien {
  text-decoration: none;
  color: var(--text);
}

/* ======================= Révélation au défilement =======================
   Masqué uniquement si le JavaScript est actif : sans lui, tout reste
   visible plutôt que de disparaître définitivement. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.55s ease,
    transform 0.55s var(--courbe);
  transition-delay: calc(var(--d, 0) * 70ms);
}

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

/* ===================== Grand écran : deux colonnes ===================== */
@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1fr 420px;
    gap: 64px;
    padding: 96px 24px 120px;
  }

  .showcase {
    grid-template-columns: 1fr 460px;
    gap: 72px;
    padding: 112px 24px;
  }

  /* Inversé : la scène passe en première colonne. Les largeurs suivent, sinon
     le téléphone hériterait de la colonne large et le texte de l'étroite. */
  .showcase.is-reversed {
    grid-template-columns: 460px 1fr;
  }

  .showcase.is-reversed .showcase-text {
    order: 2;
  }

  .showcase.is-reversed .stage {
    order: 1;
  }

  .proof-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .objection-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 44px;
  }

  /* Le relevé de journée occupe la colonne du téléphone, sans la perspective */
  .problem .ledger {
    align-self: center;
  }

  /* Les annotations n'apparaissent que là où il y a la place de les lire */
  .annotation {
    display: block;
    position: absolute;
    width: 170px;
    height: 130px;
    z-index: 3;
  }

  .anno-a { left: -66px; top: 235px; }
  .anno-b { right: -96px; top: 80px; }
  .anno-c { right: -96px; top: 55px; }
  .anno-d { right: -96px; top: 46px; }
  .anno-e { right: -96px; top: 165px; }

  .anno-arrow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .anno-line,
  .anno-head {
    fill: none;
    stroke: var(--text-faint);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .anno-label {
    position: absolute;
    top: 0;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    color: #0a0a0a;
    background: #f2f0ec;
    border-radius: 9999px;
    padding: 6px 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
    transform: translateY(-100%);
  }

  .anno-a .anno-label {
    left: 0;
  }

  .anno-b .anno-label,
  .anno-c .anno-label,
  .anno-d .anno-label,
  .anno-e .anno-label {
    right: 0;
  }

  /* Tracé progressif : la flèche se dessine, l'étiquette suit */
  /* --len est posé par le script depuis la longueur réelle du tracé : sans
     cela l'animation passerait un temps mort avant que le trait apparaisse. */
  .js .anno-line {
    stroke-dasharray: var(--len, 320);
    stroke-dashoffset: var(--len, 320);
    transition: stroke-dashoffset 0.75s ease 0.15s;
  }

  .js .anno-head,
  .js .anno-label {
    opacity: 0;
    transition: opacity 0.3s ease 0.85s;
  }

  .js .anno-label {
    transition:
      opacity 0.4s ease 0.95s,
      transform 0.4s var(--courbe) 0.95s;
    transform: translateY(-100%) scale(0.92);
  }

  .js .annotation.is-visible .anno-line {
    stroke-dashoffset: 0;
  }

  .js .annotation.is-visible .anno-head {
    opacity: 1;
  }

  .js .annotation.is-visible .anno-label {
    opacity: 1;
    transform: translateY(-100%) scale(1);
  }
}

/* Plus de marge latérale disponible : on écarte un peu les étiquettes */
@media (min-width: 1160px) {
  .anno-a { left: -96px; }
  .anno-b { right: -126px; }
  .anno-c { right: -126px; }
  .anno-d { right: -126px; }
  .anno-e { right: -126px; }
}

/* ========================== Petits écrans ============================= */
@media (max-width: 899px) {
  .hero {
    padding: 44px 20px 64px;
    gap: 44px;
  }

  .showcase,
  .proof,
  .objections {
    padding: 64px 20px;
    gap: 40px;
  }

  .promise {
    padding: 32px 20px 64px;
  }

  .ledger {
    padding: 20px 20px 6px;
  }

  .ledger li {
    grid-template-columns: 54px 1fr auto;
    gap: 10px;
    font-size: 13.5px;
  }

  .final-cta {
    padding: 72px 20px 88px;
  }

  .site-header {
    padding: 14px 20px;
  }

  /* Le cadre disparaît : le contenu prime sur la mise en scène */
  .phone {
    width: 100%;
    max-width: 340px;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    transform: none;
  }

  .is-reversed .phone {
    transform: none;
  }

  /* Sans châssis, le matériel n'a plus lieu d'être */
  .phone-island,
  .phone-status,
  .phone-btn,
  .phone-glare,
  .phone-depth {
    display: none;
  }

  .phone-screen {
    height: auto;
    border-radius: 0;
    padding: 0 0 68px;
    background: none;
  }

  .phone-tabs {
    left: 0;
    right: 0;
    bottom: 0;
  }
}

/* ======================= Mouvement réduit ============================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal],
  .js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .anno-line {
    stroke-dashoffset: 0;
    transition: none;
  }

  .js .anno-head,
  .js .anno-label {
    opacity: 1;
    transition: none;
  }

  .js .anno-label {
    transform: translateY(-100%);
  }

  .btn:active,
  .btn-primary:hover,
  .btn-ghost:hover {
    transform: none;
  }

  /* Les téléphones gardent leur volume mais cessent de suivre le curseur */
  .phone {
    transition: none;
  }
}

/* Transition douce de l'inclinaison, sans jamais animer la mise en page.
   Courte : au-delà, la flèche redessinée à chaque image prendrait de
   l'avance sur le téléphone et semblerait décrochée. */
.phone {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}