/* L'aide (lib/aide.ts) : par-dessus accueil.css (couleurs, haut, bas, boutons). */
.ai{max-width:860px;margin:0 auto;padding:24px 24px 48px}
.ai h1{font-size:30px;line-height:1.2;color:var(--marque);margin:0 0 8px}
.ai h1 i{color:var(--teal)}
.ai h2{font-size:20px;color:var(--marque);margin:30px 0 10px;scroll-margin-top:76px}
.ai p,.ai li{font-size:16.5px;line-height:1.6}
.ai-chapo{font-size:18px !important;color:var(--text2);margin:0 0 18px}
.ai-fil{font-size:13.5px;color:var(--text3);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ai-fil a{color:var(--text2)}
.ai-profils{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:10px}
.ai-profil{display:flex;flex-direction:column;gap:4px;padding:18px;background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);text-decoration:none;color:var(--text)}
.ai-profil:hover{border-color:var(--teal)}
.ai-profil i{font-size:30px;color:var(--teal)}
.ai-profil b{font-size:17px}
.ai-profil span{font-size:14px;color:var(--text2)}
.ai-liste{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px;counter-reset:ai}
.ai-liste li{counter-increment:ai}
.ai-liste a{display:flex;flex-direction:column;gap:3px;padding:14px 16px 14px 56px;position:relative;background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);text-decoration:none;color:var(--text)}
.ai-liste a::before{content:counter(ai);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--teal);color:var(--sur-teal);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
.ai-liste a:hover{border-color:var(--teal)}
.ai-liste b{font-size:16.5px}
.ai-liste span{font-size:14.5px;color:var(--text2)}
.ai-brouillon{color:var(--amber);font-weight:600}
.ai-page{background:var(--bg);border:1px solid var(--border);border-radius:var(--rl);padding:24px 28px}
.ai-etapes{padding-left:0;list-style:none;counter-reset:et;margin:10px 0 14px}
.ai-etapes li{counter-increment:et;position:relative;padding:4px 0 4px 40px;margin:4px 0}
.ai-etapes li::before{content:counter(et);position:absolute;left:0;top:5px;width:27px;height:27px;border-radius:50%;border:2px solid var(--teal);color:var(--teal);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.ai-bouton{display:inline-block;font-size:.92em;font-weight:600;padding:0 8px;border:1px solid var(--border2);border-radius:7px;background:var(--bg2);white-space:nowrap}
.ai figure{margin:16px 0 20px}
.ai figure img{display:block;max-width:100%;height:auto;border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.ai figcaption{font-size:14px;color:var(--text3);margin-top:6px;text-align:center}
.ai-note{display:flex;gap:10px;padding:12px 14px;border-radius:12px;background:var(--teal-l);margin:14px 0;font-size:15.5px;line-height:1.55}
.ai-note i{color:var(--teal);font-size:20px;flex:none;margin-top:1px}
.ai-note.attention{background:var(--bg2);border:2px solid var(--amber)}
.ai-note.attention i{color:var(--amber)}
.ai-suite{display:flex;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}
.ai-suite a{font-weight:600}
@media (max-width:640px){
  .ai{padding:18px 16px 40px}
  .ai h1{font-size:24px}
  .ai-page{padding:18px 16px}
}