/* ============================================================
   Xibar Native — xn-layout.css  v0.3.0
   Layout 3 colonnes · Slider · Cols · Hero-List · Sidebar-Right · Footer 4
   ============================================================ */

/* ── HOME GRID 3 COLONNES ───────────────────────────────────── */
/* align-items: stretch (au lieu de start) pour que les 3 colonnes
   prennent la hauteur du row (= hauteur de la plus grande). Combine
   avec margin-top:auto sur le dernier enfant de chaque colonne (regle
   plus bas), ca epingle le dernier widget au bas du row sans pousser
   le contenu du haut vers le bas. */
.xn-home__grid {
    display: grid;
    grid-template-columns: 260px 1fr 300px;
    gap: var(--xn-gap);
    align-items: stretch;
}
@media (max-width: 1100px) {
    .xn-home__grid { grid-template-columns: 220px 1fr; }
    .xn-sidebar--right { display: none; }
}
@media (max-width: 768px) {
    .xn-home__grid { grid-template-columns: 1fr; }
    /* .xn-sidebar--left supprime (display:none) supprime ici car ecrase par
       la regle L389 plus tardive (position:sticky). Le repositionnement
       mobile (order:2 + position:static) est traite dans le bloc
       "MENU BURGER MOBILE" en fin de fichier (@media max-width:767px). */
}

/* ── SLIDER HERO ────────────────────────────────────────────── */
/* Hauteur fixe 420px : evite le saut de layout des aspect-ratio
   et garantit une zone visuelle stable pour le cross-fade. */
.xn-slider {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: var(--xn-radius);
    margin-bottom: var(--xn-space-lg);
    background: var(--xn-color-dark);
}
/* Tablette : reduction proportionnelle de la hauteur slider pour
   suivre la baisse de largeur (Q3 plan session 9). */
@media (max-width: 1024px) {
    .xn-slider { height: 320px; }
}
.xn-slider__track { position: relative; height: 100%; }
.xn-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 600ms ease;
    pointer-events: none;
}
.xn-slider__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
.xn-slider__link { display: block; height: 100%; position: relative; }
.xn-slider__img { width: 100%; height: 100%; object-fit: cover; }
.xn-slider__img--placeholder { background: var(--xn-color-blue-light); height: 100%; }
.xn-slider__overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--xn-space-lg);
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.3) 70%, transparent 100%);
    color: var(--xn-color-white);
}
.xn-slider__overlay .cat-links a {
    display: inline-block;
    background: var(--xn-color-blue);
    color: var(--xn-color-white);
    font-size: 11px; font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--xn-radius);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.xn-slider__title {
    font-size: clamp(15px, 2.2vw, 20px);
    font-weight: var(--xn-font-weight-bold);
    line-height: 1.3;
    color: var(--xn-color-white);
    margin-bottom: var(--xn-space-xs);
}
.xn-slider__overlay .xn-meta { color: rgba(255,255,255,.75); }
.xn-slider__btn {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.5);
    color: var(--xn-color-white);
    border: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--xn-transition);
}
.xn-slider__btn:hover { background: var(--xn-color-blue); }
.xn-slider__btn--prev { left: 8px; }
.xn-slider__btn--next { right: 8px; }
.xn-slider__dots {
    position: absolute;
    bottom: 8px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px; z-index: 10;
}
.xn-slider__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: none; cursor: pointer; padding: 0;
    transition: background var(--xn-transition);
}
.xn-slider__dot.is-active { background: var(--xn-color-white); }

/* ── EN-TÊTE SECTION (badge + ligne pointillée — "Style 39") ─
   La couleur du badge est pilotee par --xn-section-color (fallback bleu)
   Override par section : <div class="xn-section-header" style="--xn-section-color:#42A418">
*/
.xn-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--xn-space-md);
    padding-bottom: 6px;
    border-bottom: 1px dotted var(--xn-color-gray-light);
}
/* Style Combo A — pentagone clip-path bleu + accent vert gauche.
   Adopte session 8 pour coherence avec les badges de section homepages
   (cf body.xn-home1-active .xn-home1__section-title L2589). Affecte
   sidebar article/single ("Articles recents", "Articles similaires"),
   section-hero-list partial, etc. Les homepages Home2/Home4 gardent
   leur Style 39 via override scope body.xn-home2-active. */
.xn-section-title {
    display: inline-block;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--xn-color-white);
    background: var(--xn-section-color, var(--xn-color-blue));
    padding: 5px 24px 5px 8px;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    border-left: 4px solid #42A418;
    margin: 0;
}
.xn-section-more {
    margin-left: auto;
    font-size: 12px;
    color: var(--xn-section-color, var(--xn-color-blue));
    font-weight: var(--xn-font-weight-medium);
    white-space: nowrap;
}
.xn-section-more:hover { text-decoration: underline; }

/* ── 2 COLONNES ─────────────────────────────────────────────── */
.xn-col2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--xn-gap);
}
@media (max-width: 600px) { .xn-col2 { grid-template-columns: 1fr; } }

/* Card liste horizontale */
.xn-card--list {
    display: flex;
    gap: var(--xn-space-sm);
    align-items: flex-start;
    margin-bottom: var(--xn-space-md);
    padding-bottom: var(--xn-space-md);
    border-bottom: 1px solid var(--xn-color-border);
}
.xn-card--list:last-child { border-bottom: none; margin-bottom: 0; }
.xn-card--list__thumb { flex-shrink: 0; width: 80px; }
.xn-card--list__thumb img,
.xn-card--list__thumb .xn-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: var(--xn-radius); }
.xn-card--list__thumb .xn-thumb--placeholder { width: 80px; height: 60px; border-radius: var(--xn-radius); }
.xn-card--list .xn-card__body { padding: 0; }
.xn-card--list .xn-card__title { font-size: 13px; line-height: 1.35; }

/* ── ARTICLE-CARD (format DakarMedias colonnes CAT A/B) ─────── */
.xn-article-card {
    display: block;
    margin-bottom: var(--xn-space-md);
    padding-bottom: var(--xn-space-md);
    border-bottom: 1px solid var(--xn-color-border);
}
.xn-article-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.xn-article-card__media {
    display: block;
    margin-bottom: var(--xn-space-sm);
    border-radius: var(--xn-radius);
    overflow: hidden;
}
.xn-article-card__img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.xn-article-card__img--placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--xn-color-blue-light);
}

.xn-article-card__body { display: block; }
.xn-article-card__title {
    font-size: 14px;
    font-weight: var(--xn-font-weight-bold);
    text-transform: uppercase;
    line-height: 1.3;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xn-article-card__title a {
    color: var(--xn-color-dark);
    transition: color var(--xn-transition);
}
.xn-article-card__title a:hover { color: var(--xn-color-red); }
.xn-article-card__bullet {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--xn-color-red);
    margin-right: 6px;
    vertical-align: middle;
    transform: translateY(-1px);
}
.xn-article-card__meta {
    font-size: 12px;
    color: var(--xn-color-gray-mid);
    margin-bottom: 4px;
}
.xn-article-card__sep { margin: 0 4px; }
.xn-article-card__excerpt {
    font-size: 13px;
    color: var(--xn-color-gray);
    line-height: 1.45;
    margin: 0;
}

/* ── SECTION HERO + LISTE (modèle "People") ─────────────────── */
.xn-hero-list { margin-bottom: var(--xn-space-xl); }

.xn-hero-list__grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--xn-space-md);
    align-items: stretch;
}
@media (max-width: 768px) {
    .xn-hero-list__grid { grid-template-columns: 1fr; }
}

/* Hero gauche */
.xn-hero-list__hero {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.xn-hero-list__hero-link {
    display: block;
    position: relative;
    border-radius: var(--xn-radius);
    overflow: hidden;
    height: 100%;
}
.xn-hero-list__img {
    width: 100%;
    height: 300px;
    aspect-ratio: unset;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.xn-hero-list__img--placeholder {
    width: 100%;
    height: 300px;
    aspect-ratio: unset;
    background: var(--xn-color-blue-light);
}
.xn-hero-list__overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--xn-space-md);
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
    color: var(--xn-color-white);
}
.xn-hero-list__title {
    font-size: clamp(14px, 1.8vw, 18px);
    font-weight: var(--xn-font-weight-bold);
    line-height: 1.3;
    color: var(--xn-color-white);
    margin: 6px 0 4px;
}
.xn-hero-list__overlay .xn-meta { color: rgba(255,255,255,.75); font-size: 12px; }
.xn-hero-list__overlay .xn-card__cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    background: var(--xn-color-green);
    color: var(--xn-color-white);
    padding: 2px 7px;
    border-radius: var(--xn-radius);
    letter-spacing: .06em;
}

/* Liste droite */
.xn-hero-list__list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0;
    height: 100%;
}
.xn-hero-list__item {
    flex: 1;
    display: flex;
    gap: var(--xn-space-sm);
    align-items: center;
    padding: var(--xn-space-sm) 0;
    border-bottom: 1px solid var(--xn-color-border);
}
.xn-hero-list__item:first-child { padding-top: 0; }
.xn-hero-list__item:last-child { border-bottom: none; }
.xn-hero-list__item-thumb { flex-shrink: 0; width: 80px; }
.xn-hero-list__item-thumb img,
.xn-hero-list__item-thumb .xn-thumb { width: 80px; height: 60px; object-fit: cover; border-radius: var(--xn-radius); }
.xn-hero-list__item-thumb .xn-thumb--placeholder { width: 80px; height: 60px; border-radius: var(--xn-radius); }
.xn-hero-list__item-title {
    font-size: 13px;
    font-weight: var(--xn-font-weight-medium);
    line-height: 1.35;
    display: block;
    margin-bottom: 4px;
    color: var(--xn-color-dark);
}
.xn-hero-list__item-title a { color: inherit; }
.xn-hero-list__item-title a:hover { color: var(--xn-color-blue); }
.xn-hero-list__item-date { font-size: 11px; color: var(--xn-color-gray-mid); }

/* ── SIDEBAR DROITE ─────────────────────────────────────────── */
.xn-sidebar--right {
    display: flex;
    flex-direction: column;
    gap: var(--xn-gap);
    position: sticky;
    top: 80px;
    align-self: start;
}

/* Widget "Articles recents" — Style 39 via .xn-section-header */
.xn-widget--recent { padding: var(--xn-space-md); }
.xn-widget--recent .xn-section-header { margin-bottom: var(--xn-space-sm); }

.xn-recent-item {
    display: flex;
    gap: var(--xn-space-sm);
    align-items: flex-start;
    padding: var(--xn-space-sm) 0;
    border-bottom: 1px solid var(--xn-color-border);
    background: var(--xn-color-white);
}
.xn-recent-item:last-child { border-bottom: none; padding-bottom: 0; }
.xn-recent-item__thumb { flex-shrink: 0; width: 70px; }
.xn-recent-item__thumb img,
.xn-recent-item__thumb .xn-thumb { width: 70px; height: 52px; object-fit: cover; border-radius: var(--xn-radius); }
.xn-recent-item__thumb .xn-thumb--placeholder { width: 70px; height: 52px; border-radius: var(--xn-radius); }
.xn-recent-item__title {
    font-size: 12px;
    font-weight: var(--xn-font-weight-medium);
    line-height: 1.35;
    display: block;
    margin-bottom: 4px;
    color: var(--xn-color-dark);
}
.xn-recent-item__title:hover { color: var(--xn-color-red); }
.xn-recent-item__date {
    font-size: 11px;
    color: var(--xn-color-gray-mid);
    display: flex;
    align-items: center;
    gap: 4px;
}
.xn-recent-item__date::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--xn-color-red);
    flex-shrink: 0;
}

/* ── SIDEBAR GAUCHE ─────────────────────────────────────────── */
.xn-sidebar--left {
    display: flex;
    flex-direction: column;
    gap: var(--xn-gap);
    position: sticky;
    top: 80px;
    align-self: start;
}

.xn-yt-facade {
    position: relative;
    cursor: pointer;
    border-radius: var(--xn-radius);
    overflow: hidden;
    background: var(--xn-color-dark);
}
.xn-yt-facade__thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.xn-yt-facade__placeholder { width: 100%; aspect-ratio: 16/9; background: var(--xn-color-blue-light); }
.xn-yt-facade__btn {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.4);
    border: none; cursor: pointer;
    transition: background var(--xn-transition);
}
.xn-yt-facade__btn:hover { background: rgba(39,64,178,.7); }
.xn-yt-facade__icon { font-size: 36px; color: var(--xn-color-white); }
.xn-yt-facade__notice { font-size: 11px; text-align: center; color: var(--xn-color-gray-mid); padding: 4px; background: var(--xn-color-white); }
.xn-yt-facade iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }

.xn-popular-item {
    display: flex; gap: var(--xn-space-sm);
    align-items: flex-start;
    margin-bottom: var(--xn-space-sm);
    padding-bottom: var(--xn-space-sm);
    border-bottom: 1px solid var(--xn-color-border);
}
.xn-popular-item:last-child { border-bottom: none; margin-bottom: 0; }
.xn-popular-item__rank {
    flex-shrink: 0;
    width: 22px; height: 22px;
    background: var(--xn-color-blue);
    color: var(--xn-color-white);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    margin-top: 2px;
}
.xn-popular-item__title { font-size: 12px; font-weight: 500; color: var(--xn-color-dark); line-height: 1.35; display: block; margin-bottom: 2px; }
.xn-popular-item__title:hover { color: var(--xn-color-blue); }
.xn-popular-item__date { font-size: 11px; color: var(--xn-color-gray-mid); }

/* ── SECTION VIDEOS HOMEPAGE (4 vidéos en grille) ──────────── */
.xn-yt-section__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--xn-gap);
}
.xn-yt-section__item .xn-yt-facade {
    display: block;
    position: relative;
    border-radius: var(--xn-radius);
    overflow: hidden;
    background: var(--xn-color-dark);
}
.xn-yt-section__thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--xn-radius);
    display: block;
}
.xn-yt-section__title {
    font-size: 13px;
    font-weight: 600;
    margin-top: 6px;
    line-height: 1.35;
    color: var(--xn-color-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xn-yt-section__date {
    font-size: 11px;
    color: var(--xn-color-gray-mid);
}
@media (max-width: 1024px) {
    .xn-yt-section__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .xn-yt-section__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .xn-yt-section__grid { grid-template-columns: 1fr; }
}

/* ── WIDGET DERNIERES VIDEOS YOUTUBE ────────────────────────── */
.xn-widget--yt-videos { padding: var(--xn-space-md); }
.xn-yt-item { margin-bottom: 12px; }
.xn-yt-item:last-child { margin-bottom: 0; }
.xn-yt-item .xn-yt-facade {
    display: block;
    position: relative;
    border-radius: var(--xn-radius);
    overflow: hidden;
    background: var(--xn-color-dark);
}
.xn-yt-item__thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: var(--xn-radius);
    display: block;
}
.xn-yt-item__title {
    font-size: 12px;
    font-weight: 500;
    margin-top: 4px;
    line-height: 1.35;
    color: var(--xn-color-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── WIDGET SPORT (sidebar gauche) ──────────────────────────── */
/* Couleur Style 39 : rouge */
.xn-widget--sport {
    padding: var(--xn-space-md);
    --xn-section-color: var(--xn-color-red);
}

/* Hero */
.xn-sport__hero { display: block; margin-bottom: var(--xn-space-md); color: inherit; }
.xn-sport__hero:hover .xn-sport__hero-title { color: var(--xn-color-red); }
.xn-sport__hero-media {
    position: relative;
    border-radius: var(--xn-radius);
    overflow: hidden;
    margin-bottom: var(--xn-space-sm);
}
.xn-sport__hero-img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
}
.xn-sport__hero-img--placeholder { background: var(--xn-color-blue-light); }
.xn-sport__hero-tag {
    position: absolute;
    bottom: 8px; left: 8px;
    background: var(--xn-color-red);
    color: var(--xn-color-white);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: var(--xn-radius);
}
.xn-sport__hero-title {
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--xn-color-dark);
    margin: 0 0 4px;
    transition: color var(--xn-transition);
}
.xn-sport__hero-date {
    font-size: 11px;
    color: var(--xn-color-gray-mid);
    display: block;
    margin-bottom: 6px;
}
.xn-sport__hero-excerpt {
    font-size: 12px;
    color: var(--xn-color-gray-mid);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Liste 3 items */
.xn-sport__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--xn-color-border);
}
.xn-sport__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: var(--xn-space-sm) 0;
    border-bottom: 1px solid var(--xn-color-border);
}
.xn-sport__item:last-child { border-bottom: none; }
.xn-sport__item-bullet {
    flex-shrink: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--xn-color-red);
    margin-top: 6px;
}
.xn-sport__item-thumb { flex-shrink: 0; width: 70px; }
.xn-sport__item-thumb img,
.xn-sport__item-thumb .xn-thumb { width: 70px; height: 52px; object-fit: cover; border-radius: var(--xn-radius); display: block; }
.xn-sport__item-thumb .xn-thumb--placeholder { width: 70px; height: 52px; border-radius: var(--xn-radius); }
.xn-sport__item-body { flex: 1; min-width: 0; }
.xn-sport__item-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--xn-color-dark);
    display: block;
    margin-bottom: 3px;
}
.xn-sport__item-title:hover { color: var(--xn-color-red); }
.xn-sport__item-date { font-size: 11px; color: var(--xn-color-gray-mid); }

/* Pagination */
.xn-sport__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: var(--xn-space-md);
    margin-top: var(--xn-space-sm);
    border-top: 1px solid var(--xn-color-border);
    font-size: 12px;
    color: var(--xn-color-gray-mid);
}
.xn-sport__nav {
    background: none;
    border: none;
    color: var(--xn-color-dark);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    padding: 4px 6px;
    transition: color var(--xn-transition);
}
.xn-sport__nav:hover:not(:disabled) { color: var(--xn-color-red); }
.xn-sport__nav:disabled { opacity: .35; cursor: not-allowed; }
.xn-sport__pager-sep { color: var(--xn-color-border); }
.xn-sport__pager-count { font-weight: 500; }
.xn-widget--sport.is-loading { opacity: .55; }

/* ── WIDGET SIDEBAR HERO + LISTE COMPACT (cat-hero) ───────── */
.xn-widget--cat-hero { padding: var(--xn-space-md); }

/* Hero compact : image + overlay titre + badge */
.xn-cat-hero__hero { display: block; margin-bottom: var(--xn-space-md); }
.xn-cat-hero__hero-link {
    display: block;
    position: relative;
    border-radius: var(--xn-radius);
    overflow: hidden;
}
.xn-cat-hero__hero-img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
}
.xn-cat-hero__hero-img--placeholder { background: var(--xn-color-blue-light); }
.xn-cat-hero__hero-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--xn-space-sm) var(--xn-space-md);
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 100%);
    color: var(--xn-color-white);
}
.xn-cat-hero__hero-cat {
    display: inline-block;
    background: var(--xn-section-color, var(--xn-color-blue));
    color: var(--xn-color-white);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: var(--xn-radius);
    margin-bottom: 4px;
}
.xn-cat-hero__hero-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--xn-color-white);
    margin: 0;
}

/* Liste 4 items thumb 60px */
.xn-cat-hero__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--xn-color-border);
}
.xn-cat-hero__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: var(--xn-space-sm) 0;
    border-bottom: 1px solid var(--xn-color-border);
}
.xn-cat-hero__item:last-child { border-bottom: none; }
.xn-cat-hero__item-bullet {
    flex-shrink: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--xn-color-red);
    margin-top: 6px;
}
.xn-cat-hero__item-thumb { flex-shrink: 0; width: 60px; }
.xn-cat-hero__item-thumb img,
.xn-cat-hero__item-thumb .xn-thumb { width: 60px; height: 45px; object-fit: cover; border-radius: var(--xn-radius); display: block; }
.xn-cat-hero__item-thumb .xn-thumb--placeholder { width: 60px; height: 45px; border-radius: var(--xn-radius); }
.xn-cat-hero__item-body { flex: 1; min-width: 0; }
.xn-cat-hero__item-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--xn-color-dark);
    display: block;
    margin-bottom: 3px;
}
.xn-cat-hero__item-title:hover { color: var(--xn-section-color, var(--xn-color-blue)); }
.xn-cat-hero__item-date { font-size: 11px; color: var(--xn-color-gray-mid); }

/* Pagination identique au widget Sport */
.xn-cat-hero__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: var(--xn-space-md);
    margin-top: var(--xn-space-sm);
    border-top: 1px solid var(--xn-color-border);
    font-size: 12px;
    color: var(--xn-color-gray-mid);
}
.xn-cat-hero__nav {
    background: none;
    border: none;
    color: var(--xn-color-dark);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    padding: 4px 6px;
    transition: color var(--xn-transition);
}
.xn-cat-hero__nav:hover:not(:disabled) { color: var(--xn-section-color, var(--xn-color-blue)); }
.xn-cat-hero__nav:disabled { opacity: .35; cursor: not-allowed; }
.xn-cat-hero__pager-sep { color: var(--xn-color-border); }
.xn-cat-hero__pager-count { font-weight: 500; }
.xn-widget--cat-hero.is-loading { opacity: .55; }

/* ── FOOTER 3 COLONNES (style H24) ──────────────────────────── */
.xn-footer__grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr;
    gap: var(--xn-gap);
    padding-bottom: var(--xn-space-lg);
}
@media (max-width: 900px) { .xn-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .xn-footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   HOMEPAGES — 3 STYLES SELECTABLES (Customizer xibar_homepage_style)
   home1 = Flux editorial (defaut, 3 cols)
   home2 = Magazine (sidebar droite uniquement)
   home3 = Visual first (sidebar gauche uniquement)
   ============================================================ */

/* ── HOME 1 — FLUX EDITORIAL ──────────────────────────────── */
/* Reutilise .xn-home__grid existant (260px 1fr 300px). */

/* En-tete de section : bordure inferieure coloree (style AFP/RFI) */
.xn-home1__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--xn-space-md);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--xn-section-color, var(--xn-color-blue));
}
.xn-home1__section-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--xn-section-color, var(--xn-color-blue));
    margin: 0;
}
.xn-home1__section-more {
    font-size: 11px;
    color: var(--xn-color-gray-mid);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.xn-home1__section-more:hover { color: var(--xn-section-color, var(--xn-color-blue)); }

.xn-home1__section { margin-bottom: var(--xn-space-lg); }

/* Slider hero — split image gauche / corps droite */
.xn-home1__slider {
    position: relative;
    height: 380px;
    border-radius: var(--xn-radius);
    overflow: hidden;
    margin-bottom: var(--xn-space-lg);
    background: var(--xn-color-dark);
}
/* Tablette : reduction hauteur slider home1 (Q3 plan session 9). Le
   passage en 1 col + height auto reste actif a 768px via L1235+. */
@media (max-width: 1024px) {
    .xn-home1__slider { height: 320px; }
}
.xn-home1__slider-track { position: relative; height: 100%; }
.xn-home1__slide {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}
.xn-home1__slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.xn-home1__slide-media { position: relative; overflow: hidden; }
.xn-home1__slide-media img { width: 100%; height: 100%; object-fit: cover; }
.xn-home1__slide-media-placeholder { width: 100%; height: 100%; background: var(--xn-color-blue-light); }
.xn-home1__slide-body {
    background: var(--xn-color-white);
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.xn-home1__slide-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--xn-color-red); color: var(--xn-color-white);
    font-size: 11px; font-weight: 800;
    padding: 4px 10px;
    text-transform: uppercase; letter-spacing: .06em;
    width: fit-content;
    margin-bottom: var(--xn-space-sm);
}
.xn-home1__slide-badge::before {
    content: ""; width: 6px; height: 6px;
    background: var(--xn-color-white); border-radius: 50%;
    animation: xn-home1-pulse 1.5s infinite;
}
@keyframes xn-home1-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.xn-home1__slide-title {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--xn-space-sm);
    color: var(--xn-color-dark);
}
.xn-home1__slide-title a { color: inherit; }
.xn-home1__slide-title a:hover { color: var(--xn-color-blue); }
.xn-home1__slide-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--xn-color-gray);
    margin-bottom: var(--xn-space-sm);
}
.xn-home1__slide-meta { font-size: 12px; color: var(--xn-color-gray-mid); }
.xn-home1__slider-dots {
    position: absolute; bottom: 14px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 7px;
    z-index: 5;
}
.xn-home1__slider-dot {
    width: 28px; height: 3px;
    border: none;
    background: rgba(0, 0, 0, .2);
    cursor: pointer;
    padding: 0;
    transition: background var(--xn-transition);
}
.xn-home1__slider-dot.is-active { background: var(--xn-color-blue); }
.xn-home1__slider-nav {
    position: absolute; top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    background: rgba(0, 0, 0, .55);
    color: var(--xn-color-white);
    border: none; border-radius: 50%;
    cursor: pointer; font-size: 18px;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--xn-transition);
}
.xn-home1__slider-nav:hover { background: var(--xn-color-blue); }
.xn-home1__slider-nav--prev { left: 8px; }
.xn-home1__slider-nav--next { right: 8px; }

/* Mix grid (1 grande + 2 petites empilees) */
.xn-home1__mix-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
}
.xn-home1__mix-main {
    background: var(--xn-color-white);
    border-radius: var(--xn-radius);
    overflow: hidden;
    transition: transform var(--xn-transition), box-shadow var(--xn-transition);
}
.xn-home1__mix-main:hover { transform: translateY(-2px); box-shadow: var(--xn-shadow-sm); }
.xn-home1__mix-main-media { position: relative; overflow: hidden; }
.xn-home1__mix-main-img { width: 100%; height: 230px; object-fit: cover; display: block; }
.xn-home1__mix-main-placeholder { width: 100%; height: 230px; background: var(--xn-color-blue-light); }
.xn-home1__mix-main-badge {
    position: absolute; top: 12px; left: 12px;
    background: var(--xn-section-color, var(--xn-color-blue));
    color: var(--xn-color-white);
    font-size: 10px; font-weight: 800;
    padding: 3px 8px;
    text-transform: uppercase; letter-spacing: .05em;
}
.xn-home1__mix-main-body { padding: 14px 16px 16px; }
.xn-home1__mix-main-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 6px;
}
.xn-home1__mix-main-title a { color: var(--xn-color-dark); }
.xn-home1__mix-main-title a:hover { color: var(--xn-section-color, var(--xn-color-blue)); }
.xn-home1__mix-main-excerpt {
    font-size: 13px;
    color: var(--xn-color-gray);
    line-height: 1.5;
    margin: 0 0 6px;
}
.xn-home1__mix-main-meta { font-size: 11px; color: var(--xn-color-gray-mid); }

.xn-home1__mix-sub { display: flex; flex-direction: column; gap: 14px; }
.xn-home1__sub-card {
    background: var(--xn-color-white);
    border-radius: var(--xn-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.xn-home1__sub-card:hover .xn-home1__sub-card-title { color: var(--xn-section-color, var(--xn-color-blue)); }
.xn-home1__sub-card-media { position: relative; overflow: hidden; }
.xn-home1__sub-card-img { width: 100%; height: 115px; object-fit: cover; display: block; }
.xn-home1__sub-card-placeholder { width: 100%; height: 115px; background: var(--xn-color-blue-light); }
.xn-home1__sub-card-badge {
    position: absolute; top: 8px; left: 8px;
    background: var(--xn-section-color, var(--xn-color-blue));
    color: var(--xn-color-white);
    font-size: 9px; font-weight: 800;
    padding: 2px 6px;
    text-transform: uppercase; letter-spacing: .04em;
}
.xn-home1__sub-card-body {
    padding: 10px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.xn-home1__sub-card-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--xn-color-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 auto;
}
.xn-home1__sub-card-title a { color: inherit; }
.xn-home1__sub-card-meta { font-size: 10px; color: var(--xn-color-gray-mid); margin-top: 6px; }

/* Patterns sections home1 (modifiers sur .xn-home1__mix-grid) */
/* Pattern B (mirror) : 1 grande droite + 2 sub gauche — inverse de A. */
.xn-home1__mix--mirror {
    grid-template-columns: 1fr 1.5fr;
}
.xn-home1__mix--mirror > .xn-home1__mix-main { order: 2; }
.xn-home1__mix--mirror > .xn-home1__mix-sub  { order: 1; }

/* Pattern C (grid3) : 3 cards uniformes (.xn-card via partial card-article). */
.xn-home1__mix--grid3 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--xn-space-md);
}
@media (max-width: 1100px) { .xn-home1__mix--grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .xn-home1__mix--grid3 { grid-template-columns: 1fr; } }

/* Pattern D (list) : 1 grande gauche + liste verticale thumb 80x80 droite. */
.xn-home1__mix--list {
    grid-template-columns: 1.5fr 1fr;
}
.xn-home1__list {
    display: flex;
    flex-direction: column;
}
.xn-home1__list-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--xn-color-border);
    align-items: flex-start;
}
.xn-home1__list-item:first-child { padding-top: 0; }
.xn-home1__list-item:last-child  { border-bottom: none; padding-bottom: 0; }
.xn-home1__list-item-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: var(--xn-radius);
    overflow: hidden;
}
.xn-home1__list-item-thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    display: block;
}
.xn-home1__list-item-placeholder {
    display: block;
    width: 80px;
    height: 80px;
    background: var(--xn-color-blue-light);
    border-radius: var(--xn-radius);
}
.xn-home1__list-item-body { flex: 1; min-width: 0; }
.xn-home1__list-item-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 4px;
    color: var(--xn-color-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xn-home1__list-item:hover .xn-home1__list-item-title { color: var(--xn-color-blue); }
.xn-home1__list-item-date { font-size: 11px; color: var(--xn-color-gray-mid); }

/* Responsive : tous les patterns retombent en 1 colonne sous 768px. */
@media (max-width: 768px) {
    .xn-home1__mix--mirror { grid-template-columns: 1fr; }
    .xn-home1__mix--mirror > .xn-home1__mix-main,
    .xn-home1__mix--mirror > .xn-home1__mix-sub  { order: 0; }
    .xn-home1__mix--list   { grid-template-columns: 1fr; }
}

/* Widgets sidebar home1 — En live, Plus lus, Videos, Fil depeches, Countdown */
.xn-home1__widget {
    background: var(--xn-color-white);
    border-radius: var(--xn-radius);
    padding: var(--xn-space-md);
}
.xn-home1__widget-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--xn-section-color, var(--xn-color-blue));
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--xn-section-color, var(--xn-color-blue));
    display: flex; align-items: center; gap: 6px;
}
.xn-home1__widget-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--xn-section-color, var(--xn-color-blue));
    display: inline-block;
}

.xn-home1__live-item {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--xn-color-border);
    align-items: flex-start;
}
.xn-home1__live-item:last-child { border-bottom: none; }
.xn-home1__live-item-time {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    color: var(--xn-color-red);
    width: 36px;
    font-variant-numeric: tabular-nums;
}
.xn-home1__live-item-title { font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--xn-color-dark); }
.xn-home1__live-item-title:hover { color: var(--xn-color-blue); }

.xn-home1__popular-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--xn-color-border);
}
.xn-home1__popular-item:last-child { border-bottom: none; }
.xn-home1__popular-item-rank {
    flex-shrink: 0;
    min-width: 24px;
    font-size: 14px;
    font-weight: 700;
    color: var(--xn-color-blue);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.xn-home1__popular-item-body { flex: 1; min-width: 0; }
.xn-home1__popular-item-title {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--xn-color-dark);
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xn-home1__popular-item-meta {
    font-size: 11px;
    color: var(--xn-color-gray-mid);
}
.xn-home1__popular-item:hover .xn-home1__popular-item-title { color: var(--xn-color-blue); }

.xn-home1__yt-item { margin-bottom: 10px; }
.xn-home1__yt-item:last-child { margin-bottom: 0; }
.xn-home1__yt-item-thumb {
    position: relative;
    border-radius: var(--xn-radius);
    overflow: hidden;
    margin-bottom: 6px;
    display: block;
}
.xn-home1__yt-item-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.xn-home1__yt-item-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .35);
    color: var(--xn-color-white);
    font-size: 30px;
}
.xn-home1__yt-item-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--xn-color-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.xn-home1__feed-item {
    padding: 7px 0;
    border-bottom: 1px solid var(--xn-color-border);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.xn-home1__feed-item:last-child { border-bottom: none; }
.xn-home1__feed-item-tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 6px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--xn-color-white);
    background: var(--xn-color-blue);
    border-radius: 2px;
    min-width: 38px;
    line-height: 1;
}
/* Variantes par categorie (slug WP) */
.xn-home1__feed-item-tag--politique     { background: var(--xn-color-blue); }
.xn-home1__feed-item-tag--sport         { background: var(--xn-color-green); }
.xn-home1__feed-item-tag--economie      { background: #1f2937; }
.xn-home1__feed-item-tag--culture       { background: #b9450b; }
.xn-home1__feed-item-tag--international { background: #e8590c; }
.xn-home1__feed-item-tag--societe       { background: var(--xn-color-red); }
.xn-home1__feed-item-title { font-size: 12px; line-height: 1.35; font-weight: 500; color: var(--xn-color-dark); }
.xn-home1__feed-item:hover .xn-home1__feed-item-title { color: var(--xn-color-blue); }

.xn-home1__countdown {
    padding: var(--xn-space-md);
    background: linear-gradient(135deg, var(--xn-color-blue) 0%, var(--xn-color-blue-dark) 100%);
    color: var(--xn-color-white);
    border-radius: var(--xn-radius);
    text-align: center;
}
.xn-home1__countdown h3 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 8px;
    opacity: .85;
    font-weight: 700;
}
.xn-home1__countdown-num {
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -.02em;
}
.xn-home1__countdown-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.xn-home1__countdown-sub {
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}

@media (max-width: 768px) {
    .xn-home1__slide { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
    .xn-home1__slider { height: auto; min-height: 480px; }
    .xn-home1__slide-body { padding: 20px; }
    .xn-home1__mix-grid { grid-template-columns: 1fr; }
}

/* ── HOME 2 — MAGAZINE (sidebar droite uniquement) ────────── */

/* Double background home2 (active uniquement quand front-page.php injecte
   la classe xn-home2-active sur body) :
   - body : --xn-home2-bg gris bleu moyen, visible autour de la zone contenu
   - .xn-home2__content-bg : --xn-home2-content-bg gris tres clair, le
     "plateau" du contenu avec ombre douce et max-width 1200px. */
body.xn-home2-active {
    --xn-home2-bg:         #E8E8E8;
    --xn-home2-content-bg: #F5F5F5;
    background: var(--xn-home2-bg);
}
.xn-home2__content-bg,
.xn-home4__content-bg {
    background: var(--xn-home2-content-bg, #F5F5F5);
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, .08);
}
/* Gap respiratoire 12px entre la pub header (.xn-ad--banner avec xn-mt-lg
   24px du nav) et le plateau, aligne sur le comportement home3 (override
   L2665-2668). Sans cette regle, le plateau collait a la pub donnant la
   perception "pub stuck en haut". */
body.xn-home2-active .xn-home2__content-bg,
body.xn-home4-active .xn-home4__content-bg {
    margin-top: 12px;
}

/* [SESSION 7] Anciennes regles .xn-ad--banner Home1/Home4 (max-width 970px
   + translateX -20px) supprimees : la pub leaderboard est remontee dans la
   Barre 1 de la navbar unifiee (.xn-navbar__pub). Le slot <main> reste
   visible et affiche la pub en complement (display:block via L2922). */

/* .xn-footer a margin-top: 64px (xn.css) — neutralise pour home2 afin
   que le plateau colle directement au footer (suppression du gap bas). */
body.xn-home2-active .xn-footer { margin-top: 0; }

.xn-home2__grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--xn-gap);
    align-items: start;
}
/* Tablette : sidebar reduite 240px, layout 2-col maintenu (Q2 session 9).
   Ancienne regle 1100px (passage direct en 1col) supprimee — provoquait
   la disparition prematuree de la sidebar entre 768 et 1100px. */
@media (max-width: 1024px) {
    .xn-home2__grid { grid-template-columns: 1fr 240px; }
}
@media (max-width: 768px) {
    .xn-home2__grid { grid-template-columns: 1fr; }
}

/* ── HOME 4 — MAGAZINE MIRRORED (sidebar gauche + droite) ─── */
/* Layout 3 colonnes aligne sur home1 : sidebar gauche (260px, widgets
   home1) + contenu (1fr, skin home2) + sidebar droite (300px, widgets
   home2). Plateau elargi a 1380px (override ci-dessous, vs 1200px de
   home2) pour matcher la largeur de .xn-container utilisee par home1.
   Le body recoit xn-home2-active EN PLUS de xn-home4-active
   (cf front-page.php), donc tous les styles body.xn-home2-active .xxx
   s appliquent au skin contenu et a la sidebar droite. La sidebar
   gauche utilise les widgets de home1 (classes .xn-home1__*).
   Pas de redefinition de bg : --xn-home2-bg #E8E8E8 et
   --xn-home2-content-bg #F5F5F5 sont herites de xn-home2-active. */
.xn-home4__grid {
    display: grid;
    grid-template-columns: 260px 1fr 300px;
    gap: var(--xn-gap);
    align-items: start;
}
/* Override max-width du plateau home4 (la regle partagee avec
   .xn-home2__content-bg le fixe a 1200px). Home4 s aligne sur
   .xn-container 1380px de home1. */
.xn-home4__content-bg {
    max-width: 1380px;
}
/* Responsive aligne sur home1 : a 1100px on passe a 2 colonnes
   (sidebar gauche reduite a 220px + main), sidebar droite cachee
   par la regle globale .xn-sidebar--right { display: none } heritee
   du bloc .xn-home__grid en debut de fichier. A 768px on retombe
   sur main seul, sidebar gauche cachee idem. */
@media (max-width: 1100px) {
    .xn-home4__grid { grid-template-columns: 220px 1fr; }
}
@media (max-width: 768px) {
    .xn-home4__grid { grid-template-columns: 1fr; }
}

/* [SESSION 8] Regle padding-left 16px sur .xn-home4__main supprimee :
   creait une asymetrie 40px (gap 24 + padding 16) gauche vs 24px droite.
   Le gap: var(--xn-gap)=24px du grid Home4 (L1296) assure deja un
   espacement symetrique entre sidebars et main. */

/* Widget Populaires home4 — fond vert integral, titre+ranks+items en blanc.
   Le widget partage .xn-home1__widget avec 4 autres widgets (Videos, Sport,
   Recents) dans la sidebar gauche home4 ; nth-child est fragile (widgets
   conditionnels selon Customizer YouTube/categories). Modifier class
   .xn-home1__widget--populaire ajoute dans home4.php (autour de L168). */
body.xn-home4-active .xn-home1__widget--populaire {
    background: var(--xn-color-green);
}
body.xn-home4-active .xn-home1__widget--populaire .xn-home1__widget-title {
    color: var(--xn-color-white);
    border-bottom-color: var(--xn-color-white);
}
body.xn-home4-active .xn-home1__widget--populaire .xn-home1__widget-dot {
    background: var(--xn-color-white);
}
body.xn-home4-active .xn-home1__widget--populaire .xn-home1__popular-item {
    border-bottom-color: rgba(255, 255, 255, .25);
}
body.xn-home4-active .xn-home1__widget--populaire .xn-home1__popular-item-rank,
body.xn-home4-active .xn-home1__widget--populaire .xn-home1__popular-item-title {
    color: var(--xn-color-white);
}
body.xn-home4-active .xn-home1__widget--populaire .xn-home1__popular-item-meta {
    color: rgba(255, 255, 255, .85);
}
body.xn-home4-active .xn-home1__widget--populaire .xn-home1__popular-item:hover .xn-home1__popular-item-title {
    color: rgba(255, 255, 255, .85);
}

/* Containment pubs sidebars home4 — .xn-ad a overflow:visible (xn.css L976)
   et les images senregie peuvent depasser la largeur de colonne (260px
   gauche / 300px droite). On force overflow:hidden + max-width sur img
   et iframe pour eviter le debordement. Les regles globales .xn-ad img
   (xn.css L1012) et .xn-ad--sidebar img (xn.css L1024) existent deja
   mais sont neutralisees ici par .xn-ad overflow:visible. */
body.xn-home4-active .xn-sidebar--left .xn-ad,
body.xn-home4-active .xn-sidebar--right .xn-ad {
    overflow: hidden;
}
body.xn-home4-active .xn-sidebar--left .xn-ad img,
body.xn-home4-active .xn-sidebar--right .xn-ad img,
body.xn-home4-active .xn-sidebar--left .xn-ad iframe,
body.xn-home4-active .xn-sidebar--right .xn-ad iframe {
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    display: block;
}

/* Masque l auteur dans la meta des cards home4 — meme principe que
   .xn-similaires .xn-card__author (xn.css:615), scope body.xn-home4-active.
   Cible les meta-info de cards du main (partial card-article en pattern C,
   meta inline de .xn-home2__feature en pattern A/B). Les sidebars
   n utilisent pas .xn-card__author (popular-item-meta, live-item-title,
   sub-card-meta), donc pas d effet de bord. */
body.xn-home4-active .xn-card__author {
    display: none;
}

.xn-home2__section { margin-bottom: var(--xn-space-xl); }

/* Section headers home2 — Combo B : badge oblique skew avec barre verte
   a gauche + corps bleu marque skewe + texte contre-skewe pour rester
   droit. Couleurs hardcodees (vert/bleu marque) — uniforme sur les 6
   sections, --xn-section-color n est plus utilise pour ce badge.
   Sportee sur body.xn-home2-active (specificite 0,0,2,2 sur le span)
   pour battre la regle globale .xn-section-title. */
body.xn-home2-active .xn-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
body.xn-home2-active .xn-section-title {
    display: inline-flex;
    align-items: stretch;
    background: none;
    padding: 0;
    border-radius: 0;
    clip-path: none;
    overflow: hidden;
}
body.xn-home2-active .xn-section-title::before {
    content: '';
    display: block;
    width: 4px;
    background: #42A418;
    flex-shrink: 0;
}
body.xn-home2-active .xn-section-title span.badge-inner {
    display: inline-block;
    transform: skewX(-8deg);
    background: #2740B2;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}
body.xn-home2-active .xn-section-title span.badge-text {
    display: inline-block;
    transform: skewX(8deg);
    color: #fff;
}

/* Section header (style 39 badge — reutilise .xn-section-header / .xn-section-title) */

/* 1 grande + 3 liste */
.xn-home2__feature-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--xn-gap);
}
@media (max-width: 768px) {
    .xn-home2__feature-grid { grid-template-columns: 1fr; }
}

.xn-home2__feature {
    background: var(--xn-color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--xn-shadow-sm);
    transition: box-shadow var(--xn-transition), transform var(--xn-transition);
}
.xn-home2__feature:hover { box-shadow: var(--xn-shadow-md); transform: translateY(-2px); }
.xn-home2__feature-media { position: relative; overflow: hidden; }
.xn-home2__feature-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform .4s;
    display: block;
}
.xn-home2__feature-placeholder { width: 100%; height: 280px; background: var(--xn-color-blue-light); }
.xn-home2__feature:hover .xn-home2__feature-img { transform: scale(1.03); }
.xn-home2__feature-badge {
    position: absolute; top: 14px; left: 14px;
    background: #2740B2;
    color: var(--xn-color-white);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 0;
    border-left: 3px solid #42A418;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.xn-home2__feature-body { padding: 20px; }
.xn-home2__feature-title {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 10px;
}
.xn-home2__feature-title a { color: var(--xn-color-dark); }
.xn-home2__feature-title a:hover { color: var(--xn-section-color, var(--xn-color-blue)); }
.xn-home2__feature-excerpt {
    font-size: 14px;
    color: var(--xn-color-gray);
    line-height: 1.55;
    margin: 0 0 10px;
}

.xn-home2__side-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--xn-space-sm);
}
/* Petits items pattern A/B — meme traitement visuel que la grande photo
   .xn-home2__feature (bg blanc + radius 8px + ombre + overflow hidden).
   Border-bottom retire (les items sont maintenant des mini-cartes
   distinctes separees par le gap parent). Padding horizontal 16px ajoute
   pour creer une gouttiere interne (etait 13px 0). Les regles :first/
   :last-child sont retirees car le border-bottom n existe plus. */
.xn-home2__side-item {
    display: flex;
    gap: 12px;
    padding: 13px 16px;
    align-items: flex-start;
    flex: 1;
    background: var(--xn-color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--xn-shadow-sm);
}
.xn-home2__side-item-thumb {
    flex-shrink: 0;
    width: 100px;
    height: 75px;
    overflow: hidden;
    border-radius: var(--xn-radius);
}
.xn-home2__side-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xn-home2__side-item-placeholder { width: 100%; height: 100%; background: var(--xn-color-blue-light); }
.xn-home2__side-item-body { flex: 1; min-width: 0; }
.xn-home2__side-item-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 4px;
    color: var(--xn-color-dark);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xn-home2__side-item:hover .xn-home2__side-item-title { color: var(--xn-color-blue); }
.xn-home2__side-excerpt {
    font-size: 11px;
    color: var(--color-text-secondary, #888);
    line-height: 1.4;
    margin: 2px 0 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* Sidebar home2 widgets — Plus lus, Newsletter */
.xn-home2__widget {
    background: var(--xn-color-white);
    border-radius: 8px;
    padding: var(--xn-space-md);
    box-shadow: var(--xn-shadow-sm);
}
.xn-home2__widget-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--xn-section-color, var(--xn-color-blue));
    border-bottom: 2px solid var(--xn-section-color, var(--xn-color-blue));
    padding-bottom: 8px;
    margin-bottom: 12px;
}
/* Override Option 3 (double trait) — texte bleu centre entre 2 lignes
   horizontales bleues qui flexent sur toute la largeur. Active
   uniquement en home2 ; les autres pages gardent le style global. */
body.xn-home2-active .xn-home2__widget-title {
    background: none;
    color: var(--xn-color-blue);
    padding: 6px 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    clip-path: none;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--color-border-tertiary, #e5e5e5);
    margin-bottom: 8px;
}
body.xn-home2-active .xn-home2__widget-title::before,
body.xn-home2-active .xn-home2__widget-title::after {
    content: '';
    display: inline-block;
    height: 2px;
    flex: 1;
    background: var(--xn-color-blue);
}
/* Le triangle vert .xn-widget-header-wrap::before (defini globalement)
   est inutile avec Option 3 — neutralise scope home2 uniquement. */
body.xn-home2-active .xn-widget-header-wrap::before {
    content: none;
}
.xn-home2__also-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--xn-color-border);
    align-items: flex-start;
}
.xn-home2__also-item:last-child { border-bottom: none; }
.xn-home2__also-item-num {
    flex-shrink: 0;
    width: 24px; height: 24px;
    background: var(--xn-color-blue-light);
    color: var(--xn-color-blue);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 800;
}
.xn-home2__also-item-title { font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--xn-color-dark); }
.xn-home2__also-item:hover .xn-home2__also-item-title { color: var(--xn-color-blue); }

.xn-home2__newsletter {
    padding: 18px;
    background: var(--xn-color-blue);
    border-radius: 8px;
    text-align: center;
    color: var(--xn-color-white);
}
.xn-home2__newsletter h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 6px;
}
.xn-home2__newsletter p { font-size: 12px; opacity: .85; margin: 0 0 12px; line-height: 1.4; }
.xn-home2__newsletter input {
    width: 100%;
    padding: 9px 11px;
    border: none;
    border-radius: var(--xn-radius);
    margin-bottom: 8px;
    font-size: 13px;
    font-family: inherit;
}
.xn-home2__newsletter button {
    width: 100%;
    padding: 9px;
    background: var(--xn-color-green);
    color: var(--xn-color-white);
    border: none;
    border-radius: var(--xn-radius);
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Slider hero home2 (3 slides cross-fade, taille = ancien hero) */
.xn-home2__slider {
    position: relative;
    height: 470px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: var(--xn-space-xl);
    box-shadow: var(--xn-shadow-md);
    background: var(--xn-color-dark);
}
.xn-home2__slider-track { position: relative; height: 100%; }
.xn-home2__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}
.xn-home2__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}
.xn-home2__slide-link { display: block; height: 100%; position: relative; color: inherit; }
.xn-home2__slide-img,
.xn-home2__slide-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xn-home2__slide-placeholder { width: 100%; height: 100%; background: var(--xn-color-blue-light); display: block; }
.xn-home2__slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 55%, transparent 90%);
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--xn-color-white);
}
.xn-home2__slide-badge {
    display: inline-block;
    background: var(--xn-color-red);
    color: var(--xn-color-white);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: var(--xn-radius);
    text-transform: uppercase;
    letter-spacing: .06em;
    width: fit-content;
    margin-bottom: 14px;
}
.xn-home2__slide-title {
    font-size: clamp(24px, 4vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 12px;
    max-width: 880px;
    color: var(--xn-color-white);
}
.xn-home2__slide-excerpt {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
    max-width: 740px;
    margin: 0 0 14px;
}
.xn-home2__slide-meta { font-size: 13px; color: rgba(255, 255, 255, .78); }

/* Slider home2 — refonte (scope body.xn-home2-active) :
   - coins carres (radius 0) sur container, slides et image
   - badge categorie en Badge C (plat + accent vert gauche)
   - meta style B : pastille date verte + pastille auteur transparente */
body.xn-home2-active .xn-home2__slider,
body.xn-home2-active .xn-home2__slide,
body.xn-home2-active .xn-home2__slide-img {
    border-radius: 0;
}
body.xn-home2-active .xn-home2__slide-badge {
    background: var(--xn-color-blue);
    color: #fff;
    border-radius: 0;
    border-left: 3px solid #42A418;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
}
body.xn-home2-active .xn-home2__slide-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: inherit;
    color: inherit;
}
body.xn-home2-active .xn-home2__slide-date {
    background: #42A418;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
}
body.xn-home2-active .xn-home2__slide-author {
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 10px;
    padding: 3px 10px;
}

/* Suppression generale des coins arrondis sur les composants home2.
   Liste etendue depuis la consigne pour couvrir tous les border-radius
   non nuls trouves dans le bloc .xn-home2__* du CSS. Exclus :
   .xn-home2__also-item-num et .xn-home2__slider-nav qui utilisent
   border-radius 50% pour rester circulaires (numero rond + bouton nav). */
body.xn-home2-active .xn-home2__widget,
body.xn-home2-active .xn-home2__sub-card,
body.xn-home2-active .xn-home2__live-item,
body.xn-home2-active .xn-home2__side-item,
body.xn-home2-active .xn-home2__side-item-thumb,
body.xn-home2-active .xn-home2__feature,
body.xn-home2-active .xn-home2__newsletter,
body.xn-home2-active .xn-home2__newsletter input,
body.xn-home2-active .xn-home2__newsletter button,
body.xn-home2-active .xn-home2__yt-item-thumb {
    border-radius: 0;
}

.xn-home2__slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    background: rgba(0, 0, 0, .55);
    color: var(--xn-color-white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--xn-transition);
}
.xn-home2__slider-nav:hover { background: var(--xn-color-blue); }
.xn-home2__slider-nav--prev { left: 12px; }
.xn-home2__slider-nav--next { right: 12px; }
.xn-home2__slider-dots {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    z-index: 5;
}
.xn-home2__slider-dot {
    width: 30px; height: 3px;
    border: none;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    padding: 0;
    transition: background var(--xn-transition);
}
.xn-home2__slider-dot.is-active { background: var(--xn-color-white); }

/* Patterns sections home2 (modifiers sur .xn-home2__feature-grid) */
/* Pattern B (mirror) : 1 grande droite + liste gauche. */
.xn-home2__feature-grid--mirror {
    grid-template-columns: 1fr 1.4fr;
}
.xn-home2__feature-grid--mirror > .xn-home2__feature  { order: 2; }
.xn-home2__feature-grid--mirror > .xn-home2__side-list { order: 1; }

/* Pattern C (grid3) : 3 cards uniformes via partial card-article. */
.xn-home2__feature-grid--grid3 {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) { .xn-home2__feature-grid--grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .xn-home2__feature-grid--grid3 { grid-template-columns: 1fr; } }

/* Widgets sidebar home2 — sub-card (hero compact), live-item (compact list), yt-item (Web TV facade) */
.xn-home2__sub-card {
    display: block;
    border-radius: var(--xn-radius);
    overflow: hidden;
    background: var(--xn-color-bg);
    margin-bottom: var(--xn-space-sm);
    transition: transform var(--xn-transition);
}
.xn-home2__sub-card:hover { transform: translateY(-1px); }
.xn-home2__sub-card-media { position: relative; overflow: hidden; }
.xn-home2__sub-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.xn-home2__sub-card-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--xn-color-blue-light);
}
.xn-home2__sub-card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--xn-section-color, var(--xn-color-blue));
    color: var(--xn-color-white);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: var(--xn-radius);
}
/* Badge C (plat + accent vert gauche) — aligne sur .xn-card__badge global.
   Active uniquement en home2 ; le sub-card-badge reste color via la regle
   de base hors home2. */
body.xn-home2-active .xn-home2__sub-card-badge {
    background: var(--xn-color-blue);
    color: #fff;
    border-radius: 0;
    border-left: 3px solid #42A418;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
}
.xn-home2__sub-card-body { padding: 10px 12px 12px; }
.xn-home2__sub-card-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--xn-color-dark);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xn-home2__sub-card:hover .xn-home2__sub-card-title { color: var(--xn-section-color, var(--xn-color-blue)); }
.xn-home2__sub-card-meta { font-size: 11px; color: var(--xn-color-gray-mid); }

.xn-home2__live-item {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--xn-color-border);
    align-items: flex-start;
}
.xn-home2__live-item:last-child { border-bottom: none; }
.xn-home2__live-item-time {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--xn-section-color, var(--xn-color-blue));
    width: 40px;
    font-variant-numeric: tabular-nums;
}
.xn-home2__live-item-title { font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--xn-color-dark); }
.xn-home2__live-item:hover .xn-home2__live-item-title { color: var(--xn-color-blue); }

.xn-home2__yt-item-thumb {
    position: relative;
    display: block;
    border-radius: var(--xn-radius);
    overflow: hidden;
}
.xn-home2__yt-item-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.xn-home2__yt-item-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    color: var(--xn-color-white);
    font-size: 36px;
    transition: background var(--xn-transition);
}
.xn-home2__yt-item-thumb:hover .xn-home2__yt-item-play { background: rgba(39, 64, 178, .5); }

@media (max-width: 768px) {
    .xn-home2__slider { height: 360px; }
    .xn-home2__slide-overlay { padding: 22px; }
    .xn-home2__feature-grid--mirror { grid-template-columns: 1fr; }
    .xn-home2__feature-grid--mirror > .xn-home2__feature,
    .xn-home2__feature-grid--mirror > .xn-home2__side-list { order: 0; }
}

/* ── HOME 3 — VISUAL FIRST (sidebar gauche uniquement) ────── */

.xn-home3__grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 36px;
    align-items: start;
}
/* Tablette : sidebar gauche reduite 240 -> 200px pour donner plus de
   largeur au main (Q3 session 9). Empilement complet sous 768px. */
@media (max-width: 1024px) {
    .xn-home3__grid { grid-template-columns: 200px 1fr; }
}
@media (max-width: 768px) {
    .xn-home3__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* En-tete de section : barre verticale + grand titre */
.xn-home3__section { margin-bottom: 56px; }
.xn-home3__section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--xn-space-lg);
}
.xn-home3__section-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--xn-color-dark);
    margin: 0;
}
.xn-home3__section-title::before {
    content: "";
    display: inline-block;
    width: 5px; height: 24px;
    background: var(--xn-section-color, var(--xn-color-blue));
    margin-right: 12px;
    vertical-align: -4px;
    border-radius: 2px;
}
.xn-home3__section-more {
    font-size: 13px;
    color: var(--xn-section-color, var(--xn-color-blue));
    font-weight: 600;
}
.xn-home3__section-more:hover { text-decoration: underline; }

/* Mosaique hero (1 grand gauche + 2 sub droite) */
.xn-home3__mosaic {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 56px;
}
.xn-home3__mosaic-main {
    position: relative;
    height: 560px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--xn-shadow-sm);
    transition: box-shadow var(--xn-transition);
    display: block;
}
.xn-home3__mosaic-main:hover { box-shadow: var(--xn-shadow-md); }
.xn-home3__mosaic-main img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s;
}
.xn-home3__mosaic-main:hover img { transform: scale(1.03); }
.xn-home3__mosaic-placeholder { width: 100%; height: 100%; background: var(--xn-color-blue-light); }
.xn-home3__mosaic-main-badge {
    display: inline-block;
    background: var(--xn-color-blue);
    color: var(--xn-color-white);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    width: fit-content;
    margin-bottom: 14px;
}
.xn-home3__mosaic-main-title {
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 10px;
    max-width: 600px;
    color: var(--xn-color-white);
}
.xn-home3__mosaic-main-meta { font-size: 13px; color: rgba(255, 255, 255, .85); }

.xn-home3__mosaic-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.xn-home3__mosaic-sub {
    position: relative;
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--xn-shadow-sm);
    transition: box-shadow var(--xn-transition);
    min-height: 0;
    display: block;
}
.xn-home3__mosaic-sub:hover { box-shadow: var(--xn-shadow-md); }
.xn-home3__mosaic-sub img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.xn-home3__mosaic-sub:hover img { transform: scale(1.05); }
.xn-home3__mosaic-sub-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 70%);
    padding: var(--xn-space-md);
    display: flex; flex-direction: column; justify-content: flex-end;
    color: var(--xn-color-white);
}
.xn-home3__mosaic-sub-badge {
    display: inline-block;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(8px);
    color: var(--xn-color-white);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    width: fit-content;
    margin-bottom: 8px;
}
.xn-home3__mosaic-sub-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--xn-color-white);
    margin: 0;
}

/* Grille cards modernes 3 colonnes (reutilise .xn-card du commit 31b83a5) */
.xn-home3__cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--xn-space-md);
}
@media (max-width: 1100px) { .xn-home3__cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .xn-home3__cards-grid { grid-template-columns: 1fr; } }

/* [SESSION 8] Sidebar home3 widgets supprimes (chore: prune) :
   .xn-home3__widget-label + .xn-home3__photo-*, .xn-home3__gallery-*,
   .xn-home3__follow-* — classes orphelines jamais utilisees dans les PHP. */

/* Tablette : mosaic-main reduit 560 -> 420px pour rester proportionne
   quand le main perd ~40px (sidebar 240 -> 200 a 1024px). Q3 session 9. */
@media (max-width: 1024px) {
    .xn-home3__mosaic-main { height: 420px; }
}
@media (max-width: 768px) {
    .xn-home3__mosaic { grid-template-columns: 1fr; }
    .xn-home3__mosaic-main { height: 380px; }
    .xn-home3__mosaic-sub { aspect-ratio: 16/9; min-height: 200px; }
}

/* ============================================================
   HOME 3 — Sidebar gauche widgets (calque visuel home2).
   Les classes .xn-home3__* miment les .xn-home2__* du bloc HOME 2
   plus haut. Couples par groupement de selecteur quand possible
   pour limiter la duplication.
   ============================================================ */

/* Container widget + newsletter (base) */
.xn-home3__widget {
    background: var(--xn-color-white);
    border-radius: 8px;
    padding: var(--xn-space-md);
    box-shadow: var(--xn-shadow-sm);
}
.xn-home3__widget-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--xn-section-color, var(--xn-color-blue));
    border-bottom: 2px solid var(--xn-section-color, var(--xn-color-blue));
    padding-bottom: 8px;
    margin-bottom: 12px;
}
.xn-home3__newsletter {
    padding: 18px;
    background: var(--xn-color-blue);
    border-radius: 8px;
    text-align: center;
    color: var(--xn-color-white);
}
.xn-home3__newsletter h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 6px;
}
.xn-home3__newsletter p { font-size: 12px; opacity: .85; margin: 0 0 12px; line-height: 1.4; }
.xn-home3__newsletter input {
    width: 100%;
    padding: 9px 11px;
    border: none;
    border-radius: var(--xn-radius);
    margin-bottom: 8px;
    font-size: 13px;
    font-family: inherit;
}
.xn-home3__newsletter button {
    width: 100%;
    padding: 9px;
    background: var(--xn-color-green);
    color: var(--xn-color-white);
    border: none;
    border-radius: var(--xn-radius);
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* À lire aussi — items numerotes */
.xn-home3__also-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--xn-color-border);
    align-items: flex-start;
}
.xn-home3__also-item:last-child { border-bottom: none; }
.xn-home3__also-item-num {
    flex-shrink: 0;
    width: 24px; height: 24px;
    background: var(--xn-color-blue-light);
    color: var(--xn-color-blue);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 800;
}
.xn-home3__also-item-title { font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--xn-color-dark); }
.xn-home3__also-item:hover .xn-home3__also-item-title { color: var(--xn-color-blue); }

/* Sub-card (hero compact Sport/Culture) */
.xn-home3__sub-card {
    display: block;
    border-radius: var(--xn-radius);
    overflow: hidden;
    background: var(--xn-color-bg);
    margin-bottom: var(--xn-space-sm);
    transition: transform var(--xn-transition);
}
.xn-home3__sub-card:hover { transform: translateY(-1px); }
.xn-home3__sub-card-media { position: relative; overflow: hidden; }
.xn-home3__sub-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.xn-home3__sub-card-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--xn-color-blue-light);
}
.xn-home3__sub-card-badge {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--xn-section-color, var(--xn-color-blue));
    color: var(--xn-color-white);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: var(--xn-radius);
}
.xn-home3__sub-card-body { padding: 10px 12px 12px; }
.xn-home3__sub-card-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--xn-color-dark);
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.xn-home3__sub-card:hover .xn-home3__sub-card-title { color: var(--xn-section-color, var(--xn-color-blue)); }
.xn-home3__sub-card-meta { font-size: 11px; color: var(--xn-color-gray-mid); }

/* Live-item compact (items 2-4 Sport/Culture) */
.xn-home3__live-item {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--xn-color-border);
    align-items: flex-start;
}
.xn-home3__live-item:last-child { border-bottom: none; }
.xn-home3__live-item-time {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--xn-section-color, var(--xn-color-blue));
    width: 40px;
    font-variant-numeric: tabular-nums;
}
.xn-home3__live-item-title { font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--xn-color-dark); }
.xn-home3__live-item:hover .xn-home3__live-item-title { color: var(--xn-color-blue); }

/* Web TV facade YouTube */
.xn-home3__yt-item-thumb {
    position: relative;
    display: block;
    border-radius: var(--xn-radius);
    overflow: hidden;
}
.xn-home3__yt-item-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.xn-home3__yt-item-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    color: var(--xn-color-white);
    font-size: 36px;
    transition: background var(--xn-transition);
}
.xn-home3__yt-item-thumb:hover .xn-home3__yt-item-play { background: rgba(39, 64, 178, .5); }

/* === Overrides scope body.xn-home3-active === */

/* Header double-trait (Option 3) — meme rendu que home2. */
body.xn-home3-active .xn-home3__widget-title {
    background: none;
    color: var(--xn-color-blue);
    padding: 6px 0 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    clip-path: none;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--color-border-tertiary, #e5e5e5);
    margin-bottom: 8px;
}
body.xn-home3-active .xn-home3__widget-title::before,
body.xn-home3-active .xn-home3__widget-title::after {
    content: '';
    display: inline-block;
    height: 2px;
    flex: 1;
    background: var(--xn-color-blue);
}
/* Neutralise le triangle vert global .xn-widget-header-wrap::before en home3. */
body.xn-home3-active .xn-widget-header-wrap::before {
    content: none;
}

/* Badge C (plat + accent vert gauche) sur sub-card-badge. */
body.xn-home3-active .xn-home3__sub-card-badge {
    background: var(--xn-color-blue);
    color: #fff;
    border-radius: 0;
    border-left: 3px solid #42A418;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
}

/* Suppression des coins arrondis sur les composants sidebar home3
   (memes regles que home2 — exclus also-item-num qui reste rond). */
body.xn-home3-active .xn-home3__widget,
body.xn-home3-active .xn-home3__sub-card,
body.xn-home3-active .xn-home3__live-item,
body.xn-home3-active .xn-home3__newsletter,
body.xn-home3-active .xn-home3__newsletter input,
body.xn-home3-active .xn-home3__newsletter button,
body.xn-home3-active .xn-home3__yt-item-thumb {
    border-radius: 0;
}

/* ============================================================
   REFONTE GLOBALE — Cards & sidebar widgets (toutes pages).
   Overrides xn.css : ces selecteurs ont source-order superieure
   (xn-layout.css charge apres xn.css), donc meme specificite =
   ces regles gagnent.
   ============================================================ */

/* ── Badge categorie (style C : plat + bord vert a gauche) ─── */
/* Cible .xn-card__badge et toutes les variantes existantes pour
   neutraliser leurs backgrounds custom — l aspect est uniforme. */
.xn-card__badge,
.xn-card__badge--sport,
.xn-card__badge--sports,
.xn-card__badge--culture,
.xn-card__badge--economie,
.xn-card__badge--eco,
.xn-card__badge--politique,
.xn-card__badge--international,
.xn-card__badge--societe {
    background: var(--xn-color-blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 0;
    border-left: 3px solid #42A418;
}

/* ── Meta date/auteur (style C : separateur vert + flex) ──── */
.xn-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #42A418;
    padding-top: 6px;
    font-size: 10px;
    margin-top: auto;
    color: var(--xn-color-gray, #888);
    gap: 0;
}
.xn-card__meta .xn-card__author {
    color: var(--xn-color-blue);
    font-weight: 500;
}
.xn-card__meta .xn-card__date {
    color: var(--xn-color-gray, #888);
}

/* ── Sidebar widget header (style D : coin haut-gauche coupe) ── */
.xn-widget-header-wrap {
    position: relative;
    display: block;
    overflow: visible;
    margin-bottom: var(--xn-space-md);
}
.xn-widget-header-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 0;
    border-color: #42A418 transparent transparent transparent;
}
.xn-widget__title {
    background: var(--xn-color-blue);
    color: #fff;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: 0;
    border-bottom: none;
    margin: 0;
    clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

/* ──────────────────────────────────────────────────────────
   Home3 — double background + hero adapte + pub sidebar bordure
   ────────────────────────────────────────────────────────── */

/* Double bg (calque mecanisme home2) */
body.xn-home3-active {
    background: #E8E8E8;
}
.xn-home3__content-bg {
    background: #F5F5F5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, .08);
}
/* Le .xn-footer global a margin-top: 64px (xn.css). Neutralise pour
   home3 afin que le plateau colle au footer. */
body.xn-home3-active .xn-footer { margin-top: 0; }

/* Hero mosaique — Badge C (plat + accent vert) sur main + sub.
   Override le glassmorphism du sub-badge et le radius 10px. */
body.xn-home3-active .xn-home3__mosaic-main-badge,
body.xn-home3-active .xn-home3__mosaic-sub-badge {
    background: var(--xn-color-blue);
    color: #fff;
    border-radius: 0;
    border-left: 3px solid #42A418;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    backdrop-filter: none;
}

/* Hero mosaique — coins carres sur les 2 types de cards. */
body.xn-home3-active .xn-home3__mosaic-main,
body.xn-home3-active .xn-home3__mosaic-sub {
    border-radius: 0;
}

/* Pubs sidebar (toutes homes) — boite alignee sur les widgets sidebar
   rubriques (.xn-home2__widget L1633, .xn-home1__widget L1096). Le
   box-shadow precedent etait invisible sur fond blanc home4 mais visible
   sur fond gris home1/2/3 (incoherent) : remplace par border 1px subtile.
   bg + padding 16px ajoutes pour egaliser la largeur visuelle interne :
   certaines pubs ont .xn-widget (xn.css:741) qui apporte deja ces props,
   d autres non (sidebar droite home4 L395/L515/L559). La regle generique
   uniformise toutes les pubs sidebar. box-shadow:none neutralise l ombre
   apportee par .xn-widget pour eviter border+shadow combines. */
.xn-sidebar--left .xn-ad,
.xn-sidebar--right .xn-ad {
    background: var(--xn-color-white);
    border: 1px solid var(--xn-color-border);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    width: 100%;
    padding: var(--xn-space-md);
}

/* Bordure 1px discrete sur les widgets sidebar home1/3/4 — harmonisation
   avec les pubs sidebar (regle generique ci-dessus). Scope par body class
   pour exclure home2 native (le selecteur .xn-home2__widget est partage
   avec home4 sidebar droite). Les 3 widgets a fond colore sont exclus :
   - .xn-home1__countdown (bleu gradient) : classe distincte, pas de match
   - .xn-home2__newsletter (bleu) : classe distincte, pas de match
   - .xn-home3__newsletter (bleu) : classe distincte, pas de match
   - .xn-home1__widget--populaire (vert, home4) : partage .xn-home1__widget
     + modifier, exclu via :not(). */
body.xn-home1-active .xn-home1__widget,
body.xn-home3-active .xn-home3__widget,
body.xn-home4-active .xn-home1__widget:not(.xn-home1__widget--populaire),
body.xn-home4-active .xn-home2__widget {
    border: 1px solid var(--xn-color-border);
}

/* Neutralise le box-shadow herite sur .xn-home2__widget (L1637) et
   .xn-home3__widget (L2314) sous home3/home4 — parite stricte avec les
   pubs sidebar (border seule, pas d ombre). .xn-home1__widget n a pas
   de box-shadow donc home1 et home4 sidebar gauche n ont rien a neutraliser. */
body.xn-home3-active .xn-home3__widget,
body.xn-home4-active .xn-home2__widget {
    box-shadow: none;
}

/* Cache les fleches prev/next sur tous les sliders — garde uniquement
   les dots indicators en bas. Couvre le partial generique .xn-slider et
   les sliders specifiques home1/home2 (home4 utilise xn-home2__slider).
   Home3 n a pas de slider (hero mosaique statique .xn-home3__mosaic). */
.xn-slider__btn,
.xn-home1__slider-nav,
.xn-home2__slider-nav {
    display: none;
}

/* Border 1px sur les containers slider — parite avec les widgets sidebar
   et les pubs (cf regles ci-dessus). Neutralise box-shadow sur
   .xn-home2__slider (seule classe avec shadow L1783 var(--xn-shadow-md)) ;
   .xn-slider et .xn-home1__slider n en ont pas mais inclus dans la regle
   pour parite explicite. Cette regle remplace l ancien bloc home4-only
   (supprime L1391-1395). */
.xn-slider,
.xn-home1__slider,
.xn-home2__slider {
    border: 1px solid var(--xn-color-border);
    box-shadow: none;
}

/* ──────────────────────────────────────────────────────────
   Home3 — corrections finales (hero content bas + marges
   plateau + alignement grille)
   ────────────────────────────────────────────────────────── */

/* Hero mosaique : badge + titre + meta empiles en bas, sur gradient
   sombre qui ne couvre que la partie inferieure de l image. Differe
   du precedent .xn-home3__mosaic-main-overlay (inset 0 plein) — ici
   bottom only. */
body.xn-home3-active .xn-home3__mosaic-main-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--xn-color-white);
}

/* Plateau contenu : marges externes 16px lateral + 12px top, override
   sur le margin: 0 auto du rule de base. */
body.xn-home3-active .xn-home3__content-bg {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 12px;
}

/* Alignement grille + reset top des colonnes (slider main + sidebar
   gauche). NOTE : le selecteur du brief etait .xn-home__grid ;
   correction sur .xn-home3__grid (la vraie classe de la grille home3). */
body.xn-home3-active .xn-home3__grid {
    align-items: start;
}
body.xn-home3-active .xn-sidebar--left,
body.xn-home3-active .xn-home__main {
    padding-top: 0;
    margin-top: 0;
}

/* Marge top slider/mosaique alignee sur le premier element de la
   sidebar gauche. Le brief reference .xn-home3__widget padding-top
   (16px) mais le premier element est en realite une pub .xn-ad--sidebar
   qui a margin: 8px 0 (xn.css L948). Pour aligner les tops visibles
   on prend la vraie valeur 8px. */
body.xn-home3-active .xn-home3__mosaic {
    margin-top: 8px;
}

/* Marge droite du contenu central : les cards de rubrique touchaient
   l arete droite du plateau (max-width 1200px avec padding 0). On
   ajoute 16px de padding-right pour creer la gouttiere a droite. */
body.xn-home3-active .xn-home__main {
    padding-right: 16px;
}

/* ──────────────────────────────────────────────────────────
   Home1 — badges section Combo A + sidebar headers Combo Y
   ────────────────────────────────────────────────────────── */

/* 1. Badges section — Combo A : fleche pointant a droite via clip-path
   pentagonal + accent vert gauche. Cible la vraie classe home1
   .xn-home1__section-title (le brief reference .xn-section-title qui
   n est pas utilisee par home1.php). */
body.xn-home1-active .xn-home1__section-title {
    background: var(--xn-color-blue);
    color: #fff;
    padding: 5px 24px 5px 8px;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    border-left: 4px solid #42A418;
    letter-spacing: .08em;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

/* 3. Sidebar headers — Combo Y : texte bleu marque sur fond transparent
   avec underline degrade vert (40%) -> bleu (60%) en pseudo ::after.
   .xn-home1__widget-dot (le bullet rouge live) reste visible dans le
   flex existant de l element. */
body.xn-home1-active .xn-home1__widget-title {
    color: var(--xn-color-blue);
    background: none;
    padding: 7px 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    position: relative;
    border: none;
    margin-bottom: 10px;
}
body.xn-home1-active .xn-home1__widget-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to right, #42A418 40%, var(--xn-color-blue) 40%);
}

/* 2. Badge article (.xn-card__badge) : deja Badge C global via REFONTE
   GLOBALE (xn-layout.css plus haut). Aucun selecteur .xn-home1-* ne
   l override — applique tel quel sur home1.
   4. Meta date/auteur (.xn-card__meta) : idem global, applique sur
   les sections home1 via le partial card-article (pattern C). */

/* ──────────────────────────────────────────────────────────
   Home1 — Badge C uniforme + coins carres sidebar/slider
   ────────────────────────────────────────────────────────── */

/* Badge C (plat + accent vert gauche) sur les 3 badges home1 :
   slider hero (.xn-home1__slide-badge), main feature des sections
   patterns A/B/D (.xn-home1__mix-main-badge), et sub-cards des
   mix-grid (.xn-home1__sub-card-badge). Le pseudo ::before pulsant
   du slide-badge reste actif — neutraliser via content: none si
   incoherent visuellement. */
body.xn-home1-active .xn-home1__slide-badge,
body.xn-home1-active .xn-home1__mix-main-badge,
body.xn-home1-active .xn-home1__sub-card-badge {
    background: var(--xn-color-blue);
    color: #fff;
    border-radius: 0;
    border-left: 3px solid #42A418;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
}

/* Coins carres : slider container + slides, sidebar widgets et
   composants sub-card / yt-thumb. Conserve la coherence avec
   home2/home3 (theme global zero radius sur containers). */
body.xn-home1-active .xn-home1__slider,
body.xn-home1-active .xn-home1__slide,
body.xn-home1-active .xn-home1__widget,
body.xn-home1-active .xn-home1__sub-card,
body.xn-home1-active .xn-home1__sub-card-media,
body.xn-home1-active .xn-home1__yt-item-thumb {
    border-radius: 0;
}

/* ──────────────────────────────────────────────────────────
   Home1 — pubs coins carres + countdown + background body
   ────────────────────────────────────────────────────────── */

/* Pubs sidebars (gauche et droite) — coins carres sur container et
   images internes. Le brief liste les 2 sidebars + leurs imgs. */
body.xn-home1-active .xn-sidebar--left .xn-ad,
body.xn-home1-active .xn-sidebar--right .xn-ad,
body.xn-home1-active .xn-sidebar--left .xn-ad img,
body.xn-home1-active .xn-sidebar--right .xn-ad img {
    border-radius: 0;
}

/* Widget Prochaines elections (countdown) — passe a coins carres
   (etait var(--xn-radius) = 4px). */
body.xn-home1-active .xn-home1__countdown {
    border-radius: 0;
}

/* Background body home1 — gris tres legerement casse pour distinguer
   du blanc pur. Active uniquement quand body.xn-home1-active. */
body.xn-home1-active {
    background: #FAFAFA;
}

/* ──────────────────────────────────────────────────────────
   Bouton player video — cercle contour blanc, transparent.
   Cible tous les selecteurs play du theme : 3 homes + facade YT
   globale utilisee par sidebar-left.php et autres partials.
   ────────────────────────────────────────────────────────── */
.xn-home1__yt-item-play,
.xn-home2__yt-item-play,
.xn-home3__yt-item-play,
.xn-yt-facade__btn {
    position: absolute;
    /* inset:auto AVANT top/left — sinon le shorthand reset les
       positions a auto et le bouton sort de la zone du thumb. */
    inset: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: transparent;
    color: transparent;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Triangle blanc via ::after (CSS-only, ne depend pas de la police).
   Le caractere &#9658; dans le HTML est rendu invisible par font-size 0
   et color transparent du parent. */
.xn-home1__yt-item-play::after,
.xn-home2__yt-item-play::after,
.xn-home3__yt-item-play::after,
.xn-yt-facade__btn::after {
    content: '';
    border-style: solid;
    border-width: 7px 0 7px 14px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
}
/* Icone interne yt-facade : neutralise — la fleche est rendue par
   le ::after du parent. */
.xn-yt-facade__icon { font-size: 0; color: transparent; }

/* ──────────────────────────────────────────────────────────
   Home1 slider meta — Style B (auteur vert + dot + date + pill vues)
   ────────────────────────────────────────────────────────── */
/* Slide-body home1 a un fond BLANC (.xn-home1__slide-body bg white),
   les couleurs rgba(255,255,255,*) du brief etaient invisibles. Adaptees
   pour fond blanc : dot/date en gris, views en pastille bleue. */
.xn-home1__slide-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.xn-home1__slide-author { color: #42A418; font-weight: 600; }
.xn-home1__slide-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--xn-color-gray-mid, #888);
}
.xn-home1__slide-date { color: var(--xn-color-gray-mid, #888); }
.xn-home1__slide-views {
    background: rgba(39, 64, 178, .08);
    color: var(--xn-color-blue);
    padding: 1px 7px;
    font-size: 9px;
    font-weight: 600;
}

/* ──────────────────────────────────────────────────────────
   .xn-card__views — pastille vues globale, emise apres date
   dans .xn-card__meta partout (card-article + mix-main + feature
   + mosaic-main). N apparait que si get_post_meta _xibar_views > 0.
   ────────────────────────────────────────────────────────── */
.xn-card__views {
    font-size: 9px;
    color: var(--xn-color-blue);
    font-weight: 600;
    background: rgba(39, 64, 178, .08);
    padding: 1px 6px;
}

/* ──────────────────────────────────────────────────────────
   .xn-card__comments — pastille verte, emise apres views.
   N apparait que si get_comments_number > 0.
   Note : <i class="ti ti-message-circle"> n est pas rendu tant
   que la police d icones Tabler n est pas chargee dans le theme.
   ────────────────────────────────────────────────────────── */
.xn-card__comments {
    font-size: 9px;
    color: var(--xn-color-green);
    font-weight: 600;
    background: rgba(66, 164, 24, .08);
    padding: 1px 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.xn-card__comments a,
.xn-card__comments-num {
    color: #42A418;
    text-decoration: none;
}
/* Label statique "commentaires" — masque globalement. Le chiffre seul
   reste lisible dans la pill (l icone est devenue sibling, donc pas
   detruite par count.js). */
.xn-card__comments-label { display: none; }

/* ──────────────────────────────────────────────────────────
   Home1 — alignement bas des 3 colonnes.
   .xn-home__grid est en align-items:stretch (cf bloc en debut de
   fichier). Les 2 sidebars sont deja display:flex flex-column.
   .xn-home__main passe en flex-column ici pour que margin-top:auto
   sur son :last-child epingle la pub leaderboard au bas du row.
   Le margin-bottom de xn-mb-lg du dernier element est neutralise
   pour que le bas du widget colle au bord du row.
   ────────────────────────────────────────────────────────── */
.xn-home__main {
    display: flex;
    flex-direction: column;
}
.xn-home__main > :last-child,
.xn-sidebar--left > :last-child,
.xn-sidebar--right > :last-child {
    margin-top: auto;
    margin-bottom: 0;
}

/* Alignement haut des colonnes home : annule le margin-top du premier
   enfant de chaque colonne (en particulier le 8px de .xn-ad--sidebar
   xn.css:1021 qui poussait la sidebar droite 8px sous le main). Pendant
   symetrique de la regle :last-child ci-dessus. Couvre home1/2/3/4. */
.xn-home__main > :first-child,
.xn-sidebar--left > :first-child,
.xn-sidebar--right > :first-child {
    margin-top: 0;
}

/* ──────────────────────────────────────────────────────────
   Uppercase cible — applique UNIQUEMENT sur titres de sections,
   sliders/hero et grande photo principale (pattern A/B des 3 homes).
   Le reste (cards, sidebar, single, footer) garde la casse naturelle.
   ────────────────────────────────────────────────────────── */
.xn-section-title,
.xn-home1__section-title,
.xn-home3__section-title,
.xn-home1__slide-title,
.xn-home2__slide-title,
.xn-home1__mix-main-title,
.xn-home2__feature-title,
.xn-home3__mosaic-main-title {
    text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────
   MENU UNIFIE — 3 barres empilees (session 7)
   ──────────────────────────────────────────────────────────
   Architecture appliquee a TOUTES les pages du site (homes,
   single, archives, recherche, etc.) — supersede les variantes
   Style A (Home1), Style E (Home2), Style H (Home3), Option 1
   (Home4) des sessions precedentes.

   - Barre 1 (blanc, 100px)   : logo + tagline + pub leaderboard + meta
   - Barre 2 (#2740B2, 44px)  : menu centre + recherche absolute droite
   - Barre 3 (#1e3499, 32px)  : ticker ACTU LIVE redecore

   La .xn-topbar globale est masquee (display:none) — date et reseaux
   remontent dans la Barre 1 via .xn-navbar__meta (header.php). La pub
   .xn-ad--banner du <main> (front-page.php:49) reste visible : header
   unifie session 7 conservant pub navbar + pub plateau. Le ticker
   existant est redecore en Barre 3.

   Ordre visuel : la navbar passe AVANT le ticker via flex order sur
   .xn-scope. Les enfants suivants (main, footer) gardent order:0 et
   s enchainent apres le ticker.

   Largeur menu : centree sur le .xn-container (1380px) via grid area
   "nav nav nav nav" — option G2 session 7. Le decalage visuel par
   rapport au plateau Home3 (1200px) est assume pour homogeneite.
   ────────────────────────────────────────────────────────── */

/* Topbar globale masquee — son contenu (date + reseaux) est remonte
   dans .xn-navbar__meta de la Barre 1. */
.xn-topbar { display: none; }

/* Pub header visible sur toutes les variantes homepage
   (header unifie depuis Session 7 — suppression masquage front-page.php) */
.xn-ad--banner:not(.xn-navbar__pub) { display: block; }

/* Reordonnance : navbar (Barres 1+2) en tete, ticker (Barre 3) ensuite,
   contenu principal et footer derriere (order:0 par defaut). */
.xn-scope {
    display: flex;
    flex-direction: column;
}
.xn-navbar { order: -2; }
.xn-ticker { order: -1; }

/* Navbar = 2 rangees empilees, backgrounds via gradient.
   - Rangee 1 (100px) : fond blanc, logo + tagline + pub leaderboard (728x90) + meta
   - Rangee 2 (44px)  : fond #2740B2, menu centre + recherche absolute droite */
.xn-navbar {
    background: linear-gradient(to bottom,
        var(--xn-color-white) 0,
        var(--xn-color-white) 100px,
        #2740B2 100px,
        #2740B2 144px
    );
    border-bottom: none;
    box-shadow: none;
}
.xn-navbar__inner {
    position: relative;
    display: grid;
    grid-template-areas:
        "logo tagline pub meta"
        "nav  nav     nav nav";
    grid-template-columns: auto auto 1fr auto;
    grid-template-rows: 100px 44px;
    gap: 0 var(--xn-space-md);
    padding: 0;
    align-items: center;
}

/* ─ Barre 1 — logo (max-height pour tenir dans 100px) ─ */
.xn-navbar__logo { grid-area: logo; }
.xn-navbar__logo img,
.xn-navbar__logo .custom-logo,
.xn-navbar__logo .custom-logo-link img {
    max-height: 80px;
    width: auto;
    display: block;
}

/* ─ Barre 1 — tagline (italic, gris) — rendue toujours dans header.php ─ */
.xn-navbar__tagline {
    grid-area: tagline;
    display: inline;
    font-style: italic;
    font-size: 14px;
    color: var(--xn-color-gray-mid);
    align-self: center;
    justify-self: start;
}

/* ─ Barre 1 — pub leaderboard centree dans sa colonne 1fr ─
   max-height 96px = 100px (Barre 1) - 4px de marge visuelle.
   Rendue conditionnellement dans header.php (xibar_should_show_ad ||
   WP_DEBUG) — placeholder dev disponible plus bas. */
.xn-navbar__pub {
    grid-area: pub;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    max-height: 96px;
    overflow: hidden;
    margin: 0;
    background: transparent;
    border: none;
    padding: 0;
}

/* Placeholder dev (WP_DEBUG) — visualise la zone leaderboard quand la pub
   senregie ne renvoie rien (cas localhost bloque). Dimensions 728x90 = cible
   IAB reelle, contenue dans la Barre 1 de 100px. N'est jamais rendu en prod
   (gating PHP dans header.php). */
.xn-navbar__pub-placeholder {
    width: 728px;
    max-width: 100%;
    height: 90px;
    background: #f0f0f0;
    color: #888;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #ccc;
}

/* ─ Barre 1 — meta (date + reseaux), groupe a droite ─
   padding-right: var(--xn-space-md) — restitue la gouttiere droite que
   .xn-navbar__inner { padding: 0 } (L2945) avait neutralisee en ecrasant
   le padding-inline 16px herite de .xn-container. Sans ce padding, les
   icones reseaux sociaux (justify-self:end) touchent le bord droit de
   la navbar — visible a partir de viewport <= 1380px sur tous les homes. */
.xn-navbar__meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: var(--xn-space-md);
    justify-self: end;
    padding-right: var(--xn-space-md);
}

/* Date — texte 11px gris + label "Aujourd'hui" ajoute via ::before
   (CSS pur, sans toucher au PHP). Hardcode FR acceptable (site
   francophone). Separateur visuel a droite avant les reseaux. */
.xn-navbar__date {
    font-size: 11px;
    color: #666;
    letter-spacing: .03em;
    text-transform: capitalize;
    border-right: 1px solid #e0e0e0;
    padding-right: var(--xn-space-md);
}
.xn-navbar__date::before {
    content: "Aujourd'hui";
    display: block;
    font-size: 9px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Reseaux sociaux — cercles colores 30x30 aux couleurs de marque
   (FB #1877F2, YT #FF0000, X #000). Les SVG existants (header.php,
   fill=currentColor) deviennent blancs via color:#fff sur le <a>. */
.xn-navbar__socials {
    display: flex;
    align-items: center;
    gap: 8px;
}
.xn-navbar__socials a {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--xn-transition);
}
.xn-navbar__socials a:hover {
    color: #fff;
    opacity: .85;
}
.xn-navbar__socials a[aria-label="Facebook"] { background: #1877F2; }
.xn-navbar__socials a[aria-label="YouTube"]  { background: #FF0000; }
.xn-navbar__socials a[aria-label="Twitter/X"] { background: #000; }
.xn-navbar__socials svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* ─ Barre 2 — menu centre, fond #2740B2 ─
   .xn-nav couvre les 4 colonnes (areas "nav nav nav nav") — sa largeur
   = .xn-navbar__inner = .xn-container 1380px. justify-content:center
   centre les items sur le container (option G2 session 7). */
.xn-nav {
    grid-area: nav;
    align-self: center;
    justify-content: center;
    gap: var(--xn-space-lg);
}
.xn-nav a {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--xn-color-white);
    background: transparent;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: 6px 0;
}
/* Hover et current heritent color:white + font-weight:700 de la regle base
   ci-dessus — seules les differences (background, border-bottom-color) sont
   declarees ici pour eviter la redondance. */
.xn-nav a:hover {
    background: transparent;
    border-bottom-color: var(--xn-color-green);
}
.xn-nav .current-menu-item > a,
.xn-nav .current-menu-ancestor > a {
    background: transparent;
    border-bottom-color: var(--xn-color-white);
}

/* -----------------------------------------------------------------------
   Dropdown sub-menu (Styles switcher + futurs sous-menus)
   ----------------------------------------------------------------------- */
.xn-nav .menu-item-has-children {
    position: relative;
}
.xn-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    flex-direction: column;
    min-width: 180px;
    background: #1e3499;
    list-style: none;
    padding: 4px 0;
    margin: 0;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    border-radius: 0 0 4px 4px;
}
.xn-nav .menu-item-has-children:hover > .sub-menu,
.xn-nav .menu-item-has-children:focus-within > .sub-menu {
    display: flex;
}
.xn-nav .sub-menu .menu-item a {
    display: block;
    padding: 10px 16px;
    color: var(--xn-color-white);
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
}
.xn-nav .sub-menu .menu-item a:hover {
    background: rgba(255,255,255,0.12);
}

/* ─ Barre 2 — bouton recherche, sorti du grid, epingle a droite ─
   top:100px = hauteur Barre 1, pour positionner le bouton en Barre 2
   (44px de hauteur). */
.xn-search-toggle {
    position: absolute;
    top: 100px;
    right: 0;
    width: 32px;
    height: 44px;
    background: transparent;
    border: none;
    color: var(--xn-color-white);
}
.xn-search-toggle:hover,
.xn-search-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, .12);
    color: var(--xn-color-white);
}

/* ─ Barre 3 — ticker redecore (fond #1e3499) ─ */
.xn-ticker {
    background: #1e3499;
    border-bottom: none;
    color: rgba(255, 255, 255, .88);
    padding: 6px 0;
}
.xn-ticker__label {
    background: var(--xn-color-green) !important;
    color: var(--xn-color-white);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-radius: 20px;
    padding: 3px 12px;
}
.xn-ticker__track a {
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
}
.xn-ticker__track a:hover {
    color: var(--xn-color-white);
}
/* Separateurs entre items du ticker — traits fins blancs 25% */
.xn-ticker__track a + a::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .25);
    vertical-align: middle;
    margin-right: var(--xn-space-md);
}

/* [SESSION 7] Anciens blocs supprimes :
   - HOME1 (Refonte session 7) : architecture 3 barres scope body.xn-home1-active
   - Option 1 Home4 : navbar blanche + trait souligne items
   Tous fusionnes dans le bloc "MENU UNIFIE — 3 barres empilees" plus haut
   dans ce fichier, applique a toutes les pages du site. */

/* ──────────────────────────────────────────────────────────
   BREAKPOINT TABLETTE (max-width: 1024px) — Home1 / Home4
   ──────────────────────────────────────────────────────────
   Bug observe session 9 : entre 769 et ~900px, la sidebar gauche de
   Home1/Home4 (220px sticky + main 1fr) et le contenu central se
   chevauchent visuellement — le main n est plus assez large pour ses
   patterns 2-col (A/B/D), et le ratio sidebar/main devient bancal.
   La sidebar droite est deja cachee depuis le breakpoint 1100px
   (regle L18-21 pour .xn-home__grid, regle L1318 pour .xn-home4__grid).

   Solution : a 1024px on passe en 1 col + on empile la sidebar gauche
   SOUS le main via order. Ce comportement reprend l esprit du mega-bloc
   burger mobile L3196 (< 768px) mais SANS y toucher — duplication
   volontaire pour preserver l invariant "ne pas modifier le bloc
   burger mobile" (session 9, valide claude.ai).

   En dessous de 768px, c est le mega-bloc burger mobile qui prend la
   main (override sidebar par specificite + ordre source). */
@media (max-width: 1024px) {
    body.xn-home1-active .xn-home__grid,
    body.xn-home4-active .xn-home4__grid {
        grid-template-columns: 1fr;
    }
    body.xn-home1-active .xn-home__main,
    body.xn-home4-active .xn-home__main {
        order: 1;
    }
    body.xn-home1-active .xn-sidebar--left,
    body.xn-home1-active .xn-sidebar--right,
    body.xn-home4-active .xn-sidebar--left,
    body.xn-home4-active .xn-sidebar--right {
        position: static;
        top: auto;
        align-self: stretch;
        order: 2;
        width: 100%;
    }
}

/* ──────────────────────────────────────────────────────────
   MENU BURGER MOBILE (< 768px) — option M1 (session 7)
   ──────────────────────────────────────────────────────────
   En mobile, le header desktop 3 barres (100+44+32 = 176px) est
   reduit a 1 seule barre 44px contenant logo gauche + burger droite.
   Le ticker (Barre 3) reste visible sous la barre 2. La Barre 1
   desktop (tagline + pub + meta) est integralement cachee.

   Le menu horizontal .xn-nav devient un panneau deroulant en
   position:absolute sous la barre, anime translateY(-8px → 0) +
   opacity (0 → 1) en 250ms cubic-bezier(0.4, 0, 0.2, 1).

   Le bouton .xn-nav-toggle contient 2 icones superposees (Tabler
   ti-menu-2 + ti-x) bascuilees via [aria-expanded] — pas de
   manipulation DOM, juste opacity CSS.

   JS : initNavToggle() dans xn.js — toggle .xn-nav-open sur
   .xn-navbar + aria-expanded sur le bouton. Fermeture sur click
   exterieur OU Escape.
   ────────────────────────────────────────────────────────── */

/* Bouton burger : cache par defaut (visible uniquement < 768px) */
.xn-nav-toggle {
    display: none;
}

/* Breakpoint mobile : 768px (cohorent avec les grids historiques
   .xn-home__grid, .xn-home3__grid, .xn-home4__grid — toutes en
   @media max-width:768px ligne 18-25). Inclus 768px precisement
   pour eviter un trou d 1px de bug visuel a cette largeur. */
@media (max-width: 768px) {
    /* === Fond blanc uniforme en mobile ===
       En desktop chaque home a son propre bg sur le body (E8E8E8 Home3
       L2614, etc.) — en mobile on impose un fond blanc sur .xn-scope
       (wrapper englobant) pour combler les "trous" visuels qui revelaient
       le bg du body entre les sections (ex. les 12px margin-top et 16px
       lateral du plateau .xn-home3__content-bg). Les enfants avec leur
       propre bg restent inchanges (navbar gradient, ticker #1e3499,
       plateau Home3 #F5F5F5). */
    .xn-scope {
        background: var(--xn-color-white);
    }

    /* === scroll-padding-top : offset les ancres et le scroll natif
       sous le header sticky mobile ===
       Header mobile total = 56 (Barre 1 blanche logo) + 44 (Barre 2 bleue
       burger) + 32 (ticker) = 132px. Sans cette regle, le scroll natif
       (vers une ancre, ou apres reload) place le top du contenu sous le
       header sticky qui le couvre → impression de "tronquage" du haut.
       scroll-padding-top decale le scroll de 132px pour que le contenu
       commence visiblement en dessous du header. */
    html {
        scroll-padding-top: 132px;
    }

    /* === Bord-a-bord du contenu en mobile (corrections 2+3 session 7) ===
       Inventaire desktop des marges laterales :
         Home1 = 16px (.xn-container padding-inline)
         Home2 = 36px (16px container + 20px plateau .xn-home2__content-bg)
         Home3 = 16px (16px container, plateau margin 0 override mobile)
         Home4 = 36px (16px container + 20px plateau .xn-home4__content-bg)
       Harmonisation a 0px en mobile : les cards et widgets ont deja leurs
       propres bordures/backgrounds, le bord-a-bord donne plus d espace
       sur les petits ecrans. */
    .xn-container {
        padding-inline: 0;
    }
    .xn-home2__content-bg,
    .xn-home4__content-bg {
        padding-left: 0;
        padding-right: 0;
    }
    /* Exclusion footer : preserver 16px de respiration laterale dans
       les wrappers footer (.xn-footer__grid et .xn-footer__bar). Le
       footer .xn-container recupere son padding-inline. */
    .xn-footer .xn-container {
        padding-inline: var(--xn-space-md);
    }

    /* === Correction 1 : Home4 plateau sans padding-top mobile ===
       Le .xn-home4__content-bg a padding: 20px 20px 0 (L1295) — le
       padding-top 20px poussait le slider .xn-home2__slider (premier
       enfant du main, height: 360px mobile) vers le bas, le faisant
       sortir visuellement du viewport en haut (combine au header
       sticky 132px). Neutralisation du padding-top mobile : le slider
       colle au haut du plateau. */
    body.xn-home4-active .xn-home4__content-bg {
        padding-top: 0;
    }

    /* [SESSION 8] Override mobile .xn-home4__main padding-left:0 supprimee
       — devenue redondante apres suppression de la regle desktop
       (commit 7ea2381+1, asymetrie corrigee). */

    /* === Barre 1 desktop cachee en mobile (M1) ===
       Tagline + pub leaderboard + meta (date + reseaux) tous masques. */
    .xn-navbar__tagline,
    .xn-navbar__pub,
    .xn-navbar__meta {
        display: none;
    }

    /* Navbar mobile : 2 rangees empilees (56px + 44px), backgrounds
       distincts via gradient. Override du gradient desktop (blanc 0-100,
       bleu 100-144).
       - Rangee 1 (56px) : fond blanc, logo seul centre
       - Rangee 2 (44px) : fond #2740B2, burger seul a droite
       Hauteur totale navbar mobile = 100px (56+44), + ticker 32px =
       132px de header mobile total. */
    .xn-navbar {
        background: linear-gradient(to bottom,
            var(--xn-color-white) 0,
            var(--xn-color-white) 56px,
            #2740B2 56px,
            #2740B2 100px
        );
    }
    .xn-navbar__inner {
        grid-template-areas:
            "logo   logo"
            "search toggle";
        grid-template-columns: 1fr auto;
        grid-template-rows: 56px 44px;
        padding: 0 var(--xn-space-md);
    }

    /* Logo : Barre 1 blanche, centre horizontalement (spanne les 2 colonnes
       via "logo logo"). */
    .xn-navbar__logo {
        grid-area: logo;
        justify-self: center;
        align-self: center;
    }
    .xn-navbar__logo img,
    .xn-navbar__logo .custom-logo,
    .xn-navbar__logo .custom-logo-link img {
        max-height: 44px;
    }

    /* Loupe recherche (session 9quater) : restituee en Barre 2 a gauche du
       burger. Override des regles desktop position:absolute (L3121) — en
       mobile la loupe est un grid item normal. Reset color en blanc pour
       contraste sur fond bleu Barre 2. Le dropdown .xn-search-bar reste
       positionne via top:100% relatif a .xn-navbar (sticky containing
       block) — config mobile existante xn.css L278-280. */
    .xn-search-toggle {
        display: inline-flex;
        grid-area: search;
        justify-self: start;
        align-self: center;
        position: relative;
        top: auto;
        right: auto;
        width: 36px;
        height: 36px;
        background: transparent;
        border: none;
        color: var(--xn-color-white);
        font-size: 20px;
        margin-left: var(--xn-space-sm);
    }
    .xn-search-toggle:hover,
    .xn-search-toggle[aria-expanded="true"] {
        background: rgba(255, 255, 255, .12);
        color: var(--xn-color-white);
    }

    /* Bouton burger : visible, Barre 2 bleue, droite.
       Les 2 icones (ti-menu-2 + ti-x) sont superposees en absolute
       a l interieur du bouton, basculees via [aria-expanded] sur
       le bouton. */
    .xn-nav-toggle {
        grid-area: toggle;
        justify-self: end;
        align-self: center;
        position: relative;
        width: 36px;
        height: 36px;
        padding: 0;
        background: transparent;
        border: none;
        color: var(--xn-color-white);
        cursor: pointer;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .xn-nav-toggle__icon--open,
    .xn-nav-toggle__icon--close {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        transition: opacity .2s;
    }
    .xn-nav-toggle__icon--close { opacity: 0; }
    .xn-nav-toggle[aria-expanded="true"] .xn-nav-toggle__icon--open  { opacity: 0; }
    .xn-nav-toggle[aria-expanded="true"] .xn-nav-toggle__icon--close { opacity: 1; }

    /* Menu deroulant : position absolute sous la navbar (100px =
       56 logo + 44 burger), pleine largeur, anime translateY + opacity.
       top:100% est calcule par rapport au parent .xn-navbar — fonctionne
       quelle que soit la hauteur. Ferme par defaut, ouvert via
       .xn-navbar.xn-nav-open (toggle JS). */
    .xn-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        background: #2740B2;
        padding: 0;
        margin: 0;
        gap: 0;
        max-width: none;
        width: auto;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity   .25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 99;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
    }
    .xn-navbar.xn-nav-open .xn-nav {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Items du menu mobile : pleine largeur, padding generaux,
       border-bottom entre items (sauf le dernier). */
    .xn-nav li {
        list-style: none;
    }
    .xn-nav a {
        display: block;
        padding: 14px var(--xn-space-md);
        text-align: left;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--xn-color-white);
        background: transparent;
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    .xn-nav li:last-child a {
        border-bottom: none;
    }
    .xn-nav a:hover,
    .xn-nav .current-menu-item > a,
    .xn-nav .current-menu-ancestor > a {
        background: rgba(255, 255, 255, .08);
        border-bottom-color: rgba(255, 255, 255, .12);
    }

    /* === Sidebars mobile (option B session 7) ===
       En desktop .xn-sidebar--left (L389) ET .xn-sidebar--right (L340)
       ont toutes deux position:sticky + top:80px, ce qui en mobile
       causait un bug visuel (sidebar figee + contenu superpose). Les
       2 regles "display:none" attendues (L24 pour --left dans @media 768px,
       L20 pour --right dans @media 1100px) sont silencieusement ecrasees
       par les regles sticky plus tardives (specificite egale).

       Override ici pour neutraliser le sticky et repositionner les 2
       sidebars SOUS le contenu central via order:2.

       Cible toutes les homes :
       - Home1 .xn-home__grid : sidebar gauche + droite empilees sous le main
       - Home2 .xn-home2__grid : sidebar droite seule sous le main
       - Home3 .xn-home3__grid : sidebar gauche seule sous le main
       - Home4 .xn-home4__grid : sidebar gauche + droite empilees sous le main

       La propriete order fonctionne sur grid items meme en mode 1 colonne
       (force par les @media max-width:768px des 3 grids). Cette regle,
       situee apres L340/L389 dans le source order, ecrase le sticky par
       specificite egale + ordre. */
    .xn-sidebar--left,
    .xn-sidebar--right {
        position: static;
        top: auto;
        align-self: stretch;
        order: 2;
        width: 100%;
    }
    .xn-home__main {
        order: 1;
    }

    /* === Home3 — neutralisation du padding-right desktop ===
       La regle L2751 body.xn-home3-active .xn-home__main { padding-right:
       16px } cree une gouttiere interne pour aligner le main avec le
       bord droit du plateau en desktop (col 2 du grid 240px+1fr). En
       mobile (1 colonne), le main occupe toute la largeur du plateau —
       ce padding-right asymetrique decalait visuellement le contenu
       vers la gauche. */
    body.xn-home3-active .xn-home__main {
        padding-right: 0;
    }

    /* === Home3 — plateau pleine largeur mobile ===
       Les regles L2722-2724 (margin-left/right: 16px sur le plateau)
       cumulees au .xn-container { padding-inline: 16px } creaient 32px
       de marge laterale en mobile, donnant la perception "contenu trop
       etroit centre dans un espace large". Neutralisation en mobile pour
       que le plateau prenne toute la largeur disponible (= viewport -
       16px padding container chaque cote). */
    body.xn-home3-active .xn-home3__content-bg {
        margin-left: 0;
        margin-right: 0;
    }

    /* === Home4 — slider object-position center top mobile ===
       Les images du slider .xn-home2__slider (utilise par Home4) ont
       object-fit:cover sans object-position explicite (L1771-1772) →
       defaut "center center". Sur smartphone (slider 360px de haut), le
       sujet important en haut de l image (visages, titres) est rogne par
       le centrage vertical. object-position:center top aligne l image
       par le haut — le bas est rogne a la place, le sujet reste visible. */
    body.xn-home4-active .xn-home2__slide-img,
    body.xn-home4-active .xn-home2__slide-link img {
        object-position: center top;
    }

    /* === Footer centre en mobile (session 7) ===
       Sur toutes les pages (homes, single, archives, etc.), centrer tous
       les elements du footer pour une lecture mobile aeree. Les colonnes
       brand/nav/contact passent en text-align:center, les wrappers flex
       (logo, socials, menu) en justify-content/align-items center.
       .xn-footer__bar a deja text-align:center par defaut (xn.css:823). */
    .xn-footer__col {
        text-align: center;
    }
    .xn-footer__logo {
        justify-content: center;
    }
    .xn-footer__socials {
        justify-content: center;
    }
    .xn-footer__menu {
        align-items: center;
    }
}

/* -----------------------------------------------------------------------
   Dropdown sub-menu — variante mobile
   Ajoute APRES le mega-bloc burger mobile (ne modifie pas le bloc
   existant — duplication volontaire, cf invariant session 9).
   Sub-menu en flow naturel, indente, pas de toggle JS.
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
    .xn-nav .sub-menu {
        position: static;
        display: flex;
        flex-direction: column;
        background: rgba(0,0,0,0.15);
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }
    .xn-nav .sub-menu .menu-item a {
        padding: 8px 16px 8px 28px;
        font-size: 0.85rem;
        border-top: 1px solid rgba(255,255,255,0.08);
    }
}