.stea-horaires {
--sh-card-bg: #111111;
--sh-card-border: rgba(255, 255, 255, 0.14);
--sh-text: #ffffff;
--sh-muted: rgba(255, 255, 255, 0.62);
--sh-divider: rgba(255, 255, 255, 0.1);
--sh-accent: #b80a0a;
--sh-accent-text: #fd0505;
--sh-today-bg: rgba(184, 10, 10, 0.28);
--sh-badge-text: #ffffff;
--sh-kicker: var(--sh-muted);
--sh-title: var(--sh-text);
--sh-day: var(--sh-text);
--sh-hours: var(--sh-text);
--sh-notice-bg: rgba(255, 255, 255, 0.07);
--sh-notice-text: var(--sh-text);
--sh-open: #4dcf00;
--sh-closed: #fd0505;
--sh-radius: 0px;
--sh-row-pad: 13px;
--sh-max: 580px;
box-sizing: border-box;
width: 100%;
max-width: var(--sh-max);
margin-left: auto;
margin-right: auto;
color: var(--sh-text); font-size: 16px; font-variant-numeric: lining-nums;
font-weight: 400;
line-height: 1.4;
}
.stea-horaires *,
.stea-horaires *::before,
.stea-horaires *::after {
box-sizing: border-box;
} .stea-horaires .sh-card {
--sh-p: var(--sh-pad, 28px);
position: relative;
overflow: hidden;
padding: var(--sh-p) 0;
background: var(--sh-card-bg);
border: 1px solid var(--sh-card-border);
border-radius: var(--sh-radius);
}
.stea-horaires.sh-has-corners .sh-card::before,
.stea-horaires.sh-has-corners .sh-card::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
border: 0 solid var(--sh-muted);
opacity: 0.45;
pointer-events: none;
}
.stea-horaires.sh-has-corners .sh-card::before {
top: 8px;
left: 8px;
border-width: 1px 0 0 1px;
}
.stea-horaires.sh-has-corners .sh-card::after {
right: 8px;
bottom: 8px;
border-width: 0 1px 1px 0;
} .stea-horaires .sh-head {
margin: 0 0 20px;
padding: 0 var(--sh-p);
text-align: center;
}
.stea-horaires .sh-kicker {
margin: 0 0 8px;
padding: 0;
color: var(--sh-kicker);
font-size: 0.75em;
font-weight: 500;
letter-spacing: 0.3em;
line-height: 1.4;
text-transform: uppercase;
}
.stea-horaires .sh-title {
margin: 0;
padding: 0;
color: var(--sh-title);
font-family: inherit;
font-size: 2em;
font-weight: 400;
letter-spacing: 1px;
line-height: 1.2;
text-transform: none;
}
.stea-horaires .sh-accent {
color: var(--sh-accent-text);
} .stea-horaires .sh-status {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 var(--sh-p) 16px;
padding: 0;
color: var(--sh-text);
font-size: 0.875em;
line-height: 1.4;
}
.stea-horaires .sh-status[hidden],
.stea-horaires .sh-badge[hidden] {
display: none;
}
.stea-horaires .sh-status-dot {
flex: none;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--sh-closed);
}
.stea-horaires .sh-status.sh-is-open .sh-status-dot {
background: var(--sh-open);
}
.stea-horaires .sh-notice {
margin: 0 var(--sh-p) 16px;
padding: 10px 14px;
background: var(--sh-notice-bg);
border-inline-start: 3px solid var(--sh-accent);
color: var(--sh-notice-text);
font-size: 0.9375em;
line-height: 1.5;
} .stea-horaires .sh-list {
margin: 0;
padding: 0;
}
.stea-horaires .sh-row {
position: relative;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 4px 16px;
padding: var(--sh-row-pad) var(--sh-p);
}
.stea-horaires .sh-row + .sh-row::before {
content: "";
position: absolute;
top: 0;
right: var(--sh-p);
left: var(--sh-p);
height: 1px;
background: var(--sh-divider);
}
.stea-horaires .sh-day {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
min-width: 0;
margin: 0;
padding: 0;
color: var(--sh-day);
font-weight: inherit;
}
.stea-horaires .sh-day-name {
font-size: 0.8125em;
font-weight: 500;
letter-spacing: 0.14em;
line-height: 1.4;
text-transform: uppercase;
white-space: nowrap;
}
.stea-horaires .sh-badge {
display: inline-block;
padding: 2px 7px;
background: var(--sh-accent);
border-radius: 2px;
color: var(--sh-badge-text);
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.06em;
line-height: 1.5;
text-transform: uppercase;
white-space: nowrap;
}
.stea-horaires .sh-hours {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: flex-end;
margin: 0;
padding: 0;
color: var(--sh-hours);
font-size: 1.0625em;
font-variant-numeric: lining-nums tabular-nums;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1.4;
text-align: end;
}
.stea-horaires .sh-slot {
white-space: nowrap;
}
.stea-horaires .sh-dash {
margin: 0 0.4em;
color: var(--sh-muted);
}
.stea-horaires .sh-sep {
margin: 0 0.6em;
color: var(--sh-muted);
}
.stea-horaires .sh-row--closed .sh-day,
.stea-horaires .sh-row--closed .sh-hours {
color: var(--sh-muted);
}
.stea-horaires .sh-row--closed .sh-text {
font-style: italic;
} .stea-horaires .sh-row.sh-today {
background: var(--sh-today-bg);
box-shadow: inset 3px 0 0 var(--sh-accent);
}
.stea-horaires .sh-row.sh-today::before,
.stea-horaires .sh-row.sh-today + .sh-row::before {
display: none;
} .stea-horaires.sh-narrow .sh-card {
--sh-p: var(--sh-pad, 18px);
}
.stea-horaires.sh-narrow .sh-title {
font-size: 1.625em;
}
.stea-horaires.sh-narrow .sh-hours {
flex-direction: column;
align-items: flex-end;
}
.stea-horaires.sh-narrow .sh-sep {
display: none;
}
@media (max-width: 520px) {
.stea-horaires .sh-card {
--sh-p: var(--sh-pad, 18px);
}
.stea-horaires .sh-title {
font-size: 1.625em;
}
.stea-horaires .sh-hours {
flex-direction: column;
align-items: flex-end;
}
.stea-horaires .sh-sep {
display: none;
}
}