/* =============================================================================
 * 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;
}
.its-social-notifs-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.its-social-notif {
    background:var(--white);
    border:1px solid var(--border);
    padding:12px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    font-size:14px;
    color:var(--teal);
}
.its-social-notif.is-unread {
    background:var(--vanilla);
    border-color:var(--teal);
}
.its-social-notif-dot {
    display:inline-block;
    width:8px;
    height:8px;
    background:var(--teal, #1C3D34);
    flex-shrink:0;
    margin-right:8px;
}
.its-social-notif a {
    color:inherit;
    text-decoration:none;
    flex:1;
}
.its-social-notif a:hover { text-decoration:underline; }
.its-social-notif-when {
    font-size:11px;
    color:var(--muted);
    text-transform:none;
    letter-spacing:0;
    flex-shrink:0;
}

/* ---------- Responsive ---------- */
@media (max-width:680px) {
    .its-social-row {
        flex-wrap:wrap;
        padding:12px 14px;
    }
    .its-social-row-info {
        flex-basis:calc(100% - 62px);
    }
    /* 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 14px; padding: 14px 16px; background: #fff; border: 1px solid rgba(28, 61, 52, .1); 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 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.its-prof-v2 .its-social-profile-feed > * { min-width: 0; margin: 0; }
.its-prof-v2 .its-social-profile-feed .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 { aspect-ratio: 3 / 4; }
.its-prof-v2 .its-social-profile-feed .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 { 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 { 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 { 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 { 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 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .its-prof-v2 .its-social-profile-feed .its-social-feed-cine-txt { padding: 10px; gap: 4px; }
  .its-prof-v2 .its-social-profile-feed .its-social-feed-cine .its-social-feed-title { font-size: 14px; }
  .its-prof-v2 .its-social-profile-feed .its-social-feed-cine-meta { font-size: 11px; }
  .its-prof-v2 .its-social-profile-feed .its-social-feed-footer { padding: 6px 8px; }
  .its-prof-v2 .its-social-profile-feed .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 { font-size: 13px; }
.its-prof-v2 .its-social-profile-feed .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-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-msg { 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 { max-width: 640px; }
/* 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; }
:is(.its-gfb-aside, #gfb-evenements) .its-aside-box { padding: 18px 20px; border: 0; }
:is(.its-gfb-aside, #gfb-evenements) .its-aside-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
:is(.its-gfb-aside, #gfb-evenements) .its-gfb-about { font-size: 14px; }
/* Actions : bouton contour teal sur toute la largeur. */
:is(.its-gfb-aside, #gfb-evenements) .its-event-new, :is(.its-gfb-aside, #gfb-evenements) .its-adminreq > summary { display: block; margin-top: 12px; }
:is(.its-gfb-aside, #gfb-evenements) .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-event-new a:hover, :is(.its-gfb-aside, #gfb-evenements) .its-event-new a:focus-visible { background: var(--teal, #1C3D34); color: var(--vanilla, #F2E5D2); }
:is(.its-gfb-aside, #gfb-evenements) .its-event-new + p, .its-gfb-aside p:has(> .its-event-new) { margin: 0; }
/* Prochain match : affiche en grand, date, compétition. */
:is(.its-gfb-aside, #gfb-evenements) .its-next-match { background: var(--teal, #1C3D34); color: var(--vanilla, #F2E5D2); }
:is(.its-gfb-aside, #gfb-evenements) .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-next-match-teams, :is(.its-gfb-aside, #gfb-evenements) .its-next-match-teams a { font-size: 18px; line-height: 1.25; color: var(--vanilla, #F2E5D2); }
:is(.its-gfb-aside, #gfb-evenements) .its-next-match-when { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--vanilla, #F2E5D2); }
:is(.its-gfb-aside, #gfb-evenements) .its-next-match-comp { color: rgba(242, 229, 210, .7); }
:is(.its-gfb-aside, #gfb-evenements) .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-next-match .its-event-new a:hover, :is(.its-gfb-aside, #gfb-evenements) .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-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-bar-list { gap: 0; margin: 0; }
:is(.its-gfb-aside, #gfb-evenements) .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-bar-item:first-child { padding-top: 0; }
:is(.its-gfb-aside, #gfb-evenements) .its-bar-name { grid-column: 1; font-size: 14px; }
:is(.its-gfb-aside, #gfb-evenements) .its-bar-addr { grid-column: 1; font-size: 12.5px; }
:is(.its-gfb-aside, #gfb-evenements) .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-bar-item .its-event-new a { padding: 6px 10px; font-size: 12.5px; }
:is(.its-gfb-aside, #gfb-evenements) .its-group-bars .its-group-all { display: block; margin-top: 12px; font-size: 13.5px; }
:is(.its-gfb-aside, #gfb-evenements) .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; }
}