/* Titres, textes, boutons et espacements reposent sur les classes du thème. */
.foyer-section .foyer-calendar {
    border: 1px solid var(--tp-grey-3);
    background: var(--tp-common-white);
}

.foyer-section .foyer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 30px;
    background: var(--tp-grey-3);
}

.foyer-section .foyer-toolbar h3 {
    text-align: center;
    text-transform: capitalize;
}

.foyer-section .foyer-month-button {
    flex: 0 0 58px;
    width: 58px;
    padding: 0;
    text-align: center;
}

.foyer-section .foyer-month-button:focus-visible {
    outline: 2px solid var(--tp-theme-2);
    outline-offset: 3px;
}

.foyer-section .foyer-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    padding: 20px 30px 30px;
}

.foyer-section .foyer-weekday {
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--tp-theme-2);
}

.foyer-section .foyer-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 90px;
    padding: 10px 2px;
    border: 1px solid #8bc69c;
    background: #e7f5eb;
    color: #185b2d;
    font-size: 20px;
    font-weight: 700;
}

.foyer-section .foyer-day small {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.foyer-section .foyer-day.foyer-unavailable {
    border-color: #e4a0a0;
    background: #fbe9e9;
    color: #962626;
}

.foyer-section .foyer-day.foyer-past {
    border-color: #dedee1;
    background: #f0f0f2;
    color: #68686e;
}

.foyer-section .foyer-today {
    border-color: var(--tp-theme-1);
    box-shadow: inset 0 0 0 1px var(--tp-theme-1);
}

.foyer-section .foyer-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 20px 30px;
    border-top: 1px solid var(--tp-grey-3);
    font-size: 14px;
}

.foyer-section .foyer-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.foyer-section .foyer-legend i {
    width: 14px;
    height: 14px;
    border: 1px solid #8bc69c;
    background: #e7f5eb;
}

.foyer-section .foyer-legend .foyer-key-unavailable {
    background: #fbe9e9;
    border-color: #e4a0a0;
}

.foyer-section .foyer-legend .foyer-key-past {
    background: #f0f0f2;
    border-color: #dedee1;
}

.foyer-section .foyer-status {
    padding: 30px;
    border-left: 3px solid var(--tp-theme-1);
}

.foyer-section [hidden] {
    display: none !important;
}

@media (max-width: 767.98px) {
    .foyer-section .foyer-toolbar {
        padding: 20px 15px;
    }

    .foyer-section .foyer-toolbar h3 {
        font-size: 24px;
    }

    .foyer-section .foyer-month-button {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        line-height: 44px;
    }

    .foyer-section .foyer-grid {
        padding: 0;
        gap: 0;
    }

    .foyer-section .foyer-weekday {
        font-size: 12px;
    }

    .foyer-section .foyer-day {
        min-height: 60px;
        padding: 8px 0;
        gap: 4px;
        font-size: 16px;
    }

    .foyer-section .foyer-day small {
        display: none;
    }

    .foyer-section .foyer-day::after {
        content: '✓';
        font-size: 16px;
        line-height: 1;
    }

    .foyer-section .foyer-day.foyer-unavailable::after {
        content: '×';
        font-size: 20px;
    }

    .foyer-section .foyer-day.foyer-past::after {
        content: none;
    }

    .foyer-section .foyer-legend {
        gap: 10px 16px;
        padding: 16px 8px;
        font-size: 12px;
    }

    .foyer-section .foyer-legend > span {
        gap: 6px;
    }

    .foyer-section .foyer-status {
        padding: 20px;
    }
}

/* Gestion native des journées dans la fenêtre de l'éditeur. */
.foyer-listing {
    margin: 0;
    font-family: var(--tp-ff-body, sans-serif);
    font-size: 14px;
    color: var(--tp-common-black, #222637);
}

.foyer-listing .foyer-listing-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.foyer-listing .foyer-listing-count {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: inherit;
}

.foyer-listing .foyer-listing-help {
    margin: 0;
    max-width: 440px;
    font-size: 13px;
    line-height: 1.6;
    color: #656570;
}

.foyer-listing .foyer-listing-toolbar > button {
    flex-shrink: 0;
    white-space: nowrap;
}

.foyer-listing .table th {
    padding: 12px;
    background: #f7f7f9;
    color: #656570;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.foyer-listing .table td {
    padding: 16px 12px;
    vertical-align: middle;
    border-color: #ececf0;
}

.foyer-listing .foyer-listing-date {
    display: block;
    font-weight: 600;
    line-height: 1.5;
}

.foyer-listing .foyer-listing-numeric {
    display: block;
    margin-top: 3px;
    color: #656570;
    font-size: 12px;
}

.foyer-listing .foyer-listing-status {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 600;
    white-space: nowrap;
}

.foyer-listing .foyer-listing-blocked {
    background: #fbe9e9;
    color: #962626;
}

.foyer-listing .foyer-listing-past {
    background: #f0f0f2;
    color: #68686e;
}

.foyer-listing .foyer-listing-empty {
    padding: 30px 20px;
    text-align: center;
    background: #f7f7f9;
}

.foyer-listing .foyer-listing-empty p {
    margin: 8px 0 0;
    font-size: 14px;
    color: #656570;
}

@media (max-width: 575.98px) {
    .foyer-listing .foyer-listing-toolbar {
        flex-direction: column;
        gap: 14px;
    }

    .foyer-listing .table th,
    .foyer-listing .table td {
        padding: 12px 6px;
    }

    .foyer-listing .foyer-listing-date {
        min-width: 120px;
        font-size: 13px;
    }
}

.foyer-listing .foyer-listing-reason {
    min-width: 140px;
    max-width: 260px;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.foyer-section button.foyer-day {
    width: 100%;
    font-family: inherit;
}

.foyer-section button.foyer-day:focus-visible {
    outline: 2px solid var(--tp-theme-2);
    outline-offset: -2px;
}