/* 
  CSS pour la page "Mon Compte"
  
  Ce fichier définit la mise en page, les styles pour les messages d'erreur, 
  le formulaire de mise à jour des informations du compte et l'affichage des factures.
  
  Les styles sont rédigés en français et intègrent des commentaires explicatifs 
  ainsi que des améliorations pour l'accessibilité (contrastes suffisants, focus visible).
*/

/* Conteneur principal de la page */
.account-container {
    width: 100%;
    max-width: 1500px;
    margin: 10rem auto;
    padding: 6rem 7%;
}

/* En-tête de la page */
.account-header {
    text-align: center;
    margin-bottom: 2rem;
}

.account-header h1 {
    text-align: start;
    font-size: 2.5rem;
    color: var(--dark); /* Assurez-vous que cette couleur offre un contraste suffisant */
}

.account-header .account-subtitle {
    text-align: start;
    font-size: 1.125rem;
    color: var(--text-color);
    opacity: 0.8;
}

/* Message d'erreur (rôle alert dans le HTML pour l'accessibilité) */
.alert {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.alert-danger {
    border: 1px solid #FCA5A5;
    background: #FEE2E2; /* Fond en rouge pâle pour attirer l'attention */
}

.alert-success {
    border: 1px solid #DCFCE7;
    background: #DCFCE7; /* Fond en vert pâle pour attirer l'attention */
}
.alert-icon {
    margin-right: 0.75rem;
    /* L'icône aide visuellement à reconnaître le message d'erreur */
}

/* Section de statut compte */
.account-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.status-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Statut en cas de succès (ex : compte validé) */
.status-item.success {
    background: #DCFCE7; /* Fond vert clair */
    color: #15803D;      /* Texte vert foncé */
}

/* Statut d'avertissement (ex : abonnement inactif) */
.status-item.warning {
    background: #FEF3C7; /* Fond jaune clair */
    color: #92400E;      /* Texte jaune foncé */
}

.status-icon {
    margin-right: 0.5rem;
}

/* Style du formulaire de compte */
.account-form {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 2rem;
}

/* Disposition interne du formulaire */
.account-form .form-sections {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.account-form .form-section {
    background: #f9fafb;
    padding: 1rem;
    border-radius: 8px;
}


/* Grille pour organiser les champs de formulaire */
.account-form .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* Groupes de champs et étiquettes */
.form-group {
    display: flex;
    flex-direction: column;
}

/* Section Société */
.company-section {
    margin-top: 2rem;
}

.company-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.company-section .switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* La div d'informations société (affichée ou masquée) */
#company_info {
    margin-top: 1rem;
}

/* Préférences (newsletter, partenaires, etc.) */
.preferences-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.preferences-group .checkbox-label {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    gap: 0.5rem;
}

/* Bouton d'action du formulaire */
.form-actions {
    text-align: start;
    margin-top: 2rem;
}

.form-actions .btn {
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Bouton principal */
.btn-primary {
    background: var(--complement-color);
    color: #ffffff;
}

.btn-primary:hover {
    /* Pour améliorer l'interaction, vous pouvez ajuster la couleur lors du survol */
    filter: brightness(90%);
}

/* Section factures */
.invoices-section {
    margin-top: 2rem;
}

.invoices-section h2 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    text-align: start;
    color: var(--dark);
}

/* Table responsive pour les factures */
.table-responsive {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    text-align: left;
    font-size: 0.95rem;
}

.table th {
    background: #f3f4f6;
    color: var(--dark);
    font-weight: 600;
}

/* Bouton d'action dans la table */
.table .btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: 4px;
}

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

.btn-outline:hover {
    background: var(--primary-color);
    color: #fff;
}

/* Ajustements responsives pour une meilleure accessibilité sur mobile */
@media (max-width: 768px) {
    .account-form .form-grid {
        grid-template-columns: 1fr;
    }
    
    .account-container {
        padding: 1rem;
    }
}