/* =============================================================================
 * 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é (teal) 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(--teal, #1C3D34);
    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:0;
    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;
    object-fit:cover;
    flex-shrink:0;
    background:var(--vanilla);
}
.its-social-row-link:hover .its-social-avatar {
    box-shadow:0 0 0 2px var(--teal, #1C3D34);
}
.its-social-avatar-fallback {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#E11D48;
    font-size:20px;
}
.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:none;
    letter-spacing:0;
    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:none;
    letter-spacing:0;
    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:var(--sage-lt, #D7EAE2);
    color:var(--teal, #1C3D34);
    border-left:3px solid var(--teal, #1C3D34);
}
.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:none;
    font-weight:700;
}
.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(--sage, #ABC8A2) 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);
    z-index:2;
    line-height:0;     /* evite l'espace fantome inline-block */
}
.its-social-profile-cover .its-social-profile-avatar {
    width:140px;
    height:140px;
    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:none;
    letter-spacing:0;
}
.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:none;
    letter-spacing:0;
    color:var(--muted);
    margin-top:6px;
}
.its-social-stat.is-points .its-social-stat-value {
    color:var(--teal, #1C3D34);
}

/* 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:none;
    letter-spacing:0;
    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:none;
    letter-spacing:0;
}

/* ============================================================================
 * 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:none;
    letter-spacing:0;
}
.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(--sage, #ABC8A2); }
.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;
    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:0;
    background:var(--teal, #074444);
    color:var(--vanilla, #F2E5D2);
    font-size:20px;
    font-weight:800;
    line-height:1;
    text-transform:none;
    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:none;
    letter-spacing:0;
    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:var(--sage, #ABC8A2); color:var(--teal-dk, #172713); }
.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:none;
    letter-spacing:0;
    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;
    object-fit:cover;
    background:var(--vanilla);
    transition:box-shadow .15s;
}
.its-social-directory-card a:hover img {
    box-shadow:0 0 0 3px var(--teal, #1C3D34);
}
.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;
    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 {
    margin-bottom:14px;
    padding-bottom:10px;
    border-bottom:1px solid var(--border);
}
/* Pastilles : module .its-pastille (itsrugby-common.css). */
.its-social-timeline-tab-icon {
    font-size:14px;
    line-height:1;
}
.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:none;
    letter-spacing:0;
    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:0;
    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:0;
    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:0;
    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:0;
    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:0;
    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:0;
    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:0;
    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:0;
    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(--sage, #ABC8A2); }
.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:none;
    letter-spacing:0;
    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:var(--sage, #ABC8A2); color:var(--teal-dk, #172713); }
.is-comment  .its-social-timeline-label { background:#DBEAFE; color:#1E3A8A; }
.its-social-timeline-when {
    font-size:11px;
    color:#5A5A5A;
    text-transform:none;
    letter-spacing:0;
}
.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(--sage, #ABC8A2);
    color:var(--teal-dk);
    border-color:var(--sage, #ABC8A2);
}
.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(--teal, #1C3D34);
}
.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:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}
/* Liste des notifications (page et panneau de la cloche) : its-social-bell.css. */

/* ---------- Responsive ---------- */
@media (max-width:680px) {
    .its-social-row {
        flex-wrap:wrap;
        padding:12px 14px;
    }
    .its-social-row-info {
        flex-basis:calc(100% - 62px);
    }
    /* Décalage sous l'avatar : LIGNES de liste uniquement. Sans le préfixe
       .its-social-row, le bouton Follow du hero des fiches prenait aussi
       62px de marge gauche et sortait de l'axe centré. */
    .its-social-row .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;
    }
}

/* ==========================================================================
   Fil du réseau façon réseau social (Félix, 14/10) : carte blanche nette,
   avatar rond, « a publié, il y a 1 jour », photo en grand, J'aime avec cœur.
   Angles droits partout, avatars compris (charte, Félix 15/10).
   ========================================================================== */
.its-social-timeline-filter { flex-wrap: nowrap; margin: 0 0 14px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 0; }
.its-social-timeline-filter::-webkit-scrollbar { display: none; }
.its-social-timeline-tab { flex: 0 0 auto; }
.its-social-feed { display: flex; flex-direction: column; gap: 12px; }
.its-social-feed-item { margin: 0; padding: 0; border: 1px solid rgba(28, 61, 52, .1); border-left: 1px solid rgba(28, 61, 52, .1); background: #fff; box-shadow: none; }
.its-social-feed-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; }
.its-social-feed-avatar,
.its-social-feed-avatar img,
.its-social-feed-avatar-fallback { width: 40px; height: 40px; flex-shrink: 0; object-fit: cover; }
.its-social-feed-avatar-fallback { display: flex; align-items: center; justify-content: center; background: var(--sage-lt, #d7eae2); color: var(--teal, #1c3d34); font-weight: 800; }
.its-social-feed-name { font-size: 15px; font-weight: 800; line-height: 1.25; }
.its-social-feed-sub { font-size: 13px; color: rgba(28, 61, 52, .6); }
.its-social-feed-content { display: block; padding: 10px 16px 12px; }
.its-social-feed-title { margin: 0 0 4px; font-size: 17px; line-height: 1.3; }
.its-social-feed-excerpt { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(28, 61, 52, .8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.its-social-feed-photo { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vanilla, #f2e5d2); }
.its-social-feed-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.its-social-feed-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; border-top: 1px solid rgba(28, 61, 52, .08); background: #fff; }
.its-social-feed-open { font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--teal, #1c3d34); }
.its-social-feed-footer .its-social-like-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: transparent; color: var(--teal, #1c3d34); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.its-social-feed-footer .its-social-like-btn::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.2C1.2 8.6 3.2 5 6.6 5c2 0 3.4 1.1 5.4 3.2C14 6.1 15.4 5 17.4 5c3.4 0 5.4 3.6 4.1 6.8C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.2C1.2 8.6 3.2 5 6.6 5c2 0 3.4 1.1 5.4 3.2C14 6.1 15.4 5 17.4 5c3.4 0 5.4 3.6 4.1 6.8C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; }
.its-social-feed-footer .its-social-like-btn.is-liked::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.2C1.2 8.6 3.2 5 6.6 5c2 0 3.4 1.1 5.4 3.2C14 6.1 15.4 5 17.4 5c3.4 0 5.4 3.6 4.1 6.8C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.2C1.2 8.6 3.2 5 6.6 5c2 0 3.4 1.1 5.4 3.2C14 6.1 15.4 5 17.4 5c3.4 0 5.4 3.6 4.1 6.8C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); }
.its-social-feed-footer .its-social-like-count { font-weight: 700; opacity: .7; }

/* Mode cinéma des publications à photo : image plein cadre, voile teal, titre vanille. */
.its-social-feed-cine { position: relative; display: block; margin-top: 12px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); text-decoration: none; }
.its-social-feed-cine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.its-social-feed-cine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 61, 52, 0) 30%, rgba(28, 61, 52, .75) 58%, rgba(28, 61, 52, .97) 100%); }
.its-social-feed-cine-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px; }
.its-social-feed-cine .its-social-feed-title { margin: 0; color: var(--vanilla, #f2e5d2); font-size: 20px; font-weight: 900; line-height: 1.2; }
.its-social-feed-cine .its-social-feed-excerpt { color: var(--vanilla, #f2e5d2); opacity: .85; font-size: 14px; }
.its-social-feed-cine:focus-visible { outline: 3px solid var(--teal, #1c3d34); outline-offset: 2px; }
@media (min-width: 769px) { .its-social-feed-cine { aspect-ratio: 16 / 9; } }
/* Auteur posé en haut de la photo (Félix, 15/10). */
.its-social-feed-item.has-cine { position: relative; }
.its-social-feed-item.has-cine .its-social-feed-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 14px 16px 28px; background: linear-gradient(180deg, rgba(28, 61, 52, .75) 0%, rgba(28, 61, 52, 0) 100%); }
.its-social-feed-item.has-cine .its-social-feed-name,
.its-social-feed-item.has-cine .its-social-feed-name a,
.its-social-feed-item.has-cine .its-social-feed-sub { color: var(--vanilla, #f2e5d2); }
.its-social-feed-item.has-cine .its-social-feed-name a span { color: var(--vanilla, #f2e5d2); }
.its-social-feed-item.has-cine .its-social-feed-cine { margin-top: 0; }
.its-social-feed-cine-meta { color: var(--sage, #abc8a2); font-size: 13px; }
.its-social-feed-cine-meta strong { color: var(--vanilla, #f2e5d2); font-weight: 700; }
/* Photo : l'auteur et la date sont sous le titre, plus d'en-tête au-dessus (pas de doublon). */
.its-social-feed-item.has-cine .its-social-feed-head { display: none; }

/* Carte profil en tête du fil (its_social_feed_profile_card). */
.its-social-me { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 4px 12px; margin: 0 0 18px; padding: 0 0 14px; background: transparent; border: 0; border-bottom: 1px solid rgba(28, 61, 52, .08) /* plus de cadre dans le cadre de l'espace (Félix 22/10) */; border-top: 3px solid var(--teal, #1c3d34); }
.its-social-me-ava { width: 56px; height: 56px; object-fit: cover; background: var(--sage-lt, #d7eae2); }
.its-social-me-name { margin: 0; font-size: 17px; font-weight: 900; color: var(--teal, #1c3d34); }
.its-social-me-role { margin: 0; font-size: 13px; color: rgba(28, 61, 52, .6); }
.its-social-me-link { display: inline-block; margin-top: 2px; font-size: 13px; font-weight: 700; }
.its-social-me-link a { color: var(--teal, #1c3d34); }
.its-social-me-stats { grid-column: 1 / -1; display: flex; gap: 0; margin: 10px 0 0; padding: 10px 0 0; list-style: none; border-top: 1px solid rgba(28, 61, 52, .08); }
.its-social-me-stats li { flex: 1; text-align: center; font-size: 12px; color: rgba(28, 61, 52, .65); }
.its-social-me-stats strong { display: block; font-size: 18px; font-weight: 900; color: var(--teal, #1c3d34); }

/* Bloc « À suivre » glissé dans le fil (its_social_feed_suggestions). */
.its-social-suggest { padding: 14px 16px 6px; background: #fff; border: 1px solid rgba(28, 61, 52, .1); }
.its-social-suggest-t { margin: 0 0 6px; font-size: 16px; font-weight: 900; color: var(--teal, #1c3d34); }
.its-social-suggest ul { margin: 0; padding: 0; list-style: none; }
.its-social-suggest li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(28, 61, 52, .08); }
.its-social-suggest li:first-child { border-top: 0; }
.its-social-suggest-ava { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; object-fit: contain; background: var(--vanilla, #f2e5d2); color: var(--teal, #1c3d34); font-weight: 800; }
.its-social-suggest-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.its-social-suggest-nom { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.its-social-suggest-nom a { color: var(--teal, #1c3d34); }
.its-social-suggest-sous { font-size: 12.5px; color: rgba(28, 61, 52, .6); }
.its-social-suggest .its-page-follow-btn { flex-shrink: 0; padding: 6px 14px; border: 1px solid var(--teal, #1c3d34); background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); font-size: 13px; font-weight: 800; text-transform: none; letter-spacing: 0; }
.its-social-suggest .its-page-follow-btn.is-following { background: transparent; color: var(--teal, #1c3d34); }
/* Plus de liseré de couleur par type d'activité : toutes les cartes du fil se ressemblent. */
.its-social-feed .its-social-feed-item { border-left: 1px solid rgba(28, 61, 52, .1); }

/* Profil public et réglages : pas de lien souligné, pas de libellés en capitales (Félix, 15/10). */
.its-social-profile-section .its-link,
.its-account-section-help .its-link { text-decoration: none; font-weight: 700; }
.its-prof-v2 .arch-hero .hero-info-label { font-size: 12px; text-transform: none; letter-spacing: 0; }
.its-profile-public-banner__label { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* Notifications dans l'espace : liste façon messagerie, puis réglages (Félix, 15/10). */
.its-notif-list { margin: 0 0 24px; padding: 0; list-style: none; }
.its-notif { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(28, 61, 52, .08); }
.its-notif-ava { flex-shrink: 0; width: 40px; height: 40px; object-fit: cover; background: var(--sage-lt, #d7eae2); }
.its-notif-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--teal, #1c3d34); }
.its-notif-txt a { color: var(--teal, #1c3d34); }
.its-notif-txt time { font-size: 12px; color: rgba(28, 61, 52, .55); }
.its-notif.is-unread .its-notif-txt { font-weight: 700; }
.its-notif-dot { flex-shrink: 0; width: 10px; height: 10px; background: var(--teal, #1c3d34); }
.its-notif-empty { margin: 0 0 24px; padding: 16px; background: var(--vanilla, #f2e5d2); color: var(--teal, #1c3d34); font-size: 14px; }
.its-notif-reglages { margin: 0 0 4px; font-size: 16px; font-weight: 900; color: var(--teal, #1c3d34); }
.its-social-fieldset legend { text-transform: none; letter-spacing: 0; font-size: 14px; }

/* Annuaire des membres dans l'espace : liste compacte comme « À suivre » (Félix, 15/10). */
.its-account-content .its-directory-main { padding: 0; border: 0; background: transparent; box-shadow: none; }
.its-account-content .its-people-grid { display: flex; flex-direction: column; gap: 0; }
.its-account-content .its-people-card { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(28, 61, 52, .08); background: transparent; box-shadow: none; }
.its-account-content .its-people-card__media { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--sage-lt, #d7eae2); color: var(--teal, #1c3d34); font-size: 15px; font-weight: 800; }
.its-account-content .its-people-card__media img { width: 100%; height: 100%; object-fit: cover; }
.its-account-content .its-people-card__body { flex: 1; min-width: 0; padding: 0; }
.its-account-content .its-people-card__name { font-size: 15px; font-weight: 800; }
.its-account-content .its-people-card__role { font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: rgba(28, 61, 52, .65); }
.its-account-content .its-people-card__sub { font-size: 12px; color: rgba(28, 61, 52, .5); }
.its-account-content .its-people-card__cta { flex-shrink: 0; margin: 0; padding: 0; border: 0; }
.its-account-content .its-people-card__cta .its-page-follow-btn { width: auto; padding: 6px 14px; border: 1px solid var(--teal, #1c3d34); background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); font-size: 13px; font-weight: 800; text-transform: none; letter-spacing: 0; }
.its-account-content .its-people-card__cta .its-page-follow-btn.is-following { background: transparent; color: var(--teal, #1c3d34); }
.its-account-content .its-directory-layout { border: 0; background: transparent; }
/* Profil : chiffres du haut sur une seule ligne, largeurs égales (Félix, 15/10). */
.its-prof-v2 .arch-hero .comp-hero-infos { display: flex; flex-wrap: nowrap; gap: 10px; }
.its-prof-v2 .arch-hero .comp-hero-infos .hero-info-item { flex: 1 1 0; min-width: 0; }
.its-prof-v2 .arch-hero .hero-info-label { font-size: 11px; line-height: 1.2; }

/* Profil public (Félix, 15/10) : bio dans le haut de page, corps à la largeur du
   haut (même .container), articles en grille de petites cartes cinéma. */
.its-prof-v2 .arch-hero .arch-hero__bio { max-width: 640px; color: var(--vanilla, #f2e5d2); font-size: 14px; font-weight: 500; line-height: 1.55; }
.its-prof-v2 .arch-hero .arch-hero__desc { font-weight: 500; }
.its-prof-v2 .arch-hero .arch-hero__bio p { margin: 0 0 6px; }
.its-prof-v2 .arch-hero .arch-hero__bio p:last-child { margin-bottom: 0; }
.its-prof-v2 .arch-hero .arch-hero__bio a { color: var(--vanilla, #f2e5d2); font-weight: 700; }
.its-prof-v2 .its-prof { max-width: none; margin: 0; background: transparent; border: 0; box-shadow: none; }
.its-prof-v2 .its-prof .its-social-profile-section { padding: 20px 0; background: transparent; }
.its-prof-v2 .its-social-profile-feed, .its-social-feed--grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.its-prof-v2 .its-social-profile-feed > *, .its-social-feed--grille > * { min-width: 0; margin: 0; }
.its-prof-v2 .its-social-profile-feed .its-social-feed-item, .its-social-feed--grille .its-social-feed-item { padding: 0; background: #fff; border: 1px solid rgba(28, 61, 52, .1); }
/* Mêmes réglages que les cartes cinéma de la home (.hd-couv--cine). */
.its-prof-v2 .its-social-profile-feed .its-social-feed-cine, .its-social-feed--grille .its-social-feed-cine { aspect-ratio: 3 / 4; }
.its-prof-v2 .its-social-profile-feed .its-social-feed-cine img, .its-social-feed--grille .its-social-feed-cine img { object-position: 50% 22%; transition: transform .5s ease; }
.its-prof-v2 .its-social-profile-feed .its-social-feed-cine:hover img, .its-social-feed--grille .its-social-feed-cine:hover img { transform: scale(1.04); }
/* Voile remonté pour que le titre ne mange pas la photo (Félix, 16/10). */
.its-prof-v2 .its-social-profile-feed .its-social-feed-cine::after, .its-social-feed--grille .its-social-feed-cine::after { background: linear-gradient(to top, rgba(28, 61, 52, .97) 0%, rgba(28, 61, 52, .92) 42%, rgba(28, 61, 52, .6) 64%, rgba(28, 61, 52, 0) 88%); }
.its-prof-v2 .its-social-profile-feed .its-social-feed-cine-txt, .its-social-feed--grille .its-social-feed-cine-txt { gap: 6px; padding: 18px; text-shadow: 0 1px 10px rgba(28, 61, 52, .8); }
.its-prof-v2 .its-social-profile-feed .its-social-feed-cine .its-social-feed-title, .its-social-feed--grille .its-social-feed-cine .its-social-feed-title { font-size: 18px; font-weight: 800; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 768px) {
  /* Deux cartes par ligne sur téléphone : une seule en portrait prenait tout l'écran. */
  .its-prof-v2 .its-social-profile-feed, .its-social-feed--grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .its-prof-v2 .its-social-profile-feed .its-social-feed-cine-txt, .its-social-feed--grille .its-social-feed-cine-txt { padding: 10px; gap: 4px; }
  .its-prof-v2 .its-social-profile-feed .its-social-feed-cine .its-social-feed-title, .its-social-feed--grille .its-social-feed-cine .its-social-feed-title { font-size: 14px; }
  .its-prof-v2 .its-social-profile-feed .its-social-feed-cine-meta, .its-social-feed--grille .its-social-feed-cine-meta { font-size: 11px; }
  .its-prof-v2 .its-social-profile-feed .its-social-feed-footer, .its-social-feed--grille .its-social-feed-footer { padding: 6px 8px; }
  .its-prof-v2 .its-social-profile-feed .its-social-feed-open, .its-social-feed--grille .its-social-feed-open { display: none; } /* la carte est déjà le lien */
}
.its-prof-v2 .its-social-profile-feed .its-social-feed-cine-meta, .its-social-feed--grille .its-social-feed-cine-meta { font-size: 13px; }
.its-prof-v2 .its-social-profile-feed .its-social-feed-footer, .its-social-feed--grille .its-social-feed-footer { padding: 8px 12px; }
/* Photo du membre en grand dans le haut : cadrer sur le visage. */
.its-prof-v2 .arch-hero__media img { object-position: 50% 30%; }
/* Haut de profil plus grand pour voir le visage entier (Félix, 15/10). */
/* Haut de profil : photo à droite (avatar 400 px, flou en pleine largeur), plus
   haut pour voir le visage ; typographie du haut cinéma de la home (Félix, 15/10). */
@media (min-width: 900px) {
  .its-prof-v2 .arch-hero:not(.arch-hero--nophoto) { min-height: 440px; }
  .its-prof-v2 .arch-hero h1.arch-hero__title { font-size: clamp(28px, 4.2vw, 50px); font-weight: 800; letter-spacing: -1px; }
  .its-prof-v2 .arch-hero .arch-hero__desc { font-size: 17px; }
  .its-prof-v2 .arch-hero .arch-hero__bio { font-size: 15px; }
}
/* Blocage depuis un profil (16/10) : bouton discret à côté de Suivre, message à la place de l'activité. */
.its-prof-v2 .arch-hero .arch-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.arch-hero .arch-hero__btn--discret { background: transparent; border: 1px solid rgba(242, 229, 210, .45); color: var(--vanilla, #f2e5d2); font-weight: 600; }
.its-prof-v2 .its-prof-bloque { margin: 24px 0; padding: 16px; background: var(--sage-lt, #d7eae2); color: var(--teal, #1c3d34); font-size: 15px; }

/* Fenêtre « Signaler » (lot 1, 16/10). */
.its-report-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 0; overflow: auto; background: var(--white, #fff); color: var(--teal, #1c3d34); }
.its-report-dialog::backdrop { background: rgba(28, 61, 52, .55); }
.its-report-form { display: flex; flex-direction: column; gap: 12px; padding: 20px; margin: 0; }
.its-report-title { margin: 0; font-size: 20px; font-weight: 800; }
.its-report-help { margin: 0; font-size: 14px; color: rgba(28, 61, 52, .75); }
.its-report-reasons { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.its-report-reasons legend { margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.its-report-reason { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--vanilla, #f2e5d2); font-size: 15px; cursor: pointer; }
.its-report-reason input { accent-color: var(--teal, #1c3d34); }
.its-report-details-label { font-size: 14px; font-weight: 700; }
.its-report-details { width: 100%; padding: 10px; border: 1px solid rgba(28, 61, 52, .25); font: inherit; font-size: 15px; resize: vertical; }
.its-report-msg { margin: 0; min-height: 1.4em; font-size: 14px; font-weight: 700; }
.its-report-actions { display: flex; justify-content: flex-end; gap: 10px; }
.its-report-cancel, .its-report-send { padding: 10px 16px; border: 1px solid var(--teal, #1c3d34); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.its-report-cancel { background: transparent; color: var(--teal, #1c3d34); }
.its-report-send { background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); }
.its-report-send:disabled { opacity: .6; cursor: default; }
.its-report-cancel:focus-visible, .its-report-send:focus-visible, .its-report-reason:focus-within { outline: 3px solid var(--sage, #abc8a2); outline-offset: 2px; }
.its-social-report-btn { background: transparent; border: 0; padding: 4px 0; color: rgba(28, 61, 52, .6); font: inherit; font-size: 13px; cursor: pointer; }

/* ===== Publications de membres (lot 2, 16/10) ===== */
.its-composer { margin: 0 0 16px; padding: 14px 16px; background: var(--white, #fff); border: 1px solid rgba(28, 61, 52, .12); }
.its-composer-row { display: flex; gap: 12px; align-items: flex-start; }
.its-composer textarea { flex: 1; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid rgba(28, 61, 52, .2); background: var(--vanilla-lt, #f8f1e6); color: var(--teal, #1c3d34); font: inherit; font-size: 15px; line-height: 1.45; resize: none; }
.its-composer textarea:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 1px; }
.its-composer-previews { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 56px; }
.its-composer-previews:empty { display: none; }
.its-composer-preview { position: relative; width: 88px; height: 88px; }
.its-composer-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.its-composer-preview button { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0; border: 0; background: rgba(28, 61, 52, .85); color: var(--vanilla, #f2e5d2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.its-composer-bar { display: flex; align-items: center; gap: 12px; margin: 10px 0 0 56px; }
.its-composer-photo { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid rgba(28, 61, 52, .25); color: var(--teal, #1c3d34); font-size: 14px; font-weight: 700; cursor: pointer; }
.its-composer-photo::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M21 17l-5-5-9 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='14'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M21 17l-5-5-9 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.its-composer-photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.its-composer-photo:focus-within { outline: 3px solid var(--sage, #abc8a2); outline-offset: 2px; }
.its-composer-count { margin-left: auto; font-size: 13px; color: rgba(28, 61, 52, .6); }
.its-composer-send { padding: 9px 18px; border: 0; background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.its-composer-count:empty + .its-composer-send { margin-left: auto; }
.its-composer-send:disabled { opacity: .6; cursor: default; }
.its-composer-send:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 2px; }
.its-composer-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0 0 56px; color: var(--teal, #1c3d34); font-size: 14px; font-weight: 700; }
.its-composer-alert input { width: 18px; height: 18px; margin: 0; accent-color: var(--teal, #1c3d34); cursor: pointer; }
.its-composer-alert input:disabled, .its-composer-alert input:disabled + label { opacity: .55; cursor: default; }
.its-composer-alert label { cursor: pointer; }
.its-composer-alert input:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 2px; }
.its-composer-alert-aide { flex: 1 0 100%; margin: 0; font-size: 13px; font-weight: 400; color: rgba(28, 61, 52, .75); }
.its-composer-msg { margin: 8px 0 0 56px; min-height: 0; font-size: 13px; font-weight: 700; color: var(--teal, #1c3d34); }
.its-composer-msg:empty { display: none; }

.its-social-feed-post { margin: 0 0 16px; }
.its-post { background: var(--white, #fff); border: 1px solid rgba(28, 61, 52, .12); color: var(--teal, #1c3d34); }
.its-prof-post-list .its-post { margin: 0 0 16px; }
.its-post-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 0; }
.its-ugc-author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.its-ugc-ava { flex-shrink: 0; width: 44px; height: 44px; object-fit: cover; background: var(--sage-lt, #d7eae2); }
.its-ugc-id { display: flex; flex-direction: column; min-width: 0; }
.its-ugc-name, .its-ugc-name a { font-size: 15px; font-weight: 800; color: var(--teal, #1c3d34); text-decoration: none; }
.its-ugc-sub { font-size: 12.5px; color: rgba(28, 61, 52, .6); }
.its-ugc-sub a { color: inherit; text-decoration: none; }
.its-ugc-acts { display: flex; gap: 12px; flex-shrink: 0; }
.its-ugc-act { padding: 2px 0; border: 0; background: transparent; color: rgba(28, 61, 52, .6); font: inherit; font-size: 13px; cursor: pointer; }
.its-ugc-act:hover, .its-ugc-act:focus-visible { color: var(--teal, #1c3d34); }
.its-post-flag { margin: 10px 16px 0; padding: 8px 10px; background: var(--vanilla, #f2e5d2); font-size: 13px; font-weight: 700; }
.its-post-body { padding: 10px 16px 0; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.its-ugc-link a, .its-ugc-mention a { color: var(--teal, #1c3d34); font-weight: 700; text-decoration: none; }
.its-ugc-link a:hover, .its-ugc-mention a:hover { background: var(--sage-lt, #d7eae2); }
.its-post-media { display: grid; width: 100%; gap: 2px; margin: 12px 0 0; overflow: hidden; }
/* Hauteur bornée par le rapport du bloc : 1 photo garde le sien, 2 à 4 remplissent un cadre fixe. */
.its-post-media.is-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; }
.its-post-media.is-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
.its-post-media.is-3 .its-post-photo:first-child { grid-row: span 2; }
.its-post-media.is-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / 1; }
.its-post-media:not(.is-1) { max-height: 440px; }
.its-post-photo { display: block; min-height: 0; overflow: hidden; background: var(--sage-lt, #d7eae2); }
.its-post-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.its-post-media.is-1 .its-post-photo img { height: auto; max-height: 560px; }
.its-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(28, 61, 52, .08); }
.its-post-foot .its-social-like-wrap { margin: 0; }
.its-post-ccount { font-size: 13px; color: rgba(28, 61, 52, .6); }
.its-post-comments { padding: 4px 16px 14px; }
.its-post-more { display: inline-block; margin: 8px 0 0; }
.its-post-more a { font-size: 13.5px; font-weight: 700; color: var(--teal, #1c3d34); text-decoration: none; }
.its-post-comment-list { margin: 0; padding: 0; list-style: none; }
.its-post-comment { padding: 10px 0 0; }
.its-post-comment .its-ugc-ava { width: 32px; height: 32px; }
.its-post-comment .its-ugc-name, .its-post-comment .its-ugc-name a { font-size: 14px; }
.its-post-comment-body { margin: 4px 0 0 44px; padding: 8px 10px; background: var(--vanilla-lt, #f8f1e6); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.its-post-comment .its-ugc-acts { margin: 4px 0 0 44px; }
.its-post-comment-form { display: flex; gap: 8px; margin: 12px 0 0; }
.its-post-comment-form textarea { flex: 1; min-width: 0; min-height: 40px; padding: 9px 10px; border: 1px solid rgba(28, 61, 52, .2); background: var(--white, #fff); color: var(--teal, #1c3d34); font: inherit; font-size: 14.5px; resize: none; }
.its-post-comment-form button { padding: 0 14px; border: 0; background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.its-post-comment-form textarea:focus-visible, .its-post-comment-form button:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 1px; }
.its-post-single { max-width: 720px; padding-top: 16px; padding-bottom: 40px; }
@media (max-width: 600px) {
    .its-composer { padding: 12px; }
    .its-composer .its-ugc-ava { display: none; }
    .its-composer-previews, .its-composer-bar, .its-composer-alert, .its-composer-msg { margin-left: 0; }
    /* Photo, Sondage, Mes pronos sur une ligne, Publier pleine largeur dessous (Félix 18/10 : Publier sortait de l'écran). */
    .its-composer-bar { flex-wrap: wrap; gap: 8px; }
    .its-composer-photo { padding: 8px 10px; white-space: nowrap; }
    .its-composer-bar .its-composer-send { flex: 1 0 100%; margin-left: 0; }
    .its-post-head, .its-post-body, .its-post-foot, .its-post-comments { padding-left: 12px; padding-right: 12px; }
}
/* Étiquettes réservées aux lecteurs d'écran (le thème ne définit pas la classe WordPress). */
.its-composer .screen-reader-text, .its-post-comment-form .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ===== Groupes (lot 4, 16/10) ===== */
.its-ugc-body { padding-top: 20px; padding-bottom: 40px; }
.its-ugc-body.its-group-body > * { max-width: 760px; }
.its-ugc-page .arch-hero .arch-hero__ava { object-fit: contain; background: var(--white, #fff); padding: 8px; }
.its-group-list { margin: 0 0 20px; padding: 0; list-style: none; }
.its-group-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(28, 61, 52, .08); }
.its-group-logo { flex-shrink: 0; width: 48px; height: 48px; object-fit: contain; background: var(--white, #fff); border: 1px solid rgba(28, 61, 52, .1); }
.its-group-id { display: flex; flex-direction: column; min-width: 0; }
.its-group-name a { font-size: 15px; font-weight: 800; color: var(--teal, #1c3d34); text-decoration: none; }
.its-group-sub { font-size: 12.5px; color: rgba(28, 61, 52, .6); }
.its-group-all a, .its-group-link a, .its-ugc-group a { font-weight: 700; color: var(--teal, #1c3d34); text-decoration: none; }
.its-group-link { display: inline-flex; align-items: center; margin-left: 12px; font-size: 14px; }

/* ===== Événements (lot 5, 16/10) ===== */
.its-event-list { margin: 0 0 20px; padding: 0; list-style: none; }
.its-event-card { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(28, 61, 52, .08); }
.its-event-date { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); }
.its-event-day { font-size: 20px; font-weight: 900; line-height: 1; }
.its-event-month { font-size: 12px; font-weight: 700; }
.its-event-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.its-event-title a { font-size: 15.5px; font-weight: 800; color: var(--teal, #1c3d34); text-decoration: none; }
.its-event-sub { font-size: 13px; color: rgba(28, 61, 52, .65); }
.its-event-place a, .its-event-new a { font-weight: 700; color: var(--teal, #1c3d34); text-decoration: none; }
.its-event-flag { flex-shrink: 0; padding: 3px 8px; background: var(--vanilla, #f2e5d2); color: var(--teal, #1c3d34); font-size: 12px; font-weight: 800; }
.its-event-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 16px; padding: 14px 16px; background: var(--white, #fff); border: 1px solid rgba(28, 61, 52, .12); }
.its-event-facts dt { font-size: 13px; font-weight: 700; color: rgba(28, 61, 52, .65); }
.its-event-facts dd { margin: 0; font-size: 15px; color: var(--teal, #1c3d34); }
.its-event-desc { margin: 0 0 20px; padding: 0; }
.its-event-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.its-event-form { display: flex; flex-direction: column; gap: 6px; max-width: 560px; padding: 18px; background: var(--white, #fff); border: 1px solid rgba(28, 61, 52, .12); }
.its-event-form label, .its-event-kinds legend { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--teal, #1c3d34); }
.its-event-form input[type="text"], .its-event-form input[type="datetime-local"], .its-event-form select, .its-event-form textarea { padding: 10px 12px; border: 1px solid rgba(28, 61, 52, .25); background: var(--white, #fff); color: var(--teal, #1c3d34); font: inherit; font-size: 15px; }
.its-event-form input:focus-visible, .its-event-form select:focus-visible, .its-event-form textarea:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 1px; }
.its-event-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.its-event-kinds label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 12px; background: var(--vanilla, #f2e5d2); font-weight: 600; cursor: pointer; }
.its-event-kinds input { accent-color: var(--teal, #1c3d34); }
.its-event-form .its-composer-send { align-self: flex-start; margin-top: 12px; }
.its-event-form .its-composer-msg { margin-left: 0; }
.its-event-help { margin: 0; font-size: 14px; font-weight: 700; color: var(--teal, #1c3d34); }

/* Bouton-lien du haut de page : la zone cliquable couvre tout le bouton. */
.arch-hero .its-hero-link { position: relative; }
.arch-hero .its-hero-link a { color: inherit; text-decoration: none; }
.arch-hero .its-hero-link a::after { content: ""; position: absolute; inset: 0; }
.arch-hero .its-hero-link:focus-within { outline: 3px solid var(--sage, #abc8a2); outline-offset: 2px; }

/* Groupe : articles du club dans le fil, cartes cinéma comme la home (16/10). */
.its-club-post { margin: 0 0 16px; }
.its-club-post-cine { position: relative; display: block; aspect-ratio: 16 / 9; max-height: 380px; width: 100%; overflow: hidden; background: var(--teal, #1c3d34); text-decoration: none; }
.its-club-post-cine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .5s ease; }
.its-club-post-cine:hover img { transform: scale(1.03); }
.its-club-post-cine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 61, 52, .97) 0%, rgba(28, 61, 52, .9) 30%, rgba(28, 61, 52, .55) 52%, rgba(28, 61, 52, 0) 75%); }
.its-club-post-txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 18px; text-shadow: 0 1px 10px rgba(28, 61, 52, .8); }
.its-club-post-title { color: var(--vanilla, #f2e5d2); font-size: 20px; font-weight: 800; line-height: 1.2; }
.its-club-post-meta { color: var(--sage, #abc8a2); font-size: 13px; }
.its-club-post-meta strong { color: var(--vanilla, #f2e5d2); font-weight: 700; }
.its-club-post-cine:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 2px; }
@media (max-width: 600px) { .its-club-post-cine { aspect-ratio: 4 / 5; max-height: none; } .its-club-post-title { font-size: 17px; } .its-club-post-txt { padding: 14px; } }

/* Page de groupe : fil + colonne latérale (événements, membres), jamais de vide à droite. */
.its-group-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.its-group-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.its-aside-box { padding: 14px 16px; background: var(--white, #fff); border: 1px solid rgba(28, 61, 52, .12); }
.its-aside-title { margin: 0 0 8px; font-size: 16px; font-weight: 900; color: var(--teal, #1c3d34); }
.its-aside-box .its-event-list { margin: 0; }
.its-aside-box .its-event-card { padding: 8px 0; }
.its-aside-box .its-event-date { width: 44px; height: 44px; }
.its-aside-box .its-event-day { font-size: 16px; }
.its-aside-box .its-notif-empty { margin: 0; padding: 10px; font-size: 13px; }
.its-aside-people { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.its-aside-people .its-ugc-ava { width: 32px; height: 32px; }
@media (max-width: 1000px) {
    .its-group-layout { grid-template-columns: minmax(0, 1fr); }
    .its-group-aside { position: static; }
}

/* Haut de page du groupe : logo du club en grand sur la photo de son stade (comme la fiche, 16/10). */
.arch-hero .arch-hero__logo { position: absolute; z-index: 1; top: 50%; left: 50%; width: clamp(150px, 15vw, 220px); aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.arch-hero .arch-hero__logo img { position: static; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .45)); }
@media (max-width: 899px) { .arch-hero .arch-hero__logo { top: 38%; width: 30vw; } }
.its-next-match p { margin: 0 0 4px; }
.its-next-match-teams { font-size: 15.5px; font-weight: 800; color: var(--teal, #1c3d34); }
.its-next-match-when { font-size: 14px; color: var(--teal, #1c3d34); }
.its-next-match-comp { font-size: 12.5px; color: rgba(28, 61, 52, .6); }

/* ===== Page de groupe façon fiche du club (16/10) ===== */
.its-group-page-body { padding-bottom: 40px; }
.its-group-page-body .section { margin-top: 32px; }
/* Discussion sur toute la largeur, comme le fil des espaces. */
/* Invitation sur toute la largeur : texte à gauche, bouton à droite (pas de vide). */
.its-group-invite { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t b" "x b"; align-items: center; gap: 4px 24px; padding: 22px 24px; background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); }
.its-group-invite-title { grid-area: t; margin: 0; font-size: 20px; font-weight: 800; }
.its-group-invite-txt { grid-area: x; margin: 0; font-size: 15px; line-height: 1.5; color: rgba(242, 229, 210, .85); }
.its-group-invite .its-composer-send { grid-area: b; }
@media (max-width: 700px) { .its-group-invite { grid-template-columns: 1fr; grid-template-areas: "t" "x" "b"; } .its-group-invite .its-composer-send { justify-self: start; margin-top: 8px; } }
/* Actu du club : 4 cartes égales comme la fiche club (pas la grille de la fiche joueur). */
.its-group-page-body .media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.its-group-page-body .media-grid > * { grid-column: auto; grid-row: auto; width: auto; margin: 0; }
@media (max-width: 900px) { .its-group-page-body .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.its-group-invite .its-composer-send { background: var(--vanilla, #f2e5d2); color: var(--teal, #1c3d34); }
.its-group-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 700px) { .its-group-events { grid-template-columns: 1fr; } }
.its-group-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; margin: 0; padding: 0; list-style: none; }

/* Page de groupe : une colonne centrée, la discussion au centre (Félix, 16/10). */
.its-group-col { max-width: 720px; margin: 0 auto; padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.its-group-col > .its-prof-post-list > * { margin-bottom: 16px; }
.its-group-col .its-composer { margin: 0; }
.its-group-col .its-next-match { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h a" "t a" "w a"; align-items: center; column-gap: 16px; }
.its-group-col .its-next-match .its-aside-title { grid-area: h; margin: 0 0 2px; font-size: 13px; font-weight: 700; color: rgba(28, 61, 52, .6); }
.its-group-col .its-next-match-teams { grid-area: t; margin: 0; }
.its-group-col .its-next-match-when { grid-area: w; margin: 0; font-size: 13.5px; }
.its-group-col .its-next-match-comp { display: none; }
.its-group-col .its-next-match > p:last-child:not(.its-next-match-when):not(.its-next-match-teams) { grid-area: a; margin: 0; }

/* ===== Groupe façon groupe Facebook (16/10) ===== */
.its-gfb { background: var(--white, #fff); border-bottom: 1px solid rgba(28, 61, 52, .12); }
.its-gfb-cover { position: relative; height: clamp(180px, 26vw, 340px); overflow: hidden; background: var(--teal, #1c3d34); }
.its-gfb-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.its-gfb-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 61, 52, .55) 0%, rgba(28, 61, 52, .15) 45%, rgba(28, 61, 52, .25) 100%); }
.its-gfb-cover-logo { position: absolute; z-index: 1; left: 50%; top: 50%; width: clamp(110px, 12vw, 180px); aspect-ratio: 1; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.its-gfb-cover-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .45)); }
.its-gfb-back { position: absolute; z-index: 2; top: 12px; left: 12px; }
.its-gfb-back a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: rgba(28, 61, 52, .8); color: var(--vanilla, #f2e5d2); font-size: 13px; font-weight: 700; text-decoration: none; }
.its-gfb-back a::before { content: "‹"; font-size: 16px; line-height: 1; }
.its-gfb-head-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 14px; }
.its-gfb-title { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 900; line-height: 1.1; color: var(--teal, #1c3d34); }
.its-gfb-sub { margin: 4px 0 0; font-size: 14px; color: rgba(28, 61, 52, .65); }
.its-gfb-faces { display: flex; margin: 10px 0 0; padding: 0; list-style: none; }
.its-gfb-faces li { width: 32px; height: 32px; margin-right: -6px; border: 2px solid var(--white, #fff); background: var(--sage-lt, #d7eae2); overflow: hidden; }
.its-gfb-faces img { width: 100%; height: 100%; object-fit: cover; display: block; }
.its-gfb-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.its-gfb-btn { position: relative; display: inline-flex; align-items: center; padding: 9px 16px; border: 1px solid var(--teal, #1c3d34); background: var(--white, #fff); color: var(--teal, #1c3d34); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.its-gfb-btn.is-main { background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); }
.its-gfb-btn.is-main.is-following { background: var(--sage-lt, #d7eae2); color: var(--teal, #1c3d34); border-color: var(--sage-lt, #d7eae2); }
.its-gfb-btn a { color: inherit; text-decoration: none; }
.its-gfb-btn a::after { content: ""; position: absolute; inset: 0; }
.its-gfb-btn:focus-visible, .its-gfb-btn:focus-within { outline: 3px solid var(--sage, #abc8a2); outline-offset: 2px; }
.its-gfb-tabs { display: flex; gap: 4px; border-top: 1px solid rgba(28, 61, 52, .1); overflow-x: auto; scrollbar-width: none; }
.its-gfb-tab { flex-shrink: 0; padding: 14px 16px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: rgba(28, 61, 52, .65); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.its-gfb-tab.is-on { color: var(--teal, #1c3d34); border-bottom-color: var(--teal, #1c3d34); }
.its-gfb-tab:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: -3px; }
.its-gfb-body { padding-top: 20px; padding-bottom: 40px; }
.its-gfb-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; max-width: none; margin: 0; }
.its-gfb-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.its-gfb-main .its-composer { margin: 0; }
.its-gfb-main .its-prof-post-list > * { margin-bottom: 16px; }
.its-gfb-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.its-gfb-about { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; color: var(--teal, #1c3d34); }
.its-gfb-about-small { margin: 0; font-size: 13px; color: rgba(28, 61, 52, .6); }
.its-gfb-actu { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.its-gfb-actu .its-club-post { margin: 0; }
.its-gfb-actu .its-club-post-cine { aspect-ratio: 3 / 4; max-height: none; }
.its-gfb-actu .its-club-post-title { font-size: 16px; }
@media (max-width: 960px) {
    .its-gfb-cols { grid-template-columns: minmax(0, 1fr); }
    .its-gfb-aside { position: static; }
}

/* Groupe aux couleurs du site : barre d'onglets de la fiche, onglets en <button>. */
.its-gfb-nav .nav-int-items { justify-content: flex-start; }
.its-gfb-nav button.nav-int-item { border: 0; border-bottom: 3px solid transparent; background: transparent; font: inherit; cursor: pointer; }
.its-gfb-nav button.nav-int-item:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: -3px; }
.its-group-page .its-gfb-body { padding-top: 24px; }

/* Onglet « L'équipe » du groupe : trombinoscope joueurs et staff (16/10). */
.its-trombi-title { margin: 24px 0 10px; font-size: 18px; font-weight: 900; color: var(--teal, #1c3d34); }
.its-trombi-title:first-child { margin-top: 0; }
.its-trombi { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.its-trombi-card > a, .its-trombi-card > span { display: flex; flex-direction: column; height: 100%; background: var(--white, #fff); border: 1px solid rgba(28, 61, 52, .1); color: var(--teal, #1c3d34); text-decoration: none; }
.its-trombi-card > a:hover { border-color: var(--teal, #1c3d34); }
.its-trombi-card > a:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 2px; }
.its-trombi-photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; background: var(--vanilla-lt, #f8f1e6); }
.its-trombi-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.its-trombi-ini { font-size: 26px; font-weight: 900; color: rgba(28, 61, 52, .35); }
.its-trombi-name { padding: 8px 10px 0; font-size: 14px; font-weight: 800; line-height: 1.25; }
.its-trombi-sub { padding: 2px 10px 0; font-size: 12.5px; color: rgba(28, 61, 52, .65); }
.its-trombi-meta { padding: 2px 10px 10px; font-size: 12px; color: rgba(28, 61, 52, .5); }
.its-trombi-sub:last-child { padding-bottom: 10px; }
@media (max-width: 600px) { .its-trombi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Onglets L'actu du club et L'équipe : composants de la fiche, réglages de grille seulement. */
/* Grille sur ordinateur et tablette ; en mobile, le carrousel de la fiche club (itsrugby-fiche-d.css). */
@media (min-width: 681px) {
  .its-gfb-panel .media-grid.its-gfb-medias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: none; margin: 0; }
  .its-gfb-panel .media-grid.its-gfb-medias > * { grid-column: auto; grid-row: auto; }
}
@media (min-width: 681px) and (max-width: 900px) { .its-gfb-panel .media-grid.its-gfb-medias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.its-gfb-panel .its-gfb-staff-title, body.its-fiche-d #sec-effectif .its-gfb-staff-title { margin-top: 48px; }
/* Effectif du groupe (16/10) : replié, une seule grille des joueurs les plus utilisés ;
   déplié ou filtré, une grille par ligne de poste avec son titre. */
body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .its-gfb-eff-grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-eff-grp,
body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-eff-grp > .fd-trombi { display: contents; }
body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-eff-grp-t { display: none; }
body.its-fiche-d #effectif-list.its-gfb-eff .fd-eff-grp { margin-top: 28px; }
body.its-fiche-d #effectif-list.its-gfb-eff .fd-eff-grp:first-child { margin-top: 0; }
body.its-fiche-d #effectif-list.its-gfb-eff .fd-eff-grp-t { margin-bottom: 12px; }
@media (max-width: 1100px) { body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .its-gfb-eff-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 680px) { body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .its-gfb-eff-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
/* Staff du groupe : une rangée, le reste derrière « Voir tout le staff ». */
body.its-fiche-d #sec-effectif .its-gfb-staff-suite { margin-top: 12px; }
body.its-fiche-d #sec-effectif .its-gfb-staff-suite > summary { list-style: none; text-align: center; }
body.its-fiche-d #sec-effectif .its-gfb-staff-suite > summary::-webkit-details-marker { display: none; }
body.its-fiche-d #sec-effectif .its-gfb-staff-suite[open] > summary { display: none; }
/* Boutons de poste au-dessus de l'effectif du groupe. */
.its-gfb-chips { margin: 0 0 20px; }
body.its-fiche-d #effectif-list.its-gfb-eff.is-filtre .fd-eff-grp-t { display: none; }
/* Groupes de poste : colonnes choisies pour remplir les rangées (ordinateur). */
@media (min-width: 1101px) {
  body.its-fiche-d #sec-effectif .fd-trombi.its-gfb-c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.its-fiche-d #sec-effectif .fd-trombi.its-gfb-c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.its-fiche-d #sec-effectif .fd-trombi.its-gfb-c7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  body.its-fiche-d #sec-effectif .fd-trombi.its-gfb-c9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  body.its-fiche-d #sec-effectif .fd-trombi.its-gfb-c10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
/* Tirage en 2 rangées de 6 : texte à l'échelle. */
@media (min-width: 681px) {
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-nom { font-size: 16px; }
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-poste { font-size: 13px; }
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-txt { padding: 12px 13px 13px; }
}
/* Verso des cartes du groupe : texte à l'échelle des grandes cartes. */
body.its-fiche-d #sec-effectif .fd-tr--st .fd-tr-dos-lien { margin-top: auto; }
body.its-fiche-d #sec-effectif .fd-tr--st .fd-tr-dos-poste { font-size: 13px; line-height: 1.35; }
@media (min-width: 681px) {
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-dos { padding: 14px 14px 13px; }
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-dos-nom { font-size: 17px; }
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-dos-poste { margin-top: 3px; font-size: 13px; }
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-dos-ch { gap: 10px 10px; padding-top: 12px; }
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-dos-ch > span { font-size: 11px; }
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-dos-ch b { font-size: 26px; }
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-dos-ch--vide { font-size: 13px; }
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-dos-gab { margin-top: 10px; font-size: 12px; }
  body.its-fiche-d #effectif-list.its-gfb-eff:not(.is-ouvert):not(.is-filtre) .fd-tr-dos-lien { margin-top: 10px; padding: 8px 0; font-size: 12px; }
}
/* Onglet Membres du groupe (16/10) : admins en tête, cartes des membres, actions des admins. */
.its-gm-sec { margin: 0 0 36px; }
.its-gm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.its-gm-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid rgba(28, 61, 52, .15); background: #fff; }
.its-gm-card .its-ugc-sub { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.its-gm-badge { padding: 2px 8px; background: var(--teal, #1C3D34); color: var(--vanilla, #F2E5D2); font-size: 12px; font-weight: 700; }
.its-gm-since { font-size: 13px; color: var(--muted, #5b6b66); }
.its-gm-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; }
.its-gm-acts:empty { display: none; }
.its-gm-note { margin: 0 0 12px; font-size: 14px; color: var(--muted, #5b6b66); }
.its-event-card .its-event-cancel { align-self: center; margin-left: auto; }
/* Créer un événement (16/10) : formulaire + colonne match et bars proches ; sans contexte, formulaire seul. */
.its-event-create { display: grid; gap: 24px; align-items: start; }
.its-event-create .its-event-form { max-width: none; }
.its-event-create:not(.has-aside) { max-width: 640px; }
@media (min-width: 900px) { .its-event-create.has-aside { grid-template-columns: minmax(0, 1fr) 400px; } }
.its-event-create-aside { display: flex; flex-direction: column; gap: 16px; }
.its-bar-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; }
.its-bar-item { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(28, 61, 52, .1); }
.its-bar-item:last-child { padding-bottom: 0; border-bottom: 0; }
.its-bar-name { font-weight: 700; color: var(--teal, #1C3D34); }
.its-bar-name a { color: inherit; text-decoration: none; }
.its-bar-addr { font-size: 13px; color: rgba(28, 61, 52, .65); }
.its-bar-item .its-event-new, .its-bar-item .its-bar-pick { align-self: flex-start; margin-top: 4px; }
.its-bar-pick { font-weight: 700; color: var(--teal, #1C3D34); }
.its-ugc-body.its-group-body > .its-event-create.has-aside { max-width: none; }
/* Onglet Événements : les bars sur toute la largeur, en grille (pas de colonne vide). */
#gfb-evenements .its-group-bars { grid-column: 1 / -1; }
#gfb-evenements .its-bar-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px 24px; }
#gfb-evenements .its-bar-item, #gfb-evenements .its-bar-item:last-child { padding: 0 0 12px; border-bottom: 1px solid rgba(28, 61, 52, .1); }
/* Demande d'administration (colonne À propos) et proposition de groupe (16/10). */
.its-adminreq > summary { display: inline-block; list-style: none; cursor: pointer; }
.its-adminreq > summary::-webkit-details-marker { display: none; }
.its-adminreq[open] > summary { display: none; }
.its-adminreq-form { display: flex; flex-direction: column; gap: 8px; }
.its-adminreq-form label { font-size: 14px; font-weight: 700; color: var(--teal, #1C3D34); }
.its-adminreq-form textarea { padding: 10px 12px; border: 1px solid rgba(28, 61, 52, .25); background: #fff; color: var(--teal, #1C3D34); font: inherit; font-size: 15px; }
.its-adminreq-form .its-composer-send { align-self: flex-start; }
.its-propose-form, .its-ugc-body.its-group-body > .its-propose-form { max-width: none; } /* pleine largeur, comme les formulaires des landings (Félix 19/10) */
/* Colonne de droite du groupe (Félix 16/10, « améliorer cette colonne ») : encadrés plus nets,
   actions en boutons, match en carte, bars en liste compacte. */
.its-gfb-aside { display: flex; flex-direction: column; gap: 12px; }
/* Match et sorties : dans la colonne sur ordinateur, en tête du fil sur mobile et dans l'app (Félix 18/10). */
.its-gfb-agenda, .its-gfb-top { display: flex; flex-direction: column; gap: 12px; }
.its-gfb-top { display: none; }
@media (max-width: 960px) {
    .its-gfb-top { display: flex; }
    .its-gfb-agenda { display: none; }
}
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-aside-box { padding: 18px 20px; border: 0; }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-aside-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-gfb-about { font-size: 14px; }
/* Actions : bouton contour teal sur toute la largeur. */
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-event-new, :is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-adminreq > summary { display: block; margin-top: 12px; }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-event-new a { display: block; padding: 10px 12px; border: 1px solid var(--teal, #1C3D34); font-size: 14px; text-align: center; }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-event-new a:hover, :is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-event-new a:focus-visible { background: var(--teal, #1C3D34); color: var(--vanilla, #F2E5D2); }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-event-new + p, :is(.its-gfb-aside, .its-gfb-top) p:has(> .its-event-new) { margin: 0; }
/* Prochain match : affiche en grand, date, compétition. */
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-next-match { background: var(--teal, #1C3D34); color: var(--vanilla, #F2E5D2); }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-next-match .its-aside-title { font-size: 13px; font-weight: 700; color: rgba(242, 229, 210, .7); }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-next-match-teams, :is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-next-match-teams a { font-size: 18px; line-height: 1.25; color: var(--vanilla, #F2E5D2); }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-next-match-when { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--vanilla, #F2E5D2); }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-next-match-comp { color: rgba(242, 229, 210, .7); }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-next-match .its-event-new a { border-color: var(--vanilla, #F2E5D2); background: var(--vanilla, #F2E5D2); color: var(--teal, #1C3D34); }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-next-match .its-event-new a:hover, :is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-next-match .its-event-new a:focus-visible { background: transparent; color: var(--vanilla, #F2E5D2); }
/* Sorties : état vide en texte simple. */
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-aside-box .its-notif-empty { padding: 0; background: none; font-size: 14px; color: rgba(28, 61, 52, .65); }
/* Bars : nom et adresse serrés, « Organiser ici » discret à droite. */
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-bar-list { gap: 0; margin: 0; }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-bar-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(28, 61, 52, .08); }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-bar-item:first-child { padding-top: 0; }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-bar-name { grid-column: 1; font-size: 14px; }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-bar-addr { grid-column: 1; font-size: 12.5px; }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-bar-item .its-event-new { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-bar-item .its-event-new a { padding: 6px 10px; font-size: 12.5px; }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-group-bars .its-group-all { display: block; margin-top: 12px; font-size: 13.5px; }
:is(.its-gfb-aside, #gfb-evenements, .its-gfb-top) .its-group-bars p { margin: 0; }
/* Créer un événement sans match ni groupe : formulaire seul, centré (jamais de colonne vide). */
.its-ugc-body.its-group-body > .its-event-create:not(.has-aside) { max-width: 760px; margin-left: auto; margin-right: auto; }
/* Recherche de bar avec propositions (formulaire d'événement). */
.its-combo { position: relative; }
.its-combo input[type="text"] { width: 100%; box-sizing: border-box; padding: 10px 84px 10px 12px; border: 1px solid rgba(28, 61, 52, .25); background: #fff; color: var(--teal, #1C3D34); font: inherit; font-size: 15px; }
.its-combo input[type="text"]:focus-visible { outline: 3px solid var(--sage, #ABC8A2); outline-offset: 1px; }
.its-combo-clear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); padding: 4px 8px; border: 0; background: transparent; color: var(--teal, #1C3D34); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.its-combo-list { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; max-height: 320px; overflow-y: auto; margin: 2px 0 0; padding: 4px 0; border: 1px solid var(--teal, #1C3D34); background: #fff; list-style: none; }
.its-combo-head { padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: rgba(28, 61, 52, .6); }
.its-combo-opt { padding: 9px 12px; font-size: 15px; color: var(--teal, #1C3D34); cursor: pointer; }
.its-combo-opt:hover, .its-combo-opt.is-active { background: var(--vanilla, #F2E5D2); }
.its-combo-none { padding: 9px 12px; font-size: 14px; color: rgba(28, 61, 52, .65); }
.its-ev-where { display: flex; flex-direction: column; gap: 6px; }
.its-ev-where[hidden] { display: none; }
/* Code postal et ville sur une ligne. */
.its-ev-cpville { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
.its-ev-cpville > span { display: flex; flex-direction: column; gap: 6px; }
.its-ev-cpville > span[hidden] { display: none; }
.its-ev-cpville.is-solo { grid-template-columns: minmax(0, 1fr); } /* pas de :has(), muet dans la webview iOS */
.its-ev-cpville input { padding: 10px 12px; border: 1px solid rgba(28, 61, 52, .25); background: #fff; color: var(--teal, #1C3D34); font: inherit; font-size: 15px; }
/* Cartes de publication façon fil social (Félix 16/10, « pas très beau ») :
   barre d'actions J'aime · Commenter, commentaires en bulles compactes. */
.its-post-head { padding: 16px 18px 0; }
.its-post-body { padding: 10px 18px 2px; font-size: 16px; }
.its-post-foot { display: flex; align-items: center; gap: 2px; margin-top: 10px; padding: 4px 8px; border-top: 1px solid rgba(28, 61, 52, .08); border-bottom: 1px solid rgba(28, 61, 52, .08); }
.its-post-foot .its-social-like-wrap { display: flex; }
.its-post-foot .its-social-like-btn, .its-post-act { padding: 8px 12px; border: 0; background: transparent; color: var(--teal, #1C3D34); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.its-post-foot .its-social-like-btn:hover, .its-post-act:hover, .its-post-foot .its-social-like-btn:focus-visible, .its-post-act:focus-visible { background: #F4EEE4; }
.its-post-foot .its-social-like-btn[aria-pressed="true"] { background: #F4EEE4; color: var(--teal, #1C3D34); font-weight: 800; }
.its-post-foot .its-social-like-count { margin-left: 4px; font-weight: 600; opacity: .75; }
.its-post-foot .its-post-ccount { margin-left: auto; padding-right: 8px; }
.its-post-comments { padding: 6px 18px 16px; }
.its-post-more { margin: 6px 0 2px; }
.its-post-more a { font-size: 13px; color: rgba(28, 61, 52, .7); }
.its-post-comment { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0 0; }
.its-pc-ava { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; object-fit: cover; background: #F4EEE4; color: var(--teal, #1C3D34); font-size: 13px; font-weight: 800; }
.its-pc-main { min-width: 0; }
.its-pc-bubble { display: inline-block; max-width: 100%; padding: 8px 12px; background: #F4EEE4; }
.its-pc-name, .its-pc-name a { font-size: 13.5px; font-weight: 800; color: var(--teal, #1C3D34); text-decoration: none; }
.its-post-comment .its-post-comment-body { margin: 2px 0 0; padding: 0; background: none; font-size: 14.5px; line-height: 1.45; }
.its-pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 3px 12px 0; font-size: 12.5px; color: rgba(28, 61, 52, .6); }
.its-pc-meta a { color: inherit; text-decoration: none; }
.its-pc-meta .its-ugc-act { padding: 0; font-size: 12.5px; font-weight: 600; }
.its-post-comment-form { align-items: center; margin: 12px 0 0; }
.its-post-comment-form textarea { min-height: 38px; padding: 9px 12px; border: 0; background: #F4EEE4; }
.its-post-comment-form button { align-self: stretch; }
/* Aperçu de lien sous une publication. */
.its-link-card { margin: 12px 18px 0; border: 1px solid rgba(28, 61, 52, .14); background: #FBF8F3; }
.its-link-card > a { display: block; color: var(--teal, #1C3D34); text-decoration: none; }
.its-link-card > a:hover, .its-link-card > a:focus-visible { background: #F4EEE4; }
.its-link-img { display: block; aspect-ratio: 1.91 / 1; overflow: hidden; background: var(--sage-lt, #D7EAE2); }
.its-link-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.its-link-txt { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; }
.its-link-site { font-size: 12px; font-weight: 600; color: rgba(28, 61, 52, .6); }
.its-link-title { font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.its-link-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.45; color: rgba(28, 61, 52, .8); }
@media (max-width: 680px) { .its-link-card { margin-left: 12px; margin-right: 12px; } }
/* Aperçu de lien compact (Félix 16/10, « réduire l'image ») : vignette à gauche, texte à droite. */
.its-link-card.has-img > a { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: stretch; }
.its-link-card.has-img .its-link-img { width: 100%; height: 100%; min-height: 115px; aspect-ratio: auto; }
.its-link-card.has-img .its-link-txt { align-self: center; }
@media (max-width: 680px) {
  .its-link-card.has-img > a { grid-template-columns: 120px minmax(0, 1fr); }
  .its-link-card.has-img .its-link-img { min-height: 90px; }
  .its-link-card .its-link-txt { padding: 8px 10px; }
  .its-link-card .its-link-title { font-size: 14px; }
  .its-link-card .its-link-desc { display: none; }
}
/* Page d'un groupe en mobile : boutons du haut de page plus compacts (sur une ligne). */
@media (max-width: 680px) {
  body.its-group-page .arch-hero__actions { gap: 8px; }
  body.its-group-page .arch-hero__btn { padding: 10px 14px; font-size: 14px; }
}

/* Mobile (audit 16/10) : champ commentaire, boutons de poste, staff, onglet Événements. */
@media (max-width: 680px) {
  .its-post-comment-form .its-pc-ava { display: none; }
  .its-post-comment-form textarea { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .its-post-comment-form textarea:focus { white-space: normal; }
  .its-post-comment-form button { padding: 0 12px; }
  .its-gfb-chips { margin-right: -16px; padding-right: 16px; }
  body.its-fiche-d #gfb-staff .fd-trombi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Page d'un événement façon Facebook (16/10) : cartes Détails, Organisateur, Participants. */
.its-ev-body > .its-post-flag { margin: 16px 0 0; }
.its-ev-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 0; }
.its-ev-dl dt { font-size: 13px; font-weight: 700; color: rgba(28, 61, 52, .65); }
.its-ev-dl dd { margin: 0; font-size: 15px; color: var(--teal, #1c3d34); }
.its-ev-avas { display: flex; margin-top: 6px; }
.its-ev-ava { width: 32px; height: 32px; margin-right: -8px; border: 2px solid #fff; border-radius: 50%; background: var(--vanilla, #f2e5d2); object-fit: cover; }
.its-ev-details .its-event-desc { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(28, 61, 52, .1); }
.its-ev-org { display: flex; flex-direction: column; align-items: center; text-align: center; }
.its-ev-org .its-aside-title { align-self: flex-start; }
.its-ev-org-ava { width: 72px; height: 72px; border-radius: 50%; background: var(--vanilla, #f2e5d2); object-fit: cover; }
.its-ev-org-name { margin: 10px 0 0; font-size: 17px; font-weight: 800; color: var(--teal, #1c3d34); }
.its-ev-org-name a { color: inherit; text-decoration: none; }
.its-ev-org-sub { margin: 2px 0 12px; font-size: 13px; color: rgba(28, 61, 52, .65); }
.its-ev-people .its-event-people { grid-template-columns: 1fr; gap: 8px; margin: 0; }
.its-ev-big { margin: 0 0 10px; font-size: 15px; color: rgba(28, 61, 52, .75); }
.its-ev-big strong { font-size: 26px; font-weight: 900; color: var(--teal, #1c3d34); }
.its-event-flag--passe { background: rgba(28, 61, 52, .08); }
.its-ev-filtres { margin: 0 0 18px; }
.its-ev-filtres-sep { width: 1px; height: 32px; margin: 0 4px; background: rgba(28, 61, 52, .2); }
@media (max-width: 680px) {
  .its-ev-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .its-ev-dl dt { margin-top: 10px; }
  .its-ev-dl dt:first-child { margin-top: 0; }
}
.its-ev-map { height: 260px; border: 1px solid rgba(28, 61, 52, .12); }
.its-ev-map-lien { margin: 10px 0 0; }
.its-ev-big--int { margin-top: -4px; }
.its-ev-inv-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.its-ev-inv-btn.is-done { opacity: .6; }

/* Sortie à la une en tête de la discussion du groupe (17/10) : épinglée par un admin, sinon la prochaine. */
.its-group-une { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--white, #fff); border: 1px solid rgba(28, 61, 52, .12); border-left: 4px solid var(--sage, #abc8a2); }
.its-group-une.is-epinglee { border-left-color: var(--teal, #1c3d34); }
.its-group-une-txt { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.its-group-une-sur { font-size: 12px; font-weight: 800; color: rgba(28, 61, 52, .65); }
.its-group-une-acts { display: flex; flex-direction: column; gap: 6px; flex: none; }
@media (max-width: 680px) { .its-group-une { flex-wrap: wrap; } .its-group-une-acts { flex-direction: row; width: 100%; } }

/* Agenda des sorties (17/10) : cartes avec photo, deux par rangée, une en mobile. */
.its-agenda-titre { margin: 22px 0 12px; }
/* Pleine largeur (Félix 17/10 : « trou en desktop ») : l'agenda n'est pas une colonne de discussion. */
.its-ugc-body.its-group-body.its-agenda > * { max-width: none; }
.its-agenda-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; min-width: 0; }
.its-agenda-card { min-width: 0; max-width: 100%; }
.its-agenda-corps > * { min-width: 0; overflow-wrap: anywhere; }
.its-agenda-moment { font-size: 12px; font-weight: 800; color: rgba(28, 61, 52, .65); }
@media (max-width: 900px) { .its-agenda-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.its-agenda-card { display: flex; flex-direction: column; background: var(--white, #fff); border: 1px solid rgba(28, 61, 52, .12); }
.its-agenda-card.is-finie .its-agenda-photo img:first-child { filter: grayscale(1); opacity: .7; }
.its-agenda-photo { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--teal, #1c3d34); }
.its-agenda-photo > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.its-agenda-photo .its-event-date { position: absolute; top: 12px; left: 12px; }
.its-agenda-photo .its-event-flag { position: absolute; top: 12px; right: 12px; }
.its-agenda-logo { position: absolute; right: 12px; bottom: 10px; width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .4)); }
.its-agenda-corps { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.its-agenda-corps .its-event-title a { font-size: 17px; }
.its-agenda-corps .its-event-sub a { font-weight: 700; color: var(--teal, #1c3d34); text-decoration: none; }
.its-agenda-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.its-agenda-qui { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(28, 61, 52, .7); }
.its-agenda-qui .its-ev-avas { margin: 0 4px 0 0; }
.its-agenda-qui .its-ev-ava { width: 28px; height: 28px; }
.its-agenda-matchs { margin: 0 0 20px; padding: 0; list-style: none; }
.its-agenda-match { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(28, 61, 52, .08); }
.its-agenda-match .its-group-id { flex: 1; }
.its-agenda-match-act { flex: none; }
.its-agenda .its-group-list { margin: 0; padding: 0; list-style: none; }
@media (max-width: 680px) {
  .its-agenda-grille { grid-template-columns: 1fr; }
  .its-agenda-match { flex-wrap: wrap; }
  .its-agenda-match-act { width: 100%; padding-left: 60px; }
}

/* Bannière d'événement (17/10) : image du membre, avec rappel des droits (CGU art. 8). */
.its-ev-banniere { margin: 14px 0 0; padding: 12px 14px; border: 1px solid rgba(28, 61, 52, .15); }
.its-ev-banniere legend { padding: 0 6px; font-size: 14px; font-weight: 800; color: var(--teal, #1c3d34); }
.its-ev-banniere-actuelle { margin: 0 0 8px; }
.its-ev-banniere-actuelle img { display: block; width: 100%; max-width: 360px; aspect-ratio: 16 / 9; object-fit: cover; }
.its-ev-banniere-retirer, .its-ev-banniere-droits { display: block; margin: 8px 0 0; font-size: 14px; }
.its-ev-banniere input[type="file"] { display: block; margin: 6px 0 8px; font: inherit; font-size: 14px; }
.its-ev-banniere .its-gfb-about-small a { color: var(--teal, #1c3d34); font-weight: 700; text-decoration: none; }
.its-post-flag--epingle { margin-bottom: -4px; background: transparent; color: rgba(28, 61, 52, .65); font-size: 12px; }
.its-post.is-epingle { border-left: 4px solid var(--teal, #1c3d34); }

/* Réactions rugby (17/10) : « Réagir » ouvre quatre pastilles ; la sienne reste en bouton plein. */
.its-react { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.its-react-menu { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; gap: 6px; padding: 8px; background: var(--white, #fff); border: 1px solid rgba(28, 61, 52, .15); box-shadow: 0 6px 18px rgba(28, 61, 52, .12); }
.its-react.is-open .its-react-menu { display: flex; }
.its-react-counts { display: inline-flex; gap: 10px; font-size: 13px; color: rgba(28, 61, 52, .7); }
.its-react-n { font-weight: 700; }
/* Sondage : chaque choix est une barre cliquable. */
.its-poll { display: flex; flex-direction: column; gap: 6px; padding: 0 16px 12px; }
.its-poll-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border: 1px solid rgba(28, 61, 52, .25); background: var(--white, #fff); color: var(--teal, #1c3d34); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.its-poll-opt.is-on { border-color: var(--teal, #1c3d34); }
.its-poll-barre { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.its-poll-barre > span { display: block; height: 100%; background: rgba(171, 200, 162, .35); }
.its-poll-opt.is-on .its-poll-barre > span { background: rgba(171, 200, 162, .6); }
.its-poll-lib, .its-poll-pct { position: relative; z-index: 1; }
.its-poll-pct { flex: none; font-weight: 800; }
div.its-poll-opt { cursor: default; }
.its-poll-total { margin: 4px 0 0; font-size: 12.5px; color: rgba(28, 61, 52, .6); }
.its-composer-poll { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 0; }
.its-composer-poll input { padding: 8px 10px; border: 1px solid rgba(28, 61, 52, .25); font: inherit; font-size: 14px; }
.its-composer-poll-btn { cursor: pointer; }
.its-composer-poll[hidden], .its-composer-card[hidden] { display: none; }
/* Zone Publier (Félix 18/10) : une icône par bouton, bouton ouvert en teal, invitation aux pronos en encadré. */
.its-composer-photo.is-sondage::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 20V10M12 20V4M19 20v-7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 20V10M12 20V4M19 20v-7'/%3E%3C/svg%3E") center / contain no-repeat; }
.its-composer-photo.is-pronos::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4zM7 6H4v2a3 3 0 0 0 3 3M17 6h3v2a3 3 0 0 1-3 3M12 14v4M8 20h8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0V4zM7 6H4v2a3 3 0 0 0 3 3M17 6h3v2a3 3 0 0 1-3 3M12 14v4M8 20h8'/%3E%3C/svg%3E") center / contain no-repeat; }
.its-composer-poll-btn { background: transparent; font: inherit; font-size: 14px; font-weight: 700; }
.its-composer-poll-btn[aria-expanded="true"] { border-color: var(--teal, #1c3d34); background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); }
.its-composer-poll-btn:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 2px; }
.its-composer-invite { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t b" "x b" "l l"; align-items: center; column-gap: 16px; padding: 14px 16px; background: var(--vanilla, #f2e5d2); color: var(--teal, #1c3d34); }
.its-composer-invite-titre { grid-area: t; margin: 0 0 2px; font-size: 15px; font-weight: 800; }
.its-composer-invite-txt { grid-area: x; margin: 0; font-size: 13.5px; color: rgba(28, 61, 52, .8); }
.its-composer-invite-btn { grid-area: b; }
.its-composer-invite-liste { grid-area: l; margin-top: 12px; padding: 12px 14px; background: var(--white, #fff); }
.its-composer-invite-liste .its-grp-po:last-child { padding-bottom: 0; border-bottom: 0; }
.its-grp-po.has-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.its-grp-po.has-btn > span:not(.its-grp-po-go) { grid-column: 1; }
.its-grp-po-go { grid-column: 2; grid-row: 1 / span 4; }
.its-grp-po-go a { display: inline-block; padding: 8px 14px; background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); font-size: 13.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.its-grp-po-go a:hover { opacity: .88; }
.its-grp-po-go a:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 2px; }
@media (max-width: 480px) {
    .its-grp-po.has-btn { grid-template-columns: minmax(0, 1fr); }
    .its-grp-po-go { grid-column: 1; grid-row: auto; margin-top: 8px; }
}
.its-composer-invite-btn a { display: inline-block; padding: 9px 16px; background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.its-composer-invite-btn a:hover { opacity: .88; }
.its-composer-invite-btn a:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 2px; }
@media (max-width: 600px) {
    .its-composer-invite { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "x" "l" "b"; }
    .its-composer-invite-btn { margin-top: 10px; }
    .its-composer-invite-btn a { display: block; text-align: center; }
}
/* « Mes pronos » dans Publier (Félix 18/10) : liste de choix fournie par le plugin pronos. */
.its-composer-card { padding: 10px 0 0; }
.its-composer-card fieldset { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.its-composer-card legend { margin-bottom: 4px; font-size: 13px; font-weight: 700; }
.its-composer-card label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--vanilla, #f2e5d2); color: var(--teal, #1c3d34); font-size: 14px; cursor: pointer; }
.its-composer-card input { accent-color: var(--teal, #1c3d34); }
.its-composer-card label:focus-within { outline: 3px solid var(--sage, #abc8a2); outline-offset: 1px; }
/* Repartage : l'original dans un cadre. */
.its-repost { margin: 0 16px 12px; border: 1px solid rgba(28, 61, 52, .15); }
.its-repost .its-post-head { padding-top: 12px; }
.its-repost .its-poll { padding-bottom: 8px; }
.its-repost.is-vide { padding: 12px 14px; font-size: 13px; color: rgba(28, 61, 52, .6); }
/* Mobile : les actions d'une publication passent sous l'auteur, sinon elles écrasaient son nom (17/10). */
@media (max-width: 680px) {
  .its-post > .its-post-head { flex-wrap: wrap; }
  .its-post > .its-post-head .its-ugc-author { flex: 1 1 100%; }
  .its-post > .its-post-head .its-ugc-acts { flex: 1 1 100%; justify-content: flex-start; gap: 14px; margin-top: 6px; }
}
.its-react-ico { flex: none; }
.its-react .its-pastille { gap: 6px; }
.its-react-choix { padding: 0 10px; }
.its-react-n { display: inline-flex; align-items: center; gap: 4px; }
.its-react-n .its-react-ico { width: 16px; height: 16px; }
.its-post-foot-g { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.its-post-share { gap: 6px; }

/* Pages sociales avec le hero v2 (Mes notifications, 17/10) : même largeur que les espaces
   (règle reprise de its-space-dashboard.css, qui n'est chargée que dans les espaces). */
body.its-hero-v2.its-large .rz-page-wrap {
    max-width: calc(var(--its-max, 1412px) + 2 * var(--its-g, 24px));
    padding-left: var(--its-g, 24px);
    padding-right: var(--its-g, 24px);
    box-sizing: border-box;
}
.its-social-narrow--full { max-width: none; }

/* Pronos du groupe ce mois-ci (colonne du groupe) : rang, membre, points. */
.its-grp-pronos { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.its-grp-prono { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.its-grp-prono .its-ugc-ava { width: 32px; height: 32px; }
.its-grp-prono-rang { font-weight: 900; text-align: center; }
.its-grp-prono-pts { font-weight: 800; white-space: nowrap; }
.its-grp-prono.is-moi { padding: 4px 6px; margin: 0 -6px; background: var(--vanilla, #F2E5D2); }
.its-grp-pronos-liens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }
.its-grp-pronos-masque { margin: 0 0 10px; font-size: 13px; color: rgba(28, 61, 52, .7); }

/* Pronos en cours sur la page d'un groupe (Félix 18/10) : liste compacte, un bouton vers /pronos/. */
.its-grp-po-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.its-grp-po { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid rgba(28, 61, 52, .08); }
.its-grp-po:first-child { padding-top: 0; }
.its-grp-po-comp { font-size: 12.5px; font-weight: 700; color: rgba(28, 61, 52, .6); }
.its-grp-po-titre { font-size: 14px; font-weight: 800; color: var(--teal, #1C3D34); }
.its-grp-po-match { font-size: 14px; color: var(--teal, #1C3D34); }
.its-grp-po-meta { font-size: 12.5px; color: rgba(28, 61, 52, .65); }
.its-grp-po-sous { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: rgba(28, 61, 52, .6); }
.its-grp-po-list + .its-grp-po-sous { margin-top: 16px; }
.its-group-pronos-ouverts .its-grp-pronos { margin-bottom: 0; }
.its-group-pronos-ouverts .its-grp-pronos-masque { margin: 10px 0 0; }
/* « Vous dans le classement » : Mon nom / Anonyme / Masqué en boutons accolés (Félix 18/10). */
.its-grp-mode { margin: 12px 0 0; }
.its-grp-mode-l { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--teal, #1C3D34); }
.its-grp-mode-btns { display: grid; grid-template-columns: repeat(3, 1fr); }
.its-grp-mode.is-simple .its-grp-mode-btns { grid-template-columns: repeat(2, 1fr); }
/* Sur /pronos/ et /classement-pronos/ : en encadré blanc sous « Ma saison ». */
.its-grp-mode--page { margin: 0 0 16px; padding: 14px 16px; background: var(--white, #fff); }
.its-grp-mode-btn { padding: 8px 6px; border: 1px solid var(--teal, #1C3D34); background: var(--white, #fff); color: var(--teal, #1C3D34); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.its-grp-mode-btn + .its-grp-mode-btn { border-left: 0; }
.its-grp-mode-btn[aria-pressed="true"] { background: var(--teal, #1C3D34); color: var(--vanilla, #F2E5D2); cursor: default; }
.its-grp-mode-btn:hover:not([aria-pressed="true"]) { background: var(--vanilla, #F2E5D2); }
.its-grp-mode-btn:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 1px; position: relative; }
.its-grp-mode-btn:disabled { opacity: .6; }
.its-grp-mode-aide { margin: 6px 0 0; font-size: 12.5px; color: rgba(28, 61, 52, .7); }
.its-group-pronos-ouverts .its-grp-pronos-liens { margin-top: 10px; justify-content: center; font-size: 13.5px; }
.its-grp-po-classement { margin: 0; padding: 10px 12px; background: var(--vanilla, #F2E5D2); color: var(--teal, #1C3D34); font-size: 13.5px; font-weight: 700; }

/* Annuaire des groupes (/groupes/, membre connecté) : cartes logo, nom, niveau, membres, Rejoindre (Félix 18/10). */
.its-gdir { padding-top: 24px; padding-bottom: 40px; }
.its-gdir-sec { margin: 0 0 36px; }
.its-gdir-count { min-height: 1.4em; margin: 0 0 8px; font-size: 14px; color: rgba(28, 61, 52, .72); }
.its-gdir-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.its-gdir-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 14px 14px; text-align: center; background: #fff; border: 1px solid rgba(28, 61, 52, .12); }
.its-gdir-card[hidden] { display: none; }
.its-gdir-logo { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; }
.its-gdir-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.its-gdir-name { font-weight: 800; font-size: 15px; line-height: 1.25; }
.its-gdir-name a { color: var(--teal, #1C3D34); text-decoration: none; }
.its-gdir-sub { font-size: 13px; color: rgba(28, 61, 52, .72); }
.its-gdir-btn { margin-top: auto; }
.its-gdir-card .its-gdir-btn.is-following { color: var(--vanilla, #F2E5D2); background: var(--teal, #1C3D34); border-color: var(--teal, #1C3D34); }
.its-gdir-propose { margin: 20px 0 0; }
@media (max-width: 480px) { .its-gdir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Invitation au groupe du club, sous « Suivre » (hero teal, texte vanille, 18/10). */
.its-follow-invite {
    flex:0 0 100%;
    order:9;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 12px;
    color:var(--vanilla);
    font-size:13px;
    line-height:1.4;
}
.its-follow-invite .its-page-follow-btn { margin-top:0; }
.its-page-follow-btn[hidden] { display:none; }
.its-follow-invite__no {
    padding:6px 0;
    background:none;
    border:0;
    color:var(--vanilla);
    font:inherit;
    opacity:.8;
    cursor:pointer;
}
.its-follow-invite__no:hover { opacity:1; }
.its-follow-invite__no:focus-visible { outline:3px solid var(--sage, #ABC8A2); outline-offset:2px; }
/* Centrée comme la fiche club sur mobile ; alignée à gauche dans le hero de la page groupe. */
@media (max-width:680px) {
    .comp-name-row > .its-follow-invite { justify-content:center; text-align:center; }
}

/* Fenêtre « Signaler » façon Facebook (Félix 20/10) : motifs en lignes, urgence en tête. */
.its-report-title { font-size: 19px; }
.its-report-urgent { margin: 0; padding: 10px 12px; border-left: 3px solid #b32d2e; background: #fdf6f6; color: #7a1f20; font-size: 14px; font-weight: 600; }
.its-report-reasons { gap: 0; border-top: 1px solid rgba(28, 61, 52, .12); }
.its-report-reasons legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.its-report-reason { justify-content: space-between; gap: 12px; padding: 13px 4px; border-bottom: 1px solid rgba(28, 61, 52, .12); background: #fff; font-size: 15px; font-weight: 600; }
.its-report-reason:hover { background: #f4f8f5; }
.its-report-reason:has(input:checked) { background: #eef4ef; box-shadow: inset 3px 0 0 var(--teal, #1c3d34); }
.its-report-reason input { order: 2; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
.its-report-alt { margin: 0; font-size: 13px; color: rgba(28, 61, 52, .7); }

/* Annuaire façon page « Ami(e)s » de Facebook (Félix 20/10) : onglets soulignés + recherche en haut,
   cartes à grande photo sur deux colonnes, bouton Suivre en gris neutre comme la messagerie. */
.its-dir { margin-top: 8px; }
/* Pas la place pour onglets + recherche : la recherche passe au-dessus, les onglets restent entiers. */
.its-dir-bar { display: flex; flex-wrap: wrap-reverse; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(28, 61, 52, .1); }
.its-dir-tabs { display: flex; flex: 0 0 auto; max-width: 100%; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.its-dir-tabs::-webkit-scrollbar { display: none; }
.its-dir .its-dir-tab { flex: 0 0 auto; border-bottom: 3px solid transparent; color: rgba(28, 61, 52, .55); font-size: 15px; font-weight: 700; white-space: nowrap; }
.its-dir .its-dir-tab a { display: block; padding: 12px 14px; color: inherit; font-weight: inherit; text-decoration: none; }
.its-dir .its-dir-tab:hover { background: #f5f5f5; color: var(--teal, #1c3d34); }
.its-dir .its-dir-tab.is-active { border-bottom-color: var(--teal, #1c3d34); color: var(--teal, #1c3d34); font-weight: 800; }
.its-dir .its-dir-tab a:focus-visible { outline: 2px solid var(--teal, #1c3d34); outline-offset: -2px; }
.its-dir-search { flex: 0 0 260px; margin: 0 0 8px auto; }
.its-dir-search input[type="search"] { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 0; border-radius: 0; background: #efefef; color: var(--teal, #1c3d34); font-size: 14px; }
.its-dir-search input[type="search"]:focus { outline: 2px solid var(--teal, #1c3d34); outline-offset: 0; }
.its-dir .its-people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.its-dir .its-people-card { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 14px; border: 1px solid rgba(28, 61, 52, .1); background: #fff; box-shadow: none; }
.its-dir .its-people-card:hover { border-color: rgba(28, 61, 52, .1); box-shadow: none; }
.its-dir .its-people-card__media { flex: 0 0 auto; width: 96px; height: 96px; background: #efefef; color: var(--teal, #1c3d34); }
.its-dir .its-people-card__media-initials { font-size: 28px; font-weight: 800; color: var(--teal, #1c3d34); }
.its-dir .its-people-card__body { flex: 1; min-width: 0; padding: 0; gap: 2px; }
.its-dir .its-people-card__name { font-size: 17px; font-weight: 800; color: var(--teal, #1c3d34); white-space: normal; }
.its-dir .its-people-card__role { font-size: 14px; font-weight: 600; color: rgba(28, 61, 52, .6); }
.its-dir .its-people-card__sub { font-size: 13px; color: rgba(28, 61, 52, .5); }
.its-dir .its-people-card__cta { flex: 0 0 auto; margin: 0; padding: 0; border: 0; }
.its-dir .its-people-card__cta .its-page-follow-btn,
.its-dir .its-people-card__cta .its-social-action-btn { width: auto; padding: 8px 14px; border: 0; background: #efefef; color: var(--teal, #1c3d34); font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.its-dir .its-people-card__cta .its-page-follow-btn:hover,
.its-dir .its-people-card__cta .its-social-action-btn:hover { background: #e4e4e4; color: var(--teal, #1c3d34); }
.its-dir .its-people-card__cta .its-page-follow-btn.is-following,
.its-dir .its-people-card__cta .its-social-action-btn.is-following { background: transparent; color: rgba(28, 61, 52, .55); }
@media (max-width: 760px) {
    .its-dir-bar { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
    .its-dir-search { flex: none; margin: 0; }
    .its-dir .its-people-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .its-dir .its-people-card { padding: 10px 0; border: 0; }
    .its-dir .its-people-card__media { width: 64px; height: 64px; }
    .its-dir .its-people-card__media-initials { font-size: 20px; }
    .its-dir .its-people-card__name { font-size: 16px; }
}

/* Croix de fermeture du signalement, en haut à droite (Félix 21/10). */
.its-report-form { position: relative; }
.its-report-title { padding-right: 40px; }
.its-report-x { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--teal, #1c3d34); cursor: pointer; }
.its-report-x:hover { background: #f5f5f5; }
.its-report-x:focus-visible { outline: 2px solid var(--teal, #1c3d34); outline-offset: 2px; }
.its-report-title:focus { outline: 0; }

/* Profil hors connexion, façon Facebook (Félix 21/10) : « pas disponible » + Se connecter. */
.its-prof-indispo { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; padding: 72px 16px 96px; text-align: center; color: var(--teal, #1c3d34); }
.its-prof-indispo__ico { color: var(--teal, #1c3d34); margin-bottom: 4px; }
.its-prof-indispo__titre { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.25; }
.its-prof-indispo__txt { margin: 0 0 8px; color: rgba(28, 61, 52, .7); font-size: 15px; line-height: 1.55; }
/* Boutons alignés sur la landing /groupes/ (.rv-btn plein / trait) : 50 px, filet 1,5 px, 800 (charte Félix). */
.its-prof-indispo__cta a, .its-prof-indispo__second a { display: flex; align-items: center; justify-content: center; min-width: 240px; min-height: 50px; padding: 0 22px; border: 1.5px solid var(--teal, #1c3d34); font-size: 1rem; font-weight: 800; line-height: 1.2; text-decoration: none; transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s cubic-bezier(.16, 1, .3, 1), background-color .2s; }
.its-prof-indispo__cta a { background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); }
.its-prof-indispo__cta a:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(23, 39, 19, .22); color: var(--vanilla, #f2e5d2); }
.its-prof-indispo__second a { background: transparent; color: var(--teal, #1c3d34); }
.its-prof-indispo__second a:hover { background: rgba(28, 61, 52, .06); color: var(--teal, #1c3d34); }
.its-prof-indispo__lien a { color: var(--teal, #1c3d34); font-size: 14px; font-weight: 700; text-decoration: none; }
.its-prof-indispo a, .its-prof-indispo a:hover { -webkit-text-fill-color: currentColor; } /* le thème force la couleur des liens via text-fill */
.its-prof-indispo a:focus-visible { outline: 2px solid var(--teal, #1c3d34); outline-offset: 2px; }
html.is-app .its-prof-indispo-page .its-app-topbar { display: none; } /* app : pas de barre « ‹ » sur cette page (Félix 21/10) */

/* Filtres de /mes-notifications/ (module .its-pastilles, Félix 21/10) : marge seulement. */
.its-notif-filtres { margin: 0 0 20px; }
/* Mes matchs : « Stats du match » / « Avant-match » sous chaque ligne, bloc de la fiche match ouvert dessous (Félix 22/10). */
/* Une carte par match, séparées (Félix 22/10 : collées, ça ne se lisait pas) ; le bloc ouvert reste collé à sa carte. */
.its-mes-matchs .matchs-grid { gap: 10px; }
.its-mes-matchs .date-strip-arrow[aria-disabled="true"] { opacity: .3; cursor: default; } /* bout de saison */
.its-mes-matchs .matchs-grid > .its-mm-panel { margin-top: -10px; }
.its-mes-matchs .its-mm-plus { display: inline-flex; align-items: center; gap: 4px; margin: 6px auto 0; padding: 2px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted, #6B6B6B); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer; }
.its-mes-matchs .its-mm-plus::after { content: "\25BE"; font-size: 10px; }
.its-mes-matchs .its-mm-plus[aria-expanded="true"] { color: var(--teal, #1C3D34); }
.its-mes-matchs .its-mm-plus[aria-expanded="true"]::after { content: "\25B4"; }
.its-mes-matchs .its-mm-plus:hover, .its-mes-matchs .its-mm-plus:focus-visible { background: none; color: var(--teal, #1C3D34); }
.its-mes-matchs .its-mm-plus:focus-visible { outline: 2px solid var(--teal, #1C3D34); outline-offset: 2px; }
.its-mes-matchs .its-mm-panel { padding: 12px 14px 16px; border: 1px solid rgba(28, 61, 52, .12); border-top: 0; background: var(--white, #fff); }
.its-mes-matchs .its-mm-panel > .section { margin: 0; padding: 0; }
/* Rattaché à la ligne : pas de grand titre de section (le bouton le donne), pas de carte dans la carte. */
.its-mes-matchs .its-mm-panel > .section > .section-title { display: none; }
.its-mes-matchs .its-mm-panel .pre-forme-figures { flex-wrap: wrap; row-gap: 2px; overflow: visible; white-space: normal; } /* mobile : « encaissés » coupé au bord */
.its-mes-matchs .its-mm-panel .ins-title { background: none; padding-left: 0; padding-right: 0; }
.its-mes-matchs .its-mm-panel .pre-wrap { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
.its-mes-matchs .its-mm-vide { margin: 0; color: var(--muted, #6B6B6B); font-size: 14px; }
.its-mes-matchs .its-mm-fiche { display: inline-block; margin-top: 14px; color: var(--teal, #1C3D34); font-size: 13px; font-weight: 800; text-decoration: none; }
.its-mes-matchs .its-mm-fiche::after { content: " \203A"; }

/* Fil du réseau en grille comme les archives (Félix 22/10) : articles en cartes photo, plusieurs par
   ligne ; publications, « À suivre », J'aime… restent en pleine largeur. */
.its-social-feed--grille > :not(.has-cine) { grid-column: 1 / -1; }
/* Fil sur téléphone : une carte par ligne, comme un fil Instagram (Félix 22/10), au format 4:5 pour
   ne pas prendre tout l'écran ; titres à leur taille d'ordinateur. Les grilles de profil gardent 2 colonnes. */
@media (max-width: 768px) {
  .its-social-feed.its-social-feed--grille { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .its-social-feed.its-social-feed--grille .its-social-feed-cine { aspect-ratio: 4 / 5; }
  .its-social-feed.its-social-feed--grille .its-social-feed-cine-txt { padding: 16px; gap: 6px; }
  .its-social-feed.its-social-feed--grille .its-social-feed-cine .its-social-feed-title { font-size: 19px; }
  .its-social-feed.its-social-feed--grille .its-social-feed-cine-meta { font-size: 13px; }
  .its-social-feed.its-social-feed--grille .its-social-feed-footer { padding: 8px 12px; }
}

/* « À suivre » en carrousel, comme les suggestions d'Instagram (Félix 22/10) : posé sur la vanille,
   petites cartes qui défilent sur le côté (logo ou photo, nom, type, Suivre). */
.its-social-suggest { padding: 0; background: transparent; border: 0; }
.its-social-suggest ul { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 0 8px; scrollbar-width: none; }
.its-social-suggest li { flex: 1 0 160px; flex-direction: column; justify-content: flex-start; align-items: center; gap: 8px; padding: 16px 12px 14px; border: 0; background: #fff; text-align: center; scroll-snap-align: start; }
.its-social-suggest li:first-child { border-top: 0; }
.its-social-suggest-ava { width: 64px; height: 64px; font-size: 22px; font-weight: 800; background: #fff; }
span.its-social-suggest-ava { background: #efefef; border-radius: 50%; }
.its-social-suggest-id { flex: 0 0 auto; width: 100%; align-items: center; }
.its-social-suggest-nom { width: 100%; font-size: 14px; }
.its-social-suggest li .its-page-follow-btn { align-self: center; margin: auto auto 0; } /* cartes étirées pour remplir la rangée, bouton centré */
@media (max-width: 760px) { .its-social-suggest li { flex: 0 0 140px; } }

/* Carrousel générique (Félix 22/10) : rangée qui défile + flèches précédent/suivant,
   grisées en bout de rangée, masquées quand tout tient. Script : its-social-pane.js. */
.its-carrousel { position: relative; }
.its-carrousel-track { scroll-behavior: smooth; scrollbar-width: none; }
.its-carrousel-track::-webkit-scrollbar { display: none; }
.its-carrousel-btn { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -24px; padding: 0; border: 0; background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); cursor: pointer; box-shadow: 0 4px 14px rgba(28, 61, 52, .25); }
.its-carrousel-btn.is-prev { left: -12px; }
.its-carrousel-btn.is-next { right: -12px; }
.its-carrousel-btn:disabled { opacity: 0; pointer-events: none; }
.its-carrousel-btn:focus-visible { outline: 2px solid var(--teal, #1c3d34); outline-offset: 2px; }
.its-carrousel.is-court .its-carrousel-btn { display: none; }
@media (max-width: 760px) { .its-carrousel-btn { display: none; } } /* au doigt sur mobile */

/* Cartes « À suivre » harmonisées (Félix 22/10) : même largeur, logo même taille, nom sur 2 lignes
   au plus (hauteur réservée), bouton toujours au même niveau. */
.its-social-suggest li { flex: 0 0 180px; min-width: 0; }
.its-social-suggest-ava { flex: 0 0 auto; width: 72px; height: 72px; object-fit: contain; }
.its-social-suggest-nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; min-height: 2.5em; line-height: 1.25; }
@media (max-width: 760px) { .its-social-suggest li { flex: 0 0 150px; } }

/* Joueurs « À suivre » façon trombinoscope de la fiche équipe (Félix 22/10) : photo en grand
   cadrée sur le visage, sinon le maillot du club et les initiales, sur le vert des fiches.
   Zone visuelle de 136 px pour toutes les cartes (logo, avatar ou joueur) : cartes alignées. */
.its-social-suggest li > .its-social-suggest-ava { width: 100%; height: 120px; margin: 0; padding: 20px; box-sizing: border-box; object-fit: contain; background: transparent; }
.its-social-suggest li > span.its-social-suggest-ava { width: 72px; height: 72px; margin: 24px auto; padding: 0; background: #efefef; }
.its-suggest-visu { position: relative; display: block; flex: 0 0 auto; width: calc(100% + 24px); height: 136px; margin: -16px -12px 0; overflow: hidden; background: #2A5246; }
.its-suggest-ph { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; }
.its-suggest-ph.has-photo { padding: 0; }
.its-suggest-ph > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.its-suggest-ph .fd-maillot { width: 52%; height: auto; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35)); }

/* « À suivre » : joueurs et clubs en cartes du trombinoscope (module de la fiche équipe), bouton dessous. */
.its-social-suggest li.is-carte { gap: 10px; padding: 0; background: transparent; }
.its-social-suggest li.is-carte .fd-trombi { display: block; width: 100%; }
.its-social-suggest li.is-carte .its-page-follow-btn { margin: 0 auto; }
/* Le bouton Suivre dans la carte (Félix 22/10) : posé sur son pied, hors du bouton qui retourne la carte. */
.its-social-suggest li.is-carte { position: relative; }
.its-social-suggest li.is-carte .fd-tr-txt { padding-bottom: 50px; }
.its-social-suggest li.is-carte .fd-tr-dos { padding-bottom: 50px; }
.its-social-suggest li.is-carte .its-page-follow-btn { position: absolute; left: 50%; bottom: 12px; z-index: 3; margin: 0; transform: translateX(-50%); border-color: var(--vanilla, #f2e5d2); background: var(--vanilla, #f2e5d2); color: var(--teal, #1c3d34); }
.its-social-suggest li.is-carte .its-page-follow-btn.is-following { background: transparent; color: var(--vanilla, #f2e5d2); }
/* Survol du bouton = survol de la carte : le verso reste ouvert (mêmes règles que .fd-tr:hover, itsrugby-fiche-d.css). */
@media (hover: hover) {
  .its-social-suggest li.is-carte:hover .fd-tr .fd-tr-face { visibility: visible; }
  .its-social-suggest li.is-carte:hover .fd-tr .fd-tr-face::after { background: rgba(20, 44, 37, .55); }
  .its-social-suggest li.is-carte:hover .fd-tr .fd-tr-dos { visibility: visible; transform: translateY(0); }
  .its-social-suggest li.is-carte:hover .fd-tr .fd-tr-dos > * { opacity: 1; }
}
/* :is() du module compte l'id #sec-effectif : même préfixe pour passer devant. */
:is(body.its-fiche-d #sec-effectif, .its-trombi-carte) li.is-carte .fd-trombi .fd-tr { aspect-ratio: 2 / 3; }
@media (max-width: 760px) { .its-social-suggest li.is-carte { flex: 0 0 170px; } } /* un peu plus haute qu'au trombinoscope : le verso garde « Voir sa fiche » au-dessus du bouton */
@media (max-width: 760px) {
  .its-social-suggest li.is-carte .fd-tr-txt, .its-social-suggest li.is-carte .fd-tr-dos { padding-bottom: 44px; }
  .its-social-suggest li.is-carte .its-page-follow-btn { bottom: 9px; }
}
/* Fil de secours (rien à montrer chez les gens suivis) : une ligne sur la vanille, pas de panneau. */
.its-social-feed-secours { margin: 0 0 14px; font-size: 14px; font-weight: 600; color: rgba(28, 61, 52, .75); }
/* Fil unique (Félix 22/10) : la fiche suivie qui fait remonter l'article, au-dessus du titre. */
.its-social-feed-raison { align-self: flex-start; padding: 2px 7px; background: var(--vanilla, #f2e5d2); color: var(--teal, #1c3d34); font-size: 11px; font-weight: 800; line-height: 1.4; text-shadow: none; }
/* Résultats des clubs suivis (Félix 22/10) : la bande « Stats à retenir » de la home (its_home_d_zone_score,
   itsrugby-home-d.css). Ici seulement sa place dans la grille du fil. */
.its-social-res-hd { grid-column: 1 / -1; overflow: visible; background: transparent; }
.its-social-res-hd .hd-chiffres-bande { margin: 0; padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 28px) clamp(22px, 2.6vw, 34px); }
/* « Mes compétitions » : lignes du bloc Compétitions de la home, 3e rangée de la bande teal des stats. */
.its-fil-comps { display: flex; flex-direction: column; gap: 6px; margin-top: clamp(28px, 3vw, 40px); padding-top: 12px; border-top: 1px solid rgba(242, 229, 210, .22); }
.hd .its-fil-comps .hd-zone-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: 24px; }
.hd .its-fil-comps .hd-zone-liste li { border-bottom-color: rgba(242, 229, 210, .14); }
.hd .its-fil-comps .hd-comp-nom { color: var(--hd-vanilla); }
.hd .its-fil-comps .hd-comp-lead-t { color: var(--hd-second); }
@media (max-width: 768px) { .hd .its-fil-comps .hd-zone-liste { grid-template-columns: minmax(0, 1fr); } }
/* « Voir plus » sous la grille de Mon fil (Félix 22/10) : bouton teal plein, centré. */
.its-social-feed-plus { display: flex; justify-content: center; margin-top: 24px; }
.its-social-feed-plus-btn { padding: 12px 28px; border: 0; background: var(--teal, #1c3d34); color: var(--vanilla, #f2e5d2); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.its-social-feed-plus-btn:hover { background: #2c5a4d; }
.its-social-feed-plus-btn:focus-visible { outline: 3px solid var(--sage, #abc8a2); outline-offset: 3px; }
.its-social-feed-plus-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
/* Carrousels du fil (« À suivre », « Mes joueurs ») : 4 cartes visibles par ligne, la largeur des
   articles ; 2 en mobile ; flèches au-delà (Félix 22/10). Cartes larges : format 3:4 du trombinoscope. */
.its-social-suggest .its-carrousel-track > li { flex: 0 0 calc((100% - 36px) / 4); min-width: 0; }
:is(body.its-fiche-d #sec-effectif, .its-trombi-carte) .its-carrousel-track > li.is-carte .fd-trombi .fd-tr { aspect-ratio: 3 / 4; }
@media (max-width: 768px) {
  .its-social-suggest .its-carrousel-track > li { flex: 0 0 calc((100% - 12px) / 2); }
  :is(body.its-fiche-d #sec-effectif, .its-trombi-carte) .its-carrousel-track > li.is-carte .fd-trombi .fd-tr { aspect-ratio: 2 / 3; }
}
/* « Mes joueurs » : pas de bouton Suivre dans la carte, donc pas de place réservée en bas. */
.its-social-suggest.its-fil-mes-joueurs li.is-carte:not(.is-suggere) .fd-tr-txt { padding-bottom: 12px; }
.its-social-suggest.its-fil-mes-joueurs li.is-carte:not(.is-suggere) .fd-tr-dos { padding-bottom: 10px; }