/* J2P Pro Circuit — Compiled CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

:root {
  --court:   #0B1D2E;
  --net:     #1A3A5C;
  --line:    #234E7A;
  --ace:     #00C2FF;
  --fault:   #FF4D4D;
  --warning: #F5A623;
  --green:   #22C55E;
  --chalk:   #F0F4F8;
  --muted:   #8BA3BE;
  --surface: #0F2540;
  --font:    'Inter', system-ui, sans-serif;
}

#j2p-pro-circuit-root {
  font-family: var(--font);
  background: var(--court);
  color: var(--chalk);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  display: block !important;
  width: 100% !important;
}

/* ── Scrollbar ── */
#j2p-pro-circuit-root ::-webkit-scrollbar { width: 6px; }
#j2p-pro-circuit-root ::-webkit-scrollbar-track { background: var(--court); }
#j2p-pro-circuit-root ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9999px; }

/* ── Animations ── */
@keyframes fadeIn  { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp { from { opacity:0; transform:translateY(16px) } to { opacity:1; transform:translateY(0) } }
@keyframes spin    { to { transform: rotate(360deg) } }
@keyframes bounce  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes pulseAce{ 0%,100%{opacity:1} 50%{opacity:.4} }

.j2p-fade-in  { animation: fadeIn  .3s ease-out; }
.j2p-slide-up { animation: slideUp .4s cubic-bezier(.16,1,.3,1); }

/* ── Base components ── */
.j2p-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}
.j2p-card-sm { padding: 16px; }

.j2p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 600; font-size: 14px;
  padding: 12px 24px; border-radius: 12px; border: none; cursor: pointer;
  transition: all .15s; text-decoration: none;
}
.j2p-btn:disabled { opacity: .4; cursor: not-allowed; }
.j2p-btn-primary { background: var(--ace); color: var(--court); }
.j2p-btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.j2p-btn-primary:active:not(:disabled) { transform: scale(.97); }
.j2p-btn-ghost {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
}
.j2p-btn-ghost:hover { border-color: var(--ace); color: var(--ace); }
.j2p-btn-sm { padding: 8px 16px; font-size: 13px; border-radius: 10px; }
.j2p-btn-full { width: 100%; }

.j2p-input {
  width: 100%; height: 44px;
  background: #111d2e; border: 1px solid #29354a;
  color: var(--chalk); border-radius: 8px;
  padding: 0 14px;
  font-size: 13px; font-family: var(--font); outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.j2p-input:focus { border-color: var(--ace); box-shadow: 0 0 0 2px rgba(0,194,255,.15); }
.j2p-input::placeholder { color: var(--muted); }
.j2p-input:focus { border-color: var(--ace); box-shadow: 0 0 0 1px var(--ace); }

.j2p-label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}

.j2p-select {
  width: 100%; height: 44px;
  background: #111d2e; border: 1px solid #29354a;
  color: var(--chalk); border-radius: 8px;
  padding: 0 14px;
  font-size: 13px; font-family: var(--font); outline: none;
  -webkit-appearance: none; cursor: pointer; box-sizing: border-box;
}
.j2p-select:focus { border-color: var(--ace); box-shadow: 0 0 0 2px rgba(0,194,255,.15); }

/* ── Badges ── */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 9999px;
  font-size: 11px; font-weight: 700; border: 1px solid;
}
.badge-green   { background: rgba(34,197,94,.1);  color: var(--green);   border-color: rgba(34,197,94,.3); }
.badge-yellow  { background: rgba(245,166,35,.1); color: var(--warning); border-color: rgba(245,166,35,.3); }
.badge-red     { background: rgba(255,77,77,.1);  color: var(--fault);   border-color: rgba(255,77,77,.3); }
.badge-blue    { background: rgba(0,194,255,.1);  color: var(--ace);     border-color: rgba(0,194,255,.3); }

/* ── Alert box ── */
.j2p-alert-error {
  background: rgba(255,77,77,.1); border: 1px solid rgba(255,77,77,.3);
  color: var(--fault); border-radius: 12px; padding: 12px 16px;
  font-size: 14px; animation: fadeIn .2s;
}

/* ── Loading screen ── */
.j2p-loading {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--court); flex-direction: column; gap: 16px;
}
.j2p-logo-pulse {
  width: 48px; height: 48px; border-radius: 12px; background: var(--ace);
  display: flex; align-items: center; justify-content: center;
  animation: pulseAce 1.5s ease-in-out infinite;
  font-weight: 900; color: var(--court); font-size: 12px;
}
.j2p-dots { display: flex; gap: 4px; }
.j2p-dot {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(0,194,255,.6);
  animation: bounce .9s ease-in-out infinite;
}
.j2p-dot:nth-child(2) { animation-delay: .15s; }
.j2p-dot:nth-child(3) { animation-delay: .30s; }

/* ── Login layout ── */
.j2p-login-wrap {
  min-height: 100vh; display: flex;
}
.j2p-login-left {
  display: none; flex: 1; position: relative; overflow: hidden;
  background: var(--court);
}
@media (min-width: 1024px) { .j2p-login-left { display: flex; flex-direction: column; justify-content: space-between; padding: 48px; } }
.j2p-login-right {
  width: 100%; display: flex; align-items: center; justify-content: center; padding: 24px;
}
@media (min-width: 1024px) { .j2p-login-right { width: 50%; padding: 48px; } }
.j2p-login-form { width: 100%; max-width: 360px; }
.j2p-court-bg { position: absolute; inset: 0; opacity: .05; }
.j2p-hero-tag { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ace); }
.j2p-hero-title { font-size: 48px; font-weight: 900; line-height: 1.1; color: var(--chalk); margin: 16px 0; }
.j2p-hero-title span { color: var(--ace); }
.j2p-hero-sub { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 360px; }
.j2p-stats-strip { display: flex; gap: 32px; }
.j2p-stat-val { font-size: 24px; font-weight: 900; color: var(--ace); }
.j2p-stat-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Logo ── */
.j2p-logo { display: flex; align-items: center; gap: 10px; }
.j2p-logo-badge {
  width: 36px; height: 36px; border-radius: 10px; background: var(--ace);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: var(--court); font-size: 11px; flex-shrink: 0;
}
.j2p-logo-text { font-weight: 700; color: var(--chalk); font-size: 15px; line-height: 1.2; }
.j2p-logo-sub  { font-size: 10px; color: var(--muted); }

/* ── Password toggle ── */
.j2p-pass-wrap { position: relative; }
.j2p-pass-wrap .j2p-input { padding-right: 48px; }
.j2p-pass-toggle {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer;
  display: flex; align-items: center;
}
.j2p-pass-toggle:hover { color: var(--chalk); }

/* ── Step bar ── */
.j2p-steps { display: flex; gap: 6px; margin-bottom: 28px; }
.j2p-step  { height: 4px; flex: 1; border-radius: 9999px; background: var(--line); transition: background .3s; }
.j2p-step.active { background: var(--ace); }

/* ── Role cards ── */
.j2p-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.j2p-role-card {
  display: block !important;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; cursor: pointer; text-align: left; transition: all .15s;
  font-family: var(--font);
  text-transform: none; letter-spacing: normal;
}
.j2p-role-card:hover  { border-color: rgba(0,194,255,.5); }
.j2p-role-card.selected { border-color: var(--ace); background: rgba(0,194,255,.05); }
.j2p-role-card h4 { font-size: 14px; font-weight: 600; color: var(--chalk); }
.j2p-role-card p  { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── Grid helpers ── */
.j2p-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.j2p-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.j2p-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 768px) {
  .j2p-grid-3, .j2p-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .j2p-grid-2, .j2p-grid-3, .j2p-grid-4 { grid-template-columns: 1fr; }
}

/* ── App shell ── */
.j2p-shell { display: flex; min-height: 100vh; }
.j2p-sidebar {
  width: 256px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
}
@media (max-width: 1023px) { .j2p-sidebar { display: none; } }
.j2p-sidebar.mobile-open {
  display: flex; position: fixed; width: 280px;
}
.j2p-sidebar-logo { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.j2p-sidebar-nav { flex: 1; overflow-y: auto; padding: 12px; }
.j2p-nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 12px; text-decoration: none; color: var(--muted);
  font-size: 14px; font-weight: 500; transition: all .15s; cursor: pointer;
  border: none; background: none; font-family: var(--font); width: 100%;
}
.j2p-nav-item:hover  { color: var(--chalk); background: var(--net); }
.j2p-nav-item.active { color: var(--ace);   background: rgba(0,194,255,.1); }
.j2p-nav-item svg { flex-shrink: 0; }
.j2p-nav-label { flex: 1; text-align: left; }
.j2p-sidebar-user { padding: 12px; border-top: 1px solid var(--line); }
.j2p-user-card { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.j2p-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,194,255,.2); border: 1px solid rgba(0,194,255,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--ace); flex-shrink: 0;
}
.j2p-avatar-lg { width: 48px; height: 48px; font-size: 16px; border-radius: 12px; }
.j2p-user-name { font-size: 12px; font-weight: 600; color: var(--chalk); }
.j2p-user-role { font-size: 10px; color: var(--muted); text-transform: capitalize; }
.j2p-logout-btn { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: flex; }
.j2p-logout-btn:hover { color: var(--fault); }

/* ── Topbar ── */
.j2p-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 1024px) { .j2p-main { margin-left: 256px; } }
.j2p-topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(15,37,64,.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 0 24px; height: 56px;
}
.j2p-menu-btn { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: flex; }
@media (min-width: 1024px) { .j2p-menu-btn { display: none; } }
.j2p-topbar-spacer { flex: 1; }
.j2p-bell-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 4px; display: flex; position: relative;
}
.j2p-bell-btn:hover { color: var(--chalk); }
.j2p-bell-dot {
  position: absolute; top: 1px; right: 1px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--ace);
}
.j2p-page { flex: 1; padding: 24px; }
@media (min-width: 1024px) { .j2p-page { padding: 32px; } }

/* ── Mobile overlay ── */
.j2p-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 39;
}

/* ── Dashboard ── */
.j2p-dash-header { margin-bottom: 28px; }
.j2p-dash-date { font-size: 13px; color: var(--muted); }
.j2p-dash-title { font-size: 26px; font-weight: 800; color: var(--chalk); margin: 4px 0; }
.j2p-dash-title span { color: var(--ace); }
.j2p-dash-sub { font-size: 13px; color: var(--muted); text-transform: capitalize; }

.j2p-readiness-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  margin-bottom: 24px;
}
.j2p-readiness-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3);
  display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
}
.j2p-readiness-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.j2p-readiness-title { font-size: 17px; font-weight: 700; color: var(--chalk); margin: 2px 0; }
.j2p-readiness-sub   { font-size: 12px; color: var(--muted); }
.j2p-readiness-action { margin-left: auto; }

.j2p-stat-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-bottom: 24px; }
@media (min-width: 1024px) { .j2p-stat-cards { grid-template-columns: repeat(4,1fr); } }
.j2p-stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.j2p-stat-num { font-size: 28px; font-weight: 900; color: var(--chalk); margin: 12px 0 4px; }
.j2p-stat-lbl { font-size: 12px; color: var(--muted); }

.j2p-module-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media (min-width: 1024px) { .j2p-module-grid { grid-template-columns: repeat(3,1fr); } }
.j2p-module-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; cursor: pointer; text-decoration: none; display: block;
  transition: all .15s;
}
.j2p-module-card:hover { border-color: rgba(0,194,255,.5); background: rgba(0,194,255,.03); }
.j2p-module-card h3 { font-size: 14px; font-weight: 600; color: var(--chalk); margin: 12px 0 4px; }
.j2p-module-card:hover h3 { color: var(--ace); }
.j2p-module-card p  { font-size: 12px; color: var(--muted); }

/* ── Section heading ── */
.j2p-section-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 14px; }

/* ── Phase notice ── */
.j2p-phase-notice {
  border: 1px dashed rgba(0,194,255,.25); background: rgba(0,194,255,.03);
  border-radius: 16px; padding: 32px; text-align: center; margin-top: 24px;
}
.j2p-phase-notice h4 { font-size: 14px; font-weight: 600; color: var(--ace); margin-bottom: 6px; }
.j2p-phase-notice p  { font-size: 12px; color: var(--muted); }

/* ── Success screen ── */
.j2p-success {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.j2p-success-card { max-width: 400px; width: 100%; text-align: center; }
.j2p-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; font-size: 28px;
}

/* ── Utility ── */
.j2p-link { color: var(--ace); text-decoration: none; }
.j2p-link:hover { text-decoration: underline; }
.j2p-text-center { text-align: center; }
.j2p-text-muted  { color: var(--muted); font-size: 13px; }
.j2p-mt-4  { margin-top: 16px; }
.j2p-mt-6  { margin-top: 24px; }
.j2p-mt-8  { margin-top: 32px; }
.j2p-mb-4  { margin-bottom: 16px; }
.j2p-mb-6  { margin-bottom: 24px; }
.j2p-gap-4 { gap: 16px; }
.j2p-flex  { display: flex; align-items: center; }
.j2p-flex-between { display: flex; align-items: center; justify-content: space-between; }
.j2p-space-y > * + * { margin-top: 16px; }
.j2p-space-y-sm > * + * { margin-top: 12px; }
.j2p-divider { border: none; border-top: 1px solid var(--line); margin: 28px 0; }
.j2p-spin { animation: spin 1s linear infinite; display: inline-block; }

/* ── Placeholder page ── */
.j2p-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60vh; gap: 16px;
}
.j2p-placeholder-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,194,255,.1); border: 1px solid rgba(0,194,255,.3);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}

/* ── Summary box ── */
.j2p-summary { background: rgba(26,58,92,.5); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.j2p-summary p { font-size: 13px; color: var(--muted); line-height: 1.8; }
.j2p-summary p strong { color: var(--chalk); }

/* ── Invite banner ── */
.j2p-invite-banner {
  background: rgba(0,194,255,.1); border-bottom: 1px solid rgba(0,194,255,.2);
  padding: 12px 24px; text-align: center;
  font-size: 14px; font-weight: 500; color: var(--ace);
}

/* Hide WP page title on app page */
.entry-title, .page-title, h1.title, .wp-block-post-title { display: none !important; }

/* ── Date input: dark bg + hide native icon ── */
input[type="date"].j2p-input {
  background: #111d2e; color: var(--chalk);
  font-family: var(--font); font-size: 13px;
  -webkit-appearance: none; appearance: none;
}
input[type="date"].j2p-input::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(.4);
  cursor: pointer; opacity: .5;
}
input[type="date"].j2p-input::-webkit-inner-spin-button,
input[type="date"].j2p-input::-webkit-clear-button { display: none; }

/* ── Modal uniform btn height ── */
.j2p-modal-actions .j2p-btn { height: 44px; padding: 0 20px; border-radius: 8px; font-size: 13px; }

/* ── Email input: force dark bg — browser default overrides generic selector ── */
input[type="email"].j2p-input,
input[type="email"].j2p-input:not(:placeholder-shown),
input[type="email"].j2p-input:-webkit-autofill,
input[type="email"].j2p-input:-webkit-autofill:hover,
input[type="email"].j2p-input:-webkit-autofill:focus {
  background: #111d2e !important;
  background-color: #111d2e !important;
  -webkit-box-shadow: 0 0 0 1000px #111d2e inset !important;
  box-shadow: 0 0 0 1000px #111d2e inset !important;
  -webkit-text-fill-color: var(--chalk) !important;
  color: var(--chalk) !important;
  border-color: #29354a !important;
  caret-color: var(--chalk);
}

/* ============================================================
   MOBILE RESPONSIVE LAYER — J2P 360°
   Rattrape les écrans construits en style:{} inline (app.js).
   100% CSS, aucune logique modifiée. Cible ~360–414px (Redmi & co).
   ============================================================ */

/* — Universel : stoppe le débordement horizontal et le texte vertical — */
#j2p-pro-circuit-root { overflow-x: hidden; max-width: 100%; }
#j2p-pro-circuit-root *,
#j2p-pro-circuit-root *::before,
#j2p-pro-circuit-root *::after { min-width: 0; }
#j2p-pro-circuit-root p,
#j2p-pro-circuit-root a,
#j2p-pro-circuit-root span,
#j2p-pro-circuit-root h1,
#j2p-pro-circuit-root h2,
#j2p-pro-circuit-root h3,
#j2p-pro-circuit-root h4,
#j2p-pro-circuit-root label,
#j2p-pro-circuit-root div { overflow-wrap: anywhere; }
#j2p-pro-circuit-root img { max-width: 100%; height: auto; }

@media (max-width: 640px) {

  /* — Grilles inline 3 et 4 colonnes -> 2 colonnes (stats, profil, RPE…) — */
  #j2p-pro-circuit-root [style*="grid-template-columns: 1fr 1fr 1fr"],
  #j2p-pro-circuit-root [style*="grid-template-columns: repeat(3"],
  #j2p-pro-circuit-root [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* colonnes "span 2" -> pleine largeur */
  #j2p-pro-circuit-root [style*="grid-column: span 2"] {
    grid-column: 1 / -1 !important;
  }

  /* — Messages : empile la liste de contacts au-dessus de la conversation — */
  #j2p-pro-circuit-root [style*="height: calc(100vh - 120px)"] > [style*="display: flex"] {
    flex-direction: column !important;
  }
  #j2p-pro-circuit-root [style*="width: 260px"] {
    width: 100% !important;
    flex-shrink: 1 !important;
    max-height: 38vh !important;
  }

  /* — Titres surdimensionnés ramenés à une taille lisible — */
  #j2p-pro-circuit-root h1 { font-size: 22px !important; line-height: 1.15 !important; }
  #j2p-pro-circuit-root .j2p-dash-title { font-size: 22px !important; }

  /* — Marges intérieures resserrées (pages, cartes, modales) — */
  #j2p-pro-circuit-root .j2p-page     { padding: 16px !important; }
  #j2p-pro-circuit-root .j2p-card     { padding: 16px !important; }
  #j2p-pro-circuit-root .j2p-slide-up { padding: 18px !important; }
}

/* — Calendriers : grille sur ordinateur, agenda lisible sur mobile — */
#j2p-pro-circuit-root .j2p-cal-agenda { display: none; }
@media (max-width: 640px) {
  #j2p-pro-circuit-root .j2p-cal-grid   { display: none !important; }
  #j2p-pro-circuit-root .j2p-cal-agenda { display: block !important; }
}

/* — Messages : sur mobile, fil sous la liste de contacts (classes fiables) — */
@media (max-width: 640px) {
  #j2p-pro-circuit-root .j2p-msg-row     { flex-direction: column !important; }
  #j2p-pro-circuit-root .j2p-msg-sidebar { width: 100% !important; flex-shrink: 0 !important; max-height: 34vh !important; }
  #j2p-pro-circuit-root .j2p-msg-thread  { width: 100% !important; min-height: 60vh !important; }
}

/* — Modale ajout session : Baseline Vision en 2x2 sur mobile — */
@media (max-width: 640px) {
  #j2p-pro-circuit-root .j2p-bv-modes { flex-wrap: wrap !important; }
  #j2p-pro-circuit-root .j2p-bv-modes > button { flex: 1 1 calc(50% - 3px) !important; }
}

/* — Modale : sélecteurs d'options (lieu, spécialiste, clearance) en 2 colonnes sur mobile, mots entiers — */
@media (max-width: 640px) {
  #j2p-pro-circuit-root .j2p-seg { flex-wrap: wrap !important; }
  #j2p-pro-circuit-root .j2p-seg > button {
    flex: 1 1 calc(50% - 4px) !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.3 !important;
  }
}

/* — Rapport : boutons d'action (PDF / Envoi) en pleine largeur empilée sur mobile — */
@media (max-width: 640px) {
  #j2p-pro-circuit-root .j2p-report-actions {
    width: 100% !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
  }
  #j2p-pro-circuit-root .j2p-report-actions > * { flex: 1 1 100% !important; }
  /* Le bouton Send est imbriqué dans un wrapper position:relative — l'étirer aussi */
  #j2p-pro-circuit-root .j2p-report-actions > * > button { width: 100% !important; }
}

/* — Croix de fermeture des modales : visible + zone de clic accessible — */
#j2p-pro-circuit-root .j2p-modal-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 9999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: var(--chalk) !important;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
  transition: background .15s, color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
#j2p-pro-circuit-root .j2p-modal-close:hover {
  background: rgba(0,194,255,.14);
  border-color: var(--ace);
  color: var(--ace) !important;
}
#j2p-pro-circuit-root .j2p-modal-close:active { background: rgba(0,194,255,.24); }
@media (max-width: 640px) {
  #j2p-pro-circuit-root .j2p-modal-close { width: 40px; height: 40px; min-width: 40px !important; }
}

/* — Champs : forcer le fond sombre sur tous les inputs (autofill Chrome inclus) — */
#j2p-pro-circuit-root input.j2p-input,
#j2p-pro-circuit-root textarea.j2p-input {
  background: #111d2e !important;
  color: var(--chalk) !important;
}
#j2p-pro-circuit-root input.j2p-input:-webkit-autofill,
#j2p-pro-circuit-root input.j2p-input:-webkit-autofill:hover,
#j2p-pro-circuit-root input.j2p-input:-webkit-autofill:focus,
#j2p-pro-circuit-root input.j2p-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #111d2e inset !important;
  box-shadow: 0 0 0 1000px #111d2e inset !important;
  -webkit-text-fill-color: var(--chalk) !important;
  caret-color: var(--chalk);
  border-color: #29354a !important;
}

/* — En-têtes de page (Tournaments, Medical…) : titre au-dessus des boutons sur mobile — */
@media (max-width: 640px) {
  #j2p-pro-circuit-root .j2p-page-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  /* Carte objectif : badges + titre en haut, actions en dessous */
  #j2p-pro-circuit-root .j2p-goal-head { flex-direction: column !important; gap: 10px !important; }
  #j2p-pro-circuit-root .j2p-goal-badges { flex-wrap: wrap !important; }
}

/* — Barre d'onglets soulignés (Settings) : compacte + scroll horizontal au besoin — */
@media (max-width: 640px) {
  #j2p-pro-circuit-root .j2p-tabbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #j2p-pro-circuit-root .j2p-tabbar::-webkit-scrollbar { display: none; }
  #j2p-pro-circuit-root .j2p-tabbar > button {
    white-space: nowrap; flex-shrink: 0;
    padding-left: 12px !important; padding-right: 12px !important;
    font-size: 13px !important;
  }
}

/* — Boutons : neutraliser le sur-espacement (hérité du thème) sur mobile — */
@media (max-width: 640px) {
  #j2p-pro-circuit-root button { letter-spacing: normal !important; }
}

/* — Daily breakdown : tableau (desktop) → cartes empilées (mobile) — */
#j2p-pro-circuit-root .j2p-daily-cards { display: none; }
@media (max-width: 640px) {
  #j2p-pro-circuit-root .j2p-daily-table { display: none; }
  #j2p-pro-circuit-root .j2p-daily-cards { display: block; }
}

/* — Boutons : autoriser le rétrécissement en flex —
   Le thème impose un min-width aux <button>, ce qui fait déborder les barres
   de notation à 5 segments (le 5/5 partait hors écran, non cliquable). */
#j2p-pro-circuit-root button { min-width: 0 !important; }

/* — Login : panneau de marque visible aussi sur mobile (version compacte, empilée au-dessus du formulaire) — */
@media (max-width: 1023px) {
  .j2p-login-wrap { flex-direction: column; }
  .j2p-login-left {
    flex: none;
    display: flex; flex-direction: column; gap: 16px;
    padding: 30px 24px 24px;
    border-bottom: 1px solid var(--line);
  }
  .j2p-login-left h1 { font-size: 30px !important; margin: 0 0 10px !important; }
  .j2p-login-left p  { font-size: 14px !important; max-width: none !important; line-height: 1.5 !important; }
  .j2p-login-left .j2p-logo { margin-bottom: 4px !important; }
  .j2p-login-left .j2p-stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .j2p-login-left .j2p-stat-val { font-size: 20px; }
  .j2p-login-left .j2p-stat-lbl { font-size: 10px; }
  .j2p-login-right { padding: 28px 24px 36px; }
}

/* — Calendrier tournois : Prev / mois / Next sur une ligne pleine sur mobile — */
@media (max-width: 640px) {
  #j2p-pro-circuit-root .j2p-cal-nav { flex-basis: 100%; }
}

/* ── Bottom navigation (mobile) — accès direct aux sections quotidiennes ── */
.j2p-bottomnav { display: none; }
@media (max-width: 1023px) {
  .j2p-bottomnav {
    display: flex; align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(11,29,46,.97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 6px 4px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  .j2p-bottomnav-item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer; padding: 6px 2px;
    color: var(--muted); font-family: var(--font); font-size: 10px; font-weight: 600;
    text-transform: none; letter-spacing: normal; position: relative;
  }
  .j2p-bottomnav-item.active { color: var(--ace); }
  .j2p-bottomnav-item.active::before {
    content: ""; position: absolute; top: 0; width: 26px; height: 3px;
    border-radius: 0 0 4px 4px; background: var(--ace);
  }
  .j2p-bottomnav-label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Laisser respirer le contenu au-dessus de la barre */
  .j2p-main .j2p-page { padding-bottom: 84px !important; }
}
@media (min-width: 1024px) { .j2p-bottomnav { display: none !important; } }

/* — Pastille d'alerte sur un onglet de la bottom nav — */
.j2p-bottomnav-dot {
  position: absolute; top: 4px; left: calc(50% + 5px);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fault); box-shadow: 0 0 0 2px rgba(11,29,46,1);
}