:root {
    --primary: #06C07E;
    --primary-dark: #05A36B;
    --primary-light: rgba(6,192,126,0.1);
    --primary-mid: rgba(6,192,126,0.18);
    --accent: #F43F5E;
    --accent2: #F59E0B;
    --accent3: #6366F1;
    --card: #FFFFFF;
    --card2: #F7F9FC;
    --bg: #F0F4FA;
    --bg2: #E8EDF6;
    --text: #1E293B;
    --text-muted: #64748B;
    --text-light: #94A3B8;
    --border: rgba(30,41,59,0.09);
    --border-strong: rgba(30,41,59,0.16);
    --glow: 0 8px 28px rgba(6,192,126,0.22);
    --glow2: 0 8px 28px rgba(99,102,241,0.18);
    --dark3: #E8EDF6;
    --shadow-xs: 0 1px 3px rgba(30,41,59,0.06);
    --shadow: 0 3px 14px rgba(30,41,59,0.09);
    --shadow-md: 0 6px 28px rgba(30,41,59,0.11);
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; }
  body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; }

  /* ===== MOBILE PERFORMANCE ===== */
  /* Supprime le délai 300ms sur les éléments interactifs iOS/Android */
  a, button, [onclick], input, select, textarea, label { touch-action: manipulation; }
  /* Supprime le flash bleu au tap sur Android Chrome */
  * { -webkit-tap-highlight-color: transparent; }
  /* Évite la sélection de texte accidentelle au swipe */
  button, [role="button"], .nav-hamburger, .sidebar-nav-item,
  .card, .conv-item, .search-tab, .profile-tab { user-select: none; -webkit-user-select: none; }
  /* Améliore le défilement sur iOS (momentum scroll) */
  .app-sidebar, .chat-messages-wrap, .feed-main,
  .modal-overlay .modal { -webkit-overflow-scrolling: touch; }

  /* ===== SCROLLBAR ===== */
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: var(--dark3); }
  ::-webkit-scrollbar-thumb { background: var(--primary); border-radius:10px; }

  /* ===== NAVBAR ===== */
  nav {
    position: fixed; top:0; left:0; right:0; z-index:1000;
    display: flex; align-items:center; justify-content:space-between;
    padding: 0 28px 0 16px; height: 64px;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 16px rgba(30,41,59,0.06);
  }
  .nav-left { display:flex; align-items:center; gap:4px; }
  .nav-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 27px; letter-spacing:3px;
    background: linear-gradient(135deg, var(--primary) 30%, #0EA5E9 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    cursor: pointer;
  }
  .nav-btn-login {
    padding: 7px 18px; border-radius:8px; cursor:pointer;
    font-size: 14px; font-weight:600;
    border: 1.5px solid var(--primary); color: var(--primary);
    background: transparent; transition: all 0.2s;
  }
  .nav-btn-login:hover { background: var(--primary); color: #fff; }
  .nav-btn-cta {
    padding: 7px 18px; border-radius:8px; cursor:pointer;
    font-size: 14px; font-weight:700;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border: none; transition: all 0.2s;
    box-shadow: 0 3px 12px rgba(6,192,126,0.3);
  }
  .nav-btn-cta:hover { transform:translateY(-2px); box-shadow: 0 6px 20px rgba(6,192,126,0.4); }
  .nav-hamburger { display:flex; flex-direction:column; gap:5px; cursor:pointer; padding:6px; border-radius:8px; transition:background 0.2s; }
  .nav-hamburger:hover { background: var(--dark3); }
  .nav-hamburger span { width:20px; height:2px; background:var(--text); border-radius:2px; transition:0.3s; }

  /* Nav icon-only buttons (mobile) */
  .nav-btn-icon {
    width:38px; height:38px; border-radius:8px; cursor:pointer;
    font-size:18px; border: 1.5px solid var(--primary); color: var(--primary);
    background: transparent; transition: all 0.2s;
    display:none; align-items:center; justify-content:center;
  }
  .nav-btn-icon:hover { background: var(--primary); }
  /* Text label inside landing nav buttons — hidden on mobile */
  .nav-btn-label { display:inline; }

  @media(max-width:600px) {
    #nav-landing { gap:12px !important; }
    .nav-btn-label { display:none; }
    .nav-btn-login.nav-shortcut {
      padding: 0;
      width: 34px; height: 34px;
      display: flex; align-items:center; justify-content:center;
      font-size: 16px;
    }
    #nav-auth .nav-btn-login { padding: 6px 10px; font-size:12px; }
    #nav-auth .nav-btn-cta  { padding: 6px 10px; font-size:12px; }
  }
  /* Très petit écran : masquer "S'inscrire", garder seulement "Connexion" */
  @media(max-width:420px) {
    #nav-auth .nav-btn-cta { display:none; }
    #nav-auth .nav-btn-login {
      padding: 6px 12px; font-size:12px;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: #fff; border-color: transparent;
    }
    nav { padding:0 8px; }
    .nav-logo img { height:36px !important; }
    .nav-logo svg { width:28px !important; height:28px !important; }
  }
  .nav-btn-login.nav-shortcut.guest-nav-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }

  /* ===== PAGES ===== */
  .page { display:none; min-height:100vh; padding-top: 64px; }
  .page.active { display:block; }

  /* ===== APP LAYOUT WITH PERSISTENT SIDEBAR ===== */
  .app-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 64px);
    padding-top: 64px;
  }
  .app-sidebar {
    position: fixed; top: 64px; left: 0; width: 240px;
    height: calc(100vh - 64px); overflow-y: auto;
    background: var(--card); border-right: 1px solid var(--border);
    padding: 16px; z-index: 900;
    transition: transform 0.3s ease;
  }
  .app-sidebar.hidden { transform: translateX(-100%); }
  .app-main { margin-left: 240px; min-height: calc(100vh - 64px); }

  /* Sidebar items */
  .sidebar-nav { background: transparent; border: none; padding: 0; }
  .sidebar-user {
    display:flex; align-items:center; gap:12px; padding:13px 14px;
    margin-bottom:10px; border-radius:16px;
    background: linear-gradient(135deg, rgba(6,192,126,0.08), rgba(14,165,233,0.06));
    border: 1px solid rgba(6,192,126,0.15);
  }
  .avatar {
    width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--primary),#00A8E8);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; color:#fff; flex-shrink:0;
  }
  .avatar.sm { width:36px; height:36px; font-size:13px; }
  .avatar.lg { width:80px; height:80px; font-size:28px; }
  .sidebar-user-info .name { font-weight:700; font-size:14px; color: var(--text); }
  .sidebar-user-info .role { font-size:12px; color:var(--primary); font-weight:600; }
  .sidebar-section-label {
    font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px;
    color:var(--text-muted); padding: 12px 12px 4px; margin-top:4px;
  }
  .sidebar-nav-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 13px; border-radius:10px; cursor:pointer;
    font-size:13.5px; font-weight:500; color:var(--text-muted);
    transition:all 0.18s; margin-bottom:2px;
  }
  .sidebar-nav-item:hover { background:var(--bg); color:var(--text); transform:translateX(2px); }
  .sidebar-nav-item.active {
    background: linear-gradient(90deg, rgba(6,192,126,0.13), rgba(6,192,126,0.04));
    color:var(--primary); font-weight:700;
    border-left:3px solid var(--primary); padding-left:10px;
  }
  .sidebar-nav-item .icon { font-size:16px; width:20px; text-align:center; }
  .badge {
    margin-left:auto; background:var(--accent); color:white;
    font-size:11px; font-weight:700; padding:2px 7px; border-radius:100px;
  }
  .sidebar-stats {
    background: linear-gradient(135deg, #F0FDF8, #EFF6FF);
    border: 1px solid rgba(6,192,126,0.15);
    border-radius:14px; padding:14px; margin-top:14px;
  }
  .sidebar-stats-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); margin-bottom:10px; }
  .sidebar-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .sidebar-stat-box { text-align:center; background:var(--card); border-radius:8px; padding:10px; }
  .sidebar-stat-num {
    font-family:'Bebas Neue',sans-serif; font-size:22px; line-height:1;
    background: linear-gradient(135deg, var(--primary), #0EA5E9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .sidebar-stat-label { font-size:10px; color:var(--text-muted); margin-top:2px; }
  .hero {
    position: relative; overflow:hidden;
    min-height: 0;
    display: flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center; padding: 72px 20px 64px;
  }
  @media(max-width:600px) {
    .hero { padding: 48px 16px 40px; }
  }
  .hero-bg {
    position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(ellipse 75% 55% at 50% 20%, rgba(6,192,126,0.13) 0%, transparent 65%),
      radial-gradient(ellipse 55% 45% at 85% 75%, rgba(14,165,233,0.09) 0%, transparent 60%),
      radial-gradient(ellipse 45% 35% at 12% 65%, rgba(99,102,241,0.07) 0%, transparent 55%),
      linear-gradient(160deg, #FFFFFF 0%, #F0FDFA 40%, #EFF6FF 75%, #F8FAFC 100%);
  }
  .hero-grid {
    position:absolute; inset:0; z-index:0;
    background-image:
      linear-gradient(rgba(30,41,59,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(30,41,59,0.03) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 88% 82% at 50% 42%, black 0%, transparent 78%);
  }
  .hero-tag {
    display:inline-flex; align-items:center; gap:8px;
    padding: 7px 18px; border-radius:100px;
    background: linear-gradient(135deg, rgba(6,192,126,0.1), rgba(14,165,233,0.07));
    border: 1px solid rgba(6,192,126,0.28);
    font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
    color: var(--primary); margin-bottom:28px; position:relative; z-index:1;
    animation: fadeInDown 0.6s ease;
    box-shadow: 0 2px 14px rgba(6,192,126,0.14);
  }
  .hero h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 0.95; letter-spacing:2px;
    margin-bottom: 24px; position:relative; z-index:1;
    color: var(--text);
    animation: fadeInUp 0.7s ease;
  }
  .hero h1 span { color: var(--primary); }
  .hero p {
    font-size: clamp(16px,2.5vw,20px); max-width:680px; line-height:1.7;
    color: var(--text-muted); margin-bottom:40px;
    position:relative; z-index:1; animation: fadeInUp 0.8s ease;
  }
  .hero-btns { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; position:relative; z-index:1; animation: fadeInUp 0.9s ease; }
  .btn-hero-primary {
    padding: 14px 34px; border-radius:12px; font-size:16px; font-weight:700;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border:none; cursor:pointer;
    transition: all 0.22s; box-shadow: 0 4px 20px rgba(6,192,126,0.35);
  }
  .btn-hero-primary:hover { transform:translateY(-3px); box-shadow: 0 10px 36px rgba(6,192,126,0.45); }
  .btn-hero-secondary {
    padding: 14px 32px; border-radius:12px; font-size:16px; font-weight:600;
    background: var(--card); color: var(--text); border:1px solid var(--border); cursor:pointer;
    transition: all 0.2s; box-shadow: 0 2px 8px rgba(26,34,54,0.08);
  }
  .btn-hero-secondary:hover { background: var(--dark3); border-color: rgba(26,34,54,0.2); }

  .hero-stats {
    display:flex; gap:48px; flex-wrap:wrap; justify-content:center;
    margin-top:60px; position:relative; z-index:1; animation: fadeInUp 1s ease;
  }
  .hero-stat { text-align:center; }
  .hero-stat-num {
    font-family:'Bebas Neue',sans-serif; font-size:52px; line-height:1;
    background: linear-gradient(135deg, var(--primary), #0EA5E9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .hero-stat-label { font-size:13px; color:var(--text-muted); font-weight:500; margin-top:4px; }

  /* features section */

  /* ===== LANDING ===== */
  .section { padding: 80px 32px; max-width:1200px; margin:0 auto; }
  .section-title {
    font-family:'Bebas Neue',sans-serif; font-size:clamp(36px,5vw,54px);
    text-align:center; margin-bottom:12px; letter-spacing:1px;
  }
  .section-sub { text-align:center; color:var(--text-muted); font-size:16px; max-width:560px; margin:0 auto 52px; line-height:1.7; }
  .features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  @media(max-width:480px) {
    .features-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .feature-card { padding:18px 14px; }
    .feature-card h3 { font-size:15px; }
    .feature-card p { font-size:13px; }
    .feature-icon { font-size:28px; margin-bottom:10px; }
  }
  .feature-card {
    background: var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:32px 28px; transition: all 0.3s; cursor:default;
    position:relative; overflow:hidden;
    box-shadow: var(--shadow-xs);
  }
  .feature-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background: linear-gradient(90deg, var(--primary), #0EA5E9);
    opacity:0; transition:0.3s;
  }
  .feature-card:hover { transform:translateY(-6px); border-color:rgba(6,192,126,0.2); box-shadow: var(--glow); }
  .feature-card:hover::before { opacity:1; }
  .feature-icon { font-size:32px; margin-bottom:16px; }
  .feature-card h3 { font-size:18px; font-weight:700; margin-bottom:10px; }
  .feature-card p { font-size:14px; color:var(--text-muted); line-height:1.6; }

  /* ===== FEED / HOME ===== */
  .app-layout {
    display:grid; grid-template-columns:minmax(0,680px) 300px;
    gap:24px; padding:24px 24px 24px 0; max-width:1040px; margin:0;
  }
  /* Colonne droite */
  .sidebar-right { padding-top:48px; }
  /* Events : flux normal — scrollent avec la page */
  .sidebar-right-events { }
  /* Bannière : fixed permanent, positionnée par JS */
  .sidebar-right-ad {
    position:fixed;
    z-index:5;
    display:none;
  }
  /* ===== BANNIÈRE PUB ===== */
  .ad-banner-widget {
    border-radius:14px; overflow:hidden;
    border:1px solid var(--border); background:var(--card);
    box-shadow:var(--shadow-xs);
  }
  .ad-banner-label {
    font-size:9px; font-weight:700; color:var(--text-light);
    text-transform:uppercase; letter-spacing:1px;
    text-align:right; padding:4px 10px 0;
  }
  .ad-banner-img {
    display:block; width:100%; cursor:pointer;
    transition:opacity 0.2s;
  }
  .ad-banner-img:hover { opacity:0.92; }

  /* ===== PUB IN-FEED ===== */
  .infeed-ad-card {
    background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius); overflow:hidden;
    box-shadow:var(--shadow-xs); margin-bottom:16px;
    transition:box-shadow 0.2s;
  }
  .infeed-ad-card:hover { box-shadow:var(--shadow-md); }
  .infeed-ad-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 16px 6px;
  }
  .infeed-ad-label {
    font-size:10px; font-weight:700; color:var(--text-light);
    text-transform:uppercase; letter-spacing:1px;
    background:var(--bg2); border-radius:4px; padding:2px 7px;
  }
  .infeed-ad-img {
    width:100%; display:block; cursor:pointer;
    max-height:320px; object-fit:cover;
    transition:opacity 0.2s;
  }
  .infeed-ad-img:hover { opacity:0.93; }
  .infeed-ad-footer {
    padding:12px 16px 14px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
  }
  .infeed-ad-advertiser {
    font-size:12px; font-weight:700; color:var(--text-muted);
  }
  .infeed-ad-cta {
    padding:8px 20px; border-radius:8px; cursor:pointer;
    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:#fff; border:none; font-size:13px; font-weight:700;
    font-family:'Outfit',sans-serif; transition:all 0.2s; white-space:nowrap;
    box-shadow:0 3px 10px rgba(6,192,126,0.28);
  }
  .infeed-ad-cta:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(6,192,126,0.38); }

  /* Feed */
  .feed-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
  .feed-header h2 { font-size:20px; font-weight:700; }
  .tabs { display:flex; gap:4px; background:var(--bg); border-radius:12px; padding:4px; border:1px solid var(--border); }
  .tab { padding:6px 16px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; color:var(--text-muted); transition:all 0.2s; }
  .tab.active { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; box-shadow:0 2px 10px rgba(6,192,126,0.3); }

  /* Post composer */
  .post-composer {
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:20px; margin-bottom:20px; box-shadow: var(--shadow-xs);
  }
  .composer-top { display:flex; gap:12px; align-items:flex-start; }
  .composer-input {
    flex:1; background:var(--bg); border:1.5px solid var(--border); border-radius:10px;
    padding:12px 16px; color:var(--text); font-family:'Outfit',sans-serif; font-size:14px;
    resize:none; min-height:80px; transition:border-color 0.2s; outline:none;
  }
  .composer-input:focus { border-color:var(--primary); }
  .composer-input::placeholder { color:var(--text-muted); }
  #rt-mj::placeholder, #rt-v::placeholder, #rt-n::placeholder, #rt-d::placeholder, #rt-pts::placeholder { color:#B0BBCC; font-weight:400; }
  #rt-comp.placeholder-grey, #rt-nom.placeholder-grey,
  #rt-zone.placeholder-grey, #rt-myclub.placeholder-grey { color:#B0BBCC; font-weight:400; }
  .composer-actions { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
  .composer-tools { display:flex; gap:8px; }
  .composer-tool {
    width:34px; height:34px; border-radius:8px; border:1px solid var(--border);
    background:transparent; cursor:pointer; font-size:16px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); transition:all 0.2s;
  }
  .composer-tool:hover { background:var(--dark3); color:var(--text); }
  .btn-post {
    padding:8px 20px; background:var(--primary); color:#fff;
    border:none; border-radius:8px; font-weight:700; font-size:14px; cursor:pointer;
    transition:all 0.2s;
  }
  .btn-post:hover { background:var(--primary-dark); transform:translateY(-1px); }

  /* Post card */

  /* Textes longs dans toutes les cartes */
  .post-card, .post-card * { word-break:break-word; overflow-wrap:break-word; }
  .event-card-meta, .event-meta-line { word-break:break-word; }
  .post-card {
    background:var(--card); border:1px solid var(--border); border-radius:16px;
    padding:14px 16px; margin-bottom:8px; transition:border-color 0.2s;
    word-break:break-word; overflow-wrap:break-word;
    animation: fadeInUp 0.4s ease;
  }
  .post-card:hover { border-color:rgba(0,194,122,0.25); box-shadow:0 4px 16px rgba(26,34,54,0.1); }
  .post-header { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
  .post-user-info .name { font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px; }
  .verified { color:var(--primary); font-size:13px; }
  .post-user-info .meta { font-size:12px; color:var(--text-muted); }
  .post-sport-tag {
    margin-left:auto; padding:4px 10px; border-radius:100px;
    background:rgba(0,194,122,0.1); border:1px solid rgba(0,194,122,0.25);
    font-size:11px; font-weight:700; color:var(--primary);
  }
  .post-content { font-size:14px; line-height:1.6; color:var(--text); margin-bottom:8px; word-break:break-word; overflow-wrap:break-word; }
  .post-see-more-btn {
    display:inline-block; margin-top:4px; background:none; border:none;
    color:var(--primary); font-size:13px; font-weight:700; cursor:pointer;
    padding:0; font-family:'Outfit',sans-serif; letter-spacing:0.2px;
    transition:opacity 0.15s;
  }
  .post-see-more-btn:hover { opacity:0.75; text-decoration:underline; }
  .post-ellipsis { color:var(--text-muted); }
  .post-image {
    width:100%; border-radius:12px; height:220px; object-fit:cover;
    background:var(--bg); margin-bottom:14px; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-size:60px;
    overflow:hidden; position:relative;
  }
  .post-image-inner { font-size:80px; opacity:0.3; }
  .post-photo-wrap {
    position:relative; overflow:hidden; border-radius:12px;
    margin-top:10px; background:#000; max-height:280px;
  }
  .post-photo-blur {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; filter:blur(22px) brightness(0.6) saturate(1.2);
    transform:scale(1.15); pointer-events:none; z-index:0;
  }
  .post-photo-main {
    position:relative; z-index:1; display:block;
    width:100%; max-height:280px; object-fit:contain;
    margin:0 auto;
  }
  .post-actions { display:flex; gap:4px; border-top:1px solid var(--border); padding-top:6px; margin-top:8px; }
  .post-action {
    flex:1; display:flex; align-items:center; justify-content:center; gap:5px;
    padding:5px 8px; border-radius:8px; cursor:pointer;
    font-size:12px; font-weight:500; color:var(--text-muted);
    transition:all 0.2s; border:none; background:transparent;
  }
  .post-action:hover { background:var(--bg); color:var(--text); }
  .post-action.liked { color:var(--accent); }
  .post-action.post-action-active { color:var(--primary); background: rgba(6,192,126,0.08); }
  .post-menu-item {
    padding:10px 16px; font-size:13px; font-weight:600; cursor:pointer;
    color:var(--text); transition:background 0.15s;
  }
  .post-menu-item:hover { background:var(--bg); }
  .post-menu-danger { color:#ef4444; }
  .post-menu-danger:hover { background:#fee2e2; }

  /* Right sidebar */
  .widget { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:16px; box-shadow:var(--shadow-xs); }
  .widget-title { font-size:11px; font-weight:700; margin-bottom:14px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }
  .athlete-suggest { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .athlete-suggest .info .name { font-size:13px; font-weight:600; }
  .athlete-suggest .info .sport { font-size:11px; color:var(--text-muted); }
  .btn-follow {
    margin-left:auto; padding:5px 14px; border-radius:8px;
    border:1.5px solid var(--primary); color:#fff; background:var(--primary);
    font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; white-space:nowrap;
  }
  .btn-follow:hover { opacity:0.85; }
  .btn-follow.following { background:transparent; color:var(--primary); border-color:var(--primary); }
  .btn-follow.following:hover { background:rgba(6,192,126,0.08); }

  .event-mini { display:flex; align-items:stretch; gap:10px; padding:10px 12px; margin-bottom:8px; border-radius:12px; cursor:pointer; border:1px solid var(--border); background:var(--bg); transition:transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
  .event-mini:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(6,192,126,0.13); border-color:rgba(6,192,126,0.35); }
  .event-mini-left { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:46px; max-width:46px; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border-radius:10px; padding:6px 10px; position:relative; overflow:hidden; flex-shrink:0; }
  @keyframes sf-spin { to { transform: rotate(360deg); } }
  @keyframes sf-date-pulse {
    0%,100% { box-shadow:none; }
    50% { box-shadow:0 0 10px rgba(6,192,126,0.35); }
  }
  .event-mini-day { font-size:18px; font-weight:800; color:#fff; line-height:1; white-space:nowrap; }
  .event-mini-month { font-size:10px; font-weight:700; color:#fff; text-transform:uppercase; opacity:0.85; margin-top:2px; white-space:nowrap; text-align:center; }
  .event-mini-right { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; overflow:hidden; }
  .event-mini-title { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color 0.2s; }
  .event-mini:hover .event-mini-title { color:var(--primary); }
  .event-mini-meta { font-size:11px; color:var(--text-muted); display:flex; align-items:center; gap:4px; overflow:hidden; }
  .event-mini-meta-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
  .event-mini-dist { white-space:nowrap; flex-shrink:0; font-weight:700; color:var(--primary); margin-left:2px; font-size:11px; }

  /* ===== SEARCH PAGE ===== */
  .search-hero {
    background:linear-gradient(135deg,#EEF2F8,#E4E9F2);
    border-bottom:1px solid var(--border); padding:32px 32px 20px;
    text-align:center;
  }
  .search-hero h2 { font-family:'Bebas Neue',sans-serif; font-size:48px; margin-bottom:12px; color:var(--text); }
  .search-bar-wrap { position:relative; max-width:600px; margin:0 auto; }
  .search-bar-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:18px; color:var(--text-muted); }
  .search-bar {
    width:100%; padding:14px 20px 14px 48px;
    background:var(--card); border:1.5px solid var(--border); border-radius:12px;
    color:var(--text); font-family:'Outfit',sans-serif; font-size:16px; outline:none;
    transition:border-color 0.2s; box-shadow:0 2px 8px rgba(26,34,54,0.06);
  }
  .search-bar:focus { border-color:var(--primary); }

  /* Lien Recherche avancée */
  .advanced-search-toggle {
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; font-weight:700;
    color:var(--primary); cursor:pointer; background:none;
    border:1.5px solid rgba(6,192,126,0.35); border-radius:100px;
    padding:6px 13px;
    font-family:'Outfit',sans-serif; transition:opacity 0.2s;
  }
  .advanced-search-toggle:hover { opacity:0.75; }
  .advanced-search-toggle .toggle-icon { font-size:14px; transition:transform 0.3s; }
  .advanced-search-toggle.open .toggle-icon { transform:rotate(90deg); }

  /* Filtres cachés par défaut, animés via JS scrollHeight */
  .search-filters {
    background:var(--card); border:1px solid var(--border); border-radius:16px;
    margin:0 0 0; /* no margin when closed */
    overflow:hidden; height:0;
    opacity:0;
    transition:height 0.35s cubic-bezier(0.4,0,0.2,1),
               opacity 0.25s ease,
               margin 0.35s cubic-bezier(0.4,0,0.2,1),
               padding 0.35s cubic-bezier(0.4,0,0.2,1),
               border-color 0.2s ease;
    border-color:transparent;
    padding:0 24px;
  }
  .search-filters.open {
    height:auto; /* overridden by JS */
    opacity:1;
    margin:0 0 20px;
    padding:20px 24px;
    border-color:var(--border);
  }

  /* Filtres évènements cachés par défaut */
  .events-filter-grid-wrap {
    overflow:hidden; max-height:0;
    transition:max-height 0.35s ease;
  }
  .events-filter-grid-wrap.open { max-height:300px; }
  .advanced-evt-toggle {
    display:inline-flex; align-items:center; gap:6px;
    font-size:13px; font-weight:700; color:var(--primary);
    cursor:pointer; background:none;
    border:1.5px solid rgba(6,192,126,0.35); border-radius:100px;
    padding:6px 13px;
    font-family:'Outfit',sans-serif; transition:opacity 0.2s;
  }
  .advanced-evt-toggle:hover { opacity:0.75; }
  .advanced-evt-toggle .toggle-icon { font-size:14px; transition:transform 0.3s; }
  .advanced-evt-toggle.open .toggle-icon { transform:rotate(90deg); }
  .search-tabs { display:flex; gap:8px; justify-content:center; padding:16px 32px 12px; flex-wrap:wrap; }
  .search-tab {
    padding:8px 20px; border-radius:100px; cursor:pointer;
    font-size:13px; font-weight:600; color:var(--text-muted);
    border:1px solid var(--border); background:transparent; transition:all 0.2s;
  }
  .search-tab.active, .search-tab:hover { background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; border-color:var(--primary); box-shadow:0 3px 10px rgba(6,192,126,0.28); }

  .filter-group { display:flex; flex-direction:column; gap:6px; min-width:0; }
  .filter-group .filter-label { margin-bottom:0; }
  /* Search button cell: push button to bottom to align with sibling inputs */
  .filter-group-btn { display:flex; flex-direction:row; align-items:flex-end; gap:8px; min-width:0; }
  /* Responsive pour la grille athlètes */
  @media(max-width:900px) {
    #athleteFilters > div { grid-template-columns: repeat(2,1fr) !important; }
    #clubFilters > div, #academyFilters > div { grid-template-columns: repeat(2,1fr) !important; }
  }
  @media(max-width:560px) {
    #athleteFilters > div { grid-template-columns: 1fr !important; }
    #clubFilters > div, #academyFilters > div { grid-template-columns: 1fr !important; }
  }
  .filter-label { font-size:13px; font-weight:700; color:var(--text); text-transform:none; letter-spacing:0; }
  .filter-select, .filter-input {
    padding:9px 12px; background:var(--card); border:1.5px solid var(--border);
    border-radius:8px; color:#C2CAD8; font-family:'Outfit',sans-serif; font-size:12px; font-weight:400; outline:none;
    cursor:pointer; transition:border-color 0.2s, color 0.15s, font-weight 0.15s; height:40px; box-sizing:border-box; width:100%;
  }
  .filter-select:focus, .filter-input:focus { border-color:var(--primary); }
  /* Options dans les selects : toujours lisibles */
  .filter-select option { color:#111; font-size:13px; font-weight:500; }
  /* Placeholder des inputs : gris très clair */
  .filter-input::placeholder { color:#C2CAD8; font-size:12px; font-weight:400; }
  /* Valeur saisie dans un input texte : gris foncé gras */
  .filter-input:not(:placeholder-shown) {
    color: #1A202C !important; font-weight: 700 !important;
  }
  /* v100 FIX: Le champ Ville est un <input> qui hérite de filter-select (pas filter-input)
     après remplacement dynamique par updateCitySelect(). On force le texte saisi en foncé. */
  input.filter-select { color: var(--text) !important; }
  input.filter-select::placeholder { color:#C2CAD8; font-weight:400; }
  input.filter-select:not(:placeholder-shown) { color: #1A202C !important; font-weight: 700 !important; }
  /* Select avec valeur choisie (non vide) */
  .filter-select.filter-active {
    color: #1A202C !important; font-weight: 700 !important;
  }
  /* Date input : forcer le même gris que les autres champs */
  input[type="date"].event-date-input { color-scheme: light; }
  input[type="date"].event-date-input::-webkit-datetime-edit,
  input[type="date"].event-date-input::-webkit-datetime-edit-fields-wrapper,
  input[type="date"].event-date-input::-webkit-datetime-edit-day-field,
  input[type="date"].event-date-input::-webkit-datetime-edit-month-field,
  input[type="date"].event-date-input::-webkit-datetime-edit-year-field,
  input[type="date"].event-date-input::-webkit-datetime-edit-text,
  input[type="date"].event-date-input::-webkit-inner-spin-button { color: #C2CAD8 !important; font-weight: 400 !important; opacity: 1; }
  /* Date input avec valeur saisie : foncé gras */
  input[type="date"].event-date-input.filter-active::-webkit-datetime-edit,
  input[type="date"].event-date-input.filter-active::-webkit-datetime-edit-fields-wrapper,
  input[type="date"].event-date-input.filter-active::-webkit-datetime-edit-day-field,
  input[type="date"].event-date-input.filter-active::-webkit-datetime-edit-month-field,
  input[type="date"].event-date-input.filter-active::-webkit-datetime-edit-year-field,
  input[type="date"].event-date-input.filter-active::-webkit-datetime-edit-text { color: #1A202C !important; font-weight: 700 !important; }
  .filter-row { display:flex; gap:8px; }
  .filter-row .filter-input { width:auto; flex:1; height:40px; }
  /* Date input: show placeholder text when empty */
  input[type="date"]:not(:valid):before { content: attr(placeholder); color:#9AA3B8; }
  .btn-search-run {
    padding:10px 24px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:#fff; border:none; border-radius:8px; font-weight:700; font-size:14px; cursor:pointer; transition:all 0.22s;
    white-space:nowrap; align-self:flex-end;
    box-shadow: 0 3px 10px rgba(6,192,126,0.25);
  }
  .btn-search-run:hover { transform:translateY(-1px); box-shadow: 0 5px 18px rgba(6,192,126,0.35); }


  /* ===== RESET FILTER BUTTON ===== */
  .btn-reset-filters {
    height:40px; padding:0 16px;
    border-radius:8px;
    border:1.5px solid var(--border-strong);
    background:var(--card);
    color:var(--text-muted);
    font-family:'Outfit',sans-serif; font-size:13px; font-weight:600;
    cursor:pointer; white-space:nowrap;
    display:flex; align-items:center; gap:6px;
    transition:all 0.2s;
  }
  .btn-reset-filters:hover {
    border-color:var(--accent);
    color:var(--accent);
    background:#FFF5F7;
  }
  .btn-reset-events {
    padding:7px 16px; border-radius:8px;
    border:1.5px solid var(--border-strong);
    background:var(--card);
    color:var(--text-muted);
    font-family:'Outfit',sans-serif; font-size:13px; font-weight:600;
    cursor:pointer; white-space:nowrap;
    display:flex; align-items:center; gap:6px;
    transition:all 0.2s;
  }
  .btn-reset-events:hover {
    border-color:var(--accent);
    color:var(--accent);
    background:#FFF5F7;
  }

  /* ===== ATHLETE CARD — design PDF ===== */
  .results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; padding:0 0 40px; align-items:stretch; }
  .athlete-card {
    background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius-lg);
    overflow:hidden; transition:all 0.25s; cursor:pointer;
    display:flex; flex-direction:column; align-items:stretch;
    box-shadow: var(--shadow-xs);
  }
  .athlete-card:hover { transform:translateY(-5px); border-color:rgba(6,192,126,0.3); box-shadow:var(--glow); }

  /* Bannière haute — même format que event card */
  .athlete-card-top {
    height:160px; position:relative; overflow:hidden;
    background:#0d1520;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .athlete-card-top img { display:block; }
  .athlete-card-sport-banner {
    font-size:72px; opacity:0.35; user-select:none; position:absolute;
  }
  /* Avatar centré à l'intérieur de la bannière */
  .athlete-card-avatar {
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    width:64px; height:64px; border-radius:50%; border:3px solid rgba(255,255,255,0.2);
    box-shadow:0 2px 12px rgba(0,0,0,0.35);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:22px; color:#fff;
    flex-shrink:0; z-index:2;
    overflow:hidden;
  }

  /* Corps */
  .athlete-card-body { padding:16px 20px 14px; text-align:center; flex:1; display:flex; flex-direction:column; gap:4px; min-height:130px; }
  .athlete-card-name {
    font-weight:800; font-size:20px; margin-bottom:2px;
    display:flex; align-items:center; justify-content:center; gap:5px; color:var(--text);
    /* Empêche le débordement sur 2 lignes — ellipsis si le nom est trop long */
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    max-width:100%; min-width:0;
  }
  /* Le texte du nom lui-même (hors badges vérif/distance) doit aussi être tronqué */
  .athlete-card-name .card-name-text {
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;
  }
  .athlete-card-name .verified { color:var(--primary); font-size:13px; flex-shrink:0; }
  .athlete-card-role {
    font-size:12px; color:var(--text-muted); font-weight:600; margin-bottom:2px;
    display:flex; align-items:center; gap:4px;
    overflow:hidden; white-space:nowrap;
  }
  .athlete-card-role > span:first-child { flex-shrink:0; }
  .athlete-card-sport { font-size:13px; color:var(--primary); font-weight:700; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }



  /* Bouton corbeille supprimé — suppression via menu ⋮ uniquement */

  /* Filter active state — texte noir visible */
  .filter-select.filter-active,
  .filter-input.filter-active,
  input.filter-select.filter-active {
    color: #111 !important;
    font-weight: 700 !important;
    border-color: var(--primary) !important;
    background: var(--card) !important;
  }

  /* Tags — 2 lignes : infos (gris) + compétences (vert) */
  .athlete-card-tags { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-bottom:6px; }
  .tag {
    padding:3px 10px; border-radius:100px; font-size:11px; font-weight:600;
    background:var(--bg); border:1px solid var(--border); color:var(--text-muted);
  }
  .tag-skill {
    padding:3px 10px; border-radius:100px; font-size:11px; font-weight:600;
    background:rgba(0,194,122,0.08); border:1px solid rgba(0,194,122,0.25); color:var(--primary);
  }
  .stars { color:#FFB800; font-size:14px; margin:6px 0 10px; font-weight:600; }

  /* Boutons footer */
  .athlete-card-footer { display:flex; gap:10px; padding:0 20px 20px; margin-top:auto; }
  .btn-card-action {
    flex:1; padding:0 11px; height:46px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.2s;
  }
  .btn-card-primary { background:var(--primary); color:#fff; border:none; }
  .btn-card-primary:hover { background:var(--primary-dark); }
  .btn-card-primary.following { background:transparent; color:var(--primary); border:1.5px solid var(--primary); }
  .btn-card-primary.following:hover { background:rgba(6,192,126,0.08); }
  .btn-card-secondary {
    flex: 0 0 46px !important;
    max-width: 46px !important;
    min-width: 46px;
    height: 46px;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px !important;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn-card-secondary:hover {
    background: rgba(6,192,126,0.08);
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.08);
    box-shadow: 0 3px 12px rgba(6,192,126,0.18);
  }

  /* ===== EVENTS ===== */
  .events-header { padding:32px 0 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
  .events-header h2 { font-family:'Bebas Neue',sans-serif; font-size:42px; }
  .btn-create-event {
    padding:10px 22px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border:none; border-radius:10px; font-weight:700; font-size:14px; cursor:pointer;
    transition:all 0.22s; display:flex; align-items:center; gap:8px;
    box-shadow: 0 3px 12px rgba(6,192,126,0.28);
  }
  .btn-create-event:hover { transform:translateY(-2px); box-shadow: 0 6px 22px rgba(6,192,126,0.38); }
  .events-filters { padding:20px 32px; display:flex; flex-direction:column; gap:14px; }
  /* Grille 2 colonnes pour les filtres évènements */
  .events-filter-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;
    width:100%; max-width:680px;
  }
  .event-fgroup { display:flex; flex-direction:column; gap:6px; }
  /* Date filter input */
  @media(max-width:768px) {
    .events-filters { padding:12px 16px; gap:10px; }
    .events-filter-grid { max-width:100%; gap:10px 12px; }
  }
  .events-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; padding:0 0 40px; }
  /* ===== EVENT CARD — même format que athlete-card ===== */
  .event-card {
    cursor: default;
    background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; transition: all 0.25s;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-xs);
  }
  .event-card:hover { transform: translateY(-4px); border-color: rgba(6,192,126,0.25); box-shadow: var(--glow); }

  /* Bannière photo ou couleur */
  .event-card-banner {
    height: 160px; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #0d1520; flex-shrink: 0;
  }
  .event-card-banner-blur {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; filter: blur(22px) brightness(0.55) saturate(1.2);
    transform: scale(1.15); pointer-events: none; z-index: 0;
  }
  .event-card-banner-main {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center center;
  }
  .event-card-banner-emoji { font-size: 64px; position: relative; z-index: 1; }
  .event-type-badge {
    position: absolute; bottom: 10px; left: 10px;
    padding: 4px 10px; border-radius: 100px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    white-space: nowrap; z-index: 3;
  }
  .badge-detection { background:rgba(0,229,160,0.2); color:var(--primary); border:1px solid rgba(0,229,160,0.3); }
  .badge-tournament { background:rgba(255,184,0,0.2); color:var(--accent2); border:1px solid rgba(255,184,0,0.3); }
  .badge-match { background:rgba(255,61,90,0.2); color:var(--accent); border:1px solid rgba(255,61,90,0.3); }
  .badge-training { background:rgba(0,184,255,0.2); color:#00B8FF; border:1px solid rgba(0,184,255,0.3); }
  .badge-race { background:rgba(255,120,0,0.2); color:#FF7800; border:1px solid rgba(255,120,0,0.3); }
  .badge-exhibition { background:rgba(180,0,255,0.2); color:#B400FF; border:1px solid rgba(180,0,255,0.3); }
  .badge-stage { background:rgba(236,72,153,0.2); color:#ec4899; border:1px solid rgba(236,72,153,0.3); }
  .badge-other { background:rgba(120,120,120,0.2); color:#888; border:1px solid rgba(120,120,120,0.3); }

  /* Corps de la card */
  .event-card-body { padding: 12px 16px 12px; flex: 1; display: flex; flex-direction: column; gap: 0; }

  /* "Par: Nom du Membre" */
  .event-card-by {
    font-size: 12px; color: var(--text-muted); font-weight: 600; margin-bottom: 4px;
    display:flex; align-items:center; justify-content:space-between; gap:6px;
    min-width:0; overflow:hidden;
  }
  .event-card-by > span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
  .event-card-by span {
    color: var(--primary); cursor: pointer; transition: opacity 0.15s;
  }
  .event-card-by span:hover { opacity: 0.7; text-decoration: underline; }

  /* Titre en gras */
  .event-card-title { font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 6px; line-height: 1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Lignes de méta */
  .event-card-meta { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
  .event-meta-line { font-size: 13px; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* Footer : lien Voir à droite */
  .event-card-footer {
    display: flex; align-items: center; justify-content: flex-end;
    border-top: 1px solid var(--border); padding-top: 10px; margin-top: auto;
  }
  .event-card-voir {
    font-size: 13px; font-weight: 700; color: var(--primary);
    background: none; border: 1px solid transparent; cursor: pointer;
    padding: 5px 14px; border-radius: 20px;
    text-decoration: none; transition: all 0.18s;
  }
  .event-card-voir:hover {
    background: var(--primary); color: #fff;
    border-color: var(--primary);
  }

  /* ===== PROFILE PAGE ===== */
  .profile-cover {
    height:220px;
    background: linear-gradient(135deg, #064E3B 0%, #065F46 30%, #0C4A6E 65%, #1E1B4B 100%);
    position:relative; overflow:hidden;
  }
  .profile-cover-pattern {
    position:absolute; inset:0; opacity:1;
    background:
      radial-gradient(ellipse 65% 75% at 25% 50%, rgba(6,192,126,0.28) 0%, transparent 60%),
      radial-gradient(ellipse 55% 65% at 80% 25%, rgba(14,165,233,0.22) 0%, transparent 55%),
      radial-gradient(ellipse 40% 55% at 65% 85%, rgba(99,102,241,0.18) 0%, transparent 50%);
  }
  /* ===== PROFILE — design fidèle au PDF ===== */

  /* Info bar : fond blanc, légère ombre, padding généreux */
  .profile-info-bar {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 8px rgba(26,34,54,0.07);
    padding: 0 32px 20px;
    position: relative; z-index: 1;
  }

  /* === LIGNE 1 : avatar + boutons d'action === */
  .profile-row1 {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 14px;   /* espace sous la cover */
    flex-wrap: wrap;
  }

  /* Avatar cercle — sort de la cover par -54px, donc on compense */
  .profile-avatar-outer {
    margin-top: -54px;
    flex-shrink: 0;
  }
  .profile-avatar-circle {
    width: 108px; height: 108px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 0 0 3px rgba(0,194,122,0.4), 0 6px 20px rgba(0,0,0,0.25);
    background: #1a2a1a;
  }

  /* Bouton principal : vert plein */
  .btn-pf-primary {
    padding: 9px 22px; border-radius: 8px;
    background: var(--primary); color: #fff;
    border: none; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
  }
  .btn-pf-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }

  /* Boutons secondaires : outline */
  .btn-pf-secondary {
    padding: 8px 18px; border-radius: 8px;
    background: #fff; color: var(--text);
    border: 1.5px solid var(--border);
    font-size: 14px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
    display: flex; align-items: center; gap: 7px;
  }
  .btn-pf-secondary:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }

  /* === LIGNE 2 : nom + badge + stats === */
  .profile-row2 {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  .profile-name-block { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .profile-name {
    font-size: 22px; font-weight: 800;
    color: var(--text); letter-spacing: -0.3px;
    display: flex; align-items: center; gap: 6px;
  }
  .profile-name .verified {
    color: var(--primary); font-size: 16px;
  }
  .profile-role-tag {
    padding: 4px 12px; border-radius: 100px;
    background: rgba(0,194,122,0.1); border: 1.5px solid rgba(0,194,122,0.3);
    font-size: 12px; font-weight: 700; color: var(--primary);
    display: flex; align-items: center; gap: 5px;
  }

  /* Stats en ligne */
  .profile-stats-row {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  }
  .profile-stat-item { text-align: center; }
  .profile-stat-num { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.1; }
  .profile-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 1px; }

  /* === LIGNE 3 : sport + bio === */
  .profile-sport {
    font-size: 13px; color: var(--text-muted);
    margin-top: 6px; font-weight: 500;
  }
  .profile-bio {
    font-size: 13.5px; color: var(--text-muted);
    line-height: 1.6; max-width: 700px;
    margin-top: 8px;
  }

  /* === ONGLETS — actif = pill verte === */
  .profile-tabs {
    display: flex; gap: 4px;
    padding: 12px 24px 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
  }
  .profile-tab {
    padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
    color: var(--text-muted); border-radius: 8px 8px 0 0;
    border-bottom: 3px solid transparent;
    transition: all 0.18s; white-space: nowrap;
    background: transparent;
  }
  .profile-tab:hover { color: var(--text); background: var(--bg); }
  .profile-tab.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; border-bottom-color: transparent;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(6,192,126,0.3);
  }

  /* Contenus des onglets */
  #tab-actualites, #tab-apropos, #tab-palmares, #tab-photos, #tab-videos, #tab-classement {
    padding-left: 32px; padding-right: 32px;
  }

  .profile-content { display:grid; grid-template-columns:2fr 1fr; gap:24px; padding:24px 0; max-width:1200px; }
  .apropos-grid {
    display:grid; grid-template-columns:2fr 1fr; gap:24px;
    max-width:1100px; align-items:start;
  }
  .stats-view-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:12px;
  }
  .info-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:20px; box-shadow:var(--shadow-xs); }
  .info-card h3 { font-size:16px; font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:8px; }
  .info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .info-item { background:var(--bg); border:1px solid transparent; border-radius:10px; padding:10px 14px; transition:all 0.2s; }
  .info-item:hover { border-color:rgba(6,192,126,0.25); background:#F0FDF8; }
  .info-item .label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.6px; color:var(--text-muted); margin-bottom:5px; }
  .info-item .value { font-size:14px; font-weight:700; color:var(--text); word-break:break-word; overflow-wrap:break-word; }

  #staffGrouped, #staffGrouped > div,
  #rosterGrouped, #rosterGrouped > div {
    width:100% !important; min-width:0 !important; box-sizing:border-box;
  }
  #tab-effectif > div:last-child,
  #tab-staff > div:last-child {
    width: 100%;
    box-sizing: border-box;
  }
  .roster-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
  }
  .roster-card {
    width: 200px;
    flex: 0 0 200px;
    background:var(--bg); border:1px solid var(--border); border-radius:12px;
    text-align:center; cursor:pointer; transition:all 0.2s;
    overflow:hidden;
  }
  .roster-card:hover { border-color:rgba(0,229,160,0.3); }
  .roster-card .number { font-family:'Bebas Neue',sans-serif; font-size:28px; color:var(--primary); line-height:1; }
  .roster-card .player-name { font-size:13px; font-weight:600; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .roster-card .player-pos { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ===== CALENDAR ===== */
  .calendar-container { padding:24px 0; display:grid; grid-template-columns:1fr 320px; gap:24px; }
  .calendar-widget { background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
  .cal-header { display:flex; align-items:center; justify-content:space-between; padding:20px; border-bottom:1px solid var(--border); }
  .cal-month { font-family:'Bebas Neue',sans-serif; font-size:22px; background:linear-gradient(135deg, var(--primary), #0EA5E9); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .cal-nav { display:flex; gap:8px; }
  .cal-nav-btn {
    width:32px; height:32px; border-radius:8px; border:1px solid var(--border);
    background:transparent; color:var(--text); cursor:pointer; font-size:14px; transition:all 0.2s;
  }
  .cal-nav-btn:hover { background:var(--bg); }
  .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); }
  .cal-day-header { text-align:center; padding:12px 0; font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; }
  .cal-day {
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    font-size:13px; cursor:pointer; transition:all 0.2s; position:relative;
    border-radius:8px; margin:2px;
  }
  .cal-day:hover { background:var(--bg); }
  .cal-day.today { background:linear-gradient(135deg, rgba(6,192,126,0.14), rgba(14,165,233,0.08)); color:var(--primary); font-weight:800; border-radius:8px; }
  .cal-day.has-event::after {
    content:''; position:absolute; bottom:4px; left:50%; transform:translateX(-50%);
    width:4px; height:4px; border-radius:50%; background:var(--primary);
  }
  .cal-day.other-month { opacity:0.3; }

  /* ---- Month separator in match list ---- */
  .cal-month-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .cal-month-separator span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--primary), #0EA5E9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
  }
  .cal-month-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(6,192,126,0.3), transparent);
  }

  /* ---- Calendar sub-tabs (Rencontres / Equipes / Compétitions) ---- */
  .cal-subtabs {
    display:flex; gap:0; border-bottom:1px solid var(--border);
    background:var(--card); padding:0 24px;
  }
  .cal-subtab {
    padding:12px 18px; font-size:14px; font-weight:600; cursor:pointer;
    color:var(--text-muted); border-bottom:2px solid transparent;
    transition:all 0.2s; white-space:nowrap;
  }
  .cal-subtab.active { color:var(--primary); border-bottom-color:var(--primary); }
  .cal-subtab:hover { color:var(--text); }

  /* ---- Rencontres filters bar ---- */
  .rencontres-toolbar {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding:16px 24px; background:var(--card);
    border-bottom:1px solid var(--border);
  }
  .rencontres-toolbar .filter-mini {
    padding:7px 12px; border-radius:8px; border:1.5px solid var(--border);
    background:var(--bg); color:var(--text-muted); font-family:'Outfit',sans-serif;
    font-size:12px; cursor:pointer; outline:none; transition:border-color 0.2s; min-width:160px;
  }
  .rencontres-toolbar .filter-mini:focus { border-color:var(--primary); color:var(--text); }
  .rencontres-toolbar .filter-mini::after { content:'▼'; margin-left:8px; font-size:10px; }
  .view-toggle { display:flex; gap:4px; margin-left:auto; }
  .view-toggle-btn {
    padding:7px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer;
    border:1.5px solid var(--border); background:transparent; color:var(--text-muted); transition:all 0.2s;
  }
  .view-toggle-btn.active { background:linear-gradient(135deg, rgba(6,192,126,0.12), rgba(14,165,233,0.07)); border-color:var(--primary); color:var(--primary); font-weight:700; }

  /* ---- Match row (like in the PDF) ---- */
  .match-row {
    display:flex; align-items:center; gap:12px;
    padding:14px 20px;
    background:var(--card); transition:background 0.2s; cursor:pointer;
    border-bottom: 4px solid #DDE3EE;
  }
  .match-row:last-child { border-bottom: none; }
  .match-row:hover { background:#F7F9FC; }
  .match-row-comp-logo {
    width:44px; height:44px; border-radius:8px; overflow:hidden;
    background:linear-gradient(135deg,#0f172a,#1e293b);
    display:flex; align-items:center; justify-content:center;
    font-size:26px; flex-shrink:0; border:1px solid rgba(30,41,59,0.12);
  }
  .match-row-comp-logo img {
    width:100%; height:100%; object-fit:contain; object-position:center;
    padding:3px; display:block;
  }
  .match-row-comp-logo.light-bg {
    background:#f1f1f1;
  }
  .match-row-body { flex:1; min-width:0; }
  .match-row-teams {
    display:flex; align-items:center; gap:6px;
    font-size:14px; font-weight:700; color:var(--text);
    flex-wrap:nowrap; overflow:hidden; /* 1 ligne fixe */
  }
  /* Noms d'équipes : tronqués si trop longs */
  .match-row-team-name {
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    min-width:0; flex-shrink:1;
  }
  .match-row-media-btns { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; margin-left:2px; }
  .match-row-score {
    display:inline-flex; align-items:center; gap:4px;
    background:var(--primary); color:#fff;
    padding:2px 6px; border-radius:6px;
    font-family:'Bebas Neue',sans-serif; font-size:15px; letter-spacing:1px;
    flex-shrink:0;
  }
  .match-row-score.upcoming { background:var(--dark3); color:var(--text-muted); font-size:12px; font-family:'Outfit',sans-serif; font-weight:600; }
  /* Méta : 1 ligne fixe, tronquée */
  .match-row-meta {
    font-size:12px; color:var(--text-muted); margin-top:3px;
    display:flex; align-items:center; gap:6px;
    flex-wrap:nowrap; overflow:hidden;
  }
  .match-row-meta > span:first-child {
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    min-width:0; flex-shrink:1;
  }
  .match-row-meta > span.match-status { flex-shrink:0; }
  .match-row-actions { display:flex; gap:6px; flex-shrink:0; }
  @media(max-width:768px) {
    .match-row-actions { flex-direction:column; gap:3px; }
    .btn-row-action { width:28px; height:28px; font-size:13px; }
  }
  .btn-row-action {
    width:30px; height:30px; border-radius:7px; border:1px solid var(--border);
    background:transparent; cursor:pointer; font-size:13px;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); transition:all 0.2s;
  }
  .btn-row-action:hover { background:var(--dark3); color:var(--text); }
  .btn-row-action.danger:hover { background:rgba(255,61,90,0.1); border-color:rgba(255,61,90,0.3); color:var(--accent); }
  .btn-row-action.video-active { background:rgba(6,192,126,0.1); border-color:rgba(6,192,126,0.4); color:var(--primary); }
  .btn-row-action.video-active:hover { background:rgba(6,192,126,0.2); }
  .btn-row-action.ticket-active { background:rgba(249,115,22,0.1); border-color:rgba(249,115,22,0.4); color:#f97316; }
  .btn-row-action.ticket-active:hover { background:rgba(249,115,22,0.2); }
  .md-info-block { background:var(--bg); border-radius:10px; padding:10px 14px; }
  .md-info-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); margin-bottom:4px; }
  .md-info-val { font-size:14px; font-weight:700; color:var(--text); word-break:break-word; }

  /* ── Video modal tabs ── */
  .video-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:20px; }
  .video-tab {
    flex:1; padding:10px 0; text-align:center; font-size:13px; font-weight:600;
    cursor:pointer; color:var(--text-muted); border-bottom:2px solid transparent;
    margin-bottom:-2px; transition:all 0.2s;
  }
  .video-tab.active { color:var(--primary); border-bottom-color:var(--primary); }

  /* ── Video lightbox ── */
  #videoLightbox {
    position:fixed; inset:0; z-index:9999;
    background:rgba(0,0,0,0.92);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity 0.25s;
  }
  #videoLightbox.open { opacity:1; pointer-events:all; }
  #videoLightbox .lb-inner {
    width:min(860px,95vw); display:flex; flex-direction:column; gap:12px;
  }
  #videoLightbox .lb-header {
    display:flex; align-items:center; justify-content:space-between;
  }
  #videoLightbox .lb-title { color:#fff; font-size:14px; font-weight:700; }
  #videoLightbox .lb-close {
    width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.2); color:#fff; cursor:pointer;
    font-size:16px; display:flex; align-items:center; justify-content:center;
    transition:background 0.2s;
  }
  #videoLightbox .lb-close:hover { background:rgba(255,255,255,0.2); }
  #videoLightbox .lb-player {
    width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
    background:#000;
  }
  #videoLightbox .lb-player iframe,
  #videoLightbox .lb-player video { width:100%; height:100%; border:none; display:block; }
  #videoLightbox .lb-footer {
    display:flex; align-items:center; justify-content:space-between;
  }
  #videoLightbox .lb-del {
    background:rgba(255,61,90,0.15); border:1px solid rgba(255,61,90,0.3);
    color:#ff3d5a; padding:6px 16px; border-radius:8px; cursor:pointer;
    font-size:12px; font-weight:600; transition:all 0.2s;
  }
  #videoLightbox .lb-del:hover { background:rgba(255,61,90,0.28); }

  /* ---- Team grid (horizontal — inchangé) ---- */
  .entity-grid {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:12px; padding:20px 24px;
  }
  .entity-card {
    display:flex; flex-direction:row; align-items:center;
    background:var(--card); border:1.5px solid var(--border); border-radius:14px;
    overflow:hidden; transition:all 0.2s; cursor:default;
    box-shadow:var(--shadow-xs); position:relative;
  }
  .entity-card::before {
    content:'';
    position:absolute; left:0; top:0; bottom:0; width:4px;
    background:linear-gradient(180deg, #f5a623, #e8890a);
  }
  .entity-card:hover { border-color:rgba(6,192,126,0.35); box-shadow:var(--shadow); transform:translateY(-2px); }
  .entity-logo {
    width:88px; height:88px; min-height:88px; max-height:88px; flex-shrink:0; overflow:hidden;
    background:transparent; display:flex; align-items:center; justify-content:center;
    font-size:32px; align-self:stretch; position:relative;
  }
  .entity-logo img { width:100%; height:100%; object-fit:contain; padding:4px; display:block; flex-shrink:0; }
  .entity-overlay {
    display:flex; align-items:center; flex:1; gap:12px;
    padding:0 12px 0 14px; min-width:0;
  }
  .entity-name {
    font-size:22px; font-weight:800; color:var(--text);
    line-height:1.2; flex:1; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .entity-icon-row { display:flex; gap:8px; flex-shrink:0; }
  @media(max-width:768px) {
    .entity-icon-row { flex-direction:column; gap:4px; }
    .entity-name { font-size:17px; }
  }
  .entity-icon-btn {
    width:28px; height:28px; border-radius:8px; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all 0.18s;
  }
  .entity-icon-edit { background:rgba(0,168,232,0.1); color:#00A8E8; }
  .entity-icon-edit:hover { background:rgba(0,168,232,0.22); }
  .entity-icon-del  { background:rgba(255,61,90,0.1); color:var(--accent); }
  .entity-icon-del:hover  { background:rgba(255,61,90,0.22); }
  .entity-actions { display:none; }

  /* ---- Competition grid — grandes cartes verticales avec photo ---- */
  .comp-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px; padding: 24px 28px 40px;
  }
  .comp-card {
    border-radius: 14px; overflow: hidden;
    background: var(--card); border: 1px solid var(--border);
    box-shadow: var(--shadow-xs); position: relative;
    display: flex; flex-direction: column;
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
  }
  .comp-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(30,41,59,0.14); border-color: rgba(245,158,11,0.4); }
  .comp-card-photo { width:100%; height:220px; overflow:hidden; position:relative; flex-shrink:0; }
  .comp-card-photo img { width:100%; height:100%; display:block; }
  .comp-card:hover .comp-card-photo img { transform:scale(1.06); }
  .comp-card-body { padding:10px 12px 10px; display:flex; flex-direction:column; flex:1; }
  .comp-card-name { font-size:16px; font-weight:800; color:var(--text); margin-bottom:3px; line-height:1.3; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .comp-card-subtype { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .comp-card-actions { display:flex; gap:5px; margin-top:auto; padding-top:8px; border-top:1px solid var(--border); }
  .comp-card-actions .btn-entity { flex:1; }
  .btn-entity {
    padding:4px 8px; border-radius:6px; font-size:11px; font-weight:600;
    cursor:pointer; transition:all 0.2s; border:1px solid var(--border);
    display:flex; align-items:center; gap:3px; white-space:nowrap; width:100%; justify-content:center;
  }
  .btn-entity-edit { background:rgba(0,168,232,0.08); color:#00A8E8; border-color:rgba(0,168,232,0.2); }
  .btn-entity-edit:hover { background:rgba(0,168,232,0.18); }
  .btn-entity-del  { background:rgba(255,61,90,0.08); color:var(--accent); border-color:rgba(255,61,90,0.2); }
  .btn-entity-del:hover { background:rgba(255,61,90,0.18); }
  .match-list { display:flex; flex-direction:column; gap:12px; }
  .match-card {
    background:var(--card); border:1px solid var(--border); box-shadow:0 1px 4px rgba(26,34,54,0.05); border-radius:12px; padding:16px;
    display:flex; flex-direction:column; gap:12px;
  }
  .match-competition { font-size:11px; font-weight:600; color:var(--primary); text-transform:uppercase; letter-spacing:0.5px; }
  .match-teams { display:flex; align-items:center; justify-content:space-between; }
  .match-team { text-align:center; flex:1; }
  .match-team-name { font-size:14px; font-weight:700; }
  .match-team-logo { font-size:28px; margin-bottom:4px; }
  .match-score { font-family:'Bebas Neue',sans-serif; font-size:32px; color:var(--primary); padding:0 16px; }
  .match-vs { font-size:12px; color:var(--text-muted); padding:0 16px; }
  .match-meta { display:flex; align-items:center; justify-content:space-between; }
  .match-date { font-size:12px; color:var(--text-muted); font-family:'Space Mono',monospace; }
  .match-status { font-size:11px; font-weight:700; padding:3px 8px; border-radius:100px; }
  .status-live { background:rgba(255,61,90,0.2); color:var(--accent); border:1px solid rgba(255,61,90,0.3); }
  .status-upcoming { background:rgba(0,194,122,0.1); color:var(--primary); border:1px solid rgba(0,229,160,0.2); }
  .status-finished { background:rgba(255,255,255,0.05); color:var(--text-muted); border:1px solid var(--border); }

  /* ===== SIGNIN / SIGNUP MODAL ===== */
  .modal {
    background:var(--bg); border:1px solid var(--border); border-radius:20px;
    width:100%; max-width:520px;
    padding:32px;
    position:relative; margin:auto;
    max-height:90vh; overflow-y:auto; overflow-x:hidden;
    box-sizing:border-box;
  }
  .modal-overlay {
    position:fixed; inset:0; z-index:2000;
    background:rgba(26,34,54,0.72);
    display:none; align-items:flex-start; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity 0.3s;
    padding:20px; box-sizing:border-box; overflow-y:auto;
  }
  .modal-overlay.open {
    display:flex; opacity:1; pointer-events:all;
  }
  /* Modale empilée au-dessus d'une autre (ex: créer équipe depuis créer rencontre) */
  .modal-overlay.stacked {
    z-index:2100;
    background:rgba(26,34,54,0.45);
  }
  /* Modale d'origine en arrière-plan quand une autre est empilée */
  .modal-overlay.modal-behind {
    pointer-events:none;
    opacity:0.45;
    filter:brightness(0.7);
    transition:opacity 0.3s, filter 0.3s;
  }
  /* Labels et inputs file cliquables dans les modales */
  .modal-overlay.open label { cursor:pointer; pointer-events:all; }
  .modal-overlay.open input[type="file"] { pointer-events:all; }
  .modal-overlay.open label * { pointer-events:none; }
  .modal-overlay.open .modal { transform:none; }
  .modal-close {
    position:absolute; top:16px; right:16px; width:32px; height:32px;
    border-radius:8px; border:1px solid var(--border); background:transparent;
    color:var(--text); cursor:pointer; font-size:16px; transition:all 0.2s;
    display:flex; align-items:center; justify-content:center;
  }
  .modal-close:hover { background:var(--dark3); }
  .modal h2 { font-family:'Bebas Neue',sans-serif; font-size:36px; margin-bottom:8px; }
  .modal p { color:var(--text-muted); font-size:14px; margin-bottom:24px; }
  .role-selector { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:24px; }
  .role-option {
    padding:14px; border-radius:12px; border:1px solid var(--border);
    cursor:pointer; text-align:center; transition:all 0.2s; background:transparent;
  }
  .role-option:hover { border-color:rgba(0,194,122,0.3); background:rgba(0,194,122,0.05); }
  .role-option.selected { border-color:var(--primary); background:rgba(0,194,122,0.1); }
  .role-option .role-icon { font-size:28px; margin-bottom:6px; }
  .role-option .role-name { font-size:13px; font-weight:600; }
  .form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
  .form-label { font-size:12px; font-weight:700; color:#111; text-transform:uppercase; letter-spacing:0.5px; }
  #modal-login .form-label, #modal-signup .form-label { color:#000; font-weight:700; }
  .req { color:#EF4444; margin-left:3px; font-size:13px; }
  .form-input {
    padding:11px 14px; background:var(--bg); border:1.5px solid var(--border);
    border-radius:10px; color:var(--text); font-family:'Outfit',sans-serif; font-size:14px;
    outline:none; transition:all 0.2s;
  }
  .form-input::placeholder { color:#b0b8c9; font-style:italic; }
  .form-input:focus { border-color:var(--primary); background:var(--card); box-shadow: 0 0 0 3px rgba(6,192,126,0.1); }
  .sf-clear-wrap { position:relative; display:flex; align-items:center; }
  .sf-clear-wrap .form-input { flex:1; padding-right:30px; }
  .sf-clear-btn {
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; border-radius:50%; background:#EF4444;
    border:none; cursor:pointer; display:none; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; color:#fff; line-height:1; flex-shrink:0;
    transition:background 0.15s; z-index:2;
  }
  .sf-clear-btn:hover { background:#DC2626; }
  .sf-clear-wrap .form-input:not(:placeholder-shown) ~ .sf-clear-btn,
  .sf-clear-wrap .form-input[value]:not([value=""]) ~ .sf-clear-btn { display:flex; }
  .form-input:disabled { opacity:0.6; cursor:not-allowed; background:var(--bg); border-color:var(--border); color:var(--text-muted); }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
  .form-row .form-group { margin-bottom:0; }
  .btn-form {
    width:100%; padding:13px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:#fff; border:none; border-radius:10px; font-weight:700; font-size:15px; cursor:pointer;
    transition:all 0.22s; margin-top:8px;
    box-shadow: 0 3px 12px rgba(6,192,126,0.28);
  }
  .btn-form:hover { transform:translateY(-1px); box-shadow: 0 6px 22px rgba(6,192,126,0.38); }
  .form-switch { text-align:center; margin-top:16px; font-size:14px; color:var(--text-muted); }
  .form-switch a { color:var(--primary); cursor:pointer; font-weight:600; }

  /* ===== PALMARÈS ===== */
  .trophies-grid { display:flex; flex-direction:column; gap:8px; padding:16px 0; }
  .trophy-card {
    display:flex; align-items:center; gap:20px;
    padding:16px 20px;
    border-radius:12px;
    border:1px solid transparent;
    outline: 1.5px solid #e2e8f0;
    outline-offset: 0px;
    position: relative;
    transition: box-shadow 0.2s, border-color 0.2s;
    overflow: hidden; min-width:0;
  }
  .trophy-card::before {
    content:'';
    position:absolute; left:0; top:0; bottom:0;
    width:4px;
    background: linear-gradient(180deg, #f5a623, #e8890a);
    border-radius:12px 0 0 12px;
    z-index:2;
  }
  .trophy-card:nth-child(odd)  { background:#ffffff; }
  .trophy-card:nth-child(even) { background:#fafbfc; }
  .trophy-card:hover {
    box-shadow: 0 4px 18px rgba(30,41,59,0.10);
    outline-color: #cbd5e1;
  }
  .trophy-icon { font-size:48px; margin-bottom:12px; }
  .trophy-name { font-weight:700; font-size:14px; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .trophy-season { font-size:12px; color:var(--text-muted); font-family:'Space Mono',monospace; }
  .trophy-count { margin-top:8px; }
  .trophy-count span {
    display:inline-block; padding:3px 10px; border-radius:100px;
    background:rgba(255,184,0,0.1); border:1px solid rgba(255,184,0,0.3);
    font-size:11px; font-weight:700; color:var(--accent2);
  }

  /* ===== NOTIFICATIONS / MESSAGES ===== */
  #page-messages { padding-top:0 !important; min-height:0 !important; height:calc(100vh - 64px); margin-top:64px; }
  .messages-layout { display:grid; grid-template-columns:400px 1fr; height:100%; background:var(--card); overflow:hidden; }
  .conv-list { border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
  .conv-list-header { padding:20px; border-bottom:1px solid var(--border); }
  .conv-list-header h3 { font-size:18px; font-weight:700; margin-bottom:12px; }
  .conv-item {
    display:flex; align-items:center; gap:12px;
    padding:16px 20px; cursor:pointer; transition:background 0.2s; border-bottom:1px solid var(--border);
    position:relative;
    min-width:0;
  }
  .conv-item:hover, .conv-item.active { background:var(--bg); }
  /* ── Conversations non lues ── */
  .conv-item.unread { background: rgba(6,192,126,0.05); }
  .conv-item.unread .conv-name,
  .conv-item.unread .conv-info .conv-name { font-weight:700; color:var(--text); }
  .conv-item.unread .conv-preview { color:var(--text); font-weight:500; }
  /* Badge compteur non lus */
  .conv-item .unread-dot {
    position:absolute; right:40px; top:50%; transform:translateY(-50%);
    min-width:8px; height:8px; border-radius:50%; background:var(--primary);
    flex-shrink:0;
  }
  .conv-item .unread-dot.unread-count {
    min-width:18px; height:18px; border-radius:100px;
    background:var(--primary); color:#fff;
    font-size:10px; font-weight:800; font-family:'Space Mono',monospace;
    display:flex; align-items:center; justify-content:center; padding:0 4px;
    box-shadow:0 1px 4px rgba(6,192,126,0.35);
  }
  .conv-info .conv-name { font-size:14px; }
  .conv-info .conv-preview { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
  .chat-area { display:flex; flex-direction:column; height:100%; overflow:hidden; min-height:0; }
  .chat-header {
    padding:16px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:12px;
    background:var(--bg);
  }
  .chat-messages { flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:3px; min-height:0; }
  .message.series-start { margin-top:10px; }
  .message { display:flex; gap:0; max-width:78%; }
  .message.mine { align-self:flex-end; flex-direction:row-reverse; }
  .message-bubble {
    padding:10px 14px 6px 14px; border-radius:14px; font-size:14px; line-height:1.6;
    background:var(--card); border:1px solid var(--border); position:relative;
    box-shadow: 0 1px 2px rgba(30,41,59,0.06);
  }
  .message.mine .message-bubble { background:linear-gradient(135deg, rgba(6,192,126,0.1), rgba(14,165,233,0.07)); border-color:rgba(6,192,126,0.22); }
  .message-time { font-size:10px; color:var(--text-muted); text-align:right; margin-top:2px; display:block; }
  .message .avatar-placeholder { display:none; }
  /* Bouton corbeille supprimé — suppression via menu ⋮ uniquement */
  .conv-delete-btn { display:none !important; }
  .chat-input-area { padding:14px 24px; border-top:1px solid var(--border); display:flex; gap:12px; align-items:flex-end; flex-shrink:0; background:var(--card); }
  .chat-input {
    flex:1; background:var(--bg); border:1.5px solid var(--border); border-radius:12px;
    padding:11px 16px; color:var(--text); font-family:'Outfit',sans-serif; font-size:14px; outline:none; resize:none;
    transition:border-color 0.2s;
  }
  .chat-input:focus { border-color:var(--primary); }
  .btn-send {
    width:42px; height:42px; border-radius:10px; background:var(--primary); color:#fff;
    border:none; cursor:pointer; font-size:18px; transition:all 0.2s; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .btn-send:hover { background:var(--primary-dark); }


  /* ══════════════════════════════════════════════════════
     MESSAGERIE — FOND ZONE MESSAGES (style WhatsApp)
     Fond légèrement coloré pour que les bulles blanches ressortent
  ══════════════════════════════════════════════════════ */
  .chat-messages {
    background: #EEF2F8;
  }
  [data-theme="dark"] .chat-messages {
    background: #1A2030;
  }

  /* ══════════════════════════════════════════════════════
     MESSAGERIE — FLÈCHE AU SURVOL DE BULLE
  ══════════════════════════════════════════════════════ */
  .msg-bubble-wrap {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    position: relative;
    /* Bloquer le menu natif et la sélection de texte sur mobile */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .msg-bubble-wrap.mine { flex-direction: row; }
  /* L'arrow est caché par défaut, visible au hover */
  .msg-arrow-btn {
    opacity: 0;
    pointer-events: none;
    flex-shrink: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    margin-top: 8px;
    box-shadow: var(--shadow-xs);
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    padding: 0;
  }
  .msg-bubble-wrap:hover .msg-arrow-btn {
    opacity: 1;
    pointer-events: auto;
  }
  .msg-arrow-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }

  /* ══════════════════════════════════════════════════════
     MESSAGERIE — BOUTON ⋮ HEADER
  ══════════════════════════════════════════════════════ */
  .sf-chat-menu-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 1px;
  }
  .sf-chat-menu-btn:hover {
    background: var(--bg);
    color: var(--text);
  }

  /* ══════════════════════════════════════════════════════
     DROPDOWN MENU GÉNÉRIQUE (3-points + message ctx)
  ══════════════════════════════════════════════════════ */
  .sf-dropdown-menu {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(30,41,59,0.14);
    min-width: 200px;
    z-index: 9999;
    overflow: hidden;
    animation: sfDropIn 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes sfDropIn {
    from { opacity: 0; transform: scale(0.93) translateY(-6px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
  }
  .sf-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background: transparent;
    border: none;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
  }
  .sf-dropdown-item:hover { background: var(--bg); }
  .sf-dropdown-item.danger { color: #EF4444; }
  .sf-dropdown-item.danger:hover { background: rgba(239,68,68,0.07); }
  .sf-dropdown-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
  .sf-dropdown-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
  }

  /* ══════════════════════════════════════════════════════
     BAND DE RÉPONSE (au-dessus de l'input)
  ══════════════════════════════════════════════════════ */
  .sf-reply-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(6,192,126,0.07);
    border-top: 2px solid var(--primary);
    font-size: 13px;
  }
  .sf-reply-band-content { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
  .sf-reply-band-label { font-size: 11px; font-weight: 700; color: var(--primary); }
  .sf-reply-band-text { color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sf-reply-band-close {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; flex-shrink: 0; padding: 2px 4px;
    border-radius: 4px; transition: color 0.15s;
  }
  .sf-reply-band-close:hover { color: var(--text); }

  /* ── Mention autocomplete ─────────────────────── */
  .mention-dropdown {
    position:absolute; z-index:500;
    background:var(--card); border:1.5px solid var(--border);
    border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,0.13);
    max-height:220px; overflow-y:auto; min-width:220px;
    animation: mentionIn 0.13s ease;
  }
  @keyframes mentionIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
  .mention-item {
    display:flex; align-items:center; gap:10px;
    padding:9px 14px; cursor:pointer; transition:background 0.12s;
  }
  .mention-item:hover, .mention-item.active { background:var(--bg); }
  .mention-item .mention-avatar {
    width:28px; height:28px; border-radius:50%; display:flex;
    align-items:center; justify-content:center; font-size:11px;
    font-weight:700; flex-shrink:0; overflow:hidden;
  }
  .mention-item .mention-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
  .mention-item .mention-name { font-size:13px; font-weight:600; }
  .mention-item .mention-role { font-size:11px; color:var(--text-muted); margin-left:4px; }
  /* Highlight @mention dans le rendu du post */
  .post-mention {
    color:var(--primary); font-weight:600; cursor:pointer;
    border-radius:4px; padding:0 2px;
    transition:background 0.15s;
  }
  .post-mention:hover { background:rgba(6,192,126,0.1); }

  /* ── Feed découverte ──────────────────────────── */
  .feed-discovery-banner {
    background:linear-gradient(135deg,rgba(6,192,126,0.08),rgba(14,165,233,0.06));
    border:1.5px solid rgba(6,192,126,0.2);
    border-radius:14px; padding:18px 20px; margin-bottom:18px;
    display:flex; align-items:center; gap:14px;
  }
  .feed-discovery-banner .disc-icon { font-size:32px; flex-shrink:0; }
  .feed-discovery-banner .disc-title { font-weight:700; font-size:15px; margin-bottom:3px; }
  .feed-discovery-banner .disc-sub { font-size:13px; color:var(--text-muted); }
  .feed-discovery-label {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(6,192,126,0.1); color:var(--primary);
    border-radius:100px; padding:3px 10px; font-size:11px; font-weight:700;
    margin-bottom:10px;
  }

  /* ── Commentaires guest ──────────────────────── */
  .comment-guest-cta {
    display:flex; align-items:center; gap:12px;
    background:var(--bg); border:1.5px dashed var(--border);
    border-radius:12px; padding:12px 16px; margin-top:8px;
    cursor:pointer; transition:border-color 0.18s;
  }
  .comment-guest-cta:hover { border-color:var(--primary); }
  .comment-guest-cta .cta-text { font-size:13px; color:var(--text-muted); }
  .comment-guest-cta .cta-link { color:var(--primary); font-weight:700; font-size:13px; }

  /* ── Statut Lu ✓✓ ─────────────────────────────── */
  .msg-read-status {
    font-size:10px; color:var(--text-muted); text-align:right;
    margin-top:2px; display:flex; align-items:center; justify-content:flex-end; gap:3px;
  }
  .msg-read-status.read { color:var(--primary); }
  .msg-read-status svg { flex-shrink:0; }

  /* ── Typing indicator ─────────────────────────── */
  .typing-indicator {
    display:none; align-items:center; gap:8px;
    padding:6px 16px; font-size:12px; color:var(--text-muted);
    font-style:italic; min-height:28px;
  }
  .typing-indicator.visible { display:flex; }
  .typing-dots { display:flex; gap:3px; align-items:center; }
  .typing-dots span {
    width:5px; height:5px; border-radius:50%; background:var(--text-muted);
    animation: typingBounce 1.2s infinite ease-in-out;
  }
  .typing-dots span:nth-child(2) { animation-delay:0.2s; }
  .typing-dots span:nth-child(3) { animation-delay:0.4s; }
  @keyframes typingBounce {
    0%, 60%, 100% { transform:translateY(0); opacity:0.4; }
    30% { transform:translateY(-5px); opacity:1; }
  }

  /* ── Pièces jointes ───────────────────────────── */
  .attach-bar {
    display:flex; align-items:center; gap:8px;
    padding:0 24px 8px 24px; flex-shrink:0;
  }
  .attach-btn {
    width:34px; height:34px; border-radius:8px; border:1.5px solid var(--border);
    background:transparent; cursor:pointer; color:var(--text-muted); font-size:16px;
    display:flex; align-items:center; justify-content:center;
    transition:all 0.18s; flex-shrink:0;
  }
  .attach-btn:hover { border-color:var(--primary); color:var(--primary); background:rgba(6,192,126,0.07); }
  .attach-preview-wrap {
    display:flex; gap:6px; flex-wrap:wrap; padding:0 24px 6px;
    flex-shrink:0;
  }
  .attach-preview-item {
    position:relative; display:inline-flex; align-items:center; gap:6px;
    background:var(--bg); border:1px solid var(--border); border-radius:8px;
    padding:5px 10px; font-size:12px; max-width:220px;
  }
  .attach-preview-item img {
    width:40px; height:40px; object-fit:cover; border-radius:6px; flex-shrink:0;
  }
  .attach-preview-item .attach-name {
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:120px;
    font-size:12px; color:var(--text);
  }
  .attach-remove {
    background:none; border:none; color:var(--text-muted); cursor:pointer;
    font-size:14px; line-height:1; padding:0 2px; flex-shrink:0;
  }
  .attach-remove:hover { color:#e74c3c; }

  /* Rendu pièce jointe dans le message */
  .msg-attachment { margin-top:6px; }
  .msg-attachment img {
    max-width:220px; max-height:180px; border-radius:10px; display:block;
    cursor:pointer; transition:opacity 0.15s;
  }
  .msg-attachment img:hover { opacity:0.9; }
  .msg-attachment-link {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--bg); border:1px solid var(--border); border-radius:8px;
    padding:7px 12px; font-size:13px; color:var(--primary); text-decoration:none;
    max-width:260px; transition:border-color 0.15s;
  }
  .msg-attachment-link:hover { border-color:var(--primary); }
  .msg-attachment-link span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; }


  /* ══ 4.2 Historique des visites ══════════════════════ */
  .visits-modal-item {
    display:flex; align-items:center; gap:12px;
    padding:12px 0; border-bottom:1px solid var(--border);
    cursor:pointer; transition:opacity 0.15s;
  }
  .visits-modal-item:last-child { border-bottom:none; }
  .visits-modal-item:hover { opacity:0.8; }
  .visits-time { font-size:11px; color:var(--text-muted); margin-left:auto; white-space:nowrap; }

  /* ══ 4.3 Note enrichie ═══════════════════════════════ */
  .rating-count-badge {
    font-size:11px; color:var(--text-muted); font-weight:500;
    background:var(--bg); border:1px solid var(--border);
    border-radius:100px; padding:2px 8px; margin-left:6px;
  }
  #rate-comment-wrap {
    margin-top:14px; text-align:left;
  }
  .rate-comment-input {
    width:100%; box-sizing:border-box;
    background:var(--bg); border:1.5px solid var(--border);
    border-radius:10px; padding:10px 14px;
    color:var(--text); font-family:'Outfit',sans-serif; font-size:13px;
    resize:none; outline:none; transition:border-color 0.2s;
  }
  .rate-comment-input:focus { border-color:var(--primary); }
  .rating-modal-comment {
    font-size:12px; color:var(--text-muted); font-style:italic;
    margin-top:4px; line-height:1.5;
  }

  /* ══ 5.2 Mon Agenda ══════════════════════════════════ */
  .agenda-event-card {
    display:flex; align-items:flex-start; gap:14px;
    background:var(--card); border:1px solid var(--border);
    border-radius:14px; padding:14px 16px; margin-bottom:10px;
    transition:border-color 0.18s;
  }
  .agenda-event-card:hover { border-color:rgba(6,192,126,0.3); }
  .agenda-date-badge {
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff; border-radius:10px; padding:6px 10px; text-align:center;
    min-width:46px; flex-shrink:0;
  }
  .agenda-date-badge .day { font-size:18px; font-weight:800; line-height:1; }
  .agenda-date-badge .month { font-size:10px; font-weight:700; text-transform:uppercase; opacity:0.85; }
  .agenda-event-title { font-weight:700; font-size:14px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .agenda-event-meta { font-size:12px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .agenda-remove-btn {
    margin-left:auto; background:none; border:none; color:var(--text-muted);
    cursor:pointer; font-size:16px; padding:4px; border-radius:6px;
    transition:color 0.15s; flex-shrink:0;
  }
  .agenda-remove-btn:hover { color:#e74c3c; }
  .agenda-save-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 12px; border-radius:8px; border:1.5px solid var(--border);
    background:transparent; cursor:pointer; font-size:12px; font-weight:700;
    color:var(--text-muted); transition:all 0.18s;
  }
  .agenda-save-btn.saved {
    border-color:var(--primary); color:#fff;
    background:var(--primary);
  }
  .agenda-save-btn.saved:hover {
    background:#e74c3c; border-color:#e74c3c; color:#fff;
  }
  .agenda-save-btn:not(.saved):hover { border-color:var(--primary); color:var(--primary); }

  /* ══ 5.3 Partage événement vers feed ════════════════ */
  .share-to-feed-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:8px; border:1.5px solid var(--primary);
    background:transparent; cursor:pointer; font-size:12px; font-weight:700;
    color:var(--primary); transition:all 0.18s; white-space:nowrap;
  }
  .share-to-feed-btn:hover { background:rgba(6,192,126,0.08); }

  /* ══ 6.1 Onglets profil mobile — indicateurs ═══════ */
  .profile-tabs-wrap { position:relative; }
  .profile-tabs-fade-right {
    position:absolute; right:0; top:0; bottom:0; width:32px;
    background:linear-gradient(to right, transparent, var(--card));
    pointer-events:none; display:none;
  }
  .profile-tabs-arrow {
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    width:22px; height:22px; background:var(--primary); border-radius:50%;
    display:none; align-items:center; justify-content:center;
    color:#fff; font-size:10px; cursor:pointer; z-index:2;
    box-shadow:0 2px 8px rgba(6,192,126,0.4);
    transition:transform 0.15s;
  }
  .profile-tabs-arrow:hover { transform:translateY(-50%) scale(1.15); }
  /* Indicateur scroll onglets — scrollbar native visible */
  .profile-tabs { scroll-behavior:smooth; overflow-x:auto; }
  .profile-tabs::-webkit-scrollbar { height:7px; }
  .profile-tabs::-webkit-scrollbar-track { background:var(--border); border-radius:7px; }
  .profile-tabs::-webkit-scrollbar-thumb { background:var(--primary); border-radius:7px; }
  .profile-tabs-arrow { display:none !important; }
  .profile-tabs-fade-right { display:none !important; }
  @media(max-width:768px) {
    /* ══ 6.2 Composer mobile optimisé ══ */
    .composer-top { flex-direction:column; gap:8px; }
    .composer-top .avatar { display:none; }
    .composer-input {
      width:100%; min-width:0; box-sizing:border-box;
      min-height:70px; font-size:15px;
      flex:none; /* désactiver flex:1 qui ne fonctionne pas en colonne */
    }
    .composer-actions {
      flex-wrap:wrap; gap:8px;
      flex-direction:row; align-items:center;
    }
    .composer-tools { gap:6px; }
    .btn-post { min-height:42px; font-size:15px; padding:8px 20px; }
    .post-composer { padding:14px 12px; border-radius:12px; }
    /* Compteur de caractères */
    #composer-char-count { font-size:10px; }
  }

  /* ── Bouton rafraîchir ────────────────────────── */
  .chat-refresh-btn {
    width:32px; height:32px; border-radius:8px; border:1.5px solid var(--border);
    background:transparent; cursor:pointer; color:var(--text-muted); font-size:14px;
    display:flex; align-items:center; justify-content:center; transition:all 0.18s;
  }
  .chat-refresh-btn:hover { border-color:var(--primary); color:var(--primary); transform:rotate(90deg); }
  .chat-refresh-btn.spinning { animation: refreshSpin 0.6s linear; }
  @keyframes refreshSpin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

  /* ===== TOASTS ===== */
  .toast-container { position:fixed; bottom:24px; right:24px; z-index:3000; display:flex; flex-direction:column; gap:8px; }
  .toast {
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    padding:14px 20px; font-size:14px; font-weight:600; min-width:260px;
    animation:slideInRight 0.3s ease; box-shadow:var(--shadow-md); color:var(--text);
    display:flex; align-items:center; gap:10px;
  }
  .toast.success { border-left:3px solid var(--primary); border-color:rgba(6,192,126,0.3); }
  .toast.success::before { content:'✓'; color:var(--primary); font-weight:800; font-size:15px; }
  .toast.error { border-left:3px solid #EF4444; border-color:rgba(239,68,68,0.3); }
  .toast.error::before { content:'✕'; color:#EF4444; font-weight:800; font-size:15px; }
  .toast.warning { border-left:3px solid #F59E0B; border-color:rgba(245,158,11,0.3); }
  .toast.warning::before { content:'⚠'; color:#F59E0B; font-weight:800; font-size:14px; }

  /* ===== ANIMATIONS ===== */
  @keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
  @keyframes fadeInDown { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
  @keyframes slideInRight { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
  @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
  .live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.5s infinite; margin-right:4px; }

  /* ===== ALL PAGES USE SIDEBAR MARGIN ===== */
  /* Pages that live inside the sidebar layout */
  #page-feed, #page-search, #page-events, #page-profile, #page-messages, #page-scout {
    margin-left: 240px;
  }
  #page-new-profile {
    margin-left: 240px;
    padding-top: 0 !important;
    margin-top: 64px;
  }
  body.no-sidebar #page-feed,
  body.no-sidebar #page-search,
  body.no-sidebar #page-events,
  body.no-sidebar #page-profile,
  body.no-sidebar #page-messages,
  body.no-sidebar #page-new-profile,
  body.no-sidebar #page-scout {
    margin-left: 0;
  }
  /* Inner page padding */
  .page-inner { padding: 24px 32px; max-width: 1100px; }

  /* ===== RESPONSIVE ===== */
  @media(max-width:1100px) {
    .app-layout { grid-template-columns:1fr; }
    .app-layout .sidebar-right { display:none; }
    .sidebar-right-events, .sidebar-right-ad { position:relative; top:0; }
    .profile-content { grid-template-columns:1fr; }
    .calendar-container { grid-template-columns:1fr; }
  }
  @media(max-width:768px) {
    /* ── SIDEBAR ── */
    .app-sidebar {
      transform: translateX(-100%);
      transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
      width: 280px;
      z-index: 1100;
      box-shadow: 4px 0 24px rgba(26,34,54,0.18);
    }
    .app-sidebar.open { transform: translateX(0); }
    #sidebarOverlay {
      background: rgba(26,34,54,0.55) !important;
      backdrop-filter: blur(2px);
    }
    .nav-hamburger { display:flex; }

    /* ── GRILLES ÉQUIPES / COMPÉTITIONS ── */
    .entity-grid { grid-template-columns:1fr !important; padding:12px 0; }
    .comp-grid { grid-template-columns:1fr !important; padding:12px 0; }
    .entity-card { border-radius:0 !important; border-left:none !important; border-right:none !important; }
    .entity-card::before { border-radius:0 !important; }

    /* ── LAYOUT ── */
    #page-feed, #page-search, #page-events, #page-profile, #page-messages, #page-new-profile, #page-scout {
      margin-left: 0;
    }
    /* Messagerie mobile — position fixed pour empêcher le scroll de la page */
    #page-messages {
      position: fixed !important;
      top: 64px !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      height: auto !important;
      min-height: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      z-index: 100;
    }
    #page-messages .messages-layout {
      height: 100% !important;
      overflow: hidden !important;
    }
    #page-messages .chat-area {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      overflow: hidden !important;
    }
    #page-messages .chat-header {
      flex-shrink: 0 !important;
    }
    #page-messages .chat-messages {
      flex: 1 1 0 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      min-height: 0 !important;
    }
    #page-messages .chat-input-area {
      flex-shrink: 0 !important;
    }
    #page-messages .conv-list {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      overflow: hidden !important;
    }
    #page-messages .conv-list-header {
      flex-shrink: 0 !important;
    }
    #page-messages #convList {
      flex: 1 1 0 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      min-height: 0 !important;
    }
    .app-layout { grid-template-columns:1fr; padding:12px; }
    #page-feed { padding: 64px 0 0 !important; }
    #page-feed .app-layout { padding: 12px 10px; }

    /* ── POSTS ── */
    .post-card { padding:14px 12px; border-radius:12px; }
    .post-action { padding:10px 6px; font-size:12px; min-height:44px; }
    .post-header { gap:10px; }

    /* ── MODALES ── slide-up sur mobile */
    .modal-overlay {
      align-items: flex-end !important;
      padding: 0 !important;
    }
    .modal {
      border-radius: 24px 24px 0 0 !important;
      max-width: 100% !important;
      width: 100% !important;
      padding: 24px 18px 32px !important;
      max-height: 92vh !important;
      margin: 0 !important;
    }
    .modal h2 { font-size:26px !important; }
    .role-selector { grid-template-columns: repeat(2,1fr); gap:8px; }
    .role-option { padding:10px; }
    .role-option .role-icon { font-size:22px; }
    .modal-close { top:12px; right:12px; }

    /* ── SEARCH ── */
    .search-filters { margin:0 12px 0; }
    .search-filters.open { margin:0 12px 12px; }
    .search-tabs { padding:8px 12px; }
    .search-hero { padding:16px 16px 12px !important; }
    .search-hero h2 { font-size:32px !important; margin-bottom:6px !important; }
    .search-hero p { margin-bottom:12px !important; font-size:13px !important; }
    #page-search .sf-guest-banner { margin:8px 0 6px !important; }
    .results-grid { padding:0 12px 24px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }

    /* ── EVENTS ── */
    .events-grid { padding:0 12px 24px; grid-template-columns:repeat(2,1fr); gap:12px; }
    .events-header { padding:16px 12px 0; }
    .events-filters { padding:10px 12px; }

    /* ── MESSAGES ── panneau liste/chat switchable ── */
    .messages-layout { grid-template-columns:1fr; position:relative; height:100%; }
    .messages-layout .conv-list {
      display:flex !important;
      position:absolute; inset:0; z-index:20;
      background:var(--card);
      transform:translateX(0);
      transition:transform 0.25s ease;
      flex-direction:column;
      overflow:hidden;
    }
    .messages-layout .conv-list .conv-list-header {
      flex-shrink: 0;
    }
    .messages-layout .conv-list #convList {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .messages-layout .conv-list.conv-hidden {
      transform:translateX(-100%);
      pointer-events:none;
    }
    .chat-area { min-height:0; }
    /* Bouton retour vers liste (injecté par JS) */
    .btn-back-convlist {
      display:flex; align-items:center; gap:6px;
      background:none; border:none; color:var(--primary);
      font-size:13px; font-weight:700; cursor:pointer; padding:0;
    }

    /* ── PROFIL ── */
    .profile-tabs { padding:0 12px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .profile-info-bar { padding:0 12px 12px; }
    .profile-cover-sport { display:none; }
    #profile-cover-area, #vp-cover { padding-top: 24% !important; }
    .profile-avatar-outer { margin-top:-36px; }
    .profile-avatar-circle { width:80px !important; height:80px !important; }
    .profile-avatar-circle svg { width:80px !important; height:80px !important; }
    .profile-row1 { gap:8px; padding-top:8px; }
    .btn-pf-primary { padding:8px 14px; font-size:12px; min-height:40px; }
    .btn-pf-secondary { padding:7px 10px; font-size:12px; min-height:40px; }
    .profile-row2 { flex-direction:column; align-items:flex-start; gap:8px; margin-top:10px; }
    .profile-name { font-size:18px; }
    .profile-stats-row { gap:16px; flex-wrap:wrap; }
    .profile-stat-num { font-size:16px; }
    #tab-actualites, #tab-apropos, #tab-effectif, #tab-staff,
    #tab-palmares { padding-left:0 !important; padding-right:0 !important; }
    #tab-photos, #tab-videos { padding-left:12px; padding-right:12px; }
    .trophies-grid { padding:0; }
    .trophy-card { border-radius:0 !important; border-left:none !important; border-right:none !important; }
    .trophy-card::before { border-radius:0 !important; }
    .profile-content { grid-template-columns:1fr; gap:10px; padding:12px 0; }
    .apropos-grid { grid-template-columns:1fr; gap:16px; }
    /* Ordre mobile vp-apropos : Infos → Chiffres clés → Réseaux sociaux → Bio */
    .stats-view-grid { grid-template-columns:1fr; }


    /* ── MESSAGERIE MOBILE — header + input fixes, messages scrollables ── */
    .chat-area {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      min-height: 0;
    }
    .chat-header {
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--card);
      padding: 8px 14px !important;
    }
    .chat-messages {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      min-height: 0;
    }
    .chat-input-area {
      flex-shrink: 0;
      position: sticky;
      bottom: 0;
      background: var(--card);
      padding: 10px 14px !important;
    }
    /* Avatar plus petit dans le header messagerie */
    #chatHeaderAvatar {
      width: 26px !important;
      height: 26px !important;
      font-size: 11px !important;
      flex-shrink: 0;
    }
    /* Bouton ⋮ adapté mobile */
    #chatHeaderActions .sf-chat-menu-btn {
      font-size: 20px !important;
      padding: 2px 6px !important;
    }
    /* Flèche message : toujours visible sur mobile (pas de hover) */
    .msg-arrow-btn {
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .msg-bubble-wrap:active .msg-arrow-btn,
    .msg-bubble-wrap.touch-active .msg-arrow-btn {
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    /* Bouton retour — flèche épaisse et bien visible */
    .btn-back-convlist {
      font-size: 26px;
      font-weight: 700;
      padding: 0 10px 0 0;
      min-width: 32px;
      line-height: 1;
    }

    /* ── POSTS — masquer les labels texte sur mobile, garder uniquement les icônes ── */
    .post-action-label { display: none; }
    /* Icônes des actions de post plus grandes sur mobile */
    .post-actions .post-action { font-size: 18px; padding: 8px 12px; }
    /* Messages pleine largeur sur mobile */
    .chat-messages { padding: 12px 8px !important; }
    .message { max-width: 88% !important; }

    /* ── MISC ── */
    /* ── CLASSEMENT : tableau scrollable horizontalement ── */
    /* Ranking table mobile: compact and scroll-friendly */
    .ranking-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .ranking-table { table-layout: fixed; width: 100%; }
    /* Rang col: narrow fixed */
    .ranking-table th:nth-child(1),
    .ranking-table td:nth-child(1) { width: 36px; text-align: center; }
    /* Equipe col: flexible, fills remaining space */
    .ranking-table .th-club,
    .ranking-table .td-club { width: auto; min-width: 0; }
    /* Stats cols: narrow fixed */
    .ranking-table th:not(.th-club):not(:first-child):not(:last-child),
    .ranking-table td:not(.td-club):not(:first-child):not(:last-child) { width: 36px; }
    .ranking-table th.th-club { min-width: 0; }
    .ranking-table td, .ranking-table th { padding: 0 4px; font-size: 12px; }
    .ranking-table .td-club { padding-left: 6px !important; }
    .rank-num { width: 26px; height: 26px; font-size: 12px; border-radius: 6px; }
    .ranking-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .ranking-select { min-width: unset; width: 100%; }
    .btn-add-team { margin-left: 0; justify-content: center; }
    /* PTS column: highlight strongly */
    .ranking-table .td-pts { font-size: 14px; font-weight: 800; color: var(--primary) !important; }
    /* Equipe name: 1 line with ellipsis */
    .ranking-table .td-club .td-club-inner { min-width: 0; overflow: hidden; }
    .ranking-table .td-club .td-club-inner span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; font-size: 13px; font-weight: 700; }
    .ranking-table .td-logo { width: 24px; height: 24px; flex-shrink: 0; }
    /* Actions col: hide on mobile to save space */
    .ranking-table td:last-child .row-actions { display: none; }
    .ranking-table td:last-child { width: 0; padding: 0; }
    /* Override inline padding on vp-tab-classement rendered content */
    #vp-tab-classement { padding-left: 0 !important; padding-right: 0 !important; }
    #vp-tab-classement > div { padding-left: 0 !important; padding-right: 0 !important; }

    /* ===== PLEINE LARGEUR MOBILE : onglets visiteur ===== */
    /* À propos */
    #vp-tab-apropos { padding-left: 0 !important; padding-right: 0 !important; }
    #vp-tab-apropos > * { padding-left: 0 !important; padding-right: 0 !important; }
    #vp-tab-apropos .apropos-grid { padding: 0; gap: 0; }
    #vp-tab-apropos .info-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 12px !important; }
    #vp-tab-apropos .info-card::before { border-radius: 0 !important; }
    #vp-tab-apropos #vp-tags { padding: 0 12px; }

    /* Actualités */
    #vp-tab-actualites { padding-left: 0 !important; padding-right: 0 !important; }
    #vp-tab-actualites > div { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }

    /* Effectif */
    #vp-tab-effectif { padding-left: 0 !important; padding-right: 0 !important; }
    #vp-tab-effectif > div { padding-left: 0 !important; padding-right: 0 !important; }

    /* Staff */
    #vp-tab-staff { padding-left: 0 !important; padding-right: 0 !important; }
    #vp-tab-staff > div { padding-left: 0 !important; padding-right: 0 !important; }

    /* Palmarès */
    #vp-tab-palmares { padding-left: 0 !important; padding-right: 0 !important; }
    #vp-tab-palmares > div { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }

    /* Évènements */
    #vp-tab-evenements { padding-left: 0 !important; padding-right: 0 !important; }
    #vp-tab-evenements > div { padding-left: 0 !important; padding-right: 0 !important; max-width: 100% !important; }
    /* Ranking table wrapper: full width, no extra margin */
    #tab-classement .ranking-table-wrap,
    #vp-tab-classement .ranking-table-wrap { margin: 0; }
    /* Classement card: no border-radius on sides for full-width feel */
    #vp-tab-classement > div > div { border-radius: 12px; overflow: hidden; }

    .trophies-grid { padding:0 0 24px; }
    .trophy-seasons-full { display:none !important; }
    .trophy-seasons-mob { display:block !important; white-space:nowrap; }

    /* ── EFFECTIF & STAFF : 2 cartes par ligne ── */
    .roster-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 10px !important;
      flex-wrap: unset !important;
    }
    .roster-card {
      width: 100% !important;
      flex: none !important;
    }
    .section { padding:40px 16px; }
  }

  @media(max-width:480px) {
    .events-grid { grid-template-columns:1fr; }
    /* 2 cartes par ligne sur mobile */
    .results-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    nav { padding:0 12px; }
    .modal { padding:20px 14px 28px !important; }
    .post-card { padding:12px 10px; }
    /* Adapter les cartes membres pour 2 colonnes */
    .athlete-card-body { padding:10px 10px 10px; min-height:100px; }
    .athlete-card-name { font-size:13px; }
    .athlete-card-role { font-size:11px; }
    .athlete-card-sport { font-size:12px; }
    .athlete-card-footer { padding:0 10px 12px; gap:6px; }
    .btn-card-primary, .btn-card-secondary { font-size:11px; padding:6px 6px; }
    .stars { font-size:11px; }
  }

  /* ===== UPLOAD / CREATE FORMS ===== */
  .create-form { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:28px; max-width:640px; }
  .create-form h3 { font-size:20px; font-weight:700; margin-bottom:24px; display:flex; align-items:center; gap:10px; }
  .sport-pills { display:flex; flex-wrap:wrap; gap:8px; }
  .sport-pill {
    padding:6px 14px; border-radius:100px; font-size:13px; font-weight:600; cursor:pointer;
    border:1px solid var(--border); background:transparent; color:var(--text-muted); transition:all 0.2s;
  }
  .sport-pill:hover, .sport-pill.active { background:rgba(0,194,122,0.1); border-color:rgba(0,229,160,0.4); color:var(--primary); }

  /* Inline notification */
  .notification-item {
    display:flex; align-items:flex-start; gap:12px;
    padding:14px 0; border-bottom:1px solid var(--border); cursor:pointer; transition:opacity 0.2s;
    min-width:0; overflow:hidden;
  }
  .notification-item:hover { opacity:0.8; }
  .notification-icon {
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:16px;
  }
  .notif-follow { background:rgba(0,194,122,0.1); }
  .notif-like { background:rgba(255,61,90,0.1); }
  .notif-event { background:rgba(255,184,0,0.1); }
  .notification-text { font-size:13px; line-height:1.5;   min-width:0; overflow:hidden;
  }
  .notification-text strong { font-weight:700; }
  .notification-time { font-size:11px; color:var(--text-muted); margin-top:3px; font-family:'Space Mono',monospace; }

  /* Page transition */
  .page { animation: fadeInUp 0.3s ease; }

  @keyframes pulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.4; transform:scale(1.4); }
  }
  .info-input {
    width:100%; background:var(--bg); border:1.5px solid var(--border); border-radius:8px;
    padding:6px 10px; color:var(--text); font-family:'Outfit',sans-serif; font-size:14px;
    font-weight:600; outline:none; transition:border-color 0.2s; appearance:auto;
  }
  .info-input:focus { border-color:var(--primary); }

  /* ===== COMMENTS SECTION ===== */
  .comments-section {
    display: none;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    animation: fadeInUp 0.22s ease;
  }
  .comments-section.open { display: block; }

  /* Existing comments list */
  .comments-list {
    padding: 14px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .comment-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .comment-body {
    flex: 1;
    background: var(--bg);
    border-radius: 12px;
    padding: 10px 13px;
    position: relative;
  }
  .comment-author {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
  }
  .comment-author .verified { color: var(--primary); font-size: 11px; }
  .comment-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
  }
  .comment-time {
    font-size: 11px;
    color: var(--text-muted);
  }
  .comment-like-btn {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    transition: color 0.15s;
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .comment-like-btn:hover { color: var(--accent); }
  .comment-like-btn.liked { color: var(--accent); }
  .comment-reply-btn {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    transition: color 0.15s;
  }
  .comment-reply-btn:hover { color: var(--primary); }

  /* Show more comments */
  .comments-show-more {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 16px 0;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.15s;
  }
  .comments-show-more:hover { opacity: 0.7; }

  /* Comment input */
  .comment-input-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 12px 16px 14px;
  }
  .comment-input-wrap {
    flex: 1;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    transition: border-color 0.2s;
  }
  .comment-input-wrap:focus-within {
    border-color: var(--primary);
    background: var(--card);
  }
  .comment-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 9px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    color: var(--text);
    resize: none;
    min-height: 36px;
    max-height: 120px;
    line-height: 1.5;
  }
  .comment-input::placeholder { color: var(--text-muted); }
  .comment-submit-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(6,192,126,0.3);
  }
  .comment-submit-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.08);
  }
  .comment-submit-btn:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
  }

  /* ===== MONTHLY CALENDAR VIEW ===== */
  .cal-monthly-wrap {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    display: none; /* hidden by default, shown via JS when "Mensuel" is selected */
  }

  /* Header : titre du mois + navigation */
  .cal-monthly-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
  }
  .cal-monthly-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    background: linear-gradient(135deg, var(--primary), #0EA5E9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
  }
  .cal-monthly-nav {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cal-monthly-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cal-monthly-nav-btn:hover { background: var(--bg); border-color: var(--primary); color: var(--primary); }
  .cal-monthly-today-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    transition: all 0.2s;
  }
  .cal-monthly-today-btn:hover { background: var(--bg); color: var(--primary); border-color: var(--primary); }

  /* Grille 7 colonnes */
  .cal-monthly-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: none;
  }

  /* En-têtes des jours (Lun, Mar…) */
  .cal-monthly-day-hdr {
    text-align: center;
    padding: 10px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  /* Cellule d'un jour */
  .cal-monthly-cell {
    min-height: 96px;
    padding: 8px 8px 6px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    transition: background 0.15s;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .cal-monthly-cell:nth-child(7n) { border-right: none; }
  .cal-monthly-cell:hover { background: var(--bg2); }

  /* Jours du mois précédent/suivant */
  .cal-monthly-cell.other-month {
    background: var(--bg);
    opacity: 0.5;
  }

  /* Aujourd'hui */
  .cal-monthly-cell.is-today {
    background: linear-gradient(135deg, rgba(6,192,126,0.08), rgba(14,165,233,0.05));
  }
  .cal-monthly-cell.is-today .cal-monthly-date-num {
    background: linear-gradient(135deg, var(--primary), #0EA5E9);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Numéro du jour */
  .cal-monthly-date-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
  }

  /* Pill de match dans une cellule */
  .cal-monthly-match-pill {
    display: block;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: opacity 0.15s;
    line-height: 1.4;
  }
  .cal-monthly-match-pill:hover { opacity: 0.8; }

  .cal-monthly-pill-upcoming {
    background: rgba(6,192,126,0.13);
    color: var(--primary);
    border: 1px solid rgba(6,192,126,0.25);
  }
  .cal-monthly-pill-finished {
    background: rgba(30,41,59,0.07);
    color: var(--text-muted);
    border: 1px solid var(--border);
  }

  /* "+N autres" overflow indicator */
  .cal-monthly-more {
    font-size: 10px;
    color: var(--text-light);
    font-weight: 600;
    padding: 1px 4px;
  }

  /* Points de match — visibles sur tous les écrans sous les pills/numéro */
  .cal-monthly-match-dots {
    display: flex; justify-content: center; gap: 4px; margin-top: 4px; flex-wrap: wrap;
  }
  .cal-monthly-match-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  .cal-monthly-match-dot.dot-upcoming {
    background: var(--primary); box-shadow: 0 0 0 2px rgba(6,192,126,0.22);
  }
  .cal-monthly-match-dot.dot-finished {
    background: var(--primary); opacity: 0.42;
  }

  /* Responsive : réduire la hauteur des cellules sur petit écran */
  @media (max-width: 768px) {
    .cal-monthly-cell { min-height: 64px; padding: 5px 4px; cursor: pointer; }
    .cal-monthly-cell.has-match:active { background: var(--bg2); }
    .cal-monthly-match-pill { display: none; }
    .cal-monthly-match-dots { margin-top: 5px; gap: 4px; }
    .cal-monthly-match-dot { width: 9px; height: 9px; }
    .cal-monthly-cell.is-today .cal-monthly-date-num,
    .cal-monthly-date-num { font-size: 12px; width: 22px; height: 22px; }
    .cal-monthly-day-hdr { font-size: 10px; padding: 8px 2px; }
  }
  /* ===== CALENDRIER MOBILE : pleine largeur ===== */
  @media(max-width:768px){
    #calsub-rencontres { padding: 16px 0 48px !important; }
    #calsub-rencontres > div:first-child { padding-left: 12px; padding-right: 12px; }
    #calMatchList { max-width: 100%; }
    #vp-tab-calendrier > div { padding-left: 0 !important; padding-right: 0 !important; }
    .cal-month-separator { padding-left: 12px; }
    .match-row { padding: 12px 14px; }
  }
  /* ===== CLASSEMENT ===== */
  #tab-classement { padding: 0 32px 48px; }
  @media(max-width:768px){ 
    #tab-classement { padding: 0 0 32px; }
    /* Toolbar (filters + title) gets side padding, table stretches full width */
    #tab-classement > div > div:first-child { padding-left: 12px; padding-right: 12px; }
    /* Table wrapper full width, no margin */
    #tab-classement .ranking-table-wrap { margin: 0; width: 100%; }
    /* Ranking card: full width, no side border-radius */
    #tab-classement > div > div:not(:first-child) { border-radius: 0; overflow: hidden; }
    /* Card wrapper: no side margin, full bleed */
    #tab-classement .ranking-table-wrap,
    #tab-classement > div > div { margin-left: 0 !important; margin-right: 0 !important; }
    /* Override card container side padding */
    #tab-classement { padding-left: 0 !important; padding-right: 0 !important; }
    /* Classement list container */
    #classements-list > div { border-radius: 0 !important; }
  }

  .ranking-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 20px 0 16px;
  }
  .ranking-select {
    padding: 7px 12px; border-radius: 8px;
    border: 1.5px solid var(--border); background: var(--bg);
    color: var(--text-muted); font-family: 'Outfit', sans-serif;
    font-size: 12px; outline: none; cursor: pointer;
    transition: border-color 0.2s; min-width: 200px;
  }
  .ranking-select:focus { border-color: var(--primary); color: var(--text); }
  .btn-add-team {
    margin-left: auto; padding: 9px 18px; border-radius: 9px;
    background: linear-gradient(135deg,var(--primary),var(--primary-dark));
    color: #fff; border: none; font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: 'Outfit', sans-serif;
    display: flex; align-items: center; gap: 6px;
    transition: all 0.2s; box-shadow: 0 3px 10px rgba(6,192,126,0.25);
    white-space: nowrap;
  }
  .btn-add-team:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(6,192,126,0.38); }

  .ranking-table-wrap {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden;
  }
  .ranking-table { width: 100%; border-collapse: collapse; font-family: 'Outfit', sans-serif; }
  .ranking-table thead tr { background: var(--bg); border-bottom: 2px solid var(--border); }
  .ranking-table th {
    padding: 10px 8px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--text-muted); text-align: center; white-space: nowrap;
  }
  .ranking-table th.th-club { text-align: left; padding-left: 14px; min-width: 160px; }
  .ranking-table td {
    height: 46px; padding: 0 8px; font-size: 15px;
    color: var(--text); text-align: center;
    border-bottom: none;
  }
  .ranking-table tbody tr:last-child td { border-bottom: none; }
  .ranking-table tbody tr { transition: background 0.15s; }
  .ranking-table tbody tr:nth-child(odd)  { background: var(--card); }
  .ranking-table tbody tr:nth-child(even) { background: var(--bg); }
  .ranking-table tbody tr:hover { background: rgba(6,192,126,0.07) !important; }
  .ranking-table tbody tr.mon-club,
  .ranking-table tbody tr.mon-club:nth-child(odd),
  .ranking-table tbody tr.mon-club:nth-child(even),
  .ranking-table tbody tr.mon-club:hover { background: #FFEE58 !important; }

  /* Rang */
  .rank-num {
    width: 32px; height: 32px; border-radius: 7px; font-size: 15px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .rank-1   { background: var(--bg); color: var(--text-muted); }
  .rank-2   { background: var(--bg); color: var(--text-muted); }
  .rank-3   { background: var(--bg); color: var(--text-muted); }
  .rank-std { background: var(--bg); color: var(--text-muted); font-size: 14px; }

  /* Zones */
  .ranking-table tbody tr.zone-up   td:first-child { border-left: 3px solid var(--primary); }
  .ranking-table tbody tr.zone-play td:first-child { border-left: 3px solid #F59E0B; }
  .ranking-table tbody tr.zone-down td:first-child { border-left: 3px solid var(--accent); }

  /* Mon club highlight */
  .ranking-table tbody tr.my-club {
    background: linear-gradient(90deg,rgba(6,192,126,0.08),rgba(6,192,126,0.02));
  }
  .ranking-table tbody tr.my-club td { font-weight: 700; }

  /* Club cell */
  .td-club { text-align: left !important; padding-left: 14px !important; }
  .td-club-inner { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
  .td-logo {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    background: var(--bg); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
  }

  /* Points col */
  .td-pts { font-family:'Outfit',sans-serif; font-size:15px; font-weight:800; color:var(--text); }

  /* Actions on hover */
  .row-actions { display:flex; gap:3px; justify-content:center; opacity:0; transition:opacity 0.15s; }
  .ranking-table tbody tr:hover .row-actions { opacity:1; }
  .btn-row-edit, .btn-row-del {
    width:26px; height:26px; border-radius:6px; border:none; cursor:pointer; font-size:12px;
    display:flex; align-items:center; justify-content:center; transition:all 0.15s;
  }
  .btn-row-edit { background:rgba(14,165,233,0.1); color:#0EA5E9; }
  .btn-row-edit:hover { background:rgba(14,165,233,0.22); }
  .btn-row-del  { background:rgba(244,63,94,0.1); color:var(--accent); }
  .btn-row-del:hover  { background:rgba(244,63,94,0.22); }

  /* Legend */
  .ranking-legend {
    display:flex; gap:20px; flex-wrap:wrap;
    padding:12px 16px; border-top:1px solid var(--border); background:var(--bg);
  }
  .legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); font-weight:600; }
  .legend-dot  { width:10px; height:10px; border-radius:3px; }

  /* Empty state */
  .ranking-empty { padding:60px 24px; text-align:center; color:var(--text-muted); }
  .ranking-empty-icon { font-size:52px; margin-bottom:12px; }


  /* ── Share modal ── */
  .share-networks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 20px 0;
  }
  .share-network-btn {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 14px 8px; border-radius: 14px;
    border: 1.5px solid var(--border);
    background: transparent; color: var(--text);
    cursor: pointer; transition: all 0.2s; font-size: 12px; font-weight: 600;
  }
  .share-network-btn:hover { border-color: var(--primary); background: rgba(0,194,122,0.07); transform: translateY(-2px); }
  .share-network-btn svg { display:block; }
  .share-copy-row {
    display: flex; gap: 8px; align-items: center;
    background: var(--dark2); border-radius: 10px;
    padding: 10px 14px; margin-top: 4px;
  }
  .share-copy-row span, .share-copy-row a {
    flex: 1; font-size: 12px; color: var(--primary);
    word-break: break-all; overflow-wrap: anywhere;
  }
  .share-copy-btn {
    padding: 6px 14px; border-radius: 8px; border: none;
    background: var(--primary); color: #fff; font-size: 12px;
    font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 0.2s;
  }
  .share-copy-btn:hover { background: #00a86a; }

  /* ── Rating modal ── */
  .rating-stars-input {
    display: flex; gap: 8px; justify-content: center;
    margin: 20px 0 8px; font-size: 40px; cursor: pointer;
  }
  .rating-stars-input span {
    transition: transform 0.15s, color 0.15s;
    color: var(--border); line-height: 1;
    user-select: none;
  }
  .rating-stars-input span:hover,
  .rating-stars-input span.active { color: #FFB800; transform: scale(1.18); }
  .rating-label {
    text-align: center; font-size: 13px; color: var(--text-muted);
    min-height: 20px; margin-bottom: 16px; font-weight: 600;
  }

  /* ===== SPORT AUTOCOMPLETE ===== */
  .sport-autocomplete-wrap { position:relative; width:100%; }
  .sport-autocomplete-wrap input { width:100%; box-sizing:border-box; }
  /* Dropdown téléporté dans <body>
 → position:fixed → jamais clipé */
  .sport-suggestions {
    position:fixed; z-index:99999;
    background:var(--card);
    border:1.5px solid var(--border);
    border-radius:14px;
    box-shadow:0 12px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
    max-height:240px; overflow-y:auto;
    display:none;
    padding:6px;
    min-width:200px;
  }
  .sport-suggestions.open { display:block; }
  .sport-suggestions::-webkit-scrollbar { width:5px; }
  .sport-suggestions::-webkit-scrollbar-track { background:transparent; }
  .sport-suggestions::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
  .sport-suggestion-item {
    padding:9px 14px; cursor:pointer; font-size:13px; font-weight:500;
    border-radius:9px; transition:background 0.1s, color 0.1s; user-select:none;
  }
  .sport-suggestion-item:hover,
  .sport-suggestion-item.active {
    background:var(--primary-light, #e8fdf2); color:var(--primary, #00B96B);
  }

  /* ── Poste multi-chips ───────────────────────────────── */
  .poste-multi-wrap {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    min-height: 38px; padding: 5px 10px;
    background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px;
    cursor: text; transition: border-color 0.2s;
  }
  .poste-multi-wrap:focus-within { border-color: var(--primary); }
  .poste-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(6,192,126,0.12); color: var(--primary);
    border: 1px solid rgba(6,192,126,0.35); border-radius: 100px;
    padding: 2px 10px 2px 11px; font-size: 12px; font-weight: 600;
    white-space: nowrap;
  }
  .poste-chip-remove {
    cursor: pointer; font-size: 14px; line-height: 1;
    color: var(--primary); opacity: 0.7; border: none; background: none;
    padding: 0; margin: 0; font-family: inherit;
  }
  .poste-chip-remove:hover { opacity: 1; }
  /* ── Chips nationalité (bleu neutre) ── */
  .nat-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(56,139,253,0.12); color: #1a6fc4;
    border: 1px solid rgba(56,139,253,0.35); border-radius: 100px;
    padding: 2px 10px 2px 11px; font-size: 12px; font-weight: 600;
    white-space: nowrap;
  }
  .dark .nat-chip { background: rgba(56,139,253,0.18); color: #6fb3f9; border-color: rgba(56,139,253,0.4); }
  .nat-chip-remove {
    cursor: pointer; font-size: 14px; line-height: 1;
    color: #1a6fc4; opacity: 0.7; border: none; background: none;
    padding: 0; margin: 0; font-family: inherit;
  }
  .dark .nat-chip-remove { color: #6fb3f9; }
  .nat-chip-remove:hover { opacity: 1; }
  .poste-multi-input {
    flex: 1; min-width: 120px; border: none; outline: none;
    background: transparent; color: var(--text);
    font-family: 'Outfit', sans-serif; font-size: 13px; padding: 2px 0;
  }
  .poste-multi-input::placeholder { color: var(--text-muted); }
  .poste-multi-wrap.form-input { padding: 5px 10px; }
  .poste-multi-wrap.info-input { padding: 5px 10px; }

  /* ── Modal Abonnés / Abonnements ───────────────── */
  #modal-follow-list, #modal-favorites { display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; }
  #modal-follow-list.open, #modal-favorites.open { display:flex; }
  .follow-modal-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.45); }
  .follow-modal-box {
    position:relative; z-index:1; background:var(--card); border-radius:18px;
    width:420px; max-width:95vw; max-height:80vh; display:flex; flex-direction:column;
    box-shadow:0 8px 40px rgba(0,0,0,0.18);
  }
  .follow-modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px 0; gap:12px;
  }
  .follow-modal-tabs { display:flex; gap:8px; }
  .follow-modal-tab {
    padding:7px 18px; border-radius:100px; font-size:13px; font-weight:700; cursor:pointer;
    background:transparent; border:1.5px solid var(--border); color:var(--text-muted);
    transition:all 0.18s;
  }
  .follow-modal-tab.active { background:var(--primary); border-color:var(--primary); color:#fff; }
  .follow-modal-close {
    width:32px; height:32px; border-radius:50%; border:none; background:var(--bg);
    color:var(--text-muted); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .follow-modal-close:hover { background:var(--border); color:var(--text); }
  .follow-modal-list { overflow-y:auto; padding:14px 20px 20px; flex:1; display:flex; flex-direction:column; gap:10px; }
  .follow-modal-item {
    display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px;
    background:var(--bg); border:1px solid var(--border);
  }
  .follow-modal-avatar {
    width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:15px; color:#fff; flex-shrink:0;
  }
  .follow-modal-info { flex:1; min-width:0; }
  .follow-modal-name { font-weight:700; font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .follow-modal-sport { font-size:12px; color:var(--text-muted); margin-top:2px; }
  .follow-modal-unsub {
    padding:5px 12px; border-radius:100px; border:1.5px solid var(--border); background:transparent;
    color:var(--text-muted); font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0;
    transition:all 0.18s;
  }
  .follow-modal-unsub:hover { border-color:#e74c3c; color:#e74c3c; }
  .follow-modal-empty { text-align:center; padding:32px 0; color:var(--text-muted); font-size:14px; }

/* ══ INDICATIF SELECTOR — design moderne ══════════════════ */
.indicatif-wrap {
  position: relative;
  font-family: 'Outfit', sans-serif;
}
.indicatif-display {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 42px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
  user-select: none;
  min-width: 130px;
}
.indicatif-display:hover,
.indicatif-display.open {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(6,192,126,0.12);
}
.indicatif-display-code { display: none; } /* code +XX masqué */
.indicatif-display-country {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.indicatif-display::after {
  content: '';
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.indicatif-display.open::after { transform: rotate(180deg); }

.indicatif-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 500;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14);
  min-width: 220px;
  overflow: hidden;
  animation: indDropIn 0.15s ease;
}
@keyframes indDropIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}

.indicatif-search {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px 10px 36px;
  border: none;
  border-bottom: 1.5px solid var(--border);
  background: var(--bg);
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  color: var(--text);
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
}
.indicatif-search::placeholder { color: var(--text-muted); }
.indicatif-search:focus { background-color: var(--card); }

.indicatif-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.indicatif-list::-webkit-scrollbar { width: 4px; }
.indicatif-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.indicatif-item {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.12s;
}
.indicatif-item:hover { background: var(--bg); }
.indicatif-item-code { display: none; } /* code +XX masqué dans la liste aussi */
.indicatif-item-country {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
/* ══════════════════════════════════════════════════════════ */

  /* ═══ PAGE SCOUT ═══ */
  @media(max-width:768px) {
    #scout-main-grid { grid-template-columns:1fr !important; }
    #scout-quick-stats { grid-template-columns:repeat(2,1fr) !important; }
  }
  @media(max-width:480px) {
    #scout-quick-stats { grid-template-columns:1fr !important; }
  }
  @media(max-width:600px) {
    .trophy-seasons-full { display: none !important; }
    .trophy-seasons-mob  { display: block !important; }
  }

  /* ═══ Protection globale débordement texte dans les cartes ═══ */
  .trophy-seasons-mob { display: none !important; }
  .trophy-seasons-full { display: block !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; line-height: 1.5; }
  /* Desktop : hauteur fixe 88px comme en mode visiteur */
  .trophy-card { height: 88px !important; max-height: 88px !important; overflow: hidden !important; }
  .trophy-card > div:first-child { height: 88px !important; max-height: 88px !important; overflow: hidden !important; }

  /* Trophy detail modal — no default padding, content handles layout */
  #modal-trophy-seasons .modal {
    padding: 0 !important;
    overflow: hidden;
  }
  #modal-trophy-seasons .modal-close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 20;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
  }
  #modal-trophy-seasons .modal-close:hover {
    background: rgba(239,68,68,0.85);
    border-color: #ef4444;
  }
  .event-card, .roster-card, .trophy-card, .comp-card, .entity-card,
  .agenda-event-card, .post-card, .athlete-card {
    min-width: 0;
  }
  .event-card *, .agenda-event-card * {
    max-width: 100%;
  }


/* ── MOBILE 2 colonnes : cartes membres compactes ── */
@media(max-width:480px) {
  .athlete-card-top { height:110px; }
  .athlete-card-avatar {
    width:52px !important; height:52px !important;
    bottom:-22px !important; font-size:18px !important;
  }
}

/* ── Mobile : Recherche avancée + Me localiser sur la même ligne (Évènements) ── */
@media(max-width:600px) {
  #page-events .advanced-evt-toggle,
  #page-events #sf-geo-evt-btn {
    font-size:12px;
    padding:5px 10px;
  }
  #page-events > div > div[style*="flex-wrap"] {
    gap:8px !important;
  }
}

/* Palmarès : desktop = toutes saisons, mobile = tronqué */
.trophy-seasons-full { display:block; }
.trophy-seasons-mob  { display:none; }

/* ── Mobile : Équipes / Compétitions / Palmarès pleine largeur ── */
@media(max-width:768px) {
  #calsub-equipes,
  #calsub-competitions { padding: 16px 0 40px !important; }
  #calsub-equipes > div:first-child,
  #calsub-competitions > div:first-child { padding: 0 12px; }
  #equipesGrid,
  #competitionGrid { max-width: 100% !important; }
}

/* ── Mobile : Agenda pleine largeur ── */
@media(max-width:768px) {
  #tab-agenda { padding: 16px 0 40px !important; }
  #tab-agenda > div:first-child { padding: 0 12px; max-width: 100% !important; }
  #agendaContainer { max-width: 100% !important; padding: 0; }
  .agenda-event-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
}

/* ── Mobile : Photos pleine largeur (style Actualités) ── */
@media(max-width:768px) {
  #tab-photos { padding: 16px 0 40px !important; }
  #tab-photos > div:first-child { padding: 0 12px; max-width: 100% !important; }
  #photosGrid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  #photosGrid > div {
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    width: 100% !important;
  }
  #photosGrid > div img {
    width: 100% !important;
    height: auto !important;
    max-height: 70vw !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }
}

/* ── Espace Scout : responsive mobile ── */
@media(max-width:768px) {
  /* Wrapper principal : padding réduit, pas de débordement */
  #page-scout { overflow-x: hidden !important; }
  #page-scout > div {
    padding: 16px 12px 60px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header : boutons pleine largeur en colonne */
  #page-scout > div > div:first-child { margin-bottom: 16px !important; }
  #page-scout > div > div:first-child > div:last-child {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  #page-scout > div > div:first-child > div:last-child > button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Quick stats : 2 colonnes compactes */
  #scout-quick-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  #scout-quick-stats > div {
    padding: 12px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Main grid : 1 seule colonne */
  #scout-main-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  #scout-main-grid > div,
  #scout-main-grid > div > div {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Cartes intérieures : padding réduit, pas de débordement */
  #scout-main-grid [style*="padding:24px"],
  #scout-main-grid [style*="padding:20px"] {
    padding: 14px !important;
  }

  /* Kanban : scroll horizontal propre */
  #scout-kanban {
    gap: 8px !important;
    padding-bottom: 12px !important;
  }
  #scout-kanban > div {
    min-width: 140px !important;
    flex-shrink: 0 !important;
  }
}

/* ── Modération admin ── */
.rf-btn { padding:6px 14px; border-radius:20px; border:1.5px solid var(--border); background:transparent; color:var(--text-muted); font-size:12px; font-weight:600; cursor:pointer; transition:all 0.15s; }
.rf-btn:hover { border-color:var(--primary); color:var(--primary); }
.rf-btn.rf-active { background:var(--primary); border-color:var(--primary); color:#fff; }
.report-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.report-card.reviewed { opacity:0.5; }
.report-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:8px; flex-wrap:wrap; }
.report-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:100px; }
.rb-post { background:#E6F1FB; color:#185FA5; }
.rb-profile { background:#EEEDFE; color:#534AB7; }
.rb-event { background:#FAEEDA; color:#854F0B; }
.rb-message { background:#F1EFE8; color:#5F5E5A; }
.rb-pending { background:#FCEBEB; color:#A32D2D; }
.rb-reviewed { background:#EAF3DE; color:#3B6D11; }
.rb-dismissed { background:#F1EFE8; color:#5F5E5A; }
.report-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.report-actions button { padding:6px 12px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; border:1.5px solid var(--border); background:transparent; color:var(--text); transition:all 0.15s; }
.report-actions button:hover { opacity:0.8; }
.btn-report-dismiss { color:var(--text-muted) !important; }
.btn-report-warn { border-color:#F59E0B !important; color:#854F0B !important; }
.btn-report-ban { border-color:#ef4444 !important; color:#ef4444 !important; }
.btn-report-delete { border-color:#ef4444 !important; color:#ef4444 !important; }