/* Cadran — la peau de WhatsApp, prise sur l'application et sur whatsapp.com.
 *
 * Le site est CLAIR par défaut : whatsapp.com est une page crème #FAF5EF, du
 * texte quasi noir et du vert #25D366 réservé aux boutons et au logo. Le thème
 * sombre existe toujours, il est simplement devenu l'alternative.
 *
 *   Vert de marque   #25D366   boutons, micro, pastilles
 *   Vert lisible     #008069   le vert en TEXTE — #25D366 sur crème fait 1,7:1
 *   Encre            #111B21 / #54656F / #8696A0
 *   Crème            #FAF5EF, panneaux blancs, second plan #F2EDE6
 *
 * Le téléphone garde ses couleurs propres, quelle que soit celle de la page :
 * barre claire #F7F5F3, papier peint #EFE7DE à motifs, bulle entrante blanche,
 * bulle sortante #DCF8C6, deux coches #34B7F1. Un iPhone posé sur une page
 * sombre reste un iPhone clair.
 *
 * Une seule règle qui ne se négocie pas : tout texte posé sur un aplat d'accent
 * s'écrit dans `--on-accent`, jamais en blanc. Du blanc sur #25D366 donne
 * 1,8:1 ; l'encre y tient 9,5:1, et c'est ce que fait le bouton « Download »
 * de whatsapp.com.
 */

@import url("/fonts/fonts.css");

:root {
  --bg:      #faf5ef;
  --bg-2:    #ffffff;
  --card:    #ffffff;
  --card-2:  #f2ede6;

  --txt:     #111b21;
  --dim:     #54656f;
  --faint:   #8696a0;

  --accent:     #25d366;   /* WhatsApp Green — aplats seulement */
  --accent-ink: #008069;   /* le même vert, en version lisible sur crème */
  --accent-deep: #128c7e;
  --on-accent:  #111b21;

  --amber:   #b26a00;

  /* Les quatre teintes de la page. Les trois premières sont dans la charte
     WhatsApp ; l'ambre porte déjà l'état « à traiter » du tableau de bord.
     Chacune a une version ENCRE, lisible en texte sur le crème — le bleu
     #34B7F1 brut n'y tient que 1,9:1. */
  --c-green: #25d366;  --c-green-ink: #008069;
  --c-teal:  #128c7e;  --c-teal-ink:  #0e7b6f;
  --c-blue:  #34b7f1;  --c-blue-ink:  #0a7ba8;
  --c-amber: #f0a03c;  --c-amber-ink: #9a5b00;

  /* Fonds de section : le crème de base, une menthe et un ciel. */
  --tint-mint: #eaf7ef;
  --tint-sky:  #eaf4fc;

  --line:    rgba(17, 27, 33, .10);
  --line-2:  rgba(17, 27, 33, .17);

  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --r:   18px;
  --r-s: 12px;
  --max: 1320px;
  --gutter: 24px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

:root[data-theme="dark"] {
  --bg:      #0b141a;
  --bg-2:    #111b21;
  --card:    #182229;
  --card-2:  #202c33;

  --txt:     #e9edef;
  --dim:     #8696a0;
  --faint:   #667781;

  --accent-ink: #25d366;   /* sur le fond sombre, le vert de marque est lisible */
  --on-accent:  #0b141a;

  --amber:   #e0a44a;
  --c-green-ink: #25d366;
  --c-teal-ink:  #2ac4ad;
  --c-blue-ink:  #34b7f1;
  --c-amber-ink: #e0a44a;
  --tint-mint: #101f1a;
  --tint-sky:  #0e1a24;
  --line:    rgba(233, 237, 239, .12);
  --line-2:  rgba(233, 237, 239, .20);
  /* ── La palette de la maison ───────────────────────────────
     Cadran, Kaptor et growdn.com sont une seule suite : ils partagent le
     violet-rose de la marque. Le vert reste celui de WhatsApp la ou il
     designe le reseau — le telephone, le logo — jamais comme couleur de
     produit.

     Ces lignes sont en fin de bloc a dessein : declarees en tete, elles
     etaient ecrasees par les valeurs qui suivaient. */
  --bg:      #0a0a1a;
  --bg-2:    #050510;
  --card:    #14142a;
  --card-2:  #1c1c3a;
  --accent:      #8b5cf6;
  --accent-ink:  #a78bfa;
  --accent-deep: #7c3aed;
  --on-accent:   #ffffff;
  --line:   rgba(139, 92, 246, .18);
  --line-2: rgba(139, 92, 246, .34);
  --tint-mint: #14142a;
  --tint-sky:  #14142a;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 500 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

::selection { background: rgba(37, 211, 102, .3); }

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; margin: 0; }
h3, h4 { font-weight: 700; }
p { margin: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 780px; }
.dim { color: var(--dim); }
.grad-text { color: var(--accent-ink); }

/* ── Navigation ──────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.02em;
}
.logo-mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--accent);
  color: #111b21;
  font-size: 17px;
}

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links > a:not(.btn) { font-size: 14.5px; font-weight: 600; color: var(--dim); transition: color .2s; }
.nav-links > a:not(.btn):hover,
.nav-links > a.is-active { color: var(--txt); }

.nav-burger { display: none; background: none; border: 0; }

#langSelect {
  appearance: none;
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font: 600 12.5px var(--mono);
  cursor: pointer;
}
.theme-toggle {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--dim);
  font-size: 16px;
  cursor: pointer;
}

/* ── Boutons ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform .2s var(--ease), background .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
/* Le bouton vert de whatsapp.com : aplat #25D366, texte encre. */
.btn--grad { background: var(--accent); color: #111b21; }
.btn--grad:hover { background: #1fbe5a; }
.btn--ghost { border-color: var(--line-2); color: var(--txt); }
.btn--ghost:hover { background: var(--card-2); }
.btn--sm { padding: 9px 17px; font-size: 14px; }
.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn--full { width: 100%; margin-top: 22px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
}
.badge .i { font-size: 15px; color: var(--accent-ink); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.dot--live { animation: pulse 2.2s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ── Sections ────────────────────────────────────────────── */

.section { padding: 76px 0; }
/* Une page d'un seul aplat se lit comme un document. Trois fonds qui
   alternent lui donnent un rythme, et la couleur arrive par le fond plutôt
   que par des taches posées dessus. */
.section--band { background: var(--tint-mint); border-block: 1px solid var(--line); }
.section--sky  { background: var(--tint-sky);  border-block: 1px solid var(--line); }

.head { max-width: 700px; margin: 0 auto 40px; text-align: center; }
.head h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 16px 0 0;
}
.head .lede { margin-top: 14px; font-size: 16.5px; }
.lede { font-size: 17.5px; line-height: 1.6; color: var(--dim); }

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ── Hero ────────────────────────────────────────────────── */
/* Un seul axe : tout est centré, y compris le plan produit. Le vide venait
 * d'une colonne de texte à gauche et d'un petit téléphone flottant à droite —
 * deux masses inégales de part et d'autre d'un axe qui n'existait pas. */

/* `100svh` et non `100vh` : sur mobile, `vh` compte la barre d'adresse qui
 * se rétracte, et le premier écran dépassait de sa propre hauteur. */
.hero {
  display: grid;
  align-items: center;
  position: relative;
  /* La nappe deborde volontairement de chaque cote : sans cette coupe, elle
     ajoutait 137 px de defilement horizontal. */
  overflow: hidden;
  /* Moins la hauteur du bandeau de suite quand il est present : sans cette
     soustraction, le premier ecran mesure 100svh + 36 px et deborde de la
     fenetre d exactement cette hauteur. La variable vaut 0 hors de la
     suite, la page est alors inchangee. */
  min-height: calc(100svh - var(--suite-bar, 0px));
  padding: 70px 0 8px;
}
/* Deux nappes, vert à droite et bleu à gauche, très étalées : elles donnent
   une couleur au premier écran sans qu'aucun texte ne passe dessus. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 56% at 80% 18%, rgba(37, 211, 102, .34), transparent 66%),
    radial-gradient(44% 50% at 8% 40%, rgba(52, 183, 241, .26), transparent 68%),
    radial-gradient(34% 40% at 46% 96%, rgba(18, 140, 126, .16), transparent 70%);
}
/* Deux colonnes : la promesse à gauche, le téléphone à droite. Le tableau de
   bord n'est plus ici — il a sa section, juste en dessous. */
.hero-inner {
  display: grid;
  /* La geometrie de la page Instagram, relevee a l ecran : conteneur de
     1200, telephone pose a x=968. Cadran avait un conteneur de 1320 et une
     colonne de 268 — son premier ecran ne se superposait ni a growdn.com ni
     a Kaptor. */
  grid-template-columns: minmax(0, 717px) 280px;
  gap: 107px;
  justify-content: start;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}
/* Le conteneur de la page fait 1320 ; le premier ecran, lui, se cale sur les
   1200 des trois autres pages de la maison.

   `width: 100%` n est pas decoratif : la grille a des colonnes fixes, et sans
   lui le conteneur se retractait a la largeur de son contenu (1104 + 48 de
   marge interne = 1152). Il demarrait alors a x=144 au lieu de x=120, et tout
   le premier ecran de Cadran etait decale de 24 px par rapport aux trois
   autres pages. */
.hero .wrap { max-width: 1200px; width: 100%; }
/* Aligné à gauche : centré dans une colonne de 760 px, à côté d'un seul
   appareil, le texte flotterait. */
/* La colonne de texte prend la largeur : a 34em elle laissait un vide de
   240 px entre elle et le telephone. */
.hero-head { max-width: 42em; text-align: left; }
.hero h1 {
  font-size: clamp(34px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.035em;
  margin: 16px 0 0;
  text-wrap: balance;
}
.hero .lede { margin-top: 18px; max-width: 36em; font-size: 17.5px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* Boutons resserres : sur une colonne de 450 px, la taille /lg les faisait
   passer sur deux rangs et volait au plan produit la hauteur qui lui
   manquait. */
.hero-cta .btn--lg { padding: 14px 24px; font-size: 15.5px; }
/* Une par ligne : en ligne, les trois promesses passaient sur deux rangs et
   volaient au plan produit la hauteur qui lui manquait. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--dim);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust .i { font-size: 17px; color: var(--accent-ink); }

/* Le bouton suit le curseur de deux ou trois pixels. C'est peu, et c'est ce
   qui fait la différence entre une page qui répond et une page qui subit. */
.magnet { transform: translate(var(--dx, 0), var(--dy, 0)); }
.magnet:hover { transform: translate(var(--dx, 0), calc(var(--dy, 0px) - 1px)); }

/* ── Le plan produit ─────────────────────────────────────── */

.stage { position: relative; }
/* Une seule nappe, derrière le plan. Pas de `filter: blur()` : un flou de
   48 px sur une surface de cette taille se recompose à chaque image de
   défilement. Un dégradé radial doux fait la même chose pour rien. */
.stage-glow {
  position: absolute;
  inset: -6% 4% 6%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 62% at 50% 42%, rgba(37, 211, 102, .16), transparent 72%);
}

.dash {
  position: relative;
  z-index: 1;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-2);
  box-shadow: 0 30px 70px rgba(17, 27, 33, .16), 0 2px 6px rgba(17, 27, 33, .06);
  overflow: hidden;
}
/* Une ligne de synchronisation balaie la bordure haute. Elle ne dit rien de
   plus que la pastille « Live », mais elle le dit sans qu'on ait à lire. */
.dash::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 32%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-green), transparent);
  animation: dash-scan 3.6s linear infinite;
}
@keyframes dash-scan {
  from { transform: translateX(-110%); }
  to   { transform: translateX(420%); }
}

/* Le ressaut d'une tuile dont le chiffre vient de changer. `transform` seul :
   une tuile qui grandit ne pousse pas ses voisines. */
.tile.is-bump { animation: tile-bump .55s var(--ease); }
@keyframes tile-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
:root[data-theme="dark"] .dash { box-shadow: 0 40px 90px rgba(0, 0, 0, .5); }

.dash-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--card-2);
}
.dash-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(134, 150, 160, .35); }
.dash-url {
  margin: 0 auto;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--bg);
  font: 500 12px var(--mono);
  color: var(--faint);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dim);
}

.dash-body { display: grid; grid-template-columns: 128px 1fr; }
.dash-side {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px 8px;
  border-right: 1px solid var(--line);
}
.dash-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding: 0 6px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
}
.logo-mark--sm { width: 24px; height: 24px; border-radius: 7px; font-size: 13px; }
.dash-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 9px;
  font-size: 12.5px;
  color: var(--dim);
}
.dash-nav .i { font-size: 15px; }
.dash-nav.is-on { background: rgba(37, 211, 102, .13); color: var(--txt); font-weight: 700; }

.dash-main { display: grid; gap: 11px; padding: 14px; }
.dash-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
/* Les quatre chiffres du tableau de bord prennent les quatre teintes : c est
   le premier bloc de couleur que le visiteur voit, avant meme de lire. */
.tile {
  padding: 10px 12px 9px;
  border: 1px solid color-mix(in srgb, var(--c, var(--c-green)) 22%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--c, var(--c-green)) 9%, var(--bg));
}
.dash-tiles .tile:nth-child(1) { --c: var(--c-green); --c-ink: var(--c-green-ink); }
.dash-tiles .tile:nth-child(2) { --c: var(--c-teal);  --c-ink: var(--c-teal-ink); }
.dash-tiles .tile:nth-child(3) { --c: var(--c-blue);  --c-ink: var(--c-blue-ink); }
.dash-tiles .tile:nth-child(4) { --c: var(--c-amber); --c-ink: var(--c-amber-ink); }
.tile b { color: var(--c-ink, var(--txt)); }
/* Une seule ligne : « Consultations booked » passait sur deux et desalignait
   les quatre tuiles. */
.tile-k { display: block; font-size: 11px; color: var(--dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile b {
  display: block;
  margin: 4px 0 1px;
  font-family: var(--display);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--c, var(--txt));
}
.tile-u { font-size: 10.5px; color: var(--faint); }

.dash-panel { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* Une seule ligne : en francais, « repondu automatiquement » passait sur deux
   et changeait la hauteur du cadre d une langue a l autre. */
.dash-panel-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 13px;
  white-space: nowrap;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.dash-panel-h b { font-size: 12.5px; }
.dash-panel-h span { overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--faint); }
/* `minmax(0, 1fr)` : une piste de grille vaut `min-content` par défaut, et
   la ligne refusait de rétrécir sous sa largeur naturelle — l'étiquette de
   droite sortait du panneau et se faisait couper. */
/* Hauteur FIXE, pas un minimum : les lignes arrivent une par une et le cadre
   grandissait à chaque nouvelle. Trois lignes de 39 px. */
.dash-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  /* Trois lignes de 52 px : mesure au rendu, pas estimee. */
  height: 156px;
  overflow: hidden;
}
.dash-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border-top: 1px solid var(--line);
  animation: row-in .38s var(--ease);
}
.dash-row:first-child { border-top: 0; }
.dash-av {
  display: grid;
  place-items: center;
  width: 25px; height: 25px;
  flex: none;
  border-radius: 50%;
  background: var(--card-2);
  font: 700 10px var(--display);
  color: var(--dim);
}
.dash-row > * { min-width: 0; }
.dash-txt { min-width: 0; }
.dash-txt b {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}
.dash-txt span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11.5px;
  color: var(--faint);
}
.dash-meta { margin-left: auto; display: grid; justify-items: end; gap: 4px; flex: none; }
.dash-meta i { font-style: normal; font: 500 10.5px var(--mono); color: var(--faint); white-space: nowrap; }
.dash-tag { padding: 2px 9px; border-radius: 999px; font: 700 10.5px var(--body); white-space: nowrap; }
.dash-tag--ok   { background: rgba(37, 211, 102, .16); color: var(--accent-ink); }
.dash-tag--warn { background: rgba(178, 106, 0, .14); color: var(--amber); }
:root[data-theme="dark"] .dash-tag--warn { background: rgba(224, 164, 74, .16); }

/* Le telephone occupe le coin bas droit du plan : les colonnes de droite se
   reservent la place, sinon leurs etiquettes disparaissent dessous. */
@media (min-width: 1041px) {
  .dash-main { padding-right: 14px; }
}

.dash-chart { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
.dash-chart u {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 5px 5px 2px 2px;
  background: var(--accent);
  opacity: .85;
  transform-origin: bottom;
  animation: bar-in .8s var(--ease) backwards;
}
.dash-chart u:nth-child(2n)   { animation-delay: .06s; }
.dash-chart u:nth-child(3n)   { animation-delay: .12s; }
.dash-chart u:nth-child(4n)   { animation-delay: .18s; }

@keyframes row-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bar-in {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}


/* ── Étape 2 : le tableau de bord ─────────────────────────── */
/* Seul dans sa section, il n'a plus rien à céder : barre latérale visible,
   quatre tuiles sur une rangée, quatre lignes de boîte de réception. */

.dash-stage { position: relative; }
#dashboard .dash-body { grid-template-columns: 196px 1fr; }
#dashboard .dash-side { gap: 3px; padding: 16px 12px; }
#dashboard .dash-logo { margin-bottom: 14px; font-size: 15px; }
#dashboard .dash-nav { padding: 9px 10px; font-size: 13.5px; }
#dashboard .dash-main { padding: 18px; gap: 14px; }
#dashboard .dash-tiles { grid-template-columns: repeat(4, 1fr); gap: 12px; }
#dashboard .tile { padding: 14px 16px 13px; border-radius: 14px; }
#dashboard .tile-k { font-size: 12px; }
#dashboard .tile b { margin: 6px 0 2px; font-size: 30px; }
#dashboard .tile-u { font-size: 11.5px; }
#dashboard .dash-panel-h { padding: 11px 16px; }
#dashboard .dash-panel-h b { font-size: 14px; }
#dashboard .dash-panel-h span { font-size: 12px; }
/* Quatre lignes de 61 px : le lettrage est plus grand dans cette section que
   dans l ancien cadre du hero, les lignes le sont donc aussi. */
#dashboard .dash-rows { height: 244px; }
#dashboard .dash-row { padding: 9px 16px; }
#dashboard .dash-av { width: 30px; height: 30px; font-size: 11px; }
#dashboard .dash-txt b { font-size: 13.5px; }
#dashboard .dash-txt span { font-size: 12.5px; }

/* ── L'iPhone ────────────────────────────────────────────── */
/* Un bezel NOIR, une seule arête claire à l'intérieur. Le dégradé titane
 * précédent faisait un halo pâle sur le crème : sur une page claire, ce qui
 * lit comme du métal, c'est le contraste, pas la couleur. */

.phone {
  position: relative;
  z-index: 3;
  /* 280 : la largeur du telephone des deux autres pages de la maison
     (growdn.com et Kaptor). A 268 il paraissait plus etroit qu eux, pose
     cote a cote dans la meme suite. */
  width: 280px;
  padding: 9px;
  border-radius: 52px;
  background: #0d1116;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .16),
    0 30px 60px rgba(17, 27, 33, .34),
    0 4px 12px rgba(17, 27, 33, .2);
}
.phone-island {
  position: absolute;
  top: 22px; left: 50%;
  z-index: 5;
  width: 74px; height: 23px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #05080a;
}
.phone-screen {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  /* 498 : la hauteur d ecran des deux autres telephones de la maison. Avec
     le cadre, l appareil mesure alors 280 x 516, comme eux. La mention de
     conformite reste sous l appareil, elle n en fait pas partie. */
  height: 498px;
  border-radius: 44px;
  overflow: hidden;
  background: #efe7de;
  color: #111b21;
}

.wa-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 17px 6px;
  background: #f7f5f3;
  font: 700 12.5px/1 var(--body);
}
.wa-status-ic { display: inline-flex; align-items: center; gap: 4px; }
.wa-status-ic svg { height: 10px; width: auto; }

.wa-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 14px 10px;
  background: #f7f5f3;
  border-bottom: 1px solid rgba(17, 27, 33, .07);
}
.wa-back { font-size: 19px; color: #111b21; }
.wa-av {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: #d7dbdd;
  box-shadow: 0 0 0 2px #25d366;
  color: #54656f;
  font-size: 17px;
}
/* Une seule ligne chacun : « Compte professionnel » passait sur deux en
   français et poussait l'icône d'appel hors de l'écran. */
.wa-who { margin-right: auto; min-width: 0; }
.wa-who b,
.wa-who small {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wa-who b { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.wa-who small { font-size: 11.5px; color: #667781; }
.wa-call {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  background: #ffffff;
  color: #111b21;
  font-size: 16px;
}

/* Le papier peint : les griffonnages de WhatsApp, réduits à quelques traits.
   Un motif SVG en data-URI, aucune requête, et il tuile proprement. */
.wa-thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  padding: 12px 10px;
  overflow: hidden;
  background-color: #efe7de;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e2d7c9' stroke-width='1' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M26 5h7v6h-7z'/%3E%3Cpath d='M48 11c-2.4-3 2-5.4 3-2.4 1-3 5.4-.6 3 2.4l-3 3.4z'/%3E%3Cpath d='M6 26l3 5H3z'/%3E%3Cpath d='M24 24v7M20.5 27.5h7'/%3E%3Ccircle cx='47' cy='28' r='3.4'/%3E%3Cpath d='M7 46h8M7 50h5'/%3E%3Cpath d='M28 44l3.6 3.6L28 51.2l-3.6-3.6z'/%3E%3Cpath d='M45 45h8v6h-8z'/%3E%3C/g%3E%3C/svg%3E");
}

.wa-msg {
  max-width: 84%;
  padding: 6px 9px 6px 10px;
  border-radius: 15px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 1px .5px rgba(17, 27, 33, .13);
  animation: wa-in .2s var(--ease);
}
.wa-msg--in  { align-self: flex-start; background: #ffffff; border-top-left-radius: 4px; }
.wa-msg--out { align-self: flex-end;   background: #dcf8c6; border-top-right-radius: 4px; }

/* L'heure flotte à droite DANS la bulle : elle se pose au bout de la dernière
   ligne si la place suffit, et descend d'une ligne sinon. C'est exactement le
   comportement de l'application, et il ne s'obtient pas autrement. */
.wa-meta {
  float: right;
  margin: 6px 0 -2px 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: rgba(17, 27, 33, .45);
}
.wa-ticks { width: 14px; height: 14px; color: #34b7f1; stroke-width: 2.6; }

.wa-day {
  align-self: center;
  margin: 5px 0;
  padding: 4px 11px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px .5px rgba(17, 27, 33, .13);
  font-size: 10.5px;
  font-weight: 700;
  color: #54656f;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.wa-msg--typing { display: flex; gap: 4px; padding: 12px 14px; }
.wa-msg--typing i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(17, 27, 33, .32);
  animation: wa-dot 1.05s infinite var(--ease);
}
.wa-msg--typing i:nth-child(2) { animation-delay: .16s; }
.wa-msg--typing i:nth-child(3) { animation-delay: .32s; }

.wa-input {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px 13px;
  background: #f7f5f3;
}
.wa-plus, .wa-cam { font-size: 21px; color: #111b21; flex: none; }
.wa-field {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  height: 33px;
  padding: 0 11px;
  border-radius: 999px;
  background: #ffffff;
  color: #54656f;
  font-size: 17px;
}
.wa-mic {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: #21c063;
  color: #ffffff;
  font-size: 18px;
}

@keyframes wa-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wa-dot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: .9; transform: translateY(-3px); }
}

.phone-note,
.dash-note {
  margin: 14px auto 0;
  max-width: 34em;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--faint);
}
/* Sous le téléphone, la mention reste dans la largeur de l'appareil. */
.phone-note { max-width: 268px; margin-top: 12px; }

/* Le numéro d'étape, dans la pastille de section. */
.step-tag {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--accent);
  color: #111b21;
  font: 800 11px var(--display);
}

/* ── Bandeau défilant ────────────────────────────────────── */

.ticker {
  margin-top: 0;
  padding: 15px 0;
  overflow: hidden;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-run {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: ticker 38s linear infinite;
}
.ticker-run span {
  padding: 7px 16px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  background: color-mix(in srgb, var(--c, var(--c-green)) 13%, transparent);
  color: var(--c-ink, var(--c-green-ink));
}
.ticker-run span:nth-child(4n+1) { --c: var(--c-green); --c-ink: var(--c-green-ink); }
.ticker-run span:nth-child(4n+2) { --c: var(--c-blue);  --c-ink: var(--c-blue-ink); }
.ticker-run span:nth-child(4n+3) { --c: var(--c-teal);  --c-ink: var(--c-teal-ink); }
.ticker-run span:nth-child(4n+4) { --c: var(--c-amber); --c-ink: var(--c-amber-ink); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ── Cartes fonctions ────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card {
  padding: 28px 22px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(17, 27, 33, .08); }
/* La respiration est portée par l'icône seule, jamais par la carte : une carte
   qui bouge décale son voisinage, une icône ne décale rien. */
/* `--c` porte la teinte de la carte : une seule déclaration par carte colore
   l'icône, son fond, son halo de respiration et le filet du survol. */
.card-ic {
  display: grid; place-items: center;
  width: 50px; height: 50px;
  margin: 0 auto;
  border-radius: 15px;
  background: color-mix(in srgb, var(--c, var(--c-green)) 22%, transparent);
  color: var(--c-ink, var(--accent-ink));
  font-size: 24px;
  animation: ic-breathe 6s var(--ease) infinite;
  transition: transform .3s var(--ease), background .3s;
}
.cards .card:nth-child(1) { --c: var(--c-green); --c-ink: var(--c-green-ink); }
.cards .card:nth-child(2) { --c: var(--c-blue);  --c-ink: var(--c-blue-ink); }
.cards .card:nth-child(3) { --c: var(--c-teal);  --c-ink: var(--c-teal-ink); }
.cards .card:nth-child(4) { --c: var(--c-amber); --c-ink: var(--c-amber-ink); }
.cards .card:nth-child(5) { --c: var(--c-green); --c-ink: var(--c-green-ink); }
.cards .card:nth-child(6) { --c: var(--c-blue);  --c-ink: var(--c-blue-ink); }
/* Un filet de la couleur de la carte, en haut, révélé au survol. */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: var(--r) var(--r) 0 0;
  background: var(--c, var(--c-green));
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.card:hover::before { opacity: 1; }
/* Décalage par position : les six icônes respirent en vague, pas à l'unisson. */
.cards .card:nth-child(2) .card-ic { animation-delay: -1s; }
.cards .card:nth-child(3) .card-ic { animation-delay: -2s; }
.cards .card:nth-child(4) .card-ic { animation-delay: -3s; }
.cards .card:nth-child(5) .card-ic { animation-delay: -4s; }
.cards .card:nth-child(6) .card-ic { animation-delay: -5s; }
.card:hover .card-ic {
  animation-play-state: paused;
  transform: scale(1.12) rotate(-4deg);
  background: color-mix(in srgb, var(--c, var(--c-green)) 26%, transparent);
}
.card h3 { margin: 16px 0 9px; font-size: 17.5px; }
.card p { font-size: 14.5px; color: var(--dim); }

/* Une pulsation, pas un flottement : un decalage vertical fige la capture sur
   six icones a six hauteurs differentes, ce qui se lit comme un defaut. La
   boite ne bouge pas, seul le halo respire. */
@keyframes ic-breathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
  50%      { transform: scale(1.06);
             box-shadow: 0 0 0 9px color-mix(in srgb, var(--c, var(--c-green)) 9%, transparent); }
}

/* ── Limites médicales ───────────────────────────────────── */

.layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.layer { padding: 24px 22px; background: var(--bg); }
.layer-k {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--c-green)) 14%, transparent);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink, var(--accent-ink));
}
.layers .layer:nth-child(1) { --c: var(--c-green); --c-ink: var(--c-green-ink); }
.layers .layer:nth-child(2) { --c: var(--c-blue);  --c-ink: var(--c-blue-ink); }
.layers .layer:nth-child(3) { --c: var(--c-teal);  --c-ink: var(--c-teal-ink); }
.layers .layer:nth-child(4) { --c: var(--c-amber); --c-ink: var(--c-amber-ink); }
.layers .layer:nth-child(5) { --c: var(--c-green); --c-ink: var(--c-green-ink); }
.layers .layer:nth-child(6) { --c: var(--c-blue);  --c-ink: var(--c-blue-ink); }
.layer h3 { margin: 10px 0 8px; font-size: 17px; }
.layer p { font-size: 14.5px; color: var(--dim); }

/* ── Étapes ──────────────────────────────────────────────── */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step {
  position: relative;
  padding: 24px 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
}
.step-n {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c, var(--c-green)) 16%, transparent);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-ink, var(--accent-ink));
}
.steps .step:nth-child(1) { --c: var(--c-green); --c-ink: var(--c-green-ink); }
.steps .step:nth-child(2) { --c: var(--c-blue);  --c-ink: var(--c-blue-ink); }
.steps .step:nth-child(3) { --c: var(--c-teal);  --c-ink: var(--c-teal-ink); }
.step h3 { margin: 10px 0 8px; font-size: 17.5px; }
.step p { font-size: 14.5px; color: var(--dim); }

/* ── Tarifs ──────────────────────────────────────────────── */

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -20px auto 26px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--card);
}
.billing-toggle { display: flex; width: fit-content; }
.bt-opt {
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font: 700 14px var(--display);
  cursor: pointer;
}
.bt-opt.is-on { background: var(--accent); color: #111b21; }
.bt-save {
  padding: 0 12px;
  font: 600 12.5px var(--mono);
  color: var(--accent-ink);
}

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.plan {
  position: relative;
  padding: 30px 24px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
  text-align: center;
}
.plan--featured {
  border-color: var(--accent);
  box-shadow: 0 18px 40px rgba(37, 211, 102, .22);
}
/* Un bandeau plein en haut de la carte recommandée : c'est ce qui la fait
   choisir avant même d'avoir lu le prix. */
.plan--featured::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  border-radius: var(--r) var(--r) 0 0;
  background: linear-gradient(90deg, var(--c-teal), var(--c-green));
}
.plan--featured .price b { color: var(--c-green-ink); }
.plan-badge {
  position: absolute;
  top: -11px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #111b21;
  font: 700 11px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.plan-name { font-family: var(--display); font-weight: 700; font-size: 18px; }
.price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 12px 0 0; }
.price b {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.price span { font-size: 14px; color: var(--dim); }
.plan-year { margin-top: 6px; font: 500 12.5px var(--mono); color: var(--faint); }
.plan ul { display: grid; gap: 10px; margin-top: 22px; }
/* Les puces restent alignées entre elles : `justify-content: center` centre la
   paire icône + texte, `text-align: left` garde la ligne lisible quand elle
   passe sur deux rangs. */
.plan li {
  display: flex;
  justify-content: center;
  gap: 9px;
  font-size: 14.5px;
  color: var(--dim);
  text-align: left;
}
.plan li .i { font-size: 17px; color: var(--accent-ink); margin-top: 2px; }
.plan li.off { opacity: .5; }
.plan li.off .i { color: var(--faint); }
.plans-note {
  max-width: 46em;
  margin: 26px auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--faint);
}

/* ── FAQ ─────────────────────────────────────────────────── */

.faq { display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--card);
  overflow: hidden;
}
/* Trois colonnes dont la première est vide : la question tombe sur l'axe de la
   page et le chevron garde sa place à droite. Le centrer avec `margin: auto`
   des deux côtés l'aurait décalé de la moitié du chevron. */
.faq summary {
  display: grid;
  grid-template-columns: 20px 1fr 20px;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span { grid-column: 2; }
.faq summary .i { grid-column: 3; font-size: 18px; color: var(--faint); transition: transform .25s var(--ease); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq p { padding: 0 32px 20px; font-size: 14.5px; text-align: center; color: var(--dim); }

/* ── CTA final ───────────────────────────────────────────── */

/* Une bande pleine largeur, pas une carte posée au milieu : c'est le dernier
   écran, il ne reste rien après. */
.final { padding: 0; }
.final-inner {
  display: grid;
  justify-items: center;
  gap: 20px;
  max-width: none;
  margin: 0;
  padding: 84px var(--gutter) 92px;
  /* Le seul grand aplat de couleur de la page, et il est à la fin : c'est le
     dernier écran, il ne reste rien après. Texte en encre, jamais en blanc —
     du blanc sur #25D366 donne 1,8:1. */
  background: linear-gradient(135deg, #7ee6a6 0%, var(--c-green) 45%, #16b8ad 100%);
  color: #0b2318;
  text-align: center;
}
.final h2 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
/* Sur l'aplat vert, les jetons de la page ne valent plus : tout se réécrit en
   encre, y compris le mot d'accent du titre. */
.final .grad-text { color: #06392a; }
.final .lede { max-width: 40em; color: rgba(11, 35, 24, .78); }
.final .btn--grad { background: #0b2318; color: #ffffff; }
.final .btn--grad:hover { background: #06170f; }
.final-mail { margin-top: 2px; font-size: 13.5px; color: rgba(11, 35, 24, .72); }
/* Le seul moyen de nous ecrire depuis cette page : il doit s'attraper du
   pouce. 18 px de haut, c'etait un lien qu'on manque une fois sur deux. */
.final-mail a { color: #06392a; text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }

/* ── Pied de page ────────────────────────────────────────── */

.footer { border-top: 1px solid var(--line); padding: 46px 0 26px; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; }
.footer-note { margin-top: 16px; max-width: 34em; font-size: 12.5px; line-height: 1.6; color: var(--faint); }
.footer h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.footer nav { display: grid; gap: 9px; margin-top: 14px; }
/* Un pouce, pas un curseur : ces liens faisaient 22 px de haut, on rate le bon
   et on tombe sur le voisin. Le remplissage vertical porte la zone a 44 px
   sans changer la taille du texte. */
.footer nav a { font-size: 14px; color: var(--dim);
  display: flex; align-items: center; min-height: 44px; }
.footer nav a:hover { color: var(--txt); }
.footer-legal { margin-top: 34px; text-align: center; font-size: 12.5px; color: var(--faint); }

/* ── Pages légales ───────────────────────────────────────── */

.legal { padding: 116px 0 60px; }
.legal h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.02em; }
.legal-updated { margin-top: 12px; font: 500 13px var(--mono); color: var(--faint); }
.legal-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.legal-toc a {
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--dim);
}
.legal-body { padding-bottom: 70px; }
.legal-body h2 { margin: 44px 0 14px; font-size: 24px; }
.legal-body h3 { margin: 26px 0 8px; font-size: 17px; }
.legal-body p, .legal-body li { font-size: 15px; line-height: 1.72; color: var(--dim); }
.legal-body p + p { margin-top: 12px; }
.legal-body ul { display: grid; gap: 8px; margin: 12px 0 0 18px; list-style: disc; }
.legal-body a:not(.btn):not(.logo) { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }


/* ── Lueur au survol ─────────────────────────────────────── */
/* Deux variables écrites au passage du curseur, un dégradé qui les lit. Aucun
 * calcul de mise en page, donc aucun coût mesurable. */

.card, .plan, .layer, .step { position: relative; isolation: isolate; }

/* ── Sur téléphone, tout ce qui se lit est centré ──────────────────
   Même règle que sur les trois autres pages de la suite : sur une colonne
   étroite, un titre centré au-dessus d'un bloc aligné à gauche fait pencher
   la page. Les rangées à deux colonnes et les maquettes d'écran gardent leur
   alignement — leur position porte du sens.

   Les listes d'offre sont en `flex` avec une icône : centrer le texte ne
   suffit pas, il faut centrer l'axe. */
@media (max-width: 720px) {
  .card, .step, .layer, .plan, .contact-card,
  .step-tag, .plan-badge, .plan-name, .plan-year { text-align: center; }

  .plan ul { justify-items: center; text-align: center; }
  .plan li, .off { justify-content: center; }

  .card-ic, .step-n, .layer-ic { margin-left: auto; margin-right: auto; }

  /* ── Le premier écran ne montre que le message ──────────────────
     Le téléphone apparaissait 142 px avant la ligne de flottaison : on
     arrivait sur la page et on voyait une maquette coupée, avant même
     d'avoir lu la promesse. Elle descend sous la ligne et se découvre au
     premier défilement.

     Les valeurs viennent de la page Instagram, qui sert de référence : le
     titre y commence vers 240 px et respire de 40 px avant le paragraphe. */
  .hero { padding-top: 40px; }
  .hero-head { text-align: center; }
  .hero h1 { margin-bottom: 20px; }
  .hero-head > p { margin-bottom: 8px; }
  .hero-cta { margin-top: 32px; gap: 12px; }

  /* Pleine largeur, comme sur la page Instagram : deux boutons de tailles
     différentes côte à côte se lisent comme deux importances différentes,
     ce qu'ils ne sont pas. */
  .hero-cta .btn, .hero-cta a { width: 100%; justify-content: center; }

  .phone, .hero-visual, .hero-art { margin-top: 116px; }
}
.card::after, .plan::after, .layer::after, .step::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
  background: radial-gradient(14rem 14rem at var(--mx, 50%) var(--my, 50%),
                              rgba(37, 211, 102, .16), transparent 62%);
}
.card:hover::after, .plan:hover::after, .layer:hover::after, .step:hover::after { opacity: 1; }

/* ── Adaptatif ───────────────────────────────────────────── */

/* Trois colonnes ne tiennent plus : la colonne de texte tomberait à
   280 px, soit trente-cinq signes par ligne. Le texte passe au-dessus,
   les deux appareils se partagent la largeur. */
@media (max-width: 1200px) {
  .hero { min-height: 0; padding: 96px 0 48px; }
  .hero-head { max-width: 24em; }
  #dashboard .dash-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1040px) {
  .hero { padding: 88px 0 44px; }
  /* Empile : le plan produit ne tient pas a cote du texte. On resserre pour
     que son bord superieur affleure la ligne de flottaison — c est ce qui
     donne envie de descendre. */
  .hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .hero-head { max-width: none; }
  .phone { justify-self: center; }
  #dashboard .dash-side { display: none; }
  #dashboard .dash-body { grid-template-columns: 1fr; }
  .hero-head { max-width: none; }
  .cards, .layers, .steps, .plans { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .dash-side { display: none; }
  .dash-body { grid-template-columns: 1fr; }
  /* Le téléphone quitte le coin : à cette largeur il mordrait sur les
     tuiles au lieu de les compléter. */
  .phone-note { max-width: none; }
}

@media (max-width: 780px) {
  .nav-burger {
    display: grid;
    gap: 5px;
    width: 40px; height: 36px;
    place-content: center;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
  }
  .nav-burger span { display: block; width: 17px; height: 1.7px; background: var(--txt); border-radius: 2px; }
  .nav-links {
    position: absolute;
    inset: 68px 16px auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--bg-2);
    box-shadow: 0 20px 50px rgba(17, 27, 33, .18);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links .btn { margin-top: 8px; }

  .section { padding: 60px 0; }
  .hero { padding: 100px 0 48px; }
  .cards, .layers, .steps, .plans, .footer-inner { grid-template-columns: 1fr; }
  .dash-tiles { grid-template-columns: repeat(2, 1fr); }
  .ticker-run { gap: 28px; }
  .ticker-run span { font-size: 13.5px; }
  .final-inner { padding: 40px 20px 44px; }
}


/* Le texte du hero centre dans sa colonne, comme sur les trois autres pages.

   La regle visait `.hero-text`, une classe qui n existe pas ici : le bloc
   s appelle `.hero-head`. Elle ne s appliquait donc a rien, et cette page
   restait la seule alignee a gauche. */
.hero-head { text-align: center; }
.hero-head .badge,
.hero-head .hero-cta,
.hero-head .hero-trust { justify-content: center; }
.hero-head .badge { margin-left: auto; margin-right: auto; }


/* ── Le telephone en sombre, comme les deux autres ────────────
   Un iPhone WhatsApp est clair dans la vraie vie, et c est ce que cette page
   montrait. Mais pose a cote des telephones d Instagram et de LinkedIn, qui
   sont sombres, il faisait tache : trois pages d une meme suite, dont une
   seule avec un ecran blanc.

   Ce sont les couleurs REELLES du mode sombre de WhatsApp — l application en
   a un. Rien n est invente : fond #0b141a, bulle entrante #202c33, bulle
   sortante #005c4b, barres #1f2c33. */
.phone .wa-bar,
.phone .wa-input { background: #1f2c33; border-color: rgba(233,237,239,.08); }
.phone .wa-bar b, .phone .wa-input { color: #e9edef; }
.phone .wa-bar small, .phone .wa-sub { color: #8696a0; }
.phone .wa-thread {
  background-color: #0b141a;
  /* Le motif du papier peint, mais a l encre claire sur fond sombre. */
  background-image: radial-gradient(rgba(233,237,239,.035) 1px, transparent 1px);
  background-size: 18px 18px;
}
.phone .wa-msg { box-shadow: 0 1px .5px rgba(0,0,0,.35); }
.phone .wa-msg--in  { background: #202c33; color: #e9edef; }
.phone .wa-msg--out { background: #005c4b; color: #e9edef; }
.phone .wa-msg time, .phone .wa-msg .wa-time { color: rgba(233,237,239,.55); }
.phone .wa-day { background: #182229; color: #8696a0; }
.phone .wa-field { background: #2a3942; color: #e9edef; }
.phone .phone-note { color: #667781; }

/* La barre d etat et le bouton d appel manquaient a l appel : ils gardaient
   le creme de l application claire au-dessus d un fil devenu sombre. */
.phone .wa-status { background: #1f2c33; color: #e9edef; }
.phone .wa-call { background: #2a3942; color: #e9edef; }
.phone .wa-who b, .phone .wa-who strong { color: #e9edef; }
.phone .wa-who span, .phone .wa-who small { color: #8696a0; }

/* Les deux nappes de couleur du premier ecran etaient vertes : sur une page
   passee au violet de la marque, elles tiraient le fond vers un autre monde.
   Elles reprennent l accent de la maison. */
.hero::before { background: radial-gradient(closest-side, rgba(139,92,246,.22), transparent) !important; }
.hero::after  { background: radial-gradient(closest-side, rgba(225,75,140,.16), transparent) !important; }


/* ── Les trois ecarts releves par la comparaison des quatre pages ──────
   Un visiteur ne mesure pas ces valeurs, mais il voit le resultat : un
   bouton plus rond ici que la, un titre moins gras, une carte aux coins
   differents. C est a cela qu on reconnait deux mains au lieu d une. */

/* Le titre du hero : graisse 900 comme les trois autres pages (il etait a
   800, seul de son espece). */
.hero-head h1 { font-weight: 900; }

/* Les boutons : rayon 12 px, celui de growdn.com. Ils etaient en pilule
   (999 px), la forme de whatsapp.com — juste pour WhatsApp, faux pour la
   maison. */
.btn { border-radius: 12px; }

/* Les cartes : 16 px comme partout ailleurs, au lieu de 18. */
:root { --r: 16px; }


/* ── Le degrade de titre de growdn.com ────────────────────────
   Releve dans `static/styles.css` : quatre couleurs, orange vers indigo.
   C est le traitement du mot mis en avant sur toutes les pages de la
   maison. */
.grad-text {
  background: linear-gradient(100deg, #ff6a3d 0%, #f5578a 35%,
                              #a855f7 70%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Cibles tactiles sur telephone ─────────────────────────────────────
   40 px est le plancher pour un pouce. La regle vit en FIN de fichier :
   a specificite egale, la derniere source gagne, et ces commandes portent
   deja des tailles fixes plus haut. */
@media (max-width: 640px) {
  .nav-burger,
  .theme-toggle,
  .bt-opt {
    min-height: 40px;
    min-width: 40px;
  }
  /* Les boutons pleine largeur d'appel a l'action : meme plancher. */
  .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Etiquettes commerciales : lisibles sur telephone. Le badge d'une offre
   porte la decision d'achat, et la note de console tombait a 9,3 px — sous
   12 px, iOS et Android proposent de zoomer, la mise en page saute, et la
   page parait cassee alors qu'elle est seulement trop petite. */
@media (max-width: 640px) {
  .plan-badge { font-size: 12px; }
  .console-note { font-size: 12px; }
}

/* Mentions a lire, sur telephone.
   Sous 12 px le systeme propose de zoomer et la mise en page saute. On ne
   remonte QUE ce qui s'adresse au visiteur : les libelles internes aux
   maquettes de tableau de bord gardent leur taille, c'est ce que fait une
   vraie interface. */
@media (max-width: 780px) {
  .dash-note, .phone-note, .note, .mention, .avertissement { font-size: 12px; }
  /* Etiquettes de schemas explicatifs — hors maquettes. */
  .card-tag, .layer-k, .band-k, .step-tag { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   CONTRAT MOBILE — SUITE GROWDN
   Le meme bloc, aux memes valeurs, sur growdn.com, /phare, /kaptor et
   /cadran. Les quatre pages doivent se lire comme une seule main.

   Pose en FIN de feuille a dessein : les media queries de ce fichier se sont
   empilees au fil du temps et s'ecrasent entre elles. A specificite egale,
   seule la derniere declaration gagne.

   Les valeurs viennent d'un releve des quatre pages a 390 px :

     corps        16 px    le plancher de lecture sur telephone
     titre        34 px    trois pages sur quatre l'avaient deja
     sous-titre   26 px    le pas suivant de l'echelle : 34 -> 26 -> 20
     bouton       100 %, hauteur 52, rayon 12, texte 16
     gouttiere    20 px

   CE QUI RESTE ALIGNE A GAUCHE, ET CE N'EST PAS UN OUBLI : les rangees a
   deux colonnes (libelle a gauche, valeur a droite) et les maquettes
   d'ecran. Leur position porte l'information.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* L'echelle typographique, la meme partout. */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }
  h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.02em; }
  h2 { font-size: 26px; line-height: 1.18; letter-spacing: -.015em; }
  h3 { font-size: 20px; line-height: 1.25; }

  /* Tout ce qui se lit est centre. Les listes sont en flex avec une icone :
     centrer le texte ne suffit pas, il faut centrer l'axe. */
  .hero-head, .card, .step, .layer, .plan, .contact-card, .step-tag, .plan-badge, .plan-name, .plan-year, .band-k, .card-tag, .layer-k, .faq-q, .faq-a { text-align: center; }
  .plan li, .price, .pill, .off { justify-content: center; }

  /* Les blocs ne se deplacent pas avec `text-align` : on les recentre. */
  .card-ic, .step-n, .layer-ic, .hero-head, .pill { margin-left: auto; margin-right: auto; }

  /* Le bouton principal prend toute la largeur. Deux boutons de tailles
     differentes cote a cote se lisent comme deux importances differentes,
     ce qu'ils ne sont pas. */
  .hero-cta .btn, .hero-cta a, .plan .btn, .cta .btn {
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    font-size: 16px;
    justify-content: center;
    padding-left: 18px;
    padding-right: 18px;
  }
  .hero-cta, .cta { display: grid; gap: 12px; justify-items: stretch; }

  /* La maquette apparaissait 142 px avant la ligne de flottaison : on
     arrivait sur une page qui montrait un ecran coupe avant d'avoir enonce
     sa promesse. Elle descend sous la ligne. */
  .hero { padding: 146px 0 0; }
  .hero h1 { margin-bottom: 20px; }
  .hero-cta { margin-top: 32px; }
  .hero-inner { gap: 0; }
  .hero-visual, .hero-art, .phone { margin-top: 40px; }

  /* ── Les titres, au bon niveau de specificite ───────────────────
     `.head h2` et `.final h2` battent un `h2` nu : on les nomme. */
  h1, .hero h1, .legal-body h1 { font-size: clamp(28px, 8.7vw, 34px); }
  h2, .head h2, .final h2 { font-size: clamp(22px, 6.7vw, 26px); }

  /* ── Le conteneur des boutons prend toute la largeur ────────────
     Meme cause qu'ailleurs : centre dans une grille, il retrecit au
     contenu. */
  .hero-cta, .cta { justify-self: stretch; align-self: stretch; width: 100%; }

  /* ── La maquette passe franchement sous la ligne ────────────────
     Elle s'arretait 12 px au-dessus : entrevue, coupee, elle volait
     l'attention au titre sans rien raconter. */
  .hero-visual, .hero-art, .phone { margin-top: 150px; }

  /* ── La piste, pas le bouton ────────────────────────────────────
     Le groupe mesurait 342 px, mais sa grille n'avait qu'une colonne de
     207 px, dimensionnee au contenu. Un bouton a `width: 100 %` remplissait
     donc exactement ces 207 px — il etait deja au maximum de sa piste, et
     aucun `!important` n'y pouvait rien.

     C'est la piste qu'il faut declarer. */
  .hero-cta, .cta {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   CONTRAT GRAND ECRAN — SUITE GROWDN
   Le pendant du contrat mobile, aux memes principes : une seule main sur les
   quatre pages. Releve a 1440 px, valeur majoritaire retenue.

     conteneur    1200 px    trois pages sur quatre
     corps        16 px
     titre        clamp(40px, 4vw, 56px)
     sous-titre   clamp(30px, 2.9vw, 40px)
     bouton       hauteur 52, texte 16, rayon 12
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 721px) {
  body { font-size: 16px; }
  h1, .hero h1 { font-size: clamp(40px, 4vw, 56px); }
  h2, .head h2, .final h2 { font-size: clamp(30px, 2.9vw, 40px); }

  /* Le conteneur, pas la marge : c'est la largeur qui est la decision. */
  .wrap { max-width: 1200px; margin-left: auto; margin-right: auto; }

  .btn, .hero-cta a {
    min-height: 52px;
    font-size: 16px;
    border-radius: 12px;
  }
}