/* ============================================================
   HOMEPAGE — Layout 3 colonnes + composants
   ============================================================ */

/* ============================================================
   GRILLE
   ============================================================ */

.homepage-layout {
    display: grid;
    grid-template-columns: 2fr 7fr 3fr;
    grid-template-areas: "archives main sidebar";
    gap: var(--space);
    padding-block: var(--space);
    align-items: start;
}

.col-archives { grid-area: archives; }
.col-main     { grid-area: main; }
.col-sidebar  { grid-area: sidebar; }

@media (max-width: 1023px) {
    .homepage-layout {
        grid-template-columns: 1fr 2fr;
        grid-template-areas:
            "sidebar sidebar"
            "archives main";
    }
}

@media (max-width: 767px) {
    .homepage-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "sidebar"
            "archives";
    }
}

/* ============================================================
   ARCHIVES SIDEBAR (colonne gauche)
   ============================================================ */

.archives-sidebar {
    background-color: #fff;
}


.archives-sidebar__title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-white);
    background: var(--color-primary);
    padding: 8px 16px;
    border-radius: var(--radius);
    margin-bottom: 6px;
    display: block;
}

.archives-sidebar__list,
.archives-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.archives-sidebar li a {
    display: block;
    padding: 4px 16px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--color-dark);
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.15s;
}

.archives-sidebar li a:hover {
    color: var(--color-primary);
}

/* ============================================================
   CAROUSEL (colonne centrale)
   ============================================================ */

.carousel {
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Slides */
.carousel__slide {
    display: none;
}

.carousel__slide.is-active {
    display: block;
}

/* Zone image — pleine largeur, overlay en absolu */
.carousel__img-wrap {
    position: relative;
    overflow: hidden;
    line-height: 0;
}

.carousel__img-link {
    display: block;
}

.carousel__img {
    width: 100%;
    height: 410px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.carousel__img-link:hover .carousel__img {
    transform: scale(1.02);
}

.carousel__img--placeholder {
    width: 100%;
    height: 310px;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 3rem;
}

/* Overlay : label "À La Une" (gauche) + flèches (droite) */
.carousel__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 12px 14px;
}

.carousel__label {
        background: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 16px 14px;
    border-radius: var(--radius);
}

.carousel__arrows {
    display: flex;
    gap: 6px;
}

.carousel__prev,
.carousel__next {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.carousel__prev:hover,
.carousel__next:hover {
    background: var(--color-dark);
}

/* Zone contenu — sous l'image */
.carousel__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.carousel__category {
    font-family: var(--font-block);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-primary);
    text-transform: uppercase;   
    text-decoration: none;
}

.carousel__title {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.3;
}

.carousel__title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.15s;
}

.carousel__title a:hover {
    color: var(--color-primary);
}

.carousel__excerpt {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
    color: #555;
}

.carousel__dot.is-active {
    background: var(--color-primary);
    transform: scale(1.3);
}

/* ============================================================
   SECTION "TOUTE L'ACTUALITÉ" (sous le carousel)
   ============================================================ */

.recent-posts {
    margin-top: var(--space);
    border: 1px solid #e2e2e2;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-white);
}

.recent-posts__header {
    background: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 16px;
}

.recent-posts__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.recent-posts__item {
    border-bottom: 1px solid #ebebeb;
}

.recent-posts__item:last-child {
    border-bottom: none;
}

.post-card {
    display: flex;
    gap: 16px;
    padding: 14px 16px;
    align-items: flex-start;
}

.post-card__img-link {
    flex-shrink: 0;
    position: relative;
}

/* Cadenas articles verrouillés */
.post-card__locked {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 26px;
    height: 26px;
    background: var(--color-red);
    color: var(--color-white);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    pointer-events: none;
}

.post-card__img {
    width: 160px;
    height: 108px;
    object-fit: cover;
    display: block;
}

.post-card__img--placeholder {
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 1.8rem;
}

.post-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.post-card__category {
    font-family: var(--font-block);
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;    
    text-decoration: none;
    color: var(--color-primary);
}


.post-card__title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
}

.post-card__title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.15s;
}

.post-card__title a:hover {
    color: var(--color-primary);
}

.post-card__excerpt {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.55;
    color: #555;
}

/* ============================================================
   BLOC TRIBUNE
   ============================================================ */

.tribune-block {
    margin-top: var(--space);
    border: 1px solid #e2e2e2;
    border-radius: var(--radius);
    overflow: hidden;
}

.tribune-block__header {
    background:var(--color-tribune);
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
}

.tribune-block__body {
    background: var(--color-white);
    padding: 14px 16px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.tribune-block__img-link { flex-shrink: 0; display: block; }

.tribune-block__img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    display: block;
}

.tribune-block__img-placeholder {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 2rem;
}

.tribune-block__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tribune-block__label {
    font-family: var(--font-block);
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;    
    color: var(--color-tribune);
}

.tribune-block__title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
}

.tribune-block__title a {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.15s;
}

.tribune-block__title a:hover { color: var(--color-primary); }

.tribune-block__excerpt {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.6;
    color: #444;
}

.tribune-block__byline {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-style: italic;
    color: #888;
    line-height: 1.4;
}

/* ============================================================
   EMPLACEMENTS BANNIÈRES INLINE
   ============================================================ */

.banner-slot {
    margin-top: var(--space);
    text-align: center;
}

.banner-slot img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* Corps de page : max 600px centrés */
.banner-slot--corps-1,
.banner-slot--corps-2 {
    max-width: 600px;
    margin-inline: auto;
}

/* Footer : max 728px centrés */
.banner-slot--footer {
    max-width: 728px;
    margin-inline: auto;
    margin-bottom: var(--space);
}

/* ============================================================
   CTA "TOUTE L'ACTUALITÉ"
   ============================================================ */

.all-news-cta,
.all-solutions-cta {
    text-align: center;
    padding: var(--space) 0;
}

.all-news-cta__btn,
.all-solutions-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    color: var(--color-white);
}

.all-news-cta__btn {
    background: var(--color-primary);
}

.all-news-cta__btn:hover {
    background: var(--color-dark);
   
}

.all-solutions-cta__btn {
    background: var(--color-solutions);
    color: var(--color-white);
}

.all-solutions-cta__btn:hover {
    background: var(--color-dark);
    color: var(--color-white);
}

/* Bloc "more posts" — même séparateur que recent-posts */
.recent-posts__list--more {
    list-style: none;
    margin: var(--space) 0 0;
    padding: 0;
    border: 1px solid #e2e2e2;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-white);
}

/* ============================================================
   WIDGET MAGAZINE (colonne droite)
   ============================================================ */

.widget-magazine {
     text-align: center;    
    border-radius: 6px;  
    
    color: #fff;
    background-color: #abc605;
     padding: 10px 15px;
     
}

.widget-magazine h3 {
   font-family: var(--font-body);
    font-size: 1.05em;
    margin-bottom: 10px;
    text-transform: uppercase;
}




.widget-magazine__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.widget-magazine__cover {
    max-width: 90%;
    height: auto;
    display: inline-block;   
}

.widget-magazine__numero {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-dark);
    padding: 10px 0;
    line-height: 1.4;    
}

.widget-magazine__link:hover .widget-magazine__numero {
    color: #fff
}

/* Wrapper générique des widgets de la sidebar droite */
.sidebar-widget {
    margin-bottom: var(--space);
}

.sidebar-widget__title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-dark);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 12px;
}

/* ============================================================
   WIDGET SOLUTIONS (colonne droite homepage)
   ============================================================ */

.sidebar-solutions {
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: var(--space);
}

.sidebar-solutions__title {
    background: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 16px;
    margin: 0;
}

.sidebar-solutions__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-solutions__item {
    border-bottom: 1px solid #ebebeb;
}

.sidebar-solutions__item:last-child {
    border-bottom: none;
}

.sidebar-solutions__link {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
    text-decoration: none;
    transition: background 0.15s;
}

.sidebar-solutions__link:hover {
    background: #f9f9f9;
}

.sidebar-solutions__img-wrap {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
}

.sidebar-solutions__img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    display: block;
}

.sidebar-solutions__img-placeholder {
    width: 64px;
    height: 64px;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 1.4rem;
    border-radius: 50%;
}

.sidebar-solutions__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sidebar-solutions__name {
    font-family: var(--font-block);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-solutions);
    display: block;
    line-height: 1.2;
}

.sidebar-solutions__excerpt {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-dark);
    line-height: 1.4;
    margin: 0;
}

/* ============================================================
   WIDGET AGENDA (colonne droite homepage)
   ============================================================ */

.sidebar-agenda {
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: var(--space);
}

.sidebar-agenda__title {
    background: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 16px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sidebar-agenda__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-agenda__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-bottom: 1px solid #ebebeb;
}

.sidebar-agenda__item:last-child {
    border-bottom: none;
}

.sidebar-agenda__title-link {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-agenda);
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.15s;
}

.sidebar-agenda__title-link:hover {
    color: var(--color-dark);
}

.sidebar-agenda__dates {
    font-family: var(--font-body);
    font-size: 0.9225rem;
    font-weight: 600;
    color: var(--color-dark);
}

.sidebar-agenda__lieu {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: #555;
}

.sidebar-agenda__url {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    transition: color 0.15s;
}

.sidebar-agenda__url:hover {
    color: var(--color-primary);
}

/* CTA Agenda */
.all-agenda-cta {
    text-align: center;
    padding: var(--space) 0;
}

.all-agenda-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 28px;
    background: var(--color-agenda);
    color: var(--color-white);
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
}

.all-agenda-cta__btn:hover {
    background: var(--color-primary);
    color: var(--color-dark);
}

/* ============================================================
   WIDGET ACTUALITÉS (colonne droite sidebar)
   ============================================================ */

.sidebar-news {
    background: var(--color-white);
    border-radius: var(--radius);
    overflow: hidden;
    
}

.sidebar-news__title {
    background: var(--color-dark);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    padding: 8px 16px;
    margin: 0;
}

.sidebar-news__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-news__item {
    border-bottom: 1px solid #ebebeb;
}

.sidebar-news__item:last-child {
    border-bottom: none;
}

.sidebar-news__link {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.sidebar-news__link:hover {
    background: #f9f9f9;
}

.sidebar-news__img-wrap {
    flex-shrink: 0;
    width: 88px;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius);
    background: #eee;
}

.sidebar-news__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar-news__img--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 1.25rem;
}

.sidebar-news__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sidebar-news__cat {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sidebar-news__headline {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.35;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
}

.sidebar-news__link:hover .sidebar-news__headline {
    color: var(--color-primary);
}