/* ==================================================================
   Page « Liens » (lien de la bio Instagram, 20/10/2026) : inc/liens.php.
   Une colonne étroite, pensée pour le téléphone : photo, nom, puis
   « en ce moment » (l'article du dernier post) et UN appel : les cours
   gratuits. Le reste en petits liens.
   ================================================================== */

.wk-liens-page { min-height: 100vh; padding: 1.4rem 16px 2.5rem; background: var(--wk-sable); }
.wk-liens { max-width: 30rem; margin: 0 auto; color: var(--wk-ecorce); font-family: var(--wk-police); }
.wk-liens [hidden] { display: none !important; }
.wk-liens a { text-decoration: none; } /* pas de soulignement sur cette page (Gauthier, 21/10/2026) */

.wk-liens__haut { text-align: center; }
.wk-liens__photo { display: block; width: 56px; height: 56px; margin: 0 auto .5rem; border-radius: 50%; object-fit: cover; box-shadow: var(--wk-ombre); }
.wk-liens__nom { margin: 0; font-size: var(--wp--preset--font-size--m, 1.2rem); font-weight: 800; }
.wk-liens__phrase { margin: .15rem 0 0; font-size: var(--wp--preset--font-size--s, .95rem); color: var(--wk-taupe); }

.wk-liens__langues { display: inline-flex; gap: .25rem; margin: .7rem 0 0; padding: .25rem; border-radius: var(--wk-rayon-bouton); background: var(--wk-sable-fonce); }
.wk-liens__langues button { padding: .35rem .9rem; border: 0; border-radius: var(--wk-rayon-bouton); background: transparent; color: var(--wk-taupe); font: inherit; font-size: var(--wp--preset--font-size--xs, .85rem); font-weight: 700; cursor: pointer; }
.wk-liens__langues button[aria-pressed="true"] { background: var(--wk-creme); color: var(--wk-ecorce); box-shadow: 0 1px 3px rgba(57, 41, 29, .15); }

.wk-liens__langue { display: grid; gap: .6rem; margin-top: 1.1rem; }
.wk-liens__langue + .wk-liens__langue { margin-top: 2.6rem; }
.wk-liens__intro { margin: 0; font-size: var(--wp--preset--font-size--xs, .85rem); color: var(--wk-taupe); text-transform: uppercase; letter-spacing: .06em; }

/* « En ce moment » : les 2 derniers posts, en lignes compactes */
.wk-liens__lignes { display: grid; gap: .55rem; }
.wk-liens__ligne { display: flex; align-items: center; gap: .8rem; padding: .5rem .8rem .5rem .5rem; border-radius: var(--wk-rayon); background: var(--wk-creme); border: 1px solid var(--wk-trait); color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.wk-liens__ligne:hover, .wk-liens__ligne:focus-visible { transform: translateY(-2px); box-shadow: var(--wk-ombre); }
.wk-liens__ligne-image { display: flex; align-items: center; justify-content: center; flex: none; width: 6.5rem; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--wk-rayon-petit); background: var(--wk-sable-fonce); }
.wk-liens__ligne-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wk-liens__ligne-image .wk-liens__ligne-towaki { width: auto; height: 92%; object-fit: contain; }
.wk-liens__ligne-texte { display: grid; gap: .3rem; min-width: 0; }
.wk-liens__ligne-titre { font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wk-liens__ligne-action { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: var(--wk-or-texte); font-weight: 700; font-size: var(--wp--preset--font-size--s, .95rem); }
.wk-liens__une-lien { white-space: nowrap; }
.wk-liens__video { padding: .1rem .55rem; border-radius: var(--wk-rayon-bouton); background: var(--wk-or-bouton); color: var(--wk-sur-or); font-size: var(--wp--preset--font-size--xs, .85rem); font-weight: 700; }

/* L'appel : les cours gratuits */
.wk-liens__appel { display: grid; gap: .55rem; margin-top: .4rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--wk-rayon); background: var(--wk-creme); border: 2px solid var(--wk-or-bouton); text-align: center; }
.wk-liens__appel-titre { margin: 0; font-size: var(--wp--preset--font-size--m, 1.15rem); font-weight: 800; line-height: 1.3; }
.wk-liens__appel-texte { margin: 0; color: var(--wk-taupe); line-height: 1.45; }
.wk-liens__bouton { display: block; margin-top: .35rem; padding: .95rem 1.2rem; border-radius: var(--wk-rayon-bouton); background: var(--wk-or-bouton); color: var(--wk-sur-or); text-decoration: none; font-weight: 800; transition: background .2s ease; }
.wk-liens__bouton:hover, .wk-liens__bouton:focus-visible { background: var(--wk-or-bouton-survol); color: var(--wk-sur-or); }
.wk-liens__preuve { margin: 0; font-size: var(--wp--preset--font-size--xs, .85rem); color: var(--wk-taupe); }

/* Encart Wakatoo, plus discret que l'appel */
.wk-liens__wakatoo { display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem .7rem .8rem; border-radius: var(--wk-rayon); background: var(--wk-creme); border: 1px solid var(--wk-trait); color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.wk-liens__wakatoo:hover, .wk-liens__wakatoo:focus-visible { transform: translateY(-2px); box-shadow: var(--wk-ombre); }
.wk-liens__wakatoo img { flex: none; width: auto; height: 5.5rem; }
.wk-liens__wakatoo-texte { display: grid; gap: .25rem; min-width: 0; }
.wk-liens__wakatoo-titre { font-weight: 800; font-size: var(--wp--preset--font-size--m, 1.1rem); }
.wk-liens__wakatoo-phrase { color: var(--wk-taupe); line-height: 1.4; font-size: var(--wp--preset--font-size--s, .95rem); }
.wk-liens__wakatoo .wk-liens__une-lien { color: var(--wk-or-texte); font-weight: 700; }

.wk-liens__petits { display: grid; justify-content: center; gap: .5rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.wk-liens__petit { display: flex; align-items: center; gap: .7rem; color: var(--wk-ecorce); font-weight: 600; }
.wk-liens__petit-icone { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--wk-creme); border: 1px solid var(--wk-trait); }
.wk-liens__petit--youtube:hover .wk-liens__petit-icone, .wk-liens__petit--youtube:focus-visible .wk-liens__petit-icone { color: #FF0000; }
.wk-liens__petit:hover, .wk-liens__petit:focus-visible { color: var(--wk-or-texte); }

.wk-liens__pied { margin: 2.5rem 0 0; text-align: center; font-size: var(--wp--preset--font-size--xs, .85rem); color: var(--wk-taupe); }
.wk-liens__pied a { color: inherit; }