/* ==========================================================================
   Styles de base et Utilitaires
   ========================================================================== */

:root {
    --color-background: #f2f2f2;
    --color-text: #333;
    --color-text-subtle: #666;
    --color-card-background: white;
    --color-card-shadow: rgba(0, 0, 0, 0.1);
    --color-border: #ddd;
    --color-border-light: #eee;
    --color-input-background: white;
    --color-input-border: #ccc;
    --color-input-text: #333;
    --color-primary: #007BFF;
    --color-primary-hover: #0056b3;
    --color-primary-text: white;
    --color-secondary: #6c757d;
    --color-secondary-hover: #5a6268;
    --color-secondary-text: white;
    --color-danger: #dc3545;
    --color-danger-hover: #c82333;
    --color-danger-text: white;
    --color-success: #28a745;
    --color-success-text: white;
    --color-info: #17a2b8;
    --color-info-text: white;
    --color-warning: #fd7e14;
    --color-warning-text: white;
    --color-header-background: #f2f2f2;
    --color-sticky-background: rgba(255, 255, 255, 0.95);
    --color-row-odd-background: #f9f9f9;
    --color-success-background: #d4edda;
    --color-success-border: #c3e6cb;
    --color-success-text-dark: #155724;
    --color-error-background: #f8d7da;
    --color-error-border: #f5c6cb;
    --color-error-text-dark: #721c24;
    /* Couleurs pour la barre de progression */
    --color-progress-execution: var(--color-success);
    --color-progress-rest: var(--color-warning);
    --color-progress-text: var(--color-text);
}

/* Masquer les flèches des champs numériques pour Chrome, Safari, Edge */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Nécessaire pour certains navigateurs */
}

/* Masquer les flèches des champs numériques pour Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

.flogin { /* Honeypot */
    display: none;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    /* Le padding est retiré pour éviter les débordements sur mobile */
}

/* --- Classes utilitaires --- */
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }

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


/* ==========================================================================
   Composants UI (Cards, Buttons, Forms)
   ========================================================================== */

/* --- Cards & Containers --- */
.card {
    background-color: var(--color-card-background);
    border-radius: 10px;
    box-shadow: 0 2px 10px var(--color-card-shadow);
    padding: 5px;
    margin: 20px 5px; /* Ajout d'une marge latérale pour l'espacement sur mobile */
}

.menu-container, .login-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 30px;
    text-align: center;
}

.admin-container {
    max-width: 600px;
}

/* --- Headers & Titles --- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.page-header.centered {
    flex-direction: column;
    text-align: center;
}

.page-logo {
    width: 50px;
    height: 50px;
}
.page-logo.large {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.page-title {
    font-size: 24px;
    color: var(--color-text);
    margin: 0 0 10px 0;
}

.page-subtitle {
    font-size: 16px;
    color: var(--color-text-subtle);
    margin: 0;
}

/* --- Buttons --- */
.button {
    display: inline-block;
    padding: 10px 18px;
    background-color: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    text-decoration: none;
    text-align: center;
    margin: 5px;
}

.button:hover {
    background-color: var(--color-primary-hover);
}

.button.button-secondary {
    background-color: var(--color-secondary);
}
.button.button-secondary:hover {
    background-color: var(--color-secondary-hover);
}

.button.button-danger {
    background-color: var(--color-danger);
}
.button.button-danger:hover {
    background-color: var(--color-danger-hover);
}

.button.button-full-width {
    display: block;
    width: 100%;
}

a.register-link {
    margin-top: 15px;
    font-size: 14px;
    color: var(--color-text-subtle);
    text-decoration: none;
}
.register-link:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   Page: Historique
   ========================================================================== */
.seance-historique {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--color-background);
}
.seance-header {
    font-size: 1.2em;
    font-weight: bold;
    padding: 10px;
    background-color: var(--color-header-background);
    border-radius: 5px;
}
.seance-details {
    display: none;
    margin-top: 15px;
    padding-left: 20px;
    border-left: 3px solid var(--color-primary);
}
.set {
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--color-card-background);
    border-radius: 5px;
    box-shadow: 0 2px 4px var(--color-card-shadow);
    text-align: left;
}
.set h3 {
    margin-bottom: 5px;
    color: var(--color-text-subtle);
    font-size: 0.9em;
}

.set p {
    font-size: 0.8em;
}
.series-list p {
    margin: 2px 0 2px 15px;
    font-size: 0.8em;
}
.time-ago {
    font-size: 0.6em;
    color: var(--color-text-subtle);
    margin-left: 5px;
}
.duration {
    font-size: 0.6em;
    font-weight: bold;
    color: var(--color-success);
    margin-right: 5px;
}

/* ==========================================================================
   Navigation & Menus
   ========================================================================== */
nav.navigation {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.menu-container nav.navigation {
    flex-direction: column;
    gap: 15px;
}

/* Styles des sets */
.set-card {
    margin: 20px 0;
    padding: 15px 5px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-card-background);
    box-shadow: 0 2px 4px var(--color-card-shadow);
}
.set-card h4 {
    margin-top: 20px;
    margin-bottom: 10px;
}
.set-group-container {
    position: relative; /* Contexte pour le positionnement des flèches */
    /* La marge négative et le padding sont retirés pour éviter le scroll horizontal sur mobile */
}
.set-group-container .set-card {
    display: none;
}
.set-group-container .set-card.active {
    display: block;
}

/* --- Navigation des exercices alternatifs --- */
.nav-dots {
    text-align: center;
    margin-bottom: 10px;
}
.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-border);
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
.dot.active {
    background-color: var(--color-primary);
}

.set-group-nav {
    /* Ce conteneur n'a pas besoin de style, ce sont les boutons qui sont positionnés */
}
.nav-arrow {
    position: absolute;
    top: 120px; /* Positionné verticalement au niveau de la photo */
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    line-height: 35px;
}
.nav-arrow.prev-alt { left: 5px; } /* Petite marge du bord */
.nav-arrow.next-alt { right: 5px; } /* Petite marge du bord */

.set-card.alternative-set {
    margin-left: 30px;
    border-left: 5px solid var(--color-secondary);
}

.set-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-light);
}

.set-header h3 {
    margin: 0;
}
.set-header-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.set-title-and-tags {
    margin-bottom: 10px;
}

.set-name {
    font-weight: normal;
    font-style: italic;
    margin-left: 10px;
    color: var(--color-text-subtle);
}

.set-description {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--color-background);
    border-radius: 4px;
}

.set-commentaire {
    width: 100%;
    min-height: 60px;
    margin-top: 5px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    resize: vertical;
    /* On applique les couleurs des champs de saisie pour la cohérence */
    background-color: var(--color-input-background);
    color: var(--color-input-text);
}

/* Style pour les champs désactivés */
.set-commentaire:disabled {
    background-color: var(--color-background);
    color: var(--color-text-subtle);
}

.set-photo-thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
    background-color: var(--color-background);
}

/* Styles des séries */
.serie-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    background-color: var(--color-row-odd-background);
}
.serie-line:nth-child(odd) {
    background-color: var(--color-row-odd-background);
}

.serie-actions-left {
    flex-shrink: 0;
}

.serie-content {
    flex-grow: 1;
}

.serie-main-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 8px;
}

.serie-number {
    font-weight: bold;
    min-width: 20px;
}

/* Réduction de la largeur des champs */
.serie-repetitions,
.serie-charge,
.serie-temps-repos,
.serie-temps-execution,
.serie-inputs input,
.serie-secondary-details input {
    width: 50px; /* Largeur réduite */
    padding: 3px 5px;
    text-align: center;
    border: 1px solid var(--color-input-border);
    border-radius: 4px;
    margin: 0 2px;
    background-color: var(--color-input-background);
    color: var(--color-input-text);
}

/* Augmenter la largeur du champ pour le poids */
.input-charge {
    width: 70px; /* Largeur réduite */
}

/* Style pour les champs désactivés dans les séries */
.serie-repetitions:disabled,
.serie-charge:disabled,
.serie-temps-repos:disabled,
.serie-temps-execution:disabled,
.serie-inputs input:disabled,
.serie-secondary-details input:disabled {
    background-color: var(--color-background);
    color: var(--color-text-subtle);
    border-color: var(--color-border);
}
.serie-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}
.serie-input-group {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 3px 3px
}

.serie-inputs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Styles spécifiques pour les séries en mode préparation */
.prep-serie-line {
    background-color: transparent;
    border: none;
    padding: 5px 0;
}

.serie-execution-inline {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: 5px;
}

.serie-secondary-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.serie-repos {
    display: flex;
    align-items: center;
    gap: 3px;
}

.serie-actions {
    display: flex;
    gap: 5px;
}

/* --- Boutons spécifiques à la page Séance --- */
.demarrer-execution {
    background-color: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
}

.terminer-serie {
    background-color: var(--color-secondary);
    color: var(--color-secondary-text);
    border: none;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    min-width: 45px; /* Pour éviter le redimensionnement du bouton */
    text-align: center;
    transition: background-color 0.2s ease-in-out;
}

.terminer-serie.is-timing {
    background-color: var(--color-warning); /* Orange */
}
.terminer-serie.is-done {
    background-color: var(--color-danger); /* Rouge */
    font-weight: bold;
}
.trash-btn,
.supprimer-serie,
.delete-serie-btn,
.delete-set-btn {
    background-color: var(--color-danger);
    color: var(--color-danger-text);
    border: none;
    padding: 0;
    border-radius: 3px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../assets/trash.svg');
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
}

.annuler-suppression {
    background-color: var(--color-secondary);
    color: var(--color-secondary-text);
    border: none;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../assets/untrash.svg');
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center;
}

.add-set-button {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: var(--color-success);
    color: var(--color-success-text);
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    margin-top: 20px;
}
.ajouter-serie {
    background-color: var(--color-info);
    color: var(--color-info-text);
    border: none;
    padding: 8px 12px;
    cursor: pointer;
}

.terminer-set {
    background-color: #cccccc;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: not-allowed;
}

.terminer-set:not(:disabled) {
    background-color: var(--color-success);
    cursor: pointer;
}

.add-alternative-btn {
    display: inline-block;
    margin: 5px 0 10px 30px;
    padding: 5px 10px;
    background-color: var(--color-info);
    color: var(--color-info-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}
.serie-line.serie-terminee {
    background-color: var(--color-success-background);
    border-color: var(--color-success-border);
}

.serie-line.serie-supprimee {
    background-color: var(--color-secondary);
    color: var(--color-secondary-text);
}

.serie-line.serie-supprimee input {
    background-color: var(--color-secondary-hover);
    color: var(--color-secondary-text);
    border-color: var(--color-secondary-hover);
}

/* --- Barre de progression (timer) --- */
.progress-container {
    height: 18px;
    background-color: var(--color-background);
    border-radius: 10px;
    position: relative;
    margin-top: 8px;
}

.progress-timer {
    position: absolute;
    width: 100%;
    text-align: center;
    color: var(--color-text);
    font-weight: bold;
    z-index: 1;
    line-height: 18px;
    font-size: 12px;
}

.progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 10px;
    transition: width 0.2s linear;
    position: absolute;
    top: 0;
    left: 0;
}
.progress-bar.progress-bar-execution {
    background-color: var(--color-progress-execution);
}
.progress-bar.progress-bar-rest {
    background-color: var(--color-progress-rest);
}

/* Assurer la lisibilité du texte du timer */
.progress-bar-execution + .progress-timer,
.progress-bar-rest + .progress-timer {
    color: var(--color-progress-text);
}


.set-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.enregistrer-seance {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    background-color: var(--color-success);
    color: var(--color-success-text);
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin-left: 0;
    margin-right: 0;
}

.save-changes-container {
    margin-top: 20px;
    padding: 15px;
    background-color: var(--color-background);
    border-radius: 8px;
}

.exercice-photo {
    margin: 10px auto;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
}

.exercice-photo img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 4px;
    box-shadow: 0 2px 4px var(--color-card-shadow);
}

/* ==========================================================================
   Messages & Notifications
   ========================================================================== */
.error {
    color: var(--color-error-text-dark);
    background-color: var(--color-error-background);
    border: 1px solid var(--color-error-border);
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.success {
    color: var(--color-success-text-dark);
    background-color: var(--color-success-background);
    border: 1px solid var(--color-success-border);
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.error-message, .success-message {
    text-align: center;
}

/* ==========================================================================
   Page: Admin
   ========================================================================== */
/* Styles pour le tableau des utilisateurs */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table, th, td {
    border: 1px solid var(--color-border);
}

th, td {
    padding: 12px;
    text-align: left;
}

th {
    background-color: var(--color-header-background);
}

/* Responsive Table Styles */
@media screen and (max-width: 768px) {
    table {
        border: 0;
        font-size: 12px;
    }
    table thead {
        display: none;
    }
    table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid var(--color-border);
        border-radius: 5px;
        box-shadow: 0 2px 4px var(--color-card-shadow);
    }
    table td {
        display: block;
        text-align: right;
        border-bottom: 1px solid #ddd;
        padding-left: 50%;
        position: relative;
    }
    table td:last-child {
        border-bottom: 0;
    }
    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        text-align: left;
    }
    .actions-cell {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-end;
    }
    .actions-cell form {
        display: block !important;
    }
}

/* Styles pour le formulaire de modification */
#modifier-utilisateur-form {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: var(--color-row-odd-background);
}

#modifier-utilisateur-form div {
    margin-bottom: 15px;
}

#modifier-utilisateur-form label {
    display: block;
    margin-bottom: 5px;
}

#modifier-utilisateur-form input, #modifier-utilisateur-form select {
    width: 100%;
    padding: 8px; /* Utilise le padding du form-container */
}

/* ==========================================================================
   Formulaires Généraux
   ========================================================================== */

.form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}

.form-inline input, .form-inline select, .form-inline textarea {
    padding: 8px;
    border-radius: 4px;
    margin: 5px 0;
}

.form-inline button {
    padding: 8px 12px;
    background-color: var(--color-success);
    color: var(--color-success-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--color-text-subtle);
}
.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--color-input-border);
    border-radius: 5px;
    font-size: 14px;
    box-shadow: 0 0 0 2px var(--color-primary-hover);
}

.form-container {
    margin-top: 20px;
    padding: 20px;
    background-color: var(--color-row-odd-background);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
.form-container h2 {
    margin-top: 0;
}
.form-container div {
    margin-bottom: 15px;
}
.form-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
/* Règle générique pour tous les champs de formulaire */
.form-group input,
.form-container input,
.form-container textarea,
.form-container select,
/* Cible les champs qui doivent avoir un grand padding */
input[type="text"], input[type="password"], input[type="email"], input[type="file"], textarea, select {
    padding: 10px;
    border: 1px solid var(--color-input-border);
    border-radius: 4px;
    background-color: var(--color-input-background);
    color: var(--color-input-text);
    font-size: 1em; /* Assure une taille de police cohérente */
}

/* Appliquer la largeur 100% uniquement aux champs qui le nécessitent */
.form-group input,
.form-group textarea,
.form-container input,
.form-container textarea,
.form-container select {
    width: 100%;
}
.form-buttons {
    display: flex;
    gap: 10px;
}



/* Styles pour la fenêtre modale */
.modal-error {
    background-color: var(--color-error-background);
    color: var(--color-error-text-dark);
    border: 1px solid var(--color-error-border);
}

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

.input-error {
    border: 2px solid var(--color-danger) !important;
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    width: 100%;
    padding-right: 40px; /* Espace pour l'icône */
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%; /* Positionne l'icône à 50% de la hauteur du conteneur */
    transform: translateY(-50%); /* Centre l'icône verticalement */
    cursor: pointer;
    color: var(--color-text-subtle);
    z-index: 2; /* S'assure que l'icône est au-dessus de l'input */
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal.active {
    display: block;
}

.modal-content {
    background-color: var(--color-card-background);
    margin: 15% auto;
    padding: 20px;
    border: 1px solid var(--color-border);
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--color-card-shadow);
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
}

.modal-content h2 {
    margin-top: 0;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.modal-content button {
    background-color: var(--color-primary);
    color: var(--color-primary-text);
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.modal-content button:hover {
    background-color: var(--color-primary-hover);
}

/* ==========================================================================
   Éléments Spécifiques
   ========================================================================== */

.chronometre {
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
    color: var(--color-success);
}

.set-card.set-termine {
    background-color: var(--color-background);
    border-color: var(--color-border-light);
}

.set-card.set-termine .set-header {
    border-bottom-color: var(--color-border-light);
}

.set-card.set-termine .set-name {
    color: var(--color-text-subtle);
}

.set-card.set-termine .terminer-set {
    background-color: var(--color-secondary);
    cursor: not-allowed;
}

.search-card {
    padding: 20px; 
    border-radius: 8px; 
    background-color: var(--color-background);
    margin-bottom: 25px; 
    box-shadow: 0 2px 4px var(--color-card-shadow);
    text-align: left;
}
.search-card h2 {
    margin-top: 0; 
}
.search-form-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 15px; 
    align-items: end; 
}
.search-form-grid div { 
    display: flex; 
    flex-direction: column; 
}
.search-form-grid button { 
    grid-column: 1 / -1; 
}
.exercices-list { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 20px; 
}

.pagination-summary {
    text-align: center;
    color: var(--color-text-subtle);
    margin: 20px 0;
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
}

.unvalidated-img {
    width: 256px; /* Native size */
    height: 256px;
    object-fit: contain; /* To show the full image without cropping */
    border: 1px solid var(--color-border-light);
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: var(--color-background);
}
.validation-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}
.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 15px; /* Pour s'aligner avec les autres champs */
}

.exercice-card { 
    display: flex; 
    flex-direction: row; 
    gap: 20px; 
    padding: 15px; 
    border: 1px solid var(--color-border);
    border-radius: 8px; 
    background-color: var(--color-card-background);
    box-shadow: 0 2px 4px var(--color-card-shadow);
}
.exercice-card.archived,
.set-card.archived {
    background-color: var(--color-background);
    opacity: 0.7;
    border-style: dashed;
}
.exercice-card.archived h3,
.set-card.archived h3 {
    text-decoration: line-through;
    color: var(--color-text-subtle);
}


.exercice-photo { 
    flex-shrink: 0; 
    width: 120px; 
    height: 120px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: var(--color-background);
    border-radius: 5px; 
    overflow: hidden; 
}
.exercice-photo img { 
    max-width: 120px; 
    max-height: 120px; 
    object-fit: cover; 
}
.no-photo-text { 
    text-align: center; 
    color: var(--color-text-subtle);
    font-style: italic; 
    font-size: 0.9em; 
    padding: 10px; 
}
.set-photo-thumbnail.no-photo-text {
    display: flex;
    width: 60px; /* Assure une taille cohérente */
    height: 60px;
    align-items: center;
}
.exercice-details { 
    flex-grow: 1; 
}
.exercice-details h3 { 
    margin: 0 0 10px 0; 
}
.exercice-actions { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 10px; 
}
.muscle-tags-container { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 5px; 
    margin-top: 10px; 
}
.muscle-tag { 
    padding: 3px 8px; 
    border-radius: 12px; 
    font-size: 0.8em; 
}
.muscle-tag.level-0 { 
    background-color: #ffbb00;
    color: #000000;
}
.muscle-tag.level-1 {
    background-color: #ff7300;
    color: #ffffff;
}
.muscle-tag.level-2 { 
    background-color: #ff3217;
    color: #ffffff;
}
.switch { 
    position: relative; 
    display: inline-block; 
    width: 50px; 
    height: 24px; 
}
.switch input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}
.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: var(--color-input-border);
    transition: .4s; 
    border-radius: 24px; 
}
.slider:before { 
    position: absolute; 
    content: ""; 
    height: 18px; 
    width: 18px; 
    left: 3px; 
    bottom: 3px; 
    background-color: var(--color-card-background);
    transition: .4s; 
    border-radius: 50%; 
}
input:checked + .slider { 
    background-color: var(--color-success);
}
input:checked + .slider:before { 
    transform: translateX(26px); 
}

/* ==========================================================================
   Styles de la page de préparation de séance (prep_seance.php)
   ========================================================================== */
.seance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.seance-tile {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.seance-tile.masque {
    background-color: var(--color-border-light);
    opacity: 0.7;
}
.seance-tile.masque h3 {
    color: var(--color-text-subtle);
}
.masque-indicator {
    font-style: italic;
    color: var(--color-text-subtle);
    font-size: 0.9em;
    margin: 5px 0;
}

.seance-tile h3 {
    margin-top: 0;
}
.seance-tile-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}
.seance-tile-actions a {
    flex-grow: 1;
}
.button.seance-tile {
    background-color: var(--color-background); /* Fond gris clair de la tuile */
    color: var(--color-text); /* Texte noir pour un bon contraste */
    text-align: left; /* Aligner le texte à gauche comme une tuile */
    border: 1px solid var(--color-border);
    transition: transform 0.2s, box-shadow 0.2s;
}
.button.seance-tile:hover {
    background-color: var(--color-header-background); /* Un gris légèrement plus foncé au survol */
    transform: translateY(-3px);
    box-shadow: 0 4px 12px var(--color-card-shadow);
}

/* --- Interface d'ajout d'exercice --- */
#add-exercice-ui {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}
#exercice-filter-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
#exercice-search-input {
    flex-grow: 1;
    padding: 10px;
    font-size: 1.1em;
    min-width: 200px;
}
#muscle-filter {
    padding: 10px;
    font-size: 1.1em;
}
#exercice-search-results {
    max-height: 30vh;
    overflow-y: auto;
}
.exercice-search-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
}
.exercice-search-item:hover {
    background-color: var(--color-header-background);
}
.exercice-search-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.exercice-search-item-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        text-align: center;
    }
    .page-title {
        margin-top: 10px;
    }
    nav.navigation {
        flex-direction: column;
        gap: 10px;
    }
    .search-form-grid { grid-template-columns: 1fr; }
    .exercice-card { flex-direction: column; align-items: center; text-align: center; }
    .exercice-photo { width: auto; height: auto; max-height: 150px; margin-bottom: 10px; }
    .exercice-photo img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
    .exercice-details { width: 100%; }
    .exercice-actions { flex-direction: row; justify-content: center; width: 100%; }
}
@media (max-width: 768px) {
    .set-group-container {
        padding: 0 5px; /* Réduit l'espace pour les flèches */
        margin: 20px 0; /* On annule la marge négative */
    }
}
@media (max-width: 600px) {
    .serie-main-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .serie-secondary-info {
        width: 100%;
        justify-content: space-between;
    }
     .new-serie .serie-secondary-info, .new-serie .serie-secondary-details {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    .new-serie .serie-secondary-details {
        gap: 8px;
    }
    .admin-container {
        margin: 0px auto;
        padding: 0px;
    }
    /* Pour la page prep_seance.php sur mobile */
    .prep-serie-line .serie-inputs {
        gap: 4px; /* Réduit l'espace entre les deux lignes */
    }
    .prep-serie-line .serie-inputs-row {
        width: 100%; /* Chaque ligne prend toute la largeur */
    }
}

/* ==========================================================================
   Éléments "Sticky"
   ========================================================================== */

/* Propriétés communes aux deux bandeaux sticky */
.edit-header-sticky, 
#seance-controls-sticky {
    position: sticky;
    top: 0;
    background-color: var(--color-sticky-background);
    z-index: 100;
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(5px);
    padding: 10px;
    margin: -5px -5px 20px -5px;
}

/* Styles spécifiques pour le bandeau de prep_seance.php */
.edit-header-sticky {
    display: flex;
    flex-direction: column; /* Passage en colonne pour les deux lignes */
    gap: 10px;
}

/* Styles spécifiques pour le bandeau de seance.php */
#seance-controls-sticky {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-top-line {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.header-bottom-line {
    display: flex;
    justify-content: center; /* Centre les boutons */
    gap: 10px;
    width: 100%;
}

.header-bottom-line .button {
    padding: 2px 16px; /* Boutons plus fins en hauteur, largeur ajustée */
    margin: 0; /* Annule la marge par défaut des boutons */
}

.header-left, .header-right { /* Conserve la compatibilité avec seance.php */
    display: flex;
    align-items: center;
    gap: 15px;
}

.edit-header-sticky h1 {
    font-size: 1.4em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Style pour le champ de nom de séance éditable */
.seance-name-input {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--color-text);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 5px 8px;
    margin: 0;
    flex-grow: 1; /* Pour qu'il prenne l'espace disponible */
    min-width: 0; /* Nécessaire pour que flex-grow fonctionne correctement */
}

/* ==========================================================================
   Éléments "Sticky"
   ========================================================================== */

/* --- Logo dans la barre de séance sticky --- */
#seance-controls-sticky .page-logo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    width: 40px; /* Un peu plus petit pour être discret */
    height: 40px;
}
#seance-controls-sticky .page-logo.visible {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Composants d'exercice
   ========================================================================== */
.exercice-details {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 15px;
}
.exercice-photo-container {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    overflow: hidden;
}
.exercice-photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.exercice-info { flex-grow: 1; }

/* ==========================================================================
   Dark Mode
   ========================================================================== */

/* Appliquer le thème sombre si l'attribut data-theme="dark" est présent sur <html> */
:root[data-theme='dark'] {
    /* Couleurs de base */
    --color-background: #121212;
    --color-text: #e0e0e0;
    --color-text-subtle: #a0a0a0;
    --color-card-background: #1e1e1e;
    --color-card-shadow: rgba(0, 0, 0, 0.4);
    --color-border: #333;
    --color-border-light: #2a2a2a;
    
    /* Couleurs des formulaires (plus sombres) */
    --color-input-background: #1a1a1a;
    --color-input-border: #383838;
    --color-input-text: #e0e0e0;

    /* Couleurs des boutons (moins vives) */
    --color-primary: #0d6efd;
    --color-primary-hover: #3395ff;
    --color-danger: #c82333;
    --color-success: #1f8736;

    /* Couleurs diverses */
    --color-header-background: #2a2a2a;
    --color-sticky-background: rgba(30, 30, 30, 0.85);
    --color-row-odd-background: #222;
    --color-success-background: #1a3c23;
    --color-success-border: #2f6f3d;
    --color-success-text-dark: #a8dbb3;
    --color-error-background: #4d181f;
    --color-error-border: #8d2a38;
    --color-error-text-dark: #f5c6cb;

    /* Couleurs pour la barre de progression en mode sombre */
    --color-progress-execution: #1f8736; /* Un vert plus sombre */
    --color-progress-rest: #b35900; /* Un orange plus sombre */
    --color-progress-text: #ffffff; /* Texte blanc pour le contraste */
}

/* Appliquer le thème sombre si l'utilisateur n'a pas fait de choix manuel ET que son système est en sombre */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        /* Couleurs de base */
        --color-background: #121212;
        --color-text: #e0e0e0;
        --color-text-subtle: #a0a0a0;
        --color-card-background: #1e1e1e;
        --color-card-shadow: rgba(0, 0, 0, 0.4);
        --color-border: #333;
        --color-border-light: #2a2a2a;

        /* Couleurs des formulaires (plus sombres) */
        --color-input-background: #1a1a1a;
        --color-input-border: #383838;
        --color-input-text: #e0e0e0;

        /* Couleurs des boutons (moins vives) */
        --color-primary: #0d6efd;
        --color-primary-hover: #3395ff;
        --color-danger: #c82333;
        --color-success: #1f8736;

        /* Couleurs diverses */
        --color-header-background: #2a2a2a;
        --color-sticky-background: rgba(30, 30, 30, 0.85);
        --color-row-odd-background: #222;
        --color-success-background: #1a3c23;
        --color-success-border: #2f6f3d;
        --color-success-text-dark: #a8dbb3;
        --color-error-background: #4d181f;
        --color-error-border: #8d2a38;
        --color-error-text-dark: #f5c6cb;

        /* Couleurs pour la barre de progression en mode sombre */
        --color-progress-execution: #1f8736;
        --color-progress-rest: #b35900;
        --color-progress-text: #ffffff;
    }
}

/* Styles pour le sélecteur de thème */
.theme-switcher {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.theme-switcher-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.9em;
    color: var(--color-text-subtle);
}
.theme-switch-wrapper {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-secondary);
    border-radius: 20px;
    padding: 4px;
    cursor: pointer;
    position: relative;
}
.theme-switch-wrapper span {
    padding: 4px 12px;
    font-size: 0.9em;
    z-index: 1;
    color: var(--color-secondary-text);
    transition: color 0.3s ease;
}
.theme-switch-wrapper span.active {
    color: var(--color-primary-text);
}
.theme-switch-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: 50%;
    background-color: var(--color-primary);
    border-radius: 16px;
    transition: transform 0.3s ease;
    z-index: 0;
}
.theme-switch-wrapper[data-theme='dark'] .theme-switch-handle {
    transform: translateX(calc(100% - 8px));
}

/* --- Aperçu de l'image dans la modale d'exercice --- */
#photo-preview {
    display: none; /* Caché par défaut */
    display: block; /* Assure que l'élément est un bloc pour le centrage */
    max-width: 256px;
    max-height: 256px;
    margin: 10px auto 0; /* Centre horizontalement */
    border-radius: 5px;
    object-fit: cover;
    border: 1px solid var(--color-border);
}