/* ==========================================================================
   Vox Populi 241 — Feuille de style principale (mobile-first)
   Charte : Marine #1A2B48 · Cyan #00AEEF · Perle #F4F7F9 · Lora + Inter
   ========================================================================== */

:root {
	--vxp-marine:   #1A2B48;
	--vxp-marine-d: #13203a;
	--vxp-cyan:     #00AEEF;
	--vxp-cyan-d:   #0090c6;
	--vxp-white:    #ffffff;
	--vxp-perle:    #F4F7F9;
	--vxp-text:     #333333;
	--vxp-border:   #E7EDF1;
	--vxp-border-s: #EDF2F5;
	--vxp-muted:    #7A8896;
	--vxp-muted-2:  #9CABB8;
	--vxp-on-dark:  #cbd6e3;
	--vxp-on-dark-2:#9fb0c4;

	--vxp-serif: 'Lora', Georgia, 'Times New Roman', serif;
	--vxp-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--vxp-container: 1200px;
	--vxp-radius: 12px;
	--vxp-radius-lg: 16px;
	--vxp-shadow: 0 4px 14px rgba(26,43,72,.05);
	--vxp-shadow-lift: 0 10px 24px rgba(26,43,72,.13);
}

/* --- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
	margin: 0;
	font-family: var(--vxp-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--vxp-text);
	background: var(--vxp-white);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--vxp-cyan); color: #fff; }
h1, h2, h3, h4 { font-family: var(--vxp-serif); color: var(--vxp-marine); margin: 0; }

/* Padding horizontal en longhand : ne touche jamais au padding vertical des
   éléments combinés (.container.branding__inner, .container.layout, etc.). */
.container { width: 100%; max-width: var(--vxp-container); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
.lk { color: inherit; text-decoration: none; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--vxp-marine); color: #fff; padding: 10px 16px; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid rgba(0,174,239,.5); outline-offset: 2px; }

/* Placeholder image (article sans une) */
.img-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #E2E9EF; color: #B2C0CC; }
.img-placeholder svg { width: 28px; height: 28px; }

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Barre supérieure — masquée sur mobile, visible desktop */
.topbar { display: none; background: var(--vxp-marine); color: var(--vxp-on-dark); }
.topbar__inner { height: 38px; display: flex; align-items: center; justify-content: space-between; font: 500 12.5px var(--vxp-sans); }
.topbar__left { display: flex; align-items: center; gap: 16px; }
.topbar__item { display: flex; align-items: center; gap: 6px; }
.topbar__item svg { stroke: var(--vxp-cyan); }
.topbar__divider { width: 1px; height: 13px; background: rgba(255,255,255,.18); }
.topbar__right { display: flex; align-items: center; gap: 12px; }
.topbar__follow { color: var(--vxp-on-dark-2); }
.topbar__social { display: flex; align-items: center; gap: 12px; }
.topbar__social a { color: #fff; opacity: .85; }
.topbar__social a:hover { opacity: 1; color: var(--vxp-cyan); }

/* Header branding — caché sur mobile (remplacé par .mobilebar) */
.branding { display: none; background: #fff; border-bottom: 1px solid var(--vxp-border); }
.branding__inner { padding-top: 26px; padding-bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.branding__logo { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.branding__logo .custom-logo, .branding__fallback img { height: 48px; width: auto; }
.branding__divider { width: 1px; height: 34px; background: var(--vxp-border); }
.branding__tagline { font: 600 12.5px/1.35 var(--vxp-sans); color: var(--vxp-marine); max-width: 160px; }
.branding__tagline span { color: var(--vxp-cyan); }
.branding__ad { width: 728px; max-width: 100%; flex-shrink: 1; }

/* Nav principale — desktop */
.mainnav { display: none; background: var(--vxp-marine); border-top: 3px solid var(--vxp-cyan); position: relative; }
.mainnav__inner { display: flex; align-items: stretch; justify-content: space-between; }
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 2px; }
.nav-menu li { position: relative; }
.nav-menu a { display: flex; align-items: center; gap: 5px; font: 600 13.5px var(--vxp-sans); color: var(--vxp-on-dark); padding: 0 15px; height: 46px; white-space: nowrap; transition: color .15s ease; }
.nav-menu a:hover { color: var(--vxp-cyan); }
.nav-menu > li.current-menu-item > a,
.nav-menu > li:first-child > a { color: #fff; }
.nav-menu > li:first-child > a { background: var(--vxp-cyan); font-weight: 700; }
/* Sous-menus */
.nav-menu ul.sub-menu { list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; box-shadow: var(--vxp-shadow-lift); border-radius: 0 0 8px 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .15s ease; z-index: 1000; }
.nav-menu li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu ul.sub-menu a { color: var(--vxp-marine); height: auto; padding: 9px 16px; font-weight: 500; }
.nav-menu ul.sub-menu a:hover { background: var(--vxp-perle); color: var(--vxp-cyan); }
.mainnav__actions { display: flex; align-items: center; }
.mainnav__search-toggle { border: 0; background: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; }
.mainnav__search-panel { background: #fff; border-top: 1px solid var(--vxp-border); padding: 14px 0; }
.mainnav__search-panel .container { padding: 0 16px; }

/* Ticker en direct */
.ticker { background: var(--vxp-perle); border-bottom: 1px solid var(--vxp-border); }
.ticker__inner { height: 44px; display: flex; align-items: center; gap: 12px; overflow: hidden; }
.ticker__label { display: flex; align-items: center; gap: 8px; font: 700 11px var(--vxp-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--vxp-marine); flex-shrink: 0; white-space: nowrap; }
.ticker__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vxp-cyan); box-shadow: 0 0 0 3px rgba(0,174,239,.18); animation: vpdot 1.4s ease-in-out infinite; }
@keyframes vpdot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.4;transform:scale(.65);} }
.ticker__divider { width: 1px; height: 15px; background: #D9E2E9; flex-shrink: 0; }
/* Carrousel : un titre visible à la fois, rotation fondue (3 derniers articles). */
.ticker__carousel { position: relative; flex: 1 1 auto; min-width: 0; height: 44px; overflow: hidden; }
.ticker__slide {
	position: absolute; left: 0; top: 50%; transform: translateY(calc(-50% + 9px));
	opacity: 0; transition: opacity .45s ease, transform .45s ease;
	font: 500 13px var(--vxp-sans); color: #33485f; white-space: nowrap;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.ticker__slide.is-active { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
.ticker__slide:hover { color: var(--vxp-cyan); }

/* Mobile bar + chips + drawer */
.mobilebar { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: #fff; border-bottom: 1px solid var(--vxp-border); }
.mobilebar__burger { border: 0; background: none; padding: 0; display: flex; flex-direction: column; gap: 4px; cursor: pointer; }
.mobilebar__burger span { width: 22px; height: 2.4px; background: var(--vxp-marine); border-radius: 2px; }
.mobilebar__logo img { height: 30px; width: auto; }
.mobilebar__search { border: 0; background: none; cursor: pointer; color: var(--vxp-marine); display: flex; }
.chips { display: flex; align-items: center; gap: 8px; background: var(--vxp-marine); padding: 8px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips__item { font: 600 12.5px var(--vxp-sans); color: var(--vxp-on-dark); padding: 6px 13px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.chips__item--active { color: #fff; background: var(--vxp-cyan); font-weight: 700; }

.drawer { position: fixed; inset: 0; z-index: 1300; }
.drawer[hidden] { display: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(13,24,43,.5); }
.drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px; background: #fff; padding: 16px; overflow-y: auto; box-shadow: var(--vxp-shadow-lift); animation: drawerIn .2s ease; }
@keyframes drawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--vxp-border); }
.drawer__close { border: 0; background: none; font-size: 28px; line-height: 1; color: var(--vxp-marine); cursor: pointer; }
.drawer__menu { list-style: none; margin: 0; padding: 0; }
.drawer__menu li { border-bottom: 1px solid var(--vxp-border-s); }
.drawer__menu a { display: block; padding: 13px 4px; font: 600 15px var(--vxp-sans); color: var(--vxp-marine); }
.drawer__menu .sub-menu { list-style: none; margin: 0; padding: 0 0 8px 14px; }
.drawer__menu .sub-menu a { font-weight: 500; font-size: 14px; padding: 9px 4px; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.site-content { padding: 0; }
.layout { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 22px; padding-bottom: 32px; }
.section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.section-head__bar { width: 4px; height: 19px; background: var(--vxp-cyan); border-radius: 2px; }
.section-head__title { font-size: 19px; font-weight: 700; }

/* Grilles */
.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: 1fr; }

/* « Toute l'actualité » : grille compacte (1 col mobile). */
.morenews { margin-top: 28px; }
.morenews-grid { display: grid; grid-template-columns: 1fr; gap: 16px 26px; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card { background: #fff; border: 1px solid var(--vxp-border); border-radius: 11px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow: var(--vxp-shadow-lift); transform: translateY(-3px); }
.card__media { position: relative; display: block; aspect-ratio: 16/9; background: #E2E9EF; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__cat { position: absolute; top: 11px; left: 11px; font: 700 9.5px var(--vxp-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--vxp-marine); background: #fff; padding: 4px 8px; border-radius: 4px; }
.card__body { padding: 14px 15px 17px; }
.card__title { font: 600 16.5px/1.3 var(--vxp-serif); margin: 0 0 10px; }
.card__title a:hover { color: var(--vxp-cyan); }
.card__meta { font: 500 12px var(--vxp-sans); color: var(--vxp-muted); }

/* Compact list item */
.compact { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--vxp-border-s); }
.compact__media { position: relative; aspect-ratio: 1/1; background: #E2E9EF; border-radius: 8px; overflow: hidden; display: block; }
.compact__media img { width: 100%; height: 100%; object-fit: cover; }
.compact__title { display: block; font: 600 15px/1.3 var(--vxp-serif); color: var(--vxp-marine); margin-bottom: 5px; }
.compact:hover .compact__title { color: var(--vxp-cyan); }
.compact__meta { font: 500 11.5px var(--vxp-sans); color: var(--vxp-muted); }

/* ==========================================================================
   À LA UNE (hero)
   ========================================================================== */
.hero { padding-top: 24px; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
/* Mobile : carte empilée (image en haut, texte dessous) */
.hero__feature { position: relative; display: block; border-radius: var(--vxp-radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--vxp-border); box-shadow: var(--vxp-shadow); }
.hero__img { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.hero__feature:hover .hero__img img { transform: scale(1.04); }
.hero__overlay { display: none; }
.hero__badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px; font: 700 10px var(--vxp-sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--vxp-cyan); padding: 5px 10px; border-radius: 5px; box-shadow: 0 4px 12px rgba(0,174,239,.4); z-index: 2; }
.hero__badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.hero__caption { position: static; display: block; padding: 15px 16px 18px; }
.hero__cat { display: inline-block; font: 700 10px var(--vxp-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--vxp-cyan); margin-bottom: 8px; }
.hero__title { display: block; font: 700 22px/1.25 var(--vxp-serif); color: var(--vxp-marine); margin: 0 0 9px; }
.hero__excerpt { display: block; font: 400 14.5px/1.55 var(--vxp-sans); color: #444; margin: 0 0 12px; }
.hero__meta { display: flex; align-items: center; gap: 8px; font: 500 12px var(--vxp-sans); color: var(--vxp-muted); flex-wrap: wrap; }
.hero__avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--vxp-marine); color: #fff; font: 700 9px var(--vxp-sans); display: inline-flex; align-items: center; justify-content: center; }

.hero__side { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vxp-border); border-radius: 14px; padding: 4px 16px; box-shadow: var(--vxp-shadow); }
.hero__side-item { display: grid; grid-template-columns: 28px 84px 1fr; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--vxp-border-s); }
.hero__side-item:last-of-type { border-bottom: 0; }
.hero__rank { font: 700 24px var(--vxp-serif); color: var(--vxp-cyan); line-height: 1; text-align: center; }
.hero__side-media { position: relative; aspect-ratio: 1/1; background: #E2E9EF; border-radius: 10px; overflow: hidden; }
.hero__side-media img { width: 100%; height: 100%; object-fit: cover; }
.hero__side-cat { display: block; font: 700 9.5px var(--vxp-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--vxp-cyan); margin-bottom: 5px; }
.hero__side-title { font: 600 15px/1.32 var(--vxp-serif); color: var(--vxp-marine); margin: 0; }
.hero__side-item:hover .hero__side-title { color: var(--vxp-cyan); }
.hero__more { display: flex; align-items: center; justify-content: center; gap: 7px; font: 700 12.5px var(--vxp-sans); color: var(--vxp-marine); padding: 16px 0 14px; }

/* ==========================================================================
   ÉCHO DU TERRAIN
   ========================================================================== */
.echo { background: var(--vxp-marine); position: relative; overflow: hidden; margin-top: 28px; }
.echo::before { content: ''; position: absolute; inset: 0; opacity: .05; background-image: repeating-linear-gradient(135deg,#fff 0 2px,transparent 2px 26px); }
.echo__inner { position: relative; padding: 24px 16px 28px; }
.echo__head { margin-bottom: 18px; }
.echo__eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.echo__eyebrow span { font: 700 11px var(--vxp-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--vxp-cyan); }
.echo__eyebrow svg { stroke: var(--vxp-cyan); }
.echo__title { font: 700 24px/1.1 var(--vxp-serif); color: #fff; margin: 0; }
.echo__sub { font: 400 14px var(--vxp-sans); color: var(--vxp-on-dark-2); margin: 7px 0 0; }
.echo__more { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--vxp-sans); color: var(--vxp-cyan); margin-top: 14px; }
.echo__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.echo__card { display: block; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 11px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.echo__card:hover { transform: translateY(-3px); box-shadow: var(--vxp-shadow-lift); }
.echo__card-media { position: relative; aspect-ratio: 16/9; background: rgba(255,255,255,.07); overflow: hidden; }
.echo__card-media img { width: 100%; height: 100%; object-fit: cover; }
.echo__tag { position: absolute; top: 11px; left: 11px; font: 700 9.5px var(--vxp-sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--vxp-cyan); padding: 4px 8px; border-radius: 4px; }
.echo__card-body { padding: 13px 15px 16px; }
.echo__card-title { font: 600 16px/1.3 var(--vxp-serif); color: #fff; margin: 0 0 7px; }
.echo__card:hover .echo__card-title { color: #7fd8f7; }
.echo__card-meta { font: 500 11.5px var(--vxp-sans); color: var(--vxp-on-dark-2); }

/* ==========================================================================
   SECTIONS PAR RUBRIQUE
   ========================================================================== */
.rubrique { margin-top: 34px; }
.rubrique__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--vxp-marine); padding-bottom: 10px; margin-bottom: 16px; }
.rubrique__title-wrap { display: flex; align-items: center; gap: 10px; }
.rubrique__bar { width: 4px; height: 20px; background: var(--vxp-cyan); border-radius: 2px; }
.rubrique__title { font-size: 20px; font-weight: 700; }
.rubrique__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.rubrique__lead .card__title { font-size: 18px; }
.rubrique__lead .card__excerpt { font: 400 14px/1.55 var(--vxp-sans); color: #555; margin: 0 0 11px; }
.rubrique__list { display: flex; flex-direction: column; gap: 14px; }

/* ==========================================================================
   PUBLICITÉ
   ========================================================================== */
.ad-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 100%; box-sizing: border-box; background: var(--vxp-perle); border: 1px dashed #C8D5DF; border-radius: 8px; color: var(--vxp-muted-2); margin: 0 auto; padding: 9px 10px 11px; overflow: hidden; }
/* Libellé « Annonce » : toujours au-dessus, centré, jamais superposé à l'affiche. */
.ad-slot__label { display: block; width: 100%; text-align: center; font: 700 10px var(--vxp-sans); letter-spacing: .14em; text-transform: uppercase; color: #9FB0BD; line-height: 1; }
.ad-slot__ph { font: 500 12px var(--vxp-sans); }

/* L'affiche de la régie occupe toute la largeur de l'emplacement (ratio conservé). */
.ad-widget { width: 100%; text-align: center; line-height: 0; }
.ad-slot img, .ad-widget img { display: block; width: 100%; height: auto; margin: 0 auto; }
.ad-widget a { display: block; }
.ad-widget ins, .ad-widget iframe, .ad-widget amp-ad { display: block; max-width: 100%; margin: 0 auto; }

/* Header leaderboard : bannière large, remplit toute la zone en-tête. */
.ad--leaderboard { width: 100%; min-height: 90px; }

/* Bannière in-content / inter-blocs : pleine largeur du conteneur. */
.ad--banner { width: 100%; min-height: 90px; }

/* Pavés sidebar : centrés, l'affiche remplit la largeur de la zone. */
.ad--300x300 { width: 100%; max-width: 300px; min-height: 300px; }
.ad--300x600 { width: 100%; max-width: 300px; min-height: 600px; }
.ad--300x250 { width: 100%; max-width: 300px; min-height: 250px; }

/* Wrappers de pub : ne rien afficher si la zone est vide (jamais d'espace cassé). */
/* Padding vertical uniquement : préserve le centrage (margin:0 auto) du .container. */
.section-ad { margin-top: 32px; margin-bottom: 32px; }
.section-ad:empty, .sidebar__ad:empty, .grid-ad:empty, .branding__ad:empty { display: none; margin: 0; }

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.sidebar { display: flex; flex-direction: column; gap: 22px; }
.panel { background: #fff; border: 1px solid var(--vxp-border); border-radius: 12px; overflow: hidden; }
.panel__head { background: var(--vxp-marine); padding: 13px 18px; display: flex; align-items: center; gap: 9px; }
.panel__head svg { stroke: var(--vxp-cyan); }
.panel__title { font: 700 14px var(--vxp-sans); letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: 0; }
.panel__body { padding: 6px 18px 12px; }
.popular__item { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--vxp-border-s); }
.popular__item:last-child { border-bottom: 0; }
.popular__rank { font: 700 23px var(--vxp-serif); color: var(--vxp-cyan); line-height: 1; }
.popular__title { font: 600 13.5px/1.35 var(--vxp-serif); color: var(--vxp-marine); margin: 0; }
.popular__item:hover .popular__title { color: var(--vxp-cyan); }

.panel--newsletter { background: var(--vxp-perle); border: 1px solid var(--vxp-border); padding: 22px; }
.panel--newsletter svg { stroke: var(--vxp-cyan); }
.newsletter__title { font: 700 19px var(--vxp-serif); margin: 12px 0 7px; }
.newsletter__text { font: 400 13.5px/1.5 var(--vxp-sans); color: #555; margin: 0 0 15px; }
.newsletter__form { display: flex; flex-direction: column; gap: 9px; }
.newsletter__form input { background: #fff; border: 1px solid #D9E2E9; border-radius: 8px; padding: 11px 13px; font: 500 13px var(--vxp-sans); }
.newsletter__form button { background: var(--vxp-cyan); color: #fff; border: 0; font: 700 13px var(--vxp-sans); padding: 11px; border-radius: 8px; cursor: pointer; }
.newsletter__form button:hover { background: var(--vxp-cyan-d); }
.sidebar__ad { display: flex; justify-content: center; }

/* ==========================================================================
   ARTICLE (single)
   ========================================================================== */
.single { padding-top: 32px; padding-bottom: 32px; }
.single__layout { display: grid; grid-template-columns: 1fr; gap: 28px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 12.5px var(--vxp-sans); color: var(--vxp-muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--vxp-cyan); }
.cat-badge { display: inline-block; font: 700 11px var(--vxp-sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--vxp-cyan); padding: 6px 12px; border-radius: 5px; margin-bottom: 14px; }
.article__title { font: 700 27px/1.18 var(--vxp-serif); margin: 0 0 14px; letter-spacing: -.01em; }
.article__chapo { font: italic 400 17px/1.55 var(--vxp-serif); color: #4a5a6a; margin: 0 0 18px; }
.article__byline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--vxp-border-s); border-bottom: 1px solid var(--vxp-border-s); margin-bottom: 20px; flex-wrap: wrap; }
.article__author { display: flex; align-items: center; gap: 11px; }
.article__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--vxp-marine); color: #fff; font: 700 14px var(--vxp-sans); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.article__author-name { font: 600 14px var(--vxp-sans); color: var(--vxp-marine); }
.article__author-meta { font: 500 12px var(--vxp-sans); color: var(--vxp-muted); }
.article__hero { position: relative; aspect-ratio: 16/9; background: #E2E9EF; border-radius: var(--vxp-radius); overflow: hidden; margin-bottom: 10px; }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__caption { font: 500 12px var(--vxp-sans); color: var(--vxp-muted); margin: 0 0 24px; }

.article__body { font: 400 17px/1.75 var(--vxp-sans); color: var(--vxp-text); }
.article__body p { margin: 0 0 20px; }
.article__body h2 { font: 600 23px/1.3 var(--vxp-serif); color: var(--vxp-marine); margin: 28px 0 14px; }
.article__body h3 { font: 600 20px/1.3 var(--vxp-serif); margin: 24px 0 12px; }
.article__body a { color: var(--vxp-cyan); text-decoration: underline; text-underline-offset: 2px; }
.article__body img { border-radius: 10px; margin: 8px 0 20px; }
.article__body ul, .article__body ol { margin: 0 0 20px; padding-left: 22px; }
.article__body li { margin-bottom: 8px; }
.article__body blockquote { margin: 0 0 24px; padding: 6px 0 6px 22px; border-left: 4px solid var(--vxp-cyan); font: italic 500 20px/1.45 var(--vxp-serif); color: var(--vxp-marine); }
.article__body figure { margin: 0 0 20px; }
.article__body figcaption { font: 500 12px var(--vxp-sans); color: var(--vxp-muted); margin-top: 6px; }

.article__tags { display: flex; flex-wrap: wrap; gap: 9px; margin: 8px 0 28px; }
.article__tags a { font: 600 12px var(--vxp-sans); color: var(--vxp-marine); background: var(--vxp-perle); padding: 7px 13px; border-radius: 6px; }
.article__tags a:hover { background: var(--vxp-cyan); color: #fff; }

.related { border-top: 2px solid var(--vxp-marine); padding-top: 18px; margin-bottom: 32px; }
.related__title { font: 700 21px var(--vxp-serif); margin: 0 0 16px; }
.related__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Share */
.share { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 24px; }
.share__label { font: 700 11px var(--vxp-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--vxp-muted-2); }
.share__btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.share__btn--facebook { background: #1877F2; }
.share__btn--x { background: #000; }
.share__btn--whatsapp { background: #25D366; }
.share__btn:hover { opacity: .9; }
.share--rail { display: none; }

/* Comments */
.comments { margin-bottom: 40px; }
.comments__title { font: 700 21px var(--vxp-serif); margin: 0 0 16px; display: flex; align-items: center; gap: 9px; }
.comments__count { font: 700 12px var(--vxp-sans); color: var(--vxp-cyan); background: var(--vxp-perle); padding: 4px 10px; border-radius: 20px; }
.comment-list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.comment-list ul.children { list-style: none; margin: 14px 0 0; padding-left: 28px; }
.comment-body { display: flex; gap: 11px; }
.comment-author .avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.comment-meta { font: 600 13.5px var(--vxp-sans); color: var(--vxp-marine); margin-bottom: 3px; }
.comment-meta .comment-time { font: 500 11.5px var(--vxp-sans); color: var(--vxp-muted-2); margin-left: 6px; }
.comment-content { font: 400 14px/1.6 var(--vxp-sans); color: #444; }
.comment-content p { margin: 0 0 8px; }
.comment-respond { background: var(--vxp-perle); border: 1px solid var(--vxp-border); border-radius: 12px; padding: 18px; }
.comment-respond .comment-reply-title { font: 700 17px var(--vxp-serif); margin: 0 0 12px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea { width: 100%; border: 1px solid #D9E2E9; border-radius: 8px; padding: 11px 13px; font: 400 14px var(--vxp-sans); margin-bottom: 10px; background: #fff; }
.comment-form .form-submit .submit { background: var(--vxp-cyan); color: #fff; border: 0; font: 700 13px var(--vxp-sans); padding: 11px 20px; border-radius: 8px; cursor: pointer; }

/* ==========================================================================
   ARCHIVE / RECHERCHE / 404
   ========================================================================== */
.page-hero { background: var(--vxp-marine); color: #fff; padding: 28px 0; margin-bottom: 22px; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; opacity: .05; background-image: repeating-linear-gradient(135deg,#fff 0 2px,transparent 2px 26px); }
.page-hero__inner { position: relative; }
.page-hero__eyebrow { font: 700 11px var(--vxp-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--vxp-cyan); }
.page-hero__title { font: 700 28px var(--vxp-serif); color: #fff; margin: 6px 0 0; }
.page-hero__desc { font: 400 14.5px var(--vxp-sans); color: var(--vxp-on-dark-2); margin: 8px 0 0; max-width: 60ch; }

.pagination { margin-top: 28px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--vxp-border); border-radius: 8px; font: 600 13px var(--vxp-sans); color: var(--vxp-marine); }
.pagination .page-numbers.current { background: var(--vxp-cyan); color: #fff; border-color: var(--vxp-cyan); }
.pagination .page-numbers:hover:not(.current) { border-color: var(--vxp-cyan); color: var(--vxp-cyan); }

.empty { text-align: center; padding: 40px 16px; }
.empty__title { font-size: 24px; margin-bottom: 10px; }
.error404 .empty { padding: 60px 16px; }
.error404 .empty__code { font: 700 80px var(--vxp-serif); color: var(--vxp-cyan); line-height: 1; }

.more-link { display: inline-flex; align-items: center; gap: 6px; font: 600 13px var(--vxp-sans); color: var(--vxp-cyan); transition: gap .15s ease; }
.more-link:hover { gap: 9px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { margin-top: 40px; background: var(--vxp-marine); color: var(--vxp-on-dark); }
.site-footer__accent { height: 4px; background: var(--vxp-cyan); }
.site-footer__cols { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 36px; padding-bottom: 32px; }
.site-footer__logo { height: 26px; width: auto; margin-bottom: 16px; }
.site-footer__desc { font: 400 13.5px/1.6 var(--vxp-sans); color: var(--vxp-on-dark-2); margin: 0 0 16px; max-width: 34ch; }
.site-footer__social { display: flex; gap: 11px; }
.site-footer__social .social-icons__link { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #fff; }
.site-footer__social .social-icons__link:hover { background: var(--vxp-cyan); }
.site-footer__title { font: 700 12px var(--vxp-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--vxp-cyan); margin: 0 0 14px; }
.site-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__menu a { font: 400 13.5px var(--vxp-sans); color: var(--vxp-on-dark); }
.site-footer__menu a:hover { color: var(--vxp-cyan); }
.site-footer__contact { display: flex; flex-direction: column; gap: 10px; font: 400 13.5px/1.5 var(--vxp-sans); color: var(--vxp-on-dark); }
.site-footer__contact a:hover { color: var(--vxp-cyan); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.18); }
.site-footer__bottom-inner { padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; font: 500 13px var(--vxp-sans); color: #cdd8e4; }

/* ==========================================================================
   RESPONSIVE — Tablet ≥ 768px
   ========================================================================== */
@media (min-width: 768px) {
	.container { padding-left: 24px; padding-right: 24px; }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.morenews-grid { grid-template-columns: repeat(2, 1fr); }
	.hero__grid { grid-template-columns: 1.2fr 1fr; align-items: stretch; }
	/* Hero overlay (image plein cadre + texte superposé) */
	.hero__feature { background: var(--vxp-marine); border: 0; min-height: 380px; box-shadow: 0 14px 36px rgba(26,43,72,.16); }
	.hero__img { position: absolute; inset: 0; aspect-ratio: auto; }
	.hero__overlay { display: block; position: absolute; inset: 0; background: linear-gradient(to top,rgba(13,24,43,.94) 4%,rgba(13,24,43,.55) 40%,rgba(13,24,43,.05) 72%); }
	.hero__badge { top: 16px; left: 16px; font-size: 11px; padding: 7px 13px; border-radius: 6px; }
	.hero__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
	.hero__cat { color: #7fd8f7; }
	.hero__title { color: #fff; }
	.hero__excerpt { color: rgba(255,255,255,.82); }
	.hero__meta { color: rgba(255,255,255,.72); }
	.hero__avatar { background: var(--vxp-cyan); }
	.echo__grid { grid-template-columns: repeat(3, 1fr); }
	.rubrique__grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
	.related__grid { grid-template-columns: repeat(3, 1fr); }
	.hero__title { font-size: 30px; }
	.article__title { font-size: 34px; }
	.site-footer__cols { grid-template-columns: 2fr 1fr 1fr; }
}

/* ==========================================================================
   RESPONSIVE — Desktop ≥ 1024px
   ========================================================================== */
@media (min-width: 1024px) {
	.container { padding-left: 32px; padding-right: 32px; }
	/* bascule header desktop / mobile */
	.topbar, .branding, .mainnav { display: block; }
	.mobilebar, .chips { display: none; }

	.layout { grid-template-columns: 1fr 300px; gap: 36px; padding-top: 36px; }
	.grid--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }

	.hero { padding-top: 24px; }
	.hero__grid { grid-template-columns: 1fr 384px; gap: 26px; }
	.hero__feature { min-height: 472px; }
	.hero__title { font-size: 34px; }
	.hero__caption { padding: 32px 34px; }
	.hero__excerpt { font-size: 15.5px; }

	.echo__inner { padding: 30px 32px 36px; }
	.echo__head { display: flex; align-items: flex-end; justify-content: space-between; }
	.echo__more { margin-top: 0; }
	.echo__title { font-size: 27px; }
	.echo__grid { gap: 18px; }

	.section-head__title { font-size: 22px; }
	.rubrique__title { font-size: 22px; }
	.rubrique__list { grid-column: span 2; }
	.rubrique__grid { grid-template-columns: 1.4fr 1fr 1fr; }
	.rubrique__lead { grid-row: span 1; }

	/* Article : rail de partage + sidebar */
	.single__layout { grid-template-columns: 64px 1fr 300px; gap: 32px; }
	.single__main { max-width: 720px; }
	.article__title { font-size: 40px; line-height: 1.15; }
	.article__chapo { font-size: 19px; }
	.article__body { font-size: 17px; }
	.article__body h2 { font-size: 26px; }
	.share--rail { display: flex; flex-direction: column; gap: 12px; align-items: center; position: sticky; top: 24px; }
	.share--inline { display: none; }
	.share--rail .share__label { writing-mode: vertical-rl; }
	.share--rail .share__btn { width: 42px; height: 42px; }

	.page-hero__title { font-size: 34px; }
	.site-footer { margin-top: 44px; }
	.site-footer__cols { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; padding-top: 38px; }
}

/* Largeur conteneur article alignée */
.single .container, .archive-wrap .container { max-width: var(--vxp-container); }

/* ==========================================================================
   COMPLÉMENT — fonctions natives & corrections d'audit
   ========================================================================== */

/* Breadcrumb plugin SEO (Rank Math / Yoast) */
.breadcrumb--seo { font: 500 12.5px var(--vxp-sans); color: var(--vxp-muted); margin-bottom: 14px; }
.breadcrumb--seo a { color: var(--vxp-cyan); }

/* Pub insérée dans une grille (span pleine largeur) */
.grid-ad { grid-column: 1 / -1; display: flex; justify-content: center; margin: 6px 0; }

/* « À lire aussi » in-content */
.inline-related { margin: 10px 0 26px; padding: 16px 18px; background: var(--vxp-perle); border-radius: 12px; border-left: 4px solid var(--vxp-cyan); }
.inline-related__label { display: block; font: 700 11px var(--vxp-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--vxp-cyan); margin-bottom: 12px; }
.inline-related__items { display: grid; gap: 12px; }
.inline-related__item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
.inline-related__thumb { position: relative; aspect-ratio: 1/1; border-radius: 8px; overflow: hidden; background: #E2E9EF; }
.inline-related__thumb img { width: 100%; height: 100%; object-fit: cover; }
.inline-related__title { font: 600 14.5px/1.35 var(--vxp-serif); color: var(--vxp-marine); }
.inline-related__item:hover .inline-related__title { color: var(--vxp-cyan); }
@media (min-width: 560px) { .inline-related__items { grid-template-columns: 1fr 1fr; } }

/* Lettrine (span injecté depuis le marqueur [X] ou l'option Customizer) */
.article__body .dropcap {
	float: left; font-family: var(--vxp-serif); font-weight: 700; font-size: 62px;
	line-height: .72; padding: 4px 10px 0 0; color: var(--vxp-cyan); text-transform: uppercase;
}

/* Partage : bouton copier + toast */
.share__btn--copy { background: var(--vxp-perle); color: var(--vxp-marine); border: 1px solid var(--vxp-border); cursor: pointer; }
.share__btn--linkedin { background: #0A66C2; }
.share__btn--copy.is-copied { background: #00a32a; color: #fff; border-color: #00a32a; }
.vxp-toast {
	position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
	background: var(--vxp-marine); color: #fff; padding: 10px 18px; border-radius: 8px;
	font: 600 13px var(--vxp-sans); opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 1600;
}
.vxp-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Bouton « Charger plus » */
.load-more-wrap { display: flex; justify-content: center; margin-top: 24px; }
.load-more { background: var(--vxp-marine); color: #fff; border: 0; font: 700 13px var(--vxp-sans); padding: 13px 28px; border-radius: 8px; cursor: pointer; transition: background .15s ease; }
.load-more:hover { background: var(--vxp-cyan); }
.load-more.is-loading { opacity: .6; cursor: wait; }

/* Menu légal du footer */
.site-footer__legal { margin: 0; }
.site-footer__legal-menu { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; flex-wrap: wrap; }
.site-footer__legal-menu a { color: #cdd8e4; font-size: 13px; }
.site-footer__legal-menu a:hover { color: var(--vxp-cyan); }

/* Partage sticky en bas d'écran sur mobile */
@media (max-width: 767px) {
	.share--inline {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
		background: #fff; border-top: 1px solid var(--vxp-border);
		padding: 8px 12px; justify-content: center; gap: 14px;
		box-shadow: 0 -4px 14px rgba(26,43,72,.10);
	}
	.share--inline .share__label { display: none; }
	body.single { padding-bottom: 64px; }
}

/* Sidebar collante (CSS pur, pas de JS) — uniquement quand elle est en colonne */
@media (min-width: 1024px) {
	.sidebar { position: sticky; top: 24px; align-self: start; }
}

/* ==========================================================================
   PAGES (institutionnelles & légales)
   ========================================================================== */
.page-single { padding-top: 32px; padding-bottom: 44px; }
.page-single__main { max-width: 760px; margin: 0 auto; }
.page-article__head { margin-bottom: 22px; }
.page-article__title { font: 700 30px/1.2 var(--vxp-serif); color: var(--vxp-marine); margin: 8px 0 0; letter-spacing: -.01em; }
.page-article__hero { margin: 0 0 24px; border-radius: var(--vxp-radius); overflow: hidden; aspect-ratio: 16/9; background: #E2E9EF; }
.page-article__hero img { width: 100%; height: 100%; object-fit: cover; }
/* Le corps réutilise la typographie de .article__body (h2/h3/p/ul/blockquote/liens). */
.page-article__body h2 { margin-top: 32px; }
.page-article__body ul, .page-article__body ol { margin: 0 0 20px; padding-left: 22px; }
.page-article__body li { margin-bottom: 8px; }
@media (min-width: 1024px) {
	.page-article__title { font-size: 38px; }
}