/* swap-carte — styles communs (création, page publique, espace privé) */

:root{
  --bg:#E8ECE7; --pane:#FAFBF9; --card:#FFFFFF; --ink:#161A17; --mut:#68716B;
  --line:#DFE4DE; --chipbg:#EEF1ED; --accent:#0B9D5C; --pvoff:#C3CCC2;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A0C0B; --pane:#131614; --card:#1A1E1B; --ink:#F0F3EF; --mut:#8F9992;
    --line:#262C27; --chipbg:#21261F; --accent:#2FBF7B; --pvoff:#3C453E;
  }
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink); min-height:100vh;
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}
.feuille{max-width:470px; margin:0 auto; padding:26px 18px 60px}
.barre{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px}
.marque{display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; letter-spacing:-.3px}
.marque svg{width:24px; height:24px; border-radius:6px}
.coinlien{color:var(--mut); font-weight:700; font-size:13.5px; text-decoration:none; border:1px solid var(--line); border-radius:100px; padding:7px 13px; background:var(--chipbg)}
.coinlien:hover{color:var(--ink)}

/* ---------- éditeur (création + modification) ---------- */
/* Chrome autofill peignait les champs en blanc/bleu (bug email vu par Jérôme, y compris l'état APERÇU
   pendant que la bulle de suggestions est ouverte) : background-clip:text découpe le fond peint par
   Chrome aux lettres — il devient invisible, dans tous les états. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
  transition:background-color 9999999s ease-out;
}

.moi{display:flex; align-items:center; gap:12px; margin:14px 0 18px}
.avph{position:relative; width:46px; height:46px; border-radius:50%; border:0; padding:0; cursor:pointer; background:var(--ink); color:var(--pane); display:grid; place-items:center; font-weight:700; font-size:19px; flex:none}
.avph img{width:46px; height:46px; border-radius:50%; object-fit:cover; display:block}
.avph .plusbadge{position:absolute; right:-3px; bottom:-3px; width:17px; height:17px; border-radius:50%; background:var(--accent); color:#fff; font-size:13px; line-height:17px; font-weight:800; text-align:center; box-shadow:0 0 0 2px var(--pane)}
.avph:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.avatar{width:46px; height:46px; border-radius:50%; background:var(--ink); color:var(--pane); display:grid; place-items:center; font-weight:700; font-size:19px; flex:none}
.moi input{border:0; background:none; font-size:22px; font-weight:700; color:var(--ink); width:100%; padding:2px 0}
.moi input:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}

.chips{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; margin-bottom:6px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:100px; border:1px solid var(--line); background:var(--chipbg); color:var(--ink); font-size:13.5px; font-weight:600; white-space:nowrap; cursor:pointer; flex:none}
.chip .pt{width:9px; height:9px; border-radius:50%; background:var(--cc); flex:none}
.chip.on{background:var(--cc); border-color:var(--cc); color:#fff}
.chip.on .pt{background:rgba(255,255,255,.9)}
.chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.chip.plus{font-weight:700; font-size:16px; padding:8px 15px}
.chip .x{margin-left:5px; opacity:.75; font-size:12px; padding:0 2px}
.chip .x:hover{opacity:1}

.nform{display:flex; flex-direction:column; gap:12px; padding:14px; border:1.5px dashed var(--line); border-radius:16px; margin:8px 0 14px}
.nform input{border:0; border-bottom:1.5px solid var(--line); background:none; color:var(--ink); font-size:16px; padding:6px 2px}
.nform input:focus-visible{outline:none; border-bottom-color:var(--accent)}
.swr{display:flex; gap:10px; align-items:center}
.sw{width:27px; height:27px; border-radius:50%; cursor:pointer; border:2.5px solid transparent; flex:none; padding:0}
.sw.on{border-color:var(--ink); box-shadow:0 0 0 2px var(--pane) inset}
.nact{display:flex; gap:10px; justify-content:flex-end}
.nact button, .nok{border:0; border-radius:100px; padding:9px 18px; font-size:14px; font-weight:700; cursor:pointer}
.nann{background:none; color:var(--mut)}
.nok{background:var(--accent); color:#fff}

.ordre{display:flex; gap:9px; margin:0 0 14px; flex-wrap:wrap}
.ordre .oico{cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none}
.ordre .oico.drag{opacity:.85; position:relative; z-index:5; cursor:grabbing; transform:scale(1.18)}
.ordre .oico .ic{width:34px; height:34px; border-radius:10px}

.reseaux{margin-top:6px}
.rw{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line)}
.rw:last-child{border-bottom:0}
.ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.ic svg{width:21px; height:21px}
.rw .bloc{flex:1; min-width:0}
.rw .lab{display:block; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--mut); font-weight:700}
.rw input{border:0; background:none; color:var(--ink); font-size:16px; width:100%; padding:2px 0}
.rw input::placeholder{color:var(--line)}
.rw input:focus-visible{outline:none; box-shadow:0 1.5px 0 var(--accent)}
.verif{border-radius:100px; border:1.5px solid var(--accent); color:var(--accent); background:none; padding:5px 10px; flex:none; text-decoration:none; font-size:12px; font-weight:800; white-space:nowrap}
.verif:hover{background:var(--accent); color:#fff}
.rw.vide .verif{display:none}
.telrow{display:flex; gap:7px; align-items:center}
.cc{border:1px solid var(--line); background:var(--chipbg); color:var(--ink); border-radius:9px; font-size:13.5px; padding:4px 2px; max-width:96px}
.phrow{display:flex; align-items:center; gap:12px}
.phthumb{width:52px; height:52px; border-radius:50%; object-fit:cover}
.phbtn{border:1.5px dashed var(--line); background:none; color:var(--mut); border-radius:100px; padding:9px 16px; font-size:13.5px; font-weight:700; cursor:pointer}
.nsuppr{border:0; background:none; color:#DC2626; font-size:13.5px; font-weight:700; cursor:pointer; margin-right:auto; border-radius:100px; padding:9px 10px}
.pv{width:47px; height:28px; border-radius:100px; border:0; background:var(--pvoff); flex:none; cursor:pointer; position:relative; padding:0; transition:background .18s; box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.pv::after{content:""; position:absolute; top:2.5px; left:2.5px; width:23px; height:23px; border-radius:50%; background:#fff; box-shadow:0 1.5px 4px rgba(0,0,0,.28); transition:left .18s}
.pv.on{background:var(--accent)}
.pv.on::after{left:21.5px}
.pv:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.rw.vide .pv{opacity:.35; pointer-events:none}

.gros{margin-top:22px; width:100%; background:var(--ink); color:var(--pane); border:0; border-radius:15px; padding:15px; font-size:16px; font-weight:700; cursor:pointer}
.gros:active{transform:scale(.99)}
.gros[disabled]{opacity:.55; cursor:default}
.err{margin-top:10px; text-align:center; color:#C2410C; font-size:14px; font-weight:600}

/* ---------- page publique (/c/…) ---------- */
.pubtete{display:flex; flex-direction:column; align-items:center; gap:9px; margin-bottom:14px}
.pubav{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-size:26px; font-weight:800; color:#fff; background:var(--cc); overflow:hidden; box-shadow:0 0 0 3px var(--cc)}
.pubav img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.pubnom{font-size:21px; font-weight:800}
.pubcard{border:1px solid var(--line); border-radius:22px; padding:10px 8px; background:var(--card)}
.prow{display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:14px; text-decoration:none; color:var(--ink)}
a.prow:active{background:var(--chipbg)}
.prow .val{display:block; font-size:15.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .chv{color:var(--mut); font-size:20px; line-height:1}
.prow.decl{cursor:default}
.ettoi{margin:20px auto 4px; display:block; background:var(--accent); color:#fff; border:0; border-radius:100px; padding:13px 30px; font-weight:700; font-size:15.5px; cursor:pointer}
.ettoi:active{transform:scale(.97)}
.fswap{margin-top:16px; border:1px solid var(--line); border-radius:17px; padding:15px; display:flex; flex-direction:column; gap:11px; background:var(--card)}
.fswap input{border:0; border-bottom:1.5px solid var(--line); background:none; color:var(--ink); font-size:16px; padding:6px 2px}
.fswap input:focus-visible{outline:none; border-bottom-color:var(--accent)}
.scelle{margin-top:16px; border-radius:17px; padding:15px 16px; background:color-mix(in srgb, var(--accent) 14%, var(--card)); font-weight:700; font-size:14.5px; text-align:center}
.vide404{text-align:center; color:var(--mut); padding:60px 0; font-weight:600}
.getyours{display:block; text-align:center; margin-top:26px; color:var(--mut); font-size:13.5px; font-weight:700; text-decoration:none}
.getyours:hover{color:var(--ink)}
.qrfull{position:fixed; inset:0; background:#fff; display:grid; place-items:center; z-index:40; cursor:pointer}
.qrfull svg{width:min(82vw,82vh); height:auto}
a.ctc.lien{color:var(--accent); text-decoration:none; font-weight:600; font-style:normal; font-size:13.5px}

/* ---------- espace privé (/moi/…) ---------- */
.moitete{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.avatar.gd{width:52px; height:52px; font-size:21px}
.gdnom{font-size:23px}
.stats{display:flex; gap:10px; margin:14px 0 6px}
.st{flex:1; border:1px solid var(--line); border-radius:17px; padding:14px 15px; background:var(--card)}
.st b{display:block; font-size:27px; font-variant-numeric:tabular-nums; line-height:1.1}
.st span{font-size:12.5px; color:var(--mut); font-weight:600}
.htitre{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--mut); margin:26px 0 10px; font-weight:800}
.mcarte{border:1px solid var(--line); border-radius:18px; background:var(--card); padding:15px; margin-bottom:12px}
.mctete{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.mctete .pt{width:10px; height:10px; border-radius:50%}
.qrbox{background:#fff; border-radius:13px; padding:12px; width:170px; margin:0 auto}
.qrbox svg{display:block; width:100%; height:auto}
.mliens{display:flex; align-items:center; gap:9px; margin-top:12px; flex-wrap:wrap}
.lientxt{flex:1; min-width:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.copier,.ouvrir{border:1px solid var(--line); background:var(--chipbg); color:var(--ink); border-radius:100px; padding:7px 14px; font-size:13px; font-weight:700; cursor:pointer; text-decoration:none}
.carnet{border:1px solid var(--line); border-radius:18px; background:var(--card); padding:4px 15px}
.ent{display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line)}
.ent:last-child{border-bottom:0}
.ent .avatar{width:40px; height:40px; font-size:16px}
.ent .bloc{flex:1; min-width:0}
.ent .qui{display:block; font-weight:700; font-size:15.5px}
.ent .ctc{font-style:normal; font-weight:500; color:var(--mut); font-size:13.5px}
.ent .sub{display:block; font-size:13px; color:var(--mut)}
.videcarnet{text-align:center; color:var(--mut); padding:18px 0}

/* ---------- écran de succès (après création) ---------- */
.privbloc{border:2px solid var(--accent); border-radius:18px; padding:15px; background:color-mix(in srgb, var(--accent) 9%, var(--card)); margin-bottom:18px}
.privtitre{font-size:12px; letter-spacing:.09em; text-transform:uppercase; font-weight:800; color:var(--accent); margin-bottom:8px}
.coin{position:fixed; top:14px; right:16px; font-size:13.5px; font-weight:700; color:var(--ink); background:var(--chipbg); border:1px solid var(--line); border-radius:100px; padding:8px 14px; text-decoration:none}

@media (prefers-reduced-motion: reduce){ *{transition:none !important} }