/* Style pour le Planning - Responsive et interactif */

/* ============ EN-TÊTE PLANNING ============ */
.planning-sticky-header {
    position: fixed;
    top: 125px; /* valeur initiale, recalculée par JS */
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1400px;
    z-index: 500;
    background: white;
    padding-bottom: 8px;
}

.planning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
    border-radius: 12px;
    padding: 18px 28px;
    margin: 0 auto 24px;
    max-width: 1000px;
    box-shadow: 0 4px 18px rgba(27, 40, 72, 0.22);
    flex-wrap: wrap;
    gap: 14px;
}

.planning-header-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.planning-header-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
}

.planning-header-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 400;
}

.planning-participate-btn {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: background 0.2s, transform 0.2s;
    white-space: nowrap;
}

.planning-participate-btn:hover {
    background: rgba(255, 255, 255, 0.30);
    transform: translateY(-1px);
}

/* ============ SÉLECTEUR DE MOIS ============ */
.planning-month-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
    border-radius: 10px;
    padding: 12px 18px;
    margin: 0 auto 24px;
    max-width: 1000px;
    box-shadow: 0 2px 10px rgba(27, 40, 72, 0.18);
}

.planning-month-label {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    white-space: nowrap;
}

.planning-months-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.planning-month-btn {
    display: inline-block;
    padding: 6px 11px;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.90);
    text-decoration: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

.planning-month-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.planning-month-btn.active {
    background: #fff;
    color: #182848;
    font-weight: 700;
    border-color: #fff;
}

/* ============ CONTENEUR DES TABLEAUX ============ */
.planning-tables-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.planning-month-block {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    padding: 16px;
    width: 95%;
    max-width: 1000px;
    box-sizing: border-box;
}

.planning-month-title {
    margin: 0 0 14px 0;
    font-size: 22px;
    color: #1e2d5a;
    font-weight: 700;
    text-align: center;
    position: relative;
    z-index: 0;
}

/* Wrapper : pas de scroll, le tableau s'adapte au conteneur */
.planning-table-wrapper {
    width: 100%;
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* ============ TABLEAU ============ */
.planning-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #c5cde0;
    font-size: 14px;
    table-layout: fixed;
}

/* Largeurs des colonnes : Date / Présidence / Message / Thème / Verset */
.planning-table th:nth-child(1),
.planning-table td:nth-child(1) { width: 10%; }

.planning-table th:nth-child(2),
.planning-table td:nth-child(2) { width: 15%; }

.planning-table th:nth-child(3),
.planning-table td:nth-child(3) { width: 15%; }

.planning-table th:nth-child(4),
.planning-table td:nth-child(4) { width: 40%; }

.planning-table th:nth-child(5),
.planning-table td:nth-child(5) { width: 20%; }

.planning-table th,
.planning-table td {
    padding: 9px 11px;
    border: 1px solid #c5cde0;
    vertical-align: top;
}

.planning-table th {
    padding-left: 18px;
}

/* Entête mois normal (actuel/futur) */
.planning-thead th {
    background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Entête mois passé */
.planning-thead.past th {
    background: linear-gradient(135deg, #7a8a9e 0%, #4a5568 100%);
    color: #fff;
}

/* Ligne semaine en cours */
.planning-current-week td {
    background: #4182FF;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

/* Ligne passée */
.planning-past td {
    background: #e8eaed;
    color: #777;
}

/* Alerte : cellule vide jeudi–samedi de la semaine en cours */
.planning-current-week td.planning-cell-alert {
    background: #ff4444;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
    animation: planning-alert-pulse 1.4s ease-in-out infinite;
    position: relative;
}

.planning-current-week td.planning-cell-alert::after {
    content: '⚠';
    position: absolute;
    top: 3px;
    right: 4px;
    font-size: 10px;
    opacity: 0.85;
    text-shadow: none;
}

@keyframes planning-alert-pulse {
    0%, 100% { background: #ff4444; }
    50%       { background: #cc0000; }
}

/* Alternance légère sur lignes normales */
.planning-table tbody tr:not(.planning-current-week):not(.planning-past):nth-child(even) td {
    background: #f7f9fc;
}

/* ============ INFOBULLE VERSET ============ */
.planning-verse-tooltip {
    position: relative;
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #3c69b2;
    border-bottom: 1px dotted #3c69b2;
    outline: none;
}

.planning-verse-tooltip::after {
    content: attr(data-verse);
    position: absolute;
    bottom: 125%;
    left: 0%;
    transform: translateX(-80%);
    background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    white-space: normal;
    overflow-wrap: break-word;
    width: 350px;
    max-width: 90vw;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 6px 20px rgba(27, 40, 72, 0.40);
    font-weight: 400;
    text-decoration: none;
    line-height: 1.5;
}

.planning-verse-tooltip::before {
    content: '';
    position: absolute;
    bottom: 119%;
    left: 25%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #182848;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
}

.planning-verse-tooltip:hover::after,
.planning-verse-tooltip:hover::before,
.planning-verse-tooltip:focus::after,
.planning-verse-tooltip:focus::before {
    opacity: 1;
    visibility: visible;
}

/* Style du lien du verset sur fond bleu (semaine en cours) */
.planning-current-week .planning-verse-tooltip {
    color: white !important;
    border-bottom-color: white;
    text-decoration-color: white;
}

.planning-current-week .planning-verse-tooltip:hover,
.planning-current-week .planning-verse-tooltip:focus {
    color: rgba(255, 255, 255, 0.8);
}

/* Styles pour les semaines passées (via classe) */

/* Responsive design - Tablettes */
@media (max-width: 768px) {
    .planning-sticky-header {
        width: 100%;
        max-width: 100%;
    }
    .planning-header {
        padding: 14px 18px;
    }

    .planning-header-title {
        font-size: 20px;
    }

    .planning-month-selector {
        padding: 10px 12px;
    }

    .planning-month-btn {
        padding: 5px 9px;
        font-size: 11px;
    }

    .planning-month-block {
        padding: 12px 8px;
        width: 100%;
    }

    .planning-month-title {
        font-size: 18px;
    }

    /* ---- Tableau → Cartes ---- */
    .planning-table,
    .planning-table thead,
    .planning-table tbody,
    .planning-table tr,
    .planning-table td,
    .planning-table th {
        display: block !important;
    }

    /* Cacher l'entête */
    .planning-table thead {
        display: none !important;
    }

    /* Chaque ligne = une carte */
    .planning-table tbody tr {
        background: #fff !important;
        border: 1px solid #d0d8ea !important;
        border-radius: 10px !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(27,40,72,0.08) !important;
        overflow: hidden !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Ligne semaine en cours → carte bleue */
    .planning-table tbody tr.planning-current-week {
        border-left: 5px solid #182848 !important;
        background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%) !important;
    }

    .planning-table tbody tr.planning-current-week td {
        background: transparent !important;
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
        border-bottom-color: rgba(255,255,255,0.15) !important;
    }

    .planning-table tbody tr.planning-current-week td::before {
        color: rgba(255,255,255,0.70) !important;
    }

    /* Ligne passée → grisée */
    .planning-table tbody tr.planning-past {
        background: #f0f1f3 !important;
        opacity: 0.80 !important;
    }

    .planning-table tbody tr.planning-past td {
        color: #888 !important;
        background: transparent !important;
    }

    .planning-table tbody tr.planning-past td::before {
        color: #aaa !important;
    }

    /* Chaque cellule = une ligne label : valeur */
    .planning-table tbody td {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        padding: 7px 12px 7px 20px !important;
        border: none !important;
        border-bottom: 1px solid #e8edf5 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        height: auto !important;
        white-space: normal !important;
        overflow: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .planning-table tbody td:last-child {
        border-bottom: none !important;
    }

    /* Labels via ::before */
    .planning-table tbody td::before {
        content: attr(data-label) " :";
        font-weight: 700;
        font-size: 11px;
        color: #4b6cb7;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        flex-shrink: 0;
        width: 110px;
        padding-top: 1px;
        margin-right: 10px;
        white-space: nowrap;
    }

    /* Alerte mobile */
    .planning-table tbody tr.planning-current-week td.planning-cell-alert {
        background: #ff4444 !important;
        color: #fff !important;
        border-bottom-color: rgba(255,255,255,0.20) !important;
    }

    .planning-table tbody tr.planning-current-week td.planning-cell-alert::before {
        color: rgba(255,255,255,0.80) !important;
    }

    /* Infobulle mobile : centrée en overlay */
    .planning-verse-tooltip::after {
        position: fixed !important;
        bottom: auto !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 85vw !important;
        max-width: 320px !important;
        z-index: 10000 !important;
    }

    .planning-verse-tooltip::before {
        display: none !important;
    }
}

/* Responsive design - Très petit écran */
@media (max-width: 480px) {
    .planning-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 14px;
    }

    .planning-header-title {
        font-size: 18px;
    }

    .planning-participate-btn {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .planning-month-selector {
        flex-direction: column;
        gap: 8px;
    }

    .planning-month-btn {
        padding: 5px 8px;
        font-size: 11px;
    }

    .planning-table tbody td {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .planning-table tbody td::before {
        width: 70px;
        font-size: 10px;
    }
}