/* Charte : celle des apps. Anthracite, blanc cassé, un accent par app, titres en SF Pro élargi.
   Volontairement absents : dégradés, flou, ombres portées, emojis, animations au défilement. */
:root{
  --bg:#F6F6F4;--fg:#1D1E21;--mute:#5C5E64;--line:#DEDED9;--soft:#ECECE8;
  --wide:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --measure:40rem;
}
@media (prefers-color-scheme:dark){:root{--bg:#1D1E21;--fg:#EDEDE9;--mute:#A3A5AB;--line:#36383D;--soft:#27292D}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 var(--text);font-feature-settings:"kern"}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* Titres : élargis comme dans les apps (SF Pro Expanded sur Apple, largeur normale ailleurs) */
h1,h2,h3,.logo,.name{font-family:var(--wide);font-stretch:125%;letter-spacing:-.01em}
h1{font-size:clamp(30px,6.4vw,48px);line-height:1.08;font-weight:800;margin:.15em 0 .45em}
h2{font-size:clamp(21px,3.6vw,25px);line-height:1.2;font-weight:750;margin:2.2em 0 .55em}
p,li{max-width:var(--measure)}
.chapo{font-size:19px;line-height:1.55;color:var(--mute);margin:0 0 1.2em}

.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.top{border-bottom:1px solid var(--line)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;padding-top:16px;padding-bottom:14px}
.logo{font-weight:800;font-size:19px;text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:15px}
.top nav a{text-decoration:none;color:var(--mute)}
.top nav a:hover,.top nav a[aria-current]{color:var(--fg)}
main.wrap{padding-top:28px;padding-bottom:56px}

/* Accueil : un index, pas une grille de cartes */
.intro{max-width:var(--measure);margin-bottom:28px}
.index{list-style:none;margin:0 0 8px;padding:0;border-top:1px solid var(--line)}
.index li{max-width:none;margin:0;border-bottom:1px solid var(--line)}
.index a{display:grid;grid-template-columns:52px 1fr auto;gap:4px 16px;align-items:center;padding:14px 0;text-decoration:none}
.index img{width:52px;height:52px;border-radius:12px;grid-row:span 2}
.index .name{font-weight:750;font-size:19px}
.index .tag{color:var(--mute);font-size:15px;line-height:1.4;grid-column:2}
.index .state{grid-row:1/span 2;grid-column:3;font-size:13px;color:var(--mute);white-space:nowrap}
.index a:hover .name{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:520px){.index a{grid-template-columns:44px 1fr}.index img{width:44px;height:44px}.index .state{grid-row:auto;grid-column:2}}
.section-title{font-size:13px;font-family:var(--text);font-stretch:100%;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);font-weight:650;margin:2.4em 0 .6em}
.guides{list-style:none;padding:0;margin:0;columns:2 22rem;column-gap:40px}
.guides li{break-inside:avoid;padding:8px 0;border-bottom:1px solid var(--line);max-width:none}
.guides span{display:block;font-size:13px;color:var(--mute)}

/* Page d'app */
.hero{display:grid;grid-template-columns:auto 1fr;gap:4px 22px;align-items:start}
.hero > img{width:88px;height:88px;border-radius:20px;margin-top:6px}
.kicker{margin:0;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.kicker b{color:var(--fg)}
@media (max-width:600px){.hero{grid-template-columns:1fr}.hero > img{width:68px;height:68px;border-radius:16px}}
.btn{display:inline-block;background:var(--fg);color:var(--bg);font-weight:650;font-size:16px;text-decoration:none;padding:12px 18px;border-radius:10px;border-left:6px solid var(--accent)}
.btn:hover{background:var(--accent);color:var(--on,#fff)}
.btn.off{background:var(--soft);color:var(--mute);border-left-color:var(--line)}
.price{font-size:15px;color:var(--mute);margin:.7em 0 0}

/* Captures réelles, sans faux cadre de téléphone */
.shots{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 0 14px;margin:30px 0 4px}
.shots img{flex:0 0 auto;width:min(46vw,230px);border-radius:18px;border:1px solid var(--line);scroll-snap-align:start;background:var(--soft)}

/* Guides */
.crumbs{font-size:14px;color:var(--mute);margin-bottom:10px}
.crumbs a{color:var(--mute)}
.body{max-width:var(--measure)}
section ul,section ol{padding-left:1.2em}
li{margin:.3em 0}
li::marker{color:var(--accent)}
strong{font-weight:650}
.appbox{display:grid;grid-template-columns:56px 1fr;gap:4px 14px;align-items:center;border-top:2px solid var(--accent);border-bottom:1px solid var(--line);padding:18px 0;margin:40px 0;max-width:var(--measure)}
.appbox img{width:56px;height:56px;border-radius:13px;grid-row:span 2}
.appbox .btn{justify-self:start;margin-top:8px}
.faq{max-width:var(--measure)}
.faq details{border-top:1px solid var(--line);padding:12px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:650;list-style-position:outside}
.faq summary::marker{color:var(--accent)}
.faq p{margin:.5em 0 0}
.related{max-width:var(--measure);margin-top:44px}
.related ul{padding-left:1.2em}

footer{border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
footer .wrap{padding-top:22px;padding-bottom:36px}
footer p{max-width:var(--measure);margin:.3em 0}
.tools{max-width:var(--measure);margin:40px 0 0;padding:16px 0 4px;border-top:2px solid var(--accent)}
.tools h2{margin-top:0}
.tools ul{padding-left:1.2em}