/* Socle commun aux variantes sidebar et hero : carrousel des saints (piloté par
 * js/widget/DailyLiturgyWidget.js), navigation, couleurs des degrés et pastilles liturgiques. */
.daily-liturgy-widget {
    --daily-muted: #6b7280;
    --daily-text: #111827;
    color: var(--daily-text);
}

.daily-saints-carousel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.daily-saint-item {
    display: none;
    opacity: 0;
    transform: translateY(0.35rem);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.daily-saint-item.active {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    gap: 0.5rem;
    opacity: 1;
    transform: translateY(0);
}

.daily-saint-badge--majeur {
    background: #dc3545;
}

.daily-saint-badge--important {
    background: #ffc107;
    color: #111827;
}

.daily-saint-badge--mineur,
.daily-saint-badge--inconnu {
    background: #6c757d;
}

.daily-saints-nav {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.daily-saints-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid rgba(17, 24, 39, 0.18);
    border-radius: 0.45rem;
    background: #fff;
    color: var(--daily-text);
    font-size: 0.75rem;
    line-height: 1;
}

.daily-saints-nav-button:hover {
    background: #f3f4f6;
}

.daily-saints-counter {
    color: var(--daily-muted);
    font-size: 0.8rem;
}

.liturgical-color-dot--vert {
    background: #008000;
}

.liturgical-color-dot--violet {
    background: #7c3aed;
}

.liturgical-color-dot--blanc {
    background: #fff8dc;
    border: 1px solid #d6c68a;
}

.liturgical-color-dot--rouge {
    background: #cc0000;
}

.liturgical-color-dot--rose {
    background: #f4a7b9;
}

.liturgical-color-dot--noir {
    background: #111827;
}

.liturgical-color-dot--inconnue {
    background: #9ca3af;
}

/* ---- Variante sidebar (templates/components/_daily_liturgy_sidebar.html.twig) ----
 * Colonne de l'article et panel_right de base.html.twig. Carte unique, deux blocs de même
 * structure. Tout est préfixé par .daily-liturgy-widget--sidebar ; le carrousel est à trois
 * classes (0,3,0) pour l'emporter sur `.daily-saint-item.active` (0,2,0) ci-dessus. */
.daily-liturgy-widget--sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: var(--ch-surface);
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-radius-xl);
    font-family: var(--ch-font-ui);
    color: var(--ch-ink);
}

.daily-liturgy-widget--sidebar .liturgy-side__block { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.daily-liturgy-widget--sidebar .liturgy-side__eyebrow { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ch-muted); }
.daily-liturgy-widget--sidebar .liturgy-side__separator { height: 1px; background: var(--ch-line-soft); }

.daily-liturgy-widget--sidebar .liturgy-side__row { display: flex; align-items: flex-start; gap: 12px; }
.daily-liturgy-widget--sidebar .liturgy-side__line { display: flex; align-items: flex-start; gap: 12px; }
.daily-liturgy-widget--sidebar .liturgy-side__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.daily-liturgy-widget--sidebar .liturgy-side__badge {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ch-radius);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--ch-surface);
}
/* Fond jaune : texte foncé, comme .daily-saint-badge--important */
.daily-liturgy-widget--sidebar .liturgy-side__badge.daily-saint-badge--important { color: var(--ch-ink); }
/* Pastille liturgique mise au carré : la couleur vient de .liturgical-color-dot--* */
.daily-liturgy-widget--sidebar .liturgy-side__badge--liturgical { margin: 0; box-shadow: none; border-radius: var(--ch-radius); }

.daily-liturgy-widget--sidebar .liturgy-side__title {
    margin: 0;
    font-family: var(--ch-font-read);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--ch-ink);
    overflow-wrap: anywhere;
}
.daily-liturgy-widget--sidebar .liturgy-side__meta { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ch-muted); }
.daily-liturgy-widget--sidebar .liturgy-side__quote {
    margin: 4px 0 0;
    font-family: var(--ch-font-read);
    font-size: 16px;
    font-style: italic;
    line-height: 1.5;
    color: var(--ch-ink-soft);
}
.daily-liturgy-widget--sidebar .liturgy-side__unavailable { margin: 0; font-size: 14px; color: var(--ch-faint); }

/* Carrousel : tous les saints empilés dans la même cellule de grille (hauteur stable),
   les inactifs en visibility:hidden. Le comportement reste dans js/widget/DailyLiturgyWidget.js. */
.daily-liturgy-widget--sidebar .liturgy-side__carousel { flex: 1; min-width: 0; display: grid; overflow: visible; }
.daily-liturgy-widget--sidebar .liturgy-side__carousel .liturgy-side__item {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    flex: none;
    height: auto;
    min-width: 0;
    visibility: hidden;
    opacity: 0;
    transform: none;
    transition: opacity .18s ease, visibility .18s ease;
}
.daily-liturgy-widget--sidebar .liturgy-side__carousel .liturgy-side__item.active { visibility: visible; opacity: 1; }

.daily-liturgy-widget--sidebar .liturgy-side__nav { gap: 4px; }
.daily-liturgy-widget--sidebar .liturgy-side__nav .daily-saints-nav-button {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--ch-line);
    border-radius: 6px;
    background: var(--ch-surface);
    color: var(--ch-muted);
    font-size: 10px;
}
.daily-liturgy-widget--sidebar .liturgy-side__nav .daily-saints-nav-button:hover { background: var(--ch-bg-subtle); color: var(--ch-ink); }
.daily-liturgy-widget--sidebar .liturgy-side__nav .daily-saints-counter { font-size: 12px; color: var(--ch-faint); }

/* Les deux actions ont exactement le même format */
.daily-liturgy-widget--sidebar .liturgy-side__action {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ch-line);
    border-radius: var(--ch-radius);
    background: var(--ch-surface);
    color: var(--ch-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}
.daily-liturgy-widget--sidebar .liturgy-side__action:hover { background: var(--ch-bg-subtle); color: var(--ch-ink); }

@media (max-width: 767.98px) {
    /* Cibles tactiles >= 44px sur mobile (CLAUDE.md) */
    .daily-liturgy-widget--sidebar .liturgy-side__action { min-height: 44px; }
    .daily-liturgy-widget--sidebar .liturgy-side__nav .daily-saints-nav-button { width: 44px; height: 44px; }
}