/* ─────────────────────────────────────────────────────────────────────────
   KillMeBond — page de présentation
 
   La palette vient du logo : un noir qui tire sur le vert, un jade unique,
   un blanc d'os. Les gris sont volontairement biaisés vers l'accent — un gris
   neutre aurait l'air d'un gris par défaut.
 
   Un seul thème, assumé. Le logo commet une image sombre ; la décliner en
   clair l'affaiblirait. Toutes les couleurs sont donc posées explicitement,
   pour que la page tienne quel que soit le fond de l'hôte.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --vide:      #060a07;
  --panneau:   #0c1310;
  --releve:    #111a15;
  --filet:     #1b2a22;
  --encre:     #e8f0ea;
  --sourdine:  #7d9186;
  --jade:      #2ecc55;
  --jade-sourd:#1d7f37;
  --os:        #f4f7f5;

  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --texte: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;

  --mesure: 62ch;
  --large: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  /* Le survol garde son relief : c'est un retour d'état, pas une animation. */
  .carte:hover { transform: none; }
}

body {
  margin: 0;
  padding-inline: 20px;
  background: var(--vide);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.enveloppe { max-width: var(--large); margin-inline: auto; }

a { color: var(--jade); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; border-radius: 2px; }

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

.entete {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-block: 20px;
  border-bottom: 1px solid var(--filet);
  flex-wrap: wrap;
}

.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marque img { width: 34px; height: 34px; border-radius: 8px; }
.marque b {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.marque b i { color: var(--jade); font-style: normal; }

.menu { display: flex; gap: 22px; margin-inline-start: auto; flex-wrap: wrap; }
.menu a {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--sourdine);
  text-decoration: none;
}
.menu a:hover { color: var(--encre); }

/* Le sélecteur de langue est écrit comme un drapeau de commande : c'est la
   langue du produit, et il n'a pas besoin d'une autre explication. */
.langues { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; font-family: var(--mono); font-size: 12px; }
.langues .plat { color: var(--jade-sourd); margin-inline-end: 6px; }
.langues button {
  background: none;
  border: 0;
  padding: 4px 6px;
  font: inherit;
  color: var(--sourdine);
  cursor: pointer;
  border-radius: 4px;
}
.langues button:hover { color: var(--encre); }
.langues button[aria-pressed='true'] { color: var(--jade); background: #0f1a13; }

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

/* Le hero est le seul endroit où la page hausse le ton : une lueur au loin
   et une trame fine. De l'atmosphère, pas des effets — le logo, lui, est posé
   franchement, seul, dans la seconde colonne. */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding-block: 96px 104px;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -20% -40% auto -30%;
  height: 130%;
  z-index: -2;
  background:
    radial-gradient(58% 62% at 22% 34%, rgba(46, 204, 85, 0.13), transparent 68%),
    radial-gradient(42% 48% at 78% 18%, rgba(46, 204, 85, 0.06), transparent 70%);
  pointer-events: none;
}

/* La trame : l'écran d'un terminal, à peine visible. Elle donne au fond une
   matière que l'aplat n'a pas, sans jamais concurrencer le texte. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(46, 204, 85, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 204, 85, 0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(72% 78% at 30% 42%, #000 0%, transparent 74%);
  pointer-events: none;
}


.surtitre {
  font-family: var(--mono);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jade);
  margin: 0 0 24px;
}

/* Une pastille qui bat lentement : le seul mouvement de la page, et il dit
   quelque chose — le produit est vivant, il s'écrit en ce moment. */
.surtitre::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 0 0 rgba(46, 204, 85, 0.55);
  animation: battement 2.6s ease-out infinite;
}

@keyframes battement {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 85, 0.5); }
  70%  { box-shadow: 0 0 0 11px rgba(46, 204, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 85, 0); }
}

.hero h1 {
  font-family: var(--mono);
  font-weight: 800;
  font-size: clamp(2.1rem, 5.1vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
  margin: 0;
  white-space: pre-line;
  text-wrap: balance;
}
.hero h1 em {
  display: block;
  color: var(--jade);
  font-style: normal;
  margin-top: 0.3em;
  text-shadow: 0 0 42px rgba(46, 204, 85, 0.45);
}

.hero p.chapo {
  max-width: var(--mesure);
  color: var(--sourdine);
  font-size: 1.06rem;
  margin: 26px 0 0;
}

.actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

.bouton {
  font-family: var(--mono);
  font-size: 13px;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid transparent;
  display: inline-block;
}
.bouton.plein { background: var(--jade); color: #04120a; font-weight: 700; }
.bouton.plein:hover { background: #38d962; }
.bouton.vide { border-color: var(--filet); color: var(--encre); }
.bouton.vide:hover { border-color: var(--jade-sourd); }

.version {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--jade-sourd);
  margin: 22px 0 0;
}

/* ── Les cadrans : la signature visuelle du produit ───────────────────── */

.cadrans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 20px;
  background: var(--panneau);
  border: 1px solid var(--filet);
  border-radius: 14px;
}
.cadran { text-align: center; }
.cadran svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.cadran .nom {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--sourdine);
  margin-bottom: 6px;
}
.cadran .valeur { font-family: var(--mono); font-size: 11px; color: var(--encre); margin-top: 6px; }
.cadrans .legende {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--sourdine);
  text-align: center;
  padding-top: 4px;
  border-top: 1px solid var(--filet);
  margin-top: 4px;
}

/* L'aiguille frétille autour de son axe (66, 46 dans le viewBox), comme un
   galvanomètre qui suit un signal. Le mouvement est volontairement irrégulier
   et de faible amplitude — moins d'un degré et demi — pour rester vivant sans
   devenir un métronome. Les deux cadrans battent à des rythmes différents. */
.cadran .aiguille {
  transform-box: view-box;
  transform-origin: 66px 46px;
  animation: fretille 1.3s ease-in-out infinite;
}
.cadran:nth-of-type(2) .aiguille {
  animation-duration: 1.05s;
  animation-delay: -0.45s;
}

@keyframes fretille {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(1.2deg); }
  22%  { transform: rotate(-0.5deg); }
  34%  { transform: rotate(0.8deg); }
  47%  { transform: rotate(-1.0deg); }
  58%  { transform: rotate(0.3deg); }
  71%  { transform: rotate(-0.6deg); }
  84%  { transform: rotate(1.0deg); }
  100% { transform: rotate(0deg); }
}

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

section { padding-block: 72px; border-top: 1px solid var(--filet); }

h2 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0 0 34px;
  text-wrap: balance;
}
/* L'invite devant les titres : la page se lit comme une session, et ce signe
   dit où commence chaque commande. */
h2::before { content: '> '; color: var(--jade); }

h3 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

p { margin: 0 0 16px; max-width: var(--mesure); }
p:last-child { margin-bottom: 0; }
.sourdine { color: var(--sourdine); }

/* ── Grilles ──────────────────────────────────────────────────────────── */

.trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.deux  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

/* Les cartes réagissent : elles se soulèvent, leur filet s'éclaire, et un
   trait jade se déroule en tête. Le mouvement part du haut, là où l'œil
   arrive. */
.carte {
  position: relative;
  padding: 24px;
  background: linear-gradient(180deg, var(--releve) 0%, var(--panneau) 100%);
  border: 1px solid var(--filet);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.carte::after {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--jade), transparent);
  transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.carte:hover {
  transform: translateY(-3px);
  border-color: #2a4436;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(46, 204, 85, 0.07);
}
.carte:hover::after { width: 100%; }
.carte:hover h3 { color: var(--jade); }

.carte h3 { transition: color 0.22s ease; }
.carte p { color: var(--sourdine); font-size: 0.94rem; margin: 0; }


/* ── La section signature : le seul endroit où l'on hausse la voix ────── */

.signature { background: linear-gradient(180deg, #08110c 0%, var(--vide) 100%); }
.signature .corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 48px; }
.signature p { color: var(--sourdine); }
.signature p strong { color: var(--encre); font-weight: 600; }

code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--releve);
  border: 1px solid var(--filet);
  padding: 0.12em 0.4em;
  border-radius: 4px;
  color: var(--os);
  word-break: break-word;
}

.mesures {
  border: 1px solid var(--jade-sourd);
  border-radius: 12px;
  padding: 22px;
  background: #070f0a;
  align-self: start;
}
.mesures .titre {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--jade);
  margin-bottom: 18px;
}
.mesures dl { margin: 0; display: grid; gap: 14px; }
.mesures .duo { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.mesures dt { color: var(--sourdine); font-size: 0.9rem; }
.mesures dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--jade);
  font-variant-numeric: tabular-nums;
}

/* ── Les chiffres du natif ────────────────────────────────────────────── */

.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.chiffre b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--os);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.chiffre span { font-size: 0.85rem; color: var(--sourdine); }

/* ── Tableau de comparaison ───────────────────────────────────────────── */

.defile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 560px; }
th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sourdine);
  font-weight: 500;
  border-bottom: 1px solid var(--filet);
  padding: 0 18px 10px 0;
}
td { padding: 15px 18px 15px 0; border-bottom: 1px solid var(--filet); color: var(--sourdine); }
td:first-child { color: var(--encre); font-family: var(--mono); font-size: 0.88rem; }
tr.nous td { background: #0a140e; }
tr.nous td:first-child { color: var(--jade); font-weight: 700; }
.oui { color: var(--jade); font-weight: 600; }

/* ── Obtenir ──────────────────────────────────────────────────────────── */

.obtenir { text-align: center; }
.obtenir h2 { text-align: left; }
.obtenir .bloc { max-width: 560px; margin-inline: auto; text-align: center; }
.obtenir p { margin-inline: auto; }

form.avis { display: flex; gap: 10px; margin: 28px 0 14px; flex-wrap: wrap; justify-content: center; }
form.avis input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px 15px;
  border-radius: 8px;
  border: 1px solid var(--filet);
  background: var(--panneau);
  color: var(--encre);
  font: inherit;
  font-size: 0.95rem;
}
form.avis input::placeholder { color: #4d5f56; }
form.avis input:focus { border-color: var(--jade-sourd); outline: none; }
form.avis button {
  padding: 12px 24px;
  border-radius: 8px;
  border: 0;
  background: var(--jade);
  color: #04120a;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
form.avis button:hover { background: #38d962; }

.prix { font-family: var(--mono); font-size: 11.5px; color: var(--jade-sourd); }
.merci { color: var(--jade); font-family: var(--mono); font-size: 13px; }

/* ── Pied ─────────────────────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--filet);
  padding-block: 28px 40px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--sourdine);
}

/* ── Adaptations ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-block: 56px 68px; }
  .signature .corps { grid-template-columns: 1fr; gap: 32px; }
  .trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  section { padding-block: 56px; }
}

@media (max-width: 560px) {
  body { padding-inline: 16px; }
  .trois, .deux { grid-template-columns: 1fr; }
  .menu { gap: 16px; margin-inline-start: 0; width: 100%; }
  .entete { gap: 16px; }
}

/* ── Cartes d'offre par plateforme ────────────────────────────────────
 
   Trois colonnes comparables ligne à ligne : mêmes fonctions, mêmes
   hauteurs, même place pour chaque élément. C'est ce qui permet de lire
   les différences en descendant du regard plutôt qu'en relisant trois
   paragraphes.
   ─────────────────────────────────────────────────────────────────────── */

.sous { margin-top: -22px; margin-bottom: 30px; }

.offres { align-items: stretch; }

.plateforme {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 26px 24px 24px;
}

.plateforme .tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plateforme .tete h3 { margin: 0; font-size: 1.4rem; letter-spacing: -0.02em; }

/* La disponibilité se lit à la pastille avant le texte : c'est la seule
   information qu'on vient chercher dans ces trois cartes. */
.plateforme .etat {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--filet);
  color: var(--sourdine);
  white-space: nowrap;
}
.plateforme.prete .etat {
  color: var(--jade);
  border-color: var(--jade-sourd);
  background: rgba(46, 204, 85, 0.08);
}

/* Le triplet de cible plutôt qu'un logo : c'est le nom que la plateforme se
   donne elle-même, et le public de cette page le lit tous les jours. */
.plateforme .cible {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--jade-sourd);
  margin: 6px 0 0;
}

/* La note dit ce que la pastille ne dit pas. L'état, lui, n'est annoncé
   qu'une fois : il l'était deux fois, en pastille et en gros titre, et le
   lecteur cherchait la différence entre les deux formulations. */
.plateforme .note {
  margin: 14px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--filet);
  font-size: 0.86rem;
  color: var(--sourdine);
}

.plateforme .fonctions {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
  /* Pousse le bouton en bas : trois cartes dont les boutons ne s'alignent
     pas se comparent mal, et l'œil s'accroche à ce défaut avant le texte. */
  flex: 1;
  align-content: start;
}
.plateforme .fonctions li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  align-items: baseline;
  font-size: 0.9rem;
  color: var(--sourdine);
}
.plateforme .fonctions li.oui { color: var(--encre); }
.plateforme .fonctions li.autre { color: #55665d; }

.marque { font-family: var(--mono); font-size: 0.95em; }
li.oui .marque, .marque.oui { color: var(--jade); }
li.bientot .marque, .marque.bientot { color: #b8863a; }
li.autre .marque, .marque.autre { color: #55665d; }

.plateforme .bouton { margin-top: 22px; text-align: center; }

/* La légende explique les trois marques une seule fois, sous les trois
   cartes — la répéter dans chacune l'aurait alourdie sans rien ajouter. */
.legende-etats {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  font-size: 0.82rem;
  color: var(--sourdine);
}
.legende-etats li { display: flex; align-items: baseline; gap: 8px; }

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

/* Le pied porte les crédits obligatoires : la mention des bibliothèques est
   une condition de leur licence, pas une courtoisie. */
footer .credits { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
footer .credits .sep { color: var(--filet); }
footer a { color: var(--sourdine); text-decoration: underline; }
footer a:hover { color: var(--jade); }

/* ── La marque dans le hero ───────────────────────────────────────────── */

/* Le hero ne garde que le logo, posé plus grand. Il porte déjà son cadre et
   son fond : pas de carte autour, seulement une lueur qui le détache et un
   léger grossissement au survol. */
.colonne-hero { display: flex; flex-direction: column; gap: 22px; }

.logo-hero {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.logo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(56% 56% at 50% 46%, rgba(46, 204, 85, 0.20), transparent 72%);
  opacity: 0.8;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.logo-hero img {
  width: min(300px, 74%);
  height: auto;
  display: block;
  border-radius: 18px;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.logo-hero:hover img { transform: scale(1.05); }
.logo-hero:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .logo-hero img { transition: none; }
  .logo-hero:hover img { transform: none; }
}

@media (max-width: 900px) {
  .logo-hero img { width: min(220px, 56%); }
}