/**
 * COMPONENTS.CSS
 * Fichier CSS unifié pour le système de gestion de garanties
 * Ce fichier contient tous les styles organisés par sections
 * et utilise les variables définies dans variables.css
 */

/*==============================================================================
  TABLE DES MATIÈRES
  1. Reset et styles de base
  2. Layout principal et grid
  3. Header et navigation
  4. Formulaires et contrôles
  5. Boutons et actions
  6. Cartes et conteneurs
  7. Modales et tiroirs
  8. Tableaux et listes
  9. Alertes et notifications
  10. Utilitaires
  11. Animation et effets
  12. Responsive design
  13. Styles spécifiques client
==============================================================================*/

/*==============================================================================
  1. RESET ET STYLES DE BASE
==============================================================================*/
body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}

* {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

p {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-hover);
}

img {
    max-width: 100%;
    height: auto;
}

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/*==============================================================================
  2. LAYOUT PRINCIPAL ET GRID
==============================================================================*/
.main_content {
    flex: 1;
    padding: var(--spacing-xl) var(--spacing-md);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    align-self: center;
}

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.container-narrow {
    max-width: var(--container-narrow-width);
}

/*==============================================================================
  3. HEADER ET NAVIGATION
==============================================================================*/
header {
    background-color: var(--color-header);
    color: var(--color-text-light);
    padding: 0;
    text-align: center;
    box-shadow: 0 2px 10px var(--color-shadow-dark);
}

#corpo-header {
    width: auto;
    display: flex;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    position: relative;
    margin-bottom: var(--spacing-xl);
}

.corpo-logo-container {
    flex: 0 0 auto;
}

.corpo-logo {
    max-width: 120px;
    height: auto;
    display: block;
}

.corpo-header-content {
    flex: 1;
    text-align: center;
}

.corpo-header-title {
    font-size: 1.8em;
    font-weight: 400;
    /* Légèrement plus fort */
    margin: 0 0 var(--spacing-xs) 0;
    letter-spacing: 0.5px;
    color: var(--color-text-primary-light);
    /* Forcer la couleur claire */
}

.corpo-header-subtitle {
    font-size: 1em;
    margin: 0;
    font-weight: 400;
}

/* Ligne décorative en dessous du header */
#corpo-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 15%;
    right: 15%;
    height: 2px;
    background: var(--luxury-border-gradient);
}
#corpo-header .corpo-spacer {
    flex: 1;
}
#corpo-header .corpo-logo-container {
    flex: 1;
}
#corpo-header .corpo-header-content {
    flex: 1;
    text-align: center;
}
/* Navigation principale */
nav.main-nav {
    background-color: var(--color-nav);
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

nav.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

nav.main-nav ul li {
    margin: 0 var(--spacing-md);
    position: relative;
}

nav.main-nav ul li a {
    text-decoration: none;
    color: var(--color-text-light);
    opacity: 0.8;
    font-weight: 400;
    font-size: 0.95em;
    letter-spacing: 0.5px;
    padding: 10px 0;
    position: relative;
    transition: all 0.3s ease;
    display: block;
}

nav.main-nav ul li a:hover,
nav.main-nav ul li a.active {
    opacity: 1;
    color: var(--color-highlight);
}

nav.main-nav ul li a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent);
}

nav.main-nav ul li a.btn-logout {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 8px 15px;
    border-radius: 4px;
    opacity: 1;
    transition: background-color 0.3s ease;
}

nav.main-nav ul li a.btn-logout:hover {
    background-color: var(--color-primary-hover);
}

/* Sélecteur de langue */
.language-buttons {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

.language-selector {
    display: flex;
    gap: var(--spacing-xs);
    background-color: var(--color-surface);
    padding: 5px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px var(--color-shadow);
}

.language-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 0.9em;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.language-btn:hover {
    background-color: var(--color-highlight);
    color: var(--color-text-primary);
}

.language-btn.active {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/*==============================================================================
  4. FORMULAIRES ET CONTRÔLES
==============================================================================*/
/* Conteneur pour les cartes de garantie dans les formulaires */
.warranty-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* Wrapper pour grouper les éléments de formulaire */
.form-group-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
}

/* Ajustement pour les formulaires dans les tiroirs */
.drawer-content .warranty-card {
    box-shadow: var(--box-shadow-sm);
}

.form-container {
    width: 100%;
    max-width: var(--form-max-width);
    margin: 0 auto;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--spacing-md));
}

.form-group {
    margin-bottom: var(--spacing-lg);
    position: relative;
    width: 100%;
}

.form-row .form-group {
    flex: 1;
    min-width: 250px;
    padding: 0 var(--spacing-md);
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    letter-spacing: 0.3px;
}

/* Contrôles de form */
.form-control,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="date"],
.form-group input[type="password"],
.form-group select {
    width: 100%;
    padding: 12px 16px;
    height: var(--form-field-height);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    background-color: var(--color-container);
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.form-control:focus,
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--luxury-focus-glow);
    background-color: var(--color-surface);
}

/* Selects stylisés */
select.form-control,
.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Textarea */
textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* Info texte sous les champs */
.form-info {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Actions de formulaire */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

/* Upload de fichier */
.file-upload {
    margin-top: var(--spacing-md);
}

.upload-container {
    border: 2px dashed var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    text-align: center;
    background-color: var(--color-container);
    transition: all var(--transition-normal);
}

.upload-container:hover {
    border-color: var(--color-accent);
    background-color: rgba(201, 191, 179, 0.05);
}

.upload-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.or-divider {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Prévisualisation d'upload */
#preview-container {
    position: relative;
    margin-top: 15px;
}

#preview-image {
    max-width: 100%;
    max-height: 200px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#remove-file,
#remove-file-name {
    position: absolute;
    top: -10px;
    right: -10px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-error);
    color: white;
    cursor: pointer;
    border: none;
}

#file-name-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background-color: var(--color-container);
    border-radius: var(--border-radius-sm);
    margin-top: 15px;
    position: relative;
}

#file-name {
    font-size: 14px;
    color: var(--color-text-secondary);
    word-break: break-all;
    padding-right: 40px;
}

/* Inputs de recherche pays */
.country-dropdown {
    position: relative;
    width: 100%;
}

#country-search {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.hidden-select {
    display: none;
}

.dropdown-list {
    position: absolute;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    box-shadow: var(--box-shadow);
    z-index: 1000;
    display: none;
}

.dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
    background-color: var(--color-highlight);
}

.dropdown-item.selected {
    background-color: rgba(201, 191, 179, 0.2);
}

.dropdown-list.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

/* Validations et erreurs */
.field-error,
.alert-error {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    display: block;
}

.form-control.is-invalid,
.form-group input.is-invalid {
    border-color: var(--color-error);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B79C98' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.form-control.is-valid,
.form-group input.is-valid {
    border-color: var(--color-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A3AB9B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}


/* Dropdown pays amélioré */
.country-dropdown {
    position: relative;
    width: 100%;
}

#country-search {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#country-search:focus {
    border-color: var(--color-accent);
    box-shadow: var(--luxury-focus-glow);
    outline: none;
}

.hidden-select {
    display: none;
}

.dropdown-list {
    position: absolute;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    box-shadow: var(--box-shadow);
    z-index: 1000;
    display: none;
}

.dropdown-list.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

.dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.dropdown-item:hover {
    background-color: var(--color-highlight);
}

.dropdown-item.selected {
    background-color: rgba(201, 191, 179, 0.2);
    font-weight: var(--font-weight-medium);
}

/* Personnaliser la barre de défilement pour la liste des pays */
.dropdown-list::-webkit-scrollbar {
    width: 8px;
}

.dropdown-list::-webkit-scrollbar-track {
    background: var(--color-container);
    border-radius: 0 0 var(--border-radius-sm) 0;
}

.dropdown-list::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 4px;
}

.dropdown-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-accent);
}


/*==============================================================================
  5. BOUTONS ET ACTIONS
==============================================================================*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    text-decoration: none;
    line-height: var(--line-height-normal);
    min-height: 44px;
}

.btn i,
.btn svg {
    margin-right: 8px;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-secondary:hover {
    background-color: rgba(168, 159, 148, 0.05);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-hover);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.btn-outline:hover {
    background-color: var(--color-container);
    border-color: var(--color-text-secondary);
}

.btn-text {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    padding: 10px 15px;
    font-weight: var(--font-weight-medium);
}

.btn-text:hover {
    color: var(--color-text-primary);
}

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    min-height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon i,
.btn-icon svg {
    margin-right: 0;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Groupe de boutons */
.btn-group {
    display: flex;
    gap: var(--spacing-sm);
}

.btn-group-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Icône de fermeture */
.custom-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
}

.custom-btn-icon:hover {
    background-color: #e0e0e0;
}

.custom-btn-icon:active {
    background-color: #d0d0d0;
}

.custom-btn-icon:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.3);
}

.icon-times {
    width: 14px;
    height: 14px;
    fill: #666;
}

.custom-btn-icon:hover .icon-times {
    fill: #333;
}

/* Harmonisation des boutons d'action */
.btn-primary,
#edit-profile-btn,
button[type="submit"],
.form-actions .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-normal);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-decoration: none;
}

.btn-primary:hover,
#edit-profile-btn:hover,
button[type="submit"]:hover,
.form-actions .btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--box-shadow-sm);
}

/* Style spécifique pour le bouton d'édition de profil */
#edit-profile-btn {
    margin-top: var(--spacing-md);
}


/*==============================================================================
  6. CARTES ET CONTENEURS
==============================================================================*/
/* Styles communs pour tous les conteneurs de type "card" */
.profile-card,
.profile-completion,
.add-warranty,
.list-warranties,
.warranty-card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    /*overflow: hidden;*/
    position: relative;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    border: var(--luxury-card-border);
}

/* Effet de hover doux sur les cartes */
.profile-card:hover,
.profile-completion:hover,
.list-warranties:hover,
.warranty-card:hover {
    box-shadow: var(--box-shadow-lg);
    /*transform: translateY(-2px);*/
}

/* Effet de bordure dégradée en haut des cartes */
.profile-card::before,
.profile-completion::before,
.add-warranty::before,
.list-warranties::before,
.warranty-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: var(--luxury-border-gradient);
    z-index: 1;
}

/* Headers de carte */
.login-header,
.profile-header,
.card-header {
    background-color: var(--color-header);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
}

.card-header h3{
    color: var(--color-text-primary-light);
}

.profile-header {
    background: linear-gradient(135deg, var(--color-header) 0%, var(--color-nav) 100%);
}

/* Corps de carte */
.profile-info,
.card-body {
    padding: var(--spacing-lg);
}

/* Section d'informations de profil */
.info-section {
    margin-bottom: var(--spacing-lg);
}

.info-section h3 {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.info-row {
    display: flex;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.info-label {
    width: 30%;
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
}

.info-value {
    width: 70%;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
}

/* Avatar de profil */
.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--spacing-md);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.profile-avatar .initials {
    font-size: 2em;
    font-weight: 300;
    color: var(--color-text-primary);
}

.profile-title h2 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 300;
    letter-spacing: 1px;
}

.profile-title p {
    margin: 5px 0 0;
    opacity: 1;
    font-size: 0.95em;
}

/* Améliorations pour meilleure lisibilité et cohérence visuelle */
.profile-title h2,
.corpo-header-title,
.card-header h3 {
    color: var(--color-text-primary-light);
    font-weight: var(--font-weight-normal);
}

/* Assurer la bonne visibilité des textes sur fonds sombres */
.profile-header h2,
.drawer-header h3,
.modal-header h3 {
    color: var(--color-text-primary);
}
.profile-header h2 {
    color: var(--color-text-primary-light);
}

/* Assurer la cohérence des éléments interactifs */
.btn-icon-action,
.custom-btn-icon,
.close-drawer,
.close-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Dimensions standardisées des containers */
.profile-completion,
.add-warranty,
.profile-card {
    width: 100%;
    max-width: var(--form-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg);
}
.profile-card {
    padding: 0;
}

.list-warranties {
    max-width: var(--container-max-width);
}

/* Cartes de garantie */
/* Amélioration du conteneur de cartes de garantie */
.warranty-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}
.dashboard-header {
    margin: 0 0 10px 0;
}
.warranties-dashboard {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

.warranty-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.warranty-status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 500;
    z-index: 1;
}

.warranty-status.valid {
    background-color: var(--color-valid);
    color: var(--color-text-light);
}

.warranty-status.expiring-soon {
    background-color: var(--color-expiring-soon);
    color: var(--color-text-primary);
}

.warranty-status.expired {
    background-color: var(--color-expired);
    color: var(--color-text-light);
}

.warranty-image {
    height: 120px;
    height:500px;
    background-color: var(--color-container);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.default-watch-icon {
    color: var(--color-text-secondary);
    opacity: 0.7;
}

.warranty-info {
    padding: var(--spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.warranty-reference {
    margin: 0 0 var(--spacing-sm);
    font-size: 1.2em;
    color: var(--color-text-primary);
    font-weight: 500;
}

.warranty-details {
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
}

.detail-item {
    margin-bottom: var(--spacing-xs);
    font-size: 0.9em;
}

.detail-label {
    color: var(--color-text-secondary);
    font-weight: 500;
    margin-right: var(--spacing-xs);
}

.detail-value {
    color: var(--color-text-primary);
}

.warranty-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
}

.btn-icon-action {
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-container);
}

.btn-icon-action:hover {
    color: var(--color-primary);
    background-color: var(--color-highlight);
}

.btn-icon-action.delete:hover {
    color: var(--color-expired);
}

/* Carte vide avec Call to Action */
.empty-card {
    background-color: var(--color-container);
    border: 2px dashed var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.empty-card-content {
    text-align: center;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-icon {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.empty-card h3 {
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text-primary);
    font-weight: 400;
}

.empty-card p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    font-size: 0.95em;
}

.add-more-card {
    min-height: 250px;
}

/* Période de garantie */
.warranty-period-display {
    background-color: rgba(201, 191, 179, 0.1);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    text-align: center;
}

.period-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.date-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 5px;
}

.date-value {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.period-arrow {
    color: var(--color-primary);
    font-size: 24px;
}

.warranty-duration {
    font-size: 16px;
    color: var(--color-text-primary);
    background-color: rgba(201, 191, 179, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
    margin-top: 10px;
}


/* Ajustement pour les cartes dans un formulaire */
form .warranty-card {
    margin-bottom: 0;
    /* Évite la double marge avec le conteneur */
    position: relative;
    z-index: 1;
}

form .warranty-card::before {
    z-index: 0;
    /* Évite que la bordure gradient passe au-dessus du contenu */
}

form .warranty-card .card-header {
    position: relative;
    z-index: 2;
    /* Assure que le header est au-dessus de la bordure */
}

/* Conteneur principal pour add-warranty */
.add-warranty {
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    width: 100%;
    max-width: var(--form-max-width);
    margin: 0 auto;
    position: relative;
}
.add-warranty {
    background-color: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: var(--spacing-xl);
    width: 100%;
    max-width: var(--form-max-width);
    margin: 0 auto;
    position: relative;
    border: 0;
}
/* Conteneur spécifique pour les cartes dans le formulaire d'ajout de garantie */
.warranty-form-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* Style spécifique pour les cartes à l'intérieur du formulaire */
.warranty-form-cards .warranty-card {
    background-color: var(--color-container);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin: 0;
}

/* Suppression de l'effet de bordure gradient pour les cartes internes */
.warranty-form-cards .warranty-card::before {
    display: none;
}

/* Ajustement des transitions pour éviter l'effet d'imbrication visuel */
.warranty-form-cards .warranty-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--box-shadow);
}

/* Titre dans le formulaire d'ajout */
.add-warranty h2 {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-light);
    color: var(--color-text-primary);
}

/* Séparation visuelle entre les sections du formulaire */
.add-warranty .form-actions {
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/*==============================================================================
  7. MODALES ET TIROIRS (suite)
==============================================================================*/

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-modal-backdrop);
    overflow-y: auto;
    backdrop-filter: blur(2px);
}

.modal-content {
    background-color: var(--color-surface);
    margin: 50px auto;
    max-width: 500px;
    width: 90%;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow-lg);
    animation: modalFadeIn 0.3s;
    position: relative;
    overflow: hidden;
}
/*
.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--luxury-border-gradient);
}*/

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.modal-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.close-modal {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1;
}

.close-modal:hover {
    color: var(--color-text-primary);
}
.modal-body {
    padding: var(--spacing-lg);
}

.modal-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
}

/* Modale de confirmation */
.success-icon {
    text-align: center;
    font-size: 60px;
    color: var(--color-success);
    margin-bottom: 20px;
}

.review-info {
    background-color: rgba(201, 191, 179, 0.1);
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Modale caméra */
.camera-modal-content {
    max-width: 600px;
    width: 90%;
}

.camera-container {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #000;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    margin: 0 auto;
}

#camera-stream {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#camera-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: var(--spacing-md);
}

/* Tiroirs latéraux */
.profile-form-drawer,
.warranty-form-drawer,
.warranty-details-drawer {
    position: fixed;
    top: 0;
    right: -480px; /* Augmenté de -400px */
    width: 450px; /* Augmenté de 380px */
    height: 100vh;
    background-color: var(--color-surface);
    box-shadow: -5px 0 15px var(--color-shadow-dark);
    transition: right var(--transition-normal);
    z-index: var(--z-index-modal);
    overflow-y: auto;
}
.warranty-form-drawer {
    width: 100%; /* Augmenté de 380px */
    right: -100%; /* Augmenté de -400px */
}

.profile-form-drawer.open,
.warranty-form-drawer.open,
.warranty-details-drawer.open {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-header-lighter);
    color: var(--color-text-light);
    min-height: 64px;
}

.drawer-header h3 {
    margin: 0;
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-lg);
}

.close-drawer {
    background: none;
    border: none;
    color: var(--color-text-light-2);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.drawer-content {
    padding: var(--spacing-lg);
}

body.drawer-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-index-modal) - 1);
    backdrop-filter: blur(2px);
}

/* Détails tiroir garantie */
.warranty-drawer-details {
    padding: var(--spacing-md);
    color: var(--color-text-primary);
    padding:0;
}

.warranty-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
}

.warranty-drawer-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.warranty-drawer-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.warranty-drawer-status.valid {
    background-color: var(--color-valid);
    color: var(--color-surface);
}

.warranty-drawer-status.expiring-soon {
    background-color: var(--color-expiring-soon);
    color: var(--color-surface);
}

.warranty-drawer-status.expired {
    background-color: var(--color-expired);
    color: var(--color-surface);
}

.warranty-drawer-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.warranty-drawer-info-group {
    background-color: var(--color-container);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.warranty-drawer-info-group h4 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.warranty-drawer-info-group p {
    margin: var(--spacing-xs) 0;
    line-height: 1.5;
}

.warranty-drawer-info-group strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

.warranty-info-section.info-dates .info-label {
    min-width:210px;
}
.warranty-info-section.info-dates .info-value {
    text-align:center;
}
.warranty-info-section.info-ref .info-item {
    flex-direction: column;
}
.warranty-info-section.info-ref .info-label {
    min-width:100%;
}

/* Modal pour image agrandie */
#imageModal {
    z-index: var(--z-index-modal);
}

.modal-content#modalImage {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: var(--color-text-light);
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: calc(var(--z-index-modal) + 1);
}

.warranty-drawer-info-group img {
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.warranty-drawer-info-group img:hover {
    opacity: 0.9;
}


/*==============================================================================
  8. TABLEAUX ET LISTES
==============================================================================*/
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    box-shadow: 0 1px 3px var(--color-shadow);
}

.table thead th {
    background-color: var(--color-header);
    color: var(--color-text-light);
    padding: 12px 15px;
    text-align: left;
    font-weight: 500;
    font-size: 0.9em;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-accent);
}

.table thead th:first-child {
    border-top-left-radius: 6px;
}

.table thead th:last-child {
    border-top-right-radius: 6px;
}

.table tbody tr {
    transition: background-color 0.2s ease;
}

.table-striped tbody tr:nth-child(even) {
    background-color: var(--color-container);
}

.table tbody tr:hover {
    background-color: var(--color-highlight);
}

.table tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 0.95em;
}

.table tbody td a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    margin-right: 10px;
    font-weight: 500;
}

.table tbody td a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.table .actions {
    white-space: nowrap;
}

/* Style spécifique pour les liens d'action */
.table td a[href*="show"] {
    color: var(--color-info);
}

.table td a[href*="update"] {
    color: var(--color-warning);
}

.table td a[href*="delete"] {
    color: var(--color-error);
}

/* Carousel pagination pour mobile */
.carousel-pagination {
    display: none;
    text-align: center;
    margin-top: var(--spacing-md);
}

.pagination-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-border);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: var(--color-primary);
}

/*==============================================================================
  9. ALERTES ET NOTIFICATIONS
==============================================================================*/
.alert {
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-md);
    position: relative;
    border-left: 4px solid;
    animation: fadeIn 0.3s ease-out;
}

.alert-success {
    background-color: rgba(163, 171, 155, 0.1);
    border-left-color: var(--color-success);
    color: var(--color-success);
}

.alert-error {
    background-color: rgba(183, 156, 152, 0.1);
    border-left-color: var(--color-error);
    color: var(--color-error);
}

.alert-warning {
    background-color: rgba(199, 178, 153, 0.1);
    border-left-color: var(--color-warning);
    color: var(--color-warning);
}

.alert-info {
    background-color: rgba(155, 170, 181, 0.1);
    border-left-color: var(--color-info);
    color: var(--color-info);
}

#flash-message {
    margin-top: var(--spacing-md);
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: var(--z-index-tooltip);
    max-width: 350px;
}
.add-warranty #flash-message {
    /* position: inherit; */
    top: 0;
    left: 0;
}

.confirmation-message {
    text-align: left;
    padding: var(--spacing-lg);
    background-color: rgba(163, 171, 155, 0.1);
    border-radius: var(--border-radius);
    animation: fadeIn 0.5s ease-in-out;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-success);
}

.confirmation-message h3 {
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    font-weight: 300;
    font-size: 1.5em;
}

.confirmation-message .small {
    font-size: 0.85em;
    color: var(--color-text-muted);
    margin-top: var(--spacing-md);
    letter-spacing: 0.3px;
}

/* Loader */
.warranty-details-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) 0;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top: 3px solid var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md);
}

/*==============================================================================
  10. UTILITAIRES
==============================================================================*/
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-bold {
    font-weight: var(--font-weight-bold);
}

.text-normal {
    font-weight: var(--font-weight-normal);
}

.text-light {
    font-weight: var(--font-weight-light);
}

.text-muted {
    color: var(--color-text-secondary);
}

.text-success {
    color: var(--color-success);
}

.text-error {
    color: var(--color-error);
}

.text-warning {
    color: var(--color-warning);
}

.text-info {
    color: var(--color-info);
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-xs {
    margin-bottom: var(--spacing-xs) !important;
}

.mb-sm {
    margin-bottom: var(--spacing-sm) !important;
}

.mb-md {
    margin-bottom: var(--spacing-md) !important;
}

.mb-lg {
    margin-bottom: var(--spacing-lg) !important;
}

.mb-xl {
    margin-bottom: var(--spacing-xl) !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-xs {
    margin-top: var(--spacing-xs) !important;
}

.mt-sm {
    margin-top: var(--spacing-sm) !important;
}

.mt-md {
    margin-top: var(--spacing-md) !important;
}

.mt-lg {
    margin-top: var(--spacing-lg) !important;
}

.mt-xl {
    margin-top: var(--spacing-xl) !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.p-0 {
    padding: 0 !important;
}

.p-xs {
    padding: var(--spacing-xs) !important;
}

.p-sm {
    padding: var(--spacing-sm) !important;
}

.p-md {
    padding: var(--spacing-md) !important;
}

.p-lg {
    padding: var(--spacing-lg) !important;
}

.p-xl {
    padding: var(--spacing-xl) !important;
}

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

.align-center {
    align-items: center !important;
}

.align-start {
    align-items: flex-start !important;
}

.align-end {
    align-items: flex-end !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.flex-grow {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

/*==============================================================================
  11. ANIMATION ET EFFETS
==============================================================================*/
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    50% {
        color: var(--color-primary);
    }
}

@keyframes blinkSvg {
    50% {
        fill: var(--color-primary);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/*==============================================================================
  12. RESPONSIVE DESIGN
==============================================================================*/
/* Breakpoint Large - 992px et plus */
@media (min-width: 992px) {
    .container {
        padding: 0 var(--spacing-lg);
    }
    .warranty-form-drawer {
        width: 50%;
        right: -50%;
    }
}

/* Breakpoint Medium - Entre 768px et 991px */
@media (max-width: 991px) {
    :root {
        --form-max-width: 90%;
    }

    .profile-header,
    .card-header {
        padding: var(--spacing-md);
    }

    .profile-info,
    .card-body {
        padding: var(--spacing-md);
    }
}

/* Breakpoint Small - Entre 576px et 767px */
@media (max-width: 767px) {
    .main_content {
        width: 100%;
        max-width: 100%;
        padding: var(--spacing-md) var(--spacing-sm);
    }
    /* Ajustements de layout */
    #corpo-header {
        flex-direction: column;
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .corpo-logo-container {
        margin-right: 0;
    }

    /* Navigation */
    nav.main-nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav.main-nav ul li {
        margin: 5px 0;
        width: 100%;
        text-align: center;
    }

    /* Formulaires */
    .form-row {
        flex-direction: column;
        margin: 0;
    }

    .form-row .form-group {
        width: 100%;
        min-width: 100%;
        padding: 0;
        margin-bottom: var(--spacing-md);
    }

    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
        margin-bottom: var(--spacing-sm);
    }

    /* Cartes de garantie */
    .warranty-cards-container {
        display: flex;
        overflow-x: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        padding: var(--spacing-sm) 0;
    }

    .warranty-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
        margin-right: var(--spacing-md);
    }

    /* Carousel pagination */
    .carousel-pagination {
        display: block;
    }

    /* Tiroirs latéraux */
    .profile-form-drawer,
    .warranty-form-drawer,
    .warranty-details-drawer {
        width: 100%;
        right: -100%;
    }

    /* Upload controls */
    .upload-options {
        flex-direction: column;
    }

    /* Période de garantie */
    .period-info {
        flex-direction: column;
        gap: 10px;
    }

    .period-arrow {
        transform: rotate(90deg);
    }

    /* Modales */
    .modal-content {
        width: 95%;
        margin: 20px auto;
    }

    /* Info rows */
    .info-row {
        flex-direction: column;
    }

    .info-label,
    .info-value {
        width: 100%;
    }

    .info-label {
        margin-bottom: 5px;
    }

    /* Tableaux */
    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Sélecteur de langue */
    .language-buttons {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 10px 0;
        background: black;
    }

    .language-selector {
        width: 100%;
        max-width: 300px;
        justify-content: space-between;
    }

    .language-btn {
        flex: 1;
        padding: 8px 5px;
    }
}
/* Correction des problèmes de superposition et double boxage sur mobile */
@media (max-width: 767px) {

    /* Réduire les ombres et effets superposés */
    .warranty-card,
    .profile-card,
    .add-warranty {
        box-shadow: var(--box-shadow-sm);
    }

    /* Éviter les doubles transformations */
    .warranty-card:hover,
    .profile-card:hover {
        transform: translateY(-1px);
        box-shadow: var(--box-shadow);
    }

    /* Ajuster les marges pour éviter les superpositions */
    .card-header,
    .card-body {
        padding: var(--spacing-md) var(--spacing-md);
    }

    /* Simplifier les boutons sur mobile */
    .btn {
        box-shadow: none;
    }

    .btn:hover {
        box-shadow: var(--box-shadow-sm);
    }

    /* Éviter l'encombrement visuel */
    .form-actions {
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }
}
@media (max-width: 767px) {

    /* Ajustements pour les formulaires sur mobile */
    .warranty-cards-wrapper {
        flex-direction: column;
    }

    .form-group-wrapper {
        flex-direction: column;
    }

    /* Assurer que les boutons d'action s'empilent correctement sur mobile */
    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions .btn {
        width: 100%;
        margin-bottom: var(--spacing-sm);
        margin-right: 0;
    }

    .form-actions .btn:last-child {
        margin-bottom: 0;
    }
}
/* Breakpoint X-Small - Moins de 576px */
@media (max-width: 575px) {

    /* Ajuster les espacements */
    :root {
        --spacing-lg: 20px;
        --spacing-xl: 25px;
    }

    /* Ajuster les tailles de texte */
    .corpo-header-title {
        font-size: 1.5em;
    }

    .corpo-header-subtitle {
        font-size: 0.9em;
    }

    /* Réduire certains éléments */
    .profile-avatar {
        width: 60px;
        height: 60px;
    }

    .profile-avatar .initials {
        font-size: 1.5em;
    }

    .profile-title h2 {
        font-size: 1.5em;
    }

    /* Bordure dégradée */
    .profile-card::before,
    .profile-completion::before,
    .add-warranty::before,
    .list-warranties::before,
    .warranty-card::before,
    #corpo-header::after {
        left: 5%;
        right: 5%;
    }

    /* Ajustements d'UI */
    .warranty-drawer-info-grid {
        grid-template-columns: 1fr;
    }

    .camera-container {
        aspect-ratio: 1/1;
    }
}

/* Classes utilitaires responsive */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

/* Support pour les navigateurs sans support aspect-ratio */
@supports not (aspect-ratio: 16/9) {
    .camera-container {
        height: 0;
        padding-bottom: 56.25%;
        /* 16:9 = 56.25% */
        position: relative;
    }

    #camera-stream,
    #camera-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.main-nav a,
.modal-header h3 {
    color: var(--color-text-primary);
}
.drawer-header h3 {
    color: var(--color-text-primary-white);
    text-transform: uppercase;
}

footer {
    color: var(--color-text-light);
}

/* Pour tout texte sur fond noir */
.bg-dark,
[style*="background-color: #000"] {
    color: var(--color-text-light);
}

/* Ajoutez ou modifiez cela dans components.css */
#faq-modal.w25-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-modal-backdrop);
}




/*==============================================================================
  13. STYLES SPÉCIFIQUES CLIENT
==============================================================================*/
/* Footer spécifique client */
footer {
    z-index: 40;
    background: black;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    color: var(--color-text-light);
    /* Texte clair sur fond noir */
    width: 100%;
    position: relative;
    /* Le mettre hors du flux normal */
}

.footer-content {
    padding: 0;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: start;
    text-align: center;
    color: var(--color-text-light);
    font-size: 13px;
    width: 50%;
}

.fblock {
    margin: 30px 0 30px 0;
    width: 320px
}

.fblock:first-child {
    padding: 0;
}

.fblock:nth-of-type(2) {
    border-left: 1px solid;
    height: 130px;
}

footer .title2 {
    margin: 0 0 10px 0;
    font-family: 'balboa bold', sans-serif;
    line-height: 26px;
    font-size: 22px;
    font-weight: normal;
    text-transform: uppercase;
    color: var(--color-text-light);
}

footer .title2 a {
    color: var(--color-primary);
    margin: 0 0 20px 0;
    display: inline-block;
}

.address p {
    margin: 5px 0;
}

footer a,
footer a:not(:has(img)) {
    text-decoration: none;
    color: var(--color-text-light);
    transition: color 0.25s ease-in-out;
}

footer a:hover {
    -webkit-animation: blink 0.25s linear 1;
    -moz-animation: blink 0.25s linear 1;
    -ms-animation: blink 0.25s linear 1;
    -o-animation: blink 0.25s linear 1;
    animation: blink 0.25s linear 1;
    color: var(--color-primary-hover);
}

footer a:not(:has(img)):hover {
    -webkit-animation: blink 0.25s linear 1;
    -moz-animation: blink 0.25s linear 1;
    -ms-animation: blink 0.25s linear 1;
    -o-animation: blink 0.25s linear 1;
    animation: blink 0.25s linear 1;
    color: var(--color-primary-hover);
}

/* Social network icons */
.social_network {
    margin: 0 auto;
    width: 60%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
}

footer svg:hover polygon,
footer svg:hover path,
footer svg:hover rect,
footer svg:hover circle {
    fill: var(--color-primary);
    animation: blinkSvg 0.25s linear 1;
}

.punchline {
    margin: 20px 0 0 0;
    color: var(--color-text-light);
}



/* Modal FAQ spécifique */
#faq-modal.w25-modal {
    display: none !important;
    /* Force le masquage */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-modal);
}

#faq-modal.w25-modal.active {
    display: block !important;
}
.w25-modal-content {
    background-color: var(--color-surface);
    margin: 10% auto;
    padding: 0;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); */
}

.w25-modal-title {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.8rem;
    display: inline-block;
}

.w25-accordion-item {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

.w25-accordion-header {
    cursor: pointer;
    padding: 1rem 0;
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary);
    position: relative;
    padding-right: 1.5rem;
}

/* Styles spécifiques pour le tiroir de profil */
#profile-form-drawer.profile-form-drawer {
    width: 380px;
    max-width: 100%;
    overflow-x: hidden;
}

#update-profile-form {
    padding: var(--spacing-lg);
    width: 100%;
    box-sizing: border-box;
}

#update-profile-form .form-group {
    width: 100%;
    margin-bottom: var(--spacing-md);
    position: relative;
}

#update-profile-form input,
#update-profile-form select,
#update-profile-form .country-dropdown {
    width: 100%;
    box-sizing: border-box;
}

#update-profile-form .form-actions {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* Force le menu déroulant de pays à rester dans les limites */
#country-list.dropdown-list {
    max-width: 100%;
    box-sizing: border-box;
}






/* Styles spécifiques pour la page de login */

/* Section d'illustration - fond noir avec texte blanc */
.illustration-section {
    background-color: var(--color-header);
    /* Fond noir */
    color: var(--color-text-primary-light);
    /* Texte blanc */
    padding: var(--spacing-xl) var(--spacing-lg);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    text-align: left;
    font-family: 'balboa Black';
}

.illustration-content {
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}

.illustration-title {
    color: var(--color-text-primary-light);
    font-size: 1.6rem;
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-weight-light);
    letter-spacing: 0.5px;;
    text-transform: uppercase;
    font-family: 'balboa Black';
}

.illustration-text {
    color: var(--color-text-light);
    /* Texte blanc */
    line-height: var(--line-height-loose);
    font-size: var(--font-size-md);
    opacity: 0.9;
}

/* Section formulaire - style cohérent avec le reste du site */
.login-card .login-header {
    background-color: var(--color-surface);
    border-radius: 0;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    background-color: white;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
}
.login-card .login-header h3 {
    color:var(--color-text-primary-light);
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
}

.login-card .login-header p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
}

.login-info {
    padding: var(--spacing-lg);
    background: white;
}

.login-card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    position: relative;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    border: var(--luxury-card-border);
    width: 100%;
    max-width: var(--form-max-width);
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .login-card {
        max-width: 100%;
    }
}
/* Style pour le formulaire de login */
#login-form {
    margin-bottom: var(--spacing-md);
}

#login-form .form-group {
    margin-bottom: var(--spacing-md);
}

#login-form .form-control {
    width: 100%;
    padding: 12px 16px;
    height: var(--form-field-height);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    background-color: var(--color-container);
    transition: all var(--transition-fast);
}

#login-form .form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--luxury-focus-glow);
    background-color: var(--color-surface);
}

/* Bouton FAQ en texte souligné */
#w25-show-faq {
    background: none;
    border: none;
    color: var(--color-primary);
    text-decoration: underline;
    font-size: var(--font-size-md);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    transition: color var(--transition-fast);
}

#w25-show-faq:hover {
    color: var(--color-primary-hover);
}

.login-help {
    text-align: center;
    margin-bottom: 20px;
}

/* Modal FAQ avec mise en page accordéon */
#w25-faq-modal.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-index-modal);
    backdrop-filter: blur(2px);
}

.modal-content {
    background-color: var(--color-surface);
    margin: 10% auto;
    padding: var(--spacing-xl) var(--spacing-lg);
    width: 90%;
    max-width: 600px;
    border-radius: var(--border-radius);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}
/*
.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--luxury-border-gradient);
}*/

.modal-title {
    color: var(--color-text-primary);
    font-size: 1.8rem;
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.close-modal {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    font-size: 24px;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1;
}

.close-modal:hover {
    color: var(--color-text-primary);
}

/* Style de l'accordéon FAQ */
.w25-accordion-item {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-sm);
}

.w25-accordion-item:last-child {
    border-bottom: none;
}

.w25-accordion-header {
    cursor: pointer;
    padding: var(--spacing-md) 0;
    margin: 0;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    position: relative;
    padding-right: 30px;
    transition: color var(--transition-fast);
}

.w25-accordion-header:hover {
    color: var(--color-primary);
}

.w25-accordion-header::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--color-primary);
}

.w25-accordion-header.active::after {
    content: '-';
}

.w25-accordion-content {
    display: none;
    padding: 0 0 var(--spacing-md) 0;
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .modal-content {
        margin: 5% auto;
        width: 95%;
    }

    .illustration-section {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .illustration-title {
        font-size: 1.5rem;
    }
}







.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    min-width: 400px;
    background: white;
    padding: 0;
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    height: auto;
    /* width: auto; */
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.modal.active {
    visibility: visible;
    opacity: 1;
}

.modal-backdrop.active {
    visibility: visible;
    opacity: 1;
}

.modal .close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
    border: none;
    background: none;
}




/* Styles de carousel pour mobile */
@media (max-width: 768px) {
    .warranty-cards-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        gap: 0;
        padding-bottom: var(--spacing-md);
    }
    
    .warranty-cards-container::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }
    
    .warranty-cards-container.mobile-carousel {
        flex-wrap: nowrap;
        scroll-behavior: smooth;
    }
    
    .mobile-carousel .warranty-card {
        flex: 0 0 calc(100% - var(--spacing-md));
        scroll-snap-align: center;
        margin-right: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
        max-width: none;
    }
    
    .mobile-carousel .warranty-card:last-child {
        margin-right: var(--spacing-md);
        padding-right: 0;
    }
    
    /* Pagination améliorée */
    .carousel-pagination {
        display: block;
        text-align: center;
        margin-top: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }
    
    .pagination-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        padding: var(--spacing-sm) 0;
    }
    
    .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--color-border);
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }
    
    .dot.active {
        background-color: var(--color-primary);
        transform: scale(1.2);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
    
    /* Indicateur de défilement */
    .scroll-indicator {
        position: absolute;
        bottom: 65px;
        right: 15px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: var(--color-primary);
        color: var(--color-text-light);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        opacity: 0.8;
        transition: opacity 0.3s ease;
        z-index: 50;
        animation: pulse 2s infinite;
    }
    
    .scroll-indicator:hover {
        opacity: 1;
    }
    
}


    @keyframes pulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgb(255, 24, 24);
        }
        70% {
            transform: scale(1.1);
            box-shadow: 0 0 0 10px rgba(104, 161, 120, 0);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(104, 161, 120, 0);
        }
    }

/* 
 * Styles pour les indicateurs de preuve d'achat
 * À ajouter dans la section "Cartes et conteneurs" de components.css
 */

/* États de la carte de garantie basés sur la preuve d'achat */
.warranty-card.no-proof {
    border: 2px dashed var(--color-expired);
}

.warranty-card.pending-proof {
    border: 2px solid var(--color-text-muted);
}

.warranty-card.validated-proof {
    border: 2px solid var(--color-valid);
}

/* Indicateurs visuels avec effets de rollover */
.proof-missing-indicator,
.proof-pending-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all var(--transition-normal);
    overflow: hidden;
    width: 36px;
    height: 36px;
}

/* État normal - juste l'icône */
.proof-missing-indicator {
    background-color: var(--color-expired);
    cursor: pointer;
    animation: pulse 2s infinite;
    color: var(--color-text-light);
}

/* État survol - élargissement pour afficher le texte */
.proof-missing-indicator:hover {
    width: auto;
    border-radius: 18px;
    padding: 6px 12px 6px 6px;
}

.proof-missing-indicator svg {
    min-width: 24px;
}

.proof-missing-label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 0;
    transition: all var(--transition-normal);
    opacity: 0;
    font-size: 8px;
    text-transform: uppercase;
}

.proof-missing-indicator:hover .proof-missing-label {
    max-width: 120px;
    margin-left: var(--spacing-sm);
    opacity: 1;
}

.proof-pending-indicator {
    background-color: var(--color-text-muted);
    cursor: help;
    color: var(--color-text-light);
}


/* Styles pour les textes d'information */
.validation-bonus {
    color: var(--color-valid);
    font-weight: var(--font-weight-bold);
}

.validation-pending {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Style pour la date de fin bonifiée */
.validated-proof .detail-item:last-child .detail-value {
    color: var(--color-valid);
    font-weight: var(--font-weight-bold);
}

/*Modal close bouton*/
/* Bouton de fermeture simplifié avec animation croix-cercle-croix */
/* Masquer le texte du bouton (le "×") */

/* Empêcher l'héritage de styles indésirables de .close-modal */
.close-drawer.close-design,
.close-modal.close-design {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;background: linear-gradient(145deg, #2c2f36, #3b3f47);
}
.close-design::before,
.close-design::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 2px;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

.close-design::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.close-design::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.close-design:hover {
    background: linear-gradient(145deg, #303030, #000000);
    box-shadow: 0 0 12px rgba(66, 66, 66, 0.6);
}

.close-design:hover::before,
.close-design:hover::after {
    width: 80%;
    background-color: #fff;
}
.close-modal.close-design.modale-close-design {
    right: 20px;
    position: absolute;
    top: 20px;background: linear-gradient(145deg, #2c2f36, #3b3f47);
}



/* Styles pour le header du tiroir de garantie */
/* Warranty Drawer Redesign */
.warranty-drawer-details {
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* Header with gradient background */
.warranty-drawer-header {
    background-color: #b2b8a9;
    /* Similar to image background */
    background-image: linear-gradient(to bottom, #bec3b6, #a6ad9d);
    color: white;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.reference-code {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    letter-spacing: 0.05em;
    text-align: center;
}

.status-indicator {
    padding-top: 0.5rem;
    display: flex;
    justify-content: center;
}

.warranty-drawer-status {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: lowercase;
    padding: 0.4rem 1.25rem;
    border-radius: 25px;
    display: inline-block;
}

.warranty-drawer-status.valid {
    background-color: #10b981;
    color: white;
}

.warranty-drawer-status.expiring-soon {
    background-color: #f59e0b;
    color: white;
}

.warranty-drawer-status.expired {
    background-color: #ef4444;
    color: white;
}

/* Information Sections */
.warranty-info-section {
    background-color: #f5f5f5;
    padding: 1.25rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-item {
    display: flex;
    gap: 0.5rem;
}

.info-label {
    font-weight: 600;
    min-width: 120px;
    color: #555;
}

.info-value {
    color: #333;
}

/* Highlighted date effect for end date */
.highlighted-date {
    position: relative;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 3px;
}

.highlighted-date.valid {
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
}

.highlighted-date.expiring-soon {
    color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.1);
}

.highlighted-date.expired {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}

.date-highlight-effect {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-color: currentColor;
    opacity: 0.1;
    animation: pulse 1.5s ease-in-out infinite;
    border-radius: 3px;
    z-index: -1;
}

/* Proof image styling */
.proof-image {
    max-width: 100%;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s;
}

.proof-image:hover {
    transform: scale(1.02);
}

.no-proof-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background-color: #f9f9f9;
    border-radius: 6px;
    border: 1px dashed #ddd;
}

.no-proof-icon {
    color: #aaa;
    margin-bottom: 1rem;
}

.no-proof-text {
    font-weight: 600;
    color: #555;
    margin-bottom: 0.5rem;
}

.no-proof-hint {
    font-size: 0.875rem;
    color: #777;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .info-item {
        flex-direction: column;
        gap: 0.25rem;
    }

    .info-label {
        min-width: unset;
    }
}


/* Styles pour les champs requis et validation */
.required-indicator {
    color: var(--color-error);
    margin-left: 4px;
}

.is-invalid {
    border-color: var(--color-error) !important;
    background-color: rgba(183, 156, 152, 0.05) !important;
    animation: errorPulse 1.5s 1;
}

@keyframes errorPulse {
    0% { box-shadow: 0 0 0 0 rgba(183, 156, 152, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(183, 156, 152, 0); }
    100% { box-shadow: 0 0 0 0 rgba(183, 156, 152, 0); }
}

/* Messages d'erreur */
.alert.alert-error {
    font-size: 0.85rem;
    margin-top: 5px;
    padding: 5px 10px;
    background-color: rgba(183, 156, 152, 0.1);
    border-left: 3px solid var(--color-error);
    color: var(--color-error);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

/* Conteneur de message flash */
#flash-message {
    position: relative;
    margin: var(--spacing-md) 0;
    width: 100%;
    z-index: 10;
}

/* Messages de succès et d'erreur */
.flash-message-success, 
.flash-message-error {
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin: var(--spacing-md) 0;
    animation: fadeInDown 0.5s ease-in-out;
}

.flash-message-success {
    text-align: center;
    background-color: rgba(163, 171, 155, 0.1);
    border: 1px solid var(--color-success);
}

.flash-message-error {
    background-color: rgba(183, 156, 152, 0.1);
    border: 1px solid var(--color-error);
}

/* Contenu des messages de succès */
.flash-message-success .success-icon {
    margin-bottom: var(--spacing-md);
}

.flash-message-success .success-icon svg {
    color: var(--color-success);
}

.flash-message-success h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.flash-message-success p {
    color: var(--color-text-secondary);
}

.success-actions {
    margin-top: var(--spacing-lg);
}

/* Animation pour les messages */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*Patch custom*/
.btn.btn-primary.btn-add-warranty:hover {
	color: white;
}






/* ============================================================================
  STYLES POUR LES CONSENTEMENTS UTILISATEUR ET DOCUMENTS LÉGAUX
============================================================================ */
/* STYLES POUR LES CONSENTEMENTS UTILISATEUR ET DOCUMENTS LÉGAUX */

/* Section de consentement */
.consent-section {
    background-color: rgba(104, 161, 120, 0.05);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border-left: 3px solid var(--color-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: background-color var(--transition-normal);
}

.consent-section:hover {
    background-color: rgba(104, 161, 120, 0.08);
}

/* Éléments individuels de consentement */
.consent-item {
    margin-bottom: var(--spacing-sm);
    position: relative;
}

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

/* Style personnalisé pour les cases à cocher */
.consent-checkbox {
    /* Cacher la case à cocher par défaut */
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Créer un container pour positionner notre case à cocher personnalisée */
.consent-label {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    user-select: none;
    color: var(--color-text-secondary);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    transition: color var(--transition-fast);
}

/* Créer notre case à cocher personnalisée */
.consent-label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border);
    background-color: var(--color-surface);
    border-radius: 4px;
    transition: all var(--transition-normal);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Style au survol */
.consent-label:hover:before {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(104, 161, 120, 0.1);
}

/* Style quand la case est cochée */
.consent-checkbox:checked+.consent-label:before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Créer la coche */
.consent-label:after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Afficher la coche quand la case est cochée */
.consent-checkbox:checked+.consent-label:after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

/* Focus state pour l'accessibilité */
.consent-checkbox:focus+.consent-label:before {
    box-shadow: 0 0 0 3px rgba(104, 161, 120, 0.2);
}

/* Style pour les liens dans les labels */
.consent-label a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-primary);
    margin: 0 3px;
    transition: all var(--transition-fast);
    font-weight: var(--font-weight-medium);
}

.consent-label a:hover {
    color: var(--color-primary-hover);
    border-bottom-color: var(--color-primary-hover);
}

/* Animation lors du clic */
.consent-label:active:before {
    transform: scale(0.95);
}

/* Animation de vague pour les cases à cocher */
.checkbox-ripple {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 0;
    height: 0;
    background-color: rgba(104, 161, 120, 0.3);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: rippleEffect 0.7s ease-out;
}

@keyframes rippleEffect {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }

    100% {
        width: 50px;
        height: 50px;
        opacity: 0;
        transform: translate(-50%, -50%);
    }
}

/* Animation pour les cases cochées via le bouton d'acceptation */
.consent-checkbox.just-checked+.consent-label:before {
    animation: checkboxPulse 0.5s ease-in-out;
}

@keyframes checkboxPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(104, 161, 120, 0.7);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(104, 161, 120, 0.2);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(104, 161, 120, 0);
    }
}

/* Style pour les cases requises */
.consent-item.required .consent-label:after {
    content: '*';
    position: absolute;
    top: 0;
    right: -10px;
    color: var(--color-error);
    font-size: var(--font-size-sm);
}

/* État désactivé pour les cases à cocher */
.consent-checkbox:disabled+.consent-label {
    opacity: 0.6;
    cursor: not-allowed;
}

.consent-checkbox:disabled+.consent-label:before {
    background-color: var(--color-container);
    border-color: var(--color-border);
}

/* Style pour les cases à cocher avec une complétion réussie */
.consent-checkbox:checked+.consent-label {
    color: var(--color-text-primary);
}

/* Versions responsives */
@media (max-width: 768px) {
    .consent-section {
        padding: var(--spacing-sm);
    }

    .consent-label {
        font-size: 13px;
        padding-left: 30px;
    }

    .consent-label:before {
        width: 18px;
        height: 18px;
    }

    .consent-label:after {
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
    }
}

.harmo-link {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-primary);
    margin: 0 3px;
    transition: all var(--transition-fast);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}
.harmo-link:hover {
  color: var(--color-primary-hover);
  border-bottom-color: var(--color-primary-hover);
}




.newsletter-subscription {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--color-container);
    border-radius: var(--border-radius-sm);
}

.newsletter-switch {
    position: relative;
}

.newsletter-checkbox {
    display: none;
}

.newsletter-toggle {
    display: inline-block;
    width: 60px;
    height: 24px;
    background-color: var(--color-border);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.newsletter-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    transition: transform var(--transition-fast);
}

.newsletter-checkbox:checked + .newsletter-toggle {
    background-color: var(--color-primary);
}

.newsletter-checkbox:checked + .newsletter-toggle::after {
    transform: translateX(36px);
}

.newsletter-state {
    display: none; /* Caché car redondant avec le switch */
}