/* ============================================================
   L'pieces — Design System Niveau 1
   ------------------------------------------------------------
   Doctrine : docs/DESIGN_SYSTEM.md §1
   Mantra : "Prévisible avant joli. Clair avant malin. Rapide avant riche."
   Profil cible : garagiste 55 ans Android 3G + cadre flotte iPhone 15
   → comprendre l'écran en 3 secondes.

   5 classes canoniques V1 (un concept = une classe) :
   - .lp-btn--primary   bouton CTA principal
   - .lp-card           carte de contenu
   - .lp-input          champ de saisie
   - .lp-section        section de page (espacement vertical cohérent)
   - .lp-grid           grille responsive auto-fill

   Variables CSS :root définies dans base.html. On les RÉUTILISE,
   on ne les redéclare pas (cohérence garantie).
   ============================================================ */

/* ---- Section de page : espacement vertical cohérent --------- */
.lp-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px;
}
.lp-section--tight { padding: 16px 20px; }
.lp-section--loose { padding: 56px 20px; }

/* ---- Grille responsive auto-fill ---------------------------- */
.lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.lp-grid--tight { gap: 10px; }
.lp-grid--narrow { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ---- Carte de contenu --------------------------------------- */
.lp-card {
    background: var(--bg-card, #faf9f7);
    border: 1.5px solid var(--border-subtle, #e5e7eb);
    border-radius: 16px;
    padding: 22px 18px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.lp-card:hover {
    border-color: var(--accent, #e85d4c);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.lp-card--clickable { cursor: pointer; }
.lp-card--clickable:hover { transform: translateY(-2px); }

/* ---- Bouton CTA principal ----------------------------------- */
.lp-btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent, #e85d4c);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    min-height: 48px; /* Apple HIG / Android — cible tactile ≥ 44px */
    transition: background 0.15s ease, transform 0.1s ease;
}
.lp-btn--primary:hover {
    background: var(--accent-hover, #d94c3b);
}
.lp-btn--primary:active {
    transform: scale(0.98);
}
.lp-btn--primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.lp-btn--primary--block { width: 100%; }

/* ---- Champ de saisie ---------------------------------------- */
.lp-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border-subtle, #e5e7eb);
    border-radius: 12px;
    background: var(--bg-elevated, #fff);
    color: var(--text-primary, #1d1d1f);
    font-size: 16px; /* anti-zoom iOS */
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease;
}
.lp-input:focus {
    outline: none;
    border-color: var(--accent, #e85d4c);
}
.lp-input::placeholder {
    color: var(--text-muted, #999);
}

/* ---- Helpers texte sobres ---------------------------------- */
.lp-text-muted { color: var(--text-muted, #999); font-size: 0.85rem; }
.lp-text-soft  { color: var(--text-secondary, #555); font-size: 0.92rem; }

/* ============================================================
   Account templates (login, signup, password_reset, etc.)
   D13 Phase 7 batch — refactor inline → classes (CEO 04/05 17h)
   ============================================================ */
.lp-acc-card {
    max-width: 420px;
    margin: 50px auto;
    background: var(--bg-card);
    padding: 35px;
    border-radius: 16px;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-soft);
}
.lp-acc-title {
    text-align: center;
    color: var(--accent);
    margin-bottom: 28px;
    font-weight: 900;
}
.lp-acc-error {
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--accent);
}
.lp-form-group { margin-bottom: 15px; }
.lp-form-label {
    display: block;
    margin-bottom: 5px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
}
.lp-form-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-sizing: border-box;
    font-size: 16px;
}
.lp-acc-row-between {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.lp-acc-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.lp-acc-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}
.lp-link-accent {
    font-size: 0.85rem;
    color: var(--accent);
    text-decoration: none;
}
.lp-link-accent--bold {
    color: var(--accent);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
}
.lp-acc-submit {
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 16px;
    border-radius: 14px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
    min-height: 52px;
}
.lp-acc-divider {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}
.lp-acc-divider-text {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.lp-acc-providers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lp-acc-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    min-height: 44px;
}
.lp-acc-footer {
    margin-top: 25px;
    text-align: center;
}
.lp-acc-footer-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.lp-acc-card--wide {
    max-width: 480px;
    margin: 30px auto;
    padding: 20px;
    background: transparent;
    border: none;
    box-shadow: none;
}
.lp-acc-header { text-align: center; margin-bottom: 28px; }
.lp-acc-h1 {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.lp-acc-tagline {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}
.lp-acc-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.lp-form-label--bold {
    display: block;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 1rem;
}
.lp-acc-radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    background: var(--bg-card);
    transition: border-color 0.2s;
}
.lp-acc-radio-label {
    font-size: 0.9rem;
    color: var(--text-primary);
}
.lp-form-error {
    color: #cf6679;
    font-size: 0.85rem;
    margin: 4px 0 0;
}
.lp-form-error--block {
    padding: 12px;
    border-radius: 10px;
    background: rgba(207, 102, 121, 0.1);
    border: 1px solid #cf6679;
    color: #cf6679;
    font-size: 0.85rem;
}
.lp-form-input--card {
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
    font-size: 16px;
    background: var(--bg-card);
    color: var(--text-primary);
    box-sizing: border-box;
}
.lp-form-input--otp {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1.5px solid var(--border-subtle);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 1.5rem;
    letter-spacing: 8px;
    text-align: center;
    font-weight: 800;
}
.lp-acc-cgu-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.lp-acc-cgu-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    cursor: pointer;
}
.lp-link-accent--simple {
    color: var(--accent);
}
.lp-acc-altauth {
    text-align: center;
    margin-top: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.lp-acc-form--boxed {
    background: var(--bg-card);
    border: 1.5px solid var(--border-subtle);
    border-radius: 14px;
    padding: 24px;
}
.lp-acc-skip-row {
    text-align: center;
    margin: 18px 0 12px;
}
.lp-acc-skip-link {
    color: var(--text-secondary);
    font-size: 0.88rem;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    padding: 10px 16px;
    border: 1px dashed var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-elevated);
}
.lp-acc-fineprint {
    text-align: center;
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ============================================================
   B2B templates (base + leads + missions + partners)
   D13 Phase 7 batch 3 — refactor inline → classes
   ============================================================ */
.lp-b2b-wrap {
    max-width: 1200px;
    margin: auto;
}
.lp-b2b-nav {
    margin-bottom: 24px;
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.lp-b2b-nav-link {
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none !important;
}
.lp-b2b-nav-link--right {
    margin-left: auto;
}
.lp-help-banner {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--info-soft);
    border-left: 4px solid var(--info);
}
.lp-help-item {
    cursor: help;
    margin-right: 12px;
}
.lp-page-header {
    margin-bottom: 24px;
}
.lp-page-h1 {
    margin: 0 0 8px;
    font-size: 1.4rem;
    font-weight: 800;
}
.lp-page-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.lp-form-card {
    max-width: 640px;
}
.lp-form-grid {
    display: grid;
    gap: 16px;
}
.lp-form-label--simple {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}
.lp-form-input--compact {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 12px;
}
.lp-form-textarea--compact {
    width: 100%;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 12px;
}
.lp-form-actions {
    display: flex;
    gap: 12px;
}
.lp-row-between-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}
.lp-page-h1--lg {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 800;
}
.lp-meta-line {
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.lp-tag-row {
    margin-top: 12px;
}
.lp-actions-row {
    display: flex;
    gap: 8px;
}
.lp-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.lp-card-h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 700;
}
.lp-card-line {
    margin: 0;
    font-size: 0.95rem;
}
.lp-card-line + .lp-card-line {
    margin-top: 8px;
}
.lp-card-line--small {
    margin: 0;
    font-size: 0.9rem;
}
.lp-card-line--small + .lp-card-line--small {
    margin-top: 8px;
}
.lp-section-mt {
    margin-top: 24px;
}
.lp-form-actions-end {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: end;
}
.lp-form-label--mini {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.lp-flex-grow-min200 {
    flex: 1;
    min-width: 200px;
}
.lp-btn-min44 {
    min-height: 44px;
}
.lp-list-clean {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lp-list-item-bordered {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.lp-text-prewrap {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.95rem;
}
.lp-page-container--md {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
}
.lp-nav-back {
    margin-bottom: 20px;
}
.lp-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 24px;
}
.lp-page-h1--xl {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 12px;
}
.lp-tag-row-flex {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.lp-badge--accent {
    background: var(--accent);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
}
.lp-badge--muted {
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.lp-section-mb {
    margin-bottom: 20px;
}
.lp-detail-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
}
.lp-detail-description {
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 20px;
}
.lp-detail-footer {
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.lp-meta-line--small {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.lp-btn-accent--small {
    padding: 8px 16px;
    background: var(--accent);
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ============================================================
   Legal pages (suppression_compte, cgu, confidentialite)
   D13 Phase 7 batch 6 — refactor
   ============================================================ */
.lp-legal-card {
    max-width: 720px;
    margin: 40px auto;
    padding: 28px;
    background: var(--bg-card);
    border-radius: 15px;
    border: 1px solid var(--border-subtle);
}
.lp-legal-h1 {
    color: var(--accent);
    font-size: 1.5rem;
    margin-bottom: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
}
.lp-legal-meta {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 24px;
}
.lp-legal-section {
    margin-bottom: 28px;
}
.lp-legal-h2 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 12px;
    font-weight: 700;
}
.lp-legal-h3 {
    color: var(--text-primary);
    font-size: 1rem;
    margin: 0 0 8px;
    font-weight: 700;
}
.lp-legal-body {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}
.lp-legal-body--compact {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}
.lp-legal-body--small {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.65;
}
.lp-legal-subcard {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}
.lp-legal-subcard:last-child {
    margin-bottom: 0;
}
.lp-legal-list {
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.7;
    padding-left: 22px;
}
.lp-legal-techref {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
    margin-top: 12px;
}
.lp-legal-soft-note {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.lp-legal-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.lp-legal-back-link {
    margin-top: 32px;
}

/* ============================================================
   Staff templates (anti_samsar_*, litiges, vin_referentiel, etc.)
   D13 Phase 7 batch 11 — refactor staff dashboard set
   ============================================================ */
.lp-staff-shell {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 16px;
}
.lp-staff-h1 {
    margin: 0 0 8px;
    font-size: 1.6rem;
}
.lp-staff-tagline {
    color: var(--text-muted);
    margin: 0 0 24px;
    font-size: 0.95rem;
}
.lp-staff-filter-row {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.lp-staff-filter-label {
    font-size: 0.85rem;
}
.lp-staff-filter-input--small {
    width: 80px;
    padding: 4px 8px;
}
.lp-staff-filter-input--xs {
    width: 60px;
    padding: 4px 8px;
}
.lp-staff-btn-compact {
    padding: 6px 14px;
}
.lp-staff-count-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}
.lp-staff-muted {
    color: var(--text-muted);
}
.lp-staff-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
}
.lp-staff-thead-row {
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-subtle);
}
.lp-staff-th {
    padding: 12px;
    text-align: left;
    font-size: 0.85rem;
}
.lp-staff-th--right {
    padding: 12px;
    text-align: right;
    font-size: 0.85rem;
}
.lp-staff-tr-bordered {
    border-bottom: 1px solid var(--border-subtle);
}
.lp-staff-td {
    padding: 12px;
}
.lp-staff-td--right {
    padding: 12px;
    text-align: right;
}
.lp-staff-td--right-danger {
    padding: 12px;
    text-align: right;
    color: #cf1322;
    font-weight: 600;
}
.lp-staff-td--right-muted {
    padding: 12px;
    text-align: right;
    color: var(--text-muted);
}
.lp-staff-td--muted-small {
    padding: 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.lp-staff-link-strong {
    color: var(--text-strong);
}
.lp-staff-ratio-badge {
    background: #fef3c7;
    color: #92400e;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}
.lp-staff-footer-note {
    margin-top: 24px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Staff KPI cards (anti_samsar_index dashboard) */
.lp-staff-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.lp-staff-kpi-card {
    text-decoration: none;
    background: var(--bg-card);
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
    transition: border-color 0.15s;
}
.lp-staff-kpi-card:hover {
    border-color: var(--accent);
}
.lp-staff-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 700;
}
.lp-staff-kpi-value {
    font-size: 2.2rem;
    font-weight: 800;
}
.lp-staff-kpi-value--alert { color: #cf1322; }
.lp-staff-kpi-value--ok { color: var(--success); }
.lp-staff-kpi-sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}
.lp-staff-kpi-extra {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.lp-staff-kpi-cta {
    margin-top: 12px;
    font-size: 0.8rem;
    color: var(--accent);
    font-weight: 600;
}
.lp-staff-nav-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
    padding: 20px;
}
.lp-staff-nav-card-h2 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text-primary);
}
.lp-staff-nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.lp-staff-nav-link {
    padding: 8px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 0.88rem;
}
.lp-staff-bottom-note {
    margin-top: 20px;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
}

/* Staff variants supplémentaires (vin_referentiel + autres dashboards) */
.lp-staff-shell--md {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 80px;
}
.lp-staff-h1--md {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 6px;
}
.lp-staff-tagline--soft {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 24px;
}
.lp-staff-info-card {
    padding: 16px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
}
.lp-staff-info-card-text {
    margin: 0;
    color: var(--text-muted);
}
.lp-staff-stats-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.lp-staff-stat-card {
    padding: 16px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
}
.lp-staff-stat-card--success {
    background: #e8f5e9;
    border-color: #2e7d32;
}
.lp-staff-stat-card--warning {
    background: #fff3e0;
    border-color: #ef6c00;
}
.lp-staff-stat-card--danger {
    background: #fce4ec;
    border-color: #c2185b;
}
.lp-staff-stat-label {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.lp-staff-stat-label--success { color: #2e7d32; }
.lp-staff-stat-label--warning { color: #ef6c00; }
.lp-staff-stat-label--danger { color: #c2185b; }
.lp-staff-stat-value {
    margin: 6px 0 0;
    font-size: 2rem;
    font-weight: 800;
}
.lp-staff-stat-value--success { color: #2e7d32; }
.lp-staff-stat-value--warning { color: #ef6c00; }
.lp-staff-stat-value--danger { color: #c2185b; }
.lp-staff-stat-sub {
    margin: 4px 0 0;
    font-size: 0.7rem;
}
.lp-staff-stat-sub--success { color: #2e7d32; }
.lp-staff-stat-sub--warning { color: #ef6c00; }
.lp-staff-stat-sub--danger { color: #c2185b; }
.lp-staff-section-h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 24px 0 12px;
}
.lp-staff-table-wrap {
    background: var(--bg-card);
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
}
.lp-staff-table--full {
    width: 100%;
    border-collapse: collapse;
}
.lp-staff-thead-row--soft {
    background: rgba(0, 0, 0, 0.03);
}
.lp-staff-th--right-muted {
    padding: 12px 16px;
    text-align: right;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.lp-staff-th--left-muted {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.lp-staff-tr-top {
    border-top: 1px solid var(--border-subtle);
}
.lp-staff-td--lg {
    padding: 12px 16px;
    font-weight: 600;
}
.lp-staff-td--lg-right {
    padding: 12px 16px;
    text-align: right;
}
.lp-staff-td--lg-right-muted {
    padding: 12px 16px;
    text-align: right;
    color: var(--text-muted);
}
.lp-staff-interpretation {
    margin-top: 24px;
    padding: 16px;
    background: var(--bg-card);
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
}
.lp-staff-interpretation-h {
    margin: 0 0 8px;
    font-size: 0.85rem;
    font-weight: 600;
}
.lp-staff-interpretation-list {
    margin: 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Staff badges colored (anti_samsar_duplicates types reasons) */
.lp-staff-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}
.lp-staff-badge--yellow { background: #fef3c7; color: #92400e; }
.lp-staff-badge--blue { background: #dbeafe; color: #1e40af; }
.lp-staff-badge--purple { background: #ede9fe; color: #5b21b6; }
.lp-staff-list-clean-mb {
    list-style: none;
    padding: 0;
    margin: 0;
}
.lp-staff-list-item-mb { margin-bottom: 4px; }
.lp-staff-link-medium {
    color: var(--text-strong);
    font-weight: 500;
}
.lp-staff-meta-small {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Staff message banner + announce box */
.lp-staff-msg {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent);
}
.lp-staff-announce-box {
    background: var(--bg-elevated);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 28px;
    border: 2px solid var(--warning);
}
.lp-staff-announce-box--success {
    border-color: var(--success);
}
.lp-staff-announce-h2 {
    margin: 0 0 12px;
    font-size: 1.1rem;
    font-weight: 700;
}
.lp-staff-announce-status {
    margin: 0;
    font-weight: 600;
}
.lp-staff-announce-status--success { color: var(--success); }
.lp-staff-announce-status--warning { color: var(--warning); }
.lp-staff-announce-meta {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.lp-staff-announce-form { margin-top: 16px; }
.lp-staff-btn--secondary {
    padding: 8px 16px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
}
.lp-staff-btn--main {
    padding: 12px 20px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.lp-staff-stats-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.lp-staff-stat-card-small {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}
.lp-staff-stat-label-tiny {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.lp-staff-stat-value-md {
    margin: 4px 0 0;
    font-size: 1.5rem;
    font-weight: 800;
}
.lp-staff-stat-value-md--success { color: var(--success); }
.lp-staff-table-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
}
.lp-staff-table-card-h2 {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 1rem;
}
.lp-staff-table--small {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.lp-staff-thead-row--card {
    background: var(--bg-card);
}
.lp-staff-th--left { padding: 10px; text-align: left; }
.lp-staff-th--right-mono { padding: 10px; text-align: right; }
.lp-staff-th--center { padding: 10px; text-align: center; }
.lp-staff-tr-top-border { border-top: 1px solid var(--border-subtle); }
.lp-staff-td--bold { padding: 10px; font-weight: 600; }
.lp-staff-td--lined { padding: 10px; }
.lp-staff-td--small-muted {
    padding: 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.lp-staff-td--right-mono {
    padding: 10px;
    text-align: right;
    font-family: monospace;
}
.lp-staff-td--center { padding: 10px; text-align: center; }
.lp-staff-empty-table {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
}
.lp-staff-bottom-doctrine {
    margin: 20px 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-align: center;
}
.lp-staff-tier-emergence { color: var(--text-muted); }
.lp-staff-tier-croissance { color: var(--accent); font-weight: 600; }
.lp-staff-tier-pilier { color: var(--warning); font-weight: 600; }
.lp-staff-early-yes { color: var(--success); font-weight: 700; }
.lp-link-accent--medium {
    color: var(--accent);
    font-weight: 600;
}

/* ============================================================
   Mobile-first : ajustements compact pour < 600px
   ============================================================ */
@media (max-width: 600px) {
    .lp-section { padding: 20px 14px; }
    .lp-section--loose { padding: 36px 14px; }
    .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .lp-grid--narrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-card { padding: 16px 14px; border-radius: 12px; }
    .lp-btn--primary { padding: 12px 16px; font-size: 0.95rem; }
}

/* ============================================================
   Tablette : 600px à 1024px
   ============================================================ */
@media (min-width: 600px) and (max-width: 1024px) {
    .lp-section { padding: 28px 24px; }
}