/* ============================================================
   SIDEBAR — Styles des widgets de la sidebar principale
   Reproduit QuickAccessSidebar.tsx (Lovable) au pixel près.
   ============================================================ */

/* ——— Grille de widgets ————————————————————————————————————— */
.sidebar-widgets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* < 1200px : la sidebar (.main-layout__sidebar) passe sous le contenu principal
   (cf. main-layout.css, grille repassée en une colonne) — ses widgets s'affichent
   alors en ligne avec retour à la ligne plutôt qu'en colonne unique verticale. */
@media (min-width: 768px) and (max-width: 1199px) {
    .sidebar-widgets {
        grid-template-columns: 1fr 1fr;
    }
}

/* ——— Widget — base ————————————————————————————————————————— */
.sidebar-widget {
    border-radius: var(--border-radius-xl); /* rounded-xl = 14px */
    padding: 20px;
}

/* Widget gradient orange/rose (Accès aux cours) */
.sidebar-widget--gradient {
    background: linear-gradient(to right, var(--color-pink), var(--color-cta));
}

/* Widget blanc avec ombre */
.sidebar-widget--white {
    background-color: var(--white);
    box-shadow: var(--shadow-card);
}

/* ——— Header du widget (icône + titre) ————————————————————— */
.sidebar-widget__header {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icône carrée bleue */
.sidebar-widget__icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg); /* rounded-lg = 10px */
    background-color: var(--color-primary);
    color: var(--white);
}

/* Titre de widget */
.sidebar-widget__title {
    font-size: 1.5rem;     /* text-2xl = 24px */
    font-weight: var(--semibold);
    color: var(--color-deep-blue);
    margin: 0;
    line-height: 1.333; /* Tailwind text-2xl : 2rem / 1.5rem */
}

.sidebar-widget__title--white {
    color: var(--white);
}

/* ——— Boutons (widget gradient) ————————————————————————————— */
.sidebar-widget__btns {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Lovable gap-3 : espace uniforme entre boutons et <hr> */
}

.sidebar-widget__btn-sep {
    border: none;
    border-top: 1px solid var(--color-deep-blue);
    margin: 0;
}

.sidebar-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--border-radius-full);
    background-color: var(--color-primary);
    color: var(--white);
    font-size: 0.875rem;  /* text-sm = 14px */
    font-weight: var(--semibold);
    padding: 10px 16px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.sidebar-btn:hover,
.sidebar-btn:focus {
    background-color: var(--color-deep-blue);
    color: var(--white) !important;
}

.sidebar-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.sidebar-btn:hover svg {
    transform: translateX(2px);
}

/* ——— Liste de liens (widget Accès rapide) —————————————————— */
.sidebar-link-list {
    margin-top: 16px;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Lovable divide-y : bordure UNIQUEMENT entre les items (pas au-dessus du 1er,
   pas sous le dernier) + first:pt-0 / last:pb-0. */
.sidebar-link-item {
    border-top: 1px solid var(--color-deep-blue-10);
    padding: 12px 0;
}

.sidebar-link-item:first-child {
    border-top: none;
    padding-top: 0;
}

.sidebar-link-item:last-child {
    padding-bottom: 0;
}

.sidebar-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.sidebar-link__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sidebar-link__titre {
    font-size: 0.875rem;   /* text-sm */
    font-weight: var(--semibold);
    color: var(--color-deep-blue);
    transition: color 0.2s ease;
}

.sidebar-link:hover .sidebar-link__titre {
    color: var(--color-cta);
}

.sidebar-link__arrow {
    flex-shrink: 0;
    color: var(--color-cta);
    transition: transform 0.2s ease;
}

.sidebar-link:hover .sidebar-link__arrow {
    transform: translateX(2px);
}

.sidebar-link__texte {
    margin-top: 4px;
    font-size: 0.75rem;    /* text-xs */
    line-height: 1.625;    /* leading-relaxed */
    color: var(--color-deep-blue-70);
}

/* ——— Widget Agenda ————————————————————————————————————————— */
.sidebar-link-item--agenda {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-agenda-date {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg); /* rounded-lg = 10px */
    /* Lovable bg-cerf-light-blue/60 */
    background-color: color-mix(in srgb, var(--color-primary-light) 60%, transparent);
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: var(--semibold);
    text-transform: uppercase;
    letter-spacing: 0.025em; /* tracking-wide */
    color: var(--color-deep-blue);
}

.sidebar-agenda-titre {
    font-size: 0.875rem;
    font-weight: var(--semibold);
    color: var(--color-deep-blue);
    line-height: 1.375; /* leading-snug */
    margin: 0;
}

.sidebar-agenda-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    font-weight: var(--semibold);
    color: var(--color-cta);
    text-decoration: none;
    transition: color 0.2s ease;
    /* Lien vers la page de l'événement (cf. sidebar.php) — mêmes propriétés
       que les autres CTA d'événements du thème (dar__btn, teaser__cta). */
    border: none;
    background: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.sidebar-agenda-cta:hover {
    color: var(--color-deep-blue);
}

.sidebar-agenda-cta svg {
    transition: transform 0.2s ease;
}

.sidebar-agenda-cta:hover svg {
    transform: translateX(2px);
}

/* ——— Widget Ressources ————————————————————————————————————— */
.sidebar-ressource-card {
    display: block;
    margin-top: 16px;
    border-radius: var(--border-radius-lg); /* rounded-lg = 10px */
    border: 1px solid var(--color-deep-blue-10);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.sidebar-ressource-img {
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: var(--color-deep-blue-5); /* Lovable bg-cerf-deep-blue/5 */
}

.sidebar-ressource-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

a.sidebar-ressource-card:hover .sidebar-ressource-img img {
    transform: scale(1.05);
}

.sidebar-ressource-body {
    padding: 12px;
}

.sidebar-ressource-cat {
    font-size: 0.75rem;
    font-weight: var(--medium);
    color: var(--color-primary);
    display: block;
}

.sidebar-ressource-titre {
    margin-top: 4px;
    font-size: 0.875rem;
    font-weight: var(--semibold);
    color: var(--color-deep-blue);
    transition: color 0.2s ease;
    line-height: 1.3;
}

a.sidebar-ressource-card:hover .sidebar-ressource-titre {
    color: var(--color-cta);
}

.sidebar-ressource-cta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    font-weight: var(--semibold);
    color: var(--color-cta);
    transition: color 0.2s ease;
}

a.sidebar-ressource-card:hover .sidebar-ressource-cta {
    color: var(--color-deep-blue);
}

/* ——— Bannière publicitaire ————————————————————————————————— */
.sidebar-banniere {
    display: block;
    border-radius: var(--border-radius-xl); /* rounded-xl = 14px */
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.sidebar-banniere img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.sidebar-banniere:hover img {
    transform: scale(1.05); /* Lovable group-hover:scale-105 */
}