/* =============================================================
   CRM Photobooth — Feuille de style
   Direction artistique : éditorial sombre + accent électrique,
   typographie expressive. Festif mais professionnel.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Outfit:wght@300;400;500;600&display=swap');

:root {
    /* Palette */
    --ink:        #15131f;   /* fond profond, violet-noir */
    --ink-2:      #1f1c2e;   /* surfaces */
    --ink-3:      #2a2740;   /* surfaces hautes */
    --line:       #393455;   /* bordures */
    --paper:      #f4f1ea;   /* texte clair, blanc cassé */
    --muted:      #9a93b5;   /* texte secondaire */
    --accent:     #ff5d73;   /* corail électrique (flash photobooth) */
    --accent-2:   #ffd166;   /* jaune projecteur */
    --mint:       #6ee7b7;   /* succès */
    --danger:     #ff6b6b;   /* erreur */

    --radius:     14px;
    --radius-sm:  9px;
    --shadow:     0 18px 40px -18px rgba(0,0,0,.6);

    --font-display: 'Fraunces', Georgia, serif;
    --font-body:    'Outfit', system-ui, sans-serif;
}

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

body {
    font-family: var(--font-body);
    color: var(--paper);
    background: var(--ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.55;
}

/* ---------- Page d'authentification ---------- */
.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,93,115,.18), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,209,102,.12), transparent 40%),
        var(--ink);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 40px 36px;
    animation: rise .5s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-header { text-align: center; margin-bottom: 28px; }
.auth-mark {
    display: inline-block;
    font-size: 34px;
    color: var(--accent);
    filter: drop-shadow(0 0 14px rgba(255,93,115,.5));
}
.auth-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 26px;
    margin-top: 6px;
    letter-spacing: -.01em;
}
.auth-subtitle { color: var(--muted); font-size: 14px; }

.auth-form { display: flex; flex-direction: column; gap: 18px; }

/* ---------- Champs de formulaire ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.field-input {
    background: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    color: var(--paper);
    font-family: inherit;
    font-size: 15px;
    transition: border-color .2s, box-shadow .2s;
}
.field-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255,93,115,.18);
}
.field-input::placeholder { color: #5d5775; }

/* ---------- Boutons ---------- */
.btn {
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px 20px;
    cursor: pointer;
    transition: transform .12s, filter .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: linear-gradient(135deg, var(--accent), #ff7a8a);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(255,93,115,.7);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-block { width: 100%; }

/* ---------- Alertes ---------- */
.alert {
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 14px;
    margin-bottom: 18px;
}
.alert-error {
    background: rgba(255,107,107,.12);
    border: 1px solid rgba(255,107,107,.4);
    color: #ffb3b3;
}

/* ---------- Layout back-office ---------- */
.app-body { background: var(--ink); }
.layout { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

.sidebar {
    background: var(--ink-2);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
}
.brand {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px 22px;
}
.brand-mark { color: var(--accent); font-size: 22px; filter: drop-shadow(0 0 10px rgba(255,93,115,.5)); }
.brand-text { font-family: var(--font-display); font-weight: 600; font-size: 18px; }

.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-item {
    display: block;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-size: 14.5px;
    transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--ink-3); color: var(--paper); }
.nav-item.is-active { background: var(--ink-3); color: var(--paper); box-shadow: inset 3px 0 0 var(--accent); }
.nav-item.is-disabled { opacity: .45; cursor: not-allowed; }
.nav-item.is-disabled:hover { background: none; color: var(--muted); }

.sidebar-footer {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.user-name { font-size: 14px; font-weight: 500; }
.logout-link { font-size: 13px; color: var(--muted); text-decoration: none; }
.logout-link:hover { color: var(--accent); }

.content { display: flex; flex-direction: column; }
.topbar {
    padding: 26px 36px;
    border-bottom: 1px solid var(--line);
}
.page-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 28px;
    letter-spacing: -.01em;
}
.page-body { padding: 32px 36px; }

/* ---------- Dashboard ---------- */
.welcome { margin-bottom: 28px; }
.welcome-text { font-size: 19px; }
.welcome-sub { color: var(--muted); }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    transition: transform .15s, border-color .15s;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card-active { border-color: rgba(110,231,183,.4); }
.card-status {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--mint);
    background: rgba(110,231,183,.12);
    padding: 3px 9px;
    border-radius: 100px;
    margin-bottom: 12px;
}
.card-status-soon { color: var(--accent-2); background: rgba(255,209,102,.12); }
.card-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.card-desc { color: var(--muted); font-size: 14px; }

/* ---------- Burger (caché desktop) ---------- */
.burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--paper); border-radius: 2px; transition: .2s; }
.sidebar-backdrop { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .layout { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 260px; z-index: 200;
        transform: translateX(-100%);
        transition: transform .25s ease;
        border-right: 1px solid var(--line);
        overflow-y: auto;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop.show {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,.5); z-index: 150;
    }
    .nav { flex-direction: column; }
    .burger { display: flex; }
    .topbar { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
    .page-title { font-size: 22px; }
    .topbar, .page-body { padding-left: 20px; padding-right: 20px; }
}

/* =============================================================
   Lot 2 — Module Clients (liste, formulaire, fiche)
   ============================================================= */

/* Boutons additionnels */
.btn-ghost { background: var(--ink-3); color: var(--paper); }
.btn-ghost:hover { filter: brightness(1.15); }
.btn-danger { background: rgba(255,107,107,.15); color: #ffb3b3; border: 1px solid rgba(255,107,107,.4); }
.btn-danger:hover { background: rgba(255,107,107,.25); }

/* Barre d'outils (recherche + nouveau) */
.toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.search-form { display: flex; gap: 8px; flex: 1; max-width: 460px; }
.search-input { flex: 1; }

/* Tableau de données */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
    text-align: left; font-size: 12.5px; font-weight: 500; color: var(--muted);
    padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--ink-2);
}
.data-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.data-table tbody tr:last-child td { border-bottom: none; }
.row-link { cursor: pointer; transition: background .12s; }
.row-link:hover { background: var(--ink-3); }
.muted-inline { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* État vide */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state p { margin-bottom: 18px; }

/* Formulaires */
.form-page, .form-actions { max-width: 920px; }
.back-link { display: inline-block; color: var(--muted); text-decoration: none; font-size: 14px; margin-bottom: 18px; }
.back-link:hover { color: var(--accent); }
.card-form { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.field-wide { grid-column: span 1; }
.field textarea.field-input { resize: vertical; font-family: inherit; }
.req { color: var(--accent); }
.has-error { border-color: var(--danger) !important; }
.field-error { color: #ffb3b3; font-size: 12.5px; margin-top: 4px; }
.field-checkbox { flex-direction: row; align-items: center; gap: 8px; }
.field-checkbox input { width: 18px; height: 18px; accent-color: var(--accent); }

.entreprise-block { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; margin-bottom: 18px; }
.entreprise-block legend { color: var(--accent-2); font-size: 13px; padding: 0 8px; }

.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }

/* Fiche détail */
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.detail-actions { display: flex; gap: 10px; }
.inline-form { display: inline; }
.detail-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; }
.panel { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.panel-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-bottom: 18px; }
.info-list { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; font-size: 14.5px; }
.info-list dt { color: var(--muted); }
.info-list dd { color: var(--paper); }
.prefs-box { margin-top: 18px; padding: 14px; background: var(--ink); border-radius: var(--radius-sm); }
.prefs-label { font-size: 12px; color: var(--accent-2); text-transform: uppercase; letter-spacing: .04em; }
.prefs-box p { margin-top: 6px; font-size: 14px; }

/* Contacts */
.contact-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.contact-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--ink); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.contact-meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.badge { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 100px; background: var(--ink-3); color: var(--muted); margin-left: 6px; }
.badge-principal { background: rgba(110,231,183,.15); color: var(--mint); }
.btn-icon { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 4px 8px; border-radius: 6px; }
.btn-icon:hover { color: var(--danger); background: rgba(255,107,107,.1); }
.contact-form { border-top: 1px solid var(--line); padding-top: 20px; }
.subform-title { font-size: 15px; font-weight: 500; margin-bottom: 16px; color: var(--paper); }
.muted { color: var(--muted); font-size: 14px; }

@media (max-width: 860px) {
    .form-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .info-list { grid-template-columns: 110px 1fr; }
}

/* =============================================================
   Lot 3 — Pipeline Kanban
   ============================================================= */

.kanban-toolbar { margin-bottom: 16px; }

/* Formulaire rapide repliable */
.quick-lead-form {
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease, margin .25s ease;
}
.quick-lead-form.open { max-height: 120px; margin-bottom: 20px; }
.quick-form-inner {
    display: flex; gap: 10px; align-items: center;
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 14px;
}
.quick-form-inner .field-input { flex: 1; }
.quick-form-inner select.field-input { flex: 0 0 200px; }

/* Le board : colonnes en scroll horizontal */
.kanban-board {
    display: flex; gap: 14px; overflow-x: auto;
    padding-bottom: 16px; align-items: flex-start;
}
.kanban-col {
    flex: 0 0 260px;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 220px);
}
.kanban-col-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 15px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: var(--ink-2); border-radius: var(--radius) var(--radius) 0 0;
}
.kanban-col-title { font-size: 13.5px; font-weight: 600; color: var(--paper); }
.kanban-col-count {
    font-size: 12px; color: var(--muted); background: var(--ink-3);
    padding: 1px 9px; border-radius: 100px; min-width: 24px; text-align: center;
}
.kanban-col-body {
    padding: 10px; display: flex; flex-direction: column; gap: 9px;
    overflow-y: auto; min-height: 60px; flex: 1;
}

/* Cartes */
.kanban-card {
    background: var(--ink-3); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 12px;
    cursor: grab; transition: border-color .15s, transform .1s;
}
.kanban-card:hover { border-color: var(--accent); }
.kanban-card:active { cursor: grabbing; }
.kanban-card-name { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.kanban-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.temp-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.kanban-card-budget { margin-left: auto; color: var(--accent-2); font-weight: 500; }
.kanban-card-relance { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* États de drag (SortableJS) */
.kanban-card-ghost { opacity: .4; background: var(--accent); }
.kanban-card-drag { transform: rotate(2deg); box-shadow: var(--shadow); }

@media (max-width: 760px) {
    .kanban-col { flex: 0 0 230px; }
    .quick-form-inner { flex-direction: column; align-items: stretch; }
    .quick-form-inner select.field-input { flex: 1; }
}

/* =============================================================
   Lot 4 — Événements, anti-conflit & planning de flotte
   ============================================================= */

.link { color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }
.badge-warning { background: rgba(255,209,102,.15); color: var(--accent-2); }
.planning-nav { display: flex; align-items: center; gap: 12px; }
.planning-range { font-size: 14px; color: var(--muted); }

/* Alerte de conflit */
.conflit-box {
    background: rgba(255,107,107,.08);
    border: 1px solid rgba(255,107,107,.45);
    border-radius: var(--radius-sm);
    padding: 16px; margin-bottom: 20px;
}
.conflit-title { font-weight: 600; color: #ffb3b3; margin-bottom: 8px; }
.conflit-text { font-size: 14px; color: var(--paper); margin-bottom: 8px; }
.conflit-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.conflit-list li { font-size: 13.5px; color: var(--muted); padding-left: 14px; position: relative; }
.conflit-list li::before { content: '•'; position: absolute; left: 0; color: var(--danger); }
.conflit-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.conflit-cancel { font-size: 13px; color: var(--muted); }

/* Planning de flotte (grille bornes x jours) */
.planning-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.planning-table th, .planning-table td { border: 1px solid var(--line); }
.planning-corner { background: var(--ink-2); padding: 12px 14px; text-align: left; width: 160px; font-size: 13px; color: var(--muted); }
.planning-day { background: var(--ink-2); padding: 10px 8px; text-align: center; }
.planning-day.is-weekend { background: var(--ink-3); }
.planning-dayname { display: block; font-size: 12px; color: var(--muted); }
.planning-daynum { display: block; font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.planning-borne { padding: 12px 14px; background: var(--ink-2); }
.planning-modele { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.planning-cell { height: 56px; padding: 4px; vertical-align: middle; }
.planning-cell.is-weekend { background: rgba(42,39,64,.4); }
.planning-occ {
    background: linear-gradient(135deg, var(--accent), #ff7a8a);
    color: #fff; border-radius: 6px; padding: 6px 8px; height: 100%;
    display: flex; flex-direction: column; justify-content: center;
}
.planning-occ-name { font-size: 12px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planning-occ-ville { font-size: 11px; opacity: .85; }
.planning-legend { margin-top: 14px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.legend-occ { display: inline-block; width: 16px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, var(--accent), #ff7a8a); }

/* =============================================================
   Lot 5 — Bloc financier
   ============================================================= */

.finance-panel { margin-top: 22px; }
.finance-summary {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-bottom: 22px;
}
.finance-kpi {
    background: var(--ink); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 16px; text-align: center;
}
.finance-kpi-label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.finance-kpi-value { display: block; font-size: 22px; font-weight: 600; margin-top: 6px; font-family: var(--font-display); }
.finance-kpi-solde { border-color: rgba(255,93,115,.4); }
.finance-kpi-solde .finance-kpi-value { color: var(--accent); }
.finance-form { border-top: 1px solid var(--line); padding-top: 20px; }

@media (max-width: 760px) {
    .finance-summary { grid-template-columns: 1fr; }
}

/* =============================================================
   Lot 5b — Synthèse financière transversale
   ============================================================= */

.finance-synthese-kpis {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.finance-synthese-kpis .finance-kpi { padding: 20px; }
.finance-kpi-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.finance-kpi-ok { border-color: rgba(110,231,183,.4); }
.finance-kpi-ok .finance-kpi-value { color: var(--mint); }

@media (max-width: 760px) {
    .finance-synthese-kpis { grid-template-columns: 1fr; }
}

/* =============================================================
   Lot 6 — Journal de bord (timeline)
   ============================================================= */

.timeline-panel { margin-top: 22px; }

/* Formulaire d'ajout rapide */
.tl-add-form { margin-bottom: 22px; }
.tl-add-row { display: flex; gap: 10px; align-items: center; }
.tl-type-select { flex: 0 0 120px; }
.tl-add-input { flex: 1; }

/* Le fil */
.tl-list { list-style: none; display: flex; flex-direction: column; gap: 0; position: relative; }
.tl-item {
    display: flex; gap: 14px; padding: 14px 0;
    border-left: 2px solid var(--line); margin-left: 14px; padding-left: 22px;
    position: relative;
}
.tl-item:last-child { border-left-color: transparent; }
.tl-dot {
    position: absolute; left: -15px; top: 12px;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ink-3); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.tl-body { flex: 1; }
.tl-content { font-size: 14.5px; color: var(--paper); }
.tl-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.tl-empty { padding: 16px 0; }

/* Accents par type */
.tl-log .tl-dot { border-color: rgba(110,231,183,.4); }
.tl-appel .tl-dot { border-color: rgba(255,209,102,.4); }
.tl-email .tl-dot { border-color: rgba(124,118,200,.5); }

@media (max-width: 760px) {
    .tl-add-row { flex-wrap: wrap; }
    .tl-type-select, .tl-add-input { flex: 1 1 100%; }
}

/* =============================================================
   Lot 7 — Étapes de suivi (checklist + vue d'ensemble)
   ============================================================= */

/* Barre de progression (réutilisée dans checklist et cartes) */
.etapes-bar { height: 7px; background: var(--ink); border-radius: 100px; overflow: hidden; margin: 10px 0; }
.etapes-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 100px; transition: width .3s; }

/* Checklist sur la fiche événement */
.etapes-panel { margin-top: 22px; }
.etapes-head { display: flex; justify-content: space-between; align-items: baseline; }
.etapes-progress-label { font-size: 14px; color: var(--muted); font-weight: 500; }
.etapes-list { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.etape-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); transition: background .12s; }
.etape-item:hover { background: var(--ink); }
.etape-item.is-done .etape-libelle { color: var(--muted); text-decoration: line-through; }
.etape-form { display: flex; margin: 0; }
.etape-check { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--accent); line-height: 1; padding: 0; }
.etape-libelle { flex: 1; font-size: 14.5px; }
.etape-date { font-size: 12px; color: var(--mint); }
.etapes-config-link { margin-top: 14px; font-size: 13px; }

/* Vue d'ensemble : grille de cartes */
.suivi-filters { display: flex; gap: 8px; }
.suivi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.suivi-card {
    display: block; background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 18px; text-decoration: none; color: var(--paper);
    transition: transform .15s, border-color .15s;
}
.suivi-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.suivi-card.is-complete { border-color: rgba(110,231,183,.4); }
.suivi-card-head { display: flex; justify-content: space-between; align-items: center; }
.suivi-card-date { font-size: 12.5px; color: var(--muted); }
.suivi-card-pct { font-size: 13px; font-weight: 600; color: var(--accent-2); }
.suivi-card-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-top: 6px; }
.suivi-card-client { font-size: 13px; color: var(--muted); margin-top: 2px; }
.suivi-card-etape { margin-top: 6px; }
.suivi-etape-label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.suivi-etape-value { font-size: 14px; font-weight: 500; color: var(--accent); }

/* Page de config des étapes */
.config-etapes-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.config-etape-item { display: flex; align-items: center; gap: 10px; }
.config-etape-num { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--ink-3); color: var(--muted); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.config-etape-rename { display: flex; gap: 8px; flex: 1; margin: 0; }
.config-etape-rename .field-input { flex: 1; }
.config-add-form { border-top: 1px solid var(--line); padding-top: 18px; }

/* =============================================================
   Lot 8 — Coûts & marge
   ============================================================= */

.marge-summary {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    margin-bottom: 22px; padding: 16px; background: var(--ink);
    border-radius: var(--radius-sm); border: 1px solid var(--line);
}
.marge-kpi { text-align: center; }
.marge-kpi-result.is-profit .finance-kpi-value { color: var(--mint); }
.marge-kpi-result.is-loss .finance-kpi-value { color: var(--danger); }
.marge-taux { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Lot 8 — indication sous un champ */
.field-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* =============================================================
   Lot 9 — Tableau de bord & KPIs
   ============================================================= */

/* Rangée de KPIs */
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.kpi-box {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 22px;
}
.kpi-box-accent { border-color: rgba(255,93,115,.4); }
.kpi-box-label { display: block; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi-box-value { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 600; margin: 8px 0 4px; }
.kpi-box-accent .kpi-box-value { color: var(--accent); }
.kpi-box-sub { font-size: 13px; color: var(--muted); }

/* Grille des deux panneaux */
.dashboard-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }

/* Barres horizontales */
.bars { display: flex; flex-direction: column; gap: 18px; }
.bar-row { display: flex; flex-direction: column; gap: 5px; }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; }
.bar-label { font-size: 14.5px; font-weight: 500; }
.bar-value { font-size: 13px; color: var(--accent-2); }
.bar-track { height: 12px; background: var(--ink); border-radius: 100px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #ff9a6b); border-radius: 100px; transition: width .4s; min-width: 4px; }
.bar-fill-haute { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.bar-fill-basse { background: linear-gradient(90deg, #5b9bd5, #6ee7b7); }
.bar-count { font-size: 12px; color: var(--muted); }

/* Bloc occupation */
.occ-block { display: flex; flex-direction: column; gap: 20px; }
.occ-item { display: flex; flex-direction: column; gap: 6px; }
.occ-head { display: flex; justify-content: space-between; align-items: baseline; }
.occ-label { font-size: 14.5px; font-weight: 500; }
.occ-period { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.occ-pct { font-size: 18px; font-weight: 600; font-family: var(--font-display); color: var(--accent); }

@media (max-width: 860px) {
    .kpi-row { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   Lot 10 — ROI par machine
   ============================================================= */

.roi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.roi-card {
    background: var(--ink-2); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 20px;
}
.roi-card.is-amortie { border-color: rgba(110,231,183,.4); }
.roi-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.roi-card-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.roi-card-modele { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.roi-amort-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.roi-amort-label { font-size: 13px; color: var(--muted); }
.roi-amort-pct { font-size: 18px; font-weight: 600; font-family: var(--font-display); color: var(--accent); }
.roi-details { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.roi-line { display: flex; justify-content: space-between; font-size: 14px; }
.roi-line span { color: var(--muted); }
.roi-line-total { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; }
.roi-no-cost { font-size: 13.5px; color: var(--muted); background: var(--ink); padding: 12px; border-radius: var(--radius-sm); margin-bottom: 12px; }
.roi-card-foot { margin-top: 14px; font-size: 12.5px; color: var(--muted); }

/* =============================================================
   Lot 11 — Booking Curve
   ============================================================= */

.bc-selector { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; font-size: 14px; color: var(--muted); }
.bc-selector .field-input { width: auto; padding: 6px 10px; }
.bc-obs { font-size: 13px; font-style: italic; }

.bc-completude { background: rgba(124,118,200,.12); border: 1px solid rgba(124,118,200,.35); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; color: var(--paper); margin-bottom: 20px; }

/* Badges de tendance */
.bc-trends { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.bc-trend { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.bc-trend-label { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.bc-trend-vals { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bc-trend-a { color: var(--muted); font-size: 15px; }
.bc-trend-arrow { color: var(--muted); }
.bc-trend-b { font-size: 17px; font-weight: 600; font-family: var(--font-display); }
.bc-badge { font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 100px; margin-left: 2px; }
.bc-badge-up { background: rgba(110,231,183,.18); color: var(--mint); }
.bc-badge-down { background: rgba(255,107,107,.18); color: #ff9b9b; }
.bc-badge-neutral { background: var(--ink-3); color: var(--muted); }

/* Légende */
.bc-legend { display: flex; gap: 20px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.bc-legend-item { display: flex; align-items: center; gap: 7px; }
.bc-dot { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.bc-dot-a { background: #7c76c8; }
.bc-dot-b { background: var(--accent); }

/* Graphique SVG */
.bc-svg { width: 100%; height: auto; display: block; }
.bc-grid { stroke: var(--line); stroke-width: 1; }
.bc-axis-label { fill: var(--muted); font-size: 11px; font-family: var(--font-body); }
.bc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.bc-line-a { stroke: #7c76c8; }
.bc-line-b { stroke: var(--accent); }

@media (max-width: 760px) {
    .bc-trends { grid-template-columns: 1fr; }
}

/* =============================================================
   Lot 12a — Back-office configuration du formulaire
   ============================================================= */

.fa-intro { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 20px; font-size: 14px; color: var(--muted); }
.fa-edit-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fa-edit-row .field-input { flex: 1; min-width: 100px; }
.fa-prix { flex: 0 0 90px !important; }
.fa-add { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; }
.row-inactive { opacity: .5; }
.fa-codes { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-code-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); border: 1px solid var(--line); border-radius: 100px; padding: 5px 12px; font-size: 13.5px; }
.fa-chip-x { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 13px; padding: 0; line-height: 1; }

/* =============================================================
   Calendrier de disponibilités (DispoCalController)
   ============================================================= */

.dc-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.dc-nav { display:flex; gap:8px; }
.dc-legend { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; }
.dc-leg { display:flex; align-items:center; gap:5px; }
.dc-leg::before { content:''; display:inline-block; width:14px; height:14px; border-radius:4px; }
.dc-leg-libre::before  { background:#22c55e; }
.dc-leg-rare::before   { background:#f97316; }
.dc-leg-complet::before{ background:#ef4444; }
.dc-leg-bloque::before { background:#6b7280; }
.dc-leg-passe::before  { background:var(--ink); border:1px solid var(--line); }

.dc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.dc-month { background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px; }
.dc-month-title { font-size:15px; font-weight:700; text-align:center; margin-bottom:12px; }
.dc-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.dc-head { text-align:center; font-size:11px; font-weight:600; color:var(--muted); padding-bottom:4px; }
.dc-empty { }
.dc-day {
    position:relative; aspect-ratio:1; border-radius:6px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition:transform .1s; font-size:12px; font-weight:500;
}
.dc-day:hover { transform:scale(1.12); z-index:2; }
.dc-num { line-height:1; }

.dc-libre   { background:rgba(34,197,94,.2);  color:#4ade80; }
.dc-rare    { background:rgba(249,115,22,.25); color:#fb923c; }
.dc-complet { background:rgba(239,68,68,.25);  color:#f87171; }
.dc-bloque  { background:var(--ink);  color:var(--muted); cursor:default; }
.dc-passe   { background:transparent; color:var(--muted); opacity:.4; cursor:default; }
.dc-today   { outline:2px solid var(--accent); outline-offset:1px; }

.dc-badge-rare, .dc-badge-full, .dc-badge-lock {
    position:absolute; bottom:1px; right:2px; font-size:8px; line-height:1;
}
.dc-badge-rare { color:#fb923c; font-weight:900; }
.dc-badge-full { color:#f87171; }

.dc-tooltip {
    position:absolute; z-index:100;
    background:var(--ink-2); border:1px solid var(--line);
    border-radius:var(--radius-sm); padding:10px 14px;
    font-size:13px; box-shadow:0 4px 12px rgba(0,0,0,.3);
    max-width:220px; pointer-events:none;
}

@media(max-width:900px){
    .dc-grid { grid-template-columns:1fr; }
}

/* =============================================================
   Liste événements — filtres & états
   ============================================================= */

.evt-filtres { display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.evt-filtre-group { display:flex; flex-direction:column; gap:3px; }
.evt-filtre-label { font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.field-input-sm { padding:6px 10px; font-size:13px; height:34px; }
.btn-group { display:flex; }
.btn-group .btn { border-radius:0; }
.btn-group .btn:first-child { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.btn-group .btn:last-child  { border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.btn-sm { padding:6px 12px; font-size:13px; }
.th-sort { color:inherit; text-decoration:none; white-space:nowrap; }
.th-sort:hover { color:var(--accent); }

.evt-passes-toggle { display:flex; align-items:center; gap:14px; margin:12px 0 6px; font-size:13px; }
.evt-toggle-link { color:var(--muted); text-decoration:none; }
.evt-toggle-link:hover { color:var(--paper); }
.evt-toggle-active { color:var(--accent); }

.row-passe { opacity:.55; }
.row-passe:hover { opacity:1; }
.badge-passe { display:inline-block; font-size:10px; background:var(--ink); color:var(--muted); border-radius:100px; padding:1px 7px; margin-left:6px; vertical-align:middle; }

/* =============================================================
   Clochette de notifications
   ============================================================= */

.topbar { display:flex; justify-content:space-between; align-items:center; }
.topbar-right { display:flex; align-items:center; gap:12px; }

/* Bouton clochette */
.bell-wrap { position:relative; }
.bell-btn {
    position:relative; background:none; border:none; cursor:pointer;
    color:var(--muted); padding:8px; border-radius:var(--radius-sm);
    transition:color .15s, background .15s; display:flex; align-items:center;
}
.bell-btn:hover { color:var(--paper); background:var(--ink-2); }
.bell-badge {
    position:absolute; top:2px; right:2px;
    background:var(--accent); color:#fff;
    font-size:10px; font-weight:700; line-height:1;
    padding:2px 5px; border-radius:100px; min-width:16px; text-align:center;
}

/* Panneau déroulant */
.bell-panel {
    position:absolute; top:calc(100% + 8px); right:0;
    width:340px; max-height:480px; overflow-y:auto;
    background:var(--ink-2); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.4);
    z-index:200;
}
.bell-panel-head {
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 16px 10px; border-bottom:1px solid var(--line);
    position:sticky; top:0; background:var(--ink-2);
}
.bell-panel-title { font-weight:700; font-size:14px; }
.bell-mark-all {
    font-size:11px; color:var(--muted); background:none; border:none;
    cursor:pointer; padding:0; text-decoration:underline;
}
.bell-mark-all:hover { color:var(--paper); }

/* Groupes */
.bell-group { padding:8px 0; border-bottom:1px solid var(--line); }
.bell-group:last-child { border-bottom:none; }
.bell-group-label {
    display:block; font-size:10px; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--muted); padding:4px 16px 6px;
}

/* Items */
.bell-item {
    display:flex; align-items:flex-start; gap:10px;
    padding:8px 16px; transition:background .1s;
}
.bell-item:hover { background:var(--ink); }
.bell-item-urgent { border-left:3px solid var(--danger); }
.bell-item-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.bell-item-body { flex:1; min-width:0; }
.bell-item-titre {
    display:block; font-size:13px; font-weight:600; color:var(--paper);
    text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bell-item-titre:hover { color:var(--accent); }
.bell-item-msg { font-size:11.5px; color:var(--muted); margin:2px 0 0; line-height:1.4; }
.bell-item-close {
    background:none; border:none; color:var(--muted); cursor:pointer;
    font-size:11px; padding:2px 4px; flex-shrink:0; opacity:.5;
    transition:opacity .1s;
}
.bell-item-close:hover { opacity:1; color:var(--danger); }

/* État vide */
.bell-empty {
    text-align:center; padding:28px 16px; color:var(--muted);
}
.bell-empty span { font-size:28px; display:block; margin-bottom:8px; color:var(--accent); }
.bell-empty p { font-size:13px; }

/* =============================================================
   Module Tâches
   ============================================================= */

/* Filtres */
.tache-filtres { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:14px 0 18px; }
.tc-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; background:rgba(255,255,255,.15); border-radius:100px; font-size:11px; font-weight:700; padding:0 5px; margin-left:4px; }

/* Liste tâches */
.tache-check { background:none; border:1.5px solid var(--line); border-radius:50%; width:24px; height:24px; cursor:pointer; color:var(--muted); font-size:13px; display:flex; align-items:center; justify-content:center; transition:.12s; }
.tache-check:hover { border-color:var(--accent); color:var(--accent); }
.tache-check.is-done { background:var(--accent); border-color:var(--accent); color:#fff; }
.tache-titre { font-weight:600; font-size:14px; color:var(--paper); text-decoration:none; }
.tache-titre:hover { color:var(--accent); }
.tache-desc { font-size:12px; color:var(--muted); margin-top:2px; }
.done-txt { text-decoration:line-through; opacity:.5; }
.row-retard { border-left:3px solid var(--danger); }
.txt-danger { color:var(--danger); }

/* Catégorie chip */
.cat-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; border:1px solid; border-radius:100px; padding:2px 10px; }

/* Priorité dots */
.prio-dot { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; }
.prio-dot::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; }
.prio-haute::before   { background:#ef4444; }
.prio-normale::before { background:#f59e0b; }
.prio-basse::before   { background:#10b981; }

/* Kanban tâches */
.kanban-taches { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; margin-top:8px; }
.kt-col { background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.kt-col-head { padding:12px 16px; font-weight:700; font-size:13px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.kt-col-body { padding:10px; display:flex; flex-direction:column; gap:8px; min-height:80px; }
.kt-empty { text-align:center; color:var(--muted); font-size:13px; padding:20px 0; }

.kt-card { background:var(--ink); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.kt-card-retard { border-left:3px solid var(--danger); }
.kt-card-head { display:flex; justify-content:space-between; align-items:center; }
.kt-cat { font-size:11px; font-weight:600; }
.kt-titre { font-size:13px; font-weight:600; color:var(--paper); text-decoration:none; line-height:1.4; }
.kt-titre:hover { color:var(--accent); }
.kt-ech,.kt-lien,.kt-rec { font-size:11.5px; color:var(--muted); }
.kt-actions { margin-top:4px; }
.kt-btn { width:100%; padding:6px; background:var(--ink-2); border:1px solid var(--line); border-radius:6px; font-size:12px; font-weight:600; color:var(--paper); cursor:pointer; transition:.1s; font-family:inherit; }
.kt-btn:hover { background:var(--accent); border-color:var(--accent); }

@media(max-width:768px){ .kanban-taches { grid-template-columns:1fr; } }

/* =============================================================
   Module Logistique
   ============================================================= */

/* Alertes stock */
.log-alerte-box { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:18px; }
.log-alerte-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.log-alerte-chip { display:inline-flex; align-items:center; gap:8px; background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3); border-radius:100px; padding:5px 12px; font-size:12.5px; color:var(--paper); text-decoration:none; }
.log-alerte-chip:hover { background:rgba(239,68,68,.25); }
.log-qte-crit { color:#f87171; font-size:11px; font-weight:700; }
.log-stock-num { font-size:18px; font-weight:700; font-family:var(--font-display); }
.log-stock-crit { color:#f87171 !important; }
.log-stock-big { display:flex; align-items:baseline; gap:10px; margin:10px 0; }
.log-stock-num-big { font-size:42px; font-weight:800; font-family:var(--font-display); }
.log-qte-form { display:flex; gap:6px; align-items:center; }
.log-qte-input { width:60px !important; }
.log-mvt-form { }

/* Checklist statuts */
.log-av { color:var(--accent); }
.log-ok { color:var(--mint); }
.log-ko { color:#f87171; font-weight:700; }
.log-warning { background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.4); border-radius:var(--radius-sm); padding:10px 14px; font-size:13.5px; margin-bottom:12px; }
.btn-vert { background:var(--mint) !important; color:#fff !important; }
.btn-vert:hover { background:#5cb85c !important; }
.txt-green { color:var(--mint); }

/* Besoin rouleaux 15j */
.log-besoin-box { border-radius:var(--radius-sm); padding:16px 18px; margin-bottom:20px; }
.log-besoin-ok  { background:rgba(110,231,183,.1); border:1px solid rgba(110,231,183,.3); }
.log-besoin-ko  { background:rgba(239,68,68,.1);   border:1px solid rgba(239,68,68,.3); }
.log-besoin-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.log-besoin-icon { font-size:22px; flex-shrink:0; }
.log-besoin-sub  { font-size:13px; color:var(--muted); margin-top:3px; }
.log-besoin-table { width:100%; font-size:13px; border-collapse:collapse; }
.log-besoin-table th { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:4px 8px 6px; border-bottom:1px solid var(--line); }
.log-besoin-table td { padding:5px 8px; border-bottom:1px solid rgba(255,255,255,.04); }

/* =============================================================
   Module Maintenance
   ============================================================= */
.maint-etat { display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; padding:3px 10px; border-radius:100px; }
.etat-ok   { background:rgba(110,231,183,.15); color:#4ade80; }
.etat-warn { background:rgba(251,191,36,.15);  color:#fbbf24; }
.etat-ko   { background:rgba(239,68,68,.15);   color:#f87171; }
.maint-header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:4px; }
.maint-etat-big { font-size:18px; font-weight:700; padding:8px 18px; border-radius:var(--radius-sm); }
.txt-warn { color:#fbbf24; }

/* Section contours fiche événement */
.contours-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.contour-card { background:var(--ink); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; display:flex; flex-direction:column; gap:8px; }
.contour-thumb { aspect-ratio:4/3; background:var(--ink-2); border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.contour-thumb img { width:100%; height:100%; object-fit:contain; }
.contour-no-thumb { font-size:32px; }
.contour-info { display:flex; flex-direction:column; gap:3px; font-size:13px; }
.contour-actions { margin-top:auto; }
@media(max-width:768px){ .contours-grid { grid-template-columns:1fr; } }

/* ---------- Bloc "À faire aujourd'hui" ---------- */
.todo-block { margin-bottom: 32px; }
.todo-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.todo-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.todo-badge { background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
  min-width: 24px; height: 24px; padding: 0 8px; border-radius: 100px;
  display: inline-flex; align-items: center; justify-content: center; }
.todo-allclear { color: var(--mint); font-size: 14px; font-weight: 500; }

.todo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.todo-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; }
.todo-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.todo-card-title { font-size: 14px; font-weight: 600; color: var(--paper); }
.todo-count { font-size: 13px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 7px;
  border-radius: 100px; background: var(--ink-3); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; }
.todo-count-on { background: var(--accent); color: #fff; }
.todo-montant { font-size: 13px; color: var(--accent-2); font-weight: 600; margin-bottom: 8px; }

.todo-list { list-style: none; margin: 0 0 10px; padding: 0; flex: 1; }
.todo-list li { border-bottom: 1px solid rgba(255,255,255,.05); }
.todo-list li:last-child { border-bottom: none; }
.todo-list li a { display: flex; align-items: center; gap: 6px; justify-content: space-between;
  padding: 7px 0; color: var(--paper); text-decoration: none; font-size: 13.5px; }
.todo-list li a:hover { color: var(--accent); }
.todo-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.todo-prio { color: var(--accent); font-size: 9px; }
.todo-empty { padding: 10px 0; color: var(--muted); font-size: 13px; font-style: italic; }
.todo-link { font-size: 12.5px; color: var(--muted); text-decoration: none; margin-top: auto; }
.todo-link:hover { color: var(--accent); }

/* ---------- Prochains événements ---------- */
.evt-list { display: flex; flex-direction: column; gap: 8px; }
.evt-row { display: flex; align-items: center; gap: 16px; padding: 12px 14px;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--paper); transition: border-color .15s, transform .15s; }
.evt-row:hover { border-color: var(--accent); transform: translateX(2px); }
.evt-date { display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 48px; padding: 6px 0; background: var(--ink-3); border-radius: 8px; }
.evt-jour { font-size: 20px; font-weight: 700; line-height: 1; }
.evt-mois { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.evt-main { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.evt-nom { font-size: 15px; font-weight: 600; }
.evt-sub { font-size: 13px; color: var(--muted); }
.evt-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.evt-badge { font-size: 12px; font-weight: 600; color: var(--accent-2);
  background: rgba(255,209,102,.12); padding: 3px 9px; border-radius: 100px; }
.evt-borne { font-size: 12px; color: var(--mint); }
.evt-borne-none { color: var(--muted); }

/* ---------- Trésorerie attendue ---------- */
.treso { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.treso-stack { flex: 1; min-width: 260px; }
.treso-bar { height: 22px; border-radius: 100px; overflow: hidden; background: var(--accent-2);
  /* fond = reste à percevoir (orange), rempli = encaissé (vert) */
  position: relative; }
.treso-encaisse { height: 100%; background: var(--mint); border-radius: 100px 0 0 100px; }
.treso-legend { display: flex; gap: 22px; margin-top: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.treso-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.treso-dot-in { background: var(--mint); }
.treso-dot-out { background: var(--accent-2); }
.treso-total { text-align: right; }
.treso-total-label { display: block; font-size: 13px; color: var(--muted); }
.treso-total-value { font-family: var(--font-display); font-size: 26px; font-weight: 700; }

/* ---------- Occupation 12 mois ---------- */
.occ12 { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 10px; }
.occ12-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.occ12-bar-wrap { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.occ12-nb { font-size: 12px; font-weight: 600; color: var(--muted); }
.occ12-bar { width: 70%; max-width: 40px; background: linear-gradient(to top, var(--accent), var(--accent-2));
  border-radius: 5px 5px 0 0; min-height: 3px; transition: height .3s; }
.occ12-label { font-size: 11px; color: var(--muted); text-align: center; margin-top: 6px; line-height: 1.3; }
.occ12-annee { font-size: 9px; opacity: .6; }

@media (max-width: 760px) {
    .evt-row { flex-wrap: wrap; gap: 10px; }
    .evt-meta { flex-direction: row; align-items: center; }
    .treso { flex-direction: column; align-items: stretch; }
    .treso-total { text-align: left; }
    .occ12 { height: 120px; }
    .occ12-label { font-size: 9px; }
}

/* ---------- Galeries admin (fiche événement) ---------- */
.gal-admin-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gal-admin-card { background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; }
.gal-admin-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gal-admin-files { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.gal-admin-file { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 8px; background: var(--ink-2); border-radius: 6px; font-size: 13px; }
.gal-admin-file a { color: var(--paper); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-admin-file a:hover { color: var(--accent); }
@media (max-width: 760px) { .gal-admin-wrap { grid-template-columns: 1fr; } }

/* ---------- Option audio + message d'accueil (fiche événement) ---------- */
.audio-option { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 14px; }
.audio-msg { padding: 14px 16px; background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin-bottom: 14px; }
.audio-msg strong { display: block; margin-bottom: 4px; }

/* ---------- Matériel annexe dans la fiche logistique ---------- */
.annexe-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.annexe-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.annexe-cat { font-size: 12px; font-weight: 600; color: var(--accent);
  background: rgba(255,47,91,.12); padding: 3px 10px; border-radius: 100px; flex-shrink: 0; }
.annexe-nom { font-weight: 500; }

/* Bloc réactivation de galerie */
.gal-reactiver { margin-top: 10px; padding: 10px 12px; background: rgba(255,193,7,.08);
  border: 1px solid rgba(255,193,7,.3); border-radius: var(--radius-sm); font-size: 13px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }