/*
Theme Name: Univers Pleine Santé — Le Journal
Theme URI: https://fredenutrisante.fr/
Author: FrédéNutriSanté
Description: Thème blog sobre, aligné visuellement sur le site Univers Pleine Santé (FrédéNutriSanté) : mêmes couleurs, même logo, même navigation, même footer. Conçu pour que le passage du site au Journal soit invisible pour le visiteur.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ups-journal
Tags: blog, one-column, right-sidebar, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ---------------------------------------------------------------
   Couleurs relevées sur https://fredenutrisante.fr (palette Astra)
   --------------------------------------------------------------- */
:root {
	--ups-bg:          #fdfaf1; /* fond de page / header */
	--ups-soft:        #e3e9d8; /* fond du footer */
	--ups-text:        #343f1e; /* texte principal & titres */
	--ups-accent:      #70a309; /* accent (onglet actif, liens) */
	--ups-accent-dark: #5c8607; /* accent survol */
	--ups-line:        rgba(53, 64, 31, 0.24);
	--ups-line-soft:   rgba(53, 64, 31, 0.12);
	--ups-white:       #ffffff;

	--ups-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--ups-font-heading: "Marcellus", Georgia, "Times New Roman", serif;

	--ups-max: 1200px;
	--ups-radius: 10px;
}

/* ------------------------------ Reset ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ups-bg);
	color: var(--ups-text);
	font-family: var(--ups-font-body);
	font-size: 16px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; height: auto; }
img { display: block; }

a { color: var(--ups-accent-dark); text-decoration: none; }
a:hover, a:focus { color: var(--ups-accent); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ups-font-heading);
	font-weight: 400;
	color: var(--ups-text);
	line-height: 1.2;
	margin: 0 0 .6em;
	overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h5, h6 { font-size: 1.05rem; }

p, ul, ol, dl, blockquote, pre, table, figure { margin: 0 0 1.35em; }

blockquote {
	margin-left: 0;
	padding: .2em 0 .2em 1.25em;
	border-left: 3px solid var(--ups-accent);
	font-family: var(--ups-font-heading);
	font-size: 1.15rem;
}

code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
pre { background: var(--ups-white); border: 1px solid var(--ups-line-soft); border-radius: var(--ups-radius); padding: 1rem; overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--ups-line-soft); padding: .55rem .7rem; text-align: left; }

hr { border: 0; border-top: 1px solid var(--ups-line-soft); margin: 2.5rem 0; }

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--ups-accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--ups-text); color: var(--ups-bg);
	padding: .6rem 1rem; border-radius: 0 0 var(--ups-radius) 0;
}
.skip-link:focus { left: 0; color: var(--ups-bg); }

/* ------------------------------ Layout ----------------------------- */
.ups-wrap {
	width: 100%;
	max-width: var(--ups-max);
	margin-inline: auto;
	padding-inline: 24px;
}

.ups-main {
	padding: clamp(2rem, 5vw, 4rem) 0;
}
.ups-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}
.ups-layout--sidebar { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
	.ups-layout--sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
}

/* ------------------------------ Header ----------------------------- */
/* Robustesse : le header ne casse pas si le titre est long ou s'il n'y a
   pas de logo — la marque est bornée en largeur, le titre passe à la ligne
   et le menu se replie sans jamais chevaucher. */
.ups-header {
	background: var(--ups-bg);
	border-bottom: 1px solid var(--ups-line-soft);
	position: relative;
	z-index: 50;
}
.ups-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	min-height: 96px;
	padding-block: 12px;
}

.ups-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;          /* autorise le rétrécissement */
	max-width: 100%;
	flex: 0 1 auto;
	color: var(--ups-text);
	text-decoration: none;
}
.ups-logo:hover, .ups-logo:focus { text-decoration: none; color: var(--ups-text); }
.ups-logo__img {
	width: auto;
	height: 72px;
	max-height: 72px;
	flex: 0 0 auto;
	object-fit: contain;
}
.ups-logo__text {
	min-width: 0;
	max-width: 30ch;        /* largeur bornée : jamais de débordement */
	display: flex;
	flex-direction: column;
}
.ups-logo__name {
	font-family: var(--ups-font-heading);
	font-size: 1.15rem;
	line-height: 1.25;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	margin: 0;
}
.ups-logo__tagline {
	font-size: .78rem;
	line-height: 1.35;
	opacity: .75;
	overflow-wrap: break-word;
}
/* Sans logo image, on laisse respirer le titre seul. */
.ups-logo--text-only .ups-logo__text { max-width: 42ch; }

.ups-header__right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px 18px;
	min-width: 0;
	flex: 1 1 auto;
}

/* Navigation */
.ups-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 2px 6px;
}
.ups-nav__link {
	display: inline-block;
	padding: 8px 16px;
	font-family: var(--ups-font-body);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--ups-text);
	white-space: nowrap;
	text-decoration: none;
}
.ups-nav__link:hover,
.ups-nav__link:focus {
	color: var(--ups-accent);
	text-decoration: none;
}
/* Onglet actif : même mise en valeur que sur le site principal (vert). */
.ups-nav__item--current > .ups-nav__link {
	color: var(--ups-accent);
}

/* Bouton téléphone, comme dans le header du site principal. */
.ups-phone {
	display: inline-block;
	padding: 12px 26px;
	border: 1px solid var(--ups-text);
	border-radius: 60px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ups-text);
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ups-phone:hover, .ups-phone:focus {
	background: var(--ups-text);
	border-color: var(--ups-text);
	color: var(--ups-bg);
	text-decoration: none;
}

/* Bascule mobile — 100 % CSS, aucune dépendance JavaScript. */
.ups-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.ups-nav-toggle__label {
	display: none;
	align-items: center;
	gap: 9px;
	padding: 10px 16px;
	border: 1px solid var(--ups-line);
	border-radius: 60px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	user-select: none;
}
.ups-nav-toggle__bars {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 18px; height: 12px;
}
.ups-nav-toggle__bars span {
	display: block; height: 2px; width: 100%;
	background: currentColor; border-radius: 2px;
}

/* Entre 901 et 1120 px : on resserre un peu le menu pour qu'il tienne
   sur une seule ligne, même si le titre du site est affiché en texte. */
@media (min-width: 901px) and (max-width: 1120px) {
	.ups-nav__link { padding: 8px 10px; }
	.ups-header__right { gap: 8px 10px; }
	.ups-phone { padding: 11px 18px; font-size: 14px; }
}

@media (max-width: 900px) {
	.ups-header__inner { min-height: 78px; }
	.ups-logo__img { height: 58px; max-height: 58px; }
	.ups-header__right { flex: 0 0 auto; gap: 10px; }
	.ups-nav-toggle__label { display: inline-flex; }
	.ups-nav {
		order: 3;
		flex: 0 0 100%;
		display: none;
	}
	.ups-nav-toggle:checked ~ .ups-nav { display: block; }
	.ups-nav__list {
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		padding: 6px 0 12px;
		border-top: 1px solid var(--ups-line-soft);
	}
	.ups-nav__link { padding: 12px 2px; white-space: normal; }
	.ups-phone { padding: 10px 18px; font-size: 14px; }
}
@media (max-width: 520px) {
	.ups-wrap { padding-inline: 18px; }
	.ups-logo__img { height: 48px; max-height: 48px; }
	.ups-logo__text { max-width: 18ch; }
	.ups-logo__name { font-size: 1rem; }
	.ups-logo__tagline { display: none; }
	.ups-phone { display: none; }   /* le numéro reste dans le footer */
}

/* ------------------------- En-tête de page ------------------------- */
.ups-page-header {
	padding: clamp(2rem, 5vw, 3.25rem) 0 0;
}
.ups-page-header__title { margin-bottom: .3em; }
.ups-page-header__desc { margin: 0; max-width: 70ch; opacity: .85; }

/* --------------------------- Liste d'articles ---------------------- */
.ups-posts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 700px) {
	.ups-posts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ups-card {
	background: var(--ups-white);
	border: 1px solid var(--ups-line-soft);
	border-radius: var(--ups-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.ups-card__thumb { display: block; }
.ups-card__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ups-card__body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.ups-card__title { font-size: 1.45rem; margin-bottom: .35em; }
.ups-card__title a { color: var(--ups-text); }
.ups-card__title a:hover, .ups-card__title a:focus { color: var(--ups-accent); text-decoration: none; }
.ups-card__excerpt { margin-bottom: 1.2rem; }
.ups-card__more { margin-top: auto; align-self: flex-start; }

.entry-meta {
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .7;
	margin: 0 0 .7em;
}
.entry-meta a { color: inherit; }
.entry-meta__sep { margin: 0 .5em; }

.ups-link {
	display: inline-block;
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ups-accent-dark);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.ups-link:hover, .ups-link:focus { color: var(--ups-accent); text-decoration: none; }

/* ----------------------------- Article ----------------------------- */
.ups-entry { max-width: 76ch; }
.ups-entry__thumb { margin: 0 0 2rem; }
.ups-entry__thumb img { width: 100%; border-radius: var(--ups-radius); }
.ups-entry__content > *:last-child { margin-bottom: 0; }
.ups-entry__content a { text-decoration: underline; }
.ups-entry__content img { border-radius: var(--ups-radius); }
.ups-entry__footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ups-line-soft); }
.ups-tags { font-size: .85rem; }

.ups-post-nav {
	display: grid;
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ups-line-soft);
}
@media (min-width: 640px) { .ups-post-nav { grid-template-columns: 1fr 1fr; } }
.ups-post-nav__label {
	display: block; font-size: .75rem; text-transform: uppercase;
	letter-spacing: .06em; opacity: .65; margin-bottom: .2rem;
}
.ups-post-nav__next { text-align: right; }
@media (max-width: 639px) { .ups-post-nav__next { text-align: left; } }

/* ---------------------------- Pagination --------------------------- */
.navigation.pagination { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.page-numbers {
	display: inline-block;
	min-width: 42px;
	padding: 8px 12px;
	text-align: center;
	border: 1px solid var(--ups-line);
	border-radius: 60px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ups-text);
}
.page-numbers:hover, .page-numbers:focus { border-color: var(--ups-accent); color: var(--ups-accent); text-decoration: none; }
.page-numbers.current { background: var(--ups-accent); border-color: var(--ups-accent); color: var(--ups-white); }
.page-numbers.dots { border-color: transparent; }

/* --------------------------- Recherche ----------------------------- */
.ups-search-form { display: flex; gap: 8px; max-width: 460px; }
.ups-search-form__field {
	flex: 1 1 auto; min-width: 0;
	padding: 11px 16px;
	border: 1px solid var(--ups-line);
	border-radius: 60px;
	background: var(--ups-white);
	font: inherit; font-size: .95rem;
	color: var(--ups-text);
}
.ups-search-form__field::placeholder { color: rgba(53, 64, 31, .5); }
.ups-search-form__submit {
	flex: 0 0 auto;
	padding: 11px 22px;
	border: 1px solid var(--ups-text);
	border-radius: 60px;
	background: transparent;
	font: inherit; font-size: .85rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--ups-text);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.ups-search-form__submit:hover { background: var(--ups-text); color: var(--ups-bg); }

/* ---------------------------- Sidebar ------------------------------ */
.ups-sidebar { font-size: .95rem; }
.ups-sidebar .widget {
	background: var(--ups-white);
	border: 1px solid var(--ups-line-soft);
	border-radius: var(--ups-radius);
	padding: 1.4rem 1.5rem;
	margin-bottom: 1.5rem;
}
.ups-sidebar .widget:last-child { margin-bottom: 0; }
.widget-title { font-size: 1.15rem; margin-bottom: .8em; }
.ups-sidebar ul { list-style: none; margin: 0; padding: 0; }
.ups-sidebar li + li { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--ups-line-soft); }
.ups-sidebar a { color: var(--ups-text); }
.ups-sidebar a:hover, .ups-sidebar a:focus { color: var(--ups-accent); }

/* --------------------------- Commentaires -------------------------- */
.ups-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--ups-line-soft); max-width: 76ch; }
.ups-comments__title { font-size: 1.5rem; }
.comment-list { list-style: none; margin: 0 0 2rem; padding: 0; }
.comment-list ol.children { list-style: none; margin: 1.2rem 0 0 0; padding-left: clamp(.8rem, 3vw, 2rem); border-left: 1px solid var(--ups-line-soft); }
.comment-body {
	background: var(--ups-white);
	border: 1px solid var(--ups-line-soft);
	border-radius: var(--ups-radius);
	padding: 1.2rem 1.35rem;
	margin-bottom: 1.2rem;
}
.comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .6rem; font-size: .85rem; }
.comment-author img { border-radius: 50%; }
.comment-author { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.comment-metadata { opacity: .7; }
.comment-content > *:last-child { margin-bottom: 0; }
.reply { font-size: .82rem; }
.comment-reply-link { font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.comment-respond { background: var(--ups-white); border: 1px solid var(--ups-line-soft); border-radius: var(--ups-radius); padding: 1.5rem 1.6rem; }
.comment-reply-title { font-size: 1.3rem; }
.comment-form p { margin-bottom: 1rem; }
.comment-form label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--ups-line);
	border-radius: var(--ups-radius);
	background: var(--ups-bg);
	font: inherit; font-size: .95rem;
	color: var(--ups-text);
}
.comment-form textarea { min-height: 150px; resize: vertical; }
.comment-form .form-submit input, .ups-button {
	display: inline-block;
	padding: 12px 26px;
	border: 1px solid var(--ups-text);
	border-radius: 60px;
	background: transparent;
	font: inherit; font-size: .85rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--ups-text);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.comment-form .form-submit input:hover, .ups-button:hover, .ups-button:focus {
	background: var(--ups-text); color: var(--ups-bg); text-decoration: none;
}
.comment-notes, .comment-form-cookies-consent label { font-size: .85rem; font-weight: 400; opacity: .8; }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: .5rem; }
.comment-form-cookies-consent input { margin-top: .45rem; }
.no-comments { opacity: .8; }

/* ------------------------------- 404 ------------------------------- */
.ups-404 { max-width: 62ch; padding-block: clamp(1rem, 4vw, 2rem); }
.ups-404__links { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ups-404__links li + li { margin-top: .5rem; }

/* ------------------------------ Footer ----------------------------- */
.ups-footer {
	background: var(--ups-soft);
	color: var(--ups-text);
	margin-top: auto;
}
.ups-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3rem);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 700px)  { .ups-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ups-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.ups-footer__brand { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.ups-footer__logo img { height: 96px; max-height: 96px; width: auto; object-fit: contain; }
.ups-footer__baseline { margin: 0; max-width: 34ch; }

.ups-footer__title {
	font-family: var(--ups-font-body);
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 1.1rem;
}
.ups-footer__list { list-style: none; margin: 0; padding: 0; }
.ups-footer__list li + li { margin-top: .55rem; }
.ups-footer a { color: var(--ups-text); }
.ups-footer a:hover, .ups-footer a:focus { color: var(--ups-accent-dark); }
.ups-footer__contact p { margin: 0 0 1.1rem; }
.ups-footer__contact p:last-of-type { margin-bottom: 1.3rem; }

.ups-social { display: flex; align-items: center; gap: 16px; }
.ups-social a { display: inline-flex; color: var(--ups-accent); }
.ups-social a:hover, .ups-social a:focus { color: var(--ups-accent-dark); }
.ups-social svg { width: 20px; height: 20px; fill: currentColor; display: block; }

.ups-footer__bottom {
	border-top: 1px solid rgba(53, 64, 31, .18);
}
.ups-footer__bottom-inner {
	padding-block: 1.4rem;
	font-size: .88rem;
}
.ups-footer__bottom-inner p { margin: 0; }

/* -------------------- Alignements du contenu WP --------------------- */
.alignleft  { float: left;  margin: .4rem 1.6rem 1.2rem 0; }
.alignright { float: right; margin: .4rem 0 1.2rem 1.6rem; }
.aligncenter { margin-inline: auto; }
.wp-caption-text, figcaption { font-size: .85rem; opacity: .75; margin-top: .5rem; }
.sticky .ups-card { border-color: var(--ups-accent); }
.entry-content::after { content: ""; display: table; clear: both; }

/* --------------------------- Page complète -------------------------- */
.ups-site { display: flex; flex-direction: column; min-height: 100vh; }

@media print {
	.ups-header, .ups-footer, .ups-sidebar, .ups-post-nav, .ups-comments { display: none !important; }
}