/* ============================================================================
   LaShop Architecture - Application web
   Style sobre noir/blanc/gris harmonisé avec le logo
   ============================================================================ */

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

:root {
    /* --- Palette LaShop (charte d'identité visuelle) --- */
    --lashop-encre:    #1C1A17;  /* socle : encre / charbon */
    --lashop-anthra:   #3D3A33;  /* socle : anthracite chaud */
    --lashop-papier:   #F0EBE0;  /* fond : papier / blanc cassé */
    --lashop-terra:    #C47056;  /* signature : terracotta (accent principal) */
    --lashop-peach:    #EBA184;  /* accent secondaire : pêche */
    --lashop-sage:     #9DC2AF;  /* accent : sauge (équilibre / succès) */
    --lashop-taupe:    #A8A096;  /* neutre du quotidien */
    --lashop-pin:      #4A4F47;  /* teinte foncée d'appoint */
    --lashop-terra-fonce: #A85A42; /* terracotta foncé (survol) */

    /* --- Mappage vers les variables utilisées partout dans l'app --- */
    --color-dark: #1C1A17;
    --color-gray: #6B6355;          /* gris chaud dérivé de la palette */
    --color-light-gray: #E2DED6;    /* bordure claire discrète */
    --color-very-light: #F4F2ED;    /* survol / zones légères (très pâle) */
    --color-bg: #FAF9F6;            /* fond quasi blanc, à peine chaud */
    --color-white: #FFFFFF;         /* cartes en blanc franc */
    --color-accent: #C47056;        /* terracotta = accent de signature */
    --color-success: #4E8B6F;       /* sauge assombrie pour lisibilité du texte */
    --color-danger: #B0472F;        /* rouge terracotta foncé */
    --color-warning: #C47056;       /* terracotta pour les alertes */
    --shadow-sm: 0 1px 3px rgba(28,26,23,0.07);
    --shadow-md: 0 2px 8px rgba(28,26,23,0.09);
    --shadow-lg: 0 4px 16px rgba(28,26,23,0.13);
    --radius: 5px;
    --transition: 0.15s ease;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-dark);
    background: var(--color-bg);
    min-height: 100vh;
}

/* ===== NAVIGATION ===== */

.app-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-light-gray);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.app-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.app-logo img {
    height: 36px;
    width: auto;
}

.app-logo-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.app-logo-title small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--color-gray);
    text-transform: none;
    letter-spacing: 0;
}

.app-nav {
    display: flex;
    gap: 4px;
}

.app-nav a {
    display: inline-block;
    padding: 8px 16px;
    color: var(--color-gray);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius);
    transition: all var(--transition);
}

.app-nav a:hover {
    background: var(--color-very-light);
    color: var(--color-dark);
}

.app-nav a.active {
    background: var(--color-dark);
    color: var(--color-white);
}

/* ===== MAIN ===== */

.app-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--color-dark);
}

.page-subtitle {
    font-size: 14px;
    color: var(--color-gray);
    margin-bottom: 24px;
}

/* ===== CARDS ===== */

.card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}

.card-header {
    padding: 12px 20px;
    background: var(--color-very-light);
    border-bottom: 1px solid var(--color-light-gray);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
}

.card-body {
    padding: 20px;
}

/* ===== BUTTONS ===== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--color-light-gray);
    background: var(--color-white);
    color: var(--color-dark);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
    font-family: inherit;
    line-height: 1.4;
}

.btn:hover {
    background: var(--color-very-light);
    border-color: var(--color-gray);
}

.btn-primary {
    background: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
}

.btn-primary:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
}

.btn-success {
    background: var(--color-success);
    color: var(--color-white);
    border-color: var(--color-success);
}

.btn-success:hover {
    background: #1B5E20;
    border-color: #1B5E20;
    color: var(--color-white);
}

.btn-danger {
    color: var(--color-danger);
}

.btn-danger:hover {
    background: #FFEBEE;
    border-color: var(--color-danger);
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-icon {
    padding: 6px 8px;
    min-width: 32px;
    justify-content: center;
}

/* ===== FORMS ===== */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gray);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.form-control,
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
textarea,
select {
    padding: 8px 12px;
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius);
    background: var(--color-white);
    font-size: 14px;
    font-family: inherit;
    color: var(--color-dark);
    transition: border-color var(--transition);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-dark);
}

textarea {
    resize: vertical;
    min-height: 60px;
}

select {
    cursor: pointer;
    background-color: var(--color-white);
}

.form-help {
    font-size: 12px;
    color: var(--color-gray);
    margin-top: 4px;
}

/* ===== TABLES ===== */

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th,
.data-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--color-light-gray);
}

.data-table th {
    background: var(--color-very-light);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gray);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.data-table tr:hover td {
    background: var(--color-very-light);
}

.data-table .actions {
    text-align: right;
    white-space: nowrap;
}

/* ===== PHASE SECTIONS ===== */

.phase-section {
    margin-bottom: 24px;
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius);
    overflow: hidden;
}

.phase-header {
    background: var(--color-accent);
    color: var(--color-white);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.phase-header h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.phase-toggle {
    color: var(--color-white);
    font-size: 12px;
    transition: transform var(--transition);
}

.phase-section.collapsed .phase-toggle {
    transform: rotate(-90deg);
}

.phase-body {
    padding: 16px 20px;
}

.phase-section.collapsed .phase-body {
    display: none;
}

.phase-description {
    font-size: 12px;
    color: var(--color-gray);
    font-style: italic;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-light-gray);
}

.phase-description-edit {
    width: 100%;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--color-gray);
    font-style: italic;
}

.page-break-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--color-gray);
    background: var(--color-very-light);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius);
    cursor: pointer;
    user-select: none;
}

.page-break-toggle:hover {
    background: var(--color-light-gray);
}

.page-break-toggle input[type="checkbox"] {
    accent-color: var(--color-dark);
    cursor: pointer;
}

.page-break-toggle input[type="checkbox"]:checked + span {
    color: var(--color-dark);
    font-weight: 500;
}

.subsection-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-gray);
    letter-spacing: 0.05em;
    margin: 12px 0 6px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-light-gray);
}

/* ===== ITEM LIST (services / livrables) ===== */

.item-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.item-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 3px;
    transition: background var(--transition);
}

.item-row:hover {
    background: var(--color-very-light);
}

.item-row.included {
    background: rgba(46, 125, 50, 0.05);
}

/* Poignée de drag-and-drop */
.drag-handle {
    flex-shrink: 0;
    width: 18px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-light-gray);
    cursor: grab;
    user-select: none;
    font-size: 14px;
    line-height: 1;
    border-radius: 3px;
    transition: color var(--transition), background var(--transition);
    /* Désactiver le scroll touch sur la poignée pour permettre le drag tactile */
    touch-action: none;
}

.drag-handle:hover {
    color: var(--color-gray);
    background: var(--color-very-light);
}

.drag-handle:active {
    cursor: grabbing;
}

.item-row:hover .drag-handle {
    color: var(--color-gray);
}

/* États durant le drag */
.sortable-ghost {
    opacity: 0.4;
    background: var(--color-very-light) !important;
}

.sortable-chosen {
    background: var(--color-white) !important;
    box-shadow: var(--shadow-md);
}

.sortable-drag {
    background: var(--color-white) !important;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray);
    opacity: 0.95;
}

.item-checkbox {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-dark);
}

.item-text {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 13px;
    background: transparent;
    color: var(--color-dark);
    cursor: text;
    transition: all var(--transition);
    font-family: inherit;
    line-height: 1.4;
}

.item-text:hover {
    background: var(--color-white);
    border-color: var(--color-light-gray);
}

.item-text:focus {
    outline: none;
    background: var(--color-white);
    border-color: var(--color-dark);
}

.item-row.included .item-text {
    font-weight: 500;
}

.item-actions {
    flex-shrink: 0;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity var(--transition);
}

.item-row:hover .item-actions {
    opacity: 1;
}

.item-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    color: var(--color-gray);
    border-radius: 3px;
    font-size: 12px;
}

.item-action-btn:hover {
    background: var(--color-white);
    color: var(--color-danger);
}

.add-item-row {
    margin-top: 8px;
}

.add-item-row .btn {
    border-style: dashed;
    color: var(--color-gray);
}

.add-item-row .btn:hover {
    border-style: solid;
}

/* ===== SUMMARY (totaux) ===== */

.summary-card {
    position: sticky;
    top: 80px;
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius);
    padding: 16px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
}

.summary-row.total {
    border-top: 2px solid var(--color-dark);
    margin-top: 6px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 700;
}

.summary-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.summary-row.total .summary-amount {
    font-size: 18px;
}

/* ===== LAYOUT 2 colonnes ===== */

.layout-main {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1100px) {
    .layout-main {
        grid-template-columns: 1fr;
    }
    .summary-card {
        position: static;
    }
}

/* ===== ACTIONS BAR (sticky bottom) ===== */

.actions-bar {
    position: sticky;
    bottom: 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-light-gray);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    padding: 12px 20px;
    margin: 24px -24px -24px -24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.actions-bar-left {
    display: flex;
    gap: 8px;
}

.actions-bar-right {
    display: flex;
    gap: 8px;
}

/* ===== MESSAGES ===== */

.message {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    background: var(--color-dark);
    color: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    z-index: 1000;
    animation: slideIn 0.2s ease;
}

.message.success {
    background: var(--color-success);
}

.message.error {
    background: var(--color-danger);
}

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

/* ===== EMPTY STATE ===== */

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-gray);
}

.empty-state h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--color-dark);
}

.empty-state p {
    font-size: 13px;
    margin-bottom: 16px;
}

/* ===== UTILITY ===== */

.text-right { text-align: right; }
.text-muted { color: var(--color-gray); }
.text-small { font-size: 12px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-2 { gap: 8px; }

/* Code H/F/C dropdown stylé */
.code-select {
    width: 50px;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
}

.amount-input {
    width: 130px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Phase montant ligne */
.phase-amount-row {
    padding: 8px 0;
    border-bottom: 1px solid var(--color-very-light);
}

.phase-amount-row:last-child {
    border-bottom: none;
}

.phase-amount-row .phase-name {
    font-weight: 500;
    font-size: 14px;
}

/* Services supplémentaires */
.supp-row {
    display: grid;
    grid-template-columns: 60px 1fr 140px 32px;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
}

/* ============================================================
   Liste "Mes propositions" - Filtre et statut
   ============================================================ */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--color-very-light);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius);
}

.filter-bar label {
    font-weight: 500;
    color: var(--color-dark);
}

.filter-bar select {
    padding: 6px 12px;
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius);
    background: white;
    font-size: 13px;
    cursor: pointer;
}

/* Cellule statut : pastille + select */
.statut-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.statut-pastille {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.statut-en-attente-de-signature {
    background-color: #F0A500; /* orange/jaune */
}

.statut-acceptee {
    background-color: #4CAF50; /* vert */
}

.statut-refusee {
    background-color: #E53935; /* rouge */
}

.statut-select {
    padding: 4px 8px;
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius);
    background: white;
    font-size: 12px;
    cursor: pointer;
    flex: 1;
    min-width: 120px;
}

.statut-select:hover {
    border-color: var(--color-dark);
}

/* Colonne Alerte (première colonne) */
.col-alerte {
    text-align: center;
}

.alerte-icone {
    color: #E53935;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
}

/* Statut "Pour approbation" — pastille bleue */
.statut-pour-approbation {
    background-color: #2196F3;
}

/* Statut "En cours" — pastille bleu foncé */
.statut-en-cours {
    background-color: #1565C0;
}

/* Statut avec rappel (>15 jours en attente) — pastille rouge */
.statut-rappel {
    background-color: #E53935;
}

/* Quand un rappel est à faire : tout le texte de la ligne en rouge */
.row-rappel td,
.row-rappel td strong,
.row-rappel td.text-muted {
    color: #E53935;
}

/* Le menu déroulant aussi en rouge gras avec bordure rouge */
.select-rappel {
    color: #E53935;
    font-weight: 600;
    border-color: #E53935;
}

/* Tri par colonne */
.sortable-col {
    cursor: pointer;
    user-select: none;
}

.sortable-col:hover {
    background-color: var(--color-light-gray);
}

.sort-arrow {
    color: var(--color-dark);
    font-size: 10px;
    margin-left: 2px;
}

/* ============================================================
   Verrouillage du catalogue
   ============================================================ */

.lock-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    border: 1px solid;
}

.lock-bar.locked {
    background: #FFF8E5;
    border-color: #F0A500;
    color: #7A5500;
}

.lock-bar.unlocked {
    background: #E8F5E9;
    border-color: #4CAF50;
    color: #1B5E20;
}

.lock-bar-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.lock-bar-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.lock-bar-text strong {
    font-size: 15px;
}

.lock-bar-sub {
    font-size: 13px;
    margin-top: 2px;
    opacity: 0.85;
}

.lock-bar-actions {
    flex-shrink: 0;
}

/* Catalogue en lecture seule : style visuel atténué */
.catalogue-content.readonly {
    opacity: 0.8;
}

.catalogue-content.readonly input:disabled,
.catalogue-content.readonly textarea:disabled {
    background: var(--color-very-light);
    color: var(--color-dark);
    cursor: not-allowed;
}

/* ============================================================
   Modales
   ============================================================ */

.modal-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-backdrop.hidden {
    display: none;
}

.modal {
    background: white;
    padding: 28px 32px;
    border-radius: var(--radius);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.modal h2 {
    margin: 0 0 12px 0;
    font-size: 20px;
    color: var(--color-dark);
}

.modal p {
    margin: 0 0 16px 0;
    line-height: 1.5;
    color: var(--color-dark);
    font-size: 14px;
}

.modal .form-group {
    margin-bottom: 14px;
}

.modal .form-group label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 13px;
    color: var(--color-dark);
}

.modal .form-control {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius);
    font-size: 14px;
    box-sizing: border-box;
}

.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-light-gray);
}

.modal-actions a {
    margin-right: auto;
    color: var(--color-gray);
    text-decoration: underline;
}

.modal-actions a:hover {
    color: var(--color-dark);
}

/* Icône de verrouillage à côté du numéro de proposition */
.lock-icon {
    font-size: 12px;
    margin-right: 4px;
    opacity: 0.8;
}

/* Page proposition en mode lecture seule (verrouillée) */
.readonly-mode .card {
    opacity: 0.85;
}

.readonly-mode input:disabled,
.readonly-mode textarea:disabled,
.readonly-mode select:disabled {
    background: var(--color-very-light);
    color: var(--color-dark);
    cursor: not-allowed;
}

/* ============================================================
   Phases - Champs additionnels pour H (heures + taux) et C (unités)
   ============================================================ */

.phase-row-main {
    display: grid;
    grid-template-columns: 60px 1fr 180px;
    gap: 12px;
    align-items: center;
}

/* Sur desktop : le libellé reste sur une ligne, le champ montant est repoussé à droite */
@media (min-width: 601px) {
    .phase-amount-row .phase-name {
        white-space: nowrap;
        min-width: 0;
    }
    .phase-row-main .amount-input {
        justify-self: end;
    }
}

.phase-row-extra {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 76px;
    margin-top: 4px;
    background: var(--color-very-light);
    border-radius: var(--radius);
    font-size: 13px;
}

.phase-row-extra label {
    color: var(--color-gray);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex: 0 0 auto;
}

.phase-row-extra .hours-input,
.phase-row-extra .units-input,
.phase-row-extra .unit-price-input {
    padding: 4px 8px;
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius);
    font-size: 13px;
    width: 90px;
    flex: 0 0 90px;
}

.phase-row-extra .rate-select {
    padding: 4px 8px;
    border: 1px solid var(--color-light-gray);
    border-radius: var(--radius);
    background: white;
    font-size: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.phase-row-extra .unit-total {
    flex: 1 1 auto;
    white-space: nowrap;
}

.phase-row-c .unit-total {
    color: var(--color-dark);
    font-weight: 600;
}

/* Pour les services supplémentaires : padding différent (pas de marge gauche) */
.supp-row-h, .supp-row-c {
    padding-left: 76px;
}

.supp-row-wrapper {
    margin-bottom: 8px;
}

/* ============================================================
   Page Taux horaires et paramètres financiers (/taux)
   ============================================================ */

.median-badge {
    font-weight: 400;
    font-size: 13px;
    color: var(--color-gray);
}
.median-badge strong {
    color: var(--color-dark);
    font-variant-numeric: tabular-nums;
}

.taux-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}
.taux-table thead th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gray);
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-light-gray);
}
.taux-table td {
    padding: 6px 8px;
    vertical-align: middle;
}
.taux-table .col-poignee { width: 28px; }
.taux-table .col-valeur  { width: 130px; }
.taux-table .col-unite   { width: 90px; }
.taux-table .col-action  { width: 40px; text-align: center; }
.taux-table .taux-valeur {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.drag-handle {
    cursor: grab;
    color: var(--color-light-gray);
    user-select: none;
    font-size: 16px;
}
.catalogue-content.readonly .drag-handle {
    color: var(--color-very-light);
    cursor: default;
}

.params-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}
@media (max-width: 600px) {
    .params-grid { grid-template-columns: 1fr; }
}

.action-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}
.action-bar .spacer { flex: 1; }

/* ============================================================
   Phases H multi-lignes (heures + poste)
   ============================================================ */
.h-lignes { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.h-ligne { display: flex; align-items: center; gap: 8px; }
.h-ligne .h-ligne-heures { width: 90px; }
.h-ligne .h-ligne-taux { flex: 1; min-width: 0; }
.h-ligne-suppr {
    border: 1px solid var(--color-light-gray);
    background: var(--color-white);
    color: var(--color-gray);
    width: 28px; height: 28px;
    border-radius: 4px; cursor: pointer;
    line-height: 1; flex-shrink: 0;
}
.h-ligne-suppr:hover { background: var(--color-very-light); color: var(--color-danger); }
.amount-input.readonly-calc {
    background: var(--color-very-light);
    color: var(--color-dark);
    font-weight: 600;
}

/* Propositions non accessibles (dossiers d'autres personnes) — mode partagé */
.row-inaccessible {
    opacity: 0.55;
    background: repeating-linear-gradient(
        45deg,
        transparent, transparent 8px,
        rgba(0,0,0,0.02) 8px, rgba(0,0,0,0.02) 16px
    );
}
.row-inaccessible td { color: var(--color-gray); }
.row-inaccessible strong { color: var(--color-gray); }

/* ============================================================
   Tableau de bord (Direction)
   ============================================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (max-width: 800px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-card {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 8px;
    padding: 16px;
}
.kpi-label { font-size: 12px; color: var(--color-gray); margin-bottom: 6px; }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--color-dark); font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 11px; color: var(--color-gray); margin-top: 4px; }
.kpi-accepte { border-left: 3px solid #4CAF50; }
.kpi-attente { border-left: 3px solid #F0A500; }
.kpi-refuse  { border-left: 3px solid #E53935; }

.dash-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 800px) { .dash-cols { grid-template-columns: 1fr; } }

.dash-table { width: 100%; border-collapse: collapse; }
.dash-table th {
    text-align: left; font-size: 12px; font-weight: 600; color: var(--color-gray);
    padding: 6px 8px; border-bottom: 1px solid var(--color-light-gray);
}
.dash-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-very-light, #f0f0f0); }
.dash-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dash-table tfoot .total-row td { border-top: 2px solid var(--color-light-gray); border-bottom: none; }

.dash-filtres { display: flex; gap: 20px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.dash-filtres select { padding: 4px 8px; }

/* Sélecteur de statut dans l'en-tête des cartes du tableau de bord */
.card-header .carte-statut {
    float: right;
    font-size: 12px;
    padding: 2px 6px;
    margin-top: -2px;
}

/* Carnet d'adresses */
.carnet-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
@media (max-width: 700px) { .carnet-form { grid-template-columns: 1fr; } }
#carnet-table td { vertical-align: top; }

/* Contacts dans le carnet */
.contact-ligne { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.contact-ligne .c-nom { flex: 2; }
.contact-ligne .c-tel, .contact-ligne .c-courriel { flex: 1.5; }
.contact-ligne .c-suppr { flex-shrink: 0; }
.contact-ligne-aff { font-size: 13px; padding: 1px 0; }

/* ============================================================
   Habillage identité LaShop (accents terracotta / sauge)
   ============================================================ */
/* Nav active en terracotta de signature */
.app-nav a.active {
    background: var(--lashop-terra);
    color: #FBF9F4;
}
.app-nav a.active:hover {
    background: var(--lashop-terra-fonce);
    color: #FBF9F4;
}
/* Bouton principal : terracotta */
.btn-primary {
    background: var(--lashop-terra);
    border-color: var(--lashop-terra);
    color: #FBF9F4;
}
.btn-primary:hover {
    background: var(--lashop-terra-fonce);
    border-color: var(--lashop-terra-fonce);
    color: #FBF9F4;
}
/* Bouton d'action positive : sauge */
.btn-success {
    background: var(--lashop-sage);
    border-color: var(--lashop-sage);
    color: var(--lashop-encre);
}
.btn-success:hover {
    background: #86B29B;
    border-color: #86B29B;
    color: var(--lashop-encre);
}
/* Titre de page : filet terracotta sous le titre */
.page-title {
    border-bottom: 2px solid var(--lashop-terra);
    padding-bottom: 8px;
    display: inline-block;
}
/* En-tête de carte : mince accent terracotta à gauche */
.card-header {
    border-left: 3px solid var(--lashop-terra);
}
/* En-tête d'application : clair (papier), fine ligne terracotta en bas */
.app-header {
    background: var(--color-white);
    border-bottom: 2px solid var(--lashop-terra);
}

/* Regroupements visuels de champs (page proposition — Informations générales) */
.champ-groupe {
    background: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-left: 3px solid var(--lashop-sage);
    border-radius: var(--radius);
    padding: 12px 14px 4px;
    margin-bottom: 14px;
}
.champ-groupe:last-child { margin-bottom: 0; }