/* Kaptor — direction artistique « instrument ».
 *
 * Même main que Growdn, autre aiguille. Kaptor tient un compte LinkedIn à la
 * cadence d'un humain qui fatigue : des paliers, des quotas, des fenêtres
 * horaires, des arrêts automatiques. Le site le dit avec la matière plutôt
 * qu'avec des adjectifs — un tableau de bord en laque sombre, des traits
 * gravés, les chiffres en lettrage monospace, et une seule aiguille lumineuse.
 *
 * Le tableau est identique à celui de Growdn, au pixel : mêmes laques, même
 * encre, mêmes rayons courts, même typographie. Seule l'aiguille change —
 * l'ambre du faisceau devient le bleu acier de LinkedIn. C'est ce qui fait
 * lire les deux sites comme deux instruments d'une même planche de bord et
 * non comme deux abonnements sans rapport.
 *
 * L'aiguille est le bleu de LinkedIn ramené au registre du tableau : #0A66C2
 * brut est un bleu d'interface, saturé pour du blanc, et il vibre sur la
 * laque. #5C8FD0 garde la teinte en baissant la saturation, comme l'ambre de
 * Growdn garde l'idée du faisceau sans hurler.
 *
 * Les NOMS de variables sont ceux d'origine. Toute la feuille en dépend,
 * seules les valeurs ont bougé.
 */

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

:root {
  /* --- Le tableau ---------------------------------------------------- */
  --bg:      #0a0a1a;   /* laque noire — la même que Growdn */
  --bg-2:    #050510;   /* creux, plus profond que le tableau */
  --card:    #14142a;   /* platine en relief */
  --card-2:  #1c1c3a;

  /* --- L'encre ------------------------------------------------------- */
  --txt:     #e8e8ef;
  --dim:     #a6a6c0;
  --faint:   #8080a0;   /* légendes — plancher de contraste tenu */

  /* --- L'aiguille ---------------------------------------------------- */
  --blue:    #8b5cf6;   /* bleu acier : LinkedIn au registre du tableau */
  --violet:  #a78bfa;   /* clair — le reflet haut de la surface laquée */
  --cyan:    #e14b8c;   /* profond — le bas du même reflet */
  --green:   #10b981;

  /* États, volontairement distincts de l'aiguille : un avertissement ne doit
     pas pouvoir se lire comme « ceci concerne la marque ». */
  --amber:   #f59e0b;
  --rose:    #ef4444;

  /* L'aiguille est CLAIRE. Tout texte posé sur un aplat d'accent s'écrit donc
     dans la laque, jamais en blanc — sinon le bouton principal tombe à 3,3:1
     et devient illisible. Sur la laque, l'aiguille tient 5,8:1. */
  --on-accent: #ffffff;

  /* Surfaces posées sur le fond. Écrites en dur auparavant, elles restaient
     sombres en thème clair — la bande de compteurs de la démo s'affichait en
     gris foncé sur du papier ivoire, libellés illisibles. */
  --surface:       rgba(20, 20, 42, .62);
  --surface-dense: rgba(20, 20, 42, .88);
  --surface-barre: rgba(10, 10, 26, .84);

  /* Un dégradé à deux arrêts de la MÊME teinte, jamais un arc-en-ciel : c'est
     le reflet d'une surface laquée, pas une décoration. */
  --grad:      linear-gradient(135deg, #8b5cf6 0%, #e14b8c 100%);
  --grad-soft: linear-gradient(180deg, rgba(92,143,208,.14), rgba(92,143,208,.06));

  /* --- La gravure ---------------------------------------------------- */
  --line:    rgba(139, 92, 246, .18);
  --line-2:  rgba(139, 92, 246, .34);
  --engrave: rgba(233, 239, 234, .06);
  --glow:    rgba(139, 92, 246, .28);

  /* --- Typographie ---------------------------------------------------- */
  /* Archivo pour le texte, IBM Plex Mono pour tout ce qui est chiffre, seuil
     ou libellé gravé — le lettrage d'un cadran est monospace, et ici les
     chiffres sont réellement des quotas, des délais et des prix. */
  --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;

  /* Rayons courts : une platine est fraisée, pas moulée. */
  --r:   16px;
  --r-s: 12px;
  --max: 1200px;
  --gutter: 24px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

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

/* La laque n'est jamais un aplat mort : une seule nappe, celle de l'aiguille,
 * posée là où le regard entre. Trois nappes de trois teintes différentes
 * feraient un fond de gabarit ; une seule fait un reflet. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(58rem 38rem at 76% -10%, rgba(92,143,208,.13), transparent 62%);
}

/* Grain : casse l'aplat numérique. Data-URI, aucune requête. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@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(92,143,208,.35); }

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; }
b, strong { font-weight: 700; }

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

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 860px; }
.dim { color: var(--dim); }
/* Plus de dégradé dans le texte. Un dégradé sur des lettres se lit comme une
 * décoration ; l'aiguille doit rester un signal. Le nom de la classe ne bouge
 * pas : il est posé dans quatre pages et deux scripts. */
.grad-text { color: var(--blue); }

/* ── Fond : la laque sous une lumière rasante ─────────────── */
/* Une matière, pas un objet.
 *
 * Le fond précédent était une sphère-réseau en WebGL. Elle avait deux
 * défauts. Elle disait le contraire du produit : une sphère qui tourne vite
 * annonce un gadget autonome, quand Kaptor vend des quotas, une montée en
 * charge et des jours de repos — la retenue. Et c'est le cliché exact de
 * l'outil d'automatisation, présent sur cent pages du même secteur.
 *
 * À la place : deux plans de lumière qui dérivent très lentement sur la
 * laque, et une trame gravée qui s'efface vers les bords. Aucun objet à
 * reconnaître, rien qui tourne, rien qui appelle le regard — le fond tient
 * la profondeur et rend la page au texte.
 *
 * Cent secondes par cycle, et les deux plans ne sont pas en phase : à cette
 * lenteur on ne voit pas le mouvement, on voit une matière qui n'est jamais
 * tout à fait la même. Une animation qu'on remarque est une animation qui
 * distrait.
 *
 * Aucun script : c'est du CSS composité par le GPU, il ne coûte rien et il
 * ne peut pas casser. */

#bg-3d-container,
#bg-3d-bottom {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
#bg-3d-container::before,
#bg-3d-container::after {
  content: "";
  position: absolute;
  inset: -25%;
  /* `screen` additionne la lumière au lieu de la peindre : les deux plans se
     recouvrent sans produire de halo laiteux, comme un reflet et non comme
     une tache. */
  mix-blend-mode: screen;
  will-change: transform;
}

/* Plan haut : le reflet froid, celui qui donne la profondeur. */
#bg-3d-container::before {
  background:
    radial-gradient(46% 38% at 22% 14%, rgba(92, 143, 208, .20), transparent 68%),
    radial-gradient(38% 32% at 82% 26%, rgba(138, 176, 224, .13), transparent 70%);
  animation: laque-haut 100s ease-in-out infinite alternate;
}

/* Plan bas : plus chaud, plus lâche, décalé — sans lui les deux plans
   respireraient ensemble, et le fond deviendrait un battement. */
#bg-3d-container::after {
  background:
    radial-gradient(52% 44% at 68% 88%, rgba(77, 124, 187, .16), transparent 72%),
    radial-gradient(34% 30% at 12% 72%, rgba(65, 169, 140, .07), transparent 74%);
  animation: laque-bas 137s ease-in-out infinite alternate;
}

/* Pas de trame quadrillée.
 *
 * J'en avais posé une, justifiée après coup comme « le cadran de
 * l'instrument ». Une grille de lignes fines pavée à intervalle fixe est en
 * réalité la signature la plus reconnaissable des fonds générés : elle
 * apparaît sur tout, quel que soit le sujet, et ne dit donc rien du nôtre.
 *
 * Une grille se mérite : un plan, un tableau de mesure, une surface de
 * dessin. Ici il n'y a rien à mesurer, et les deux plans de lumière portent
 * déjà la profondeur. `#bg-3d-bottom` reste dans la page — il est écrit dans
 * quatre pages — mais ne dessine plus rien. */

@keyframes laque-haut {
  from { transform: translate3d(-3%, -2%, 0) scale(1.04); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}
@keyframes laque-bas {
  from { transform: translate3d(3%, 2%, 0) scale(1.10); }
  to   { transform: translate3d(-4%, -3%, 0) scale(1.02); }
}

/* En thème clair, la même idée s'inverse.
 *
 * `screen` ajoute de la lumière : sur une laque noire cela creuse la
 * profondeur, sur du papier clair cela ne produit rien du tout — la page
 * paraissait alors vide plutôt que sobre. Atténuer le décor sombre ne
 * corrigeait rien : c'était le mode de fusion qu'il fallait retourner.
 *
 * `multiply` fait l'inverse : les plans assombrissent le papier au lieu de
 * l'éclairer. Même geste, même lenteur, matière opposée — l'ombre portée
 * d'un instrument posé sur une feuille, plutôt qu'un reflet sur sa laque. */
:root[data-theme="light"] #bg-3d-container::before,
:root[data-theme="light"] #bg-3d-container::after {
  mix-blend-mode: multiply;
}
:root[data-theme="light"] #bg-3d-container::before {
  background:
    radial-gradient(46% 38% at 22% 14%, rgba(43, 90, 143, .10), transparent 68%),
    radial-gradient(38% 32% at 82% 26%, rgba(26, 30, 28, .05), transparent 70%);
}
:root[data-theme="light"] #bg-3d-container::after {
  background:
    radial-gradient(52% 44% at 68% 88%, rgba(43, 90, 143, .07), transparent 72%),
    radial-gradient(34% 30% at 12% 72%, rgba(26, 30, 28, .04), transparent 74%);
}

/* Un fond qui bouge n'a aucune raison d'exister pour qui a demandé le
   contraire. La matière reste, le mouvement s'arrête. */
@media (prefers-reduced-motion: reduce) {
  #bg-3d-container::before,
  #bg-3d-container::after { animation: none; }
}

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

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

.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: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--grad);
  font-size: 17px;
  color: var(--on-accent);
  box-shadow: 0 6px 18px rgba(92,143,208,.35);
}
.logo-mark--sm { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links > a:not(.btn) {
  padding: 8px 12px;
  border-radius: var(--r);
  font-size: 14.5px;
  color: var(--dim);
  transition: color .18s, background .18s;
}
.nav-links > a:not(.btn):hover { color: var(--txt); background: rgba(233,239,234,.05); }
.nav-links > a.is-active { color: var(--txt); }
.nav-links .btn { margin-left: 10px; }

.nav-burger { display: none; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 30px;
  border: 1px solid transparent;
  /* Rayon court : une platine est fraisée, pas moulée. La pilule est le geste
     de tous les gabarits SaaS ; le tableau ne l'emploie nulle part. */
  border-radius: var(--r-s);
  font: 600 15px/1 var(--body);
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .22s, background .22s, border-color .22s;
}
.btn .i { font-size: 17px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* L'aiguille est claire : le texte posé dessus s'écrit dans la laque. En blanc
   il tomberait à 3,3:1 — illisible sur le bouton principal du site. */
.btn--grad {
  background: var(--grad);
  color: var(--on-accent);
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(92,143,208,.26);
}
.btn--grad:hover { box-shadow: 0 8px 28px rgba(92,143,208,.38); }

.btn--ghost {
  background: rgba(233,239,234,.04);
  border-color: var(--line-2);
  color: var(--txt);
}
.btn--ghost:hover { background: rgba(233,239,234,.07); border-color: rgba(92,143,208,.4); }

.btn--sm  { padding: 9px 16px; font-size: 14px; }
.btn--lg  { padding: 16px 30px; font-size: 16.5px; }
.btn--full { width: 100%; }

/* ── Pastilles, badges ───────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--grad-soft);
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--dim);
}
.badge .i { font-size: 15px; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.dot--live {
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(65,169,140,.55);
  animation: ping 2.2s infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(65,169,140,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(65,169,140,0); }
  100% { box-shadow: 0 0 0 0 rgba(65,169,140,0); }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(233,239,234,.04);
  font-size: 12.5px;
  color: var(--dim);
}
.pill b { color: var(--txt); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.pill--live { border-color: rgba(65,169,140,.32); background: rgba(65,169,140,.1); color: var(--green); }

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

.section { padding: 104px 0; position: relative; }
.section--demo { padding-top: 40px; }

.head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.head h2 {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 1.14;
  margin: 18px 0 0;
}
.head .lede { margin-top: 18px; font-size: 17px; }

.lede { font-size: 18.5px; line-height: 1.62; font-weight: 500; color: var(--dim); }

/* Révélation au scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Sans JavaScript, l'observateur ne se pose jamais et TOUTE la page reste
   invisible — une page commerciale entièrement blanche pour qui bloque les
   scripts, et pour tout aperçu qui n'en exécute pas. La révélation est un
   agrément ; son absence ne doit pas effacer le contenu. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ── Hero ────────────────────────────────────────────────── */

/* Sur un écran de portable — 1440 × 900, la taille la plus courante — les
   132 px de marge haute, un titre à 66 px sur quatre lignes et une console
   centrée verticalement repoussaient les boutons d'appel sous la ligne de
   flottaison. Le visiteur arrivait sur un titre, et rien d'autre.
   Le titre reste le plus gros élément de la page ; il tient simplement sur
   trois lignes au lieu de quatre. */
/* Le haut reste a 92 : la barre de navigation est `fixed`, et c est cet
   espace qui l empeche de recouvrir le badge. Le reduire a 52 avait fait
   passer le badge SOUS la barre — corrige ici.

   Le premier ecran est raccourci par le bas et par le rythme interne, pas
   par le haut : il mesurait 892 px et debordait d une fenetre d ordinateur
   portable. */
.hero { padding: 92px 0 0; }
.hero-inner {
  display: grid;
  /* La geometrie de la page Instagram, relevee a l ecran : le telephone se
     pose a x=968 dans un conteneur de 1200. Les colonnes etaient presque
     egales, et il remontait a x=896 — les deux pages ne se superposaient
     pas. */
  grid-template-columns: minmax(0, 717px) 280px;
  gap: 107px;
  justify-content: start;
  /* `center` faisait dériver la console vers le bas à mesure que la colonne
     de texte grandissait. Les deux commencent maintenant à la même hauteur. */
  align-items: start;
}

.hero-text { max-width: 40em; }

.hero h1 {
  font-size: clamp(34px, 4.2vw, 54px);
  font-weight: 900;
  line-height: 1.08;
  margin: 16px 0 0;
}
.hero .lede { margin-top: 18px; max-width: 34em; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
  font-size: 14px;
  color: var(--dim);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust .i { font-size: 17px; color: var(--blue); }
/* `vertical-align: super` décale la ligne de base ET creuse un blanc devant
   l'exposant : « Arrêt auto au 1 er contrôle ». Le décalage se pose donc à la
   main, sans toucher au flux du texte. */
sup {
  font-size: .68em;
  vertical-align: baseline;
  position: relative;
  top: -.42em;
  margin-left: -.06em;
}

/* Console */
.hero-visual { position: relative; }

.console {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-dense), var(--surface-dense));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(233,239,234,.02) inset;
  overflow: hidden;
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform .5s var(--ease);
}
.console::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 1px;
  background: var(--grad);
  opacity: .85;
}
.hero-visual:hover .console { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }

.console-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(233,239,234,.02);
  font-size: 12.5px;
  color: var(--dim);
}
.console-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(233,239,234,.14); }
.console-bar i:first-child { background: rgba(207,107,94,.5); }
.console-bar i:nth-child(2) { background: rgba(216,145,63,.5); }
.console-bar i:nth-child(3) { background: rgba(65,169,140,.5); }
.console-bar > span:not(.pill) { margin-left: 6px; font-family: var(--mono); font-size: 11.5px; }
.console-bar .pill { margin-left: auto; }

.console-body { padding: 20px; display: grid; gap: 18px; }

.console-clock {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--dim);
}
.console-clock .i { font-size: 16px; align-self: center; }
.console-clock b {
  font-family: var(--mono);
  font-size: 24px;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}

.console-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Tuile de mesure — partagée par la console et la maquette d'espace client. */
.tile {
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: rgba(233,239,234,.025);
}
.tile-k { display: block; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.tile > b {
  display: block;
  margin: 6px 0 9px;
  font-family: var(--display);
  font-size: 27px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--c, var(--txt));
}
.tile > b i { font-style: normal; font-size: 14px; color: var(--dim); margin-left: 3px; }
.tile--blue   { --c: #5c8fd0; }
.tile--green  { --c: #41a98c; }
.tile--violet { --c: #8ab0e0; }
.tile--cyan   { --c: #7f8f88; }

.track { height: 4px; border-radius: var(--r); background: rgba(233,239,234,.07); overflow: hidden; }
/* Le remplissage est une mise à l'échelle, pas une largeur : animer `width`
 * relance le calcul de mise en page à chaque image, et la barre de la démo est
 * réécrite à chaque image. `transform` reste sur la couche de composition.
 * Le pourcentage arrive par `--fill` (0 à 1) ; l'arrondi vient de `.track`,
 * qui masque déjà les extrémités. */
.track u {
  display: block;
  width: 100%; height: 100%;
  background: var(--c, var(--blue));
  transform-origin: left center;
  transform: scaleX(var(--fill, 0));
  transition: transform .6s var(--ease);
}
.track--lg { height: 7px; flex: 1; }

/* Mention de démonstration. Discrète, mais dans le même écran que les tuiles
   qu'elle qualifie : reléguée plus bas, elle ne qualifierait plus rien. */
.console-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--dim);
}

.console-feed { display: grid; gap: 8px; }

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: rgba(233,239,234,.02);
  font-size: 13.5px;
}
.row b { font-weight: 500; }
.row > span:last-child { margin-left: auto; color: var(--dim); font-size: 12.5px; }
.rdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(233,239,234,.2); flex: none; }
.rdot--blue  { background: var(--blue);  box-shadow: 0 0 10px rgba(92,143,208,.7); }
.rdot--green { background: var(--green); box-shadow: 0 0 10px rgba(65,169,140,.7); }
.rdot--amber { background: var(--amber); box-shadow: 0 0 10px rgba(216,145,63,.7); }

/* Cartes flottantes */
.float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface-dense);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  font-size: 13px;
  animation: bob 7s ease-in-out infinite;
}
.float .i { font-size: 20px; color: var(--blue); }
.float b { display: block; font-size: 13.5px; }
.float span { color: var(--dim); font-size: 12px; }
/* Les deux cartes flottent AUTOUR de la console, jamais par-dessus son
   contenu : posée à 8 % du haut, la première recouvrait l'en-tête — le
   visiteur lisait « … marketing · Lyon », amputé de sa moitié gauche. Elles
   débordent donc vers l'extérieur, là où il n'y a rien à cacher. */
.float--a { top: -5%; left: -32%; }
.float--b { bottom: 2%; right: -14%; animation-delay: -3.5s; }
.float--b .i { color: var(--green); }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* Chiffres */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  /* 40 et non 86 : le premier ecran depassait de 68 px une fenetre
     d ordinateur portable, et cette marge en portait les deux tiers. */
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
/* Des affirmations, pas des chiffres : la cadence réelle du produit ne se
   publie pas. Le corps est donc calibré pour deux ou trois mots, pas pour
   deux caractères. */
.figures b {
  display: block;
  font-family: var(--display);
  font-size: clamp(21px, 2.2vw, 27px);
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: var(--txt);
}
.figures span { display: block; margin-top: 10px; font-size: 14px; color: var(--dim); max-width: 22em; }

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

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  position: relative;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface), var(--surface));
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  background: var(--c);
  opacity: 0;
  transition: opacity .3s;
}
.card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--c) 42%, transparent);
  box-shadow: 0 22px 50px rgba(0,0,0,.42);
}
.card:hover::before { opacity: .9; }

.card-ic {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  color: var(--c);
  font-size: 22px;
}
.card h3 { margin: 18px 0 9px; font-size: 19px; font-weight: 700; }
.card p { color: var(--dim); font-size: 15px; }
.card-tag {
  position: absolute;
  top: 22px; right: 22px;
  padding: 4px 10px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Démo ────────────────────────────────────────────────── */

.demo {
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-dense), var(--surface-dense));
  box-shadow: 0 34px 80px rgba(0,0,0,.5);
  overflow: hidden;
}
.demo-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(233,239,234,.02);
}

.demo-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.dc {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 26px 12px;
  background: var(--surface);
}
.dc-ic {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: var(--c);
  font-size: 19px;
  margin-bottom: 6px;
}
.dc b {
  font-family: var(--mono);
  font-size: 33px;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c);
}
.dc > span:last-child { font-size: 12.5px; color: var(--dim); }

.demo-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--dim);
}
.demo-progress b { color: var(--txt); font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.demo-progress .track u { background: var(--grad); }

.demo-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.panel { padding: 20px 22px; background: var(--surface); }
.panel-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 14px;
}
.panel-note { margin-top: 12px; font-size: 12.5px; color: var(--dim); }

.log {
  height: 210px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
}
.log-row {
  display: flex;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(92,143,208,.09);
  animation: slideIn .35s var(--ease);
}
.log-t { color: var(--faint); font-family: var(--mono); flex: none; }
.log-m { color: var(--dim); }
.log-row--ok   .log-m { color: var(--green); }
.log-row--warn .log-m { color: var(--amber); }
@keyframes slideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.chart {
  height: 210px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
/* Même raison que `.track u` : la hauteur des barres est une mise à l'échelle
 * depuis le bas, pas une hauteur animée. Chaque barre occupe toute la hauteur
 * du cadre et se réduit — le dégradé se comprime avec elle, donc une barre
 * courte garde son dégradé complet au lieu d'en montrer le sommet coupé. */
.chart span {
  flex: 1;
  align-self: stretch;
  border-radius: var(--r) 4px 2px 2px;
  background: linear-gradient(180deg, var(--blue), rgba(92,143,208,.18));
  transform-origin: bottom center;
  transform: scaleY(var(--h, .03));
  transition: transform .5s var(--ease);
}

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

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
  position: relative;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface), var(--surface));
}
.step-n {
  position: absolute;
  top: 20px; right: 22px;
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: rgba(233,239,234,.05);
}
.step-ic {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  color: var(--c);
  font-size: 22px;
}
.step h3 { margin: 18px 0 9px; font-size: 19px; font-weight: 700; }
.step p { color: var(--dim); font-size: 15px; }

/* ── Furtivité ───────────────────────────────────────────── */

.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: 26px 24px;
  background: var(--surface);
  transition: background .3s;
}
.layer:hover { background: var(--surface-dense); }
.layer-k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
}
.layer h3 { margin: 12px 0 9px; font-size: 18px; font-weight: 700; }
.layer p { color: var(--dim); font-size: 14.5px; }

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.vs {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.vs--us {
  border-color: rgba(92,143,208,.34);
  background: linear-gradient(180deg, rgba(92,143,208,.09), var(--surface));
}
.vs-who {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 16px;
}
.vs--them .vs-who { color: var(--dim); }
.vs ul { display: grid; gap: 11px; }
.vs li { display: flex; gap: 11px; font-size: 14.5px; color: var(--dim); }
.vs li .i { font-size: 18px; margin-top: 2px; flex: none; }
.vs--them li .i { color: rgba(207,107,94,.75); }
.vs--us li { color: var(--dim); }
.vs--us li .i { color: var(--green); }

/* ── Maquette espace client ──────────────────────────────── */

.app-shot {
  display: grid;
  grid-template-columns: 208px 1fr;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface-dense), var(--surface-dense));
  box-shadow: 0 34px 80px rgba(0,0,0,.5);
  overflow: hidden;
}
.app-side {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 20px 14px;
  border-right: 1px solid var(--line);
  background: rgba(233,239,234,.02);
}
.app-logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 16px;
  margin-bottom: 16px; padding: 0 8px;
}
.app-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r);
  font-size: 14px;
  color: var(--dim);
}
.app-nav .i { font-size: 17px; }
.app-nav--on { background: var(--grad-soft); color: var(--txt); border: 1px solid var(--line-2); }

.app-main { padding: 22px; display: grid; gap: 16px; align-content: start; }
.app-top { display: flex; align-items: center; gap: 12px; }
.app-top b { font-family: var(--display); font-size: 20px; }
.app-top .pill { margin-left: auto; }
.app-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.app-list { display: grid; gap: 8px; }

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

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--surface), var(--surface));
}
.plan--featured {
  border-color: rgba(92,143,208,.42);
  background: linear-gradient(180deg, rgba(43,90,143,.13), var(--surface));
  box-shadow: 0 26px 62px rgba(92,143,208,.16);
  transform: translateY(-10px);
}
.plan-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 15px;
  border-radius: var(--r);
  background: var(--grad);
  color: var(--on-accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(92,143,208,.4);
}
.plan-name { font-family: var(--display); font-size: 21px; font-weight: 700; }
.plan-for { color: var(--dim); font-size: 14px; margin-top: -8px; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b {
  font-family: var(--mono);
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.price span { color: var(--dim); font-size: 14px; }
.plan ul { display: grid; gap: 11px; margin: 4px 0 6px; }
.plan li { display: flex; gap: 11px; font-size: 14.5px; }
.plan li .i { font-size: 18px; margin-top: 2px; flex: none; color: var(--green); }
.plan li.off { color: var(--faint); }
.plan li.off .i { color: var(--faint); }
.plan .btn { margin-top: auto; }
.plans-note { margin-top: 26px; text-align: center; font-size: 13.5px; color: var(--dim); }

/* ── Sur téléphone, tout ce qui se lit est centré ──────────────────
   Sur une colonne de 390 px, un titre centré suivi d'un bloc aligné à gauche
   donne une page qui penche. Les cartes, les étapes, les couches et les
   offres se centrent donc comme le reste.

   Deux exceptions, et ce ne sont pas des oublis : les rangées à deux colonnes
   (« libellé à gauche, valeur à droite ») et les maquettes d'écran gardent
   leur alignement — leur position EST l'information qu'elles portent.

   Les listes sont en `flex` avec une icône : il faut centrer l'axe, pas
   seulement le texte, sinon l'icône reste collée au bord. */
@media (max-width: 720px) {
  .card, .step, .layer, .plan, .contact-card,
  .card-tag, .layer-k, .plan-badge, .plan-name, .plan-for { text-align: center; }

  .price { justify-content: center; }

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

  /* Les pastilles et numéros d'étape sont des blocs : on les recentre à la
     main, `text-align` ne les déplace pas. */
  .card-ic, .step-ic, .step-n, .layer-ic { margin-left: auto; margin-right: auto; }

  /* ── Le premier écran ne montre que le message ──────────────────
     Le téléphone dépassait de 13 px sous la ligne de flottaison : on
     l'apercevait en arrivant, à moitié coupé. Une maquette entrevue ne
     raconte rien et vole l'attention au titre.

     On l'envoie franchement plus bas — il se découvre au premier
     défilement — et on rend au texte l'air qu'il avait perdu. Les valeurs
     sont relevées sur 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 h1 { margin-bottom: 20px; }
  .hero-text > p, .hero-head > p { margin-bottom: 8px; }
  .hero-cta { margin-top: 32px; gap: 12px; }
  .hero-trust { margin-top: 30px; }

  /* Pleine largeur, comme sur la page Instagram : sur une colonne étroite,
     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 { margin-top: 104px; }
}

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

.faq { display: grid; gap: 10px; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
  transition: border-color .25s, background .25s;
}
.faq details[open] { border-color: var(--line-2); background: var(--surface); }
.faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { margin-left: auto; font-size: 20px; color: var(--dim); transition: transform .28s var(--ease); }
.faq details[open] summary .i { transform: rotate(180deg); color: var(--blue); }
.faq p { padding: 0 20px 19px; color: var(--dim); font-size: 15px; }

/* ── Bande de chiffres ───────────────────────────────────── */

.section--band { background: linear-gradient(180deg, transparent, rgba(92,143,208,.05) 40%, transparent); }

.band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.band-i {
  padding: 28px 24px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  transition: transform .24s var(--ease), border-color .24s;
}
.band-i:hover { transform: translateY(-4px); border-color: var(--line-2); }

/* Étiquette de degré : c'est une clé de lecture, pas un titre. */
.band-k {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--grad-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue);
}
.band-t {
  display: block;
  margin-top: 16px;
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.03em;
  text-wrap: balance;
  color: var(--txt);
}
.band-i > span:last-child {
  display: block;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--dim);
}
.band-note {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--faint);
}

/* ── Témoignages ─────────────────────────────────────────── */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  transition: transform .24s var(--ease), border-color .24s;
}
.quote:hover { transform: translateY(-4px); border-color: var(--line-2); }
.quote blockquote {
  margin: 0;
  flex: 1;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--dim);
}
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote-av {
  width: 40px; height: 40px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--grad-soft);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--blue);
}
.quote figcaption b { display: block; font-size: 14.5px; }
.quote figcaption i {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--dim);
}

/* ── Contact ─────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact-card {
  display: grid;
  gap: 10px;
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
}
.contact-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 20px 44px rgba(0,0,0,.34);
}
.contact-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.contact-ic {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r);
  font-size: 20px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.contact-card b { font-size: 15.5px; word-break: break-word; }
.contact-card > span:last-child { font-size: 13.5px; color: var(--dim); }

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

.final { padding: 96px 0 104px; }
.final-inner {
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
  padding: 66px 32px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background:
    radial-gradient(38rem 22rem at 50% 0%, rgba(92,143,208,.22), transparent 65%),
    linear-gradient(180deg, var(--surface-dense), var(--surface-dense));
  box-shadow: 0 34px 80px rgba(0,0,0,.45);
}
.final h2 { font-size: clamp(30px, 4.6vw, 50px); font-weight: 900; line-height: 1.1; }
.final .lede { max-width: 40em; }

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

.footer { border-top: 1px solid var(--line); padding: 56px 0 32px; background: rgba(4,7,13,.7); }
.footer-inner { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 36px; }

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

.legal { padding-top: 72px; }
.legal-body { padding-top: 48px; padding-bottom: 96px; }
.legal-updated { font-family: var(--mono); font-size: 12.5px; color: var(--dim); }
.legal-body h1 { font-size: clamp(30px, 4vw, 44px); margin: 10px 0 28px; }
.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 52px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.legal-toc a {
  padding: 8px 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--grad-soft);
  font-size: 14px;
  transition: border-color .18s, color .18s;
}
.legal-toc a:hover { border-color: var(--blue); color: var(--blue); }
.legal-body section { margin-bottom: 64px; scroll-margin-top: 96px; }
.legal-body h2 {
  font-size: clamp(23px, 2.6vw, 30px);
  padding-bottom: 14px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.legal-body h3 { font-size: 17px; margin: 28px 0 10px; color: var(--blue); }
.legal-body p { margin-bottom: 14px; color: var(--dim); font-size: 15.5px; line-height: 1.7; }
.legal-body strong { color: var(--txt); }
.legal-body a:not(.btn):not(.logo) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.footer h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.footer nav { display: grid; gap: 9px; }
/* Un pouce, pas un curseur : ces liens faisaient 24 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: 14.5px; color: var(--dim); transition: color .18s;
  display: flex; align-items: center; min-height: 44px; }
.footer nav a:hover { color: var(--txt); }
.footer-note { margin-top: 16px; max-width: 44em; font-size: 13px; color: var(--faint); }
.footer-legal { max-width: var(--max); margin: 40px auto 0; padding: 20px var(--gutter) 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }

/* ── Séparation des sections ─────────────────────────────── */
/* Un trait gravé, pas une vague ni un halo. Les sphères floues et les vagues
 * SVG n'encodent rien : elles sont le décor par défaut du gabarit SaaS. Une
 * ligne d'un pixel qui marque la fin d'une section, elle, dit quelque chose. */

.section { position: relative; }
.section > .wrap { position: relative; z-index: 1; }
.section + .section::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--engrave) 18%, var(--engrave) 82%, transparent);
}

/* ── Sélecteur de langue ─────────────────────────────────── */
/* Même gravure que le reste de la barre. `appearance: none` retire le chrome
 * du système, qui rendrait un contrôle blanc arrondi au milieu de la laque. */

#langSelect {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  background: rgba(233,239,234,.04);
  color: var(--dim);
  font: 600 13px/1 var(--mono);
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
#langSelect:hover { color: var(--txt); border-color: var(--blue); }
#langSelect:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* La liste déroulante est peinte par le système : sans ces deux valeurs, elle
   s'ouvre en blanc sur blanc chez qui a un thème sombre au niveau de l'OS. */
#langSelect option { background: var(--card); color: var(--txt); }

/* ── Bascule de thème ────────────────────────────────────── */

.theme-toggle {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  background: rgba(233,239,234,.04);
  color: var(--dim);
  font-size: 17px;
  cursor: pointer;
  transition: color .18s, border-color .18s, transform .18s var(--ease);
}
.theme-toggle:hover { color: var(--txt); border-color: var(--blue); transform: rotate(-18deg); }
.theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── Bascule mensuel / annuel ────────────────────────────── */

.billing-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin: -28px auto 34px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: rgba(233,239,234,.04);
}
.bt-opt {
  padding: 9px 20px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--dim);
  font: 500 14.5px/1 var(--body);
  cursor: pointer;
  transition: color .18s, background .22s;
}
.bt-opt.is-on { background: var(--grad); color: var(--on-accent); font-weight: 700; }
.bt-opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.bt-save {
  padding: 0 14px 0 8px;
  font-size: 13px;
  color: var(--green);
  white-space: nowrap;
}
.plan-year {
  margin-top: -10px;
  font-size: 12.5px;
  font-family: var(--mono);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

/* ── Thème clair ─────────────────────────────────────────── */
/* Même page, même hiérarchie, autre lumière. Les surfaces sombres écrites en
 * dur plus haut sont reprises ici une par une : les convertir toutes en jetons
 * aurait touché deux cents lignes pour un rendu identique en sombre.
 * ponytail: surcharges ciblées ; à tokeniser si un troisième thème arrive. */

/* Le tableau en plein jour : papier ivoire, encre sombre. L'aiguille
 * s'assombrit — un bleu clair sur du papier tombe à 2:1 — et `--on-accent`
 * s'inverse, exactement comme l'ambre de Growdn devient brune en clair. */
:root[data-theme="light"] {
  --bg:      #f5f5fa;
  --bg-2:    #ffffff;
  --card:    #ffffff;
  --card-2:  #f0f0f7;
  --txt:     #1a1a2e;
  --dim:     #4a4a6a;
  --faint:   #6b6b85;

  --blue:    #2b5a8f;   /* bleu acier assombri — 6,5:1 sur l'ivoire */
  --violet:  #35699f;
  --cyan:    #1f4670;
  --green:   #10b981;
  --amber:   #d97706;
  --rose:    #dc2626;
  --on-accent: #ffffff;

  --line:    rgba(43, 90, 143, .22);
  --line-2:  rgba(43, 90, 143, .38);
  --engrave: rgba(26, 30, 28, .10);
  --glow:    rgba(43, 90, 143, .18);
  --grad-soft: linear-gradient(180deg, rgba(43,90,143,.10), rgba(43,90,143,.04));

  --surface:       rgba(255, 255, 255, .78);
  --surface-dense: rgba(255, 255, 255, .94);
  --surface-barre: rgba(245, 245, 250, .88);
}

:root[data-theme="light"] body::before {
  background: radial-gradient(58rem 38rem at 76% -10%, rgba(43,90,143,.10), transparent 62%);
}
:root[data-theme="light"] body::after { opacity: .018; }

/* Le graphe du fond est tracé en bleu clair, en fusion additive, pour une nuit
 * profonde : sur blanc il se noie. On l'assombrit et on le sature au lieu de
 * recalculer ses couleurs dans le shader — l'alpha, lui, reste intact, donc le
 * canvas ne devient pas un rectangle plein.
 * ponytail: filtre CSS ; à traiter dans hero.js s'il faut plus de finesse. */
:root[data-theme="light"] .bg-3d { filter: brightness(.45) saturate(1.7); opacity: .8; }

:root[data-theme="light"] .nav.is-stuck { background: rgba(246,244,239,.90); }
:root[data-theme="light"] .nav-links > a:not(.btn):hover,
:root[data-theme="light"] .btn--ghost,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .billing-toggle,
:root[data-theme="light"] .pill { background: rgba(43,90,143,.07); }
:root[data-theme="light"] .btn--ghost:hover { background: rgba(43,90,143,.13); }

:root[data-theme="light"] .console,
:root[data-theme="light"] .demo,
:root[data-theme="light"] .app-shot,
:root[data-theme="light"] .card,
:root[data-theme="light"] .plan,
:root[data-theme="light"] .layer,
:root[data-theme="light"] .step,
:root[data-theme="light"] .quote,
:root[data-theme="light"] .band-i,
:root[data-theme="light"] .contact-card,
:root[data-theme="light"] .float,
:root[data-theme="light"] .vs,
:root[data-theme="light"] .faq details {
  background: var(--card);
  box-shadow: 0 10px 30px rgba(26,30,28,.07);
}
:root[data-theme="light"] .console-bar,
:root[data-theme="light"] .demo-head,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .app-side,
:root[data-theme="light"] .row,
:root[data-theme="light"] .log,
:root[data-theme="light"] .faq details[open] { background: var(--card-2); }
:root[data-theme="light"] .final-inner {
  background:
    radial-gradient(38rem 22rem at 50% 0%, rgba(43,90,143,.12), transparent 65%),
    linear-gradient(180deg, var(--bg-2), var(--card-2));
  box-shadow: 0 24px 60px rgba(26,30,28,.11);
}
:root[data-theme="light"] .footer { background: rgba(246,244,239,.76); }
:root[data-theme="light"] .track { background: rgba(26,30,28,.10); }
:root[data-theme="light"] .lede,
:root[data-theme="light"] .log-m,
:root[data-theme="light"] .vs--us li { color: var(--dim); }
:root[data-theme="light"] .step-n { color: rgba(43,90,143,.10); }
:root[data-theme="light"] .footer-note,
:root[data-theme="light"] .footer-legal { color: var(--faint); }
:root[data-theme="light"] .console { box-shadow: 0 30px 70px rgba(26,30,28,.14); }

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

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 64px; }
  .console { transform: none; }
  .hero-visual:hover .console { transform: none; }
  .float--a { left: -2%; }
  .float--b { right: -2%; }
  .cards, .steps, .layers, .plans { grid-template-columns: repeat(2, 1fr); }
  .plan--featured { transform: none; }
  .figures { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .band, .quotes, .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .nav-burger {
    display: grid;
    gap: 5px;
    width: 42px; height: 38px;
    place-content: center;
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: rgba(233,239,234,.04);
    cursor: pointer;
  }
  .nav-burger span { display: block; width: 18px; height: 1.6px; background: var(--txt); border-radius: var(--r); }
  .nav-links {
    position: absolute;
    inset: 72px 16px auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px;
    border: 1px solid var(--line-2);
    border-radius: var(--r);
    background: var(--surface-dense);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links .btn { margin: 8px 0 0; }

  .section { padding: 76px 0; }
  .hero { padding: 76px 0 48px; }
  .cards, .steps, .layers, .plans, .versus, .demo-grid, .footer-inner { grid-template-columns: 1fr; }
  .demo-counters { grid-template-columns: repeat(2, 1fr); }
  .app-shot { grid-template-columns: 1fr; }
  .app-side { display: none; }
  .app-tiles { grid-template-columns: repeat(2, 1fr); }
  .float { position: static; margin-top: 12px; animation: none; }
  .console-tiles { grid-template-columns: 1fr; }
  .billing-toggle { margin: -14px auto 26px; flex-wrap: wrap; justify-content: center; }
  .figures { grid-template-columns: 1fr; }
  .band, .quotes, .contact-grid { grid-template-columns: 1fr; }
  .final-inner { padding: 46px 22px; }
}


/* ── Le téléphone du hero ────────────────────────────────────
   Les trois produits de la maison montrent la même chose au même endroit :
   un téléphone, avec les notifications de leur réseau. Kaptor affichait une
   fenêtre de tableau de bord — juste, mais étrangère aux deux autres pages.

   Les dimensions sont celles de growdn.com : 280 x 520. */
.phone{position:relative;width:min(100%,280px);margin:0 auto;
  border-radius:34px;padding:10px;
  background:linear-gradient(160deg,var(--surface-dense,#12203a),var(--bg,#0b0f19));
  border:1px solid var(--line,#22304a);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.7),0 0 46px -26px var(--accent,#4fb8ff)}
.phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:104px;height:20px;border-radius:0 0 14px 14px;
  background:var(--bg,#0b0f19);z-index:3}
.phone-screen{position:relative;height:498px;border-radius:26px;overflow:hidden;
  background:var(--surface,#0f1626);border:1px solid var(--line,#22304a);
  display:grid;grid-template-rows:auto auto auto 1fr auto auto}

.phone-status{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px 6px;font-family:var(--mono);font-size:.72rem;
  color:var(--txt,#e8eefc)}
.phone-sig{display:flex;align-items:flex-end;gap:2px}
.phone-sig i{width:3px;background:var(--muted,#8aa0c0);border-radius:1px;
  display:block}
.phone-sig i:nth-child(1){height:4px}
.phone-sig i:nth-child(2){height:6px}
.phone-sig i:nth-child(3){height:8px}
.phone-sig i:nth-child(4){height:10px}

.phone-app{display:flex;align-items:center;gap:9px;padding:8px 16px 12px;
  border-bottom:1px solid var(--line,#22304a)}
.phone-app b{font-size:.94rem}
.phone-mark{width:24px;height:24px;border-radius:6px;display:grid;
  place-items:center;background:#0a66c2;color:#fff;font-weight:800;
  font-size:.76rem;line-height:1}
.phone-app .pill{margin-left:auto}

.phone-tiles{display:grid;gap:8px;padding:12px 14px}
.ptile{display:grid;gap:5px;padding:9px 11px;border-radius:12px;
  background:var(--surface-dense,#12203a);border:1px solid var(--line,#22304a)}
.ptile-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted,#8aa0c0)}
.ptile b{font-size:1.12rem;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:3px}
.ptile b i{font-style:normal;font-size:.62em;color:var(--muted,#8aa0c0)}

.phone-feed{display:grid;gap:6px;padding:0 14px;align-content:start}
.phone-feed .row{display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:10px;background:var(--surface-dense,#12203a);
  border:1px solid var(--line,#22304a);font-size:.76rem}
.phone-feed .row b{font-weight:600}
.phone-feed .row span:last-child{margin-left:auto;font-family:var(--mono);
  font-size:.64rem;color:var(--muted,#8aa0c0);white-space:nowrap}

.console-note{padding:10px 16px 0;font-family:var(--mono);font-size:.58rem;
  line-height:1.5;color:var(--faint,#6b7f9e)}

.phone-graph{display:flex;align-items:flex-end;gap:4px;height:64px;
  padding:10px 16px 16px}
.phone-graph i{flex:1;border-radius:3px 3px 0 0;display:block;
  height:calc(var(--h) * 100%);
  background:linear-gradient(180deg,var(--accent,#4fb8ff),
             color-mix(in srgb,var(--accent,#4fb8ff) 35%,transparent))}

@media (max-width:900px){.phone{margin:0 auto}}


/* Le texte du hero centre dans sa colonne, comme sur la page Instagram. */
.hero-text { text-align: center; justify-items: center; }
.hero-text .badge { justify-self: center; }
.hero-text .hero-cta, .hero-text .hero-notes { justify-content: center; }
@media (max-width: 900px) { .hero-text { text-align: center; } }


/* ── 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-text, .hero-head, .card, .step, .layer, .plan, .contact-card, .card-tag, .layer-k, .plan-badge, .plan-name, .plan-for, .band-k, .step-tag, .faq-q, .faq-a { text-align: center; }
  .plan li, .vs li, .hero-trust li, .price, .hero-trust { justify-content: center; }

  /* Les blocs ne se deplacent pas avec `text-align` : on les recentre. */
  .card-ic, .step-ic, .step-n, .layer-ic, .hero-text, .hero-head { 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; }

  /* Le premier ecran ne montre que le message : la maquette de telephone
     commence sous la ligne de flottaison et se decouvre au premier
     defilement. Elle depassait de 13 px — entrevue, coupee, elle volait
     l'attention au titre sans rien raconter. */
  .hero { padding: 168px 0 0; }
  .hero h1 { margin-bottom: 20px; }
  .hero-cta { margin-top: 32px; }
  .hero-trust { margin-top: 30px; }
  .hero-inner { gap: 0; }
  .hero-visual, .phone { margin-top: 40px; }

  /* ── Les titres, au bon niveau de specificite ───────────────────
     `.hero h1` et `.final h2` battent un `h1`/`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 ────────────
     Centre dans une grille, il retrecissait a la largeur de son texte —
     et un bouton a 100 % ne remplissait alors que ces 207 px. */
  .hero-cta, .cta { justify-self: stretch; align-self: stretch; width: 100%; }

  /* ── 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;
  }
}