/* ------------------------------------------------------------------
   Facette · onglet Liens (05/10/2026)
   Que des variables de styles.css ; les fonds légers sont tirés de
   --texte (color-mix), donc justes en thème sombre comme en clair.
   ------------------------------------------------------------------ */

#vue-liens{--ln-doux:color-mix(in srgb,var(--texte) 5%,transparent)}
#vue-liens .ln-tete{margin-top:8px}
#vue-liens .ln-titre{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-0.01em}
#vue-liens .ln-tete p{color:var(--texte-doux);font-size:14.5px;margin-top:4px;max-width:90ch}
#vue-liens .ln-nombre{font-family:var(--corps);font-weight:600;font-size:12.5px;color:var(--texte-faible);
  border:1px solid var(--trait-fort);border-radius:999px;padding:1px 8px;margin-left:4px;vertical-align:3px}
#vue-liens .ln-nombre:empty{display:none}

/* ---- la grille de cartes ---- */
#vue-liens .ln-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
#vue-liens .ln-carte{display:flex;flex-direction:column;border:1px solid var(--trait);border-radius:14px;overflow:hidden;
  background:var(--ln-doux);transition:border-color .15s}
#vue-liens .ln-carte:hover{border-color:var(--violet)}
#vue-liens .ln-photo{display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--trait);background:#fff}
#vue-liens .ln-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .25s}
#vue-liens .ln-carte:hover .ln-photo img{transform:scale(1.03)}
#vue-liens .ln-corps{display:flex;flex-direction:column;gap:6px;flex:1;padding:12px 14px 14px}
#vue-liens .ln-corps h3{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.3}
#vue-liens .ln-desc{color:var(--texte-doux);font-size:13.5px;line-height:1.45}

/* ---- le parcours d'un funnel : Pub → Page → Test → Agenda ---- */
#vue-liens .ln-parcours{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12px}
#vue-liens .ln-parcours span{border:1px solid var(--trait-fort);border-radius:999px;padding:1px 8px;color:var(--texte-doux)}
#vue-liens .ln-parcours i{font-style:normal;color:var(--texte-faible)}

#vue-liens .ln-adresse{font-family:var(--mono);font-size:11.5px;color:var(--texte-faible);overflow-wrap:anywhere;margin-top:auto;padding-top:4px}
#vue-liens .ln-actions{display:flex;gap:8px;margin-top:4px}
#vue-liens .ln-actions a,#vue-liens .ln-actions button{flex:1;text-align:center;font-size:13.5px;font-weight:600;
  border-radius:10px;padding:8px 10px;border:1px solid var(--trait-fort);color:var(--texte);text-decoration:none;cursor:pointer}
#vue-liens .ln-ouvrir{background:var(--violet);border-color:var(--violet) !important;color:#fff !important}
#vue-liens .ln-copier{background:transparent}
#vue-liens .ln-actions a:hover,#vue-liens .ln-copier:hover{border-color:var(--violet)}
#vue-liens .ln-copier.ln-copie{border-color:var(--vert);color:var(--vert)}
#vue-liens .ln-actions a:focus-visible,#vue-liens .ln-copier:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

@media (max-width:560px){
  #vue-liens .ln-grille{grid-template-columns:1fr;gap:12px}
  #vue-liens .ln-titre{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  #vue-liens .ln-photo img,#vue-liens .ln-carte{transition:none}
  #vue-liens .ln-carte:hover .ln-photo img{transform:none}
}