/* ========================================
   CALENDRIER DOMAINE - Style FORCE LAYOUT
   Version avec display forcé pour éviter conflits
   ======================================== */

.domaine-calendrier {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: Arial, sans-serif;
    display: block !important;
}

/* Navigation */
.calendrier-navigation {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}

.calendrier-titre {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
    color: white !important;
    text-align: center;
    flex: 1;
}

.calendrier-nav-btn {
    background: white;
    border: 2px solid #1bb9b9;
    color: #1bb9b9;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.3s ease;
}

.calendrier-nav-btn:hover {
    background: #1bb9b9;
    color: white;
}

/* FORCE DISPLAY TABLE */
.domaine-calendrier .calendrier-table {
    display: table !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 8px !important;
    table-layout: fixed !important;
}

.domaine-calendrier .calendrier-table thead {
    display: table-header-group !important;
}

.domaine-calendrier .calendrier-table tbody {
    display: table-row-group !important;
}

.domaine-calendrier .calendrier-table tr {
    display: table-row !important;
}

.domaine-calendrier .calendrier-table thead th,
.domaine-calendrier .calendrier-table td {
    display: table-cell !important;
}

.calendrier-table thead th {
    background: #1bb9b9;
    color: white;
    padding: 12px 5px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    font-size: 0.95em;
    width: 14.28% !important; /* 100% / 7 jours */
}

/* Par défaut, masquer la version courte */
.calendrier-table thead th .jour-court {
    display: none;
}

.calendrier-table thead th .jour-long {
    display: inline;
}

/* CASES FIXES - TAILLE CONSTANTE */
.calendrier-table td {
    width: 14.28% !important; /* 100% / 7 jours */
    height: 120px !important; /* Hauteur fixe */
    min-height: 120px !important;
    max-height: 120px !important;
    vertical-align: top !important;
    position: relative !important;
    overflow: hidden !important; /* Cache le contenu qui dépasse */
    box-sizing: border-box !important; /* Inclut padding et border dans la taille */
}

/* Appliquer les couleurs de fond aux cellules TD */
.calendrier-table td.calendrier-ouvert {
    background: #e8f5e9 !important;
}

.calendrier-table td.calendrier-ferme {
    background: #ffebee !important;
}

.calendrier-table td.calendrier-vide {
    background: transparent !important;
}

.calendrier-jour {
    background: transparent; /* Transparent pour laisser passer la couleur du td */
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%; /* Prend toute la hauteur de la cellule */
    max-height: 120px; /* Hauteur max stricte */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Important pour garder la taille fixe */
    box-sizing: border-box;
}

.calendrier-jour:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Jours avec pop-up - curseur pointeur */
.calendrier-table td[data-has-popup="1"] {
    cursor: pointer !important;
}

.calendrier-table td[data-has-popup="1"]:hover .calendrier-jour {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(27, 185, 185, 0.3);
    border: 2px solid #1bb9b9;
}

/* Numéro du jour */
.jour-numero {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
    flex-shrink: 0; /* Ne rétrécit pas */
}

/* Statut */
.jour-statut {
    font-size: 0.85em;
    font-weight: bold;
    margin-bottom: 3px;
    padding: 3px 6px;
    border-radius: 3px;
    text-align: center;
    flex-shrink: 0; /* Ne rétrécit pas */
}

.calendrier-ouvert .jour-statut {
    background: #4CAF50;
    color: white;
}

.calendrier-ferme .jour-statut {
    background: #f44336;
    color: white;
}

/* Heures */
.jour-heures {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 3px;
    text-align: center;
    flex-shrink: 0; /* Ne rétrécit pas */
}

/* Motif */
.jour-motif {
    font-size: 0.75em;
    color: #999;
    font-style: italic;
    text-align: center;
    margin-top: 3px;
    /* Limite stricte à 2 lignes maximum */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em;
    max-height: 2.4em; /* 2 lignes × 1.2em */
    word-break: break-word; /* Coupe les mots longs */
}

/* Événements */
.jour-evenement {
    font-size: 0.75em;
    margin-top: 3px;
    padding: 4px;
    border-radius: 3px;
    text-align: center;
    flex-shrink: 0;
    /* Limite le texte à 1 ligne */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2em;
    max-height: 1.2em;
}

.jour-evenement a {
    color: inherit;
    text-decoration: none;
}

/* Cases vides */
.calendrier-vide {
    background: transparent;
}

/* Contrainte stricte pour éviter tout débordement */
.calendrier-ferme .jour-motif,
.calendrier-ouvert .jour-motif {
    overflow: hidden !important;
    max-height: 2.4em !important;
}

/* ========================================
   RESPONSIVE MOBILE - VERSION OPTIMISÉE
   ======================================== */

@media screen and (max-width: 768px) {
    .domaine-calendrier {
        padding: 5px;
        font-size: 14px;
    }
    
    .calendrier-navigation {
        flex-direction: row;
        gap: 8px;
        margin-bottom: 15px;
    }
    
    .calendrier-titre {
        font-size: 1.1em;
    }
    
    .calendrier-nav-btn {
        padding: 8px 15px;
        font-size: 0.9em;
    }
    
    .calendrier-table {
        border-spacing: 2px !important;
    }
    
    /* EN-TÊTES DES JOURS - PLUS VISIBLES */
    .calendrier-table thead th {
        padding: 10px 4px !important;
        font-size: 0.9em !important;
        height: auto !important;
        background: #1bb9b9 !important;
        color: white !important;
    }
    
    /* CASES MOBILE - PLUS HAUTES POUR TOUT AFFICHER */
    .calendrier-table td {
        height: 105px !important;
        min-height: 105px !important;
        max-height: 105px !important;
        padding: 2px !important;
    }
    
    .calendrier-jour {
        max-height: 105px;
        padding: 5px 3px;
    }
    
    /* TEXTE OPTIMISÉ */
    .jour-numero {
        font-size: 1.1em !important;
        margin-bottom: 3px;
        font-weight: bold;
    }
    
    .jour-statut {
        font-size: 0.7em !important;
        padding: 2px 4px !important;
        margin-bottom: 2px;
        font-weight: 600;
    }
    
    .jour-heures {
        font-size: 0.7em !important;
        margin-bottom: 2px;
        line-height: 1.1;
    }
    
    .jour-motif {
        font-size: 0.65em !important;
        -webkit-line-clamp: 2;
        max-height: 2.2em;
        line-height: 1.1em;
    }
    
    .jour-evenement {
        font-size: 0.65em !important;
        padding: 2px 3px;
    }
}

@media screen and (max-width: 480px) {
    .domaine-calendrier {
        padding: 3px;
    }
    
    .calendrier-navigation {
        gap: 5px;
    }
    
    .calendrier-titre {
        font-size: 1em;
    }
    
    .calendrier-nav-btn {
        padding: 8px 12px;
        font-size: 0.85em;
    }
    
    .calendrier-table {
        border-spacing: 1px !important;
    }
    
    /* EN-TÊTES - ABBRÉVIATIONS SUR PETIT ÉCRAN */
    .calendrier-table thead th {
        padding: 8px 2px !important;
        font-size: 0.8em !important;
    }
    
    /* CASES TRÈS PETIT ÉCRAN */
    .calendrier-table td {
        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
    }
    
    .calendrier-jour {
        padding: 4px 3px;
        max-height: 80px;
    }
    
    .jour-numero {
        font-size: 1.1em !important;
        margin-bottom: 3px;
    }
    
    .jour-statut {
        font-size: 0.7em !important;
        padding: 2px 4px !important;
    }
    
    .jour-heures {
        font-size: 0.65em !important;
    }
    
    .jour-motif {
        font-size: 0.65em !important;
        -webkit-line-clamp: 1; /* 1 ligne sur très petit écran */
        max-height: 1.3em;
    }
    
    .jour-evenement {
        font-size: 0.65em !important;
        padding: 2px 3px;
    }
}

/* EXTRA PETIT ÉCRAN - AFFICHAGE SIMPLIFIÉ */
@media screen and (max-width: 360px) {
    /* Afficher les abbréviations d'une lettre */
    .calendrier-table thead th .jour-long {
        display: none;
    }
    
    .calendrier-table thead th .jour-court {
        display: inline;
    }
    
    .calendrier-table thead th {
        font-size: 0.75em !important;
        padding: 6px 1px !important;
    }
    
    .calendrier-table td {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 70px !important;
    }
    
    .calendrier-jour {
        max-height: 70px;
        padding: 3px 2px;
    }
    
    .jour-numero {
        font-size: 1em !important;
    }
    
    .jour-statut {
        font-size: 0.65em !important;
        padding: 2px 3px !important;
    }
    
    .jour-heures,
    .jour-motif,
    .jour-evenement {
        font-size: 0.6em !important;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.calendrier-jour {
    animation: fadeIn 0.3s ease;
}