/**
 * MSC Service Client - Styles Front-Office
 * Design moderne avec palette cohérente
 */

:root {
    --msc-primary: #2d3748;
    --msc-primary-light: #4a5568;
    --msc-secondary: #667eea;
    --msc-secondary-light: #7c8fff;
    --msc-success: #38a169;
    --msc-warning: #f6ad55;
    --msc-danger: #e53e3e;
    --msc-info: #3182ce;
    --msc-light: #f7fafc;
    --msc-dark: #1a202c;
    --msc-border: #e2e8f0;
    --msc-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --msc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --msc-radius: 12px;
    --msc-radius-sm: 8px;
    --msc-transition: all 0.2s ease;
}

/* Container principal */
.msc-service-client {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--msc-dark);
    line-height: 1.6;
}

.msc-service-client .material-icons {
    font-size: 20px;
    vertical-align: middle;
}

/* Actions en haut */
.msc-actions {
    text-align: right;
}

.msc-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--msc-radius);
    font-weight: 600;
    transition: var(--msc-transition);
}

.msc-actions .btn-primary {
    background: linear-gradient(135deg, var(--msc-secondary), var(--msc-secondary-light));
    border: none;
    color: white;
    box-shadow: var(--msc-shadow);
}

.msc-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--msc-shadow-lg);
}

/* Navigation par onglets */
.msc-tabs {
    border-bottom: 2px solid var(--msc-border);
    margin-bottom: 0;
    display: flex;
    gap: 8px;
}

.msc-tabs .nav-item {
    margin-bottom: -2px;
}

.msc-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border: none;
    border-radius: var(--msc-radius) var(--msc-radius) 0 0;
    color: var(--msc-primary-light);
    font-weight: 500;
    transition: var(--msc-transition);
}

.msc-tabs .nav-link:hover {
    color: var(--msc-primary);
    background: var(--msc-light);
}

.msc-tabs .nav-link.active {
    color: var(--msc-secondary);
    background: white;
    border-bottom: 3px solid var(--msc-secondary);
}

.msc-tabs .nav-link .badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.msc-tab-content {
    background: white;
    border-radius: 0 0 var(--msc-radius) var(--msc-radius);
    padding: 24px;
    box-shadow: var(--msc-shadow);
}

/* État vide */
.msc-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--msc-primary-light);
}

.msc-empty-state .material-icons {
    font-size: 80px;
    color: var(--msc-border);
    margin-bottom: 16px;
}

.msc-empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--msc-primary);
}

.msc-empty-state p {
    margin-bottom: 24px;
}

/* Liste des items */
.msc-items-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.msc-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: var(--msc-light);
    border-radius: var(--msc-radius-sm);
    transition: var(--msc-transition);
    gap: 16px;
}

.msc-item:hover {
    background: #edf2f7;
    transform: translateX(4px);
}

.msc-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.msc-item-ticket .msc-item-icon {
    background: linear-gradient(135deg, var(--msc-info), #63b3ed);
    color: white;
}

.msc-item-sav .msc-item-icon {
    background: linear-gradient(135deg, var(--msc-warning), #fbd38d);
    color: white;
}

.msc-item-retract .msc-item-icon {
    background: linear-gradient(135deg, var(--msc-danger), #fc8181);
    color: white;
}

.msc-item-content {
    flex: 1;
}

.msc-item-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.msc-item-type {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--msc-primary-light);
    letter-spacing: 0.5px;
}

.msc-item-number {
    font-size: 12px;
    color: var(--msc-secondary);
    font-weight: 600;
}

.msc-item-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--msc-primary);
}

.msc-item-date {
    font-size: 13px;
    color: var(--msc-primary-light);
}

.msc-item-preview {
    font-size: 13px;
    color: var(--msc-primary-light);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

/* Statuts */
.msc-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.msc-status-ouvert { background: #c3dafe; color: #3182ce; }
.msc-status-en-cours { background: #feebc8; color: #c05621; }
.msc-status-résolu { background: #c6f6d5; color: #276749; }
.msc-status-fermé { background: #e2e8f0; color: #4a5568; }
.msc-status-en-attente { background: #feebc8; color: #c05621; }
.msc-status-approuvé { background: #c6f6d5; color: #276749; }
.msc-status-refusé { background: #fed7d7; color: #c53030; }
.msc-status-expédié { background: #c3dafe; color: #3182ce; }
.msc-status-reçu { background: #e9d8fd; color: #6b46c1; }
.msc-status-remboursé { background: #c6f6d5; color: #276749; }

/* Cards */
.msc-card {
    background: white;
    border-radius: var(--msc-radius);
    box-shadow: var(--msc-shadow);
    margin-bottom: 24px;
    overflow: hidden;
}

.msc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: var(--msc-light);
    border-bottom: 1px solid var(--msc-border);
}

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

.msc-card-header .material-icons {
    color: var(--msc-secondary);
}

.msc-header-danger .material-icons { color: var(--msc-danger); }
.msc-header-warning .material-icons { color: var(--msc-warning); }
.msc-header-success .material-icons { color: var(--msc-success); }

.msc-card-body {
    padding: 24px;
}

/* Infos commande */
.msc-order-info {
    display: grid;
    gap: 12px;
}

.msc-info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--msc-border);
}

.msc-info-label {
    color: var(--msc-primary-light);
    font-size: 14px;
}

.msc-info-value {
    font-weight: 500;
}

/* Sélection produits */
.msc-products-selection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msc-product-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: var(--msc-light);
    border-radius: var(--msc-radius-sm);
    transition: var(--msc-transition);
    gap: 16px;
}

.msc-product-item:has(.product-checkbox:checked) {
    background: #ebf4ff;
    border: 2px solid var(--msc-secondary);
}

.msc-product-checkbox input {
    width: 22px;
    height: 22px;
    cursor: pointer;
    accent-color: var(--msc-secondary);
}

.msc-product-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    cursor: pointer;
}

.msc-product-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.msc-product-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--msc-primary);
}

.msc-product-attributes {
    font-size: 13px;
    color: var(--msc-primary-light);
}

.msc-product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--msc-secondary);
}

.msc-product-quantity {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.msc-product-quantity label {
    font-size: 12px;
    color: var(--msc-primary-light);
}

.msc-product-quantity select {
    width: 70px;
    padding: 8px 12px;
    border: 1px solid var(--msc-border);
    border-radius: 8px;
    font-size: 14px;
}

/* Compteur caractères */
.msc-char-count {
    text-align: right;
    font-size: 12px;
    color: var(--msc-primary-light);
    margin-top: 8px;
}

/* Boutons problèmes rapides */
.msc-quick-problems {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--msc-border);
}

.msc-quick-problems .msc-label {
    font-weight: 500;
    margin-bottom: 12px;
    color: var(--msc-primary-light);
}

.msc-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.msc-quick-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--msc-light);
    border: 1px solid var(--msc-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--msc-primary);
    cursor: pointer;
    transition: var(--msc-transition);
}

.msc-quick-btn:hover {
    background: var(--msc-secondary);
    color: white;
    border-color: var(--msc-secondary);
}

.msc-quick-btn .material-icons {
    font-size: 16px;
}

/* Mode de retour */
.msc-shipping-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.msc-shipping-option {
    cursor: pointer;
    display: block;
}

.msc-shipping-option input {
    display: none;
}

.msc-shipping-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: var(--msc-light);
    border: 2px solid transparent;
    border-radius: var(--msc-radius-sm);
    transition: var(--msc-transition);
}

.msc-shipping-option input:checked + .msc-shipping-content {
    background: #ebf4ff;
    border-color: var(--msc-secondary);
}

.msc-shipping-icon {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--msc-shadow);
}

.msc-shipping-icon .material-icons {
    font-size: 24px;
    color: var(--msc-secondary);
}

.msc-shipping-info {
    flex: 1;
}

.msc-shipping-info strong {
    display: block;
    margin-bottom: 4px;
    color: var(--msc-primary);
}

.msc-shipping-info p {
    font-size: 13px;
    color: var(--msc-primary-light);
    margin: 0;
}

.msc-shipping-price {
    text-align: right;
}

.msc-shipping-price .msc-free {
    display: block;
    font-weight: 700;
    font-size: 16px;
    color: var(--msc-success);
}

.msc-shipping-price .msc-paid {
    display: block;
    font-weight: 700;
    font-size: 16px;
    color: var(--msc-danger);
}

.msc-shipping-price small {
    font-size: 11px;
    color: var(--msc-primary-light);
}

/* Actions formulaire */
.msc-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    gap: 16px;
}

.msc-form-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--msc-radius);
    font-weight: 600;
    transition: var(--msc-transition);
}

.msc-form-actions .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Messages */
.msc-messages-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.msc-message {
    padding: 16px;
    border-radius: var(--msc-radius-sm);
}

.msc-message-client {
    background: var(--msc-light);
    margin-left: 40px;
}

.msc-message-admin,
.msc-message-support {
    background: #ebf4ff;
    margin-right: 40px;
}

.msc-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.msc-message-sender {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--msc-primary);
}

.msc-message-sender .material-icons {
    font-size: 18px;
    color: var(--msc-secondary);
}

.msc-message-date {
    color: var(--msc-primary-light);
    font-size: 12px;
}

.msc-message-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--msc-primary);
}

.msc-empty-messages {
    text-align: center;
    padding: 40px;
    color: var(--msc-primary-light);
}

/* Formulaire réponse */
.msc-reply-form {
    padding-top: 20px;
    border-top: 1px solid var(--msc-border);
}

.msc-reply-form .form-control {
    border-radius: var(--msc-radius-sm);
    border: 2px solid var(--msc-border);
    padding: 14px 16px;
    transition: var(--msc-transition);
}

.msc-reply-form .form-control:focus {
    border-color: var(--msc-secondary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.msc-reply-form .btn {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Détails */
.msc-detail-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--msc-border);
}

.msc-detail-item:last-child {
    border-bottom: none;
}

.msc-detail-label {
    color: var(--msc-primary-light);
    font-size: 14px;
}

.msc-detail-value {
    font-weight: 500;
    text-align: right;
}

/* Produits liste simple */
.msc-products-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.msc-product-item-small {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--msc-border);
}

.msc-product-item-small:last-child {
    border-bottom: none;
}

.msc-product-qty {
    background: var(--msc-light);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Étiquettes */
.msc-label-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--msc-light);
    border-radius: var(--msc-radius-sm);
    margin-bottom: 8px;
}

.msc-label-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.msc-label-info .material-icons {
    color: var(--msc-danger);
    font-size: 28px;
}

.msc-label-info small {
    display: block;
    color: var(--msc-primary-light);
    font-size: 12px;
}

/* SAV Produit */
.msc-sav-product {
    padding: 16px;
    background: var(--msc-light);
    border-radius: var(--msc-radius-sm);
    margin-bottom: 12px;
}

.msc-sav-product .msc-product-name {
    font-weight: 600;
    margin-bottom: 8px;
}

.msc-sav-product .msc-product-meta {
    font-size: 12px;
    color: var(--msc-primary-light);
}

.msc-sav-product .msc-product-fault {
    margin-top: 8px;
    font-size: 13px;
}

.msc-sav-product .msc-product-desc {
    margin-top: 8px;
    font-size: 13px;
    color: var(--msc-primary-light);
    font-style: italic;
}

/* Adresse retour */
.msc-card-highlight {
    background: linear-gradient(135deg, #ebf4ff, #e9d8fd);
}

.msc-return-address {
    font-size: 14px;
    line-height: 1.8;
}

/* Page confirmation */
.msc-confirmation {
    text-align: center;
    padding: 60px 20px;
    max-width: 600px;
    margin: 0 auto;
}

.msc-confirmation-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.msc-confirmation-icon .material-icons {
    font-size: 56px;
    color: white;
}

.msc-icon-ticket { background: linear-gradient(135deg, var(--msc-success), #48bb78); }
.msc-icon-retract { background: linear-gradient(135deg, var(--msc-danger), #fc8181); }

.msc-confirmation-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--msc-primary);
}

.msc-confirmation-number {
    background: var(--msc-light);
    padding: 20px;
    border-radius: var(--msc-radius);
    margin-bottom: 24px;
}

.msc-number-label {
    display: block;
    font-size: 13px;
    color: var(--msc-primary-light);
    margin-bottom: 8px;
}

.msc-number-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--msc-secondary);
}

.msc-confirmation-message {
    font-size: 16px;
    color: var(--msc-primary-light);
    margin-bottom: 24px;
}

.msc-confirmation-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.msc-info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: var(--msc-primary-light);
}

.msc-info-item .material-icons {
    color: var(--msc-success);
}

.msc-confirmation-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.msc-confirmation-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: var(--msc-radius);
    font-weight: 600;
}

/* Page erreur */
.msc-error-page {
    text-align: center;
    padding: 60px 20px;
}

.msc-error-icon {
    margin-bottom: 24px;
}

.msc-error-icon .material-icons {
    font-size: 80px;
    color: var(--msc-danger);
}

.msc-error-messages {
    background: #fed7d7;
    color: var(--msc-danger);
    padding: 16px;
    border-radius: var(--msc-radius-sm);
    margin: 24px 0;
}

.msc-error-actions {
    margin-top: 24px;
}

/* Lien retour */
.msc-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--msc-primary-light);
    text-decoration: none;
    font-size: 14px;
    transition: var(--msc-transition);
}

.msc-back-link a:hover {
    color: var(--msc-secondary);
}

/* Boutons sur page commande */
.msc-order-actions {
    margin-top: 24px;
    padding: 24px;
    background: var(--msc-light);
    border-radius: var(--msc-radius);
}

.msc-action-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--msc-border);
}

.msc-action-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.msc-action-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--msc-primary);
}

.msc-existing-items {
    margin-bottom: 16px;
}

.msc-info-text {
    font-size: 13px;
    color: var(--msc-primary-light);
    margin-bottom: 8px;
}

.msc-text-muted {
    display: flex;
    align-items: center;
    gap: 6px;
}

.msc-existing-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: white;
    border-radius: 20px;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 8px;
    box-shadow: var(--msc-shadow);
    transition: var(--msc-transition);
}

.msc-existing-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--msc-shadow-lg);
}

.msc-existing-item .msc-item-number {
    font-weight: 600;
    color: var(--msc-primary);
}

.msc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--msc-radius-sm);
}

/* Liste commandes */
.msc-orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msc-order-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: var(--msc-light);
    border-radius: var(--msc-radius-sm);
    text-decoration: none;
    transition: var(--msc-transition);
    gap: 16px;
}

.msc-order-item:hover {
    background: #edf2f7;
    transform: translateX(4px);
}

.msc-order-ref {
    flex: 1;
}

.msc-order-date, .msc-order-total, .msc-order-status {
    font-size: 14px;
    color: var(--msc-primary-light);
}

.msc-order-action .material-icons {
    color: var(--msc-secondary);
}

/* Lien compte client - compatible thème PrestaShop */
#msc-service-client-link {
    text-decoration: none;
}

#msc-service-client-link .link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 1rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    color: #232323;
    background: #f6f6f6;
    transition: all 0.2s ease;
}

#msc-service-client-link .link-item:hover {
    background: #667eea;
    color: white;
}

#msc-service-client-link .link-item:hover svg {
    color: white;
}

#msc-service-client-link .link-item svg {
    color: #232323;
    transition: all 0.2s ease;
}

#msc-service-client-link .material-icons {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .msc-tabs {
        flex-wrap: wrap;
    }
    
    .msc-tabs .nav-link {
        padding: 12px 16px;
        font-size: 13px;
    }
    
    .msc-item {
        flex-wrap: wrap;
    }
    
    .msc-item-status,
    .msc-item-action {
        width: 100%;
        margin-top: 12px;
    }
    
    .msc-message-client {
        margin-left: 0;
    }
    
    .msc-message-admin {
        margin-right: 0;
    }
    
    .msc-form-actions {
        flex-direction: column;
    }
    
    .msc-form-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .msc-confirmation-actions {
        flex-direction: column;
    }
    
    .msc-confirmation-actions .btn {
        width: 100%;
    }
    
    .msc-product-item {
        flex-wrap: wrap;
    }
    
    .msc-product-quantity {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        margin-top: 12px;
    }
}


/* 2026-10-04 : blocs « Besoin d'aide » et « Rétractation » de la page détail commande, en deux cartes alignées */
.msc-order-actions{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:transparent;border:0;box-shadow:none;padding:0;margin:24px 0}
.msc-order-actions .msc-action-section,.msc-order-actions .msc-action-section:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#fff;border:1px solid #dfe5ee;border-radius:14px;padding:20px 22px;margin:0}
.msc-order-actions .msc-action-title{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;font-weight:700;color:#112B5F}
.msc-order-actions .msc-action-title .material-icons{font-size:22px;color:#112B5F}
.msc-order-actions .msc-info-text{margin:0;font-size:14px;line-height:1.45;color:#5d6b82}
.msc-order-actions .msc-existing-items{margin:0;width:100%}
.msc-order-actions .msc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;min-height:44px;padding:0 18px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;border:1.5px solid #112B5F;color:#112B5F;background:#fff;box-shadow:none;transition:background .15s,color .15s}
.msc-order-actions .msc-btn .material-icons{font-size:19px;color:inherit}
.msc-order-actions .msc-btn:hover,.msc-order-actions .msc-btn:focus{background:#112B5F;color:#fff}
.msc-order-actions .msc-btn.btn-outline-danger{border-color:#cbd3e0;color:#5d6b82;font-weight:500}
.msc-order-actions .msc-btn.btn-outline-danger:hover,.msc-order-actions .msc-btn.btn-outline-danger:focus{background:#f3f5f9;color:#0b1d42;border-color:#8792a5}
@media (max-width:767px){.msc-order-actions{grid-template-columns:1fr}.msc-order-actions .msc-btn{width:100%}}

/* =====================================================================
   Refonte 2.11 : liste Support & SAV et dossier SAV, aux couleurs du site
   ===================================================================== */
.msc2{--m2-marine:#14224f;--m2-marine-doux:#eef1f8;--m2-jaune:#f3b53f;--m2-encre:#232323;--m2-gris:#667085;--m2-trait:#e3e6ee;--m2-vert:#0e7a4d;--m2-vert-doux:#e6f4ec;--m2-orange:#b45309;--m2-orange-doux:#fdf1dc;
  font-family:inherit;color:var(--m2-encre);display:flex;flex-direction:column;gap:22px;line-height:1.5}
.msc2 p{margin:0}
.msc2-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.msc2-back{color:var(--m2-gris);font-size:14px;text-decoration:none}
.msc2-back:hover{color:var(--m2-marine)}
.msc2-btn{display:inline-block;font-weight:700;border-radius:8px;padding:11px 18px;border:0;cursor:pointer;text-decoration:none;line-height:1.3;font-family:inherit;font-size:15px}
.msc2-btn-main,.msc2-btn-main:hover,.msc2-btn-main:focus{background:var(--m2-jaune);color:var(--m2-marine)}
.msc2-btn-main:hover{filter:brightness(.95)}
.msc2-btn-line,.msc2-btn-line:hover,.msc2-btn-line:focus{background:#fff;color:var(--m2-marine);border:1.5px solid var(--m2-marine)}
.msc2-btn-line:hover{background:var(--m2-marine-doux)}
.msc2-btn-small{padding:8px 13px;font-size:14px}
.msc2-btn:focus-visible,.msc2-row:focus-visible{outline:3px solid var(--m2-jaune);outline-offset:2px}
.msc2-label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--m2-gris);margin:0 0 10px!important}
.msc2-warranty{background:var(--m2-vert-doux);color:#0b4f33;border-radius:10px;padding:12px 16px;font-size:14px}
.msc2-todo{background:var(--m2-orange-doux);border:1px solid #f1d7a3;border-radius:10px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.msc2-todo strong{display:block;font-size:16px}
.msc2-todo p{margin-top:2px;color:#5b4a2a;font-size:14px}
.msc2-rows{border:1px solid var(--m2-trait);border-radius:10px;overflow:hidden;background:#fff}
.msc2-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 18px;text-decoration:none;color:inherit;border-top:1px solid var(--m2-trait);align-items:center}
.msc2-row:first-child{border-top:0}
.msc2-row:hover{background:var(--m2-marine-doux);color:inherit;text-decoration:none}
.msc2-what{font-weight:700;min-width:0;overflow-wrap:anywhere}
.msc2-meta{color:var(--m2-gris);font-size:13px;grid-column:1}
.msc2-state{grid-row:1 / span 2;grid-column:2;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.msc2-kind{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--m2-marine);background:var(--m2-marine-doux);border-radius:4px;padding:2px 6px;margin-right:8px}
.msc2-pill{font-size:12px;font-weight:700;border-radius:20px;padding:3px 10px;white-space:nowrap;display:inline-block}
.msc2-pill-big{font-size:13px;padding:6px 14px}
.msc2-p-cours{background:var(--m2-marine-doux);color:var(--m2-marine)}
.msc2-p-action{background:var(--m2-orange-doux);color:var(--m2-orange)}
.msc2-p-ok{background:var(--m2-vert-doux);color:var(--m2-vert)}
.msc2-p-off{background:#f0f1f4;color:var(--m2-gris)}
.msc2-next,.msc2-muted{font-size:13px;color:var(--m2-gris)}
.msc2-empty{border:1px dashed var(--m2-trait);border-radius:10px;padding:22px 18px;color:var(--m2-gris);text-align:center}
.msc2-hist summary{cursor:pointer;font-weight:700;color:var(--m2-marine);padding:6px 0;list-style:none}
.msc2-hist summary::-webkit-details-marker{display:none}
.msc2-hist summary::before{content:"+ "}
.msc2-hist[open] summary::before{content:"– "}
.msc2-hist .msc2-rows{margin-top:8px}
.msc2-help{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.msc2-help a{border:1px solid var(--m2-trait);border-radius:8px;padding:12px 14px;text-decoration:none;color:var(--m2-marine);font-weight:600;font-size:14px;background:#fff}
.msc2-help a:hover{background:var(--m2-marine-doux)}
/* dossier */
.msc2-steps{display:grid;gap:0;margin:0;padding:0;list-style:none}
.msc2-steps-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.msc2-steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.msc2-steps li{position:relative;text-align:center;font-size:13px;font-weight:600;color:var(--m2-gris);padding:26px 4px 0}
.msc2-steps li::before{content:"";position:absolute;top:6px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:2px solid var(--m2-trait);z-index:1}
.msc2-steps li::after{content:"";position:absolute;top:12px;left:-50%;width:100%;height:2px;background:var(--m2-trait)}
.msc2-steps li:first-child::after{display:none}
.msc2-steps li.msc2-done{color:var(--m2-marine)}
.msc2-steps li.msc2-done::before{background:var(--m2-marine);border-color:var(--m2-marine)}
.msc2-steps li.msc2-done::after,.msc2-steps li.msc2-now::after{background:var(--m2-marine)}
.msc2-steps li.msc2-now{color:var(--m2-marine);font-weight:800}
.msc2-steps li.msc2-now::before{background:var(--m2-jaune);border-color:var(--m2-marine);box-shadow:0 0 0 4px rgba(243,181,63,.27)}
.msc2-nextbox{background:var(--m2-marine-doux);border-radius:10px;padding:14px 18px}
.msc2-nextbox strong{color:var(--m2-marine)}
.msc2-nextcta{margin-top:10px}
.msc2-cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:22px}
.msc2-box{border:1px solid var(--m2-trait);border-radius:10px;padding:16px 18px;background:#fff}
.msc2-box + .msc2-box{margin-top:14px}
.msc2-box h3{font-size:16px;font-weight:800;margin:0 0 10px;color:var(--m2-encre)}
.msc2-box p{margin-bottom:10px}
.msc2-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0 0 12px;font-size:14px}
.msc2-kv dt{color:var(--m2-gris);font-weight:500}
.msc2-kv dd{margin:0;font-weight:600;text-align:right;overflow-wrap:anywhere}
.msc2-product{border-top:1px solid var(--m2-trait);padding-top:10px;margin-top:10px;font-size:14px}
.msc2-thread{display:flex;flex-direction:column;gap:10px}
.msc2-msg{border-radius:10px;padding:10px 14px;font-size:14px;max-width:88%;overflow-wrap:anywhere}
.msc2-msg small{display:block;color:var(--m2-gris);font-size:12px;margin-bottom:2px}
.msc2-msg-sav{background:var(--m2-marine-doux)}
.msc2-msg-me{background:#fff7e6;margin-left:auto}
.msc2-form{margin-top:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.msc2-form label{font-weight:700;margin:0}
.msc2-form textarea{width:100%;border:1px solid var(--m2-trait);border-radius:8px;padding:10px 12px;min-height:90px;resize:vertical;font-family:inherit;font-size:15px;background:#fff}
.msc2-timeline{list-style:none;margin:0;padding:0;font-size:14px}
.msc2-timeline li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--m2-trait)}
.msc2-timeline li:first-child{border-top:0}
.msc2-timeline span{color:var(--m2-gris);white-space:nowrap;font-variant-numeric:tabular-nums}
.msc2-labelrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:767px){
  .msc2-cols{grid-template-columns:minmax(0,1fr)}
  .msc2-steps li{font-size:11px}
  .msc2-row{grid-template-columns:minmax(0,1fr)}
  .msc2-state{grid-row:auto;grid-column:1;flex-direction:row;align-items:center;flex-wrap:wrap;margin-top:4px}
  .msc2-form{padding-bottom:64px}
}
/* Pages ticket et rétractation : mêmes couleurs que le site */
.msc-service-client{--msc-secondary:#14224f;--msc-secondary-light:#22357a;--msc-info:#14224f}
.msc-service-client .msc-actions .btn-primary,.msc-service-client .msc-actions .btn-primary:hover{background:#f3b53f;color:#14224f;box-shadow:none}

/* =====================================================================
   Refonte 2.13 : formulaires (ticket, rétractation), confirmation et bloc
   de la page commande, alignés sur le nouveau style
   ===================================================================== */
.msc-service-client:not(.msc2){font-family:inherit;color:#232323}
.msc-service-client:not(.msc2) .msc-back-link a{color:#667085;font-size:14px;text-decoration:none}
.msc-service-client:not(.msc2) .msc-back-link a:hover{color:#14224f}
.msc-service-client:not(.msc2) .msc-card{background:#fff;border:1px solid #e3e6ee;border-radius:10px;box-shadow:none;margin-bottom:16px;overflow:hidden}
.msc-service-client:not(.msc2) .msc-card-header{background:#fff;border-bottom:0;padding:16px 18px 0}
.msc-service-client:not(.msc2) .msc-card-header h3{font-size:16px;font-weight:800;color:#232323;margin:0}
.msc-service-client:not(.msc2) .msc-card-header .material-icons{color:#14224f}
.msc-service-client:not(.msc2) .msc-card-body{padding:12px 18px 18px}
.msc-service-client:not(.msc2) .msc-info{color:#667085;font-size:14px}
.msc-service-client:not(.msc2) .msc-orders-list{border:1px solid #e3e6ee;border-radius:10px;overflow:hidden;display:block}
.msc-service-client:not(.msc2) .msc-order-item{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:14px 18px;margin:0;border:0;border-top:1px solid #e3e6ee;border-radius:0;background:#fff;color:#232323;text-decoration:none;box-shadow:none;transform:none}
.msc-service-client:not(.msc2) .msc-order-item:first-child{border-top:0}
.msc-service-client:not(.msc2) .msc-order-item:hover{background:#eef1f8;transform:none;box-shadow:none}
.msc-service-client:not(.msc2) .msc-order-ref{font-weight:800;color:#14224f;min-width:110px}
.msc-service-client:not(.msc2) .msc-order-date,.msc-service-client:not(.msc2) .msc-order-total,.msc-service-client:not(.msc2) .msc-order-status{color:#667085;font-size:14px}
.msc-service-client:not(.msc2) .msc-order-action{margin-left:auto;color:#14224f}
.msc-service-client:not(.msc2) .msc-product-item{border:1px solid #e3e6ee;border-radius:10px;background:#fff;box-shadow:none}
.msc-service-client:not(.msc2) .msc-product-item:hover{background:#eef1f8}
.msc-service-client:not(.msc2) .msc-quick-btn{background:#fff;border:1px solid #e3e6ee;border-radius:8px;color:#14224f;font-weight:600}
.msc-service-client:not(.msc2) .msc-quick-btn:hover{background:#eef1f8;border-color:#14224f;color:#14224f}
.msc-service-client:not(.msc2) textarea.form-control,.msc-service-client:not(.msc2) select.form-control,.msc-service-client:not(.msc2) input.form-control{border:1px solid #e3e6ee;border-radius:8px;background:#fff}
.msc-service-client:not(.msc2) .btn-primary,.msc-service-client:not(.msc2) .btn-primary:hover,.msc-service-client:not(.msc2) .btn-primary:focus{background:#f3b53f;border:0;color:#14224f;font-weight:700;border-radius:8px;box-shadow:none;text-transform:none}
.msc-service-client:not(.msc2) .btn-primary[disabled]{background:#e3e6ee;color:#667085}
.msc-service-client:not(.msc2) .btn-outline-primary,.msc-service-client:not(.msc2) .btn-outline-secondary,.msc-service-client:not(.msc2) .btn-secondary,.msc-service-client:not(.msc2) .btn-outline-danger,.msc-service-client:not(.msc2) .btn-outline-warning{background:#fff;border:1.5px solid #14224f;color:#14224f;font-weight:700;border-radius:8px;text-transform:none}
.msc-service-client:not(.msc2) .btn-outline-primary:hover,.msc-service-client:not(.msc2) .btn-outline-secondary:hover,.msc-service-client:not(.msc2) .btn-secondary:hover,.msc-service-client:not(.msc2) .btn-outline-danger:hover{background:#eef1f8;color:#14224f}
.msc-service-client:not(.msc2) a{color:#14224f}
/* Bloc « Besoin d'aide » sur le détail d'une commande */
.msc-order-actions .msc-action-section{border:1px solid #e3e6ee;border-radius:10px;box-shadow:none;background:#fff}
.msc-order-actions .msc-action-title .material-icons{color:#14224f}
.msc-order-actions .btn-outline-primary,.msc-order-actions .btn-outline-danger{background:#fff;border:1.5px solid #14224f;color:#14224f;font-weight:700;border-radius:8px;text-transform:none}
.msc-order-actions .btn-outline-primary:hover,.msc-order-actions .btn-outline-danger:hover{background:#eef1f8;color:#14224f}
.msc-order-actions .msc-existing-item{border:1px solid #e3e6ee;border-radius:8px;background:#fff;color:#14224f}