/*=========================================================
 A — HORAIRES — AFFICHAGE PUBLIC
 =========================================================*/

/*---------------------------------------------------------
 A.1 — Horaire développé
 ---------------------------------------------------------*/

.tw-horaire_developed {
    max-width: 500px;
    padding: 20px 5px 20px 20px;
    border: 1px solid var(--tw-color_border);
    border-radius: 10px;
}

.tw-horaire_developed .tw-horaire_title {
    margin: .5rem;
    text-align: left;
    font-size: 1.6rem;
    line-height: 1.2;
}

/*---------------------------------------------------------
 A.2 — Période et notes
 ---------------------------------------------------------*/

.tw-horaire_period {
    margin: 0 0 1.2rem;
    color: var(--tw-color_muted, #666);
    font-size: .95rem;
}

.tw-horaire_note-general {
    margin: 0 0 1rem;
    color: var(--tw-color_text, #222);
}

.tw-horaire_note {
    display: block;
    margin-top: .15rem;
    color: var(--tw-color_muted, #777);
    font-size: .9rem;
}

/*---------------------------------------------------------
 A.3 — Liste des jours et créneaux
 ---------------------------------------------------------*/

.tw-horaire_list {
    display: grid;
    gap: .45rem;
}

.tw-horaire_row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: .75rem;
    align-items: baseline;
}

.tw-horaire_day {
    font-weight: 600;
}

.tw-horaire_slots {
    color: var(--tw-color_text, #222);
}

.tw-horaire_closed {
    color: var(--tw-color_muted, #777);
}

/*---------------------------------------------------------
 A.4 — Horaire compact

 Présentation inspirée des conventions courantes des fiches locales :
 horloge à gauche, statut coloré, prochain horaire neutre et chevron à droite.
 Le triangle natif de <details> est masqué mais le composant reste natif.
 ---------------------------------------------------------*/

.tw-horaire_compact {
    --tw-horaire_compact-icon: #007b83;
    --tw-horaire_compact-open: #188038;
    --tw-horaire_compact-closed: #d93025;
    width: 100%;
}

.tw-horaire_compact > .tw-horaire_status {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    list-style: none;
    color: var(--tw-color_text, #222);
}

/* Masque le marqueur natif placé à gauche du summary. */
.tw-horaire_compact > .tw-horaire_status::-webkit-details-marker {
    display: none;
}

.tw-horaire_compact > .tw-horaire_status::marker {
    content: '';
}

.tw-horaire_compact .tw-horaire_status-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--tw-horaire_compact-icon);
}

.tw-horaire_compact .tw-horaire_status-icon .material-symbols-outlined {
    font-size: 1.35em;
    line-height: 1;
}

.tw-horaire_compact .tw-horaire_status-text {
    display: inline-flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .18rem;
    min-width: 0;
}

.tw-horaire_compact .tw-horaire_status-open,
.tw-horaire_compact .tw-horaire_status-closed {
    font-weight: 500;
}

.tw-horaire_compact .tw-horaire_status-open {
    color: var(--tw-horaire_compact-open);
}

.tw-horaire_compact .tw-horaire_status-closed {
    color: var(--tw-horaire_compact-closed);
}

.tw-horaire_compact .tw-horaire_next {
    color: var(--tw-color_text, #222);
    font-weight: 400;
}

/* Chevron à droite, indépendant de Material Symbols. */
.tw-horaire_compact > .tw-horaire_status::after {
    content: '';
    flex: 0 0 auto;
    width: .45rem;
    height: .45rem;
    margin: -.2rem .25rem 0 .55rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
}

.tw-horaire_compact[open] > .tw-horaire_status::after {
    margin-top: .2rem;
    transform: rotate(225deg);
}

.tw-horaire_compact > .tw-horaire_status:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
}

.tw-horaire_compact[open] > .tw-horaire_details {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--tw-color_border, rgba(0, 0, 0, .12));
}