/* =============================================================================
 * ITS Rugby Social — styles spécifiques au module "Mon réseau"
 *
 * Layout général (.rz-page-wrap, .rz-page-body, .its-account-layout,
 * .its-account-nav, .its-account-content, .its-account-form, .its-btn,
 * .its-btn-outline, .page-hero, etc.) déjà fourni par
 * wp-content/plugins/its-rugby-templates/assets/itsrugby-front-admin.css.
 *
 * On n'ajoute ici que ce qui est SPÉCIFIQUE au social :
 *   - lignes utilisateurs (avatar + infos + bouton)
 *   - fieldsets dédiés (visibilité, notifs, désactivation)
 *   - notice / feedback inline
 *
 * Conventions respectées :
 *   - Pas de styles inline (jamais de style="" en HTML)
 *   - Variables CSS partagées : --teal, --vanilla, --white, --border, --muted, --red, --red-lt
 *   - Conteneurs opaques (pas d'opacity, sinon l'habillage publicitaire transparait)
 *   - Cartes blanches (.its-social-row), strips/CTA vanilla via classes communes
 *   - Largeur de contenu cohérente avec les autres pages (~880px max, centrée),
 *     pas du full-width relou.
 * ============================================================================= */

/* ============================================================================
 * Largeur de contenu — cohérente avec les espaces (sidebar 220 + content ~960)
 *
 * On wrap chaque shortcode (sauf /mon-reseau/ qui a sa sidebar via space-layout)
 * dans .its-social-narrow pour contraindre à 880px et centrer.
 * ============================================================================ */
.its-social-narrow {
    max-width:880px;
    margin-left:auto;
    margin-right:auto;
}
/* Variant wide pour les pages avec sidebar (annuaire, etc.) — plus d'espace
   pour layout 2 colonnes (260px sidebar + cards). overflow:visible obligatoire
   sinon position:sticky des enfants ne fonctionne pas. */
.its-social-narrow--wide { max-width:1200px; overflow:visible; }
.rz-page-wrap, .rz-page-body { overflow:visible; }

/* ============================================================================
 * Lisibilité globale — surcharge les contrastes faibles et les fonts trop petits
 * pour respecter WCAG AA (4.5:1) et améliorer le confort de lecture.
 * ============================================================================ */
.its-social-narrow,
.its-social-pane,
.its-social-profile,
.its-social-feed,
.its-social-directory {
    font-size:15px;
    line-height:1.55;
}
.its-social-narrow .its-account-section-help,
.its-social-pane .its-account-section-help {
    font-size:14px;
    color:#3A3A3A;        /* contraste AA sur fond blanc */
    line-height:1.6;
}
.its-social-narrow h2,
.its-social-pane h2,
.its-social-profile h2,
.its-social-feed h2,
.its-social-directory h2 {
    font-size:20px;
    line-height:1.3;
    color:var(--teal);
}

/* ============================================================================
 * RGAA 10.7 — Focus visible obligatoire pour la navigation clavier.
 * Outline 2px contrasté (vert vif) sur TOUS les éléments interactifs sociaux,
 * sur la page /mon-reseau/, /profil/, /fil-reseau/, /membres/, /mes-notifications/
 * ET dans les espaces existants (.its-account-content qui contient mes panes).
 * ============================================================================ */
.its-social-pane :focus-visible,
.its-social-profile :focus-visible,
.its-social-narrow :focus-visible,
.its-social-list :focus-visible,
.its-social-feed :focus-visible,
.its-social-directory :focus-visible,
.its-social-share-buttons :focus-visible,
.its-social-prefs-form :focus-visible,
.its-social-fieldset :focus-visible,
.its-social-timeline-filter :focus-visible,
.its-social-timeline :focus-visible,
.its-social-notifs-list :focus-visible,
/* Quand mes panes sont injectees dans les espaces existants */
.its-account-content .its-social-list :focus-visible,
.its-account-content .its-social-prefs-form :focus-visible,
.its-account-content .its-social-fieldset :focus-visible,
.its-account-content .its-social-timeline-filter :focus-visible {
    outline:2px solid var(--g-bright, #8ED968);
    outline-offset:2px;
    box-shadow:0 0 0 2px rgba(0,0,0,.15);
}

/* ============================================================================
 * Bouton .its-page-follow-btn — discret, intégré au hero (.comp-hero).
 *
 * Hero a fond teal, texte vanilla. Le bouton suit la convention header-cta-login :
 * transparent + bordure vanilla translucide + texte vanilla en uppercase.
 * État Following = légèrement rempli pour signaler "déjà suivi".
 * ============================================================================ */
.its-page-follow-btn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 14px;
    margin-top:8px;
    background:transparent;
    color:var(--vanilla);
    font:inherit;
    font-size:11px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    border:1px solid rgba(242,229,210,.45);
    border-radius:2px;
    cursor:pointer;
    transition:background .15s, border-color .15s, color .15s;
    line-height:1;
    align-self:flex-start;
}
.its-page-follow-btn:hover,
.its-page-follow-btn:focus-visible {
    background:rgba(242,229,210,.1);
    border-color:var(--vanilla);
    outline:none;
}
.its-page-follow-btn.is-following {
    background:rgba(242,229,210,.18);
    border-color:rgba(242,229,210,.7);
}
.its-page-follow-btn.is-following:hover,
.its-page-follow-btn.is-following:focus-visible {
    background:transparent;
    border-color:rgba(242,229,210,.45);
}
.its-page-follow-btn[disabled] { opacity:.5; cursor:wait; }

/* Sur fond clair (fiche club/bar sans hero teal — fallback) */
.its-page-follow-btn.on-light {
    color:var(--teal-dk);
    border-color:rgba(7,68,68,.3);
}
.its-page-follow-btn.on-light:hover {
    background:rgba(7,68,68,.06);
    border-color:var(--teal-dk);
}

/* ============================================================================
 * Fix hover .its-btn-outline : teal sur teal au hover bug.
 * itsrugby-front-admin.css a la regle correcte (vanilla bg + teal-dk text)
 * mais il n'est pas toujours charge sur la page profil. itsrugby-common.css
 * a `bg:teal + color:vanilla` mais peut etre overridee. On force le hover
 * lisible partout (fond vanilla + texte teal-dk).
 * ============================================================================ */
.its-social-pane .its-btn.its-btn-outline:hover,
.its-social-profile .its-btn.its-btn-outline:hover,
.its-social-narrow .its-btn.its-btn-outline:hover,
.its-social-feed .its-btn.its-btn-outline:hover,
.its-social-directory .its-btn.its-btn-outline:hover,
.its-social-row .its-btn.its-btn-outline:hover {
    background:var(--vanilla);
    color:var(--teal-dk);
    border-color:var(--teal-dk);
}

/* ---------- Liste des utilisateurs ---------- */
.its-social-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.its-social-row {
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 18px;
    background:var(--white);
    border:1px solid var(--border);
    transition:border-color .15s, background .15s, opacity .25s, transform .25s;
}
.its-social-row:hover {
    border-color:var(--teal);
    background:#FAFAF8;
}
/* Animation fade-out lors du retrait (Mes j'aime, etc.) */
.its-social-row.is-removing {
    opacity:0;
    transform:translateX(20px);
    pointer-events:none;
}
.its-social-avatar {
    width:48px;
    height:48px;
    /* avatars circulaires : clip-path car le theme force border-radius:0 */
    clip-path:circle(50%);
    object-fit:cover;
    flex-shrink:0;
    background:var(--vanilla);
}
.its-social-row-link:hover .its-social-avatar {
    box-shadow:0 0 0 2px var(--g-bright, #8ED968);
}
.its-social-avatar-fallback {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#E11D48;
    font-size:20px;
    clip-path:circle(50%);
}
.its-social-row-info {
    flex:1;
    min-width:0;
}
.its-social-row-name {
    font-size:14px;
    font-weight:700;
    color:var(--teal);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.its-social-row-slug {
    font-size:12px;
    color:var(--muted);
    margin-top:2px;
}
.its-social-action-btn {
    flex-shrink:0;
}
.its-social-action-btn[disabled] {
    opacity:.5;
    cursor:wait;
}

/* ---------- Pane unifié "Mes réglages" — sections h3 entre les groupes ---------- */
.its-social-reglages-section {
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--vanilla-d);
}
.its-social-reglages-section:first-of-type {
    margin-top:18px;
    padding-top:0;
    border-top:none;
}
.its-social-reglages-h3 {
    font-size:14px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--teal);
    margin:0 0 14px;
    padding:8px 12px;
    background:var(--vanilla-d);
    border-left:3px solid var(--teal);
}

/* ---------- Préférences (fieldsets dédiés) ---------- */
.its-social-prefs-form {
    display:flex;
    flex-direction:column;
    gap:18px;
    /* pas de max-width : le formulaire prend toute la largeur du contenu */
    width:100%;
}
/* Override : .its-account-form (utilisé pour les formulaires d'identité dans les
   espaces) impose un max-width:480px qui ne convient pas au social. */
.its-account-form.its-social-prefs-form {
    max-width:none;
}
.its-social-fieldset {
    background:var(--white);
    border:1px solid var(--border);
    padding:18px 22px;
    margin:0;
}
.its-social-fieldset legend {
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:var(--teal);
    padding:0 8px;
}
.its-social-fieldset label {
    display:block;
    font-size:14px;
    color:var(--teal);
    line-height:1.5;
    cursor:pointer;
}
.its-social-fieldset label strong {
    font-weight:700;
}
.its-social-fieldset-danger {
    border-color:var(--red);
    background:var(--red-lt);
}
.its-social-fieldset-danger legend {
    color:var(--red);
}

/* ---------- Notice (info au-dessus des fieldsets) ---------- */
.its-social-notice {
    text-align:left;
    margin-bottom:14px;
}

/* ---------- Feedback inline (succès / erreur) après actions REST ---------- */
.its-social-feedback {
    margin:8px 0 0;
    padding:8px 12px;
    font-size:12px;
    line-height:1.4;
}
.its-social-feedback.its-success {
    background:#E8F5E9;
    color:#1B5E20;
    border-left:3px solid #4CAF50;
}
.its-social-feedback.its-error {
    background:var(--red-lt);
    color:var(--red);
    border-left:3px solid var(--red);
}

/* ---------- Textarea bio ---------- */
.its-social-fieldset textarea[name="bio"] {
    width:100%;
    min-height:90px;
    padding:10px 12px;
    border:1px solid var(--border);
    background:var(--white);
    color:var(--teal);
    font-family:inherit;
    font-size:14px;
    resize:vertical;
}
.its-social-fieldset textarea[name="bio"]:focus {
    outline:none;
    border-color:var(--teal);
}

/* ---------- Liens dans les rangees user ---------- */
.its-social-row-link {
    flex-shrink:0;
    text-decoration:none;
}
.its-social-row-name a {
    color:var(--teal);
    text-decoration:none;
    transition:color .15s;
}
.its-social-row-name a:hover {
    color:var(--teal-dk);
    text-decoration:underline;
}
.its-link {
    color:var(--teal);
    text-decoration:underline;
    font-weight:600;
}
.its-link:hover { color:var(--teal-dk); }

/* ============================================================================
 * Page profil public /profil/{slug}/
 * ============================================================================ */
.its-social-profile {
    background:var(--white);
    border:1px solid var(--border);
    overflow:hidden;
}

/* Cover (banner) — pas d'overflow:hidden ici sinon l'avatar est clippe en bas */
.its-social-profile-cover {
    position:relative;
    height:220px;
    background:linear-gradient(135deg, var(--teal) 0%, var(--teal-dk) 60%, var(--g-bright, #8ED968) 100%);
}
/* L'image custom est dans son propre rectangle, clippée par clip-path */
.its-social-profile-cover-img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
    clip-path:inset(0);   /* clippe l'image au rectangle du cover sans toucher au parent */
}
.its-social-profile-cover.has-image::after {
    /* leger overlay en bas pour lisibilite avatar/cover */
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.15) 100%);
    z-index:1;
    pointer-events:none;
    clip-path:inset(0);
}
/* Avatar en wrapper pour avoir un anneau blanc visible (clip-path clippe
   les box-shadow, donc l'anneau passe par un padding+background blancs sur
   un wrapper, pas une box-shadow sur l'image directement). */
.its-social-profile-cover .its-social-profile-avatar-ring {
    position:absolute;
    bottom:-50px;
    left:32px;
    display:inline-block;
    padding:5px;
    background:var(--white);
    clip-path:circle(50%);
    z-index:2;
    line-height:0;     /* evite l'espace fantome inline-block */
}
.its-social-profile-cover .its-social-profile-avatar {
    width:140px;
    height:140px;
    clip-path:circle(50%);
    object-fit:cover;
    background:var(--vanilla);
    display:block;
}

/* Header (nom + meta + bouton suivre) */
.its-social-profile-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:64px 32px 20px 32px; /* le 64px laisse de la place sous l'avatar overlap */
    border-bottom:1px solid var(--border);
}
.its-social-profile-id {
    flex:1;
    min-width:200px;
}
.its-social-profile-name {
    font-size:26px;
    font-weight:800;
    color:var(--teal);
    margin:0 0 6px;
    letter-spacing:.3px;
    line-height:1.2;
}
.its-social-profile-meta {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    font-size:13px;
}
.its-social-profile-slug {
    color:var(--muted);
    font-weight:600;
}
.its-social-profile-role {
    display:inline-block;
    padding:3px 10px;
    background:var(--vanilla);
    color:var(--teal);
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.its-social-profile-since {
    color:var(--muted);
    font-style:italic;
}
.its-social-profile-actions {
    flex-shrink:0;
    align-self:center;
}

/* Bio */
.its-social-profile-bio-section {
    padding:18px 32px;
    margin-top:0;
    border-bottom:1px solid var(--border);
}
.its-social-profile-bio {
    color:var(--ink);
    line-height:1.6;
    font-size:15px;
}
.its-social-profile-bio p { margin:0 0 8px; }
.its-social-profile-bio p:last-child { margin-bottom:0; }

/* Stat cards */
.its-social-profile-stats {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:0;
    border-bottom:1px solid var(--border);
}
.its-social-stat {
    padding:18px 16px;
    text-align:center;
    border-right:1px solid var(--border);
    background:var(--white);
}
.its-social-stat:last-child { border-right:none; }
.its-social-stat-value {
    font-size:24px;
    font-weight:800;
    color:var(--teal);
    line-height:1;
}
.its-social-stat-label {
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:var(--muted);
    margin-top:6px;
}
.its-social-stat.is-points .its-social-stat-value {
    color:var(--g-bright, #8ED968);
}

/* Sections (entités liées, timeline, share) */
.its-social-profile-section {
    padding:20px 32px;
    border-bottom:1px solid var(--border);
    margin:0;
}
.its-social-profile-section:last-child {
    border-bottom:none;
}
.its-social-profile-section .its-account-section-title {
    margin:0 0 14px;
}
.its-social-linked-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.its-social-linked-item a {
    display:flex;
    gap:14px;
    padding:10px 14px;
    background:var(--vanilla);
    color:var(--teal);
    text-decoration:none;
    transition:background .15s;
    align-items:center;
}
.its-social-linked-item a:hover {
    background:var(--vanilla-d);
}
.its-social-linked-label {
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--muted);
    flex-shrink:0;
    min-width:130px;
}
.its-social-linked-title {
    font-size:14px;
    font-weight:700;
}
.its-social-articles-list {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:14px;
}
.its-social-article-item a {
    display:block;
    background:var(--vanilla);
    color:var(--teal);
    text-decoration:none;
    transition:background .15s;
    height:100%;
}
.its-social-article-item a:hover {
    background:var(--vanilla-d);
}
.its-social-article-thumb {
    width:100%;
    height:140px;
    object-fit:cover;
    display:block;
}
.its-social-article-body {
    padding:12px 14px;
}
.its-social-article-title {
    font-size:14px;
    font-weight:700;
    line-height:1.35;
    color:var(--teal);
}
.its-social-article-date {
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-top:6px;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* ============================================================================
 * Fil reseau (shortcode [its_social_feed]) — design Twitter/Facebook moderne
 * ============================================================================ */
.its-social-feed { display:flex; flex-direction:column; gap:14px; }
.its-social-feed-empty {
    background:var(--white);
    border:1px solid var(--border);
    padding:48px 24px;
    text-align:center;
    color:var(--muted);
    font-size:15px;
    line-height:1.6;
}
.its-social-feed-empty .its-link {
    display:inline-block;
    margin-top:12px;
    padding:8px 18px;
    background:var(--teal);
    color:var(--vanilla);
    text-decoration:none;
    font-weight:800;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.its-social-feed-empty .its-link:hover { background:var(--teal-dk); }

.its-social-feed-item {
    background:var(--white);
    border:1px solid var(--border);
    border-left:4px solid transparent;
    transition:border-color .2s, box-shadow .2s;
}
.its-social-feed-item:hover { box-shadow:0 4px 14px rgba(28,61,52,.08); }
.its-social-feed-item.is-article { border-left-color:var(--teal); }
.its-social-feed-item.is-prono   { border-left-color:#E36414; }
.its-social-feed-item.is-like    { border-left-color:#E11D48; }
.its-social-feed-item.is-follow  { border-left-color:var(--g-bright, #8ED968); }
.its-social-feed-item.is-comment { border-left-color:#3B82F6; }

.its-social-feed-head {
    display:flex;
    gap:14px;
    align-items:center;
    padding:16px 20px 12px;
}
.its-social-feed-avatar { flex-shrink:0; }
.its-social-feed-avatar img {
    width:48px;
    height:48px;
    clip-path:circle(50%);
    object-fit:cover;
    background:var(--vanilla);
    transition:transform .15s;
}
.its-social-feed-avatar a:hover img { transform:scale(1.05); }
.its-social-feed-avatar-fallback {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--teal, #074444);
    color:var(--vanilla, #F2E5D2);
    font-size:20px;
    font-weight:800;
    line-height:1;
    text-transform:uppercase;
    user-select:none;
    transition:transform .15s;
}
.its-social-feed-avatar a:hover .its-social-feed-avatar-fallback { transform:scale(1.05); }
.its-social-feed-id { flex:1; min-width:0; line-height:1.3; }
.its-social-feed-name { font-size:15px; font-weight:800; color:var(--teal); }
.its-social-feed-name a { color:var(--teal); text-decoration:none; }
.its-social-feed-name a:hover { color:var(--teal-dk); text-decoration:underline; }
.its-social-feed-sub {
    font-size:13px;
    color:#5A5A5A;        /* contraste meilleur que --muted (#6B6B6B) */
    margin-top:3px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
}

.its-social-feed-verb-wrap { flex-shrink:0; }
.its-social-feed-verb {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 10px;
    background:var(--vanilla);
    color:var(--teal);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    line-height:1.2;
}
.its-social-feed-verb-icon { font-size:12px; }
.is-article .its-social-feed-verb { background:#E0F0EB; color:var(--teal-dk); }
.is-prono   .its-social-feed-verb { background:#FFE4D1; color:#9A4A0E; }
.is-like    .its-social-feed-verb { background:#FFE4E6; color:#9F1239; }
.is-follow  .its-social-feed-verb { background:#DCFCE7; color:#14532D; }
.is-comment .its-social-feed-verb { background:#DBEAFE; color:#1E3A8A; }

/* Body : texte (titre + extra) + thumb COMPACT à droite (style Twitter card) */
.its-social-feed-content {
    padding:0 18px 14px;
    display:flex;
    gap:14px;
    align-items:flex-start;
}
.its-social-feed-text {
    flex:1;
    min-width:0;
}
.its-social-feed-title {
    font-size:18px;
    font-weight:700;
    line-height:1.4;
    color:var(--teal);
    margin:0 0 8px;
}
.its-social-feed-title a { color:var(--teal); text-decoration:none; }
.its-social-feed-title a:hover { color:var(--teal-dk); text-decoration:underline; }
.its-social-feed-extra {
    font-size:13px;
    color:var(--muted);
    margin:4px 0 0;
    line-height:1.5;
}
.its-social-feed-extra strong { color:var(--teal); font-weight:700; }
.its-social-feed-extra em { font-style:italic; color:var(--teal); }

/* Excerpt sous le titre des articles (description courte 30 mots) */
.its-social-feed-excerpt {
    margin:4px 0 0;
    font-size:14px;
    color:#3A3A3A;       /* texte plus contrasté que --muted pour le corps */
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Thumb compact à droite — 140x100, qualité large WP */
.its-social-feed-thumb-link {
    display:block;
    flex-shrink:0;
    width:140px;
    height:100px;
    overflow:hidden;
    background:var(--vanilla);
    border:1px solid var(--vanilla-d);
}
.its-social-feed-thumb {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .25s;
}
.its-social-feed-thumb-link:hover .its-social-feed-thumb {
    transform:scale(1.05);
}

.its-social-feed-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 14px;
    border-top:1px solid var(--vanilla-d);
    background:#FCFBF8;
    gap:14px;
}
.its-social-feed-footer .its-social-like-wrap { margin:0; }
.its-social-feed-footer .its-social-like-btn {
    padding:6px 12px;
    font-size:14px;
    background:transparent;
    border-color:transparent;
    color:var(--muted);
}
.its-social-feed-footer .its-social-like-btn:hover {
    background:#FFE4E6;
    color:#E11D48;
}
.its-social-feed-footer .its-social-like-btn.is-liked {
    background:transparent;
    color:#E11D48;
}
.its-social-feed-footer .its-social-like-btn.is-liked:hover { background:#FFE4E6; }
.its-social-feed-footer .its-social-like-count { font-size:13px; font-weight:700; }
.its-social-feed-open {
    color:var(--teal);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    text-decoration:none;
    padding:6px 10px;
    transition:color .15s;
}
.its-social-feed-open:hover { color:var(--teal-dk); }
.its-social-feed-open span {
    margin-left:4px;
    transition:transform .15s;
    display:inline-block;
}
.its-social-feed-open:hover span { transform:translateX(3px); }

.its-social-feed-item.is-hidden { display:none; }

@media (max-width:540px) {
    .its-social-feed-head { flex-wrap:wrap; }
    /* width:100% + margin-left:60px = 100% + 60px → débordait à droite de 60px
       (le champ « Actu de mes abonnements » en app). On retranche la marge. */
    .its-social-feed-verb-wrap { margin-left:60px; width:calc(100% - 60px); }
    .its-social-feed-title { font-size:16px; }
    .its-social-feed-thumb-link {
        width:96px;
        height:72px;
    }
}

/* ============================================================================
 * Annuaire membres — cards
 * ============================================================================ */
.its-social-directory {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:12px;
    list-style:none;
    padding:0;
    margin:0;
}
.its-social-directory-card {
    background:var(--white);
    border:1px solid var(--border);
    padding:20px 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    transition:border-color .15s, transform .15s, box-shadow .15s;
}
.its-social-directory-card:hover {
    border-color:var(--teal);
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(28,61,52,.08);
}
.its-social-directory-card img {
    width:80px;
    height:80px;
    clip-path:circle(50%);
    object-fit:cover;
    background:var(--vanilla);
    transition:box-shadow .15s;
}
.its-social-directory-card a:hover img {
    box-shadow:0 0 0 3px var(--g-bright, #8ED968);
}
.its-social-directory-card .its-social-row-name {
    font-size:15px;
    font-weight:800;
    text-align:center;
    white-space:normal;
    margin-top:4px;
    line-height:1.3;
}
.its-social-directory-card .its-social-row-name a {
    color:var(--teal);
    text-decoration:none;
}
.its-social-directory-card .its-social-row-name a:hover {
    color:var(--teal-dk);
    text-decoration:underline;
}
.its-social-directory-card .its-social-row-slug {
    text-align:center;
    margin-top:0;
}
.its-social-directory-card .its-social-action-btn {
    margin-top:4px;
    width:100%;
}
/* .its-social-directory-filter — supprimé : remplacé par .its-directory-toolbar
   (chips + recherche compacte) défini dans itsrugby-common.css. */
.its-social-feed-actions .its-social-like-wrap {
    margin-top:0;
}
.its-social-feed-actions .its-social-like-btn {
    padding:4px 10px;
    font-size:14px;
}
.its-social-feed-actions .its-social-like-count {
    font-size:12px;
}

.its-social-directory {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:14px;
}
.its-social-directory-card {
    background:var(--white);
    border:1px solid var(--border);
    padding:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
}
.its-social-directory-card img {
    width:72px;
    height:72px;
    clip-path:circle(50%);
    object-fit:cover;
    background:var(--vanilla);
}
.its-social-directory-card .its-social-row-name {
    font-size:14px;
    text-align:center;
    white-space:normal;
}
.its-social-directory-card .its-social-row-slug {
    text-align:center;
}
/* .its-social-directory-filter — supprimé (doublon média query). Voir .its-directory-toolbar. */

/* ============================================================================
 * Timeline tabs (filtre par type)
 * ============================================================================ */
.its-social-timeline-filter {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:14px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border);
}
.its-social-timeline-tab {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    background:var(--white);
    color:var(--teal);
    border:1px solid var(--border);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    transition:background .15s, color .15s, border-color .15s;
}
.its-social-timeline-tab:hover {
    background:var(--vanilla-d);
}
.its-social-timeline-tab.is-active {
    background:var(--teal);
    color:var(--vanilla);
    border-color:var(--teal);
}
.its-social-timeline-tab-icon {
    font-size:14px;
    line-height:1;
}
.its-social-timeline-tab-count {
    display:inline-block;
    padding:1px 7px;
    background:var(--vanilla);
    color:var(--teal);
    border-radius:10px;
    font-size:10px;
    font-weight:800;
    line-height:1.4;
}
.its-social-timeline-tab.is-active .its-social-timeline-tab-count {
    background:var(--g-bright, #8ED968);
    color:var(--teal-dk);
}
.its-social-timeline-item.is-hidden { display:none; }

/* ============================================================================
 * Cover image preview (dans /mon-reseau/?reseau_tab=pseudo-bio)
 * ============================================================================ */
.its-social-cover-preview {
    width:100%;
    height:120px;
    background:var(--vanilla-d);
    margin-bottom:12px;
    overflow:hidden;
    position:relative;
}
.its-social-cover-preview img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.its-social-cover-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    color:var(--muted);
    font-size:13px;
    text-align:center;
    padding:0 16px;
}

/* ============================================================================
 * Bandeau "URL publique" — affiché en haut de la section profil public
 * (espace journaliste / redacteur / supporter). Fournit un raccourci visuel
 * vers la page publique et expose l'URL et le pseudo courants.
 * ============================================================================ */
.its-profile-public-banner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    padding:14px 18px;
    margin:14px 0 18px;
    background:var(--vanilla, #F2E5D2);
    border:1px solid var(--vanilla-d, #E5D5BE);
    border-left:3px solid var(--teal, #074444);
}
.its-profile-public-banner__info {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    min-width:0;
    flex:1;
}
.its-profile-public-banner__label {
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:var(--muted, #6B6B6B);
    flex-shrink:0;
}
.its-profile-public-banner__url {
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size:13px;
    font-weight:600;
    color:var(--teal-dk, #053838);
    background:rgba(255,255,255,.6);
    padding:4px 10px;
    border-radius:4px;
    word-break:break-all;
    min-width:0;
    overflow-wrap:anywhere;
}
.its-profile-public-banner__slug {
    font-size:13px;
    font-weight:700;
    color:var(--teal, #074444);
    flex-shrink:0;
}
.its-profile-public-banner__cta {
    flex-shrink:0;
}
@media (max-width:560px) {
    .its-profile-public-banner {
        padding:12px 14px;
        gap:12px;
    }
    .its-profile-public-banner__cta {
        width:100%;
        text-align:center;
        justify-content:center;
    }
}

/* ============================================================================
 * Form profil public — refonte UI 2.2.8
 *
 * Layout 1 colonne (Pseudo, Bio) + grille 2 colonnes pour les médias
 * (Photo, Cover). Cards plus contrastées, focus accessible, micro-feedback
 * (compteur bio, preview slug, transition au hover).
 *
 * Classes BEM-like utilisées :
 *   .its-profile-form        — wrapper du form
 *   .its-profile-card        — chaque card (héritière de .its-social-card)
 *   .its-profile-card__head  — h3 + help groupés en tête de card
 *   .its-profile-media-grid  — grille 2 colonnes pour avatar + cover
 *   .its-social-input-group  — input-group avec préfixe (ex: @)
 *   .its-social-input-hint   — message sous l'input (preview slug)
 *   .its-social-input-counter — compteur de caractères live (bio)
 * ============================================================================ */
.its-profile-form {
    gap:16px;
}
.its-profile-card {
    transition:border-color .15s, box-shadow .15s, transform .15s;
}
.its-profile-card:hover {
    border-color:var(--vanilla-d, #E5D5BE);
}
.its-profile-card:focus-within {
    border-color:var(--teal, #074444);
    box-shadow:0 4px 14px rgba(7,68,68,.08);
}
.its-profile-card__head {
    margin-bottom:14px;
}
.its-profile-card__head .its-social-card-title {
    margin-bottom:4px;
}
.its-profile-card__head .its-social-card-help {
    margin-bottom:0;
}

/* ---------- Grille 2 colonnes pour les cards médias ---------- */
.its-profile-media-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:16px;
}
.its-profile-media-grid .its-social-card {
    margin:0;
}

/* ---------- Input-group : préfixe inline (@, https://...) ---------- */
.its-social-input-group {
    display:flex;
    align-items:stretch;
    border:1px solid var(--border, #D9D2C5);
    border-radius:6px;
    background:var(--white, #fff);
    overflow:hidden;
    transition:border-color .15s, box-shadow .15s;
}
.its-social-input-group:focus-within {
    border-color:var(--teal, #074444);
    box-shadow:0 0 0 3px rgba(0,102,102,.12);
}
.its-social-input-group__prefix {
    display:inline-flex;
    align-items:center;
    padding:0 14px;
    background:var(--vanilla, #F2E5D2);
    color:var(--teal, #074444);
    font-weight:800;
    font-size:16px;
    border-right:1px solid var(--border, #D9D2C5);
    user-select:none;
    line-height:1;
}
.its-social-input--prefixed {
    border:none;
    border-radius:0;
    flex:1;
    min-width:0;
}
.its-social-input--prefixed:focus {
    outline:none;
    box-shadow:none;
}

/* ---------- Hint / preview sous l'input ---------- */
.its-social-input-hint {
    margin:8px 0 0;
    font-size:12px;
    color:var(--muted, #6B6B6B);
    line-height:1.4;
}
.its-social-input-hint strong {
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    background:var(--vanilla, #F2E5D2);
    color:var(--teal-dk, #053838);
    padding:1px 6px;
    border-radius:3px;
    font-weight:700;
    font-size:12px;
}
/* État "le slug aperçu diffère de ce qui est en BDD" */
.its-social-input-hint.is-pending strong {
    background:#FFF4E5;
    color:#9A4A0E;
}

/* ---------- Compteur de caractères (bio) ---------- */
.its-social-input-counter {
    margin:6px 0 0;
    font-size:12px;
    color:var(--muted, #6B6B6B);
    text-align:right;
    font-variant-numeric:tabular-nums;
    line-height:1.4;
}
.its-social-input-counter.is-warning { color:#9A4A0E; font-weight:600; }
.its-social-input-counter.is-danger  { color:var(--red, #DC2626); font-weight:700; }

/* ---------- Card-actions : bouton + note inline ---------- */
.its-social-card-actions__note {
    font-size:12px;
    color:var(--muted, #6B6B6B);
    line-height:1.4;
    flex:1;
    min-width:200px;
}

/* ---------- Cover placeholder avec icône ---------- */
.its-social-cover-placeholder {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:100%;
    color:var(--muted, #6B6B6B);
    font-size:13px;
    text-align:center;
    padding:0 16px;
    line-height:1.45;
}
.its-social-cover-placeholder__icon {
    font-size:28px;
    line-height:1;
    color:var(--vanilla-d, #C9B89A);
}

/* ---------- Avatar preview agrandi (120px au lieu de 96px) ---------- */
.its-profile-card--avatar .its-social-avatar-preview {
    width:120px;
    height:120px;
}

/* ---------- Cover preview plus haute ---------- */
.its-profile-card--cover .its-social-cover-preview {
    height:140px;
}

@media (max-width:540px) {
    .its-profile-media-grid {
        grid-template-columns:1fr;
    }
    .its-social-card-actions__note {
        min-width:0;
        flex-basis:100%;
    }
    .its-profile-card--avatar .its-social-avatar-preview {
        width:96px;
        height:96px;
    }
}

/* ============================================================================
 * Form profil public — cards refactorées (remplace les <fieldset> bruts)
 * ============================================================================ */
.its-social-card {
    background:var(--white);
    border:1px solid var(--border);
    border-radius:8px;
    padding:20px 24px;
}
.its-social-card-title {
    margin:0 0 4px;
    font-size:15px;
    font-weight:700;
    color:var(--teal);
    letter-spacing:normal;
    text-transform:none;
}
.its-social-card-help {
    margin:0 0 16px;
    font-size:13px;
    line-height:1.5;
    color:var(--muted, #6b7280);
}
.its-social-input-row { margin-bottom:14px; }
.its-social-input {
    width:100%;
    box-sizing:border-box;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--white);
    color:var(--teal);
    font-family:inherit;
    font-size:14px;
    line-height:1.5;
}
textarea.its-social-input { min-height:96px; resize:vertical; }
.its-social-input:focus {
    outline:none;
    border-color:var(--teal);
    box-shadow:0 0 0 3px rgba(0, 102, 102, 0.12);
}
.its-social-card-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.its-btn-ghost {
    background:transparent;
    border:none;
    color:var(--muted, #6b7280);
    padding:8px 12px;
    font-size:13px;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
}
.its-btn-ghost:hover { color:var(--red); }

/* Avatar : preview rond + actions en ligne (à droite sur desktop) */
.its-social-avatar-row {
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}
.its-social-avatar-preview {
    width:96px;
    height:96px;
    border-radius:50%;
    overflow:hidden;
    background:var(--vanilla-d);
    flex-shrink:0;
    border:2px solid var(--border);
}
.its-social-avatar-preview img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.its-social-avatar-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

/* Cover preview améliorée */
.its-social-card .its-social-cover-preview {
    border-radius:6px;
    margin-bottom:14px;
}

/* ============================================================================
 * Timeline d'activité (sur le profil public)
 * ============================================================================ */
.its-social-timeline {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.its-social-pagination {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
    align-items:center;
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid var(--border);
}
.its-social-pagination-link,
.its-social-pagination-current {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    height:36px;
    padding:0 10px;
    border:1px solid var(--border);
    background:var(--white);
    color:var(--teal);
    font-weight:600;
    text-decoration:none;
    border-radius:4px;
    transition:background .15s, border-color .15s, color .15s;
}
.its-social-pagination-link:hover {
    background:var(--vanilla);
    border-color:var(--teal);
}
.its-social-pagination-current {
    background:var(--teal);
    border-color:var(--teal);
    color:var(--vanilla);
    cursor:default;
}
.its-social-pagination-ellipsis {
    color:var(--ink-mute, #6B7280);
    padding:0 4px;
}
.its-social-pagination-link.is-prev,
.its-social-pagination-link.is-next {
    padding:0 14px;
}
.its-social-timeline-item {
    display:flex;
    gap:14px;
    padding:14px 18px;
    background:var(--white);
    border:1px solid var(--border);
    border-left:4px solid var(--border);
    align-items:flex-start;
    transition:border-color .2s, box-shadow .2s;
}
.its-social-timeline-item:hover {
    box-shadow:0 4px 14px rgba(28,61,52,.08);
}
.its-social-timeline-item.is-article  { border-left-color:var(--teal); }
.its-social-timeline-item.is-prono    { border-left-color:#E36414; }
.its-social-timeline-item.is-like     { border-left-color:#E11D48; }
.its-social-timeline-item.is-follow   { border-left-color:var(--g-bright, #8ED968); }
.its-social-timeline-item.is-comment  { border-left-color:#3B82F6; }
.its-social-timeline-body {
    flex:1;
    min-width:0;
}
.its-social-timeline-meta {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:baseline;
    margin-bottom:6px;
}
.its-social-timeline-label {
    display:inline-block;
    padding:2px 8px;
    background:var(--vanilla);
    color:var(--teal);
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.5px;
    line-height:1.3;
}
.is-article  .its-social-timeline-label { background:#E0F0EB; color:var(--teal-dk); }
.is-prono    .its-social-timeline-label { background:#FFE4D1; color:#9A4A0E; }
.is-like     .its-social-timeline-label { background:#FFE4E6; color:#9F1239; }
.is-follow   .its-social-timeline-label { background:#DCFCE7; color:#14532D; }
.is-comment  .its-social-timeline-label { background:#DBEAFE; color:#1E3A8A; }
.its-social-timeline-when {
    font-size:11px;
    color:#5A5A5A;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.its-social-timeline-title {
    display:block;
    color:var(--teal);
    font-weight:700;
    font-size:15px;
    text-decoration:none;
    line-height:1.4;
}
.its-social-timeline-title:hover {
    color:var(--teal-dk);
    text-decoration:underline;
}
.is-article .its-social-timeline-title {
    font-size:17px;
}
.its-social-timeline-excerpt {
    margin:6px 0 0;
    font-size:14px;
    color:#3A3A3A;
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.its-social-timeline-extra {
    font-size:13px;
    color:#5A5A5A;
    margin-top:4px;
    line-height:1.5;
}
.its-social-timeline-extra a {
    color:var(--teal);
    text-decoration:none;
    font-weight:600;
}
.its-social-timeline-extra a:hover { text-decoration:underline; }

/* Thumbnail compacte à droite (uniquement pour articles) */
.its-social-timeline-thumb {
    width:120px;
    height:84px;
    object-fit:cover;
    flex-shrink:0;
    background:var(--vanilla);
    transition:transform .25s;
}
.its-social-timeline-item.is-rich:hover .its-social-timeline-thumb {
    transform:scale(1.04);
}

/* ============================================================================
 * Boutons de partage (sur le profil public)
 * Pill buttons avec icône SVG + label texte, couleurs marque au hover.
 * ============================================================================ */
.its-social-share { margin-top:10px; }
.its-social-share-buttons {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.its-social-share-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 16px;
    background:var(--white);
    color:var(--teal);
    border:1px solid var(--border);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    font-family:inherit;
    line-height:1;
    transition:background .15s, color .15s, border-color .15s, transform .1s;
}
.its-social-share-btn:hover {
    transform:translateY(-1px);
}
.its-social-share-icon {
    width:18px;
    height:18px;
    flex-shrink:0;
    display:block;
}
.its-social-share-label {
    white-space:nowrap;
}
/* Hover unifié : tous les boutons share passent en teal+vanilla
   (cohérence palette site, pas de couleurs marque externes). */
.its-social-share-btn:hover {
    background:var(--teal);
    color:var(--vanilla);
    border-color:var(--teal);
}
/* Label + icône SVG suivent la couleur vanilla au hover (sinon le theme
   peut overrider via une regle globale sur a:hover ou span). */
.its-social-share-btn:hover .its-social-share-label,
.its-social-share-btn:hover .its-social-share-icon {
    color:var(--vanilla);
    fill:var(--vanilla);
}
.its-social-share-btn.is-copied {
    background:var(--g-bright, #8ED968);
    color:var(--teal-dk);
    border-color:var(--g-bright, #8ED968);
}
.its-social-share-btn.is-copied .its-social-share-label,
.its-social-share-btn.is-copied .its-social-share-icon {
    color:var(--teal-dk);
    fill:var(--teal-dk);
}

@media (max-width:540px) {
    .its-social-share-buttons {
        gap:8px;
    }
    .its-social-share-btn {
        padding:8px 12px;
        font-size:12px;
    }
    .its-social-share-icon {
        width:16px;
        height:16px;
    }
}

/* ============================================================================
 * Bouton like (coeur) — sur articles, sur cards, etc.
 * ============================================================================ */
.its-social-like-wrap {
    display:inline-block;
    margin-top:18px;
}
.its-social-like-btn {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    background:var(--white);
    color:var(--teal);
    border:1px solid var(--border);
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    text-decoration:none;
    transition:background .15s, color .15s, border-color .15s, transform .1s;
    line-height:1;
}
.its-social-like-btn:hover {
    background:#FFE4E6;
    border-color:#E11D48;
    color:#E11D48;
}
.its-social-like-btn.is-liked {
    background:#FFE4E6;
    border-color:#E11D48;
    color:#E11D48;
}
.its-social-like-btn.is-disabled {
    opacity:.6;
    cursor:default;
}
.its-social-like-btn.is-disabled:hover {
    background:var(--white);
    border-color:var(--border);
    color:var(--teal);
}
.its-social-like-btn.is-busy {
    opacity:.6;
    cursor:wait;
}
.its-social-like-btn.is-just-liked {
    animation:its-social-pop .35s ease-out;
}
.its-social-like-count {
    font-size:13px;
    font-weight:700;
    color:inherit;
    min-width:1ch;
}
@keyframes its-social-pop {
    0%   { transform:scale(1); }
    50%  { transform:scale(1.18); }
    100% { transform:scale(1); }
}

/* ============================================================================
 * Notifications
 * ============================================================================ */
.its-social-notifs-badge {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    color:inherit;
    text-decoration:none;
    font-size:18px;
}
.its-social-notifs-badge.has-unread {
    color:var(--g-bright, #8ED968);
}
.its-social-notifs-badge-count {
    position:absolute;
    top:-2px;
    right:-2px;
    min-width:18px;
    height:18px;
    padding:0 5px;
    background:var(--red);
    color:#fff;
    font-size:10px;
    font-weight:800;
    border-radius:9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}
.its-social-notifs-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.its-social-notif {
    background:var(--white);
    border:1px solid var(--border);
    padding:12px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    font-size:14px;
    color:var(--teal);
}
.its-social-notif.is-unread {
    background:var(--vanilla);
    border-color:var(--teal);
}
.its-social-notif-dot {
    display:inline-block;
    width:8px;
    height:8px;
    clip-path:circle(50%);
    background:var(--g-bright, #8ED968);
    flex-shrink:0;
    margin-right:8px;
}
.its-social-notif a {
    color:inherit;
    text-decoration:none;
    flex:1;
}
.its-social-notif a:hover { text-decoration:underline; }
.its-social-notif-when {
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.5px;
    flex-shrink:0;
}

/* ---------- Responsive ---------- */
@media (max-width:680px) {
    .its-social-row {
        flex-wrap:wrap;
        padding:12px 14px;
    }
    .its-social-row-info {
        flex-basis:calc(100% - 62px);
    }
    .its-social-action-btn {
        margin-left:62px;
        margin-top:8px;
    }
    .its-social-fieldset {
        padding:14px 16px;
    }

    /* Page profil — mobile */
    .its-social-profile-cover {
        height:140px;
    }
    .its-social-profile-cover .its-social-profile-avatar-ring {
        bottom:-32px;
        left:16px;
        padding:4px;
    }
    .its-social-profile-cover .its-social-profile-avatar {
        width:88px;
        height:88px;
    }
    .its-social-profile-header {
        padding:48px 18px 16px 18px;
        gap:10px;
    }
    .its-social-profile-name {
        font-size:20px;
    }
    .its-social-profile-bio-section,
    .its-social-profile-section {
        padding:16px 18px;
    }
    .its-social-profile-stats {
        grid-template-columns:repeat(2, 1fr);
    }
    .its-social-stat {
        border-bottom:1px solid var(--border);
    }
    .its-social-stat:nth-last-child(-n+2):not(:last-child) {
        border-bottom:none;
    }
    .its-social-stat:nth-child(2n) {
        border-right:none;
    }
    .its-social-timeline-item {
        flex-wrap:wrap;
    }
    .its-social-timeline-thumb {
        width:80px;
        height:60px;
    }
}

/* ---------- Réseaux sociaux (grille 2 cols desktop / 1 col mobile) ---------- */
.its-social-socials-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:.75rem 1rem;
    margin-bottom:1rem;
}
.its-social-socials-row {
    display:flex;
    flex-direction:column;
    gap:.25rem;
    margin-bottom:0;
}
.its-social-socials-label {
    font-size:.85rem;
    font-weight:600;
    color:var(--text-muted, #555);
}
@media (max-width: 640px) {
    .its-social-socials-grid {
        grid-template-columns:1fr;
    }
}