/**
 * EMC Community — Frontend Desktop CSS v2 (Apple News / IGN style)
 * Light + Dark theme toggle. Editorial cards, generous whitespace.
 *
 * @package EMC\Social
 * @version 0.5.0
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Newsreader:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&display=swap');

/* ─── Reset ──────────────────────────────────────────────────── */

.emc-app *,
.emc-app *::before,
.emc-app *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Theme Variables (LIGHT — default) ──────────────────────── */

:root,
.emc-app[data-theme="light"] {
  /* Backgrounds */
  --emc-bg:          #f5f5f7;
  --emc-bg-card:     #ffffff;
  --emc-bg-elevated: #ffffff;
  --emc-bg-input:    #f5f5f7;
  --emc-bg-hover:    #f0f0f2;
  --emc-bg-overlay:  rgba(0, 0, 0, 0.4);

  /* Text */
  --emc-text:        #1d1d1f;
  --emc-text-strong: #000000;
  --emc-text-muted:  #6e6e73;
  --emc-text-dim:    #86868b;
  --emc-text-faint:  #aeaeb2;
  --emc-text-on-accent: #ffffff;

  /* Borders */
  --emc-border:      #e5e5ea;
  --emc-border-strong: #d2d2d7;
  --emc-divider:     #f0f0f2;

  /* Accents — OXXY magenta */
  --emc-accent:      #ec1e5f;
  --emc-accent-hover:#c9184a;
  --emc-accent-bg:   #fdeef3;
  --emc-green:       #34c759;
  --emc-red:         #ff3b30;
  --emc-orange:      #ff9500;
  --emc-yellow:      #ffcc00;
  --emc-purple:      #af52de;
  --emc-pink:        #ff2d55;
  --emc-teal:        #5ac8fa;
  --emc-indigo:      #5856d6;

  /* Shadows */
  --emc-shadow-sm:   0 1px 2px rgba(0,0,0,.04);
  --emc-shadow:      0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  --emc-shadow-md:   0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --emc-shadow-lg:   0 4px 20px rgba(0,0,0,.12), 0 20px 50px rgba(0,0,0,.10);

  --emc-topbar-bg:   rgba(255, 255, 255, 0.85);
  --emc-skeleton:    linear-gradient(90deg, #f0f0f2 25%, #e5e5ea 50%, #f0f0f2 75%);
}

/* ─── Theme Variables (DARK) ─────────────────────────────────── */

.emc-app[data-theme="dark"] {
  /* Backgrounds — greys OXXY (oxxy.ca) */
  --emc-bg:          #0a0a0c;
  --emc-bg-card:     #16161a;
  --emc-bg-elevated: #1c1c22;
  --emc-bg-input:    #111114;
  --emc-bg-hover:    #1c1c22;
  --emc-bg-overlay:  rgba(0, 0, 0, 0.72);

  /* Text */
  --emc-text:        #ffffff;
  --emc-text-strong: #ffffff;
  --emc-text-muted:  #aeaeb2;
  --emc-text-dim:    #8e8e93;
  --emc-text-faint:  #636366;
  --emc-text-on-accent: #ffffff;

  /* Borders */
  --emc-border:      #2c2c36;
  --emc-border-strong: #3a3a46;
  --emc-divider:     #1c1c22;

  /* Accents — OXXY magenta, brightened for dark */
  --emc-accent:      #ff3d82;
  --emc-accent-hover:#ff5c97;
  --emc-accent-bg:   rgba(236, 30, 95, 0.16);
  --emc-green:       #30d158;
  --emc-red:         #ff453a;
  --emc-orange:      #ff9f0a;
  --emc-yellow:      #ffd60a;
  --emc-purple:      #bf5af2;
  --emc-pink:        #ff375f;
  --emc-teal:        #64d2ff;
  --emc-indigo:      #5e5ce6;

  /* Shadows — softer on dark */
  --emc-shadow-sm:   0 1px 2px rgba(0,0,0,.3);
  --emc-shadow:      0 1px 3px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  --emc-shadow-md:   0 2px 8px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --emc-shadow-lg:   0 4px 20px rgba(0,0,0,.6), 0 20px 50px rgba(0,0,0,.5);

  --emc-topbar-bg:   rgba(10, 10, 12, 0.82);
  --emc-skeleton:    linear-gradient(90deg, #16161a 25%, #24242c 50%, #16161a 75%);
}

/* ─── Shared variables ───────────────────────────────────────── */

.emc-app {
  --emc-radius-xs:   6px;
  --emc-radius-sm:   10px;
  --emc-radius:      16px;
  --emc-radius-lg:   20px;
  --emc-radius-full: 9999px;
  --emc-max-width:   620px;
  --emc-sidebar-w:   240px;
  --emc-right-w:     320px;
  --emc-font:        'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --emc-font-display:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --emc-font-serif:  'Newsreader', 'New York', 'Georgia', serif;
  --emc-font-mono:   ui-monospace, 'SF Mono', 'Space Mono', Menlo, Consolas, monospace;
  --emc-transition:  .2s cubic-bezier(.4, 0, .2, 1);
  --emc-transition-slow: .35s cubic-bezier(.4, 0, .2, 1);

  /* ── OXXY brand (aligné oxxy.ca) ── */
  --oxxy-yellow:      #FCD000;
  --oxxy-yellow-soft: #FDE68A;
  --oxxy-magenta:     #EC1E5F;
  --oxxy-cyan:        #1FC6E5;
  --oxxy-ink:         #0a0a0c;
  /* CTA principal = jaune OXXY, texte noir, halo lumineux */
  --emc-cta:          var(--oxxy-yellow);
  --emc-cta-hover:    #ffe066;
  --emc-cta-ink:      #000000;
  --emc-cta-glow:     0 8px 30px rgba(252, 208, 0, .32);
  --emc-cta-glow-hover: 0 0 24px 4px rgba(252, 208, 0, .38), 0 16px 40px rgba(252, 208, 0, .45);
  --emc-grad-oxxy:    linear-gradient(95deg, #FCD000 0%, #EC1E5F 60%, #FF6BB5 100%);
}

/* ─── App container ──────────────────────────────────────────── */

.emc-app {
  font-family: var(--emc-font);
  background: var(--emc-bg);
  color: var(--emc-text);
  min-height: 100vh;
  line-height: 1.5;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* ─── Aperçu enfant, toujours visible et toujours non ambigu ─── */

.emc-view-as-banner {
  position: sticky;
  top: 0;
  z-index: 120;
  min-height: 44px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--oxxy-yellow);
  color: #111111;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  font-weight: 800;
  letter-spacing: 0;
}

.emc-view-as-banner a {
  color: #111111;
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#emc-app[data-view-as="readonly"] .emc-topbar {
  top: 44px;
}

#emc-app[data-view-as="readonly"] .emc-sidebar {
  top: 104px;
}

#emc-app[data-view-as="readonly"] .emc-menu-backdrop {
  inset: 104px 0 0 0;
}

#emc-app[data-view-as="readonly"] [data-action],
#emc-app[data-view-as="readonly"] .emc-compose,
#emc-app[data-view-as="readonly"] .emc-chat-compose,
#emc-app[data-view-as="readonly"] .emc-profile-actions {
  display: none !important;
}

/* Surface integree a l'espace enfant Core. Le rail personnel reste le seul
   menu global. Community conserve les donnees, les gardes et la navigation de
   la surface demandee, sans afficher une deuxieme identite adulte autour. */
#emc-app[data-embed="child"] .emc-topbar,
#emc-app[data-embed="child"] .emc-sidebar,
#emc-app[data-embed="child"] .emc-menu-backdrop,
#emc-app[data-embed="child"] .emc-bottomnav,
#emc-app[data-embed="child"] .emc-right {
  display: none !important;
}

#emc-app[data-embed="child"] {
  min-height: 100%;
}

#emc-app[data-embed="child"] .emc-view-as-banner {
  position: static;
}

#emc-app[data-embed="child"] .emc-layout,
#emc-app[data-embed="child"] .emc-layout.emc-feed-focus {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  min-height: 0;
}

#emc-app[data-embed="child"] .emc-main {
  max-width: 760px;
  padding-bottom: 32px;
}

#emc-app[data-embed="child"] .emc-messages-layout {
  height: 100vh;
  min-height: 560px;
  padding-bottom: 0;
}

/* ─── Top Navigation ─────────────────────────────────────────── */

.emc-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--emc-topbar-bg);
  border-bottom: 1px solid var(--emc-border);
  padding: 0 28px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.emc-topbar-logo {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--oxxy-yellow);
  cursor: pointer;
  font-family: var(--emc-font-display);
  text-shadow: 1px 1px 0 rgba(31, 198, 229, 0.55), 2px 2px 0 rgba(236, 30, 95, 0.5);
}
.emc-topbar-logo .dot { color: var(--oxxy-magenta); }

.emc-topbar-search {
  flex: 0 1 420px;
  position: relative;
}

.emc-topbar-search input {
  width: 100%;
  background: var(--emc-bg-input);
  border: 1px solid transparent;
  border-radius: var(--emc-radius-full);
  padding: 9px 16px 9px 40px;
  color: var(--emc-text);
  font-size: 14px;
  font-family: var(--emc-font);
  outline: none;
  transition: all var(--emc-transition);
}

.emc-topbar-search input:focus {
  background: var(--emc-bg-card);
  border-color: var(--emc-accent);
  box-shadow: 0 0 0 4px var(--emc-accent-bg);
}

.emc-topbar-search .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--emc-text-dim);
  font-size: 16px;
  pointer-events: none;
}

.emc-topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.emc-topbar-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--emc-radius-full);
  border: none;
  background: transparent;
  color: var(--emc-text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--emc-transition);
  position: relative;
}

.emc-topbar-btn:hover {
  background: var(--emc-bg-hover);
  color: var(--emc-text);
}

.emc-topbar-btn .badge-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--emc-red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--emc-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--emc-topbar-bg);
}

.emc-topbar-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  transition: all var(--emc-transition);
  margin-left: 4px;
}

.emc-topbar-avatar:hover {
  box-shadow: 0 0 0 3px var(--emc-accent-bg);
}

/* ─── 3-column layout ────────────────────────────────────────── */

/* Layout — sidebar est un drawer hors-flux ; feed prépondérant centré */
.emc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--emc-right-w);
  max-width: 1040px;
  margin: 0 auto;
  gap: 0;
  min-height: calc(100vh - 60px);
}
.emc-layout.emc-feed-focus {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}

/* ─── Left Sidebar ───────────────────────────────────────────── */

/* Sidebar = drawer off-canvas (caché par défaut) */
.emc-sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 272px;
  z-index: 60;
  background: var(--emc-bg-card);
  border-right: 1px solid var(--emc-border);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 28px;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#emc-app[data-menu="open"] .emc-sidebar {
  transform: translateX(0);
  box-shadow: 6px 0 36px rgba(0, 0, 0, 0.20);
}

.emc-sidebar::-webkit-scrollbar {
  width: 0;
}

/* Backdrop derrière le drawer */
.emc-menu-backdrop {
  position: fixed;
  inset: 60px 0 0 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
#emc-app[data-menu="open"] .emc-menu-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* En-tête du drawer */
.emc-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--emc-border);
}
.emc-drawer-brand {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--emc-text-dim);
}
.emc-drawer-close {
  background: transparent;
  border: none;
  color: var(--emc-text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--emc-radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emc-drawer-close:hover {
  background: var(--emc-bg-hover, rgba(0,0,0,0.05));
  color: var(--emc-text);
}

/* Bouton burger (topbar) */
.emc-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.emc-sidebar-section {
  margin-bottom: 28px;
}

.emc-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--emc-text-dim);
  padding: 0 14px;
  margin-bottom: 6px;
}

.emc-nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--emc-radius-sm);
  cursor: pointer;
  color: var(--emc-text);
  font-size: 15px;
  font-weight: 500;
  transition: all var(--emc-transition);
  text-decoration: none;
  margin-bottom: 2px;
}

.emc-nav-item:hover {
  background: var(--emc-bg-hover);
}

.emc-nav-item.active {
  background: var(--emc-accent);
  color: var(--emc-text-on-accent);
}

.emc-nav-item.active .nav-icon {
  filter: brightness(2);
}

.emc-nav-item .nav-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.emc-nav-item .nav-badge {
  margin-left: auto;
  background: var(--emc-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--emc-radius-full);
  text-align: center;
}

.emc-nav-item.active .nav-badge {
  background: rgba(255, 255, 255, 0.25);
}

/* Theme toggle button */
.emc-theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  background: var(--emc-bg-hover);
  border: none;
  border-radius: var(--emc-radius-sm);
  color: var(--emc-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--emc-transition);
  font-family: var(--emc-font);
}

.emc-theme-toggle:hover {
  background: var(--emc-border);
}

.emc-theme-toggle .toggle-icon {
  font-size: 18px;
}

/* ─── Main Feed Column ───────────────────────────────────────── */

.emc-main {
  padding: 24px 24px 60px;
  max-width: var(--emc-max-width);
  margin: 0 auto;
  width: 100%;
}

/* Page title (Apple News style) */
.emc-page-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
  color: var(--emc-text-strong);
  font-family: var(--emc-font-display);
}

.emc-page-subtitle {
  font-size: 15px;
  color: var(--emc-text-muted);
  margin-bottom: 24px;
}

/* Magazine masthead (refined) */
.emc-masthead {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--emc-text-strong);
}

.emc-masthead-date {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
  color: var(--emc-text-muted);
}

.emc-masthead-title {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--emc-text-strong);
  font-family: var(--emc-font-display);
}

.emc-masthead-sub {
  font-size: 15px;
  margin-top: 10px;
  color: var(--emc-text-muted);
  font-family: var(--emc-font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
}

/* Section label dividers */
.emc-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 36px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--emc-border);
}

.emc-section-label-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--emc-text-strong);
}

.emc-section-label-title::before {
  content: '';
  width: 4px;
  height: 14px;
  background: var(--emc-accent);
  border-radius: 2px;
}

.emc-section-label-more {
  font-size: 12px;
  color: var(--emc-accent);
  font-weight: 600;
  cursor: pointer;
}

.emc-section-label-more:hover {
  text-decoration: underline;
}

/* Featured card (large hero) */
.emc-featured {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 28px;
  cursor: pointer;
  position: relative;
  aspect-ratio: 4 / 5;
  box-shadow: var(--emc-shadow-md);
  transition: all var(--emc-transition);
}

.emc-featured:hover {
  transform: translateY(-2px);
  box-shadow: var(--emc-shadow-lg);
}

.emc-featured-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.emc-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.9) 100%);
}

.emc-featured-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px;
  color: #fff;
}

.emc-featured-category {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 16px;
  background: var(--emc-red);
  color: #fff;
}

.emc-featured-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
  font-family: var(--emc-font-serif);
  color: #fff;
}

.emc-featured-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  opacity: 0.85;
  font-weight: 500;
}

/* Stories rail */
.emc-stories {
  display: flex;
  gap: 14px;
  padding: 4px 0 20px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.emc-stories::-webkit-scrollbar {
  display: none;
}

.emc-story {
  flex-shrink: 0;
  text-align: center;
  cursor: pointer;
}

.emc-story-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--emc-red), var(--emc-orange), var(--emc-accent));
}

.emc-story-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--emc-bg);
  padding: 2px;
}

.emc-story-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  object-fit: cover;
}

.emc-story-name {
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  max-width: 64px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--emc-text);
}

.emc-story.seen .emc-story-ring {
  background: var(--emc-border-strong);
}

/* ═════════════════════════════════════════════════════════
   ✨ 20 REFINEMENTS (v0.5.0 PRO)
   ═════════════════════════════════════════════════════════ */

/* Reading progress bar (#7) */
.emc-reading-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.emc-reading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--emc-accent), var(--emc-teal));
  width: 0%;
  transition: width .15s;
  box-shadow: 0 0 8px rgba(10,132,255,0.5);
}

/* Online status dot with pulse (#5) */
.emc-online-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 11px; height: 11px;
  background: var(--emc-green);
  border-radius: 50%;
  border: 2px solid var(--emc-bg);
}
.emc-online-dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--emc-green);
  opacity: 0.3;
  animation: emc-ping 2s infinite;
}
@keyframes emc-ping {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Edition number row (#18) */
.emc-edition-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.6;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--emc-text-muted);
}
.emc-edition-num .ornament { opacity: 0.4; }

/* Ornament divider (#19) */
.emc-ornament {
  text-align: center;
  margin: 36px 0;
  font-family: var(--emc-font-serif);
  font-size: 18px;
  opacity: 0.3;
  letter-spacing: 1em;
  color: var(--emc-text);
}

/* Roman numeral section header (#9) */
.emc-section-roman {
  text-align: center;
  margin: 48px 0 24px;
}
.emc-section-roman-num {
  font-family: var(--emc-font-serif);
  font-size: 28px;
  font-weight: 600;
  font-style: italic;
  opacity: 0.5;
  color: var(--emc-text);
}
.emc-section-roman-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 4px;
  color: var(--emc-text);
}
.emc-section-roman-line {
  width: 60px;
  height: 1px;
  margin: 12px auto 0;
  background: var(--emc-border-strong);
}

/* Featured EXCLUSIF badge (#17) */
.emc-exclusive-bar {
  position: absolute;
  top: 24px;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 3;
}
.emc-exclusive-bar-line {
  width: 4px;
  height: 32px;
  background: var(--emc-red);
}
.emc-exclusive-bar-label {
  background: var(--emc-red);
  color: #fff;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Image vignette (#13) */
.emc-featured-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 200px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* Drop cap on featured (#2) */
.emc-featured-title::first-letter {
  font-size: 1.15em;
  font-weight: 800;
}

/* Pullquote (#2) */
.emc-pullquote {
  margin: 24px -20px;
  padding: 28px 32px;
  border-left: 4px solid var(--emc-accent);
  font-family: var(--emc-font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  background: var(--emc-bg-input);
  color: var(--emc-text);
}
.emc-pullquote-author {
  font-family: var(--emc-font);
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
  opacity: 0.7;
}

/* Variable card sizes (#3) */
.emc-card-large .emc-post-hero img { aspect-ratio: 21/9; }
.emc-card-large .emc-post-headline { font-size: 24px; }
.emc-card-small .emc-post-hero img { aspect-ratio: 1/1; max-height: 200px; }
.emc-card-small .emc-post-headline { font-size: 16px; }
.emc-card-small .emc-post-subtitle { display: none; }

.emc-card-split {
  display: grid;
  grid-template-columns: 200px 1fr;
}
.emc-card-split .emc-post-hero img {
  aspect-ratio: unset;
  height: 100%;
  object-fit: cover;
}
.emc-card-split .emc-post-body { padding: 18px 20px; }
.emc-card-split .emc-post-headline { font-size: 17px; }
.emc-card-split .emc-post-subtitle {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Author chip refined (#10) */
.emc-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  transition: all .2s;
  cursor: pointer;
}
.emc-byline:hover {
  background: var(--emc-bg-hover);
}
.emc-byline-avatar-wrap {
  position: relative;
}
.emc-byline-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.emc-byline-online {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 9px;
  height: 9px;
  background: var(--emc-green);
  border-radius: 50%;
  border: 2px solid var(--emc-bg-card);
}
.emc-byline-info {
  flex: 1;
  min-width: 0;
}
.emc-byline-name {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--emc-text);
}
.emc-byline-meta {
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
  color: var(--emc-text-muted);
}
.emc-byline-followers {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--emc-radius-full);
  font-weight: 700;
  border: 1px solid var(--emc-accent);
  background: transparent;
  color: var(--emc-accent);
  cursor: pointer;
  transition: all .2s;
}
.emc-byline-followers:hover {
  background: var(--emc-accent);
  color: #fff;
}

/* Multi-reactions stack (#1) */
.emc-reactions-stack {
  display: flex;
  align-items: center;
  gap: 4px;
}
.emc-reactions-stack-icons {
  display: flex;
}
.emc-reactions-stack-icons span {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  background: var(--emc-bg-card);
  border: 2px solid var(--emc-bg-card);
}
.emc-reactions-stack-icons span + span {
  margin-left: -6px;
}

/* Reactions picker (#1) */
.emc-reactions-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  padding: 6px 10px;
  border-radius: var(--emc-radius-full);
  display: none;
  gap: 4px;
  background: var(--emc-bg-card);
  border: 1px solid var(--emc-border);
  box-shadow: var(--emc-shadow-md);
  z-index: 10;
}
.emc-action-btn.show-picker .emc-reactions-picker,
.emc-action-btn:hover .emc-reactions-picker {
  display: flex;
  animation: emc-pop .25s cubic-bezier(.5,1.6,.4,1);
}
@keyframes emc-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.emc-reaction-emoji {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: transform .2s;
}
.emc-reaction-emoji:hover {
  transform: scale(1.35) translateY(-4px);
}

/* Comment previews (#4) */
.emc-comments-preview {
  padding: 14px 20px;
  border-top: 1px solid var(--emc-divider);
}
.emc-comment-prev {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.emc-comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.emc-comment-bubble {
  flex: 1;
  background: var(--emc-bg-input);
  border-radius: 14px;
  padding: 8px 12px;
}
.emc-comment-author {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--emc-text);
}
.emc-comment-text {
  font-size: 13.5px;
  line-height: 1.4;
  margin-top: 2px;
  color: var(--emc-text);
}
.emc-comment-meta {
  font-size: 11px;
  margin-top: 4px;
  display: flex;
  gap: 12px;
  color: var(--emc-text-muted);
}
.emc-comment-meta .like,
.emc-comment-meta .reply {
  font-weight: 600;
  cursor: pointer;
}
.emc-comments-see-all {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--emc-accent);
  cursor: pointer;
  padding: 4px 0 0 38px;
}

/* Skeleton loaders (#6) */
.emc-skeleton {
  background: var(--emc-skeleton);
  background-size: 200% 100%;
  animation: emc-shimmer 1.4s ease-in-out infinite;
}
@keyframes emc-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.emc-skel-hero {
  aspect-ratio: 16/9;
}
.emc-skel-line {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.emc-skel-line.short { width: 40%; }
.emc-skel-line.title { height: 22px; width: 90%; }

/* Feed end footer (#15) */
.emc-feed-end {
  text-align: center;
  padding: 48px 20px;
  margin-top: 24px;
  border-top: 1px solid var(--emc-border);
}
.emc-feed-end-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.emc-feed-end-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--emc-text-strong);
  font-family: var(--emc-font-display);
}
.emc-feed-end-sub {
  font-size: 13.5px;
  color: var(--emc-text-muted);
}
.emc-feed-end-suggested {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}
.emc-feed-end-tag {
  padding: 6px 14px;
  border-radius: var(--emc-radius-full);
  border: 1px solid var(--emc-border-strong);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--emc-text);
  background: transparent;
  transition: all .2s;
}
.emc-feed-end-tag:hover {
  background: var(--emc-text-strong);
  color: var(--emc-bg);
  border-color: var(--emc-text-strong);
}

/* Search dropdown (#11) */
.emc-search-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--emc-bg-card);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius);
  padding: 8px;
  box-shadow: var(--emc-shadow-lg);
  z-index: 100;
}
.emc-search-group {
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--emc-text-dim);
  margin-top: 4px;
}
.emc-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--emc-radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--emc-text);
}
.emc-search-item:hover {
  background: var(--emc-bg-hover);
}
.emc-search-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.emc-search-meta {
  font-size: 11px;
  color: var(--emc-text-dim);
  margin-left: auto;
}

/* Notification badge pulse (#5 and #14) */
@keyframes emc-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.emc-topbar-btn .badge-count {
  animation: emc-badge-pulse 2s infinite;
}

/* Mini stats widget */
.emc-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.emc-mini-stat {
  padding: 12px;
  border-radius: var(--emc-radius-sm);
  background: var(--emc-bg-input);
}
.emc-mini-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  color: var(--emc-text);
}
.emc-mini-stat-value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-family: var(--emc-font-serif);
  color: var(--emc-text-strong);
}
.emc-mini-stat-change {
  font-size: 10px;
  font-weight: 600;
  color: var(--emc-green);
  margin-top: 2px;
}

/* Filter pills row (IGN style) */
.emc-filter-row {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  /* Filtres prominents + sticky : toujours dispo en haut du feed */
  position: sticky;
  top: 60px;
  z-index: 12;
  background: var(--emc-bg);
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--emc-border);
}

.emc-filter-row::-webkit-scrollbar {
  display: none;
}

.emc-filter-pill {
  padding: 10px 18px;
  border-radius: var(--emc-radius-full);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--emc-transition);
  border: 1.5px solid var(--emc-border);
  background: var(--emc-bg-card);
  color: var(--emc-text-muted);
  font-family: var(--emc-font);
}

.emc-filter-pill:hover {
  border-color: var(--emc-border-strong);
  color: var(--emc-text);
}

.emc-filter-pill.active {
  background: var(--emc-text-strong);
  color: var(--emc-bg);
  border-color: var(--emc-text-strong);
}

/* ─── Compose box (editorial style) ──────────────────────────── */

.emc-compose {
  background: var(--emc-bg-card);
  border-radius: var(--emc-radius);
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: var(--emc-shadow);
  border: 1px solid var(--emc-border);
}

.emc-compose-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.emc-compose-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.emc-compose-input {
  flex: 1;
  background: var(--emc-bg-input);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius-full);
  padding: 11px 18px;
  color: var(--emc-text-muted);
  font-size: 15px;
  cursor: pointer;
  transition: all var(--emc-transition);
  font-family: var(--emc-font);
}

.emc-compose-input:hover {
  border-color: var(--emc-border-strong);
  background: var(--emc-bg-card);
}

.emc-compose-actions {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--emc-divider);
}

.emc-compose-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  background: none;
  color: var(--emc-text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--emc-radius-sm);
  transition: all var(--emc-transition);
  font-family: var(--emc-font);
}

.emc-compose-btn:hover {
  background: var(--emc-bg-hover);
  color: var(--emc-text);
}

.emc-compose-btn .btn-icon {
  font-size: 18px;
}

/* ─── Post Card — EDITORIAL (Apple News / IGN) ─────────────── */

.emc-post {
  background: var(--emc-bg-card);
  border-radius: var(--emc-radius);
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: var(--emc-shadow);
  border: 1px solid var(--emc-border);
  transition: all var(--emc-transition);
}

.emc-post:hover {
  box-shadow: var(--emc-shadow-md);
  transform: translateY(-1px);
}

.emc-editorial-card {
  cursor: pointer;
}

.emc-editorial-card .emc-action-bar,
.emc-editorial-card .emc-reponses,
.emc-editorial-card .emc-commentaire {
  cursor: default;
}

.emc-editorial-read {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0 0 14px;
  padding: 10px 15px;
  border: 1px solid var(--emc-border-strong);
  border-radius: 999px;
  background: var(--emc-bg-card);
  color: var(--emc-text-strong);
  font-family: var(--emc-font);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.emc-editorial-read:hover {
  border-color: var(--emc-accent);
  color: var(--emc-accent);
  background: var(--emc-bg-hover);
}

.emc-editorial-read:focus-visible {
  outline: 3px solid var(--emc-accent);
  outline-offset: 3px;
}

/* Hero image at top (Apple News editorial) */
.emc-post-hero {
  width: 100%;
  position: relative;
  background: var(--emc-bg-input);
}

.emc-post-hero img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.emc-post-hero .duration-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--emc-radius-xs);
}

/* Post body container */
.emc-post-body {
  padding: 18px 20px 16px;
}

/* Editorial headline (for posts with hero) */
.emc-post-headline {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--emc-text-strong);
  margin-bottom: 8px;
  font-family: var(--emc-font-display);
}

.emc-post-subtitle {
  font-size: 15px;
  color: var(--emc-text-muted);
  margin-bottom: 14px;
  line-height: 1.4;
}

.emc-post-subtitle .time {
  font-weight: 500;
}

/* Tags row (under content) */
.emc-post-tags {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}

.emc-post-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  color: var(--emc-accent);
  cursor: pointer;
}

.emc-post-tag .tag-icon {
  font-size: 11px;
}

.emc-post-author-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--emc-accent);
  cursor: pointer;
}

.emc-post-author-tag .author-mini-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--emc-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
}

/* Lecture detaillee d'une carte de nouvelles. */
.emc-editorial-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 12, 22, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: emc-editorial-fade 180ms ease-out both;
}

.emc-editorial-detail {
  position: relative;
  width: min(760px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--emc-bg-card);
  color: var(--emc-text);
  border: 1px solid var(--emc-border);
  border-radius: 24px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.36);
  animation: emc-editorial-rise 220ms ease-out both;
}

.emc-editorial-detail-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(10, 14, 24, 0.78);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.emc-editorial-detail-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.emc-editorial-detail-hero {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--emc-bg-input);
}

.emc-editorial-detail-content {
  padding: clamp(22px, 4vw, 42px);
}

.emc-editorial-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.emc-editorial-detail-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--emc-accent-soft, var(--emc-bg-hover));
  color: var(--emc-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.emc-editorial-detail h2 {
  margin: 0;
  color: var(--emc-text-strong);
  font-family: var(--emc-font-display);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.emc-editorial-detail-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  color: var(--emc-text-muted);
  font-size: 14px;
  font-weight: 650;
}

.emc-editorial-detail-byline img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.emc-editorial-detail-body {
  margin-top: 24px;
  color: var(--emc-text);
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.64;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

@keyframes emc-editorial-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes emc-editorial-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  .emc-editorial-detail-backdrop {
    align-items: flex-end;
    padding: 0;
  }

  .emc-editorial-detail {
    width: 100%;
    max-height: 94dvh;
    border-width: 1px 0 0;
    border-radius: 24px 24px 0 0;
  }

  .emc-editorial-detail-content {
    padding: 22px 20px max(30px, env(safe-area-inset-bottom));
  }

  .emc-editorial-detail h2 {
    font-size: clamp(28px, 9vw, 38px);
  }

  .emc-post-hero img {
    aspect-ratio: 16 / 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emc-editorial-detail-backdrop,
  .emc-editorial-detail {
    animation: none;
  }

  .emc-editorial-card,
  .emc-editorial-card:hover {
    transition: none;
    transform: none;
  }
}

/* ─── Compact post (text-only) ──────────────────────────────── */

.emc-post-compact .emc-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 12px;
}

.emc-post-compact .compact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.emc-post-compact .compact-author-info {
  flex: 1;
  min-width: 0;
}

.emc-post-compact .compact-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--emc-text);
  display: flex;
  align-items: center;
  gap: 5px;
}

.emc-post-compact .compact-name .verified {
  color: var(--emc-accent);
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────────────
 * La pastille du TITRE porté, colorée selon sa rareté.
 *
 * Décision de Pat, 2026-08-23 : l'entête d'un message montre l'avatar, le
 * pseudo, et le titre coloré selon sa rareté, dans une bulle claire et
 * moderne. Ensuite viennent les infos du billet, comme sur les réseaux
 * sociaux habituels.
 *
 * ⛔ Les cinq couleurs ne sont PAS inventées : elles sont copiées du greffon
 * Système (bataille-des-tables.css, cartes de déblocage de titre), pour qu'un
 * titre porte la même couleur dans l'Arène et dans la communauté. Une peau
 * qui change de couleur en changeant d'écran n'est plus une peau.
 * ───────────────────────────────────────────────────────────────────── */

.emc-title-pill {
  /* ⚠️ Trois variables plutôt qu'un `color-mix()`. Ce dernier n'est employé
     nulle part ailleurs dans le greffon, et une famille peut ouvrir le site sur
     un vieil appareil : là, la pastille perdrait son fond et son filet d'un
     coup. Du rgba explicite marche partout. */
  --emc-rarity: #5b6472;
  --emc-rarity-soft: rgba(91, 100, 114, 0.10);
  --emc-rarity-line: rgba(91, 100, 114, 0.32);
  --emc-rarity-glow: rgba(91, 100, 114, 0.22);
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 9px;
  border: 1px solid var(--emc-rarity-line);
  border-radius: 999px;
  background: var(--emc-rarity-soft);
  color: var(--emc-rarity);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Fond CLAIR ────────────────────────────────────────────────
 * ⛔ Les couleurs du jeu ne se recopient PAS ici, et c'est mesuré, pas une
 * préférence : la carte de la communauté est BLANCHE, l'Arène est NOIRE. Le
 * gris commun `#d0d5e0` et le cyan `#00d2ff` du jeu deviennent illisibles sur
 * blanc. On garde donc la TEINTE de chaque rareté, assombrie juste assez pour
 * rester lisible. Un enfant doit pouvoir lire son titre, pas le deviner.
 * ────────────────────────────────────────────────────────── */

.emc-title-pill.rarity-rare {
  --emc-rarity: #0e7490;
  --emc-rarity-soft: rgba(14, 116, 144, 0.10);
  --emc-rarity-line: rgba(14, 116, 144, 0.32);
  --emc-rarity-glow: rgba(14, 116, 144, 0.22);
}
.emc-title-pill.rarity-epic {
  --emc-rarity: #7c3aed;
  --emc-rarity-soft: rgba(124, 58, 237, 0.10);
  --emc-rarity-line: rgba(124, 58, 237, 0.32);
  --emc-rarity-glow: rgba(124, 58, 237, 0.24);
}
.emc-title-pill.rarity-legendary {
  --emc-rarity: #a16207;
  --emc-rarity-soft: rgba(161, 98, 7, 0.12);
  --emc-rarity-line: rgba(161, 98, 7, 0.36);
  --emc-rarity-glow: rgba(245, 197, 24, 0.35);
}

/* ── Fond SOMBRE ──────────────────────────────────────────────
 * ✅ Là, on reprend EXACTEMENT les couleurs du greffon Système, parce que le
 * fond est le même que celui de l'Arène. Un titre légendaire a donc la même
 * couleur dans le jeu et dans la communauté.
 * ────────────────────────────────────────────────────────── */

.emc-app[data-theme="dark"] .emc-title-pill {
  --emc-rarity: #d0d5e0;
  --emc-rarity-soft: rgba(208, 213, 224, 0.14);
  --emc-rarity-line: rgba(208, 213, 224, 0.40);
  --emc-rarity-glow: rgba(208, 213, 224, 0.28);
}
.emc-app[data-theme="dark"] .emc-title-pill.rarity-rare {
  --emc-rarity: #00d2ff;
  --emc-rarity-soft: rgba(0, 210, 255, 0.14);
  --emc-rarity-line: rgba(0, 210, 255, 0.40);
  --emc-rarity-glow: rgba(0, 210, 255, 0.30);
}
.emc-app[data-theme="dark"] .emc-title-pill.rarity-epic {
  --emc-rarity: #cc88ff;
  --emc-rarity-soft: rgba(204, 136, 255, 0.14);
  --emc-rarity-line: rgba(204, 136, 255, 0.40);
  --emc-rarity-glow: rgba(204, 136, 255, 0.32);
}
.emc-app[data-theme="dark"] .emc-title-pill.rarity-legendary {
  --emc-rarity: #f5c518;
  --emc-rarity-soft: rgba(245, 197, 24, 0.14);
  --emc-rarity-line: rgba(245, 197, 24, 0.42);
  --emc-rarity-glow: rgba(245, 197, 24, 0.38);
}
.emc-app[data-theme="dark"] 
/* Le plus rare mérite d'être vu de loin, sans bouger ni clignoter : un enfant
   lit l'entête, il ne la regarde pas s'animer. */
.emc-title-pill.rarity-legendary,
.emc-title-pill.est-exclusif {
  box-shadow: 0 0 10px var(--emc-rarity-glow);
}

/* ─────────────────────────────────────────────────────────────────────
 * L'étiquette EXCLUSIVE, qui n'est PAS une rareté.
 *
 * Décision de Patrice, 2026-08-19 : « chaque titre doit être dans une des 4
 * qualifications », et « ils peuvent cependant avoir une étiquette EXCLUSIVE ».
 * Une rareté dit à quel point c'est RARE. Une étiquette dit si ça se GAGNE.
 *
 * ⛔ Aucun symbole neuf, aucune icône inventée : juste un filet plus franc,
 * dans la couleur de la rareté. C'est un DEGRÉ de ce qui existe déjà, pas un
 * vocabulaire visuel de plus. ⚠️ En attente du OK de Pat sur ce traitement.
 * ───────────────────────────────────────────────────────────────────── */

.emc-title-pill.est-exclusif {
  border-width: 2px;
  border-color: var(--emc-rarity);
  font-weight: 800;
}

/* ⚠️ Sans `min-width: 0`, une boîte flex refuse de rétrécir sous la taille de
   son contenu, et un titre long pousse la carte au lieu d'être coupé. */
.emc-post-compact .compact-name {
  min-width: 0;
  flex-wrap: wrap;
}

.emc-post-compact .compact-time {
  font-size: 13px;
  color: var(--emc-text-dim);
}

.emc-post-compact .compact-time .space-link {
  color: var(--emc-accent);
  font-weight: 600;
  cursor: pointer;
}

.emc-post-compact .type-badge {
  margin-left: auto;
  padding: 4px 11px;
  border-radius: var(--emc-radius-xs);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.type-badge.post     { background: var(--emc-accent-bg); color: var(--emc-accent); }
.type-badge.poll     { background: rgba(175, 82, 222, 0.12); color: var(--emc-purple); }
.type-badge.event    { background: rgba(255, 149, 0, 0.12); color: var(--emc-orange); }
.type-badge.tip      { background: rgba(52, 199, 89, 0.12); color: var(--emc-green); }
.type-badge.product  { background: rgba(255, 45, 85, 0.12); color: var(--emc-pink); }
.type-badge.article  { background: rgba(88, 86, 214, 0.12); color: var(--emc-indigo); }
.type-badge.video    { background: rgba(255, 59, 48, 0.12); color: var(--emc-red); }
.type-badge.gallery  { background: rgba(90, 200, 250, 0.12); color: var(--emc-teal); }
.type-badge.repost   { background: rgba(52, 199, 89, 0.12); color: var(--emc-green); }

.emc-post-compact .compact-body {
  padding: 0 20px 14px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--emc-text);
}

.emc-post-compact .compact-body .hashtag {
  color: var(--emc-accent);
  font-weight: 700;
  cursor: pointer;
}

.emc-post-compact .compact-body .mention {
  color: var(--emc-accent);
  font-weight: 700;
  cursor: pointer;
}

/* ─── Inline media inside compact ────────────────────────────── */

.emc-inline-image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
}

.emc-inline-gallery {
  display: grid;
  gap: 2px;
}

.emc-inline-gallery.cols-2 { grid-template-columns: 1fr 1fr; }
.emc-inline-gallery.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.emc-inline-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* ─── Poll ───────────────────────────────────────────────────── */

.emc-poll {
  padding: 0 20px 12px;
}

.emc-poll-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--emc-radius-sm);
  border: 1.5px solid var(--emc-border);
  background: var(--emc-bg-input);
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all var(--emc-transition);
}

.emc-poll-option:hover {
  border-color: var(--emc-accent);
}

.emc-poll-option.voted {
  border-color: var(--emc-accent);
}

.emc-poll-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--emc-accent);
  opacity: 0.12;
  border-radius: var(--emc-radius-sm);
  transition: width var(--emc-transition-slow);
}

.emc-poll-label {
  font-size: 14px;
  font-weight: 600;
  z-index: 1;
  color: var(--emc-text);
  position: relative;
}

.emc-poll-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--emc-accent);
  z-index: 1;
  position: relative;
}

.emc-poll-meta {
  font-size: 13px;
  color: var(--emc-text-dim);
  margin-top: 6px;
  font-weight: 500;
}

/* ─── Event ──────────────────────────────────────────────────── */

.emc-event {
  margin: 0 20px 12px;
  padding: 16px;
  border-radius: var(--emc-radius-sm);
  border: 1px solid var(--emc-border);
  background: var(--emc-bg-input);
}

.emc-event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 14px;
}

.emc-event-row .icon {
  font-size: 18px;
}

.emc-event-date {
  font-weight: 700;
  color: var(--emc-text);
}

.emc-event-loc {
  color: var(--emc-text-muted);
}

.emc-event-rsvp {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.emc-rsvp-btn {
  flex: 1;
  text-align: center;
  padding: 9px;
  border-radius: var(--emc-radius-sm);
  border: 1.5px solid var(--emc-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--emc-text-muted);
  background: var(--emc-bg-card);
  cursor: pointer;
  transition: all var(--emc-transition);
  font-family: var(--emc-font);
}

.emc-rsvp-btn:hover {
  border-color: var(--emc-accent);
  color: var(--emc-accent);
}

.emc-rsvp-btn.active {
  border-color: var(--emc-accent);
  background: var(--emc-accent-bg);
  color: var(--emc-accent);
  font-weight: 700;
}

.emc-event-meta {
  font-size: 13px;
  color: var(--emc-text-dim);
  margin-top: 8px;
}

/* ─── Product ────────────────────────────────────────────────── */

.emc-product {
  margin: 0 20px 12px;
  padding: 14px;
  border-radius: var(--emc-radius-sm);
  border: 1px solid var(--emc-border);
  background: var(--emc-bg-input);
  display: flex;
  gap: 14px;
  align-items: center;
}

.emc-product-img {
  width: 72px;
  height: 72px;
  border-radius: var(--emc-radius-xs);
  object-fit: cover;
  flex-shrink: 0;
}

.emc-product-info {
  flex: 1;
  min-width: 0;
}

.emc-product-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--emc-text);
  margin-bottom: 4px;
}

.emc-product-prices {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.emc-product-price {
  font-weight: 800;
  font-size: 18px;
  color: var(--emc-text-strong);
}

.emc-product-original {
  font-size: 13px;
  color: var(--emc-text-dim);
  text-decoration: line-through;
}

.emc-product-promo {
  background: var(--emc-red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--emc-radius-xs);
  letter-spacing: 0.05em;
}

/* ─── Repost quote ───────────────────────────────────────────── */

.emc-repost-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--emc-green);
  padding: 0 20px 8px;
}

.emc-repost-quote {
  margin: 0 20px 12px;
  padding: 14px;
  border-radius: var(--emc-radius-sm);
  border: 1px solid var(--emc-border);
  background: var(--emc-bg-input);
}

.emc-repost-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--emc-text-dim);
  text-transform: uppercase;
}

.emc-repost-body {
  font-size: 14px;
  line-height: 1.5;
  color: var(--emc-text-muted);
  margin-top: 4px;
}

/* ─── Link preview ───────────────────────────────────────────── */

.emc-link-preview {
  margin: 0 20px 12px;
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--emc-transition);
  background: var(--emc-bg-input);
}

.emc-link-preview:hover {
  border-color: var(--emc-border-strong);
}

.emc-link-preview img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.emc-link-preview-info {
  padding: 12px 14px;
}

.emc-link-preview-domain {
  font-size: 11px;
  color: var(--emc-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.emc-link-preview-title {
  font-weight: 700;
  font-size: 15px;
  margin-top: 4px;
  color: var(--emc-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
}

/* ─── Tip type (special styling) ─────────────────────────────── */

.emc-post-tip {
  border-left: 4px solid var(--emc-green);
}

/* ─── Video play overlay ─────────────────────────────────────── */

.emc-post-video-hero {
  position: relative;
}

.emc-post-video-hero .play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background var(--emc-transition);
}

.emc-post-video-hero:hover .play-overlay {
  background: rgba(0, 0, 0, 0.15);
}

.emc-post-video-hero .play-btn {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #000;
  padding-left: 4px;
  box-shadow: var(--emc-shadow-lg);
}

/* ─── Action bar (minimal Apple News style) ──────────────────── */

.emc-action-bar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--emc-divider);
}

.emc-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 17px;
  color: var(--emc-text-faint);
  transition: all var(--emc-transition);
  border: none;
  background: none;
  padding: 4px 0;
  font-family: var(--emc-font);
}

.emc-action-btn:hover {
  color: var(--emc-text-muted);
}

.emc-action-btn.liked {
  color: var(--emc-red);
}

.emc-action-btn.bookmarked {
  color: var(--emc-accent);
}

.emc-action-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--emc-text-muted);
}

.emc-action-share {
  margin-left: auto;
  font-size: 16px;
}

/* ─── Right Sidebar ──────────────────────────────────────────── */

.emc-right {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 24px 16px;
}

.emc-right::-webkit-scrollbar {
  width: 0;
}

.emc-widget {
  background: var(--emc-bg-card);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--emc-shadow-sm);
}

.emc-widget-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: -0.02em;
  color: var(--emc-text-strong);
  font-family: var(--emc-font-display);
}

.emc-widget-title .see-all {
  font-size: 13px;
  font-weight: 600;
  color: var(--emc-accent);
  cursor: pointer;
  letter-spacing: 0;
}

.emc-widget-title .see-all:hover {
  text-decoration: underline;
}

/* Trending */
.emc-trending-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--emc-divider);
  cursor: pointer;
  transition: all var(--emc-transition);
}

.emc-trending-item:last-child {
  border-bottom: none;
}

.emc-trending-item:hover .trending-tag {
  color: var(--emc-accent);
}

.trending-tag {
  font-weight: 700;
  font-size: 14px;
  color: var(--emc-text);
  transition: color var(--emc-transition);
}

.trending-count {
  font-size: 12px;
  color: var(--emc-text-dim);
  font-weight: 500;
}

/* Who to follow */
.emc-follow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.emc-follow-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.emc-follow-info {
  flex: 1;
  min-width: 0;
}

.emc-follow-name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--emc-text);
}

.emc-follow-bio {
  font-size: 12px;
  color: var(--emc-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.emc-follow-btn {
  padding: 6px 14px;
  border-radius: var(--emc-radius-full);
  border: 1.5px solid var(--emc-text-strong);
  background: var(--emc-text-strong);
  color: var(--emc-bg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--emc-transition);
  font-family: var(--emc-font);
}

.emc-follow-btn:hover {
  opacity: 0.85;
}

.emc-follow-btn.following {
  background: transparent;
  color: var(--emc-text);
}

/* Leaderboard */
.emc-leaderboard-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.emc-leaderboard-rank {
  width: 24px;
  font-weight: 800;
  font-size: 16px;
  color: var(--emc-text-dim);
  text-align: center;
  font-family: var(--emc-font-display);
}

.emc-leaderboard-rank.gold { color: #ffb800; }
.emc-leaderboard-rank.silver { color: #a8a8b3; }
.emc-leaderboard-rank.bronze { color: #cd7f32; }

.emc-leaderboard-item img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.emc-leaderboard-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--emc-text);
}

.emc-leaderboard-xp {
  font-size: 13px;
  font-weight: 800;
  color: var(--emc-text-strong);
}

/* Spaces in right */
.emc-space-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  transition: opacity var(--emc-transition);
}

.emc-space-item:hover {
  opacity: 0.7;
}

.emc-space-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--emc-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  font-family: var(--emc-font-display);
}

.emc-space-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--emc-text);
}

.emc-space-members {
  font-size: 12px;
  color: var(--emc-text-dim);
  font-weight: 500;
}

/* ─── Profile Page ──────────────────────────────────────────── */

.emc-profile-card {
  background: var(--emc-bg-card);
  border-radius: var(--emc-radius);
  overflow: hidden;
  box-shadow: var(--emc-shadow);
  border: 1px solid var(--emc-border);
  margin-bottom: 20px;
}

.emc-profile-banner {
  height: 180px;
  background: linear-gradient(135deg, var(--emc-accent), var(--emc-purple));
  position: relative;
}

.emc-profile-info {
  padding: 0 24px 24px;
  position: relative;
}

.emc-profile-avatar-wrap {
  margin-top: -56px;
  position: relative;
  width: fit-content;
}

.emc-profile-avatar-wrap img {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 5px solid var(--emc-bg-card);
  object-fit: cover;
}

.emc-profile-name {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 14px;
  color: var(--emc-text-strong);
  font-family: var(--emc-font-display);
}

.emc-profile-handle {
  font-size: 15px;
  color: var(--emc-text-dim);
  font-weight: 500;
  margin-top: 2px;
}

.emc-profile-bio {
  font-size: 15px;
  color: var(--emc-text);
  margin-top: 10px;
  max-width: 480px;
  line-height: 1.5;
}

.emc-profile-stats-row {
  display: flex;
  gap: 28px;
  margin-top: 16px;
}

.emc-profile-stat .stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--emc-text-strong);
  font-family: var(--emc-font-display);
}

.emc-profile-stat .stat-label {
  font-size: 13px;
  color: var(--emc-text-dim);
  font-weight: 500;
}

.emc-profile-actions {
  position: absolute;
  top: -48px;
  right: 24px;
  display: flex;
  gap: 8px;
}

.emc-btn {
  padding: 9px 22px;
  border-radius: var(--emc-radius-full);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--emc-transition);
  border: none;
  font-family: var(--emc-font);
}

.emc-btn-primary {
  background: var(--emc-cta);
  color: var(--emc-cta-ink);
  font-weight: 800;
  box-shadow: var(--emc-cta-glow);
}

.emc-btn-primary:hover {
  background: var(--emc-cta-hover);
  transform: translateY(-1px);
  box-shadow: var(--emc-cta-glow-hover);
}

.emc-btn-outline {
  background: var(--emc-bg-card);
  border: 1.5px solid var(--emc-border-strong);
  color: var(--emc-text);
}

.emc-btn-outline:hover {
  background: var(--emc-bg-hover);
}

/* ─── Modal ──────────────────────────────────────────────────── */

.emc-modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--emc-bg-overlay);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.emc-modal-backdrop.open {
  display: flex;
}

.emc-modal {
  background: var(--emc-bg-card);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius);
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--emc-shadow-lg);
}

.emc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--emc-divider);
}

.emc-modal-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--emc-text-strong);
  font-family: var(--emc-font-display);
}

.emc-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--emc-bg-hover);
  color: var(--emc-text-muted);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--emc-transition);
}

.emc-modal-close:hover {
  background: var(--emc-border);
  color: var(--emc-text);
}

.emc-modal-body {
  padding: 20px 24px;
}

.emc-modal textarea {
  width: 100%;
  min-height: 140px;
  background: var(--emc-bg-input);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius-sm);
  padding: 14px;
  color: var(--emc-text);
  font-family: var(--emc-font);
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: all var(--emc-transition);
}

.emc-modal textarea:focus {
  border-color: var(--emc-accent);
  background: var(--emc-bg-card);
}

.emc-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid var(--emc-divider);
}

.emc-modal-attach {
  display: flex;
  gap: 4px;
}

/* ─── Babillard : réponses rapides et commentaires ───────────
   Les boutons de réponse sont la SEULE façon pour un enfant de
   répondre sur le Babillard. Ils doivent donc être visibles et
   assez gros pour un doigt : 44 px de haut au minimum.
   ⚠️ Aucune couleur en dur : les jetons portent le clair et le
   sombre, et la charte enfant demande les deux. */

/* ═══════════════════════════════════════════════════════════════════
   TENUE DU CONTENU : « assure-toi que tout fit tout le temps sur tout »
   ═══════════════════════════════════════════════════════════════════

   Demande de Pat, 2026-08-24, en deux morceaux :
     « les boutons, je veux qu'ils soient tous les mêmes grosseurs »
     « des fois les textes sont trop gros pour les cases »

   ⛔ Chaque règle ci-dessous répare un débordement MESURÉ à l'écran, pas
   une précaution vague. Elles ont été mises au point sur du contenu
   hostile (quatre longs libellés, un nom de 29 lettres, un mot de 42
   lettres sans espace) à 375, 768 et 1400 px de large.

   ⚠️ Elles valent pour TOUT LE MONDE, parent comme enfant, et pour la
   carte compacte comme pour la carte éditoriale Apple News / IGN. Un
   parent ne peut pas personnaliser son mur : c'est donc ici que ça se
   règle pour lui, nulle part ailleurs.
   ═══════════════════════════════════════════════════════════════════ */

/* ① Un mot sans espace de 42 caractères (une adresse collée, un
      « aaaaa… » d'enfant) élargit sa boîte au-delà de la carte et pousse
      tout le fil en débordement horizontal.
      ⛔ PAS de `hyphens: auto` : mesuré à l'écran, ça donnait « Je vais
      es-sayer ça » sur quatre lignes. Une césure automatique dans un
      bouton de 100 px coupe les mots courants et a l'air d'un bogue pour
      un enfant qui apprend à lire. `anywhere` ne coupe QUE le mot
      impossible, ce qui est exactement le besoin. */
.emc-post .compact-body,
.emc-post .compact-name,
.emc-post .emc-post-headline,
.emc-post .emc-post-subtitle,
.emc-post .emc-title-pill,
.emc-reponse {
  overflow-wrap: anywhere;
}

/* ② Une boîte de grille ou de flex refuse de rétrécir sous son contenu :
      `min-width` vaut `auto` par défaut. C'est la cause n° 1 des
      débordements, et c'est le même défaut qui avait poussé la zone de
      saisie 64 px sous l'écran en 0.36.0. */
.emc-post,
.emc-post-header,
.compact-author-info,
.emc-reponses,
.emc-reponse,
.emc-action-bar {
  min-width: 0;
}

/* ③ Le nom de l'auteur ne pousse jamais la pastille de titre hors de la
      carte : la ligne passe à la ligne au lieu de déborder. */
.compact-author-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
}

/* ④ 🔴 LA DEMANDE DE PAT : des boutons de réponse TOUS DE LA MÊME
      GROSSEUR. Une grille à colonnes égales, jamais un flex qui suit la
      longueur du texte.

      `min(140px, 100%)` dit : « au moins 140 px, sauf s'il n'y a pas
      140 px, auquel cas prends tout ». La grille repasse alors d'elle-même
      à trois colonnes, puis deux, puis une, EN GARDANT LES COLONNES ÉGALES.
      ⚠️ Le plancher était d'abord à 112 px, et la mesure l'a corrigé :
      « Je ne comprends pas » tombait sur TROIS lignes dans un bouton de
      128 px. 140 px tient un libellé français de trois mots sur deux
      lignes au plus, à la taille de police d'ici.
      ⛔ Le `min(…, 100%)` est indispensable : `minmax(112px, 1fr)` tout
      court DÉBORDE dès qu'un conteneur fait moins de 112 px.
      ⚠️ `align-items: stretch` égalise aussi la HAUTEUR quand un libellé
      passe sur deux lignes : sans lui, « même grosseur » ne serait vrai
      qu'en largeur. */
.emc-reponses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  align-items: stretch;
  gap: 8px;
  padding: 4px 0 14px;
}

.emc-reponse {
  width: 100%;
  justify-content: center;
  text-align: center;
  line-height: 1.25;
  /* Le libellé rétrécit un peu quand la place manque, plutôt que de se
     couper. ⚠️ Plancher à 12 px : sous ça, un enfant de 8 ans ne lit plus. */
  font-size: clamp(12px, 1.05vw, 15px);
}

/* ⑤ Le compteur ne se fait jamais écraser par le libellé. */
.emc-reponse-n {
  flex: 0 0 auto;
}

/* ⑥ La barre d'actions passe à la ligne plutôt que de déborder. */
.emc-action-bar {
  flex-wrap: wrap;
  gap: 10px 14px;
}

/* ⑦ Une image ne dépasse jamais sa carte. */
.emc-post img {
  max-width: 100%;
  height: auto;
}

.emc-reponse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--emc-bg-input);
  border: 1px solid var(--emc-border);
  border-radius: 999px;
  color: var(--emc-text);
  font-family: var(--emc-font);
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  transition: all var(--emc-transition);
}

.emc-reponse:hover {
  border-color: var(--emc-accent);
  background: var(--emc-bg-hover);
}

/* Celui qu'on a choisi. ⛔ La bordure ET le fond changent : la couleur
   seule ne se voit pas quand on distingue mal le rouge du vert. */
.emc-reponse.choisi {
  border-color: var(--emc-accent);
  background: var(--emc-accent);
  color: #fff;
}

.emc-reponse:focus-visible {
  outline: 2px solid var(--emc-accent);
  outline-offset: 2px;
}

.emc-reponse-n {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.8;
}

/* Le choix de la portée, dans la fenêtre d'écriture. */
.emc-portee {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--emc-divider);
}

.emc-portee-titre {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--emc-text-strong);
  margin-bottom: 8px;
}

.emc-portee-choix {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  background: var(--emc-bg-input);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius-sm);
  color: var(--emc-text);
  font-family: var(--emc-font);
  font-size: 15px;
  outline: none;
}

.emc-portee-choix:focus-visible {
  outline: 2px solid var(--emc-accent);
  outline-offset: 2px;
}

/* Les 4 boîtes, dans la fenêtre d'écriture. */
.emc-boutons-reglage {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--emc-divider);
}

.emc-boutons-titre {
  font-size: 14px;
  font-weight: 800;
  color: var(--emc-text-strong);
  margin-bottom: 4px;
}

.emc-boutons-aide {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--emc-text-muted);
}

.emc-bouton-champ {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  padding: 11px 14px;
  background: var(--emc-bg-input);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius-sm);
  color: var(--emc-text);
  font-family: var(--emc-font);
  font-size: 15px;
  outline: none;
  transition: all var(--emc-transition);
}

.emc-bouton-champ:focus {
  border-color: var(--emc-accent);
  background: var(--emc-bg-card);
}

/* La boîte à commentaire. */
.emc-commentaire-ouvrir {
  padding: 0 0 12px;
}

.emc-commentaire-lien {
  border: none;
  background: none;
  padding: 6px 0;
  min-height: 32px;
  color: var(--emc-text-muted);
  font-family: var(--emc-font);
  font-size: 14px;
  cursor: pointer;
}

.emc-commentaire-lien:hover {
  color: var(--emc-accent);
}

.emc-commentaire {
  display: block;
  padding: 0 0 14px;
}

.emc-commentaire-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.emc-commentaire textarea {
  flex: 1 1 auto;
  /* ⛔ Sans ceci, une boîte flex refuse de rétrécir sous son contenu et
     pousse le bouton hors de l'écran. C'est le défaut du sélecteur de
     GIF, corrigé en 0.36.0, et il revient partout où on l'oublie. */
  min-width: 0;
  min-height: 44px;
  padding: 11px 14px;
  background: var(--emc-bg-input);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius-sm);
  color: var(--emc-text);
  font-family: var(--emc-font);
  font-size: 15px;
  line-height: 1.4;
  resize: vertical;
  outline: none;
}

.emc-commentaire textarea:focus {
  border-color: var(--emc-accent);
  background: var(--emc-bg-card);
}

.emc-commentaires-fil {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.emc-commentaire-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.emc-commentaire-item.est-reponse {
  margin-left: 42px;
}

.emc-commentaire-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--emc-bg-input);
}

.emc-commentaire-contenu {
  min-width: 0;
  padding: 9px 11px;
  background: var(--emc-bg-input);
  border: 1px solid var(--emc-border);
  border-radius: 14px;
}

.emc-commentaire-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  margin-bottom: 3px;
  color: var(--emc-text);
  font-size: 13px;
}

.emc-commentaire-meta span {
  color: var(--emc-text-dim);
  font-size: 11px;
}

.emc-commentaire-corps {
  margin: 0;
  color: var(--emc-text);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.emc-commentaire-corps.supprime {
  color: var(--emc-text-dim);
  font-style: italic;
}

.emc-commentaire-gif {
  display: block;
  width: min(100%, 280px);
  height: auto;
  margin-top: 7px;
  border-radius: 10px;
}

.emc-commentaires-etat {
  margin-bottom: 12px;
  padding: 12px;
  text-align: center;
  color: var(--emc-text-dim);
  font-size: 13px;
}

.emc-commentaires-etat.erreur {
  color: var(--emc-red);
}

.emc-commentaire-gif-panneau {
  margin-top: 10px;
  padding: 12px;
  background: var(--emc-bg-card);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius-sm);
}

#emc-commentaire-gif-recherche {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  background: var(--emc-bg-input);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius-full);
  color: var(--emc-text);
  font-family: var(--emc-font);
  font-size: 14px;
  outline: none;
}

#emc-commentaire-gif-recherche:focus {
  border-color: var(--emc-accent);
}

@media (max-width: 540px) {
  .emc-commentaire-compose {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .emc-commentaire-compose textarea {
    flex: 1 1 calc(100% - 62px);
  }

  .emc-commentaire-compose > .emc-btn {
    flex: 1 0 100%;
    min-height: 44px;
  }

  .emc-commentaire-gif-panneau .emc-gif-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: min(42vh, 320px);
  }

  .emc-commentaire-item.est-reponse {
    margin-left: 20px;
  }
}

/* ─── Signalement ────────────────────────────────────────────
   Les motifs sont des cibles pour un doigt d'enfant : une par ligne,
   48 px de haut au minimum, jamais une rangee de petites pastilles.
   ⚠️ Aucune couleur en dur : les jetons portent deja le clair et le
   sombre, et la charte enfant demande les deux. */

.emc-modal-signalement {
  max-width: 460px;
}

.emc-signalement-intro {
  margin: 0 0 16px;
  color: var(--emc-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.emc-signalement-motifs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emc-signalement-motif {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 13px 16px;
  text-align: left;
  background: var(--emc-bg-input);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius-sm);
  color: var(--emc-text);
  font-family: var(--emc-font);
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--emc-transition);
}

.emc-signalement-motif:hover:not(:disabled) {
  border-color: var(--emc-accent);
  background: var(--emc-bg-hover);
}

/* ⛔ Le contour du clavier ne se retire pas : c'est la seule facon de
   savoir ou on est quand on ne se sert pas d'une souris. */
.emc-signalement-motif:focus-visible {
  outline: 2px solid var(--emc-accent);
  outline-offset: 2px;
}

.emc-signalement-motif:disabled {
  opacity: 0.5;
  cursor: default;
}

.emc-signalement-attente {
  margin: 14px 0 0;
  color: var(--emc-text-muted);
  font-size: 14px;
  text-align: center;
}

.emc-action-btn.emc-action-report:hover {
  color: var(--emc-red);
}

/* ─── Notifications Panel ────────────────────────────────────── */

.emc-notif-panel {
  position: fixed;
  top: 60px;
  right: 0;
  width: 400px;
  height: calc(100vh - 60px);
  background: var(--emc-bg-card);
  border-left: 1px solid var(--emc-border);
  z-index: 150;
  transform: translateX(100%);
  transition: transform var(--emc-transition-slow);
  overflow-y: auto;
  box-shadow: var(--emc-shadow-lg);
}

.emc-notif-panel.open {
  transform: translateX(0);
}

.emc-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--emc-divider);
  position: sticky;
  top: 0;
  background: var(--emc-bg-card);
  z-index: 2;
}

.emc-notif-header-title {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--emc-text-strong);
  font-family: var(--emc-font-display);
}

.emc-notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--emc-divider);
  cursor: pointer;
  transition: background var(--emc-transition);
}

.emc-notif-item:hover {
  background: var(--emc-bg-hover);
}

.emc-notif-item.unread {
  background: var(--emc-accent-bg);
}

.emc-notif-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.emc-notif-content {
  flex: 1;
  min-width: 0;
}

.emc-notif-text {
  font-size: 14px;
  color: var(--emc-text);
  line-height: 1.4;
}

.emc-notif-text strong {
  font-weight: 700;
}

.emc-notif-time {
  font-size: 12px;
  color: var(--emc-text-dim);
  margin-top: 2px;
  font-weight: 500;
}

.emc-notif-dot {
  width: 8px;
  height: 8px;
  background: var(--emc-accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

/* ─── Messages Page ──────────────────────────────────────────── */

.emc-messages-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: calc(100vh - 60px);
  background: var(--emc-bg-card);
}

.emc-conv-list {
  border-right: 1px solid var(--emc-border);
  overflow-y: auto;
  background: var(--emc-bg-card);
}

.emc-conv-search {
  padding: 14px;
  border-bottom: 1px solid var(--emc-divider);
  background: var(--emc-bg-card);
  position: sticky;
  top: 0;
  z-index: 2;
}

.emc-conv-search input {
  width: 100%;
  background: var(--emc-bg-input);
  border: 1px solid transparent;
  border-radius: var(--emc-radius-full);
  padding: 9px 16px;
  color: var(--emc-text);
  font-size: 14px;
  outline: none;
  font-family: var(--emc-font);
  transition: all var(--emc-transition);
}

.emc-conv-search input:focus {
  border-color: var(--emc-accent);
  background: var(--emc-bg-card);
}

.emc-conv-item {
  display: flex;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--emc-divider);
  transition: background var(--emc-transition);
}

.emc-conv-item:hover {
  background: var(--emc-bg-hover);
}

.emc-conv-item.active {
  background: var(--emc-accent-bg);
}

.emc-conv-item img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.emc-conv-info {
  flex: 1;
  min-width: 0;
}

.emc-conv-name {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  color: var(--emc-text);
}

.emc-conv-time {
  font-size: 12px;
  color: var(--emc-text-dim);
  font-weight: 500;
}

.emc-conv-preview {
  font-size: 13px;
  color: var(--emc-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 3px;
}

.emc-conv-unread {
  width: 10px;
  height: 10px;
  background: var(--emc-accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

/* Chat thread */
.emc-chat {
  display: flex;
  flex-direction: column;
  background: var(--emc-bg);
}

.emc-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--emc-border);
  background: var(--emc-bg-card);
}

.emc-chat-header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.emc-chat-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--emc-text);
}

.emc-chat-status {
  font-size: 12px;
  color: var(--emc-green);
  font-weight: 500;
  margin-top: 1px;
}

.emc-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 🔴 Sans `min-height: 0`, une boîte flex REFUSE de rétrécir sous la taille
     de son contenu. Mesuré le 2026-08-23 dans un vrai navigateur : à
     l'ouverture du sélecteur de GIF, la zone de saisie était poussée 64 px
     SOUS l'écran, donc plus personne ne pouvait écrire ni envoyer.
     ⛔ La liste des messages doit céder de la place, pas la zone de saisie. */
  min-height: 0;
}

.emc-msg {
  max-width: 70%;
  padding: 10px 16px;
  border-radius: 20px;
  font-size: 14.5px;
  line-height: 1.5;
}

.emc-msg.received {
  background: var(--emc-bg-card);
  color: var(--emc-text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  border: 1px solid var(--emc-border);
}

.emc-msg.sent {
  background: var(--emc-accent);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.emc-msg-time {
  font-size: 11px;
  color: var(--emc-text-dim);
  margin-top: 4px;
  font-weight: 500;
}

.emc-msg.sent .emc-msg-time {
  color: rgba(255, 255, 255, 0.7);
  text-align: right;
}

/* ─────────────────────────────────────────────────────────────────────
 * Le sélecteur de GIF du clavardage.
 *
 * Le serveur (`/giphy/trending` et `/giphy/search`) existait depuis des
 * semaines et le front ne l'appelait JAMAIS. Une prise sans fiche. Voici la
 * fiche.
 *
 * ⛔ Le bouton porte le mot « GIF » et pas une icône, exprès : c'est ce que
 * font Slack, Discord et iMessage, donc un enfant comme un parent le
 * reconnaît sans qu'on lui explique.
 * ───────────────────────────────────────────────────────────────────── */

.emc-gif-btn {
  flex-shrink: 0;
  border: 1px solid var(--emc-border);
  background: var(--emc-bg-input);
  color: var(--emc-text-muted);
  border-radius: var(--emc-radius-full);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  font-family: var(--emc-font);
  transition: all var(--emc-transition);
}

.emc-gif-btn:hover {
  color: var(--emc-text);
  border-color: var(--emc-border-strong);
}

.emc-gif-btn.actif {
  background: var(--emc-accent);
  border-color: var(--emc-accent);
  color: var(--emc-text-on-accent);
}

.emc-gif-panneau {
  border-top: 1px solid var(--emc-border);
  background: var(--emc-bg-card);
  padding: 12px 24px;
  /* Le panneau ne se laisse pas écraser, et la zone de saisie non plus :
     c'est la liste des messages qui cède, elle a son propre défilement. */
  flex-shrink: 0;
}

#emc-gif-recherche {
  width: 100%;
  box-sizing: border-box;
  background: var(--emc-bg-input);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius-full);
  padding: 9px 16px;
  color: var(--emc-text);
  font-size: 14px;
  outline: none;
  font-family: var(--emc-font);
}

#emc-gif-recherche:focus {
  border-color: var(--emc-accent);
}

.emc-gif-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-top: 12px;
  /* ⚠️ Hauteur bornée + défilement : sans ça, 24 GIF poussent la zone de
     saisie hors de l'écran, et on ne peut plus écrire. */
  max-height: 240px;
  overflow-y: auto;
}

.emc-gif-item {
  padding: 0;
  border: 1px solid var(--emc-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--emc-bg-input);
  cursor: pointer;
  aspect-ratio: 1 / 1;
  transition: all var(--emc-transition);
}

.emc-gif-item:hover,
.emc-gif-item:focus-visible {
  border-color: var(--emc-accent);
  transform: scale(1.03);
}

.emc-gif-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.emc-gif-etat {
  grid-column: 1 / -1;
  padding: 22px 8px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--emc-text-dim);
}

/* Un GIF reçu dans une bulle. La bulle perd son rembourrage : une image
   collée à ses bords se lit mieux qu'une image dans un cadre. */
.emc-msg.has-gif {
  padding: 4px;
  background: var(--emc-bg-input);
}

.emc-msg-gif {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.emc-chat-compose {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--emc-border);
  align-items: center;
  background: var(--emc-bg-card);
}

.emc-chat-compose input {
  flex: 1;
  background: var(--emc-bg-input);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius-full);
  padding: 11px 18px;
  color: var(--emc-text);
  font-size: 14.5px;
  outline: none;
  font-family: var(--emc-font);
  transition: all var(--emc-transition);
}

.emc-chat-compose input:focus {
  border-color: var(--emc-accent);
}

.emc-chat-compose button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--emc-accent);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--emc-transition);
}

.emc-chat-compose button:hover {
  background: var(--emc-accent-hover);
}

/* ─── Login Page ─────────────────────────────────────────────── */

/* Porte d'entrée OXXY : toujours sombre + halos, comme oxxy.ca */
.emc-login-wrap {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0c;
  padding: 24px;
  overflow: hidden;
}
.emc-login-wrap::before,
.emc-login-wrap::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.16;
  pointer-events: none;
}
.emc-login-wrap::before {
  width: 55vw; height: 55vw;
  background: var(--oxxy-yellow);
  top: -22vw; left: -14vw;
}
.emc-login-wrap::after {
  width: 48vw; height: 48vw;
  background: var(--oxxy-cyan);
  bottom: -20vw; right: -14vw;
}

.emc-login-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
}

.emc-login-header {
  text-align: center;
  margin-bottom: 28px;
}

.emc-login-eyebrow {
  font-family: var(--emc-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxxy-cyan);
  margin-bottom: 14px;
}

/* Wordmark pop-art : jaune + ombres décalées cyan/magenta */
.emc-login-logo {
  font-family: var(--emc-font-display);
  font-size: clamp(46px, 15vw, 66px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--oxxy-yellow);
  text-shadow:
    2px 2px 0 var(--oxxy-cyan),
    4px 4px 0 var(--oxxy-magenta),
    6px 6px 18px rgba(0, 0, 0, 0.55);
}
.emc-login-logo .dot { color: var(--oxxy-magenta); }

.emc-login-subtitle {
  color: #d2d2d7;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
}

.emc-login-card {
  background: rgba(20, 20, 24, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 26px 24px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  border: 1px solid #1c1c22;
}
/* Champs de login : sombres + focus cyan (indépendant du thème) */
.emc-login-card .emc-form-label { color: #d2d2d7; }
.emc-login-card .emc-form-input {
  background: #111114;
  border: 1.5px solid #2c2c36;
  color: #f5f5f7;
}
.emc-login-card .emc-form-input::placeholder { color: #6e6e7a; }
.emc-login-card .emc-form-input:focus {
  border-color: var(--oxxy-cyan);
  background: #16161a;
  box-shadow: 0 0 0 3px rgba(31, 198, 229, 0.18);
}
.emc-login-footnote {
  text-align: center;
  margin-top: 20px;
  font-family: var(--emc-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6e6e7a;
}

.emc-form-label {
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  color: var(--emc-text);
}

.emc-form-input {
  width: 100%;
  background: var(--emc-bg-input);
  border: 1.5px solid var(--emc-border);
  border-radius: var(--emc-radius-sm);
  padding: 11px 14px;
  color: var(--emc-text);
  font-size: 15px;
  outline: none;
  font-family: var(--emc-font);
  transition: all var(--emc-transition);
  margin-bottom: 16px;
}

.emc-form-input:focus {
  border-color: var(--emc-accent);
  background: var(--emc-bg-card);
}

/* ─── Loading & Empty States ─────────────────────────────────── */

.emc-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
}

.emc-loading .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--emc-border);
  border-top-color: var(--emc-accent);
  border-radius: 50%;
  animation: emc-spin 0.8s linear infinite;
}

@keyframes emc-spin {
  to { transform: rotate(360deg); }
}

.emc-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--emc-text-muted);
}

.emc-empty .empty-icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.4;
}

.emc-empty .empty-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--emc-text);
  margin-bottom: 6px;
  font-family: var(--emc-font-display);
}

.emc-empty .empty-sub {
  font-size: 14px;
  color: var(--emc-text-muted);
}

/* ─── Toast ──────────────────────────────────────────────────── */

.emc-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--emc-bg-card);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius);
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--emc-shadow-lg);
  z-index: 300;
  transition: transform var(--emc-transition-slow);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--emc-text);
}

.emc-toast.show {
  transform: translateX(-50%) translateY(0);
}

.emc-toast.success { border-color: var(--emc-green); }
.emc-toast.error { border-color: var(--emc-red); }

/* ─── Barre d'onglets mobile (bottom nav) ────────────────────── */
/* Masquée sur desktop ; affichée ≤768px. Le contenu reçoit un
   padding-bottom pour ne JAMAIS être recouvert par la barre. */
.emc-bottomnav {
  display: none;
}

@media (max-width: 768px) {
  .emc-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    height: 58px;
    /* Respecte l'encoche / barre gestuelle iOS */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--emc-topbar-bg);
    border-top: 1px solid var(--emc-border);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }

  .emc-bn-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    background: none;
    padding: 6px 0 4px;
    color: var(--emc-text-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
  }
  .emc-bn-item.active {
    color: var(--emc-accent);
  }
  .emc-bn-item:active {
    opacity: 0.6;
  }

  .emc-bn-ic {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .emc-bn-ic svg {
    width: 24px;
    height: 24px;
    display: block;
  }
  .emc-bn-lbl {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
  }

  .emc-bn-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--emc-red, #ff3b30);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--emc-bg-card);
  }

  /* Bouton Publier central — pastille accent surélevée */
  .emc-bn-plus {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 4px;
  }
  .emc-bn-plus .emc-bn-ic {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--emc-cta);
    color: var(--emc-cta-ink);
    box-shadow: var(--emc-cta-glow);
    margin-top: -14px;
  }
  .emc-bn-plus .emc-bn-ic svg {
    width: 26px;
    height: 26px;
  }
  .emc-bn-plus:active .emc-bn-ic {
    background: var(--emc-cta-hover);
  }

  /* (Le dégagement bas de .emc-main est posé dans le bloc responsive
     ≤768px plus bas, pour gagner la cascade contre `padding: 16px`.) */
  /* Le drawer s'arrête au-dessus de la barre du bas */
  .emc-sidebar {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }
}

/* ─── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1040px) {
  /* Sidebar étant un drawer hors-flux, on retombe sur une colonne unique */
  .emc-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }
  .emc-right {
    display: none;
  }
}

@media (max-width: 768px) {
  .emc-layout {
    grid-template-columns: 1fr;
  }
  .emc-sidebar {
    width: 84%;
    max-width: 320px;
  }
  .emc-topbar {
    padding: 0 12px;
  }
  .emc-topbar-search {
    display: none;
  }
  .emc-main {
    padding: 16px;
    /* dégage la bottom-nav fixe (58px + safe-area) pour ne rien recouvrir */
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px) + 16px);
  }
  .emc-filter-row {
    margin: 0 0 16px;
    padding: 12px 0 10px;
  }
  .emc-messages-layout {
    grid-template-columns: 1fr;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }
  .emc-page-title {
    font-size: 26px;
  }

  /* ── Correctifs mobile (audit v0.14.1) — débordements & panneaux ── */
  /* Panneau notifications : pleine largeur au lieu de 400px fixe */
  .emc-notif-panel {
    width: 100vw;
    max-width: 100%;
  }
  /* Modale : marge de sécurité, ne touche plus les bords */
  .emc-modal {
    max-width: calc(100vw - 24px);
  }
  /* Titre masthead : ne déborde plus horizontalement */
  .emc-masthead-title {
    font-size: clamp(28px, 9vw, 40px);
  }
  /* Carte "split" : empile au lieu d'une colonne fixe de 200px */
  .emc-card-split {
    grid-template-columns: 1fr;
  }
  /* Sondage : autorise le retour à la ligne label + % */
  .emc-poll-option,
  .emc-poll-row {
    flex-wrap: wrap;
  }
  /* Picker de réactions : reste dans le viewport */
  .emc-reactions-picker {
    max-width: calc(100vw - 24px);
  }
  /* Médias : jamais plus larges que leur conteneur */
  .emc-main img,
  .emc-main video {
    max-width: 100%;
    height: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  Le Carnet — espace de projet d'un groupe
 *
 *  Le mur défile, le Carnet se range. La feuille de style suit cette
 *  différence : ici tout est plus calme, plus dense, plus « classeur »
 *  et moins « fil d'actualité ». Aucune couleur nouvelle, uniquement
 *  les jetons existants, pour que ça reste la même maison.
 * ═══════════════════════════════════════════════════════════════ */

.emc-carnet-head {
  margin-bottom: 20px;
}

.emc-carnet-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.emc-carnet-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--emc-text-muted);
}

.emc-carnet-back:hover { color: var(--emc-accent); }

.emc-carnet-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--emc-text-strong);
  margin: 0 0 6px;
}

.emc-carnet-space {
  font-size: 14px;
  font-weight: 600;
  color: var(--emc-text-muted);
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--emc-bg-hover);
}

.emc-carnet-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--emc-text-muted);
  margin: 0 0 14px;
  max-width: 56ch;
}

/* Ce que le groupe a le droit de déposer, dit d'entrée de jeu plutôt
   qu'au moment du refus. */
.emc-carnet-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.emc-carnet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--emc-text-muted);
  background: var(--emc-bg-card);
  border: 1px solid var(--emc-border);
  border-radius: 999px;
  padding: 5px 11px;
}

.emc-carnet-chip-off { color: var(--emc-text-faint); font-style: italic; }

.emc-carnet-enter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-weight: 600;
}

.emc-carnet-tagbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* ── Composer un nouveau fil ── */
.emc-carnet-new {
  background: var(--emc-bg-card);
  border: 1px solid var(--emc-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.emc-carnet-new-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.emc-carnet-new-row .emc-form-input { flex: 1 1 220px; }

/* ── La liste des fils ── */
.emc-carnet-list {
  border: 1px solid var(--emc-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--emc-bg-card);
}

.emc-carnet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--emc-divider);
  transition: background 0.12s ease;
}

.emc-carnet-item:last-child { border-bottom: none; }
.emc-carnet-item:hover { background: var(--emc-bg-hover); }

.emc-carnet-item-main { min-width: 0; }

.emc-carnet-item-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 650;
  color: var(--emc-text-strong);
}

.emc-carnet-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.emc-carnet-item-tags span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--emc-accent);
  background: var(--emc-accent-bg);
  border-radius: 5px;
  padding: 2px 7px;
}

.emc-carnet-item-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--emc-text-dim);
  text-align: right;
}

/* ── Un fil ouvert ── */
.emc-carnet-body { margin-bottom: 14px; }
.emc-carnet-reply { margin-bottom: 10px; }

.emc-carnet-author {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14px;
  font-weight: 700;
  color: var(--emc-text-strong);
  margin-bottom: 7px;
}

.emc-carnet-author span {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--emc-text-dim);
}

.emc-carnet-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--emc-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ── Réglages des interrupteurs ── */
.emc-carnet-cfg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--emc-border);
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.emc-carnet-cfg-row span { flex: 1; }

/* Un type fermé par Pat reste VISIBLE mais éteint : le cacher laisserait
   croire qu'il n'existe pas, et l'offrir serait une promesse creuse. */
.emc-carnet-cfg-row.is-capped {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--emc-bg-input);
}

.emc-carnet-cfg-row em {
  font-size: 11.5px;
  font-style: normal;
  font-weight: 600;
  color: var(--emc-text-faint);
}

@media (max-width: 640px) {
  .emc-carnet-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .emc-carnet-item-meta { flex-direction: row; gap: 12px; text-align: left; }
  .emc-carnet-title { font-size: 21px; }
}

/* ─── Le babillard en lecture seule, pour un enfant ──────────────
   Decision de Pat du 2026-08-24 : sur le Babillard general, seuls
   l'equipe et les mini-profs publient. L'enfant lit cette ligne a la
   place de la zone d'ecriture.
   ⛔ Elle prend la place exacte de `.emc-compose`, avec la meme marge :
   sans ca, l'ecran de l'enfant se decalerait par rapport a celui du
   parent, et un ecart de mise en page se lit comme un defaut. */
.emc-lecture-seule {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--emc-bg-card);
  border: 1px solid var(--emc-border);
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--emc-text-muted);
  box-shadow: var(--emc-shadow-sm);
}

.emc-lecture-seule-ic {
  font-size: 19px;
  line-height: 1.25;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   LES LOOKS DU BABILLARD (v0.48.0)
   ═══════════════════════════════════════════════════════════════════

   Pat, 2026-08-24 : « on va faire des looks aussi pour le wall [...] ça
   serait aussi à débarrer ». Le catalogue et le déblocage vivent dans
   `Looks` côté serveur; ici, seulement l'habillage.

   ⛔ Le look `defaut` N'A AUCUNE RÈGLE ICI, et c'est voulu : c'est
   l'apparence Apple News / IGN d'origine, celle que porte tout parent.
   Rien ne la touche, donc rien ne peut la casser.

   ⚠️ Les sélecteurs ont été MESURÉS dans la page, pas devinés. La carte
   porte `.emc-post.emc-post-compact`, jamais `.emc-post-card` : cette
   dernière est une classe que j'avais inventée dans un aperçu, et elle
   n'existe nulle part. Un sélecteur qui ne vise rien ne lève aucune
   erreur : il ne fait rien, en silence.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   LES SIX LOOKS DU BABILLARD
   Le HTML ne change jamais. Seule la peau change.
   Selecteurs MESURES dans la page : .emc-post.emc-post-compact, .emc-post-header,
   .compact-avatar/-name/-time/-body, .type-badge, .emc-title-pill,
   .emc-reponses/.emc-reponse, .emc-action-bar/.emc-action-btn.
   ═══════════════════════════════════════════════════════════════════════ */

/* Les 5 teintes pop-art de l'AcademieCo (hub maitre). La couleur d'un billet
   vient de son NUMERO, jamais de son rang : sinon le babillard changerait de
   couleurs a chaque reordonnancement du fil. */
.emc-post[data-teinte='0'] { --teinte:#ff2d87; --sur-teinte:#fff;    --teinte-sombre:#b8005c; }
.emc-post[data-teinte='1'] { --teinte:#00e5ff; --sur-teinte:#06232a; --teinte-sombre:#007f92; }
.emc-post[data-teinte='2'] { --teinte:#ffd400; --sur-teinte:#2a2200; --teinte-sombre:#8a7300; }
.emc-post[data-teinte='3'] { --teinte:#a855f7; --sur-teinte:#fff;    --teinte-sombre:#6b21a8; }
.emc-post[data-teinte='4'] { --teinte:#2ecc71; --sur-teinte:#062a15; --teinte-sombre:#14713c; }
/* ⛔ Un repli, parce qu'un vieux serveur ne pose pas `data-teinte` du tout.
   Sans lui, `var(--teinte)` serait vide et les bordures disparaitraient. */
.emc-post { --teinte:#ff2d87; --sur-teinte:#fff; --teinte-sombre:#b8005c; }

/* ═════ A · BLOC ════════════════════════════════════════════════════════
   Anguleux, editorial, affiche. Zero coin rond, ombre FRANCHE sans flou. */
[data-look='bloc'] { background:#f2f2ef; color:#14141a; }
[data-look='bloc'] .emc-post { background:#fff; border:2px solid #14141a; border-radius:0;
  box-shadow:8px 8px 0 var(--teinte); padding:0 16px 12px; }
[data-look='bloc'] .emc-post::before { content:''; display:block; height:12px; margin:0 -16px 14px; background:var(--teinte); }
[data-look='bloc'] .compact-name { font-family:Fraunces,Georgia,serif; font-weight:900; font-size:17px; letter-spacing:-.01em; color:#14141a; }
/* ⚠️ `clamp` plutot qu'une taille fixe : 22px etait juste sur une colonne
   large et trop gros des que la carte retrecit. */
[data-look='bloc'] .compact-body { font-family:Fraunces,Georgia,serif; font-weight:700;
  font-size:clamp(16px,2.4vw,20px); line-height:1.34; letter-spacing:-.015em; color:#14141a; }
[data-look='bloc'] .compact-avatar { border-radius:0; }
[data-look='bloc'] .type-badge { background:#14141a; color:#fff; border-radius:0; font-weight:900; letter-spacing:.08em; }
[data-look='bloc'] .emc-title-pill { border-radius:0; border:1.5px solid currentColor; }
[data-look='bloc'] .emc-reponse { border:2px solid #14141a; border-radius:0; background:#fff; color:#14141a;
  font-weight:800; font-size:13px; padding:11px 8px; }
[data-look='bloc'] .emc-reponse:hover { background:#f2f2ef; }
[data-look='bloc'] .emc-reponse.choisi { background:var(--teinte); color:var(--sur-teinte); box-shadow:4px 4px 0 #14141a; }
[data-look='bloc'] .emc-action-bar { border-top:2px solid #14141a; padding-top:10px; }
[data-look='bloc'] .emc-action-btn { color:#14141a; }

/* ═════ B · AUTOCOLLANT ═════════════════════════════════════════════════
   Zine, contour noir epais, cartes DE TRAVERS, papier jaune criard. */
[data-look='autocollant'] { background:#ffe94a; color:#0a0a0a; }
[data-look='autocollant'] .emc-post { background:#fff; border:3px solid #0a0a0a; border-radius:3px;
  box-shadow:none; padding:0 14px 12px; }
[data-look='autocollant'] .emc-post:nth-child(odd) { transform:rotate(-.8deg); }
[data-look='autocollant'] .emc-post:nth-child(even) { transform:rotate(.7deg); }
[data-look='autocollant'] .emc-post-header { background:var(--teinte); margin:0 -14px 12px; padding:10px 14px;
  border-bottom:3px solid #0a0a0a; }
[data-look='autocollant'] .compact-name { font-weight:900; font-size:15px; text-transform:uppercase; color:var(--sur-teinte); }
[data-look='autocollant'] .compact-time { color:var(--sur-teinte); opacity:.75; font-weight:700; }
[data-look='autocollant'] .compact-avatar { border-radius:0; border:2px solid #0a0a0a; }
[data-look='autocollant'] .compact-body { font-weight:600; font-size:clamp(15px,2vw,17px); line-height:1.44; color:#0a0a0a; }
[data-look='autocollant'] .type-badge { background:#0a0a0a; color:#fff; border-radius:0; font-weight:900; }
[data-look='autocollant'] .emc-title-pill { border-radius:0; border:2px solid #0a0a0a; color:#0a0a0a !important; background:#fff; }
/* ⚠️ Ce look ecrit en CAPITALES et en graisse 900 : le meme mot y prend
   environ 15 % de plus qu'ailleurs. Mesure a l'ecran, « MONTRE-MOI COMMENT »
   tombait sur TROIS lignes. Son plancher de colonne est donc plus large que
   celui du socle. ⛔ Ce n'est pas une exception a la regle : c'est la meme
   regle appliquee a une typographie plus large. Les colonnes restent EGALES,
   la grille passe simplement a deux au lieu de quatre. */
[data-look='autocollant'] .emc-reponses { grid-template-columns:repeat(auto-fit,minmax(min(138px,100%),1fr)); }
[data-look='autocollant'] .emc-reponse { border:3px solid #0a0a0a; border-radius:2px; background:#fff; color:#0a0a0a;
  font-weight:900; text-transform:uppercase; font-size:11.5px; letter-spacing:.01em;
  padding:11px 6px; box-shadow:3px 3px 0 #0a0a0a; }
[data-look='autocollant'] .emc-reponse.choisi { background:var(--teinte); color:var(--sur-teinte); box-shadow:1px 1px 0 #0a0a0a; }
/* ⚠️ Sur un telephone, les capitales de ce look poussaient encore les longs
   libelles sur trois lignes. Les capitales sont une coquetterie de grand
   ecran : on les laisse tomber sous 430 px et le libelle tient sur deux
   lignes. ⛔ Ce n'est pas une exception au socle, c'est le look qui s'adapte
   a la place qu'il a. */
@media (max-width:430px) {
  [data-look='autocollant'] .emc-reponse { text-transform:none; font-size:12.5px; letter-spacing:0; }
}
[data-look='autocollant'] .emc-action-bar { border-top:3px dashed #0a0a0a; padding-top:10px; }
[data-look='autocollant'] .emc-action-btn { color:#0a0a0a; }

/* ═════ C · NEON ════════════════════════════════════════════════════════
   Sombre, filet electrique, tres range. ADN pop-art historique. */
[data-look='neon'] { background:#0b0b12; color:#eef0f6; }
[data-look='neon'] .emc-post { background:#15151f; border:1px solid rgba(255,255,255,.08); border-radius:20px;
  padding:0 16px 12px; box-shadow:0 24px 50px -32px var(--teinte), inset 0 1px 0 rgba(255,255,255,.04); }
[data-look='neon'] .emc-post::before { content:''; display:block; height:4px; margin:0 -16px 14px;
  background:linear-gradient(90deg,var(--teinte),transparent 72%); }
[data-look='neon'] .compact-name { font-family:Fraunces,Georgia,serif; font-weight:700; font-size:17px; color:#fff; }
[data-look='neon'] .compact-time { color:rgba(238,240,246,.5); }
[data-look='neon'] .compact-body { font-size:clamp(15px,1.9vw,17px); line-height:1.52; color:#dcdfe9; }
[data-look='neon'] .type-badge { background:rgba(255,255,255,.08); color:var(--teinte); border:1px solid var(--teinte); }
[data-look='neon'] .emc-reponse { border:1px solid rgba(255,255,255,.15); border-radius:999px;
  background:rgba(255,255,255,.045); color:#e7e9f2; font-weight:700; font-size:13px; padding:12px 8px; }
[data-look='neon'] .emc-reponse:hover { border-color:var(--teinte); background:rgba(255,255,255,.08); }
[data-look='neon'] .emc-reponse.choisi { border-color:var(--teinte); color:var(--sur-teinte); background:var(--teinte);
  box-shadow:0 0 26px -6px var(--teinte); }
[data-look='neon'] .emc-action-bar { border-top:1px solid rgba(255,255,255,.08); padding-top:10px; }
[data-look='neon'] .emc-action-btn { color:rgba(238,240,246,.55); }

/* ═════ D · CAHIER ══════════════════════════════════════════════════════
   Page de cahier ligne, marge rouge, ecriture d'ecole. Les reponses sont
   des cases a cocher. Rien a voir avec un fil social : c'est un devoir. */
[data-look='cahier'] { background:#e9e4d4; color:#1f2430; }
[data-look='cahier'] .emc-post { background:#fffdf5; border:1px solid #d8d0ba; border-radius:2px;
  padding:0 16px 12px 34px; position:relative;
  background-image:linear-gradient(#dfe6f0 1px,transparent 1px); background-size:100% 30px;
  background-position:0 44px; box-shadow:0 1px 0 #d8d0ba, 0 10px 24px -20px rgba(0,0,0,.5); }
/* La marge rouge, exactement comme dans un cahier. */
[data-look='cahier'] .emc-post::before { content:''; position:absolute; left:22px; top:0; bottom:0;
  width:2px; background:#e2544c; opacity:.55; }
[data-look='cahier'] .emc-post-header { padding-top:12px; }
[data-look='cahier'] .compact-name { font-family:Fraunces,Georgia,serif; font-weight:700; font-size:17px; color:#1f2430; }
[data-look='cahier'] .compact-time { color:#7c8496; }
[data-look='cahier'] .compact-avatar { border-radius:50%; border:2px solid #fffdf5; box-shadow:0 0 0 1px #c9c0a8; }
[data-look='cahier'] .compact-body { font-size:clamp(15px,2vw,17px); line-height:30px; color:#1f2430; }
[data-look='cahier'] .type-badge { background:var(--teinte); color:var(--sur-teinte); border-radius:2px; font-weight:800; }
[data-look='cahier'] .emc-title-pill { border-radius:2px; }
[data-look='cahier'] .emc-reponse { border:1.5px solid #b9b09a; border-radius:3px; background:#fffdf5; color:#1f2430;
  font-weight:700; padding:11px 8px; position:relative; }
/* ⚠️ DEUX corrections mesurees a l'ecran, dans cet ordre.
   ① Le glyphe « ☐ » change de largeur selon la police installee : c'est une
      BOITE dessinee, pas un caractere.
   ② Meme dessinee, elle etait DANS le flux et volait 19 px au libelle, ce qui
      poussait « Je ne comprends pas » sur TROIS lignes. Elle passe en
      position absolue, dans le coin : le texte reprend toute la largeur.
   ➡️ Un ornement ne doit jamais prendre de la place au contenu. */
[data-look='cahier'] .emc-reponse::before { content:''; position:absolute; top:5px; left:5px;
  width:11px; height:11px; border:1.5px solid #8f877a; border-radius:2px; background:#fff; }
[data-look='cahier'] .emc-reponse.choisi { background:var(--teinte); color:var(--sur-teinte); border-color:var(--teinte-sombre); }
[data-look='cahier'] .emc-reponse.choisi::before { background:var(--sur-teinte); border-color:var(--sur-teinte);
  box-shadow:inset 0 0 0 2px var(--teinte); }
[data-look='cahier'] .emc-action-bar { border-top:1px dashed #c9c0a8; padding-top:10px; }
[data-look='cahier'] .emc-action-btn { color:#7c8496; }

/* ═════ E · ARCADE ══════════════════════════════════════════════════════
   8 bits. Tout est sur une grille de 4 px, bords en escalier, touches en
   relief qui s'enfoncent. Balayage d'ecran par-dessus. */
[data-look='arcade'] { background:#141026; color:#e8e6ff;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px); }
[data-look='arcade'] .emc-post { background:#1e1838; border-radius:0; padding:0 16px 12px;
  /* Le bord en escalier : quatre ombres nettes, aucun flou. */
  box-shadow:0 -4px 0 #0b0818, 0 4px 0 #0b0818, -4px 0 0 #0b0818, 4px 0 0 #0b0818,
             0 8px 0 var(--teinte-sombre); }
[data-look='arcade'] .emc-post::before { content:''; display:block; height:8px; margin:0 -16px 14px;
  background:repeating-linear-gradient(90deg,var(--teinte) 0 8px,transparent 8px 16px); }
[data-look='arcade'] .compact-name { font-family:ui-monospace,'SF Mono',Menlo,monospace; font-weight:700;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--teinte); }
[data-look='arcade'] .compact-time { font-family:ui-monospace,monospace; font-size:11px; color:#8b83c4; }
[data-look='arcade'] .compact-avatar { border-radius:0; box-shadow:0 0 0 3px #0b0818; }
[data-look='arcade'] .compact-body { font-size:clamp(14px,1.9vw,16px); line-height:1.6; color:#e8e6ff; }
[data-look='arcade'] .type-badge { background:var(--teinte); color:var(--sur-teinte); border-radius:0;
  font-family:ui-monospace,monospace; font-weight:700; }
[data-look='arcade'] .emc-title-pill { border-radius:0; font-family:ui-monospace,monospace; }
[data-look='arcade'] .emc-reponse { border:0; border-radius:0; background:#2b2350; color:#e8e6ff;
  font-family:ui-monospace,'SF Mono',Menlo,monospace; font-weight:700; font-size:11.5px;
  letter-spacing:.02em; text-transform:uppercase; padding:11px 6px;
  box-shadow:0 4px 0 #0b0818; transform:translateY(-2px); }
[data-look='arcade'] .emc-reponse:hover { background:#352a63; }
[data-look='arcade'] .emc-reponse.choisi { background:var(--teinte); color:var(--sur-teinte);
  box-shadow:0 2px 0 var(--teinte-sombre); transform:translateY(0); }
[data-look='arcade'] .emc-action-bar { border-top:4px solid #0b0818; padding-top:10px; }
[data-look='arcade'] .emc-action-btn { color:#8b83c4; }

/* ═════ F · RUBAN ═══════════════════════════════════════════════════════
   Le bandeau d'auteur DEBORDE de la carte, a gauche et a droite. La carte
   est blanche et minimale. Les reponses forment UN SEUL bloc segmente :
   la meme grosseur y est structurelle, pas une regle a maintenir. */
[data-look='ruban'] { background:#f7f5f2; color:#1a1a20; }
/* ⚠️ Le ruban a d'abord DEBORDE de la carte (marge negative de 28 px pour
   18 px de rembourrage), et mon banc l'a mesure : 10 px de trop sur les
   quatre cartes. J'aurais pu declarer une exception. ⛔ Une exception
   declaree est une regle qu'on cesse de mesurer : le jour ou le debordement
   devient un vrai defaut, il passe pour l'exception connue.
   ➡️ Le ruban va donc PILE aux bords de la carte, et c'est son ombre portee
   qui lui donne le relief. Zero exception, zero debordement. */
[data-look='ruban'] .emc-post { background:#fff; border:0; border-radius:14px; overflow:clip;
  padding:0 18px 14px; box-shadow:0 2px 4px rgba(0,0,0,.05), 0 18px 40px -30px rgba(0,0,0,.6); }
[data-look='ruban'] .emc-post-header { background:var(--teinte); color:var(--sur-teinte);
  margin:0 -18px 16px; padding:13px 18px;
  box-shadow:0 8px 18px -10px var(--teinte-sombre); }
[data-look='ruban'] .compact-name { font-weight:800; font-size:16px; color:var(--sur-teinte); }
[data-look='ruban'] .compact-time { color:var(--sur-teinte); opacity:.72; }
[data-look='ruban'] .compact-avatar { border-radius:50%; box-shadow:0 0 0 2px var(--sur-teinte); }
[data-look='ruban'] .compact-body { font-size:clamp(15px,2vw,17px); line-height:1.5; color:#1a1a20; }
[data-look='ruban'] .type-badge { background:var(--sur-teinte); color:var(--teinte); border-radius:999px; font-weight:800; }
/* Le bloc segmente : aucun ecart, un seul contour, des cloisons internes. */
[data-look='ruban'] .emc-reponses { gap:0; border:1.5px solid #dcd8d2; border-radius:11px; overflow:clip; background:#fff; }
[data-look='ruban'] .emc-reponse { border:0; border-radius:0; background:#fff; color:#1a1a20;
  font-weight:700; font-size:12.5px; padding:12px 6px; box-shadow:inset -1px 0 0 #dcd8d2; }
[data-look='ruban'] .emc-reponse:last-child { box-shadow:none; }
[data-look='ruban'] .emc-reponse:hover { background:#f7f5f2; }
[data-look='ruban'] .emc-reponse.choisi { background:var(--teinte); color:var(--sur-teinte); box-shadow:none; }
[data-look='ruban'] .emc-action-bar { border-top:1px solid #eeebe7; padding-top:10px; }
[data-look='ruban'] .emc-action-btn { color:#8a8a96; }

/* ─── Le sélecteur de look ──────────────────────────────────────────
   ⛔ Un look fermé reste VISIBLE et dit à quel niveau il s'ouvre. Le
   cacher priverait l'enfant de la raison d'y aller. */

.emc-looks {
  margin-top: 16px;
  padding: 16px;
  background: var(--emc-bg-card);
  border: 1px solid var(--emc-border);
  border-radius: var(--emc-radius);
}

.emc-looks-titre {
  font-size: 14px;
  font-weight: 800;
  color: var(--emc-text-strong);
  margin-bottom: 12px;
}

.emc-looks-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(104px, 100%), 1fr));
  gap: 10px;
}

.emc-look {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  background: var(--emc-bg-input);
  border: 2px solid var(--emc-border);
  border-radius: var(--emc-radius-sm);
  color: var(--emc-text);
  font-family: var(--emc-font);
  cursor: pointer;
  transition: all var(--emc-transition);
}

.emc-look:hover:not(:disabled) {
  border-color: var(--emc-accent);
}

.emc-look.actif {
  border-color: var(--emc-accent);
  box-shadow: 0 0 0 3px var(--emc-bg-hover);
}

.emc-look:focus-visible {
  outline: 2px solid var(--emc-accent);
  outline-offset: 2px;
}

/* ⛔ Fermé : estompé, mais LISIBLE. `opacity: .35` rendrait le nom du
   niveau illisible, or c'est exactement l'information qui compte. */
.emc-look.ferme {
  opacity: 0.72;
  cursor: default;
}

/* La vignette : un aperçu du look, en trois bandes. Pas une capture, donc
   rien à régénérer quand un look change. */
.emc-look-vignette {
  display: block;
  height: 40px;
  border-radius: 4px;
  background: linear-gradient(180deg, #d7d7d2 0 34%, #fff 34% 100%);
  border: 1px solid var(--emc-border);
}
.emc-look-vignette[data-look='defaut'] { background: linear-gradient(180deg, #ff2d87 0 46%, #fff 46% 100%); }
.emc-look-vignette[data-look='ruban'] { background: linear-gradient(180deg, #a855f7 0 30%, #fff 30% 100%); }
.emc-look-vignette[data-look='neon'] { background: linear-gradient(180deg, #00e5ff 0 8%, #15151f 8% 100%); }
.emc-look-vignette[data-look='bloc'] { background: linear-gradient(180deg, #ffd400 0 26%, #fff 26% 100%); border-color: #14141a; border-width: 2px; border-radius: 0; }
.emc-look-vignette[data-look='cahier'] { background: repeating-linear-gradient(180deg, #fffdf5 0 9px, #dfe6f0 9px 10px); }
.emc-look-vignette[data-look='arcade'] { background: repeating-linear-gradient(90deg, #2ecc71 0 8px, #1e1838 8px 16px); border-radius: 0; }
.emc-look-vignette[data-look='autocollant'] { background: linear-gradient(180deg, #ff2d87 0 34%, #fff 34% 100%); border: 2px solid #0a0a0a; border-radius: 2px; }

.emc-look-nom {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.emc-look-niveau {
  font-size: 11px;
  font-weight: 700;
  color: var(--emc-text-muted);
}

.emc-look-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--emc-text-muted);
}