/* ==========================================================================
   Zox News Édito : charte de La Loupe média
   Concept : papier blanc, filets noirs fins, titres serif gras, bleu encre.
   Les couleurs et polices des options sont déjà remplacées dans functions.php ;
   ce fichier règle la forme : filets, titres, menu, rubriques, article.
   ========================================================================== */

:root {
	--paper: #fff;
	--paper-2: #f5f5f2;
	--ink: #121212;
	--ink-2: #4a4a47;
	--rule: #d9d9d4;
	--accent: #1f3d79;
	--live: #b3261e;
	--serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--sans: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Base ---------- */
body { -webkit-font-smoothing: antialiased; }
body #mvp-main-body-wrap { background: var(--paper); }

/* ---------- En-tête : titre centré, double filet ---------- */
body #mvp-main-nav-top { background: var(--paper); border-bottom: 3px double var(--ink); padding: 22px 0 18px; }
body .mvp-nav-top-mid img { max-height: 54px; width: auto; }
body .mvp-nav-top-left .mvp-fly-but-wrap span,
body #mvp-main-nav-small .mvp-fly-but-wrap span { background: var(--ink); }
body .mvp-nav-top-right .mvp-nav-search-but { color: var(--ink); }

body span.mvp-nav-soc-but { background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); }
body .mvp-nav-soc-wrap .fa-facebook-f:hover { background: var(--accent); color: #fff; }
body .mvp-nav-soc-wrap .fa-x-twitter:hover,
body .mvp-nav-soc-wrap .fa-instagram:hover,
body .mvp-nav-soc-wrap .fa-youtube:hover { background: var(--ink); color: #fff; }

/* Menu principal : une ligne, filet noir dessous */
body #mvp-main-nav-bot-cont { background: var(--paper); border-bottom: 1px solid var(--ink); }
body .mvp-nav-menu ul li a {
	font-family: var(--sans);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
}
body #mvp-nav-bot-wrap .mvp-nav-menu ul li a { color: var(--ink); }
body .mvp-nav-menu ul li:hover a { border-bottom: 2px solid var(--accent); padding: 18px 12px 16px; }
body .mvp-nav-menu ul li.menu-item-has-children:hover a { padding: 18px 17px 16px 12px; }
body #mvp-nav-bot-wrap .mvp-nav-menu ul li.current-menu-item > a,
body #mvp-nav-bot-wrap .mvp-nav-menu ul li.current-menu-ancestor > a { box-shadow: inset 0 -2px 0 var(--accent); }
body .mvp-nav-menu ul li ul.sub-menu { border-top: 2px solid var(--ink); box-shadow: 0 8px 18px rgba(0,0,0,.1); }
body .mvp-nav-menu ul li ul.sub-menu li a { font-weight: 500; }

/* Barre fixe au défilement et menu latéral */
body #mvp-main-nav-small-cont { background: var(--paper); border-bottom: 1px solid var(--ink); }
body #mvp-main-nav-small .mvp-nav-menu ul li a,
body #mvp-main-nav-small span.mvp-nav-search-but { color: var(--ink); }
body #mvp-fly-wrap { background: var(--ink); }
body #mvp-fly-wrap .mvp-fly-but-wrap span { background: #fff; }
body nav.mvp-fly-nav-menu ul li a { font-family: var(--sans); font-weight: 600; text-transform: none; font-size: 1rem; }

/* ---------- Libellés : rubrique et date ---------- */
body:not(.single) span.mvp-cd-cat {
	font-family: var(--sans);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--accent);
}
body:not(.single) span.mvp-cd-date { font-family: var(--sans); font-size: .72rem; color: var(--ink-2); }
body:not(.single) span.mvp-cd-date:before { content: "\00b7"; margin-right: 5px; }
/* Sur les photos de la une : lettres blanches */
body:not(.single) .mvp-feat1-left-wrap span.mvp-cd-cat,
body:not(.single) .mvp-widget-feat1-top-story span.mvp-cd-cat,
body:not(.single) .mvp-widget-feat2-left-cont span.mvp-cd-cat,
body:not(.single) .mvp-widget-dark-feat span.mvp-cd-cat,
body:not(.single) .mvp-feat3-main-story span.mvp-cd-cat,
body:not(.single) .mvp-feat3-sub-text span.mvp-cd-cat { color: #fff; }
body:not(.single) .mvp-feat1-left-wrap span.mvp-cd-date,
body:not(.single) .mvp-widget-feat1-top-story span.mvp-cd-date,
body:not(.single) .mvp-widget-feat2-left-cont span.mvp-cd-date { color: #e6e6e1; }

/* ---------- Une et titres de bloc ---------- */
body:not(.single) .mvp-vid-box-wrap { background: var(--accent); }
body:not(.single) .mvp-feat1-feat-text h2,
body:not(.single) .mvp-feat1-sub-text h2,
body:not(.single) .mvp-feat1-feat-text h2.mvp-stand-title {
	font-family: var(--serif);
	font-weight: 900;
	letter-spacing: -.01em;
	line-height: 1.08;
}
body:not(.single) .mvp-feat1-feat-text p { font-family: var(--serif); }

/* Titre de bloc : filet épais, texte bleu, sans étiquette inclinée */
body:not(.single) h4.mvp-widget-home-title { text-align: left; border-top: 2px solid var(--ink); margin-bottom: 18px; padding-top: 8px; }
body:not(.single) h4.mvp-widget-home-title:before { display: none; }
body:not(.single) h4.mvp-widget-home-title span.mvp-widget-home-title {
	background: none;
	color: var(--accent);
	font-family: var(--sans);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .1em;
	padding: 0;
	transform: none;
}
body:not(.single) h4.mvp-widget-home-title2 { border-top: 2px solid var(--ink); border-bottom: 0; padding-top: 8px; }
body:not(.single) h4.mvp-widget-home-title2 span.mvp-widget-home-title2 { border-bottom: 0; color: var(--accent); letter-spacing: .1em; }
body:not(.single) .mvp-widget-home { margin-top: 44px; }

/* Titres d'articles dans les listes : serif, filet fin entre les articles */
body:not(.single) .mvp-blog-story-text h2,
body:not(.single) .mvp-flex-story-text h2,
body:not(.single) .mvp-widget-feat1-top-text h2,
body:not(.single) .mvp-widget-feat1-bot-text h2,
body:not(.single) .mvp-widget-feat2-left-text h2 {
	font-family: var(--serif);
	font-weight: 700;
	letter-spacing: -.005em;
	line-height: 1.2;
}
body:not(.single) .mvp-blog-story-text p,
body:not(.single) .mvp-flex-story-text p,
body:not(.single) .mvp-widget-feat1-bot-text p { font-family: var(--serif); color: var(--ink-2); }
body:not(.single) li.mvp-blog-story-col,
body:not(.single) li.mvp-blog-story-wrap { border-top: 1px solid var(--rule); padding-top: 18px; }
body:not(.single) .mvp-main-blog-body img,
body:not(.single) .mvp-flex-story-img img { border-radius: 0; }

/* Les pages d'articles gardent la mise en page et les options du thème parent. */



/* ==========================================================================
   Ordinateur : pas de menu mobile (bouton hamburger, volet latéral)
   ========================================================================== */
@media screen and (min-width: 1004px) {
	body .mvp-nav-bot-left { display: none; }
	body .mvp-nav-bot-left-out, body .mvp-nav-bot-left-in { margin-left: 0; }
	body #mvp-fly-wrap, body .mvp-fly-fade, body #mvp-nav-small-left { display: none; }
}

/* ==========================================================================
   Pas de noir dans les blocs images : fond clair, voile bleu nuit sur les photos
   ========================================================================== */
body .mvp-mega-img, body .mvp-feat1-feat-img, body .mvp-feat1-sub-img, body .mvp-feat1-pop-img,
body .mvp-feat1-list-img, body .mvp-feat2-top-img, body .mvp-feat2-bot-img, body .mvp-feat3-main-img,
body .mvp-feat3-sub-img, body .mvp-feat4-main-img, body .mvp-feat5-mid-main-img, body .mvp-feat5-mid-sub-img,
body .mvp-feat5-small-main-img, body .mvp-widget-feat1-top-img, body .mvp-widget-feat1-bot-img,
body .mvp-widget-dark-feat-img, body .mvp-widget-dark-sub-img, body .mvp-widget-feat2-left-img,
body .mvp-widget-feat2-right-img, body .mvp-blog-story-img, body .mvp-flex-story-img,
body #mvp-post-feat-img-wide, body .mvp-related-img, body .mvp-post-more-img, body .mvp-post-gallery-wrap {
	background: var(--paper-2);
}
body #mvp-feat4-wrap, body #mvp-feat6-wrap, body .mvp-widget-dark-wrap { background: #14284f; }
body .mvp-feat1-feat-text, body .mvp-feat1-sub-text, body .mvp-feat3-main-text, body .mvp-feat3-sub-text,
body .mvp-feat2-top-text-wrap, body .mvp-feat5-text, body .mvp-widget-feat1-top-text,
body .mvp-widget-dark-feat-text, body .mvp-widget-feat2-left-text {
	background-image: linear-gradient(to bottom, rgba(20,40,79,0) 0, rgba(20,40,79,.72) 55%, rgba(20,40,79,.94) 100%);
}

/* ==========================================================================
   Bandeau date et une
   ========================================================================== */
#edito-top { border-bottom: 1px solid var(--rule); background: var(--paper); }
.edito-top-in { display: flex; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; padding: 8px 0; font: 500 .75rem/1.3 var(--sans); color: var(--ink-2); }
.edito-top-date { color: var(--ink); font-weight: 600; }
.edito-top-tag { font-family: var(--serif); font-style: italic; font-size: .85rem; }

#edito-une { width: 100%; margin: 26px 0 44px; }
.edito-une-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6.2fr) minmax(0, 3fr); align-items: stretch; }
.edito-une-col { display: flex; flex-direction: column; min-width: 0; padding: 0 22px; }
.edito-une-col + .edito-une-col { border-left: 1px solid var(--rule); }
.edito-une-left { padding-left: 0; }
.edito-une-right { padding-right: 0; }

.edito-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-bottom: 6px; font: 400 .72rem/1.2 var(--sans); color: var(--ink-2); }
.edito-cat { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.edito-cat-plain { display: block; margin-bottom: 8px; color: var(--ink-2); font-size: .72rem; }
.edito-date:before { content: "\00b7"; margin-right: 8px; }

.edito-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); line-height: 0; margin: 0 0 10px; }
.edito-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.edito-card { padding: 0 0 16px; }
.edito-card h3, .edito-item h3 { font: 700 1.1rem/1.24 var(--serif); letter-spacing: -.005em; margin: 0; }
.edito-card h3 a, .edito-item h3 a, .edito-main h2 a, .edito-read li a { color: var(--ink); }
.edito-card h3 a:hover, .edito-item h3 a:hover, .edito-main h2 a:hover, .edito-read li a:hover { color: var(--accent); }
.edito-item { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.edito-une-left .edito-card, .edito-une-right .edito-card { border-bottom: 0; }

.edito-main .edito-img { aspect-ratio: 16 / 10; margin-bottom: 14px; }
.edito-main h2 { font: 900 clamp(1.7rem, 2.6vw, 2.5rem)/1.08 var(--serif); letter-spacing: -.012em; margin: 0 0 10px; }
.edito-main p { font: 400 1.08rem/1.5 var(--serif); color: var(--ink-2); margin: 0; }
.edito-sub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ink); flex: 1 1 auto; }
.edito-sub .edito-card { padding: 0 20px 0 0; }
.edito-sub .edito-card + .edito-card { padding: 0 0 0 20px; border-left: 1px solid var(--rule); }
.edito-sub .edito-img { aspect-ratio: 16 / 10; }

.edito-read { justify-content: flex-start; }
.edito-read ol { list-style: none; counter-reset: edito; margin: 0; padding: 0; }
.edito-read li { counter-increment: edito; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 10px 0; border-top: 1px solid var(--rule); font: 600 .98rem/1.3 var(--serif); }
.edito-read li:first-child { border-top: 0; }
.edito-read li:before { content: counter(edito); font: 900 1.6rem/1 var(--serif); color: var(--accent); }


/* ==========================================================================
   À lire aussi : deux colonnes, sans colonne latérale
   ========================================================================== */
.edito-lire { padding-bottom: 20px; }
.edito-lire-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; width: 100%; margin: 0; padding: 0; list-style: none; }
.edito-lire-item { border-top: 1px solid var(--rule); padding: 18px 0; margin: 0; }
.edito-lire-item > a { display: flex; gap: 18px; align-items: flex-start; color: var(--ink); }
.edito-lire-img { flex: 0 0 38%; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); line-height: 0; }
.edito-lire-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.edito-lire-text { flex: 1 1 0; min-width: 0; }
.edito-lire-text h3 { font: 700 1.15rem/1.24 var(--serif); letter-spacing: -.005em; margin: 0 0 6px; }
.edito-lire-text p { font: 400 .95rem/1.45 var(--serif); color: var(--ink-2); margin: 0; }
.edito-lire-item > a:hover h3 { color: var(--accent); }

/* ==========================================================================
   Pied de page : sans logo, bloc « Suivez-nous »
   ========================================================================== */
body #mvp-foot-wrap { background: #14284f; border-top: 0; }
body #mvp-foot-top { padding: 44px 0 30px; }
body #edito-follow { text-align: center; margin-bottom: 30px; width: 100%; }
body .edito-follow-title { font: 800 1.7rem/1.1 var(--serif); color: #fff; margin: 0 0 18px; letter-spacing: -.01em; }
body .edito-follow-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
body .edito-follow-list li { margin: 0; }
body .edito-follow-list a {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 11px 18px;
	border: 1px solid rgba(255,255,255,.35);
	color: #fff;
	font: 600 .85rem/1 var(--sans);
	transition: background-color .2s, color .2s, border-color .2s;
}
body .edito-follow-list a i { font-size: 1.1rem; }
body .edito-follow-list a:hover { background: #fff; color: #14284f; border-color: #fff; }
body .edito-follow-whatsapp a { background: #25d366; border-color: #25d366; color: #fff; }
body .edito-follow-whatsapp a:hover { background: #1ebe5b; border-color: #1ebe5b; color: #fff; }
body #mvp-foot-menu-wrap ul li a { font-family: var(--sans); text-transform: none; font-weight: 500; color: #dfe6f5; }
body #mvp-foot-menu-wrap ul li a:hover { color: #fff; }
body #mvp-foot-bot { background: #0f1f3d; }
body #mvp-foot-copy p { font-family: var(--sans); color: #b7c3dc; }

/* ==========================================================================
   Articles : même mise en page et mêmes options que le thème parent,
   avec une lecture plus soignée. Couleurs reprises des options (--opt-*).
   ========================================================================== */
body.single span.mvp-post-cat { transform: none; letter-spacing: .1em; }
body.single h1.mvp-post-title { font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
body.single span.mvp-post-excerpt { font-size: 1.3rem; line-height: 1.5; margin-top: 18px; }
body.single #mvp-content-main p,
body.single #mvp-content-main ul li,
body.single #mvp-content-main ol li { font-size: 1.18rem; line-height: 1.72; }
body.single #mvp-content-main p { margin-bottom: 1.35em; }
body.single #mvp-content-main ul li, body.single #mvp-content-main ol li { margin-bottom: .5em; }
body.single #mvp-content-main h2 { font-size: 1.7rem; line-height: 1.2; letter-spacing: -.01em; margin-top: 1.6em; }
body.single #mvp-content-main h3 { font-size: 1.35rem; line-height: 1.25; margin-top: 1.4em; }
body.single #mvp-content-main p a,
body.single #mvp-content-main ul a,
body.single #mvp-content-main ol a { box-shadow: inset 0 -2px 0 var(--opt-link, #1f3d79); }
body.single #mvp-content-main p a:hover,
body.single #mvp-content-main ul a:hover,
body.single #mvp-content-main ol a:hover { background: color-mix(in srgb, var(--opt-link, #1f3d79) 14%, transparent); color: inherit; }
body.single #mvp-content-main blockquote {
	border-left: 4px solid var(--opt-primary, #1f3d79);
	margin: 1.8em 0;
	padding: 4px 0 4px 22px;
	font-size: 1.4rem; font-style: italic; line-height: 1.38;
}
body.single #mvp-content-main blockquote p { font-size: inherit; margin-bottom: 0; }
body.single #mvp-content-main img { height: auto; }
body.single span.mvp-feat-caption, body.single #mvp-content-main p.wp-caption-text { font-size: .82rem; line-height: 1.45; }
body.single .mvp-post-tags a { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
body.single .mvp-author-info-wrap { border-top: 1px solid currentColor; border-bottom: 1px solid #ddd; padding: 14px 0; }
body.single .mvp-post-more-text p, body.single .mvp-related-text p { line-height: 1.25; font-weight: 700; }

/* Barre de lecture (voir functions.php) */
#edito-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--opt-primary, #1f3d79); z-index: 100000; }


/* ==========================================================================
   Blocs par rubrique
   ========================================================================== */
.edito-rub { width: 100%; margin: 0 0 40px; border-top: 2px solid var(--ink); padding-top: 10px; }
.edito-rub-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.edito-rub-head h4 { margin: 0; font: 700 .9rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.edito-rub-head h4 a { color: var(--accent); }
.edito-rub-all { font: 500 .78rem/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.edito-rub-all:hover { color: var(--accent); }
.edito-rub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.edito-rub-grid .edito-card { padding: 0 18px; border-left: 1px solid var(--rule); }
.edito-rub-grid .edito-card:first-child { padding-left: 0; border-left: 0; }
.edito-rub-grid .edito-card:last-child { padding-right: 0; }

/* ==========================================================================
   Menu collant : même aspect au repos et au défilement
   ========================================================================== */
body #mvp-main-nav-top.mvp-nav-small,
body #mvp-main-nav-top.mvp-fixed,
body #mvp-main-nav-top.mvp-nav-small-fixed,
body #mvp-main-nav-top.mvp-fixed-shadow {
	position: relative !important; top: auto !important; transform: none !important;
	height: auto !important; box-shadow: none !important; transition: none !important;
}
body #mvp-main-nav-top.mvp-nav-small { padding: 22px 0 18px !important; }
body .mvp-nav-small .mvp-nav-top-wrap, body .mvp-nav-small .mvp-nav-top-mid { height: auto !important; }
body .mvp-nav-small .mvp-nav-top-mid img { height: auto !important; }
body .mvp-nav-small .mvp-nav-logo-reg { display: inline !important; }
body .mvp-nav-small .mvp-nav-logo-small, body .mvp-nav-logo-small { display: none !important; }
body #mvp-main-nav-bot, body #mvp-main-nav-bot.mvp-fixed1, body #mvp-main-nav-bot.mvp-fixed2 {
	position: relative !important; top: auto !important; transform: none !important;
	margin-top: 0 !important; height: 50px !important; box-shadow: none !important; transition: none !important;
}
body #mvp-main-body-wrap { margin-top: 0 !important; }
body .mvp-drop-nav-title { display: none !important; }

body .edito-stuck { position: fixed !important; top: 0 !important; left: 0; right: 0; width: 100%; z-index: 99990; box-shadow: 0 2px 14px rgba(0,0,0,.12) !important; }
body.admin-bar .edito-stuck { top: 32px !important; }
@media screen and (max-width: 782px) { body.admin-bar .edito-stuck { top: 46px !important; } }
body #mvp-main-nav-top.edito-stuck { padding: 8px 0 !important; border-bottom: 1px solid var(--ink); }
body #mvp-main-nav-top.edito-stuck .mvp-nav-top-mid img { max-height: 32px; }

/* ==========================================================================
   Téléphone : menu, logo et bandeau
   ========================================================================== */
@media screen and (max-width: 1003px) {
	body #mvp-main-nav-top { padding: 12px 0 !important; border-bottom-width: 1px; border-bottom-style: solid; }
	body .mvp-nav-top-mid img { max-height: 34px; }
	body .mvp-nav-top-left .mvp-fly-but-wrap { display: block; opacity: 1; }
	body .mvp-nav-top-left .mvp-fly-but-wrap span { background: var(--ink); }
	body .mvp-nav-logo-reg { display: inline !important; }
	body #mvp-main-nav-bot { display: none !important; }
	body #mvp-fly-wrap { display: block; }
}

/* ==========================================================================
   Adaptation aux écrans plus étroits
   ========================================================================== */
@media screen and (max-width: 1199px) { .edito-top-in { padding-left: 15px; padding-right: 15px; } }
@media screen and (max-width: 859px) {
	.edito-une-grid { grid-template-columns: minmax(0, 1fr); }
	.edito-une-col, .edito-une-left, .edito-une-right { padding: 16px 0; border-left: 0 !important; }
	.edito-une-col + .edito-une-col { border-top: 1px solid var(--rule); }
	.edito-une-main { order: -1; padding-top: 0; }
	.edito-item { flex: 0 0 auto; }
	.edito-rub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
	.edito-rub-grid .edito-card:nth-child(odd) { padding-left: 0; border-left: 0; }
	.edito-rub-grid .edito-card:nth-child(even) { padding-right: 0; }
	.edito-top-tag { display: none; }
}
@media screen and (max-width: 700px) {
	.edito-lire-list { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 520px) {
	.edito-sub { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
	.edito-sub .edito-card, .edito-sub .edito-card + .edito-card { padding: 0; border-left: 0; }
	.edito-rub-grid { grid-template-columns: minmax(0, 1fr); }
	.edito-rub-grid .edito-card, .edito-rub-grid .edito-card:nth-child(even) { padding: 0; border-left: 0; }
	.edito-lire-img { flex-basis: 34%; }
	body.single #mvp-content-main p, body.single #mvp-content-main ul li, body.single #mvp-content-main ol li { font-size: 1.08rem; }
	body.single span.mvp-post-excerpt { font-size: 1.12rem; }
}
@media (prefers-reduced-motion: reduce) { body * { transition: none !important; } }
