/* Linkinvid — DA v4 : blanc / encre #111113 / matcha #8AA37B · structure Bitly */
:root{
  --ink:#111113;--muted:#8A8A85;--soft:#5A5A56;--faint:#B4B4AF;
  --line:#E6E6E3;--line2:#F0F0EE;--grey:#F5F5F4;
  --matcha:#8AA37B;--deep:#6E8A5F;--dark:#4F6844;--pale:#EEF2EA;--paleline:#DCE5D6;
  --cream:#F7F3EC;--creamline:#EDE4D3;--bad:#A64B45;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FAF9F6;color:var(--ink);
  font-family:'Instrument Sans',-apple-system,ui-sans-serif,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55;overflow-x:hidden}
::selection{background:var(--matcha);color:#fff}
a{color:var(--deep);text-decoration:none}
a:hover{color:var(--ink)}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
input[type=text],input[type=url],input[type=email]{-webkit-appearance:none;appearance:none}
@keyframes arcspin{to{transform:rotate(360deg)}}
@keyframes fadeStatus{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}

/* ---- logo ---- */
.blogo{border-radius:7px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.bdot{color:var(--matcha)}

/* ---- nav ---- */
.nav{position:sticky;top:14px;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:24px;max-width:1180px;margin:14px auto 0;width:calc(100% - 32px);
  padding:13px 20px;border-radius:16px;border:1px solid var(--line);
  background:rgba(250,249,246,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 16px 40px -22px rgba(17,17,19,.25)}
.nav .brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.nav .brand .blogo{width:30px;height:30px;font-size:12.5px;border-radius:8px}
.nav .brand b{font-size:16.5px;font-weight:700;letter-spacing:-.015em}
.nav .links{display:flex;align-items:center;gap:34px;font-size:15px}
.nav .links a{font-weight:500;color:var(--soft)}
.nav .links a:hover{color:var(--ink)}
.nav .links a.strong{font-weight:600;color:var(--ink)}
.nav .links a.btn{margin-left:6px;color:#fff}
.nav .links a.btn:hover{color:#fff}

/* ---- eyebrow (label de section) ---- */
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--deep)}

/* ---- boutons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--ink);color:#fff;font-size:15px;font-weight:600;
  padding:13px 24px;border-radius:10px;border:none;
  box-shadow:0 10px 26px -12px rgba(17,17,19,.45);transition:.18s cubic-bezier(.22,.61,.36,1)}
.btn:hover{color:#fff;background:#26262b;transform:translateY(-1px)}
.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;border:1.5px solid var(--ink);color:var(--ink);
  font-size:15px;font-weight:600;padding:12px 24px;border-radius:10px;
  transition:.18s cubic-bezier(.22,.61,.36,1)}
.btn-o:hover{background:var(--ink);color:#fff;transform:translateY(-1px)}
.btn:disabled,.btn-o:disabled{opacity:.5;cursor:default}
.btn-m{display:block;background:var(--matcha);color:#fff;font-size:12.5px;font-weight:700;
  padding:10px 0;border-radius:8px;text-align:center;border:none;width:100%}
.btn-m:hover{color:#fff;background:var(--deep)}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--pale);color:var(--dark);
  font-size:12px;font-weight:700;padding:6px 12px;border-radius:5px}
.badge-cert{display:inline-flex;align-items:center;gap:6px;background:var(--pale);color:var(--deep);
  font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:5px}
.badge-reco{background:var(--matcha);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;padding:4px 10px;border-radius:5px}
.badge-line{border:1px solid var(--line);color:var(--muted);font-size:11.5px;font-weight:600;
  padding:4px 9px;border-radius:5px}

/* ---- bandeau certifié crème ---- */
.certband{display:flex;align-items:center;gap:8px;background:var(--cream);
  border:1px solid var(--creamline);border-radius:8px;padding:10px 12px;
  font-size:12px;font-weight:600;color:var(--deep)}

/* ---- barre d'analyse ---- */
.abar{display:flex;gap:10px}
.abar .field{flex:1;display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:8px;padding:0 16px;height:52px;background:#fff}
.abar .field:focus-within{border:1.5px solid var(--ink);padding:0 15.5px}
.abar input{flex:1;border:none;outline:none;font-size:14.5px;color:var(--ink);
  background:transparent;min-width:0}
.abar input::placeholder{color:var(--faint)}

/* ---- lignes produit ---- */
.prow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line2)}
.prow:last-child{border-bottom:none}
.prow .pimg{flex:none;width:46px;height:46px;border:1px solid var(--line);border-radius:8px;
  display:grid;place-items:center;overflow:hidden;background:#fff}
.prow .pimg img{width:100%;height:100%;object-fit:contain}
.prow .pimg span{font-size:7.5px;font-weight:600;letter-spacing:.09em;color:var(--soft);
  text-transform:uppercase;text-align:center;line-height:1.4;padding:2px}
.prow .pmeta{flex:1;min-width:0}
.prow .pbrand{font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.prow .pname{font-size:13.5px;font-weight:600;line-height:1.25}
.prow .pprice{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.prow .pgo{flex:none;background:var(--ink);color:#fff;font-size:12px;font-weight:600;
  padding:8px 15px;border-radius:8px}
.prow .pgo:hover{color:#fff;background:#2a2a2e}
.prow .pgo.o{background:#fff;border:1px solid var(--ink);color:var(--ink);padding:7px 14px}
.prow .pgo.o:hover{background:var(--grey)}

/* ---- état de scan ---- */
.scanwrap{position:relative;width:150px;height:150px;display:grid;place-items:center;margin:0 auto}
.scanwrap .r1{position:absolute;inset:0;border:1.5px solid #EDEDEB;border-radius:50%}
.scanwrap .r2{position:absolute;inset:18px;border:1.5px solid var(--paleline);border-radius:50%}
.scanwrap .arc{position:absolute;inset:0;border-radius:50%;border:2.5px solid transparent;
  border-top-color:var(--matcha);animation:arcspin 1.9s linear infinite}
.scanwrap .core{width:60px;height:60px;border-radius:14px;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:24px;font-weight:700;
  box-shadow:0 15px 30px -12px rgba(17,17,19,.35)}

/* ---- carte vidéo (grille) ---- */
.vcard{position:relative;display:block;aspect-ratio:3/4;min-width:0;border-radius:10px;
  overflow:hidden;background:var(--grey);border:1px solid var(--line)}
.vcard img{width:100%;height:100%;object-fit:cover;display:block}
.vcard .vempty{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;padding:14px;background:linear-gradient(160deg,var(--pale),var(--grey))}
.vcard .vempty b{font-size:13px;font-weight:700;line-height:1.3;color:var(--ink)}
.vcard .vempty span{margin-top:4px;font-size:11px;color:var(--muted)}
.vcard .vn{position:absolute;left:8px;bottom:8px;background:#fff;border:1px solid var(--line);
  border-radius:5px;font-size:10.5px;font-weight:600;padding:3px 8px;pointer-events:none;color:var(--ink)}

/* ---- champs ---- */
.fld{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 12px;
  font-size:13.5px;color:var(--ink);outline:none;background:#fff}
.fld:focus{border:1.5px solid var(--ink);padding:10.5px 11.5px}
.fld.bad{border-color:var(--bad);color:var(--bad)}
.flbl{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:14px 0 6px}

/* ---- messages ---- */
.msg-err{display:none;border:1px solid var(--bad);border-radius:8px;padding:11px 14px;
  color:var(--bad);font-size:13px;line-height:1.55;margin-top:14px}
.msg-err.on{display:block}
.msg-ok{display:none;background:var(--pale);border:1px solid var(--paleline);border-radius:8px;
  padding:11px 14px;color:var(--dark);font-size:13px;line-height:1.55;margin-top:14px}
.msg-ok.on{display:block}

/* ---- pied de page ---- */
.foot{border-top:1px solid var(--line);padding:26px 44px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot .fbrand{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.foot .fbrand .blogo{width:20px;height:20px;border-radius:6px;font-size:9px}
.foot .flinks{display:flex;gap:20px;font-size:12px}
.foot .flinks a{color:var(--muted)}
.foot .flinks a:hover{color:var(--ink)}

/* ---- menu mobile (burger 3 traits animé) ---- */
.burger{display:none}

/* ---- responsive ---- */
.only-m{display:none}
@media(max-width:860px){
  .nav{top:10px;margin:10px auto 0;width:calc(100% - 24px);padding:11px 14px 11px 18px}
  /* le menu devient un panneau déroulant sous la barre */
  .nav .links{position:absolute;top:calc(100% + 8px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(250,249,246,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid var(--line);border-radius:14px;padding:10px;
    box-shadow:0 26px 52px -22px rgba(17,17,19,.35);
    opacity:0;transform:translateY(-8px);pointer-events:none;
    transition:opacity .25s cubic-bezier(.22,.61,.36,1),transform .25s cubic-bezier(.22,.61,.36,1)}
  .nav.open .links{opacity:1;transform:none;pointer-events:auto}
  .nav .links a{display:block;padding:13px 14px;border-radius:9px;font-size:15.5px;font-weight:600;color:var(--ink)}
  .nav .links a:hover{background:var(--grey)}
  .nav .links a.hide-m{display:block}
  .nav .links a.btn{display:flex;margin:8px 0 2px;justify-content:center;color:#fff}
  .burger{display:block;border:none;background:transparent;cursor:pointer;padding:9px 6px}
  .burger span{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px;
    transition:.28s cubic-bezier(.22,.61,.36,1)}
  .burger span+span{margin-top:5px}
  .nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .burger span:nth-child(2){opacity:0;transform:scaleX(.4)}
  .nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .foot{padding:22px 18px}
  .only-m{display:initial}
  .hide-m{display:none}
  .nav .links a.hide-m{display:block}
}