.my-challenges-container { 
    max-width: 1800px;
	min-width: 300px;
    margin: 20px auto;
    padding: 25px;
    background-color: #2c2c2e;
    border: 1px solid #444;
    border-radius: 5px;
}
.challenges-section { margin-bottom: 40px; width: 100%; }
.challenges-section h2 { color: #4CAF50; border-bottom: 1px solid #444; padding-bottom: 10px; }
.challenges-list { display: flex; flex-direction: column; gap: 15px; }

.challenge-card { background-color: #2c2c2e; border: 1px solid #444; border-radius: 5px; }
.challenge-card .card-header { display: flex; justify-content: space-between; align-items: center; background-color: #3a3a3c; padding: 10px 15px; border-bottom: 1px solid #444; }
.challenge-card .card-body { padding: 15px; }
.challenge-card .form-group { margin-bottom: 15px; }
.challenge-card label { font-weight: bold; color: #ccc; }
.challenge-card select, .challenge-card textarea { width: 100%; padding: 8px; background-color: #1e1e1e; border: 1px solid #555; color: #f1f1f1; border-radius: 4px; box-sizing: border-box; }
.challenge-card .challenge-actions { display: flex; gap: 10px; margin-top: 15px; }
.challenge-card .challenge-actions button { flex-grow: 1; padding: 10px; border: none; border-radius: 4px; color: #fff; font-weight: bold; cursor: pointer; }
.button-success { background-color: #4CAF50; }
.button-danger { background-color: #f44336; }
.button-success:hover { background-color: #5cd662; }
.button-danger:hover { background-color: #ff6659; }

/* Styles pour les statuts */
[class^="challenge-status-"] { font-weight: bold; }
.challenge-status-pending { color: #ffeb3b; } /* Jaune */
.challenge-status-accepted { color: #8bc34a; } /* Vert clair */
.challenge-status-declined { color: #f44336; } /* Rouge */
.challenge-status-completed { color: #03a9f4; } /* Bleu */

/* ========================================================== */
/* ===         STYLES POUR LES CARTES DE DATE             === */
/* ========================================================== */

.date-proposal-group {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.date-proposal-card {
    flex: 1; /* Chaque carte prend une part égale de l'espace */
    border: 2px solid #555;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.date-proposal-card:hover {
    border-color: #777;
    background-color: #3f3f41;
}

/* On cache le vrai bouton radio */
.date-proposal-card input[type="radio"] {
    display: none;
}

/* Style quand une carte est sélectionnée */
.date-proposal-card.selected {
    border-color: #4CAF50; /* Vert de sélection */
    background-color: #2a4b2c;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.date-proposal-card .day-name {
    display: block;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
}

.date-proposal-card .date-full {
    display: block;
    font-size: 14px;
    color: #ccc;
}

.date-proposal-card .time-full {
    display: block;
    font-size: 18px;
    color: #fff;
    margin-top: 5px;
}

/* Pour le responsive sur mobile, on passe les cartes en colonne */
@media (max-width: 600px) {
    .date-proposal-group {
        flex-direction: column;
    }
}

/* public/css/challenge_page.css */


.challenges-section { margin-bottom: 40px; }
.challenges-section h2 { color: #4CAF50; border-bottom: 1px solid #444; padding-bottom: 10px; }

/* Grille pour afficher les cartes horizontalement */
.challenges-grid {
    display: flex;
    flex-wrap: wrap; /* Les cartes passeront à la ligne si pas assez de place */
    gap: 20px; /* Espace entre les cartes */
}

/* LA CARTE DE DÉFI - Style de base inspiré du PapelPass */
.challenge-card {
    position: relative; /* Contexte pour le filigrane */
    overflow: hidden; /* Cache les débordements du filigrane */
    flex: 1 1 250px; /* Flexible, base de 350px, s'adapte */
    max-width: 400px;
	min-width: 200px;
    background-color: #2c2c2e;
    border: 2px solid #555; /* Bordure par défaut */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

/* Le filigrane en arrière-plan */
.challenge-card::before {
    content: '';
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 80px; /* Taille du filigrane */
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.15;
    pointer-events: none;
}

/* Styles des bordures par statut */
.challenge-card.status-pending { border-color: #ffeb3b; } /* Jaune */
.challenge-card.status-accepted { border-color: #4CAF50; } /* Vert */
.challenge-card.status-declined,
.challenge-card.status-cancelled { border-color: #f44336; } /* ROUGE */

.challenge-card.status-completed { border-color: #607d8b; } /* GRIS */

/* Application des images de filigrane par type et statut */
.challenge-card.type-received::before { background-image: url('/../images/match/icon_list_defi_receive.png'); }
.challenge-card.type-sent.status-pending::before { background-image: url('/../images/match/icon_list_defi_send_pending.png'); }
.challenge-card.type-sent.status-accepted::before { background-image: url('/../images/match/icon_list_defi_send_accept.png'); }
/* ... (Ajouter d'autres combinaisons si nécessaire) ... */

.challenge-card .card-header {
    background-color: rgba(0,0,0,0.2);
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.challenge-card .card-body { padding: 15px; flex-grow: 1; }
.challenge-card p { margin: 0 0 10px 0; }
.challenge-card strong { color: #ccc; }


/* Responsive */
@media (max-width: 768px) {
    .challenge-card {
        flex-basis: 100%; /* Une carte par ligne sur mobile */
    }
}

.challenge-card .card-header {
    background-color: rgba(0,0,0,0.2);
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.challenge-card .header-guild-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.challenge-card .header-emblem {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

/* ... (tous les autres styles) ... */

/* Style pour le conteneur des actions dans la carte */
.challenge-card .card-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #444; /* Ligne de séparation */
    display: flex;
    justify-content: flex-end; /* Aligne le bouton à droite */
}

/* Style générique pour les boutons dans les cartes */
.challenge-card .card-actions button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}

.challenge-card .card-actions button:hover {
    opacity: 0.85;
}

/* On réutilise la classe .button-danger que nous avions déjà définie */
/* Si elle n'est pas globale, on peut la redéfinir ici : */
.button-danger {
    background-color: #f44336; /* Rouge */
}

.page-header-actions-groups {
    display: flex;         /* Active le mode Flexbox */
    align-items: center;   /* Aligne les boutons verticalement (si hauteurs différentes) */
    gap: 15px;             /* Crée un espace de 15px entre chaque bouton */
    margin-bottom: 20px;   /* Marge en dessous du groupe de boutons */
	    margin-top: 20px;
}

.back-to-ligue-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px; /* Un peu plus de padding horizontal */
    background-color: #4a4a4a; /* Fond un peu plus clair que les cartes peut-être */
    color: #d0d0d0;     /* Texte légèrement plus clair */
    text-decoration: none; /* Enlève le soulignement par défaut */
    border: 1px solid #555; /* Bordure discrète */
    border-radius: 5px;
    font-size: 0.95em;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s ease-out;
    cursor: pointer;
}

.back-to-ligue-link:hover,
.back-to-ligue-link:focus { /* Ajouter :focus pour l'accessibilité */
    background-color: #5a5a5a; /* Fond légèrement plus clair au survol */
    color: #ffffff;          /* Texte blanc au survol */
    text-decoration: none; /* S'assurer qu'il n'y a pas de soulignement au survol non plus */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre discrète */
    transform: translateY(-1px); /* Léger effet de soulèvement */
}

.back-to-ligue-link .material-symbols-outlined {
    margin-right: 8px;
    font-size: 1.2em; /* Garder la taille de l'icône */
    color: #88b08a; /* Icône avec une teinte de votre vert principal, mais plus discrète */
}

/* ========================================================== */
/* ===       STYLES SPÉCIFIQUES POUR LES BOUTONS DE RÉPONSE === */
/* ========================================================== */

.challenge-card .challenge-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #444; /* Ligne de séparation */
}

/* Style de base pour les deux boutons */
.challenge-card .challenge-actions button {
    flex-grow: 1; /* Les deux boutons prennent une place égale */
    padding: 10px;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Style spécifique pour le bouton ACCEPTER */
.challenge-actions .accept-challenge-btn {
    background-color: #4CAF50; /* Vert principal */
    border: 1px solid #66bb6a;
}
.challenge-actions .accept-challenge-btn:hover {
    background-color: #5cd662;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.7);
}

/* Style spécifique pour le bouton REFUSER */
.challenge-actions .decline-challenge-btn {
    background-color: #f44336; /* Rouge */
    border: 1px solid #ef5350;
}
.challenge-actions .decline-challenge-btn:hover {
    background-color: #ff6659;
    box-shadow: 0 0 8px rgba(244, 67, 54, 0.7);
}

/* ========================================================== */
/* ===    STYLES POUR LE BLOC DE PRÉFÉRENCE NOTIFICATION    === */
/* ========================================================== */

.notification-preference-box {
    background-color: #3f3b1d; /* Fond jaune/or foncé */
    border: 1px dashed #ffeb3b; /* Bordure jaune pointillée */
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 30px; /* Espace avant la section des défis */
    display: flex;
    align-items: center;
}

.notification-preference-box form {
    margin: 0; /* Annule la marge par défaut du formulaire */
}

.notification-preference-box label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #f1f1f1;
    font-size: 14px;
}

/* Style de la case à cocher custom */
.notification-preference-box input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ffeb3b;
    border-radius: 4px;
    margin-right: 12px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s;
}

.notification-preference-box input[type="checkbox"]:checked {
    background-color: #4CAF50; /* Vert quand coché */
    border-color: #4CAF50;
}

/* Le "V" de validation (check mark) */
.notification-preference-box input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}