/* ============================================================
   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; }
    /* Lot L5 : en une colonne, une colonne ne s'elargit pas au contenu le
       plus large (code de largeur fixe). Les publicites sont aussi confinees
       par contain sur .xn-ad (modules/xn-ads.css, lot L10) ; cette regle
       reste pour tout autre contenu de largeur fixe (widget HTML). */
    .xn-home__grid > *,
    .xn-home2__grid > *,
    .xn-home3__grid > *,
    .xn-home4__grid > * { min-width: 0; }
    /* .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). */
}

/* ── 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-primary));
    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 var(--xn-color-accent);
    margin: 0;
}
.xn-section-more {
    margin-left: auto;
    font-size: 12px;
    color: var(--xn-section-color, var(--xn-color-primary));
    font-weight: var(--xn-font-weight-medium);
    white-space: nowrap;
}
.xn-section-more:hover { text-decoration: underline; }

/* 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 .xn-card__body { padding: 0; }
.xn-card--list .xn-card__title { font-size: 13px; line-height: 1.35; }

/* ── 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__body {
    flex: 1;
    min-width: 0;
}
.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;
}

/* Videos (Web TV) : assets/css/modules/xn-webtv.css, enfilée seulement si
   le module est actif (lot L10). */

/* ── 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-primary));
}
.xn-home1__section-title {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--xn-section-color, var(--xn-color-primary));
    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-primary)); }

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

/* Slider hero — split image gauche / corps droite */
.xn-home1__slider {
    position: relative;
    /* display:grid pour que le track (seul enfant dans le flux — nav et
       dots sont en position:absolute) s etire a la hauteur du slider.
       Sans cela, quand le plancher min-height depasse la hauteur du
       contenu (site demo, titres courts), le track restait a sa taille
       et le fond sombre du slider apparaissait en bande sous le slide. */
    display: grid;
    /* Plancher de securite uniquement : la hauteur reelle vient du
       contenu depuis le passage en grid stack (voir slider-track).
       380px evite qu un slide tres court n aplatisse l image. */
    min-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 { min-height: 320px; }
}
/* Empilement des slides en grille (et non plus en position:absolute).
   Avec l absolu, les slides ne contribuaient pas a la hauteur du slider :
   seul min-height la fixait, d ou un vide important sous les titres
   courts (mesure S24 : 196px sur le site demo, 191px sur dakartv).
   Ici tous les slides occupent la meme cellule (grid-area: 1/1) et
   restent dans le flux : la hauteur du slider suit le slide le plus
   haut, automatiquement et par site. Aucun titre ne peut etre coupe.
   Le fondu reste pilote par opacity — le JS inline de home1.php ne
   fait que basculer la classe .is-active, il ne touche ni position
   ni inset. */
.xn-home1__slider-track { position: relative; display: grid; }
.xn-home1__slide {
    grid-area: 1 / 1;
    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; }
/* L image est sortie du flux : sans cela, height:100% sur une rangee
   devenue auto se resoudrait en hauteur naturelle et l image imposerait
   de nouveau la hauteur du slider. Idem placeholder. */
.xn-home1__slide-media { position: relative; overflow: hidden; }
.xn-home1__slide-media img,
.xn-home1__slide-media-placeholder {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.xn-home1__slide-media-placeholder { background: var(--xn-color-blue-light); }
.xn-home1__slide-body {
    background: var(--xn-color-white);
    padding: 24px 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(16px, 2vw, 22px);
    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); }

/* 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-primary));
    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-primary)); }
.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-primary)); }
.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-primary));
    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 */
.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-primary));
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--xn-section-color, var(--xn-color-primary));
    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-primary));
    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__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: var(--xn-color-cat-economie); }
.xn-home1__feed-item-tag--culture       { background: var(--xn-color-cat-culture); }
.xn-home1__feed-item-tag--international { background: var(--xn-color-cat-international); }
.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); }

@media (max-width: 768px) {
    .xn-home1__slide { grid-template-columns: 1fr; grid-template-rows: 200px 1fr; }
    /* 480px laissait une bande de fond sombre de 74px sous le slide
       depuis le passage en grid stack (le track ne fait plus que sa
       hauteur de contenu). 320px = plancher, comme en tablette. */
    .xn-home1__slider { height: auto; min-height: 320px; }
    .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, var(--xn-color-bg));
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, .08);
}
/* Respiration 12px entre la barre de navigation (navbar + ticker) et le
   plateau de contenu sur home2 et home4. Sans cette regle, le plateau
   collait a la barre, donnant la perception d un plateau "stuck en haut".
   Aligne sur le comportement home3 (override L2665-2668). */
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 entierement
   rendue dans la Barre 1 de la navbar unifiee (.xn-navbar__pub). Banner
   doublon front-page supprime en 0.6.1. */

/* .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);
}


/* 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: var(--xn-color-accent);
    flex-shrink: 0;
}
body.xn-home2-active .xn-section-title span.badge-inner {
    display: inline-block;
    transform: skewX(-8deg);
    background: var(--xn-section-color, var(--xn-color-primary));
    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: var(--xn-color-white);
}

/* 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: var(--xn-color-primary);
    color: var(--xn-color-white);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 0;
    border-left: 3px solid var(--xn-color-accent);
    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-primary)); }
.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, var(--xn-color-gray-mid));
    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 */
.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-primary));
    border-bottom: 2px solid var(--xn-section-color, var(--xn-color-primary));
    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-primary);
    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, var(--xn-color-border));
    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-primary);
}
/* 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); }

/* 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-primary);
    color: var(--xn-color-white);
    border-radius: 0;
    border-left: 3px solid var(--xn-color-accent);
    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: var(--xn-color-accent-strong);
    color: var(--xn-color-white);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
}
body.xn-home2-active .xn-home2__slide-author {
    background: rgba(255, 255, 255, .15);
    color: var(--xn-color-white);
    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. Exclu :
   .xn-home2__also-item-num, qui utilise border-radius 50% pour rester
   circulaire (numero rond). */
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 {
    border-radius: 0;
}

.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-primary));
    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-primary);
    color: var(--xn-color-white);
    border-radius: 0;
    border-left: 3px solid var(--xn-color-accent);
    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-primary)); }
.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-primary));
    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); }

@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-primary));
    margin-right: 12px;
    vertical-align: -4px;
    border-radius: 2px;
}
.xn-home3__section-more {
    font-size: 13px;
    color: var(--xn-section-color, var(--xn-color-primary));
    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 (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-primary));
    border-bottom: 2px solid var(--xn-section-color, var(--xn-color-primary));
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* À 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-primary));
    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-primary)); }
.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-primary));
    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); }

/* === 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-primary);
    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, var(--xn-color-border));
    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-primary);
}
/* 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-primary);
    color: var(--xn-color-white);
    border-radius: 0;
    border-left: 3px solid var(--xn-color-accent);
    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 {
    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-accent-strong);
    color: var(--xn-color-white);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 0;
    border-left: 3px solid var(--xn-color-green-dark);
}

/* ── Meta date/auteur (style C : separateur vert + flex) ──── */
.xn-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid var(--xn-color-accent);
    padding-top: 6px;
    font-size: 10px;
    margin-top: auto;
    color: var(--xn-color-gray, var(--xn-color-gray-mid));
    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, var(--xn-color-gray-mid));
}

/* ── 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: var(--xn-color-accent) transparent transparent transparent;
}
/* Lot L12 (P3) : les titres des widgets de blocs du cœur dans les zones du
   thème prennent le même bandeau. */
.xn-widget__title,
.xn-scope .xn-widget-area .widget_block .wp-block-heading {
    background: var(--xn-color-primary);
    color: var(--xn-color-white);
    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: var(--xn-color-bg-grey);
}
.xn-home3__content-bg {
    background: var(--xn-color-bg);
    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-primary);
    color: var(--xn-color-white);
    border-radius: 0;
    border-left: 3px solid var(--xn-color-accent);
    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;
}

/* Bordure 1px discrete sur les widgets sidebar home1/3/4 — harmonisation
   avec les pubs sidebar (modules/xn-ads.css). Scope par body class
   pour exclure home2 native (le selecteur .xn-home2__widget est partage
   avec home4 sidebar droite). Le widget a fond colore est exclu :
   - .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;
}

/* 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-home1__slider n en a pas mais inclus dans la regle pour parite
   explicite. Cette regle remplace l ancien bloc home4-only
   (supprime L1391-1395). */
.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);
}

/* Lot L13 (D13-5) : metadonnees (auteur, date, vues) de l image a la une
   de l accueil 3, lisibles sur le voile : texte blanc, pastille des vues
   bleue pleine. Contraste d au moins 4,5:1 dans le pire cas (voile sur
   fond blanc pur), bureau et mobile : tests/a11y/contraste.mjs. */
.xn-scope .xn-home3__mosaic-main-meta :is(.xn-card__author, .xn-card__date, .xn-card__views) {
    color: var(--xn-color-white);
}
.xn-scope .xn-home3__mosaic-main-meta .xn-card__views {
    background: var(--xn-color-blue);
}

/* Lot L13 (D13-12) : voiles renforces sous les textes poses sur une image
   des accueils 2, 3 et 4, sans changement de mise en page. Seuils au pire
   cas (voile sur fond blanc pur), 1440 et 390 px : 4,5:1 pour le texte
   courant, 3:1 pour le grand texte (tests/a11y/contraste.mjs).
   - Image a la une de la mosaique (accueil 3) : le titre commence a
     environ 64 px du haut du bloc de contenu (marge et badge) ; le voile
     atteint le palier moyen des 48 px.
   - Sous-mosaique : voile fort prolonge jusqu a 80 % de la hauteur.
   - Slider des accueils 2 et 4 : le titre peut monter a 88 % de la hauteur
     de la diapositive en mobile ; le voile garde le palier leger jusqu a
     90 %. */
body.xn-home3-active .xn-scope .xn-home3__mosaic-main-content {
    background: linear-gradient(to bottom, transparent 0, var(--xn-color-overlay-mid) 48px, var(--xn-color-overlay-strong) 100%);
}
.xn-scope .xn-home3__mosaic-sub-overlay {
    background: linear-gradient(to top, var(--xn-color-overlay-strong) 0%, transparent 80%);
}
.xn-scope .xn-home2__slide-overlay {
    background: linear-gradient(to top, var(--xn-color-overlay-strong) 0%, var(--xn-color-overlay-mid) 60%, var(--xn-color-overlay-soft) 90%, transparent 100%);
}

/* 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-section-color, var(--xn-color-primary));
    color: var(--xn-color-white);
    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 var(--xn-color-accent);
    letter-spacing: .08em;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

/* 2. 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-primary);
    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, var(--xn-color-accent) 40%, var(--xn-color-primary) 40%);
}

/* 3. 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-primary);
    color: var(--xn-color-white);
    border-radius: 0;
    border-left: 3px solid var(--xn-color-accent);
    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 : modules/xn-webtv.css). 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 {
    border-radius: 0;
}

/* ──────────────────────────────────────────────────────────
   Home1 — background body (pubs coins carres : modules/xn-ads.css)
   ────────────────────────────────────────────────────────── */

/* Background body home1 — gris tres legerement casse pour distinguer
   du blanc pur. Active uniquement quand body.xn-home1-active. */
body.xn-home1-active {
    background: var(--xn-color-bg-light);
}


/* ──────────────────────────────────────────────────────────
   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: var(--xn-color-green); font-weight: 600; }
.xn-home1__slide-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--xn-color-gray-mid);
}
.xn-home1__slide-date { color: var(--xn-color-gray-mid); }
.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 est rendue que si les commentaires sont actives et que l extension
   Disqus est active et configuree (lot L9, D9-6) ; le nombre est ecrit
   par count.js de l extension. Icone SVG message-circle (xibar_icon(),
   lot L10).
   ────────────────────────────────────────────────────────── */
.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: var(--xn-color-green);
    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-sidebar--left > :last-child,
.xn-sidebar--right > :last-child {
    margin-top: auto;
    margin-bottom: 0;
}
/* Lot L12 (D10-20) : la colonne principale n'epingle plus son dernier
   element au bas du row. Remplie, elle n'a pas d'espace libre et la regle
   etait sans effet ; peu remplie, elle creait un grand vide avant la
   publicite. Le dernier element suit les contenus avec l'espacement
   normal entre blocs, quelle que soit la hauteur des barres laterales.
   margin-top a 0 : valeur que prenait auto dans une colonne remplie (la
   marge haute propre de la publicite ne s'ajoute pas). */
.xn-home__main > :last-child {
    margin-top: 0;
    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 barre haute globale est retiree (lot L10) — date et reseaux
   sont dans la Barre 1 via .xn-navbar__meta (header.php). La pub
   leaderboard est rendue uniquement dans .xn-navbar__pub (Barre 1) ;
   ancien banner doublon de front-page supprime en 0.6.1. 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.
   ────────────────────────────────────────────────────────── */

/* 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;
}
/* Lot L10 (D4-19) : dans ce flex en colonne, la marge automatique de
   .xn-container annule l'etirement ; main prenait la largeur de son
   contenu. Accueils 2 et 4 sans rubrique : colonne principale reduite au
   slider (2 px au bureau), et largeur mobile dependante des titres.
   L'accueil 1 n'est pas vise ; l'accueil 3 a sa regle ci-dessous. */
body.xn-home2-active .xn-scope > main.xn-home { width: 100%; }
/* Lot L10 (D10-18, extension de D4-19 a l'accueil 3) : mosaique sans
   image, main se reduisait aux espaces reserves (colonne de 32 px). Sans
   plafond, le plateau a marges fixes se decalerait : main est plafonne a
   sa largeur avec contenu, 1264 px, somme de deux sources a tenir a jour
   ensemble :
   - plateau de 1200 px et ses marges laterales de 16 px, codees en dur
     (.xn-home3__content-bg et body.xn-home3-active .xn-home3__content-bg) ;
   - padding-inline de .xn-container, var(--xn-space-md) (xn.css).
   Un theme enfant qui change le plateau doit changer aussi ce plafond. En
   mobile, marges et padding sont nuls : main prend la largeur de l'ecran. */
body.xn-home3-active .xn-scope > main.xn-home {
    width: 100%;
    max-width: calc(1200px + 2 * 16px + 2 * var(--xn-space-md));
}
/* Lot L10 (D10-16, extension de D4-19) : meme effet sur les pages au
   contenu principal presque vide (recherche sans resultat, archive de
   categorie, d'etiquette ou d'auteur sans article, page vide). Classes
   natives du body ; les accueils par modele de page (body.page) sont
   exclus par .xn-home, la 404 n'a pas de main.xn-container. */
body.search-no-results .xn-scope > main.xn-layout,
body.archive .xn-scope > main.xn-layout,
body.page .xn-scope > main.xn-container:not(.xn-home) { width: 100%; }
.xn-navbar { order: -2; }
/* .xn-ticker { order: -1 } : modules/xn-ticker.css (lot L10). */

/* 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-header) 0,
        var(--xn-color-header) 100px,
        var(--xn-color-nav) 100px,
        var(--xn-color-nav) 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 ─
   Hauteur pilotee par --xn-logo-height (Customizer, injectee en :root
   via wp_head), fallback 44px. L ancien max-height: 80px etait inerte :
   la regle jumelle de xn.css posait height: 44px, et une hauteur fixe
   l emporte sur un plafond superieur. La variable pilote desormais les
   deux jeux de regles. Barre 1 = 100px : au-dela de ~100 le logo
   deborderait, d ou le max 100 du reglage Customizer. */
/* padding-left: var(--xn-space-md) (lot L14, D14-15) — gouttiere gauche
   symetrique de celle de .xn-navbar__meta : le logo, ou le titre du site
   sans logo, touchait le bord gauche sous 1380px. Remis a 0 en mobile, ou
   .xn-navbar__inner porte la gouttiere. */
.xn-navbar__logo { grid-area: logo; padding-left: var(--xn-space-md); }
.xn-navbar__logo img,
.xn-navbar__logo .custom-logo,
.xn-navbar__logo .custom-logo-link img {
    height: var(--xn-logo-height, 44px);
    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 (.xn-navbar__pub) : modules/xn-ads.css ─ */

/* ─ 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.
   Lot L12 (P7) : casse native de WordPress, sans text-transform. */
.xn-navbar__date {
    font-size: 11px;
    color: var(--xn-color-muted);
    letter-spacing: .03em;
    border-right: 1px solid var(--xn-color-border-light);
    padding-right: var(--xn-space-md);
}
.xn-navbar__date::before {
    content: "Aujourd'hui";
    display: block;
    font-size: 9px;
    color: var(--xn-color-gray-pale);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Menu « Réseaux sociaux » de la Barre 1 (lot L9, base dans xn.css) —
   cercles 30x30 aux couleurs de marque quand un jeton existe, bleu du
   theme sinon ; icone blanche (currentColor). */
.xn-scope .xn-social--header .xn-social__list { gap: 8px; }
.xn-scope .xn-social--header .xn-social__link {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--xn-color-white);
    background: var(--xn-color-blue);
    transition: opacity var(--xn-transition);
}
.xn-scope .xn-social--header .xn-social__link:hover { opacity: .85; }
.xn-scope .xn-social--header .xn-social__link--facebook { background: var(--xn-color-facebook); }
.xn-scope .xn-social--header .xn-social__link--youtube  { background: var(--xn-color-youtube); }
.xn-scope .xn-social--header .xn-social__link--x        { background: var(--xn-color-x); }
.xn-scope .xn-social--header .xn-social__link--whatsapp { background: var(--xn-color-whatsapp); }
.xn-scope .xn-social--header .xn-icon {
    width: 14px;
    height: 14px;
}

/* ─ 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;
    /* nowrap : empeche le texte des items multi-mots (People et Buzz,
       Sport et culture) de casser sur 2 lignes quand flex-shrink comprime
       la Barre 2. Sans ca, l item devient 56px de haut dans une rangee
       grid figee a 44px et deborde sous le header (session tablette). */
    white-space: nowrap;
}
/* 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: var(--xn-color-submenu);
    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 : modules/xn-ticker.css (lot L10) ─ */

/* [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;
}

/* ─ Compression tablette (769-1024px) ─
   Sur cette plage le layout desktop reste actif (le burger ne prend la
   main qu a <=768px) mais la Barre 2 n a plus la largeur naturelle
   (~933px) pour garder les 9 items sur une ligne. On reduit gap et
   font-size pour ramener le seuil sous 769px, en complement du
   white-space:nowrap sur .xn-nav a. Objectif : menu sur une seule ligne,
   hauteur ~35px, jamais 56px. */
@media (max-width: 1024px) and (min-width: 769px) {
    .xn-nav { gap: 10px; }
    .xn-nav a { font-size: 12px; letter-spacing: 0; }
}

/* 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);
    }
    /* Lot L12 (P4) : les pages n'ont pas de carte qui borde leur texte,
       contrairement aux articles. Elles gardent la marge laterale des
       articles en mobile, quelle que soit la longueur du contenu. Meme
       selecteur que D10-16 ; accueils par modele de page exclus. */
    body.page .xn-scope > main.xn-container:not(.xn-home) {
        padding-inline: var(--xn-space-md);
    }
    /* Lot L12 (D12-14) : dans la colonne principale des accueils, les
       contenus textuels gardent la meme marge laterale que les pages (P4).
       Les en-tetes de section (intitule et lien « Tout voir ») et le texte
       des sous-cartes et des listes de l'accueil 1 sont decales ; images,
       cartes et sections pleine largeur gardent leur largeur. Les barres
       laterales, deja bordees, ne sont pas visees. */
    .xn-scope .xn-home__main :is(.xn-home1__section-header, .xn-home3__section-header, .xn-section-header) {
        padding-inline: var(--xn-space-md);
    }
    .xn-scope .xn-home__main .xn-home1__sub-card-body {
        padding-inline: var(--xn-space-md);
    }
    .xn-scope .xn-home__main .xn-home1__list-item {
        padding-inline-end: 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
       (pub : modules/xn-ads.css). */
    .xn-navbar__tagline,
    .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-header) 0,
            var(--xn-color-header) 56px,
            var(--xn-color-nav) 56px,
            var(--xn-color-nav) 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;
        padding-left: 0;
    }
    .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 SVG (menu-2 + x, lot L10) sont superposees en absolute
       a l interieur du bouton, basculees via [aria-expanded] sur
       le bouton ; margin: auto les centre (taille fixe de 1em). */
    .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;
        margin: auto;
        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: var(--xn-color-nav);
        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-scope .xn-social--footer .xn-social__list {
        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);
    }
}