/* =========================================================================
   liens.css · page « Liens utiles » du blog (/blog/liens/).
   Page FIXE, hors du generateur. S'appuie sur theme.css + a11y.css (partages),
   blog.css (skip-link, footer, en-tete, .back-to-blog) et listing.css (.wrap,
   .pagehead, .tags/.tag). N'ajoute que la grille de cartes.

   Grille comme les articles du listing : 3 colonnes sur PC, 1 sur telephone
   (v2 du 2026-10-30 ; la v1 donnait toute la largeur a chaque lien).

   Regle du site : on n'anime JAMAIS une couleur de theme (border-color,
   background, color) : nommee dans une transition, elle gele au changement de
   theme. Seuls transform et box-shadow (couleurs fixes) sont animes.
   ========================================================================= */

.pagehead .back-to-blog { margin-bottom: 18px; }

.liens {
    list-style: none; margin: 30px 0 18px; padding: 0;
    display: grid; gap: 20px;
    /* min(…, 100%) : jamais plus large que l'ecran, meme avec une grande police. */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.lien {
    position: relative; min-width: 0;
    display: flex; flex-direction: column;
    padding: 22px 22px 18px;
    background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px;
    transition: transform var(--tr), box-shadow var(--tr);
}
.lien:hover {
    transform: translateY(-4px);
    border-color: var(--primary-dim);
    box-shadow: 0 16px 34px -18px rgba(112, 189, 149, .30);
}
/* Focus clavier sur TOUTE la carte (meme convention que les cartes du listing). */
.lien:focus-within { outline: 3px solid var(--g-text); outline-offset: 2px; border-color: var(--primary); }

/* --- Haut de carte : pastille d'icone + type ------------------------------- */
.lien__haut { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.lien__icone {
    flex: none; width: 48px; height: 48px; border-radius: 13px;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow: 0 10px 22px -12px var(--c2);
}
.lien__icone svg { width: 24px; height: 24px; display: block; }
.lien--ppfc   .lien__icone { --c1: #b04fb0; --c2: #742774; }
.lien--epp    .lien__icone { --c1: #70BD95; --c2: #2c7a56; }
.lien--r3dkap .lien__icone { --c1: #2f8ae0; --c2: #0A66C2; }

.lien__type {
    margin: 0;
    font-family: var(--mono, monospace); font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--g-text, var(--primary));
}

/* --- Texte ---------------------------------------------------------------- */
.lien__titre {
    margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.01em;
    font-weight: 800; color: var(--text-light); text-wrap: balance;
}
.lien__titre a { color: inherit; text-decoration: none; }
.lien__titre a:focus-visible { outline: none; }   /* le contour est porte par la carte */
/* Lien etendu : toute la carte est cliquable. */
.lien__titre a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; z-index: 1; }
.lien:hover .lien__titre { color: var(--primary); }

.lien__auteur { margin: 4px 0 12px; font-size: 13px; color: var(--text-dim); }
.lien__desc { margin: 0 0 16px; font-size: 14px; line-height: 1.65; color: var(--text-dim); }

/* Le pied colle au bas : les trois cartes alignent leurs etiquettes. */
.lien__pied {
    margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.lien__domaine {
    font-family: var(--mono, monospace); font-size: 12px; color: var(--g-text, var(--primary));
    white-space: nowrap;
}
.lien__fleche { display: inline-block; transition: transform var(--tr); }
.lien:hover .lien__fleche { transform: translate(2px, -2px); }

.liens__note { margin: 0 0 48px; font-size: 12.5px; color: var(--text-dim); }