/*
 * Palabre — feuille de style partagée (web/public/assets/css/app.css)
 *
 * Choix technique : CSS écrit à la main (pas de framework CDN), pour rester léger,
 * autonome hors-ligne (service worker cache-first sur /assets/) et sans dépendance
 * réseau tierce (cahier des charges §5.3, faible bande passante).
 *
 * Direction visuelle (v2) : reprise de la maquette fournie par le porteur de projet
 * (dossier design/) — esthétique "vert néon" sur fond très sombre, cartes avec
 * bordures lumineuses, badges de statut, barres de statistiques, listes de classement.
 * Bibliothèque de composants volontairement large ci-dessous : toutes les pages
 * (existantes et nouvelles) doivent composer leur mise en page avec CES classes
 * plutôt que d'ajouter du CSS ailleurs, pour garder un langage visuel cohérent et
 * UN SEUL fichier de style à maintenir.
 */

:root {
  /* Valeurs exactes extraites de design/maquette/*.html (config Tailwind du porteur de
     projet : brand #22ff88, bg #06120e, card #0b1f19, line #16402f) — alignées ici pour
     une fidélité de couleur exacte, tout en gardant notre propre CSS autonome (pas de
     Tailwind CDN : contrainte hors-ligne/PWA, cf. en-tête de ce fichier). */
  --color-bg: #06120e;
  --color-bg-elevated: #081a14;
  --color-surface: #0b1f19;
  --color-surface-raised: #102a21;
  --color-border: #16402f;
  --color-border-strong: #1f5a40;
  --color-text: #eef7f1;
  --color-text-muted: #8aa89b;
  --color-text-faint: #597264;

  --color-primary: #22ff88;
  --color-primary-light: #5dffac;
  --color-primary-dark: #16cc69;
  --color-on-primary: #052e16;

  --color-purple: #a78bfa;
  --color-purple-bg: #211a3a;
  --color-gold: #fbbf24;
  --color-gold-bg: #332607;
  --color-blue: #60a5fa;
  --color-blue-bg: #122238;
  --color-red: #f87171;
  --color-red-bg: #2e1215;

  --color-danger: #f87171;
  --color-danger-bg: #2e1215;
  --color-info: #60a5fa;
  --color-info-bg: #122238;
  --color-accent: #4ade80;
  --color-accent-bg: #0f2a1d;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --max-width: 1240px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px rgba(34, 255, 136, 0.3), 0 8px 28px -6px rgba(34, 255, 136, 0.35);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Fira Code", Consolas, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* -------------------------------------------------------------------- */
/* Thème réel (mode sombre/clair + couleur d'accent) — settings.php      */
/* -------------------------------------------------------------------- */
/* L'onglet "Apparence" de settings.php affichait des cartes/pastilles cliquables mais
   un texte "pas encore disponible" : aucune des deux n'avait d'effet. Ceci les rend
   réelles via un attribut sur <html> (posé en JS, avant le premier paint pour éviter tout
   flash — voir le script inline dans partials/head.php) qui pilote CES variables. Les
   deux jeux de noms de variables sont redéfinis ensemble car app.css (--color-surface,
   --color-border, --color-primary...) et le build Tailwind compilé assets/css/tailwind.css
   (--color-card, --color-line, --color-brand...) utilisent des noms différents pour les
   mêmes rôles ; --color-bg est le seul nom partagé par les deux. app.css est chargé après
   tailwind.css, donc ces règles l'emportent déjà sans avoir besoin de !important.

   Couleur d'accent : s'applique dans les deux modes, change uniquement la teinte
   "primaire/brand" (boutons, liens, bordures actives), jamais le fond. */
:root[data-accent="blue"] {
  --color-primary: #60a5fa; --color-primary-light: #93c5fd; --color-primary-dark: #3b82f6; --color-on-primary: #0a1930;
  --color-brand: #60a5fa;
}
:root[data-accent="purple"] {
  --color-primary: #a78bfa; --color-primary-light: #c4b5fd; --color-primary-dark: #8b5cf6; --color-on-primary: #1e1b3a;
  --color-brand: #a78bfa;
}
:root[data-accent="gold"] {
  --color-primary: #fbbf24; --color-primary-light: #fde68a; --color-primary-dark: #d97706; --color-on-primary: #332607;
  --color-brand: #fbbf24;
}
:root[data-accent="red"] {
  --color-primary: #f87171; --color-primary-light: #fca5a5; --color-primary-dark: #ef4444; --color-on-primary: #2e1215;
  --color-brand: #f87171;
}
:root[data-accent="grey"] {
  --color-primary: #9ca3af; --color-primary-light: #d1d5db; --color-primary-dark: #6b7280; --color-on-primary: #1f2937;
  --color-brand: #9ca3af;
}

/* Mode clair : fond et texte inversés, l'accent choisi (vert par défaut) reste identique. */
:root[data-theme="light"] {
  --color-bg: #f4f8f6; --color-bg-elevated: #ffffff;
  --color-surface: #ffffff; --color-surface-raised: #eef4f1; --color-card: #ffffff;
  --color-border: #d7e3dd; --color-border-strong: #bccdc4; --color-line: #d7e3dd;
  --color-text: #0b1f19; --color-text-muted: #4b6358; --color-text-faint: #7c9389;
  --color-purple-bg: #f1edfd; --color-gold-bg: #fef6e0; --color-blue-bg: #e9f1fe;
  --color-red-bg: #fdeded; --color-danger-bg: #fdeded; --color-info-bg: #e9f1fe; --color-accent-bg: #e8f9ef;
}
/* Mode "Automatique" : posé comme data-theme="auto" par le script, resolu ici via la
   media query système plutôt qu'en JS — pas de re-render nécessaire si l'OS change de
   thème pendant que la page est ouverte. */
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --color-bg: #f4f8f6; --color-bg-elevated: #ffffff;
    --color-surface: #ffffff; --color-surface-raised: #eef4f1; --color-card: #ffffff;
    --color-border: #d7e3dd; --color-border-strong: #bccdc4; --color-line: #d7e3dd;
    --color-text: #0b1f19; --color-text-muted: #4b6358; --color-text-faint: #7c9389;
    --color-purple-bg: #f1edfd; --color-gold-bg: #fef6e0; --color-blue-bg: #e9f1fe;
    --color-red-bg: #fdeded; --color-danger-bg: #fdeded; --color-info-bg: #e9f1fe; --color-accent-bg: #e8f9ef;
  }
}
/* En mode clair, les dégradés radiaux décoratifs du <body> (pensés pour un fond très
   sombre) deviennent beaucoup trop visibles/durs — on les adoucit fortement. */
:root[data-theme="light"] body {
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(34, 255, 136, 0.06), transparent),
    radial-gradient(700px 600px at -5% 35%, rgba(16, 185, 129, 0.04), transparent);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] body {
    background-image:
      radial-gradient(900px 520px at 88% -8%, rgba(34, 255, 136, 0.06), transparent),
      radial-gradient(700px 600px at -5% 35%, rgba(16, 185, 129, 0.04), transparent);
  }
}

* { box-sizing: border-box; }
/* Les champs <input type="search"> affichent nativement une icône "X" de certains
   navigateurs (WebKit/Blink, y compris Opera) pour effacer le contenu — mal alignée avec
   nos propres icônes/paddings personnalisés (barre de recherche du topbar, héros de
   page). On la masque partout : chaque champ de recherche du site a déjà sa propre
   icône loupe et son propre bouton, inutile de doubler avec celui du navigateur. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}
::selection { background: var(--color-primary); color: var(--color-on-primary); }
/* Compaction globale (~20%) : tout le CSS de ce fichier ET les classes utilitaires Tailwind
   compilées (assets/css/tailwind.css) sont exprimées en rem, donc réduire la taille de police
   racine réduit proportionnellement polices, paddings, gaps et rayons PARTOUT sur le site en
   un seul point de contrôle, plutôt que de retoucher des centaines de valeurs une par une. */
html { font-size: 80%; }
html { scrollbar-color: var(--color-border-strong) var(--color-bg); }
body::-webkit-scrollbar { width: 11px; }
body::-webkit-scrollbar-track { background: var(--color-bg); }
body::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 999px; border: 2px solid var(--color-bg); }

html, body {
  margin: 0; padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* La page elle-même ne doit jamais défiler horizontalement : seuls les conteneurs
     explicitement marqués .overflow-x-auto (tableaux larges) le peuvent. */
  overflow-x: hidden;
  max-width: 100vw;
}

/* De nombreux champs de formulaire utilisent un min-width en style inline pour garder une
   taille confortable sur desktop (ex. "Nouvelle tâche…" à 140px). Sur mobile, plusieurs champs
   voisins avec ces min-width dans une même ligne flex forcaient la ligne à dépasser la largeur
   de l'écran, provoquant le défilement horizontal de toute la page (room.php, questions.php,
   live.php, events.php, resources.php, projects.php...). Sous ce seuil, on neutralise ces
   min-width : les champs restent utilisables, juste plus étroits, et la ligne se replie
   normalement (flex-wrap) au lieu de déborder. */
@media (max-width: 560px) {
  input[style*="min-width"], textarea[style*="min-width"], select[style*="min-width"],
  div[style*="min-width"], span[style*="min-width"] {
    min-width: 0 !important;
  }
}

/* messages.php : liste de conversations (largeur fixe) + fil de discussion côte à côte sur
   desktop ; empilés verticalement sur mobile (la largeur fixe de 280px ne laissait quasiment
   plus de place au fil de discussion sur un écran étroit). */
@media (max-width: 700px) {
  .dm-layout { flex-direction: column !important; height: auto !important; }
  .dm-sidebar { width: 100% !important; max-height: 35vh; border-right: none !important; border-bottom: 1px solid var(--color-border); }
  .dm-main { min-height: 50vh; }
}
body {
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(34, 255, 136, 0.13), transparent),
    radial-gradient(700px 600px at -5% 35%, rgba(16, 185, 129, 0.08), transparent);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
img, svg { max-width: 100%; }
a { color: var(--color-primary-light); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: var(--color-primary); text-decoration: underline; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }

/* Marge de bord fixe 20px sur le contenu principal du shell authentifié (sidebar.php). Les
   classes Tailwind p-3/md:p-6 déjà posées sur <main> l'emportent en spécificité CSS ; on force
   donc explicitement cette valeur ici plutôt que de dépendre de l'ordre des règles. */
main.flex-1 { padding-left: 20px !important; padding-right: 20px !important; }

/* Espacement par défaut entre éléments frères dans les conteneurs flex/grid qui n'en déclarent
   pas déjà un explicitement (Tailwind gap-N ou une valeur CSS maison priment toujours puisque
   ce sont des sélecteurs de classe, plus spécifiques que ce sélecteur d'attribut générique). */
.flex:not([class*="gap-"]), .grid:not([class*="gap-"]) { gap: 10px; }

/* -------------------------------------------------------------------- */
/* Navigation                                                            */
/* -------------------------------------------------------------------- */
.site-header {
  background: rgba(5, 15, 11, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 20;
}
.site-header::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary) 20%, var(--color-blue) 55%, transparent 85%);
  opacity: 0.5;
}
.site-nav {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1.5rem;
  max-width: 1600px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.brand-logo { display: block; height: 2rem; width: auto; filter: drop-shadow(0 2px 10px rgba(34, 255, 136, 0.2)); }
/* Sur desktop, ce conteneur est invisible dans la mise en page : liens/recherche/actions
   restent des enfants flex directs de .site-nav, comme avant son introduction. Il ne prend
   forme (carte flottante) qu'au-dessous du seuil mobile ci-dessous. */
.nav-dropdown { display: contents; }
.nav-links { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; }
.nav-links a {
  font-size: 0.88rem; font-weight: 600; color: var(--color-text-muted);
  padding: 0.5rem 0.65rem; border-radius: var(--radius-sm);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
  white-space: nowrap;
}
.nav-links a:hover { background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.nav-links a.active { color: var(--color-primary-light); background: rgba(34, 255, 136, 0.1); }

.nav-search {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border);
  border-radius: 999px; padding: 0.4rem 0.75rem; flex: 1; max-width: 280px; margin-left: auto;
}
.nav-search input {
  border: none; background: transparent; box-shadow: none; padding: 0; font-size: 0.85rem; width: 100%;
}
.nav-search input:focus { outline: none; box-shadow: none; }
.nav-search kbd {
  font-size: 0.7rem; color: var(--color-text-faint); border: 1px solid var(--color-border-strong);
  border-radius: 4px; padding: 0.1rem 0.35rem; font-family: var(--font-mono);
}
.nav-actions { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.nav-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border);
}
.nav-icon-btn:hover { color: var(--color-text); background: var(--color-surface-raised); text-decoration: none; }

.nav-toggle-btn {
  display: none; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--color-border); color: var(--color-text);
  cursor: pointer; flex-shrink: 0; margin-left: auto;
}
.nav-toggle-btn:hover { background: var(--color-surface); }

/* Menu mobile : sous ce seuil, le hamburger remplace les liens/recherche/actions toujours
   visibles — évite le retour à la ligne désordonné de .nav-links en flex-wrap sur petit écran.
   Seuil volontairement haut (1550px) : logo + 8 liens + recherche + 2 boutons d'action ont
   besoin d'environ 1510px en une seule ligne ; en dessous, .nav-links se compresserait et le
   dernier lien ("Guide") retomberait seul sur une deuxième ligne — on bascule donc proprement
   sur le hamburger avant d'atteindre ce point plutôt que de laisser ce rendu cassé apparaître.
   Le panneau ouvert est une carte flottante ancrée sous le bouton (pas une bannière qui
   étire le header pleine largeur) : largeur contenue, coins arrondis, boutons à taille
   normale — cf. .nav-dropdown ci-dessous. */
@media (max-width: 1550px) {
  .nav-toggle-btn { display: inline-flex; }
  .site-nav { position: relative; }
  .nav-dropdown {
    display: none;
  }
  .site-nav.nav-open .nav-dropdown {
    display: flex; flex-direction: column; gap: 0.9rem;
    position: absolute; top: calc(100% + 0.6rem); right: 0;
    width: min(320px, calc(100vw - 2rem));
    max-height: calc(100vh - 5rem); overflow-y: auto;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 14px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    padding: 0.9rem; z-index: 30;
  }
  .nav-dropdown .nav-links {
    flex-direction: column; align-items: stretch; gap: 0.1rem;
    padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border);
  }
  .nav-dropdown .nav-links a { padding: 0.65rem 0.75rem; }
  .nav-dropdown .nav-search { max-width: none; margin-left: 0; }
  .nav-dropdown .nav-actions {
    flex-direction: column; align-items: flex-start; gap: 0.5rem;
    padding-top: 0.15rem; border-top: 1px solid var(--color-border);
  }
}

/* -------------------------------------------------------------------- */
/* Boutons                                                                */
/* -------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 0.65rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
  color: var(--color-on-primary); font-size: 0.95rem; font-weight: 700; cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(34, 255, 136, 0.15);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
}
.btn:hover { filter: brightness(1.08); box-shadow: var(--shadow-glow); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary { background: var(--color-surface-raised); color: var(--color-text); border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--color-border); filter: none; box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--color-primary-light); border-color: var(--color-primary); box-shadow: none; }
.btn-outline:hover { background: rgba(34, 255, 136, 0.1); filter: none; box-shadow: none; }
.btn-small { padding: 0.35rem 0.75rem; font-size: 0.82rem; }
.btn-danger { background: linear-gradient(180deg, #ff9a9a, var(--color-danger)); color: #2a0d0d; }
.btn-block { width: 100%; }

/* -------------------------------------------------------------------- */
/* Mise en page générale                                                 */
/* -------------------------------------------------------------------- */
main { padding: 0 0 5rem; }
.section { margin-bottom: 3rem; }
.section.container { padding-top: 2.5rem; }
.section-title { font-size: 1.4rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; }
.section-title .link-more { margin-left: auto; font-size: 0.85rem; font-weight: 600; }
.section-title::before {
  content: ""; width: 4px; height: 1.1em; border-radius: 999px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-blue)); display: inline-block;
}

/* Bandeau héros (page d'accueil) */
.hero { position: relative; padding: 4.5rem 0 3rem; text-align: center; overflow: hidden; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary-light);
  background: rgba(34, 255, 136, 0.1); border: 1px solid rgba(34, 255, 136, 0.3);
  padding: 0.35rem 0.85rem; border-radius: 999px; margin-bottom: 1.25rem;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.1rem); margin-bottom: 0.9rem;
  background: linear-gradient(135deg, #ffffff 30%, var(--color-primary-light) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.hero p.tagline { color: var(--color-text-muted); font-size: 1.15rem; max-width: 640px; margin: 0 auto 1.75rem; }
.hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* Bandeau d'en-tête de page intérieure (En direct, Développeurs, Questions, Lives, Événements...) */
.page-banner {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  padding: 2rem 0; border-bottom: 1px solid var(--color-border); margin-bottom: 1.75rem;
}
.page-banner-title { display: flex; align-items: center; gap: 0.7rem; }
.icon-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius); background: var(--color-accent-bg); color: var(--color-primary-light);
  font-size: 1.3rem; font-weight: 700; flex-shrink: 0;
}
.icon-badge-sm { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; border-radius: var(--radius-sm); }
.page-banner h1 { font-size: 1.8rem; }
.page-banner .lede { color: var(--color-text-muted); margin-top: 0.3rem; max-width: 560px; }
.page-banner-stats { display: flex; gap: 1.75rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .container { padding: 0 1rem; }
  .page-banner { padding: 1.25rem 0; gap: 1rem; margin-bottom: 1.25rem; }
  .page-banner h1 { font-size: 1.35rem; }
  .page-banner-stats { gap: 1rem; }
  .icon-badge { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; }
}

/* Puces de statistique (bandeau héros + bandeaux de page) */
.stat-bar { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.stat-chip {
  display: flex; align-items: center; gap: 0.6rem; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.8rem 1.1rem; box-shadow: var(--shadow-sm);
}
.stat-chip .stat-icon { color: var(--color-primary-light); font-size: 1.2rem; }
.stat-chip .stat-value { font-size: 1.15rem; font-weight: 800; line-height: 1; }
.stat-chip .stat-label { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.15rem; }

/* Cartes */
.card {
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 1.15rem 1.3rem; margin-bottom: 0.9rem; box-shadow: var(--shadow-sm);
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.card h3 a { color: var(--color-text); }
.card h3 a:hover { color: var(--color-primary-light); }
.card .meta { color: var(--color-text-muted); font-size: 0.85rem; }
.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* -------------------------------------------------------------------- */
/* Mise en page à deux colonnes (filtres + contenu)                      */
/* -------------------------------------------------------------------- */
.layout-with-sidebar { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; }
.layout-with-sidebar.reverse { grid-template-columns: 1fr 300px; }
@media (max-width: 900px) { .layout-with-sidebar, .layout-with-sidebar.reverse { grid-template-columns: 1fr; } }

.filter-sidebar {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 1.25rem; position: sticky; top: 5.5rem;
}
.filter-group { margin-bottom: 1.4rem; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group h4 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted);
  margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem;
}
.checkbox-row {
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; padding: 0.3rem 0; cursor: pointer;
}
.checkbox-row input { width: auto; margin: 0; box-shadow: none; }
.checkbox-row .count { margin-left: auto; color: var(--color-text-faint); font-size: 0.78rem; }

/* Onglets en pilule */
.pill-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pill-tab {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted);
  font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s var(--ease);
}
.pill-tab:hover { color: var(--color-text); border-color: var(--color-border-strong); text-decoration: none; }
.pill-tab.active {
  background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary));
  color: var(--color-on-primary); border-color: transparent;
}

/* Badges / étiquettes */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.22rem 0.65rem; border-radius: 999px;
  background: var(--color-surface-raised); border: 1px solid var(--color-border); color: var(--color-text-muted);
  font-size: 0.74rem; font-weight: 600; margin-right: 0.35rem;
}
.badge-live {
  background: var(--color-red-bg); border-color: rgba(248, 113, 113, 0.4); color: var(--color-red); font-weight: 700;
}
.badge-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-red);
  box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.6); animation: pulse-dot 1.8s infinite;
}
.badge-resolved { background: var(--color-accent-bg); border-color: rgba(74, 222, 128, 0.35); color: var(--color-accent); }
.badge-open { background: var(--color-gold-bg); border-color: rgba(251, 191, 36, 0.35); color: var(--color-gold); }
.badge-mentor { background: var(--color-purple-bg); border-color: rgba(167, 139, 250, 0.4); color: var(--color-purple); }
.badge-top { background: var(--color-gold-bg); border-color: rgba(251, 191, 36, 0.4); color: var(--color-gold); }
.badge-available { background: var(--color-accent-bg); border-color: rgba(74, 222, 128, 0.35); color: var(--color-accent); }
.badge-available::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}

/* Avatars */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--color-surface-raised); color: var(--color-primary-light); font-weight: 700;
  border: 2px solid var(--color-bg); width: 2.6rem; height: 2.6rem; font-size: 0.9rem; overflow: hidden; flex-shrink: 0;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 1.9rem; height: 1.9rem; font-size: 0.72rem; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -0.6rem; }
.avatar-stack .avatar:first-child { margin-left: 0; }
.avatar-stack .avatar-more {
  background: var(--color-border-strong); color: var(--color-text); font-size: 0.7rem;
}

/* Lignes de classement (top contributeurs, répartition par pays) */
.rank-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--color-border); }
.rank-row:last-child { border-bottom: none; }
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; font-size: 0.75rem; font-weight: 800; background: var(--color-surface-raised); color: var(--color-text-muted); flex-shrink: 0;
}
.rank-badge.rank-1 { background: var(--color-gold-bg); color: var(--color-gold); }
.rank-badge.rank-2 { background: var(--color-surface-raised); color: #c9d4ce; }
.rank-badge.rank-3 { background: rgba(217, 119, 6, 0.18); color: #d97706; }
.rank-row .rank-name { font-weight: 600; font-size: 0.9rem; }
.rank-row .rank-meta { font-size: 0.76rem; color: var(--color-text-faint); }
.rank-row .rank-value { margin-left: auto; font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; }

/* Colonne de vote (questions/réponses) */
.vote-col { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 2.6rem; }
.vote-col .vote-count { font-size: 1.2rem; font-weight: 800; }
.vote-col .vote-label { font-size: 0.68rem; color: var(--color-text-faint); text-transform: uppercase; }

/* -------------------------------------------------------------------- */
/* Formulaires                                                           */
/* -------------------------------------------------------------------- */
form .field { margin-bottom: 1.1rem; }
label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.88rem; color: var(--color-text-muted); }
input, textarea, select {
  width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg-elevated); color: var(--color-text); font-size: 0.95rem; font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
select { cursor: pointer; }
input:hover, textarea:hover, select:hover { border-color: var(--color-border-strong); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(34, 255, 136, 0.22);
}
.field-error { color: var(--color-danger); font-size: 0.82rem; margin-top: 0.3rem; }
.form-card {
  max-width: 460px; margin: 0 auto;
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-lg);
}

/* Page de connexion / inscription en deux colonnes */
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
@media (max-width: 860px) { .auth-layout { grid-template-columns: 1fr; } }

/* Paires de champs de formulaire (prénom/pseudo, mot de passe/confirmation, etc.) */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 480px) { .form-grid-2 { grid-template-columns: 1fr; } }
.auth-side {
  padding: 3rem; display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(600px 400px at 20% 10%, rgba(34, 255, 136, 0.18), transparent 60%),
    radial-gradient(500px 400px at 90% 90%, rgba(96, 165, 250, 0.1), transparent 55%),
    var(--color-bg-elevated);
  border-right: 1px solid var(--color-border);
}
@media (max-width: 860px) { .auth-side { border-right: none; border-bottom: 1px solid var(--color-border); padding: 2.5rem 1.5rem; } }
.auth-side h1 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 1.5rem 0 1rem; }
.auth-side .tagline { color: var(--color-text-muted); margin-bottom: 1.75rem; max-width: 420px; }
.auth-feature { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.auth-feature .icon-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
  border-radius: var(--radius-sm); background: var(--color-accent-bg); color: var(--color-primary-light); flex-shrink: 0;
}
.auth-feature strong { display: block; font-size: 0.92rem; }
.auth-feature span { font-size: 0.8rem; color: var(--color-text-faint); }
.auth-form-side { padding: 3rem 2rem; display: flex; align-items: center; justify-content: center; }
.auth-form-side .form-card { box-shadow: none; border: 1px solid var(--color-border); }
.auth-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--color-text-faint); font-size: 0.8rem; margin: 1.25rem 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.oauth-row { display: flex; gap: 0.6rem; }
.oauth-row .btn-secondary { flex: 1; }

/* Alertes / états */
.alert { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.9rem; border: 1px solid transparent; }
.alert-error { background: var(--color-danger-bg); color: #ff9c9c; border-color: rgba(248, 113, 113, 0.3); }
.alert-success { background: var(--color-accent-bg); color: var(--color-accent); border-color: rgba(74, 222, 128, 0.3); }
.alert-info { background: var(--color-info-bg); color: var(--color-info); border-color: rgba(96, 165, 250, 0.3); }
.empty-state {
  color: var(--color-text-faint); font-size: 0.9rem; padding: 1.5rem 1rem; text-align: center;
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius); background: rgba(255, 255, 255, 0.015);
}
.skeleton { color: var(--color-text-faint); font-size: 0.9rem; font-style: italic; }

/* -------------------------------------------------------------------- */
/* Salle / chat / kanban                                                 */
/* -------------------------------------------------------------------- */
.room-layout { display: grid; gap: 1.25rem; grid-template-columns: 2fr 1fr; }
@media (max-width: 800px) { .room-layout { grid-template-columns: 1fr; } }
.chat-panel {
  display: flex; flex-direction: column; height: 440px; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; box-shadow: var(--shadow-md);
}
.chat-log { flex: 1; overflow-y: auto; padding: 0.9rem; font-size: 0.9rem; }
.chat-message { margin-bottom: 0.7rem; }
.chat-message .who { font-weight: 700; margin-right: 0.4rem; color: var(--color-primary-light); }
.chat-message .when { color: var(--color-text-faint); font-size: 0.74rem; }
.chat-form { display: flex; gap: 0.5rem; padding: 0.7rem; border-top: 1px solid var(--color-border); background: var(--color-bg-elevated); }
.chat-form input { flex: 1; }
.chat-status { font-size: 0.76rem; color: var(--color-text-faint); padding: 0.35rem 0.9rem; }

.kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; }
@media (max-width: 600px) { .kanban-board { grid-template-columns: 1fr; } }
.kanban-column { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.7rem; min-height: 130px; }
.kanban-column h4 { margin: 0 0 0.6rem; font-size: 0.78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.kanban-task {
  background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem; margin-bottom: 0.5rem; font-size: 0.85rem; box-shadow: var(--shadow-sm); transition: border-color 0.15s var(--ease);
}
.kanban-task:hover { border-color: var(--color-border-strong); }
.kanban-task .task-actions { margin-top: 0.45rem; display: flex; gap: 0.3rem; flex-wrap: wrap; }

.disclaimer-box {
  border: 1px solid rgba(34, 255, 136, 0.35); background: linear-gradient(135deg, rgba(34, 255, 136, 0.08), transparent);
  border-radius: var(--radius); padding: 1.1rem; font-size: 0.88rem;
}
.disclaimer-box strong { display: block; margin-bottom: 0.3rem; color: var(--color-primary-light); }

.filters-bar {
  display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; align-items: flex-end;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem;
}
.filters-bar .field { margin-bottom: 0; min-width: 160px; }

.site-footer { border-top: 1px solid var(--color-border); padding: 2rem 0; color: var(--color-text-faint); font-size: 0.85rem; text-align: center; }

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(2, 6, 4, 0.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50;
}
.modal-box {
  background: linear-gradient(180deg, var(--color-surface-raised), var(--color-surface));
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); padding: 1.75rem;
  max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg);
}
.hidden { display: none !important; }

/* Pagination */
.pagination { display: flex; align-items: center; gap: 0.4rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
.page-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; height: 2.2rem;
  border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0 0.5rem;
}
.page-btn:hover { color: var(--color-text); border-color: var(--color-border-strong); text-decoration: none; }
.page-btn.active { background: linear-gradient(180deg, var(--color-primary-light), var(--color-primary)); color: var(--color-on-primary); border-color: transparent; }
.page-btn:disabled, .page-btn.disabled { opacity: 0.4; cursor: not-allowed; }