/* Les pages de référencement (`/partage-ecran-discord/`, `/discord-screen-share/`).

   ⚠️ Elles sont HORS de l'application React, exprès : le site route par fragment
   (`#/tarifs`), et un robot ne voit qu'UNE page derrière tous les fragments. Une
   page qui doit sortir sur une recherche précise doit exister à sa propre
   adresse, avec son titre et son texte dans le HTML servi — pas après le montage
   d'un script. Caddy les sert par `try_files {path} {path}index.html`.

   Mêmes jetons que le site, recopiés à la main comme `/paiement/` : une seule
   teinte de marque, anneaux intérieurs plutôt que `border`, aucun dégradé sauf
   le lavis du fond. Aucun script : la CSP du site (`script-src 'self'`) n'a
   rien à autoriser. */

@font-face {
  font-family: "Instrument Sans";
  src: url("/paiement/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --fond: #f2f2f4;
  --carte: #ffffff;
  --encre: rgba(10, 10, 12, 0.94);
  --corps: rgba(10, 10, 12, 0.76);
  --gris: rgba(10, 10, 12, 0.62);
  --trait: rgba(10, 10, 12, 0.08);
  --corail: #fd895e;
  --corail-texte: #c94a18;
  --encre-bouton: #0a0a0b;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--encre); }
body {
  font: 17px/1.6 "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Le lavis : la seule forme colorée diffuse permise, un dégradé PEINT, jamais
   un `filter: blur` (cf. `src/index.css`, 168 ms par image contre 8).
   ⚠️ Il tient dans la LARGEUR de la page (`left: 0; right: 0`) et c'est le
   dégradé qui est décentré, pas la boîte : une boîte de 1100 px posée en
   débord faisait 752 px de large sur un téléphone de 372, donc un défilement
   horizontal. `overflow-x: hidden` sur `body` ne le rattrapait pas. */
body::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: 900px;
  background: radial-gradient(560px 460px at 88% 0%, rgba(253, 137, 94, 0.16), rgba(253, 137, 94, 0.07) 55%, transparent);
  pointer-events: none;
}

a { color: var(--corail-texte); }

.barre {
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.marque {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--encre);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.marque img { width: 28px; height: auto; }
.langue { font-size: 14px; color: var(--gris); }

main { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }

.chapeau {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--corail-texte);
  background: #fff4ef;
  padding: 4px 10px;
  border-radius: 999px;
}
h1 {
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 16px 0 16px;
}
h2 {
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 48px 0 12px;
}
p, li { color: var(--corps); }
.intro { font-size: 20px; line-height: 1.5; color: var(--gris); margin: 0 0 28px; }

.capture {
  margin: 32px -16px 8px;
  border-radius: 20px;
  overflow: hidden;
  background: #0d0e11;
  box-shadow: 0 30px 70px -24px rgba(10, 10, 12, 0.35), 0 10px 24px -10px rgba(10, 10, 12, 0.2);
}
.capture img { display: block; width: 100%; height: auto; }
@media (min-width: 800px) { .capture { margin: 40px -60px 8px; } }

.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.chiffres li {
  background: var(--carte);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: inset 0 0 0 1px var(--trait);
}
.chiffres b {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--encre);
}
.chiffres span { font-size: 14px; color: var(--gris); }

ol.etapes { padding-left: 22px; }
ol.etapes li { margin: 8px 0; }

.faq dt { font-weight: 600; color: var(--encre); margin-top: 20px; }
.faq dd { margin: 6px 0 0; color: var(--corps); }

.appel {
  margin: 48px 0 0;
  padding: 28px;
  background: var(--carte);
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--trait);
}
.appel h2 { margin-top: 0; }
.bouton {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--encre-bouton);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.appel .petit { font-size: 14px; color: var(--gris); margin: 12px 0 0; }

footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  font-size: 13px;
  color: var(--gris);
  border-top: 1px solid var(--trait);
}
footer p { color: var(--gris); margin: 6px 0; }

/* « Les autres guides » : le maillage entre les pages. C'est ce qui fait
   qu'un moteur arrivé sur l'une trouve toutes les autres sans le sitemap. */
.guides { margin-top: 48px; }
.guides ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.guides a {
  display: block;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--carte);
  box-shadow: inset 0 0 0 1px var(--trait);
  color: var(--encre);
  text-decoration: none;
}
.guides a:hover { box-shadow: inset 0 0 0 1px rgba(10, 10, 12, 0.18); }