.avatar { position: relative; display: inline-grid; flex: none; width: var(--t); height: var(--t); border-radius: 50%; }
.avatar .portrait--rond { width: 100%; height: 100%; border-radius: 50%; }
.portrait--rond .portrait__lettre { inset: 0; top: 0; right: 0; display: grid; place-items: center; font-size: 55cqh; opacity: .55; }
.avatar--anneau { padding: 2.5px; background: var(--marque); }
.avatar__fond { display: grid; width: 100%; height: 100%; padding: 2px; border-radius: 50%; background: var(--noir); }
.avatar__en-ligne { position: absolute; right: 2%; bottom: 2%; width: max(9px, calc(var(--t) * .2)); height: max(9px, calc(var(--t) * .2)); border-radius: 50%; background: #3ddc84; outline: 2.5px solid var(--noir); }
.avatar-lien { display: inline-flex; text-decoration: none; border-radius: 50%; }
.avatar-moi { display: inline-grid; place-items: center; flex: none; width: var(--t); height: var(--t); border-radius: 50%; background: var(--marque); color: #fff; font: 800 calc(var(--t) * .42)/1 var(--titre); }
.nom-lien { font-weight: 700; color: var(--texte); text-decoration: none; }
.nom-lien:hover { text-decoration: underline; text-underline-offset: 2px; }
.action { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--texte); padding: 6px; border-radius: 10px; font-weight: 650; font-size: 14px; }
.action:hover { background: var(--s1); }
.action .icone { width: 24px; height: 24px; }
.jaime { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--texte); padding: 6px; border-radius: 10px; font-weight: 650; font-size: 14px; }
.jaime .icone { width: 24px; height: 24px; transition: transform .2s var(--ease); }
.jaime--actif .icone { color: var(--rose); fill: var(--rose); }
.jaime--pulse .icone { animation: pulse-coeur .45s var(--ease); }
@keyframes pulse-coeur { 30% { transform: scale(1.35); } 60% { transform: scale(.9); } }
.pastille-credits { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--s2); color: var(--texte); text-decoration: none; font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pastille-credits .icone { width: 16px; height: 16px; color: var(--accent); }

.recherche { position: relative; }
.recherche__resultats { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; display: grid; gap: 2px; padding: 8px; border-radius: 18px; background: var(--verre-fort); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); max-height: 70vh; overflow: auto; }
.recherche__titre { font: 700 11px/1 var(--corps); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); padding: 8px 10px 4px; }
.recherche__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--texte); }
.recherche__item:hover { background: var(--s2); }
.recherche__item > span:not(.avatar) { display: grid; min-width: 0; }
.recherche__item small { color: var(--gris); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recherche__vide { padding: 10px; color: var(--gris); font-size: 14px; }

.feed { display: grid; grid-template-columns: minmax(0, 470px) 300px; justify-content: center; gap: 56px; padding: 22px 28px 60px; }
.feed__centre { min-width: 0; }
.stories { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 18px; }
.stories::-webkit-scrollbar { display: none; }
.story { display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--texte); flex: none; width: 72px; }
.story__nom { font-size: 12px; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--doux); }
.feed__posts { display: grid; gap: 34px; }
.post { display: grid; gap: 10px; }
.post__tete { display: flex; align-items: center; gap: 10px; }
.post__qui { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.post__qui small { font-size: 12px; color: var(--gris); }
.post__date { font-size: 13px; color: var(--gris); }
.post__visuel-bouton { padding: 0; border: 0; background: none; display: block; border-radius: 16px; overflow: hidden; }
.post__visuel, .detail-post__visuel { aspect-ratio: 4 / 5; background: var(--s1); overflow: hidden; }
.post__visuel img, .detail-post__visuel img, .profil__vignette img, .short__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, 50% 20%); }
.visuel-vide { width: 100%; height: 100%; display: grid; place-items: center; background: var(--marque); font: 900 80px/1 var(--titre); color: rgba(20, 8, 28, .3); }
.post__actions { display: flex; align-items: center; gap: 4px; margin: -2px -6px 0; }
.post__espace { flex: 1; }
.post__legende, .post__apercu li { font-size: 14px; line-height: 1.45; }
.post__apercu { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; color: var(--doux); }
.post__voir { border: 0; background: none; padding: 0; color: var(--gris); font-size: 14px; justify-self: start; }
.feed__cote { position: sticky; top: 22px; align-self: start; display: grid; gap: 14px; }
.feed__cote-titre { font-weight: 700; color: var(--doux); font-size: 14px; }
.suggestions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.suggestions li { display: flex; align-items: center; gap: 12px; }
.suggestions__texte { display: grid; flex: 1; min-width: 0; text-decoration: none; color: var(--texte); line-height: 1.3; }
.suggestions__texte strong { font-size: 14px; }
.suggestions__texte small { font-size: 12px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suivre--compact { padding: 7px 14px; font-size: 13px; }

.detail-post { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; margin: -32px -28px -28px; min-height: 520px; }
.detail-post__visuel { border-radius: 24px 0 0 24px; aspect-ratio: auto; height: 100%; }
.detail-post__cote { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px 18px; min-height: 0; }
.detail-post__tete { display: flex; align-items: center; gap: 10px; padding-right: 30px; }
.detail-post__texte { font-size: 14.5px; line-height: 1.5; }
.detail-post__actions { display: flex; gap: 4px; margin: 0 -6px; }
.fenetre__boite--large:has(.detail-post) { width: min(980px, 100%); }
.fenetre__boite:has(.detail-post:not(:has(.detail-post__visuel))) { width: min(560px, 100%); }
.detail-post:not(:has(.detail-post__visuel)) { grid-template-columns: 1fr; margin: 0; min-height: 0; }
.commentaires { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; overflow-y: auto; flex: 1; min-height: 80px; max-height: 46vh; }
.commentaire { display: flex; gap: 10px; align-items: flex-start; }
.commentaire--reponse { margin-left: 40px; }
.commentaire__texte { font-size: 14px; line-height: 1.45; }
.commentaire__date { display: block; font-size: 12px; color: var(--gris); margin-top: 2px; }
.saisie { display: flex; gap: 8px; align-items: center; }
.saisie__champ { flex: 1; min-width: 0; background: var(--s2); border-radius: 999px; padding: 11px 16px; outline: none; }
.saisie__champ:focus { background: var(--s3); }
.saisie__bouton { border: 0; background: none; color: var(--accent); font-weight: 750; padding: 8px 6px; }
.saisie__bouton:disabled { opacity: .5; }

.shorts { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.shorts::-webkit-scrollbar { display: none; }
.short { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; justify-content: center; align-items: flex-end; gap: 16px; padding: 16px; }
.short__cadre { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: calc(100% - 80px); border-radius: 22px; overflow: hidden; background: #000; }
.short__visuel { position: absolute; inset: 0; }
.short--actif .short__visuel img { animation: ken-burns 14s ease-in-out infinite alternate; }
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.14) translate(-2%, -3%); } }
.short__voile { position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
.short__texte { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 8px; }
.short__auteur .nom-lien { font-size: 16px; }
.short__legende { font-size: 15px; line-height: 1.4; }
.short__son { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--doux); }
.short__son .icone { width: 15px; height: 15px; }
.short__rail { display: grid; justify-items: center; gap: 18px; padding-bottom: 12px; }
.rail-action, .jaime--vertical { display: grid; justify-items: center; gap: 4px; border: 0; background: none; color: var(--texte); font-size: 12.5px; font-weight: 700; padding: 0; }
.rail-action .icone, .jaime--vertical .icone { width: 50px; height: 50px; padding: 13px; border-radius: 50%; background: var(--s2); }
.rail-action:hover .icone { background: var(--s3); }
.jaime--vertical.jaime--actif .icone { background: rgba(201, 52, 133, .22); }

.forum { max-width: 640px; margin: 0 auto; padding: 28px 18px 60px; display: grid; gap: 6px; }
.forum__tete { display: grid; gap: 4px; margin-bottom: 14px; }
.forum__titre { font-size: 30px; }
.forum__sous { color: var(--gris); font-size: 14.5px; }
.forum__redaction { display: flex; align-items: center; gap: 12px; padding: 14px 0 22px; }
.forum__redaction .saisie { flex: 1; }
.forum__fils { display: grid; }
.fil-forum { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 16px 10px; margin: 0 -10px; border-radius: 18px; }
.fil-forum:hover { background: rgba(255, 255, 255, .025); }
.fil-forum__gauche { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fil-forum__ligne { flex: 1; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.fil-forum__corps { display: grid; gap: 6px; min-width: 0; }
.fil-forum__tete { display: flex; align-items: baseline; gap: 8px; }
.fil-forum__tete time { color: var(--gris); font-size: 13px; }
.fil-forum__texte { font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; }
.fil-forum__actions { display: flex; gap: 2px; margin-left: -6px; }
.fil-forum__actions .icone { width: 20px; height: 20px; }
.fil-forum__apercu { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--gris); font-size: 13.5px; padding: 2px 0; justify-self: start; }
.fil-forum__reponses .commentaires { max-height: none; overflow: visible; margin-top: 6px; }
.fil-forum__zone .saisie { margin-top: 6px; }

.profil { max-width: 935px; margin: 0 auto; padding: 34px 20px 60px; display: grid; gap: 26px; }
.profil--invite { max-width: 520px; padding-top: 80px; text-align: center; justify-items: center; }
.profil__tete { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 30px; align-items: start; }
.profil__tete > .avatar, .profil__tete > .avatar-moi { justify-self: center; }
.profil__infos { display: grid; gap: 14px; min-width: 0; }
.profil__ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.profil__nom { font-size: 28px; margin-right: 6px; }
.profil__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; color: var(--doux); }
.profil__stats strong { color: var(--texte); }
.profil__meta { font-size: 14px; color: var(--gris); }
.profil__dispo { font-weight: 650; color: var(--doux); }
.profil__dispo--oui { color: #3ddc84; }
.profil__bio { font-size: 15px; line-height: 1.5; max-width: 52ch; }
.profil__passion { display: flex; align-items: center; gap: 8px; font-weight: 650; color: var(--accent); font-size: 14px; }
.profil__passion .icone { width: 16px; height: 16px; }
.profil__accepte { font-size: 13px; color: var(--gris); }
.relation { display: grid; gap: 6px; max-width: 380px; padding: 12px 14px; border-radius: 14px; background: var(--s1); }
.relation__ligne { display: flex; justify-content: space-between; align-items: baseline; }
.relation__type { font-size: 14px; }
.relation__score { font-size: 12.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
.relation__barre { height: 6px; border-radius: 6px; background: var(--s3); overflow: hidden; }
.relation__barre span { display: block; height: 100%; width: var(--p); background: var(--marque); border-radius: 6px; }
.profil__traits { list-style: none; margin: 0; padding: 0 4px; display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.trait { display: grid; justify-items: center; gap: 8px; width: 86px; flex: none; text-align: center; }
.trait__rond { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--s2); font: 800 26px/1 var(--titre); color: var(--accent); }
.trait__texte { font-size: 12px; color: var(--doux); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.profil__onglets { display: flex; justify-content: center; gap: 48px; }
.profil__onglet { position: relative; display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; color: var(--gris); padding: 14px 2px; font: 700 12.5px/1 var(--corps); letter-spacing: .1em; text-transform: uppercase; }
.profil__onglet .icone { width: 15px; height: 15px; }
.profil__onglet[aria-pressed="true"] { color: var(--texte); }
.profil__onglet[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--marque); }
.profil__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.profil__grille--fils { grid-template-columns: 1fr; gap: 8px; }
.profil__case { position: relative; padding: 0; border: 0; background: var(--s1); aspect-ratio: 1; overflow: hidden; border-radius: 6px; }
.profil__case--short { aspect-ratio: 9 / 16; }
.profil__vignette { width: 100%; height: 100%; }
.profil__survol { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(13, 10, 20, .55); font-weight: 750; opacity: 0; transition: opacity .15s; }
.profil__survol .icone { width: 18px; height: 18px; fill: currentColor; }
.profil__case:hover .profil__survol, .profil__case:focus-visible .profil__survol { opacity: 1; }
.profil__fil { display: grid; gap: 8px; text-align: left; border: 0; padding: 16px 18px; border-radius: 16px; background: var(--s1); color: var(--texte); font-size: 15px; line-height: 1.5; }
.profil__fil small { display: inline-flex; align-items: center; gap: 6px; color: var(--gris); }
.profil__fil small .icone { width: 15px; height: 15px; }
.relations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; }
.relation-carte { display: flex; align-items: center; gap: 14px; }
.relation-carte__corps { flex: 1; min-width: 0; display: grid; gap: 8px; }
.relation-carte .relation { padding: 0; background: none; }
.reglages { display: grid; gap: 14px; }
.reglages__solde { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.reglages__solde strong { font: 800 34px/1 var(--titre); }
.reglages__solde .icone { width: 26px; height: 26px; color: var(--accent); }
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pack { position: relative; display: grid; justify-items: start; gap: 2px; border: 0; padding: 16px; border-radius: 16px; background: var(--s2); color: var(--texte); text-align: left; }
.pack:hover { background: var(--s3); }
.pack strong { font: 800 28px/1 var(--titre); }
.pack span:not(.remise) { color: var(--doux); font-size: 13px; }
.pack em { font-style: normal; font-weight: 750; margin-top: 6px; }
.pack--populaire { background: linear-gradient(160deg, rgba(236, 195, 90, .2), rgba(236, 195, 90, .05)), var(--s2); }
.pack .remise { position: absolute; top: 10px; right: 10px; }
.reglages__ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.reglages__ligne > span { display: grid; gap: 4px; }
.reglages__ligne small { color: var(--gris); font-size: 13px; }
.interrupteur { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; border-radius: 999px; background: var(--s3); position: relative; cursor: pointer; transition: background-color .2s; }
.interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.interrupteur:checked { background: var(--marque); }
.interrupteur:checked::after { transform: translateX(20px); }

.discussion__qui { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: var(--texte); }
.discussion__qui > div { display: grid; min-width: 0; }
.discussion__statut { font-size: 12.5px; color: var(--gris); }
.discussion__statut--oui { color: #3ddc84; }
.discussion__profil { display: inline-grid; }

@media (max-width: 1100px) {
  .feed { grid-template-columns: minmax(0, 470px); }
  .feed__cote { display: none; }
}
@media (max-width: 760px) {
  .feed { padding: 10px 0 40px; }
  .stories { padding: 4px 12px 16px; }
  .post__tete, .post__actions, .post__legende, .post__apercu, .post__voir { margin-left: 12px; margin-right: 12px; }
  .post__visuel-bouton { border-radius: 0; }
  .short { padding: 0; }
  .short__cadre { max-width: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; }
  .short__rail { position: absolute; right: 10px; bottom: 90px; }
  .short { position: relative; }
  .short__texte { right: 78px; }
  .profil { padding: 20px 14px 40px; gap: 20px; }
  .profil__tete { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; }
  .profil__tete > .avatar, .profil__tete > .avatar-moi { --t: 110px !important; }
  .profil__ligne, .profil__stats { justify-content: center; }
  .profil__onglets { gap: 0; justify-content: space-around; }
  .profil__onglet { font-size: 11px; letter-spacing: .06em; padding: 14px 4px; }
  .detail-post { grid-template-columns: 1fr; margin: -28px -20px -20px; }
  .detail-post__visuel { border-radius: 24px 24px 0 0; aspect-ratio: 4 / 5; height: auto; }
}
a.encart { text-decoration: none; color: var(--texte); display: grid; }
a.encart .icone { width: 17px; height: 17px; vertical-align: -2px; }

.x { display: grid; grid-template-columns: minmax(0, 600px) 350px; justify-content: center; gap: 30px; padding: 0 24px; min-height: 100%; }
.x-centre { min-width: 0; min-height: 100%; background: rgba(13, 10, 20, .35); }
.x-entete { position: sticky; top: 0; z-index: 5; background: rgba(13, 10, 20, .72); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); }
.x-entete--retour { display: flex; align-items: center; gap: 24px; height: 53px; padding: 0 16px; }
.x-entete--retour h1 { font-size: 20px; }
.x-retour { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--texte); }
.x-retour:hover { background: var(--s2); }
.x-onglets { display: grid; grid-template-columns: 1fr 1fr; }
.x-onglet { position: relative; height: 53px; border: 0; background: none; color: var(--gris); font-weight: 600; font-size: 15px; }
.x-onglet:hover { background: var(--s1); }
.x-onglet[aria-pressed="true"] { color: var(--texte); font-weight: 750; }
.x-onglet[aria-pressed="true"] span { position: relative; }
.x-onglet[aria-pressed="true"] span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -16px; height: 4px; border-radius: 4px; background: var(--marque); }
.x-filtre { display: flex; justify-content: space-between; padding: 12px 16px; background: var(--s1); font-size: 14px; }
.x-filtre a { color: var(--accent); }
.x-composer { display: flex; gap: 12px; padding: 14px 16px 12px; margin-bottom: 8px; background: var(--s1); }
.x-composer__corps { flex: 1; min-width: 0; display: grid; gap: 10px; }
.x-composer__zone { width: 100%; resize: none; border: 0; background: none; color: var(--texte); font-size: 20px; line-height: 1.35; padding: 6px 0; outline: none; overflow: hidden; }
.x-composer--compact .x-composer__zone { font-size: 17px; }
.x-composer__zone::placeholder { color: var(--gris); }
.x-composer__pied { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.x-composer__compteur { font-size: 13px; color: var(--gris); font-variant-numeric: tabular-nums; }
.x-composer__compteur--alerte { color: var(--rose); font-weight: 700; }
.x-composer__bouton { padding: 9px 18px; font-size: 15px; }
.x-tweet { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 16px 8px; cursor: pointer; transition: background-color .15s; }
.x-liste { display: grid; gap: 2px; }
.x-tweet:hover { background-color: rgba(255, 255, 255, .025); }
.x-tweet--principal { cursor: default; grid-template-columns: 44px minmax(0, 1fr); padding-top: 14px; }
.x-tweet--principal:hover { background-color: transparent; }
.x-tweet--principal .x-tweet__texte { font-size: 19px; line-height: 1.45; }
.x-tweet__corps { min-width: 0; }
.x-tweet__tete { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; }
.x-nom { font-weight: 750; color: var(--texte); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
a.x-nom:hover { text-decoration: underline; }
.x-certif .icone { width: 17px; height: 17px; color: var(--accent); fill: rgba(201, 52, 133, .25); }
.x-tweet__meta { color: var(--gris); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; }
.x-tweet__texte { font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.x-carte { display: grid; gap: 4px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--s1); text-decoration: none; color: var(--texte); }
.x-carte:hover { background: var(--s2); }
.x-carte small { display: flex; align-items: center; gap: 6px; color: var(--gris); font-size: 13px; }
.x-carte small .icone { width: 14px; height: 14px; }
.x-carte strong { font-size: 15px; font-weight: 650; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x-actions { display: flex; justify-content: space-between; max-width: 440px; margin: 4px -8px 0; }
.x-action { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--gris); font-size: 13px; padding: 0; cursor: pointer; transition: color .15s; }
.x-action__rond { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; transition: background-color .15s; }
.x-action .icone { width: 18px; height: 18px; }
.x-action--repondre:hover, .x-action--vues:hover, .x-action--dm:hover { color: #6aa8ff; }
.x-action--repondre:hover .x-action__rond, .x-action--vues:hover .x-action__rond, .x-action--dm:hover .x-action__rond { background: rgba(106, 168, 255, .12); }
.x-action--repost:hover, .x-action--repost.x-action--actif { color: #3ddc84; }
.x-action--repost:hover .x-action__rond { background: rgba(61, 220, 132, .12); }
.x-action--jaime:hover, .x-action--jaime.x-action--actif { color: var(--rose); }
.x-action--jaime:hover .x-action__rond { background: rgba(201, 52, 133, .14); }
.x-action--jaime.x-action--actif .icone { fill: var(--rose); }
.x-action--vues { cursor: default; }
.x-vide { padding: 40px 16px; color: var(--gris); text-align: center; }
.x-repondre .x-composer { margin: 0 0 8px; }
.x-cote { position: sticky; top: 0; align-self: start; display: grid; gap: 16px; padding: 12px 0 40px; }
.x-bloc { display: grid; border-radius: 16px; background: var(--s1); overflow: hidden; padding-bottom: 6px; }
.x-bloc__titre { font-size: 20px; padding: 12px 16px; }
.x-tendance { display: grid; gap: 2px; padding: 10px 16px; text-decoration: none; color: var(--texte); }
.x-tendance:hover, .x-suivre:hover { background: rgba(255, 255, 255, .03); }
.x-tendance small { color: var(--gris); font-size: 13px; }
.x-tendance strong { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x-suivre { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.x-suivre__texte { display: grid; flex: 1; min-width: 0; text-decoration: none; color: var(--texte); line-height: 1.3; }
.x-suivre__texte small { color: var(--gris); font-size: 13.5px; }
@media (max-width: 1100px) { .x { grid-template-columns: minmax(0, 600px); } .x-cote { display: none; } }
@media (max-width: 760px) { .x { padding: 0; } .x-actions { max-width: none; } }
.post__sujet { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--s1); color: var(--doux); font-size: 13px; text-decoration: none; min-width: 0; }
.post__sujet span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post__sujet .icone { width: 15px; height: 15px; flex: none; }
@media (max-width: 760px) { .post__sujet { margin: 0 12px; } }

.x-media { display: block; width: 100%; margin-top: 10px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--s1); cursor: zoom-in; }
.x-media img { display: block; width: 100%; max-height: 510px; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--cadrage, 50% 20%); }
.x-visionneuse { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .88); cursor: zoom-out; animation: fondu .2s ease; }
.x-visionneuse img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; }
.x-tweet__avatar { display: flex; flex-direction: column; align-items: center; }
.x-tweet--fil { padding-bottom: 0; }
.x-tweet__ligne { flex: 1; width: 2px; margin: 4px 0 -4px; border-radius: 2px; background: rgba(255, 255, 255, .14); min-height: 16px; }
.x-ancetres:empty { display: none; }
.x-ancetres .x-tweet:hover { background-color: rgba(255, 255, 255, .025); }
.x-plus { border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 15px; text-align: left; padding: 12px 16px; }
.x-plus:hover { background: rgba(255, 255, 255, .03); }
.x-tweet__avatar-clic { display: inline-flex; border-radius: 50%; }
.carte__nom { display: flex; align-items: center; gap: 7px; }
.carte__en-ligne { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; }
.puce__point { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.explorer__entete { flex-wrap: wrap; }
.explorer__recherche { margin-left: auto; flex: 0 1 340px; height: 38px; }
@media (max-width: 760px) { .explorer__recherche { flex: 1 1 100%; margin-left: 0; } }
.discussion:has(> .fiche) { grid-template-columns: 300px minmax(0, 1fr) 340px; }
.discussion__profil--fiche { display: none; }
@media (max-width: 1240px) {
  .discussion:has(> .fiche) { grid-template-columns: 280px minmax(0, 1fr); }
  .discussion__profil--fiche { display: inline-grid; }
}
@media (max-width: 900px) { .discussion:has(> .fiche) { grid-template-columns: minmax(0, 1fr); } }

.coque--nu { grid-template-columns: minmax(0, 1fr); grid-template-areas: "entete" "corps"; }
.coque--nu .barre, .coque--nu .onglets, .coque--nu .entete__centre, .coque--nu .entete__droite, .coque--nu .entete__menu { display: none; }
.connexion { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); min-height: 100%; }
.connexion__visuel { position: relative; overflow: hidden; }
.connexion__mur { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; padding: 6px; }
.connexion__portrait { position: relative; border-radius: 18px; overflow: hidden; }
.connexion__portrait .portrait { position: absolute; inset: 0; }
.connexion__visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 10, 20, .1), rgba(13, 10, 20, .85)); }
.connexion__accroche { position: absolute; left: 40px; right: 40px; bottom: 44px; z-index: 1; display: grid; gap: 14px; }
.connexion__bulle { justify-self: start; max-width: 46ch; padding: 14px 18px; border-radius: 22px 22px 22px 6px; background: rgba(255, 255, 255, .12); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); font-size: 16px; line-height: 1.45; }
.connexion__devise { font: 800 clamp(30px, 3.2vw, 46px)/1.05 var(--titre); letter-spacing: -0.03em; }
.connexion__cote { display: grid; place-items: center; padding: 40px 24px; }
.connexion__panneau { width: min(420px, 100%); }
.connexion__panneau .mur__titre { font-size: 32px; padding-right: 0; }
@media (max-width: 900px) {
  .connexion { grid-template-columns: 1fr; }
  .connexion__visuel { min-height: 220px; }
  .connexion__mur { grid-template-rows: 1fr; grid-template-columns: repeat(6, 1fr); }
  .connexion__accroche { left: 18px; right: 18px; bottom: 18px; }
  .connexion__bulle { display: none; }
  .connexion__devise { font-size: 28px; }
}
.carte__haut .carte__encours { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(13, 10, 20, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 800 11px/1 var(--titre); letter-spacing: .04em; color: var(--texte); }
.carte__haut .carte__encours .icone { width: 11px; height: 11px; color: var(--accent); stroke-width: 2.6; }
.messagerie__vide.discussion__centre { justify-content: flex-start; overflow-y: auto; padding: 48px 32px; }
.messagerie__accueil { width: min(760px, 100%); margin: auto; display: grid; gap: 12px; text-align: left; }
.messagerie__accueil .messagerie__texte { max-width: none; margin-bottom: 10px; }
.propositions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.proposition { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 18px; background: var(--s1); color: var(--texte); text-decoration: none; transition: background-color .16s var(--ease-out), transform .16s var(--ease-out); }
.proposition:hover, .proposition:focus-visible { background: var(--s2); transform: translateY(-2px); }
.proposition__photo { position: relative; flex: none; width: 58px; height: 58px; }
.proposition__photo .portrait { position: absolute; inset: 0; border-radius: 50%; }
.proposition__photo .portrait__lettre { inset: 0; top: 0; right: 0; display: grid; place-items: center; font-size: 55cqh; opacity: .55; }
.proposition__point { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #3ddc84; outline: 2.5px solid var(--noir); }
.proposition__texte { display: grid; gap: 1px; flex: 1; min-width: 0; }
.proposition__texte strong { font-size: 15px; }
.proposition__texte small { font-size: 12.5px; color: var(--accent); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proposition__accroche { font-size: 13px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proposition__action { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--marque); color: #fff; opacity: 0; transform: scale(.8); transition: opacity .16s, transform .16s var(--ease); }
.proposition__action .icone { width: 18px; height: 18px; }
.proposition:hover .proposition__action, .proposition:focus-visible .proposition__action { opacity: 1; transform: none; }
.messagerie__tous { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--accent); font-weight: 650; text-decoration: none; font-size: 14px; }
.messagerie__tous .icone { width: 16px; height: 16px; }
@media (max-width: 1100px) { .propositions { grid-template-columns: 1fr; } }
.banniere { --duree: 8s; position: relative; isolation: isolate; display: grid; align-items: end; height: clamp(360px, 54vh, 500px); margin: -22px -28px 0; padding: 0 44px 36px; overflow: hidden; }
.banniere[hidden] { display: none; }
.banniere__fonds { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 26%); mask-image: linear-gradient(0deg, transparent 0, #000 26%); }
.banniere__fond { position: absolute; inset: 0; animation: banniere-fondu .9s var(--ease) both; }
.banniere__fond .portrait--banniere { left: auto; width: 74%; animation: banniere-derive 14s linear both; }
.banniere__fond .portrait--photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42%); mask-image: linear-gradient(90deg, transparent 0, #000 42%); }
.banniere__fond .portrait__photo { object-position: 50% 14%; }
.banniere__fond .portrait__lettre { font-size: 120cqh; top: -0.25em; right: 6%; opacity: .2; }
.banniere__fonds::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 10, 20, .92) 0%, rgba(13, 10, 20, .7) 30%, rgba(13, 10, 20, 0) 64%), linear-gradient(0deg, rgba(13, 10, 20, .7) 0%, rgba(13, 10, 20, 0) 50%); }
@keyframes banniere-fondu { from { opacity: 0; } }
@keyframes banniere-derive { from { transform: scale(1.06); } to { transform: scale(1); } }
.banniere__contenu { display: grid; gap: 22px; max-width: 600px; }
.banniere__texte { display: grid; gap: 10px; }
.banniere__texte > * { animation: apparition .55s var(--ease) backwards; }
.banniere__texte > :nth-child(2) { animation-delay: 60ms; }
.banniere__texte > :nth-child(3) { animation-delay: 120ms; }
.banniere__texte > :nth-child(4) { animation-delay: 180ms; }
.banniere__surtitre { display: flex; align-items: center; gap: 8px; font: 800 12.5px/1 var(--titre); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.banniere__point { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.banniere__nom { font-size: clamp(40px, 5vw, 72px); line-height: .95; letter-spacing: -0.04em; text-wrap: balance; }
.banniere__meta { display: flex; align-items: center; gap: 10px; color: var(--doux); font-size: 15px; }
.banniere__accroche { font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .88); max-width: 52ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.banniere__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.banniere__discuter { height: 52px; padding: 0 26px; font-size: 16px; }
.banniere__discuter .icone { width: 20px; height: 20px; }
.banniere__vignettes { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
.banniere__tiret { position: relative; width: 28px; height: 3px; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, .22); overflow: hidden; transition: width .3s var(--ease); }
.banniere__tiret[aria-selected="true"] { width: 44px; }
.banniere__progression { position: absolute; inset: 0; border-radius: 999px; background: var(--marque); transform-origin: left; animation: banniere-progression var(--duree) linear both; }
@keyframes banniere-progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.banniere:hover .banniere__progression, .banniere--pause .banniere__progression, html:has(#entree:not(.entree--sortie)) .banniere__progression { animation-play-state: paused; }
@media (max-width: 1100px) {
  .banniere { padding: 0 32px 30px; }
}
@media (max-width: 760px) {
  .banniere { height: auto; min-height: min(470px, calc(100svh - 260px)); margin: -14px -14px 0; padding: 170px 18px 20px; }
  .banniere__fond .portrait--banniere { width: 100%; }
  .banniere__fond .portrait--photo { -webkit-mask-image: none; mask-image: none; }
  .banniere__fonds::after { background: linear-gradient(0deg, rgba(13, 10, 20, .9) 0%, rgba(13, 10, 20, .8) 38%, rgba(13, 10, 20, .1) 72%); }
  .banniere__nom { font-size: clamp(40px, 12vw, 56px); }
  .banniere__accroche { font-size: 15.5px; -webkit-line-clamp: 2; }
  .banniere__actions { flex-direction: column; align-items: stretch; gap: 16px; }
  .banniere__discuter { justify-content: center; }
  .banniere__vignettes { justify-content: center; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .banniere__fond, .banniere__fond .portrait--banniere, .banniere__texte > * { animation: none; } }