/*
Theme Name: Talus Pivoine
Template: generatepress
Version: 1.0.0
Description: Habillage sur mesure pour Mijote et Moi
Author: Mijote et Moi
Text Domain: talus-pivoine
*/

/* ---------------------------------------------------------------------------
   Jetons — palette slate-professional, largeur compacte, angles droits,
   aucune ombre. Tout ce que GeneratePress expose comme option vit dans
   generate_settings ; ce fichier couvre les manques documentés du parent.
   --------------------------------------------------------------------------- */
:root {
	--tp-primaire: #334155;
	--tp-seconde: #64748B;
	--tp-accent: #475569;
	--tp-clair: #EFF1F5;
	--tp-surface: #F8FAFC;
	--tp-fond: #FFFFFF;
	--tp-encre: #0F172A;
	--tp-encre-douce: #64748B;
	--tp-filet: #E2E8F0;
	--tp-angle: 0;
	--tp-ombre: none;
	--tp-respir: 2rem;
	--tp-bloc: 1rem;
	--tp-marge: 1rem;
}

/* Piles de repli propres à ce site (§17b). */
body,
.entry-content,
input,
textarea,
select {
	font-family: 'Inter', 'Helvetica Neue', sans-serif;
	color: var(--tp-encre);
}

h1, h2, h3, h4, h5, h6,
.main-navigation a,
.site-title {
	font-family: 'Bitter', Palatino, serif;
}

a { color: var(--tp-primaire); }
a:hover, a:focus { color: var(--tp-accent); }

/* ---------------------------------------------------------------------------
   Empreinte éditoriale mobile
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.inside-navigation::before {
		content: "Des recettes du quotidien, cuisinées avec envie et sans chichis.";
		font-style: italic;
		position: absolute;
		left: var(--gap-small, 8px);
		top: 50%;
		transform: translateY(-50%);
		font-size: 14px;
		color: var(--tp-encre-douce);
		max-width: 62%;
		line-height: 1.3;
	}
	.inside-navigation { position: relative; }
}

/* L'en-tête mobile prend sa hauteur du logo (50px). Le bouton de menu de
   GeneratePress monte à 48px de line-height plus ses marges internes et
   dépasse la barre de 5px en haut comme en bas. On l'aligne sur le logo
   plutôt que de le sortir du flux, ce qui ferait retomber la barre sur la
   seule hauteur du logo (gate mobile-hamburger-position). */
#mobile-header .menu-toggle,
.main-navigation .menu-toggle {
	line-height: 50px;
	padding-top: 0;
	padding-bottom: 0;
}

/* Bouton d'envoi des formulaires — palette primaire imposée. */
body button.wpforms-submit,
body .wpcf7-submit,
body .ff-btn-submit {
	background-color: #334155 !important;
	color: #ffffff !important;
}
body button.wpforms-submit:hover,
body .wpcf7-submit:hover,
body .ff-btn-submit:hover {
	filter: brightness(0.88) !important;
}

/* ---------------------------------------------------------------------------
   sig-E — sans colonne latérale, conteneurs séparés, navigation au-dessus de
   l'en-tête. Les boîtes séparées portent un filet net, sans arrondi ni ombre.
   --------------------------------------------------------------------------- */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.separate-containers .inside-page-header {
	background-color: var(--tp-fond);
	border: 1px solid var(--tp-filet);
	border-radius: var(--tp-angle);
	box-shadow: var(--tp-ombre);
}

.separate-containers .site-main > * + * { margin-top: var(--tp-bloc); }

.site-content { gap: var(--tp-bloc); }

/* Navigation au-dessus de l'en-tête : filet haut et bas, fond très clair. */
.main-navigation {
	background-color: var(--tp-clair);
	border-top: 1px solid var(--tp-filet);
	border-bottom: 1px solid var(--tp-filet);
}

.main-navigation .main-nav > ul > li > a {
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.015em;
}

.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-category-ancestor > a {
	color: var(--tp-primaire);
	box-shadow: inset 0 -3px 0 var(--tp-seconde);
}

.site-header { background-color: var(--tp-fond); }

/* ---------------------------------------------------------------------------
   Titre H1 de la page d'accueil — §26, doit rester visible.
   --------------------------------------------------------------------------- */
.site-tagline-heading {
	display: block;
	text-align: center;
	padding: 0.5rem 1rem;
	font-size: 1.1rem;
	color: inherit;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Accueil — hero author-intro, « Les nouveautés », « Par thème ».
   Aucune règle horizontale, aucun bloc d'espacement (§18c / §19a).
   --------------------------------------------------------------------------- */
.tp-presentation {
	display: flow-root;
	margin-bottom: var(--tp-respir);
}

.tp-presentation .tp-portrait {
	float: left;
	width: 132px;
	height: 132px;
	margin: 0 1.25rem 0.75rem 0;
	object-fit: cover;
	border: 1px solid var(--tp-filet);
}

.tp-presentation p {
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--tp-encre-douce);
	margin: 0 0 0.85rem;
}

.tp-lien-suite {
	font-family: 'Bitter', Palatino, serif;
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
}

.tp-titre-section {
	font-size: 1.38rem;
	margin: 0 0 var(--tp-bloc);
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--tp-primaire);
}

.tp-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
	gap: var(--tp-marge);
	margin-bottom: var(--tp-respir);
}

.tp-grille article {
	background-color: var(--tp-fond);
	border: 1px solid var(--tp-filet);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.tp-grille article img {
	width: 100%;
	height: 172px;
	object-fit: cover;
	display: block;
}

.tp-carte-corps { padding: 0.9rem 1rem 1.1rem; }

.tp-surtitre {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--tp-seconde);
	margin-bottom: 0.4rem;
}

.tp-grille h3 {
	font-size: 1.06rem;
	line-height: 1.32;
	margin: 0 0 0.45rem;
}

.tp-grille h3 a { text-decoration: none; }

.tp-grille p {
	font-size: 0.91rem;
	color: var(--tp-encre-douce);
	margin: 0 0 0.6rem;
	line-height: 1.6;
}

.tp-date {
	display: block;
	font-size: 0.78rem;
	color: var(--tp-seconde);
	margin-bottom: 0.55rem;
}

/* Bande « Par thème » */
.tp-themes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: var(--tp-marge);
	margin-bottom: var(--tp-bloc);
}

.tp-theme {
	display: block;
	padding: 1.1rem 1.2rem;
	background-color: var(--tp-surface);
	border: 1px solid var(--tp-filet);
	border-left: 4px solid var(--tp-primaire);
	text-decoration: none;
	color: var(--tp-encre);
}

.tp-theme:hover { background-color: var(--tp-clair); }

.tp-theme h3 {
	font-size: 1rem;
	margin: 0 0 0.4rem;
	color: var(--tp-primaire);
}

.tp-theme p {
	font-size: 0.88rem;
	color: var(--tp-encre-douce);
	margin: 0 0 0.5rem;
	line-height: 1.6;
}

.tp-compte {
	font-size: 0.73rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--tp-seconde);
}

/* ---------------------------------------------------------------------------
   Signature et fiche de l'autrice sur les articles
   --------------------------------------------------------------------------- */
.tp-signature {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0.5rem 0 1rem;
	font-size: 0.87rem;
	color: var(--tp-encre-douce);
}

.tp-signature img { object-fit: cover; border: 1px solid var(--tp-filet); }

.tp-signature a { font-weight: 700; text-decoration: none; }

.tp-fiche {
	display: flex;
	gap: 1.1rem;
	align-items: flex-start;
	margin-top: var(--tp-marge);
	padding: 1.1rem 1.2rem;
	background-color: var(--tp-surface);
	border: 1px solid var(--tp-filet);
	border-top: 3px solid var(--tp-primaire);
}

.tp-fiche img { object-fit: cover; flex: 0 0 auto; border: 1px solid var(--tp-filet); }

.tp-fiche-nom {
	display: block;
	font-family: 'Bitter', Palatino, serif;
	font-weight: 700;
	font-size: 1rem;
}

.tp-fiche-nom a { text-decoration: none; }

.tp-fiche-lieu {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--tp-seconde);
	margin-bottom: 0.45rem;
}

.tp-fiche p {
	margin: 0;
	font-size: 0.91rem;
	line-height: 1.65;
	color: var(--tp-encre-douce);
}

@media (max-width: 600px) {
	.tp-fiche { flex-direction: column; }
	.tp-presentation .tp-portrait { float: none; display: block; margin: 0 auto 1rem; }
}

/* Portrait flottant à gauche sur la page de présentation — about-left-float (§6). */
.wp-block-image.alignleft img,
.tp-portrait-page {
	border: 1px solid var(--tp-filet);
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Pied de page — 2-col-light
   --------------------------------------------------------------------------- */
.site-footer .footer-widgets {
	background-color: var(--tp-surface);
	border-top: 1px solid var(--tp-filet);
}

.site-footer .footer-widgets .widget-title {
	font-family: 'Bitter', Palatino, serif;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tp-primaire);
	margin-bottom: 0.7rem;
}

.site-footer .footer-widgets a { text-decoration: none; color: var(--tp-encre); }

.site-footer .footer-widgets a:hover { color: var(--tp-accent); }

.site-footer .footer-widgets ul { list-style: none; margin: 0; padding: 0; }

.site-footer .footer-widgets li { margin-bottom: 0.35rem; font-size: 0.92rem; }

.site-footer .footer-widgets p {
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--tp-encre-douce);
}

.site-info {
	background-color: var(--tp-fond);
	border-top: 1px solid var(--tp-filet);
	font-size: 0.84rem;
	color: var(--tp-encre-douce);
}

.site-info a { text-decoration: none; }

/* ---------------------------------------------------------------------------
   Formulaires et champ de recherche (§8)
   --------------------------------------------------------------------------- */
.search-field,
.wp-block-search__input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
	background-color: var(--tp-clair);
	border: 1px solid var(--tp-filet);
	border-radius: var(--tp-angle);
	padding: 0.6rem 0.85rem;
	font-family: 'Inter', 'Helvetica Neue', sans-serif;
	font-size: 0.95rem;
	color: var(--tp-encre);
	width: 100%;
}

.search-field:focus,
.wp-block-search__input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus {
	border-color: var(--tp-primaire);
	background-color: var(--tp-fond);
	outline: none;
}

button,
.button,
input[type="submit"],
.search-submit,
.wp-block-search__button,
.wpforms-submit {
	border-radius: var(--tp-angle);
	border: none;
	font-family: 'Bitter', Palatino, serif;
	font-weight: 700;
	padding: 0.6rem 1.15rem;
	cursor: pointer;
}

.wpforms-field-label { font-weight: 700; font-size: 0.93rem; }

.wpforms-container .wpforms-form .wpforms-field { padding: 0.55rem 0; }

/* ---------------------------------------------------------------------------
   Contenu d'article
   --------------------------------------------------------------------------- */
.entry-content { line-height: 1.78; }

.entry-content h2 {
	font-size: 1.44rem;
	margin-top: 2.2rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--tp-filet);
}

.entry-content h3 { font-size: 1.14rem; margin-top: 1.7rem; }

.entry-content img,
.wp-block-image img,
.post-image img { border-radius: var(--tp-angle); }

.entry-content figure { margin: 1.5rem 0; }

.entry-content figcaption {
	font-size: 0.83rem;
	color: var(--tp-seconde);
	text-align: left;
	margin-top: 0.4rem;
	line-height: 1.5;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.92rem;
}

.entry-content table th {
	background-color: var(--tp-clair);
	font-family: 'Bitter', Palatino, serif;
	font-size: 0.86rem;
	text-align: left;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid var(--tp-filet);
	padding: 0.55rem 0.7rem;
}

.entry-content blockquote {
	border-left: 4px solid var(--tp-primaire);
	background-color: var(--tp-surface);
	margin: 1.5rem 0;
	padding: 0.9rem 1.2rem;
	font-style: italic;
	color: var(--tp-encre-douce);
}

.entry-content ul,
.entry-content ol { line-height: 1.75; }

/* Bloc pratique (listes de repères, étapes chiffrées) */
.tp-pratique {
	background-color: var(--tp-surface);
	border: 1px solid var(--tp-filet);
	border-left: 4px solid var(--tp-seconde);
	padding: 1rem 1.2rem;
	margin: 1.6rem 0;
}

.tp-pratique h3 { margin-top: 0; font-size: 1.05rem; }

.tp-pratique p:last-child,
.tp-pratique ul:last-child { margin-bottom: 0; }

/* En-têtes d'archive et de page */
.page-header h1,
.page-header .page-title { font-size: 1.5rem; margin: 0; }

.taxonomy-description {
	margin-top: 0.55rem;
	color: var(--tp-encre-douce);
	font-size: 0.96rem;
	line-height: 1.7;
}

/* Vignettes d'archive */
.post-image img { width: 100%; object-fit: cover; }

.tp-carte-suite { margin: 0.6rem 0 0; }

.single-post .featured-image img,
.single-post .post-image img {
	max-height: 360px;
	width: 100%;
	object-fit: cover;
}

/* Pagination */
.paging-navigation .nav-links a,
.paging-navigation .page-numbers { border-radius: var(--tp-angle); }

/* Page 404 */
.tp-404 { max-width: 40rem; }

.tp-404 p { color: var(--tp-encre-douce); line-height: 1.75; }

.tp-404 .tp-404-liens { margin-top: var(--tp-bloc); }

.tp-404 .tp-404-liens li { margin-bottom: 0.35rem; }