:root{
  --fond:#eef1f6; --carte:#fff; --texte:#1c2128; --doux:#5b6474; --bord:#dde3ec;
  --marque:#2f3b52; --marque2:#47566c; --vert:#0c7a5f; --rouge:#c94a41;
  --rayon:16px; --ombre:0 6px 24px rgba(23,32,50,.10);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--fond);color:var(--texte);min-height:100vh;min-height:100dvh;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
[hidden]{display:none !important}
.cache{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}

/* ----- écran du code ----- */
.carte{max-width:360px;margin:0 auto;padding:28px 20px;text-align:center}
.code{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
.logo{width:64px;height:64px;margin:0 auto 10px;border-radius:18px;background:#e7ebf2;display:grid;place-items:center;font-size:30px}
.carte h1{font-size:1.5rem}
.sous{color:var(--doux);margin:2px 0 18px}
.consigne{color:var(--doux);margin-bottom:14px}
.points{display:flex;justify-content:center;gap:14px;margin-bottom:8px}
.points i{width:18px;height:18px;border-radius:50%;border:2px solid var(--marque2);background:transparent;transition:background .12s}
.points i.plein{background:var(--marque)}
.points.secoue{animation:secoue .35s}
@keyframes secoue{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.erreur{min-height:1.4em;color:var(--rouge);font-weight:600;margin-bottom:10px;font-size:.95rem}
.clavier{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:300px;margin:0 auto}
.touche{height:68px;border:none;border-radius:var(--rayon);background:var(--carte);color:var(--texte);
  font-size:1.6rem;font-weight:600;box-shadow:0 1px 3px rgba(23,32,50,.12);cursor:pointer;touch-action:manipulation}
.touche:active{background:#dfe5ee}
.touche.vide{visibility:hidden}
.touche.eff{font-size:1.2rem;background:transparent;box-shadow:none;color:var(--doux)}

/* ----- liste ----- */
.page{max-width:720px;margin:0 auto;padding:16px 14px 110px}
.entete{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 0 14px}
.entete h1{font-size:1.4rem}
.outils{display:flex;gap:8px}
.btn{border:none;border-radius:12px;background:var(--marque2);color:#fff;font-weight:700;font-size:.95rem;
  padding:11px 16px;cursor:pointer;touch-action:manipulation}
.btn.discret{background:var(--carte);color:var(--doux);border:1px solid var(--bord);font-weight:600}
.btn.vert{background:var(--vert)} .btn.gris{background:#6b7688} .btn.rouge{background:var(--rouge)}
.message{background:#e3f5ee;color:#0a6b53;border-radius:12px;padding:10px 14px;margin-bottom:12px;font-weight:600}
.message.err{background:#fbeae8;color:#a63a32}

.groupe{margin-bottom:22px}
.groupe h2{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);margin:0 4px 8px}
.lien{display:flex;align-items:center;gap:14px;background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);
  padding:14px 16px;margin-bottom:10px;text-decoration:none;color:var(--texte);box-shadow:0 1px 2px rgba(23,32,50,.05);min-height:64px}
.lien:active{background:#f0f3f8}
.lien .ic{width:44px;height:44px;border-radius:12px;background:#e7ebf2;display:grid;place-items:center;font-size:22px;flex:0 0 44px}
.lien .tx{min-width:0;flex:1}
.lien .nom{display:block;font-weight:700;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis}
.lien .hote{display:block;color:var(--doux);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lien .fl{color:var(--doux);font-size:1.3rem}
.vide-liste{color:var(--doux);padding:6px 4px}

/* ----- édition ----- */
.edition .groupe{background:var(--carte);border:1px solid var(--bord);border-radius:var(--rayon);padding:12px}
.ligne-titre{display:flex;gap:8px;margin-bottom:10px}
.ligne-lien{border-top:1px solid var(--bord);padding:10px 0;display:grid;grid-template-columns:56px 1fr;gap:8px}
.ligne-lien .url{grid-column:1 / -1}
.ligne-lien .actions{grid-column:1 / -1;display:flex;gap:8px}
input.champ{width:100%;min-width:0;font-size:16px;padding:11px 12px;border:1px solid #cbd3de;border-radius:10px;background:#fafbfd;color:var(--texte)}
input.champ:focus{outline:2px solid #7387a0;outline-offset:0}
.petit{padding:9px 12px;font-size:.85rem}
.barre-edition{position:fixed;left:0;right:0;bottom:0;display:flex;gap:10px;justify-content:center;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(238,241,246,.96);border-top:1px solid var(--bord);backdrop-filter:blur(6px)}
.barre-edition .btn{flex:1;max-width:200px}
input.champ,.btn{scroll-margin-block:90px 110px}