/* ==========================================================================
   VDI Manager — Design Slate / Indigo
   ========================================================================== */

/* ── Variables ─────────────────────────────────────────────────────────── */

:root {
    /* Brand */
    --vdi-primary:       #1e293b;
    --vdi-accent:        #6366f1;
    --vdi-accent-hover:  #4f46e5;
    --vdi-accent-light:  #eef2ff;

    /* Sémantique */
    --vdi-success:   #059669;
    --vdi-warning:   #d97706;
    --vdi-danger:    #dc2626;
    --vdi-info:      #0284c7;

    /* Layout */
    --vdi-bg:        #f1f5f9;
    --vdi-card-bg:   #ffffff;
    --vdi-border:    #e2e8f0;
    --vdi-text:      #1e293b;
    --vdi-muted:     #64748b;

    /* Catégorielles (pas des états success/warning/danger/info) */
    --vdi-reunion:   #e67e22;
    --vdi-birthday:  #ff7eb6;
    --vdi-facturx:   #7c3aed;
    --vdi-radius:    12px;
    --vdi-radius-sm: 6px;
    --vdi-shadow:    0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
    --vdi-shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);

    /* Override Bootstrap primary */
    --bs-primary:     #6366f1;
    --bs-primary-rgb: 99, 102, 241;
    --bs-link-color:  #6366f1;
    --bs-focus-ring-color: rgba(99, 102, 241, .25);
}

/* ── Base ──────────────────────────────────────────────────────────────── */

.vdi-wrap {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    color: var(--vdi-text);
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
}

/* ── Alertes ───────────────────────────────────────────────────────────── */

.vdi-alert {
    padding: 14px 18px;
    border-radius: var(--vdi-radius-sm);
    margin-bottom: 16px;
    font-weight: 500;
    border-left: 4px solid currentColor;
}

.vdi-alert--success { background: #ecfdf5; color: #065f46; }
.vdi-alert--error,
.vdi-alert--danger  { background: #fef2f2; color: #7f1d1d; }
.vdi-alert--warning { background: #fffbeb; color: #78350f; }
.vdi-alert--info    { background: #eff6ff; color: #1e40af; }

.vdi-notice {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 3px solid var(--vdi-warning);
    border-radius: var(--vdi-radius-sm);
    padding: 12px 16px;
    margin: 8px 0;
    color: #78350f;
}

.vdi-hint {
    font-size: 0.8rem;
    color: var(--vdi-muted);
    margin-top: 5px;
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.vdi-section,
.section-block {
    background: var(--vdi-card-bg);
    border: 1px solid var(--vdi-border);
    margin-bottom: 24px;
    border-radius: var(--vdi-radius);
    overflow: hidden;
    box-shadow: var(--vdi-shadow-md);
}

/* Remplacement du style "Excel" → header propre avec accent gauche */
.vdi-section h3,
.excel-header {
    background: var(--vdi-card-bg);
    color: var(--vdi-primary);
    font-weight: 700;
    padding: 15px 20px;
    border-bottom: 1px solid var(--vdi-border);
    border-left: 3px solid var(--vdi-accent);
    font-size: 0.73rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vdi-section__body {
    padding: 20px;
}

.info-label {
    color: var(--vdi-muted);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 5px;
}

/* ── KPI Cards ─────────────────────────────────────────────────────────── */

.vdi-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.vdi-kpi {
    background: var(--vdi-card-bg);
    border: 1px solid var(--vdi-border);
    border-radius: var(--vdi-radius);
    padding: 20px;
    text-align: center;
    border-top: 4px solid var(--vdi-accent);
    box-shadow: var(--vdi-shadow);
    transition: transform .15s, box-shadow .15s;
}

.vdi-kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--vdi-shadow-md);
}

.vdi-kpi--primary { border-top-color: var(--vdi-accent);   }
.vdi-kpi--warning { border-top-color: var(--vdi-warning);  }
.vdi-kpi--success { border-top-color: var(--vdi-success);  }
.vdi-kpi--info    { border-top-color: var(--vdi-info);     }
.vdi-kpi--danger  { border-top-color: var(--vdi-danger);   }

.vdi-kpi__value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--vdi-primary);
    line-height: 1.2;
    margin: 6px 0;
}

.vdi-kpi--primary .vdi-kpi__value { color: var(--vdi-accent);   }
.vdi-kpi--warning .vdi-kpi__value { color: var(--vdi-warning);  }
.vdi-kpi--success .vdi-kpi__value { color: var(--vdi-success);  }
.vdi-kpi--info    .vdi-kpi__value { color: var(--vdi-info);     }
.vdi-kpi--danger  .vdi-kpi__value { color: var(--vdi-danger);   }

.vdi-kpi__label {
    display: block;
    font-size: 0.7rem;
    color: var(--vdi-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.vdi-kpi__sub {
    font-size: 0.7rem;
    color: var(--vdi-muted);
    margin-top: 4px;
}

/* ── Navigation rapide ─────────────────────────────────────────────────── */

.vdi-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.vdi-nav-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: var(--vdi-card-bg);
    border: 1px solid var(--vdi-border);
    border-radius: var(--vdi-radius);
    padding: 20px 12px;
    text-decoration: none;
    color: var(--vdi-text);
    font-weight: 600;
    font-size: 0.82rem;
    transition: all .15s;
    box-shadow: var(--vdi-shadow);
}

.vdi-nav-card:hover {
    background: var(--vdi-accent-light);
    border-color: var(--vdi-accent);
    color: var(--vdi-accent);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--vdi-shadow-md);
}

.vdi-nav-card__icon { font-size: 2rem; }

/* ── Blocs personnalisables (Accueil / Statistiques) ─────────────────────
   2 colonnes sur desktop plutôt qu'un empilement vertical strict — .vdi-card
   (padding:32px, max-width:520px, centré) est pensé pour des boîtes isolées
   (connexion, etc.), pas pour des blocs de tableau de bord côte à côte : on
   neutralise cette contrainte dans ce contexte précis. */
.vdi-widgets-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    align-items: start;
    gap: 20px;
}
.vdi-widgets-row .vdi-card {
    max-width: none;
    margin: 0;
    text-align: left;
}
.vdi-widgets-row .section-block { margin-bottom: 0; }

@media (max-width: 700px) {
    .vdi-widgets-row { grid-template-columns: 1fr; }
}

/* ── Tableaux — suppression style Excel ────────────────────────────────── */

.vdi-table-wrap { overflow-x: auto; }

.vdi-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--vdi-card-bg);
    font-size: 0.875rem;
}

.vdi-table th {
    background: #f8fafc;
    color: var(--vdi-muted);
    padding: 11px 14px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 2px solid var(--vdi-border);
}

.vdi-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.vdi-table tbody tr:hover { background: #f8fafc; }
.vdi-table tbody tr:last-child td { border-bottom: none; }

/* Override Bootstrap table-bordered — retire les bordures latérales */
.vdi-wrap .table-bordered,
.vdi-wrap .table-bordered > :not(caption) > * {
    border: none !important;
}

.vdi-wrap .table-bordered > :not(caption) > * > * {
    border-width: 0 0 1px 0 !important;
    border-color: #f1f5f9 !important;
}

.vdi-wrap .table thead th {
    background: #f8fafc !important;
    color: var(--vdi-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: 11px 14px !important;
    border-bottom: 2px solid var(--vdi-border) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

.vdi-wrap .table td {
    padding: 10px 14px !important;
    vertical-align: middle !important;
    border-color: #f1f5f9 !important;
    border-left: none !important;
    border-right: none !important;
}

.vdi-wrap .table-hover > tbody > tr:hover > * {
    background-color: #f8fafc !important;
    --bs-table-accent-bg: transparent;
    --bs-table-color: var(--vdi-text);
}

.vdi-wrap .table tbody tr:last-child td { border-bottom: none !important; }
.vdi-wrap .table.shadow-sm { box-shadow: none !important; }

/* ── Badges ────────────────────────────────────────────────────────────── */

.vdi-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.vdi-badge--success { background: #ecfdf5; color: #065f46; }
.vdi-badge--warning { background: #fffbeb; color: #92400e; }
.vdi-badge--danger  { background: #fef2f2; color: #991b1b; }
.vdi-badge--info    { background: #eff6ff; color: #1e40af; }
.vdi-badge--default { background: #f1f5f9; color: #475569; }

/* Bootstrap badges — couleurs plus douces */
.vdi-wrap .badge.bg-success   { background: #059669 !important; }
.vdi-wrap .badge.bg-warning   { background: #d97706 !important; color: #fff !important; }
.vdi-wrap .badge.bg-danger    { background: #dc2626 !important; }
.vdi-wrap .badge.bg-primary   { background: var(--vdi-accent) !important; }
.vdi-wrap .badge.bg-info      { background: var(--vdi-info)   !important; }
.vdi-wrap .badge.bg-secondary { background: var(--vdi-muted)  !important; }

/* ── Bootstrap buttons overrides ──────────────────────────────────────── */

.vdi-wrap .btn-primary {
    background-color: var(--vdi-accent) !important;
    border-color: var(--vdi-accent-hover) !important;
}

.vdi-wrap .btn-primary:hover {
    background-color: var(--vdi-accent-hover) !important;
}

/* Variantes pleines (pas seulement outline) — footers de modale notamment */
.vdi-wrap .btn-secondary { background-color: var(--vdi-muted)   !important; border-color: var(--vdi-muted)   !important; }
.vdi-wrap .btn-success   { background-color: var(--vdi-success) !important; border-color: var(--vdi-success) !important; }
.vdi-wrap .btn-danger    { background-color: var(--vdi-danger)  !important; border-color: var(--vdi-danger)  !important; }
.vdi-wrap .btn-info      { background-color: var(--vdi-info)    !important; border-color: var(--vdi-info)    !important; }

.vdi-wrap .btn-outline-primary {
    color: var(--vdi-accent) !important;
    border-color: var(--vdi-accent) !important;
}

.vdi-wrap .btn-outline-primary:hover {
    background-color: var(--vdi-accent) !important;
    color: #fff !important;
}

/* Mêmes overrides pour les autres variantes outline — auparavant seul "primary"
   était harmonisé, success/danger/info/secondary gardaient les couleurs Bootstrap
   par défaut (vert/rouge/bleu ciel/gris légèrement différents de la palette VDI). */
.vdi-wrap .btn-outline-success { color: var(--vdi-success) !important; border-color: var(--vdi-success) !important; }
.vdi-wrap .btn-outline-success:hover { background-color: var(--vdi-success) !important; color: #fff !important; }

.vdi-wrap .btn-outline-danger { color: var(--vdi-danger) !important; border-color: var(--vdi-danger) !important; }
.vdi-wrap .btn-outline-danger:hover { background-color: var(--vdi-danger) !important; color: #fff !important; }

.vdi-wrap .btn-outline-info { color: var(--vdi-info) !important; border-color: var(--vdi-info) !important; }
.vdi-wrap .btn-outline-info:hover { background-color: var(--vdi-info) !important; color: #fff !important; }

.vdi-wrap .btn-outline-secondary { color: var(--vdi-muted) !important; border-color: var(--vdi-border) !important; }
.vdi-wrap .btn-outline-secondary:hover { background-color: var(--vdi-muted) !important; border-color: var(--vdi-muted) !important; color: #fff !important; }

/* ── Cartes ────────────────────────────────────────────────────────────── */

.vdi-card {
    background: var(--vdi-card-bg);
    border: 1px solid var(--vdi-border);
    border-radius: var(--vdi-radius);
    box-shadow: var(--vdi-shadow-md);
    padding: 32px;
    text-align: center;
    max-width: 520px;
    margin: 24px auto;
}

.vdi-card h2 { margin: 8px 0 12px; font-size: 1.25rem; color: var(--vdi-primary); font-weight: 700; }
.vdi-card p  { color: var(--vdi-muted); margin-bottom: 12px; }
.vdi-card__icon { font-size: 2.5rem; display: block; margin-bottom: 10px; }

.vdi-card--success { border-top: 4px solid var(--vdi-success); }
.vdi-card--warning { border-top: 4px solid var(--vdi-warning); }
.vdi-card--connect { border-top: 4px solid var(--vdi-accent);  }

/* ── Boutons VDI ───────────────────────────────────────────────────────── */

.vdi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--vdi-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
    letter-spacing: 0.02em;
    font-family: inherit;
}

.vdi-btn:hover { filter: brightness(.93); text-decoration: none; }

.vdi-btn--primary { background: var(--vdi-accent);  border-color: var(--vdi-accent);  color: #fff; }
.vdi-btn--outline { background: transparent;         border-color: var(--vdi-accent);  color: var(--vdi-accent); }
.vdi-btn--danger  { background: var(--vdi-danger);   border-color: var(--vdi-danger);  color: #fff; }
.vdi-btn--success { background: var(--vdi-success);  border-color: var(--vdi-success); color: #fff; }
.vdi-btn--sm      { padding: 5px 12px; font-size: 0.78rem; }
.vdi-btn--full    { width: 100%; }
.vdi-btn--xl      { padding: 13px 28px; font-size: 1rem; }

.vdi-btn--excel { background: var(--vdi-accent-light); border-color: var(--vdi-accent); color: var(--vdi-accent); }

.vdi-btn--google {
    background: #fff;
    border: 1px solid var(--vdi-border);
    color: var(--vdi-text);
    padding: 10px 20px;
    font-size: 0.95rem;
    box-shadow: var(--vdi-shadow);
}

.vdi-button-group { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ── Formulaires ───────────────────────────────────────────────────────── */

.form-control, .form-select {
    border-radius: var(--vdi-radius-sm) !important;
    border: 1px solid var(--vdi-border) !important;
    font-size: 0.875rem !important;
    color: var(--vdi-text);
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.form-control:focus, .form-select:focus {
    border-color: var(--vdi-accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15) !important;
    outline: none;
}

.search-results {
    position: absolute;
    z-index: 1000;
    width: 100%;
    background: #fff;
    border: 1px solid var(--vdi-border);
    border-top: none;
    border-radius: 0 0 var(--vdi-radius-sm) var(--vdi-radius-sm);
    max-height: 240px;
    overflow-y: auto;
    box-shadow: var(--vdi-shadow-md);
}

.search-item {
    padding: 9px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.83rem;
    transition: background .1s;
}

.search-item:hover {
    background: var(--vdi-accent-light);
    color: var(--vdi-accent);
}

/* ── Modals ────────────────────────────────────────────────────────────── */

.modal-content {
    border-radius: var(--vdi-radius) !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.15) !important;
    overflow: hidden;
}

.modal-header.bg-primary {
    background: var(--vdi-primary) !important;
}

.modal-header.bg-info {
    background: var(--vdi-info) !important;
}

.modal-header {
    border-bottom: 1px solid var(--vdi-border) !important;
    padding: 16px 20px !important;
}

.modal-body {
    padding: 22px 24px !important;
}

.modal-footer {
    border-top: 1px solid var(--vdi-border) !important;
    padding: 14px 20px !important;
    background: #f8fafc;
}

/* ── Accordéons (achats) ───────────────────────────────────────────────── */

.accordion-item {
    border: 1px solid var(--vdi-border) !important;
    margin-bottom: 8px;
    border-radius: var(--vdi-radius-sm) !important;
    overflow: hidden;
    box-shadow: var(--vdi-shadow);
}

.accordion-button {
    padding: 12px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--vdi-card-bg);
    color: var(--vdi-text);
    font-family: inherit;
}

.accordion-button:not(.collapsed) {
    background: var(--vdi-accent-light);
    color: var(--vdi-accent);
    box-shadow: none;
    border-bottom: 1px solid #c7d2fe;
}

.accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
    border-color: var(--vdi-accent);
}

/* ── Liens ─────────────────────────────────────────────────────────────── */

.vdi-link-more {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 14px;
    background: #f8fafc;
    border: 1px solid var(--vdi-border);
    border-radius: var(--vdi-radius-sm);
    color: var(--vdi-muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    transition: all .15s;
}

.vdi-link-more:hover {
    background: var(--vdi-accent-light);
    color: var(--vdi-accent);
    border-color: var(--vdi-accent);
    text-decoration: none;
}

/* ── Setup / Carrousel ─────────────────────────────────────────────────── */

.vdi-setup { max-width: 560px; margin: 0 auto; }
.vdi-setup__header { text-align: center; margin-bottom: 24px; }
.vdi-setup__header h2 { font-size: 1.4rem; color: var(--vdi-primary); margin: 0 0 6px; font-weight: 700; }
.vdi-setup__header p  { color: var(--vdi-muted); margin: 0; font-size: 0.9rem; }

.vdi-carousel {
    background: var(--vdi-card-bg);
    border: 1px solid var(--vdi-border);
    border-top: 3px solid var(--vdi-accent);
    border-radius: var(--vdi-radius);
    padding: 32px 28px;
    min-height: 300px;
    box-shadow: var(--vdi-shadow-md);
}

.vdi-carousel__slide { display: none; }
.vdi-carousel__slide.active { display: block; animation: vdiFadeIn .25s ease; }

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

.vdi-carousel__visual { font-size: 2.8rem; text-align: center; margin-bottom: 16px; display: block; }

.vdi-carousel__slide h3 {
    text-align: center; color: var(--vdi-primary); font-size: 1.15rem;
    margin: 0 0 14px; background: none; border: none; padding: 0;
    text-transform: none; letter-spacing: 0; font-weight: 700;
}

.vdi-carousel__slide p {
    color: var(--vdi-muted); line-height: 1.7; margin-bottom: 10px;
    text-align: center; font-size: 0.9rem;
}

.vdi-carousel__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }

.vdi-carousel__chips span {
    background: var(--vdi-accent-light); color: var(--vdi-accent);
    padding: 4px 12px; border-radius: 20px;
    font-size: 0.8rem; font-weight: 600; border: 1px solid #c7d2fe;
}

.vdi-setup__perm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.vdi-setup__perm-list li {
    display: flex; align-items: flex-start; gap: 10px;
    background: #f8fafc; border: 1px solid var(--vdi-border);
    border-radius: var(--vdi-radius-sm); padding: 12px 14px;
}

.vdi-setup__perm-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.vdi-setup__perm-list strong { color: var(--vdi-text); font-size: 0.9rem; }
.vdi-setup__perm-list small  { color: var(--vdi-muted); font-size: 0.8rem; }

.vdi-setup__steps { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 22px; }

.vdi-setup__step { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--vdi-text); }

.vdi-setup__step-num {
    width: 28px; height: 28px; background: var(--vdi-accent); color: #fff;
    border-radius: 50%; font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.vdi-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }

.vdi-carousel__btn {
    background: var(--vdi-card-bg); border: 1px solid var(--vdi-border);
    border-radius: var(--vdi-radius-sm); width: 34px; height: 34px;
    font-size: 0.9rem; cursor: pointer; color: var(--vdi-text);
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}

.vdi-carousel__btn:hover:not(:disabled) { background: var(--vdi-accent-light); border-color: var(--vdi-accent); }
.vdi-carousel__btn:disabled { opacity: .4; cursor: default; }

.vdi-carousel__dots { display: flex; gap: 6px; }
.vdi-carousel__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--vdi-border); cursor: pointer; transition: background .2s; }
.vdi-carousel__dot.active { background: var(--vdi-accent); }

.vdi-setup__skip { text-align: center; margin-top: 14px; font-size: 0.83rem; }
.vdi-setup__skip a { color: var(--vdi-muted); text-decoration: none; }
.vdi-setup__skip a:hover { color: var(--vdi-accent); }

/* ── Auth ──────────────────────────────────────────────────────────────── */

.vdi-auth {
    display: flex; justify-content: center; align-items: flex-start;
    padding: 48px 16px; min-height: 60vh;
}

.vdi-auth__box {
    background: var(--vdi-card-bg);
    border: 1px solid var(--vdi-border);
    border-radius: var(--vdi-radius);
    box-shadow: var(--vdi-shadow-md);
    padding: 40px 36px;
    width: 100%; max-width: 420px;
    border-top: 3px solid var(--vdi-accent);
}

.vdi-auth__box--wide { max-width: 500px; }
.vdi-auth__logo { text-align: center; margin-bottom: 28px; }
.vdi-auth__icon { font-size: 2.6rem; display: block; margin-bottom: 10px; }
.vdi-auth__logo h2 { margin: 0; font-size: 1.25rem; color: var(--vdi-primary); font-weight: 700; }

.vdi-form { display: flex; flex-direction: column; gap: 18px; }
.vdi-form__group { display: flex; flex-direction: column; gap: 6px; }

.vdi-form__group label {
    font-size: 0.7rem; font-weight: 700; color: var(--vdi-muted);
    text-transform: uppercase; letter-spacing: .05em;
}

.vdi-form__group input[type="text"],
.vdi-form__group input[type="email"],
.vdi-form__group input[type="password"] {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--vdi-border);
    border-radius: var(--vdi-radius-sm);
    font-size: 0.9rem; color: var(--vdi-text);
    background: #fff; transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box; font-family: inherit;
}

.vdi-form__group input:focus {
    outline: none;
    border-color: var(--vdi-accent);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.vdi-form__pw-wrap { display: flex; align-items: stretch; }
.vdi-form__pw-wrap input { flex: 1; border-radius: var(--vdi-radius) 0 0 var(--vdi-radius) !important; }

.vdi-form__pw-toggle {
    flex-shrink: 0;
    width: 48px;
    background: var(--vdi-bg, #fff);
    border: 1px solid var(--vdi-border, #d1d5db);
    border-left: none;
    border-radius: 0 var(--vdi-radius) var(--vdi-radius) 0;
    cursor: pointer;
    font-size: 1rem;
    color: var(--vdi-muted);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.vdi-form__pw-toggle:hover { background: var(--vdi-surface, #f9fafb); }

.vdi-form__check { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; }

.vdi-form__check label {
    display: flex; align-items: center; gap: 5px;
    cursor: pointer; color: var(--vdi-muted); text-transform: none; font-weight: normal;
}

.vdi-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.vdi-auth__links {
    display: flex; justify-content: center; align-items: center;
    gap: 8px; margin-top: 18px; font-size: 0.85rem;
}

.vdi-auth__links a { color: var(--vdi-accent); text-decoration: none; }
.vdi-auth__links a:hover { text-decoration: underline; }
.vdi-auth__sep { color: var(--vdi-border); }

/* ── Dashboard header ──────────────────────────────────────────────────── */

.vdi-dashboard__header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border: none;
    border-radius: var(--vdi-radius);
    padding: 24px 28px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--vdi-shadow-md);
}

.vdi-dashboard__header h2 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
}

.vdi-dashboard__header p {
    margin: 0;
    color: rgba(255,255,255,.6);
    font-size: 0.875rem;
}

.vdi-dashboard__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Misc ──────────────────────────────────────────────────────────────── */

.vdi-wip {
    color: var(--vdi-muted); font-style: italic;
    text-align: center; padding: 48px;
}

/* ── Client fiches de présentation ─────────────────────────────────────── */

.vdi-clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
}

.vdi-client-card {
    background: var(--vdi-card-bg);
    border: 1px solid var(--vdi-border);
    border-radius: var(--vdi-radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s, background .15s;
    border-left: 4px solid transparent;
}

.vdi-client-card:hover {
    box-shadow: var(--vdi-shadow-lg);
    border-left-color: var(--vdi-accent);
    background: #fafbff;
}

.vdi-client-card__avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
    letter-spacing: -.5px;
}

.vdi-client-card__info {
    flex: 1;
    min-width: 0;
}

.vdi-client-card__nom {
    font-weight: 700;
    font-size: .95rem;
    color: var(--vdi-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vdi-client-card__meta {
    font-size: .76rem;
    color: var(--vdi-muted);
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    line-height: 1.6;
}

.vdi-client-card__id {
    display: inline-block;
    font-size: .62rem;
    font-weight: 700;
    color: var(--vdi-accent);
    background: var(--vdi-accent-light);
    border-radius: 10px;
    padding: 1px 7px;
    margin-top: 3px;
}

.vdi-client-card__right {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.vdi-client-card__ca {
    font-size: .88rem;
    font-weight: 700;
    color: var(--vdi-success);
    white-space: nowrap;
}

.vdi-client-card__nbcmd {
    font-size: .7rem;
    color: var(--vdi-muted);
    white-space: nowrap;
}

.vdi-client-card__actions {
    display: flex;
    gap: 4px;
}

/* Toggle tableau / fiches / grille */
.vdi-view-toggle {
    display: flex;
    gap: 4px;
}

.vdi-view-toggle button {
    padding: 4px 10px;
    border: 1px solid var(--vdi-border);
    border-radius: 6px;
    background: #f8fafc;
    cursor: pointer;
    font-size: .85rem;
    color: var(--vdi-text);
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1;
}

.vdi-view-toggle button.active {
    background: var(--vdi-accent);
    color: #fff;
    border-color: var(--vdi-accent);
}

.vdi-view-toggle button:hover:not(.active) {
    background: var(--vdi-accent-light);
    border-color: var(--vdi-accent);
    color: var(--vdi-accent);
}

/* ── Catalogue produits (grille cartes) ────────────────────────────────── */

.vdi-produit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 16px;
}

.vdi-produit-card {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s, transform .2s;
    display: flex;
    flex-direction: column;
}

.vdi-produit-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

.vdi-produit-card__icon {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #475569;
}

.vdi-produit-card__body {
    padding: 10px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vdi-produit-card__nom    { font-size: .82rem; font-weight: 700; color: #1e293b; line-height: 1.3; }
.vdi-produit-card__ref    { font-size: .72rem; color: #94a3b8; }
.vdi-produit-card__prix   { font-size: .9rem; font-weight: 700; color: #6366f1; margin-top: auto; padding-top: 6px; }
.vdi-produit-card__actions { display: flex; gap: 4px; margin-top: 8px; }
.vdi-produit-card__actions .btn { flex: 1; padding: 3px 0; font-size: .75rem; }

/* ── Notes (post-it) ───────────────────────────────────────────────────── */

/* "Tableau de liège" : fond chaud légèrement texturé derrière les post-it, pour qu'ils aient
   l'air posés/épinglés plutôt que flottants sur du blanc uni. */
.vdi-postit-board {
    background:
        radial-gradient(circle at 20% 30%, rgba(0,0,0,.025) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,.025) 0%, transparent 45%),
        #f1ede4;
    border-radius: var(--vdi-radius);
    padding: 8px;
    margin: 0 16px 16px;
}

.vdi-postit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 26px;
    padding: 18px 16px 10px;
}

.vdi-postit {
    position: relative;
    min-height: 180px;
    padding: 20px 18px 14px;
    background: var(--postit-bg, #fef08a);
    color: #3f3a12;
    box-shadow: 3px 5px 10px rgba(0,0,0,.16);
    /* Pas de clip-path ici : un clip-path sur ce conteneur découperait AUSSI ses propres
       pseudo-éléments ::before/::after (un pli dessiné dedans deviendrait invisible, ne
       laissant que le débordement de l'ombre — bug constaté). Le rectangle reste entier ;
       le pli est simulé par un triangle posé PAR-DESSUS le coin (voir ::after). */
    display: flex;
    flex-direction: column;
    transform: rotate(var(--postit-rot, -1.2deg));
    transition: transform .18s ease, box-shadow .18s ease;
}
.vdi-postit:nth-child(4n+1) { --postit-rot: -1.6deg; }
.vdi-postit:nth-child(4n+2) { --postit-rot: 1.1deg; }
.vdi-postit:nth-child(4n+3) { --postit-rot: -0.5deg; }
.vdi-postit:nth-child(4n+4) { --postit-rot: 1.6deg; }
.vdi-postit:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 6px 12px 22px rgba(0,0,0,.24);
    z-index: 2;
}
/* Ombre projetée par le coin replié sur le papier en dessous. */
.vdi-postit::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 46px; height: 46px;
    background: radial-gradient(circle at 100% 0%, rgba(0,0,0,.4) 0%, transparent 75%);
    pointer-events: none;
    z-index: 1;
}
/* Le triangle du pli lui-même — posé par-dessus le coin (pas de clip-path parent pour le
   couper), face arrière du papier en teinte pleine + un fin liseré clair à la pliure.
   box-shadow est coupé par le clip-path (n'aide donc pas à distinguer les deux "papiers"
   quand la couleur du pli est proche de celle du post-it) — on utilise plutôt
   filter: drop-shadow, qui suit le contour réel de la forme découpée et dessine un liseré
   sombre net tout le long de la diagonale : c'est CE contour qui sépare visuellement le pli
   du post-it, pas seulement le dégradé de couleur. */
.vdi-postit::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 42px; height: 42px;
    /* Le fin liseré clair près de la pointe (0-6% avant) était trop mince pour se voir comme un
       vrai reflet de "papier qui se retourne" — élargi à une bande de ~18% pour rester visible
       même de loin, avant de basculer sur la couleur pleine du pli. */
    background: linear-gradient(225deg,
        rgba(255,255,255,.95) 0%, rgba(255,255,255,.95) 18%,
        var(--postit-fold, #ca8a04) 30%, var(--postit-fold, #ca8a04) 100%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    /* Contraste renforcé (signalé encore trop discret sur les post-it de couleur claire type
       bleu ciel) : liseré sombre plus marqué le long de la diagonale, quelle que soit la
       proximité de teinte entre --postit-fold et --postit-bg. */
    filter: drop-shadow(-2px 2px 0 rgba(0,0,0,.65)) drop-shadow(-1px 1px 0 rgba(0,0,0,.5)) drop-shadow(0 0 1.5px rgba(0,0,0,.4));
    z-index: 2;
    pointer-events: none;
}

.vdi-postit__icon {
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: 8px;
    filter: drop-shadow(1px 2px 1px rgba(0,0,0,.15));
}
.vdi-postit__title {
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.25;
    margin-bottom: 8px;
    padding-right: 38px;
    word-break: break-word;
}
.vdi-postit__dessin {
    width: 100%;
    max-height: 110px;
    object-fit: contain;
    /* Transparent, pas blanc : l'aperçu (canvas Fabric) est maintenant teinté à la couleur du
       post-it lui-même — un fond blanc ici referait apparaître un rectangle blanc dès que
       object-fit:contain laisse une bande non couverte (ratio du canvas ≠ ratio de la carte). */
    background: transparent;
    border-radius: 6px;
    margin-bottom: 8px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.vdi-postit__content {
    font-size: .8rem;
    line-height: 1.42;
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
    opacity: .82;
}
/* Mini-fiche du lien (client/produit/achat) — épinglée "de travers" comme une photo punaisée
   sur le liège en arrière-plan de la grille, plutôt qu'un simple badge texte. Clic = aperçu en
   lecture seule dans la modale #fichePreviewModal (pas de navigation vers une autre page). */
.vdi-postit__linkcard {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 10px 5px 8px;
    background: #fff;
    border-radius: 4px;
    border-left: 3px solid var(--postit-fold, #64748b);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transform: rotate(-3deg);
    transition: transform .15s, box-shadow .15s;
    cursor: pointer;
    width: fit-content;
    max-width: 100%;
}
.vdi-postit__linkcard:hover { transform: rotate(0deg) scale(1.03); box-shadow: 0 3px 9px rgba(0,0,0,.28); }
.vdi-postit__linkcard__icon { font-size: .85rem; }
/* Avatar client (initiales sur fond coloré) et vignette produit — même esprit que le bandeau
   de la fiche client / la carte produit, en miniature, pour que la mini-fiche épinglée
   ressemble à un aperçu de la vraie page plutôt qu'à un simple texte. */
.vdi-postit__linkcard__avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.vdi-postit__linkcard__thumb {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
    background: #fff;
    flex-shrink: 0;
}
.vdi-postit__linkcard__label {
    font-size: .72rem;
    font-weight: 600;
    color: #334155;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}

/* Bouton "badge" cliquable (vue tableau) — mêmes déclencheurs que la mini-fiche ci-dessus,
   mais un badge Bootstrap normal plutôt qu'une carte inclinée (la vue tableau est trop dense
   pour l'effet "punaisé"). Un <button> a des styles par défaut à neutraliser pour garder
   l'apparence exacte du badge qu'il remplace. */
.vdi-fiche-link-btn {
    border: 1px solid var(--vdi-border, #dee2e6);
    cursor: pointer;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
}

/* ── Modale de consultation d'une fiche liée (client/produit/achat), lecture seule ──
   Placée hors de #vdi-app/.section-block (voir commentaire dans notes.php) pour échapper au
   même piège overflow:hidden que les menus Formes/Plus de l'éditeur. */
.vdi-fiche-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 99998;
}
.vdi-fiche-modal-backdrop.show { display: block; }
.vdi-fiche-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    background: #fff;
    border-radius: 12px;
    width: 92%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--vdi-shadow-md, 0 4px 10px rgba(0,0,0,.12));
}
.vdi-fiche-modal.show { display: block; }
.vdi-fiche-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--vdi-border, #e2e8f0);
    font-weight: 700;
}
.vdi-fiche-modal__header button {
    border: none;
    background: transparent;
    font-size: 1rem;
    cursor: pointer;
    color: #64748b;
}
.vdi-fiche-modal__body { padding: 14px 16px; }
/* Aperçu client : reproduit le bandeau coloré pleine largeur de la vraie fiche (voir
   renderClientPreview() dans notes.php) — a besoin du padding par défaut du body à zéro, le
   bandeau et les sections gèrent eux-mêmes leur propre espacement interne. */
.vdi-fiche-modal__body--flush { padding: 0; }

/* ── Aperçu en lecture seule d'une note liée, depuis les badges 📝 de clients.php/produits.php/
   achats.php — remplace la navigation directe vers l'éditeur de note (montrer l'essentiel +
   bouton "Modifier" séparé). Dupliqué dans les 3 pages (même style que le badge/modale de
   fiche liée réutilisé depuis Notes, voir plus haut) — un seul jeu de règles CSS ici, partagé
   par les trois. Couleur de fond par page via le modificateur --client/--produit/--achat
   (même palette que les post-it de la rubrique Notes). */
.vdi-note-badge-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1em;
    padding: 0;
    line-height: 1;
}
.vdi-note-add-btn {
    text-decoration: none;
    font-size: .85em;
    opacity: .55;
    transition: opacity .15s;
}
.vdi-note-add-btn:hover { opacity: 1; }
.vdi-note-preview-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    z-index: 99998;
}
.vdi-note-preview-backdrop.show { display: block; }
.vdi-note-preview-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    background: #fef08a;
    border-radius: 12px;
    width: 92%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--vdi-shadow-md, 0 4px 10px rgba(0,0,0,.12));
}
.vdi-note-preview-modal.show { display: block; }
.vdi-note-preview-modal--client  { background: #7dd3fc; }
.vdi-note-preview-modal--produit { background: #e2e8f0; }
.vdi-note-preview-modal--achat   { background: #86efac; }
.vdi-note-preview-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-weight: 700;
}
.vdi-note-preview-modal__header button {
    border: none;
    background: rgba(255,255,255,.4);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: .9rem;
    cursor: pointer;
}
.vdi-note-preview-modal__body { padding: 0 16px 14px; }
.vdi-note-preview-modal__dessin { width: 100%; max-height: 160px; object-fit: contain; background: transparent; border-radius: 6px; margin-bottom: 8px; }
.vdi-note-preview-modal__contenu { font-size: .85rem; white-space: pre-wrap; background: rgba(255,255,255,.5); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.vdi-note-preview-modal__footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid rgba(0,0,0,.08); }

/* .vdi-achat-card* est défini dans un <style> propre à templates/achats.php (pas ici) — donc
   absent quand la carte est réutilisée ailleurs (aperçu en lecture seule dans la modale de
   fiche liée de Notes, renderAchatPreview()). Dupliqué ici pour que ces deux pages restent
   visuellement identiques ; ne dupliquer que ce qui est réellement réutilisé (pas
   __reunion/__actions, absents de l'aperçu lecture seule). Garder synchronisé avec
   templates/achats.php si son style change. */
.vdi-achat-card { border-radius: 12px; border: 1px solid #e2e8f0; background: #fff; overflow: hidden; display: flex; flex-direction: column; }
.vdi-achat-card__head { padding: 12px 14px 10px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.vdi-achat-card__client { font-size: .9rem; font-weight: 700; color: #1e293b; }
.vdi-achat-card__date { font-size: .75rem; color: #64748b; margin-top: 2px; }
.vdi-achat-card__badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.vdi-achat-card__body { padding: 10px 14px; flex: 1; }
.vdi-achat-card__ligne { font-size: .78rem; color: #475569; padding: 3px 0; border-bottom: 1px dotted #e2e8f0; display: flex; justify-content: space-between; gap: 8px; }
.vdi-achat-card__ligne span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vdi-achat-card__ligne:last-child { border-bottom: none; }
.vdi-achat-card__more { font-size: .72rem; color: #94a3b8; padding-top: 4px; font-style: italic; }
.vdi-achat-card__total { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; background: #f8fafc; border-top: 2px solid #e2e8f0; }
.vdi-achat-card__total-label { font-size: .72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .5px; }
.vdi-achat-card__total-amount { font-size: 1.1rem; font-weight: 700; color: #6366f1; }

.vdi-postit__actions {
    position: absolute;
    top: 46px;
    right: 10px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
}
.vdi-postit:hover .vdi-postit__actions,
.vdi-postit:focus-within .vdi-postit__actions { opacity: 1; }
.vdi-postit__actions button,
.vdi-postit__actions a {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.75);
    cursor: pointer;
    font-size: .7rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    text-decoration: none;
}
.vdi-postit__actions button:hover,
.vdi-postit__actions a:hover { background: #fff; }

/* Épingler/favori — bouton icône discret, estompé tant qu'inactif (pas de bordure/fond
   propre : hérite du style circulaire de .vdi-postit__actions dans les cartes, et reste un
   simple glyphe minimaliste dans le tableau). */
.vdi-flag-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: .85rem;
    padding: 0 2px;
    opacity: .35;
    vertical-align: middle;
}
.vdi-flag-btn[data-active="1"] { opacity: 1; }
.vdi-flag-btn:disabled { cursor: wait; }

/* Note épinglée — liseré doré en plus de l'ombre habituelle, visible même sans survol. */
.vdi-postit--pinned {
    box-shadow: 0 0 0 2px #f59e0b, var(--vdi-shadow-md, 0 4px 10px rgba(0,0,0,.12));
}

/* ── Éditeur de note pleine page — surface unique + barre d'outils type GIMP ─────────── */

/* .section-block a un overflow:hidden global (coins arrondis) — sur cette page précise, ça
   coupait les menus déroulants Bootstrap (Formes/Plus) dès qu'ils s'ouvraient, rendant leurs
   options inaccessibles au clic. Neutralisé uniquement ici, pas sur le reste du site. */
.vdi-note-editor-block { overflow: visible; }

/* Menus "Formes"/"Plus" — implémentation maison (plus du tout Bootstrap Dropdown/Popper) :
   après plusieurs correctifs infructueux sur le composant Bootstrap (overflow, stratégie de
   positionnement Popper), la seule approche fiable était de gérer nous-mêmes le
   positionnement en position:fixed + coordonnées calculées en JS depuis le bouton
   (getBoundingClientRect) — insensible par construction à tout ancêtre avec overflow:hidden
   ou à un contexte d'empilement parent, quelle que soit sa provenance. */
.vdi-dropdown-menu {
    display: none;
    position: fixed;
    z-index: 99999;
    background: #fff;
    border: 1px solid var(--vdi-border);
    border-radius: 8px;
    box-shadow: var(--vdi-shadow-md);
    min-width: 180px;
    padding: 4px 0;
    margin: 0;
    list-style: none;
}
.vdi-dropdown-menu.show { display: block; }
/* Menu "Formes" — bien plus long qu'à l'origine (14 formes + conversions) : largeur un peu
   plus généreuse et défilement vertical au-delà d'une certaine hauteur, plutôt que de déborder
   de l'écran. */
.vdi-dropdown-menu--wide { min-width: 220px; max-height: 70vh; overflow-y: auto; }
.vdi-dropdown-menu li { list-style: none; }
/* En-tête de section non cliquable dans le menu "Formes" (Formes de base / Flèches / Symboles /
   Convertir...) — purement visuel, jamais ciblé par le filtre de recherche ni le clic. */
.vdi-shape-section {
    padding: 6px 16px 2px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vdi-muted, #94a3b8);
}
.vdi-dropdown-menu a {
    display: block;
    padding: 7px 16px;
    font-size: .85rem;
    color: var(--vdi-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.vdi-dropdown-menu a:hover { background: var(--vdi-accent-light); color: var(--vdi-accent); }

/* Les utilitaires Bootstrap .d-flex/.d-none sont TOUS en !important — un simple
   element.style.display = 'none' en JS ne peut jamais les emporter (une règle !important
   d'une feuille de style bat toujours un style inline sans !important, quelle que soit la
   spécificité). Résultat constaté : les panneaux d'options par outil restaient toujours
   visibles en même temps, aucun ne se masquait jamais en changeant d'outil. Remplacé sur
   ces panneaux précis par cette classe maison (display:flex SANS !important), pour que le
   .style.display du JS reprenne la main normalement. */
.vdi-opt-row { display: flex; }

.vdi-tool-btn.active { background: var(--vdi-accent) !important; color: #fff !important; border-color: var(--vdi-accent) !important; }
/* !important + ciblage des balises internes (strong/em/u/s) : Bootstrap a sa propre règle
   .btn-outline-secondary.active qui, selon l'ordre de cascade, pouvait laisser le texte
   sombre sur fond sombre — icône "invisible" bien que le bouton soit correctement actif. */
.vdi-text-opt.active,
.vdi-text-opt.active strong,
.vdi-text-opt.active em,
.vdi-text-opt.active u,
.vdi-text-opt.active s {
    background: var(--vdi-accent) !important;
    color: #fff !important;
    border-color: var(--vdi-accent) !important;
}

/* Canvas Fabric.js — textes/formes/images restent des objets sélectionnables/redimensionnables
   (plus un simple flux de pixels figés). Fabric enveloppe le <canvas> dans son propre
   div.canvas-container ; on stylise ce wrapper plutôt que le <canvas> brut. */
#canvasWrap .canvas-container {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
}
/* Sur tablette/tactile, un appui immobile prolongé (comme le geste "3 secondes" pour redresser
   un tracé) est normalement intercepté par le navigateur/l'OS pour ouvrir un menu contextuel,
   une loupe de sélection ou une info-bulle native — ce qui peut couper la séquence tactile avant
   que notre propre minuteur JS n'ait le temps de se déclencher. Désactivé uniquement ici. */
#canvasWrap .upper-canvas {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Impression/export PDF d'une note : pas de PDF généré côté serveur — on s'appuie sur
   l'impression native du navigateur. #vdi-print-area est injecté en JS juste avant
   window.print() (titre + image du canvas) et retiré juste après ; en dehors de l'impression
   il n'existe simplement pas dans le DOM, donc rien à cacher côté écran. */
#vdi-print-area img { max-width: 100%; }
@media print {
    body * { visibility: hidden; }
    #vdi-print-area, #vdi-print-area * { visibility: visible; }
    #vdi-print-area { position: absolute; top: 0; left: 0; width: 100%; padding: 20px; }
}

/* ── Page fade-in ──────────────────────────────────────────────────────── */

/* Pas de transform dans cette animation (même via une valeur "neutre" comme translateY(0) en
   fin de course) : `animation: ... both` MAINTIENT le style du dernier keyframe indéfiniment
   après la fin de l'animation — ce qui revient à laisser un transform actif en permanence sur
   .vdi-wrap. Or tout élément avec un transform actif devient le "containing block" de ses
   descendants position:fixed/absolute (au lieu du viewport) : les menus/modales positionnés en
   pixels via getBoundingClientRect() (calculés relatifs au viewport) se retrouvaient alors
   décalés de la distance entre .vdi-wrap et le haut réel de la page — bug découvert via les
   menus "Formes"/"Plus" de l'éditeur de note, qui s'ouvraient décalés au lieu de juste sous
   l'icône, mais qui affectait potentiellement tout élément position:fixed du site (.vdi-wrap
   enveloppe toutes les pages). Fondu en opacité seule, sans glissement. */
.vdi-wrap { animation: vdi-fade-in .22s ease both; }

@keyframes vdi-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Loading states ────────────────────────────────────────────────────── */

.btn.vdi-loading,
.vdi-btn.vdi-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.btn.vdi-loading::after,
.vdi-btn.vdi-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vdi-spin .65s linear infinite;
}

.btn.btn-outline-primary.vdi-loading::after,
.btn.btn-outline-secondary.vdi-loading::after,
.btn.btn-light.vdi-loading::after,
.vdi-btn.vdi-btn--outline.vdi-loading::after {
    border-color: rgba(0,0,0,.12);
    border-top-color: var(--vdi-accent);
}

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

/* ── Skeleton loader ───────────────────────────────────────────────────── */

.vdi-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: vdi-shimmer 1.6s infinite;
    border-radius: var(--vdi-radius-sm);
    display: inline-block;
}

@keyframes vdi-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ── KPI trend indicator ───────────────────────────────────────────────── */

.vdi-kpi__trend {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    margin-top: 5px;
    letter-spacing: .02em;
}
.vdi-kpi__trend--up   { color: var(--vdi-success); }
.vdi-kpi__trend--down { color: var(--vdi-danger);  }
.vdi-kpi__trend--flat { color: var(--vdi-muted);   }

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

.vdi-event-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: var(--vdi-radius-sm);
    border: 1px solid var(--vdi-border);
    margin-bottom: 8px;
    transition: background .15s, border-color .15s;
    cursor: default;
}

.vdi-event-item:last-child { margin-bottom: 0; }

.vdi-event-item:hover {
    background: var(--vdi-accent-light);
    border-color: #c7d2fe;
}

.vdi-event-item__date {
    text-align: center;
    min-width: 46px;
    background: var(--vdi-accent-light);
    border-radius: var(--vdi-radius-sm);
    padding: 7px 5px;
    flex-shrink: 0;
}

.vdi-event-item__day {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--vdi-accent);
    line-height: 1;
}

.vdi-event-item__month {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--vdi-accent);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.vdi-event-item__time {
    display: block;
    font-size: 0.65rem;
    color: var(--vdi-muted);
    margin-top: 3px;
}

.vdi-event-item__body { flex: 1; min-width: 0; }

.vdi-event-item__title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--vdi-text);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vdi-event-item__sub {
    font-size: 0.75rem;
    color: var(--vdi-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Mobile table → cards ──────────────────────────────────────────────── */

@media (max-width: 640px) {
    .vdi-table-cards thead { display: none; }

    .vdi-table-cards,
    .vdi-table-cards tbody,
    .vdi-table-cards tr { display: block; }

    .vdi-table-cards tbody tr {
        background: var(--vdi-card-bg);
        border: 1px solid var(--vdi-border);
        border-radius: var(--vdi-radius-sm);
        margin-bottom: 8px;
        padding: 2px 0;
        box-shadow: var(--vdi-shadow);
    }

    .vdi-table-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7px 14px !important;
        border: none !important;
        border-bottom: 1px solid #f1f5f9 !important;
        font-size: 0.83rem;
        gap: 8px;
    }

    .vdi-table-cards tbody td:last-child {
        border-bottom: none !important;
        justify-content: flex-end;
        padding-top: 8px !important;
    }

    .vdi-table-cards tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 0.65rem;
        font-weight: 700;
        color: var(--vdi-muted);
        text-transform: uppercase;
        letter-spacing: .05em;
        flex-shrink: 0;
        white-space: nowrap;
    }
}

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

@media (max-width: 768px) {
    .vdi-kpi-grid  { grid-template-columns: repeat(2, 1fr); }
    .vdi-nav-grid  { grid-template-columns: repeat(3, 1fr); }
    .vdi-dashboard__header { flex-direction: column; gap: 14px; align-items: flex-start; }
    .vdi-wrap { padding: 16px 12px; }
    .row > .col-md-9,
    .row > .col-md-3 { width: 100%; }
}

@media (max-width: 480px) {
    .vdi-kpi-grid  { grid-template-columns: repeat(2, 1fr); }
    .vdi-nav-grid  { grid-template-columns: repeat(2, 1fr); }
    .vdi-kpi__value { font-size: 1.5rem; }
    .vdi-auth__box { padding: 28px 18px; }
    .row > .col-md-6 { width: 100%; }
}

/* ==========================================================================
   PMPro — Checkout & Account (Slate / Indigo)
   ========================================================================== */

/* ── Wrapper ───────────────────────────────────────────────────────────── */

#pmpro_account {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    color: var(--vdi-text);
}

#pmpro_account > h2,
#pmpro_account > h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--vdi-primary);
    margin: 0 0 20px;
    border: none;
    background: none;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Sections / panneaux ───────────────────────────────────────────────── */

#pmpro_form .pmpro_checkout,
.pmpro_account-panel {
    background: var(--vdi-card-bg);
    border: 1px solid var(--vdi-border);
    border-radius: var(--vdi-radius);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: var(--vdi-shadow-md);
}

/* En-têtes de section — identique à .excel-header */
#pmpro_form h3,
#pmpro_form .pmpro_checkout > h3,
.pmpro_checkout-h3,
.pmpro_account-panel-header h3,
.pmpro_account-panel-header {
    background: var(--vdi-card-bg) !important;
    color: var(--vdi-primary) !important;
    font-weight: 700 !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--vdi-border) !important;
    border-left: 3px solid var(--vdi-accent) !important;
    border-top: none !important;
    border-right: none !important;
    font-size: 0.73rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Corps des panneaux (account) */
.pmpro_account-panel-body {
    padding: 18px 20px;
}

/* ── Champs ────────────────────────────────────────────────────────────── */

#pmpro_form .pmpro_checkout-field {
    padding: 10px 18px;
    border-bottom: 1px solid #f1f5f9;
}

#pmpro_form .pmpro_checkout-field:last-child { border-bottom: none; }

#pmpro_form label,
#pmpro_form .pmpro_checkout-field label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--vdi-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block;
    margin-bottom: 5px !important;
}

#pmpro_form input[type="text"],
#pmpro_form input[type="email"],
#pmpro_form input[type="password"],
#pmpro_form input[type="tel"],
#pmpro_form input[type="number"],
#pmpro_form select,
#pmpro_form textarea {
    width: 100%;
    padding: 9px 13px;
    border: 1px solid var(--vdi-border) !important;
    border-radius: var(--vdi-radius-sm) !important;
    font-size: 0.875rem;
    color: var(--vdi-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
    box-sizing: border-box;
    box-shadow: none !important;
}

#pmpro_form input[type="text"]:focus,
#pmpro_form input[type="email"]:focus,
#pmpro_form input[type="password"]:focus,
#pmpro_form input[type="tel"]:focus,
#pmpro_form select:focus {
    outline: none;
    border-color: var(--vdi-accent) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15) !important;
}

#pmpro_form .pmpro_cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Bloc prix / niveau ────────────────────────────────────────────────── */

#pmpro_level_cost,
.pmpro_level_cost {
    padding: 16px 20px;
    color: var(--vdi-muted);
    font-size: 0.9rem;
    line-height: 1.8;
    border-bottom: 1px solid #f1f5f9;
}

#pmpro_level_cost strong,
.pmpro_level_cost strong { color: var(--vdi-primary); }

/* ── Zone submit ───────────────────────────────────────────────────────── */

#pmpro_submit_span,
#pmpro_form .pmpro_checkout.pmpro_checkout_submit {
    padding: 18px 20px;
    background: #f8fafc;
    border-top: 1px solid var(--vdi-border);
}

.pmpro_btn-submit-checkout,
#pmpro_form input[type="submit"].pmpro_btn,
#pmpro_form input[type="submit"] {
    background: var(--vdi-accent) !important;
    border: none !important;
    color: #fff !important;
    padding: 13px 28px !important;
    border-radius: var(--vdi-radius-sm) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    width: 100%;
    transition: background .15s;
    font-family: inherit;
    letter-spacing: 0.02em;
    box-shadow: none !important;
}

.pmpro_btn-submit-checkout:hover,
#pmpro_form input[type="submit"]:hover {
    background: var(--vdi-accent-hover) !important;
}

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

.pmpro_error,
#pmpro_message.pmpro_error,
p.pmpro_error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid var(--vdi-danger);
    color: #7f1d1d;
    padding: 12px 16px;
    border-radius: var(--vdi-radius-sm);
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.pmpro_success,
#pmpro_message.pmpro_success,
p.pmpro_success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left: 4px solid var(--vdi-success);
    color: #065f46;
    padding: 12px 16px;
    border-radius: var(--vdi-radius-sm);
    margin-bottom: 16px;
    font-size: 0.875rem;
}

/* ── Page Mon Compte (pmpro_account) ───────────────────────────────────── */

.pmpro_account-panel-body ul {
    list-style: none;
    padding: 0; margin: 0;
}

.pmpro_account-panel-body li {
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.875rem;
    color: var(--vdi-text);
}

.pmpro_account-panel-body li:last-child { border-bottom: none; }

.pmpro_account-panel-body li strong {
    color: var(--vdi-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
}

.pmpro_account-panel-body a {
    color: var(--vdi-accent);
    text-decoration: none;
    font-weight: 500;
}

.pmpro_account-panel-body a:hover { text-decoration: underline; }

.pmpro_account-panel .pmpro_status-active   { color: var(--vdi-success); font-weight: 700; }
.pmpro_account-panel .pmpro_status-expired  { color: var(--vdi-danger);  font-weight: 700; }
.pmpro_account-panel .pmpro_status-cancelled { color: var(--vdi-muted);  font-weight: 700; }

/* Boutons du compte (modifier, annuler…) */
.pmpro_account-panel-body .pmpro_btn,
.pmpro_account-panel-body a.pmpro_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    background: var(--vdi-accent-light);
    border: 1px solid var(--vdi-accent);
    border-radius: var(--vdi-radius-sm);
    color: var(--vdi-accent) !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .15s;
    margin-top: 10px;
    cursor: pointer;
}

.pmpro_account-panel-body .pmpro_btn:hover,
.pmpro_account-panel-body a.pmpro_btn:hover {
    background: var(--vdi-accent);
    color: #fff !important;
}

/* ── Page Confirmation ─────────────────────────────────────────────────── */

.pmpro_confirmation,
#pmpro_confirmation {
    max-width: 620px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Carte de succès */
.pmpro_confirmation > p:first-of-type,
#pmpro_confirmation > p:first-of-type {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left: 4px solid var(--vdi-success);
    border-radius: var(--vdi-radius);
    padding: 18px 22px;
    color: #065f46;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 20px;
}

/* Tableau récapitulatif de la commande */
.pmpro_confirmation table,
.pmpro_review_subscription {
    width: 100%;
    border-collapse: collapse;
    background: var(--vdi-card-bg);
    border: 1px solid var(--vdi-border);
    border-radius: var(--vdi-radius);
    overflow: hidden;
    box-shadow: var(--vdi-shadow-md);
    margin-bottom: 20px;
}

.pmpro_confirmation table th,
.pmpro_review_subscription th {
    background: #f8fafc;
    color: var(--vdi-muted);
    padding: 11px 16px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 2px solid var(--vdi-border);
    text-align: left;
}

.pmpro_confirmation table td,
.pmpro_review_subscription td {
    padding: 11px 16px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--vdi-text);
}

.pmpro_confirmation table tr:last-child td,
.pmpro_review_subscription tr:last-child td { border-bottom: none; }

.pmpro_confirmation table td:first-child,
.pmpro_review_subscription td:first-child {
    color: var(--vdi-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    width: 40%;
}

/* Bouton "Accéder à votre espace" */
.pmpro_confirmation .pmpro_btn,
.pmpro_confirmation a.pmpro_btn-submit,
#pmpro_confirmation .pmpro_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vdi-accent);
    border: none;
    color: #fff !important;
    padding: 13px 28px;
    border-radius: var(--vdi-radius-sm);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .15s;
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}

.pmpro_confirmation .pmpro_btn:hover { background: var(--vdi-accent-hover); }

/* ── Pages Facturation / Annulation ───────────────────────────────────── */

/* pmpro_billing, pmpro_cancel — réutilisent les styles #pmpro_form déjà définis */
/* Titre de section spécifique */
.pmpro_billing h3,
.pmpro_cancel h3 {
    background: var(--vdi-card-bg) !important;
    color: var(--vdi-primary) !important;
    font-weight: 700 !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--vdi-border) !important;
    border-left: 3px solid var(--vdi-accent) !important;
    font-size: 0.73rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* Zone de texte confirmation annulation */
.pmpro_cancel p,
.pmpro_billing p {
    padding: 12px 18px;
    color: var(--vdi-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

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

@media (max-width: 600px) {
    #pmpro_form .pmpro_cols-2 { grid-template-columns: 1fr; }
    #pmpro_account { padding: 16px 12px 32px; }
    .pmpro_confirmation { padding: 16px 12px 32px; }
}