/*
 * OrganiZ — Design system
 * Charte visuelle unique pour les espaces public / bénévole / admin / superadmin.
 * Palette et typographie alignées sur la marque réelle OrganiZ (organiz.ch).
 */

:root {
    --oz-primary: #6f8f1f;
    --oz-primary-dark: #4d6614;
    --oz-primary-light: #bed000;
    --oz-primary-soft: #eef6d9;
    --oz-gradient: linear-gradient(135deg, #cfe030 0%, #8fae1a 100%);
    --oz-gradient-soft: linear-gradient(135deg, #eef6d9 0%, #dfeeb8 100%);

    --oz-teal: #0d9488;
    --oz-teal-soft: #ccfbf1;
    --oz-amber: #d97706;
    --oz-amber-soft: #fef3c7;
    --oz-rose: #e11d48;
    --oz-rose-soft: #ffe4e6;
    --oz-blue: #2563eb;
    --oz-blue-soft: #dbeafe;

    --oz-ink: #1c2531;
    --oz-ink-soft: #5b6576;
    --oz-charcoal: #4a4a49;
    --oz-border: #e6e9e1;
    --oz-bg: #f6f7f2;
    --oz-surface: #ffffff;
    --oz-navy: #12181f;
    --oz-navy-2: #1a222c;
    --oz-success: #16a34a;
    --oz-warning: #d97706;
    --oz-danger: #e11d48;

    --oz-sidebar-width: 264px;
    --oz-topbar-height: 66px;
    --oz-radius: 1rem;
    --oz-radius-sm: 0.65rem;
    --oz-radius-lg: 1.5rem;
    --oz-font: 'Inter', system-ui, -apple-system, sans-serif;
    --oz-font-display: 'Sora', 'Inter', system-ui, sans-serif;
    --oz-shadow: 0 4px 20px -6px rgba(18, 24, 31, .1);
    --oz-shadow-lg: 0 20px 48px -12px rgba(18, 24, 31, .22);
    --oz-container: 1200px;
}

* { box-sizing: border-box; }

/* clip et non hidden : hidden sur html + body fait de body un conteneur de
   défilement qui ne défile jamais, ce qui casse tous les position: sticky
   (barre du haut, sommaire du mode d'emploi). */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
    font-family: var(--oz-font);
    background: var(--oz-bg);
    color: var(--oz-ink);
    overflow-x: clip;
}

a { color: var(--oz-primary); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--oz-font-display);
    letter-spacing: -.02em;
    font-weight: 700;
}

.text-muted { color: var(--oz-ink-soft) !important; }

/* ---------- Marque (pictogramme + wordmark) ---------- */

.oz-logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    line-height: 1;
}

.oz-logo-mark { display: block; width: auto; flex-shrink: 0; }

.oz-logo-word {
    font-family: var(--oz-font-display);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -.01em;
    color: var(--oz-charcoal);
}

.oz-logo-word .z { color: var(--oz-primary-light); }

/* ---------- App shell (sidebar + topbar) ---------- */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--oz-sidebar-width);
    flex-shrink: 0;
    background: linear-gradient(195deg, var(--oz-navy) 0%, var(--oz-navy-2) 55%, #232e3a 100%);
    color: #d7dde6;
    display: flex;
    flex-direction: column;
    box-shadow: var(--oz-shadow-lg);
    /* Reste visible pendant le défilement des longues pages (bureau) ; son
       nav défile seul s'il est plus haut que l'écran. */
    position: sticky;
    top: 0;
    height: 100vh;
}

.app-sidebar .brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.35rem 1.25rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.app-sidebar .oz-logo-word { color: #fff; }

.app-sidebar .brand .badge-area {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--oz-gradient);
    color: #16210a;
    border-radius: 999px;
    padding: .2rem .55rem;
    margin-left: .1rem;
}

.app-sidebar nav {
    flex: 1;
    padding: .9rem .75rem;
    overflow-y: auto;
}

.app-sidebar .nav-section-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8b98ab;
    padding: 1rem .6rem .4rem;
}

.app-sidebar .nav-link {
    color: #c4cbd6;
    border-radius: var(--oz-radius-sm);
    padding: .6rem .75rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .92rem;
    font-weight: 500;
    margin-bottom: .15rem;
    transition: background .15s ease, color .15s ease;
}

.app-sidebar .nav-link i {
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
    opacity: .9;
}

.app-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.app-sidebar .nav-link.active {
    background: var(--oz-gradient);
    color: #16210a;
    font-weight: 700;
    box-shadow: 0 4px 14px -2px rgba(190, 208, 0, .4);
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    height: var(--oz-topbar-height);
    background: var(--oz-surface);
    border-bottom: 1px solid var(--oz-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-topbar .oz-logo { display: none; }

.app-content {
    flex: 1;
    padding: 1.75rem;
    max-width: 100%;
}

.app-footer {
    padding: 1rem 1.5rem;
    font-size: .82rem;
    color: var(--oz-ink-soft);
    border-top: 1px solid var(--oz-border);
    background: var(--oz-surface);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(12, 16, 21, .55);
    z-index: 1030;
}

/* ---------- Public (marketing) pages ---------- */

.public-navbar {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--oz-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.public-navbar .navbar-brand { padding: 0; }

.oz-hero {
    background:
        radial-gradient(720px 420px at 85% -10%, rgba(190, 208, 0, .16), transparent 60%),
        radial-gradient(560px 360px at -5% 30%, rgba(13, 148, 136, .10), transparent 60%),
        var(--oz-bg);
    color: var(--oz-ink);
    padding: 5.5rem 0 4.5rem;
    position: relative;
    overflow: hidden;
}

.oz-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(28, 37, 49, .08) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 60% at 50% 0%, #000 0%, transparent 75%);
    pointer-events: none;
}

.oz-hero .oz-hero-inner { position: relative; }

.oz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--oz-primary-soft);
    color: var(--oz-primary-dark);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .03em;
    padding: .4rem .9rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

.oz-hero h1 {
    font-weight: 800;
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    color: var(--oz-ink);
    line-height: 1.08;
}

.oz-hero h1 .accent {
    background: var(--oz-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.oz-hero p.lead {
    color: var(--oz-ink-soft);
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
}

.oz-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    align-items: center;
    justify-content: center;
    margin-top: 2.75rem;
    color: var(--oz-ink-soft);
    font-size: .85rem;
}

.oz-trust-row span { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.oz-trust-row i { color: var(--oz-primary-light); font-size: 1.05rem; }

.oz-section { padding: 4.5rem 0; }
.oz-section-sm { padding: 3rem 0; }

.oz-section-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.oz-section-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }

.oz-stats-band {
    background: var(--oz-navy);
    color: #fff;
    border-radius: var(--oz-radius-lg);
    padding: 2.75rem 2rem;
    box-shadow: var(--oz-shadow-lg);
}

.oz-stats-band .oz-stat-value {
    font-family: var(--oz-font-display);
    font-size: clamp(2rem, 4vw, 2.6rem);
    font-weight: 800;
    background: var(--oz-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.oz-stats-band .oz-stat-label {
    color: #a9b2c0;
    font-size: .85rem;
    font-weight: 500;
}

.oz-steps { counter-reset: oz-step; }

.oz-step {
    position: relative;
    padding-left: 3.5rem;
}

.oz-step::before {
    counter-increment: oz-step;
    content: counter(oz-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--oz-gradient);
    color: #16210a;
    font-family: var(--oz-font-display);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px -4px rgba(190, 208, 0, .5);
}

.oz-step h3 { font-size: 1.1rem; margin-bottom: .35rem; }

.oz-cta-band {
    background: linear-gradient(135deg, var(--oz-navy) 0%, #1f2b25 100%);
    color: #fff;
    border-radius: var(--oz-radius-lg);
    padding: 3.25rem;
    box-shadow: var(--oz-shadow-lg);
    position: relative;
    overflow: hidden;
}

.oz-cta-band::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto auto;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(190, 208, 0, .28), transparent 70%);
}

.oz-cta-band h2 { font-weight: 800; color: #fff; position: relative; }
.oz-cta-band p { color: #c7cdd6; position: relative; }
.oz-cta-band .btn { position: relative; }

.feature-icon-badge {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 1rem;
}

.feature-icon-badge.c1 { background: linear-gradient(135deg, #cfe030, #8fae1a); }
.feature-icon-badge.c2 { background: linear-gradient(135deg, #2d3b4f, #1a2431); }
.feature-icon-badge.c3 { background: linear-gradient(135deg, #0d9488, #0891b2); }
.feature-icon-badge.c4 { background: linear-gradient(135deg, #d97706, #b45309); }
.feature-icon-badge.c5 { background: linear-gradient(135deg, #e11d48, #9f1239); }
.feature-icon-badge.c6 { background: linear-gradient(135deg, #2563eb, #1e40af); }

.oz-feature-card {
    background: var(--oz-surface);
    border: 1px solid var(--oz-border);
    border-radius: var(--oz-radius);
    padding: 1.75rem;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
}

.oz-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--oz-shadow);
}

.oz-pricing-card {
    background: var(--oz-surface);
    border: 1px solid var(--oz-border);
    border-radius: var(--oz-radius);
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}

.oz-pricing-card:hover { transform: translateY(-3px); box-shadow: var(--oz-shadow); }

.oz-pricing-card.is-featured {
    border-color: var(--oz-primary-light);
    box-shadow: var(--oz-shadow-lg);
    position: relative;
}

.oz-pricing-card .oz-price {
    font-family: var(--oz-font-display);
    font-size: 2.2rem;
    font-weight: 800;
}

.oz-faq-item {
    border: 1px solid var(--oz-border);
    border-radius: var(--oz-radius-sm);
    background: var(--oz-surface);
    overflow: hidden;
}

.oz-faq-item summary {
    padding: 1rem 1.25rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.oz-faq-item summary::-webkit-details-marker { display: none; }

.oz-faq-item summary::after {
    content: "\002B";
    float: right;
    font-weight: 400;
    color: var(--oz-ink-soft);
}

.oz-faq-item[open] summary::after { content: "\2212"; }

.oz-faq-item .oz-faq-body { padding: 0 1.25rem 1.1rem; color: var(--oz-ink-soft); }

/* ---------- Reusable components ---------- */

.oz-card {
    background: var(--oz-surface);
    border: 1px solid var(--oz-border);
    border-radius: var(--oz-radius);
    box-shadow: var(--oz-shadow);
}

.oz-card .oz-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--oz-border);
    font-weight: 700;
}

.oz-card .oz-card-body {
    padding: 1.25rem;
}

.oz-stat {
    background: var(--oz-surface);
    border: 1px solid var(--oz-border);
    border-radius: var(--oz-radius);
    padding: 1.15rem 1.3rem;
    box-shadow: var(--oz-shadow);
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--oz-primary);
}

.card {
    border-radius: var(--oz-radius);
    border-color: var(--oz-border);
    box-shadow: var(--oz-shadow);
}

.form-control, .form-select {
    border-radius: var(--oz-radius-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--oz-primary-light);
    box-shadow: 0 0 0 .2rem rgba(190, 208, 0, .25);
}

.form-check-input:checked {
    background-color: var(--oz-primary);
    border-color: var(--oz-primary);
}

.oz-stat .oz-stat-value {
    font-family: var(--oz-font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--oz-ink);
}

.oz-stat .oz-stat-label {
    font-size: .78rem;
    color: var(--oz-ink-soft);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

.row > [class*="col"]:nth-of-type(4n+1) .oz-stat { border-top-color: var(--oz-primary); }
.row > [class*="col"]:nth-of-type(4n+1) .oz-stat .oz-stat-value { color: var(--oz-primary-dark); }
.row > [class*="col"]:nth-of-type(4n+2) .oz-stat { border-top-color: var(--oz-teal); }
.row > [class*="col"]:nth-of-type(4n+2) .oz-stat .oz-stat-value { color: var(--oz-teal); }
.row > [class*="col"]:nth-of-type(4n+3) .oz-stat { border-top-color: var(--oz-amber); }
.row > [class*="col"]:nth-of-type(4n+3) .oz-stat .oz-stat-value { color: var(--oz-amber); }
.row > [class*="col"]:nth-of-type(4n+4) .oz-stat { border-top-color: var(--oz-rose); }
.row > [class*="col"]:nth-of-type(4n+4) .oz-stat .oz-stat-value { color: var(--oz-rose); }

.table { background: var(--oz-surface); }
.oz-card .table { margin-bottom: 0; }
.table > :not(caption) > * > * { border-bottom-color: var(--oz-border); }

.table thead th {
    background: var(--oz-gradient-soft);
    color: var(--oz-primary-dark);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    border-bottom: none;
    white-space: nowrap;
}

.btn {
    border-radius: var(--oz-radius-sm);
    font-weight: 600;
}

.btn-primary {
    background: var(--oz-gradient);
    border-color: transparent;
    color: #16210a;
    box-shadow: 0 4px 14px -4px rgba(143, 174, 26, .55);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #bed000 0%, #6f8f1f 100%);
    border-color: transparent;
    color: #16210a;
}

.btn-outline-primary {
    color: var(--oz-primary-dark);
    border-color: var(--oz-primary-light);
}

.btn-outline-primary:hover {
    background: var(--oz-primary-light);
    border-color: var(--oz-primary-light);
    color: #16210a;
}

.btn-light { border-radius: var(--oz-radius-sm); }

.badge-role-admin {
    background: var(--oz-primary-soft);
    color: var(--oz-primary-dark);
}

.progress { background: var(--oz-bg); border-radius: 999px; }
.progress-bar { background: var(--oz-gradient); }
.nav-pills .nav-link.active { background: var(--oz-gradient); }

.modal-content {
    border-radius: var(--oz-radius);
    border: none;
    box-shadow: var(--oz-shadow-lg);
}

.modal-header { border-bottom: 1px solid var(--oz-border); }

.alert {
    border-radius: var(--oz-radius-sm);
}

.alert-success {
    background: var(--oz-teal-soft);
    border-color: transparent;
    color: #0f5b52;
}

.alert-danger {
    background: var(--oz-rose-soft);
    border-color: transparent;
    color: #9f1239;
}

.dropdown-menu {
    border-radius: var(--oz-radius-sm);
    border: 1px solid var(--oz-border);
    box-shadow: var(--oz-shadow-lg);
}

.oz-public-footer {
    background: var(--oz-surface);
    border-top: 1px solid var(--oz-border);
}

.oz-breadcrumb a { text-decoration: none; }
.oz-breadcrumb a:hover { text-decoration: underline; }

/* Historique : anciennes règles ponctuelles conservées */
.view_min { min-height: 800px; }

/* ---------- Mobile ---------- */

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-100%);
        transition: transform .22s ease;
        z-index: 1040;
        max-width: 82vw;
    }

    .app-sidebar.is-open { transform: translateX(0); }

    .sidebar-backdrop.is-open { display: block; }

    .app-topbar .oz-logo { display: inline-flex; }

    .app-content { padding: 1.1rem; }
}

@media (max-width: 767.98px) {
    .oz-hero { padding: 3.25rem 0 2.75rem; text-align: center; }
    .oz-section { padding: 3rem 0; }
    .oz-cta-band { padding: 2.25rem 1.5rem; text-align: center; }
    .oz-stats-band { padding: 2rem 1.25rem; text-align: center; }
    .oz-step { padding-left: 0; padding-top: 3.25rem; text-align: center; }
    .oz-step::before { left: 50%; top: 0; transform: translateX(-50%); }
    .app-content { padding: .9rem; }
    .oz-card .oz-card-body { padding: 1rem; }

    /*
     * Pattern répété sur ~23 écrans admin/superadmin : titre de page +
     * bouton(s) d'action sur une seule ligne (d-flex justify-content-between).
     * Sur petit écran les deux se chevauchent — on empile, et on laisse les
     * boutons d'action passer à la ligne plutôt que déborder horizontalement.
     */
    .app-content .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-direction: column;
        align-items: stretch !important;
        gap: .6rem;
    }

    .app-content .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex {
        flex-wrap: wrap;
    }
}

/* ---------- Impression (A4) ----------
   Base commune à tous les documents imprimables ; chaque page peut préciser
   son format (@page portrait / paysage) et ses sauts de page. */

.oz-print-header, .print-only { display: none; }

@media print {
    @page { size: A4 portrait; margin: 12mm; }

    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    html, body { background: #fff !important; }
    body { font-size: 10pt; }

    .app-sidebar, .app-topbar, .app-footer, .sidebar-backdrop, .oz-breadcrumb, .alert, .no-print { display: none !important; }
    .app-shell, .app-main { display: block !important; min-height: 0 !important; }
    .app-content { padding: 0 !important; }
    .container-xxl { max-width: none !important; padding: 0 !important; }
    .oz-card { box-shadow: none !important; }
    a { color: inherit !important; text-decoration: none !important; }
    .table-responsive { overflow: visible !important; }

    .oz-print-header {
        display: flex;
        align-items: center;
        gap: 5mm;
        padding-bottom: 3mm;
        margin-bottom: 5mm;
        border-bottom: 2px solid #bed000;
        break-after: avoid;
    }
    .oz-print-header .oz-logo-word { font-size: 1.15rem; color: #2b2b2b; }
    .oz-print-title { flex: 1; min-width: 0; padding-left: 5mm; border-left: 1px solid #dee2e6; }
    .oz-print-doc { font-family: var(--oz-font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
    .oz-print-sub { font-size: .85rem; color: #555; }
    .oz-print-date { font-size: .75rem; color: #777; white-space: nowrap; align-self: flex-end; }
}