/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   Socle de design commun des pages du site (01/10/2026).
   Chargé APRÈS Bootstrap et app.css. Avant : chaque page avait son propre style (titres nus, boutons bleus
   Bootstrap, filtres empilés) — rien n'était harmonisé.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
    --nt-grad: linear-gradient(135deg, #6d28d9 0%, #9333ea 55%, #db2777 100%);
    --nt-tint: linear-gradient(135deg, #faf5ff 0%, #fdf2f8 100%);
    --nt-ink: #1f1235;
    --nt-muted: #6b7280;
    --nt-line: #ece8f5;
    --nt-violet: #6d28d9;
    --nt-radius: 18px;
    --nt-shadow: 0 2px 12px rgba(31, 18, 53, .06);
}

/* ── Boutons : la couleur de la marque partout (plus de bleu Bootstrap) ── */
.btn-primary, .btn-primary:visited {
    --bs-btn-bg: #7c3aed; --bs-btn-border-color: #7c3aed; --bs-btn-hover-bg: #6d28d9; --bs-btn-hover-border-color: #6d28d9;
    --bs-btn-active-bg: #5b21b6; --bs-btn-active-border-color: #5b21b6; --bs-btn-disabled-bg: #a78bfa; --bs-btn-disabled-border-color: #a78bfa;
    background: var(--nt-grad); border: 0; font-weight: 700; border-radius: 12px; box-shadow: 0 6px 16px rgba(124, 58, 237, .22);
}
.btn-primary:hover, .btn-primary:focus { background: var(--nt-grad); filter: brightness(1.06); }
.btn-outline-primary {
    --bs-btn-color: #6d28d9; --bs-btn-border-color: #c4b5fd; --bs-btn-hover-bg: #f5f3ff; --bs-btn-hover-color: #5b21b6;
    --bs-btn-hover-border-color: #a78bfa; --bs-btn-active-bg: #ede9fe; --bs-btn-active-color: #5b21b6; --bs-btn-active-border-color: #a78bfa;
    border-radius: 12px; font-weight: 700;
}
.btn-light, .btn-outline-secondary { border-radius: 12px; font-weight: 600; }
.form-control:focus, .form-select:focus { border-color: #a78bfa; box-shadow: 0 0 0 .25rem rgba(124, 58, 237, .15); }
.form-control, .form-select { border-radius: 12px; border-color: var(--nt-line); }

/* ── Bandeau de titre de page ── */
.nt-page { max-width: 1100px; margin: 0 auto; padding: 16px 16px 40px; }
.nt-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 20px 22px; border-radius: 22px; background: var(--nt-grad); color: #fff; box-shadow: 0 14px 34px rgba(76, 29, 149, .22); margin-bottom: 16px; }
.nt-hero-icon { width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .18); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; flex: 0 0 auto; }
.nt-hero-text { flex: 1 1 220px; min-width: 0; }
.nt-hero h1 { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.3px; color: #fff; }
.nt-hero p { margin: 3px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.nt-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nt-hero-actions .btn { background: #fff; color: #6d28d9; border: 0; border-radius: 12px; font-weight: 700; box-shadow: none; }
.nt-hero-actions .btn.btn-ghost { background: rgba(255, 255, 255, .18); color: #fff; }
.nt-back { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .18); color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex: 0 0 auto; }
.nt-back:hover { color: #fff; background: rgba(255, 255, 255, .28); }

/* ── Chiffres clés ── */
.nt-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.nt-kpi { background: #fff; border: 1px solid var(--nt-line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--nt-shadow); }
.nt-kpi b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--nt-ink); line-height: 1.1; }
.nt-kpi span { font-size: .78rem; color: var(--nt-muted); }
.nt-kpi i { float: right; font-size: 1.2rem; color: #a78bfa; }

/* ── Barre de recherche et filtres (une seule ligne, plus de listes déroulantes empilées) ── */
.nt-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.nt-search { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--nt-line); border-radius: 14px; padding: 0 12px; }
.nt-search i { color: #9ca3af; }
.nt-search input { flex: 1; border: 0; outline: none; height: 44px; font-size: 16px; background: transparent; min-width: 0; }
.nt-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.nt-chips::-webkit-scrollbar { display: none; }
.nt-chip { flex: 0 0 auto; border: 1.5px solid var(--nt-line); background: #fff; color: #4b5563; border-radius: 999px; padding: 7px 14px; font-size: .84rem; font-weight: 600; white-space: nowrap; }
.nt-chip.active { background: #6d28d9; border-color: #6d28d9; color: #fff; }
.nt-chip .count { margin-left: 4px; opacity: .75; }

/* ── Listes en cartes ── */
.nt-list { display: flex; flex-direction: column; gap: 10px; }
.nt-card { background: #fff; border: 1px solid var(--nt-line); border-radius: var(--nt-radius); box-shadow: var(--nt-shadow); overflow: hidden; }
.nt-row { display: flex; gap: 14px; padding: 14px; align-items: center; }
.nt-thumb { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; background: var(--nt-tint); display: inline-flex; align-items: center; justify-content: center; color: #a78bfa; font-size: 1.4rem; }
.nt-main { flex: 1 1 auto; min-width: 0; }
.nt-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--nt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-sub { margin-top: 3px; font-size: .82rem; color: var(--nt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-side { text-align: right; flex: 0 0 auto; }
.nt-amount { display: block; font-weight: 800; color: var(--nt-violet); }
.nt-pill { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.nt-pill.ok { background: #dcfce7; color: #15803d; }
.nt-pill.warn { background: #fef3c7; color: #b45309; }
.nt-pill.off { background: #f3f4f6; color: #6b7280; }
.nt-pill.bad { background: #fee2e2; color: #b91c1c; }
.nt-actions { display: flex; border-top: 1px solid #f3f1f8; }
.nt-actions > a, .nt-actions > button { flex: 1; padding: 11px 6px; text-align: center; font-size: .82rem; font-weight: 700; color: #6d28d9; background: none; border: 0; text-decoration: none; }
.nt-actions > * + * { border-left: 1px solid #f3f1f8; }
.nt-actions > a:hover, .nt-actions > button:hover { background: #faf7ff; }
.nt-bar { height: 6px; border-radius: 99px; background: #f1eef8; overflow: hidden; }
.nt-bar > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7c3aed, #db2777); }

/* ── États vides, encadré d'info, pagination ── */
.nt-empty { text-align: center; padding: 44px 20px; background: #fff; border: 1px dashed #ddd6fe; border-radius: var(--nt-radius); }
.nt-empty i { font-size: 2.2rem; color: #c4b5fd; }
.nt-empty h3 { margin: 10px 0 4px; font-size: 1.05rem; font-weight: 800; color: var(--nt-ink); }
.nt-empty p { color: var(--nt-muted); margin-bottom: 14px; }
.nt-note { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--nt-tint); color: #4c1d95; font-size: .88rem; margin-bottom: 12px; text-decoration: none; }
.nt-note b { color: #6d28d9; }
.nt-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0 4px; }
.nt-pager button { border: 1.5px solid #ddd6fe; background: #fff; color: #6d28d9; font-weight: 700; border-radius: 12px; padding: 8px 14px; }
.nt-pager button:disabled { opacity: .4; }
.nt-pager span { font-size: .85rem; color: var(--nt-muted); font-weight: 600; }

/* ── Formulaires en sections (création d'événement, de formation) ── */
.nt-form-section { background: #fff; border: 1px solid var(--nt-line); border-radius: var(--nt-radius); box-shadow: var(--nt-shadow); padding: 18px; margin-bottom: 14px; }
.nt-form-section > h2, .nt-form-section > h3 { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800; color: var(--nt-ink); margin: 0 0 14px; }
.nt-step { width: 30px; height: 30px; border-radius: 10px; background: var(--nt-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 800; flex: 0 0 auto; }
.nt-sticky-actions { position: sticky; bottom: 0; z-index: 20; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 14px; margin: 0 -2px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-top: 1px solid var(--nt-line); border-radius: 16px 16px 0 0; }
.nt-sticky-actions .btn { min-width: 150px; }

@media (max-width: 576px) {
    .nt-page { padding: 12px 12px 32px; }
    .nt-hero { padding: 16px; border-radius: 18px; }
    .nt-hero h1 { font-size: 1.15rem; }
    .nt-thumb { width: 60px; height: 60px; }
    .nt-sticky-actions .btn { flex: 1 1 0; min-width: 0; }
}

/* ── Création / modification d'événement : cartes d'étape au style commun ── */
.create-event-page .container { max-width: 1100px; }
.create-event-page .step-content-card { border: 1px solid var(--nt-line); border-radius: var(--nt-radius); box-shadow: var(--nt-shadow); padding: 20px; background: #fff; }
.create-event-page .step-title { display: flex; align-items: center; font-size: 1.15rem; font-weight: 800; color: var(--nt-ink); padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--nt-line); }
.create-event-page .step-title i { width: 34px; height: 34px; border-radius: 10px; background: var(--nt-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.create-event-page .form-label { font-weight: 700; font-size: .88rem; color: #374151; }
.create-event-page .form-control, .create-event-page .form-select { min-height: 46px; }
@media (max-width: 576px) { .create-event-page .step-content-card { padding: 14px; } }

/* Création d'événement : moins de vide au-dessus du bandeau */
.create-event-page > .container { padding-top: 12px !important; }
/* Tableau de bord : outils en tuiles compactes (3 par ligne) */
.organizer-dashboard .quick-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.organizer-dashboard .quick-action { padding: 12px 6px; min-height: 0; border-radius: 14px; font-size: .78rem; gap: 6px; }
.organizer-dashboard .quick-action i { font-size: 1.2rem; }
@media (min-width: 992px) { .organizer-dashboard .quick-actions-grid { grid-template-columns: repeat(4, 1fr); } }

/* Outils du tableau de bord organisateur */
.nt-tools { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 576px) { .nt-tools { grid-template-columns: repeat(2, 1fr); } }
.nt-tool { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--nt-line); border-radius: 16px; background: #fff; text-decoration: none; color: var(--nt-ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.nt-tool:hover { border-color: #c4b5fd; box-shadow: 0 8px 20px rgba(109, 40, 217, .1); transform: translateY(-1px); color: var(--nt-ink); }
.nt-tool-ic { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: 0 0 auto; }
.nt-tool-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nt-tool-txt b { font-size: .92rem; font-weight: 700; }
.nt-tool-txt small { font-size: .76rem; color: var(--nt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-tool-go { color: #c4b5fd; }

/* ── Accueil : Arena compacte (même place, moitié moins haute) ── */
.arena-promo.arena-promo--compact { padding: 18px 24px !important; min-height: 0 !important; }
.arena-promo--compact .arena-promo-badge { margin-bottom: .4rem; }
.arena-promo--compact .arena-promo-title { font-size: 1.35rem; margin-bottom: .55rem; }
.arena-promo--compact .arena-promo-emoji { font-size: 3rem; }
@media (max-width: 576px) {
    .arena-promo.arena-promo--compact { padding: 14px 16px !important; }
    .arena-promo--compact .arena-promo-title { font-size: 1.05rem; }
    .arena-promo--compact .arena-promo-side { display: none; }
}

/* ── Accueil : Organisateurs + Application en une rangée de deux cartes ── */
.home-duo { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .home-duo { grid-template-columns: 1fr 1fr; } }
.home-duo-card { position: relative; overflow: hidden; border-radius: 20px; padding: 22px; color: #fff; display: flex; flex-direction: column; }
.home-duo-card.org { background: linear-gradient(135deg, #5b21b6, #7c3aed); }
.home-duo-card.app { background: linear-gradient(135deg, #2563eb, #6366f1); }
.home-duo-ic { position: absolute; right: -6px; top: -6px; font-size: 5.5rem; opacity: .12; }
.home-duo-card h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 6px; color: #fff; }
.home-duo-card p { font-size: .88rem; opacity: .92; margin: 0 0 14px; max-width: 460px; }
.home-duo-actions { margin-top: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.home-duo-btn { background: #fff; color: #5b21b6; font-weight: 800; padding: 9px 18px; border-radius: 12px; text-decoration: none; font-size: .88rem; }
.home-duo-btn:hover { color: #4c1d95; }
.home-duo-link { color: #fff; font-weight: 700; font-size: .88rem; text-decoration: none; opacity: .9; }
.home-duo-link:hover { color: #fff; opacity: 1; }