/* LE GUIDE D'UTILISATION (11/10/2026) — guides.php.
   Une seule page, lue par des débutants : un sommaire qui suit le parcours,
   des chapitres courts, et pour chaque fonction trois repères toujours dans le
   même ordre — À quoi ça sert / Ce que vous faites / Ce qui se passe ensuite.
   Couleurs : les jetons communs (--ink, --line, --surface, --brand…), donc la
   page suit le thème clair ou sombre, sur la vitrine comme dans l'application. */
.gu{--gu-accent:var(--brand,#4f46e5);--gu-doux:color-mix(in srgb,var(--gu-accent) 9%,transparent);
  max-width:1180px;margin:0 auto;padding:28px 20px 72px;color:var(--ink);line-height:1.6}
.gu *{box-sizing:border-box}
.gu-tete{display:grid;gap:10px;margin:0 0 26px;max-width:760px}
.gu-sur{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gu-accent);margin:0}
.gu-tete h1{font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.15;margin:0;text-wrap:balance}
.gu-tete p{margin:0;font-size:1.05rem;color:var(--ink-2)}
.gu-cadre{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start}
.gu-som{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;border:1px solid var(--line);
  border-radius:14px;background:var(--surface);padding:14px 10px}
.gu-som b{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:2px 10px 8px}
.gu-som ol{list-style:none;margin:0;padding:0;counter-reset:gu}
.gu-som li{counter-increment:gu}
.gu-som a{display:flex;gap:9px;padding:6px 10px;border-radius:9px;color:var(--ink-2);text-decoration:none;font-size:.9rem;line-height:1.35}
.gu-som a::before{content:counter(gu);flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;background:var(--gu-doux);color:var(--gu-accent)}
.gu-som a:hover,.gu-som a:focus-visible{background:var(--gu-doux);color:var(--ink);outline:none}
.gu-corps{min-width:0;max-width:100%;display:grid;gap:44px}
.gu-ch{scroll-margin-top:84px;display:grid;gap:16px}
.gu-ch>h2{font-size:1.5rem;line-height:1.25;margin:0;display:flex;gap:12px;align-items:baseline;text-wrap:balance}
.gu-ch>h2 span{flex:0 0 auto;font-size:.85rem;font-weight:700;color:var(--gu-accent);background:var(--gu-doux);
  border-radius:8px;padding:2px 9px;transform:translateY(-3px)}
.gu-ch>p,.gu-intro{margin:0;color:var(--ink-2);max-width:72ch}
.gu-f{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px 20px;display:grid;gap:10px}
.gu-f h3{margin:0;font-size:1.08rem;line-height:1.35}
.gu-f h3 small{font-weight:500;color:var(--muted);font-size:.85rem;margin-left:6px}
.gu-trois{display:grid;gap:8px;margin:0}
.gu-trois div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px}
.gu-trois dt{font-size:.82rem;font-weight:700;color:var(--gu-accent);padding-top:2px}
.gu-trois dd{margin:0;color:var(--ink-2)}
.gu-trois dd ul,.gu-f ul{margin:4px 0 0;padding-left:18px}
.gu-trois dd li,.gu-f li{margin:2px 0}
.gu-btn{display:inline-block;font-weight:600;color:var(--ink);background:var(--gu-doux);border:1px solid color-mix(in srgb,var(--gu-accent) 30%,transparent);
  border-radius:7px;padding:0 6px;font-size:.92em;
  /* un nom de bouton long va a la ligne : en nowrap, il elargissait la page sur mobile */
  -webkit-box-decoration-break:clone;box-decoration-break:clone;overflow-wrap:anywhere}
.gu-astuce,.gu-attention{border-radius:12px;padding:12px 16px;font-size:.95rem;margin:0}
.gu-astuce{background:var(--gu-doux);color:var(--ink-2)}
.gu-attention{background:color-mix(in srgb,#f59e0b 12%,transparent);color:var(--ink-2)}
.gu-astuce b,.gu-attention b{color:var(--ink)}
.gu-etapes{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:gue}
.gu-etapes>li{counter-increment:gue;position:relative;padding-left:44px}
.gu-etapes>li::before{content:counter(gue);position:absolute;left:0;top:16px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:.85rem;background:var(--gu-accent);color:#fff}
.gu-carte3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gu-carte3>div{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:16px}
.gu-carte3 b{display:block;margin-bottom:4px}
.gu-carte3 p{margin:0;color:var(--ink-2);font-size:.95rem}
.gu-lex{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:0}
.gu-lex div{border-bottom:1px solid var(--line);padding:8px 0}
.gu-lex dt{font-weight:700}
.gu-lex dd{margin:2px 0 0;color:var(--ink-2);font-size:.95rem}
.gu-faq details{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 16px}
.gu-faq details+details{margin-top:8px}
.gu-faq summary{cursor:pointer;font-weight:600}
.gu-faq details p{margin:8px 0 0;color:var(--ink-2)}
.gu-articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.gu-articles a{display:grid;gap:3px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px;
  text-decoration:none;color:var(--ink)}
.gu-articles a:hover,.gu-articles a:focus-visible{border-color:var(--gu-accent);outline:none}
.gu-articles span{font-size:.88rem;color:var(--ink-2)}
.gu-corps a:not(.gu-articles a){color:var(--gu-accent)}
/* Theme sombre : un accent plus clair, lisible sur fond nuit ; les pastilles numerotees gardent un chiffre fonce. */
body.theme-sombre .gu{--gu-accent:#a5b4fc}
body.theme-sombre .gu-etapes>li::before{color:#0b1020}
.gu-haut{font-size:.85rem}
@media(max-width:900px){
  .gu-cadre{grid-template-columns:1fr;gap:24px}
  .gu-som{position:static;max-height:none}
  .gu-carte3{grid-template-columns:1fr}
}
@media(max-width:620px){
  .gu{padding:20px 16px 56px}
  .gu-trois div{grid-template-columns:1fr;gap:2px}
  .gu-lex{grid-template-columns:1fr}
  .gu-f{padding:14px 16px}
}
@media (prefers-reduced-motion:no-preference){html:has(.gu){scroll-behavior:smooth}}