/* Link-B Outils — une feuille, aucune dépendance, aucune police externe. */
:root{
  --fond:#f5f6f8;--carte:#fff;--encre:#111827;--discret:#6b7280;--ligne:#e5e7eb;
  --accent:#0b5cad;--accent-fonce:#084a8c;--rouge:#b91c1c;--rose:#fef2f2;--ciel:#eff6ff;
  --rayon:14px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --fond:#0b0f17;--carte:#111827;--encre:#f3f4f6;--discret:#9ca3af;--ligne:#1f2937;
  --accent:#4f9cf0;--accent-fonce:#7ab4f5;--rouge:#f87171;--rose:#2c1214;--ciel:#0f1f3d;color-scheme:dark;
}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
code{font-family:ui-monospace,Consolas,monospace}
.barre{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--carte);border-bottom:1px solid var(--ligne)}
.marque{display:flex;align-items:center;gap:10px;color:var(--encre);text-decoration:none;font-size:17px}
.marque img{display:block;width:40px;height:40px}
/* Deux versions transparentes du logo complet : le slogan passe en clair sur fond sombre. */
.logo-accueil{display:block;width:180px;height:auto;margin:0 auto 18px}
.barre-droite{display:flex;align-items:center;gap:18px}
.en-ligne{display:inline}
.lien{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer}
.contenu{max-width:980px;margin:0 auto;padding:32px 20px 60px}
h1{font-size:26px;margin:0 0 14px}
.carte{background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:28px}
.etroite{max-width:460px;margin:24px auto}
.pile{display:flex;flex-direction:column;gap:14px;margin-top:14px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
input{font:inherit;padding:10px 12px;border:1px solid var(--ligne);border-radius:9px;background:var(--carte);color:var(--encre)}
input:focus{outline:2px solid var(--accent);outline-offset:1px}
.bouton{display:inline-block;text-align:center;padding:11px 18px;border:0;border-radius:9px;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.bouton:hover{background:var(--accent-fonce)}
.bouton.secondaire{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.discret{color:var(--discret)}
.petit{font-size:13px}
.alerte{background:var(--rose);color:var(--rouge);padding:10px 12px;border-radius:9px;margin:10px 0}
.alerte-info{background:var(--ciel);padding:12px;border-radius:9px}
.qr{display:flex;justify-content:center;margin:14px 0;background:#fff;border-radius:10px;padding:8px}
.cle{display:inline-block;letter-spacing:.06em;word-break:break-all}
.etapes{padding-left:20px;margin:10px 0}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;padding:0;margin:16px 0}
.codes code{display:block;text-align:center;padding:8px;border:1px dashed var(--ligne);border-radius:8px;font-size:15px;letter-spacing:.05em}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tuile{display:block;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:20px;color:var(--encre);text-decoration:none;transition:border-color .12s,transform .12s}
.tuile:hover{border-color:var(--accent);transform:translateY(-1px)}
.tuile h2{font-size:17px;margin:0 0 6px}
.tuile p{margin:0;color:var(--discret);font-size:14px}
@media (max-width:520px){.codes{grid-template-columns:1fr}.carte{padding:20px}}