/* Page de vente de Dekod.

   Mêmes jetons que le panneau, à une exception près : l'accent est celui de
   l'application elle-même (#FF5E4D), pas celui de la console. Quelqu'un qui
   arrive ici verra le logiciel juste après ; c'est sa couleur qui doit être
   dans sa tête, pas la nôtre. */

:root {
  --ground:      #0A0C11;
  --surface:     #141822;
  --surface-2:   #1B2029;
  --surface-3:   #222836;
  --line:        #252C38;
  --line-soft:   #1E2430;
  --text:        #E6E9EF;
  --dim:         #8B93A3;
  --faint:       #5C6472;
  --accent:      #FF5E4D;
  --accent-2:    #FF8A5B;
  --accent-soft: rgba(255, 94, 77, 0.13);
  --ok:          #3DDC97;
  --warn:        #FFB454;
  --info:        #6EA8FE;

  --r:   14px;
  --r-s: 9px;

  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --disp: "Archivo", "Instrument Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --page: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

a { color: inherit; text-decoration: none; }

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

.page { width: min(var(--page), calc(100% - 44px)); margin: 0 auto; }

/* ------------------------------------------------------------- entete -- */

header.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 12, 17, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

header.top.colle { border-bottom-color: var(--line); }

.top .page {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 66px;
}

.marque {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

/* L'anneau du logo, dessiné plutôt qu'importé : deux cercles concentriques,
   les mêmes que la barre de titre de l'application. */
.anneau {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  flex: none;
}

.anneau::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--ground);
}

nav.liens { display: flex; gap: 26px; margin-left: 14px; }

nav.liens a {
  color: var(--dim);
  font-size: 14.5px;
  transition: color 0.15s;
}

nav.liens a:hover { color: var(--text); }

.top .droite { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ------------------------------------------------------------- boutons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.btn:hover { background: var(--surface-3); border-color: #2E3646; }
.btn:active { transform: translateY(1px); }

.btn.primaire {
  background: linear-gradient(140deg, var(--accent), #E8452F);
  border-color: transparent;
  color: #150B08;
}

.btn.primaire:hover { filter: brightness(1.07); }

.btn.petit { height: 38px; padding: 0 16px; font-size: 14px; }
.btn svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------- hero -- */

.hero { position: relative; padding: 92px 0 40px; overflow: hidden; }

/* Halo derrière le titre. Sans lui, un fond uniformément noir sur 900 pixels
   de haut donne une page qui a l'air éteinte. */
.hero::before {
  content: "";
  position: absolute;
  top: -420px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  height: 780px;
  background: radial-gradient(closest-side,
              rgba(255, 94, 77, 0.16), transparent 72%);
  pointer-events: none;
}

/* Hero centre.

   Aligne a gauche, le titre et le texte tenaient sur la moitie gauche et la
   moitie droite restait vide, alors que la maquette de l'application en
   dessous prend toute la largeur. Le desequilibre se voyait plus que le
   contenu. Une colonne centree remplit l'ecran de facon symetrique et met le
   titre la ou l'oeil arrive. */
.hero .page { position: relative; text-align: center; }

h1 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  margin: 0 auto 22px;
  max-width: 24ch;
  /* Sans ca le titre cassait en quatre lignes dont la derniere portait un
     seul mot, avec un grand vide a droite. `balance` egalise les lignes. */
  text-wrap: balance;
}

h1 em {
  font-style: normal;
  /* La partie coloree ne doit pas se casser en deux lignes : l'accent perd
     son effet et la coupure se voit d'autant plus qu'elle est rouge. */
  white-space: nowrap;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.chapo {
  font-size: 19px;
  line-height: 1.62;
  color: var(--dim);
  max-width: 60ch;
  margin: 0 auto 34px;
  /* Meme raison que le titre : la troisieme ligne se retrouvait reduite a
     « dessus le jeu. », coupee juste apres un trait d'union. */
  text-wrap: balance;
}

.chapo b { color: var(--text); font-weight: 600; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.actions .note { color: var(--faint); font-size: 13.5px; margin-left: 4px; }

.faits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  margin-top: 34px;
  color: var(--dim);
  font-size: 14.5px;
}

.faits span { display: inline-flex; align-items: center; gap: 9px; }
.faits svg { width: 16px; height: 16px; color: var(--ok); flex: none; }

/* ------------------------------------------------- maquette de l'appli -- */

/* Le hero est centre, la maquette non : une fenetre d'application aligne son
   contenu a gauche, et des horodatages centres se voyaient tout de suite. */
.vitrine { margin-top: 62px; position: relative; text-align: left; }

.vitrine::after {
  content: "";
  position: absolute;
  inset: auto 8% -30px 8%;
  height: 60px;
  background: radial-gradient(closest-side, rgba(255, 94, 77, 0.18), transparent);
  filter: blur(18px);
  pointer-events: none;
}

.appli {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--ground);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.appli .barre {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 46px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.appli .barre .nom {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.appli .barre .etat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dim);
  font-size: 12.5px;
}

.appli .barre .etat i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(61, 220, 151, 0.15);
}

.appli .barre .sys { margin-left: auto; display: flex; gap: 16px; color: var(--faint); }
.appli .barre .sys { align-items: center; }
.appli .barre .sys i { width: 11px; height: 1.5px; background: currentColor; }
.appli .barre .sys u { width: 10px; height: 10px; border: 1.5px solid currentColor; }
.appli .barre .sys svg { width: 11px; height: 11px; }

.appli .corps { display: flex; min-height: 330px; }

.appli .rail {
  width: 60px;
  border-right: 1px solid var(--line);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  flex: none;
}

.appli .rail b {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--surface-2);
  display: block;
}

.appli .rail b.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(255, 94, 77, 0.4); }
.appli .rail b.bas { margin-top: auto; }

.appli .flux { flex: 1; padding: 20px 22px; min-width: 0; }

.ligne-t {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-s);
  background: var(--surface);
  padding: 13px 16px;
  margin-bottom: 11px;
}

.ligne-t .meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: var(--faint);
  font-family: var(--mono);
}

.ligne-t .pastille {
  padding: 1px 8px;
  border-radius: 20px;
  background: rgba(110, 168, 254, 0.15);
  color: var(--info);
  font-weight: 500;
}

.ligne-t .src { color: var(--dim); font-size: 14.5px; margin-bottom: 5px; }
.ligne-t .trad { font-size: 15.5px; }

/* Surimpression posée sur la maquette : ce que le joueur voit par-dessus le
   jeu, pas dans la fenêtre. */
.surimpression {
  position: absolute;
  right: 26px;
  bottom: 26px;
  width: min(330px, 46%);
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 12, 17, 0.9);
  backdrop-filter: blur(8px);
  padding: 13px 15px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

.surimpression .titre {
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

.surimpression p { margin: 0 0 7px; font-size: 14px; }
.surimpression p:last-child { margin-bottom: 0; color: var(--dim); }

/* ------------------------------------------------------------ sections -- */

section { padding: 84px 0; }
section.serre { padding: 56px 0; }

.titre-sec {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(27px, 3.4vw, 38px);
  letter-spacing: -0.022em;
  line-height: 1.16;
  margin: 0 0 16px;
}

.intro-sec {
  color: var(--dim);
  font-size: 17px;
  max-width: 62ch;
  margin: 0 0 44px;
}

.etiquette {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* Section centree : tout suit, sinon l'etiquette reste seule a gauche. */
.centree { text-align: center; }
.centree .intro-sec { margin-left: auto; margin-right: auto; }

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

.carte {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 26px;
  transition: border-color 0.18s, transform 0.18s;
}

.carte:hover { border-color: #2E3646; transform: translateY(-2px); }

.carte .icone {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.carte .icone svg { width: 20px; height: 20px; }

.carte h3 {
  font-family: var(--disp);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 9px;
  letter-spacing: -0.01em;
}

.carte p { margin: 0; color: var(--dim); font-size: 15px; }
.carte p + p { margin-top: 11px; }

/* Carte dont le bouton doit finir en bas.

   Dans une grille, deux cartes ont la meme hauteur mais pas la meme quantite
   de texte : le bouton de l'une se retrouvait vingt pixels plus haut que
   celui de l'autre, et l'oeil ne voyait plus que ca. `margin-top: auto`
   pousse le bouton contre le bas, quel que soit le texte au-dessus. */
.carte.pile { display: flex; flex-direction: column; }
.carte.pile .btn { margin-top: auto; }

/* Deux chiffres cote a cote : ce que ca pese une fois installe, et ce qu'il
   faut telecharger. Les deux questions se posent, pas la meme. */
.stats { display: flex; gap: 26px; margin: 18px 0 20px; }
.stats b {
  display: block;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.stats span { font-size: 12.5px; color: var(--faint); }

/* Les étapes du traitement. Numérotées plutôt que fléchées : une flèche
   Unicode dans une page se lit mal et vieillit vite. */
.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.etape {
  border-top: 2px solid var(--line);
  padding-top: 18px;
  position: relative;
}

.etape::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 34px;
  height: 2px;
  background: var(--accent);
}

.etape .num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 9px;
}

.etape h4 {
  font-family: var(--disp);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
}

.etape p { margin: 0; color: var(--dim); font-size: 14.5px; }

/* --------------------------------------------------------- ce que non -- */

.franchise {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    linear-gradient(180deg, rgba(61, 220, 151, 0.05), transparent 40%),
    var(--surface);
  padding: 38px;
}

.franchise ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }

.franchise li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 16px;
}

.franchise li svg { width: 19px; height: 19px; color: var(--ok); flex: none; margin-top: 3px; }

.reserve {
  border-left: 2px solid var(--warn);
  padding-left: 16px;
  color: var(--dim);
  font-size: 14.5px;
}

/* ------------------------------------------------------------- tableau -- */

.tableau {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.tableau th,
.tableau td { padding: 15px 18px; text-align: left; font-size: 15px; }

.tableau thead th {
  background: var(--surface-2);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
}

.tableau tbody tr { border-top: 1px solid var(--line-soft); }
.tableau tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.012); }
.tableau td.mono { font-family: var(--mono); font-size: 13.5px; color: var(--dim); }
.tableau .reco { color: var(--ok); font-weight: 600; }

/* --------------------------------------------------------------- tarif -- */

.prix-carte {
  border: 1px solid rgba(255, 94, 77, 0.34);
  border-radius: var(--r);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 94, 77, 0.09), transparent 62%),
    var(--surface);
  padding: 44px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

.prix {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 58px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.prix .periode {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--dim);
  letter-spacing: 0;
}

.prix-carte ul {
  list-style: none;
  padding: 0;
  margin: 28px 0;
  text-align: left;
  display: grid;
  gap: 11px;
}

.prix-carte li { display: flex; gap: 12px; font-size: 15px; }
.prix-carte li svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 3px; }

/* ----------------------------------------------------------------- faq -- */

.faq { display: grid; gap: 12px; }

details {
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
  overflow: hidden;
}

details[open] { border-color: #2E3646; }

summary {
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-right: 1.8px solid var(--faint);
  border-bottom: 1.8px solid var(--faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s;
  flex: none;
}

details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }

details .rep { padding: 0 22px 20px; color: var(--dim); font-size: 15px; }
details .rep p { margin: 0 0 11px; }
details .rep p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- final -- */

.final {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(255, 94, 77, 0.1), transparent 60%),
    var(--surface);
  padding: 58px 40px;
  text-align: center;
}

.final h2 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 36px);
  letter-spacing: -0.022em;
  margin: 0 0 14px;
}

.final p { color: var(--dim); max-width: 52ch; margin: 0 auto 28px; }

footer.bas {
  border-top: 1px solid var(--line);
  padding: 34px 0 46px;
  color: var(--faint);
  font-size: 14px;
}

footer.bas .page { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
footer.bas a:hover { color: var(--dim); }
footer.bas .push { margin-left: auto; display: flex; gap: 22px; }

/* ------------------------------------------------------------ etroit --- */

@media (max-width: 940px) {
  .grille.trois, .grille.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  nav.liens { display: none; }
  .surimpression { display: none; }
}

@media (max-width: 620px) {
  .grille.trois, .grille.deux, .grille.quatre,
  .etapes { grid-template-columns: minmax(0, 1fr); }
  section { padding: 58px 0; }
  .hero { padding: 56px 0 20px; }
  .appli .rail { display: none; }
  .franchise, .prix-carte, .final { padding: 26px; }
  .tableau th, .tableau td { padding: 12px 13px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}