/* Pages secondaires (une page par fonctionnalité).
   Mêmes couleurs, polices et composants que l'accueil, qui garde son CSS
   en ligne. Toute page qui ajoute un composant le met ici, pas dans son <head>. */
:root {
  --bg: #120e0b;
  --bg-2: #1a1511;
  --panel: #1d1814;
  --line: rgba(255, 236, 214, 0.09);
  --text: #f1e9de;
  --muted: #a39585;
  --amber: #e8a062;
  --green: #7fcf8e;
  --red: #e0705f;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Figtree", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background: radial-gradient(1000px 520px at 85% -10%, rgba(232,160,98,.13), transparent 60%);
}
header, main, footer { position: relative; z-index: 1; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; line-height: 1.1; font-variation-settings: "opsz" 120; }

/* nav : identique à l'accueil, le lien de la page courante est allumé */
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 22px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 24px var(--serif); }
.logo img { width: 34px; }
.logo i { font-weight: 400; color: var(--muted); margin-right: 2px; }
.nav nav { display: flex; gap: 28px; align-items: center; }
.nav nav a { text-decoration: none; color: var(--muted); font-size: 15px; }
.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--text); }
.btn { display: inline-flex; gap: 8px; align-items: center; padding: 12px 22px; border-radius: 10px; font: 600 15px var(--sans); text-decoration: none; border: 1px solid transparent; transition: transform .15s, background .2s; }
.btn-amber { background: var(--amber); color: #23160b !important; box-shadow: 0 8px 28px rgba(232,160,98,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-amber:hover { transform: translateY(-2px); background: #f0ad73; }
.btn-line { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.02); }
.btn-line:hover { background: rgba(255,255,255,.06); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* en-tête de page */
.intro { padding-block: 56px 48px; max-width: 760px; }
.intro h1 { font-size: clamp(40px, 5.6vw, 68px); margin-bottom: 22px; }
.intro .lead { color: var(--muted); font-size: 19px; margin-bottom: 32px; }
.shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 100px rgba(0,0,0,.6); background: var(--panel); }
.shot + figcaption { color: var(--muted); font-size: 14px; margin-top: 12px; }

/* corps : colonne de lecture */
.prose { max-width: 760px; }
.prose section { padding-top: 88px; }
.prose h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 18px; }
.prose h3 { font-size: 22px; margin: 28px 0 8px; }
.prose p { margin-bottom: 16px; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--amber); }
.prose ul { list-style: none; margin: 4px 0 18px; }
.prose ul li { padding: 4px 0 4px 24px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 13px; width: 11px; height: 11px; background: url(gland.png) center/contain no-repeat; }

/* étapes numérotées (installation) : même pastille que la frise de l'accueil */
.prose ol.howto { list-style: none; counter-reset: s; margin: 8px 0 20px; }
.prose ol.howto li { counter-increment: s; position: relative; padding: 2px 0 14px 46px; }
.prose ol.howto li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(232,160,98,.45); color: var(--amber); font: 600 15px var(--serif); }
.prose q { quotes: "« " " »"; color: var(--text); }

/* tableau « situation → ce que l'app compte » */
.tablewrap { overflow-x: auto; margin: 8px 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { text-align: left; padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
td { color: var(--muted); }
td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; padding-right: 24px; }

/* définitions de stats */
dl.defs { border-top: 1px solid var(--line); margin: 8px 0 18px; }
dl.defs div { display: grid; grid-template-columns: 9rem 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
dl.defs dt { font: 600 20px var(--serif); }
dl.defs dd { color: var(--muted); }

/* FAQ : même forme que l'accueil */
.faq details { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; font: 600 21px var(--serif); color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--amber); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 10px 0 0; }

/* fin de page : appel au téléchargement */
.closing { margin-top: 110px; padding: 80px 24px; text-align: center; background: radial-gradient(600px 300px at 50% 0, rgba(232,160,98,.16), transparent 70%), var(--bg-2); border-top: 1px solid var(--line); }
.closing img { width: 64px; margin: 0 auto 10px; }
.closing h2 { font-size: clamp(30px, 4.4vw, 48px); margin-bottom: 14px; }
.closing p { color: var(--muted); max-width: 540px; margin: 0 auto 28px; }
.closing .cta { justify-content: center; }

footer { padding: 30px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
footer .wrap { display: flex; flex-direction: column; gap: 6px; }
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }

@media (max-width: 900px) {
  .nav nav a:not(.btn) { display: none; }
  .intro { padding-top: 32px; }
  dl.defs div { grid-template-columns: 1fr; gap: 4px; }
  td:first-child { white-space: normal; }
}